@nextcloud/vue 8.11.2 → 8.12.0

package/dist/chunks/NcListItem-B_MPLJ_8.cjs

@@ -1,233 +0,0 @@
-require('../assets/NcListItem-BIFTbr17.css');
-"use strict";
-const c = require("./NcActions-BtvXtZF4.cjs"), r = require("../Components/NcCounterBubble.cjs"), u = require("../Components/NcVNodes.cjs"), n = require("./_l10n-B8iumFKB.cjs"), d = require("./_plugin-vue2_normalizer-GXKvuwrq.cjs");
-n.register(n.t5);
-const h = {
-  name: "NcListItem",
-  components: {
-    NcActions: c.NcActions,
-    NcCounterBubble: r,
-    NcVNodes: u
-  },
-  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: "#"
-    },
-    target: {
-      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(s) {
-        return ["highlighted", "outlined", ""].indexOf(s) !== -1;
-      }
-    },
-    /**
-     * To be used only when the elements in the actions menu are very important
-     */
-    forceDisplayActions: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Show the list component layout
-     */
-    oneLine: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  emits: [
-    "click",
-    "update:menuOpen"
-  ],
-  data() {
-    return {
-      hovered: !1,
-      hasActions: !1,
-      hasSubname: !1,
-      displayActionsOnHoverFocus: !1,
-      menuOpen: !1,
-      hasIndicator: !1,
-      hasDetails: !1
-    };
-  },
-  computed: {
-    showAdditionalElements() {
-      return !this.displayActionsOnHoverFocus || this.forceDisplayActions;
-    },
-    showDetails() {
-      return (this.details !== "" || this.hasDetails) && (!this.displayActionsOnHoverFocus || this.forceDisplayActions);
-    },
-    computedActionsAriaLabel() {
-      return this.actionsAriaLabel || n.t('Actions for item with name "{name}"', { name: this.name });
-    }
-  },
-  watch: {
-    menuOpen(s) {
-      !s && !this.hovered && (this.displayActionsOnHoverFocus = !1);
-    }
-  },
-  mounted() {
-    this.checkSlots();
-  },
-  updated() {
-    this.checkSlots();
-  },
-  methods: {
-    /**
-     * Handle link click
-     *
-     * @param {MouseEvent|KeyboardEvent} event - Native click or keydown event
-     * @param {Function} [navigate] - VueRouter link's navigate if any
-     * @param {string} [routerLinkHref] - VueRouter link's href
-     */
-    onClick(s, t, e) {
-      this.$emit("click", s), !(s.metaKey || s.altKey || s.ctrlKey || s.shiftKey) && e && (t == null || t(s), s.preventDefault());
-    },
-    showActions() {
-      this.hasActions && (this.displayActionsOnHoverFocus = !0), this.hovered = !1;
-    },
-    hideActions() {
-      this.displayActionsOnHoverFocus = !1;
-    },
-    /**
-     * @param {FocusEvent} event UI event
-     */
-    handleBlur(s) {
-      this.menuOpen || this.$refs["list-item"].contains(s.relatedTarget) || this.hideActions();
-    },
-    /**
-     * Hide the actions on mouseleave unless the menu is open
-     */
-    handleMouseleave() {
-      this.menuOpen || (this.displayActionsOnHoverFocus = !1), this.hovered = !1;
-    },
-    handleMouseover() {
-      this.showActions(), this.hovered = !0;
-    },
-    handleActionsUpdateOpen(s) {
-      this.menuOpen = s, this.$emit("update:menuOpen", s);
-    },
-    // 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.hasDetails !== !!this.$slots.details && (this.hasDetails = !!this.$slots.details);
-    }
-  }
-};
-var m = 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: o, navigate: l, isActive: a }) {
-    return [e("li", { staticClass: "list-item__wrapper", class: { "list-item__wrapper--active": a || t.active } }, [e("div", { ref: "list-item", staticClass: "list-item", class: {
-      "list-item--compact": t.compact,
-      "list-item--one-line": t.oneLine
-    }, on: { mouseover: t.handleMouseover, mouseleave: t.handleMouseleave } }, [e("a", { staticClass: "list-item__anchor", attrs: { id: t.anchorId || void 0, "aria-label": t.linkAriaLabel, href: o || t.href, target: t.target || (t.href === "#" ? void 0 : "_blank"), rel: t.href === "#" ? void 0 : "noopener noreferrer" }, on: { focus: t.showActions, focusout: t.handleBlur, click: function(i) {
-      return t.onClick(i, l, o);
-    }, keydown: function(i) {
-      return !i.type.indexOf("key") && t._k(i.keyCode, "esc", 27, i.key, ["Esc", "Escape"]) ? null : t.hideActions.apply(null, arguments);
-    } } }, [t._t("icon"), e("div", { staticClass: "list-item-content" }, [e("div", { staticClass: "list-item-content__main" }, [e("div", { staticClass: "list-item-content__name" }, [t._t("name", function() {
-      return [t._v(t._s(t.name))];
-    })], 2), t.hasSubname ? e("div", { staticClass: "list-item-content__subname", class: { "list-item-content__subname--bold": t.bold } }, [t._t("subname")], 2) : t._e()]), e("div", { staticClass: "list-item-content__details" }, [t.showDetails ? e("div", { staticClass: "list-item-details__details" }, [t._t("details", function() {
-      return [t._v(t._s(t.details))];
-    })], 2) : t._e(), t.counterNumber != 0 || t.hasIndicator ? e("div", { directives: [{ name: "show", rawName: "v-show", value: t.showAdditionalElements, expression: "showAdditionalElements" }], staticClass: "list-item-details__extra" }, [t.counterNumber != 0 ? e("NcCounterBubble", { staticClass: "list-item-details__counter", attrs: { active: a || t.active, type: t.counterType } }, [t._v(" " + t._s(t.counterNumber) + " ")]) : t._e(), t.hasIndicator ? e("span", { staticClass: "list-item-details__indicator" }, [t._t("indicator")], 2) : t._e()], 1) : t._e()])])], 2), e("div", { directives: [{ name: "show", rawName: "v-show", value: t.forceDisplayActions || t.displayActionsOnHoverFocus, expression: "forceDisplayActions || displayActionsOnHoverFocus" }], staticClass: "list-item-content__actions", on: { focusout: t.handleBlur } }, [e("NcActions", { ref: "actions", attrs: { primary: a || t.active, "aria-label": t.computedActionsAriaLabel }, on: { "update:open": t.handleActionsUpdateOpen } }, [t._t("actions")], 2)], 1), t.$slots.extra ? e("div", { staticClass: "list-item__extra" }, [t._t("extra")], 2) : t._e()])])];
-  } }], null, !0) });
-}, f = [], p = /* @__PURE__ */ d.normalizeComponent(
-  h,
-  m,
-  f,
-  !1,
-  null,
-  "6eacaffe",
-  null,
-  null
-);
-const _ = p.exports;
-exports.NcListItem = _;

