@nextcloud/vue 8.38.0 → 8.39.0

package/dist/index.mjs

@@ -2,85 +2,85 @@ import { N as NcActionButton } from "./chunks/NcActionButton-K4jUGMlW.mjs";
 import { N as NcActionButtonGroup } from "./chunks/NcActionButtonGroup-B95wg_Q6.mjs";
 import NcActionCaption from "./Components/NcActionCaption.mjs";
 import { N as NcActionCheckbox } from "./chunks/NcActionCheckbox-23CmleUh.mjs";
-import { N as NcActionInput } from "./chunks/NcActionInput-B_9GOTi6.mjs";
+import { N as NcActionInput } from "./chunks/NcActionInput-BoKGVBu8.mjs";
 import NcActionLink from "./Components/NcActionLink.mjs";
 import { N as NcActionRadio } from "./chunks/NcActionRadio-Dd3CsuiD.mjs";
 import NcActionRouter from "./Components/NcActionRouter.mjs";
-import { N as NcActions } from "./chunks/NcActions-Ca_2vj8f.mjs";
+import { N as NcActions } from "./chunks/NcActions-DbPerbGE.mjs";
 import NcActionSeparator from "./Components/NcActionSeparator.mjs";
 import NcActionText from "./Components/NcActionText.mjs";
 import { N as NcActionTextEditable } from "./chunks/NcActionTextEditable-YqvZGY07.mjs";
-import { N as NcAppContent } from "./chunks/NcAppContent-HZ-Lp090.mjs";
+import { N as NcAppContent } from "./chunks/NcAppContent-DAN0qPID.mjs";
 import NcAppContentDetails from "./Components/NcAppContentDetails.mjs";
 import NcAppContentList from "./Components/NcAppContentList.mjs";
-import { N as NcAppNavigation } from "./chunks/NcAppNavigation-BPqJExo6.mjs";
-import { N as NcAppNavigationCaption } from "./chunks/NcAppNavigationCaption-Bt51pgle.mjs";
+import { N as NcAppNavigation } from "./chunks/NcAppNavigation-DGufDPoi.mjs";
+import { N as NcAppNavigationCaption } from "./chunks/NcAppNavigationCaption-BZwuqQcm.mjs";
 import NcAppNavigationIconBullet from "./Components/NcAppNavigationIconBullet.mjs";
-import { N as NcAppNavigationItem } from "./chunks/NcAppNavigationItem-DcKt7SjF.mjs";
+import { N as NcAppNavigationItem } from "./chunks/NcAppNavigationItem-CgYgq_nb.mjs";
 import NcAppNavigationList from "./Components/NcAppNavigationList.mjs";
-import { N as NcAppNavigationNew } from "./chunks/NcAppNavigationNew-B5ikLvxM.mjs";
-import { N as NcAppNavigationNewItem } from "./chunks/NcAppNavigationNewItem-BqhwbJsJ.mjs";
-import { N as NcAppNavigationSearch } from "./chunks/NcAppNavigationSearch-B6u1Ln1_.mjs";
-import { N as NcAppNavigationSettings } from "./chunks/NcAppNavigationSettings-BfysBg80.mjs";
+import { N as NcAppNavigationNew } from "./chunks/NcAppNavigationNew-BUVnumWS.mjs";
+import { N as NcAppNavigationNewItem } from "./chunks/NcAppNavigationNewItem-Nz2HecTz.mjs";
+import { N as NcAppNavigationSearch } from "./chunks/NcAppNavigationSearch-CzhlljAU.mjs";
+import { N as NcAppNavigationSettings } from "./chunks/NcAppNavigationSettings-BaO-G72x.mjs";
 import NcAppNavigationSpacer from "./Components/NcAppNavigationSpacer.mjs";
-import { N as NcAppSettingsDialog } from "./chunks/NcAppSettingsDialog-D0M18YFD.mjs";
+import { N as NcAppSettingsDialog } from "./chunks/NcAppSettingsDialog-MxrFh-Ln.mjs";
 import { N as NcAppSettingsSection } from "./chunks/NcAppSettingsSection-BjQllLEA.mjs";
 import { N as NcAppSettingsShortcutsSection } from "./chunks/NcAppSettingsShortcutsSection-DblUBaWP.mjs";
-import { N as NcAppSidebar } from "./chunks/NcAppSidebar-Bljse39J.mjs";
+import { N as NcAppSidebar } from "./chunks/NcAppSidebar-B7GuNZ4C.mjs";
 import { N as NcAppSidebarHeader } from "./chunks/NcAppSidebarHeader-CBE4tNYb.mjs";
 import NcAppSidebarTab from "./Components/NcAppSidebarTab.mjs";
-import { N as NcAssistantButton } from "./chunks/NcAssistantButton-BdUkhzq1.mjs";
+import { N as NcAssistantButton } from "./chunks/NcAssistantButton-B7BLAkwW.mjs";
 import NcAssistantContent from "./Components/NcAssistantContent.mjs";
 import { N as NcAssistantIcon } from "./chunks/NcAssistantIcon-DCx6AaSW.mjs";
-import { N as NcAvatar } from "./chunks/NcAvatar-CGnqUtoy.mjs";
-import { u } from "./chunks/NcAvatar-CGnqUtoy.mjs";
+import { N as NcAvatar } from "./chunks/NcAvatar-DkAX4nqq.mjs";
+import { u } from "./chunks/NcAvatar-DkAX4nqq.mjs";
 import { N as NcBlurHash } from "./chunks/NcBlurHash-KSj0HXbX.mjs";
-import { N as NcBreadcrumb } from "./chunks/NcBreadcrumb-DH2FV6QI.mjs";
-import { N as NcBreadcrumbs } from "./chunks/NcBreadcrumbs-DrYYSHAS.mjs";
-import { N as NcButton } from "./chunks/NcButton-BgppWSl9.mjs";
+import { N as NcBreadcrumb } from "./chunks/NcBreadcrumb-D8xA3KcG.mjs";
+import { N as NcBreadcrumbs } from "./chunks/NcBreadcrumbs-CesoXxTs.mjs";
+import { N as NcButton } from "./chunks/NcButton-CCWEL9Ci.mjs";
 import { N as NcCheckboxRadioSwitch } from "./chunks/NcCheckboxRadioSwitch-D4IV4zWy.mjs";
-import { N as NcCollectionList } from "./chunks/NcCollectionList-BbmBJ4ET.mjs";
-import { N as NcColorPicker } from "./chunks/NcColorPicker-Bzzw1uKu.mjs";
-import { N as NcContent } from "./chunks/NcContent-DpGM2KRx.mjs";
+import { N as NcCollectionList } from "./chunks/NcCollectionList-DOAZ13vO.mjs";
+import { N as NcColorPicker } from "./chunks/NcColorPicker-SlazeVcI.mjs";
+import { N as NcContent } from "./chunks/NcContent-BuTh0ZPb.mjs";
 import { N as NcCounterBubble } from "./chunks/NcCounterBubble-oxV8oMlX.mjs";
-import { N as NcDashboardWidget } from "./chunks/NcDashboardWidget-NOuL4APU.mjs";
-import { N as NcDashboardWidgetItem } from "./chunks/NcDashboardWidgetItem-CBW263ij.mjs";
+import { N as NcDashboardWidget } from "./chunks/NcDashboardWidget-CO1z9VUN.mjs";
+import { N as NcDashboardWidgetItem } from "./chunks/NcDashboardWidgetItem-2VgB9qj2.mjs";
 import { N as NcDateTime } from "./chunks/NcDateTime-enXYuwj8.mjs";
 import NcDateTimePicker from "./Components/NcDateTimePicker.mjs";
 import NcDateTimePickerNative from "./Components/NcDateTimePickerNative.mjs";
-import { N as NcDialog } from "./chunks/NcDialog-BCCBuI6f.mjs";
-import { N as NcDialogButton } from "./chunks/NcDialogButton-DpA4mqr-.mjs";
+import { N as NcDialog } from "./chunks/NcDialog-DZ7xq7XA.mjs";
+import { N as NcDialogButton } from "./chunks/NcDialogButton-KNF3Co74.mjs";
 import NcEllipsisedOption from "./Components/NcEllipsisedOption.mjs";
-import { N as NcEmojiPicker } from "./chunks/NcEmojiPicker-C4jCrwQY.mjs";
+import { N as NcEmojiPicker } from "./chunks/NcEmojiPicker-DNxcceCn.mjs";
 import NcEmptyContent from "./Components/NcEmptyContent.mjs";
-import { N as NcFilePicker } from "./chunks/NcFilePicker-DCPi6JGg.mjs";
+import { N as NcFilePicker } from "./chunks/NcFilePicker-Ck9o-ia3.mjs";
 import { N as NcFormBox } from "./chunks/NcFormBox-DtoCXLMx.mjs";
-import { N as NcFormBoxButton } from "./chunks/NcFormBoxButton-BQi11xQX.mjs";
-import { N as NcFormBoxCopyButton } from "./chunks/NcFormBoxCopyButton-BkunQ3me.mjs";
-import { N as NcFormBoxSwitch } from "./chunks/NcFormBoxSwitch-E6sxPL4n.mjs";
+import { N as NcFormBoxButton } from "./chunks/NcFormBoxButton-CFWCJ0-X.mjs";
+import { N as NcFormBoxCopyButton } from "./chunks/NcFormBoxCopyButton-Da8RuDH1.mjs";
+import { N as NcFormBoxSwitch } from "./chunks/NcFormBoxSwitch-DaaMuPnk.mjs";
 import { N as NcFormGroup } from "./chunks/NcFormGroup-DblLoFMf.mjs";
 import NcGuestContent from "./Components/NcGuestContent.mjs";
-import { N as NcHeaderButton } from "./chunks/NcHeaderButton-DXdY8gct.mjs";
-import { N as NcHeaderMenu } from "./chunks/NcHeaderMenu-BZnnbLTo.mjs";
+import { N as NcHeaderButton } from "./chunks/NcHeaderButton-GtIbBhEd.mjs";
+import { N as NcHeaderMenu } from "./chunks/NcHeaderMenu-elBE_Ukl.mjs";
 import { N as NcHighlight } from "./chunks/index-CxTT94_h.mjs";
 import { N as NcHotkey } from "./chunks/NcHotkey-CLLtt9LG.mjs";
 import { N as NcHotkeyList } from "./chunks/NcHotkeyList-Co7MBL5U.mjs";
 import { N as NcIconSvgWrapper } from "./chunks/NcIconSvgWrapper-Bui9PhAS.mjs";
