npm - @nextcloud/vue - Versions diffs - 8.0.0-beta.8 → 8.0.0-beta.9 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (223) hide show

package/dist/Components/NcDialogButton.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcDialogButton.cjs","sources":["../../src/components/NcDialogButton/NcDialogButton.vue"],"sourcesContent":["\n\n<docs>\nDialog button component used by NcDialog in the actions slot to display the buttons passed by the `buttons` prop.\n</docs>\n\n<template>\n\t<NcButton :aria-label=\"label\" :type=\"type\" @click=\"handleClick\">\n\t\t{{ label }}\n\t\t<template #icon>\n\t\t\t\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<NcIconSvgWrapper v-if=\"icon !== undefined\" :svg=\"icon\" />\n\t\t\t</slot>\n\t\t</template>\n\t</NcButton>\n</template>\n\n<script>\nimport { defineComponent } from 'vue'\nimport NcButton from '../NcButton/index.js'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\n\nexport default defineComponent({\n\tname: 'NcDialogButton',\n\n\tprops: {\n\t\t/**\n\t\t * The function that will be called when the button is pressed\n\t\t * @type {() => void}\n\t\t */\n\t\tcallback: {\n\t\t\ttype: Function,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * The label of the button\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Optional inline SVG icon for the button\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * The button type, see NcButton\n\t\t * @values 'primary', 'secondary', 'error', 'warning', 'success'\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: 'secondary',\n\t\t\tvalidator: (type) => typeof type === 'string' && ['primary', 'secondary', 'error', 'warning', 'success'].includes(type),\n\t\t},\n\t},\n\n\temits: ['click'],\n\n\tsetup(props, { emit }) {\n\t\t/**\n\t\t * Handle clicking the button\n\t\t * @param {MouseEvent} e The click event\n\t\t */\n\t\tconst handleClick = (e) => {\n\t\t\tprops.callback?.()\n\t\t\temit('click', e)\n\t\t}\n\n\t\treturn {\n\t\t\tNcButton,\n\t\t\tNcIconSvgWrapper,\n\n\t\t\thandleClick,\n\t\t}\n\t},\n})\n</script>\n"],"names":["_sfc_main","defineComponent","type","props","emit","NcButton","NcIconSvgWrapper","e","_a"],"mappings":";+JA2CAA,IAAAC,EAAAA,gBAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA,OAAAA,KAAA,YAAA,CAAA,WAAA,aAAA,SAAA,WAAA,SAAA,EAAA,SAAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,CAAA,OAAA;AAAA,EAEA,MAAAC,GAAA,EAAA,MAAAC,KAAA;AAUA,WAAA;AAAA,MACA,UAAAC;AAAAA,MACA,kBAAAC;AAAAA,MAEA,aATA,CAAAC,MAAA;;AACA,SAAAC,IAAAL,EAAA,aAAA,QAAAK,EAAA,KAAAL,IACAC,EAAA,SAAAG,CAAA;AAAA,MACA;AAAA,IAOA;AAAA,EACA;AACA,CAAA;;;;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcDialogButton.mjs ADDED Viewed

