@nextcloud/vue 8.32.0 → 8.34.0

package/dist/chunks/{NcAppNavigationNew-DbqusDUV.mjs → NcAppNavigationNew-BHzvRlVc.mjs}

@@ -1,5 +1,5 @@
 import '../assets/NcAppNavigationNew-D8_2ab9R.css';
-import { N as NcButton } from "./NcButton-D3CaJu1f.mjs";
+import { N as NcButton } from "./NcButton-DUZTtFhr.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
 const _sfc_main = {
   components: {
@@ -75,4 +75,4 @@ const NcAppNavigationNew = __component__.exports;
 export {
   NcAppNavigationNew as N
 };
-//# sourceMappingURL=NcAppNavigationNew-DbqusDUV.mjs.map
+//# sourceMappingURL=NcAppNavigationNew-BHzvRlVc.mjs.map

package/dist/chunks/{NcAppNavigationNew-DbqusDUV.mjs.map → NcAppNavigationNew-BHzvRlVc.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcAppNavigationNew-DbqusDUV.mjs","sources":["../../src/components/NcAppNavigationNew/NcAppNavigationNew.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n <docs>\n### Usage\n\n ```\n <template>\n\t<NcAppNavigationNew text=\"New Element\">\n\t\t<template #icon>\n\t\t\t<Plus :size=\"20\" />\n\t\t</template>\n\t</NcAppNavigationNew>\n </template>\n <script>\n import Plus from 'vue-material-design-icons/Plus'\n\n export default {\n\tcomponents: {\n\t\tPlus,\n\t},\n }\n </script>\n ```\n </docs>\n\n<template>\n\t<div class=\"app-navigation-new\">\n\t\t<NcButton\n\t\t\t:id=\"buttonId\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:variant=\"type !== 'primary' ? type : variant\"\n\t\t\t@click=\"$emit('click')\">\n\t\t\t<template #icon>\n\t\t\t\t<slot name=\"icon\" />\n\t\t\t</template>\n\t\t\t{{ text }}\n\t\t</NcButton>\n\t</div>\n</template>\n\n<script>\nimport NcButton from '../NcButton/index.js'\n\nexport default {\n\tcomponents: {\n\t\tNcButton,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Id of the button\n\t\t */\n\t\tbuttonId: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Disabled state of the button\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\trequired: false,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Main text of the button\n\t\t */\n\t\ttext: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * @deprecated use `variant` instead - will be removed with v9\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'primary',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['primary', 'secondary', 'tertiary'].indexOf(value) !== -1\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * The color variant to use.\n\t\t *\n\t\t * @default 'primary'\n\t\t */\n\t\tvariant: {\n\t\t\ttype: String,\n\t\t\tdefault: 'primary',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['primary', 'secondary', 'tertiary'].indexOf(value) !== -1\n\t\t\t},\n\t\t},\n\t},\n\n\temits: ['click'],\n}\n</script>\n\n<style lang=\"scss\" scoped>\n/* 'New' button */\n.app-navigation-new {\n\tdisplay: block;\n\tpadding: calc(var(--default-grid-baseline, 4px) * 2);\n\tbutton {\n\t\twidth: 100%;\n\t}\n}\n</style>\n"],"names":[],"mappings":";;AA8CA,MAAA,YAAA;AAAA,EACA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA,OAAA;AACA,eAAA,CAAA,WAAA,aAAA,UAAA,EAAA,QAAA,KAAA,MAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA,OAAA;AACA,eAAA,CAAA,WAAA,aAAA,UAAA,EAAA,QAAA,KAAA,MAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,CAAA,OAAA;AACA;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcAppNavigationNew-BHzvRlVc.mjs","sources":["../../src/components/NcAppNavigationNew/NcAppNavigationNew.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n <docs>\n### Usage\n\n ```\n <template>\n\t<NcAppNavigationNew text=\"New Element\">\n\t\t<template #icon>\n\t\t\t<Plus :size=\"20\" />\n\t\t</template>\n\t</NcAppNavigationNew>\n </template>\n <script>\n import Plus from 'vue-material-design-icons/Plus'\n\n export default {\n\tcomponents: {\n\t\tPlus,\n\t},\n }\n </script>\n ```\n </docs>\n\n<template>\n\t<div class=\"app-navigation-new\">\n\t\t<NcButton\n\t\t\t:id=\"buttonId\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:variant=\"type !== 'primary' ? type : variant\"\n\t\t\t@click=\"$emit('click')\">\n\t\t\t<template #icon>\n\t\t\t\t<slot name=\"icon\" />\n\t\t\t</template>\n\t\t\t{{ text }}\n\t\t</NcButton>\n\t</div>\n</template>\n\n<script>\nimport NcButton from '../NcButton/index.js'\n\nexport default {\n\tcomponents: {\n\t\tNcButton,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Id of the button\n\t\t */\n\t\tbuttonId: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Disabled state of the button\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\trequired: false,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Main text of the button\n\t\t */\n\t\ttext: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * @deprecated use `variant` instead - will be removed with v9\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'primary',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['primary', 'secondary', 'tertiary'].indexOf(value) !== -1\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * The color variant to use.\n\t\t *\n\t\t * @default 'primary'\n\t\t */\n\t\tvariant: {\n\t\t\ttype: String,\n\t\t\tdefault: 'primary',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['primary', 'secondary', 'tertiary'].indexOf(value) !== -1\n\t\t\t},\n\t\t},\n\t},\n\n\temits: ['click'],\n}\n</script>\n\n<style lang=\"scss\" scoped>\n/* 'New' button */\n.app-navigation-new {\n\tdisplay: block;\n\tpadding: calc(var(--default-grid-baseline, 4px) * 2);\n\tbutton {\n\t\twidth: 100%;\n\t}\n}\n</style>\n"],"names":[],"mappings":";;AA8CA,MAAA,YAAA;AAAA,EACA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA,OAAA;AACA,eAAA,CAAA,WAAA,aAAA,UAAA,EAAA,QAAA,KAAA,MAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA,OAAA;AACA,eAAA,CAAA,WAAA,aAAA,UAAA,EAAA,QAAA,KAAA,MAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,CAAA,OAAA;AACA;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcAppNavigationNew-T56pahiu.cjs → NcAppNavigationNew-BYvFykgl.cjs}

@@ -1,6 +1,6 @@
 require('../assets/NcAppNavigationNew-D8_2ab9R.css');
 "use strict";
-const NcButton = require("./NcButton-DK7bNZIL.cjs");
+const NcButton = require("./NcButton-CJBZrdiL.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
 const _sfc_main = {
   components: {
@@ -74,4 +74,4 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
 );
 const NcAppNavigationNew = __component__.exports;
 exports.NcAppNavigationNew = NcAppNavigationNew;
-//# sourceMappingURL=NcAppNavigationNew-T56pahiu.cjs.map
+//# sourceMappingURL=NcAppNavigationNew-BYvFykgl.cjs.map

package/dist/chunks/{NcAppNavigationNew-T56pahiu.cjs.map → NcAppNavigationNew-BYvFykgl.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcAppNavigationNew-T56pahiu.cjs","sources":["../../src/components/NcAppNavigationNew/NcAppNavigationNew.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n <docs>\n### Usage\n\n ```\n <template>\n\t<NcAppNavigationNew text=\"New Element\">\n\t\t<template #icon>\n\t\t\t<Plus :size=\"20\" />\n\t\t</template>\n\t</NcAppNavigationNew>\n </template>\n <script>\n import Plus from 'vue-material-design-icons/Plus'\n\n export default {\n\tcomponents: {\n\t\tPlus,\n\t},\n }\n </script>\n ```\n </docs>\n\n<template>\n\t<div class=\"app-navigation-new\">\n\t\t<NcButton\n\t\t\t:id=\"buttonId\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:variant=\"type !== 'primary' ? type : variant\"\n\t\t\t@click=\"$emit('click')\">\n\t\t\t<template #icon>\n\t\t\t\t<slot name=\"icon\" />\n\t\t\t</template>\n\t\t\t{{ text }}\n\t\t</NcButton>\n\t</div>\n</template>\n\n<script>\nimport NcButton from '../NcButton/index.js'\n\nexport default {\n\tcomponents: {\n\t\tNcButton,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Id of the button\n\t\t */\n\t\tbuttonId: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Disabled state of the button\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\trequired: false,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Main text of the button\n\t\t */\n\t\ttext: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * @deprecated use `variant` instead - will be removed with v9\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'primary',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['primary', 'secondary', 'tertiary'].indexOf(value) !== -1\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * The color variant to use.\n\t\t *\n\t\t * @default 'primary'\n\t\t */\n\t\tvariant: {\n\t\t\ttype: String,\n\t\t\tdefault: 'primary',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['primary', 'secondary', 'tertiary'].indexOf(value) !== -1\n\t\t\t},\n\t\t},\n\t},\n\n\temits: ['click'],\n}\n</script>\n\n<style lang=\"scss\" scoped>\n/* 'New' button */\n.app-navigation-new {\n\tdisplay: block;\n\tpadding: calc(var(--default-grid-baseline, 4px) * 2);\n\tbutton {\n\t\twidth: 100%;\n\t}\n}\n</style>\n"],"names":["NcButton"],"mappings":";;;AA8CA,MAAA,YAAA;AAAA,EACA,YAAA;AAAA,IACA,UAAAA,SAAAA;AAAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA,OAAA;AACA,eAAA,CAAA,WAAA,aAAA,UAAA,EAAA,QAAA,KAAA,MAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA,OAAA;AACA,eAAA,CAAA,WAAA,aAAA,UAAA,EAAA,QAAA,KAAA,MAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,CAAA,OAAA;AACA;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcAppNavigationNew-BYvFykgl.cjs","sources":["../../src/components/NcAppNavigationNew/NcAppNavigationNew.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n <docs>\n### Usage\n\n ```\n <template>\n\t<NcAppNavigationNew text=\"New Element\">\n\t\t<template #icon>\n\t\t\t<Plus :size=\"20\" />\n\t\t</template>\n\t</NcAppNavigationNew>\n </template>\n <script>\n import Plus from 'vue-material-design-icons/Plus'\n\n export default {\n\tcomponents: {\n\t\tPlus,\n\t},\n }\n </script>\n ```\n </docs>\n\n<template>\n\t<div class=\"app-navigation-new\">\n\t\t<NcButton\n\t\t\t:id=\"buttonId\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:variant=\"type !== 'primary' ? type : variant\"\n\t\t\t@click=\"$emit('click')\">\n\t\t\t<template #icon>\n\t\t\t\t<slot name=\"icon\" />\n\t\t\t</template>\n\t\t\t{{ text }}\n\t\t</NcButton>\n\t</div>\n</template>\n\n<script>\nimport NcButton from '../NcButton/index.js'\n\nexport default {\n\tcomponents: {\n\t\tNcButton,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Id of the button\n\t\t */\n\t\tbuttonId: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Disabled state of the button\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\trequired: false,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Main text of the button\n\t\t */\n\t\ttext: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * @deprecated use `variant` instead - will be removed with v9\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'primary',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['primary', 'secondary', 'tertiary'].indexOf(value) !== -1\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * The color variant to use.\n\t\t *\n\t\t * @default 'primary'\n\t\t */\n\t\tvariant: {\n\t\t\ttype: String,\n\t\t\tdefault: 'primary',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['primary', 'secondary', 'tertiary'].indexOf(value) !== -1\n\t\t\t},\n\t\t},\n\t},\n\n\temits: ['click'],\n}\n</script>\n\n<style lang=\"scss\" scoped>\n/* 'New' button */\n.app-navigation-new {\n\tdisplay: block;\n\tpadding: calc(var(--default-grid-baseline, 4px) * 2);\n\tbutton {\n\t\twidth: 100%;\n\t}\n}\n</style>\n"],"names":["NcButton"],"mappings":";;;AA8CA,MAAA,YAAA;AAAA,EACA,YAAA;AAAA,IACA,UAAAA,SAAAA;AAAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA,OAAA;AACA,eAAA,CAAA,WAAA,aAAA,UAAA,EAAA,QAAA,KAAA,MAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA,OAAA;AACA,eAAA,CAAA,WAAA,aAAA,UAAA,EAAA,QAAA,KAAA,MAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,CAAA,OAAA;AACA;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcAppNavigationNewItem-DMRZwa_y.cjs → NcAppNavigationNewItem-CwhxGiXO.cjs}

@@ -1,6 +1,6 @@
-require('../assets/NcAppNavigationNewItem-Cjbn5XkO.css');
+require('../assets/NcAppNavigationNewItem-CYSjj3pD.css');
 "use strict";
-const NcInputConfirmCancel = require("./NcInputConfirmCancel-DVVTaxWi.cjs");
+const NcInputConfirmCancel = require("./NcInputConfirmCancel-vqVq5qKL.cjs");
 const Components_NcLoadingIcon = require("../Components/NcLoadingIcon.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
 const _sfc_main = {
@@ -89,8 +89,8 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "2c7e56d1"
+  "258871fd"
 );
 const NcAppNavigationNewItem = __component__.exports;
 exports.NcAppNavigationNewItem = NcAppNavigationNewItem;
-//# sourceMappingURL=NcAppNavigationNewItem-DMRZwa_y.cjs.map
+//# sourceMappingURL=NcAppNavigationNewItem-CwhxGiXO.cjs.map

package/dist/chunks/{NcAppNavigationNewItem-DMRZwa_y.cjs.map → NcAppNavigationNewItem-CwhxGiXO.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcAppNavigationNewItem-DMRZwa_y.cjs","sources":["../../src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Usage\n\n#### New Item element\n```vue\n\t<template>\n\t\t<NcAppNavigationNewItem name=\"New Item\" @new-item=\"function(value){alert(value)}\">\n\t\t\t<template #icon>\n\t\t\t\t<Plus :size=\"20\" />\n\t\t\t</template>\n\t\t</NcAppNavigationNewItem>\n\t</template>\n\t<script>\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tPlus,\n\t\t},\n\t}\n\t</script>\n```\n\n#### New Item element with a loading animation instead of the icon\n```vue\n\t<template>\n\t\t<NcAppNavigationNewItem name=\"New Item\" :loading=\"true\">\n\t\t\t<template #icon>\n\t\t\t\t<Plus :size=\"20\" />\n\t\t\t</template>\n\t\t</NcAppNavigationNewItem>\n\t</template>\n\t<script>\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tPlus,\n\t\t},\n\t}\n\t</script>\n```\n</docs>\n\n<template>\n\t<li\n\t\t:class=\"{\n\t\t\t'app-navigation-entry--newItemActive': newItemActive,\n\t\t}\"\n\t\tclass=\"app-navigation-entry\">\n\t\t<!-- New Item -->\n\t\t<button class=\"app-navigation-entry-button\" @click=\"handleNewItem\">\n\t\t\t<span\n\t\t\t\t:class=\"{ [icon]: !loading }\"\n\t\t\t\tclass=\"app-navigation-entry-icon\">\n\t\t\t\t<NcLoadingIcon v-if=\"loading\" />\n\t\t\t\t<slot v-else name=\"icon\" />\n\t\t\t</span>\n\n\t\t\t<span v-if=\"!newItemActive\" class=\"app-navigation-new-item__name\" :title=\"name\">\n\t\t\t\t{{ name }}\n\t\t\t</span>\n\n\t\t\t<!-- new Item input -->\n\t\t\t<span v-if=\"newItemActive\" class=\"newItemContainer\">\n\t\t\t\t<NcInputConfirmCancel\n\t\t\t\t\tref=\"newItemInput\"\n\t\t\t\t\tv-model=\"newItemValue\"\n\t\t\t\t\t:placeholder=\"editPlaceholder !== '' ? editPlaceholder : name\"\n\t\t\t\t\t@cancel=\"cancelNewItem\"\n\t\t\t\t\t@confirm=\"handleNewItemDone\" />\n\t\t\t</span>\n\t\t</button>\n\t</li>\n</template>\n\n<script>\nimport NcInputConfirmCancel from '../NcAppNavigationItem/NcInputConfirmCancel.vue'\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\n\nexport default {\n\tname: 'NcAppNavigationNewItem',\n\n\tcomponents: {\n\t\tNcInputConfirmCancel,\n\t\tNcLoadingIcon,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The name of the element.\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 * 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 * 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 * 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\t},\n\n\temits: ['new-item'],\n\n\tdata() {\n\t\treturn {\n\t\t\tnewItemValue: '',\n\t\t\tnewItemActive: false,\n\t\t}\n\t},\n\n\tmethods: {\n\t\thandleNewItem() {\n\t\t\tif (!this.loading) {\n\t\t\t\tthis.newItemActive = true\n\t\t\t\tthis.$nextTick(() => {\n\t\t\t\t\tthis.$refs.newItemInput.focusInput()\n\t\t\t\t})\n\t\t\t}\n\t\t},\n\n\t\tcancelNewItem() {\n\t\t\tthis.newItemActive = false\n\t\t},\n\n\t\thandleNewItemDone() {\n\t\t\tthis.$emit('new-item', this.newItemValue)\n\t\t\tthis.newItemValue = ''\n\t\t\tthis.newItemActive = false\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n@import '../../assets/NcAppNavigationItem';\n\n.app-navigation-new-item__name {\n\toverflow: hidden;\n\tmax-width: 100%;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n\tpadding-inline-start: 7px;\n\tfont-size: 14px;\n}\n\n.newItemContainer {\n\twidth: calc(100% - var(--default-clickable-area));\n\tmargin: auto;\n}\n</style>\n"],"names":["NcInputConfirmCancel","NcLoadingIcon"],"mappings":";;;;AAqFA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,sBAAAA,qBAAAA;AAAAA,IACA,eAAAC;AAAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;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,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,EACA;AAAA,EAEA,OAAA,CAAA,UAAA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,cAAA;AAAA,MACA,eAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,gBAAA;AACA,UAAA,CAAA,KAAA,SAAA;AACA,aAAA,gBAAA;AACA,aAAA,UAAA,MAAA;AACA,eAAA,MAAA,aAAA,WAAA;AAAA,QACA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,WAAA,gBAAA;AAAA,IACA;AAAA,IAEA,oBAAA;AACA,WAAA,MAAA,YAAA,KAAA,YAAA;AACA,WAAA,eAAA;AACA,WAAA,gBAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcAppNavigationNewItem-CwhxGiXO.cjs","sources":["../../src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Usage\n\n#### New Item element\n```vue\n\t<template>\n\t\t<NcAppNavigationNewItem name=\"New Item\" @new-item=\"function(value){alert(value)}\">\n\t\t\t<template #icon>\n\t\t\t\t<Plus :size=\"20\" />\n\t\t\t</template>\n\t\t</NcAppNavigationNewItem>\n\t</template>\n\t<script>\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tPlus,\n\t\t},\n\t}\n\t</script>\n```\n\n#### New Item element with a loading animation instead of the icon\n```vue\n\t<template>\n\t\t<NcAppNavigationNewItem name=\"New Item\" :loading=\"true\">\n\t\t\t<template #icon>\n\t\t\t\t<Plus :size=\"20\" />\n\t\t\t</template>\n\t\t</NcAppNavigationNewItem>\n\t</template>\n\t<script>\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tPlus,\n\t\t},\n\t}\n\t</script>\n```\n</docs>\n\n<template>\n\t<li\n\t\t:class=\"{\n\t\t\t'app-navigation-entry--newItemActive': newItemActive,\n\t\t}\"\n\t\tclass=\"app-navigation-entry\">\n\t\t<!-- New Item -->\n\t\t<button class=\"app-navigation-entry-button\" @click=\"handleNewItem\">\n\t\t\t<span\n\t\t\t\t:class=\"{ [icon]: !loading }\"\n\t\t\t\tclass=\"app-navigation-entry-icon\">\n\t\t\t\t<NcLoadingIcon v-if=\"loading\" />\n\t\t\t\t<slot v-else name=\"icon\" />\n\t\t\t</span>\n\n\t\t\t<span v-if=\"!newItemActive\" class=\"app-navigation-new-item__name\" :title=\"name\">\n\t\t\t\t{{ name }}\n\t\t\t</span>\n\n\t\t\t<!-- new Item input -->\n\t\t\t<span v-if=\"newItemActive\" class=\"newItemContainer\">\n\t\t\t\t<NcInputConfirmCancel\n\t\t\t\t\tref=\"newItemInput\"\n\t\t\t\t\tv-model=\"newItemValue\"\n\t\t\t\t\t:placeholder=\"editPlaceholder !== '' ? editPlaceholder : name\"\n\t\t\t\t\t@cancel=\"cancelNewItem\"\n\t\t\t\t\t@confirm=\"handleNewItemDone\" />\n\t\t\t</span>\n\t\t</button>\n\t</li>\n</template>\n\n<script>\nimport NcInputConfirmCancel from '../NcAppNavigationItem/NcInputConfirmCancel.vue'\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\n\nexport default {\n\tname: 'NcAppNavigationNewItem',\n\n\tcomponents: {\n\t\tNcInputConfirmCancel,\n\t\tNcLoadingIcon,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The name of the element.\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 * 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 * 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 * 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\t},\n\n\temits: ['new-item'],\n\n\tdata() {\n\t\treturn {\n\t\t\tnewItemValue: '',\n\t\t\tnewItemActive: false,\n\t\t}\n\t},\n\n\tmethods: {\n\t\thandleNewItem() {\n\t\t\tif (!this.loading) {\n\t\t\t\tthis.newItemActive = true\n\t\t\t\tthis.$nextTick(() => {\n\t\t\t\t\tthis.$refs.newItemInput.focusInput()\n\t\t\t\t})\n\t\t\t}\n\t\t},\n\n\t\tcancelNewItem() {\n\t\t\tthis.newItemActive = false\n\t\t},\n\n\t\thandleNewItemDone() {\n\t\t\tthis.$emit('new-item', this.newItemValue)\n\t\t\tthis.newItemValue = ''\n\t\t\tthis.newItemActive = false\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n@use '../../assets/NcAppNavigationItem.scss';\n\n.app-navigation-new-item__name {\n\toverflow: hidden;\n\tmax-width: 100%;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n\tpadding-inline-start: 7px;\n\tfont-size: 14px;\n}\n\n.newItemContainer {\n\twidth: calc(100% - var(--default-clickable-area));\n\tmargin: auto;\n}\n</style>\n"],"names":["NcInputConfirmCancel","NcLoadingIcon"],"mappings":";;;;AAqFA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,sBAAAA,qBAAAA;AAAAA,IACA,eAAAC;AAAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;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,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,EACA;AAAA,EAEA,OAAA,CAAA,UAAA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,cAAA;AAAA,MACA,eAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,gBAAA;AACA,UAAA,CAAA,KAAA,SAAA;AACA,aAAA,gBAAA;AACA,aAAA,UAAA,MAAA;AACA,eAAA,MAAA,aAAA,WAAA;AAAA,QACA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,WAAA,gBAAA;AAAA,IACA;AAAA,IAEA,oBAAA;AACA,WAAA,MAAA,YAAA,KAAA,YAAA;AACA,WAAA,eAAA;AACA,WAAA,gBAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcAppNavigationNewItem-BsnZWCLW.mjs → NcAppNavigationNewItem-DUNLtTs8.mjs}

@@ -1,5 +1,5 @@
-import '../assets/NcAppNavigationNewItem-Cjbn5XkO.css';
-import { N as NcInputConfirmCancel } from "./NcInputConfirmCancel-C8WnMK2V.mjs";
+import '../assets/NcAppNavigationNewItem-CYSjj3pD.css';
+import { N as NcInputConfirmCancel } from "./NcInputConfirmCancel-CtdWwDCo.mjs";
 import NcLoadingIcon from "../Components/NcLoadingIcon.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
 const _sfc_main = {
@@ -88,10 +88,10 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "2c7e56d1"
+  "258871fd"
 );
 const NcAppNavigationNewItem = __component__.exports;
 export {
   NcAppNavigationNewItem as N
 };
-//# sourceMappingURL=NcAppNavigationNewItem-BsnZWCLW.mjs.map
+//# sourceMappingURL=NcAppNavigationNewItem-DUNLtTs8.mjs.map

package/dist/chunks/{NcAppNavigationNewItem-BsnZWCLW.mjs.map → NcAppNavigationNewItem-DUNLtTs8.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcAppNavigationNewItem-BsnZWCLW.mjs","sources":["../../src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Usage\n\n#### New Item element\n```vue\n\t<template>\n\t\t<NcAppNavigationNewItem name=\"New Item\" @new-item=\"function(value){alert(value)}\">\n\t\t\t<template #icon>\n\t\t\t\t<Plus :size=\"20\" />\n\t\t\t</template>\n\t\t</NcAppNavigationNewItem>\n\t</template>\n\t<script>\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tPlus,\n\t\t},\n\t}\n\t</script>\n```\n\n#### New Item element with a loading animation instead of the icon\n```vue\n\t<template>\n\t\t<NcAppNavigationNewItem name=\"New Item\" :loading=\"true\">\n\t\t\t<template #icon>\n\t\t\t\t<Plus :size=\"20\" />\n\t\t\t</template>\n\t\t</NcAppNavigationNewItem>\n\t</template>\n\t<script>\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tPlus,\n\t\t},\n\t}\n\t</script>\n```\n</docs>\n\n<template>\n\t<li\n\t\t:class=\"{\n\t\t\t'app-navigation-entry--newItemActive': newItemActive,\n\t\t}\"\n\t\tclass=\"app-navigation-entry\">\n\t\t<!-- New Item -->\n\t\t<button class=\"app-navigation-entry-button\" @click=\"handleNewItem\">\n\t\t\t<span\n\t\t\t\t:class=\"{ [icon]: !loading }\"\n\t\t\t\tclass=\"app-navigation-entry-icon\">\n\t\t\t\t<NcLoadingIcon v-if=\"loading\" />\n\t\t\t\t<slot v-else name=\"icon\" />\n\t\t\t</span>\n\n\t\t\t<span v-if=\"!newItemActive\" class=\"app-navigation-new-item__name\" :title=\"name\">\n\t\t\t\t{{ name }}\n\t\t\t</span>\n\n\t\t\t<!-- new Item input -->\n\t\t\t<span v-if=\"newItemActive\" class=\"newItemContainer\">\n\t\t\t\t<NcInputConfirmCancel\n\t\t\t\t\tref=\"newItemInput\"\n\t\t\t\t\tv-model=\"newItemValue\"\n\t\t\t\t\t:placeholder=\"editPlaceholder !== '' ? editPlaceholder : name\"\n\t\t\t\t\t@cancel=\"cancelNewItem\"\n\t\t\t\t\t@confirm=\"handleNewItemDone\" />\n\t\t\t</span>\n\t\t</button>\n\t</li>\n</template>\n\n<script>\nimport NcInputConfirmCancel from '../NcAppNavigationItem/NcInputConfirmCancel.vue'\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\n\nexport default {\n\tname: 'NcAppNavigationNewItem',\n\n\tcomponents: {\n\t\tNcInputConfirmCancel,\n\t\tNcLoadingIcon,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The name of the element.\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 * 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 * 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 * 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\t},\n\n\temits: ['new-item'],\n\n\tdata() {\n\t\treturn {\n\t\t\tnewItemValue: '',\n\t\t\tnewItemActive: false,\n\t\t}\n\t},\n\n\tmethods: {\n\t\thandleNewItem() {\n\t\t\tif (!this.loading) {\n\t\t\t\tthis.newItemActive = true\n\t\t\t\tthis.$nextTick(() => {\n\t\t\t\t\tthis.$refs.newItemInput.focusInput()\n\t\t\t\t})\n\t\t\t}\n\t\t},\n\n\t\tcancelNewItem() {\n\t\t\tthis.newItemActive = false\n\t\t},\n\n\t\thandleNewItemDone() {\n\t\t\tthis.$emit('new-item', this.newItemValue)\n\t\t\tthis.newItemValue = ''\n\t\t\tthis.newItemActive = false\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n@import '../../assets/NcAppNavigationItem';\n\n.app-navigation-new-item__name {\n\toverflow: hidden;\n\tmax-width: 100%;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n\tpadding-inline-start: 7px;\n\tfont-size: 14px;\n}\n\n.newItemContainer {\n\twidth: calc(100% - var(--default-clickable-area));\n\tmargin: auto;\n}\n</style>\n"],"names":[],"mappings":";;;AAqFA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;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,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,EACA;AAAA,EAEA,OAAA,CAAA,UAAA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,cAAA;AAAA,MACA,eAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,gBAAA;AACA,UAAA,CAAA,KAAA,SAAA;AACA,aAAA,gBAAA;AACA,aAAA,UAAA,MAAA;AACA,eAAA,MAAA,aAAA,WAAA;AAAA,QACA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,WAAA,gBAAA;AAAA,IACA;AAAA,IAEA,oBAAA;AACA,WAAA,MAAA,YAAA,KAAA,YAAA;AACA,WAAA,eAAA;AACA,WAAA,gBAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcAppNavigationNewItem-DUNLtTs8.mjs","sources":["../../src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Usage\n\n#### New Item element\n```vue\n\t<template>\n\t\t<NcAppNavigationNewItem name=\"New Item\" @new-item=\"function(value){alert(value)}\">\n\t\t\t<template #icon>\n\t\t\t\t<Plus :size=\"20\" />\n\t\t\t</template>\n\t\t</NcAppNavigationNewItem>\n\t</template>\n\t<script>\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tPlus,\n\t\t},\n\t}\n\t</script>\n```\n\n#### New Item element with a loading animation instead of the icon\n```vue\n\t<template>\n\t\t<NcAppNavigationNewItem name=\"New Item\" :loading=\"true\">\n\t\t\t<template #icon>\n\t\t\t\t<Plus :size=\"20\" />\n\t\t\t</template>\n\t\t</NcAppNavigationNewItem>\n\t</template>\n\t<script>\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tPlus,\n\t\t},\n\t}\n\t</script>\n```\n</docs>\n\n<template>\n\t<li\n\t\t:class=\"{\n\t\t\t'app-navigation-entry--newItemActive': newItemActive,\n\t\t}\"\n\t\tclass=\"app-navigation-entry\">\n\t\t<!-- New Item -->\n\t\t<button class=\"app-navigation-entry-button\" @click=\"handleNewItem\">\n\t\t\t<span\n\t\t\t\t:class=\"{ [icon]: !loading }\"\n\t\t\t\tclass=\"app-navigation-entry-icon\">\n\t\t\t\t<NcLoadingIcon v-if=\"loading\" />\n\t\t\t\t<slot v-else name=\"icon\" />\n\t\t\t</span>\n\n\t\t\t<span v-if=\"!newItemActive\" class=\"app-navigation-new-item__name\" :title=\"name\">\n\t\t\t\t{{ name }}\n\t\t\t</span>\n\n\t\t\t<!-- new Item input -->\n\t\t\t<span v-if=\"newItemActive\" class=\"newItemContainer\">\n\t\t\t\t<NcInputConfirmCancel\n\t\t\t\t\tref=\"newItemInput\"\n\t\t\t\t\tv-model=\"newItemValue\"\n\t\t\t\t\t:placeholder=\"editPlaceholder !== '' ? editPlaceholder : name\"\n\t\t\t\t\t@cancel=\"cancelNewItem\"\n\t\t\t\t\t@confirm=\"handleNewItemDone\" />\n\t\t\t</span>\n\t\t</button>\n\t</li>\n</template>\n\n<script>\nimport NcInputConfirmCancel from '../NcAppNavigationItem/NcInputConfirmCancel.vue'\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\n\nexport default {\n\tname: 'NcAppNavigationNewItem',\n\n\tcomponents: {\n\t\tNcInputConfirmCancel,\n\t\tNcLoadingIcon,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The name of the element.\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 * 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 * 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 * 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\t},\n\n\temits: ['new-item'],\n\n\tdata() {\n\t\treturn {\n\t\t\tnewItemValue: '',\n\t\t\tnewItemActive: false,\n\t\t}\n\t},\n\n\tmethods: {\n\t\thandleNewItem() {\n\t\t\tif (!this.loading) {\n\t\t\t\tthis.newItemActive = true\n\t\t\t\tthis.$nextTick(() => {\n\t\t\t\t\tthis.$refs.newItemInput.focusInput()\n\t\t\t\t})\n\t\t\t}\n\t\t},\n\n\t\tcancelNewItem() {\n\t\t\tthis.newItemActive = false\n\t\t},\n\n\t\thandleNewItemDone() {\n\t\t\tthis.$emit('new-item', this.newItemValue)\n\t\t\tthis.newItemValue = ''\n\t\t\tthis.newItemActive = false\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n@use '../../assets/NcAppNavigationItem.scss';\n\n.app-navigation-new-item__name {\n\toverflow: hidden;\n\tmax-width: 100%;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n\tpadding-inline-start: 7px;\n\tfont-size: 14px;\n}\n\n.newItemContainer {\n\twidth: calc(100% - var(--default-clickable-area));\n\tmargin: auto;\n}\n</style>\n"],"names":[],"mappings":";;;AAqFA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;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,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,EACA;AAAA,EAEA,OAAA,CAAA,UAAA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,cAAA;AAAA,MACA,eAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,gBAAA;AACA,UAAA,CAAA,KAAA,SAAA;AACA,aAAA,gBAAA;AACA,aAAA,UAAA,MAAA;AACA,eAAA,MAAA,aAAA,WAAA;AAAA,QACA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,WAAA,gBAAA;AAAA,IACA;AAAA,IAEA,oBAAA;AACA,WAAA,MAAA,YAAA,KAAA,YAAA;AACA,WAAA,eAAA;AACA,WAAA,gBAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcAppNavigationSearch-BlG1xMok.cjs → NcAppNavigationSearch-BC3LfUdL.cjs}

@@ -3,10 +3,10 @@ require('../assets/NcAppNavigationSearch-o97SOfOb.css');
 const core = require("@vueuse/core");
 const Vue = require("vue");
 const Close = require("./Close-CqmXxEKi.cjs");
-const NcInputField = require("./NcInputField-LBv3nCrt.cjs");
-const _l10n = require("./_l10n-9b4TMo5Q.cjs");
+const NcInputField = require("./NcInputField-DAllLk3X.cjs");
+const _l10n = require("./_l10n-B4clLGwo.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
-_l10n.register(_l10n.t15, _l10n.t42);
+_l10n.register(_l10n.t15, _l10n.t44);
 const __default__ = {
   name: "NcAppNavigationSearch",
   model: {
@@ -67,21 +67,17 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
       emit("update:modelValue", "");
       if (hasActions()) {
         showActions.value = true;
-        Vue.nextTick(() => {
-          var _a;
-          return (_a = actionsContainer.value.querySelector("button")) == null ? void 0 : _a.focus();
-        });
+        Vue.nextTick(() => actionsContainer.value.querySelector("button")?.focus());
       }
     }
     return { __sfc: true, emit, slots, inputElement, inputHasFocus, transitionTimeout, actionsContainer, hasActions, showActions, timeoutId, hideActions, onCloseSearch, IconClose: Close.Close, NcInputField: NcInputField.NcInputField, t: _l10n.t };
   }
 });
 var _sfc_render = function render() {
-  var _a;
   var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
   return _c("div", { staticClass: "app-navigation-search", class: {
     "app-navigation-search--has-actions": _setup.hasActions()
-  } }, [_c(_setup.NcInputField, { ref: "inputElement", staticClass: "app-navigation-search__input", attrs: { "aria-label": _vm.label, "label-outside": "", "placeholder": (_a = _vm.placeholder) != null ? _a : _vm.label, "show-trailing-button": "", "trailing-button-label": _setup.t("Clear search"), "type": "search", "value": _vm.modelValue }, on: { "update:value": function($event) {
+  } }, [_c(_setup.NcInputField, { ref: "inputElement", staticClass: "app-navigation-search__input", attrs: { "aria-label": _vm.label, "label-outside": "", "placeholder": _vm.placeholder ?? _vm.label, "show-trailing-button": "", "trailing-button-label": _setup.t("Clear search"), "type": "search", "value": _vm.modelValue }, on: { "update:value": function($event) {
     return _vm.$emit("update:modelValue", $event);
   }, "trailing-button-click": _setup.onCloseSearch }, scopedSlots: _vm._u([{ key: "trailing-button-icon", fn: function() {
     return [_c(_setup.IconClose, { attrs: { "size": 20 } })];
@@ -101,4 +97,4 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
 );
 const NcAppNavigationSearch = __component__.exports;
 exports.NcAppNavigationSearch = NcAppNavigationSearch;
-//# sourceMappingURL=NcAppNavigationSearch-BlG1xMok.cjs.map
+//# sourceMappingURL=NcAppNavigationSearch-BC3LfUdL.cjs.map

package/dist/chunks/{NcAppNavigationSearch-BlG1xMok.cjs.map → NcAppNavigationSearch-BC3LfUdL.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcAppNavigationSearch-BlG1xMok.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<IconFilter :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<IconAccount :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<IconCalendarAccount :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<IconSearchGlobal :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<IconStar :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<IconStar :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 IconAccount from 'vue-material-design-icons/Account.vue'\nimport IconCalendarAccount from 'vue-material-design-icons/CalendarAccount.vue'\nimport IconFilter from 'vue-material-design-icons/Filter.vue'\nimport IconSearchGlobal from 'vue-material-design-icons/CloudSearch.vue'\nimport IconStar from 'vue-material-design-icons/Star.vue'\n\nconst exampleItem = ['Mary', 'Patricia', 'James', 'Michael']\n\nexport default {\n\tcomponents: {\n\t\tIconAccount,\n\t\tIconCalendarAccount,\n\t\tIconFilter,\n\t\tIconSearchGlobal,\n\t\tIconStar,\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,MAAA;;AAAM,wCAAiB,MAAM,cAAc,QAAQ,MAA7C,mBAAgD;AAAA,SAAO;AAAA,MACvE;AAAA,IACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcAppNavigationSearch-BC3LfUdL.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<IconFilter :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<IconAccount :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<IconCalendarAccount :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<IconSearchGlobal :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<IconStar :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<IconStar :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 IconAccount from 'vue-material-design-icons/Account.vue'\nimport IconCalendarAccount from 'vue-material-design-icons/CalendarAccount.vue'\nimport IconFilter from 'vue-material-design-icons/Filter.vue'\nimport IconSearchGlobal from 'vue-material-design-icons/CloudSearch.vue'\nimport IconStar from 'vue-material-design-icons/Star.vue'\n\nconst exampleItem = ['Mary', 'Patricia', 'James', 'Michael']\n\nexport default {\n\tcomponents: {\n\t\tIconAccount,\n\t\tIconCalendarAccount,\n\t\tIconFilter,\n\t\tIconSearchGlobal,\n\t\tIconStar,\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/{NcAppNavigationSearch-DCMN2cWp.mjs → NcAppNavigationSearch-Ci8jz_C2.mjs}

@@ -2,10 +2,10 @@ import '../assets/NcAppNavigationSearch-o97SOfOb.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-1ujONIvp.mjs";
-import { r as register, o as t42, p as t15, a as t } from "./_l10n-DSLCwJSN.mjs";
+import { N as NcInputField } from "./NcInputField-DUtDY_1I.mjs";
+import { r as register, o as t44, p as t15, a as t } from "./_l10n-BmKQgz1z.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
-register(t15, t42);
+register(t15, t44);
 const __default__ = {
   name: "NcAppNavigationSearch",
   model: {
@@ -66,21 +66,17 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
       emit("update:modelValue", "");
       if (hasActions()) {
         showActions.value = true;
-        nextTick(() => {
-          var _a;
-          return (_a = actionsContainer.value.querySelector("button")) == null ? void 0 : _a.focus();
-        });
+        nextTick(() => actionsContainer.value.querySelector("button")?.focus());
       }
     }
     return { __sfc: true, emit, slots, inputElement, inputHasFocus, transitionTimeout, actionsContainer, hasActions, showActions, timeoutId, hideActions, onCloseSearch, IconClose: Close, NcInputField, t };
   }
 });
 var _sfc_render = function render() {
-  var _a;
   var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
   return _c("div", { staticClass: "app-navigation-search", class: {
     "app-navigation-search--has-actions": _setup.hasActions()
-  } }, [_c(_setup.NcInputField, { ref: "inputElement", staticClass: "app-navigation-search__input", attrs: { "aria-label": _vm.label, "label-outside": "", "placeholder": (_a = _vm.placeholder) != null ? _a : _vm.label, "show-trailing-button": "", "trailing-button-label": _setup.t("Clear search"), "type": "search", "value": _vm.modelValue }, on: { "update:value": function($event) {
+  } }, [_c(_setup.NcInputField, { ref: "inputElement", staticClass: "app-navigation-search__input", attrs: { "aria-label": _vm.label, "label-outside": "", "placeholder": _vm.placeholder ?? _vm.label, "show-trailing-button": "", "trailing-button-label": _setup.t("Clear search"), "type": "search", "value": _vm.modelValue }, on: { "update:value": function($event) {
     return _vm.$emit("update:modelValue", $event);
   }, "trailing-button-click": _setup.onCloseSearch }, scopedSlots: _vm._u([{ key: "trailing-button-icon", fn: function() {
     return [_c(_setup.IconClose, { attrs: { "size": 20 } })];
@@ -102,4 +98,4 @@ const NcAppNavigationSearch = __component__.exports;
 export {
   NcAppNavigationSearch as N
 };
-//# sourceMappingURL=NcAppNavigationSearch-DCMN2cWp.mjs.map
+//# sourceMappingURL=NcAppNavigationSearch-Ci8jz_C2.mjs.map

package/dist/chunks/{NcAppNavigationSearch-DCMN2cWp.mjs.map → NcAppNavigationSearch-Ci8jz_C2.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcAppNavigationSearch-DCMN2cWp.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<IconFilter :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<IconAccount :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<IconCalendarAccount :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<IconSearchGlobal :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<IconStar :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<IconStar :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 IconAccount from 'vue-material-design-icons/Account.vue'\nimport IconCalendarAccount from 'vue-material-design-icons/CalendarAccount.vue'\nimport IconFilter from 'vue-material-design-icons/Filter.vue'\nimport IconSearchGlobal from 'vue-material-design-icons/CloudSearch.vue'\nimport IconStar from 'vue-material-design-icons/Star.vue'\n\nconst exampleItem = ['Mary', 'Patricia', 'James', 'Michael']\n\nexport default {\n\tcomponents: {\n\t\tIconAccount,\n\t\tIconCalendarAccount,\n\t\tIconFilter,\n\t\tIconSearchGlobal,\n\t\tIconStar,\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,MAAA;;AAAM,wCAAiB,MAAM,cAAc,QAAQ,MAA7C,mBAAgD;AAAA,SAAO;AAAA,MACvE;AAAA,IACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcAppNavigationSearch-Ci8jz_C2.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<IconFilter :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<IconAccount :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<IconCalendarAccount :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<IconSearchGlobal :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<IconStar :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<IconStar :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 IconAccount from 'vue-material-design-icons/Account.vue'\nimport IconCalendarAccount from 'vue-material-design-icons/CalendarAccount.vue'\nimport IconFilter from 'vue-material-design-icons/Filter.vue'\nimport IconSearchGlobal from 'vue-material-design-icons/CloudSearch.vue'\nimport IconStar from 'vue-material-design-icons/Star.vue'\n\nconst exampleItem = ['Mary', 'Patricia', 'James', 'Michael']\n\nexport default {\n\tcomponents: {\n\t\tIconAccount,\n\t\tIconCalendarAccount,\n\t\tIconFilter,\n\t\tIconSearchGlobal,\n\t\tIconStar,\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/{NcAppNavigationSettings-n8OaxTbE.mjs → NcAppNavigationSettings-B29zrNPr.mjs}

@@ -1,9 +1,10 @@
 import '../assets/NcMentionBubble-CaztX9Pv.css';
-import '../assets/NcAppNavigationSettings-1YRzh-xl.css';
-import { f as mdiCogOutline, g as mdiCog } from "./mdi-CKSXwCsV.mjs";
+import '../assets/NcAppNavigationSettings-2Wh1E3Hq.css';
+import { h as mdiCogOutline, i as mdiCog } from "./mdi-C_j0YT8c.mjs";
 import { vOnClickOutside } from "@vueuse/components";
-import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-BCVwmZN2.mjs";
-import { r as register, n as t46, a as t } from "./_l10n-DSLCwJSN.mjs";
+import { N as NcButton } from "./NcButton-DUZTtFhr.mjs";
+import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-BreCg8pX.mjs";
+import { r as register, n as t48, a as t } from "./_l10n-BmKQgz1z.mjs";
 import clickOutsideOptions from "../Mixins/clickOutsideOptions.mjs";
 import "../Composables/useIsFullscreen.mjs";
 import "../Composables/useIsMobile.mjs";
@@ -19,13 +20,15 @@ import "@nextcloud/auth";
 import "@nextcloud/axios";
 import "@nextcloud/capabilities";
 import "./logger-D3RVzcfQ.mjs";
-import { i as isLegacy32 } from "./legacy-NU_qxPFK.mjs";
-register(t46);
+import { G as GenRandomId } from "./GenRandomId-F5ebeBB_.mjs";
+import { i as isLegacy32 } from "./legacy-MK4GvP26.mjs";
+register(t48);
 const _sfc_main = {
   directives: {
     ClickOutside: vOnClickOutside
   },
   components: {
+    NcButton,
     NcIconSvgWrapper
   },
   mixins: [
@@ -44,7 +47,9 @@ const _sfc_main = {
     }
   },
   setup() {
+    const contentId = GenRandomId();
     return {
+      contentId,
       isLegacy32,
       mdiCog,
       mdiCogOutline
@@ -64,9 +69,6 @@ const _sfc_main = {
     }
   },
   methods: {
-    toggleMenu() {
-      this.open = !this.open;
-    },
     closeMenu() {
       this.open = false;
     }
@@ -74,7 +76,11 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("div", { directives: [{ name: "click-outside", rawName: "v-click-outside", value: _vm.clickOutsideConfig, expression: "clickOutsideConfig" }], class: { open: _vm.open }, attrs: { "id": "app-settings" } }, [_c("div", { attrs: { "id": "app-settings__header" } }, [_c("button", { staticClass: "settings-button", attrs: { "type": "button", "aria-expanded": _vm.open ? "true" : "false", "aria-controls": "app-settings__content" }, on: { "click": _vm.toggleMenu } }, [_c("NcIconSvgWrapper", { staticClass: "settings-button__icon", attrs: { "path": _vm.isLegacy32 ? _vm.mdiCog : _vm.mdiCogOutline } }), _c("span", { staticClass: "settings-button__label" }, [_vm._v(_vm._s(_vm.name))])], 1)]), _c("Transition", { attrs: { "name": "slide-up" } }, [_c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.open, expression: "open" }], attrs: { "id": "app-settings__content" } }, [_vm._t("default")], 2)])], 1);
+  return _c("div", { directives: [{ name: "click-outside", rawName: "v-click-outside", value: _vm.clickOutsideConfig, expression: "clickOutsideConfig" }], class: { open: _vm.open }, attrs: { "id": "app-settings" } }, [_c("div", { attrs: { "id": "app-settings__header" } }, [_c("NcButton", { staticClass: "settings-button", attrs: { "aria-controls": _vm.contentId, "aria-expanded": _vm.open ? "true" : "false", "alignment": "start", "variant": "tertiary", "wide": "" }, on: { "click": function($event) {
+    _vm.open = !_vm.open;
+  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c("NcIconSvgWrapper", { staticClass: "settings-button__icon", attrs: { "path": _vm.isLegacy32 ? _vm.mdiCog : _vm.mdiCogOutline } })];
+  }, proxy: true }]) }, [_vm._v(" " + _vm._s(_vm.name) + " ")])], 1), _c("Transition", { attrs: { "name": "slide-up" } }, [_c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.open, expression: "open" }], attrs: { "id": _vm.contentId } }, [_vm._t("default")], 2)])], 1);
 };
 var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ normalizeComponent(
@@ -83,10 +89,10 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "e9e1bc3b"
+  "8fb21c8b"
 );
 const NcAppNavigationSettings = __component__.exports;
 export {
   NcAppNavigationSettings as N
 };
-//# sourceMappingURL=NcAppNavigationSettings-n8OaxTbE.mjs.map
+//# sourceMappingURL=NcAppNavigationSettings-B29zrNPr.mjs.map

package/dist/chunks/NcAppNavigationSettings-B29zrNPr.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppNavigationSettings-B29zrNPr.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;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcAppNavigationSettings-DlIDzhxh.cjs → NcAppNavigationSettings-Dt15jIbU.cjs}

@@ -1,10 +1,11 @@
 require('../assets/NcMentionBubble-CaztX9Pv.css');
-require('../assets/NcAppNavigationSettings-1YRzh-xl.css');
+require('../assets/NcAppNavigationSettings-2Wh1E3Hq.css');
 "use strict";
-const mdi = require("./mdi-Nhb6SBw8.cjs");
+const mdi = require("./mdi-CVXTs58m.cjs");
 const components = require("@vueuse/components");
-const NcIconSvgWrapper = require("./NcIconSvgWrapper-DoVPfeNg.cjs");
-const _l10n = require("./_l10n-9b4TMo5Q.cjs");
+const NcButton = require("./NcButton-CJBZrdiL.cjs");
+const NcIconSvgWrapper = require("./NcIconSvgWrapper-D-aKMbf3.cjs");
+const _l10n = require("./_l10n-B4clLGwo.cjs");
 const Mixins_clickOutsideOptions = require("../Mixins/clickOutsideOptions.cjs");
 require("../Composables/useIsFullscreen.cjs");
 require("../Composables/useIsMobile.cjs");
@@ -20,13 +21,15 @@ require("@nextcloud/auth");
 require("@nextcloud/axios");
 require("@nextcloud/capabilities");
 require("./logger-3HuiEIF6.cjs");
-const legacy = require("./legacy-DUgfmdiS.cjs");
-_l10n.register(_l10n.t46);
+const GenRandomId = require("./GenRandomId-D7iOvpZS.cjs");
+const legacy = require("./legacy-KBXhWdRy.cjs");
+_l10n.register(_l10n.t48);
 const _sfc_main = {
   directives: {
     ClickOutside: components.vOnClickOutside
   },
   components: {
+    NcButton: NcButton.NcButton,
     NcIconSvgWrapper: NcIconSvgWrapper.NcIconSvgWrapper
   },
   mixins: [
@@ -45,7 +48,9 @@ const _sfc_main = {
     }
   },
   setup() {
+    const contentId = GenRandomId.GenRandomId();
     return {
+      contentId,
       isLegacy32: legacy.isLegacy32,
       mdiCog: mdi.mdiCog,
       mdiCogOutline: mdi.mdiCogOutline
@@ -65,9 +70,6 @@ const _sfc_main = {
     }
   },
   methods: {
-    toggleMenu() {
-      this.open = !this.open;
-    },
     closeMenu() {
       this.open = false;
     }
@@ -75,7 +77,11 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("div", { directives: [{ name: "click-outside", rawName: "v-click-outside", value: _vm.clickOutsideConfig, expression: "clickOutsideConfig" }], class: { open: _vm.open }, attrs: { "id": "app-settings" } }, [_c("div", { attrs: { "id": "app-settings__header" } }, [_c("button", { staticClass: "settings-button", attrs: { "type": "button", "aria-expanded": _vm.open ? "true" : "false", "aria-controls": "app-settings__content" }, on: { "click": _vm.toggleMenu } }, [_c("NcIconSvgWrapper", { staticClass: "settings-button__icon", attrs: { "path": _vm.isLegacy32 ? _vm.mdiCog : _vm.mdiCogOutline } }), _c("span", { staticClass: "settings-button__label" }, [_vm._v(_vm._s(_vm.name))])], 1)]), _c("Transition", { attrs: { "name": "slide-up" } }, [_c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.open, expression: "open" }], attrs: { "id": "app-settings__content" } }, [_vm._t("default")], 2)])], 1);
+  return _c("div", { directives: [{ name: "click-outside", rawName: "v-click-outside", value: _vm.clickOutsideConfig, expression: "clickOutsideConfig" }], class: { open: _vm.open }, attrs: { "id": "app-settings" } }, [_c("div", { attrs: { "id": "app-settings__header" } }, [_c("NcButton", { staticClass: "settings-button", attrs: { "aria-controls": _vm.contentId, "aria-expanded": _vm.open ? "true" : "false", "alignment": "start", "variant": "tertiary", "wide": "" }, on: { "click": function($event) {
+    _vm.open = !_vm.open;
+  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c("NcIconSvgWrapper", { staticClass: "settings-button__icon", attrs: { "path": _vm.isLegacy32 ? _vm.mdiCog : _vm.mdiCogOutline } })];
+  }, proxy: true }]) }, [_vm._v(" " + _vm._s(_vm.name) + " ")])], 1), _c("Transition", { attrs: { "name": "slide-up" } }, [_c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.open, expression: "open" }], attrs: { "id": _vm.contentId } }, [_vm._t("default")], 2)])], 1);
 };
 var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
@@ -84,8 +90,8 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "e9e1bc3b"
+  "8fb21c8b"
 );
 const NcAppNavigationSettings = __component__.exports;
 exports.NcAppNavigationSettings = NcAppNavigationSettings;
-//# sourceMappingURL=NcAppNavigationSettings-DlIDzhxh.cjs.map
+//# sourceMappingURL=NcAppNavigationSettings-Dt15jIbU.cjs.map

package/dist/chunks/NcAppNavigationSettings-Dt15jIbU.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppNavigationSettings-Dt15jIbU.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;;;;;;;;;;;;;;;;;;;;"}