npm - @nextcloud/vue - Versions diffs - 8.38.0 → 8.40.0 - Mend

@nextcloud/vue 8.38.0 → 8.40.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (573) hide show

package/dist/chunks/{NcHeaderMenu-BZnnbLTo.mjs.map → NcHeaderMenu-jHItu4LV.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcHeaderMenu-BZnnbLTo.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\tstyle=\"padding-inline: 8px;\"\n\t\t\t\ttype=\"search\"\n\t\t\t\t:value.sync=\"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: right;\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<template>\n\t<component\n\t\t:is=\"wrapperTag\"\n\t\t:id=\"id\"\n\t\tref=\"headerMenu\"\n\t\tv-click-outside=\"clickOutsideConfig\"\n\t\t:aria-labelledby=\"isNav ? triggerId : null\"\n\t\t:class=\"{ 'header-menu--opened': opened }\"\n\t\tclass=\"header-menu\"\n\t\tv-on=\"listeners\">\n\t\t<!-- Trigger -->\n\t\t<NcButton\n\t\t\t:id=\"isNav ? triggerId : null\"\n\t\t\tref=\"trigger\"\n\t\t\tclass=\"header-menu__trigger\"\n\t\t\t:aria-controls=\"`header-menu-${id}`\"\n\t\t\t:aria-describedby=\"description ? descriptionId : null\"\n\t\t\t:aria-expanded=\"opened.toString()\"\n\t\t\t:aria-label=\"ariaLabel\"\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 Icon trigger slot. Make sure the svg path\n\t\t\t\tis at least 16px. Usually mdi icon works at 20px -->\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=\"opened\" class=\"header-menu__carret\" />\n\n\t\t<!-- Menu opened content -->\n\t\t<div\n\t\t\tv-show=\"opened\"\n\t\t\t:id=\"`header-menu-${id}`\"\n\t\t\tclass=\"header-menu__wrapper\">\n\t\t\t<div ref=\"content\" class=\"header-menu__content\">\n\t\t\t\t<!-- @slot Main content -->\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t</div>\n\t</component>\n</template>\n\n<script>\nimport { vOnClickOutside as ClickOutside } from '@vueuse/components'\nimport { createFocusTrap } from 'focus-trap'\nimport { ref } from 'vue'\nimport { useTrapStackControl } from '../../composables/useTrapStackControl.ts'\nimport { clickOutsideOptions } from '../../mixins/index.js'\nimport { getTrapStack } from '../../utils/focusTrap.ts'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport NcButton from '../NcButton/index.js'\n\nexport default {\n\tname: 'NcHeaderMenu',\n\n\tcomponents: {\n\t\tNcButton,\n\t},\n\n\tdirectives: {\n\t\tClickOutside,\n\t},\n\n\tmixins: [\n\t\tclickOutsideOptions,\n\t],\n\n\tprops: {\n\t\t/*\n\t\t Unique id for this menu\n\t\t /\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/\n\t\t aria-label attribute of the menu open button\n\t\t /\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Current menu open state\n\t\t /\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Pass `true` if the header menu is used for website navigation\n\t\t \n\t\t The wrapper tag will be set to `nav` and its `aria-labelledby`\n\t\t * will be associated with the menu open button\n\t\t /\n\t\tisNav: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Additional visually hidden description text for the menu\n\t\t * open button\n\t\t /\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: [\n\t\t'close',\n\t\t'closed',\n\t\t'open',\n\t\t'opened',\n\t\t'update:open',\n\t\t'cancel',\n\t],\n\n\tsetup(props) {\n\t\tconst opened = ref(props.open)\n\n\t\t// When component has its own custom focus management\n\t\t// The global focus trap stack should be paused\n\t\tuseTrapStackControl(opened, {\n\t\t\tdisabled: () => !props.isNav,\n\t\t})\n\n\t\treturn {\n\t\t\topened,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tfocusTrap: null,\n\t\t\tshortcutsDisabled: window.OCP?.Accessibility?.disableKeyboardShortcuts?.(),\n\t\t\ttriggerId: GenRandomId(),\n\t\t\tdescriptionId: GenRandomId(),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\twrapperTag() {\n\t\t\treturn this.isNav ? 'nav' : 'div'\n\t\t},\n\n\t\tclickOutsideConfig() {\n\t\t\treturn [\n\t\t\t\tthis.closeMenu,\n\t\t\t\tthis.clickOutsideOptions,\n\t\t\t]\n\t\t},\n\n\t\tlisteners() {\n\t\t\tif (this.isNav) {\n\t\t\t\treturn {\n\t\t\t\t\tfocusout: this.onFocusOut,\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn null\n\t\t},\n\t},\n\n\twatch: {\n\t\topen(open) {\n\t\t\tif (open) {\n\t\t\t\tthis.openMenu()\n\t\t\t} else {\n\t\t\t\tthis.closeMenu()\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\tdocument.addEventListener('keydown', this.onKeyDown)\n\t},\n\n\tbeforeDestroy() {\n\t\tdocument.removeEventListener('keydown', this.onKeyDown)\n\t},\n\n\tmethods: {\n\t\t/\n\t\t Toggle the current menu open state\n\t\t /\n\t\ttoggleMenu() {\n\t\t\t// Toggling current state\n\t\t\tif (!this.opened) {\n\t\t\t\tthis.openMenu()\n\t\t\t} else {\n\t\t\t\tthis.closeMenu()\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Close the current menu\n\t\t \n\t\t @param {boolean} cancelled emit a cancel event instead of close\n\t\t /\n\t\tcloseMenu(cancelled = false) {\n\t\t\t// Close the menu\n\t\t\tthis.opened = false\n\t\t\tthis.$emit(cancelled ? 'cancel' : 'close')\n\t\t\tthis.$emit('update:open', false)\n\n\t\t\t// Kill focus trap\n\t\t\tthis.clearFocusTrap()\n\n\t\t\t// Wait for component to finish rendering\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.$emit('closed')\n\t\t\t})\n\t\t},\n\n\t\t/\n\t\t Open the current menu\n\t\t /\n\t\topenMenu() {\n\t\t\t// Open the menu\n\t\t\tthis.opened = true\n\t\t\tthis.$emit('open')\n\t\t\tthis.$emit('update:open', true)\n\n\t\t\t// Wait for component to finish rendering\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.useFocusTrap()\n\t\t\t\tthis.$emit('opened')\n\t\t\t})\n\t\t},\n\n\t\tonKeyDown(event) {\n\t\t\tif (this.shortcutsDisabled \|\| !this.opened) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// If escape have been pressed, we close\n\t\t\tif (event.key === 'Escape') {\n\t\t\t\tevent.preventDefault()\n\n\t\t\t\t/* User cancelled the menu by pressing escape /\n\t\t\t\tthis.closeMenu(true)\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t @param {FocusEvent} event The focus event\n\t\t /\n\t\tonFocusOut(event) {\n\t\t\tif (!this.$refs.headerMenu.contains(event.relatedTarget)) {\n\t\t\t\tthis.closeMenu()\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Add focus trap for accessibility.\n\t\t * Shall only be used when all children are mounted\n\t\t * and available in the DOM. We use $nextTick for that.\n\t\t /\n\t\tasync useFocusTrap() {\n\t\t\tif (this.isNav \|\| this.focusTrap) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Init focus trap\n\t\t\tconst contentContainer = this.$refs.content\n\t\t\tthis.focusTrap = createFocusTrap(contentContainer, {\n\t\t\t\tallowOutsideClick: true,\n\t\t\t\ttrapStack: getTrapStack(),\n\t\t\t\tfallbackFocus: this.$refs.trigger.$el,\n\t\t\t})\n\t\t\tthis.focusTrap.activate()\n\t\t},\n\n\t\tclearFocusTrap() {\n\t\t\tthis.focusTrap?.deactivate()\n\t\t\tthis.focusTrap = null\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n// content inner and outer margin\n// Also used for menu top-right positioning\n$externalMargin: 8px;\n\n@use './header-menu__trigger.scss';\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: 0 0 var(--border-radius) var(--border-radius);\n\t\tborder-radius: var(--border-radius-large);\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&__carret {\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":["ClickOutside"],"mappings":"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"}
1	+ {"version":3,"file":"NcHeaderMenu-jHItu4LV.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\tstyle=\"padding-inline: 8px;\"\n\t\t\t\ttype=\"search\"\n\t\t\t\t:value.sync=\"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: right;\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<template>\n\t<component\n\t\t:is=\"wrapperTag\"\n\t\t:id=\"id\"\n\t\tref=\"headerMenu\"\n\t\tv-click-outside=\"clickOutsideConfig\"\n\t\t:aria-labelledby=\"isNav ? triggerId : null\"\n\t\t:class=\"{ 'header-menu--opened': opened }\"\n\t\tclass=\"header-menu\"\n\t\tv-on=\"listeners\">\n\t\t<!-- Trigger -->\n\t\t<NcButton\n\t\t\t:id=\"isNav ? triggerId : null\"\n\t\t\tref=\"trigger\"\n\t\t\tclass=\"header-menu__trigger\"\n\t\t\t:aria-controls=\"`header-menu-${id}`\"\n\t\t\t:aria-describedby=\"description ? descriptionId : null\"\n\t\t\t:aria-expanded=\"opened.toString()\"\n\t\t\t:aria-label=\"ariaLabel\"\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 Icon trigger slot. Make sure the svg path\n\t\t\t\tis at least 16px. Usually mdi icon works at 20px -->\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=\"opened\" class=\"header-menu__carret\" />\n\n\t\t<!-- Menu opened content -->\n\t\t<div\n\t\t\tv-show=\"opened\"\n\t\t\t:id=\"`header-menu-${id}`\"\n\t\t\tclass=\"header-menu__wrapper\">\n\t\t\t<div ref=\"content\" class=\"header-menu__content\">\n\t\t\t\t<!-- @slot Main content -->\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t</div>\n\t</component>\n</template>\n\n<script>\nimport { vOnClickOutside as ClickOutside } from '@vueuse/components'\nimport { createFocusTrap } from 'focus-trap'\nimport { ref } from 'vue'\nimport { useTrapStackControl } from '../../composables/useTrapStackControl.ts'\nimport { clickOutsideOptions } from '../../mixins/index.js'\nimport { getTrapStack } from '../../utils/focusTrap.ts'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport NcButton from '../NcButton/index.js'\n\nexport default {\n\tname: 'NcHeaderMenu',\n\n\tcomponents: {\n\t\tNcButton,\n\t},\n\n\tdirectives: {\n\t\tClickOutside,\n\t},\n\n\tmixins: [\n\t\tclickOutsideOptions,\n\t],\n\n\tprops: {\n\t\t/*\n\t\t Unique id for this menu\n\t\t /\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/\n\t\t aria-label attribute of the menu open button\n\t\t /\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Current menu open state\n\t\t /\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Pass `true` if the header menu is used for website navigation\n\t\t \n\t\t The wrapper tag will be set to `nav` and its `aria-labelledby`\n\t\t * will be associated with the menu open button\n\t\t /\n\t\tisNav: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Additional visually hidden description text for the menu\n\t\t * open button\n\t\t /\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: [\n\t\t'close',\n\t\t'closed',\n\t\t'open',\n\t\t'opened',\n\t\t'update:open',\n\t\t'cancel',\n\t],\n\n\tsetup(props) {\n\t\tconst opened = ref(props.open)\n\n\t\t// When component has its own custom focus management\n\t\t// The global focus trap stack should be paused\n\t\tuseTrapStackControl(opened, {\n\t\t\tdisabled: () => !props.isNav,\n\t\t})\n\n\t\treturn {\n\t\t\topened,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tfocusTrap: null,\n\t\t\tshortcutsDisabled: window.OCP?.Accessibility?.disableKeyboardShortcuts?.(),\n\t\t\ttriggerId: GenRandomId(),\n\t\t\tdescriptionId: GenRandomId(),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\twrapperTag() {\n\t\t\treturn this.isNav ? 'nav' : 'div'\n\t\t},\n\n\t\tclickOutsideConfig() {\n\t\t\treturn [\n\t\t\t\tthis.closeMenu,\n\t\t\t\tthis.clickOutsideOptions,\n\t\t\t]\n\t\t},\n\n\t\tlisteners() {\n\t\t\tif (this.isNav) {\n\t\t\t\treturn {\n\t\t\t\t\tfocusout: this.onFocusOut,\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn null\n\t\t},\n\t},\n\n\twatch: {\n\t\topen(open) {\n\t\t\tif (open) {\n\t\t\t\tthis.openMenu()\n\t\t\t} else {\n\t\t\t\tthis.closeMenu()\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\tdocument.addEventListener('keydown', this.onKeyDown)\n\t},\n\n\tbeforeDestroy() {\n\t\tdocument.removeEventListener('keydown', this.onKeyDown)\n\t},\n\n\tmethods: {\n\t\t/\n\t\t Toggle the current menu open state\n\t\t /\n\t\ttoggleMenu() {\n\t\t\t// Toggling current state\n\t\t\tif (!this.opened) {\n\t\t\t\tthis.openMenu()\n\t\t\t} else {\n\t\t\t\tthis.closeMenu()\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Close the current menu\n\t\t \n\t\t @param {boolean} cancelled emit a cancel event instead of close\n\t\t /\n\t\tcloseMenu(cancelled = false) {\n\t\t\t// Close the menu\n\t\t\tthis.opened = false\n\t\t\tthis.$emit(cancelled ? 'cancel' : 'close')\n\t\t\tthis.$emit('update:open', false)\n\n\t\t\t// Kill focus trap\n\t\t\tthis.clearFocusTrap()\n\n\t\t\t// Wait for component to finish rendering\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.$emit('closed')\n\t\t\t})\n\t\t},\n\n\t\t/\n\t\t Open the current menu\n\t\t /\n\t\topenMenu() {\n\t\t\t// Open the menu\n\t\t\tthis.opened = true\n\t\t\tthis.$emit('open')\n\t\t\tthis.$emit('update:open', true)\n\n\t\t\t// Wait for component to finish rendering\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.useFocusTrap()\n\t\t\t\tthis.$emit('opened')\n\t\t\t})\n\t\t},\n\n\t\tonKeyDown(event) {\n\t\t\tif (this.shortcutsDisabled \|\| !this.opened) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// If escape have been pressed, we close\n\t\t\tif (event.key === 'Escape') {\n\t\t\t\tevent.preventDefault()\n\n\t\t\t\t/* User cancelled the menu by pressing escape /\n\t\t\t\tthis.closeMenu(true)\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t @param {FocusEvent} event The focus event\n\t\t /\n\t\tonFocusOut(event) {\n\t\t\tif (!this.$refs.headerMenu.contains(event.relatedTarget)) {\n\t\t\t\tthis.closeMenu()\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Add focus trap for accessibility.\n\t\t * Shall only be used when all children are mounted\n\t\t * and available in the DOM. We use $nextTick for that.\n\t\t /\n\t\tasync useFocusTrap() {\n\t\t\tif (this.isNav \|\| this.focusTrap) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Init focus trap\n\t\t\tconst contentContainer = this.$refs.content\n\t\t\tthis.focusTrap = createFocusTrap(contentContainer, {\n\t\t\t\tallowOutsideClick: true,\n\t\t\t\ttrapStack: getTrapStack(),\n\t\t\t\tfallbackFocus: this.$refs.trigger.$el,\n\t\t\t})\n\t\t\tthis.focusTrap.activate()\n\t\t},\n\n\t\tclearFocusTrap() {\n\t\t\tthis.focusTrap?.deactivate()\n\t\t\tthis.focusTrap = null\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n// content inner and outer margin\n// Also used for menu top-right positioning\n$externalMargin: 8px;\n\n@use './header-menu__trigger.scss';\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: 0 0 var(--border-radius) var(--border-radius);\n\t\tborder-radius: var(--border-radius-large);\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&__carret {\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":["ClickOutside"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAwHA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,YAAA;AAAA,IACA,cAAAA;AAAAA,EACA;AAAA,EAEA,QAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,MAAA,OAAA;AACA,UAAA,SAAA,IAAA,MAAA,IAAA;AAIA,wBAAA,QAAA;AAAA,MACA,UAAA,MAAA,CAAA,MAAA;AAAA,IACA,CAAA;AAEA,WAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,mBAAA,OAAA,KAAA,eAAA,2BAAA;AAAA,MACA,WAAA,YAAA;AAAA,MACA,eAAA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,aAAA;AACA,aAAA,KAAA,QAAA,QAAA;AAAA,IACA;AAAA,IAEA,qBAAA;AACA,aAAA;AAAA,QACA,KAAA;AAAA,QACA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,UAAA,KAAA,OAAA;AACA,eAAA;AAAA,UACA,UAAA,KAAA;AAAA,QACA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,KAAA,MAAA;AACA,UAAA,MAAA;AACA,aAAA,SAAA;AAAA,MACA,OAAA;AACA,aAAA,UAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,aAAA,iBAAA,WAAA,KAAA,SAAA;AAAA,EACA;AAAA,EAEA,gBAAA;AACA,aAAA,oBAAA,WAAA,KAAA,SAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA,IAIA,aAAA;AAEA,UAAA,CAAA,KAAA,QAAA;AACA,aAAA,SAAA;AAAA,MACA,OAAA;AACA,aAAA,UAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,UAAA,YAAA,OAAA;AAEA,WAAA,SAAA;AACA,WAAA,MAAA,YAAA,WAAA,OAAA;AACA,WAAA,MAAA,eAAA,KAAA;AAGA,WAAA,eAAA;AAGA,WAAA,UAAA,MAAA;AACA,aAAA,MAAA,QAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAEA,WAAA,SAAA;AACA,WAAA,MAAA,MAAA;AACA,WAAA,MAAA,eAAA,IAAA;AAGA,WAAA,UAAA,MAAA;AACA,aAAA,aAAA;AACA,aAAA,MAAA,QAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,IAEA,UAAA,OAAA;AACA,UAAA,KAAA,qBAAA,CAAA,KAAA,QAAA;AACA;AAAA,MACA;AAGA,UAAA,MAAA,QAAA,UAAA;AACA,cAAA,eAAA;AAGA,aAAA,UAAA,IAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA,OAAA;AACA,UAAA,CAAA,KAAA,MAAA,WAAA,SAAA,MAAA,aAAA,GAAA;AACA,aAAA,UAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,MAAA,eAAA;AACA,UAAA,KAAA,SAAA,KAAA,WAAA;AACA;AAAA,MACA;AAEA,YAAA,mBAAA,KAAA,MAAA;AACA,WAAA,YAAA,gBAAA,kBAAA;AAAA,QACA,mBAAA;AAAA,QACA,WAAA,aAAA;AAAA,QACA,eAAA,KAAA,MAAA,QAAA;AAAA,MACA,CAAA;AACA,WAAA,UAAA,SAAA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,WAAA,WAAA,WAAA;AACA,WAAA,YAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcHotkey-vKyDZ2a7.cjs → NcHotkey-CLFZr-9x.cjs} RENAMED Viewed

@@ -1,7 +1,7 @@
-require('../assets/NcHotkey-9k8cxWO5.css');
+require('../assets/NcHotkey-B-GNBJym.css');
 "use strict";
 const Vue = require("vue");
-const NcKbd = require("./NcKbd-DbjnDaJH.cjs");
+const NcKbd = require("./NcKbd-uMv3QPhD.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
 const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
   __name: "NcHotkey",
@@ -18,11 +18,11 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
     return { __sfc: true, props, symbols, NO_LABEL_WARNING, NcKbd: NcKbd.NcKbd };
   }
 });