-import { N as NcInputField } from "./chunks/NcInputField-j5EyU7QH.mjs";
-import { N as NcListItem } from "./chunks/NcListItem-D0JDzXkL.mjs";
-import { N as NcListItemIcon } from "./chunks/NcListItemIcon-D35XZDGI.mjs";
+import { N as NcInputField } from "./chunks/NcInputField-i4Z8nb4b.mjs";
+import { N as NcListItem } from "./chunks/NcListItem-CaosvdEe.mjs";
+import { N as NcListItemIcon } from "./chunks/NcListItemIcon-DCKYv8Jr.mjs";
 import NcLoadingIcon from "./Components/NcLoadingIcon.mjs";
 import NcModal from "./Components/NcModal.mjs";
 import NcNoteCard from "./Components/NcNoteCard.mjs";
-import { N as NcPasswordField } from "./chunks/NcPasswordField-HQK5d_nv.mjs";
+import { N as NcPasswordField } from "./chunks/NcPasswordField-D4OFjLza.mjs";
 import { N as NcPopover } from "./chunks/NcPopover-UAg26Qdd.mjs";
 import { N as NcProgressBar } from "./chunks/NcProgressBar-D7zYeXBH.mjs";
 import { N as NcRadioGroup } from "./chunks/NcRadioGroup-BbBX9X2J.mjs";
 import { N as NcRadioGroupButton } from "./chunks/NcRadioGroupButton-BkxlxjIA.mjs";
-import { N as NcRelatedResourcesPanel } from "./chunks/NcRelatedResourcesPanel-BdmY-Mly.mjs";
+import { N as NcRelatedResourcesPanel } from "./chunks/NcRelatedResourcesPanel-I2ZOB3cx.mjs";
 import { N as NcMentionBubble } from "./chunks/index-BCqXu_og.mjs";
 import { r } from "./chunks/index-BCqXu_og.mjs";
-import { N as NcAutoCompleteResult, a as NcRichContenteditable } from "./chunks/NcRichContenteditable-BcTSkyeW.mjs";
+import { N as NcAutoCompleteResult, a as NcRichContenteditable } from "./chunks/NcRichContenteditable-8ZA_LArB.mjs";
 import "@nextcloud/auth";
 import "@nextcloud/axios";
 import "@nextcloud/router";
@@ -88,26 +88,26 @@ import "@nextcloud/sharing/public";
 import "@vueuse/core";
 import "vue";
 import "vue-router";
-import { a, g, b, c, s, d } from "./chunks/referencePickerModal-BQExd0w6.mjs";
+import { a, g, b, c, s, d } from "./chunks/referencePickerModal-B69WouiU.mjs";
 import { N, h, c as c2, i, e, r as r2, f, a as a2 } from "./chunks/customPickerElements-DLFtgReB.mjs";
 import "unist-builder";
 import "unist-util-visit-parents";
 import "./chunks/logger-D3RVzcfQ.mjs";
-import { N as NcRichText } from "./chunks/NcRichText-DZgAb6-3.mjs";
-import { N as NcSelect } from "./chunks/NcSelect-FwcxH76q.mjs";
-import { N as NcTextField } from "./chunks/NcTextField-ByDOTNvC.mjs";
+import { N as NcRichText } from "./chunks/NcRichText-ByLPwUvM.mjs";
+import { N as NcSelect } from "./chunks/NcSelect-CHc1QupB.mjs";
+import { N as NcTextField } from "./chunks/NcTextField-Czr9S6YO.mjs";
 import "@nextcloud/event-bus";
 import { N as NcSavingIndicatorIcon } from "./chunks/NcSavingIndicatorIcon-U7AIamCl.mjs";
-import { N as NcSelectTags } from "./chunks/NcSelectTags-yZfa_z_z.mjs";
-import { N as NcSelectUsers } from "./chunks/NcSelectUsers-5r-vvEVy.mjs";
+import { N as NcSelectTags } from "./chunks/NcSelectTags-Bokig7ar.mjs";
+import { N as NcSelectUsers } from "./chunks/NcSelectUsers-B4w9UC_d.mjs";
 import { N as NcSettingsInputText } from "./chunks/NcSettingsInputText-BwnkZzWL.mjs";
 import { N as NcSettingsSection } from "./chunks/NcSettingsSection-Dz_b9rcq.mjs";
-import { N as NcSettingsSelectGroup } from "./chunks/NcSettingsSelectGroup-CUM0vkbN.mjs";
-import { N as NcTextArea } from "./chunks/NcTextArea-fGUiK7p2.mjs";
+import { N as NcSettingsSelectGroup } from "./chunks/NcSettingsSelectGroup-BdXf7ytX.mjs";
+import { N as NcTextArea } from "./chunks/NcTextArea-DPJWqlJb.mjs";
 import { N as NcThemeProvider } from "./chunks/NcThemeProvider-BA_zMjAf.mjs";
-import { N as NcTimezonePicker } from "./chunks/NcTimezonePicker-Cok_NaVd.mjs";
-import { N as NcUserBubble } from "./chunks/NcUserBubble-Csw7PXyG.mjs";
-import { N as NcUserStatusIcon } from "./chunks/NcUserStatusIcon-Cq1RnTfF.mjs";
+import { N as NcTimezonePicker } from "./chunks/NcTimezonePicker-n9kr9A4o.mjs";
+import { N as NcUserBubble } from "./chunks/NcUserBubble-BGfZAi4c.mjs";
+import { N as NcUserStatusIcon } from "./chunks/NcUserStatusIcon-DdPPN-cP.mjs";
 import NcVNodes from "./Components/NcVNodes.mjs";
 import { useFormatDateTime, useFormatRelativeTime, useFormatTime } from "./Composables/useFormatDateTime.mjs";
 import { useHotKey } from "./Composables/useHotKey.mjs";

package/dist/utils/legacy.d.ts

@@ -3,3 +3,4 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 export declare const isLegacy32: boolean;
+export declare const isLegacy34: boolean;

package/dist/vendor.LICENSE.txt

@@ -57,7 +57,7 @@ version: 4.1.0
 license: MIT
 
 mdast-util-to-markdown
-version: 2.1.0
+version: 2.1.2
 license: MIT
 
 micromark-core-commonmark
@@ -121,7 +121,7 @@ version: 4.0.1
 license: MIT
 
 unist-util-is
-version: 6.0.0
+version: 6.0.1
 license: MIT
 
 unist-util-visit

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextcloud/vue",
-  "version": "8.38.0",
+  "version": "8.39.0",
   "description": "Nextcloud vue components",
   "keywords": [
     "vuejs",
@@ -110,7 +110,7 @@
     "blurhash": "^2.0.5",
     "clone": "^2.1.2",
     "debounce": "^2.2.0",
-    "dompurify": "^3.4.1",
+    "dompurify": "^3.4.2",
     "emoji-mart-vue-fast": "^15.0.5",
     "escape-html": "^1.0.3",
     "floating-vue": "^1.0.0-beta.19",
@@ -154,7 +154,7 @@
     "@nextcloud/stylelint-config": "^3.2.1",
     "@nextcloud/vite-config": "^1.7.2",
     "@nextcloud/webpack-vue-config": "^6.3.2",
-    "@testing-library/cypress": "^10.1.0",
+    "@testing-library/cypress": "^10.1.3",
     "@types/gettext-parser": "^8.0.0",
     "@types/jest": "^29.5.5",
     "@vue/test-utils": "^1.3.0",
@@ -166,7 +166,7 @@
     "cypress": "^13.17.0",
     "cypress-split": "^1.24.31",
     "cypress-visual-regression": "^5.3.0",
-    "eslint": "^10.2.1",
+    "eslint": "^10.3.0",
     "file-loader": "^6.2.0",
     "gettext-extractor": "^3.7.2",
     "gettext-parser": "^8.0.0",
@@ -180,11 +180,11 @@
     "resolve-url-loader": "^5.0.0",
     "sanitize-filename": "^1.6.4",
     "sass": "^1.99.0",
-    "stylelint": "^17.8.0",
+    "stylelint": "^17.11.0",
     "ts-node": "^10.9.1",
     "typescript": "^5.9.3",
     "url-loader": "^4.1.1",
-    "vite": "^7.3.2",
+    "vite": "^7.3.3",
     "vue-material-design-icons": "^5.2.0",
     "vue-styleguidist": "~4.72.0",
     "vue-template-compiler": "^2.7.16",

package/dist/assets/NcAppSettingsDialog-x8dImUGK.css

@@ -1,103 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-/**
- * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-/*
-* Ensure proper alignment of the vue material icons
-*/
-._material-design-icon_JnqrJ {
-  display: flex;
-  align-self: center;
-  justify-self: center;
-  align-items: center;
-  justify-content: center;
-}
-._appSettingsDialogVersion_ux6wr {
-  --form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));
-  color: var(--color-text-maxcontrast);
-  margin-block-end: calc(8 * var(--default-grid-baseline));
-  margin-inline: var(--form-element-label-offset);
-}
-._appSettingsDialogVersion__legacy_xUqjk {
-  margin-inline: 0;
-}/**
- * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-/**
- * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-/*
-* Ensure proper alignment of the vue material icons
-*/
-.material-design-icon[data-v-31f523ae] {
-  display: flex;
-  align-self: center;
-  justify-self: center;
-  align-items: center;
-  justify-content: center;
-}
-.app-settings[data-v-31f523ae] .app-settings__navigation {
-  min-width: 200px;
-  margin-right: calc(4 * var(--default-grid-baseline));
-  overflow-x: hidden;
-  overflow-y: auto;
-  position: relative;
-}
-.app-settings[data-v-31f523ae] .app-settings__content {
-  box-sizing: border-box;
-  padding-inline: calc(4 * var(--default-grid-baseline));
-}
-.app-settings[data-v-31f523ae] .app-settings__content.app-settings__non-legacy * {
-  box-sizing: border-box;
-}
-.navigation-list[data-v-31f523ae] {
-  height: 100%;
-  box-sizing: border-box;
-  overflow-y: auto;
-  padding: calc(3 * var(--default-grid-baseline));
-}
-.navigation-list__link[data-v-31f523ae] {
-  display: flex;
-  align-content: center;
-  font-size: 16px;
-  height: var(--default-clickable-area);
-  margin: 4px 0;
-  line-height: var(--default-clickable-area);
-  border-radius: var(--border-radius-element, var(--border-radius-pill));
-  font-weight: bold;
-  padding: 0 calc(4 * var(--default-grid-baseline));
-  cursor: pointer;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  background-color: transparent;
-  border: none;
-}
-.navigation-list__link[data-v-31f523ae]:hover, .navigation-list__link[data-v-31f523ae]:focus {
-  background-color: var(--color-background-hover);
-}
-.navigation-list__link--active[data-v-31f523ae] {
-  background-color: var(--color-primary-element-light) !important;
-}
-.navigation-list__link--icon[data-v-31f523ae] {
-  padding-inline-start: calc(2 * var(--default-grid-baseline));
-  gap: var(--default-grid-baseline);
-}
-.navigation-list__link-icon[data-v-31f523ae] {
-  display: flex;
-  justify-content: center;
-  align-content: center;
-  width: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));
-  max-width: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));
-}
-@media only screen and (max-width: 512px) {
-.app-settings[data-v-31f523ae] .dialog__name {
-    padding-inline-start: 16px;
-}
-}

