@nextcloud/vue 9.0.0-alpha.0 → 9.0.0-alpha.1

package/dist/chunks/{NcListItem-gdczIybY.mjs → NcListItem-vkgu6Biu.mjs}

@@ -1,17 +1,17 @@
-import "../assets/NcListItem--i7b67QY.css";
-import { N as O } from "./NcActions-6Yv0De7D.mjs";
+import "../assets/NcListItem-RylkggkP.css";
+import { N as g } from "./NcActions-76CtOBCq.mjs";
 import { N as B } from "./NcCounterBubble-w6SmwTWu.mjs";
-import D from "../Components/NcVNodes.mjs";
-import { r as C, h as F, a as I } from "./_l10n-JmazR_zZ.mjs";
-import { resolveComponent as b, openBlock as a, createBlock as A, resolveDynamicComponent as L, normalizeProps as M, guardReactiveProps as H, withCtx as h, createElementVNode as o, mergeProps as U, withKeys as v, withModifiers as f, normalizeClass as m, renderSlot as c, toDisplayString as y, createElementBlock as r, createCommentVNode as l, withDirectives as w, createTextVNode as K, vShow as k, createVNode as N } from "vue";
+import C from "../Components/NcVNodes.mjs";
+import { r as F, h as I, a as L } from "./_l10n-uuAvfQgY.mjs";
+import { resolveComponent as b, openBlock as n, createBlock as A, resolveDynamicComponent as M, normalizeProps as H, guardReactiveProps as U, withCtx as h, createElementVNode as o, mergeProps as K, withKeys as v, withModifiers as f, normalizeClass as m, renderSlot as r, toDisplayString as y, createElementBlock as c, createTextVNode as w, createCommentVNode as l, withDirectives as k, vShow as N, createVNode as S } from "vue";
 import { _ as T } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