-const hotkey = "_hotkey_PnaCt";
-const hotkey__label = "_hotkey__label_0DBgd";
-const hotkey__keys = "_hotkey__keys_RvX7F";
+const hotkey = "_hotkey_pXWSG";
+const hotkey__label = "_hotkey__label_7I8Ed";
+const hotkey__keys = "_hotkey__keys_zvZ-P";
 const style0 = {
-  "material-design-icon": "_material-design-icon_eis5A",
+  "material-design-icon": "_material-design-icon_yBAKx",
   hotkey,
   hotkey__label,
   hotkey__keys
@@ -56,4 +56,4 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
 );
 const NcHotkey = __component__.exports;
 exports.NcHotkey = NcHotkey;
-//# sourceMappingURL=NcHotkey-vKyDZ2a7.cjs.map
+//# sourceMappingURL=NcHotkey-CLFZr-9x.cjs.map

package/dist/chunks/{NcHotkey-vKyDZ2a7.cjs.map → NcHotkey-CLFZr-9x.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcHotkey-~~vKyDZ2a7~~.cjs","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 { computed } from 'vue'\nimport NcKbd from '../NcKbd/NcKbd.vue'\n\nconst props = withDefaults(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\tlabel: undefined,\n\thotkey: undefined,\n})\n\nconst symbols = computed(() => {\n\treturn props.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 Custom hotkey content for an advanced hotkey layout with \"NcKbd\" components or other custom content -->\n\t\t\t<slot name=\"hotkey\">\n\t\t\t\t<NcKbd v-for=\"(symbol, index) in symbols\" :key=\"index\" :symbol=\"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 Custom label content -->\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":["computed"],"mappings":";;;;;;;;;;;;AAuBA,UAAM,UAAUA,IAAAA,SAAS,MAAM;AAC9B,aAAO,MAAM,QAAQ,MAAM,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM;AAAA,IACtD,CAAC;AAED,UAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"NcHotkey-CLFZr-9x.cjs","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 { computed } from 'vue'\nimport NcKbd from '../NcKbd/NcKbd.vue'\n\nconst props = withDefaults(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\tlabel: undefined,\n\thotkey: undefined,\n})\n\nconst symbols = computed(() => {\n\treturn props.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 Custom hotkey content for an advanced hotkey layout with \"NcKbd\" components or other custom content -->\n\t\t\t<slot name=\"hotkey\">\n\t\t\t\t<NcKbd v-for=\"(symbol, index) in symbols\" :key=\"index\" :symbol=\"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 Custom label content -->\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":["computed"],"mappings":";;;;;;;;;;;;AAuBA,UAAM,UAAUA,IAAAA,SAAS,MAAM;AAC9B,aAAO,MAAM,QAAQ,MAAM,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM;AAAA,IACtD,CAAC;AAED,UAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcHotkey-CLLtt9LG.mjs → NcHotkey-CpgacYSd.mjs} RENAMED Viewed

@@ -1,6 +1,6 @@
-import '../assets/NcHotkey-9k8cxWO5.css';
+import '../assets/NcHotkey-B-GNBJym.css';
 import { defineComponent, computed } from "vue";
-import { N as NcKbd } from "./NcKbd-GB8FuSAU.mjs";
+import { N as NcKbd } from "./NcKbd-CXJA9sCj.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "NcHotkey",
@@ -17,11 +17,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     return { __sfc: true, props, symbols, NO_LABEL_WARNING, NcKbd };
   }
 });