package/dist/assets/NcInputConfirmCancel-CkhRZCfD.css

@@ -1,39 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-/**
- * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-/*
-* Ensure proper alignment of the vue material icons
-*/
-.material-design-icon[data-v-093a8eb9] {
-  display: flex;
-  align-self: center;
-  justify-self: center;
-  align-items: center;
-  justify-content: center;
-}
-.app-navigation-input-confirm[data-v-093a8eb9] {
-  flex: 1 0 100%;
-  width: 100%;
-}
-.app-navigation-input-confirm form[data-v-093a8eb9] {
-  display: flex;
-}
-.app-navigation-input-confirm__input[data-v-093a8eb9] {
-  height: 34px;
-  flex: 1 1 100%;
-  font-size: 100% !important;
-  margin: 5px !important;
-  margin-left: -8px !important;
-  padding: 7px !important;
-}
-.app-navigation-input-confirm__input[data-v-093a8eb9]:active, .app-navigation-input-confirm__input[data-v-093a8eb9]:focus, .app-navigation-input-confirm__input[data-v-093a8eb9]:hover {
-  outline: none;
-  background-color: var(--color-main-background);
-  color: var(--color-main-text);
-  border-color: var(--color-primary-element);
-}

package/dist/chunks/NcAppNavigation-BDxzq-ai.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcAppNavigation-BDxzq-ai.cjs","sources":["../../src/components/NcAppNavigation/NcAppNavigation.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n```vue\n<template>\n\t<div class=\"styleguide-nc-content\">\n\t\t<NcAppNavigation>\n\t\t\t<template #search>\n\t\t\t\t<NcAppNavigationSearch v-model=\"searchValue\">\n\t\t\t\t\t<template #actions>\n\t\t\t\t\t\t<NcActions>\n\t\t\t\t\t\t\t<NcActionButton close-after-click @click=\"showModal = true\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconCogOutline :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tApp settings (close after click)\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t\t<NcActionButton @click=\"showModal = true\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconCogOutline :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tApp settings (handle only click)\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t</NcActions>\n\t\t\t\t\t</template>\n\t\t\t\t</NcAppNavigationSearch>\n\t\t\t</template>\n\t\t\t<template #list>\n\t\t\t\t<NcAppNavigationItem v-for=\"item in items\" :key=\"item\" :name=\"item\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconCheck :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcAppNavigationItem>\n\t\t\t</template>\n\t\t\t<template #footer>\n\t\t\t\t<div class=\"navigation__footer\">\n\t\t\t\t\t<NcButton wide @click=\"showModal = true\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<IconCogOutline />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tApp settings\n\t\t\t\t\t</NcButton>\n\t\t\t\t\t<NcModal v-if=\"showModal\" name=\"Modal for focus-trap check\" @close=\"showModal = false\">\n\t\t\t\t\t\t<div class=\"modal-content\">\n\t\t\t\t\t\t\t<h4>Focus-trap should be locked inside the modal</h4>\n\t\t\t\t\t\t\t<NcTextField :value.sync=\"modalValue\" label=\"Focus me\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</NcModal>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</NcAppNavigation>\n\t</div>\n</template>\n\n<script>\n\timport IconCheck from 'vue-material-design-icons/Check.vue'\n\timport IconCogOutline from 'vue-material-design-icons/CogOutline.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconCheck,\n\t\t\tIconCogOutline,\n\t\t},\n\t\tprovide() {\n\t\t\treturn {\n\t\t\t\t'NcContent:setHasAppNavigation': () => {},\n\t\t\t}\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\titems: Array.from({ length: 5 }, (v, i) => `Item ${i+1}`),\n\t\t\t\tsearchValue: '',\n\t\t\t\tmodalValue: '',\n\t\t\t\tshowModal: false,\n\t\t\t}\n\t\t},\n\t}\n</script>\n\n<style scoped>\n\t/* Mock NcContent */\n\t.styleguide-nc-content {\n\t\tposition: relative;\n\t\theight: 300px;\n\t\tbackground-color: var(--color-background-plain);\n\t\toverflow: hidden;\n\t}\n\n\t.navigation__header,\n\t.navigation__footer {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 4px;\n\t\tpadding: 4px;\n\t}\n\n\t.modal-content {\n\t\theight: 120px;\n\t\tpadding: 10px;\n\t}\n</style>\n```\n\nThe navigation bar can be open and closed from anywhere in the app using the\nnextcloud event bus.\n\n### Install the event bus package\n\n```bash\nnpm i -S @nextcloud/event-bus\n```\n\n### Usage\n\n#### Open the navigation\n\n```js static\nimport { emit } from '@nextcloud/event-bus'\nemit('toggle-navigation', {\n\topen: true,\n})\n```\n\n#### Close the navigation\n\n```js static\nimport { emit } from '@nextcloud/event-bus'\nemit('toggle-navigation', {\n\topen: false,\n})\n```\n\n</docs>\n\n<template>\n\t<div\n\t\tref=\"appNavigationContainer\"\n\t\tclass=\"app-navigation\"\n\t\t:class=\"{ 'app-navigation--close': !open }\">\n\t\t<nav\n\t\t\tid=\"app-navigation-vue\"\n\t\t\t:aria-hidden=\"open ? 'false' : 'true'\"\n\t\t\t:aria-label=\"ariaLabel || undefined\"\n\t\t\t:aria-labelledby=\"ariaLabelledby || undefined\"\n\t\t\tclass=\"app-navigation__content\"\n\t\t\t:inert=\"!open || undefined\"\n\t\t\t@keydown.esc=\"handleEsc\">\n\t\t\t<div class=\"app-navigation__search\">\n\t\t\t\t<!-- @slot For in-app search you can pass a `NcAppNavigationSearch` component as the slot content. -->\n\t\t\t\t<slot name=\"search\" />\n\t\t\t</div>\n\t\t\t<div class=\"app-navigation__body\" :class=\"{ 'app-navigation__body--no-list': !$scopedSlots.list }\">\n\t\t\t\t<!-- @slot The main content of the navigation. If no list is passed to the #list slot, stretched vertically. -->\n\t\t\t\t<slot />\n\t\t\t</div>\n\n\t\t\t<NcAppNavigationList v-if=\"$scopedSlots.list\" class=\"app-navigation__list\">\n\t\t\t\t<!-- @slot List for Navigation list items. Stretched between the main content and the footer -->\n\t\t\t\t<slot name=\"list\" />\n\t\t\t</NcAppNavigationList>\n\n\t\t\t<!-- @slot Footer for e.g. NcAppNavigationSettings -->\n\t\t\t<slot name=\"footer\" />\n\t\t</nav>\n\t\t<NcAppNavigationToggle :open=\"open\" @update:open=\"toggleNavigation\" />\n\t</div>\n</template>\n\n<script>\nimport { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'\nimport { createFocusTrap } from 'focus-trap'\nimport { tabbable } from 'tabbable'\nimport Vue from 'vue'\nimport { useHotKey } from '../../composables/useHotKey/index.ts'\nimport { useIsMobile } from '../../composables/useIsMobile/index.ts'\nimport { getTrapStack } from '../../utils/focusTrap.ts'\nimport { logger } from '../../utils/logger.ts'\nimport NcAppNavigationList from '../NcAppNavigationList/index.js'\nimport NcAppNavigationToggle from '../NcAppNavigationToggle/index.js'\n\nexport default {\n\tname: 'NcAppNavigation',\n\n\tcomponents: {\n\t\tNcAppNavigationList,\n\t\tNcAppNavigationToggle,\n\t},\n\n\t// Injected from NcContent\n\tinject: {\n\t\tsetHasAppNavigation: {\n\t\t\tdefault: () => () => Vue.util.warn('NcAppNavigation is not mounted inside NcContent, this is probably an error.'),\n\t\t\tfrom: 'NcContent:setHasAppNavigation',\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The aria label to describe the navigation\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 * aria-labelledby attribute to describe the navigation\n\t\t */\n\t\tariaLabelledby: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tsetup() {\n\t\treturn {\n\t\t\tisMobile: useIsMobile(),\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\topen: !this.isMobile,\n\t\t\tfocusTrap: null,\n\t\t}\n\t},\n\n\twatch: {\n\t\tisMobile(value) {\n\t\t\tthis.open = !value\n\t\t\tthis.toggleFocusTrap()\n\t\t},\n\n\t\topen(value) {\n\t\t\tthis.toggleFocusTrap()\n\t\t\temit('navigation-toggled', {\n\t\t\t\topen: value,\n\t\t\t})\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.setHasAppNavigation(true)\n\t\tsubscribe('toggle-navigation', this.toggleNavigationByEventBus)\n\t\t// Emit an event with the initial state of the navigation\n\t\temit('navigation-toggled', {\n\t\t\topen: this.open,\n\t\t})\n\n\t\tthis.focusTrap = createFocusTrap(this.$refs.appNavigationContainer, {\n\t\t\tallowOutsideClick: true,\n\t\t\tclickOutsideDeactivates: () => {\n\t\t\t\tif (this.isMobile) {\n\t\t\t\t\tthis.focusTrap.deactivate({ returnFocus: false })\n\t\t\t\t\tthis.toggleNavigation(false)\n\t\t\t\t}\n\t\t\t\treturn false\n\t\t\t},\n\t\t\tfallbackFocus: this.$refs.appNavigationContainer,\n\t\t\ttrapStack: getTrapStack(),\n\t\t\tescapeDeactivates: false,\n\t\t})\n\t\tthis.toggleFocusTrap()\n\n\t\t// N opens + focuses the navigation\n\t\tuseHotKey('n', this.onKeyDown, {\n\t\t\tprevent: true,\n\t\t\tstop: true,\n\t\t})\n\t},\n\n\tunmounted() {\n\t\tthis.setHasAppNavigation(false)\n\t\tunsubscribe('toggle-navigation', this.toggleNavigationByEventBus)\n\t\tthis.focusTrap.deactivate()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Toggle the navigation\n\t\t *\n\t\t * @param {boolean} [state] set the state instead of inverting the current one\n\t\t */\n\t\tasync toggleNavigation(state) {\n\t\t\t// Early return if already in that state\n\t\t\tif (this.open === state) {\n\t\t\t\temit('navigation-toggled', {\n\t\t\t\t\topen: this.open,\n\t\t\t\t})\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.open = (typeof state === 'undefined') ? !this.open : state\n\t\t\tconst bodyStyles = getComputedStyle(document.body)\n\t\t\tconst animationLength = parseInt(bodyStyles.getPropertyValue('--animation-quick')) || 100\n\n\t\t\t// If we just opened, we focus the first element\n\t\t\tif (this.open) {\n\t\t\t\tawait this.$nextTick()\n\t\t\t\tthis.focusFirstElement()\n\t\t\t}\n\n\t\t\tsetTimeout(() => {\n\t\t\t\temit('navigation-toggled', {\n\t\t\t\t\topen: this.open,\n\t\t\t\t})\n\t\t\t// We wait for 1.5 times the animation length to give the animation time to really finish.\n\t\t\t}, 1.5 * animationLength)\n\t\t},\n\n\t\ttoggleNavigationByEventBus({ open }) {\n\t\t\tthis.toggleNavigation(open)\n\t\t},\n\n\t\t/**\n\t\t * Activate focus trap if it is currently needed, otherwise deactivate\n\t\t */\n\t\ttoggleFocusTrap() {\n\t\t\tif (this.isMobile && this.open) {\n\t\t\t\tthis.focusTrap.activate()\n\t\t\t} else {\n\t\t\t\tthis.focusTrap.deactivate()\n\t\t\t}\n\t\t},\n\n\t\thandleEsc() {\n\t\t\tif (this.isMobile && this.open) {\n\t\t\t\tthis.toggleNavigation(false)\n\t\t\t}\n\t\t},\n\n\t\tfocusFirstElement() {\n\t\t\tconst element = tabbable(this.$refs.appNavigationContainer)[0]\n\t\t\tif (element) {\n\t\t\t\telement.focus()\n\t\t\t\tlogger.debug('Focusing first element in the navigation', { element })\n\t\t\t}\n\t\t},\n\n\t\tonKeyDown(event) {\n\t\t\t// toggle the navigation on 'n' key\n\t\t\tif (event.key === 'n') {\n\t\t\t\t// If the navigation is closed, open it\n\t\t\t\tif (!this.open) {\n\t\t\t\t\tthis.toggleNavigation(true)\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\t// If the navigation is open and the focus is within the navigation, close it\n\t\t\t\tif (this.isFocusWithinNavigation()) {\n\t\t\t\t\tthis.toggleNavigation(false)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\tisFocusWithinNavigation() {\n\t\t\tconst activeElement = document.activeElement\n\t\t\treturn this.$refs.appNavigationContainer?.contains(activeElement)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n.app-navigation,\n.app-content {\n\t/** Distance of the app navigation toggle and the first navigation item to the top edge of the app content container */\n\t--app-navigation-padding: #{$app-navigation-padding};\n}\n</style>\n\n<style lang=\"scss\" scoped>\n.app-navigation {\n\t// Set scoped variable override\n\t// Using --color-text-maxcontrast as a fallback evaluates to an invalid value as it references itself in this scope instead of the variable defined higher up\n\t--color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-text-maxcontrast-default));\n\ttransition: transform var(--animation-quick), margin var(--animation-quick);\n\twidth: $navigation-width;\n\t// Left toggle button padding + toggle button + right padding from NcAppContent\n\t--app-navigation-max-width: calc(100vw - (var(--app-navigation-padding) + var(--default-clickable-area) + var(--default-grid-baseline)));\n\tmax-width: var(--app-navigation-max-width);\n\tposition: relative;\n\ttop: 0;\n\tinset-inline-start: 0;\n\tpadding: 0px;\n\t// Above NcAppContent\n\tz-index: 1800;\n\theight: 100%;\n\tbox-sizing: border-box;\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\tuser-select: none;\n\tflex-grow: 0;\n\tflex-shrink: 0;\n\tbackground-color: var(--color-main-background-blur, var(--color-main-background));\n\t-webkit-backdrop-filter: var(--filter-background-blur, none);\n\tbackdrop-filter: var(--filter-background-blur, none);\n\n\t&--close {\n\t\tmargin-inline-start: calc(-1 * min($navigation-width, var(--app-navigation-max-width)));\n\t}\n\n\t&__search {\n\t\twidth: 100%;\n\t}\n\n\t&__body {\n\t\toverflow-y: scroll;\n\t}\n\n\t// For legacy purposes support passing a bare list to the content in #default slot and including #footer slot\n\t// Same styles as NcAppNavigationList\n\t&__content > ul {\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\tbox-sizing: border-box;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--default-grid-baseline, 4px);\n\t\tpadding: var(--app-navigation-padding);\n\t}\n\n\t// Always stretch the navigation list\n\t& &__list {\n\t\theight: 100%;\n\t}\n\n\t// Stretch the main content if there is no stretched list\n\t&__body--no-list {\n\t\tflex: 1 1 auto;\n\t\toverflow: auto;\n\t\theight: 100%;\n\t}\n\n\t&__content {\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n}\n\n// Add extra border for high contrast mode\n[data-themes*=\"highcontrast\"] {\n\t.app-navigation {\n\t\tborder-inline-end: 1px solid var(--color-border);\n\t}\n}\n\n// When on mobile, we make the navigation slide over the NcAppContent\n@media only screen and (max-width: $breakpoint-mobile) {\n\t.app-navigation {\n\t\tposition: absolute;\n\t\tborder-inline-end: 1px solid var(--color-border);\n\t}\n}\n\n// Put the toggle behind NcAppSidebar on small screens\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.app-navigation {\n\t\tz-index: 1400;\n\t}\n}\n\n</style>\n"],"names":["NcAppNavigationList","NcAppNavigationToggle","Vue","useIsMobile","emit","subscribe","createFocusTrap","getTrapStack","useHotKey","unsubscribe","tabbable","logger"],"mappings":"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"}

