@nextcloud/vue 8.6.0 → 9.0.0-alpha.1

package/dist/chunks/NcListItemIcon-dOvFvjqI.cjs

@@ -0,0 +1,189 @@
+var k = require("../assets/NcListItemIcon-mlEQ7oK0.css");
+const i = require("./NcAvatar-uPVG9WWg.cjs"), u = require("./NcHighlight-cBMxLCnf.cjs"), m = require("./NcIconSvgWrapper-_hHu9P_M.cjs");
+require("@nextcloud/router");
+const e = require("vue");
+;/* empty css                                                                           */
+const h = require("./_plugin-vue_export-helper-xG2iG1wl.cjs");
+require("linkify-string");
+require("escape-html");
+require("striptags");
+const d = 8, c = 32, g = {
+  name: "NcListItemIcon",
+  components: {
+    NcAvatar: i.NcAvatar,
+    NcHighlight: u._sfc_main,
+    NcIconSvgWrapper: m.NcIconSvgWrapper
+  },
+  mixins: [
+    i.userStatus
+  ],
+  props: {
+    /**
+     * Default first line text
+     */
+    name: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Secondary optional line
+     * Only visible on size of 32 and above
+     */
+    subname: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Icon class to be displayed at the end of the component
+     */
+    icon: {
+      type: String,
+      default: ""
+    },
+    /**
+     * SVG icon to be displayed at the end of the component
+     */
+    iconSvg: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Descriptive name for the icon
+     */
+    iconName: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Search within the highlight of name/subname
+     */
+    search: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Set a size in px that will define the avatar height/width
+     * and therefore, the height of the component
+     */
+    avatarSize: {
+      type: Number,
+      default: c
+    },
+    /**
+     * 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: d
+    };
+  },
+  computed: {
+    hasIcon() {
+      return this.icon !== "";
+    },
+    hasIconSvg() {
+      return this.iconSvg !== "";
+    },
+    isValidSubname() {
+      var t, n;
+      return ((n = (t = this.subname) == null ? void 0 : t.trim) == null ? void 0 : n.call(t)) !== "";
+    },
+    isSizeBigEnough() {
+      return this.avatarSize >= c;
+    },
+    cssVars() {
+      const t = this.noMargin ? 0 : this.margin;
+      return {
+        "--height": this.avatarSize + 2 * t + "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 t = /^([^<]*)<([^>]+)>?$/, n = this.search.match(t);
+      return this.isNoUser || !n ? [this.search, this.search] : [n[1].trim(), n[2]];
+    }
+  },
+  beforeMount() {
+    !this.isNoUser && !this.subname && this.fetchUserStatus(this.user);
+  }
+}, p = ["id"], N = { class: "option__details" }, S = { key: 1 }, _ = ["aria-label"];
+function v(t, n, a, y, I, r) {
+  const o = e.resolveComponent("NcAvatar"), s = e.resolveComponent("NcHighlight"), l = e.resolveComponent("NcIconSvgWrapper");
+  return e.openBlock(), e.createElementBlock("span", {
+    id: a.id,
+    class: "option",
+    style: e.normalizeStyle(r.cssVars)
+  }, [
+    e.createVNode(o, e.mergeProps(t.$attrs, {
+      "disable-menu": !0,
+      "disable-tooltip": !0,
+      "display-name": a.displayName || a.name,
+      "is-no-user": a.isNoUser,
+      size: a.avatarSize,
+      class: "option__avatar"
+    }), null, 16, ["display-name", "is-no-user", "size"]),
+    e.createElementVNode("div", N, [
+      e.createVNode(s, {
+        class: "option__lineone",
+        text: a.name,
+        search: r.searchParts[0]
+      }, null, 8, ["text", "search"]),
+      r.isValidSubname && r.isSizeBigEnough ? (e.openBlock(), e.createBlock(s, {
+        key: 0,
+        class: "option__linetwo",
+        text: a.subname,
+        search: r.searchParts[1]
+      }, null, 8, ["text", "search"])) : t.hasStatus ? (e.openBlock(), e.createElementBlock("span", S, [
+        e.createElementVNode("span", null, e.toDisplayString(t.userStatus.icon), 1),
+        e.createElementVNode("span", null, e.toDisplayString(t.userStatus.message), 1)
+      ])) : e.createCommentVNode("", !0)
+    ]),
+    e.renderSlot(t.$slots, "default", {}, () => [
+      r.hasIconSvg ? (e.openBlock(), e.createBlock(l, {
+        key: 0,
+        class: "option__icon",
+        svg: a.iconSvg,
+        name: a.iconName
+      }, null, 8, ["svg", "name"])) : r.hasIcon ? (e.openBlock(), e.createElementBlock("span", {
+        key: 1,
+        class: e.normalizeClass(["icon option__icon", a.icon]),
+        "aria-label": a.iconName
+      }, null, 10, _)) : e.createCommentVNode("", !0)
+    ], !0)
+  ], 12, p);
+}
+const f = /* @__PURE__ */ h._export_sfc(g, [["render", v], ["__scopeId", "data-v-467f3287"]]);
+exports.NcListItemIcon = f;

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcListItemIcon-dOvFvjqI.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/NcLoadingIcon-DnhhU7Z8.mjs

@@ -0,0 +1,68 @@
+import "../assets/NcLoadingIcon-hZn7TJM8.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-hUChTQA_.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-DnhhU7Z8.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcLoadingIcon-DnhhU7Z8.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-Fwid-wWE.cjs

@@ -0,0 +1,64 @@
+var p = require("../assets/NcLoadingIcon-hZn7TJM8.css");
+const e = require("vue"), n = require("./_plugin-vue_export-helper-xG2iG1wl.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-Fwid-wWE.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcLoadingIcon-Fwid-wWE.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-MnmgJvKD.mjs

@@ -0,0 +1,230 @@
+import "../assets/NcNoteCard-f0NZpwjL.css";
+import { openBlock as i, createElementBlock as l, mergeProps as _, createElementVNode as o, toDisplayString as s, createCommentVNode as c, normalizeClass as f, renderSlot as m, createBlock as y, resolveDynamicComponent as L } from "vue";
+import { _ as d } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
+const k = {
+  name: "CheckboxMarkedCircleIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+}, C = ["aria-hidden", "aria-label"], w = ["fill", "width", "height"], v = { 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" }, $ = { key: 0 };
+function A(t, r, e, u, h, n) {
+  return i(), l("span", _(t.$attrs, {
+    "aria-hidden": e.title ? null : !0,
+    "aria-label": e.title,
+    class: "material-design-icon checkbox-marked-circle-icon",
+    role: "img",
+    onClick: r[0] || (r[0] = (a) => t.$emit("click", a))
+  }), [
+    (i(), l("svg", {
+      fill: e.fillColor,
+      class: "material-design-icon__svg",
+      width: e.size,
+      height: e.size,
+      viewBox: "0 0 24 24"
+    }, [
+      o("path", v, [
+        e.title ? (i(), l("title", $, s(e.title), 1)) : c("", !0)
+      ])
+    ], 8, w))
+  ], 16, C);
+}
+const b = /* @__PURE__ */ d(k, [["render", A]]), S = {
+  name: "AlertDecagramIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+}, z = ["aria-hidden", "aria-label"], H = ["fill", "width", "height"], M = { 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 = { key: 0 };
+function V(t, r, e, u, h, n) {
+  return i(), l("span", _(t.$attrs, {
+    "aria-hidden": e.title ? null : !0,
+    "aria-label": e.title,
+    class: "material-design-icon alert-decagram-icon",
+    role: "img",
+    onClick: r[0] || (r[0] = (a) => t.$emit("click", a))
+  }), [
+    (i(), l("svg", {
+      fill: e.fillColor,
+      class: "material-design-icon__svg",
+      width: e.size,
+      height: e.size,
+      viewBox: "0 0 24 24"
+    }, [
+      o("path", M, [
+        e.title ? (i(), l("title", N, s(e.title), 1)) : c("", !0)
+      ])
+    ], 8, H))
+  ], 16, z);
+}
+const B = /* @__PURE__ */ d(S, [["render", V]]), I = {
+  name: "AlertIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+}, x = ["aria-hidden", "aria-label"], D = ["fill", "width", "height"], Z = { d: "M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z" }, p = { key: 0 };
+function E(t, r, e, u, h, n) {
+  return i(), l("span", _(t.$attrs, {
+    "aria-hidden": e.title ? null : !0,
+    "aria-label": e.title,
+    class: "material-design-icon alert-icon",
+    role: "img",
+    onClick: r[0] || (r[0] = (a) => t.$emit("click", a))
+  }), [
+    (i(), l("svg", {
+      fill: e.fillColor,
+      class: "material-design-icon__svg",
+      width: e.size,
+      height: e.size,
+      viewBox: "0 0 24 24"
+    }, [
+      o("path", Z, [
+        e.title ? (i(), l("title", p, s(e.title), 1)) : c("", !0)
+      ])
+    ], 8, D))
+  ], 16, x);
+}
+const g = /* @__PURE__ */ d(I, [["render", E]]), P = {
+  name: "InformationIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+}, j = ["aria-hidden", "aria-label"], q = ["fill", "width", "height"], F = { 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" }, G = { key: 0 };
+function J(t, r, e, u, h, n) {
+  return i(), l("span", _(t.$attrs, {
+    "aria-hidden": e.title ? null : !0,
+    "aria-label": e.title,
+    class: "material-design-icon information-icon",
+    role: "img",
+    onClick: r[0] || (r[0] = (a) => t.$emit("click", a))
+  }), [
+    (i(), l("svg", {
+      fill: e.fillColor,
+      class: "material-design-icon__svg",
+      width: e.size,
+      height: e.size,
+      viewBox: "0 0 24 24"
+    }, [
+      o("path", F, [
+        e.title ? (i(), l("title", G, s(e.title), 1)) : c("", !0)
+      ])
+    ], 8, q))
+  ], 16, j);
+}
+const K = /* @__PURE__ */ d(P, [["render", J]]), O = {
+  name: "NcNoteCard",
+  props: {
+    /**
+     * Type of the attribute
+     */
+    type: {
+      type: String,
+      default: "warning",
+      validator: (t) => ["success", "info", "warning", "error"].includes(t)
+    },
+    showAlert: {
+      type: Boolean,
+      default: !1
+    },
+    heading: {
+      type: String,
+      default: ""
+    }
+  },
+  computed: {
+    shouldShowAlert() {
+      return this.showAlert || this.type === "error";
+    },
+    icon() {
+      switch (this.type) {
+        case "error":
+          return B;
+        case "success":
+          return b;
+        case "info":
+          return K;
+        case "warning":
+          return g;
+        default:
+          return g;
+      }
+    },
+    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)";
+      }
+    }
+  }
+}, Q = ["role"], R = { key: 0 };
+function T(t, r, e, u, h, n) {
+  return i(), l("div", {
+    class: f(["notecard", "notecard--".concat(e.type)]),
+    role: n.shouldShowAlert ? "alert" : "note"
+  }, [
+    m(t.$slots, "icon", {}, () => [
+      (i(), y(L(n.icon), {
+        class: f(["notecard__icon", { "notecard__icon--heading": e.heading }]),
+        "fill-color": n.color
+      }, null, 8, ["class", "fill-color"]))
+    ], !0),
+    o("div", null, [
+      e.heading ? (i(), l("h2", R, s(e.heading), 1)) : c("", !0),
+      m(t.$slots, "default", {}, void 0, !0)
+    ])
+  ], 10, Q);
+}
+const Y = /* @__PURE__ */ d(O, [["render", T], ["__scopeId", "data-v-722d543a"]]);
+export {
+  Y as N
+};

package/dist/chunks/NcNoteCard-MnmgJvKD.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcNoteCard-MnmgJvKD.mjs","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","createElementVNode","createCommentVNode","_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","normalizeClass","$options","renderSlot","_ctx"],"mappings":"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","x_google_ignoreList":[0,1,2,3]}