-const hotkey = "_hotkey_PnaCt";
-const hotkey__label = "_hotkey__label_0DBgd";
-const hotkey__keys = "_hotkey__keys_RvX7F";
+const hotkey = "_hotkey_pXWSG";
+const hotkey__label = "_hotkey__label_7I8Ed";
+const hotkey__keys = "_hotkey__keys_zvZ-P";
 const style0 = {
-  "material-design-icon": "_material-design-icon_eis5A",
+  "material-design-icon": "_material-design-icon_yBAKx",
   hotkey,
   hotkey__label,
   hotkey__keys
@@ -57,4 +57,4 @@ const NcHotkey = __component__.exports;
 export {
   NcHotkey as N
 };
-//# sourceMappingURL=NcHotkey-CLLtt9LG.mjs.map
+//# sourceMappingURL=NcHotkey-CpgacYSd.mjs.map

package/dist/chunks/{NcHotkey-CLLtt9LG.mjs.map → NcHotkey-CpgacYSd.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcHotkey-~~CLLtt9LG~~.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 { computed } from 'vue'\nimport NcKbd from '../NcKbd/NcKbd.vue'\n\nconst props = withDefaults(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\tlabel: undefined,\n\thotkey: undefined,\n})\n\nconst symbols = computed(() => {\n\treturn props.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 Custom hotkey content for an advanced hotkey layout with \"NcKbd\" components or other custom content -->\n\t\t\t<slot name=\"hotkey\">\n\t\t\t\t<NcKbd v-for=\"(symbol, index) in symbols\" :key=\"index\" :symbol=\"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 Custom label content -->\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":[],"mappings":";;;;;;;;;;;AAuBA,UAAM,UAAU,SAAS,MAAM;AAC9B,aAAO,MAAM,QAAQ,MAAM,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM;AAAA,IACtD,CAAC;AAED,UAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"NcHotkey-CpgacYSd.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 { computed } from 'vue'\nimport NcKbd from '../NcKbd/NcKbd.vue'\n\nconst props = withDefaults(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\tlabel: undefined,\n\thotkey: undefined,\n})\n\nconst symbols = computed(() => {\n\treturn props.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 Custom hotkey content for an advanced hotkey layout with \"NcKbd\" components or other custom content -->\n\t\t\t<slot name=\"hotkey\">\n\t\t\t\t<NcKbd v-for=\"(symbol, index) in symbols\" :key=\"index\" :symbol=\"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 Custom label content -->\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":[],"mappings":";;;;;;;;;;;AAuBA,UAAM,UAAU,SAAS,MAAM;AAC9B,aAAO,MAAM,QAAQ,MAAM,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM;AAAA,IACtD,CAAC;AAED,UAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcHotkeyList-Co7MBL5U.mjs → NcHotkeyList-BYFbKo6_.mjs} RENAMED Viewed

@@ -1,4 +1,4 @@
-import '../assets/NcHotkeyList-CNWXE5jg.css';
+import '../assets/NcHotkeyList-D7NVZF42.css';
 import { defineComponent } from "vue";
 import { r as register, y as t30, a as t } from "./_l10n-DVz9Qdzk.mjs";
 import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
@@ -14,8 +14,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     return { __sfc: true, labelId, t };
   }
 });
-const hotkeyList = "_hotkeyList_W8veH";
-const hotkeyList__heading = "_hotkeyList__heading_Dfekf";
+const hotkeyList = "_hotkeyList_riohA";
+const hotkeyList__heading = "_hotkeyList__heading_UQr9K";
 const style0 = {
   hotkeyList,
   hotkeyList__heading
@@ -45,4 +45,4 @@ const NcHotkeyList = __component__.exports;
 export {
   NcHotkeyList as N
 };
-//# sourceMappingURL=NcHotkeyList-Co7MBL5U.mjs.map
+//# sourceMappingURL=NcHotkeyList-BYFbKo6_.mjs.map

package/dist/chunks/NcHotkeyList-BYFbKo6_.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcHotkeyList-BYFbKo6_.mjs","sources":["../../src/components/NcHotkeyList/NcHotkeyList.vue"],"sourcesContent":["\n\n<script setup lang=\"ts\">\nimport { t } from '../../l10n.js'\nimport { createElementId } from '../../utils/createElementId.ts'\n\nwithDefaults(defineProps<{\n\t/**\n\t * Heading list label to use when there are multiple lists of shortcuts\n\t */\n\tlabel?: string\n}>(), {\n\tlabel: undefined,\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\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: var(--font-weight-heading, 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":[],"mappings":";;;;;;;;;;;AAkBA,UAAM,UAAU,gBAAgB,gBAAA,CAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcHotkeyList-DhFQdopw.cjs → NcHotkeyList-C_w3SAG_.cjs} RENAMED Viewed

@@ -1,4 +1,4 @@
-require('../assets/NcHotkeyList-CNWXE5jg.css');
+require('../assets/NcHotkeyList-D7NVZF42.css');
 "use strict";
 const Vue = require("vue");
 const _l10n = require("./_l10n-skrZri3h.cjs");
@@ -15,8 +15,8 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
     return { __sfc: true, labelId, t: _l10n.t };
   }
 });