@@ -0,0 +1,74 @@
+import { defineComponent as l } from "vue";
+import o from "./NcButton.mjs";
+import i from "./NcIconSvgWrapper.mjs";
+import { n as a } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+const u = l({
+  name: "NcDialogButton",
+  props: {
+    /**
+     * The function that will be called when the button is pressed
+     * @type {() => void}
+     */
+    callback: {
+      type: Function,
+      required: !0
+    },
+    /**
+     * The label of the button
+     */
+    label: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Optional inline SVG icon for the button
+     */
+    icon: {
+      type: String,
+      required: !1,
+      default: void 0
+    },
+    /**
+     * The button type, see NcButton
+     * @values 'primary', 'secondary', 'error', 'warning', 'success'
+     */
+    type: {
+      type: String,
+      required: !1,
+      default: "secondary",
+      validator: (n) => typeof n == "string" && ["primary", "secondary", "error", "warning", "success"].includes(n)
+    }
+  },
+  emits: ["click"],
+  setup(n, { emit: e }) {
+    return {
+      NcButton: o,
+      NcIconSvgWrapper: i,
+      handleClick: (c) => {
+        var t;
+        (t = n.callback) == null || t.call(n), e("click", c);
+      }
+    };
+  }
+});
+var s = function() {
+  var e = this, r = e._self._c;
+  return e._self._setupProxy, r("NcButton", { attrs: { "aria-label": e.label, type: e.type }, on: { click: e.handleClick }, scopedSlots: e._u([{ key: "icon", fn: function() {
+    return [e._t("icon", function() {
+      return [e.icon !== void 0 ? r("NcIconSvgWrapper", { attrs: { svg: e.icon } }) : e._e()];
+    })];
+  }, proxy: !0 }], null, !0) }, [e._v(" " + e._s(e.label) + " ")]);
+}, d = [], f = /* @__PURE__ */ a(
+  u,
+  s,
+  d,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const g = f.exports;
+export {
+  g as default
+};

package/dist/Components/NcDialogButton.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcDialogButton.mjs","sources":["../../src/components/NcDialogButton/NcDialogButton.vue"],"sourcesContent":["\n\n<docs>\nDialog button component used by NcDialog in the actions slot to display the buttons passed by the `buttons` prop.\n</docs>\n\n<template>\n\t<NcButton :aria-label=\"label\" :type=\"type\" @click=\"handleClick\">\n\t\t{{ label }}\n\t\t<template #icon>\n\t\t\t\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<NcIconSvgWrapper v-if=\"icon !== undefined\" :svg=\"icon\" />\n\t\t\t</slot>\n\t\t</template>\n\t</NcButton>\n</template>\n\n<script>\nimport { defineComponent } from 'vue'\nimport NcButton from '../NcButton/index.js'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\n\nexport default defineComponent({\n\tname: 'NcDialogButton',\n\n\tprops: {\n\t\t/**\n\t\t * The function that will be called when the button is pressed\n\t\t * @type {() => void}\n\t\t */\n\t\tcallback: {\n\t\t\ttype: Function,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * The label of the button\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Optional inline SVG icon for the button\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * The button type, see NcButton\n\t\t * @values 'primary', 'secondary', 'error', 'warning', 'success'\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: 'secondary',\n\t\t\tvalidator: (type) => typeof type === 'string' && ['primary', 'secondary', 'error', 'warning', 'success'].includes(type),\n\t\t},\n\t},\n\n\temits: ['click'],\n\n\tsetup(props, { emit }) {\n\t\t/**\n\t\t * Handle clicking the button\n\t\t * @param {MouseEvent} e The click event\n\t\t */\n\t\tconst handleClick = (e) => {\n\t\t\tprops.callback?.()\n\t\t\temit('click', e)\n\t\t}\n\n\t\treturn {\n\t\t\tNcButton,\n\t\t\tNcIconSvgWrapper,\n\n\t\t\thandleClick,\n\t\t}\n\t},\n})\n</script>\n"],"names":["_sfc_main","defineComponent","type","props","emit","NcButton","NcIconSvgWrapper","e","_a"],"mappings":";;;;AA2CA,MAAAA,IAAAC,EAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA,OAAAA,KAAA,YAAA,CAAA,WAAA,aAAA,SAAA,WAAA,SAAA,EAAA,SAAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,CAAA,OAAA;AAAA,EAEA,MAAAC,GAAA,EAAA,MAAAC,KAAA;AAUA,WAAA;AAAA,MACA,UAAAC;AAAA,MACA,kBAAAC;AAAA,MAEA,aATA,CAAAC,MAAA;;AACA,SAAAC,IAAAL,EAAA,aAAA,QAAAK,EAAA,KAAAL,IACAC,EAAA,SAAAG,CAAA;AAAA,MACA;AAAA,IAOA;AAAA,EACA;AACA,CAAA;;;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcEmojiPicker.cjs CHANGED Viewed

@@ -1,5 +1,5 @@
 var j = require("../assets/index-2a8e4ca1.css");