-C(F);
+F(I);
 const V = {
   name: "NcListItem",
   components: {
-    NcActions: O,
+    NcActions: g,
     NcCounterBubble: B,
-    NcVNodes: D
+    NcVNodes: C
   },
   inheritAttrs: !1,
   props: {
@@ -127,13 +127,11 @@ const V = {
       hasSubname: !1,
       displayActionsOnHoverFocus: !1,
       menuOpen: !1,
-      hasIndicator: !1
+      hasIndicator: !1,
+      hasDetails: !1
     };
   },
   computed: {
-    hasDetails() {
-      return this.details !== "";
-    },
     oneLine() {
       return !this.hasSubname && !this.showDetails;
     },
@@ -141,10 +139,10 @@ const V = {
       return !this.displayActionsOnHoverFocus || this.forceDisplayActions;
     },
     showDetails() {
-      return this.hasDetails && (!this.displayActionsOnHoverFocus || this.forceDisplayActions);
+      return (this.details !== "" || this.hasDetails) && (!this.displayActionsOnHoverFocus || this.forceDisplayActions);
     },
     computedActionsAriaLabel() {
-      return this.actionsAriaLabel || I('Actions for item with name "{name}"', { name: this.name });
+      return this.actionsAriaLabel || L('Actions for item with name "{name}"', { name: this.name });
     }
   },
   watch: {
@@ -166,8 +164,8 @@ const V = {
      * @param {Function} [navigate] - VueRouter link's navigate if any
      * @param {string} [routerLinkHref] - VueRouter link's href
      */
-    onClick(e, i, t) {
-      this.$emit("click", e), !(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) && t && (i?.(e), e.preventDefault());
+    onClick(e, s, t) {
+      this.$emit("click", e), !(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) && t && (s == null || s(e), e.preventDefault());
     },
     handleMouseover() {
       this.showActions(), this.hovered = !0;
@@ -207,13 +205,13 @@ const V = {
     },
     // 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);
+      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), this.hasDetails !== !!this.$slots.details && (this.hasDetails = !!this.$slots.details);
     }
   }
-}, E = ["id", "href", "target", "rel", "aria-label", "onClick"], P = { class: "list-item-content" }, x = { class: "line-one" }, z = { class: "line-one__name" }, j = {
+}, E = ["id", "href", "target", "rel", "aria-label", "onClick"], P = { class: "list-item-content" }, z = { class: "line-one" }, j = { class: "line-one__name" }, q = {
   key: 0,
   class: "line-one__details"
-}, q = {
+}, x = {
   key: 0,
   class: "line-two__subname"
 }, R = {
@@ -226,111 +224,115 @@ const V = {
   key: 0,
   class: "list-item__extra"
 };
-function Q(e, i, t, W, d, s) {
-  const S = b("NcCounterBubble"), _ = b("NcActions");
-  return a(), A(L(t.to ? "router-link" : "NcVNodes"), M(H({ ...t.to && { custom: !0, to: t.to } })), {
-    default: h(({ href: p, navigate: g, isActive: u }) => [
-      o("li", U({
+function Q(e, s, t, W, d, i) {
+  const O = b("NcCounterBubble"), p = b("NcActions");
+  return n(), A(M(t.to ? "router-link" : "NcVNodes"), H(U({ ...t.to && { custom: !0, to: t.to } })), {
+    default: h(({ href: _, navigate: D, isActive: u }) => [
+      o("li", K({
         class: ["list-item__wrapper", { "list-item__wrapper--active": u || t.active }]
       }, e.$attrs), [
         o("a", {
           id: t.anchorId,
           ref: "list-item",
-          href: p || t.href,
+          href: _ || t.href,
           target: t.target || (t.href === "#" ? void 0 : "_blank"),
           rel: t.href === "#" ? void 0 : "noopener noreferrer",
           class: "list-item",
           "aria-label": t.linkAriaLabel,
-          onMouseover: i[2] || (i[2] = (...n) => s.handleMouseover && s.handleMouseover(...n)),
-          onMouseleave: i[3] || (i[3] = (...n) => s.handleMouseleave && s.handleMouseleave(...n)),
-          onFocus: i[4] || (i[4] = (...n) => s.handleFocus && s.handleFocus(...n)),
-          onBlur: i[5] || (i[5] = (...n) => s.handleBlur && s.handleBlur(...n)),
+          onMouseover: s[2] || (s[2] = (...a) => i.handleMouseover && i.handleMouseover(...a)),
+          onMouseleave: s[3] || (s[3] = (...a) => i.handleMouseleave && i.handleMouseleave(...a)),
+          onFocus: s[4] || (s[4] = (...a) => i.handleFocus && i.handleFocus(...a)),
+          onBlur: s[5] || (s[5] = (...a) => i.handleBlur && i.handleBlur(...a)),
           onKeydown: [
-            i[6] || (i[6] = v(f((...n) => s.handleTab && s.handleTab(...n), ["exact"]), ["tab"])),
-            i[7] || (i[7] = v((...n) => s.hideActions && s.hideActions(...n), ["esc"]))
+            s[6] || (s[6] = v(f((...a) => i.handleTab && i.handleTab(...a), ["exact"]), ["tab"])),
+            s[7] || (s[7] = v((...a) => i.hideActions && i.hideActions(...a), ["esc"]))
           ],
-          onClick: (n) => s.onClick(n, g, p)
+          onClick: (a) => i.onClick(a, D, _)
         }, [
           o("div", {
             class: m(["list-item-content__wrapper", { "list-item-content__wrapper--compact": t.compact }])
           }, [
-            c(e.$slots, "icon", {}, void 0, !0),
+            r(e.$slots, "icon", {}, void 0, !0),
             o("div", P, [
               o("div", {
-                class: m(["list-item-content__main", { "list-item-content__main--oneline": s.oneLine }])
+                class: m(["list-item-content__main", { "list-item-content__main--oneline": i.oneLine }])
               }, [
-                o("div", x, [
-                  o("span", z, y(t.name), 1),
-                  s.showDetails ? (a(), r("span", j, y(t.details), 1)) : l("", !0)
+                o("div", z, [
+                  o("span", j, y(t.name), 1),
+                  i.showDetails ? (n(), c("span", q, [
+                    r(e.$slots, "details", {}, () => [
+                      w(y(t.details), 1)
+                    ], !0)
+                  ])) : l("", !0)
                 ]),
                 o("div", {
                   class: m(["line-two", { "line-two--bold": t.bold }])
                 }, [
-                  d.hasSubname ? (a(), r("span", q, [
-                    c(e.$slots, "subname", {}, void 0, !0)
+                  d.hasSubname ? (n(), c("span", x, [
+                    r(e.$slots, "subname", {}, void 0, !0)
                   ])) : l("", !0),
-                  t.counterNumber != 0 || d.hasIndicator ? w((a(), r("span", R, [
-                    t.counterNumber != 0 ? (a(), A(S, {
+                  t.counterNumber != 0 || d.hasIndicator ? k((n(), c("span", R, [
+                    t.counterNumber != 0 ? (n(), A(O, {
                       key: 0,
                       active: u || t.active,
                       class: "line-two__counter",
                       type: t.counterType
                     }, {
                       default: h(() => [
-                        K(y(t.counterNumber), 1)
+                        w(y(t.counterNumber), 1)
                       ]),
                       _: 2
                     }, 1032, ["active", "type"])) : l("", !0),
-                    d.hasIndicator ? (a(), r("span", G, [
-                      c(e.$slots, "indicator", {}, void 0, !0)
+                    d.hasIndicator ? (n(), c("span", G, [
+                      r(e.$slots, "indicator", {}, void 0, !0)
                     ])) : l("", !0)
                   ], 512)), [
-                    [k, s.showAdditionalElements]
+                    [N, i.showAdditionalElements]
                   ]) : l("", !0)
                 ], 2)
               ], 2),
-              t.forceDisplayActions ? l("", !0) : w((a(), r("div", {
+              t.forceDisplayActions ? l("", !0) : k((n(), c("div", {
                 key: 0,
                 class: "list-item-content__actions",
-                onClick: i[0] || (i[0] = f(() => {
+                onClick: s[0] || (s[0] = f(() => {
                 }, ["prevent", "stop"]))
               }, [
-                N(_, {
+                S(p, {
                   ref: "actions",
                   primary: u || t.active,
-                  "aria-label": s.computedActionsAriaLabel,
-                  "onUpdate:open": s.handleActionsUpdateOpen
+                  "aria-label": i.computedActionsAriaLabel,
+                  "onUpdate:open": i.handleActionsUpdateOpen
                 }, {
                   default: h(() => [
-                    c(e.$slots, "actions", {}, void 0, !0)
+                    r(e.$slots, "actions", {}, void 0, !0)
                   ]),
                   _: 2
                 }, 1032, ["primary", "aria-label", "onUpdate:open"])
               ], 512)), [
-                [k, d.displayActionsOnHoverFocus]
+                [N, d.displayActionsOnHoverFocus]
               ])
             ]),
-            t.forceDisplayActions ? (a(), r("div", {
+            t.forceDisplayActions ? (n(), c("div", {
               key: 0,
               class: "list-item-content__actions",
-              onClick: i[1] || (i[1] = f(() => {
+              onClick: s[1] || (s[1] = f(() => {
               }, ["prevent", "stop"]))
             }, [
-              N(_, {
+              S(p, {
                 ref: "actions",
                 primary: u || t.active,
-                "aria-label": s.computedActionsAriaLabel,
-                "onUpdate:open": s.handleActionsUpdateOpen
+                "aria-label": i.computedActionsAriaLabel,
+                "onUpdate:open": i.handleActionsUpdateOpen
               }, {
                 default: h(() => [
-                  c(e.$slots, "actions", {}, void 0, !0)
+                  r(e.$slots, "actions", {}, void 0, !0)
                 ]),
                 _: 2
               }, 1032, ["primary", "aria-label", "onUpdate:open"])
             ])) : l("", !0)
           ], 2),
-          e.$slots.extra ? (a(), r("div", J, [
-            c(e.$slots, "extra", {}, void 0, !0)
+          e.$slots.extra ? (n(), c("div", J, [
+            r(e.$slots, "extra", {}, void 0, !0)
           ])) : l("", !0)
         ], 40, E)
       ], 16)
@@ -338,7 +340,7 @@ function Q(e, i, t, W, d, s) {
     _: 3
   }, 16);
 }
-const ie = /* @__PURE__ */ T(V, [["render", Q], ["__scopeId", "data-v-b73a6b3f"]]);
+const ie = /* @__PURE__ */ T(V, [["render", Q], ["__scopeId", "data-v-1f33651e"]]);
 export {
   ie as N
 };

package/dist/chunks/NcListItem-vkgu6Biu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcListItem-vkgu6Biu.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 with highlighted counter'\"\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\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=\"'This is an active element with outlined counter'\"\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=\"outlined\">\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=\"'This is an active element with normal counter'\"\n\t\t\t:bold=\"false\"\n\t\t\t:active=\"true\"\n\t\t\t:counter-number=\"44\">\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 #details>\n\t\t\t\t<LinkIcon :size=\"16\"/>\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 with highlighted counter'\"\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 with outlined counter'\"\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=\"outlined\">\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 with normal counter'\"\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\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 #details>\n\t\t\t\t<LinkIcon :size=\"16\"/>\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\timport LinkIcon from 'vue-material-design-icons/Link'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tCheckboxBlankCircle,\n\t\t\tLinkIcon,\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\tv-bind=\"{ ...to && { custom: true, to } }\">\n\t\t<li class=\"list-item__wrapper\"\n\t\t\t:class=\"{ 'list-item__wrapper--active' : isActive || active }\"\n\t\t\tv-bind=\"$attrs\">\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=\"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<!-- @slot This slot is used for some details in form of icon (prop `details` as a fallback) -->\n\t\t\t\t\t\t\t\t\t<slot name=\"details\">{{ details }}</slot>\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\tinheritAttrs: false,\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 * 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\ttarget: {\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\thasDetails: false,\n\t\t}\n\t},\n\n\tcomputed: {\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.details !== '' || this.hasDetails)\n\t\t\t\t&& (!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\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\tif (this.hasDetails !== !!this.$slots.details) {\n\t\t\t\tthis.hasDetails = !!this.$slots.details\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\t&:active,\n\t\t\t&:hover,\n\t\t\t&:focus,\n\t\t\t&:focus-visible {\n\t\t\t\tbackground-color: var(--color-primary-element-hover);\n\t\t\t}\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\tbox-sizing: border-box;\n\tdisplay: block;\n\tposition: relative;\n\tflex: 0 0 auto;\n\tjustify-content: flex-start;\n\tpadding: 8px 10px;\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&:active,\n\t&:hover,\n\t&:focus,\n\t&:focus-visible {\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 9px;\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","_sfc_main$1","value","t","newValue","event","navigate","routerLinkHref","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","withCtx","isActive","createElementVNode","mergeProps","$props","_cache","args","$options","withKeys","withModifiers","$event","normalizeClass","openBlock","createElementBlock","_hoisted_5","renderSlot","_ctx","createTextVNode","toDisplayString","createCommentVNode","_hoisted_6","$data","withDirectives","_hoisted_7","_hoisted_8","_hoisted_9"],"mappings":"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"}

package/dist/chunks/{NcListItemIcon-XsKTtITp.mjs → NcListItemIcon-130Lt3dW.mjs}

@@ -1,9 +1,9 @@
 import "../assets/NcListItemIcon-mlEQ7oK0.css";
-import { N as _, u as S } from "./NcAvatar-paLjF9Tc.mjs";
+import { N as _, u as S } from "./NcAvatar-JsMCceHU.mjs";
 import { _ as f } from "./NcHighlight-kWLldgWB.mjs";
-import { N } from "./NcIconSvgWrapper-gQnsseD2.mjs";
+import { N } from "./NcIconSvgWrapper-ACaaN_pS.mjs";
 import "@nextcloud/router";
-import { resolveComponent as i, openBlock as s, createElementBlock as r, normalizeStyle as y, createVNode as l, mergeProps as v, createElementVNode as o, createBlock as m, toDisplayString as u, createCommentVNode as h, renderSlot as I, normalizeClass as b } from "vue";
+import { resolveComponent as i, openBlock as n, createElementBlock as r, normalizeStyle as y, createVNode as l, mergeProps as v, createElementVNode as o, createBlock as m, toDisplayString as u, createCommentVNode as h, renderSlot as I, normalizeClass as b } from "vue";
 /* empty css                                                                          */
 import { _ as z } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
 import "linkify-string";
@@ -116,15 +116,16 @@ const k = 8, d = 32, B = {
       return this.iconSvg !== "";
     },
     isValidSubname() {
-      return this.subname?.trim?.() !== "";
+      var e, a;
+      return ((a = (e = this.subname) == null ? void 0 : e.trim) == null ? void 0 : a.call(e)) !== "";
     },
     isSizeBigEnough() {
       return this.avatarSize >= d;
     },
     cssVars() {
-      const t = this.noMargin ? 0 : this.margin;
+      const e = this.noMargin ? 0 : this.margin;
       return {
-        "--height": this.avatarSize + 2 * t + "px",
+        "--height": this.avatarSize + 2 * e + "px",
         "--margin": this.margin + "px"
       };
     },
@@ -133,55 +134,55 @@ const k = 8, d = 32, B = {
      * @return {[string, string]}
      */
     searchParts() {
-      const t = /^([^<]*)<([^>]+)>?$/, n = this.search.match(t);
-      return this.isNoUser || !n ? [this.search, this.search] : [n[1].trim(), n[2]];
+      const e = /^([^<]*)<([^>]+)>?$/, a = this.search.match(e);
+      return this.isNoUser || !a ? [this.search, this.search] : [a[1].trim(), a[2]];
     }
   },
   beforeMount() {
     !this.isNoUser && !this.subname && this.fetchUserStatus(this.user);
   }
 }, V = ["id"], x = { class: "option__details" }, A = { key: 1 }, E = ["aria-label"];
-function U(t, n, e, M, P, a) {
+function U(e, a, t, M, P, s) {
   const g = i("NcAvatar"), c = i("NcHighlight"), p = i("NcIconSvgWrapper");
-  return s(), r("span", {
-    id: e.id,
+  return n(), r("span", {
+    id: t.id,
     class: "option",
-    style: y(a.cssVars)
+    style: y(s.cssVars)
   }, [
-    l(g, v(t.$attrs, {
+    l(g, v(e.$attrs, {
       "disable-menu": !0,
       "disable-tooltip": !0,
-      "display-name": e.displayName || e.name,
-      "is-no-user": e.isNoUser,
-      size: e.avatarSize,
+      "display-name": t.displayName || t.name,
+      "is-no-user": t.isNoUser,
+      size: t.avatarSize,
       class: "option__avatar"
     }), null, 16, ["display-name", "is-no-user", "size"]),
     o("div", x, [
       l(c, {
         class: "option__lineone",
-        text: e.name,
-        search: a.searchParts[0]
+        text: t.name,
+        search: s.searchParts[0]
       }, null, 8, ["text", "search"]),
-      a.isValidSubname && a.isSizeBigEnough ? (s(), m(c, {
+      s.isValidSubname && s.isSizeBigEnough ? (n(), m(c, {
         key: 0,
         class: "option__linetwo",
-        text: e.subname,
-        search: a.searchParts[1]
-      }, null, 8, ["text", "search"])) : t.hasStatus ? (s(), r("span", A, [
-        o("span", null, u(t.userStatus.icon), 1),
-        o("span", null, u(t.userStatus.message), 1)
+        text: t.subname,
+        search: s.searchParts[1]
+      }, null, 8, ["text", "search"])) : e.hasStatus ? (n(), r("span", A, [
+        o("span", null, u(e.userStatus.icon), 1),
+        o("span", null, u(e.userStatus.message), 1)
       ])) : h("", !0)
     ]),
-    I(t.$slots, "default", {}, () => [
-      a.hasIconSvg ? (s(), m(p, {
+    I(e.$slots, "default", {}, () => [
+      s.hasIconSvg ? (n(), m(p, {
         key: 0,
         class: "option__icon",
-        svg: e.iconSvg,
-        name: e.iconName
-      }, null, 8, ["svg", "name"])) : a.hasIcon ? (s(), r("span", {
+        svg: t.iconSvg,
+        name: t.iconName
+      }, null, 8, ["svg", "name"])) : s.hasIcon ? (n(), r("span", {
         key: 1,
-        class: b(["icon option__icon", e.icon]),
-        "aria-label": e.iconName
+        class: b(["icon option__icon", t.icon]),
+        "aria-label": t.iconName
       }, null, 10, E)) : h("", !0)
     ], !0)
   ], 12, V);

package/dist/chunks/{NcListItemIcon-XsKTtITp.mjs.map → NcListItemIcon-130Lt3dW.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcListItemIcon-XsKTtITp.mjs","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<Account :size=\"20\" />\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<AccountMultiple :size=\"20\" />\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<AccountMultiple :size=\"20\" />\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\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=\"searchParts[0]\" />\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=\"searchParts[1]\" />\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\n\t\t/**\n\t\t * Seperates the search property into two parts, the first one is the search part on the name, the second on the subname.\n\t\t * @return {[string, string]}\n\t\t */\n\t\tsearchParts() {\n\t\t\t// Match the email notation like \"Jane <j.doe@example.com>\" with the email address as matching group\n\t\t\tconst EMAIL_NOTATION = /^([^<]*)<([^>]+)>?$/\n\n\t\t\tconst match = this.search.match(EMAIL_NOTATION)\n\t\t\tif (this.isNoUser || !match) {\n\t\t\t\treturn [this.search, this.search]\n\t\t\t}\n\t\t\treturn [match[1].trim(), match[2]]\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","NcAvatar","NcIconSvgWrapper","EMAIL_NOTATION","match","_hoisted_1","_hoisted_2","_hoisted_4","$props","createElementVNode","$options","openBlock","createElementBlock","_hoisted_3","createCommentVNode","renderSlot","_ctx","normalizeClass"],"mappings":";;;;;;;;;;;AAuKA,MAAAA,IAAA,GACAC,IAAA,IAEAC,IAAA;AAAA,EACC,MAAA;AAAA;IAGC,UAAAC;AAAA;IAEA,kBAAAC;AAAA;EAGD,QAAA;AAAA;;EAIA,OAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;IAaC,SAAA;AAAA;;;;;;;;;;;;;IAgBA,SAAA;AAAA;;;;;;IAQA,UAAA;AAAA;;;;;;IAQA,QAAA;AAAA;;;;;;;;;MAWC,SAAAH;AAAA;;;;;IAOD,UAAA;AAAA;;;;;;;;;;;;;;;IAiBA,UAAA;AAAA;;;;;;IAQA,IAAA;AAAA;;;;EAMD,OAAA;AACC,WAAA;AAAA,MACC,QAAAD;AAAA,IACD;AAAA;EAGD,UAAA;AAAA,IACC,UAAA;AACC,aAAA,KAAA,SAAA;AAAA;;;;IAOD,iBAAA;AACC,aAAA,KAAA,SAAA,OAAA,MAAA;AAAA;IAGD,kBAAA;AACC,aAAA,KAAA,cAAAC;AAAA;IAGD,UAAA;AAEC,YAAAD,IAAA,KAAA,WAAA,IAAA,KAAA;AAEA,aAAA;AAAA,QACC,YAAA,KAAA,aAAA,IAAAA,IAAA;AAAA;MAED;AAAA;;;;;;AASA,YAAAK,IAAA,uBAEAC,IAAA,KAAA,OAAA,MAAAD,CAAA;mCAEC,CAAA,KAAA,QAAA,KAAA,MAAA,IAED,CAAAC,EAAA,CAAA,EAAA,KAAA,GAAAA,EAAA,CAAA,CAAA;AAAA;;;AAMD,IAAA,CAAA,KAAA,YAAA,CAAA,KAAA,WACC,KAAA,gBAAA,KAAA,IAAA;AAAA;AAGH,GA5UAC,IAAA,CAAA,IAAA,GAmIOC,IAAA,EAAA,OAAA,kBAAA,mBAnIPC,IAAA,CAAA,YAAA;;;;IAyHQ,IAAAC,EAAA;AAAA,IACN,OAAA;AAAA;;;MAGE,gBAAA;AAAA,MACA,mBAAA;AAAA;MAEA,cAAAA,EAAA;AAAA,MACA,MAAAA,EAAA;AAAA,MACD,OAAA;AAAA;IACDC,EAAA,OAAAH,GAAA;AAAA;QACc,OAAA;AAAA,QACX,MAAAE,EAAA;AAAA,QACA,QAAAE,EAAA,YAAA,CAAA;AAAA;MACiBA,EAAA,kBAAAA,EAAA;;QAClB,OAAA;AAAA,QACC,MAAAF,EAAA;AAAA,QACA,QAAAE,EAAA,YAAA,CAAA;AAAA,wDACFC,EAAA,GAAAC,EAAA,QAAAC,GAAA;AAAA;;YA3IHC,EAAA,IAAA,EAAA;AAAA;IAkJEC,EAAAC,EAAA,QAAA,WAAA,CAAA,GAAA,MAAA;AAAA;;QAEE,OAAA;AAAA,QACC,KAAAR,EAAA;AAAA,QACA,MAAAA,EAAA;AAAA;;QAED,OAAAS,EAAA,CAAA,qBAAAT,EAAA,IAAA,CAAA;AAAA,QAEC,cAAAA,EAAA;AAAA,MA1JL,GAAA,MAAA,IAAAD,CAAA,KAAAO,EAAA,IAAA,EAAA;AAAA;EAAA,GAAA,IAAAT,CAAA;;;"}
+{"version":3,"file":"NcListItemIcon-130Lt3dW.mjs","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<Account :size=\"20\" />\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<AccountMultiple :size=\"20\" />\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<AccountMultiple :size=\"20\" />\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\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=\"searchParts[0]\" />\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=\"searchParts[1]\" />\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\n\t\t/**\n\t\t * Seperates the search property into two parts, the first one is the search part on the name, the second on the subname.\n\t\t * @return {[string, string]}\n\t\t */\n\t\tsearchParts() {\n\t\t\t// Match the email notation like \"Jane <j.doe@example.com>\" with the email address as matching group\n\t\t\tconst EMAIL_NOTATION = /^([^<]*)<([^>]+)>?$/\n\n\t\t\tconst match = this.search.match(EMAIL_NOTATION)\n\t\t\tif (this.isNoUser || !match) {\n\t\t\t\treturn [this.search, this.search]\n\t\t\t}\n\t\t\treturn [match[1].trim(), match[2]]\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","NcAvatar","NcIconSvgWrapper","_b","_a","EMAIL_NOTATION","match","_hoisted_1","_hoisted_2","_hoisted_4","$props","createElementVNode","$options","openBlock","createElementBlock","_hoisted_3","createCommentVNode","renderSlot","_ctx","normalizeClass"],"mappings":";;;;;;;;;;;AAuKA,MAAAA,IAAA,GACAC,IAAA,IAEAC,IAAA;AAAA,EACC,MAAA;AAAA;IAGC,UAAAC;AAAA;IAEA,kBAAAC;AAAA;EAGD,QAAA;AAAA;;EAIA,OAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;IAaC,SAAA;AAAA;;;;;;;;;;;;;IAgBA,SAAA;AAAA;;;;;;IAQA,UAAA;AAAA;;;;;;IAQA,QAAA;AAAA;;;;;;;;;MAWC,SAAAH;AAAA;;;;;IAOD,UAAA;AAAA;;;;;;;;;;;;;;;IAiBA,UAAA;AAAA;;;;;;IAQA,IAAA;AAAA;;;;EAMD,OAAA;AACC,WAAA;AAAA,MACC,QAAAD;AAAA,IACD;AAAA;EAGD,UAAA;AAAA,IACC,UAAA;AACC,aAAA,KAAA,SAAA;AAAA;;;;IAOD,iBAAA;;AACC,eAAAK,KAAAC,IAAA,KAAA,YAAA,gBAAAA,EAAA,SAAA,gBAAAD,EAAA,KAAAC,QAAA;AAAA;IAGD,kBAAA;AACC,aAAA,KAAA,cAAAL;AAAA;IAGD,UAAA;AAEC,YAAAD,IAAA,KAAA,WAAA,IAAA,KAAA;AAEA,aAAA;AAAA,QACC,YAAA,KAAA,aAAA,IAAAA,IAAA;AAAA;MAED;AAAA;;;;;;AASA,YAAAO,IAAA,uBAEAC,IAAA,KAAA,OAAA,MAAAD,CAAA;mCAEC,CAAA,KAAA,QAAA,KAAA,MAAA,IAED,CAAAC,EAAA,CAAA,EAAA,KAAA,GAAAA,EAAA,CAAA,CAAA;AAAA;;;AAMD,IAAA,CAAA,KAAA,YAAA,CAAA,KAAA,WACC,KAAA,gBAAA,KAAA,IAAA;AAAA;AAGH,GA5UAC,IAAA,CAAA,IAAA,GAmIOC,IAAA,EAAA,OAAA,kBAAA,mBAnIPC,IAAA,CAAA,YAAA;;;;IAyHQ,IAAAC,EAAA;AAAA,IACN,OAAA;AAAA;;;MAGE,gBAAA;AAAA,MACA,mBAAA;AAAA;MAEA,cAAAA,EAAA;AAAA,MACA,MAAAA,EAAA;AAAA,MACD,OAAA;AAAA;IACDC,EAAA,OAAAH,GAAA;AAAA;QACc,OAAA;AAAA,QACX,MAAAE,EAAA;AAAA,QACA,QAAAE,EAAA,YAAA,CAAA;AAAA;MACiBA,EAAA,kBAAAA,EAAA;;QAClB,OAAA;AAAA,QACC,MAAAF,EAAA;AAAA,QACA,QAAAE,EAAA,YAAA,CAAA;AAAA,wDACFC,EAAA,GAAAC,EAAA,QAAAC,GAAA;AAAA;;YA3IHC,EAAA,IAAA,EAAA;AAAA;IAkJEC,EAAAC,EAAA,QAAA,WAAA,CAAA,GAAA,MAAA;AAAA;;QAEE,OAAA;AAAA,QACC,KAAAR,EAAA;AAAA,QACA,MAAAA,EAAA;AAAA;;QAED,OAAAS,EAAA,CAAA,qBAAAT,EAAA,IAAA,CAAA;AAAA,QAEC,cAAAA,EAAA;AAAA,MA1JL,GAAA,MAAA,IAAAD,CAAA,KAAAO,EAAA,IAAA,EAAA;AAAA;EAAA,GAAA,IAAAT,CAAA;;;"}

package/dist/chunks/{NcListItemIcon-FeNwaJy4.cjs → NcListItemIcon-dOvFvjqI.cjs}

@@ -1,5 +1,5 @@
 var k = require("../assets/NcListItemIcon-mlEQ7oK0.css");
-const i = require("./NcAvatar-1MXwkOA2.cjs"), u = require("./NcHighlight-cBMxLCnf.cjs"), m = require("./NcIconSvgWrapper-rDMSblV4.cjs");
+const i = require("./NcAvatar-uPVG9WWg.cjs"), u = require("./NcHighlight-cBMxLCnf.cjs"), m = require("./NcIconSvgWrapper-_hHu9P_M.cjs");
 require("@nextcloud/router");
 const e = require("vue");
 ;/* empty css                                                                           */
@@ -114,15 +114,16 @@ const d = 8, c = 32, g = {
       return this.iconSvg !== "";
     },
     isValidSubname() {
-      return this.subname?.trim?.() !== "";
+      var t, n;
+      return ((n = (t = this.subname) == null ? void 0 : t.trim) == null ? void 0 : n.call(t)) !== "";
     },
     isSizeBigEnough() {
       return this.avatarSize >= c;
     },
     cssVars() {
-      const a = this.noMargin ? 0 : this.margin;
+      const t = this.noMargin ? 0 : this.margin;
       return {
-        "--height": this.avatarSize + 2 * a + "px",
+        "--height": this.avatarSize + 2 * t + "px",
         "--margin": this.margin + "px"
       };
     },
@@ -131,55 +132,55 @@ const d = 8, c = 32, g = {
      * @return {[string, string]}
      */
     searchParts() {
-      const a = /^([^<]*)<([^>]+)>?$/, r = this.search.match(a);
-      return this.isNoUser || !r ? [this.search, this.search] : [r[1].trim(), r[2]];
+      const t = /^([^<]*)<([^>]+)>?$/, n = this.search.match(t);
+      return this.isNoUser || !n ? [this.search, this.search] : [n[1].trim(), n[2]];
     }
   },
   beforeMount() {
     !this.isNoUser && !this.subname && this.fetchUserStatus(this.user);
   }
 }, p = ["id"], N = { class: "option__details" }, S = { key: 1 }, _ = ["aria-label"];
-function v(a, r, t, y, I, n) {
+function v(t, n, a, y, I, r) {
   const o = e.resolveComponent("NcAvatar"), s = e.resolveComponent("NcHighlight"), l = e.resolveComponent("NcIconSvgWrapper");
   return e.openBlock(), e.createElementBlock("span", {
-    id: t.id,
+    id: a.id,
     class: "option",
-    style: e.normalizeStyle(n.cssVars)
+    style: e.normalizeStyle(r.cssVars)
   }, [
-    e.createVNode(o, e.mergeProps(a.$attrs, {
+    e.createVNode(o, e.mergeProps(t.$attrs, {
       "disable-menu": !0,
       "disable-tooltip": !0,
-      "display-name": t.displayName || t.name,
-      "is-no-user": t.isNoUser,
-      size: t.avatarSize,
+      "display-name": a.displayName || a.name,
+      "is-no-user": a.isNoUser,
+      size: a.avatarSize,
       class: "option__avatar"
     }), null, 16, ["display-name", "is-no-user", "size"]),
     e.createElementVNode("div", N, [
       e.createVNode(s, {
         class: "option__lineone",
-        text: t.name,
-        search: n.searchParts[0]
+        text: a.name,
+        search: r.searchParts[0]
       }, null, 8, ["text", "search"]),
-      n.isValidSubname && n.isSizeBigEnough ? (e.openBlock(), e.createBlock(s, {
+      r.isValidSubname && r.isSizeBigEnough ? (e.openBlock(), e.createBlock(s, {
         key: 0,
         class: "option__linetwo",
-        text: t.subname,
-        search: n.searchParts[1]
-      }, null, 8, ["text", "search"])) : a.hasStatus ? (e.openBlock(), e.createElementBlock("span", S, [
-        e.createElementVNode("span", null, e.toDisplayString(a.userStatus.icon), 1),
-        e.createElementVNode("span", null, e.toDisplayString(a.userStatus.message), 1)
+        text: a.subname,
+        search: r.searchParts[1]
+      }, null, 8, ["text", "search"])) : t.hasStatus ? (e.openBlock(), e.createElementBlock("span", S, [
+        e.createElementVNode("span", null, e.toDisplayString(t.userStatus.icon), 1),
+        e.createElementVNode("span", null, e.toDisplayString(t.userStatus.message), 1)
       ])) : e.createCommentVNode("", !0)
     ]),
-    e.renderSlot(a.$slots, "default", {}, () => [
-      n.hasIconSvg ? (e.openBlock(), e.createBlock(l, {
+    e.renderSlot(t.$slots, "default", {}, () => [
+      r.hasIconSvg ? (e.openBlock(), e.createBlock(l, {
         key: 0,
         class: "option__icon",
-        svg: t.iconSvg,
-        name: t.iconName
-      }, null, 8, ["svg", "name"])) : n.hasIcon ? (e.openBlock(), e.createElementBlock("span", {
+        svg: a.iconSvg,
+        name: a.iconName
+      }, null, 8, ["svg", "name"])) : r.hasIcon ? (e.openBlock(), e.createElementBlock("span", {
         key: 1,
-        class: e.normalizeClass(["icon option__icon", t.icon]),
-        "aria-label": t.iconName
+        class: e.normalizeClass(["icon option__icon", a.icon]),
+        "aria-label": a.iconName
       }, null, 10, _)) : e.createCommentVNode("", !0)
     ], !0)
   ], 12, p);