@nextcloud/vue 8.0.0-beta.6 → 8.0.0-beta.8

package/dist/Components/NcListItem.mjs

@@ -1,67 +1,243 @@
-import "../assets/index9.css";
-import o from "./NcActions.mjs";
-import l from "./NcCounterBubble.mjs";
-import c from "./NcVNodes.mjs";
-import { t as r } from "../chunks/l10n-9a5a6afc.mjs";
-import { n as u } from "../chunks/_plugin-vue2_normalizer-5b4c43a4.mjs";
-const d = { name: "NcListItem", components: { NcActions: o, NcCounterBubble: l, NcVNodes: c }, props: { details: { type: String, default: "" }, name: { type: String, required: !0 }, exact: { type: Boolean, default: !1 }, to: { type: [String, Object], default: null }, href: { type: String, default: "#" }, anchorId: { type: String, default: "" }, bold: { type: Boolean, default: !1 }, compact: { type: Boolean, default: !1 }, active: { type: Boolean, default: !1 }, linkAriaLabel: { type: String, default: "" }, actionsAriaLabel: { type: String, default: "" }, counterNumber: { type: [Number, String], default: 0 }, counterType: { type: String, default: "", validator(t) {
-  return ["highlighted", "outlined", ""].indexOf(t) !== -1;
-} }, forceDisplayActions: { type: Boolean, default: !1 } }, emits: ["click", "update:menuOpen"], data() {
-  return { hovered: !1, focused: !1, hasActions: !1, hasSubname: !1, displayActionsOnHoverFocus: !1, menuOpen: !1, hasIndicator: !1 };
-}, computed: { hasDetails() {
-  return this.details !== "";
-}, oneLine() {
-  return !this.hasSubname && !this.showDetails;
-}, showAdditionalElements() {
-  return !this.displayActionsOnHoverFocus || this.forceDisplayActions;
-}, showDetails() {
-  return this.hasDetails && (!this.displayActionsOnHoverFocus || this.forceDisplayActions);
-}, computedActionsAriaLabel() {
-  return this.actionsAriaLabel || r('Actions for item with name "{name}"', { name: this.name });
-} }, watch: { menuOpen(t) {
-  !t && !this.hovered && (this.displayActionsOnHoverFocus = !1);
-} }, mounted() {
-  this.checkSlots();
-}, updated() {
-  this.checkSlots();
-}, methods: { onClick(t, e, i) {
-  this.$emit("click", t), !(t.metaKey || t.altKey || t.ctrlKey || t.shiftKey) && i && (e == null || e(t), t.preventDefault());
-}, handleMouseover() {
-  this.showActions(), this.hovered = !0;
-}, showActions() {
-  this.hasActions && (this.displayActionsOnHoverFocus = !0), this.hovered = !1;
-}, hideActions() {
-  this.displayActionsOnHoverFocus = !1;
-}, handleFocus() {
-  this.focused = !0, this.showActions();
-}, handleBlur() {
-  this.focused = !1;
-}, handleMouseleave() {
-  this.menuOpen || (this.displayActionsOnHoverFocus = !1), this.hovered = !1;
-}, handleTab(t) {
-  this.focused && this.hasActions ? (t.preventDefault(), this.$refs.actions.$refs.menuButton.$el.focus(), this.focused = !1) : this.displayActionsOnHoverFocus = !1;
-}, handleActionsUpdateOpen(t) {
-  this.menuOpen = t, this.$emit("update:menuOpen", t);
-}, checkSlots() {
-  this.hasActions !== !!this.$slots.actions && (this.hasActions = !!this.$slots.actions), this.hasSubname !== !!this.$slots.subname && (this.hasSubname = !!this.$slots.subname), this.hasIndicator !== !!this.$slots.indicator && (this.hasIndicator = !!this.$slots.indicator);
-} } };
-var h = function() {
+import "../assets/index-7768d5e5.css";
+import l from "./NcActions.mjs";
+import c from "./NcCounterBubble.mjs";
+import r from "./NcVNodes.mjs";
+import { t as u } from "../chunks/l10n-27a75c40.mjs";
+import { n as d } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+const h = {
+  name: "NcListItem",
+  components: {
+    NcActions: l,
+    NcCounterBubble: c,
+    NcVNodes: r
+  },
+  props: {
+    /**
+     * The details text displayed in the upper right part of the component
+     */
+    details: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Name (first line of text)
+     */
+    name: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Pass in `true` if you want the matching behavior to
+     * be non-inclusive: https://router.vuejs.org/api/#exact
+     */
+    exact: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * The route for the router link.
+     */
+    to: {
+      type: [String, Object],
+      default: null
+    },
+    /**
+     * The value for the external link
+     */
+    href: {
+      type: String,
+      default: "#"
+    },
+    /**
+     * Id for the `<a>` element
+     */
+    anchorId: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Make subname bold
+     */
+    bold: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Show the NcListItem in compact design
+     */
+    compact: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Toggle the active state of the component
+     */
+    active: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Aria label for the wrapper element
+     */
+    linkAriaLabel: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Aria label for the actions toggle
+     */
+    actionsAriaLabel: {
+      type: String,
+      default: ""
+    },
+    /**
+     * If different from 0 this component will display the
+     * NcCounterBubble component
+     */
+    counterNumber: {
+      type: [Number, String],
+      default: 0
+    },
+    /**
+     * Outlined or highlighted state of the counter
+     */
+    counterType: {
+      type: String,
+      default: "",
+      validator(i) {
+        return ["highlighted", "outlined", ""].indexOf(i) !== -1;
+      }
+    },
+    /**
+     * To be used only when the elements in the actions menu are very important
+     */
+    forceDisplayActions: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [
+    "click",
+    "update:menuOpen"
+  ],
+  data() {
+    return {
+      hovered: !1,
+      focused: !1,
+      hasActions: !1,
+      hasSubname: !1,
+      displayActionsOnHoverFocus: !1,
+      menuOpen: !1,
+      hasIndicator: !1
+    };
+  },
+  computed: {
+    hasDetails() {
+      return this.details !== "";
+    },
+    oneLine() {
+      return !this.hasSubname && !this.showDetails;
+    },
+    showAdditionalElements() {
+      return !this.displayActionsOnHoverFocus || this.forceDisplayActions;
+    },
+    showDetails() {
+      return this.hasDetails && (!this.displayActionsOnHoverFocus || this.forceDisplayActions);
+    },
+    computedActionsAriaLabel() {
+      return this.actionsAriaLabel || u('Actions for item with name "{name}"', { name: this.name });
+    }
+  },
+  watch: {
+    menuOpen(i) {
+      !i && !this.hovered && (this.displayActionsOnHoverFocus = !1);
+    }
+  },
+  mounted() {
+    this.checkSlots();
+  },
+  updated() {
+    this.checkSlots();
+  },
+  methods: {
+    /**
+     * Handle link click
+     *
+     * @param {PointerEvent} event - Native click event
+     * @param {Function} [navigate] - VueRouter link's navigate if any
+     * @param {string} [routerLinkHref] - VueRouter link's href
+     */
+    onClick(i, t, e) {
+      this.$emit("click", i), !(i.metaKey || i.altKey || i.ctrlKey || i.shiftKey) && e && (t == null || t(i), i.preventDefault());
+    },
+    handleMouseover() {
+      this.showActions(), this.hovered = !0;
+    },
+    showActions() {
+      this.hasActions && (this.displayActionsOnHoverFocus = !0), this.hovered = !1;
+    },
+    hideActions() {
+      this.displayActionsOnHoverFocus = !1;
+    },
+    /**
+     * Show actions upon focus
+     */
+    handleFocus() {
+      this.focused = !0, this.showActions();
+    },
+    handleBlur() {
+      this.focused = !1;
+    },
+    /**
+     * Hide the actions on mouseleave unless the menu is open
+     */
+    handleMouseleave() {
+      this.menuOpen || (this.displayActionsOnHoverFocus = !1), this.hovered = !1;
+    },
+    /**
+     * This method checks if the root element of the component is focused and
+     * if that's the case it focuses the actions button if available
+     *
+     * @param {Event} e the keydown event
+     */
+    handleTab(i) {
+      this.focused && this.hasActions ? (i.preventDefault(), this.$refs.actions.$refs.menuButton.$el.focus(), this.focused = !1) : this.displayActionsOnHoverFocus = !1;
+    },
+    handleActionsUpdateOpen(i) {
+      this.menuOpen = i, this.$emit("update:menuOpen", i);
+    },
+    // Check if subname and actions slots are populated
+    checkSlots() {
+      this.hasActions !== !!this.$slots.actions && (this.hasActions = !!this.$slots.actions), this.hasSubname !== !!this.$slots.subname && (this.hasSubname = !!this.$slots.subname), this.hasIndicator !== !!this.$slots.indicator && (this.hasIndicator = !!this.$slots.indicator);
+    }
+  }
+};
+var p = function() {
   var t = this, e = t._self._c;
-  return e(t.to ? "router-link" : "NcVNodes", { tag: "component", attrs: { custom: t.to ? !0 : null, to: t.to, exact: t.to ? t.exact : null }, scopedSlots: t._u([{ key: "default", fn: function({ href: i, navigate: a, isActive: n }) {
-    return [e("li", { staticClass: "list-item__wrapper", class: { "list-item__wrapper--active": n || t.active } }, [e("a", { ref: "list-item", staticClass: "list-item", attrs: { id: t.anchorId, href: i || t.href, target: t.href === "#" ? void 0 : "_blank", rel: t.href === "#" ? void 0 : "noopener noreferrer", "aria-label": t.linkAriaLabel }, on: { mouseover: t.handleMouseover, mouseleave: t.handleMouseleave, focus: t.handleFocus, blur: t.handleBlur, keydown: [function(s) {
+  return e(t.to ? "router-link" : "NcVNodes", { tag: "component", attrs: { custom: t.to ? !0 : null, to: t.to, exact: t.to ? t.exact : null }, scopedSlots: t._u([{ key: "default", fn: function({ href: n, navigate: o, isActive: a }) {
+    return [e("li", { staticClass: "list-item__wrapper", class: { "list-item__wrapper--active": a || t.active } }, [e("a", { ref: "list-item", staticClass: "list-item", attrs: { id: t.anchorId, href: n || t.href, target: t.href === "#" ? void 0 : "_blank", rel: t.href === "#" ? void 0 : "noopener noreferrer", "aria-label": t.linkAriaLabel }, on: { mouseover: t.handleMouseover, mouseleave: t.handleMouseleave, focus: t.handleFocus, blur: t.handleBlur, keydown: [function(s) {
       return !s.type.indexOf("key") && t._k(s.keyCode, "tab", 9, s.key, "Tab") || s.ctrlKey || s.shiftKey || s.altKey || s.metaKey ? null : t.handleTab.apply(null, arguments);
     }, function(s) {
       return !s.type.indexOf("key") && t._k(s.keyCode, "esc", 27, s.key, ["Esc", "Escape"]) ? null : t.hideActions.apply(null, arguments);
     }], click: function(s) {
-      return t.onClick(s, a, i);
-    } } }, [e("div", { staticClass: "list-item-content__wrapper", class: { "list-item-content__wrapper--compact": t.compact } }, [t._t("icon"), e("div", { staticClass: "list-item-content" }, [e("div", { staticClass: "list-item-content__main", class: { "list-item-content__main--oneline": t.oneLine } }, [e("div", { staticClass: "line-one" }, [e("span", { staticClass: "line-one__name" }, [t._v(" " + t._s(t.name) + " ")]), t.showDetails ? e("span", { staticClass: "line-one__details" }, [t._v(" " + t._s(t.details) + " ")]) : t._e()]), e("div", { staticClass: "line-two", class: { "line-two--bold": t.bold } }, [t.hasSubname ? e("span", { staticClass: "line-two__subname" }, [t._t("subname")], 2) : t._e(), t.counterNumber != 0 || t.hasIndicator ? e("span", { directives: [{ name: "show", rawName: "v-show", value: t.showAdditionalElements, expression: "showAdditionalElements" }], staticClass: "line-two__additional_elements" }, [t.counterNumber != 0 ? e("NcCounterBubble", { staticClass: "line-two__counter", attrs: { active: n || t.active, type: t.counterType } }, [t._v(" " + t._s(t.counterNumber) + " ")]) : t._e(), t.hasIndicator ? e("span", { staticClass: "line-two__indicator" }, [t._t("indicator")], 2) : t._e()], 1) : t._e()])]), t.forceDisplayActions ? t._e() : e("div", { directives: [{ name: "show", rawName: "v-show", value: t.displayActionsOnHoverFocus, expression: "displayActionsOnHoverFocus" }], staticClass: "list-item-content__actions", on: { click: function(s) {
+      return t.onClick(s, o, n);
+    } } }, [e("div", { staticClass: "list-item-content__wrapper", class: { "list-item-content__wrapper--compact": t.compact } }, [t._t("icon"), e("div", { staticClass: "list-item-content" }, [e("div", { staticClass: "list-item-content__main", class: { "list-item-content__main--oneline": t.oneLine } }, [e("div", { staticClass: "line-one" }, [e("span", { staticClass: "line-one__name" }, [t._v(" " + t._s(t.name) + " ")]), t.showDetails ? e("span", { staticClass: "line-one__details" }, [t._v(" " + t._s(t.details) + " ")]) : t._e()]), e("div", { staticClass: "line-two", class: { "line-two--bold": t.bold } }, [t.hasSubname ? e("span", { staticClass: "line-two__subname" }, [t._t("subname")], 2) : t._e(), t.counterNumber != 0 || t.hasIndicator ? e("span", { directives: [{ name: "show", rawName: "v-show", value: t.showAdditionalElements, expression: "showAdditionalElements" }], staticClass: "line-two__additional_elements" }, [t.counterNumber != 0 ? e("NcCounterBubble", { staticClass: "line-two__counter", attrs: { active: a || t.active, type: t.counterType } }, [t._v(" " + t._s(t.counterNumber) + " ")]) : t._e(), t.hasIndicator ? e("span", { staticClass: "line-two__indicator" }, [t._t("indicator")], 2) : t._e()], 1) : t._e()])]), t.forceDisplayActions ? t._e() : e("div", { directives: [{ name: "show", rawName: "v-show", value: t.displayActionsOnHoverFocus, expression: "displayActionsOnHoverFocus" }], staticClass: "list-item-content__actions", on: { click: function(s) {
       s.preventDefault(), s.stopPropagation();
-    } } }, [e("NcActions", { ref: "actions", attrs: { primary: n || t.active, "aria-label": t.computedActionsAriaLabel }, on: { "update:open": t.handleActionsUpdateOpen } }, [t._t("actions")], 2)], 1)]), t.forceDisplayActions ? e("div", { staticClass: "list-item-content__actions", on: { click: function(s) {
+    } } }, [e("NcActions", { ref: "actions", attrs: { primary: a || t.active, "aria-label": t.computedActionsAriaLabel }, on: { "update:open": t.handleActionsUpdateOpen } }, [t._t("actions")], 2)], 1)]), t.forceDisplayActions ? e("div", { staticClass: "list-item-content__actions", on: { click: function(s) {
       s.preventDefault(), s.stopPropagation();
-    } } }, [e("NcActions", { ref: "actions", attrs: { primary: n || t.active, "aria-label": t.computedActionsAriaLabel }, on: { "update:open": t.handleActionsUpdateOpen } }, [t._t("actions")], 2)], 1) : t._e()], 2), t.$slots.extra ? e("div", { staticClass: "list-item__extra" }, [t._t("extra")], 2) : t._e()])])];
+    } } }, [e("NcActions", { ref: "actions", attrs: { primary: a || t.active, "aria-label": t.computedActionsAriaLabel }, on: { "update:open": t.handleActionsUpdateOpen } }, [t._t("actions")], 2)], 1) : t._e()], 2), t.$slots.extra ? e("div", { staticClass: "list-item__extra" }, [t._t("extra")], 2) : t._e()])])];
   } }], null, !0) });
-}, p = [], m = u(d, h, p, !1, null, "425183ac", null, null);
-const w = m.exports;
+}, f = [], m = /* @__PURE__ */ d(
+  h,
+  p,
+  f,
+  !1,
+  null,
+  "425183ac",
+  null,
+  null
+);
+const k = m.exports;
 export {
-  w as default
+  k as default
 };

package/dist/Components/NcListItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcListItem.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcListItem.mjs","sources":["../../src/components/NcListItem/NcListItem.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2021 Marco Ambrosini <marcoambrosini@icloud.com>\n  -\n  - @author Marco Ambrosini <marcoambrosini@icloud.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n-->\n<docs>\n\n### Default Usage\n\n```vue\n<template>\n\t<ul>\n\t\t<NcListItem\n\t\t\t:name=\"'This is an active element'\"\n\t\t\t:bold=\"false\"\n\t\t\t:active=\"true\"\n\t\t\t:details=\"'1h'\"\n\t\t\t:counter-number=\"44\"\n\t\t\tcounterType=\"highlighted\"\n\t\t\tclass=\"active\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#fff\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\t:name=\"'Name of the element'\"\n\t\t\t:bold=\"false\"\n\t\t\t:force-display-actions=\"true\"\n\t\t\t:details=\"'1h'\"\n\t\t\t:counter-number=\"44\"\n\t\t\tcounterType=\"highlighted\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\t:name=\"'Name of the element'\"\n\t\t\t:bold=\"false\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#0082c9\"/>\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\t:name=\"'Name of the element'\"\n\t\t\t:bold=\"false\"\n\t\t\t:details=\"'1h'\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#0082c9\"/>\n\t\t\t</template>\n\t\t</NcListItem>\n\t</ul>\n</template>\n\n<script>\n\timport CheckboxBlankCircle from 'vue-material-design-icons/CheckboxBlankCircle'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tCheckboxBlankCircle,\n\t\t}\n\t}\n</script>\n\n```\n\n### NcListItem compact mode\n```\n<ul style=\"width: 350px;\">\n\t<NcListItem\n\t\t:name=\"'Name of the element'\"\n\t\t:counter-number=\"1\"\n\t\t:compact=\"true\" >\n\t\t<template #icon>\n\t\t\t<div class=\"icon-edit\" />\n\t\t</template>\n\t\t<template #subname>\n\t\t\tThis one is with subname\n\t\t</template>\n\t\t<template #actions>\n\t\t\t<NcActionButton>\n\t\t\t\tButton one\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton>\n\t\t\t\tButton two\n\t\t\t</NcActionButton>\n\t\t</template>\n\t</NcListItem>\n\t<NcListItem\n\t\t:name=\"'Name of the element'\"\n\t\t:compact=\"true\" >\n\t\t<template #icon>\n\t\t\t<div class=\"icon-edit\" />\n\t\t</template>\n\t</NcListItem>\n\t<NcListItem\n\t\t:name=\"'Name of the element'\"\n\t\t:counter-number=\"3\"\n\t\t:compact=\"true\" >\n\t\t<template #icon>\n\t\t\t<div class=\"icon-edit\" />\n\t\t</template>\n\t\t<template #subname>\n\t\t\tThis one is with subname\n\t\t</template>\n\t\t<template #actions>\n\t\t\t<NcActionButton>\n\t\t\t\tButton one\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton>\n\t\t\t\tButton two\n\t\t\t</NcActionButton>\n\t\t</template>\n\t</NcListItem>\n\t<NcListItem\n\t\t:name=\"'Name of the element'\"\n\t\t:compact=\"true\"\n\t\t:counter-number=\"4\"\n\t\thref=\"https://nextcloud.com\">\n\t\t<template #icon>\n\t\t\t<div class=\"icon-edit\" />\n\t\t</template>\n\t\t<template #subname>\n\t\t\tThis one is with an external link\n\t\t</template>\n\t</NcListItem>\n</ul>\n```\n</docs>\n\n<template>\n\t<!-- This wrapper can be either a router link or a `<li>` -->\n\t<component :is=\"to ? 'router-link' : 'NcVNodes'\"\n\t\tv-slot=\"{ href: routerLinkHref, navigate, isActive }\"\n\t\t:custom=\"to ? true : null\"\n\t\t:to=\"to\"\n\t\t:exact=\"to ? exact : null\">\n\t\t<li class=\"list-item__wrapper\"\n\t\t\t:class=\"{ 'list-item__wrapper--active' : isActive || active }\">\n\t\t\t<a :id=\"anchorId\"\n\t\t\t\tref=\"list-item\"\n\t\t\t\t:href=\"routerLinkHref || href\"\n\t\t\t\t:target=\"href === '#' ? undefined : '_blank'\"\n\t\t\t\t:rel=\"href === '#' ? undefined : 'noopener noreferrer'\"\n\t\t\t\tclass=\"list-item\"\n\t\t\t\t:aria-label=\"linkAriaLabel\"\n\t\t\t\t@mouseover=\"handleMouseover\"\n\t\t\t\t@mouseleave=\"handleMouseleave\"\n\t\t\t\t@focus=\"handleFocus\"\n\t\t\t\t@blur=\"handleBlur\"\n\t\t\t\t@keydown.tab.exact=\"handleTab\"\n\t\t\t\t@click=\"onClick($event, navigate, routerLinkHref)\"\n\t\t\t\t@keydown.esc=\"hideActions\">\n\n\t\t\t\t<div class=\"list-item-content__wrapper\"\n\t\t\t\t\t:class=\"{ 'list-item-content__wrapper--compact': compact }\">\n\t\t\t\t\t<!-- @slot This slot is used for the NcAvatar or icon -->\n\t\t\t\t\t<slot name=\"icon\" />\n\n\t\t\t\t\t<!-- Main content -->\n\t\t\t\t\t<div class=\"list-item-content\">\n\t\t\t\t\t\t<div class=\"list-item-content__main\"\n\t\t\t\t\t\t\t:class=\"{ 'list-item-content__main--oneline': oneLine }\">\n\n\t\t\t\t\t\t\t<!-- First line, name and details -->\n\t\t\t\t\t\t\t<div class=\"line-one\">\n\t\t\t\t\t\t\t\t<span class=\"line-one__name\">\n\t\t\t\t\t\t\t\t\t{{ name }}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t<span v-if=\"showDetails\"\n\t\t\t\t\t\t\t\t\tclass=\"line-one__details\">\n\t\t\t\t\t\t\t\t\t{{ details }}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t<!-- Second line, subname and counter -->\n\t\t\t\t\t\t\t<div class=\"line-two\"\n\t\t\t\t\t\t\t\t:class=\"{'line-two--bold': bold}\">\n\t\t\t\t\t\t\t\t<span v-if=\"hasSubname\" class=\"line-two__subname\">\n\t\t\t\t\t\t\t\t\t<!-- @slot Slot for the second line of the component -->\n\t\t\t\t\t\t\t\t\t<slot name=\"subname\" />\n\t\t\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t\t\t<!-- Counter and indicator -->\n\t\t\t\t\t\t\t\t<span v-if=\"counterNumber != 0 || hasIndicator\"\n\t\t\t\t\t\t\t\t\tv-show=\"showAdditionalElements\"\n\t\t\t\t\t\t\t\t\tclass=\"line-two__additional_elements\">\n\t\t\t\t\t\t\t\t\t<NcCounterBubble v-if=\"counterNumber != 0\"\n\t\t\t\t\t\t\t\t\t\t:active=\"isActive || active\"\n\t\t\t\t\t\t\t\t\t\tclass=\"line-two__counter\"\n\t\t\t\t\t\t\t\t\t\t:type=\"counterType\">\n\t\t\t\t\t\t\t\t\t\t{{ counterNumber }}\n\t\t\t\t\t\t\t\t\t</NcCounterBubble>\n\n\t\t\t\t\t\t\t\t\t<span v-if=\"hasIndicator\" class=\"line-two__indicator\">\n\t\t\t\t\t\t\t\t\t\t<!-- @slot This slot is used for some indicator in form of icon -->\n\t\t\t\t\t\t\t\t\t\t<slot name=\"indicator\" />\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<!-- Actions -->\n\t\t\t\t\t\t<div v-if=\"!forceDisplayActions\"\n\t\t\t\t\t\t\tv-show=\"displayActionsOnHoverFocus\"\n\t\t\t\t\t\t\tclass=\"list-item-content__actions\"\n\t\t\t\t\t\t\t@click.prevent.stop=\"\">\n\t\t\t\t\t\t\t<NcActions ref=\"actions\"\n\t\t\t\t\t\t\t\t:primary=\"isActive || active\"\n\t\t\t\t\t\t\t\t:aria-label=\"computedActionsAriaLabel\"\n\t\t\t\t\t\t\t\t@update:open=\"handleActionsUpdateOpen\">\n\t\t\t\t\t\t\t\t<!-- @slot Provide the actions for the right side quick menu -->\n\t\t\t\t\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t\t\t\t</NcActions>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<!-- Actions -->\n\t\t\t\t\t<div v-if=\"forceDisplayActions\"\n\t\t\t\t\t\tclass=\"list-item-content__actions\"\n\t\t\t\t\t\t@click.prevent.stop=\"\">\n\t\t\t\t\t\t<NcActions ref=\"actions\"\n\t\t\t\t\t\t\t:primary=\"isActive || active\"\n\t\t\t\t\t\t\t:aria-label=\"computedActionsAriaLabel\"\n\t\t\t\t\t\t\t@update:open=\"handleActionsUpdateOpen\">\n\t\t\t\t\t\t\t<!-- @slot Provide the actions for the right side quick menu -->\n\t\t\t\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t\t\t</NcActions>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t<!-- @slot Extra elements below the item -->\n\t\t\t\t<div v-if=\"$slots.extra\" class=\"list-item__extra\">\n\t\t\t\t\t<slot name=\"extra\" />\n\t\t\t\t</div>\n\t\t\t</a>\n\t\t</li>\n\t</component>\n</template>\n\n<script>\nimport NcActions from '../NcActions/index.js'\nimport NcCounterBubble from '../NcCounterBubble/index.js'\nimport NcVNodes from '../NcVNodes/index.js'\nimport { t } from '../../l10n.js'\n\nexport default {\n\tname: 'NcListItem',\n\n\tcomponents: {\n\t\tNcActions,\n\t\tNcCounterBubble,\n\t\tNcVNodes,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The details text displayed in the upper right part of the component\n\t\t */\n\t\tdetails: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Name (first line of text)\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 * Pass in `true` if you want the matching behavior to\n\t\t * be non-inclusive: https://router.vuejs.org/api/#exact\n\t\t */\n\t\texact: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * The route for the router link.\n\t\t */\n\t\tto: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * The value for the external link\n\t\t */\n\t\thref: {\n\t\t\ttype: String,\n\t\t\tdefault: '#',\n\t\t},\n\n\t\t/**\n\t\t * Id for the `<a>` element\n\t\t */\n\t\tanchorId: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Make subname bold\n\t\t */\n\t\tbold: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Show the NcListItem in compact design\n\t\t */\n\t\tcompact: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Toggle the active state of the component\n\t\t */\n\t\tactive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Aria label for the wrapper element\n\t\t */\n\t\tlinkAriaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Aria label for the actions toggle\n\t\t */\n\t\tactionsAriaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * If different from 0 this component will display the\n\t\t * NcCounterBubble component\n\t\t */\n\t\t counterNumber: {\n\t\t\t type: [Number, String],\n\t\t\t default: 0,\n\t\t },\n\n\t\t/**\n\t\t * Outlined or highlighted state of the counter\n\t\t */\n\t\tcounterType: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['highlighted', 'outlined', ''].indexOf(value) !== -1\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * To be used only when the elements in the actions menu are very important\n\t\t */\n\t\tforceDisplayActions: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t'click',\n\t\t'update:menuOpen',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\thovered: false,\n\t\t\tfocused: false,\n\t\t\thasActions: false,\n\t\t\thasSubname: false,\n\t\t\tdisplayActionsOnHoverFocus: false,\n\t\t\tmenuOpen: false,\n\t\t\thasIndicator: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\n\t\thasDetails() {\n\t\t\treturn this.details !== ''\n\t\t},\n\n\t\toneLine() {\n\t\t\treturn !this.hasSubname && !this.showDetails\n\t\t},\n\n\t\tshowAdditionalElements() {\n\t\t\treturn !this.displayActionsOnHoverFocus || this.forceDisplayActions\n\t\t},\n\n\t\tshowDetails() {\n\t\t\treturn this.hasDetails && (!this.displayActionsOnHoverFocus || this.forceDisplayActions)\n\t\t},\n\n\t\tcomputedActionsAriaLabel() {\n\t\t\treturn this.actionsAriaLabel || t('Actions for item with name \"{name}\"', { name: this.name })\n\t\t},\n\n\t},\n\n\twatch: {\n\n\t\tmenuOpen(newValue) {\n\t\t\t// A click outside both the menu and the root element hides the actions again\n\t\t\tif (!newValue && !this.hovered) {\n\t\t\t\tthis.displayActionsOnHoverFocus = false\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.checkSlots()\n\t},\n\n\tupdated() {\n\t\tthis.checkSlots()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Handle link click\n\t\t *\n\t\t * @param {PointerEvent} event - Native click event\n\t\t * @param {Function} [navigate] - VueRouter link's navigate if any\n\t\t * @param {string} [routerLinkHref] - VueRouter link's href\n\t\t */\n\t\tonClick(event, navigate, routerLinkHref) {\n\t\t\t// Always forward native event\n\t\t\tthis.$emit('click', event)\n\t\t\t// Do not navigate with control keys - it is opening in a new tab\n\t\t\tif (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Prevent default link behaviour if it's a router-link and navigate manually\n\t\t\tif (routerLinkHref) {\n\t\t\t\tnavigate?.(event)\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\n\t\thandleMouseover() {\n\t\t\tthis.showActions()\n\t\t\tthis.hovered = true\n\t\t},\n\n\t\tshowActions() {\n\t\t\tif (this.hasActions) {\n\t\t\t\tthis.displayActionsOnHoverFocus = true\n\t\t\t}\n\t\t\tthis.hovered = false\n\t\t},\n\n\t\thideActions() {\n\t\t\tthis.displayActionsOnHoverFocus = false\n\t\t},\n\n\t\t/**\n\t\t * Show actions upon focus\n\t\t */\n\t\thandleFocus() {\n\t\t\tthis.focused = true\n\t\t\tthis.showActions()\n\t\t},\n\n\t\thandleBlur() {\n\t\t\tthis.focused = false\n\t\t},\n\n\t\t/**\n\t\t * Hide the actions on mouseleave unless the menu is open\n\t\t */\n\t\thandleMouseleave() {\n\t\t\tif (!this.menuOpen) {\n\t\t\t\tthis.displayActionsOnHoverFocus = false\n\t\t\t}\n\t\t\tthis.hovered = false\n\t\t},\n\n\t\t/**\n\t\t * This method checks if the root element of the component is focused and\n\t\t * if that's the case it focuses the actions button if available\n\t\t *\n\t\t * @param {Event} e the keydown event\n\t\t */\n\t\thandleTab(e) {\n\t\t\tif (this.focused && this.hasActions) {\n\t\t\t\te.preventDefault()\n\t\t\t\tthis.$refs.actions.$refs.menuButton.$el.focus()\n\t\t\t\tthis.focused = false\n\t\t\t} else {\n\t\t\t\tthis.displayActionsOnHoverFocus = false\n\t\t\t}\n\t\t},\n\n\t\thandleActionsUpdateOpen(e) {\n\t\t\tthis.menuOpen = e\n\t\t\tthis.$emit('update:menuOpen', e)\n\t\t},\n\n\t\t// Check if subname and actions slots are populated\n\t\tcheckSlots() {\n\t\t\tif (this.hasActions !== !!this.$slots.actions) {\n\t\t\t\tthis.hasActions = !!this.$slots.actions\n\t\t\t}\n\t\t\tif (this.hasSubname !== !!this.$slots.subname) {\n\t\t\t\tthis.hasSubname = !!this.$slots.subname\n\t\t\t}\n\t\t\tif (this.hasIndicator !== !!this.$slots.indicator) {\n\t\t\t\tthis.hasIndicator = !!this.$slots.indicator\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.list-item__wrapper {\n\tposition: relative;\n\twidth: 100%;\n\n\t&--active,\n\t&:active,\n\t&.active {\n\t\t.list-item {\n\t\t\tbackground-color: var(--color-primary-element);\n\t\t}\n\n\t\t.line-one__name, .line-one__details {\n\t\t\tcolor: var(--color-primary-element-text) !important;\n\t\t}\n\n\t\t.line-two__subname {\n\t\t\tcolor: var(--color-primary-element-text) !important;\n\t\t}\n\t}\n}\n\n// NcListItem\n.list-item {\n\tdisplay: block;\n\tposition: relative;\n\tflex: 0 0 auto;\n\tjustify-content: flex-start;\n\tpadding: 8px;\n\t// Fix for border-radius being too large for 3-line entries like in Mail\n\t// 44px avatar size / 2 + 8px padding, and 2px for better visual quality\n\tborder-radius: 32px;\n\tmargin: 2px 0;\n\twidth: 100%;\n\tcursor: pointer;\n\ttransition: background-color var(--animation-quick) ease-in-out;\n\tlist-style: none;\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: var(--color-background-hover);\n\t}\n\n\t&-content__wrapper {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\theight: 48px;\n\n\t\t&--compact {\n\t\t\theight: 36px;\n\n\t\t\t.line-one, .line-two {\n\t\t\t\tmargin-top: -4px;\n\t\t\t\tmargin-bottom: -4px;\n\t\t\t}\n\t\t}\n\t}\n\n\t&-content {\n\t\tdisplay: flex;\n\t\tflex: 1 1 auto;\n\t\tjustify-content: space-between;\n\t\tpadding-left: 8px;\n\n\t\t&__main {\n\t\t\tflex: 1 1 auto;\n\t\t\twidth: 0;\n\t\t\tmargin: auto 0;\n\n\t\t\t&--oneline {\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\t&__actions {\n\t\t\tflex: 0 0 auto;\n\t\t\talign-self: center;\n\t\t\tjustify-content: center;\n\t\t\tmargin-left: 4px;\n\t\t}\n\t}\n\n\t&__extra {\n\t\tmargin-top: 4px;\n\t}\n}\n\n.line-one {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\twhite-space: nowrap;\n\tmargin: 0 auto 0 0;\n\toverflow: hidden;\n\n\t&__name {\n\t\toverflow: hidden;\n\t\tflex-grow: 1;\n\t\tcursor: pointer;\n\t\ttext-overflow: ellipsis;\n\t\tcolor: var(--color-main-text);\n\t\tfont-weight: bold;\n\t}\n\n\t&__details {\n\t\tcolor: var(--color-text-maxcontrast);\n\t\tmargin: 0 8px;\n\t\tfont-weight: normal;\n\t}\n}\n\n.line-two {\n\tdisplay: flex;\n\talign-items: flex-start;\n\tjustify-content: space-between;\n\twhite-space: nowrap;\n\t&--bold {\n\t\tfont-weight: bold;\n\t}\n\n\t&__subname {\n\t\toverflow: hidden;\n\t\tflex-grow: 1;\n\t\tcursor: pointer;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\n\t&__additional_elements {\n\t\tmargin: 2px 4px 0 4px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t&__indicator {\n\t\tmargin: 0 5px;\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","NcActions","NcCounterBubble","NcVNodes","value","t","newValue","event","navigate","routerLinkHref","e"],"mappings":";;;;;;AA4TA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,WAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,UAAAC;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,IAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,eAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAAC,GAAA;AACA,eAAA,CAAA,eAAA,YAAA,EAAA,EAAA,QAAAA,CAAA,MAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAA;AAAA,MACA,YAAA;AAAA,MACA,4BAAA;AAAA,MACA,UAAA;AAAA,MACA,cAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IAEA,aAAA;AACA,aAAA,KAAA,YAAA;AAAA,IACA;AAAA,IAEA,UAAA;AACA,aAAA,CAAA,KAAA,cAAA,CAAA,KAAA;AAAA,IACA;AAAA,IAEA,yBAAA;AACA,aAAA,CAAA,KAAA,8BAAA,KAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAA,KAAA,eAAA,CAAA,KAAA,8BAAA,KAAA;AAAA,IACA;AAAA,IAEA,2BAAA;AACA,aAAA,KAAA,oBAAAC,EAAA,uCAAA,EAAA,MAAA,KAAA,KAAA,CAAA;AAAA,IACA;AAAA,EAEA;AAAA,EAEA,OAAA;AAAA,IAEA,SAAAC,GAAA;AAEA,MAAA,CAAAA,KAAA,CAAA,KAAA,YACA,KAAA,6BAAA;AAAA,IAEA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,WAAA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,WAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,QAAAC,GAAAC,GAAAC,GAAA;AAIA,MAFA,KAAA,MAAA,SAAAF,CAAA,GAEA,EAAAA,EAAA,WAAAA,EAAA,UAAAA,EAAA,WAAAA,EAAA,aAIAE,MACAD,KAAA,QAAAA,EAAAD,IACAA,EAAA,eAAA;AAAA,IAEA;AAAA,IAEA,kBAAA;AACA,WAAA,YAAA,GACA,KAAA,UAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,MAAA,KAAA,eACA,KAAA,6BAAA,KAEA,KAAA,UAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,WAAA,6BAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AACA,WAAA,UAAA,IACA,KAAA,YAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,WAAA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAA;AACA,MAAA,KAAA,aACA,KAAA,6BAAA,KAEA,KAAA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,UAAAG,GAAA;AACA,MAAA,KAAA,WAAA,KAAA,cACAA,EAAA,eAAA,GACA,KAAA,MAAA,QAAA,MAAA,WAAA,IAAA,MAAA,GACA,KAAA,UAAA,MAEA,KAAA,6BAAA;AAAA,IAEA;AAAA,IAEA,wBAAAA,GAAA;AACA,WAAA,WAAAA,GACA,KAAA,MAAA,mBAAAA,CAAA;AAAA,IACA;AAAA;AAAA,IAGA,aAAA;AACA,MAAA,KAAA,eAAA,CAAA,CAAA,KAAA,OAAA,YACA,KAAA,aAAA,CAAA,CAAA,KAAA,OAAA,UAEA,KAAA,eAAA,CAAA,CAAA,KAAA,OAAA,YACA,KAAA,aAAA,CAAA,CAAA,KAAA,OAAA,UAEA,KAAA,iBAAA,CAAA,CAAA,KAAA,OAAA,cACA,KAAA,eAAA,CAAA,CAAA,KAAA,OAAA;AAAA,IAEA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcListItemIcon.cjs

@@ -1 +1,150 @@
-var h=require("../assets/index30.css");const a=require("../chunks/index-12fa9b26.cjs"),i=require("../chunks/index-df3f51c6.cjs"),r=require("./NcIconSvgWrapper.cjs");require("../chunks/IsMobileState-151fc57d.cjs"),require("@nextcloud/router"),/* empty css                                                                                    */const n=require("../chunks/_plugin-vue2_normalizer-764a4c12.cjs");require("linkify-string"),require("escape-html"),require("striptags"),require("vue");const o=8,s=32,u={name:"NcListItemIcon",components:{NcAvatar:a.NcAvatar,NcHighlight:i.NcHighlight,NcIconSvgWrapper:r},mixins:[a.userStatus],props:{name:{type:String,required:!0},subname:{type:String,default:""},icon:{type:String,default:""},iconSvg:{type:String,default:""},iconName:{type:String,default:""},search:{type:String,default:""},avatarSize:{type:Number,default:s},noMargin:{type:Boolean,default:!1},displayName:{type:String,default:null},isNoUser:{type:Boolean,default:!1},id:{type:String,default:null}},data(){return{margin:o}},computed:{hasIcon(){return this.icon!==""},hasIconSvg(){return this.iconSvg!==""},isValidSubname(){var t,e;return((e=(t=this.subname)==null?void 0:t.trim)==null?void 0:e.call(t))!==""},isSizeBigEnough(){return this.avatarSize>=s},cssVars(){const t=this.noMargin?0:this.margin;return{"--height":this.avatarSize+2*t+"px","--margin":this.margin+"px"}}},beforeMount(){!this.isNoUser&&!this.subname&&this.fetchUserStatus(this.user)}};var c=function(){var t=this,e=t._self._c;return e("span",t._g({staticClass:"option",style:t.cssVars,attrs:{id:t.id}},t.$listeners),[e("NcAvatar",t._b({staticClass:"option__avatar",attrs:{"disable-menu":!0,"disable-tooltip":!0,"display-name":t.displayName||t.name,"is-no-user":t.isNoUser,size:t.avatarSize}},"NcAvatar",t.$attrs,!1)),e("div",{staticClass:"option__details"},[e("NcHighlight",{staticClass:"option__lineone",attrs:{text:t.name,search:t.search}}),t.isValidSubname&&t.isSizeBigEnough?e("NcHighlight",{staticClass:"option__linetwo",attrs:{text:t.subname,search:t.search}}):t.hasStatus?e("span",[e("span",[t._v(t._s(t.userStatus.icon))]),e("span",[t._v(t._s(t.userStatus.message))])]):t._e()],1),t._t("default",function(){return[t.hasIconSvg?e("NcIconSvgWrapper",{staticClass:"option__icon",attrs:{svg:t.iconSvg,name:t.iconName}}):t.hasIcon?e("span",{staticClass:"icon option__icon",class:t.icon,attrs:{"aria-label":t.iconName}}):t._e()]})],2)},l=[],p=n.normalizeComponent(u,c,l,!1,null,"9b44a778",null,null);const g=p.exports;module.exports=g;
+var m = require("../assets/index-9354264c.css");
+const a = require("../chunks/index-2a5b8ace.cjs"), n = require("../chunks/index-e894376a.cjs"), r = require("./NcIconSvgWrapper.cjs");
+require("vue");
+require("@nextcloud/router");
+/* empty css                                                                                     */const o = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
+require("linkify-string");
+require("escape-html");
+require("striptags");
+const c = 8, i = 32, u = {
+  name: "NcListItemIcon",
+  components: {
+    NcAvatar: a.NcAvatar,
+    NcHighlight: n.NcHighlight,
+    NcIconSvgWrapper: r
+  },
+  mixins: [
+    a.userStatus
+  ],
+  props: {
+    /**
+     * Default first line text
+     */
+    name: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Secondary optional line
+     * Only visible on size of 32 and above
+     */
+    subname: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Icon class to be displayed at the end of the component
+     */
+    icon: {
+      type: String,
+      default: ""
+    },
+    /**
+     * SVG icon to be displayed at the end of the component
+     */
+    iconSvg: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Descriptive name for the icon
+     */
+    iconName: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Search within the highlight of name/subname
+     */
+    search: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Set a size in px that will define the avatar height/width
+     * and therefore, the height of the component
+     */
+    avatarSize: {
+      type: Number,
+      default: i
+    },
+    /**
+     * Disable the margins of this component.
+     * Useful for integration in `NcSelect` for example
+     */
+    noMargin: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * See the [Avatar](#Avatar) displayName prop
+     * Fallback to name
+     */
+    displayName: {
+      type: String,
+      default: null
+    },
+    /**
+     * See the [Avatar](#Avatar) isNoUser prop
+     * Enable/disable the UserStatus fetching
+     */
+    isNoUser: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Unique list item ID
+     */
+    id: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      margin: c
+    };
+  },
+  computed: {
+    hasIcon() {
+      return this.icon !== "";
+    },
+    hasIconSvg() {
+      return this.iconSvg !== "";
+    },
+    isValidSubname() {
+      var s, t;
+      return ((t = (s = this.subname) == null ? void 0 : s.trim) == null ? void 0 : t.call(s)) !== "";
+    },
+    isSizeBigEnough() {
+      return this.avatarSize >= i;
+    },
+    cssVars() {
+      const s = this.noMargin ? 0 : this.margin;
+      return {
+        "--height": this.avatarSize + 2 * s + "px",
+        "--margin": this.margin + "px"
+      };
+    }
+  },
+  beforeMount() {
+    !this.isNoUser && !this.subname && this.fetchUserStatus(this.user);
+  }
+};
+var l = function() {
+  var t = this, e = t._self._c;
+  return e("span", t._g({ staticClass: "option", style: t.cssVars, attrs: { id: t.id } }, t.$listeners), [e("NcAvatar", t._b({ staticClass: "option__avatar", attrs: { "disable-menu": !0, "disable-tooltip": !0, "display-name": t.displayName || t.name, "is-no-user": t.isNoUser, size: t.avatarSize } }, "NcAvatar", t.$attrs, !1)), e("div", { staticClass: "option__details" }, [e("NcHighlight", { staticClass: "option__lineone", attrs: { text: t.name, search: t.search } }), t.isValidSubname && t.isSizeBigEnough ? e("NcHighlight", { staticClass: "option__linetwo", attrs: { text: t.subname, search: t.search } }) : t.hasStatus ? e("span", [e("span", [t._v(t._s(t.userStatus.icon))]), e("span", [t._v(t._s(t.userStatus.message))])]) : t._e()], 1), t._t("default", function() {
+    return [t.hasIconSvg ? e("NcIconSvgWrapper", { staticClass: "option__icon", attrs: { svg: t.iconSvg, name: t.iconName } }) : t.hasIcon ? e("span", { staticClass: "icon option__icon", class: t.icon, attrs: { "aria-label": t.iconName } }) : t._e()];
+  })], 2);
+}, p = [], _ = /* @__PURE__ */ o.normalizeComponent(
+  u,
+  l,
+  p,
+  !1,
+  null,
+  "9b44a778",
+  null,
+  null
+);
+const g = _.exports;
+module.exports = g;

package/dist/Components/NcListItemIcon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcListItemIcon.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"NcListItemIcon.cjs","sources":["../../src/components/NcListItemIcon/NcListItemIcon.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n<docs>\n## This is used to display a avatar-name/subname + icon layout\nIt might be used for list rendering or within the multiselect for example\n\n> **Note:** Any binding will be forwarded on the Avatar component root\n\n```vue\n<NcListItemIcon name=\"User 1\" />\n<NcListItemIcon name=\"User 1\" subname=\"Hidden subname because size is too small\" :avatar-size=\"24\" />\n```\n```vue\n\t<template>\n\t\t<NcListItemIcon name=\"User 1\" :avatar-size=\"44\">\n\t\t\t<template>\n\t\t\t\t<Account :size=\"20\" />\n\t\t\t</template>\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport Account from 'vue-material-design-icons/Account'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tAccount,\n\t\t},\n\t}\n\t</script>\n```\n\n### With icon\n```vue\n\t<template>\n\t\t<NcListItemIcon name=\"Group 1\" subname=\"13 members\" :is-no-user=\"true\">\n\t\t\t<template>\n\t\t\t\t<AccountMultiple :size=\"20\" />\n\t\t\t</template>\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport AccountMultiple from 'vue-material-design-icons/AccountMultiple'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tAccountMultiple,\n\t\t},\n\t}\n\t</script>\n```\n\n### Searching\n```vue\n\t<template>\n\t\t<NcListItemIcon name=\"Test user 1\" subname=\"callmetest@domain.com\" search=\"test\" />\n\t\t<NcListItemIcon name=\"Testing admin\" subname=\"testme@example.com\" search=\"test\" />\n\t\t<NcListItemIcon name=\"Test group 2\" subname=\"loremipsum@domain.com\" :is-no-user=\"true\" search=\"test\">\n\t\t\t<template>\n\t\t\t\t<AccountMultiple :size=\"20\" />\n\t\t\t</template>\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport AccountMultiple from 'vue-material-design-icons/AccountMultiple'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tAccountMultiple,\n\t\t},\n\t}\n\t</script>\n```\n\n### With actions\n```vue\n\t<template>\n\t\t<NcListItemIcon name=\"Test user 1\" subname=\"callmetest@domain.com\">\n\t\t\t<NcActions>\n\t\t\t\t<NcActionButton @click=\"alert('Edit')\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tEdit\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton @click=\"alert('Delete')\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tDelete\n\t\t\t\t</NcActionButton>\n\t\t\t</NcActions>\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport Delete from 'vue-material-design-icons/Delete'\n\timport Pencil from 'vue-material-design-icons/Pencil'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tDelete,\n\t\t\tPencil,\n\t\t},\n\t}\n\t</script>\n```\n</docs>\n\n<template>\n\t<span :id=\"id\"\n\t\tclass=\"option\"\n\t\t:style=\"cssVars\"\n\t\tv-on=\"$listeners\">\n\t\t<NcAvatar v-bind=\"$attrs\"\n\t\t\t:disable-menu=\"true\"\n\t\t\t:disable-tooltip=\"true\"\n\t\t\t:display-name=\"displayName || name\"\n\t\t\t:is-no-user=\"isNoUser\"\n\t\t\t:size=\"avatarSize\"\n\t\t\tclass=\"option__avatar\" />\n\t\t<div class=\"option__details\">\n\t\t\t<NcHighlight class=\"option__lineone\"\n\t\t\t\t:text=\"name\"\n\t\t\t\t:search=\"search\" />\n\t\t\t<NcHighlight v-if=\"isValidSubname && isSizeBigEnough\"\n\t\t\t\tclass=\"option__linetwo\"\n\t\t\t\t:text=\"subname\"\n\t\t\t\t:search=\"search\" />\n\t\t\t<span v-else-if=\"hasStatus\">\n\t\t\t\t<span>{{ userStatus.icon }}</span>\n\t\t\t\t<span>{{ userStatus.message }}</span>\n\t\t\t</span>\n\t\t</div>\n\n\t\t<!-- @slot use this slot to add a custom icon or actions -->\n\t\t<slot>\n\t\t\t<NcIconSvgWrapper v-if=\"hasIconSvg\"\n\t\t\t\tclass=\"option__icon\"\n\t\t\t\t:svg=\"iconSvg\"\n\t\t\t\t:name=\"iconName\" />\n\t\t\t<span v-else-if=\"hasIcon\"\n\t\t\t\tclass=\"icon option__icon\"\n\t\t\t\t:class=\"icon\"\n\t\t\t\t:aria-label=\"iconName\" />\n\t\t</slot>\n\t</span>\n</template>\n\n<script>\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcHighlight from '../NcHighlight/index.js'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\n\nimport { userStatus } from '../../mixins/index.js'\n\n// global margin, ^2 ratio\nconst margin = 8\nconst defaultSize = 32\n\nexport default {\n\tname: 'NcListItemIcon',\n\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcHighlight,\n\t\tNcIconSvgWrapper,\n\t},\n\n\tmixins: [\n\t\tuserStatus,\n\t],\n\n\tprops: {\n\t\t/**\n\t\t * Default first line text\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 * Secondary optional line\n\t\t * Only visible on size of 32 and above\n\t\t */\n\t\tsubname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Icon class to be displayed at the end of the component\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 * SVG icon to be displayed at the end of the component\n\t\t */\n\t\ticonSvg: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Descriptive name for the icon\n\t\t */\n\t\ticonName: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Search within the highlight of name/subname\n\t\t */\n\t\tsearch: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Set a size in px that will define the avatar height/width\n\t\t * and therefore, the height of the component\n\t\t */\n\t\tavatarSize: {\n\t\t\ttype: Number,\n\t\t\tdefault: defaultSize,\n\t\t},\n\n\t\t/**\n\t\t * Disable the margins of this component.\n\t\t * Useful for integration in `NcSelect` for example\n\t\t */\n\t\tnoMargin: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * See the [Avatar](#Avatar) displayName prop\n\t\t * Fallback to name\n\t\t */\n\t\tdisplayName: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * See the [Avatar](#Avatar) isNoUser prop\n\t\t * Enable/disable the UserStatus fetching\n\t\t */\n\t\tisNoUser: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Unique list item ID\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tmargin,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\thasIcon() {\n\t\t\treturn this.icon !== ''\n\t\t},\n\n\t\thasIconSvg() {\n\t\t\treturn this.iconSvg !== ''\n\t\t},\n\n\t\tisValidSubname() {\n\t\t\treturn this.subname?.trim?.() !== ''\n\t\t},\n\n\t\tisSizeBigEnough() {\n\t\t\treturn this.avatarSize >= defaultSize\n\t\t},\n\n\t\tcssVars() {\n\t\t\t// Don't use margin to calculate the height if noMargin\n\t\t\tconst margin = this.noMargin ? 0 : this.margin\n\n\t\t\treturn {\n\t\t\t\t'--height': this.avatarSize + 2 * margin + 'px',\n\t\t\t\t'--margin': this.margin + 'px',\n\t\t\t}\n\t\t},\n\t},\n\n\tbeforeMount() {\n\t\t// If we don't have a subname and if this is a user\n\t\tif (!this.isNoUser && !this.subname) {\n\t\t\tthis.fetchUserStatus(this.user)\n\t\t}\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.option {\n\tdisplay: flex;\n\talign-items: center;\n\twidth: 100%;\n\theight: var(--height);\n\tcursor: inherit;\n\n\t&__avatar {\n\t\tmargin-right: var(--margin);\n\t}\n\n\t&__details {\n\t\tdisplay: flex;\n\t\tflex: 1 1;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\tmin-width: 0;\n\t}\n\n\t&__lineone {\n\t\tcolor: var(--color-main-text);\n\t}\n\n\t&__linetwo {\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\n\t&__lineone,\n\t&__linetwo {\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\tline-height: 1.1em;\n\t\tstrong {\n\t\t\tfont-weight: bold;\n\t\t}\n\t}\n\n\t&__icon {\n\t\twidth: $clickable-area;\n\t\theight: $clickable-area;\n\t\tcolor: var(--color-text-maxcontrast);\n\t\t&.icon {\n\t\t\tflex: 0 0 $clickable-area;\n\t\t\topacity: $opacity_normal;\n\t\t\tbackground-position: center;\n\t\t\tbackground-size: 16px;\n\t\t}\n\t}\n\n\t&__details,\n\t&__lineone,\n\t&__linetwo,\n\t&__icon {\n\t\tcursor: inherit;\n\t}\n}\n</style>\n"],"names":["margin","defaultSize","_sfc_main","Components_NcAvatar","Components_NcHighlight","Components_NcIconSvgWrapper","_b","_a"],"mappings":";;;;;;;;;AA8KA,MAAAA,IAAA,GACAC,IAAA,IAEAC,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAC,EAAA;AAAA,IACA,aAAAC,EAAA;AAAA,IACA,kBAAAC;AAAA,EACA;AAAA,EAEA,QAAA;AAAA,IACAF,EAAA;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,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAAF;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,QAAAD;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,UAAA;AACA,aAAA,KAAA,SAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA,KAAA,YAAA;AAAA,IACA;AAAA,IAEA,iBAAA;;AACA,eAAAM,KAAAC,IAAA,KAAA,YAAA,gBAAAA,EAAA,SAAA,gBAAAD,EAAA,KAAAC,QAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,cAAAN;AAAA,IACA;AAAA,IAEA,UAAA;AAEA,YAAAD,IAAA,KAAA,WAAA,IAAA,KAAA;AAEA,aAAA;AAAA,QACA,YAAA,KAAA,aAAA,IAAAA,IAAA;AAAA,QACA,YAAA,KAAA,SAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,cAAA;AAEA,IAAA,CAAA,KAAA,YAAA,CAAA,KAAA,WACA,KAAA,gBAAA,KAAA,IAAA;AAAA,EAEA;AACA;;;;;;;;;;;;;;;;;;"}