package/dist/chunks/NcListItem-BopkGRDs.mjs

@@ -1,238 +0,0 @@
-import '../assets/NcListItem-BIFTbr17.css';
-import { N as l } from "./NcActions-DiFslXqv.mjs";
-import r from "../Components/NcCounterBubble.mjs";
-import c from "../Components/NcVNodes.mjs";
-import { r as u, h as d, a as h } from "./_l10n-BaNxGGXy.mjs";
-import { n as m } from "./_plugin-vue2_normalizer-Bj5bLKV4.mjs";
-u(d);
-const f = {
-  name: "NcListItem",
-  components: {
-    NcActions: l,
-    NcCounterBubble: r,
-    NcVNodes: c
-  },
-  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: "#"
-    },
-    target: {
-      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(s) {
-        return ["highlighted", "outlined", ""].indexOf(s) !== -1;
-      }
-    },
-    /**
-     * To be used only when the elements in the actions menu are very important
-     */
-    forceDisplayActions: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Show the list component layout
-     */
-    oneLine: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  emits: [
-    "click",
-    "update:menuOpen"
-  ],
-  data() {
-    return {
-      hovered: !1,
-      hasActions: !1,
-      hasSubname: !1,
-      displayActionsOnHoverFocus: !1,
-      menuOpen: !1,
-      hasIndicator: !1,
-      hasDetails: !1
-    };
-  },
-  computed: {
-    showAdditionalElements() {
-      return !this.displayActionsOnHoverFocus || this.forceDisplayActions;
-    },
-    showDetails() {
-      return (this.details !== "" || this.hasDetails) && (!this.displayActionsOnHoverFocus || this.forceDisplayActions);
-    },
-    computedActionsAriaLabel() {
-      return this.actionsAriaLabel || h('Actions for item with name "{name}"', { name: this.name });
-    }
-  },
-  watch: {
-    menuOpen(s) {
-      !s && !this.hovered && (this.displayActionsOnHoverFocus = !1);
-    }
-  },
-  mounted() {
-    this.checkSlots();
-  },
-  updated() {
-    this.checkSlots();
-  },
-  methods: {
-    /**
-     * Handle link click
-     *
-     * @param {MouseEvent|KeyboardEvent} event - Native click or keydown event
-     * @param {Function} [navigate] - VueRouter link's navigate if any
-     * @param {string} [routerLinkHref] - VueRouter link's href
-     */
-    onClick(s, t, e) {
-      this.$emit("click", s), !(s.metaKey || s.altKey || s.ctrlKey || s.shiftKey) && e && (t == null || t(s), s.preventDefault());
-    },
-    showActions() {
-      this.hasActions && (this.displayActionsOnHoverFocus = !0), this.hovered = !1;
-    },
-    hideActions() {
-      this.displayActionsOnHoverFocus = !1;
-    },
-    /**
-     * @param {FocusEvent} event UI event
-     */
-    handleBlur(s) {
-      this.menuOpen || this.$refs["list-item"].contains(s.relatedTarget) || this.hideActions();
-    },
-    /**
-     * Hide the actions on mouseleave unless the menu is open
-     */
-    handleMouseleave() {
-      this.menuOpen || (this.displayActionsOnHoverFocus = !1), this.hovered = !1;
-    },
-    handleMouseover() {
-      this.showActions(), this.hovered = !0;
-    },
-    handleActionsUpdateOpen(s) {
-      this.menuOpen = s, this.$emit("update:menuOpen", s);
-    },
-    // 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.hasDetails !== !!this.$slots.details && (this.hasDetails = !!this.$slots.details);
-    }
-  }
-};
-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: n, navigate: o, isActive: a }) {
-    return [e("li", { staticClass: "list-item__wrapper", class: { "list-item__wrapper--active": a || t.active } }, [e("div", { ref: "list-item", staticClass: "list-item", class: {
-      "list-item--compact": t.compact,
-      "list-item--one-line": t.oneLine
-    }, on: { mouseover: t.handleMouseover, mouseleave: t.handleMouseleave } }, [e("a", { staticClass: "list-item__anchor", attrs: { id: t.anchorId || void 0, "aria-label": t.linkAriaLabel, href: n || t.href, target: t.target || (t.href === "#" ? void 0 : "_blank"), rel: t.href === "#" ? void 0 : "noopener noreferrer" }, on: { focus: t.showActions, focusout: t.handleBlur, click: function(i) {
-      return t.onClick(i, o, n);
-    }, keydown: function(i) {
-      return !i.type.indexOf("key") && t._k(i.keyCode, "esc", 27, i.key, ["Esc", "Escape"]) ? null : t.hideActions.apply(null, arguments);
-    } } }, [t._t("icon"), e("div", { staticClass: "list-item-content" }, [e("div", { staticClass: "list-item-content__main" }, [e("div", { staticClass: "list-item-content__name" }, [t._t("name", function() {
-      return [t._v(t._s(t.name))];
-    })], 2), t.hasSubname ? e("div", { staticClass: "list-item-content__subname", class: { "list-item-content__subname--bold": t.bold } }, [t._t("subname")], 2) : t._e()]), e("div", { staticClass: "list-item-content__details" }, [t.showDetails ? e("div", { staticClass: "list-item-details__details" }, [t._t("details", function() {
-      return [t._v(t._s(t.details))];
-    })], 2) : t._e(), t.counterNumber != 0 || t.hasIndicator ? e("div", { directives: [{ name: "show", rawName: "v-show", value: t.showAdditionalElements, expression: "showAdditionalElements" }], staticClass: "list-item-details__extra" }, [t.counterNumber != 0 ? e("NcCounterBubble", { staticClass: "list-item-details__counter", attrs: { active: a || t.active, type: t.counterType } }, [t._v(" " + t._s(t.counterNumber) + " ")]) : t._e(), t.hasIndicator ? e("span", { staticClass: "list-item-details__indicator" }, [t._t("indicator")], 2) : t._e()], 1) : t._e()])])], 2), e("div", { directives: [{ name: "show", rawName: "v-show", value: t.forceDisplayActions || t.displayActionsOnHoverFocus, expression: "forceDisplayActions || displayActionsOnHoverFocus" }], staticClass: "list-item-content__actions", on: { focusout: t.handleBlur } }, [e("NcActions", { ref: "actions", attrs: { primary: a || t.active, "aria-label": t.computedActionsAriaLabel }, on: { "update:open": t.handleActionsUpdateOpen } }, [t._t("actions")], 2)], 1), t.$slots.extra ? e("div", { staticClass: "list-item__extra" }, [t._t("extra")], 2) : t._e()])])];
-  } }], null, !0) });
-}, _ = [], y = /* @__PURE__ */ m(
-  f,
-  p,
-  _,
-  !1,
-  null,
-  "6eacaffe",
-  null,
-  null
-);
-const w = y.exports;
-export {
-  w as N
-};