-const c = require("./NcPopover.cjs"), l = require("./NcTextField.cjs"), r = require("../chunks/l10n-903083c4.cjs"), a = require("emoji-mart-vue-fast"), u = require("emoji-mart-vue-fast/data/all.json"), f = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), p = (t) => t && t.__esModule ? t : { default: t }, d = /* @__PURE__ */ p(u);
+const c = require("./NcPopover.cjs"), l = require("./NcTextField.cjs"), r = require("../chunks/l10n-b1d264c7.cjs"), a = require("emoji-mart-vue-fast"), u = require("emoji-mart-vue-fast/data/all.json"), f = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), p = (t) => t && t.__esModule ? t : { default: t }, d = /* @__PURE__ */ p(u);
 let o;
 const m = {
   search: r.t("Search emoji"),

package/dist/Components/NcEmojiPicker.mjs CHANGED Viewed

@@ -1,7 +1,7 @@
 import "../assets/index-2a8e4ca1.css";
 import n from "./NcPopover.mjs";
 import c from "./NcTextField.mjs";
-import { t as r } from "../chunks/l10n-27a75c40.mjs";
+import { t as r } from "../chunks/l10n-05a09c66.mjs";
 import { Emoji as l, Picker as u, EmojiIndex as f } from "emoji-mart-vue-fast";
 import p from "emoji-mart-vue-fast/data/all.json";
 import { n as m } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";

package/dist/Components/NcIconSvgWrapper.cjs CHANGED Viewed

@@ -1,6 +1,6 @@
-var p = require("../assets/index-c7905a53.css");
-const s = require("vue"), a = require("dompurify"), o = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), r = (n) => n && n.__esModule ? n : { default: n }, i = /* @__PURE__ */ r(s), u = /* @__PURE__ */ r(a);
-const c = {
+var f = require("../assets/index-57b305d3.css");
+const s = require("vue"), a = require("dompurify"), i = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), r = (t) => t && t.__esModule ? t : { default: t }, u = /* @__PURE__ */ r(s), o = /* @__PURE__ */ r(a);
+const l = {
   name: "NcIconSvgWrapper",
   props: {
     /**
@@ -16,29 +16,44 @@ const c = {
     name: {
       type: String,
       default: ""
+    },
+    /**
+     * Raw SVG path to render. Takes precedence over the SVG string in the `svg` prop.
+     */
+    path: {
+      type: String,
+      default: ""
     }
   },
   computed: {
     cleanSvg() {
-      if (!this.svg)
+      if (!this.svg || this.path)
         return;
-      const n = u.default.sanitize(this.svg), e = new DOMParser().parseFromString(n, "image/svg+xml");
-      return e.querySelector("parsererror") ? (i.default.util.warn("SVG is not valid"), "") : (e.documentElement.id && e.documentElement.removeAttribute("id"), e.documentElement.outerHTML);
+      const t = o.default.sanitize(this.svg), e = new DOMParser().parseFromString(t, "image/svg+xml");
+      return e.querySelector("parsererror") ? (u.default.util.warn("SVG is not valid"), "") : (e.documentElement.id && e.documentElement.removeAttribute("id"), e.documentElement.outerHTML);
+    },
+    attributes() {
+      return {
+        class: "icon-vue",
+        role: "img",
+        "aria-hidden": this.name ? void 0 : !0,
+        "aria-label": this.name || void 0
+      };
     }
   }
 };
