@nextcloud/vue 8.32.0 → 8.33.0

package/dist/Components/NcAppNavigationToggle.mjs

@@ -1,4 +1,4 @@
-import { N as NcAppNavigationToggle } from "../chunks/NcAppNavigationToggle-ClYKr8Zn.mjs";
+import { N as NcAppNavigationToggle } from "../chunks/NcAppNavigationToggle-DlnxjlcH.mjs";
 export {
   NcAppNavigationToggle as NcAppNavigationSpacer,
   NcAppNavigationToggle as default

package/dist/Components/NcAppSettingsDialog.cjs

@@ -1,4 +1,4 @@
 "use strict";
-const NcAppSettingsDialog = require("../chunks/NcAppSettingsDialog-R6Y-tl6d.cjs");
+const NcAppSettingsDialog = require("../chunks/NcAppSettingsDialog--RlMIfbo.cjs");
 module.exports = NcAppSettingsDialog.NcAppSettingsDialog;
 //# sourceMappingURL=NcAppSettingsDialog.cjs.map

package/dist/Components/NcAppSettingsDialog.mjs

@@ -1,4 +1,4 @@
-import { N } from "../chunks/NcAppSettingsDialog-Cpjr8Tca.mjs";
+import { N } from "../chunks/NcAppSettingsDialog-8YaW7ud3.mjs";
 export {
   N as default
 };

package/dist/Components/NcAppSettingsSection.cjs

@@ -1,4 +1,4 @@
 "use strict";
-const NcAppSettingsSection = require("../chunks/NcAppSettingsSection-CTqViPnP.cjs");
+const NcAppSettingsSection = require("../chunks/NcAppSettingsSection-OPWPqi2Y.cjs");
 module.exports = NcAppSettingsSection.NcAppSettingsSection;
 //# sourceMappingURL=NcAppSettingsSection.cjs.map

package/dist/Components/NcAppSettingsSection.mjs

@@ -1,4 +1,4 @@
-import { N } from "../chunks/NcAppSettingsSection-BNVlt4g0.mjs";
+import { N } from "../chunks/NcAppSettingsSection-DVrBPuLD.mjs";
 export {
   N as default
 };

package/dist/Components/NcAppSettingsSectionShortcuts.cjs

@@ -0,0 +1,4 @@
+"use strict";
+const NcAppSettingsSectionShortcuts = require("../chunks/NcAppSettingsSectionShortcuts-CBYgfYGz.cjs");
+module.exports = NcAppSettingsSectionShortcuts.NcAppSettingsSectionShortcuts;
+//# sourceMappingURL=NcAppSettingsSectionShortcuts.cjs.map

package/dist/Components/NcAppSettingsSectionShortcuts.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppSettingsSectionShortcuts.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/Components/NcAppSettingsSectionShortcuts.mjs

@@ -0,0 +1,5 @@
+import { N } from "../chunks/NcAppSettingsSectionShortcuts-CdP-4ktS.mjs";
+export {
+  N as default
+};
+//# sourceMappingURL=NcAppSettingsSectionShortcuts.mjs.map

package/dist/Components/NcAppSettingsSectionShortcuts.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppSettingsSectionShortcuts.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/Components/NcAppSidebar.cjs

@@ -1,4 +1,4 @@
 "use strict";
-const NcAppSidebar = require("../chunks/NcAppSidebar-Ddt82bsA.cjs");
+const NcAppSidebar = require("../chunks/NcAppSidebar-DLb6ALHL.cjs");
 module.exports = NcAppSidebar.NcAppSidebar;
 //# sourceMappingURL=NcAppSidebar.cjs.map

package/dist/Components/NcAppSidebar.mjs

@@ -1,4 +1,4 @@
-import { N } from "../chunks/NcAppSidebar-CVcOP4bk.mjs";
+import { N } from "../chunks/NcAppSidebar-f7tuofzM.mjs";
 export {
   N as default
 };

package/dist/Components/NcAppSidebarTab.cjs

@@ -68,14 +68,13 @@ const _sfc_main = {
      * @return {import('vue').VNode[]}
      */
     renderIcon() {
-      var _a, _b;
-      return (_b = (_a = this.$scopedSlots).icon) == null ? void 0 : _b.call(_a);
+      return this.$scopedSlots.icon?.();
     }
   }
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("section", { staticClass: "app-sidebar__tab", class: { "app-sidebar__tab--active": _vm.isActive }, attrs: { "id": "tab-".concat(_vm.id), "aria-hidden": !_vm.isActive, "aria-label": _vm.isTablistShown() ? void 0 : _vm.name, "aria-labelledby": _vm.isTablistShown() ? "tab-button-".concat(_vm.id) : void 0, "tabindex": _vm.isTablistShown() ? 0 : -1, "role": _vm.isTablistShown() ? "tabpanel" : void 0 }, on: { "scroll": _vm.onScroll } }, [_c("h3", { staticClass: "hidden-visually" }, [_vm._v(" " + _vm._s(_vm.name) + " ")]), _vm._t("default")], 2);
+  return _c("section", { staticClass: "app-sidebar__tab", class: { "app-sidebar__tab--active": _vm.isActive }, attrs: { "id": `tab-${_vm.id}`, "aria-hidden": !_vm.isActive, "aria-label": _vm.isTablistShown() ? void 0 : _vm.name, "aria-labelledby": _vm.isTablistShown() ? `tab-button-${_vm.id}` : void 0, "tabindex": _vm.isTablistShown() ? 0 : -1, "role": _vm.isTablistShown() ? "tabpanel" : void 0 }, on: { "scroll": _vm.onScroll } }, [_c("h3", { staticClass: "hidden-visually" }, [_vm._v(" " + _vm._s(_vm.name) + " ")]), _vm._t("default")], 2);
 };
 var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(

package/dist/Components/NcAppSidebarTab.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcAppSidebarTab.cjs","sources":["../../src/components/NcAppSidebarTab/NcAppSidebarTab.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<!-- Follows the tab aria guidelines\n\thttps://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html -->\n\n<template>\n\t<section\n\t\t:id=\"`tab-${id}`\"\n\t\t:class=\"{ 'app-sidebar__tab--active': isActive }\"\n\t\t:aria-hidden=\"!isActive\"\n\t\t:aria-label=\"isTablistShown() ? undefined : name\"\n\t\t:aria-labelledby=\"isTablistShown() ? `tab-button-${id}` : undefined\"\n\t\tclass=\"app-sidebar__tab\"\n\t\t:tabindex=\"isTablistShown() ? 0 : -1\"\n\t\t:role=\"isTablistShown() ? 'tabpanel' : undefined\"\n\t\t@scroll=\"onScroll\">\n\t\t<h3 class=\"hidden-visually\">\n\t\t\t{{ name }}\n\t\t</h3>\n\t\t<!-- @slot Tab panel content -->\n\t\t<slot />\n\t</section>\n</template>\n\n<script>\nexport default {\n\tname: 'NcAppSidebarTab',\n\n\tinject: ['registerTab', 'unregisterTab', 'getActiveTab', 'isTablistShown'],\n\n\tprops: {\n\t\t/**\n\t\t * Unique id of the sidebar tab\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Tab name in navigation\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 * Tab icon's html class in navigation. Used if #icon slot is not provided\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 * Tab order in navigation. If not provided, name is used.\n\t\t */\n\t\torder: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t},\n\t},\n\n\temits: [\n\t\t'bottom-reached',\n\t\t'scroll',\n\t],\n\n\texpose: ['id', 'name', 'icon', 'order', 'renderIcon'],\n\n\tcomputed: {\n\t\t/**\n\t\t * Is the current tab an active tab, that should be shown?\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tisActive() {\n\t\t\treturn this.getActiveTab() === this.id\n\t\t},\n\t},\n\n\tcreated() {\n\t\t// As the tab is created - register it in the tabs component\n\t\t// It's better to provide computed tab object, not component instance as it easy\n\t\tthis.registerTab(this)\n\t},\n\n\tbeforeDestroy() {\n\t\t// Unregister the tab from tabs\n\t\tthis.unregisterTab(this.id)\n\t},\n\n\tmethods: {\n\t\tonScroll(event) {\n\t\t\t// Are we scrolled to the very bottom ?\n\t\t\tif (this.$el.scrollHeight - this.$el.scrollTop === this.$el.clientHeight) {\n\t\t\t\t/**\n\t\t\t\t * Bottom scroll is reached\n\t\t\t\t *\n\t\t\t\t * @property {Event} event Native scroll event\n\t\t\t\t */\n\t\t\t\tthis.$emit('bottom-reached', event)\n\t\t\t}\n\t\t\t/**\n\t\t\t * @property {Event} event Native scroll event\n\t\t\t */\n\t\t\tthis.$emit('scroll', event)\n\t\t},\n\n\t\t/**\n\t\t * Render tab's icon slot if any\n\t\t *\n\t\t * @return {import('vue').VNode[]}\n\t\t */\n\t\trenderIcon() {\n\t\t\treturn this.$scopedSlots.icon?.()\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.app-sidebar__tab {\n\tdisplay: none;\n\tpadding: 10px;\n\tmin-height: 100%; // fill available height\n\tmax-height: 100%; // scroll inside\n\theight: 100%;\n\toverflow: auto;\n\n\t&:focus {\n\t\tborder-color: var(--color-primary-element);\n\t\tbox-shadow: 0 0 0.2em var(--color-primary-element);\n\t\toutline: 0;\n\t}\n\n\t&--active {\n\t\tdisplay: block;\n\t}\n}\n</style>\n"],"names":[],"mappings":";;AA4BA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,QAAA,CAAA,eAAA,iBAAA,gBAAA,gBAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;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,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA,CAAA,MAAA,QAAA,QAAA,SAAA,YAAA;AAAA,EAEA,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AACA,aAAA,KAAA,aAAA,MAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAGA,SAAA,YAAA,IAAA;AAAA,EACA;AAAA,EAEA,gBAAA;AAEA,SAAA,cAAA,KAAA,EAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,SAAA,OAAA;AAEA,UAAA,KAAA,IAAA,eAAA,KAAA,IAAA,cAAA,KAAA,IAAA,cAAA;AAMA,aAAA,MAAA,kBAAA,KAAA;AAAA,MACA;AAIA,WAAA,MAAA,UAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAA;;AACA,cAAA,gBAAA,cAAA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcAppSidebarTab.cjs","sources":["../../src/components/NcAppSidebarTab/NcAppSidebarTab.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<!-- Follows the tab aria guidelines\n\thttps://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html -->\n\n<template>\n\t<section\n\t\t:id=\"`tab-${id}`\"\n\t\t:class=\"{ 'app-sidebar__tab--active': isActive }\"\n\t\t:aria-hidden=\"!isActive\"\n\t\t:aria-label=\"isTablistShown() ? undefined : name\"\n\t\t:aria-labelledby=\"isTablistShown() ? `tab-button-${id}` : undefined\"\n\t\tclass=\"app-sidebar__tab\"\n\t\t:tabindex=\"isTablistShown() ? 0 : -1\"\n\t\t:role=\"isTablistShown() ? 'tabpanel' : undefined\"\n\t\t@scroll=\"onScroll\">\n\t\t<h3 class=\"hidden-visually\">\n\t\t\t{{ name }}\n\t\t</h3>\n\t\t<!-- @slot Tab panel content -->\n\t\t<slot />\n\t</section>\n</template>\n\n<script>\nexport default {\n\tname: 'NcAppSidebarTab',\n\n\tinject: ['registerTab', 'unregisterTab', 'getActiveTab', 'isTablistShown'],\n\n\tprops: {\n\t\t/**\n\t\t * Unique id of the sidebar tab\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Tab name in navigation\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 * Tab icon's html class in navigation. Used if #icon slot is not provided\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 * Tab order in navigation. If not provided, name is used.\n\t\t */\n\t\torder: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t},\n\t},\n\n\temits: [\n\t\t'bottom-reached',\n\t\t'scroll',\n\t],\n\n\texpose: ['id', 'name', 'icon', 'order', 'renderIcon'],\n\n\tcomputed: {\n\t\t/**\n\t\t * Is the current tab an active tab, that should be shown?\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tisActive() {\n\t\t\treturn this.getActiveTab() === this.id\n\t\t},\n\t},\n\n\tcreated() {\n\t\t// As the tab is created - register it in the tabs component\n\t\t// It's better to provide computed tab object, not component instance as it easy\n\t\tthis.registerTab(this)\n\t},\n\n\tbeforeDestroy() {\n\t\t// Unregister the tab from tabs\n\t\tthis.unregisterTab(this.id)\n\t},\n\n\tmethods: {\n\t\tonScroll(event) {\n\t\t\t// Are we scrolled to the very bottom ?\n\t\t\tif (this.$el.scrollHeight - this.$el.scrollTop === this.$el.clientHeight) {\n\t\t\t\t/**\n\t\t\t\t * Bottom scroll is reached\n\t\t\t\t *\n\t\t\t\t * @property {Event} event Native scroll event\n\t\t\t\t */\n\t\t\t\tthis.$emit('bottom-reached', event)\n\t\t\t}\n\t\t\t/**\n\t\t\t * @property {Event} event Native scroll event\n\t\t\t */\n\t\t\tthis.$emit('scroll', event)\n\t\t},\n\n\t\t/**\n\t\t * Render tab's icon slot if any\n\t\t *\n\t\t * @return {import('vue').VNode[]}\n\t\t */\n\t\trenderIcon() {\n\t\t\treturn this.$scopedSlots.icon?.()\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.app-sidebar__tab {\n\tdisplay: none;\n\tpadding: 10px;\n\tmin-height: 100%; // fill available height\n\tmax-height: 100%; // scroll inside\n\theight: 100%;\n\toverflow: auto;\n\n\t&:focus {\n\t\tborder-color: var(--color-primary-element);\n\t\tbox-shadow: 0 0 0.2em var(--color-primary-element);\n\t\toutline: 0;\n\t}\n\n\t&--active {\n\t\tdisplay: block;\n\t}\n}\n</style>\n"],"names":[],"mappings":";;AA4BA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,QAAA,CAAA,eAAA,iBAAA,gBAAA,gBAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;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,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA,CAAA,MAAA,QAAA,QAAA,SAAA,YAAA;AAAA,EAEA,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AACA,aAAA,KAAA,aAAA,MAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAGA,SAAA,YAAA,IAAA;AAAA,EACA;AAAA,EAEA,gBAAA;AAEA,SAAA,cAAA,KAAA,EAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,SAAA,OAAA;AAEA,UAAA,KAAA,IAAA,eAAA,KAAA,IAAA,cAAA,KAAA,IAAA,cAAA;AAMA,aAAA,MAAA,kBAAA,KAAA;AAAA,MACA;AAIA,WAAA,MAAA,UAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAA;AACA,aAAA,KAAA,aAAA,OAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;"}

package/dist/Components/NcAppSidebarTab.mjs

@@ -67,14 +67,13 @@ const _sfc_main = {
      * @return {import('vue').VNode[]}
      */
     renderIcon() {
-      var _a, _b;
-      return (_b = (_a = this.$scopedSlots).icon) == null ? void 0 : _b.call(_a);
+      return this.$scopedSlots.icon?.();
     }
   }
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("section", { staticClass: "app-sidebar__tab", class: { "app-sidebar__tab--active": _vm.isActive }, attrs: { "id": "tab-".concat(_vm.id), "aria-hidden": !_vm.isActive, "aria-label": _vm.isTablistShown() ? void 0 : _vm.name, "aria-labelledby": _vm.isTablistShown() ? "tab-button-".concat(_vm.id) : void 0, "tabindex": _vm.isTablistShown() ? 0 : -1, "role": _vm.isTablistShown() ? "tabpanel" : void 0 }, on: { "scroll": _vm.onScroll } }, [_c("h3", { staticClass: "hidden-visually" }, [_vm._v(" " + _vm._s(_vm.name) + " ")]), _vm._t("default")], 2);
+  return _c("section", { staticClass: "app-sidebar__tab", class: { "app-sidebar__tab--active": _vm.isActive }, attrs: { "id": `tab-${_vm.id}`, "aria-hidden": !_vm.isActive, "aria-label": _vm.isTablistShown() ? void 0 : _vm.name, "aria-labelledby": _vm.isTablistShown() ? `tab-button-${_vm.id}` : void 0, "tabindex": _vm.isTablistShown() ? 0 : -1, "role": _vm.isTablistShown() ? "tabpanel" : void 0 }, on: { "scroll": _vm.onScroll } }, [_c("h3", { staticClass: "hidden-visually" }, [_vm._v(" " + _vm._s(_vm.name) + " ")]), _vm._t("default")], 2);
 };
 var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ normalizeComponent(

package/dist/Components/NcAppSidebarTab.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcAppSidebarTab.mjs","sources":["../../src/components/NcAppSidebarTab/NcAppSidebarTab.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<!-- Follows the tab aria guidelines\n\thttps://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html -->\n\n<template>\n\t<section\n\t\t:id=\"`tab-${id}`\"\n\t\t:class=\"{ 'app-sidebar__tab--active': isActive }\"\n\t\t:aria-hidden=\"!isActive\"\n\t\t:aria-label=\"isTablistShown() ? undefined : name\"\n\t\t:aria-labelledby=\"isTablistShown() ? `tab-button-${id}` : undefined\"\n\t\tclass=\"app-sidebar__tab\"\n\t\t:tabindex=\"isTablistShown() ? 0 : -1\"\n\t\t:role=\"isTablistShown() ? 'tabpanel' : undefined\"\n\t\t@scroll=\"onScroll\">\n\t\t<h3 class=\"hidden-visually\">\n\t\t\t{{ name }}\n\t\t</h3>\n\t\t<!-- @slot Tab panel content -->\n\t\t<slot />\n\t</section>\n</template>\n\n<script>\nexport default {\n\tname: 'NcAppSidebarTab',\n\n\tinject: ['registerTab', 'unregisterTab', 'getActiveTab', 'isTablistShown'],\n\n\tprops: {\n\t\t/**\n\t\t * Unique id of the sidebar tab\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Tab name in navigation\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 * Tab icon's html class in navigation. Used if #icon slot is not provided\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 * Tab order in navigation. If not provided, name is used.\n\t\t */\n\t\torder: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t},\n\t},\n\n\temits: [\n\t\t'bottom-reached',\n\t\t'scroll',\n\t],\n\n\texpose: ['id', 'name', 'icon', 'order', 'renderIcon'],\n\n\tcomputed: {\n\t\t/**\n\t\t * Is the current tab an active tab, that should be shown?\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tisActive() {\n\t\t\treturn this.getActiveTab() === this.id\n\t\t},\n\t},\n\n\tcreated() {\n\t\t// As the tab is created - register it in the tabs component\n\t\t// It's better to provide computed tab object, not component instance as it easy\n\t\tthis.registerTab(this)\n\t},\n\n\tbeforeDestroy() {\n\t\t// Unregister the tab from tabs\n\t\tthis.unregisterTab(this.id)\n\t},\n\n\tmethods: {\n\t\tonScroll(event) {\n\t\t\t// Are we scrolled to the very bottom ?\n\t\t\tif (this.$el.scrollHeight - this.$el.scrollTop === this.$el.clientHeight) {\n\t\t\t\t/**\n\t\t\t\t * Bottom scroll is reached\n\t\t\t\t *\n\t\t\t\t * @property {Event} event Native scroll event\n\t\t\t\t */\n\t\t\t\tthis.$emit('bottom-reached', event)\n\t\t\t}\n\t\t\t/**\n\t\t\t * @property {Event} event Native scroll event\n\t\t\t */\n\t\t\tthis.$emit('scroll', event)\n\t\t},\n\n\t\t/**\n\t\t * Render tab's icon slot if any\n\t\t *\n\t\t * @return {import('vue').VNode[]}\n\t\t */\n\t\trenderIcon() {\n\t\t\treturn this.$scopedSlots.icon?.()\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.app-sidebar__tab {\n\tdisplay: none;\n\tpadding: 10px;\n\tmin-height: 100%; // fill available height\n\tmax-height: 100%; // scroll inside\n\theight: 100%;\n\toverflow: auto;\n\n\t&:focus {\n\t\tborder-color: var(--color-primary-element);\n\t\tbox-shadow: 0 0 0.2em var(--color-primary-element);\n\t\toutline: 0;\n\t}\n\n\t&--active {\n\t\tdisplay: block;\n\t}\n}\n</style>\n"],"names":[],"mappings":";AA4BA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,QAAA,CAAA,eAAA,iBAAA,gBAAA,gBAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;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,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA,CAAA,MAAA,QAAA,QAAA,SAAA,YAAA;AAAA,EAEA,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AACA,aAAA,KAAA,aAAA,MAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAGA,SAAA,YAAA,IAAA;AAAA,EACA;AAAA,EAEA,gBAAA;AAEA,SAAA,cAAA,KAAA,EAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,SAAA,OAAA;AAEA,UAAA,KAAA,IAAA,eAAA,KAAA,IAAA,cAAA,KAAA,IAAA,cAAA;AAMA,aAAA,MAAA,kBAAA,KAAA;AAAA,MACA;AAIA,WAAA,MAAA,UAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAA;;AACA,cAAA,gBAAA,cAAA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcAppSidebarTab.mjs","sources":["../../src/components/NcAppSidebarTab/NcAppSidebarTab.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<!-- Follows the tab aria guidelines\n\thttps://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html -->\n\n<template>\n\t<section\n\t\t:id=\"`tab-${id}`\"\n\t\t:class=\"{ 'app-sidebar__tab--active': isActive }\"\n\t\t:aria-hidden=\"!isActive\"\n\t\t:aria-label=\"isTablistShown() ? undefined : name\"\n\t\t:aria-labelledby=\"isTablistShown() ? `tab-button-${id}` : undefined\"\n\t\tclass=\"app-sidebar__tab\"\n\t\t:tabindex=\"isTablistShown() ? 0 : -1\"\n\t\t:role=\"isTablistShown() ? 'tabpanel' : undefined\"\n\t\t@scroll=\"onScroll\">\n\t\t<h3 class=\"hidden-visually\">\n\t\t\t{{ name }}\n\t\t</h3>\n\t\t<!-- @slot Tab panel content -->\n\t\t<slot />\n\t</section>\n</template>\n\n<script>\nexport default {\n\tname: 'NcAppSidebarTab',\n\n\tinject: ['registerTab', 'unregisterTab', 'getActiveTab', 'isTablistShown'],\n\n\tprops: {\n\t\t/**\n\t\t * Unique id of the sidebar tab\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Tab name in navigation\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 * Tab icon's html class in navigation. Used if #icon slot is not provided\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 * Tab order in navigation. If not provided, name is used.\n\t\t */\n\t\torder: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t},\n\t},\n\n\temits: [\n\t\t'bottom-reached',\n\t\t'scroll',\n\t],\n\n\texpose: ['id', 'name', 'icon', 'order', 'renderIcon'],\n\n\tcomputed: {\n\t\t/**\n\t\t * Is the current tab an active tab, that should be shown?\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tisActive() {\n\t\t\treturn this.getActiveTab() === this.id\n\t\t},\n\t},\n\n\tcreated() {\n\t\t// As the tab is created - register it in the tabs component\n\t\t// It's better to provide computed tab object, not component instance as it easy\n\t\tthis.registerTab(this)\n\t},\n\n\tbeforeDestroy() {\n\t\t// Unregister the tab from tabs\n\t\tthis.unregisterTab(this.id)\n\t},\n\n\tmethods: {\n\t\tonScroll(event) {\n\t\t\t// Are we scrolled to the very bottom ?\n\t\t\tif (this.$el.scrollHeight - this.$el.scrollTop === this.$el.clientHeight) {\n\t\t\t\t/**\n\t\t\t\t * Bottom scroll is reached\n\t\t\t\t *\n\t\t\t\t * @property {Event} event Native scroll event\n\t\t\t\t */\n\t\t\t\tthis.$emit('bottom-reached', event)\n\t\t\t}\n\t\t\t/**\n\t\t\t * @property {Event} event Native scroll event\n\t\t\t */\n\t\t\tthis.$emit('scroll', event)\n\t\t},\n\n\t\t/**\n\t\t * Render tab's icon slot if any\n\t\t *\n\t\t * @return {import('vue').VNode[]}\n\t\t */\n\t\trenderIcon() {\n\t\t\treturn this.$scopedSlots.icon?.()\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.app-sidebar__tab {\n\tdisplay: none;\n\tpadding: 10px;\n\tmin-height: 100%; // fill available height\n\tmax-height: 100%; // scroll inside\n\theight: 100%;\n\toverflow: auto;\n\n\t&:focus {\n\t\tborder-color: var(--color-primary-element);\n\t\tbox-shadow: 0 0 0.2em var(--color-primary-element);\n\t\toutline: 0;\n\t}\n\n\t&--active {\n\t\tdisplay: block;\n\t}\n}\n</style>\n"],"names":[],"mappings":";AA4BA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,QAAA,CAAA,eAAA,iBAAA,gBAAA,gBAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;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,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA,CAAA,MAAA,QAAA,QAAA,SAAA,YAAA;AAAA,EAEA,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AACA,aAAA,KAAA,aAAA,MAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAGA,SAAA,YAAA,IAAA;AAAA,EACA;AAAA,EAEA,gBAAA;AAEA,SAAA,cAAA,KAAA,EAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,SAAA,OAAA;AAEA,UAAA,KAAA,IAAA,eAAA,KAAA,IAAA,cAAA,KAAA,IAAA,cAAA;AAMA,aAAA,MAAA,kBAAA,KAAA;AAAA,MACA;AAIA,WAAA,MAAA,UAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAA;AACA,aAAA,KAAA,aAAA,OAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}

package/dist/Components/NcAssistantButton.cjs

@@ -1,4 +1,4 @@
 "use strict";
-const NcAssistantButton = require("../chunks/NcAssistantButton-WQvWhoAr.cjs");
+const NcAssistantButton = require("../chunks/NcAssistantButton-BMzPE7WA.cjs");
 module.exports = NcAssistantButton.NcAssistantButton;
 //# sourceMappingURL=NcAssistantButton.cjs.map

package/dist/Components/NcAssistantButton.mjs

@@ -1,4 +1,4 @@
-import { N } from "../chunks/NcAssistantButton-lDdWOemf.mjs";
+import { N } from "../chunks/NcAssistantButton-enexPvoC.mjs";
 export {
   N as default
 };

package/dist/Components/NcAssistantIcon.cjs

@@ -1,4 +1,4 @@
 "use strict";
-const NcAssistantIcon = require("../chunks/NcAssistantIcon-RDQ8YhZE.cjs");
+const NcAssistantIcon = require("../chunks/NcAssistantIcon-DfVd2zWt.cjs");
 module.exports = NcAssistantIcon.NcAssistantIcon;
 //# sourceMappingURL=NcAssistantIcon.cjs.map

package/dist/Components/NcAssistantIcon.mjs

@@ -1,4 +1,4 @@
-import { N } from "../chunks/NcAssistantIcon-BTjYuSQ9.mjs";
+import { N } from "../chunks/NcAssistantIcon-XwQFzBgA.mjs";
 export {
   N as default
 };

package/dist/Components/NcAvatar.cjs

@@ -1,4 +1,4 @@
 "use strict";
-const NcAvatar = require("../chunks/NcAvatar-D_0Aw88L.cjs");
+const NcAvatar = require("../chunks/NcAvatar-BwioPrbY.cjs");
 module.exports = NcAvatar.NcAvatar;
 //# sourceMappingURL=NcAvatar.cjs.map

package/dist/Components/NcAvatar.mjs

@@ -1,4 +1,4 @@
-import { N } from "../chunks/NcAvatar-Cupl4prm.mjs";
+import { N } from "../chunks/NcAvatar-DwUmx6Fg.mjs";
 export {
   N as default
 };

package/dist/Components/NcBreadcrumb.cjs

@@ -1,4 +1,4 @@
 "use strict";
-const NcBreadcrumb = require("../chunks/NcBreadcrumb-FbePEaGS.cjs");
+const NcBreadcrumb = require("../chunks/NcBreadcrumb-B-zWjBNp.cjs");
 module.exports = NcBreadcrumb.NcBreadcrumb;
 //# sourceMappingURL=NcBreadcrumb.cjs.map

package/dist/Components/NcBreadcrumb.mjs

@@ -1,4 +1,4 @@
-import { N } from "../chunks/NcBreadcrumb-VJGW992x.mjs";
+import { N } from "../chunks/NcBreadcrumb-ljdZbX7p.mjs";
 export {
   N as default
 };

package/dist/Components/NcBreadcrumbs.cjs

@@ -1,4 +1,4 @@
 "use strict";
-const NcBreadcrumbs = require("../chunks/NcBreadcrumbs-CrNBCyUa.cjs");
+const NcBreadcrumbs = require("../chunks/NcBreadcrumbs-B6tPEu9b.cjs");
 module.exports = NcBreadcrumbs.NcBreadcrumbs;
 //# sourceMappingURL=NcBreadcrumbs.cjs.map

package/dist/Components/NcBreadcrumbs.mjs

@@ -1,4 +1,4 @@
-import { N } from "../chunks/NcBreadcrumbs-DJSAcn8x.mjs";
+import { N } from "../chunks/NcBreadcrumbs-D2DtX3XC.mjs";
 export {
   N as default
 };

package/dist/Components/NcButton.cjs

@@ -1,4 +1,4 @@
 "use strict";
-const NcButton = require("../chunks/NcButton-DK7bNZIL.cjs");
+const NcButton = require("../chunks/NcButton-CJBZrdiL.cjs");
 module.exports = NcButton.NcButton;
 //# sourceMappingURL=NcButton.cjs.map

package/dist/Components/NcButton.mjs

@@ -1,4 +1,4 @@
-import { N } from "../chunks/NcButton-D3CaJu1f.mjs";
+import { N } from "../chunks/NcButton-DUZTtFhr.mjs";
 export {
   N as default
 };

package/dist/Components/NcCheckboxRadioSwitch.cjs

@@ -1,4 +1,4 @@
 "use strict";
-const NcCheckboxRadioSwitch = require("../chunks/NcCheckboxRadioSwitch-CDFUoj2J.cjs");
+const NcCheckboxRadioSwitch = require("../chunks/NcCheckboxRadioSwitch-wSD3hWxs.cjs");
 module.exports = NcCheckboxRadioSwitch.NcCheckboxRadioSwitch;
 //# sourceMappingURL=NcCheckboxRadioSwitch.cjs.map

package/dist/Components/NcCheckboxRadioSwitch.mjs

@@ -1,4 +1,4 @@
-import { N } from "../chunks/NcCheckboxRadioSwitch-ezquUuPz.mjs";
+import { N } from "../chunks/NcCheckboxRadioSwitch-NPJuwzqS.mjs";
 export {
   N as default
 };

package/dist/Components/NcChip.cjs

@@ -1,11 +1,11 @@
-require('../assets/NcChip-Cc17FJEC.css');
+require('../assets/NcChip-ByvuZS2-.css');
 "use strict";
 const mdi = require("../chunks/mdi-Nhb6SBw8.cjs");
 const Vue = require("vue");
-const NcActionButton = require("../chunks/NcActionButton-lJ0IA3IS.cjs");
-const NcActions = require("../chunks/NcActions-D3N_As6c.cjs");
-const NcIconSvgWrapper = require("../chunks/NcIconSvgWrapper-DoVPfeNg.cjs");
-const _l10n = require("../chunks/_l10n-9b4TMo5Q.cjs");
+const NcActionButton = require("../chunks/NcActionButton-DSq_luox.cjs");
+const NcActions = require("../chunks/NcActions-CF9VxHHD.cjs");
+const NcIconSvgWrapper = require("../chunks/NcIconSvgWrapper-D-aKMbf3.cjs");
+const _l10n = require("../chunks/_l10n-eOBJ3Dwl.cjs");
 const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-V0q-tHlQ.cjs");
 _l10n.register(_l10n.t18);
 const _sfc_main = {
@@ -44,7 +44,7 @@ const _sfc_main = {
     type: {
       type: String,
       default: "secondary",
-      validator: (value) => ["primary", "secondary", "tertiary"].includes(value)
+      validator: (value) => ["primary", "secondary", "tertiary", "error", "warning", "success"].includes(value)
     },
     /**
      * SVG path of the icon to use, this takes precedence over `iconSVG`.
@@ -78,7 +78,7 @@ const _sfc_main = {
     variant: {
       type: String,
       default: "secondary",
-      validator: (value) => ["primary", "secondary", "tertiary"].includes(value)
+      validator: (value) => ["primary", "secondary", "tertiary", "error", "warning", "success"].includes(value)
     }
   },
   emits: ["close"],
@@ -87,21 +87,15 @@ const _sfc_main = {
     const slots = Vue.useSlots();
     const realVariant = Vue.computed(() => props.type !== "secondary" ? props.type : props.variant);
     const canClose = Vue.computed(() => !props.noClose);
-    const hasActions = () => {
-      var _a;
-      return Boolean((_a = slots.actions) == null ? void 0 : _a.call(slots));
-    };
-    const hasIcon = () => {
-      var _a;
-      return Boolean(props.iconPath || props.iconSvg || !!((_a = slots.icon) == null ? void 0 : _a.call(slots)));
-    };
+    const hasActions = () => Boolean(slots.actions?.());
+    const hasIcon = () => Boolean(props.iconPath || props.iconSvg || !!slots.icon?.());
     return { __sfc: true, props, emit, slots, realVariant, canClose, hasActions, hasIcon, mdiClose: mdi.mdiClose, NcActionButton: NcActionButton.NcActionButton, NcActions: NcActions.NcActions, NcIconSvgWrapper: NcIconSvgWrapper.NcIconSvgWrapper };
   }
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
   return _c("div", { staticClass: "nc-chip", class: {
-    ["nc-chip--".concat(_setup.realVariant)]: true,
+    [`nc-chip--${_setup.realVariant}`]: true,
     "nc-chip--no-actions": _vm.noClose && !_setup.hasActions(),
     "nc-chip--no-icon": !_setup.hasIcon()
   } }, [_setup.hasIcon() ? _c("span", { staticClass: "nc-chip__icon" }, [_vm._t("icon", function() {
@@ -121,7 +115,7 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "522528d5"
+  "88e86387"
 );
 const NcChip = __component__.exports;
 module.exports = NcChip;

package/dist/Components/NcChip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcChip.cjs","sources":["../../src/components/NcChip/NcChip.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n<docs>\n### Basic usage\n\n```vue\n<template>\n\t<div style=\"display: flex; gap: 8px; flex-wrap: wrap;\">\n\t\t<NcChip text=\"Notes.txt\" />\n\t\t<NcChip text=\"Files\" :icon-path=\"mdiFile\" />\n\t\t<NcChip text=\"Color\" :icon-path=\"mdiPalette\" variant=\"tertiary\" />\n\t\t<NcChip text=\"Current time\" :icon-path=\"mdiClock\" no-close variant=\"primary\" />\n\t</div>\n</template>\n<script>\nimport { mdiClock, mdiFile, mdiPalette } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tmdiClock,\n\t\t\tmdiFile,\n\t\t\tmdiPalette,\n\t\t}\n\t}\n}\n</script>\n```\n\n### Advanced usage\n\nIt is also possible to use custom components for the icon by using the `icon` slot.\nIn this example we are using the `NcAvatar` component to render the users avatar as the icon.\n\n*Hint: If you use round icons like avatars you should set their size to `24px` (or use CSS variable `--chip-size`) to make them fully fill and align with the the chip*\n\nAlso it is possible to pass custom actions.\n\n```vue\n<template>\n\t<NcChip>\n\t\t<!-- The icon slot allow to use custom components as the chip icon -->\n\t\t<template #icon>\n\t\t\t<NcAvatar :size=\"24\" user=\"jdoe\" display-name=\"J. Doe\" />\n\t\t</template>\n\t\t<!-- The actions slot allows to add custom actions -->\n\t\t<template #actions>\n\t\t\t<NcActionButton>\n\t\t\t\t<template #icon>\n\t\t\t\t\t<ContactsIcon :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tAdd to contacts\n\t\t\t</NcActionButton>\n\t\t</template>\n\t\t<!-- The default slot can be used for add content, just like the `text` prop -->\n\t\tJ. Doe\n\t</NcChip>\n</template>\n<script>\nimport ContactsIcon from 'vue-material-design-icons/Contacts.vue'\nexport default {\n\tcomponents: {\n\t\tContactsIcon,\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<div\n\t\tclass=\"nc-chip\"\n\t\t:class=\"{\n\t\t\t[`nc-chip--${realVariant}`]: true,\n\t\t\t'nc-chip--no-actions': noClose && !hasActions(),\n\t\t\t'nc-chip--no-icon': !hasIcon(),\n\t\t}\">\n\t\t<span v-if=\"hasIcon()\" class=\"nc-chip__icon\">\n\t\t\t<!-- @slot The icon slot can be used to set the chip icon. Make sure that the icon is not exceeding a height of `24px`. For round icons a exact size of `24px` is recommended. -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<!-- The default icon wrapper uses a size of 18px to ensure the icon is not clipped by the round chip style -->\n\t\t\t\t<NcIconSvgWrapper\n\t\t\t\t\tv-if=\"iconPath || iconSvg\"\n\t\t\t\t\tinline\n\t\t\t\t\t:path=\"iconPath\"\n\t\t\t\t\t:svg=\"iconPath ? undefined : iconSvg\"\n\t\t\t\t\t:size=\"18\" />\n\t\t\t</slot>\n\t\t</span>\n\t\t<span class=\"nc-chip__text\">\n\t\t\t<!-- @slot The default slot can be used to set the text that is shown -->\n\t\t\t<slot>{{ text }}</slot>\n\t\t</span>\n\t\t<NcActions\n\t\t\tv-if=\"canClose || hasActions()\"\n\t\t\tclass=\"nc-chip__actions\"\n\t\t\t:container=\"actionsContainer\"\n\t\t\t:force-menu=\"!canClose\"\n\t\t\tvariant=\"tertiary-no-background\">\n\t\t\t<NcActionButton\n\t\t\t\tv-if=\"canClose\"\n\t\t\t\tclose-after-click\n\t\t\t\t@click=\"emit('close')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiClose\" :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t{{ ariaLabelClose }}\n\t\t\t</NcActionButton>\n\t\t\t<!-- @slot The actions slot can be used to add custom actions to the chips actions -->\n\t\t\t<slot name=\"actions\" />\n\t\t</NcActions>\n\t</div>\n</template>\n\n<script setup>\nimport { mdiClose } from '@mdi/js'\nimport { computed, useSlots } from 'vue'\nimport NcActionButton from '../NcActionButton/NcActionButton.vue'\nimport NcActions from '../NcActions/NcActions.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { t } from '../../l10n.js'\n\nconst props = defineProps({\n\t/**\n\t * aria label to set on the close button\n\t *\n\t * @default 'Close'\n\t */\n\tariaLabelClose: {\n\t\ttype: String,\n\t\tdefault: t('Close'),\n\t},\n\n\t/**\n\t * Container for the actions\n\t */\n\tactionsContainer: {\n\t\ttype: String,\n\t\tdefault: 'body',\n\t},\n\n\t/**\n\t * Main text of the chip.\n\t */\n\ttext: {\n\t\ttype: String,\n\t\tdefault: '',\n\t},\n\n\t/**\n\t * Set the chips design variant-\n\t *\n\t * This sets the background style of the chip, similar to NcButton's `variant`.\n\t *\n\t * @deprecated will be removed with v9 - use `variant` instead.\n\t */\n\ttype: {\n\t\ttype: String,\n\t\tdefault: 'secondary',\n\t\tvalidator: (value) => ['primary', 'secondary', 'tertiary'].includes(value),\n\t},\n\n\t/**\n\t * SVG path of the icon to use, this takes precedence over `iconSVG`.\n\t * For example icon paths from `@mdi/js` can be used.\n\t */\n\ticonPath: {\n\t\ttype: String,\n\t\tdefault: null,\n\t},\n\n\t/**\n\t * Inline SVG to use as the icon\n\t */\n\ticonSvg: {\n\t\ttype: String,\n\t\tdefault: null,\n\t},\n\n\t/**\n\t * Set to true to prevent the close button to be shown\n\t */\n\tnoClose: {\n\t\ttype: Boolean,\n\t\tdefault: false,\n\t},\n\n\t/**\n\t * Set the chips design variant-\n\t *\n\t * This sets the background style of the chip, similar to NcButton's `variant`.\n\t *\n\t * @since 8.24.0\n\t */\n\tvariant: {\n\t\ttype: String,\n\t\tdefault: 'secondary',\n\t\tvalidator: (value) => ['primary', 'secondary', 'tertiary'].includes(value),\n\t},\n})\n\nconst emit = defineEmits(['close'])\nconst slots = useSlots()\n\n// TODO: Replace with just `variant` in v9\nconst realVariant = computed(() => props.type !== 'secondary' ? props.type : props.variant)\n\nconst canClose = computed(() => !props.noClose)\nconst hasActions = () => Boolean(slots.actions?.())\nconst hasIcon = () => Boolean(props.iconPath || props.iconSvg || !!slots.icon?.())\n</script>\n\n<style scoped lang=\"scss\">\n.nc-chip {\n\t--chip-size: 24px;\n\t--chip-radius: calc(var(--chip-size) / 2);\n\t// Setup size of wrapper\n\theight: var(--chip-size);\n\tmax-width: fit-content;\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tborder-radius: var(--chip-radius);\n\tbackground-color: var(--color-background-hover);\n\n\t&--primary {\n\t\tbackground-color: var(--color-primary-element);\n\t\tcolor: var(--color-primary-element-text);\n\t}\n\n\t&--secondary {\n\t\tbackground-color: var(--color-primary-element-light);\n\t\tcolor: var(--color-primary-element-light-text);\n\t}\n\n\t&--no-actions &__text {\n\t\t// If there are no actions we need to add some padding to ensure the text is not cut-off\n\t\tpadding-inline-end: calc(1.5 * var(--default-grid-baseline));\n\t}\n\n\t&--no-icon &__text {\n\t\t// Add some more space to the border\n\t\tpadding-inline-start: calc(1.5 * var(--default-grid-baseline));\n\t}\n\n\t&__text {\n\t\t// Allow to grow the text\n\t\t// this is only used if an app forces a width of the chip\n\t\tflex: 1 auto;\n\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\ttext-wrap: nowrap;\n\t}\n\n\t&__icon {\n\t\t// Do neither grow nor shrink, size is fixed\n\t\tflex: 0 0 var(--chip-size);\n\t\tmargin-inline-end: var(--default-grid-baseline);\n\n\t\tline-height: 1;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\n\t\t// Force size\n\t\toverflow: hidden;\n\t\theight: var(--chip-size);\n\t\twidth: var(--chip-size);\n\t}\n\n\t&__actions {\n\t\t// Do neither grow nor shrink, size is fixed\n\t\tflex: 0 0 var(--chip-size);\n\t\t// Adjust action size to match chip size\n\t\t--default-clickable-area: var(--chip-size);\n\t\t--border-radius-element: var(--chip-radius);\n\t}\n}\n</style>\n"],"names":["useSlots","computed"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4MA,UAAM,QAAQA,IAAAA,SAAQ;AAGtB,UAAM,cAAcC,IAAAA,SAAS,MAAM,MAAM,SAAS,cAAc,MAAM,OAAO,MAAM,OAAO;AAE1F,UAAM,WAAWA,IAAAA,SAAS,MAAM,CAAC,MAAM,OAAO;AAC9C,UAAM,aAAa,MAAA;;AAAM,sBAAQ,WAAM,YAAN,8BAAiB;AAAA;AAClD,UAAM,UAAU,MAAA;;AAAM,qBAAQ,MAAM,YAAY,MAAM,WAAW,CAAC,GAAC,WAAM,SAAN,+BAAc;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcChip.cjs","sources":["../../src/components/NcChip/NcChip.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n<docs>\n### Basic usage\n\n```vue\n<template>\n\t<div style=\"display: flex; gap: 8px; flex-wrap: wrap;\">\n\t\t<NcChip text=\"Notes.txt\" />\n\t\t<NcChip text=\"Files\" :icon-path=\"mdiFile\" />\n\t\t<NcChip text=\"Color\" :icon-path=\"mdiPalette\" variant=\"tertiary\" />\n\t\t<NcChip text=\"Current time\" :icon-path=\"mdiClock\" no-close variant=\"primary\" />\n\t\t<NcChip text=\"Canceled\" :icon-path=\"mdiCancel\" variant=\"error\" no-close />\n\t\t<NcChip text=\"Open\" :icon-path=\"mdiCircle\" variant=\"success\" no-close />\n\t\t<NcChip text=\"Due tomorrow\" :icon-path=\"mdiAlertCircleOutline\" variant=\"warning\" no-close />\n\t</div>\n</template>\n<script>\nimport { mdiClock, mdiFile, mdiPalette, mdiCancel, mdiCircle, mdiAlertCircleOutline } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tmdiAlertCircleOutline,\n\t\t\tmdiCancel,\n\t\t\tmdiCircle,\n\t\t\tmdiClock,\n\t\t\tmdiFile,\n\t\t\tmdiPalette,\n\t\t}\n\t}\n}\n</script>\n```\n\n### Advanced usage\n\nIt is also possible to use custom components for the icon by using the `icon` slot.\nIn this example we are using the `NcAvatar` component to render the users avatar as the icon.\n\n*Hint: If you use round icons like avatars you should set their size to `24px` (or use CSS variable `--chip-size`) to make them fully fill and align with the the chip*\n\nAlso it is possible to pass custom actions.\n\n```vue\n<template>\n\t<NcChip>\n\t\t<!-- The icon slot allow to use custom components as the chip icon -->\n\t\t<template #icon>\n\t\t\t<NcAvatar :size=\"24\" user=\"jdoe\" display-name=\"J. Doe\" />\n\t\t</template>\n\t\t<!-- The actions slot allows to add custom actions -->\n\t\t<template #actions>\n\t\t\t<NcActionButton>\n\t\t\t\t<template #icon>\n\t\t\t\t\t<ContactsIcon :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tAdd to contacts\n\t\t\t</NcActionButton>\n\t\t</template>\n\t\t<!-- The default slot can be used for add content, just like the `text` prop -->\n\t\tJ. Doe\n\t</NcChip>\n</template>\n<script>\nimport ContactsIcon from 'vue-material-design-icons/Contacts.vue'\nexport default {\n\tcomponents: {\n\t\tContactsIcon,\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<div\n\t\tclass=\"nc-chip\"\n\t\t:class=\"{\n\t\t\t[`nc-chip--${realVariant}`]: true,\n\t\t\t'nc-chip--no-actions': noClose && !hasActions(),\n\t\t\t'nc-chip--no-icon': !hasIcon(),\n\t\t}\">\n\t\t<span v-if=\"hasIcon()\" class=\"nc-chip__icon\">\n\t\t\t<!-- @slot The icon slot can be used to set the chip icon. Make sure that the icon is not exceeding a height of `24px`. For round icons a exact size of `24px` is recommended. -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<!-- The default icon wrapper uses a size of 18px to ensure the icon is not clipped by the round chip style -->\n\t\t\t\t<NcIconSvgWrapper\n\t\t\t\t\tv-if=\"iconPath || iconSvg\"\n\t\t\t\t\tinline\n\t\t\t\t\t:path=\"iconPath\"\n\t\t\t\t\t:svg=\"iconPath ? undefined : iconSvg\"\n\t\t\t\t\t:size=\"18\" />\n\t\t\t</slot>\n\t\t</span>\n\t\t<span class=\"nc-chip__text\">\n\t\t\t<!-- @slot The default slot can be used to set the text that is shown -->\n\t\t\t<slot>{{ text }}</slot>\n\t\t</span>\n\t\t<NcActions\n\t\t\tv-if=\"canClose || hasActions()\"\n\t\t\tclass=\"nc-chip__actions\"\n\t\t\t:container=\"actionsContainer\"\n\t\t\t:force-menu=\"!canClose\"\n\t\t\tvariant=\"tertiary-no-background\">\n\t\t\t<NcActionButton\n\t\t\t\tv-if=\"canClose\"\n\t\t\t\tclose-after-click\n\t\t\t\t@click=\"emit('close')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiClose\" :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t{{ ariaLabelClose }}\n\t\t\t</NcActionButton>\n\t\t\t<!-- @slot The actions slot can be used to add custom actions to the chips actions -->\n\t\t\t<slot name=\"actions\" />\n\t\t</NcActions>\n\t</div>\n</template>\n\n<script setup>\nimport { mdiClose } from '@mdi/js'\nimport { computed, useSlots } from 'vue'\nimport NcActionButton from '../NcActionButton/NcActionButton.vue'\nimport NcActions from '../NcActions/NcActions.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { t } from '../../l10n.js'\n\nconst props = defineProps({\n\t/**\n\t * aria label to set on the close button\n\t *\n\t * @default 'Close'\n\t */\n\tariaLabelClose: {\n\t\ttype: String,\n\t\tdefault: t('Close'),\n\t},\n\n\t/**\n\t * Container for the actions\n\t */\n\tactionsContainer: {\n\t\ttype: String,\n\t\tdefault: 'body',\n\t},\n\n\t/**\n\t * Main text of the chip.\n\t */\n\ttext: {\n\t\ttype: String,\n\t\tdefault: '',\n\t},\n\n\t/**\n\t * Set the chips design variant-\n\t *\n\t * This sets the background style of the chip, similar to NcButton's `variant`.\n\t *\n\t * @deprecated will be removed with v9 - use `variant` instead.\n\t */\n\ttype: {\n\t\ttype: String,\n\t\tdefault: 'secondary',\n\t\tvalidator: (value) => ['primary', 'secondary', 'tertiary', 'error', 'warning', 'success'].includes(value),\n\t},\n\n\t/**\n\t * SVG path of the icon to use, this takes precedence over `iconSVG`.\n\t * For example icon paths from `@mdi/js` can be used.\n\t */\n\ticonPath: {\n\t\ttype: String,\n\t\tdefault: null,\n\t},\n\n\t/**\n\t * Inline SVG to use as the icon\n\t */\n\ticonSvg: {\n\t\ttype: String,\n\t\tdefault: null,\n\t},\n\n\t/**\n\t * Set to true to prevent the close button to be shown\n\t */\n\tnoClose: {\n\t\ttype: Boolean,\n\t\tdefault: false,\n\t},\n\n\t/**\n\t * Set the chips design variant-\n\t *\n\t * This sets the background style of the chip, similar to NcButton's `variant`.\n\t *\n\t * @since 8.24.0\n\t */\n\tvariant: {\n\t\ttype: String,\n\t\tdefault: 'secondary',\n\t\tvalidator: (value) => ['primary', 'secondary', 'tertiary', 'error', 'warning', 'success'].includes(value),\n\t},\n})\n\nconst emit = defineEmits(['close'])\nconst slots = useSlots()\n\n// TODO: Replace with just `variant` in v9\nconst realVariant = computed(() => props.type !== 'secondary' ? props.type : props.variant)\n\nconst canClose = computed(() => !props.noClose)\nconst hasActions = () => Boolean(slots.actions?.())\nconst hasIcon = () => Boolean(props.iconPath || props.iconSvg || !!slots.icon?.())\n</script>\n\n<style scoped lang=\"scss\">\n.nc-chip {\n\t--chip-size: 24px;\n\t--chip-radius: calc(var(--chip-size) / 2);\n\t// Setup size of wrapper\n\theight: var(--chip-size);\n\tmax-width: fit-content;\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tborder-radius: var(--chip-radius);\n\tbackground-color: var(--color-background-hover);\n\n\t&--primary {\n\t\tbackground-color: var(--color-primary-element);\n\t\tcolor: var(--color-primary-element-text);\n\t}\n\n\t&--secondary {\n\t\tbackground-color: var(--color-primary-element-light);\n\t\tcolor: var(--color-primary-element-light-text);\n\t}\n\n\t&--error {\n\t\tbackground-color: var(--color-error);\n\t\tcolor: var(--color-error-text);\n\t}\n\n\t&--warning {\n\t\tbackground-color: var(--color-warning);\n\t\tcolor: var(--color-warning-text);\n\t}\n\n\t&--success {\n\t\tbackground-color: var(--color-success);\n\t\tcolor: var(--color-success-text);\n\t}\n\n\t&--no-actions &__text {\n\t\t// If there are no actions we need to add some padding to ensure the text is not cut-off\n\t\tpadding-inline-end: calc(2 * var(--default-grid-baseline));\n\t}\n\n\t&--no-icon &__text {\n\t\t// Add some more space to the border\n\t\tpadding-inline-start: calc(2 * var(--default-grid-baseline));\n\t}\n\n\t&__text {\n\t\t// Allow to grow the text\n\t\t// this is only used if an app forces a width of the chip\n\t\tflex: 1 auto;\n\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\ttext-wrap: nowrap;\n\t}\n\n\t&__icon {\n\t\t// Do neither grow nor shrink, size is fixed\n\t\tflex: 0 0 var(--chip-size);\n\t\tmargin-inline-end: var(--default-grid-baseline);\n\n\t\tline-height: 1;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\n\t\t// Force size\n\t\toverflow: hidden;\n\t\theight: var(--chip-size);\n\t\twidth: var(--chip-size);\n\t}\n\n\t&__actions {\n\t\t// Do neither grow nor shrink, size is fixed\n\t\tflex: 0 0 var(--chip-size);\n\t\t// Adjust action size to match chip size\n\t\t--default-clickable-area: var(--chip-size);\n\t\t--border-radius-element: var(--chip-radius);\n\t}\n}\n</style>\n"],"names":["useSlots","computed"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkNA,UAAM,QAAQA,IAAAA,SAAQ;AAGtB,UAAM,cAAcC,IAAAA,SAAS,MAAM,MAAM,SAAS,cAAc,MAAM,OAAO,MAAM,OAAO;AAE1F,UAAM,WAAWA,IAAAA,SAAS,MAAM,CAAC,MAAM,OAAO;AAC9C,UAAM,aAAa,MAAM,QAAQ,MAAM,UAAO,CAAI;AAClD,UAAM,UAAU,MAAM,QAAQ,MAAM,YAAY,MAAM,WAAW,CAAC,CAAC,MAAM,OAAI,CAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcChip.mjs

@@ -1,10 +1,10 @@
-import '../assets/NcChip-Cc17FJEC.css';
+import '../assets/NcChip-ByvuZS2-.css';
 import { c as mdiClose } from "../chunks/mdi-CKSXwCsV.mjs";
 import { useSlots, computed } from "vue";
-import { N as NcActionButton } from "../chunks/NcActionButton-CZsSFAT4.mjs";
-import { N as NcActions } from "../chunks/NcActions-A918mfXE.mjs";
-import { N as NcIconSvgWrapper } from "../chunks/NcIconSvgWrapper-BCVwmZN2.mjs";
-import { r as register, m as t18, a as t } from "../chunks/_l10n-DSLCwJSN.mjs";
+import { N as NcActionButton } from "../chunks/NcActionButton-CD1Z-o2Y.mjs";
+import { N as NcActions } from "../chunks/NcActions-BvFVkIzX.mjs";
+import { N as NcIconSvgWrapper } from "../chunks/NcIconSvgWrapper-BreCg8pX.mjs";
+import { r as register, m as t18, a as t } from "../chunks/_l10n-BWisB7-O.mjs";
 import { n as normalizeComponent } from "../chunks/_plugin-vue2_normalizer-DU4iP6Vu.mjs";
 register(t18);
 const _sfc_main = {
@@ -43,7 +43,7 @@ const _sfc_main = {
     type: {
       type: String,
       default: "secondary",
-      validator: (value) => ["primary", "secondary", "tertiary"].includes(value)
+      validator: (value) => ["primary", "secondary", "tertiary", "error", "warning", "success"].includes(value)
     },
     /**
      * SVG path of the icon to use, this takes precedence over `iconSVG`.
@@ -77,7 +77,7 @@ const _sfc_main = {
     variant: {
       type: String,
       default: "secondary",
-      validator: (value) => ["primary", "secondary", "tertiary"].includes(value)
+      validator: (value) => ["primary", "secondary", "tertiary", "error", "warning", "success"].includes(value)
     }
   },
   emits: ["close"],
@@ -86,21 +86,15 @@ const _sfc_main = {
     const slots = useSlots();
     const realVariant = computed(() => props.type !== "secondary" ? props.type : props.variant);
     const canClose = computed(() => !props.noClose);
-    const hasActions = () => {
-      var _a;
-      return Boolean((_a = slots.actions) == null ? void 0 : _a.call(slots));
-    };
-    const hasIcon = () => {
-      var _a;
-      return Boolean(props.iconPath || props.iconSvg || !!((_a = slots.icon) == null ? void 0 : _a.call(slots)));
-    };
+    const hasActions = () => Boolean(slots.actions?.());
+    const hasIcon = () => Boolean(props.iconPath || props.iconSvg || !!slots.icon?.());
     return { __sfc: true, props, emit, slots, realVariant, canClose, hasActions, hasIcon, mdiClose, NcActionButton, NcActions, NcIconSvgWrapper };
   }
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
   return _c("div", { staticClass: "nc-chip", class: {
-    ["nc-chip--".concat(_setup.realVariant)]: true,
+    [`nc-chip--${_setup.realVariant}`]: true,
     "nc-chip--no-actions": _vm.noClose && !_setup.hasActions(),
     "nc-chip--no-icon": !_setup.hasIcon()
   } }, [_setup.hasIcon() ? _c("span", { staticClass: "nc-chip__icon" }, [_vm._t("icon", function() {
@@ -120,7 +114,7 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "522528d5"
+  "88e86387"
 );
 const NcChip = __component__.exports;
 export {

package/dist/Components/NcChip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcChip.mjs","sources":["../../src/components/NcChip/NcChip.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n<docs>\n### Basic usage\n\n```vue\n<template>\n\t<div style=\"display: flex; gap: 8px; flex-wrap: wrap;\">\n\t\t<NcChip text=\"Notes.txt\" />\n\t\t<NcChip text=\"Files\" :icon-path=\"mdiFile\" />\n\t\t<NcChip text=\"Color\" :icon-path=\"mdiPalette\" variant=\"tertiary\" />\n\t\t<NcChip text=\"Current time\" :icon-path=\"mdiClock\" no-close variant=\"primary\" />\n\t</div>\n</template>\n<script>\nimport { mdiClock, mdiFile, mdiPalette } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tmdiClock,\n\t\t\tmdiFile,\n\t\t\tmdiPalette,\n\t\t}\n\t}\n}\n</script>\n```\n\n### Advanced usage\n\nIt is also possible to use custom components for the icon by using the `icon` slot.\nIn this example we are using the `NcAvatar` component to render the users avatar as the icon.\n\n*Hint: If you use round icons like avatars you should set their size to `24px` (or use CSS variable `--chip-size`) to make them fully fill and align with the the chip*\n\nAlso it is possible to pass custom actions.\n\n```vue\n<template>\n\t<NcChip>\n\t\t<!-- The icon slot allow to use custom components as the chip icon -->\n\t\t<template #icon>\n\t\t\t<NcAvatar :size=\"24\" user=\"jdoe\" display-name=\"J. Doe\" />\n\t\t</template>\n\t\t<!-- The actions slot allows to add custom actions -->\n\t\t<template #actions>\n\t\t\t<NcActionButton>\n\t\t\t\t<template #icon>\n\t\t\t\t\t<ContactsIcon :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tAdd to contacts\n\t\t\t</NcActionButton>\n\t\t</template>\n\t\t<!-- The default slot can be used for add content, just like the `text` prop -->\n\t\tJ. Doe\n\t</NcChip>\n</template>\n<script>\nimport ContactsIcon from 'vue-material-design-icons/Contacts.vue'\nexport default {\n\tcomponents: {\n\t\tContactsIcon,\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<div\n\t\tclass=\"nc-chip\"\n\t\t:class=\"{\n\t\t\t[`nc-chip--${realVariant}`]: true,\n\t\t\t'nc-chip--no-actions': noClose && !hasActions(),\n\t\t\t'nc-chip--no-icon': !hasIcon(),\n\t\t}\">\n\t\t<span v-if=\"hasIcon()\" class=\"nc-chip__icon\">\n\t\t\t<!-- @slot The icon slot can be used to set the chip icon. Make sure that the icon is not exceeding a height of `24px`. For round icons a exact size of `24px` is recommended. -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<!-- The default icon wrapper uses a size of 18px to ensure the icon is not clipped by the round chip style -->\n\t\t\t\t<NcIconSvgWrapper\n\t\t\t\t\tv-if=\"iconPath || iconSvg\"\n\t\t\t\t\tinline\n\t\t\t\t\t:path=\"iconPath\"\n\t\t\t\t\t:svg=\"iconPath ? undefined : iconSvg\"\n\t\t\t\t\t:size=\"18\" />\n\t\t\t</slot>\n\t\t</span>\n\t\t<span class=\"nc-chip__text\">\n\t\t\t<!-- @slot The default slot can be used to set the text that is shown -->\n\t\t\t<slot>{{ text }}</slot>\n\t\t</span>\n\t\t<NcActions\n\t\t\tv-if=\"canClose || hasActions()\"\n\t\t\tclass=\"nc-chip__actions\"\n\t\t\t:container=\"actionsContainer\"\n\t\t\t:force-menu=\"!canClose\"\n\t\t\tvariant=\"tertiary-no-background\">\n\t\t\t<NcActionButton\n\t\t\t\tv-if=\"canClose\"\n\t\t\t\tclose-after-click\n\t\t\t\t@click=\"emit('close')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiClose\" :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t{{ ariaLabelClose }}\n\t\t\t</NcActionButton>\n\t\t\t<!-- @slot The actions slot can be used to add custom actions to the chips actions -->\n\t\t\t<slot name=\"actions\" />\n\t\t</NcActions>\n\t</div>\n</template>\n\n<script setup>\nimport { mdiClose } from '@mdi/js'\nimport { computed, useSlots } from 'vue'\nimport NcActionButton from '../NcActionButton/NcActionButton.vue'\nimport NcActions from '../NcActions/NcActions.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { t } from '../../l10n.js'\n\nconst props = defineProps({\n\t/**\n\t * aria label to set on the close button\n\t *\n\t * @default 'Close'\n\t */\n\tariaLabelClose: {\n\t\ttype: String,\n\t\tdefault: t('Close'),\n\t},\n\n\t/**\n\t * Container for the actions\n\t */\n\tactionsContainer: {\n\t\ttype: String,\n\t\tdefault: 'body',\n\t},\n\n\t/**\n\t * Main text of the chip.\n\t */\n\ttext: {\n\t\ttype: String,\n\t\tdefault: '',\n\t},\n\n\t/**\n\t * Set the chips design variant-\n\t *\n\t * This sets the background style of the chip, similar to NcButton's `variant`.\n\t *\n\t * @deprecated will be removed with v9 - use `variant` instead.\n\t */\n\ttype: {\n\t\ttype: String,\n\t\tdefault: 'secondary',\n\t\tvalidator: (value) => ['primary', 'secondary', 'tertiary'].includes(value),\n\t},\n\n\t/**\n\t * SVG path of the icon to use, this takes precedence over `iconSVG`.\n\t * For example icon paths from `@mdi/js` can be used.\n\t */\n\ticonPath: {\n\t\ttype: String,\n\t\tdefault: null,\n\t},\n\n\t/**\n\t * Inline SVG to use as the icon\n\t */\n\ticonSvg: {\n\t\ttype: String,\n\t\tdefault: null,\n\t},\n\n\t/**\n\t * Set to true to prevent the close button to be shown\n\t */\n\tnoClose: {\n\t\ttype: Boolean,\n\t\tdefault: false,\n\t},\n\n\t/**\n\t * Set the chips design variant-\n\t *\n\t * This sets the background style of the chip, similar to NcButton's `variant`.\n\t *\n\t * @since 8.24.0\n\t */\n\tvariant: {\n\t\ttype: String,\n\t\tdefault: 'secondary',\n\t\tvalidator: (value) => ['primary', 'secondary', 'tertiary'].includes(value),\n\t},\n})\n\nconst emit = defineEmits(['close'])\nconst slots = useSlots()\n\n// TODO: Replace with just `variant` in v9\nconst realVariant = computed(() => props.type !== 'secondary' ? props.type : props.variant)\n\nconst canClose = computed(() => !props.noClose)\nconst hasActions = () => Boolean(slots.actions?.())\nconst hasIcon = () => Boolean(props.iconPath || props.iconSvg || !!slots.icon?.())\n</script>\n\n<style scoped lang=\"scss\">\n.nc-chip {\n\t--chip-size: 24px;\n\t--chip-radius: calc(var(--chip-size) / 2);\n\t// Setup size of wrapper\n\theight: var(--chip-size);\n\tmax-width: fit-content;\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tborder-radius: var(--chip-radius);\n\tbackground-color: var(--color-background-hover);\n\n\t&--primary {\n\t\tbackground-color: var(--color-primary-element);\n\t\tcolor: var(--color-primary-element-text);\n\t}\n\n\t&--secondary {\n\t\tbackground-color: var(--color-primary-element-light);\n\t\tcolor: var(--color-primary-element-light-text);\n\t}\n\n\t&--no-actions &__text {\n\t\t// If there are no actions we need to add some padding to ensure the text is not cut-off\n\t\tpadding-inline-end: calc(1.5 * var(--default-grid-baseline));\n\t}\n\n\t&--no-icon &__text {\n\t\t// Add some more space to the border\n\t\tpadding-inline-start: calc(1.5 * var(--default-grid-baseline));\n\t}\n\n\t&__text {\n\t\t// Allow to grow the text\n\t\t// this is only used if an app forces a width of the chip\n\t\tflex: 1 auto;\n\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\ttext-wrap: nowrap;\n\t}\n\n\t&__icon {\n\t\t// Do neither grow nor shrink, size is fixed\n\t\tflex: 0 0 var(--chip-size);\n\t\tmargin-inline-end: var(--default-grid-baseline);\n\n\t\tline-height: 1;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\n\t\t// Force size\n\t\toverflow: hidden;\n\t\theight: var(--chip-size);\n\t\twidth: var(--chip-size);\n\t}\n\n\t&__actions {\n\t\t// Do neither grow nor shrink, size is fixed\n\t\tflex: 0 0 var(--chip-size);\n\t\t// Adjust action size to match chip size\n\t\t--default-clickable-area: var(--chip-size);\n\t\t--border-radius-element: var(--chip-radius);\n\t}\n}\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4MA,UAAM,QAAQ,SAAQ;AAGtB,UAAM,cAAc,SAAS,MAAM,MAAM,SAAS,cAAc,MAAM,OAAO,MAAM,OAAO;AAE1F,UAAM,WAAW,SAAS,MAAM,CAAC,MAAM,OAAO;AAC9C,UAAM,aAAa,MAAA;;AAAM,sBAAQ,WAAM,YAAN,8BAAiB;AAAA;AAClD,UAAM,UAAU,MAAA;;AAAM,qBAAQ,MAAM,YAAY,MAAM,WAAW,CAAC,GAAC,WAAM,SAAN,+BAAc;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcChip.mjs","sources":["../../src/components/NcChip/NcChip.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n<docs>\n### Basic usage\n\n```vue\n<template>\n\t<div style=\"display: flex; gap: 8px; flex-wrap: wrap;\">\n\t\t<NcChip text=\"Notes.txt\" />\n\t\t<NcChip text=\"Files\" :icon-path=\"mdiFile\" />\n\t\t<NcChip text=\"Color\" :icon-path=\"mdiPalette\" variant=\"tertiary\" />\n\t\t<NcChip text=\"Current time\" :icon-path=\"mdiClock\" no-close variant=\"primary\" />\n\t\t<NcChip text=\"Canceled\" :icon-path=\"mdiCancel\" variant=\"error\" no-close />\n\t\t<NcChip text=\"Open\" :icon-path=\"mdiCircle\" variant=\"success\" no-close />\n\t\t<NcChip text=\"Due tomorrow\" :icon-path=\"mdiAlertCircleOutline\" variant=\"warning\" no-close />\n\t</div>\n</template>\n<script>\nimport { mdiClock, mdiFile, mdiPalette, mdiCancel, mdiCircle, mdiAlertCircleOutline } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tmdiAlertCircleOutline,\n\t\t\tmdiCancel,\n\t\t\tmdiCircle,\n\t\t\tmdiClock,\n\t\t\tmdiFile,\n\t\t\tmdiPalette,\n\t\t}\n\t}\n}\n</script>\n```\n\n### Advanced usage\n\nIt is also possible to use custom components for the icon by using the `icon` slot.\nIn this example we are using the `NcAvatar` component to render the users avatar as the icon.\n\n*Hint: If you use round icons like avatars you should set their size to `24px` (or use CSS variable `--chip-size`) to make them fully fill and align with the the chip*\n\nAlso it is possible to pass custom actions.\n\n```vue\n<template>\n\t<NcChip>\n\t\t<!-- The icon slot allow to use custom components as the chip icon -->\n\t\t<template #icon>\n\t\t\t<NcAvatar :size=\"24\" user=\"jdoe\" display-name=\"J. Doe\" />\n\t\t</template>\n\t\t<!-- The actions slot allows to add custom actions -->\n\t\t<template #actions>\n\t\t\t<NcActionButton>\n\t\t\t\t<template #icon>\n\t\t\t\t\t<ContactsIcon :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tAdd to contacts\n\t\t\t</NcActionButton>\n\t\t</template>\n\t\t<!-- The default slot can be used for add content, just like the `text` prop -->\n\t\tJ. Doe\n\t</NcChip>\n</template>\n<script>\nimport ContactsIcon from 'vue-material-design-icons/Contacts.vue'\nexport default {\n\tcomponents: {\n\t\tContactsIcon,\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<div\n\t\tclass=\"nc-chip\"\n\t\t:class=\"{\n\t\t\t[`nc-chip--${realVariant}`]: true,\n\t\t\t'nc-chip--no-actions': noClose && !hasActions(),\n\t\t\t'nc-chip--no-icon': !hasIcon(),\n\t\t}\">\n\t\t<span v-if=\"hasIcon()\" class=\"nc-chip__icon\">\n\t\t\t<!-- @slot The icon slot can be used to set the chip icon. Make sure that the icon is not exceeding a height of `24px`. For round icons a exact size of `24px` is recommended. -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<!-- The default icon wrapper uses a size of 18px to ensure the icon is not clipped by the round chip style -->\n\t\t\t\t<NcIconSvgWrapper\n\t\t\t\t\tv-if=\"iconPath || iconSvg\"\n\t\t\t\t\tinline\n\t\t\t\t\t:path=\"iconPath\"\n\t\t\t\t\t:svg=\"iconPath ? undefined : iconSvg\"\n\t\t\t\t\t:size=\"18\" />\n\t\t\t</slot>\n\t\t</span>\n\t\t<span class=\"nc-chip__text\">\n\t\t\t<!-- @slot The default slot can be used to set the text that is shown -->\n\t\t\t<slot>{{ text }}</slot>\n\t\t</span>\n\t\t<NcActions\n\t\t\tv-if=\"canClose || hasActions()\"\n\t\t\tclass=\"nc-chip__actions\"\n\t\t\t:container=\"actionsContainer\"\n\t\t\t:force-menu=\"!canClose\"\n\t\t\tvariant=\"tertiary-no-background\">\n\t\t\t<NcActionButton\n\t\t\t\tv-if=\"canClose\"\n\t\t\t\tclose-after-click\n\t\t\t\t@click=\"emit('close')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiClose\" :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t{{ ariaLabelClose }}\n\t\t\t</NcActionButton>\n\t\t\t<!-- @slot The actions slot can be used to add custom actions to the chips actions -->\n\t\t\t<slot name=\"actions\" />\n\t\t</NcActions>\n\t</div>\n</template>\n\n<script setup>\nimport { mdiClose } from '@mdi/js'\nimport { computed, useSlots } from 'vue'\nimport NcActionButton from '../NcActionButton/NcActionButton.vue'\nimport NcActions from '../NcActions/NcActions.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { t } from '../../l10n.js'\n\nconst props = defineProps({\n\t/**\n\t * aria label to set on the close button\n\t *\n\t * @default 'Close'\n\t */\n\tariaLabelClose: {\n\t\ttype: String,\n\t\tdefault: t('Close'),\n\t},\n\n\t/**\n\t * Container for the actions\n\t */\n\tactionsContainer: {\n\t\ttype: String,\n\t\tdefault: 'body',\n\t},\n\n\t/**\n\t * Main text of the chip.\n\t */\n\ttext: {\n\t\ttype: String,\n\t\tdefault: '',\n\t},\n\n\t/**\n\t * Set the chips design variant-\n\t *\n\t * This sets the background style of the chip, similar to NcButton's `variant`.\n\t *\n\t * @deprecated will be removed with v9 - use `variant` instead.\n\t */\n\ttype: {\n\t\ttype: String,\n\t\tdefault: 'secondary',\n\t\tvalidator: (value) => ['primary', 'secondary', 'tertiary', 'error', 'warning', 'success'].includes(value),\n\t},\n\n\t/**\n\t * SVG path of the icon to use, this takes precedence over `iconSVG`.\n\t * For example icon paths from `@mdi/js` can be used.\n\t */\n\ticonPath: {\n\t\ttype: String,\n\t\tdefault: null,\n\t},\n\n\t/**\n\t * Inline SVG to use as the icon\n\t */\n\ticonSvg: {\n\t\ttype: String,\n\t\tdefault: null,\n\t},\n\n\t/**\n\t * Set to true to prevent the close button to be shown\n\t */\n\tnoClose: {\n\t\ttype: Boolean,\n\t\tdefault: false,\n\t},\n\n\t/**\n\t * Set the chips design variant-\n\t *\n\t * This sets the background style of the chip, similar to NcButton's `variant`.\n\t *\n\t * @since 8.24.0\n\t */\n\tvariant: {\n\t\ttype: String,\n\t\tdefault: 'secondary',\n\t\tvalidator: (value) => ['primary', 'secondary', 'tertiary', 'error', 'warning', 'success'].includes(value),\n\t},\n})\n\nconst emit = defineEmits(['close'])\nconst slots = useSlots()\n\n// TODO: Replace with just `variant` in v9\nconst realVariant = computed(() => props.type !== 'secondary' ? props.type : props.variant)\n\nconst canClose = computed(() => !props.noClose)\nconst hasActions = () => Boolean(slots.actions?.())\nconst hasIcon = () => Boolean(props.iconPath || props.iconSvg || !!slots.icon?.())\n</script>\n\n<style scoped lang=\"scss\">\n.nc-chip {\n\t--chip-size: 24px;\n\t--chip-radius: calc(var(--chip-size) / 2);\n\t// Setup size of wrapper\n\theight: var(--chip-size);\n\tmax-width: fit-content;\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tborder-radius: var(--chip-radius);\n\tbackground-color: var(--color-background-hover);\n\n\t&--primary {\n\t\tbackground-color: var(--color-primary-element);\n\t\tcolor: var(--color-primary-element-text);\n\t}\n\n\t&--secondary {\n\t\tbackground-color: var(--color-primary-element-light);\n\t\tcolor: var(--color-primary-element-light-text);\n\t}\n\n\t&--error {\n\t\tbackground-color: var(--color-error);\n\t\tcolor: var(--color-error-text);\n\t}\n\n\t&--warning {\n\t\tbackground-color: var(--color-warning);\n\t\tcolor: var(--color-warning-text);\n\t}\n\n\t&--success {\n\t\tbackground-color: var(--color-success);\n\t\tcolor: var(--color-success-text);\n\t}\n\n\t&--no-actions &__text {\n\t\t// If there are no actions we need to add some padding to ensure the text is not cut-off\n\t\tpadding-inline-end: calc(2 * var(--default-grid-baseline));\n\t}\n\n\t&--no-icon &__text {\n\t\t// Add some more space to the border\n\t\tpadding-inline-start: calc(2 * var(--default-grid-baseline));\n\t}\n\n\t&__text {\n\t\t// Allow to grow the text\n\t\t// this is only used if an app forces a width of the chip\n\t\tflex: 1 auto;\n\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\ttext-wrap: nowrap;\n\t}\n\n\t&__icon {\n\t\t// Do neither grow nor shrink, size is fixed\n\t\tflex: 0 0 var(--chip-size);\n\t\tmargin-inline-end: var(--default-grid-baseline);\n\n\t\tline-height: 1;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\n\t\t// Force size\n\t\toverflow: hidden;\n\t\theight: var(--chip-size);\n\t\twidth: var(--chip-size);\n\t}\n\n\t&__actions {\n\t\t// Do neither grow nor shrink, size is fixed\n\t\tflex: 0 0 var(--chip-size);\n\t\t// Adjust action size to match chip size\n\t\t--default-clickable-area: var(--chip-size);\n\t\t--border-radius-element: var(--chip-radius);\n\t}\n}\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkNA,UAAM,QAAQ,SAAQ;AAGtB,UAAM,cAAc,SAAS,MAAM,MAAM,SAAS,cAAc,MAAM,OAAO,MAAM,OAAO;AAE1F,UAAM,WAAW,SAAS,MAAM,CAAC,MAAM,OAAO;AAC9C,UAAM,aAAa,MAAM,QAAQ,MAAM,UAAO,CAAI;AAClD,UAAM,UAAU,MAAM,QAAQ,MAAM,YAAY,MAAM,WAAW,CAAC,CAAC,MAAM,OAAI,CAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcCollectionList.cjs

@@ -1,4 +1,4 @@
 "use strict";
-const NcCollectionList = require("../chunks/NcCollectionList-zAI6Ysc0.cjs");
+const NcCollectionList = require("../chunks/NcCollectionList-Br6V_EiM.cjs");
 module.exports = NcCollectionList.NcCollectionList;
 //# sourceMappingURL=NcCollectionList.cjs.map

package/dist/Components/NcCollectionList.mjs

@@ -1,4 +1,4 @@
-import { N } from "../chunks/NcCollectionList-w-7M5HGN.mjs";
+import { N } from "../chunks/NcCollectionList-D85QdobI.mjs";
 export {
   N as default
 };

package/dist/Components/NcColorPicker.cjs

@@ -1,4 +1,4 @@
 "use strict";
-const NcColorPicker = require("../chunks/NcColorPicker-F-UP8OaJ.cjs");
+const NcColorPicker = require("../chunks/NcColorPicker-Dg3d5_aQ.cjs");
 module.exports = NcColorPicker.NcColorPicker;
 //# sourceMappingURL=NcColorPicker.cjs.map

package/dist/Components/NcColorPicker.mjs

@@ -1,4 +1,4 @@
-import { N } from "../chunks/NcColorPicker-DpLU-oKM.mjs";
+import { N } from "../chunks/NcColorPicker-BoS26yac.mjs";
 export {
   N as default
 };

package/dist/Components/NcContent.cjs

@@ -1,4 +1,4 @@
 "use strict";
-const NcContent = require("../chunks/NcContent-DITvuNbF.cjs");
+const NcContent = require("../chunks/NcContent-BbPae-OV.cjs");
 module.exports = NcContent.NcContent;
 //# sourceMappingURL=NcContent.cjs.map

package/dist/Components/NcContent.mjs

@@ -1,4 +1,4 @@
-import { N } from "../chunks/NcContent-C0_AA_wt.mjs";
+import { N } from "../chunks/NcContent-D8OFKv52.mjs";
 export {
   N as default
 };

package/dist/Components/NcCounterBubble.cjs

@@ -1,4 +1,4 @@
 "use strict";
-const NcCounterBubble = require("../chunks/NcCounterBubble-B_H3NCef.cjs");
+const NcCounterBubble = require("../chunks/NcCounterBubble-hyvazclA.cjs");
 module.exports = NcCounterBubble.NcCounterBubble;
 //# sourceMappingURL=NcCounterBubble.cjs.map

package/dist/Components/NcCounterBubble.mjs

@@ -1,4 +1,4 @@
-import { N } from "../chunks/NcCounterBubble-BKPpoBiy.mjs";
+import { N } from "../chunks/NcCounterBubble-oxV8oMlX.mjs";
 export {
   N as default
 };

package/dist/Components/NcDashboardWidget.cjs

@@ -1,4 +1,4 @@
 "use strict";
-const NcDashboardWidget = require("../chunks/NcDashboardWidget--n1nzfhg.cjs");
+const NcDashboardWidget = require("../chunks/NcDashboardWidget-mEPmvuR0.cjs");
 module.exports = NcDashboardWidget.NcDashboardWidget;
 //# sourceMappingURL=NcDashboardWidget.cjs.map

package/dist/Components/NcDashboardWidget.mjs

@@ -1,4 +1,4 @@
-import { N } from "../chunks/NcDashboardWidget-CEL-DhKX.mjs";
+import { N } from "../chunks/NcDashboardWidget-SSlGHcII.mjs";
 export {
   N as default
 };

package/dist/Components/NcDashboardWidgetItem.cjs

@@ -1,4 +1,4 @@
 "use strict";
-const NcDashboardWidgetItem = require("../chunks/NcDashboardWidgetItem-loanO02A.cjs");
+const NcDashboardWidgetItem = require("../chunks/NcDashboardWidgetItem-C7AmqxH4.cjs");
 module.exports = NcDashboardWidgetItem.NcDashboardWidgetItem;
 //# sourceMappingURL=NcDashboardWidgetItem.cjs.map

package/dist/Components/NcDashboardWidgetItem.mjs

@@ -1,4 +1,4 @@
-import { N } from "../chunks/NcDashboardWidgetItem-DeQtScn8.mjs";
+import { N } from "../chunks/NcDashboardWidgetItem-BqlNJI6a.mjs";
 export {
   N as default
 };