package/dist/chunks/NcListItemIcon-CI23iFQz.mjs

@@ -1,166 +0,0 @@
-import '../assets/NcMentionBubble-7PQ8wEko.css';
-import '../assets/NcListItemIcon-9Dazpmpd.css';
-import { N as i, u as r } from "./NcAvatar-BBhoG-za.mjs";
-import { N as n } from "./index-CnpswYi6.mjs";
-import { N as o } from "./NcIconSvgWrapper-BTdzvQGV.mjs";
-import "../Composables/useIsFullscreen.mjs";
-import "../Composables/useIsMobile.mjs";
-import "@nextcloud/router";
-/* empty css                                                                          */
-import { n as c } from "./_plugin-vue2_normalizer-Bj5bLKV4.mjs";
-import "linkify-string";
-import "escape-html";
-import "striptags";
-import "vue";
-const l = 8, e = 32, u = {
-  name: "NcListItemIcon",
-  components: {
-    NcAvatar: i,
-    NcHighlight: n,
-    NcIconSvgWrapper: o
-  },
-  mixins: [
-    r
-  ],
-  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: e
-    },
-    /**
-     * 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: l
-    };
-  },
-  computed: {
-    hasIcon() {
-      return this.icon !== "";
-    },
-    hasIconSvg() {
-      return this.iconSvg !== "";
-    },
-    isValidSubname() {
-      var a, t;
-      return ((t = (a = this.subname) == null ? void 0 : a.trim) == null ? void 0 : t.call(a)) !== "";
-    },
-    isSizeBigEnough() {
-      return this.avatarSize >= e;
-    },
-    cssVars() {
-      const a = this.noMargin ? 0 : this.margin;
-      return {
-        "--height": this.avatarSize + 2 * a + "px",
-        "--margin": this.margin + "px"
-      };
-    },
-    /**
-     * Seperates the search property into two parts, the first one is the search part on the name, the second on the subname.
-     * @return {[string, string]}
-     */
-    searchParts() {
-      const a = /^([^<]*)<([^>]+)>?$/, t = this.search.match(a);
-      return this.isNoUser || !t ? [this.search, this.search] : [t[1].trim(), t[2]];
-    }
-  },
-  beforeMount() {
-    !this.isNoUser && !this.subname && this.fetchUserStatus(this.user);
-  }
-};
-var m = function() {
-  var t = this, s = t._self._c;
-  return s("span", t._g({ staticClass: "option", style: t.cssVars, attrs: { id: t.id } }, t.$listeners), [s("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)), s("div", { staticClass: "option__details" }, [s("NcHighlight", { staticClass: "option__lineone", attrs: { text: t.name, search: t.searchParts[0] } }), t.isValidSubname && t.isSizeBigEnough ? s("NcHighlight", { staticClass: "option__linetwo", attrs: { text: t.subname, search: t.searchParts[1] } }) : t.hasStatus ? s("span", [s("span", [t._v(t._s(t.userStatus.icon))]), s("span", [t._v(t._s(t.userStatus.message))])]) : t._e()], 1), t._t("default", function() {
-    return [t.hasIconSvg ? s("NcIconSvgWrapper", { staticClass: "option__icon", attrs: { svg: t.iconSvg, name: t.iconName } }) : t.hasIcon ? s("span", { staticClass: "icon option__icon", class: t.icon, attrs: { "aria-label": t.iconName } }) : t._e()];
-  })], 2);
-}, p = [], h = /* @__PURE__ */ c(
-  u,
-  m,
-  p,
-  !1,
-  null,
-  "562c32c6",
-  null,
-  null
-);
-const x = h.exports;
-export {
-  x as N
-};