-const hotkeyList = "_hotkeyList_W8veH";
-const hotkeyList__heading = "_hotkeyList__heading_Dfekf";
+const hotkeyList = "_hotkeyList_riohA";
+const hotkeyList__heading = "_hotkeyList__heading_UQr9K";
 const style0 = {
   hotkeyList,
   hotkeyList__heading
@@ -44,4 +44,4 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
 );
 const NcHotkeyList = __component__.exports;
 exports.NcHotkeyList = NcHotkeyList;
-//# sourceMappingURL=NcHotkeyList-DhFQdopw.cjs.map
+//# sourceMappingURL=NcHotkeyList-C_w3SAG_.cjs.map

package/dist/chunks/NcHotkeyList-C_w3SAG_.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcHotkeyList-C_w3SAG_.cjs","sources":["../../src/components/NcHotkeyList/NcHotkeyList.vue"],"sourcesContent":["\n\n<script setup lang=\"ts\">\nimport { t } from '../../l10n.js'\nimport { createElementId } from '../../utils/createElementId.ts'\n\nwithDefaults(defineProps<{\n\t/**\n\t * Heading list label to use when there are multiple lists of shortcuts\n\t */\n\tlabel?: string\n}>(), {\n\tlabel: undefined,\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\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: var(--font-weight-heading, 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":["createElementId"],"mappings":";;;;;;;;;;;;AAkBA,UAAM,UAAU,gBAAgBA,gBAAAA,gBAAA,CAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcIconToggleSwitch-LTgdIBoC.cjs → NcIconToggleSwitch-Boo2ulI6.cjs} RENAMED Viewed

@@ -1,4 +1,4 @@
-require('../assets/NcIconToggleSwitch-sDZkWAmc.css');
+require('../assets/NcIconToggleSwitch-Df8M_g5F.css');
 "use strict";
 const Vue = require("vue");
 const NcIconSvgWrapper = require("./NcIconSvgWrapper-Bbl4kXZI.cjs");
@@ -30,9 +30,9 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
     return { __sfc: true, svg, props, color, cx, NcIconSvgWrapper: NcIconSvgWrapper.NcIconSvgWrapper };
   }
 });
-const iconToggleSwitch = "_iconToggleSwitch_ZSKWf";
+const iconToggleSwitch = "_iconToggleSwitch_rwBqv";
 const style0 = {
-  "material-design-icon": "_material-design-icon_YB2B5",
+  "material-design-icon": "_material-design-icon_584lD",
   iconToggleSwitch
 };
 var _sfc_render = function render() {
@@ -58,4 +58,4 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
 );
 const NcIconToggleSwitch = __component__.exports;
 exports.NcIconToggleSwitch = NcIconToggleSwitch;
-//# sourceMappingURL=NcIconToggleSwitch-LTgdIBoC.cjs.map
+//# sourceMappingURL=NcIconToggleSwitch-Boo2ulI6.cjs.map

package/dist/chunks/{NcIconToggleSwitch-LTgdIBoC.cjs.map → NcIconToggleSwitch-Boo2ulI6.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcIconToggleSwitch-~~LTgdIBoC~~.cjs","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 props = withDefaults(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\tsize: 34,\n\tinline: false,\n})\n\nconst color = computed(() => props.checked ? 'var(--color-primary-element)' : 'var(--color-text-maxcontrast)')\nconst cx = computed(() => props.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=\"svg\"\n\t\t:size=\"size\"\n\t\t:inline=\"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":["computed"],"mappings":";;;;AAMA,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;AA2BZ,UAAM,QAAQA,IAAAA,SAAS,MAAM,MAAM,UAAU,iCAAiC,+BAA+B;AAC7G,UAAM,KAAKA,IAAAA,SAAS,MAAM,MAAM,UAAU,yBAAyB,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"NcIconToggleSwitch-Boo2ulI6.cjs","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 props = withDefaults(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\tsize: 34,\n\tinline: false,\n})\n\nconst color = computed(() => props.checked ? 'var(--color-primary-element)' : 'var(--color-text-maxcontrast)')\nconst cx = computed(() => props.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=\"svg\"\n\t\t:size=\"size\"\n\t\t:inline=\"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":["computed"],"mappings":";;;;AAMA,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;AA2BZ,UAAM,QAAQA,IAAAA,SAAS,MAAM,MAAM,UAAU,iCAAiC,+BAA+B;AAC7G,UAAM,KAAKA,IAAAA,SAAS,MAAM,MAAM,UAAU,yBAAyB,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcIconToggleSwitch-0NTw7i-t.mjs → NcIconToggleSwitch-DCTeQGv5.mjs} RENAMED Viewed

@@ -1,4 +1,4 @@
-import '../assets/NcIconToggleSwitch-sDZkWAmc.css';
+import '../assets/NcIconToggleSwitch-Df8M_g5F.css';
 import { defineComponent, useCssVars, computed } from "vue";
 import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-Bui9PhAS.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
@@ -29,9 +29,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     return { __sfc: true, svg, props, color, cx, NcIconSvgWrapper };
   }
 });
