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

package/dist/chunks/NcListItemIcon-BkAwX75l.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcListItemIcon-BkAwX75l.cjs","sources":["../../src/components/NcListItemIcon/NcListItemIcon.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n<docs>\n## This is used to display a avatar-name/subname + icon layout\nIt might be used for list rendering or within the multiselect for example\n\n> **Note:** Any binding will be forwarded on the Avatar component root\n\n```vue\n<NcListItemIcon name=\"User 1\" />\n<NcListItemIcon name=\"User 1\" subname=\"Hidden subname because size is too small\" :avatar-size=\"24\" />\n```\n```vue\n\t<template>\n\t\t<NcListItemIcon name=\"User 1\" :avatar-size=\"44\">\n\t\t\t<Account :size=\"20\" />\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport Account from 'vue-material-design-icons/Account'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tAccount,\n\t\t},\n\t}\n\t</script>\n```\n\n### With icon\n```vue\n\t<template>\n\t\t<NcListItemIcon name=\"Group 1\" subname=\"13 members\" :is-no-user=\"true\">\n\t\t\t<AccountMultiple :size=\"20\" />\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport AccountMultiple from 'vue-material-design-icons/AccountMultiple'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tAccountMultiple,\n\t\t},\n\t}\n\t</script>\n```\n\n### Searching\n```vue\n\t<template>\n\t\t<NcListItemIcon name=\"Test user 1\" subname=\"callmetest@domain.com\" search=\"test\" />\n\t\t<NcListItemIcon name=\"Testing admin\" subname=\"testme@example.com\" search=\"test\" />\n\t\t<NcListItemIcon name=\"Test group 2\" subname=\"loremipsum@domain.com\" :is-no-user=\"true\" search=\"test\">\n\t\t\t<AccountMultiple :size=\"20\" />\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport AccountMultiple from 'vue-material-design-icons/AccountMultiple'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tAccountMultiple,\n\t\t},\n\t}\n\t</script>\n```\n\n### With actions\n```vue\n\t<template>\n\t\t<NcListItemIcon name=\"Test user 1\" subname=\"callmetest@domain.com\">\n\t\t\t<NcActions>\n\t\t\t\t<NcActionButton @click=\"alert('Edit')\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tEdit\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton @click=\"alert('Delete')\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tDelete\n\t\t\t\t</NcActionButton>\n\t\t\t</NcActions>\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport Delete from 'vue-material-design-icons/Delete'\n\timport Pencil from 'vue-material-design-icons/Pencil'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tDelete,\n\t\t\tPencil,\n\t\t},\n\t}\n\t</script>\n```\n</docs>\n\n<template>\n\t<span :id=\"id\"\n\t\tclass=\"option\"\n\t\t:style=\"cssVars\">\n\t\t<NcAvatar v-bind=\"$attrs\"\n\t\t\t:disable-menu=\"true\"\n\t\t\t:disable-tooltip=\"true\"\n\t\t\t:display-name=\"displayName || name\"\n\t\t\t:is-no-user=\"isNoUser\"\n\t\t\t:size=\"avatarSize\"\n\t\t\tclass=\"option__avatar\" />\n\t\t<div class=\"option__details\">\n\t\t\t<NcHighlight class=\"option__lineone\"\n\t\t\t\t:text=\"name\"\n\t\t\t\t:search=\"searchParts[0]\" />\n\t\t\t<NcHighlight v-if=\"isValidSubname && isSizeBigEnough\"\n\t\t\t\tclass=\"option__linetwo\"\n\t\t\t\t:text=\"subname\"\n\t\t\t\t:search=\"searchParts[1]\" />\n\t\t\t<span v-else-if=\"hasStatus\">\n\t\t\t\t<span>{{ userStatus.icon }}</span>\n\t\t\t\t<span>{{ userStatus.message }}</span>\n\t\t\t</span>\n\t\t</div>\n\n\t\t<!-- @slot use this slot to add a custom icon or actions -->\n\t\t<slot>\n\t\t\t<NcIconSvgWrapper v-if=\"hasIconSvg\"\n\t\t\t\tclass=\"option__icon\"\n\t\t\t\t:svg=\"iconSvg\"\n\t\t\t\t:name=\"iconName\" />\n\t\t\t<span v-else-if=\"hasIcon\"\n\t\t\t\tclass=\"icon option__icon\"\n\t\t\t\t:class=\"icon\"\n\t\t\t\t:aria-label=\"iconName\" />\n\t\t</slot>\n\t</span>\n</template>\n\n<script>\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcHighlight from '../NcHighlight/index.js'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\n\nimport { userStatus } from '../../mixins/index.js'\n\n// global margin, ^2 ratio\nconst margin = 8\nconst defaultSize = 32\n\nexport default {\n\tname: 'NcListItemIcon',\n\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcHighlight,\n\t\tNcIconSvgWrapper,\n\t},\n\n\tmixins: [\n\t\tuserStatus,\n\t],\n\n\tprops: {\n\t\t/**\n\t\t * Default first line text\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Secondary optional line\n\t\t * Only visible on size of 32 and above\n\t\t */\n\t\tsubname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Icon class to be displayed at the end of the component\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * SVG icon to be displayed at the end of the component\n\t\t */\n\t\ticonSvg: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Descriptive name for the icon\n\t\t */\n\t\ticonName: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Search within the highlight of name/subname\n\t\t */\n\t\tsearch: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Set a size in px that will define the avatar height/width\n\t\t * and therefore, the height of the component\n\t\t */\n\t\tavatarSize: {\n\t\t\ttype: Number,\n\t\t\tdefault: defaultSize,\n\t\t},\n\n\t\t/**\n\t\t * Disable the margins of this component.\n\t\t * Useful for integration in `NcSelect` for example\n\t\t */\n\t\tnoMargin: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * See the [Avatar](#Avatar) displayName prop\n\t\t * Fallback to name\n\t\t */\n\t\tdisplayName: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * See the [Avatar](#Avatar) isNoUser prop\n\t\t * Enable/disable the UserStatus fetching\n\t\t */\n\t\tisNoUser: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Unique list item ID\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tmargin,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\thasIcon() {\n\t\t\treturn this.icon !== ''\n\t\t},\n\n\t\thasIconSvg() {\n\t\t\treturn this.iconSvg !== ''\n\t\t},\n\n\t\tisValidSubname() {\n\t\t\treturn this.subname?.trim?.() !== ''\n\t\t},\n\n\t\tisSizeBigEnough() {\n\t\t\treturn this.avatarSize >= defaultSize\n\t\t},\n\n\t\tcssVars() {\n\t\t\t// Don't use margin to calculate the height if noMargin\n\t\t\tconst margin = this.noMargin ? 0 : this.margin\n\n\t\t\treturn {\n\t\t\t\t'--height': this.avatarSize + 2 * margin + 'px',\n\t\t\t\t'--margin': this.margin + 'px',\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Seperates the search property into two parts, the first one is the search part on the name, the second on the subname.\n\t\t * @return {[string, string]}\n\t\t */\n\t\tsearchParts() {\n\t\t\t// Match the email notation like \"Jane <j.doe@example.com>\" with the email address as matching group\n\t\t\tconst EMAIL_NOTATION = /^([^<]*)<([^>]+)>?$/\n\n\t\t\tconst match = this.search.match(EMAIL_NOTATION)\n\t\t\tif (this.isNoUser || !match) {\n\t\t\t\treturn [this.search, this.search]\n\t\t\t}\n\t\t\treturn [match[1].trim(), match[2]]\n\t\t},\n\t},\n\n\tbeforeMount() {\n\t\t// If we don't have a subname and if this is a user\n\t\tif (!this.isNoUser && !this.subname) {\n\t\t\tthis.fetchUserStatus(this.user)\n\t\t}\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.option {\n\tdisplay: flex;\n\talign-items: center;\n\twidth: 100%;\n\theight: var(--height);\n\tcursor: inherit;\n\n\t&__avatar {\n\t\tmargin-right: var(--margin);\n\t}\n\n\t&__details {\n\t\tdisplay: flex;\n\t\tflex: 1 1;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\tmin-width: 0;\n\t}\n\n\t&__lineone {\n\t\tcolor: var(--color-main-text);\n\t}\n\n\t&__linetwo {\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\n\t&__lineone,\n\t&__linetwo {\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\tline-height: 1.1em;\n\t\tstrong {\n\t\t\tfont-weight: bold;\n\t\t}\n\t}\n\n\t&__icon {\n\t\twidth: $clickable-area;\n\t\theight: $clickable-area;\n\t\tcolor: var(--color-text-maxcontrast);\n\t\t&.icon {\n\t\t\tflex: 0 0 $clickable-area;\n\t\t\topacity: $opacity_normal;\n\t\t\tbackground-position: center;\n\t\t\tbackground-size: 16px;\n\t\t}\n\t}\n\n\t&__details,\n\t&__lineone,\n\t&__linetwo,\n\t&__icon {\n\t\tcursor: inherit;\n\t}\n}\n</style>\n"],"names":["margin","defaultSize","_sfc_main","NcAvatar","NcIconSvgWrapper","_b","_a","EMAIL_NOTATION","match","_hoisted_1","_hoisted_2","_hoisted_4","$props","vue","$options","_hoisted_3","_ctx"],"mappings":";;;;;;;;;AAuKA,MAAAA,IAAA,GACAC,IAAA,IAEAC,IAAA;AAAA,EACC,MAAA;AAAA;IAGC,UAAAC,EAAA;AAAA;IAEA,kBAAAC,EAAA;AAAA;EAGD,QAAA;AAAA;;EAIA,OAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;IAaC,SAAA;AAAA;;;;;;;;;;;;;IAgBA,SAAA;AAAA;;;;;;IAQA,UAAA;AAAA;;;;;;IAQA,QAAA;AAAA;;;;;;;;;MAWC,SAAAH;AAAA;;;;;IAOD,UAAA;AAAA;;;;;;;;;;;;;;;IAiBA,UAAA;AAAA;;;;;;IAQA,IAAA;AAAA;;;;EAMD,OAAA;AACC,WAAA;AAAA,MACC,QAAAD;AAAA,IACD;AAAA;EAGD,UAAA;AAAA,IACC,UAAA;AACC,aAAA,KAAA,SAAA;AAAA;;;;IAOD,iBAAA;;AACC,eAAAK,KAAAC,IAAA,KAAA,YAAA,gBAAAA,EAAA,SAAA,gBAAAD,EAAA,KAAAC,QAAA;AAAA;IAGD,kBAAA;AACC,aAAA,KAAA,cAAAL;AAAA;IAGD,UAAA;AAEC,YAAAD,IAAA,KAAA,WAAA,IAAA,KAAA;AAEA,aAAA;AAAA,QACC,YAAA,KAAA,aAAA,IAAAA,IAAA;AAAA;MAED;AAAA;;;;;;AASA,YAAAO,IAAA,uBAEAC,IAAA,KAAA,OAAA,MAAAD,CAAA;mCAEC,CAAA,KAAA,QAAA,KAAA,MAAA,IAED,CAAAC,EAAA,CAAA,EAAA,KAAA,GAAAA,EAAA,CAAA,CAAA;AAAA;;;AAMD,IAAA,CAAA,KAAA,YAAA,CAAA,KAAA,WACC,KAAA,gBAAA,KAAA,IAAA;AAAA;AAGH,GA5UAC,IAAA,CAAA,IAAA,GAmIOC,IAAA,EAAA,OAAA,kBAAA,mBAnIPC,IAAA,CAAA,YAAA;;;;IAyHQ,IAAAC,EAAA;AAAA,IACN,OAAA;AAAA;;;MAGE,gBAAA;AAAA,MACA,mBAAA;AAAA;MAEA,cAAAA,EAAA;AAAA,MACA,MAAAA,EAAA;AAAA,MACD,OAAA;AAAA;IACDC,EAAA,mBAAA,OAAAH,GAAA;AAAA;QACc,OAAA;AAAA,QACX,MAAAE,EAAA;AAAA,QACA,QAAAE,EAAA,YAAA,CAAA;AAAA;MACiBA,EAAA,kBAAAA,EAAA;;QAClB,OAAA;AAAA,QACC,MAAAF,EAAA;AAAA,QACA,QAAAE,EAAA,YAAA,CAAA;AAAA,wDACFD,EAAA,UAAA,GAAAA,EAAA,mBAAA,QAAAE,GAAA;AAAA;;YA3IHF,EAAA,mBAAA,IAAA,EAAA;AAAA;IAkJEA,EAAA,WAAAG,EAAA,QAAA,WAAA,CAAA,GAAA,MAAA;AAAA;;QAEE,OAAA;AAAA,QACC,KAAAJ,EAAA;AAAA,QACA,MAAAA,EAAA;AAAA;;QAED,OAAAC,EAAA,eAAA,CAAA,qBAAAD,EAAA,IAAA,CAAA;AAAA,QAEC,cAAAA,EAAA;AAAA,MA1JL,GAAA,MAAA,IAAAD,CAAA,KAAAE,EAAA,mBAAA,IAAA,EAAA;AAAA;EAAA,GAAA,IAAAJ,CAAA;;;;"}

