@nextcloud/vue 8.39.0 → 8.41.0

package/dist/chunks/{NcAppNavigationSearch-CzhlljAU.mjs → NcAppNavigationSearch-DIO0S2TU.mjs}

@@ -2,10 +2,10 @@ import '../assets/NcAppNavigationSearch-DWhTZbjb.css';
 import { useFocusWithin } from "@vueuse/core";
 import { useSlots, ref, watch, nextTick } from "vue";
 import { C as Close } from "./Close-BtLPUSdO.mjs";
-import { N as NcInputField } from "./NcInputField-i4Z8nb4b.mjs";
-import { r as register, o as t44, p as t15, a as t } from "./_l10n-DVz9Qdzk.mjs";
+import { N as NcInputField } from "./NcInputField-Cym5GuvB.mjs";
+import { r as register, p as t45, q as t16, a as t } from "./_l10n-CAnZaLWU.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
-register(t15, t44);
+register(t16, t45);
 const __default__ = {
   name: "NcAppNavigationSearch",
   model: {
@@ -98,4 +98,4 @@ const NcAppNavigationSearch = __component__.exports;
 export {
   NcAppNavigationSearch as N
 };
-//# sourceMappingURL=NcAppNavigationSearch-CzhlljAU.mjs.map
+//# sourceMappingURL=NcAppNavigationSearch-DIO0S2TU.mjs.map

package/dist/chunks/{NcAppNavigationSearch-CzhlljAU.mjs.map → NcAppNavigationSearch-DIO0S2TU.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcAppNavigationSearch-CzhlljAU.mjs","sources":["../../src/components/NcAppNavigationSearch/NcAppNavigationSearch.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Usage\n\n```vue\n<template>\n\t<div class=\"styleguide-wrapper\">\n\t\t<NcContent app-name=\"styleguide-app-navigation\" class=\"content-styleguidist\">\n\t\t\t<NcAppNavigation>\n\t\t\t\t<template #search>\n\t\t\t\t\t<NcAppNavigationSearch v-model=\"searchQuery\">\n\t\t\t\t\t\t<template #actions>\n\t\t\t\t\t\t\t<NcActions aria-label=\"Filters\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconFilterOutline :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t\t<IconAccountOutline :size=\"20\" />\n\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\tFilter by name\n\t\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t\t<IconCalendarAccountOutline :size=\"20\" />\n\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\tFilter by year\n\t\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t\t</NcActions>\n\t\t\t\t\t\t\t<NcButton aria-label=\"Search globally\" variant=\"tertiary\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconSearchGlobalOutline :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcAppNavigationSearch>\n\t\t\t\t</template>\n\t\t\t\t<template #list>\n\t\t\t\t\t<NcAppNavigationItem name=\"First navigation entry\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<IconStarOutline :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcAppNavigationItem>\n\t\t\t\t\t<NcAppNavigationItem name=\"Second navigation entry\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<IconStarOutline :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcAppNavigationItem>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigation>\n\t\t\t<NcAppContent>\n\t\t\t\t<ul class=\"fake-content\">\n\t\t\t\t\t<li>Search query: {{ searchQuery }}</li>\n\t\t\t\t\t<li v-for=\"(item, index) in items\" :key=\"index\">\n\t\t\t\t\t\t{{ item }}\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</NcAppContent>\n\t\t</NcContent>\n\t</div>\n</template>\n<script>\nimport IconAccountOutline from 'vue-material-design-icons/AccountOutline.vue'\nimport IconCalendarAccountOutline from 'vue-material-design-icons/CalendarAccountOutline.vue'\nimport IconFilterOutline from 'vue-material-design-icons/FilterOutline.vue'\nimport IconSearchGlobalOutline from 'vue-material-design-icons/CloudSearchOutline.vue'\nimport IconStarOutline from 'vue-material-design-icons/StarOutline.vue'\n\nconst exampleItem = ['Mary', 'Patricia', 'James', 'Michael']\n\nexport default {\n\tcomponents: {\n\t\tIconAccountOutline,\n\t\tIconCalendarAccountOutline,\n\t\tIconFilterOutline,\n\t\tIconSearchGlobalOutline,\n\t\tIconStarOutline,\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tsearchQuery: '',\n\t\t}\n\t},\n\n\tcomputed: {\n\t\titems() {\n\t\t\treturn exampleItem.filter((item) => item.toLocaleLowerCase().includes(this.searchQuery.toLocaleLowerCase()))\n\t\t},\n\t},\n}\n</script>\n<style scoped>\n/* This styles just mock NcContent and NcAppContent */\n.content-styleguidist {\n\tposition: relative !important;\n\tmargin: 0 !important;\n\t/* prevent jumping */\n\tmin-height: 200px;\n}\n\n.content-styleguidist > * {\n\theight: auto;\n}\n\n.fake-content {\n\tpadding: var(--app-navigation-padding);\n\tpadding-top: calc(2 * var(--app-navigation-padding) + var(--default-clickable-area));\n}\n\n.styleguide-wrapper {\n\tbackground-color: var(--color-background-plain);\n\tpadding: var(--body-container-margin);\n}\n</style>\n```\n</docs>\n\n<template>\n\t<div\n\t\tclass=\"app-navigation-search\"\n\t\t:class=\"{\n\t\t\t'app-navigation-search--has-actions': hasActions(),\n\t\t}\">\n\t\t<NcInputField\n\t\t\tref=\"inputElement\"\n\t\t\t:aria-label=\"label\"\n\t\t\tclass=\"app-navigation-search__input\"\n\t\t\tlabel-outside\n\t\t\t:placeholder=\"placeholder ?? label\"\n\t\t\tshow-trailing-button\n\t\t\t:trailing-button-label=\"t('Clear search')\"\n\t\t\ttype=\"search\"\n\t\t\t:value=\"modelValue\"\n\t\t\t@update:value=\"$emit('update:modelValue', $event)\"\n\t\t\t@trailing-button-click=\"onCloseSearch\">\n\t\t\t<template #trailing-button-icon>\n\t\t\t\t<IconClose :size=\"20\" />\n\t\t\t</template>\n\t\t</NcInputField>\n\t\t<div\n\t\t\tv-if=\"hasActions()\"\n\t\t\tref=\"actionsContainer\"\n\t\t\tclass=\"app-navigation-search__actions\"\n\t\t\t:class=\"{\n\t\t\t\t'app-navigation-search__actions--hidden': !showActions,\n\t\t\t\t'hidden-visually': hideActions,\n\t\t\t}\">\n\t\t\t<slot name=\"actions\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\nimport { useFocusWithin } from '@vueuse/core'\nimport { nextTick, ref, useSlots, watch } from 'vue'\nimport IconClose from 'vue-material-design-icons/Close.vue'\nimport NcInputField from '../NcInputField/NcInputField.vue'\nimport { t } from '../../l10n.js'\n\ndefineProps({\n\t/**\n\t * Current search input\n\t */\n\tmodelValue: {\n\t\ttype: String,\n\t\tdefault: '',\n\t},\n\t/**\n\t * Text used to label the search input\n\t */\n\tlabel: {\n\t\ttype: String,\n\t\tdefault: t('Search …'),\n\t},\n\n\t/**\n\t * Placeholder of the search input\n\t * By default the value of `label` is used.\n\t */\n\tplaceholder: {\n\t\ttype: String,\n\t\tdefault: null,\n\t},\n})\n\nconst emit = defineEmits(['update:modelValue'])\nconst slots = useSlots()\n\nconst inputElement = ref()\nconst { focused: inputHasFocus } = useFocusWithin(inputElement)\n\n/** Timeout used to define when the search input is fully expanded */\nconst transitionTimeout = Number.parseInt(window.getComputedStyle(window.document.body).getPropertyValue('--animation-quick')) || 100\n\n/**\n * @type {import('vue').Ref<HTMLDivElement>}\n */\nconst actionsContainer = ref()\nconst hasActions = () => !!slots.actions\nconst showActions = ref(true)\nconst timeoutId = ref()\n/** This is used to hide the actions after the transition is done */\nconst hideActions = ref(false)\nwatch(inputHasFocus, () => {\n\tshowActions.value = !inputHasFocus.value\n})\nwatch(showActions, (show) => {\n\twindow.clearTimeout(timeoutId.value)\n\tif (show) {\n\t\thideActions.value = false\n\t} else {\n\t\t// If the transition is done, we fully hide the actions visually\n\t\twindow.setTimeout(() => {\n\t\t\thideActions.value = !show\n\t\t}, transitionTimeout)\n\t}\n})\n\n/**\n * Handle close the search\n */\nfunction onCloseSearch() {\n\temit('update:modelValue', '')\n\tif (hasActions()) {\n\t\tshowActions.value = true\n\t\tnextTick(() => actionsContainer.value.querySelector('button')?.focus())\n\t}\n}\n</script>\n\n<script>\nexport default {\n\tname: 'NcAppNavigationSearch',\n\tmodel: {\n\t\tevent: 'update:modelValue',\n\t\tprop: 'modelValue',\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.app-navigation-search {\n\tdisplay: flex;\n\tgap: var(--app-navigation-padding);\n\tpadding: var(--app-navigation-padding);\n\n\t&--has-actions &__input {\n\t\tflex-grow: 1;\n\t\tz-index: 3;\n\t}\n\n\t&__actions {\n\t\tdisplay: flex;\n\t\tgap: var(--default-grid-baseline);\n\n\t\tmargin-inline-start: 0;\n\t\tmax-width: calc(2 * var(--default-clickable-area) + var(--default-grid-baseline));\n\t\tmax-height: var(--default-clickable-area);\n\n\t\ttransition: margin-inline-start var(--animation-quick);\n\n\t\t&--hidden {\n\t\t\tmargin-inline-start: calc(-1 * var(--default-clickable-area));\n\t\t}\n\t}\n\n\t&__input {\n\t\t// This is a fallback for legacy version (Nextcloud 29 and older) so that we keep the pill like design there\n\t\t--input-border-radius: var(--border-radius-element, var(--border-radius-pill)) !important;\n\t}\n}\n</style>\n"],"names":[],"mappings":";;;;;;;AA4OA,MAAA,cAAe;AAAA,EACd,MAAM;AAAA,EACN,OAAO;AAAA,IACN,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAnDA,UAAM,QAAQ,SAAQ;AAEtB,UAAM,eAAe,IAAG;AACxB,UAAM,EAAE,SAAS,kBAAkB,eAAe,YAAY;AAG9D,UAAM,oBAAoB,OAAO,SAAS,OAAO,iBAAiB,OAAO,SAAS,IAAI,EAAE,iBAAiB,mBAAmB,CAAC,KAAK;AAKlI,UAAM,mBAAmB,IAAG;AAC5B,UAAM,aAAa,MAAM,CAAC,CAAC,MAAM;AACjC,UAAM,cAAc,IAAI,IAAI;AAC5B,UAAM,YAAY,IAAG;AAErB,UAAM,cAAc,IAAI,KAAK;AAC7B,UAAM,eAAe,MAAM;AAC1B,kBAAY,QAAQ,CAAC,cAAc;AAAA,IACpC,CAAC;AACD,UAAM,aAAa,CAAC,SAAS;AAC5B,aAAO,aAAa,UAAU,KAAK;AACnC,UAAI,MAAM;AACT,oBAAY,QAAQ;AAAA,MACrB,OAAO;AAEN,eAAO,WAAW,MAAM;AACvB,sBAAY,QAAQ,CAAC;AAAA,QACtB,GAAG,iBAAiB;AAAA,MACrB;AAAA,IACD,CAAC;AAKD,aAAS,gBAAgB;AACxB,WAAK,qBAAqB,EAAE;AAC5B,UAAI,WAAU,GAAI;AACjB,oBAAY,QAAQ;AACpB,iBAAS,MAAM,iBAAiB,MAAM,cAAc,QAAQ,GAAG,MAAK,CAAE;AAAA,MACvE;AAAA,IACD;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcAppNavigationSearch-DIO0S2TU.mjs","sources":["../../src/components/NcAppNavigationSearch/NcAppNavigationSearch.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Usage\n\n```vue\n<template>\n\t<div class=\"styleguide-wrapper\">\n\t\t<NcContent app-name=\"styleguide-app-navigation\" class=\"content-styleguidist\">\n\t\t\t<NcAppNavigation>\n\t\t\t\t<template #search>\n\t\t\t\t\t<NcAppNavigationSearch v-model=\"searchQuery\">\n\t\t\t\t\t\t<template #actions>\n\t\t\t\t\t\t\t<NcActions aria-label=\"Filters\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconFilterOutline :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t\t<IconAccountOutline :size=\"20\" />\n\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\tFilter by name\n\t\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t\t<IconCalendarAccountOutline :size=\"20\" />\n\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\tFilter by year\n\t\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t\t</NcActions>\n\t\t\t\t\t\t\t<NcButton aria-label=\"Search globally\" variant=\"tertiary\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconSearchGlobalOutline :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcAppNavigationSearch>\n\t\t\t\t</template>\n\t\t\t\t<template #list>\n\t\t\t\t\t<NcAppNavigationItem name=\"First navigation entry\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<IconStarOutline :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcAppNavigationItem>\n\t\t\t\t\t<NcAppNavigationItem name=\"Second navigation entry\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<IconStarOutline :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcAppNavigationItem>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigation>\n\t\t\t<NcAppContent>\n\t\t\t\t<ul class=\"fake-content\">\n\t\t\t\t\t<li>Search query: {{ searchQuery }}</li>\n\t\t\t\t\t<li v-for=\"(item, index) in items\" :key=\"index\">\n\t\t\t\t\t\t{{ item }}\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</NcAppContent>\n\t\t</NcContent>\n\t</div>\n</template>\n<script>\nimport IconAccountOutline from 'vue-material-design-icons/AccountOutline.vue'\nimport IconCalendarAccountOutline from 'vue-material-design-icons/CalendarAccountOutline.vue'\nimport IconFilterOutline from 'vue-material-design-icons/FilterOutline.vue'\nimport IconSearchGlobalOutline from 'vue-material-design-icons/CloudSearchOutline.vue'\nimport IconStarOutline from 'vue-material-design-icons/StarOutline.vue'\n\nconst exampleItem = ['Mary', 'Patricia', 'James', 'Michael']\n\nexport default {\n\tcomponents: {\n\t\tIconAccountOutline,\n\t\tIconCalendarAccountOutline,\n\t\tIconFilterOutline,\n\t\tIconSearchGlobalOutline,\n\t\tIconStarOutline,\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tsearchQuery: '',\n\t\t}\n\t},\n\n\tcomputed: {\n\t\titems() {\n\t\t\treturn exampleItem.filter((item) => item.toLocaleLowerCase().includes(this.searchQuery.toLocaleLowerCase()))\n\t\t},\n\t},\n}\n</script>\n<style scoped>\n/* This styles just mock NcContent and NcAppContent */\n.content-styleguidist {\n\tposition: relative !important;\n\tmargin: 0 !important;\n\t/* prevent jumping */\n\tmin-height: 200px;\n}\n\n.content-styleguidist > * {\n\theight: auto;\n}\n\n.fake-content {\n\tpadding: var(--app-navigation-padding);\n\tpadding-top: calc(2 * var(--app-navigation-padding) + var(--default-clickable-area));\n}\n\n.styleguide-wrapper {\n\tbackground-color: var(--color-background-plain);\n\tpadding: var(--body-container-margin);\n}\n</style>\n```\n</docs>\n\n<template>\n\t<div\n\t\tclass=\"app-navigation-search\"\n\t\t:class=\"{\n\t\t\t'app-navigation-search--has-actions': hasActions(),\n\t\t}\">\n\t\t<NcInputField\n\t\t\tref=\"inputElement\"\n\t\t\t:aria-label=\"label\"\n\t\t\tclass=\"app-navigation-search__input\"\n\t\t\tlabel-outside\n\t\t\t:placeholder=\"placeholder ?? label\"\n\t\t\tshow-trailing-button\n\t\t\t:trailing-button-label=\"t('Clear search')\"\n\t\t\ttype=\"search\"\n\t\t\t:value=\"modelValue\"\n\t\t\t@update:value=\"$emit('update:modelValue', $event)\"\n\t\t\t@trailing-button-click=\"onCloseSearch\">\n\t\t\t<template #trailing-button-icon>\n\t\t\t\t<IconClose :size=\"20\" />\n\t\t\t</template>\n\t\t</NcInputField>\n\t\t<div\n\t\t\tv-if=\"hasActions()\"\n\t\t\tref=\"actionsContainer\"\n\t\t\tclass=\"app-navigation-search__actions\"\n\t\t\t:class=\"{\n\t\t\t\t'app-navigation-search__actions--hidden': !showActions,\n\t\t\t\t'hidden-visually': hideActions,\n\t\t\t}\">\n\t\t\t<slot name=\"actions\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\nimport { useFocusWithin } from '@vueuse/core'\nimport { nextTick, ref, useSlots, watch } from 'vue'\nimport IconClose from 'vue-material-design-icons/Close.vue'\nimport NcInputField from '../NcInputField/NcInputField.vue'\nimport { t } from '../../l10n.js'\n\ndefineProps({\n\t/**\n\t * Current search input\n\t */\n\tmodelValue: {\n\t\ttype: String,\n\t\tdefault: '',\n\t},\n\t/**\n\t * Text used to label the search input\n\t */\n\tlabel: {\n\t\ttype: String,\n\t\tdefault: t('Search …'),\n\t},\n\n\t/**\n\t * Placeholder of the search input\n\t * By default the value of `label` is used.\n\t */\n\tplaceholder: {\n\t\ttype: String,\n\t\tdefault: null,\n\t},\n})\n\nconst emit = defineEmits(['update:modelValue'])\nconst slots = useSlots()\n\nconst inputElement = ref()\nconst { focused: inputHasFocus } = useFocusWithin(inputElement)\n\n/** Timeout used to define when the search input is fully expanded */\nconst transitionTimeout = Number.parseInt(window.getComputedStyle(window.document.body).getPropertyValue('--animation-quick')) || 100\n\n/**\n * @type {import('vue').Ref<HTMLDivElement>}\n */\nconst actionsContainer = ref()\nconst hasActions = () => !!slots.actions\nconst showActions = ref(true)\nconst timeoutId = ref()\n/** This is used to hide the actions after the transition is done */\nconst hideActions = ref(false)\nwatch(inputHasFocus, () => {\n\tshowActions.value = !inputHasFocus.value\n})\nwatch(showActions, (show) => {\n\twindow.clearTimeout(timeoutId.value)\n\tif (show) {\n\t\thideActions.value = false\n\t} else {\n\t\t// If the transition is done, we fully hide the actions visually\n\t\twindow.setTimeout(() => {\n\t\t\thideActions.value = !show\n\t\t}, transitionTimeout)\n\t}\n})\n\n/**\n * Handle close the search\n */\nfunction onCloseSearch() {\n\temit('update:modelValue', '')\n\tif (hasActions()) {\n\t\tshowActions.value = true\n\t\tnextTick(() => actionsContainer.value.querySelector('button')?.focus())\n\t}\n}\n</script>\n\n<script>\nexport default {\n\tname: 'NcAppNavigationSearch',\n\tmodel: {\n\t\tevent: 'update:modelValue',\n\t\tprop: 'modelValue',\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.app-navigation-search {\n\tdisplay: flex;\n\tgap: var(--app-navigation-padding);\n\tpadding: var(--app-navigation-padding);\n\n\t&--has-actions &__input {\n\t\tflex-grow: 1;\n\t\tz-index: 3;\n\t}\n\n\t&__actions {\n\t\tdisplay: flex;\n\t\tgap: var(--default-grid-baseline);\n\n\t\tmargin-inline-start: 0;\n\t\tmax-width: calc(2 * var(--default-clickable-area) + var(--default-grid-baseline));\n\t\tmax-height: var(--default-clickable-area);\n\n\t\ttransition: margin-inline-start var(--animation-quick);\n\n\t\t&--hidden {\n\t\t\tmargin-inline-start: calc(-1 * var(--default-clickable-area));\n\t\t}\n\t}\n\n\t&__input {\n\t\t// This is a fallback for legacy version (Nextcloud 29 and older) so that we keep the pill like design there\n\t\t--input-border-radius: var(--border-radius-element, var(--border-radius-pill)) !important;\n\t}\n}\n</style>\n"],"names":[],"mappings":";;;;;;;AA4OA,MAAA,cAAe;AAAA,EACd,MAAM;AAAA,EACN,OAAO;AAAA,IACN,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAnDA,UAAM,QAAQ,SAAQ;AAEtB,UAAM,eAAe,IAAG;AACxB,UAAM,EAAE,SAAS,kBAAkB,eAAe,YAAY;AAG9D,UAAM,oBAAoB,OAAO,SAAS,OAAO,iBAAiB,OAAO,SAAS,IAAI,EAAE,iBAAiB,mBAAmB,CAAC,KAAK;AAKlI,UAAM,mBAAmB,IAAG;AAC5B,UAAM,aAAa,MAAM,CAAC,CAAC,MAAM;AACjC,UAAM,cAAc,IAAI,IAAI;AAC5B,UAAM,YAAY,IAAG;AAErB,UAAM,cAAc,IAAI,KAAK;AAC7B,UAAM,eAAe,MAAM;AAC1B,kBAAY,QAAQ,CAAC,cAAc;AAAA,IACpC,CAAC;AACD,UAAM,aAAa,CAAC,SAAS;AAC5B,aAAO,aAAa,UAAU,KAAK;AACnC,UAAI,MAAM;AACT,oBAAY,QAAQ;AAAA,MACrB,OAAO;AAEN,eAAO,WAAW,MAAM;AACvB,sBAAY,QAAQ,CAAC;AAAA,QACtB,GAAG,iBAAiB;AAAA,MACrB;AAAA,IACD,CAAC;AAKD,aAAS,gBAAgB;AACxB,WAAK,qBAAqB,EAAE;AAC5B,UAAI,WAAU,GAAI;AACjB,oBAAY,QAAQ;AACpB,iBAAS,MAAM,iBAAiB,MAAM,cAAc,QAAQ,GAAG,MAAK,CAAE;AAAA,MACvE;AAAA,IACD;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcAppNavigationSearch-Czcwiin4.cjs → NcAppNavigationSearch-DZEqsYpD.cjs}

@@ -3,10 +3,10 @@ require('../assets/NcAppNavigationSearch-DWhTZbjb.css');
 const core = require("@vueuse/core");
 const Vue = require("vue");
 const Close = require("./Close-CqmXxEKi.cjs");
-const NcInputField = require("./NcInputField-Brpn446B.cjs");
-const _l10n = require("./_l10n-skrZri3h.cjs");
+const NcInputField = require("./NcInputField-BcmWwfT5.cjs");
+const _l10n = require("./_l10n-Be-gO5QO.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
-_l10n.register(_l10n.t15, _l10n.t44);
+_l10n.register(_l10n.t16, _l10n.t45);
 const __default__ = {
   name: "NcAppNavigationSearch",
   model: {
@@ -97,4 +97,4 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
 );
 const NcAppNavigationSearch = __component__.exports;
 exports.NcAppNavigationSearch = NcAppNavigationSearch;
-//# sourceMappingURL=NcAppNavigationSearch-Czcwiin4.cjs.map
+//# sourceMappingURL=NcAppNavigationSearch-DZEqsYpD.cjs.map

package/dist/chunks/{NcAppNavigationSearch-Czcwiin4.cjs.map → NcAppNavigationSearch-DZEqsYpD.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcAppNavigationSearch-Czcwiin4.cjs","sources":["../../src/components/NcAppNavigationSearch/NcAppNavigationSearch.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Usage\n\n```vue\n<template>\n\t<div class=\"styleguide-wrapper\">\n\t\t<NcContent app-name=\"styleguide-app-navigation\" class=\"content-styleguidist\">\n\t\t\t<NcAppNavigation>\n\t\t\t\t<template #search>\n\t\t\t\t\t<NcAppNavigationSearch v-model=\"searchQuery\">\n\t\t\t\t\t\t<template #actions>\n\t\t\t\t\t\t\t<NcActions aria-label=\"Filters\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconFilterOutline :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t\t<IconAccountOutline :size=\"20\" />\n\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\tFilter by name\n\t\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t\t<IconCalendarAccountOutline :size=\"20\" />\n\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\tFilter by year\n\t\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t\t</NcActions>\n\t\t\t\t\t\t\t<NcButton aria-label=\"Search globally\" variant=\"tertiary\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconSearchGlobalOutline :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcAppNavigationSearch>\n\t\t\t\t</template>\n\t\t\t\t<template #list>\n\t\t\t\t\t<NcAppNavigationItem name=\"First navigation entry\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<IconStarOutline :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcAppNavigationItem>\n\t\t\t\t\t<NcAppNavigationItem name=\"Second navigation entry\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<IconStarOutline :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcAppNavigationItem>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigation>\n\t\t\t<NcAppContent>\n\t\t\t\t<ul class=\"fake-content\">\n\t\t\t\t\t<li>Search query: {{ searchQuery }}</li>\n\t\t\t\t\t<li v-for=\"(item, index) in items\" :key=\"index\">\n\t\t\t\t\t\t{{ item }}\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</NcAppContent>\n\t\t</NcContent>\n\t</div>\n</template>\n<script>\nimport IconAccountOutline from 'vue-material-design-icons/AccountOutline.vue'\nimport IconCalendarAccountOutline from 'vue-material-design-icons/CalendarAccountOutline.vue'\nimport IconFilterOutline from 'vue-material-design-icons/FilterOutline.vue'\nimport IconSearchGlobalOutline from 'vue-material-design-icons/CloudSearchOutline.vue'\nimport IconStarOutline from 'vue-material-design-icons/StarOutline.vue'\n\nconst exampleItem = ['Mary', 'Patricia', 'James', 'Michael']\n\nexport default {\n\tcomponents: {\n\t\tIconAccountOutline,\n\t\tIconCalendarAccountOutline,\n\t\tIconFilterOutline,\n\t\tIconSearchGlobalOutline,\n\t\tIconStarOutline,\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tsearchQuery: '',\n\t\t}\n\t},\n\n\tcomputed: {\n\t\titems() {\n\t\t\treturn exampleItem.filter((item) => item.toLocaleLowerCase().includes(this.searchQuery.toLocaleLowerCase()))\n\t\t},\n\t},\n}\n</script>\n<style scoped>\n/* This styles just mock NcContent and NcAppContent */\n.content-styleguidist {\n\tposition: relative !important;\n\tmargin: 0 !important;\n\t/* prevent jumping */\n\tmin-height: 200px;\n}\n\n.content-styleguidist > * {\n\theight: auto;\n}\n\n.fake-content {\n\tpadding: var(--app-navigation-padding);\n\tpadding-top: calc(2 * var(--app-navigation-padding) + var(--default-clickable-area));\n}\n\n.styleguide-wrapper {\n\tbackground-color: var(--color-background-plain);\n\tpadding: var(--body-container-margin);\n}\n</style>\n```\n</docs>\n\n<template>\n\t<div\n\t\tclass=\"app-navigation-search\"\n\t\t:class=\"{\n\t\t\t'app-navigation-search--has-actions': hasActions(),\n\t\t}\">\n\t\t<NcInputField\n\t\t\tref=\"inputElement\"\n\t\t\t:aria-label=\"label\"\n\t\t\tclass=\"app-navigation-search__input\"\n\t\t\tlabel-outside\n\t\t\t:placeholder=\"placeholder ?? label\"\n\t\t\tshow-trailing-button\n\t\t\t:trailing-button-label=\"t('Clear search')\"\n\t\t\ttype=\"search\"\n\t\t\t:value=\"modelValue\"\n\t\t\t@update:value=\"$emit('update:modelValue', $event)\"\n\t\t\t@trailing-button-click=\"onCloseSearch\">\n\t\t\t<template #trailing-button-icon>\n\t\t\t\t<IconClose :size=\"20\" />\n\t\t\t</template>\n\t\t</NcInputField>\n\t\t<div\n\t\t\tv-if=\"hasActions()\"\n\t\t\tref=\"actionsContainer\"\n\t\t\tclass=\"app-navigation-search__actions\"\n\t\t\t:class=\"{\n\t\t\t\t'app-navigation-search__actions--hidden': !showActions,\n\t\t\t\t'hidden-visually': hideActions,\n\t\t\t}\">\n\t\t\t<slot name=\"actions\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\nimport { useFocusWithin } from '@vueuse/core'\nimport { nextTick, ref, useSlots, watch } from 'vue'\nimport IconClose from 'vue-material-design-icons/Close.vue'\nimport NcInputField from '../NcInputField/NcInputField.vue'\nimport { t } from '../../l10n.js'\n\ndefineProps({\n\t/**\n\t * Current search input\n\t */\n\tmodelValue: {\n\t\ttype: String,\n\t\tdefault: '',\n\t},\n\t/**\n\t * Text used to label the search input\n\t */\n\tlabel: {\n\t\ttype: String,\n\t\tdefault: t('Search …'),\n\t},\n\n\t/**\n\t * Placeholder of the search input\n\t * By default the value of `label` is used.\n\t */\n\tplaceholder: {\n\t\ttype: String,\n\t\tdefault: null,\n\t},\n})\n\nconst emit = defineEmits(['update:modelValue'])\nconst slots = useSlots()\n\nconst inputElement = ref()\nconst { focused: inputHasFocus } = useFocusWithin(inputElement)\n\n/** Timeout used to define when the search input is fully expanded */\nconst transitionTimeout = Number.parseInt(window.getComputedStyle(window.document.body).getPropertyValue('--animation-quick')) || 100\n\n/**\n * @type {import('vue').Ref<HTMLDivElement>}\n */\nconst actionsContainer = ref()\nconst hasActions = () => !!slots.actions\nconst showActions = ref(true)\nconst timeoutId = ref()\n/** This is used to hide the actions after the transition is done */\nconst hideActions = ref(false)\nwatch(inputHasFocus, () => {\n\tshowActions.value = !inputHasFocus.value\n})\nwatch(showActions, (show) => {\n\twindow.clearTimeout(timeoutId.value)\n\tif (show) {\n\t\thideActions.value = false\n\t} else {\n\t\t// If the transition is done, we fully hide the actions visually\n\t\twindow.setTimeout(() => {\n\t\t\thideActions.value = !show\n\t\t}, transitionTimeout)\n\t}\n})\n\n/**\n * Handle close the search\n */\nfunction onCloseSearch() {\n\temit('update:modelValue', '')\n\tif (hasActions()) {\n\t\tshowActions.value = true\n\t\tnextTick(() => actionsContainer.value.querySelector('button')?.focus())\n\t}\n}\n</script>\n\n<script>\nexport default {\n\tname: 'NcAppNavigationSearch',\n\tmodel: {\n\t\tevent: 'update:modelValue',\n\t\tprop: 'modelValue',\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.app-navigation-search {\n\tdisplay: flex;\n\tgap: var(--app-navigation-padding);\n\tpadding: var(--app-navigation-padding);\n\n\t&--has-actions &__input {\n\t\tflex-grow: 1;\n\t\tz-index: 3;\n\t}\n\n\t&__actions {\n\t\tdisplay: flex;\n\t\tgap: var(--default-grid-baseline);\n\n\t\tmargin-inline-start: 0;\n\t\tmax-width: calc(2 * var(--default-clickable-area) + var(--default-grid-baseline));\n\t\tmax-height: var(--default-clickable-area);\n\n\t\ttransition: margin-inline-start var(--animation-quick);\n\n\t\t&--hidden {\n\t\t\tmargin-inline-start: calc(-1 * var(--default-clickable-area));\n\t\t}\n\t}\n\n\t&__input {\n\t\t// This is a fallback for legacy version (Nextcloud 29 and older) so that we keep the pill like design there\n\t\t--input-border-radius: var(--border-radius-element, var(--border-radius-pill)) !important;\n\t}\n}\n</style>\n"],"names":["useSlots","ref","useFocusWithin","watch","nextTick"],"mappings":";;;;;;;;AA4OA,MAAA,cAAe;AAAA,EACd,MAAM;AAAA,EACN,OAAO;AAAA,IACN,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAnDA,UAAM,QAAQA,IAAAA,SAAQ;AAEtB,UAAM,eAAeC,IAAAA,IAAG;AACxB,UAAM,EAAE,SAAS,kBAAkBC,KAAAA,eAAe,YAAY;AAG9D,UAAM,oBAAoB,OAAO,SAAS,OAAO,iBAAiB,OAAO,SAAS,IAAI,EAAE,iBAAiB,mBAAmB,CAAC,KAAK;AAKlI,UAAM,mBAAmBD,IAAAA,IAAG;AAC5B,UAAM,aAAa,MAAM,CAAC,CAAC,MAAM;AACjC,UAAM,cAAcA,IAAAA,IAAI,IAAI;AAC5B,UAAM,YAAYA,IAAAA,IAAG;AAErB,UAAM,cAAcA,IAAAA,IAAI,KAAK;AAC7BE,QAAAA,MAAM,eAAe,MAAM;AAC1B,kBAAY,QAAQ,CAAC,cAAc;AAAA,IACpC,CAAC;AACDA,QAAAA,MAAM,aAAa,CAAC,SAAS;AAC5B,aAAO,aAAa,UAAU,KAAK;AACnC,UAAI,MAAM;AACT,oBAAY,QAAQ;AAAA,MACrB,OAAO;AAEN,eAAO,WAAW,MAAM;AACvB,sBAAY,QAAQ,CAAC;AAAA,QACtB,GAAG,iBAAiB;AAAA,MACrB;AAAA,IACD,CAAC;AAKD,aAAS,gBAAgB;AACxB,WAAK,qBAAqB,EAAE;AAC5B,UAAI,WAAU,GAAI;AACjB,oBAAY,QAAQ;AACpBC,YAAAA,SAAS,MAAM,iBAAiB,MAAM,cAAc,QAAQ,GAAG,MAAK,CAAE;AAAA,MACvE;AAAA,IACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcAppNavigationSearch-DZEqsYpD.cjs","sources":["../../src/components/NcAppNavigationSearch/NcAppNavigationSearch.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Usage\n\n```vue\n<template>\n\t<div class=\"styleguide-wrapper\">\n\t\t<NcContent app-name=\"styleguide-app-navigation\" class=\"content-styleguidist\">\n\t\t\t<NcAppNavigation>\n\t\t\t\t<template #search>\n\t\t\t\t\t<NcAppNavigationSearch v-model=\"searchQuery\">\n\t\t\t\t\t\t<template #actions>\n\t\t\t\t\t\t\t<NcActions aria-label=\"Filters\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconFilterOutline :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t\t<IconAccountOutline :size=\"20\" />\n\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\tFilter by name\n\t\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t\t<IconCalendarAccountOutline :size=\"20\" />\n\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\tFilter by year\n\t\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t\t</NcActions>\n\t\t\t\t\t\t\t<NcButton aria-label=\"Search globally\" variant=\"tertiary\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconSearchGlobalOutline :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcAppNavigationSearch>\n\t\t\t\t</template>\n\t\t\t\t<template #list>\n\t\t\t\t\t<NcAppNavigationItem name=\"First navigation entry\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<IconStarOutline :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcAppNavigationItem>\n\t\t\t\t\t<NcAppNavigationItem name=\"Second navigation entry\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<IconStarOutline :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcAppNavigationItem>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigation>\n\t\t\t<NcAppContent>\n\t\t\t\t<ul class=\"fake-content\">\n\t\t\t\t\t<li>Search query: {{ searchQuery }}</li>\n\t\t\t\t\t<li v-for=\"(item, index) in items\" :key=\"index\">\n\t\t\t\t\t\t{{ item }}\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</NcAppContent>\n\t\t</NcContent>\n\t</div>\n</template>\n<script>\nimport IconAccountOutline from 'vue-material-design-icons/AccountOutline.vue'\nimport IconCalendarAccountOutline from 'vue-material-design-icons/CalendarAccountOutline.vue'\nimport IconFilterOutline from 'vue-material-design-icons/FilterOutline.vue'\nimport IconSearchGlobalOutline from 'vue-material-design-icons/CloudSearchOutline.vue'\nimport IconStarOutline from 'vue-material-design-icons/StarOutline.vue'\n\nconst exampleItem = ['Mary', 'Patricia', 'James', 'Michael']\n\nexport default {\n\tcomponents: {\n\t\tIconAccountOutline,\n\t\tIconCalendarAccountOutline,\n\t\tIconFilterOutline,\n\t\tIconSearchGlobalOutline,\n\t\tIconStarOutline,\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tsearchQuery: '',\n\t\t}\n\t},\n\n\tcomputed: {\n\t\titems() {\n\t\t\treturn exampleItem.filter((item) => item.toLocaleLowerCase().includes(this.searchQuery.toLocaleLowerCase()))\n\t\t},\n\t},\n}\n</script>\n<style scoped>\n/* This styles just mock NcContent and NcAppContent */\n.content-styleguidist {\n\tposition: relative !important;\n\tmargin: 0 !important;\n\t/* prevent jumping */\n\tmin-height: 200px;\n}\n\n.content-styleguidist > * {\n\theight: auto;\n}\n\n.fake-content {\n\tpadding: var(--app-navigation-padding);\n\tpadding-top: calc(2 * var(--app-navigation-padding) + var(--default-clickable-area));\n}\n\n.styleguide-wrapper {\n\tbackground-color: var(--color-background-plain);\n\tpadding: var(--body-container-margin);\n}\n</style>\n```\n</docs>\n\n<template>\n\t<div\n\t\tclass=\"app-navigation-search\"\n\t\t:class=\"{\n\t\t\t'app-navigation-search--has-actions': hasActions(),\n\t\t}\">\n\t\t<NcInputField\n\t\t\tref=\"inputElement\"\n\t\t\t:aria-label=\"label\"\n\t\t\tclass=\"app-navigation-search__input\"\n\t\t\tlabel-outside\n\t\t\t:placeholder=\"placeholder ?? label\"\n\t\t\tshow-trailing-button\n\t\t\t:trailing-button-label=\"t('Clear search')\"\n\t\t\ttype=\"search\"\n\t\t\t:value=\"modelValue\"\n\t\t\t@update:value=\"$emit('update:modelValue', $event)\"\n\t\t\t@trailing-button-click=\"onCloseSearch\">\n\t\t\t<template #trailing-button-icon>\n\t\t\t\t<IconClose :size=\"20\" />\n\t\t\t</template>\n\t\t</NcInputField>\n\t\t<div\n\t\t\tv-if=\"hasActions()\"\n\t\t\tref=\"actionsContainer\"\n\t\t\tclass=\"app-navigation-search__actions\"\n\t\t\t:class=\"{\n\t\t\t\t'app-navigation-search__actions--hidden': !showActions,\n\t\t\t\t'hidden-visually': hideActions,\n\t\t\t}\">\n\t\t\t<slot name=\"actions\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script setup>\nimport { useFocusWithin } from '@vueuse/core'\nimport { nextTick, ref, useSlots, watch } from 'vue'\nimport IconClose from 'vue-material-design-icons/Close.vue'\nimport NcInputField from '../NcInputField/NcInputField.vue'\nimport { t } from '../../l10n.js'\n\ndefineProps({\n\t/**\n\t * Current search input\n\t */\n\tmodelValue: {\n\t\ttype: String,\n\t\tdefault: '',\n\t},\n\t/**\n\t * Text used to label the search input\n\t */\n\tlabel: {\n\t\ttype: String,\n\t\tdefault: t('Search …'),\n\t},\n\n\t/**\n\t * Placeholder of the search input\n\t * By default the value of `label` is used.\n\t */\n\tplaceholder: {\n\t\ttype: String,\n\t\tdefault: null,\n\t},\n})\n\nconst emit = defineEmits(['update:modelValue'])\nconst slots = useSlots()\n\nconst inputElement = ref()\nconst { focused: inputHasFocus } = useFocusWithin(inputElement)\n\n/** Timeout used to define when the search input is fully expanded */\nconst transitionTimeout = Number.parseInt(window.getComputedStyle(window.document.body).getPropertyValue('--animation-quick')) || 100\n\n/**\n * @type {import('vue').Ref<HTMLDivElement>}\n */\nconst actionsContainer = ref()\nconst hasActions = () => !!slots.actions\nconst showActions = ref(true)\nconst timeoutId = ref()\n/** This is used to hide the actions after the transition is done */\nconst hideActions = ref(false)\nwatch(inputHasFocus, () => {\n\tshowActions.value = !inputHasFocus.value\n})\nwatch(showActions, (show) => {\n\twindow.clearTimeout(timeoutId.value)\n\tif (show) {\n\t\thideActions.value = false\n\t} else {\n\t\t// If the transition is done, we fully hide the actions visually\n\t\twindow.setTimeout(() => {\n\t\t\thideActions.value = !show\n\t\t}, transitionTimeout)\n\t}\n})\n\n/**\n * Handle close the search\n */\nfunction onCloseSearch() {\n\temit('update:modelValue', '')\n\tif (hasActions()) {\n\t\tshowActions.value = true\n\t\tnextTick(() => actionsContainer.value.querySelector('button')?.focus())\n\t}\n}\n</script>\n\n<script>\nexport default {\n\tname: 'NcAppNavigationSearch',\n\tmodel: {\n\t\tevent: 'update:modelValue',\n\t\tprop: 'modelValue',\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.app-navigation-search {\n\tdisplay: flex;\n\tgap: var(--app-navigation-padding);\n\tpadding: var(--app-navigation-padding);\n\n\t&--has-actions &__input {\n\t\tflex-grow: 1;\n\t\tz-index: 3;\n\t}\n\n\t&__actions {\n\t\tdisplay: flex;\n\t\tgap: var(--default-grid-baseline);\n\n\t\tmargin-inline-start: 0;\n\t\tmax-width: calc(2 * var(--default-clickable-area) + var(--default-grid-baseline));\n\t\tmax-height: var(--default-clickable-area);\n\n\t\ttransition: margin-inline-start var(--animation-quick);\n\n\t\t&--hidden {\n\t\t\tmargin-inline-start: calc(-1 * var(--default-clickable-area));\n\t\t}\n\t}\n\n\t&__input {\n\t\t// This is a fallback for legacy version (Nextcloud 29 and older) so that we keep the pill like design there\n\t\t--input-border-radius: var(--border-radius-element, var(--border-radius-pill)) !important;\n\t}\n}\n</style>\n"],"names":["useSlots","ref","useFocusWithin","watch","nextTick"],"mappings":";;;;;;;;AA4OA,MAAA,cAAe;AAAA,EACd,MAAM;AAAA,EACN,OAAO;AAAA,IACN,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAnDA,UAAM,QAAQA,IAAAA,SAAQ;AAEtB,UAAM,eAAeC,IAAAA,IAAG;AACxB,UAAM,EAAE,SAAS,kBAAkBC,KAAAA,eAAe,YAAY;AAG9D,UAAM,oBAAoB,OAAO,SAAS,OAAO,iBAAiB,OAAO,SAAS,IAAI,EAAE,iBAAiB,mBAAmB,CAAC,KAAK;AAKlI,UAAM,mBAAmBD,IAAAA,IAAG;AAC5B,UAAM,aAAa,MAAM,CAAC,CAAC,MAAM;AACjC,UAAM,cAAcA,IAAAA,IAAI,IAAI;AAC5B,UAAM,YAAYA,IAAAA,IAAG;AAErB,UAAM,cAAcA,IAAAA,IAAI,KAAK;AAC7BE,QAAAA,MAAM,eAAe,MAAM;AAC1B,kBAAY,QAAQ,CAAC,cAAc;AAAA,IACpC,CAAC;AACDA,QAAAA,MAAM,aAAa,CAAC,SAAS;AAC5B,aAAO,aAAa,UAAU,KAAK;AACnC,UAAI,MAAM;AACT,oBAAY,QAAQ;AAAA,MACrB,OAAO;AAEN,eAAO,WAAW,MAAM;AACvB,sBAAY,QAAQ,CAAC;AAAA,QACtB,GAAG,iBAAiB;AAAA,MACrB;AAAA,IACD,CAAC;AAKD,aAAS,gBAAgB;AACxB,WAAK,qBAAqB,EAAE;AAC5B,UAAI,WAAU,GAAI;AACjB,oBAAY,QAAQ;AACpBC,YAAAA,SAAS,MAAM,iBAAiB,MAAM,cAAc,QAAQ,GAAG,MAAK,CAAE;AAAA,MACvE;AAAA,IACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcAppNavigationSettings-BaO-G72x.mjs → NcAppNavigationSettings-3jZKd9et.mjs}

@@ -1,10 +1,10 @@
 import '../assets/NcMentionBubble-CaztX9Pv.css';
-import '../assets/NcAppNavigationSettings-2Wh1E3Hq.css';
+import '../assets/NcAppNavigationSettings-DGkLlCyq.css';
 import { k as mdiCogOutline, l as mdiCog } from "./mdi-DkJglNiS.mjs";
 import { vOnClickOutside } from "@vueuse/components";
-import { N as NcButton } from "./NcButton-CCWEL9Ci.mjs";
+import { N as NcButton } from "./NcButton-DAGirW_B.mjs";
 import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-Bui9PhAS.mjs";
-import { r as register, n as t48, a as t } from "./_l10n-DVz9Qdzk.mjs";
+import { r as register, o as t49, a as t } from "./_l10n-CAnZaLWU.mjs";
 import clickOutsideOptions from "../Mixins/clickOutsideOptions.mjs";
 import "../Composables/useIsFullscreen.mjs";
 import "../Composables/useIsMobile.mjs";
@@ -21,8 +21,8 @@ import "@nextcloud/axios";
 import "@nextcloud/capabilities";
 import "./logger-D3RVzcfQ.mjs";
 import { G as GenRandomId } from "./GenRandomId-F5ebeBB_.mjs";
-import { a as isLegacy32 } from "./legacy-DV3mGZdh.mjs";
-register(t48);
+import { a as isLegacy32 } from "./legacy-Cy3dCXuB.mjs";
+register(t49);
 const _sfc_main = {
   directives: {
     ClickOutside: vOnClickOutside
@@ -89,10 +89,10 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "8fb21c8b"
+  "ddd7d69d"
 );
 const NcAppNavigationSettings = __component__.exports;
 export {
   NcAppNavigationSettings as N
 };
-//# sourceMappingURL=NcAppNavigationSettings-BaO-G72x.mjs.map
+//# sourceMappingURL=NcAppNavigationSettings-3jZKd9et.mjs.map

package/dist/chunks/{NcAppNavigationSettings-BaO-G72x.mjs.map → NcAppNavigationSettings-3jZKd9et.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcAppNavigationSettings-BaO-G72x.mjs","sources":["../../src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<div\n\t\tid=\"app-settings\"\n\t\tv-click-outside=\"clickOutsideConfig\"\n\t\t:class=\"{ open }\">\n\t\t<div id=\"app-settings__header\">\n\t\t\t<NcButton\n\t\t\t\t:aria-controls=\"contentId\"\n\t\t\t\t:aria-expanded=\"open ? 'true' : 'false'\"\n\t\t\t\tclass=\"settings-button\"\n\t\t\t\talignment=\"start\"\n\t\t\t\tvariant=\"tertiary\"\n\t\t\t\twide\n\t\t\t\t@click=\"open = !open\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcIconSvgWrapper class=\"settings-button__icon\" :path=\"isLegacy32 ? mdiCog : mdiCogOutline\" />\n\t\t\t\t</template>\n\t\t\t\t{{ name }}\n\t\t\t</NcButton>\n\t\t</div>\n\t\t<Transition name=\"slide-up\">\n\t\t\t<div v-show=\"open\" :id=\"contentId\">\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t</Transition>\n\t</div>\n</template>\n\n<script>\nimport { mdiCog, mdiCogOutline } from '@mdi/js'\nimport { vOnClickOutside as ClickOutside } from '@vueuse/components'\nimport NcButton from '../NcButton/NcButton.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { t } from '../../l10n.js'\nimport { clickOutsideOptions } from '../../mixins/index.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport { isLegacy32 } from '../../utils/legacy.ts'\n\nexport default {\n\tdirectives: {\n\t\tClickOutside,\n\t},\n\n\tcomponents: {\n\t\tNcButton,\n\t\tNcIconSvgWrapper,\n\t},\n\n\tmixins: [\n\t\tclickOutsideOptions,\n\t],\n\n\tprops: {\n\t\t/**\n\t\t * Text of the button\n\t\t *\n\t\t * @default 'Settings'\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: t('Settings'),\n\t\t},\n\t},\n\n\tsetup() {\n\t\tconst contentId = GenRandomId()\n\t\treturn {\n\t\t\tcontentId,\n\t\t\tisLegacy32,\n\t\t\tmdiCog,\n\t\t\tmdiCogOutline,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\topen: false,\n\t\t}\n\t},\n\n\tcomputed: {\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\t},\n\n\tmethods: {\n\t\tcloseMenu() {\n\t\t\tthis.open = false\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n#app-settings {\n\tmargin-top: auto;\n\tpadding: $app-navigation-settings-margin;\n\n\t&__header {\n\t\tbox-sizing: border-box;\n\t\tmargin: 0 $app-navigation-settings-margin $app-navigation-settings-margin $app-navigation-settings-margin;\n\n\t\t.settings-button {\n\t\t\tpadding-inline: 0 calc((var(--default-clickable-area) - 16px) / 2) !important;\n\n\t\t\t:deep(.button-vue__text) {\n\t\t\t\tfont-weight: normal !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__content {\n\t\tdisplay: block;\n\t\tpadding: 10px;\n\n\t\t/* prevent scrolled contents from stopping too early */\n\t\tmargin-bottom: -$app-navigation-settings-margin;\n\n\t\t/* restrict height of settings and make scrollable */\n\t\tmax-height: 300px;\n\t\toverflow-y: auto;\n\t\tbox-sizing: border-box;\n\t}\n}\n\n.slide-up-leave-active,\n.slide-up-enter-active {\n\ttransition-duration: var(--animation-slow);\n\ttransition-property: max-height, padding;\n\toverflow-y: hidden !important;\n}\n\n.slide-up-enter,\n.slide-up-leave-to {\n\tmax-height: 0 !important;\n\tpadding: 0 10px !important;\n}\n\n</style>\n"],"names":["ClickOutside"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAA,YAAA;AAAA,EACA,YAAA;AAAA,IACA,cAAAA;AAAAA,EACA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA,EAAA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA;AACA,UAAA,YAAA,YAAA;AACA,WAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,qBAAA;AACA,aAAA;AAAA,QACA,KAAA;AAAA,QACA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,YAAA;AACA,WAAA,OAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcAppNavigationSettings-3jZKd9et.mjs","sources":["../../src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<div\n\t\tid=\"app-settings\"\n\t\tv-click-outside=\"clickOutsideConfig\"\n\t\t:class=\"{ open }\">\n\t\t<div id=\"app-settings__header\">\n\t\t\t<NcButton\n\t\t\t\t:aria-controls=\"contentId\"\n\t\t\t\t:aria-expanded=\"open ? 'true' : 'false'\"\n\t\t\t\tclass=\"settings-button\"\n\t\t\t\talignment=\"start\"\n\t\t\t\tvariant=\"tertiary\"\n\t\t\t\twide\n\t\t\t\t@click=\"open = !open\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcIconSvgWrapper class=\"settings-button__icon\" :path=\"isLegacy32 ? mdiCog : mdiCogOutline\" />\n\t\t\t\t</template>\n\t\t\t\t{{ name }}\n\t\t\t</NcButton>\n\t\t</div>\n\t\t<Transition name=\"slide-up\">\n\t\t\t<div v-show=\"open\" :id=\"contentId\">\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t</Transition>\n\t</div>\n</template>\n\n<script>\nimport { mdiCog, mdiCogOutline } from '@mdi/js'\nimport { vOnClickOutside as ClickOutside } from '@vueuse/components'\nimport NcButton from '../NcButton/NcButton.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { t } from '../../l10n.js'\nimport { clickOutsideOptions } from '../../mixins/index.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport { isLegacy32 } from '../../utils/legacy.ts'\n\nexport default {\n\tdirectives: {\n\t\tClickOutside,\n\t},\n\n\tcomponents: {\n\t\tNcButton,\n\t\tNcIconSvgWrapper,\n\t},\n\n\tmixins: [\n\t\tclickOutsideOptions,\n\t],\n\n\tprops: {\n\t\t/**\n\t\t * Text of the button\n\t\t *\n\t\t * @default 'Settings'\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: t('Settings'),\n\t\t},\n\t},\n\n\tsetup() {\n\t\tconst contentId = GenRandomId()\n\t\treturn {\n\t\t\tcontentId,\n\t\t\tisLegacy32,\n\t\t\tmdiCog,\n\t\t\tmdiCogOutline,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\topen: false,\n\t\t}\n\t},\n\n\tcomputed: {\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\t},\n\n\tmethods: {\n\t\tcloseMenu() {\n\t\t\tthis.open = false\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n#app-settings {\n\tmargin-top: auto;\n\tpadding: $app-navigation-settings-margin;\n\n\t&__header {\n\t\tbox-sizing: border-box;\n\t\tmargin: 0 $app-navigation-settings-margin $app-navigation-settings-margin $app-navigation-settings-margin;\n\n\t\t.settings-button {\n\t\t\tpadding-inline: 0 calc((var(--default-clickable-area) - 16px) / 2) !important;\n\n\t\t\t:deep(.button-vue__text) {\n\t\t\t\tfont-weight: var(--font-weight-default, normal) !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__content {\n\t\tdisplay: block;\n\t\tpadding: 10px;\n\n\t\t/* prevent scrolled contents from stopping too early */\n\t\tmargin-bottom: -$app-navigation-settings-margin;\n\n\t\t/* restrict height of settings and make scrollable */\n\t\tmax-height: 300px;\n\t\toverflow-y: auto;\n\t\tbox-sizing: border-box;\n\t}\n}\n\n.slide-up-leave-active,\n.slide-up-enter-active {\n\ttransition-duration: var(--animation-slow);\n\ttransition-property: max-height, padding;\n\toverflow-y: hidden !important;\n}\n\n.slide-up-enter,\n.slide-up-leave-to {\n\tmax-height: 0 !important;\n\tpadding: 0 10px !important;\n}\n\n</style>\n"],"names":["ClickOutside"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAA,YAAA;AAAA,EACA,YAAA;AAAA,IACA,cAAAA;AAAAA,EACA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA,EAAA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA;AACA,UAAA,YAAA,YAAA;AACA,WAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,qBAAA;AACA,aAAA;AAAA,QACA,KAAA;AAAA,QACA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,YAAA;AACA,WAAA,OAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcAppNavigationSettings-CotFe5aD.cjs → NcAppNavigationSettings-DpIprW-E.cjs}

@@ -1,11 +1,11 @@
 require('../assets/NcMentionBubble-CaztX9Pv.css');
-require('../assets/NcAppNavigationSettings-2Wh1E3Hq.css');
+require('../assets/NcAppNavigationSettings-DGkLlCyq.css');
 "use strict";
 const mdi = require("./mdi-DTiP6a6e.cjs");
 const components = require("@vueuse/components");
-const NcButton = require("./NcButton-ByTFUhwJ.cjs");
+const NcButton = require("./NcButton-W3wDpCdX.cjs");
 const NcIconSvgWrapper = require("./NcIconSvgWrapper-Bbl4kXZI.cjs");
-const _l10n = require("./_l10n-skrZri3h.cjs");
+const _l10n = require("./_l10n-Be-gO5QO.cjs");
 const Mixins_clickOutsideOptions = require("../Mixins/clickOutsideOptions.cjs");
 require("../Composables/useIsFullscreen.cjs");
 require("../Composables/useIsMobile.cjs");
@@ -22,8 +22,8 @@ require("@nextcloud/axios");
 require("@nextcloud/capabilities");
 require("./logger-3HuiEIF6.cjs");
 const GenRandomId = require("./GenRandomId-D7iOvpZS.cjs");
-const legacy = require("./legacy-Bk0qQxIg.cjs");
-_l10n.register(_l10n.t48);
+const legacy = require("./legacy-BpZw2Eww.cjs");
+_l10n.register(_l10n.t49);
 const _sfc_main = {
   directives: {
     ClickOutside: components.vOnClickOutside
@@ -90,8 +90,8 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "8fb21c8b"
+  "ddd7d69d"
 );
 const NcAppNavigationSettings = __component__.exports;
 exports.NcAppNavigationSettings = NcAppNavigationSettings;
-//# sourceMappingURL=NcAppNavigationSettings-CotFe5aD.cjs.map
+//# sourceMappingURL=NcAppNavigationSettings-DpIprW-E.cjs.map

package/dist/chunks/{NcAppNavigationSettings-CotFe5aD.cjs.map → NcAppNavigationSettings-DpIprW-E.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcAppNavigationSettings-CotFe5aD.cjs","sources":["../../src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<div\n\t\tid=\"app-settings\"\n\t\tv-click-outside=\"clickOutsideConfig\"\n\t\t:class=\"{ open }\">\n\t\t<div id=\"app-settings__header\">\n\t\t\t<NcButton\n\t\t\t\t:aria-controls=\"contentId\"\n\t\t\t\t:aria-expanded=\"open ? 'true' : 'false'\"\n\t\t\t\tclass=\"settings-button\"\n\t\t\t\talignment=\"start\"\n\t\t\t\tvariant=\"tertiary\"\n\t\t\t\twide\n\t\t\t\t@click=\"open = !open\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcIconSvgWrapper class=\"settings-button__icon\" :path=\"isLegacy32 ? mdiCog : mdiCogOutline\" />\n\t\t\t\t</template>\n\t\t\t\t{{ name }}\n\t\t\t</NcButton>\n\t\t</div>\n\t\t<Transition name=\"slide-up\">\n\t\t\t<div v-show=\"open\" :id=\"contentId\">\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t</Transition>\n\t</div>\n</template>\n\n<script>\nimport { mdiCog, mdiCogOutline } from '@mdi/js'\nimport { vOnClickOutside as ClickOutside } from '@vueuse/components'\nimport NcButton from '../NcButton/NcButton.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { t } from '../../l10n.js'\nimport { clickOutsideOptions } from '../../mixins/index.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport { isLegacy32 } from '../../utils/legacy.ts'\n\nexport default {\n\tdirectives: {\n\t\tClickOutside,\n\t},\n\n\tcomponents: {\n\t\tNcButton,\n\t\tNcIconSvgWrapper,\n\t},\n\n\tmixins: [\n\t\tclickOutsideOptions,\n\t],\n\n\tprops: {\n\t\t/**\n\t\t * Text of the button\n\t\t *\n\t\t * @default 'Settings'\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: t('Settings'),\n\t\t},\n\t},\n\n\tsetup() {\n\t\tconst contentId = GenRandomId()\n\t\treturn {\n\t\t\tcontentId,\n\t\t\tisLegacy32,\n\t\t\tmdiCog,\n\t\t\tmdiCogOutline,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\topen: false,\n\t\t}\n\t},\n\n\tcomputed: {\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\t},\n\n\tmethods: {\n\t\tcloseMenu() {\n\t\t\tthis.open = false\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n#app-settings {\n\tmargin-top: auto;\n\tpadding: $app-navigation-settings-margin;\n\n\t&__header {\n\t\tbox-sizing: border-box;\n\t\tmargin: 0 $app-navigation-settings-margin $app-navigation-settings-margin $app-navigation-settings-margin;\n\n\t\t.settings-button {\n\t\t\tpadding-inline: 0 calc((var(--default-clickable-area) - 16px) / 2) !important;\n\n\t\t\t:deep(.button-vue__text) {\n\t\t\t\tfont-weight: normal !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__content {\n\t\tdisplay: block;\n\t\tpadding: 10px;\n\n\t\t/* prevent scrolled contents from stopping too early */\n\t\tmargin-bottom: -$app-navigation-settings-margin;\n\n\t\t/* restrict height of settings and make scrollable */\n\t\tmax-height: 300px;\n\t\toverflow-y: auto;\n\t\tbox-sizing: border-box;\n\t}\n}\n\n.slide-up-leave-active,\n.slide-up-enter-active {\n\ttransition-duration: var(--animation-slow);\n\ttransition-property: max-height, padding;\n\toverflow-y: hidden !important;\n}\n\n.slide-up-enter,\n.slide-up-leave-to {\n\tmax-height: 0 !important;\n\tpadding: 0 10px !important;\n}\n\n</style>\n"],"names":["ClickOutside","NcButton","NcIconSvgWrapper","clickOutsideOptions","t","GenRandomId","isLegacy32","mdiCog","mdiCogOutline"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAA,YAAA;AAAA,EACA,YAAA;AAAA,IACA,cAAAA,WAAAA;AAAAA,EACA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAC,SAAAA;AAAAA,IACA,kBAAAC,iBAAAA;AAAAA,EACA;AAAA,EAEA,QAAA;AAAA,IACAC;AAAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAAC,MAAAA,EAAA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA;AACA,UAAA,YAAAC,YAAAA,YAAA;AACA,WAAA;AAAA,MACA;AAAA,MACA,YAAAC,OAAAA;AAAAA,MACA,QAAAC,IAAAA;AAAAA,MACA,eAAAC,IAAAA;AAAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,qBAAA;AACA,aAAA;AAAA,QACA,KAAA;AAAA,QACA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,YAAA;AACA,WAAA,OAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcAppNavigationSettings-DpIprW-E.cjs","sources":["../../src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<div\n\t\tid=\"app-settings\"\n\t\tv-click-outside=\"clickOutsideConfig\"\n\t\t:class=\"{ open }\">\n\t\t<div id=\"app-settings__header\">\n\t\t\t<NcButton\n\t\t\t\t:aria-controls=\"contentId\"\n\t\t\t\t:aria-expanded=\"open ? 'true' : 'false'\"\n\t\t\t\tclass=\"settings-button\"\n\t\t\t\talignment=\"start\"\n\t\t\t\tvariant=\"tertiary\"\n\t\t\t\twide\n\t\t\t\t@click=\"open = !open\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcIconSvgWrapper class=\"settings-button__icon\" :path=\"isLegacy32 ? mdiCog : mdiCogOutline\" />\n\t\t\t\t</template>\n\t\t\t\t{{ name }}\n\t\t\t</NcButton>\n\t\t</div>\n\t\t<Transition name=\"slide-up\">\n\t\t\t<div v-show=\"open\" :id=\"contentId\">\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t</Transition>\n\t</div>\n</template>\n\n<script>\nimport { mdiCog, mdiCogOutline } from '@mdi/js'\nimport { vOnClickOutside as ClickOutside } from '@vueuse/components'\nimport NcButton from '../NcButton/NcButton.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { t } from '../../l10n.js'\nimport { clickOutsideOptions } from '../../mixins/index.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport { isLegacy32 } from '../../utils/legacy.ts'\n\nexport default {\n\tdirectives: {\n\t\tClickOutside,\n\t},\n\n\tcomponents: {\n\t\tNcButton,\n\t\tNcIconSvgWrapper,\n\t},\n\n\tmixins: [\n\t\tclickOutsideOptions,\n\t],\n\n\tprops: {\n\t\t/**\n\t\t * Text of the button\n\t\t *\n\t\t * @default 'Settings'\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: t('Settings'),\n\t\t},\n\t},\n\n\tsetup() {\n\t\tconst contentId = GenRandomId()\n\t\treturn {\n\t\t\tcontentId,\n\t\t\tisLegacy32,\n\t\t\tmdiCog,\n\t\t\tmdiCogOutline,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\topen: false,\n\t\t}\n\t},\n\n\tcomputed: {\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\t},\n\n\tmethods: {\n\t\tcloseMenu() {\n\t\t\tthis.open = false\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n#app-settings {\n\tmargin-top: auto;\n\tpadding: $app-navigation-settings-margin;\n\n\t&__header {\n\t\tbox-sizing: border-box;\n\t\tmargin: 0 $app-navigation-settings-margin $app-navigation-settings-margin $app-navigation-settings-margin;\n\n\t\t.settings-button {\n\t\t\tpadding-inline: 0 calc((var(--default-clickable-area) - 16px) / 2) !important;\n\n\t\t\t:deep(.button-vue__text) {\n\t\t\t\tfont-weight: var(--font-weight-default, normal) !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__content {\n\t\tdisplay: block;\n\t\tpadding: 10px;\n\n\t\t/* prevent scrolled contents from stopping too early */\n\t\tmargin-bottom: -$app-navigation-settings-margin;\n\n\t\t/* restrict height of settings and make scrollable */\n\t\tmax-height: 300px;\n\t\toverflow-y: auto;\n\t\tbox-sizing: border-box;\n\t}\n}\n\n.slide-up-leave-active,\n.slide-up-enter-active {\n\ttransition-duration: var(--animation-slow);\n\ttransition-property: max-height, padding;\n\toverflow-y: hidden !important;\n}\n\n.slide-up-enter,\n.slide-up-leave-to {\n\tmax-height: 0 !important;\n\tpadding: 0 10px !important;\n}\n\n</style>\n"],"names":["ClickOutside","NcButton","NcIconSvgWrapper","clickOutsideOptions","t","GenRandomId","isLegacy32","mdiCog","mdiCogOutline"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAA,YAAA;AAAA,EACA,YAAA;AAAA,IACA,cAAAA,WAAAA;AAAAA,EACA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAC,SAAAA;AAAAA,IACA,kBAAAC,iBAAAA;AAAAA,EACA;AAAA,EAEA,QAAA;AAAA,IACAC;AAAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAAC,MAAAA,EAAA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA;AACA,UAAA,YAAAC,YAAAA,YAAA;AACA,WAAA;AAAA,MACA;AAAA,MACA,YAAAC,OAAAA;AAAAA,MACA,QAAAC,IAAAA;AAAAA,MACA,eAAAC,IAAAA;AAAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,qBAAA;AACA,aAAA;AAAA,QACA,KAAA;AAAA,QACA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,YAAA;AACA,WAAA,OAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcAppNavigationToggle-CkDMk16T.cjs → NcAppNavigationToggle-DFGuYTE8.cjs}

@@ -1,43 +1,12 @@
-require('../assets/NcAppNavigationToggle-DgwbZOWc.css');
+require('../assets/NcAppNavigationToggle-D1K2TRZ-.css');
 "use strict";
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
-const _l10n = require("./_l10n-skrZri3h.cjs");
-const NcButton = require("./NcButton-ByTFUhwJ.cjs");
-const _sfc_main$2 = {
-  name: "MenuIcon",
-  emits: ["click"],
-  props: {
-    title: {
-      type: String
-    },
-    fillColor: {
-      type: String,
-      default: "currentColor"
-    },
-    size: {
-      type: Number,
-      default: 24
-    }
-  }
-};
-var _sfc_render$2 = function render() {
-  var _vm = this, _c = _vm._self._c;
-  return _c("span", _vm._b({ staticClass: "material-design-icon menu-icon", attrs: { "aria-hidden": _vm.title ? null : "true", "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
-    return _vm.$emit("click", $event);
-  } } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
-};
-var _sfc_staticRenderFns$2 = [];
-var __component__$2 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
-  _sfc_main$2,
-  _sfc_render$2,
-  _sfc_staticRenderFns$2,
-  false,
-  null,
-  null
-);
-const MenuIcon = __component__$2.exports;
+const DockRight = require("./DockRight-CXafXJaH.cjs");
+const _l10n = require("./_l10n-Be-gO5QO.cjs");
+const rtl = require("./rtl-DLuwcTlm.cjs");
+const NcButton = require("./NcButton-W3wDpCdX.cjs");
 const _sfc_main$1 = {
-  name: "MenuOpenIcon",
+  name: "DockLeftIcon",
   emits: ["click"],
   props: {
     title: {
@@ -53,11 +22,11 @@ const _sfc_main$1 = {
     }
   }
 };
-var _sfc_render$1 = function render2() {
+var _sfc_render$1 = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("span", _vm._b({ staticClass: "material-design-icon menu-open-icon", attrs: { "aria-hidden": _vm.title ? null : "true", "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
+  return _c("span", _vm._b({ staticClass: "material-design-icon dock-left-icon", attrs: { "aria-hidden": _vm.title ? null : "true", "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
     return _vm.$emit("click", $event);
-  } } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M21,15.61L19.59,17L14.58,12L19.59,7L21,8.39L17.44,12L21,15.61M3,6H16V8H3V6M3,13V11H13V13H3M3,18V16H16V18H3Z" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
+  } } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M20 4H4A2 2 0 0 0 2 6V18A2 2 0 0 0 4 20H20A2 2 0 0 0 22 18V6A2 2 0 0 0 20 4M20 18H9V6H20Z" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
 };
 var _sfc_staticRenderFns$1 = [];
 var __component__$1 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
@@ -68,21 +37,20 @@ var __component__$1 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   null,
   null
 );
-const MenuOpenIcon = __component__$1.exports;
-_l10n.register(_l10n.t19);
+const DockLeft = __component__$1.exports;
+_l10n.register(_l10n.t20);
 const disableKeyboardShortcuts = window.OCP?.Accessibility?.disableKeyboardShortcuts?.();
 const _sfc_main = {
   name: "NcAppNavigationToggle",
   components: {
-    NcButton: NcButton.NcButton,
-    MenuIcon,
-    MenuOpenIcon
+    DockLeft,
+    DockRight: DockRight.DockRight,
+    NcButton: NcButton.NcButton
   },
   props: {
     /**
      * Tracks whether the toggle has been clicked or not.
-     * If it has been clicked, switches between the different MenuIcons
-     * and emits a boolean indicating its opened status
+     * If it has been clicked, emits a boolean indicating its opened status
      */
     open: {
       type: Boolean,
@@ -91,7 +59,10 @@ const _sfc_main = {
   },
   emits: ["update:open"],
   setup() {
-    return { disableKeyboardShortcuts };
+    return {
+      isRtl: rtl.isRtl,
+      disableKeyboardShortcuts
+    };
   },
   computed: {
     label() {
@@ -108,10 +79,10 @@ const _sfc_main = {
     }
   }
 };
-var _sfc_render = function render3() {
+var _sfc_render = function render2() {
   var _vm = this, _c = _vm._self._c;
   return _c("div", { staticClass: "app-navigation-toggle-wrapper" }, [_c("NcButton", { staticClass: "app-navigation-toggle", attrs: { "aria-controls": "app-navigation-vue", "aria-expanded": _vm.open ? "true" : "false", "aria-keyshortcuts": _vm.disableKeyboardShortcuts ? "" : "n", "aria-label": _vm.label, "title": _vm.label, "variant": "tertiary" }, on: { "click": _vm.toggleNavigation }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-    return [_vm.open ? _c("MenuOpenIcon", { attrs: { "size": 20 } }) : _c("MenuIcon", { attrs: { "size": 20 } })];
+    return [_vm.isRtl ? _c("DockRight", { attrs: { "size": 20 } }) : _c("DockLeft", { attrs: { "size": 20 } })];
   }, proxy: true }]) })], 1);
 };
 var _sfc_staticRenderFns = [];
@@ -121,8 +92,8 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "a3e8b54b"
+  "d28016dd"
 );
 const NcAppNavigationToggle = __component__.exports;
 exports.NcAppNavigationToggle = NcAppNavigationToggle;
-//# sourceMappingURL=NcAppNavigationToggle-CkDMk16T.cjs.map
+//# sourceMappingURL=NcAppNavigationToggle-DFGuYTE8.cjs.map

package/dist/chunks/NcAppNavigationToggle-DFGuYTE8.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppNavigationToggle-DFGuYTE8.cjs","sources":["../../node_modules/vue-material-design-icons/DockLeft.vue","../../src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon dock-left-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M20 4H4A2 2 0 0 0 2 6V18A2 2 0 0 0 4 20H20A2 2 0 0 0 22 18V6A2 2 0 0 0 20 4M20 18H9V6H20Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"DockLeftIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<div class=\"app-navigation-toggle-wrapper\">\n\t\t<NcButton\n\t\t\tclass=\"app-navigation-toggle\"\n\t\t\taria-controls=\"app-navigation-vue\"\n\t\t\t:aria-expanded=\"open ? 'true' : 'false'\"\n\t\t\t:aria-keyshortcuts=\"disableKeyboardShortcuts ? '' : 'n'\"\n\t\t\t:aria-label=\"label\"\n\t\t\t:title=\"label\"\n\t\t\tvariant=\"tertiary\"\n\t\t\t@click=\"toggleNavigation\">\n\t\t\t<template #icon>\n\t\t\t\t<DockRight v-if=\"isRtl\" :size=\"20\" />\n\t\t\t\t<DockLeft v-else :size=\"20\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t</div>\n</template>\n\n<script>\nimport DockLeft from 'vue-material-design-icons/DockLeft.vue'\nimport DockRight from 'vue-material-design-icons/DockRight.vue'\nimport { t } from '../../l10n.js'\nimport { isRtl } from '../../utils/rtl.ts'\nimport NcButton from '../NcButton/index.js'\n\nconst disableKeyboardShortcuts = window.OCP?.Accessibility?.disableKeyboardShortcuts?.()\n\nexport default {\n\tname: 'NcAppNavigationToggle',\n\n\tcomponents: {\n\t\tDockLeft,\n\t\tDockRight,\n\t\tNcButton,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Tracks whether the toggle has been clicked or not.\n\t\t * If it has been clicked, emits a boolean indicating its opened status\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\trequired: true,\n\t\t},\n\t},\n\n\temits: ['update:open'],\n\n\tsetup() {\n\t\treturn {\n\t\t\tisRtl,\n\t\t\tdisableKeyboardShortcuts,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tlabel() {\n\t\t\treturn this.open\n\t\t\t\t? t('Close navigation')\n\t\t\t\t: t('Open navigation {shortcut}', { shortcut: disableKeyboardShortcuts ? '' : '[n]' }).trim()\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Once the toggle has been clicked, emits the toggle status\n\t\t * so parent components can gauge the status of the navigation button\n\t\t */\n\t\ttoggleNavigation() {\n\t\t\tthis.$emit('update:open', !this.open)\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.app-navigation-toggle-wrapper {\n\tposition: absolute;\n\ttop: var(--app-navigation-padding);\n\tinset-inline-end: calc(0px - var(--app-navigation-padding));\n\tmargin-inline-end: calc(-1 * var(--default-clickable-area));\n}\n\nbutton.app-navigation-toggle {\n\tbackground-color: var(--color-main-background);\n}\n</style>\n"],"names":["_sfc_main","DockRight","NcButton","isRtl","t"],"mappings":";;;;;;AAoBA,MAAAA,cAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,OAAA;AAAA,IACA,OAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;ACLA,MAAA,2BAAA,OAAA,KAAA,eAAA,2BAAA;AAEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA,WAAAC,UAAAA;AAAAA,IACA,UAAAC,SAAAA;AAAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,CAAA,aAAA;AAAA,EAEA,QAAA;AACA,WAAA;AAAA,MACA,OAAAC,IAAAA;AAAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,QAAA;AACA,aAAA,KAAA,OACAC,MAAAA,EAAA,kBAAA,IACAA,MAAAA,EAAA,8BAAA,EAAA,UAAA,2BAAA,KAAA,MAAA,CAAA,EAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAA;AACA,WAAA,MAAA,eAAA,CAAA,KAAA,IAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}

package/dist/chunks/{NcAppNavigationToggle-CXX1MFrf.mjs → NcAppNavigationToggle-DQZ2LWw4.mjs}

@@ -1,42 +1,11 @@
-import '../assets/NcAppNavigationToggle-DgwbZOWc.css';
+import '../assets/NcAppNavigationToggle-D1K2TRZ-.css';
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
-import { r as register, F as t19, a as t } from "./_l10n-DVz9Qdzk.mjs";
-import { N as NcButton } from "./NcButton-CCWEL9Ci.mjs";
-const _sfc_main$2 = {
-  name: "MenuIcon",
-  emits: ["click"],
-  props: {
-    title: {
-      type: String
-    },
-    fillColor: {
-      type: String,
-      default: "currentColor"
-    },
-    size: {
-      type: Number,
-      default: 24
-    }
-  }
-};
-var _sfc_render$2 = function render() {
-  var _vm = this, _c = _vm._self._c;
-  return _c("span", _vm._b({ staticClass: "material-design-icon menu-icon", attrs: { "aria-hidden": _vm.title ? null : "true", "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
-    return _vm.$emit("click", $event);
-  } } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
-};
-var _sfc_staticRenderFns$2 = [];
-var __component__$2 = /* @__PURE__ */ normalizeComponent(
-  _sfc_main$2,
-  _sfc_render$2,
-  _sfc_staticRenderFns$2,
-  false,
-  null,
-  null
-);
-const MenuIcon = __component__$2.exports;
+import { D as DockRight } from "./DockRight-B0D52yCO.mjs";
+import { r as register, E as t20, a as t } from "./_l10n-CAnZaLWU.mjs";
+import { i as isRtl } from "./rtl-v0UOPAM7.mjs";
+import { N as NcButton } from "./NcButton-DAGirW_B.mjs";
 const _sfc_main$1 = {
-  name: "MenuOpenIcon",
+  name: "DockLeftIcon",
   emits: ["click"],
   props: {
     title: {
@@ -52,11 +21,11 @@ const _sfc_main$1 = {
     }
   }
 };
-var _sfc_render$1 = function render2() {
+var _sfc_render$1 = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("span", _vm._b({ staticClass: "material-design-icon menu-open-icon", attrs: { "aria-hidden": _vm.title ? null : "true", "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
+  return _c("span", _vm._b({ staticClass: "material-design-icon dock-left-icon", attrs: { "aria-hidden": _vm.title ? null : "true", "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
     return _vm.$emit("click", $event);
-  } } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M21,15.61L19.59,17L14.58,12L19.59,7L21,8.39L17.44,12L21,15.61M3,6H16V8H3V6M3,13V11H13V13H3M3,18V16H16V18H3Z" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
+  } } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M20 4H4A2 2 0 0 0 2 6V18A2 2 0 0 0 4 20H20A2 2 0 0 0 22 18V6A2 2 0 0 0 20 4M20 18H9V6H20Z" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
 };
 var _sfc_staticRenderFns$1 = [];
 var __component__$1 = /* @__PURE__ */ normalizeComponent(
@@ -67,21 +36,20 @@ var __component__$1 = /* @__PURE__ */ normalizeComponent(
   null,
   null
 );
-const MenuOpenIcon = __component__$1.exports;
-register(t19);
+const DockLeft = __component__$1.exports;
+register(t20);
 const disableKeyboardShortcuts = window.OCP?.Accessibility?.disableKeyboardShortcuts?.();
 const _sfc_main = {
   name: "NcAppNavigationToggle",
   components: {
-    NcButton,
-    MenuIcon,
-    MenuOpenIcon
+    DockLeft,
+    DockRight,
+    NcButton
   },
   props: {
     /**
      * Tracks whether the toggle has been clicked or not.
-     * If it has been clicked, switches between the different MenuIcons
-     * and emits a boolean indicating its opened status
+     * If it has been clicked, emits a boolean indicating its opened status
      */
     open: {
       type: Boolean,
@@ -90,7 +58,10 @@ const _sfc_main = {
   },
   emits: ["update:open"],
   setup() {
-    return { disableKeyboardShortcuts };
+    return {
+      isRtl,
+      disableKeyboardShortcuts
+    };
   },
   computed: {
     label() {
@@ -107,10 +78,10 @@ const _sfc_main = {
     }
   }
 };
-var _sfc_render = function render3() {
+var _sfc_render = function render2() {
   var _vm = this, _c = _vm._self._c;
   return _c("div", { staticClass: "app-navigation-toggle-wrapper" }, [_c("NcButton", { staticClass: "app-navigation-toggle", attrs: { "aria-controls": "app-navigation-vue", "aria-expanded": _vm.open ? "true" : "false", "aria-keyshortcuts": _vm.disableKeyboardShortcuts ? "" : "n", "aria-label": _vm.label, "title": _vm.label, "variant": "tertiary" }, on: { "click": _vm.toggleNavigation }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-    return [_vm.open ? _c("MenuOpenIcon", { attrs: { "size": 20 } }) : _c("MenuIcon", { attrs: { "size": 20 } })];
+    return [_vm.isRtl ? _c("DockRight", { attrs: { "size": 20 } }) : _c("DockLeft", { attrs: { "size": 20 } })];
   }, proxy: true }]) })], 1);
 };
 var _sfc_staticRenderFns = [];
@@ -120,10 +91,10 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "a3e8b54b"
+  "d28016dd"
 );
 const NcAppNavigationToggle = __component__.exports;
 export {
   NcAppNavigationToggle as N
 };
-//# sourceMappingURL=NcAppNavigationToggle-CXX1MFrf.mjs.map
+//# sourceMappingURL=NcAppNavigationToggle-DQZ2LWw4.mjs.map

package/dist/chunks/NcAppNavigationToggle-DQZ2LWw4.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppNavigationToggle-DQZ2LWw4.mjs","sources":["../../node_modules/vue-material-design-icons/DockLeft.vue","../../src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon dock-left-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M20 4H4A2 2 0 0 0 2 6V18A2 2 0 0 0 4 20H20A2 2 0 0 0 22 18V6A2 2 0 0 0 20 4M20 18H9V6H20Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"DockLeftIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<div class=\"app-navigation-toggle-wrapper\">\n\t\t<NcButton\n\t\t\tclass=\"app-navigation-toggle\"\n\t\t\taria-controls=\"app-navigation-vue\"\n\t\t\t:aria-expanded=\"open ? 'true' : 'false'\"\n\t\t\t:aria-keyshortcuts=\"disableKeyboardShortcuts ? '' : 'n'\"\n\t\t\t:aria-label=\"label\"\n\t\t\t:title=\"label\"\n\t\t\tvariant=\"tertiary\"\n\t\t\t@click=\"toggleNavigation\">\n\t\t\t<template #icon>\n\t\t\t\t<DockRight v-if=\"isRtl\" :size=\"20\" />\n\t\t\t\t<DockLeft v-else :size=\"20\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t</div>\n</template>\n\n<script>\nimport DockLeft from 'vue-material-design-icons/DockLeft.vue'\nimport DockRight from 'vue-material-design-icons/DockRight.vue'\nimport { t } from '../../l10n.js'\nimport { isRtl } from '../../utils/rtl.ts'\nimport NcButton from '../NcButton/index.js'\n\nconst disableKeyboardShortcuts = window.OCP?.Accessibility?.disableKeyboardShortcuts?.()\n\nexport default {\n\tname: 'NcAppNavigationToggle',\n\n\tcomponents: {\n\t\tDockLeft,\n\t\tDockRight,\n\t\tNcButton,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Tracks whether the toggle has been clicked or not.\n\t\t * If it has been clicked, emits a boolean indicating its opened status\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\trequired: true,\n\t\t},\n\t},\n\n\temits: ['update:open'],\n\n\tsetup() {\n\t\treturn {\n\t\t\tisRtl,\n\t\t\tdisableKeyboardShortcuts,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tlabel() {\n\t\t\treturn this.open\n\t\t\t\t? t('Close navigation')\n\t\t\t\t: t('Open navigation {shortcut}', { shortcut: disableKeyboardShortcuts ? '' : '[n]' }).trim()\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Once the toggle has been clicked, emits the toggle status\n\t\t * so parent components can gauge the status of the navigation button\n\t\t */\n\t\ttoggleNavigation() {\n\t\t\tthis.$emit('update:open', !this.open)\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.app-navigation-toggle-wrapper {\n\tposition: absolute;\n\ttop: var(--app-navigation-padding);\n\tinset-inline-end: calc(0px - var(--app-navigation-padding));\n\tmargin-inline-end: calc(-1 * var(--default-clickable-area));\n}\n\nbutton.app-navigation-toggle {\n\tbackground-color: var(--color-main-background);\n}\n</style>\n"],"names":["_sfc_main"],"mappings":";;;;;AAoBA,MAAAA,cAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,OAAA;AAAA,IACA,OAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;ACLA,MAAA,2BAAA,OAAA,KAAA,eAAA,2BAAA;AAEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,CAAA,aAAA;AAAA,EAEA,QAAA;AACA,WAAA;AAAA,MACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,QAAA;AACA,aAAA,KAAA,OACA,EAAA,kBAAA,IACA,EAAA,8BAAA,EAAA,UAAA,2BAAA,KAAA,MAAA,CAAA,EAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAA;AACA,WAAA,MAAA,eAAA,CAAA,KAAA,IAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}

package/dist/chunks/{NcAppSettingsDialog-Fa5DTfig.cjs → NcAppSettingsDialog-BoHdpAtG.cjs}

@@ -1,16 +1,16 @@
-require('../assets/NcAppSettingsDialog-DRyLeR3T.css');
+require('../assets/NcAppSettingsDialog-Cu7QAD8V.css');
 "use strict";
 const Vue = require("vue");
 const core = require("@vueuse/core");
 const debounce = require("debounce");
-const NcDialog = require("./NcDialog-Qak1QTrv.cjs");
+const NcDialog = require("./NcDialog-CiuR4ZK0.cjs");
 const Components_NcVNodes = require("../Components/NcVNodes.cjs");
 const appName = require("./appName-CgEzCWsS.cjs");
 const useAppSettingsDialog = require("./useAppSettingsDialog-DKwz-cwX.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
 const Composables_useIsMobile = require("../Composables/useIsMobile.cjs");
-const _l10n = require("./_l10n-skrZri3h.cjs");
-const legacy = require("./legacy-Bk0qQxIg.cjs");
+const _l10n = require("./_l10n-Be-gO5QO.cjs");
+const legacy = require("./legacy-BpZw2Eww.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const Vue__default = /* @__PURE__ */ _interopDefault(Vue);
 const debounce__default = /* @__PURE__ */ _interopDefault(debounce);
@@ -22,10 +22,10 @@ const _sfc_main$1 = /* @__PURE__ */ Vue.defineComponent({
     return { __sfc: true, legacy: legacy2, localizedAppName, APP_VERSION: appName.APP_VERSION };
   }
 });
-const appSettingsDialogVersion = "_appSettingsDialogVersion_ux6wr";
-const appSettingsDialogVersion__legacy = "_appSettingsDialogVersion__legacy_xUqjk";
+const appSettingsDialogVersion = "_appSettingsDialogVersion_3gUpl";
+const appSettingsDialogVersion__legacy = "_appSettingsDialogVersion__legacy_z65Mt";
 const style0 = {
-  "material-design-icon": "_material-design-icon_JnqrJ",
+  "material-design-icon": "_material-design-icon_-HOSG",
   appSettingsDialogVersion,
   appSettingsDialogVersion__legacy
 };
@@ -51,7 +51,7 @@ var __component__$1 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   null
 );
 const NcAppSettingsDialogVersion = __component__$1.exports;
-_l10n.register(_l10n.t49);
+_l10n.register(_l10n.t50);
 const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
   __name: "NcAppSettingsDialog",
   props: {
@@ -167,8 +167,8 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "3fe3d63d"
+  "1b265bb0"
 );
 const NcAppSettingsDialog = __component__.exports;
 exports.NcAppSettingsDialog = NcAppSettingsDialog;
-//# sourceMappingURL=NcAppSettingsDialog-Fa5DTfig.cjs.map
+//# sourceMappingURL=NcAppSettingsDialog-BoHdpAtG.cjs.map