package/dist/chunks/NcAppNavigation-BPqJExo6.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcAppNavigation-BPqJExo6.mjs","sources":["../../src/components/NcAppNavigation/NcAppNavigation.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n```vue\n<template>\n\t<div class=\"styleguide-nc-content\">\n\t\t<NcAppNavigation>\n\t\t\t<template #search>\n\t\t\t\t<NcAppNavigationSearch v-model=\"searchValue\">\n\t\t\t\t\t<template #actions>\n\t\t\t\t\t\t<NcActions>\n\t\t\t\t\t\t\t<NcActionButton close-after-click @click=\"showModal = true\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconCogOutline :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tApp settings (close after click)\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t\t<NcActionButton @click=\"showModal = true\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconCogOutline :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tApp settings (handle only click)\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t</NcActions>\n\t\t\t\t\t</template>\n\t\t\t\t</NcAppNavigationSearch>\n\t\t\t</template>\n\t\t\t<template #list>\n\t\t\t\t<NcAppNavigationItem v-for=\"item in items\" :key=\"item\" :name=\"item\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconCheck :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcAppNavigationItem>\n\t\t\t</template>\n\t\t\t<template #footer>\n\t\t\t\t<div class=\"navigation__footer\">\n\t\t\t\t\t<NcButton wide @click=\"showModal = true\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<IconCogOutline />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tApp settings\n\t\t\t\t\t</NcButton>\n\t\t\t\t\t<NcModal v-if=\"showModal\" name=\"Modal for focus-trap check\" @close=\"showModal = false\">\n\t\t\t\t\t\t<div class=\"modal-content\">\n\t\t\t\t\t\t\t<h4>Focus-trap should be locked inside the modal</h4>\n\t\t\t\t\t\t\t<NcTextField :value.sync=\"modalValue\" label=\"Focus me\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</NcModal>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</NcAppNavigation>\n\t</div>\n</template>\n\n<script>\n\timport IconCheck from 'vue-material-design-icons/Check.vue'\n\timport IconCogOutline from 'vue-material-design-icons/CogOutline.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconCheck,\n\t\t\tIconCogOutline,\n\t\t},\n\t\tprovide() {\n\t\t\treturn {\n\t\t\t\t'NcContent:setHasAppNavigation': () => {},\n\t\t\t}\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\titems: Array.from({ length: 5 }, (v, i) => `Item ${i+1}`),\n\t\t\t\tsearchValue: '',\n\t\t\t\tmodalValue: '',\n\t\t\t\tshowModal: false,\n\t\t\t}\n\t\t},\n\t}\n</script>\n\n<style scoped>\n\t/* Mock NcContent */\n\t.styleguide-nc-content {\n\t\tposition: relative;\n\t\theight: 300px;\n\t\tbackground-color: var(--color-background-plain);\n\t\toverflow: hidden;\n\t}\n\n\t.navigation__header,\n\t.navigation__footer {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 4px;\n\t\tpadding: 4px;\n\t}\n\n\t.modal-content {\n\t\theight: 120px;\n\t\tpadding: 10px;\n\t}\n</style>\n```\n\nThe navigation bar can be open and closed from anywhere in the app using the\nnextcloud event bus.\n\n### Install the event bus package\n\n```bash\nnpm i -S @nextcloud/event-bus\n```\n\n### Usage\n\n#### Open the navigation\n\n```js static\nimport { emit } from '@nextcloud/event-bus'\nemit('toggle-navigation', {\n\topen: true,\n})\n```\n\n#### Close the navigation\n\n```js static\nimport { emit } from '@nextcloud/event-bus'\nemit('toggle-navigation', {\n\topen: false,\n})\n```\n\n</docs>\n\n<template>\n\t<div\n\t\tref=\"appNavigationContainer\"\n\t\tclass=\"app-navigation\"\n\t\t:class=\"{ 'app-navigation--close': !open }\">\n\t\t<nav\n\t\t\tid=\"app-navigation-vue\"\n\t\t\t:aria-hidden=\"open ? 'false' : 'true'\"\n\t\t\t:aria-label=\"ariaLabel || undefined\"\n\t\t\t:aria-labelledby=\"ariaLabelledby || undefined\"\n\t\t\tclass=\"app-navigation__content\"\n\t\t\t:inert=\"!open || undefined\"\n\t\t\t@keydown.esc=\"handleEsc\">\n\t\t\t<div class=\"app-navigation__search\">\n\t\t\t\t<!-- @slot For in-app search you can pass a `NcAppNavigationSearch` component as the slot content. -->\n\t\t\t\t<slot name=\"search\" />\n\t\t\t</div>\n\t\t\t<div class=\"app-navigation__body\" :class=\"{ 'app-navigation__body--no-list': !$scopedSlots.list }\">\n\t\t\t\t<!-- @slot The main content of the navigation. If no list is passed to the #list slot, stretched vertically. -->\n\t\t\t\t<slot />\n\t\t\t</div>\n\n\t\t\t<NcAppNavigationList v-if=\"$scopedSlots.list\" class=\"app-navigation__list\">\n\t\t\t\t<!-- @slot List for Navigation list items. Stretched between the main content and the footer -->\n\t\t\t\t<slot name=\"list\" />\n\t\t\t</NcAppNavigationList>\n\n\t\t\t<!-- @slot Footer for e.g. NcAppNavigationSettings -->\n\t\t\t<slot name=\"footer\" />\n\t\t</nav>\n\t\t<NcAppNavigationToggle :open=\"open\" @update:open=\"toggleNavigation\" />\n\t</div>\n</template>\n\n<script>\nimport { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'\nimport { createFocusTrap } from 'focus-trap'\nimport { tabbable } from 'tabbable'\nimport Vue from 'vue'\nimport { useHotKey } from '../../composables/useHotKey/index.ts'\nimport { useIsMobile } from '../../composables/useIsMobile/index.ts'\nimport { getTrapStack } from '../../utils/focusTrap.ts'\nimport { logger } from '../../utils/logger.ts'\nimport NcAppNavigationList from '../NcAppNavigationList/index.js'\nimport NcAppNavigationToggle from '../NcAppNavigationToggle/index.js'\n\nexport default {\n\tname: 'NcAppNavigation',\n\n\tcomponents: {\n\t\tNcAppNavigationList,\n\t\tNcAppNavigationToggle,\n\t},\n\n\t// Injected from NcContent\n\tinject: {\n\t\tsetHasAppNavigation: {\n\t\t\tdefault: () => () => Vue.util.warn('NcAppNavigation is not mounted inside NcContent, this is probably an error.'),\n\t\t\tfrom: 'NcContent:setHasAppNavigation',\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The aria label to describe the navigation\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 * aria-labelledby attribute to describe the navigation\n\t\t */\n\t\tariaLabelledby: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tsetup() {\n\t\treturn {\n\t\t\tisMobile: useIsMobile(),\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\topen: !this.isMobile,\n\t\t\tfocusTrap: null,\n\t\t}\n\t},\n\n\twatch: {\n\t\tisMobile(value) {\n\t\t\tthis.open = !value\n\t\t\tthis.toggleFocusTrap()\n\t\t},\n\n\t\topen(value) {\n\t\t\tthis.toggleFocusTrap()\n\t\t\temit('navigation-toggled', {\n\t\t\t\topen: value,\n\t\t\t})\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.setHasAppNavigation(true)\n\t\tsubscribe('toggle-navigation', this.toggleNavigationByEventBus)\n\t\t// Emit an event with the initial state of the navigation\n\t\temit('navigation-toggled', {\n\t\t\topen: this.open,\n\t\t})\n\n\t\tthis.focusTrap = createFocusTrap(this.$refs.appNavigationContainer, {\n\t\t\tallowOutsideClick: true,\n\t\t\tclickOutsideDeactivates: () => {\n\t\t\t\tif (this.isMobile) {\n\t\t\t\t\tthis.focusTrap.deactivate({ returnFocus: false })\n\t\t\t\t\tthis.toggleNavigation(false)\n\t\t\t\t}\n\t\t\t\treturn false\n\t\t\t},\n\t\t\tfallbackFocus: this.$refs.appNavigationContainer,\n\t\t\ttrapStack: getTrapStack(),\n\t\t\tescapeDeactivates: false,\n\t\t})\n\t\tthis.toggleFocusTrap()\n\n\t\t// N opens + focuses the navigation\n\t\tuseHotKey('n', this.onKeyDown, {\n\t\t\tprevent: true,\n\t\t\tstop: true,\n\t\t})\n\t},\n\n\tunmounted() {\n\t\tthis.setHasAppNavigation(false)\n\t\tunsubscribe('toggle-navigation', this.toggleNavigationByEventBus)\n\t\tthis.focusTrap.deactivate()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Toggle the navigation\n\t\t *\n\t\t * @param {boolean} [state] set the state instead of inverting the current one\n\t\t */\n\t\tasync toggleNavigation(state) {\n\t\t\t// Early return if already in that state\n\t\t\tif (this.open === state) {\n\t\t\t\temit('navigation-toggled', {\n\t\t\t\t\topen: this.open,\n\t\t\t\t})\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.open = (typeof state === 'undefined') ? !this.open : state\n\t\t\tconst bodyStyles = getComputedStyle(document.body)\n\t\t\tconst animationLength = parseInt(bodyStyles.getPropertyValue('--animation-quick')) || 100\n\n\t\t\t// If we just opened, we focus the first element\n\t\t\tif (this.open) {\n\t\t\t\tawait this.$nextTick()\n\t\t\t\tthis.focusFirstElement()\n\t\t\t}\n\n\t\t\tsetTimeout(() => {\n\t\t\t\temit('navigation-toggled', {\n\t\t\t\t\topen: this.open,\n\t\t\t\t})\n\t\t\t// We wait for 1.5 times the animation length to give the animation time to really finish.\n\t\t\t}, 1.5 * animationLength)\n\t\t},\n\n\t\ttoggleNavigationByEventBus({ open }) {\n\t\t\tthis.toggleNavigation(open)\n\t\t},\n\n\t\t/**\n\t\t * Activate focus trap if it is currently needed, otherwise deactivate\n\t\t */\n\t\ttoggleFocusTrap() {\n\t\t\tif (this.isMobile && this.open) {\n\t\t\t\tthis.focusTrap.activate()\n\t\t\t} else {\n\t\t\t\tthis.focusTrap.deactivate()\n\t\t\t}\n\t\t},\n\n\t\thandleEsc() {\n\t\t\tif (this.isMobile && this.open) {\n\t\t\t\tthis.toggleNavigation(false)\n\t\t\t}\n\t\t},\n\n\t\tfocusFirstElement() {\n\t\t\tconst element = tabbable(this.$refs.appNavigationContainer)[0]\n\t\t\tif (element) {\n\t\t\t\telement.focus()\n\t\t\t\tlogger.debug('Focusing first element in the navigation', { element })\n\t\t\t}\n\t\t},\n\n\t\tonKeyDown(event) {\n\t\t\t// toggle the navigation on 'n' key\n\t\t\tif (event.key === 'n') {\n\t\t\t\t// If the navigation is closed, open it\n\t\t\t\tif (!this.open) {\n\t\t\t\t\tthis.toggleNavigation(true)\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\t// If the navigation is open and the focus is within the navigation, close it\n\t\t\t\tif (this.isFocusWithinNavigation()) {\n\t\t\t\t\tthis.toggleNavigation(false)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\tisFocusWithinNavigation() {\n\t\t\tconst activeElement = document.activeElement\n\t\t\treturn this.$refs.appNavigationContainer?.contains(activeElement)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n.app-navigation,\n.app-content {\n\t/** Distance of the app navigation toggle and the first navigation item to the top edge of the app content container */\n\t--app-navigation-padding: #{$app-navigation-padding};\n}\n</style>\n\n<style lang=\"scss\" scoped>\n.app-navigation {\n\t// Set scoped variable override\n\t// Using --color-text-maxcontrast as a fallback evaluates to an invalid value as it references itself in this scope instead of the variable defined higher up\n\t--color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-text-maxcontrast-default));\n\ttransition: transform var(--animation-quick), margin var(--animation-quick);\n\twidth: $navigation-width;\n\t// Left toggle button padding + toggle button + right padding from NcAppContent\n\t--app-navigation-max-width: calc(100vw - (var(--app-navigation-padding) + var(--default-clickable-area) + var(--default-grid-baseline)));\n\tmax-width: var(--app-navigation-max-width);\n\tposition: relative;\n\ttop: 0;\n\tinset-inline-start: 0;\n\tpadding: 0px;\n\t// Above NcAppContent\n\tz-index: 1800;\n\theight: 100%;\n\tbox-sizing: border-box;\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\tuser-select: none;\n\tflex-grow: 0;\n\tflex-shrink: 0;\n\tbackground-color: var(--color-main-background-blur, var(--color-main-background));\n\t-webkit-backdrop-filter: var(--filter-background-blur, none);\n\tbackdrop-filter: var(--filter-background-blur, none);\n\n\t&--close {\n\t\tmargin-inline-start: calc(-1 * min($navigation-width, var(--app-navigation-max-width)));\n\t}\n\n\t&__search {\n\t\twidth: 100%;\n\t}\n\n\t&__body {\n\t\toverflow-y: scroll;\n\t}\n\n\t// For legacy purposes support passing a bare list to the content in #default slot and including #footer slot\n\t// Same styles as NcAppNavigationList\n\t&__content > ul {\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\tbox-sizing: border-box;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--default-grid-baseline, 4px);\n\t\tpadding: var(--app-navigation-padding);\n\t}\n\n\t// Always stretch the navigation list\n\t& &__list {\n\t\theight: 100%;\n\t}\n\n\t// Stretch the main content if there is no stretched list\n\t&__body--no-list {\n\t\tflex: 1 1 auto;\n\t\toverflow: auto;\n\t\theight: 100%;\n\t}\n\n\t&__content {\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n}\n\n// Add extra border for high contrast mode\n[data-themes*=\"highcontrast\"] {\n\t.app-navigation {\n\t\tborder-inline-end: 1px solid var(--color-border);\n\t}\n}\n\n// When on mobile, we make the navigation slide over the NcAppContent\n@media only screen and (max-width: $breakpoint-mobile) {\n\t.app-navigation {\n\t\tposition: absolute;\n\t\tborder-inline-end: 1px solid var(--color-border);\n\t}\n}\n\n// Put the toggle behind NcAppSidebar on small screens\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.app-navigation {\n\t\tz-index: 1400;\n\t}\n}\n\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;AAuLA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA;AAAA,EAGA,QAAA;AAAA,IACA,qBAAA;AAAA,MACA,SAAA,MAAA,MAAA,IAAA,KAAA,KAAA,6EAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA;AACA,WAAA;AAAA,MACA,UAAA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,MAAA,CAAA,KAAA;AAAA,MACA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,SAAA,OAAA;AACA,WAAA,OAAA,CAAA;AACA,WAAA,gBAAA;AAAA,IACA;AAAA,IAEA,KAAA,OAAA;AACA,WAAA,gBAAA;AACA,WAAA,sBAAA;AAAA,QACA,MAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,oBAAA,IAAA;AACA,cAAA,qBAAA,KAAA,0BAAA;AAEA,SAAA,sBAAA;AAAA,MACA,MAAA,KAAA;AAAA,IACA,CAAA;AAEA,SAAA,YAAA,gBAAA,KAAA,MAAA,wBAAA;AAAA,MACA,mBAAA;AAAA,MACA,yBAAA,MAAA;AACA,YAAA,KAAA,UAAA;AACA,eAAA,UAAA,WAAA,EAAA,aAAA,MAAA,CAAA;AACA,eAAA,iBAAA,KAAA;AAAA,QACA;AACA,eAAA;AAAA,MACA;AAAA,MACA,eAAA,KAAA,MAAA;AAAA,MACA,WAAA,aAAA;AAAA,MACA,mBAAA;AAAA,IACA,CAAA;AACA,SAAA,gBAAA;AAGA,cAAA,KAAA,KAAA,WAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA,CAAA;AAAA,EACA;AAAA,EAEA,YAAA;AACA,SAAA,oBAAA,KAAA;AACA,gBAAA,qBAAA,KAAA,0BAAA;AACA,SAAA,UAAA,WAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA,iBAAA,OAAA;AAEA,UAAA,KAAA,SAAA,OAAA;AACA,aAAA,sBAAA;AAAA,UACA,MAAA,KAAA;AAAA,QACA,CAAA;AACA;AAAA,MACA;AAEA,WAAA,OAAA,OAAA,UAAA,cAAA,CAAA,KAAA,OAAA;AACA,YAAA,aAAA,iBAAA,SAAA,IAAA;AACA,YAAA,kBAAA,SAAA,WAAA,iBAAA,mBAAA,CAAA,KAAA;AAGA,UAAA,KAAA,MAAA;AACA,cAAA,KAAA,UAAA;AACA,aAAA,kBAAA;AAAA,MACA;AAEA,iBAAA,MAAA;AACA,aAAA,sBAAA;AAAA,UACA,MAAA,KAAA;AAAA,QACA,CAAA;AAAA,MAEA,GAAA,MAAA,eAAA;AAAA,IACA;AAAA,IAEA,2BAAA,EAAA,QAAA;AACA,WAAA,iBAAA,IAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AACA,UAAA,KAAA,YAAA,KAAA,MAAA;AACA,aAAA,UAAA,SAAA;AAAA,MACA,OAAA;AACA,aAAA,UAAA,WAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,UAAA,KAAA,YAAA,KAAA,MAAA;AACA,aAAA,iBAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,oBAAA;AACA,YAAA,UAAA,SAAA,KAAA,MAAA,sBAAA,EAAA,CAAA;AACA,UAAA,SAAA;AACA,gBAAA,MAAA;AACA,eAAA,MAAA,4CAAA,EAAA,QAAA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,UAAA,OAAA;AAEA,UAAA,MAAA,QAAA,KAAA;AAEA,YAAA,CAAA,KAAA,MAAA;AACA,eAAA,iBAAA,IAAA;AACA;AAAA,QACA;AAGA,YAAA,KAAA,2BAAA;AACA,eAAA,iBAAA,KAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,0BAAA;AACA,YAAA,gBAAA,SAAA;AACA,aAAA,KAAA,MAAA,wBAAA,SAAA,aAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcAppNavigationItem-BBZ1SsqQ.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcAppNavigationItem-BBZ1SsqQ.cjs","sources":["../../node_modules/vue-material-design-icons/Pencil.vue","../../node_modules/vue-material-design-icons/Undo.vue","../../src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue","../../src/components/NcAppNavigationItem/NcAppNavigationItem.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon pencil-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.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"PencilIcon\",\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>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon undo-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=\"M12.5,8C9.85,8 7.45,9 5.6,10.6L2,7V16H11L7.38,12.38C8.77,11.22 10.54,10.5 12.5,10.5C16.04,10.5 19.05,12.81 20.1,16L22.47,15.22C21.08,11.03 17.15,8 12.5,8Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"UndoIcon\",\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<!-- Button to expand or collapse children -->\n\t<NcButton\n\t\tclass=\"icon-collapse\"\n\t\t:class=\"{\n\t\t\t'icon-collapse--active': active,\n\t\t\t'icon-collapse--open': open,\n\t\t}\"\n\t\t:aria-label=\"labelButton\"\n\t\t:variant=\"active ? 'tertiary-on-primary' : 'tertiary'\"\n\t\t@click=\"onClick\">\n\t\t<template #icon>\n\t\t\t<ChevronUp\n\t\t\t\tv-if=\"open\"\n\t\t\t\t:size=\"20\" />\n\t\t\t<ChevronDown\n\t\t\t\tv-else\n\t\t\t\t:size=\"20\" />\n\t\t</template>\n\t</NcButton>\n</template>\n\n<script>\nimport ChevronDown from 'vue-material-design-icons/ChevronDown.vue'\nimport ChevronUp from 'vue-material-design-icons/ChevronUp.vue'\nimport { t } from '../../l10n.js'\nimport NcButton from '../NcButton/index.js'\n\nexport default {\n\tname: 'NcAppNavigationIconCollapsible',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tChevronDown,\n\t\tChevronUp,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Is the list currently open (or collapsed)\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\t// eslint-disable-next-line vue/no-boolean-default\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Is the navigation item currently active.\n\t\t */\n\t\tactive: {\n\t\t\ttype: Boolean,\n\t\t\trequired: true,\n\t\t},\n\t},\n\n\temits: ['click'],\n\n\tcomputed: {\n\t\tlabelButton() {\n\t\t\treturn this.open ? t('Collapse menu') : t('Open menu')\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonClick(e) {\n\t\t\tthis.$emit('click', e)\n\t\t},\n\t},\n\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.icon-collapse {\n\tposition: relative;\n\tinset-inline-end: 0;\n\n\t// the whole navigation item is hovered thus will have the hover color - to distinguish we need to set a different color here.\n\t&:hover {\n\t\tbackground-color: var(--color-background-dark) !important;\n\t}\n\t&--active:hover {\n\t\tbackground-color: var(--color-primary-element) !important;\n\t}\n}\n</style>\n","<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### Usage\n\n#### Simple element\n\n* With an icon:\n\n```vue\n\t<template>\n\t\t<ul>\n\t\t\t<NcAppNavigationItem name=\"My name\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Check :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationItem>\n\t\t</ul>\n\t</template>\n\t<script>\n\timport Check from 'vue-material-design-icons/Check.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tCheck,\n\t\t},\n\t}\n\t</script>\n```\n* With a spinning loader instead of the icon:\n\n```vue\n<ul>\n\t<NcAppNavigationItem name=\"Loading Item\" :loading=\"true\" />\n</ul>\n```\n* With an active state (only needed when not using `vue-router` and the `to` property, otherwise this is set automatically)\n\n```vue\n<ul>\n\t<NcAppNavigationItem name=\"Current page\" :active=\"true\" />\n</ul>\n```\n\n* Using different icons based on the active state (e.g. using vue-router and showing the filled variant for the current route):\n\n```vue\n<template>\n\t<ul>\n\t\t<NcAppNavigationItem name=\"Current page\" :active=\"true\">\n\t\t\t<template #icon=\"{ active }\">\n\t\t\t\t<NcIconSvgWrapper :path=\"active ? mdiFolder : mdiFolderOutline\" />\n\t\t\t</template>\n\t\t</NcAppNavigationItem>\n\t\t<NcAppNavigationItem name=\"Other page\">\n\t\t\t<template #icon=\"{ active }\">\n\t\t\t\t<NcIconSvgWrapper :path=\"active ? mdiFolder : mdiFolderOutline\" />\n\t\t\t</template>\n\t\t</NcAppNavigationItem>\n\t</ul>\n</template>\n<script>\nimport { mdiFolder, mdiFolderOutline } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tmdiFolder,\n\t\t\tmdiFolderOutline,\n\t\t}\n\t},\n}\n</script>\n```\n\n#### Element with actions\nWrap the children in a template. If you have more than 2 actions, a popover menu and a menu\nbutton will be automatically created.\n\n```vue\n\t<template>\n\t\t<div id=\"app-navigation-vue-action\"><!-- Just a wrapper necessary in the docs. Not needed when NcAppNavigation is correctly used as parent. -->\n\t\t\t<ul>\n\t\t\t\t<NcAppNavigationItem name=\"Item with actions\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Check :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\t<template #actions>\n\t\t\t\t\t\t<NcActionButton @click=\"alert('Edit')\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\tEdit\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t<NcActionButton @click=\"alert('Delete')\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\tDelete\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t<NcActionLink name=\"Link\" href=\"https://nextcloud.com\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<OpenInNew :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcActionLink>\n\t\t\t\t\t</template>\n\t\t\t\t</NcAppNavigationItem>\n\t\t\t</ul>\n\t\t</div>\n\t</template>\n\t<script>\n\timport Check from 'vue-material-design-icons/Check.vue'\n\timport Delete from 'vue-material-design-icons/Delete.vue'\n\timport OpenInNew from 'vue-material-design-icons/OpenInNew.vue'\n\timport Pencil from 'vue-material-design-icons/Pencil.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tCheck,\n\t\t\tDelete,\n\t\t\tOpenInNew,\n\t\t\tPencil,\n\t\t},\n\t}\n\t</script>\n```\n\n#### Element with counter\nJust nest the counter in a template within `<NcAppNavigationItem>` and add `#counter` to it.\n\n```vue\n\t<template>\n\t\t<ul>\n\t\t\t<NcAppNavigationItem name=\"Item with counter\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconFolderOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<template #counter>\n\t\t\t\t\t<NcCounterBubble>\n\t\t\t\t\t\t99+\n\t\t\t\t\t</NcCounterBubble>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationItem>\n\t\t</ul>\n\t</template>\n\t<script>\n\timport IconFolderOutline from 'vue-material-design-icons/FolderOutline.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconFolderOutline,\n\t\t},\n\t}\n\t</script>\n```\n\n#### Element with children\n\nWrap the children in a template with the `slot` property and use the prop `allowCollapse` to choose whether to allow or\nprevent the user from collapsing the items.\n\n```vue\n\t<template>\n\t\t<ul>\n\t\t\t<NcAppNavigationItem name=\"Item with children\" :allowCollapse=\"true\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconFolderOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<template #counter>\n\t\t\t\t\t<NcCounterBubble>\n\t\t\t\t\t\t99+\n\t\t\t\t\t</NcCounterBubble>\n\t\t\t\t</template>\n\t\t\t\t<template #actions>\n\t\t\t\t\t<NcActionButton @click=\"alert('Edit')\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tEdit\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton @click=\"alert('Delete')\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tDelete\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionLink name=\"Link\" href=\"https://nextcloud.com\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<OpenInNew :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcActionLink>\n\t\t\t\t</template>\n\t\t\t\t<template>\n\t\t\t\t\t<NcAppNavigationItem name=\"AppNavigationItemChild1\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"AppNavigationItemChild2\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"AppNavigationItemChild3\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"AppNavigationItemChild4\" />\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationItem>\n\t\t</ul>\n\t</template>\n\t<script>\n\timport IconFolderOutline from 'vue-material-design-icons/FolderOutline.vue'\n\timport Delete from 'vue-material-design-icons/Delete.vue'\n\timport OpenInNew from 'vue-material-design-icons/OpenInNew.vue'\n\timport Pencil from 'vue-material-design-icons/Pencil.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconFolderOutline,\n\t\t\tDelete,\n\t\t\tOpenInNew,\n\t\t\tPencil,\n\t\t},\n\t}\n\t</script>\n```\n\n#### Editable element\nAdd the prop `:editable=true` and an edit placeholder if you need it. By default\nthe placeholder is the previous name of the element.\n\n```vue\n\t<template>\n\t\t<ul>\n\t\t\t<NcAppNavigationItem name=\"Editable Item\" :editable=\"true\"\n\t\t\t\teditPlaceholder=\"your_placeholder_here\" @update:name=\"function(value){alert(value)}\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconFolderOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationItem>\n\t\t</ul>\n\t</template>\n\t<script>\n\timport IconFolderOutline from 'vue-material-design-icons/FolderOutline.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconFolderOutline,\n\t\t},\n\t}\n\t</script>\n```\n\n#### Undo element\nJust set the `undo` and `name` props. When clicking the undo button, an `undo` event is emitted.\n\n```\n<ul>\n\t<NcAppNavigationItem :undo=\"true\" name=\"Deleted important entry\" @undo=\"alert('undo delete')\"  />\n</ul>\n```\n\n#### Link element\nHref that start by http will be treated as external and opened in a new tab\n```\n<div>\n\t<ul>\n\t\t<NcAppNavigationItem name=\"Files\" href=\"/index.php/apps/files\" />\n\t\t<NcAppNavigationItem name=\"Nextcloud\" href=\"https://nextcloud.com\" />\n\t</ul>\n</div>\n```\n\n#### Custom title\n```\n<ul>\n\t<NcAppNavigationItem name=\"Nextcloud\" title=\"Open the Nextcloud website\" href=\"https://nextcloud.com\" />\n</ul>\n```\n\n#### Pinned element\nJust set the `pinned` prop.\n```\n<ul>\n\t<NcAppNavigationItem name=\"Pinned item\" :pinned=\"true\" />\n</ul>\n```\n</docs>\n\n<template>\n\t<li\n\t\t:id=\"id\"\n\t\t:class=\"{\n\t\t\t'app-navigation-entry--opened': opened,\n\t\t\t'app-navigation-entry--pinned': pinned,\n\t\t\t'app-navigation-entry--collapsible': isCollapsible(),\n\t\t}\"\n\t\tclass=\"app-navigation-entry-wrapper\">\n\t\t<component\n\t\t\t:is=\"isRouterLink ? 'router-link' : 'NcVNodes'\"\n\t\t\tv-slot=\"{ href: routerLinkHref, navigate, isActive }\"\n\t\t\t:custom=\"isRouterLink ? true : false\"\n\t\t\t:to=\"to\"\n\t\t\t:exact=\"isRouterLink ? exact : null\">\n\t\t\t<div\n\t\t\t\t:class=\"{\n\t\t\t\t\t'app-navigation-entry--editing': editingActive,\n\t\t\t\t\t'app-navigation-entry--deleted': undo,\n\t\t\t\t\tactive: (to && isActive) || active,\n\t\t\t\t}\"\n\t\t\t\tclass=\"app-navigation-entry\">\n\t\t\t\t<!-- Icon and name -->\n\t\t\t\t<a\n\t\t\t\t\tv-if=\"!undo\"\n\t\t\t\t\tclass=\"app-navigation-entry-link\"\n\t\t\t\t\t:aria-current=\"active || (to && isActive) ? 'page' : undefined\"\n\t\t\t\t\t:aria-description=\"ariaDescription\"\n\t\t\t\t\t:aria-expanded=\"$scopedSlots.default ? opened.toString() : undefined\"\n\t\t\t\t\t:href=\"href || routerLinkHref || '#'\"\n\t\t\t\t\t:target=\"isExternal(href) ? '_blank' : undefined\"\n\t\t\t\t\t:title=\"title || name\"\n\t\t\t\t\t@blur=\"handleBlur\"\n\t\t\t\t\t@click=\"onClick($event, navigate, routerLinkHref)\"\n\t\t\t\t\t@focus=\"handleFocus\"\n\t\t\t\t\t@keydown.tab.exact=\"handleTab\">\n\n\t\t\t\t\t<!-- icon if not collapsible -->\n\t\t\t\t\t<!-- never show the icon over the collapsible if mobile -->\n\t\t\t\t\t<div\n\t\t\t\t\t\t:class=\"{ [icon]: icon }\"\n\t\t\t\t\t\tclass=\"app-navigation-entry-icon\">\n\t\t\t\t\t\t<NcLoadingIcon v-if=\"loading\" />\n\t\t\t\t\t\t<!-- @slot Slot for the optional leading icon. This slots get the `active`-slot attribute passed which is based on the vue-routers active route or the `active` prop. -->\n\t\t\t\t\t\t<slot v-else name=\"icon\" :active=\"active || (to && isActive)\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<span v-if=\"!editingActive\" class=\"app-navigation-entry__name\">\n\t\t\t\t\t\t{{ name }}\n\t\t\t\t\t</span>\n\t\t\t\t\t<div v-if=\"editingActive\" class=\"editingContainer\">\n\t\t\t\t\t\t<NcInputConfirmCancel\n\t\t\t\t\t\t\tref=\"editingInput\"\n\t\t\t\t\t\t\tv-model=\"editingValue\"\n\t\t\t\t\t\t\t:placeholder=\"editPlaceholder !== '' ? editPlaceholder : name\"\n\t\t\t\t\t\t\t:primary=\"(to && isActive) || active\"\n\t\t\t\t\t\t\t@cancel=\"cancelEditing\"\n\t\t\t\t\t\t\t@confirm=\"handleEditingDone\" />\n\t\t\t\t\t</div>\n\t\t\t\t</a>\n\n\t\t\t\t<!-- undo entry -->\n\t\t\t\t<div v-if=\"undo\" class=\"app-navigation-entry__deleted\">\n\t\t\t\t\t<div class=\"app-navigation-entry__deleted-description\">\n\t\t\t\t\t\t{{ name }}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t<!-- Counter and Actions -->\n\t\t\t\t<div\n\t\t\t\t\tv-if=\"hasUtils && !editingActive\"\n\t\t\t\t\tclass=\"app-navigation-entry__utils\"\n\t\t\t\t\t:class=\"{ 'app-navigation-entry__utils--display-actions': forceDisplayActions || menuOpenLocalValue || menuOpen }\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tv-if=\"$scopedSlots.counter\"\n\t\t\t\t\t\tclass=\"app-navigation-entry__counter-wrapper\">\n\t\t\t\t\t\t<!-- @slot Slot for the `NcCounterBubble` -->\n\t\t\t\t\t\t<slot name=\"counter\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<NcActions\n\t\t\t\t\t\tv-if=\"$scopedSlots.actions || (editable && !editingActive) || undo\"\n\t\t\t\t\t\tref=\"actions\"\n\t\t\t\t\t\t:inline=\"inlineActions\"\n\t\t\t\t\t\tclass=\"app-navigation-entry__actions\"\n\t\t\t\t\t\tcontainer=\"#app-navigation-vue\"\n\t\t\t\t\t\t:boundaries-element=\"actionsBoundariesElement\"\n\t\t\t\t\t\t:placement=\"menuPlacement\"\n\t\t\t\t\t\t:open=\"menuOpen\"\n\t\t\t\t\t\t:type=\"(to && isActive) || active ? 'tertiary-on-primary' : 'tertiary'\"\n\t\t\t\t\t\t:force-menu=\"forceMenu\"\n\t\t\t\t\t\t:default-icon=\"menuIcon\"\n\t\t\t\t\t\t@update:open=\"onMenuToggle\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<!-- @slot Slot for the custom menu icon -->\n\t\t\t\t\t\t\t<slot name=\"menu-icon\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<NcActionButton\n\t\t\t\t\t\t\tv-if=\"editable && !editingActive\"\n\t\t\t\t\t\t\t:aria-label=\"editButtonAriaLabel\"\n\t\t\t\t\t\t\t@click=\"handleEdit\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t{{ editLabel }}\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t<NcActionButton\n\t\t\t\t\t\t\tv-if=\"undo\"\n\t\t\t\t\t\t\t:aria-label=\"undoButtonAriaLabel\"\n\t\t\t\t\t\t\t@click=\"handleUndo\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<Undo :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t<!-- @slot Slot for additional `NcAction*` -->\n\t\t\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t\t</NcActions>\n\t\t\t\t</div>\n\t\t\t\t<NcAppNavigationIconCollapsible\n\t\t\t\t\tv-if=\"isCollapsible()\"\n\t\t\t\t\t:active=\"(to && isActive) || active\"\n\t\t\t\t\t:open=\"opened\"\n\t\t\t\t\t@click.prevent.stop=\"toggleCollapse\" />\n\n\t\t\t\t<!-- @slot Slot for anything (virtual) that should be mounted in the component, like a related modal -->\n\t\t\t\t<slot name=\"extra\" />\n\t\t\t</div>\n\t\t</component>\n\t\t<!-- Children elements -->\n\t\t<ul v-if=\"canHaveChildren && $scopedSlots.default\" class=\"app-navigation-entry__children\">\n\t\t\t<!-- @slot Slot for children -->\n\t\t\t<slot />\n\t\t</ul>\n\t</li>\n</template>\n\n<script>\nimport Pencil from 'vue-material-design-icons/Pencil.vue'\nimport Undo from 'vue-material-design-icons/Undo.vue'\nimport NcAppNavigationIconCollapsible from './NcAppNavigationIconCollapsible.vue'\nimport NcInputConfirmCancel from './NcInputConfirmCancel.vue'\nimport { useIsMobile } from '../../composables/useIsMobile/index.ts'\nimport { t } from '../../l10n.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport NcActionButton from '../NcActionButton/index.js'\nimport NcActions from '../NcActions/index.js'\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\nimport NcVNodes from '../NcVNodes/index.js'\n\nexport default {\n\tname: 'NcAppNavigationItem',\n\n\tcomponents: {\n\t\tNcActions,\n\t\tNcActionButton,\n\t\tNcAppNavigationIconCollapsible,\n\t\tNcInputConfirmCancel,\n\t\tNcLoadingIcon,\n\t\tNcVNodes,\n\t\tPencil,\n\t\tUndo,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * If you are not using vue-router you can use the property to set this item as the active navigation entry.\n\t\t * When using vue-router and the `to` property this is set automatically.\n\t\t */\n\t\tactive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * The main text content of the entry.\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * The title attribute of the element.\n\t\t */\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * id attribute of the list item element\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'app-navigation-item-' + GenRandomId(),\n\t\t\tvalidator: (id) => id.trim() !== '',\n\t\t},\n\n\t\t/**\n\t\t * Refers to the icon on the left, this prop accepts a class\n\t\t * like 'icon-category-enabled'.\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Displays a loading animated icon on the left of the element\n\t\t * instead of the icon.\n\t\t */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Passing in a route will make the root element of this\n\t\t * component a `<router-link />` that points to that route.\n\t\t * By leaving this blank, the root element will be a `<li>`.\n\t\t */\n\t\tto: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * A direct link. This will be used as the `href` attribute.\n\t\t * This will ignore any `to` prop being defined.\n\t\t */\n\t\thref: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Pass in `true` if you want the matching behaviour to\n\t\t * be non-inclusive: https://router.vuejs.org/api/#exact\n\t\t */\n\t\texact: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Gives the possibility to collapse the children elements into the\n\t\t * parent element (true) or expands the children elements (false).\n\t\t */\n\t\tallowCollapse: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Makes the name of the item editable by providing an `ActionButton`\n\t\t * component that toggles a form\n\t\t */\n\t\teditable: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Only for 'editable' items, sets label for the edit action button.\n\t\t */\n\t\teditLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Only for items in 'editable' mode, sets the placeholder text for the editing form.\n\t\t */\n\t\teditPlaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Pins the item to the bottom left area, above the settings. Do not\n\t\t * place 'non-pinned' `AppnavigationItem` components below `pinned`\n\t\t * ones.\n\t\t */\n\t\tpinned: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Puts the item in the 'undo' state.\n\t\t */\n\t\tundo: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * The navigation collapsible state (synced)\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 * The actions menu open state (synced)\n\t\t */\n\t\tmenuOpen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Force the actions to display in a three dot menu\n\t\t */\n\t\tforceMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * The action's menu default icon\n\t\t */\n\t\tmenuIcon: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * The action's menu direction\n\t\t */\n\t\tmenuPlacement: {\n\t\t\ttype: String,\n\t\t\tdefault: 'bottom',\n\t\t},\n\n\t\t/**\n\t\t * Entry aria details\n\t\t */\n\t\tariaDescription: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * To be used only when the elements in the actions menu are very important\n\t\t */\n\t\tforceDisplayActions: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Number of action items outside the menu\n\t\t */\n\t\tinlineActions: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:menuOpen',\n\t\t'update:open',\n\t\t'update:name',\n\t\t'click',\n\t\t'undo',\n\t],\n\n\tsetup() {\n\t\treturn {\n\t\t\tisMobile: useIsMobile(),\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\teditingValue: '',\n\t\t\topened: this.open, // Collapsible state\n\t\t\teditingActive: false,\n\t\t\t/**\n\t\t\t * Tracks the open state of the actions menu\n\t\t\t */\n\t\t\tmenuOpenLocalValue: false,\n\t\t\tfocused: false,\n\t\t\tactionsBoundariesElement: undefined,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tisRouterLink() {\n\t\t\treturn this.to && !this.href\n\t\t},\n\n\t\t// Checks if the component is already a children of another\n\t\t// instance of AppNavigationItem\n\t\tcanHaveChildren() {\n\t\t\tif (this.$parent.$options._componentTag === 'AppNavigationItem') {\n\t\t\t\treturn false\n\t\t\t} else {\n\t\t\t\treturn true\n\t\t\t}\n\t\t},\n\n\t\thasUtils() {\n\t\t\tif (this.$scopedSlots.actions || this.$scopedSlots.counter || this.editable || this.undo) {\n\t\t\t\treturn true\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\n\t\teditButtonAriaLabel() {\n\t\t\treturn this.editLabel ? this.editLabel : t('Edit item')\n\t\t},\n\n\t\tundoButtonAriaLabel() {\n\t\t\treturn t('Undo changes')\n\t\t},\n\t},\n\n\twatch: {\n\t\topen(newVal) {\n\t\t\tthis.opened = newVal\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.actionsBoundariesElement = document.querySelector('#content-vue') || undefined\n\t},\n\n\tmethods: {\n\t\t// sync opened menu state with prop\n\t\tonMenuToggle(state) {\n\t\t\tthis.$emit('update:menuOpen', state)\n\t\t\tthis.menuOpenLocalValue = state\n\t\t},\n\n\t\t// toggle the collapsible state\n\t\ttoggleCollapse() {\n\t\t\tthis.opened = !this.opened\n\t\t\tthis.$emit('update:open', this.opened)\n\t\t},\n\n\t\t/**\n\t\t * Handle link click\n\t\t *\n\t\t * @param {PointerEvent} event - Native click event\n\t\t * @param {Function} [navigate] - VueRouter link's navigate if any\n\t\t * @param {string} [routerLinkHref] - VueRouter link's href\n\t\t */\n\t\tonClick(event, navigate, routerLinkHref) {\n\t\t\t// Always forward native event\n\t\t\tthis.$emit('click', event)\n\t\t\t// Do not navigate with control keys - it is opening in a new tab\n\t\t\tif (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Prevent default link behaviour if it's a router-link and navigate manually\n\t\t\tif (routerLinkHref) {\n\t\t\t\tnavigate?.(event)\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\n\t\t// Edition methods\n\t\thandleEdit() {\n\t\t\tthis.editingValue = this.name\n\t\t\tthis.editingActive = true\n\t\t\tthis.onMenuToggle(false)\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.$refs.editingInput.focusInput()\n\t\t\t})\n\t\t},\n\n\t\tcancelEditing() {\n\t\t\tthis.editingActive = false\n\t\t},\n\n\t\thandleEditingDone() {\n\t\t\tthis.$emit('update:name', this.editingValue)\n\t\t\tthis.editingValue = ''\n\t\t\tthis.editingActive = false\n\t\t},\n\n\t\t// Undo methods\n\t\thandleUndo() {\n\t\t\tthis.$emit('undo')\n\t\t},\n\n\t\t/**\n\t\t * Does this item have children and is collapsing allowed via the prop?\n\t\t *\n\t\t * @return {boolean} True, if the item can be collapsed\n\t\t */\n\t\tisCollapsible() {\n\t\t\treturn this.allowCollapse && !!this.$scopedSlots.default\n\t\t},\n\n\t\t/**\n\t\t * Show actions upon focus\n\t\t */\n\t\thandleFocus() {\n\t\t\tthis.focused = true\n\t\t},\n\n\t\thandleBlur() {\n\t\t\tthis.focused = false\n\t\t},\n\n\t\t/**\n\t\t * This method checks if the root element of the component is focused and\n\t\t * if that's the case it focuses the actions button if available\n\t\t *\n\t\t * @param {Event} e the keydown event\n\t\t */\n\t\thandleTab(e) {\n\t\t\t// If there is no actions menu, do nothing.\n\t\t\tif (!this.$refs.actions) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (this.focused) {\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.$refs.actions.$refs.triggerButton.$el.focus()\n\t\t\t\tthis.focused = false\n\t\t\t} else {\n\t\t\t\tthis.$refs.actions.$refs.triggerButton.$el.blur()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Is this an external link\n\t\t *\n\t\t * @param {string} href The link to check\n\t\t * @return {boolean} Whether it is external or not\n\t\t */\n\t\tisExternal(href) {\n\t\t\t// Match any protocol\n\t\t\treturn href && href.match(/[a-z]+:\\/\\//i)\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n@use '../../assets/NcAppNavigationItem.scss';\n</style>\n"],"names":["_sfc_main","NcButton","ChevronDown","ChevronUp","t","NcActions","NcActionButton","NcInputConfirmCancel","NcLoadingIcon","NcVNodes","GenRandomId","useIsMobile"],"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;;;;;;;;;;;;;;;;;AChBA,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;;;;;;;;;;;;;;;;;;ACHA,MAAAA,cAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAC,SAAAA;AAAAA,IACA,aAAAC,YAAAA;AAAAA,IACA,WAAAC,UAAAA;AAAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA;AAAA,MAEA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,CAAA,OAAA;AAAA,EAEA,UAAA;AAAA,IACA,cAAA;AACA,aAAA,KAAA,OAAAC,MAAAA,EAAA,eAAA,IAAAA,MAAAA,EAAA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,QAAA,GAAA;AACA,WAAA,MAAA,SAAA,CAAA;AAAA,IACA;AAAA,EACA;AAEA;;;;;;;;;;;;;;;;;;;;;ACoWA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,WAAAC,UAAAA;AAAAA,IACA,gBAAAC,eAAAA;AAAAA,IACA;AAAA,IACA,sBAAAC,qBAAAA;AAAAA,IACA,eAAAC;AAAAA,IACA,UAAAC;AAAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,yBAAAC,wBAAA;AAAA,MACA,WAAA,CAAA,OAAA,GAAA,KAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,IAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,iBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,QAAA;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,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,iBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA;AACA,WAAA;AAAA,MACA,UAAAC,wBAAAA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,cAAA;AAAA,MACA,QAAA,KAAA;AAAA;AAAA,MACA,eAAA;AAAA;AAAA;AAAA;AAAA,MAIA,oBAAA;AAAA,MACA,SAAA;AAAA,MACA,0BAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,eAAA;AACA,aAAA,KAAA,MAAA,CAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA,IAIA,kBAAA;AACA,UAAA,KAAA,QAAA,SAAA,kBAAA,qBAAA;AACA,eAAA;AAAA,MACA,OAAA;AACA,eAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,WAAA;AACA,UAAA,KAAA,aAAA,WAAA,KAAA,aAAA,WAAA,KAAA,YAAA,KAAA,MAAA;AACA,eAAA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA,IAEA,sBAAA;AACA,aAAA,KAAA,YAAA,KAAA,YAAAP,MAAAA,EAAA,WAAA;AAAA,IACA;AAAA,IAEA,sBAAA;AACA,aAAAA,MAAAA,EAAA,cAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,KAAA,QAAA;AACA,WAAA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,2BAAA,SAAA,cAAA,cAAA,KAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA,IAEA,aAAA,OAAA;AACA,WAAA,MAAA,mBAAA,KAAA;AACA,WAAA,qBAAA;AAAA,IACA;AAAA;AAAA,IAGA,iBAAA;AACA,WAAA,SAAA,CAAA,KAAA;AACA,WAAA,MAAA,eAAA,KAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,QAAA,OAAA,UAAA,gBAAA;AAEA,WAAA,MAAA,SAAA,KAAA;AAEA,UAAA,MAAA,WAAA,MAAA,UAAA,MAAA,WAAA,MAAA,UAAA;AACA;AAAA,MACA;AAEA,UAAA,gBAAA;AACA,mBAAA,KAAA;AACA,cAAA,eAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA,IAGA,aAAA;AACA,WAAA,eAAA,KAAA;AACA,WAAA,gBAAA;AACA,WAAA,aAAA,KAAA;AACA,WAAA,UAAA,MAAA;AACA,aAAA,MAAA,aAAA,WAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,WAAA,gBAAA;AAAA,IACA;AAAA,IAEA,oBAAA;AACA,WAAA,MAAA,eAAA,KAAA,YAAA;AACA,WAAA,eAAA;AACA,WAAA,gBAAA;AAAA,IACA;AAAA;AAAA,IAGA,aAAA;AACA,WAAA,MAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,gBAAA;AACA,aAAA,KAAA,iBAAA,CAAA,CAAA,KAAA,aAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AACA,WAAA,UAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,WAAA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,UAAA,GAAA;AAEA,UAAA,CAAA,KAAA,MAAA,SAAA;AACA;AAAA,MACA;AACA,UAAA,KAAA,SAAA;AACA,UAAA,eAAA;AACA,aAAA,MAAA,QAAA,MAAA,cAAA,IAAA,MAAA;AACA,aAAA,UAAA;AAAA,MACA,OAAA;AACA,aAAA,MAAA,QAAA,MAAA,cAAA,IAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,WAAA,MAAA;AAEA,aAAA,QAAA,KAAA,MAAA,cAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0,1]}