package/dist/chunks/NcListItemIcon-DHTMHhZD.mjs

@@ -0,0 +1,193 @@
+import "../assets/NcListItemIcon-CaURDugr.css";
+import { N as _, u as S } from "./NcAvatar-DVbgzwca.mjs";
+import { _ as f } from "./NcHighlight-GDN9q3CO.mjs";
+import { N } from "./NcIconSvgWrapper-CHmWpTAZ.mjs";
+import "@nextcloud/router";
+import { resolveComponent as i, openBlock as n, createElementBlock as r, normalizeStyle as y, createVNode as l, mergeProps as v, createElementVNode as o, createBlock as m, toDisplayString as u, createCommentVNode as h, renderSlot as I, normalizeClass as b } from "vue";
+/* empty css                                                                          */
+import { _ as z } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+import "linkify-string";
+import "escape-html";
+import "striptags";
+const k = 8, d = 32, B = {
+  name: "NcListItemIcon",
+  components: {
+    NcAvatar: _,
+    NcHighlight: f,
+    NcIconSvgWrapper: N
+  },
+  mixins: [
+    S
+  ],
+  props: {
+    /**
+     * Default first line text
+     */
+    name: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Secondary optional line
+     * Only visible on size of 32 and above
+     */
+    subname: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Icon class to be displayed at the end of the component
+     */
+    icon: {
+      type: String,
+      default: ""
+    },
+    /**
+     * SVG icon to be displayed at the end of the component
+     */
+    iconSvg: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Descriptive name for the icon
+     */
+    iconName: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Search within the highlight of name/subname
+     */
+    search: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Set a size in px that will define the avatar height/width
+     * and therefore, the height of the component
+     */
+    avatarSize: {
+      type: Number,
+      default: d
+    },
+    /**
+     * Disable the margins of this component.
+     * Useful for integration in `NcSelect` for example
+     */
+    noMargin: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * See the [Avatar](#Avatar) displayName prop
+     * Fallback to name
+     */
+    displayName: {
+      type: String,
+      default: null
+    },
+    /**
+     * See the [Avatar](#Avatar) isNoUser prop
+     * Enable/disable the UserStatus fetching
+     */
+    isNoUser: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Unique list item ID
+     */
+    id: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      margin: k
+    };
+  },
+  computed: {
+    hasIcon() {
+      return this.icon !== "";
+    },
+    hasIconSvg() {
+      return this.iconSvg !== "";
+    },
+    isValidSubname() {
+      var e, a;
+      return ((a = (e = this.subname) == null ? void 0 : e.trim) == null ? void 0 : a.call(e)) !== "";
+    },
+    isSizeBigEnough() {
+      return this.avatarSize >= d;
+    },
+    cssVars() {
+      const e = this.noMargin ? 0 : this.margin;
+      return {
+        "--height": this.avatarSize + 2 * e + "px",
+        "--margin": this.margin + "px"
+      };
+    },
+    /**
+     * Seperates the search property into two parts, the first one is the search part on the name, the second on the subname.
+     * @return {[string, string]}
+     */
+    searchParts() {
+      const e = /^([^<]*)<([^>]+)>?$/, a = this.search.match(e);
+      return this.isNoUser || !a ? [this.search, this.search] : [a[1].trim(), a[2]];
+    }
+  },
+  beforeMount() {
+    !this.isNoUser && !this.subname && this.fetchUserStatus(this.user);
+  }
+}, V = ["id"], x = { class: "option__details" }, A = { key: 1 }, E = ["aria-label"];
+function U(e, a, t, M, P, s) {
+  const g = i("NcAvatar"), c = i("NcHighlight"), p = i("NcIconSvgWrapper");
+  return n(), r("span", {
+    id: t.id,
+    class: "option",
+    style: y(s.cssVars)
+  }, [
+    l(g, v(e.$attrs, {
+      "disable-menu": !0,
+      "disable-tooltip": !0,
+      "display-name": t.displayName || t.name,
+      "is-no-user": t.isNoUser,
+      size: t.avatarSize,
+      class: "option__avatar"
+    }), null, 16, ["display-name", "is-no-user", "size"]),
+    o("div", x, [
+      l(c, {
+        class: "option__lineone",
+        text: t.name,
+        search: s.searchParts[0]
+      }, null, 8, ["text", "search"]),
+      s.isValidSubname && s.isSizeBigEnough ? (n(), m(c, {
+        key: 0,
+        class: "option__linetwo",
+        text: t.subname,
+        search: s.searchParts[1]
+      }, null, 8, ["text", "search"])) : e.hasStatus ? (n(), r("span", A, [
+        o("span", null, u(e.userStatus.icon), 1),
+        o("span", null, u(e.userStatus.message), 1)
+      ])) : h("", !0)
+    ]),
+    I(e.$slots, "default", {}, () => [
+      s.hasIconSvg ? (n(), m(p, {
+        key: 0,
+        class: "option__icon",
+        svg: t.iconSvg,
+        name: t.iconName
+      }, null, 8, ["svg", "name"])) : s.hasIcon ? (n(), r("span", {
+        key: 1,
+        class: b(["icon option__icon", t.icon]),
+        "aria-label": t.iconName
+      }, null, 10, E)) : h("", !0)
+    ], !0)
+  ], 12, V);
+}
+const G = /* @__PURE__ */ z(B, [["render", U], ["__scopeId", "data-v-467f3287"]]);
+export {
+  G as N
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcListItemIcon-DHTMHhZD.mjs","sources":["../../src/components/NcListItemIcon/NcListItemIcon.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n<docs>\n## This is used to display a avatar-name/subname + icon layout\nIt might be used for list rendering or within the multiselect for example\n\n> **Note:** Any binding will be forwarded on the Avatar component root\n\n```vue\n<NcListItemIcon name=\"User 1\" />\n<NcListItemIcon name=\"User 1\" subname=\"Hidden subname because size is too small\" :avatar-size=\"24\" />\n```\n```vue\n\t<template>\n\t\t<NcListItemIcon name=\"User 1\" :avatar-size=\"44\">\n\t\t\t<Account :size=\"20\" />\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport Account from 'vue-material-design-icons/Account'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tAccount,\n\t\t},\n\t}\n\t</script>\n```\n\n### With icon\n```vue\n\t<template>\n\t\t<NcListItemIcon name=\"Group 1\" subname=\"13 members\" :is-no-user=\"true\">\n\t\t\t<AccountMultiple :size=\"20\" />\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport AccountMultiple from 'vue-material-design-icons/AccountMultiple'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tAccountMultiple,\n\t\t},\n\t}\n\t</script>\n```\n\n### Searching\n```vue\n\t<template>\n\t\t<NcListItemIcon name=\"Test user 1\" subname=\"callmetest@domain.com\" search=\"test\" />\n\t\t<NcListItemIcon name=\"Testing admin\" subname=\"testme@example.com\" search=\"test\" />\n\t\t<NcListItemIcon name=\"Test group 2\" subname=\"loremipsum@domain.com\" :is-no-user=\"true\" search=\"test\">\n\t\t\t<AccountMultiple :size=\"20\" />\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport AccountMultiple from 'vue-material-design-icons/AccountMultiple'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tAccountMultiple,\n\t\t},\n\t}\n\t</script>\n```\n\n### With actions\n```vue\n\t<template>\n\t\t<NcListItemIcon name=\"Test user 1\" subname=\"callmetest@domain.com\">\n\t\t\t<NcActions>\n\t\t\t\t<NcActionButton @click=\"alert('Edit')\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tEdit\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton @click=\"alert('Delete')\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tDelete\n\t\t\t\t</NcActionButton>\n\t\t\t</NcActions>\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport Delete from 'vue-material-design-icons/Delete'\n\timport Pencil from 'vue-material-design-icons/Pencil'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tDelete,\n\t\t\tPencil,\n\t\t},\n\t}\n\t</script>\n```\n</docs>\n\n<template>\n\t<span :id=\"id\"\n\t\tclass=\"option\"\n\t\t:style=\"cssVars\">\n\t\t<NcAvatar v-bind=\"$attrs\"\n\t\t\t:disable-menu=\"true\"\n\t\t\t:disable-tooltip=\"true\"\n\t\t\t:display-name=\"displayName || name\"\n\t\t\t:is-no-user=\"isNoUser\"\n\t\t\t:size=\"avatarSize\"\n\t\t\tclass=\"option__avatar\" />\n\t\t<div class=\"option__details\">\n\t\t\t<NcHighlight class=\"option__lineone\"\n\t\t\t\t:text=\"name\"\n\t\t\t\t:search=\"searchParts[0]\" />\n\t\t\t<NcHighlight v-if=\"isValidSubname && isSizeBigEnough\"\n\t\t\t\tclass=\"option__linetwo\"\n\t\t\t\t:text=\"subname\"\n\t\t\t\t:search=\"searchParts[1]\" />\n\t\t\t<span v-else-if=\"hasStatus\">\n\t\t\t\t<span>{{ userStatus.icon }}</span>\n\t\t\t\t<span>{{ userStatus.message }}</span>\n\t\t\t</span>\n\t\t</div>\n\n\t\t<!-- @slot use this slot to add a custom icon or actions -->\n\t\t<slot>\n\t\t\t<NcIconSvgWrapper v-if=\"hasIconSvg\"\n\t\t\t\tclass=\"option__icon\"\n\t\t\t\t:svg=\"iconSvg\"\n\t\t\t\t:name=\"iconName\" />\n\t\t\t<span v-else-if=\"hasIcon\"\n\t\t\t\tclass=\"icon option__icon\"\n\t\t\t\t:class=\"icon\"\n\t\t\t\t:aria-label=\"iconName\" />\n\t\t</slot>\n\t</span>\n</template>\n\n<script>\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcHighlight from '../NcHighlight/index.js'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\n\nimport { userStatus } from '../../mixins/index.js'\n\n// global margin, ^2 ratio\nconst margin = 8\nconst defaultSize = 32\n\nexport default {\n\tname: 'NcListItemIcon',\n\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcHighlight,\n\t\tNcIconSvgWrapper,\n\t},\n\n\tmixins: [\n\t\tuserStatus,\n\t],\n\n\tprops: {\n\t\t/**\n\t\t * Default first line text\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Secondary optional line\n\t\t * Only visible on size of 32 and above\n\t\t */\n\t\tsubname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Icon class to be displayed at the end of the component\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * SVG icon to be displayed at the end of the component\n\t\t */\n\t\ticonSvg: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Descriptive name for the icon\n\t\t */\n\t\ticonName: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Search within the highlight of name/subname\n\t\t */\n\t\tsearch: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Set a size in px that will define the avatar height/width\n\t\t * and therefore, the height of the component\n\t\t */\n\t\tavatarSize: {\n\t\t\ttype: Number,\n\t\t\tdefault: defaultSize,\n\t\t},\n\n\t\t/**\n\t\t * Disable the margins of this component.\n\t\t * Useful for integration in `NcSelect` for example\n\t\t */\n\t\tnoMargin: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * See the [Avatar](#Avatar) displayName prop\n\t\t * Fallback to name\n\t\t */\n\t\tdisplayName: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * See the [Avatar](#Avatar) isNoUser prop\n\t\t * Enable/disable the UserStatus fetching\n\t\t */\n\t\tisNoUser: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Unique list item ID\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tmargin,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\thasIcon() {\n\t\t\treturn this.icon !== ''\n\t\t},\n\n\t\thasIconSvg() {\n\t\t\treturn this.iconSvg !== ''\n\t\t},\n\n\t\tisValidSubname() {\n\t\t\treturn this.subname?.trim?.() !== ''\n\t\t},\n\n\t\tisSizeBigEnough() {\n\t\t\treturn this.avatarSize >= defaultSize\n\t\t},\n\n\t\tcssVars() {\n\t\t\t// Don't use margin to calculate the height if noMargin\n\t\t\tconst margin = this.noMargin ? 0 : this.margin\n\n\t\t\treturn {\n\t\t\t\t'--height': this.avatarSize + 2 * margin + 'px',\n\t\t\t\t'--margin': this.margin + 'px',\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Seperates the search property into two parts, the first one is the search part on the name, the second on the subname.\n\t\t * @return {[string, string]}\n\t\t */\n\t\tsearchParts() {\n\t\t\t// Match the email notation like \"Jane <j.doe@example.com>\" with the email address as matching group\n\t\t\tconst EMAIL_NOTATION = /^([^<]*)<([^>]+)>?$/\n\n\t\t\tconst match = this.search.match(EMAIL_NOTATION)\n\t\t\tif (this.isNoUser || !match) {\n\t\t\t\treturn [this.search, this.search]\n\t\t\t}\n\t\t\treturn [match[1].trim(), match[2]]\n\t\t},\n\t},\n\n\tbeforeMount() {\n\t\t// If we don't have a subname and if this is a user\n\t\tif (!this.isNoUser && !this.subname) {\n\t\t\tthis.fetchUserStatus(this.user)\n\t\t}\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.option {\n\tdisplay: flex;\n\talign-items: center;\n\twidth: 100%;\n\theight: var(--height);\n\tcursor: inherit;\n\n\t&__avatar {\n\t\tmargin-right: var(--margin);\n\t}\n\n\t&__details {\n\t\tdisplay: flex;\n\t\tflex: 1 1;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\tmin-width: 0;\n\t}\n\n\t&__lineone {\n\t\tcolor: var(--color-main-text);\n\t}\n\n\t&__linetwo {\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\n\t&__lineone,\n\t&__linetwo {\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\tline-height: 1.1em;\n\t\tstrong {\n\t\t\tfont-weight: bold;\n\t\t}\n\t}\n\n\t&__icon {\n\t\twidth: $clickable-area;\n\t\theight: $clickable-area;\n\t\tcolor: var(--color-text-maxcontrast);\n\t\t&.icon {\n\t\t\tflex: 0 0 $clickable-area;\n\t\t\topacity: $opacity_normal;\n\t\t\tbackground-position: center;\n\t\t\tbackground-size: 16px;\n\t\t}\n\t}\n\n\t&__details,\n\t&__lineone,\n\t&__linetwo,\n\t&__icon {\n\t\tcursor: inherit;\n\t}\n}\n</style>\n"],"names":["margin","defaultSize","_sfc_main","NcAvatar","NcIconSvgWrapper","_b","_a","EMAIL_NOTATION","match","_hoisted_1","_hoisted_2","_hoisted_4","$props","createElementVNode","$options","openBlock","createElementBlock","_hoisted_3","createCommentVNode","renderSlot","_ctx","normalizeClass"],"mappings":";;;;;;;;;;;AAuKA,MAAAA,IAAA,GACAC,IAAA,IAEAC,IAAA;AAAA,EACC,MAAA;AAAA;IAGC,UAAAC;AAAA;IAEA,kBAAAC;AAAA;EAGD,QAAA;AAAA;;EAIA,OAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;IAaC,SAAA;AAAA;;;;;;;;;;;;;IAgBA,SAAA;AAAA;;;;;;IAQA,UAAA;AAAA;;;;;;IAQA,QAAA;AAAA;;;;;;;;;MAWC,SAAAH;AAAA;;;;;IAOD,UAAA;AAAA;;;;;;;;;;;;;;;IAiBA,UAAA;AAAA;;;;;;IAQA,IAAA;AAAA;;;;EAMD,OAAA;AACC,WAAA;AAAA,MACC,QAAAD;AAAA,IACD;AAAA;EAGD,UAAA;AAAA,IACC,UAAA;AACC,aAAA,KAAA,SAAA;AAAA;;;;IAOD,iBAAA;;AACC,eAAAK,KAAAC,IAAA,KAAA,YAAA,gBAAAA,EAAA,SAAA,gBAAAD,EAAA,KAAAC,QAAA;AAAA;IAGD,kBAAA;AACC,aAAA,KAAA,cAAAL;AAAA;IAGD,UAAA;AAEC,YAAAD,IAAA,KAAA,WAAA,IAAA,KAAA;AAEA,aAAA;AAAA,QACC,YAAA,KAAA,aAAA,IAAAA,IAAA;AAAA;MAED;AAAA;;;;;;AASA,YAAAO,IAAA,uBAEAC,IAAA,KAAA,OAAA,MAAAD,CAAA;mCAEC,CAAA,KAAA,QAAA,KAAA,MAAA,IAED,CAAAC,EAAA,CAAA,EAAA,KAAA,GAAAA,EAAA,CAAA,CAAA;AAAA;;;AAMD,IAAA,CAAA,KAAA,YAAA,CAAA,KAAA,WACC,KAAA,gBAAA,KAAA,IAAA;AAAA;AAGH,GA5UAC,IAAA,CAAA,IAAA,GAmIOC,IAAA,EAAA,OAAA,kBAAA,mBAnIPC,IAAA,CAAA,YAAA;;;;IAyHQ,IAAAC,EAAA;AAAA,IACN,OAAA;AAAA;;;MAGE,gBAAA;AAAA,MACA,mBAAA;AAAA;MAEA,cAAAA,EAAA;AAAA,MACA,MAAAA,EAAA;AAAA,MACD,OAAA;AAAA;IACDC,EAAA,OAAAH,GAAA;AAAA;QACc,OAAA;AAAA,QACX,MAAAE,EAAA;AAAA,QACA,QAAAE,EAAA,YAAA,CAAA;AAAA;MACiBA,EAAA,kBAAAA,EAAA;;QAClB,OAAA;AAAA,QACC,MAAAF,EAAA;AAAA,QACA,QAAAE,EAAA,YAAA,CAAA;AAAA,wDACFC,EAAA,GAAAC,EAAA,QAAAC,GAAA;AAAA;;YA3IHC,EAAA,IAAA,EAAA;AAAA;IAkJEC,EAAAC,EAAA,QAAA,WAAA,CAAA,GAAA,MAAA;AAAA;;QAEE,OAAA;AAAA,QACC,KAAAR,EAAA;AAAA,QACA,MAAAA,EAAA;AAAA;;QAED,OAAAS,EAAA,CAAA,qBAAAT,EAAA,IAAA,CAAA;AAAA,QAEC,cAAAA,EAAA;AAAA,MA1JL,GAAA,MAAA,IAAAD,CAAA,KAAAO,EAAA,IAAA,EAAA;AAAA;EAAA,GAAA,IAAAT,CAAA;;;"}

package/dist/chunks/NcLoadingIcon-C5Ohiq97.mjs

@@ -0,0 +1,68 @@
+import "../assets/NcLoadingIcon-CFmftMkz.css";
+import { openBlock as a, createElementBlock as o, createElementVNode as r, toDisplayString as n, createCommentVNode as l } from "vue";
+import { _ as c } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+const s = {
+  name: "NcLoadingIcon",
+  props: {
+    /**
+     * Specify the size of the loading icon.
+     */
+    size: {
+      type: Number,
+      default: 20
+    },
+    /**
+     * The appearance of the loading icon.
+     * 'auto' adjusts to the Nextcloud color scheme,
+     * 'light' and 'dark' are static.
+     */
+    appearance: {
+      type: String,
+      validator(e) {
+        return ["auto", "light", "dark"].includes(e);
+      },
+      default: "auto"
+    },
+    /**
+     * Specify what is loading.
+     */
+    name: {
+      type: String,
+      default: ""
+    }
+  },
+  computed: {
+    colors() {
+      const e = ["#777", "#CCC"];
+      return this.appearance === "light" ? e : this.appearance === "dark" ? e.reverse() : ["var(--color-loading-light)", "var(--color-loading-dark)"];
+    }
+  }
+}, d = ["aria-label"], _ = ["width", "height"], h = ["fill"], m = ["fill"], u = { key: 0 };
+function g(e, f, t, p, v, i) {
+  return a(), o("span", {
+    "aria-label": t.name,
+    role: "img",
+    class: "material-design-icon loading-icon"
+  }, [
+    (a(), o("svg", {
+      width: t.size,
+      height: t.size,
+      viewBox: "0 0 24 24"
+    }, [
+      r("path", {
+        fill: i.colors[0],
+        d: "M12,4V2A10,10 0 1,0 22,12H20A8,8 0 1,1 12,4Z"
+      }, null, 8, h),
+      r("path", {
+        fill: i.colors[1],
+        d: "M12,4V2A10,10 0 0,1 22,12H20A8,8 0 0,0 12,4Z"
+      }, [
+        t.name ? (a(), o("title", u, n(t.name), 1)) : l("", !0)
+      ], 8, m)
+    ], 8, _))
+  ], 8, d);
+}
+const x = /* @__PURE__ */ c(s, [["render", g], ["__scopeId", "data-v-626664cd"]]);
+export {
+  x as N
+};

package/dist/chunks/NcLoadingIcon-C5Ohiq97.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcLoadingIcon-C5Ohiq97.mjs","sources":["../../src/components/NcLoadingIcon/NcLoadingIcon.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2022 Raimund Schlüßler <raimund.schluessler@mailbox.org>\n -\n - @author Raimund Schlüßler <raimund.schluessler@mailbox.org>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n\n<docs>\n# Usage\n\n```\n<div>\n\t<NcLoadingIcon />\n</div>\n<div style=\"background-color: #171717;\">\n\t<NcLoadingIcon :size=\"64\" appearance=\"light\" name=\"Loading on dark background\" />\n</div>\n<div style=\"background-color: #fff;\">\n\t<NcLoadingIcon :size=\"64\" appearance=\"dark\" name=\"Loading on light background\" />\n</div>\n```\n</docs>\n\n<template>\n\t<span :aria-label=\"name\"\n\t\trole=\"img\"\n\t\tclass=\"material-design-icon loading-icon\">\n\t\t<svg :width=\"size\"\n\t\t\t:height=\"size\"\n\t\t\tviewBox=\"0 0 24 24\">\n\t\t\t<path :fill=\"colors[0]\" d=\"M12,4V2A10,10 0 1,0 22,12H20A8,8 0 1,1 12,4Z\" />\n\t\t\t<path :fill=\"colors[1]\" d=\"M12,4V2A10,10 0 0,1 22,12H20A8,8 0 0,0 12,4Z\">\n\t\t\t\t<title v-if=\"name\">{{ name }}</title>\n\t\t\t</path>\n\t\t</svg>\n\t</span>\n</template>\n\n<script>\nexport default {\n\tname: 'NcLoadingIcon',\n\tprops: {\n\t\t/**\n\t\t * Specify the size of the loading icon.\n\t\t */\n\t\tsize: {\n\t\t\ttype: Number,\n\t\t\tdefault: 20,\n\t\t},\n\t\t/**\n\t\t * The appearance of the loading icon.\n\t\t * 'auto' adjusts to the Nextcloud color scheme,\n\t\t * 'light' and 'dark' are static.\n\t\t */\n\t\tappearance: {\n\t\t\ttype: String,\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['auto', 'light', 'dark'].includes(value)\n\t\t\t},\n\t\t\tdefault: 'auto',\n\t\t},\n\t\t/**\n\t\t * Specify what is loading.\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\tcomputed: {\n\t\tcolors() {\n\t\t\tconst colors = ['#777', '#CCC']\n\t\t\tif (this.appearance === 'light') {\n\t\t\t\treturn colors\n\t\t\t} else if (this.appearance === 'dark') {\n\t\t\t\treturn colors.reverse()\n\t\t\t}\n\t\t\treturn ['var(--color-loading-light)', 'var(--color-loading-dark)']\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.loading-icon svg{\n\tanimation: rotate var(--animation-duration, 0.8s) linear infinite;\n}\n</style>\n"],"names":["_sfc_main","value","colors","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","$props","$options","createCommentVNode"],"mappings":";;;AAsDA,MAAAA,IAAA;AAAA,EACC,MAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;MAeE,UAAAC,GAAA;AACC,eAAA,CAAA,QAAA,SAAA,MAAA,EAAA,SAAAA,CAAA;AAAA;MAED,SAAA;AAAA;;;;;;;;;EAUF,UAAA;AAAA,IACC,SAAA;;+CAIC,KAAA,eAAA,SACCC,EAAA,QAAA,IAED,CAAA,8BAAA,2BAAA;AAAA;;AAGH,GA/FAC,IAAA,CAAA,YAAA,GAAAC,IAAA,CAAA,SAAA,QAAA,GAAAC,IAAA,CAAA,MAAA,GAAAC,IAAA,CAAA,MAAA;;;IAuCQ,cAAAC,EAAA;AAAA,IACN,MAAA;AAAA,IACA,OAAA;AAAA;;MACM,OAAAA,EAAA;AAAA,MACJ,QAAAA,EAAA;AAAA,MACD,SAAA;AAAA;;QACO,MAAAC,EAAA,OAAA,CAAA;AAAA,QAAiB,GAAA;AAAA,MA7C3B,GAAA,MAAA,GAAAH,CAAA;AAAA;QA8CU,MAAAG,EAAA,OAAA,CAAA;AAAA,QAAiB,GAAA;AAAA;sDA9C3BC,EAAA,IAAA,EAAA;AAAA,MAAA,GAAA,GAAAH,CAAA;AAAA,IAAA,GAAA,GAAAF,CAAA;AAAA,EAAA,GAAA,GAAAD,CAAA;;;"}

package/dist/chunks/NcLoadingIcon-DkXGgGqQ.cjs

@@ -0,0 +1,64 @@
+var p = require("../assets/NcLoadingIcon-CFmftMkz.css");
+const e = require("vue"), n = require("./_plugin-vue_export-helper-CTzpuyvq.cjs"), c = {
+  name: "NcLoadingIcon",
+  props: {
+    /**
+     * Specify the size of the loading icon.
+     */
+    size: {
+      type: Number,
+      default: 20
+    },
+    /**
+     * The appearance of the loading icon.
+     * 'auto' adjusts to the Nextcloud color scheme,
+     * 'light' and 'dark' are static.
+     */
+    appearance: {
+      type: String,
+      validator(t) {
+        return ["auto", "light", "dark"].includes(t);
+      },
+      default: "auto"
+    },
+    /**
+     * Specify what is loading.
+     */
+    name: {
+      type: String,
+      default: ""
+    }
+  },
+  computed: {
+    colors() {
+      const t = ["#777", "#CCC"];
+      return this.appearance === "light" ? t : this.appearance === "dark" ? t.reverse() : ["var(--color-loading-light)", "var(--color-loading-dark)"];
+    }
+  }
+}, r = ["aria-label"], i = ["width", "height"], l = ["fill"], s = ["fill"], d = { key: 0 };
+function u(t, h, o, g, m, a) {
+  return e.openBlock(), e.createElementBlock("span", {
+    "aria-label": o.name,
+    role: "img",
+    class: "material-design-icon loading-icon"
+  }, [
+    (e.openBlock(), e.createElementBlock("svg", {
+      width: o.size,
+      height: o.size,
+      viewBox: "0 0 24 24"
+    }, [
+      e.createElementVNode("path", {
+        fill: a.colors[0],
+        d: "M12,4V2A10,10 0 1,0 22,12H20A8,8 0 1,1 12,4Z"
+      }, null, 8, l),
+      e.createElementVNode("path", {
+        fill: a.colors[1],
+        d: "M12,4V2A10,10 0 0,1 22,12H20A8,8 0 0,0 12,4Z"
+      }, [
+        o.name ? (e.openBlock(), e.createElementBlock("title", d, e.toDisplayString(o.name), 1)) : e.createCommentVNode("", !0)
+      ], 8, s)
+    ], 8, i))
+  ], 8, r);
+}
+const _ = /* @__PURE__ */ n._export_sfc(c, [["render", u], ["__scopeId", "data-v-626664cd"]]);
+exports.NcLoadingIcon = _;

package/dist/chunks/NcLoadingIcon-DkXGgGqQ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcLoadingIcon-DkXGgGqQ.cjs","sources":["../../src/components/NcLoadingIcon/NcLoadingIcon.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2022 Raimund Schlüßler <raimund.schluessler@mailbox.org>\n -\n - @author Raimund Schlüßler <raimund.schluessler@mailbox.org>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n\n<docs>\n# Usage\n\n```\n<div>\n\t<NcLoadingIcon />\n</div>\n<div style=\"background-color: #171717;\">\n\t<NcLoadingIcon :size=\"64\" appearance=\"light\" name=\"Loading on dark background\" />\n</div>\n<div style=\"background-color: #fff;\">\n\t<NcLoadingIcon :size=\"64\" appearance=\"dark\" name=\"Loading on light background\" />\n</div>\n```\n</docs>\n\n<template>\n\t<span :aria-label=\"name\"\n\t\trole=\"img\"\n\t\tclass=\"material-design-icon loading-icon\">\n\t\t<svg :width=\"size\"\n\t\t\t:height=\"size\"\n\t\t\tviewBox=\"0 0 24 24\">\n\t\t\t<path :fill=\"colors[0]\" d=\"M12,4V2A10,10 0 1,0 22,12H20A8,8 0 1,1 12,4Z\" />\n\t\t\t<path :fill=\"colors[1]\" d=\"M12,4V2A10,10 0 0,1 22,12H20A8,8 0 0,0 12,4Z\">\n\t\t\t\t<title v-if=\"name\">{{ name }}</title>\n\t\t\t</path>\n\t\t</svg>\n\t</span>\n</template>\n\n<script>\nexport default {\n\tname: 'NcLoadingIcon',\n\tprops: {\n\t\t/**\n\t\t * Specify the size of the loading icon.\n\t\t */\n\t\tsize: {\n\t\t\ttype: Number,\n\t\t\tdefault: 20,\n\t\t},\n\t\t/**\n\t\t * The appearance of the loading icon.\n\t\t * 'auto' adjusts to the Nextcloud color scheme,\n\t\t * 'light' and 'dark' are static.\n\t\t */\n\t\tappearance: {\n\t\t\ttype: String,\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['auto', 'light', 'dark'].includes(value)\n\t\t\t},\n\t\t\tdefault: 'auto',\n\t\t},\n\t\t/**\n\t\t * Specify what is loading.\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\tcomputed: {\n\t\tcolors() {\n\t\t\tconst colors = ['#777', '#CCC']\n\t\t\tif (this.appearance === 'light') {\n\t\t\t\treturn colors\n\t\t\t} else if (this.appearance === 'dark') {\n\t\t\t\treturn colors.reverse()\n\t\t\t}\n\t\t\treturn ['var(--color-loading-light)', 'var(--color-loading-dark)']\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.loading-icon svg{\n\tanimation: rotate var(--animation-duration, 0.8s) linear infinite;\n}\n</style>\n"],"names":["_sfc_main","value","colors","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","$props","$options","vue"],"mappings":";mFAsDAA,IAAA;AAAA,EACC,MAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;MAeE,UAAAC,GAAA;AACC,eAAA,CAAA,QAAA,SAAA,MAAA,EAAA,SAAAA,CAAA;AAAA;MAED,SAAA;AAAA;;;;;;;;;EAUF,UAAA;AAAA,IACC,SAAA;;+CAIC,KAAA,eAAA,SACCC,EAAA,QAAA,IAED,CAAA,8BAAA,2BAAA;AAAA;;AAGH,GA/FAC,IAAA,CAAA,YAAA,GAAAC,IAAA,CAAA,SAAA,QAAA,GAAAC,IAAA,CAAA,MAAA,GAAAC,IAAA,CAAA,MAAA;;;IAuCQ,cAAAC,EAAA;AAAA,IACN,MAAA;AAAA,IACA,OAAA;AAAA;;MACM,OAAAA,EAAA;AAAA,MACJ,QAAAA,EAAA;AAAA,MACD,SAAA;AAAA;;QACO,MAAAC,EAAA,OAAA,CAAA;AAAA,QAAiB,GAAA;AAAA,MA7C3B,GAAA,MAAA,GAAAH,CAAA;AAAA;QA8CU,MAAAG,EAAA,OAAA,CAAA;AAAA,QAAiB,GAAA;AAAA;mGA9C3BC,EAAA,mBAAA,IAAA,EAAA;AAAA,MAAA,GAAA,GAAAH,CAAA;AAAA,IAAA,GAAA,GAAAF,CAAA;AAAA,EAAA,GAAA,GAAAD,CAAA;;;;"}

package/dist/chunks/NcNoteCard-BjfsJAvf.cjs

@@ -0,0 +1,226 @@
+var F = require("../assets/NcNoteCard-B_Q1mnCM.css");
+const e = require("vue"), n = require("./_plugin-vue_export-helper-CTzpuyvq.cjs"), d = {
+  name: "CheckboxMarkedCircleIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+}, m = ["aria-hidden", "aria-label"], u = ["fill", "width", "height"], _ = { d: "M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" }, h = { key: 0 };
+function g(i, l, t, c, a, o) {
+  return e.openBlock(), e.createElementBlock("span", e.mergeProps(i.$attrs, {
+    "aria-hidden": t.title ? null : !0,
+    "aria-label": t.title,
+    class: "material-design-icon checkbox-marked-circle-icon",
+    role: "img",
+    onClick: l[0] || (l[0] = (r) => i.$emit("click", r))
+  }), [
+    (e.openBlock(), e.createElementBlock("svg", {
+      fill: t.fillColor,
+      class: "material-design-icon__svg",
+      width: t.size,
+      height: t.size,
+      viewBox: "0 0 24 24"
+    }, [
+      e.createElementVNode("path", _, [
+        t.title ? (e.openBlock(), e.createElementBlock("title", h, e.toDisplayString(t.title), 1)) : e.createCommentVNode("", !0)
+      ])
+    ], 8, u))
+  ], 16, m);
+}
+const f = /* @__PURE__ */ n._export_sfc(d, [["render", g]]), k = {
+  name: "AlertDecagramIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+}, B = ["aria-hidden", "aria-label"], y = ["fill", "width", "height"], C = { d: "M23,12L20.56,9.22L20.9,5.54L17.29,4.72L15.4,1.54L12,3L8.6,1.54L6.71,4.72L3.1,5.53L3.44,9.21L1,12L3.44,14.78L3.1,18.47L6.71,19.29L8.6,22.47L12,21L15.4,22.46L17.29,19.28L20.9,18.46L20.56,14.78L23,12M13,17H11V15H13V17M13,13H11V7H13V13Z" }, p = { key: 0 };
+function L(i, l, t, c, a, o) {
+  return e.openBlock(), e.createElementBlock("span", e.mergeProps(i.$attrs, {
+    "aria-hidden": t.title ? null : !0,
+    "aria-label": t.title,
+    class: "material-design-icon alert-decagram-icon",
+    role: "img",
+    onClick: l[0] || (l[0] = (r) => i.$emit("click", r))
+  }), [
+    (e.openBlock(), e.createElementBlock("svg", {
+      fill: t.fillColor,
+      class: "material-design-icon__svg",
+      width: t.size,
+      height: t.size,
+      viewBox: "0 0 24 24"
+    }, [
+      e.createElementVNode("path", C, [
+        t.title ? (e.openBlock(), e.createElementBlock("title", p, e.toDisplayString(t.title), 1)) : e.createCommentVNode("", !0)
+      ])
+    ], 8, y))
+  ], 16, B);
+}
+const w = /* @__PURE__ */ n._export_sfc(k, [["render", L]]), v = {
+  name: "AlertIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+}, N = ["aria-hidden", "aria-label"], E = ["fill", "width", "height"], S = { d: "M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z" }, V = { key: 0 };
+function $(i, l, t, c, a, o) {
+  return e.openBlock(), e.createElementBlock("span", e.mergeProps(i.$attrs, {
+    "aria-hidden": t.title ? null : !0,
+    "aria-label": t.title,
+    class: "material-design-icon alert-icon",
+    role: "img",
+    onClick: l[0] || (l[0] = (r) => i.$emit("click", r))
+  }), [
+    (e.openBlock(), e.createElementBlock("svg", {
+      fill: t.fillColor,
+      class: "material-design-icon__svg",
+      width: t.size,
+      height: t.size,
+      viewBox: "0 0 24 24"
+    }, [
+      e.createElementVNode("path", S, [
+        t.title ? (e.openBlock(), e.createElementBlock("title", V, e.toDisplayString(t.title), 1)) : e.createCommentVNode("", !0)
+      ])
+    ], 8, E))
+  ], 16, N);
+}
+const s = /* @__PURE__ */ n._export_sfc(v, [["render", $]]), A = {
+  name: "InformationIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+}, b = ["aria-hidden", "aria-label"], z = ["fill", "width", "height"], H = { d: "M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" }, M = { key: 0 };
+function x(i, l, t, c, a, o) {
+  return e.openBlock(), e.createElementBlock("span", e.mergeProps(i.$attrs, {
+    "aria-hidden": t.title ? null : !0,
+    "aria-label": t.title,
+    class: "material-design-icon information-icon",
+    role: "img",
+    onClick: l[0] || (l[0] = (r) => i.$emit("click", r))
+  }), [
+    (e.openBlock(), e.createElementBlock("svg", {
+      fill: t.fillColor,
+      class: "material-design-icon__svg",
+      width: t.size,
+      height: t.size,
+      viewBox: "0 0 24 24"
+    }, [
+      e.createElementVNode("path", H, [
+        t.title ? (e.openBlock(), e.createElementBlock("title", M, e.toDisplayString(t.title), 1)) : e.createCommentVNode("", !0)
+      ])
+    ], 8, z))
+  ], 16, b);
+}
+const D = /* @__PURE__ */ n._export_sfc(A, [["render", x]]), I = {
+  name: "NcNoteCard",
+  props: {
+    /**
+     * Type of the attribute
+     */
+    type: {
+      type: String,
+      default: "warning",
+      validator: (i) => ["success", "info", "warning", "error"].includes(i)
+    },
+    showAlert: {
+      type: Boolean,
+      default: !1
+    },
+    heading: {
+      type: String,
+      default: ""
+    }
+  },
+  computed: {
+    shouldShowAlert() {
+      return this.showAlert || this.type === "error";
+    },
+    icon() {
+      switch (this.type) {
+        case "error":
+          return w;
+        case "success":
+          return f;
+        case "info":
+          return D;
+        case "warning":
+          return s;
+        default:
+          return s;
+      }
+    },
+    color() {
+      switch (this.type) {
+        case "error":
+          return "var(--color-error)";
+        case "success":
+          return "var(--color-success)";
+        case "info":
+          return "var(--color-info)";
+        case "warning":
+          return "var(--color-warning)";
+        default:
+          return "var(--color-warning)";
+      }
+    }
+  }
+}, P = ["role"], Z = { key: 0 };
+function q(i, l, t, c, a, o) {
+  return e.openBlock(), e.createElementBlock("div", {
+    class: e.normalizeClass(["notecard", "notecard--".concat(t.type)]),
+    role: o.shouldShowAlert ? "alert" : "note"
+  }, [
+    e.renderSlot(i.$slots, "icon", {}, () => [
+      (e.openBlock(), e.createBlock(e.resolveDynamicComponent(o.icon), {
+        class: e.normalizeClass(["notecard__icon", { "notecard__icon--heading": t.heading }]),
+        "fill-color": o.color
+      }, null, 8, ["class", "fill-color"]))
+    ], !0),
+    e.createElementVNode("div", null, [
+      t.heading ? (e.openBlock(), e.createElementBlock("h2", Z, e.toDisplayString(t.heading), 1)) : e.createCommentVNode("", !0),
+      e.renderSlot(i.$slots, "default", {}, void 0, !0)
+    ])
+  ], 10, P);
+}
+const j = /* @__PURE__ */ n._export_sfc(I, [["render", q], ["__scopeId", "data-v-722d543a"]]);
+exports.NcNoteCard = j;

package/dist/chunks/NcNoteCard-BjfsJAvf.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcNoteCard-BjfsJAvf.cjs","sources":["../../node_modules/vue-material-design-icons/CheckboxMarkedCircle.vue","../../node_modules/vue-material-design-icons/AlertDecagram.vue","../../node_modules/vue-material-design-icons/Alert.vue","../../node_modules/vue-material-design-icons/Information.vue","../../src/components/NcNoteCard/NcNoteCard.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : true\"\n        :aria-label=\"title\"\n        class=\"material-design-icon checkbox-marked-circle-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"CheckboxMarkedCircleIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : true\"\n        :aria-label=\"title\"\n        class=\"material-design-icon alert-decagram-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M23,12L20.56,9.22L20.9,5.54L17.29,4.72L15.4,1.54L12,3L8.6,1.54L6.71,4.72L3.1,5.53L3.44,9.21L1,12L3.44,14.78L3.1,18.47L6.71,19.29L8.6,22.47L12,21L15.4,22.46L17.29,19.28L20.9,18.46L20.56,14.78L23,12M13,17H11V15H13V17M13,13H11V7H13V13Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"AlertDecagramIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : true\"\n        :aria-label=\"title\"\n        class=\"material-design-icon alert-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"AlertIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : true\"\n        :aria-label=\"title\"\n        class=\"material-design-icon information-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"InformationIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<!--\n  - @copyright Copyright (c) 2022 Carl Schwan <carl@carlschwan.eu>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<docs>\nThis component is made to display additional information to the user. It is\navailable in four versions:\n\n- success: Display a successful message\n- info: Display an informational message\n- warning: Display a warning to the user. This indicate that the action they want\n- error: Display an error message. For example\n\nWhen using an error type,\n\n```vue\n<template>\n\t<div>\n\t\t<NcNoteCard type=\"warning\">\n\t\t\t<p>This is dangerous</p>\n\t\t</NcNoteCard>\n\n\t\t<NcNoteCard type=\"error\" heading=\"Error\">\n\t\t\t<p>The server is not happy and reported the following error</p>\n\t\t</NcNoteCard>\n\n\t\t<NcNoteCard type=\"success\">\n\t\t\t<p>You won</p>\n\t\t</NcNoteCard>\n\n\t\t<NcNoteCard type=\"info\">\n\t\t\t<p>For your information</p>\n\t\t</NcNoteCard>\n\n\t\t<NcNoteCard type=\"warning\">\n\t\t\t<template #icon>\n\t\t\t\t<Cog :size=\"20\"/>\n\t\t\t</template>\n\t\t\t<p>Custom icon usage</p>\n\t\t</NcNoteCard>\n\t</div>\n</template>\n\n<script>\n\timport Cog from 'vue-material-design-icons/Cog.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tCog,\n\t\t},\n\t}\n</script>\n```\n</docs>\n\n<template>\n\t<div class=\"notecard\"\n\t\t:class=\"`notecard--${type}`\"\n\t\t:role=\"shouldShowAlert ? 'alert' : 'note'\">\n\t\t<!-- @slot Manually provide icon -->\n\t\t<slot name=\"icon\">\n\t\t\t<component :is=\"icon\"\n\t\t\t\tclass=\"notecard__icon\"\n\t\t\t\t:class=\"{'notecard__icon--heading': heading}\"\n\t\t\t\t:fill-color=\"color\" />\n\t\t</slot>\n\t\t<div>\n\t\t\t<h2 v-if=\"heading\">\n\t\t\t\t{{ heading }}\n\t\t\t</h2>\n\t\t\t<slot />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport CheckboxMarkedCircle from 'vue-material-design-icons/CheckboxMarkedCircle.vue'\nimport AlertDecagram from 'vue-material-design-icons/AlertDecagram.vue'\nimport Alert from 'vue-material-design-icons/Alert.vue'\nimport Information from 'vue-material-design-icons/Information.vue'\n\nexport default {\n\tname: 'NcNoteCard',\n\n\tprops: {\n\t\t/**\n\t\t * Type of the attribute\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'warning',\n\t\t\tvalidator: type => ['success', 'info', 'warning', 'error'].includes(type),\n\t\t},\n\t\tshowAlert: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\theading: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\tcomputed: {\n\t\tshouldShowAlert() {\n\t\t\treturn this.showAlert || this.type === 'error'\n\t\t},\n\t\ticon() {\n\t\t\tswitch (this.type) {\n\t\t\tcase 'error':\n\t\t\t\treturn AlertDecagram\n\t\t\tcase 'success':\n\t\t\t\treturn CheckboxMarkedCircle\n\t\t\tcase 'info':\n\t\t\t\treturn Information\n\t\t\tcase 'warning':\n\t\t\t\treturn Alert\n\t\t\tdefault:\n\t\t\t\treturn Alert\n\t\t\t}\n\t\t},\n\t\tcolor() {\n\t\t\tswitch (this.type) {\n\t\t\tcase 'error':\n\t\t\t\treturn 'var(--color-error)'\n\t\t\tcase 'success':\n\t\t\t\treturn 'var(--color-success)'\n\t\t\tcase 'info':\n\t\t\t\treturn 'var(--color-info)'\n\t\t\tcase 'warning':\n\t\t\t\treturn 'var(--color-warning)'\n\t\t\tdefault:\n\t\t\t\treturn 'var(--color-warning)'\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.notecard {\n\tcolor: var(--color-main-text) !important;\n\tbackground-color: var(--note-background) !important;\n\tborder-inline-start: 4px solid var(--note-theme);\n\tborder-radius: var(--border-radius);\n\tmargin: 1rem 0;\n\tmargin-top: 1rem;\n\tpadding: 1rem;\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: 1rem;\n\n\t&__icon--heading {\n\t\tmargin-bottom: auto;\n\t\tmargin-top: 0.3rem;\n\t}\n\n\t&--success {\n\t\t--note-background: rgba(var(--color-success-rgb), 0.1);\n\t\t--note-theme: var(--color-success);\n\t}\n\n\t&--info {\n\t\t--note-background: rgba(var(--color-info-rgb), 0.1);\n\t\t--note-theme: var(--color-info);\n\t}\n\n\t&--error {\n\t\t--note-background: rgba(var(--color-error-rgb), 0.1);\n\t\t--note-theme: var(--color-error);\n\t}\n\n\t&--warning {\n\t\t--note-background: rgba(var(--color-warning-rgb), 0.1);\n\t\t--note-theme: var(--color-warning);\n\t}\n}\n</style>\n"],"names":["_sfc_main$4","_hoisted_1$4","_hoisted_2$4","_hoisted_3$3","$props","vue","_sfc_main$3","_hoisted_1$3","_hoisted_2$3","_hoisted_3$2","_sfc_main$2","_hoisted_1$2","_hoisted_2$2","_hoisted_3$1","_sfc_main$1","_hoisted_1$1","_hoisted_2$1","_hoisted_3","_sfc_main","type","AlertDecagram","Information","_hoisted_1","$options","_ctx"],"mappings":"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","x_google_ignoreList":[0,1,2,3]}