-var l = function() {
-  var e = this, t = e._self._c;
-  return t("span", { staticClass: "icon-vue", attrs: { role: "img", "aria-hidden": e.name ? void 0 : !0, "aria-label": e.name || void 0 }, domProps: { innerHTML: e._s(e.cleanSvg) } });
-}, _ = [], d = /* @__PURE__ */ o.normalizeComponent(
-  c,
+var c = function() {
+  var e = this, n = e._self._c;
+  return e.cleanSvg ? n("span", e._b({ domProps: { innerHTML: e._s(e.cleanSvg) } }, "span", e.attributes, !1)) : n("span", e._b({}, "span", e.attributes, !1), [n("svg", { attrs: { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" } }, [n("path", { attrs: { d: e.path } })])]);
+}, _ = [], p = /* @__PURE__ */ i.normalizeComponent(
   l,
+  c,
   _,
   !1,
   null,
-  "3f335862",
+  "6176f396",
   null,
   null
 );
-const m = d.exports;
-module.exports = m;
+const d = p.exports;
+module.exports = d;

package/dist/Components/NcIconSvgWrapper.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcIconSvgWrapper.cjs","sources":["../../src/components/NcIconSvgWrapper/NcIconSvgWrapper.vue"],"sourcesContent":["<!--\n - @copyright 2022 Christopher Ng <chrng8@gmail.com>\n -\n - @author Christopher Ng <chrng8@gmail.com>\n -\n - @license AGPL-3.0-or-later\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\n<docs>\n### Description\n\nRender raw SVG string icons.\n\n### Example\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<NcButton aria-label=\"Close\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"closeSvg\" name=\"Close\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Settings\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"cogSvg\" name=\"Cog\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Add\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"plusSvg\" name=\"Plus\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Send\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :~~svg~~=\"~~sendSvg~~\" name=\"Send\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Star\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :~~svg~~=\"~~starSvg~~\" name=\"Star\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t</div>\n</template>\n\n<script>\nimport closeSvg from '@mdi/svg/svg/close.svg?raw'\nimport cogSvg from '@mdi/svg/svg/cog.svg?raw'\nimport plusSvg from '@mdi/svg/svg/plus.svg?raw'\nimport ~~sendSvg~~ from '@mdi/~~svg/svg/send.svg?raw~~'\nimport ~~starSvg~~ from '@mdi/~~svg/svg/star.svg?raw~~'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tcloseSvg,\n\t\t\tcogSvg,\n\t\t\tplusSvg,\n\t\t\~~tsendSvg~~,\n\t\t\~~tstarSvg~~,\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(5, max-content);\n\tgap: 10px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<span ~~class~~=\"~~icon-vue~~\"\n\t\~~trole~~=\"~~img~~\"\n\t\t~~:aria-hidden~~=\"~~!name~~ ? ~~true~~ : ~~undefined~~\"\n\t\t:~~aria-label~~=\"~~name~~ \|\| ~~undefined~~\"\n\t\tv-html=\"cleanSvg\" /> <!-- eslint-disable-line vue/no-v-html -->\n</template>\n\n<script>\nimport Vue from 'vue'\nimport DOMPurify from 'dompurify'\n\nexport default {\n\tname: 'NcIconSvgWrapper',\n\n\tprops: {\n\t\t/*\n\t\t Raw SVG string to render\n\t\t /\n\t\tsvg: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Label of the icon, used in aria-label\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tcleanSvg() {\n\t\t\tif (!this.svg) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst svg = DOMPurify.sanitize(this.svg)\n\n\t\t\tconst svgDocument = new DOMParser().parseFromString(svg, 'image/svg+xml')\n\n\t\t\tif (svgDocument.querySelector('parsererror')) {\n\t\t\t\tVue.util.warn('SVG is not valid')\n\t\t\t\treturn ''\n\t\t\t}\n\n\t\t\tif (svgDocument.documentElement.id) {\n\t\t\t\tsvgDocument.documentElement.removeAttribute('id')\n\t\t\t}\n\n\t\t\treturn svgDocument.documentElement.outerHTML\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.icon-vue {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tmin-width: 44px;\n\tmin-height: 44px;\n\topacity: 1;\n\n\t&:deep(svg) {\n\t\tfill: currentColor;\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\tmax-width: 20px;\n\t\tmax-height: 20px;\n\t}\n}\n</style>\n"],"names":["_sfc_main","svg","DOMPurify__default","svgDocument","Vue__default"],"mappings":";;~~AAsGA~~,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,KAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,WAAA;AACA,UAAA,CAAA,KAAA;AACA;AAGA,YAAAC,IAAAC,EAAA,QAAA,SAAA,KAAA,GAAA,GAEAC,IAAA,IAAA,UAAA,EAAA,gBAAAF,GAAA,eAAA;AAEA,aAAAE,EAAA,cAAA,aAAA,KACAC,EAAA,QAAA,KAAA,KAAA,kBAAA,GACA,OAGAD,EAAA,gBAAA,MACAA,EAAA,gBAAA,gBAAA,IAAA,GAGAA,EAAA,gBAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"NcIconSvgWrapper.cjs","sources":["../../src/components/NcIconSvgWrapper/NcIconSvgWrapper.vue"],"sourcesContent":["<!--\n - @copyright 2022 Christopher Ng <chrng8@gmail.com>\n -\n - @author Christopher Ng <chrng8@gmail.com>\n -\n - @license AGPL-3.0-or-later\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\n<docs>\n### Description\n\nRender raw SVG string icons.\n\n### Example\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<NcButton aria-label=\"Close\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"closeSvg\" name=\"Close\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Settings\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"cogSvg\" name=\"Cog\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Add\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"plusSvg\" name=\"Plus\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Send\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :path=\"mdiSend\" name=\"Send\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Star\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :path=\"mdiStar\" name=\"Star\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t</div>\n</template>\n\n<script>\nimport closeSvg from '@mdi/svg/svg/close.svg?raw'\nimport cogSvg from '@mdi/svg/svg/cog.svg?raw'\nimport plusSvg from '@mdi/svg/svg/plus.svg?raw'\nimport { mdiSend } from '@mdi/js'\nimport { mdiStar } from '@mdi/js'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tcloseSvg,\n\t\t\tcogSvg,\n\t\t\tplusSvg,\n\t\t\tmdiSend,\n\t\t\tmdiStar,\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(5, max-content);\n\tgap: 10px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<span v-if=\"!cleanSvg\"\n\t\tv-bind=\"attributes\">\n\t\t<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t<path :d=\"path\" />\n\t\t</svg>\n\t</span>\n\t<span v-else\n\t\tv-bind=\"attributes\"\n\t\tv-html=\"cleanSvg\" /> <!-- eslint-disable-line vue/no-v-html -->\n</template>\n\n<script>\nimport Vue from 'vue'\nimport DOMPurify from 'dompurify'\n\nexport default {\n\tname: 'NcIconSvgWrapper',\n\n\tprops: {\n\t\t/*\n\t\t Raw SVG string to render\n\t\t /\n\t\tsvg: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Label of the icon, used in aria-label\n\t\t /\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Raw SVG path to render. Takes precedence over the SVG string in the `svg` prop.\n\t\t */\n\t\tpath: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tcleanSvg() {\n\t\t\tif (!this.svg \|\| this.path) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst svg = DOMPurify.sanitize(this.svg)\n\n\t\t\tconst svgDocument = new DOMParser().parseFromString(svg, 'image/svg+xml')\n\n\t\t\tif (svgDocument.querySelector('parsererror')) {\n\t\t\t\tVue.util.warn('SVG is not valid')\n\t\t\t\treturn ''\n\t\t\t}\n\n\t\t\tif (svgDocument.documentElement.id) {\n\t\t\t\tsvgDocument.documentElement.removeAttribute('id')\n\t\t\t}\n\n\t\t\treturn svgDocument.documentElement.outerHTML\n\t\t},\n\t\tattributes() {\n\t\t\treturn {\n\t\t\t\tclass: 'icon-vue',\n\t\t\t\trole: 'img',\n\t\t\t\t'aria-hidden': !this.name ? true : undefined,\n\t\t\t\t'aria-label': this.name \|\| undefined,\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.icon-vue {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tmin-width: 44px;\n\tmin-height: 44px;\n\topacity: 1;\n\n\t&:deep(svg) {\n\t\tfill: currentColor;\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\tmax-width: 20px;\n\t\tmax-height: 20px;\n\t}\n}\n</style>\n"],"names":["_sfc_main","svg","DOMPurify__default","svgDocument","Vue__default"],"mappings":";;AA0GA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,KAAA;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,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,WAAA;AACA,UAAA,CAAA,KAAA,OAAA,KAAA;AACA;AAGA,YAAAC,IAAAC,EAAA,QAAA,SAAA,KAAA,GAAA,GAEAC,IAAA,IAAA,UAAA,EAAA,gBAAAF,GAAA,eAAA;AAEA,aAAAE,EAAA,cAAA,aAAA,KACAC,EAAA,QAAA,KAAA,KAAA,kBAAA,GACA,OAGAD,EAAA,gBAAA,MACAA,EAAA,gBAAA,gBAAA,IAAA,GAGAA,EAAA,gBAAA;AAAA,IACA;AAAA,IACA,aAAA;AACA,aAAA;AAAA,QACA,OAAA;AAAA,QACA,MAAA;AAAA,QACA,eAAA,KAAA,OAAA,SAAA;AAAA,QACA,cAAA,KAAA,QAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;"}

package/dist/Components/NcIconSvgWrapper.mjs CHANGED Viewed

@@ -1,8 +1,8 @@
-import "../assets/index-c7905a53.css";
-import t from "vue";
-import o from "dompurify";
-import { n as a } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
-const s = {
+import "../assets/index-57b305d3.css";
+import n from "vue";
+import a from "dompurify";
+import { n as s } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+const i = {
   name: "NcIconSvgWrapper",
   props: {
     /**
@@ -18,31 +18,46 @@ const s = {
     name: {
       type: String,
       default: ""
+    },
+    /**
+     * Raw SVG path to render. Takes precedence over the SVG string in the `svg` prop.
+     */
+    path: {
+      type: String,
+      default: ""
     }
   },
   computed: {
     cleanSvg() {
-      if (!this.svg)
+      if (!this.svg || this.path)
         return;
-      const r = o.sanitize(this.svg), e = new DOMParser().parseFromString(r, "image/svg+xml");
-      return e.querySelector("parsererror") ? (t.util.warn("SVG is not valid"), "") : (e.documentElement.id && e.documentElement.removeAttribute("id"), e.documentElement.outerHTML);
+      const r = a.sanitize(this.svg), e = new DOMParser().parseFromString(r, "image/svg+xml");
+      return e.querySelector("parsererror") ? (n.util.warn("SVG is not valid"), "") : (e.documentElement.id && e.documentElement.removeAttribute("id"), e.documentElement.outerHTML);
+    },
+    attributes() {
+      return {
+        class: "icon-vue",
+        role: "img",
+        "aria-hidden": this.name ? void 0 : !0,
+        "aria-label": this.name || void 0
+      };
     }
   }
 };
-var i = function() {
-  var e = this, n = e._self._c;
-  return n("span", { staticClass: "icon-vue", attrs: { role: "img", "aria-hidden": e.name ? void 0 : !0, "aria-label": e.name || void 0 }, domProps: { innerHTML: e._s(e.cleanSvg) } });
-}, c = [], m = /* @__PURE__ */ a(
-  s,
+var o = function() {
+  var e = this, t = e._self._c;
+  return e.cleanSvg ? t("span", e._b({ domProps: { innerHTML: e._s(e.cleanSvg) } }, "span", e.attributes, !1)) : t("span", e._b({}, "span", e.attributes, !1), [t("svg", { attrs: { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" } }, [t("path", { attrs: { d: e.path } })])]);
+}, p = [], u = /* @__PURE__ */ s(
   i,
-  c,
+  o,
+  p,
   !1,
   null,
-  "3f335862",
+  "6176f396",
   null,
   null
 );
-const d = m.exports;
+const v = u.exports;
 export {
-  d as default
+  v as default
 };

package/dist/Components/NcIconSvgWrapper.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcIconSvgWrapper.mjs","sources":["../../src/components/NcIconSvgWrapper/NcIconSvgWrapper.vue"],"sourcesContent":["<!--\n - @copyright 2022 Christopher Ng <chrng8@gmail.com>\n -\n - @author Christopher Ng <chrng8@gmail.com>\n -\n - @license AGPL-3.0-or-later\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\n<docs>\n### Description\n\nRender raw SVG string icons.\n\n### Example\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<NcButton aria-label=\"Close\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"closeSvg\" name=\"Close\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Settings\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"cogSvg\" name=\"Cog\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Add\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"plusSvg\" name=\"Plus\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Send\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :~~svg~~=\"~~sendSvg~~\" name=\"Send\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Star\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :~~svg~~=\"~~starSvg~~\" name=\"Star\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t</div>\n</template>\n\n<script>\nimport closeSvg from '@mdi/svg/svg/close.svg?raw'\nimport cogSvg from '@mdi/svg/svg/cog.svg?raw'\nimport plusSvg from '@mdi/svg/svg/plus.svg?raw'\nimport ~~sendSvg~~ from '@mdi/~~svg/svg/send.svg?raw~~'\nimport ~~starSvg~~ from '@mdi/~~svg/svg/star.svg?raw~~'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tcloseSvg,\n\t\t\tcogSvg,\n\t\t\tplusSvg,\n\t\t\~~tsendSvg~~,\n\t\t\~~tstarSvg~~,\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(5, max-content);\n\tgap: 10px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<span ~~class~~=\"~~icon-vue~~\"\n\t\~~trole~~=\"~~img~~\"\n\t\t~~:aria-hidden~~=\"~~!name~~ ? ~~true~~ : ~~undefined~~\"\n\t\t:~~aria-label~~=\"~~name~~ \|\| ~~undefined~~\"\n\t\tv-html=\"cleanSvg\" /> <!-- eslint-disable-line vue/no-v-html -->\n</template>\n\n<script>\nimport Vue from 'vue'\nimport DOMPurify from 'dompurify'\n\nexport default {\n\tname: 'NcIconSvgWrapper',\n\n\tprops: {\n\t\t/*\n\t\t Raw SVG string to render\n\t\t /\n\t\tsvg: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Label of the icon, used in aria-label\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tcleanSvg() {\n\t\t\tif (!this.svg) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst svg = DOMPurify.sanitize(this.svg)\n\n\t\t\tconst svgDocument = new DOMParser().parseFromString(svg, 'image/svg+xml')\n\n\t\t\tif (svgDocument.querySelector('parsererror')) {\n\t\t\t\tVue.util.warn('SVG is not valid')\n\t\t\t\treturn ''\n\t\t\t}\n\n\t\t\tif (svgDocument.documentElement.id) {\n\t\t\t\tsvgDocument.documentElement.removeAttribute('id')\n\t\t\t}\n\n\t\t\treturn svgDocument.documentElement.outerHTML\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.icon-vue {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tmin-width: 44px;\n\tmin-height: 44px;\n\topacity: 1;\n\n\t&:deep(svg) {\n\t\tfill: currentColor;\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\tmax-width: 20px;\n\t\tmax-height: 20px;\n\t}\n}\n</style>\n"],"names":["_sfc_main","svg","DOMPurify","svgDocument","Vue"],"mappings":";;;;~~AAsGA~~,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,KAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,WAAA;AACA,UAAA,CAAA,KAAA;AACA;AAGA,YAAAC,IAAAC,EAAA,SAAA,KAAA,GAAA,GAEAC,IAAA,IAAA,UAAA,EAAA,gBAAAF,GAAA,eAAA;AAEA,aAAAE,EAAA,cAAA,aAAA,KACAC,EAAA,KAAA,KAAA,kBAAA,GACA,OAGAD,EAAA,gBAAA,MACAA,EAAA,gBAAA,gBAAA,IAAA,GAGAA,EAAA,gBAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"NcIconSvgWrapper.mjs","sources":["../../src/components/NcIconSvgWrapper/NcIconSvgWrapper.vue"],"sourcesContent":["<!--\n - @copyright 2022 Christopher Ng <chrng8@gmail.com>\n -\n - @author Christopher Ng <chrng8@gmail.com>\n -\n - @license AGPL-3.0-or-later\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\n<docs>\n### Description\n\nRender raw SVG string icons.\n\n### Example\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<NcButton aria-label=\"Close\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"closeSvg\" name=\"Close\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Settings\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"cogSvg\" name=\"Cog\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Add\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"plusSvg\" name=\"Plus\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Send\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :path=\"mdiSend\" name=\"Send\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Star\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :path=\"mdiStar\" name=\"Star\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t</div>\n</template>\n\n<script>\nimport closeSvg from '@mdi/svg/svg/close.svg?raw'\nimport cogSvg from '@mdi/svg/svg/cog.svg?raw'\nimport plusSvg from '@mdi/svg/svg/plus.svg?raw'\nimport { mdiSend } from '@mdi/js'\nimport { mdiStar } from '@mdi/js'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tcloseSvg,\n\t\t\tcogSvg,\n\t\t\tplusSvg,\n\t\t\tmdiSend,\n\t\t\tmdiStar,\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(5, max-content);\n\tgap: 10px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<span v-if=\"!cleanSvg\"\n\t\tv-bind=\"attributes\">\n\t\t<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t<path :d=\"path\" />\n\t\t</svg>\n\t</span>\n\t<span v-else\n\t\tv-bind=\"attributes\"\n\t\tv-html=\"cleanSvg\" /> <!-- eslint-disable-line vue/no-v-html -->\n</template>\n\n<script>\nimport Vue from 'vue'\nimport DOMPurify from 'dompurify'\n\nexport default {\n\tname: 'NcIconSvgWrapper',\n\n\tprops: {\n\t\t/*\n\t\t Raw SVG string to render\n\t\t /\n\t\tsvg: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Label of the icon, used in aria-label\n\t\t /\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Raw SVG path to render. Takes precedence over the SVG string in the `svg` prop.\n\t\t */\n\t\tpath: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tcleanSvg() {\n\t\t\tif (!this.svg \|\| this.path) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst svg = DOMPurify.sanitize(this.svg)\n\n\t\t\tconst svgDocument = new DOMParser().parseFromString(svg, 'image/svg+xml')\n\n\t\t\tif (svgDocument.querySelector('parsererror')) {\n\t\t\t\tVue.util.warn('SVG is not valid')\n\t\t\t\treturn ''\n\t\t\t}\n\n\t\t\tif (svgDocument.documentElement.id) {\n\t\t\t\tsvgDocument.documentElement.removeAttribute('id')\n\t\t\t}\n\n\t\t\treturn svgDocument.documentElement.outerHTML\n\t\t},\n\t\tattributes() {\n\t\t\treturn {\n\t\t\t\tclass: 'icon-vue',\n\t\t\t\trole: 'img',\n\t\t\t\t'aria-hidden': !this.name ? true : undefined,\n\t\t\t\t'aria-label': this.name \|\| undefined,\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.icon-vue {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tmin-width: 44px;\n\tmin-height: 44px;\n\topacity: 1;\n\n\t&:deep(svg) {\n\t\tfill: currentColor;\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\tmax-width: 20px;\n\t\tmax-height: 20px;\n\t}\n}\n</style>\n"],"names":["_sfc_main","svg","DOMPurify","svgDocument","Vue"],"mappings":";;;;AA0GA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,KAAA;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,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,WAAA;AACA,UAAA,CAAA,KAAA,OAAA,KAAA;AACA;AAGA,YAAAC,IAAAC,EAAA,SAAA,KAAA,GAAA,GAEAC,IAAA,IAAA,UAAA,EAAA,gBAAAF,GAAA,eAAA;AAEA,aAAAE,EAAA,cAAA,aAAA,KACAC,EAAA,KAAA,KAAA,kBAAA,GACA,OAGAD,EAAA,gBAAA,MACAA,EAAA,gBAAA,gBAAA,IAAA,GAGAA,EAAA,gBAAA;AAAA,IACA;AAAA,IACA,aAAA;AACA,aAAA;AAAA,QACA,OAAA;AAAA,QACA,MAAA;AAAA,QACA,eAAA,KAAA,OAAA,SAAA;AAAA,QACA,cAAA,KAAA,QAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}

package/dist/Components/NcListItem.cjs CHANGED Viewed

@@ -1,5 +1,5 @@
-var y = require("../assets/index-7768d5e5.css");
-const l = require("./NcActions.cjs"), c = require("./NcCounterBubble.cjs"), r = require("./NcVNodes.cjs"), u = require("../chunks/l10n-903083c4.cjs"), d = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
+var y = require("../assets/index-abb90c97.css");
+const l = require("./NcActions.cjs"), c = require("./NcCounterBubble.cjs"), r = require("./NcVNodes.cjs"), u = require("../chunks/l10n-b1d264c7.cjs"), d = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
 const h = {
   name: "NcListItem",
   components: {
@@ -229,7 +229,7 @@ var p = function() {
   f,
   !1,
   null,
-  "425183ac",
+  "9db3a32a",
   null,
   null
 );

package/dist/Components/NcListItem.cjs.map CHANGED Viewed

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

package/dist/Components/NcListItem.mjs CHANGED Viewed

@@ -1,8 +1,8 @@
-import "../assets/index-7768d5e5.css";
+import "../assets/index-abb90c97.css";
 import l from "./NcActions.mjs";
 import c from "./NcCounterBubble.mjs";
 import r from "./NcVNodes.mjs";
-import { t as u } from "../chunks/l10n-27a75c40.mjs";
+import { t as u } from "../chunks/l10n-05a09c66.mjs";
 import { n as d } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
 const h = {
   name: "NcListItem",
@@ -233,7 +233,7 @@ var p = function() {
   f,
   !1,
   null,
-  "425183ac",
+  "9db3a32a",
   null,
   null
 );

package/dist/Components/NcListItem.mjs.map CHANGED Viewed

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