-const iconToggleSwitch = "_iconToggleSwitch_ZSKWf";
+const iconToggleSwitch = "_iconToggleSwitch_rwBqv";
 const style0 = {
-  "material-design-icon": "_material-design-icon_YB2B5",
+  "material-design-icon": "_material-design-icon_584lD",
   iconToggleSwitch
 };
 var _sfc_render = function render() {
@@ -59,4 +59,4 @@ const NcIconToggleSwitch = __component__.exports;
 export {
   NcIconToggleSwitch as N
 };
-//# sourceMappingURL=NcIconToggleSwitch-0NTw7i-t.mjs.map
+//# sourceMappingURL=NcIconToggleSwitch-DCTeQGv5.mjs.map

package/dist/chunks/{NcIconToggleSwitch-0NTw7i-t.mjs.map → NcIconToggleSwitch-DCTeQGv5.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcIconToggleSwitch-~~0NTw7i-t~~.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 props = withDefaults(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\tsize: 34,\n\tinline: false,\n})\n\nconst color = computed(() => props.checked ? 'var(--color-primary-element)' : 'var(--color-text-maxcontrast)')\nconst cx = computed(() => props.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=\"svg\"\n\t\t:size=\"size\"\n\t\t:inline=\"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":[],"mappings":";;;AAMA,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;AA2BZ,UAAM,QAAQ,SAAS,MAAM,MAAM,UAAU,iCAAiC,+BAA+B;AAC7G,UAAM,KAAK,SAAS,MAAM,MAAM,UAAU,yBAAyB,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"NcIconToggleSwitch-DCTeQGv5.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 props = withDefaults(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\tsize: 34,\n\tinline: false,\n})\n\nconst color = computed(() => props.checked ? 'var(--color-primary-element)' : 'var(--color-text-maxcontrast)')\nconst cx = computed(() => props.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=\"svg\"\n\t\t:size=\"size\"\n\t\t:inline=\"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":[],"mappings":";;;AAMA,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;;AA2BZ,UAAM,QAAQ,SAAS,MAAM,MAAM,UAAU,iCAAiC,+BAA+B;AAC7G,UAAM,KAAK,SAAS,MAAM,MAAM,UAAU,yBAAyB,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcInputConfirmCancel-CTvNhtqM.cjs → NcInputConfirmCancel-CcPcB-bZ.cjs} RENAMED Viewed

@@ -1,9 +1,10 @@
-require('../assets/NcInputConfirmCancel-CkhRZCfD.css');
+require('../assets/NcInputConfirmCancel-DRZviUxz.css');
 "use strict";
 const ArrowRight = require("./ArrowRight-DPARnmu3.cjs");
 const Close = require("./Close-CqmXxEKi.cjs");
 const _l10n = require("./_l10n-skrZri3h.cjs");
-const NcButton = require("./NcButton-DaWD-X8V.cjs");
+const legacy = require("./legacy-Bk0qQxIg.cjs");
+const NcButton = require("./NcButton-B3UxfMyE.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
 _l10n.register(_l10n.t13);
 const _sfc_main = {
@@ -41,6 +42,9 @@ const _sfc_main = {
     "confirm",
     "cancel"
   ],
+  setup() {
+    return { isLegacy34: legacy.isLegacy34 };
+  },
   data() {
     return {
       labelConfirm: _l10n.t("Confirm changes"),
@@ -71,7 +75,7 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("div", { staticClass: "app-navigation-input-confirm" }, [_c("form", { on: { "submit": function($event) {
+  return _c("div", { staticClass: "app-navigation-input-confirm", class: { "app-navigation-input-confirm--legacy": _vm.isLegacy34 } }, [_c("form", { on: { "submit": function($event) {
     $event.preventDefault();
     return _vm.confirm.apply(null, arguments);
   }, "keydown": function($event) {
@@ -107,8 +111,8 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "093a8eb9"
+  "f9a3bb35"
 );
 const NcInputConfirmCancel = __component__.exports;
 exports.NcInputConfirmCancel = NcInputConfirmCancel;
-//# sourceMappingURL=NcInputConfirmCancel-CTvNhtqM.cjs.map
+//# sourceMappingURL=NcInputConfirmCancel-CcPcB-bZ.cjs.map

package/dist/chunks/NcInputConfirmCancel-CcPcB-bZ.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcInputConfirmCancel-CcPcB-bZ.cjs","sources":["../../src/components/NcAppNavigationItem/NcInputConfirmCancel.vue"],"sourcesContent":["\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\" :class=\"{ 'app-navigation-input-confirm--legacy': isLegacy34 }\">\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<ArrowRight :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<Close :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 ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport Close from 'vue-material-design-icons/Close.vue'\nimport { t } from '../../l10n.js'\nimport { isLegacy34 } from '../../utils/legacy.ts'\nimport NcButton from '../NcButton/index.js'\n\nexport default {\n\tname: 'NcInputConfirmCancel',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tArrowRight,\n\t\tClose,\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\tvalue: {\n\t\t\tdefault: '',\n\t\t\ttype: String,\n\t\t},\n\t},\n\n\temits: [\n\t\t'input',\n\t\t'confirm',\n\t\t'cancel',\n\t],\n\n\tsetup() {\n\t\treturn { isLegacy34 }\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.value },\n\t\t\tset(newValue) {\n\t\t\t\tthis.$emit('input', 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-left: -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\t// New design (NC34+): square confirm/cancel buttons with consistent gaps.\n\t&:not(&--legacy) {\n\t\tform {\n\t\t\talign-items: center;\n\t\t\tgap: $input-margin;\n\t\t\tpadding-inline-end: $input-margin;\n\t\t}\n\n\t\t.app-navigation-input-confirm__input {\n\t\t\tmargin-inline-end: 0 !important;\n\t\t}\n\n\t\t:deep(.button-vue) {\n\t\t\twidth: $input-height !important;\n\t\t\tmin-width: $input-height !important;\n\t\t\theight: $input-height !important;\n\t\t\tflex: 0 0 $input-height;\n\t\t}\n\t}\n}\n</style>\n"],"names":["NcButton","ArrowRight","Close","isLegacy34","t"],"mappings":";;;;;;;;AAwDA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAA,SAAAA;AAAAA,IACA,YAAAC,WAAAA;AAAAA,IACA,OAAAC,MAAAA;AAAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA;AACA,WAAA,cAAAC,OAAAA,WAAA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,cAAAC,MAAAA,EAAA,iBAAA;AAAA,MACA,aAAAA,MAAAA,EAAA,gBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,YAAA;AAAA,MACA,MAAA;AAAA,eAAA,KAAA;AAAA,MAAA;AAAA,MACA,IAAA,UAAA;AACA,aAAA,MAAA,SAAA,QAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,UAAA;AACA,WAAA,MAAA,SAAA;AAAA,IACA;AAAA,IAEA,SAAA;AACA,WAAA,MAAA,QAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,WAAA,MAAA,MAAA,MAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcInputConfirmCancel-LAJSyhOn.mjs → NcInputConfirmCancel-zqo4ijEJ.mjs} RENAMED Viewed

@@ -1,8 +1,9 @@
-import '../assets/NcInputConfirmCancel-CkhRZCfD.css';
+import '../assets/NcInputConfirmCancel-DRZviUxz.css';
 import { A as ArrowRight } from "./ArrowRight-CY2b9hgN.mjs";
 import { C as Close } from "./Close-BtLPUSdO.mjs";
 import { r as register, q as t13, a as t } from "./_l10n-DVz9Qdzk.mjs";
-import { N as NcButton } from "./NcButton-BgppWSl9.mjs";
+import { i as isLegacy34 } from "./legacy-DV3mGZdh.mjs";
+import { N as NcButton } from "./NcButton-D6Swkr1k.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
 register(t13);
 const _sfc_main = {
@@ -40,6 +41,9 @@ const _sfc_main = {
     "confirm",
     "cancel"
   ],
+  setup() {
+    return { isLegacy34 };
+  },
   data() {
     return {
       labelConfirm: t("Confirm changes"),
@@ -70,7 +74,7 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("div", { staticClass: "app-navigation-input-confirm" }, [_c("form", { on: { "submit": function($event) {
+  return _c("div", { staticClass: "app-navigation-input-confirm", class: { "app-navigation-input-confirm--legacy": _vm.isLegacy34 } }, [_c("form", { on: { "submit": function($event) {
     $event.preventDefault();
     return _vm.confirm.apply(null, arguments);
   }, "keydown": function($event) {
@@ -106,10 +110,10 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "093a8eb9"
+  "f9a3bb35"
 );
 const NcInputConfirmCancel = __component__.exports;
 export {
   NcInputConfirmCancel as N
 };
-//# sourceMappingURL=NcInputConfirmCancel-LAJSyhOn.mjs.map
+//# sourceMappingURL=NcInputConfirmCancel-zqo4ijEJ.mjs.map

package/dist/chunks/NcInputConfirmCancel-zqo4ijEJ.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcInputConfirmCancel-zqo4ijEJ.mjs","sources":["../../src/components/NcAppNavigationItem/NcInputConfirmCancel.vue"],"sourcesContent":["\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\" :class=\"{ 'app-navigation-input-confirm--legacy': isLegacy34 }\">\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<ArrowRight :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<Close :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 ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport Close from 'vue-material-design-icons/Close.vue'\nimport { t } from '../../l10n.js'\nimport { isLegacy34 } from '../../utils/legacy.ts'\nimport NcButton from '../NcButton/index.js'\n\nexport default {\n\tname: 'NcInputConfirmCancel',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tArrowRight,\n\t\tClose,\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\tvalue: {\n\t\t\tdefault: '',\n\t\t\ttype: String,\n\t\t},\n\t},\n\n\temits: [\n\t\t'input',\n\t\t'confirm',\n\t\t'cancel',\n\t],\n\n\tsetup() {\n\t\treturn { isLegacy34 }\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.value },\n\t\t\tset(newValue) {\n\t\t\t\tthis.$emit('input', 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-left: -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\t// New design (NC34+): square confirm/cancel buttons with consistent gaps.\n\t&:not(&--legacy) {\n\t\tform {\n\t\t\talign-items: center;\n\t\t\tgap: $input-margin;\n\t\t\tpadding-inline-end: $input-margin;\n\t\t}\n\n\t\t.app-navigation-input-confirm__input {\n\t\t\tmargin-inline-end: 0 !important;\n\t\t}\n\n\t\t:deep(.button-vue) {\n\t\t\twidth: $input-height !important;\n\t\t\tmin-width: $input-height !important;\n\t\t\theight: $input-height !important;\n\t\t\tflex: 0 0 $input-height;\n\t\t}\n\t}\n}\n</style>\n"],"names":[],"mappings":";;;;;;;AAwDA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA;AACA,WAAA,EAAA,WAAA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,cAAA,EAAA,iBAAA;AAAA,MACA,aAAA,EAAA,gBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,YAAA;AAAA,MACA,MAAA;AAAA,eAAA,KAAA;AAAA,MAAA;AAAA,MACA,IAAA,UAAA;AACA,aAAA,MAAA,SAAA,QAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,UAAA;AACA,WAAA,MAAA,SAAA;AAAA,IACA;AAAA,IAEA,SAAA;AACA,WAAA,MAAA,QAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,WAAA,MAAA,MAAA,MAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcInputField-j5EyU7QH.mjs → NcInputField-BrzZ8Bne.mjs} RENAMED Viewed

@@ -1,10 +1,10 @@
-import '../assets/NcInputField-Cc-l-KGd.css';
+import '../assets/NcInputField-KvlF4emB.css';
 import { A as AlertCircle } from "./AlertCircleOutline-DBxbepLy.mjs";
 import { C as Check } from "./Check-BkThHPH7.mjs";
-import { N as NcButton } from "./NcButton-BgppWSl9.mjs";
+import { N as NcButton } from "./NcButton-D6Swkr1k.mjs";
 import { u as useModelMigration } from "./useModelMigration-EhAWvqDD.mjs";
 import { G as GenRandomId } from "./GenRandomId-F5ebeBB_.mjs";
-import { i as isLegacy32 } from "./legacy-MK4GvP26.mjs";
+import { a as isLegacy32 } from "./legacy-DV3mGZdh.mjs";
 import { l as logger } from "./logger-D3RVzcfQ.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
 const _sfc_main = {
@@ -263,10 +263,10 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "2bc46a58"
+  "17c3f609"
 );
 const NcInputField = __component__.exports;
 export {
   NcInputField as N
 };
-//# sourceMappingURL=NcInputField-j5EyU7QH.mjs.map
+//# sourceMappingURL=NcInputField-BrzZ8Bne.mjs.map

package/dist/chunks/{NcInputField-j5EyU7QH.mjs.map → NcInputField-BrzZ8Bne.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcInputField-j5EyU7QH.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<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': !!$scopedSlots.icon \|\| !!$scopedSlots.default \|\| !!$slots.default,\n\t\t\t'input-field--success': success,\n\t\t\t'input-field--trailing-icon': showTrailingButton \|\| hasTrailingIcon,\n\t\t\t'input-field--pill': pill,\n\t\t\t'input-field--legacy': isLegacy32,\n\t\t}\">\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=\"computedId\"\n\t\t\t\tref=\"input\"\n\t\t\t\tclass=\"input-field__input\"\n\t\t\t\t:type=\"type\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t:placeholder=\"computedPlaceholder\"\n\t\t\t\t:aria-describedby=\"ariaDescribedby\"\n\t\t\t\taria-live=\"polite\"\n\t\t\t\t:class=\"[inputClass,\n\t\t\t\t\t{\n\t\t\t\t\t\t'input-field__input--success': success,\n\t\t\t\t\t\t'input-field__input--error': error,\n\t\t\t\t\t}]\"\n\t\t\t\t:value=\"model?.toString()\"\n\t\t\t\tv-on=\"$listeners\"\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=\"computedId\">\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=\"!!$scopedSlots.icon \|\| !!$scopedSlots.default \|\| !!$slots.default\" class=\"input-field__icon input-field__icon--leading\">\n\t\t\t\t<!-- @slot Leading icon, set the size to 18 -->\n\t\t\t\t<slot name=\"icon\">\n\t\t\t\t\t<!-- @slot Deprecated, removed in v9: use #icon slot instead. -->\n\t\t\t\t\t<slot />\n\t\t\t\t</slot>\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=\"handleTrailingButtonClick\">\n\t\t\t\t<!-- Populating this slot creates a trailing button within the\n\t\t\t\tinput boundaries that emits a `trailing-button-click` 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<Check v-if=\"success\" :size=\"20\" style=\"color: var(--color-success-text);\" />\n\t\t\t\t<AlertCircle v-else-if=\"error\" :size=\"20\" style=\"color: var(--color-error-text);\" />\n\t\t\t</div>\n\t\t</div>\n\t\t<p\n\t\t\tv-if=\"helperText.length > 0\"\n\t\t\t:id=\"`${inputName}-helper-text`\"\n\t\t\tclass=\"input-field__helper-text-message\"\n\t\t\t:class=\"{\n\t\t\t\t'input-field__helper-text-message--error': error,\n\t\t\t\t'input-field__helper-text-message--success': success,\n\t\t\t}\">\n\t\t\t<Check v-if=\"success\" class=\"input-field__helper-text-message__icon\" :size=\"18\" />\n\t\t\t<AlertCircle v-else-if=\"error\" class=\"input-field__helper-text-message__icon\" :size=\"18\" />\n\t\t\t{{ helperText }}\n\t\t</p>\n\t</div>\n</template>\n\n<script>\nimport AlertCircle from 'vue-material-design-icons/AlertCircleOutline.vue'\nimport Check from 'vue-material-design-icons/Check.vue'\nimport NcButton from '../NcButton/NcButton.vue'\nimport { useModelMigration } from '../../composables/useModelMigration.ts'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport { isLegacy32 } from '../../utils/legacy.ts'\nimport { logger } from '../../utils/logger.ts'\n\nexport default {\n\tname: 'NcInputField',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tAlertCircle,\n\t\tCheck,\n\t},\n\n\tinheritAttrs: false,\n\n\tmodel: {\n\t\tprop: 'modelValue',\n\t\tevent: 'update:modelValue',\n\t},\n\n\tprops: {\n\t\t/*\n\t\t Removed in v9 - use `modelValue` (`v-model`) instead\n\t\t \n\t\t @deprecated\n\t\t /\n\t\tvalue: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/\n\t\t The value of the input field\n\t\t * If type is 'number' and a number is passed as value than the type of `update:modelValue` will also be 'number'\n\t\t /\n\t\tmodelValue: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/\n\t\t The type of the input element\n\t\t /\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'text',\n\t\t\tvalidator: (value) => [\n\t\t\t\t'text',\n\t\t\t\t'password',\n\t\t\t\t'email',\n\t\t\t\t'tel',\n\t\t\t\t'url',\n\t\t\t\t'search',\n\t\t\t\t'number',\n\t\t\t].includes(value),\n\t\t},\n\n\t\t/\n\t\t The input label, always provide one for accessibility purposes.\n\t\t * This will also be used as a placeholder unless the placeholder\n\t\t * prop is populated with a different string.\n\t\t \n\t\t Note: If the background color is not `--color-main-background` consider using an external label instead (see `labelOutside`).\n\t\t /\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/\n\t\t Pass in true if you want to use an external label. This is useful\n\t\t * if you need a label that looks different from the one provided by\n\t\t * this component\n\t\t /\n\t\tlabelOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t The placeholder of the input. This defaults as the string that's\n\t\t * passed into the label prop. In order to remove the placeholder,\n\t\t * pass in an empty string.\n\t\t /\n\t\tplaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/\n\t\t Controls whether to display the trailing button.\n\t\t /\n\t\tshowTrailingButton: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Label of the trailing button\n\t\t \n\t\t Required when showTrailingButton is set\n\t\t /\n\t\ttrailingButtonLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Toggles the success state of the component. Adds a checkmark icon.\n\t\t * this cannot be used together with canClear.\n\t\t /\n\t\tsuccess: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Toggles the error state of the component. Adds an error icon.\n\t\t * this cannot be used together with canClear.\n\t\t /\n\t\terror: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Additional helper text message\n\t\t \n\t\t This will be displayed beneath the input field. In case the field is\n\t\t * also marked as having an error, the text will be displayed in red.\n\t\t /\n\t\thelperText: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Disable the input field\n\t\t /\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Specifies whether the input should have a pill form.\n\t\t * By default, input has rounded corners.\n\t\t /\n\t\tpill: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Class to add to the input field.\n\t\t * Necessary to use NcInputField in the NcActionInput component.\n\t\t /\n\t\tinputClass: {\n\t\t\ttype: [Object, String],\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: [\n\t\t/\n\t\t Removed in v9 - use `update:modelValue` (`v-model`) instead\n\t\t \n\t\t @deprecated\n\t\t /\n\t\t'update:value',\n\t\t'update:modelValue',\n\t\t/* Same as update:modelValue for Vue 2 compatibility /\n\t\t'update:model-value',\n\t\t'trailing-button-click',\n\t],\n\n\tsetup() {\n\t\tconst model = useModelMigration('value', 'update:value', true)\n\n\t\treturn {\n\t\t\tisLegacy32,\n\t\t\tmodel,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tcomputedId() {\n\t\t\treturn this.$attrs.id && this.$attrs.id !== '' ? this.$attrs.id : this.inputName\n\t\t},\n\n\t\tinputName() {\n\t\t\treturn 'input' + GenRandomId()\n\t\t},\n\n\t\thasTrailingIcon() {\n\t\t\treturn this.success\n\t\t},\n\n\t\tcomputedPlaceholder() {\n\t\t\tif (this.placeholder) {\n\t\t\t\treturn this.placeholder\n\t\t\t}\n\t\t\tif (this.label) {\n\t\t\t\t// if there is a label we use it as fallback on legacy but on current we need\n\t\t\t\t// to pass at least an empty string as placeholder to make css `:placeholder-shown` work.\n\t\t\t\treturn isLegacy32 ? this.label : ''\n\t\t\t}\n\t\t\treturn undefined\n\t\t},\n\n\t\tisValidLabel() {\n\t\t\tconst isValidLabel = this.label \|\| this.labelOutside\n\t\t\tif (!isValidLabel) {\n\t\t\t\tlogger.warn('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\t\t}\n\t\t\treturn isValidLabel\n\t\t},\n\n\t\tariaDescribedby() {\n\t\t\tconst ariaDescribedby = []\n\t\t\tif (this.helperText.length > 0) {\n\t\t\t\tariaDescribedby.push(`${this.inputName}-helper-text`)\n\t\t\t}\n\t\t\tif (this.$attrs['aria-describedby']) {\n\t\t\t\tariaDescribedby.push(this.$attrs['aria-describedby'])\n\t\t\t}\n\t\t\treturn ariaDescribedby.join(' ') \|\| null\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/\n\t\t Focus the input element\n\t\t \n\t\t @public\n\t\t /\n\t\tfocus() {\n\t\t\tthis.$refs.input.focus()\n\t\t},\n\n\t\t/\n\t\t Select all the text in the input\n\t\t \n\t\t @public\n\t\t /\n\t\tselect() {\n\t\t\tthis.$refs.input.select()\n\t\t},\n\n\t\thandleInput(event) {\n\t\t\tconst newValue = this.type === 'number' && typeof this.model === 'number' ? parseFloat(event.target.value, 10) : event.target.value\n\t\t\tthis.model = newValue\n\t\t},\n\n\t\thandleTrailingButtonClick(event) {\n\t\t\tthis.$emit('trailing-button-click', event)\n\t\t},\n\t},\n}\n</script>\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-large);\n\t// The padding where the input has to end (trailing button or border)\n\t--input-padding-end: var(--border-radius-large);\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\n\t\t&--success {\n\t\t\tborder-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\n\t\t&--error,\n\t\t&:user-invalid {\n\t\t\tborder-color: var(--color-border-error, var(--color-error)) !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}\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\tposition: absolute;\n\t\tmargin-inline: var(--input-padding-start) var(--input-padding-end);\n\t\tmax-width: fit-content;\n\t\tfont-size: var(--input-label-font-size);\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\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-large);\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tcolor: var(--color-text-maxcontrast);\n\t\toverflow-wrap: anywhere;\n\n\t\t&__icon {\n\t\t\tmargin-inline-end: 8px;\n\t\t}\n\n\t\t&--error {\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}\n}\n</style>\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"NcInputField-BrzZ8Bne.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<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': !!$scopedSlots.icon \|\| !!$scopedSlots.default \|\| !!$slots.default,\n\t\t\t'input-field--success': success,\n\t\t\t'input-field--trailing-icon': showTrailingButton \|\| hasTrailingIcon,\n\t\t\t'input-field--pill': pill,\n\t\t\t'input-field--legacy': isLegacy32,\n\t\t}\">\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=\"computedId\"\n\t\t\t\tref=\"input\"\n\t\t\t\tclass=\"input-field__input\"\n\t\t\t\t:type=\"type\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t:placeholder=\"computedPlaceholder\"\n\t\t\t\t:aria-describedby=\"ariaDescribedby\"\n\t\t\t\taria-live=\"polite\"\n\t\t\t\t:class=\"[inputClass,\n\t\t\t\t\t{\n\t\t\t\t\t\t'input-field__input--success': success,\n\t\t\t\t\t\t'input-field__input--error': error,\n\t\t\t\t\t}]\"\n\t\t\t\t:value=\"model?.toString()\"\n\t\t\t\tv-on=\"$listeners\"\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=\"computedId\">\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=\"!!$scopedSlots.icon \|\| !!$scopedSlots.default \|\| !!$slots.default\" class=\"input-field__icon input-field__icon--leading\">\n\t\t\t\t<!-- @slot Leading icon, set the size to 18 -->\n\t\t\t\t<slot name=\"icon\">\n\t\t\t\t\t<!-- @slot Deprecated, removed in v9: use #icon slot instead. -->\n\t\t\t\t\t<slot />\n\t\t\t\t</slot>\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=\"handleTrailingButtonClick\">\n\t\t\t\t<!-- Populating this slot creates a trailing button within the\n\t\t\t\tinput boundaries that emits a `trailing-button-click` 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<Check v-if=\"success\" :size=\"20\" style=\"color: var(--color-success-text);\" />\n\t\t\t\t<AlertCircle v-else-if=\"error\" :size=\"20\" style=\"color: var(--color-error-text);\" />\n\t\t\t</div>\n\t\t</div>\n\t\t<p\n\t\t\tv-if=\"helperText.length > 0\"\n\t\t\t:id=\"`${inputName}-helper-text`\"\n\t\t\tclass=\"input-field__helper-text-message\"\n\t\t\t:class=\"{\n\t\t\t\t'input-field__helper-text-message--error': error,\n\t\t\t\t'input-field__helper-text-message--success': success,\n\t\t\t}\">\n\t\t\t<Check v-if=\"success\" class=\"input-field__helper-text-message__icon\" :size=\"18\" />\n\t\t\t<AlertCircle v-else-if=\"error\" class=\"input-field__helper-text-message__icon\" :size=\"18\" />\n\t\t\t{{ helperText }}\n\t\t</p>\n\t</div>\n</template>\n\n<script>\nimport AlertCircle from 'vue-material-design-icons/AlertCircleOutline.vue'\nimport Check from 'vue-material-design-icons/Check.vue'\nimport NcButton from '../NcButton/NcButton.vue'\nimport { useModelMigration } from '../../composables/useModelMigration.ts'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport { isLegacy32 } from '../../utils/legacy.ts'\nimport { logger } from '../../utils/logger.ts'\n\nexport default {\n\tname: 'NcInputField',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tAlertCircle,\n\t\tCheck,\n\t},\n\n\tinheritAttrs: false,\n\n\tmodel: {\n\t\tprop: 'modelValue',\n\t\tevent: 'update:modelValue',\n\t},\n\n\tprops: {\n\t\t/*\n\t\t Removed in v9 - use `modelValue` (`v-model`) instead\n\t\t \n\t\t @deprecated\n\t\t /\n\t\tvalue: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/\n\t\t The value of the input field\n\t\t * If type is 'number' and a number is passed as value than the type of `update:modelValue` will also be 'number'\n\t\t /\n\t\tmodelValue: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/\n\t\t The type of the input element\n\t\t /\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'text',\n\t\t\tvalidator: (value) => [\n\t\t\t\t'text',\n\t\t\t\t'password',\n\t\t\t\t'email',\n\t\t\t\t'tel',\n\t\t\t\t'url',\n\t\t\t\t'search',\n\t\t\t\t'number',\n\t\t\t].includes(value),\n\t\t},\n\n\t\t/\n\t\t The input label, always provide one for accessibility purposes.\n\t\t * This will also be used as a placeholder unless the placeholder\n\t\t * prop is populated with a different string.\n\t\t \n\t\t Note: If the background color is not `--color-main-background` consider using an external label instead (see `labelOutside`).\n\t\t /\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/\n\t\t Pass in true if you want to use an external label. This is useful\n\t\t * if you need a label that looks different from the one provided by\n\t\t * this component\n\t\t /\n\t\tlabelOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t The placeholder of the input. This defaults as the string that's\n\t\t * passed into the label prop. In order to remove the placeholder,\n\t\t * pass in an empty string.\n\t\t /\n\t\tplaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/\n\t\t Controls whether to display the trailing button.\n\t\t /\n\t\tshowTrailingButton: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Label of the trailing button\n\t\t \n\t\t Required when showTrailingButton is set\n\t\t /\n\t\ttrailingButtonLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Toggles the success state of the component. Adds a checkmark icon.\n\t\t * this cannot be used together with canClear.\n\t\t /\n\t\tsuccess: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Toggles the error state of the component. Adds an error icon.\n\t\t * this cannot be used together with canClear.\n\t\t /\n\t\terror: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Additional helper text message\n\t\t \n\t\t This will be displayed beneath the input field. In case the field is\n\t\t * also marked as having an error, the text will be displayed in red.\n\t\t /\n\t\thelperText: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Disable the input field\n\t\t /\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Specifies whether the input should have a pill form.\n\t\t * By default, input has rounded corners.\n\t\t /\n\t\tpill: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Class to add to the input field.\n\t\t * Necessary to use NcInputField in the NcActionInput component.\n\t\t /\n\t\tinputClass: {\n\t\t\ttype: [Object, String],\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: [\n\t\t/\n\t\t Removed in v9 - use `update:modelValue` (`v-model`) instead\n\t\t \n\t\t @deprecated\n\t\t /\n\t\t'update:value',\n\t\t'update:modelValue',\n\t\t/* Same as update:modelValue for Vue 2 compatibility /\n\t\t'update:model-value',\n\t\t'trailing-button-click',\n\t],\n\n\tsetup() {\n\t\tconst model = useModelMigration('value', 'update:value', true)\n\n\t\treturn {\n\t\t\tisLegacy32,\n\t\t\tmodel,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tcomputedId() {\n\t\t\treturn this.$attrs.id && this.$attrs.id !== '' ? this.$attrs.id : this.inputName\n\t\t},\n\n\t\tinputName() {\n\t\t\treturn 'input' + GenRandomId()\n\t\t},\n\n\t\thasTrailingIcon() {\n\t\t\treturn this.success\n\t\t},\n\n\t\tcomputedPlaceholder() {\n\t\t\tif (this.placeholder) {\n\t\t\t\treturn this.placeholder\n\t\t\t}\n\t\t\tif (this.label) {\n\t\t\t\t// if there is a label we use it as fallback on legacy but on current we need\n\t\t\t\t// to pass at least an empty string as placeholder to make css `:placeholder-shown` work.\n\t\t\t\treturn isLegacy32 ? this.label : ''\n\t\t\t}\n\t\t\treturn undefined\n\t\t},\n\n\t\tisValidLabel() {\n\t\t\tconst isValidLabel = this.label \|\| this.labelOutside\n\t\t\tif (!isValidLabel) {\n\t\t\t\tlogger.warn('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\t\t}\n\t\t\treturn isValidLabel\n\t\t},\n\n\t\tariaDescribedby() {\n\t\t\tconst ariaDescribedby = []\n\t\t\tif (this.helperText.length > 0) {\n\t\t\t\tariaDescribedby.push(`${this.inputName}-helper-text`)\n\t\t\t}\n\t\t\tif (this.$attrs['aria-describedby']) {\n\t\t\t\tariaDescribedby.push(this.$attrs['aria-describedby'])\n\t\t\t}\n\t\t\treturn ariaDescribedby.join(' ') \|\| null\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/\n\t\t Focus the input element\n\t\t \n\t\t @public\n\t\t /\n\t\tfocus() {\n\t\t\tthis.$refs.input.focus()\n\t\t},\n\n\t\t/\n\t\t Select all the text in the input\n\t\t \n\t\t @public\n\t\t /\n\t\tselect() {\n\t\t\tthis.$refs.input.select()\n\t\t},\n\n\t\thandleInput(event) {\n\t\t\tconst newValue = this.type === 'number' && typeof this.model === 'number' ? parseFloat(event.target.value, 10) : event.target.value\n\t\t\tthis.model = newValue\n\t\t},\n\n\t\thandleTrailingButtonClick(event) {\n\t\t\tthis.$emit('trailing-button-click', event)\n\t\t},\n\t},\n}\n</script>\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-large);\n\t// The padding where the input has to end (trailing button or border)\n\t--input-padding-end: var(--border-radius-large);\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\n\t\t&--success {\n\t\t\tborder-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\n\t\t&--error,\n\t\t&:user-invalid {\n\t\t\tborder-color: var(--color-border-error, var(--color-error)) !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}\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\tposition: absolute;\n\t\tmargin-inline: var(--input-padding-start) var(--input-padding-end);\n\t\tmax-width: fit-content;\n\t\tfont-size: var(--input-label-font-size);\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\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: var(--font-weight-element, 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-large);\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tcolor: var(--color-text-maxcontrast);\n\t\toverflow-wrap: anywhere;\n\n\t\t&__icon {\n\t\t\tmargin-inline-end: 8px;\n\t\t}\n\n\t\t&--error {\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}\n}\n</style>\n"],"names":[],"mappings":"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"}

package/dist/chunks/{NcInputField-DX2Jz57P.cjs → NcInputField-DPby7_cZ.cjs} RENAMED Viewed

@@ -1,11 +1,11 @@
-require('../assets/NcInputField-Cc-l-KGd.css');
+require('../assets/NcInputField-KvlF4emB.css');
 "use strict";
 const AlertCircleOutline = require("./AlertCircleOutline-BrsasUsU.cjs");
 const Check = require("./Check-Du8mPz_B.cjs");
-const NcButton = require("./NcButton-DaWD-X8V.cjs");
+const NcButton = require("./NcButton-B3UxfMyE.cjs");
 const useModelMigration = require("./useModelMigration-D5zhrNXr.cjs");
 const GenRandomId = require("./GenRandomId-D7iOvpZS.cjs");
-const legacy = require("./legacy-KBXhWdRy.cjs");
+const legacy = require("./legacy-Bk0qQxIg.cjs");
 const logger = require("./logger-3HuiEIF6.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
 const _sfc_main = {
@@ -264,8 +264,8 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "2bc46a58"
+  "17c3f609"
 );
 const NcInputField = __component__.exports;
 exports.NcInputField = NcInputField;
-//# sourceMappingURL=NcInputField-DX2Jz57P.cjs.map
+//# sourceMappingURL=NcInputField-DPby7_cZ.cjs.map