package/dist/chunks/NcListItemIcon-CI23iFQz.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcListItemIcon-CI23iFQz.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<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=\"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","NcHighlight","NcIconSvgWrapper","userStatus","_b","_a","EMAIL_NOTATION","match"],"mappings":";;;;;;;;;;;;AA8KA,MAAAA,IAAA,GACAC,IAAA,IAEAC,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,kBAAAC;AAAA,EACA;AAAA,EAEA,QAAA;AAAA,IACAC;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,SAAAL;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,eAAAO,KAAAC,IAAA,KAAA,YAAA,gBAAAA,EAAA,SAAA,gBAAAD,EAAA,KAAAC,QAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,cAAAP;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;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AAEA,YAAAS,IAAA,uBAEAC,IAAA,KAAA,OAAA,MAAAD,CAAA;AACA,aAAA,KAAA,YAAA,CAAAC,IACA,CAAA,KAAA,QAAA,KAAA,MAAA,IAEA,CAAAA,EAAA,CAAA,EAAA,KAAA,GAAAA,EAAA,CAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,cAAA;AAEA,IAAA,CAAA,KAAA,YAAA,CAAA,KAAA,WACA,KAAA,gBAAA,KAAA,IAAA;AAAA,EAEA;AACA;;;;;;;;;;;;;;;;;"}