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

package/dist/chunks/NcHeaderMenu-CJVtnKpb.mjs

@@ -0,0 +1,259 @@
+import '../assets/NcMentionBubble-DmzU72Mw.css';
+import '../assets/NcHeaderMenu-fYpidmuR.css';
+import { vOnClickOutside } from "@vueuse/components";
+import { createFocusTrap } from "focus-trap";
+import { G as GenRandomId } from "./GenRandomId-CXkjMlAT.mjs";
+import clickOutsideOptions from "../Mixins/clickOutsideOptions.mjs";
+import "@nextcloud/router";
+import { resolveComponent, resolveDirective, withDirectives, openBlock, createBlock, resolveDynamicComponent, mergeProps, toHandlers, withCtx, createVNode, withModifiers, renderSlot, createElementBlock, toDisplayString, createCommentVNode, createElementVNode, vShow } from "vue";
+/* empty css                                                                          */
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+import "linkify-string";
+import "escape-html";
+import "striptags";
+import "@nextcloud/auth";
+import "@nextcloud/axios";
+import "@nextcloud/capabilities";
+import { g as getTrapStack } from "./focusTrap-hWDNhn4t.mjs";
+import { N as NcButton } from "./NcButton-B27fpd1m.mjs";
+const _sfc_main = {
+  name: "NcHeaderMenu",
+  components: {
+    NcButton
+  },
+  directives: {
+    ClickOutside: vOnClickOutside
+  },
+  mixins: [
+    clickOutsideOptions
+  ],
+  props: {
+    /**
+     * Unique id for this menu
+     */
+    id: {
+      type: String,
+      required: true
+    },
+    /**
+     * aria-label attribute of the menu open button
+     */
+    ariaLabel: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Current menu open state
+     */
+    open: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Pass `true` if the header menu is used for website navigation
+     *
+     * The wrapper tag will be set to `nav` and its `aria-labelledby`
+     * will be associated with the menu open button
+     */
+    isNav: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Additional visually hidden description text for the menu
+     * open button
+     */
+    description: {
+      type: String,
+      default: null
+    }
+  },
+  emits: [
+    "close",
+    "closed",
+    "open",
+    "opened",
+    "update:open",
+    "cancel"
+  ],
+  data() {
+    return {
+      focusTrap: null,
+      opened: this.open,
+      shortcutsDisabled: window.OCP?.Accessibility?.disableKeyboardShortcuts?.(),
+      triggerId: GenRandomId(),
+      descriptionId: GenRandomId()
+    };
+  },
+  computed: {
+    wrapperTag() {
+      return this.isNav ? "nav" : "div";
+    },
+    clickOutsideConfig() {
+      return [
+        this.closeMenu,
+        this.clickOutsideOptions
+      ];
+    },
+    listeners() {
+      if (this.isNav) {
+        return {
+          focusout: this.onFocusOut
+        };
+      }
+      return null;
+    }
+  },
+  watch: {
+    open(open) {
+      if (open) {
+        this.openMenu();
+      } else {
+        this.closeMenu();
+      }
+    }
+  },
+  mounted() {
+    document.addEventListener("keydown", this.onKeyDown);
+  },
+  beforeUnmount() {
+    document.removeEventListener("keydown", this.onKeyDown);
+  },
+  methods: {
+    /**
+     * Toggle the current menu open state
+     */
+    toggleMenu() {
+      if (!this.opened) {
+        this.openMenu();
+      } else {
+        this.closeMenu();
+      }
+    },
+    /**
+     * Close the current menu
+     *
+     * @param {boolean} cancelled emit a cancel event instead of close
+     */
+    closeMenu(cancelled = false) {
+      this.opened = false;
+      this.$emit(cancelled ? "cancel" : "close");
+      this.$emit("update:open", false);
+      this.clearFocusTrap();
+      this.$nextTick(() => {
+        this.$emit("closed");
+      });
+    },
+    /**
+     * Open the current menu
+     */
+    openMenu() {
+      this.opened = true;
+      this.$emit("open");
+      this.$emit("update:open", true);
+      this.$nextTick(() => {
+        this.useFocusTrap();
+        this.$emit("opened");
+      });
+    },
+    onKeyDown(event) {
+      if (this.shortcutsDisabled || !this.opened) {
+        return;
+      }
+      if (event.key === "Escape") {
+        event.preventDefault();
+        this.closeMenu(true);
+      }
+    },
+    /**
+     * @param {FocusEvent} event The focus event
+     */
+    onFocusOut(event) {
+      if (!this.$refs.headerMenu.contains(event.relatedTarget)) {
+        this.closeMenu();
+      }
+    },
+    /**
+     * Add focus trap for accessibility.
+     * Shall only be used when all children are mounted
+     * and available in the DOM. We use $nextTick for that.
+     */
+    async useFocusTrap() {
+      if (this.isNav || this.focusTrap) {
+        return;
+      }
+      const contentContainer = this.$refs.content;
+      this.focusTrap = createFocusTrap(contentContainer, {
+        allowOutsideClick: true,
+        trapStack: getTrapStack(),
+        fallbackFocus: this.$refs.trigger
+      });
+      this.focusTrap.activate();
+    },
+    clearFocusTrap() {
+      this.focusTrap?.deactivate();
+      this.focusTrap = null;
+    }
+  }
+};
+const _hoisted_1 = ["id"];
+const _hoisted_2 = { class: "header-menu__carret" };
+const _hoisted_3 = ["id"];
+const _hoisted_4 = {
+  ref: "content",
+  class: "header-menu__content"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_NcButton = resolveComponent("NcButton");
+  const _directive_click_outside = resolveDirective("click-outside");
+  return withDirectives((openBlock(), createBlock(resolveDynamicComponent($options.wrapperTag), mergeProps({
+    id: $props.id,
+    ref: "headerMenu",
+    "aria-labelledby": $props.isNav ? $data.triggerId : null,
+    class: [{ "header-menu--opened": $data.opened }, "header-menu"]
+  }, toHandlers($options.listeners)), {
+    default: withCtx(() => [
+      createVNode(_component_NcButton, {
+        id: $props.isNav ? $data.triggerId : null,
+        ref: "trigger",
+        type: "tertiary-no-background",
+        class: "header-menu__trigger",
+        "aria-label": $props.ariaLabel,
+        "aria-describedby": $props.description ? $data.descriptionId : null,
+        "aria-controls": `header-menu-${$props.id}`,
+        "aria-expanded": $data.opened.toString(),
+        onClick: withModifiers($options.toggleMenu, ["prevent"])
+      }, {
+        icon: withCtx(() => [
+          renderSlot(_ctx.$slots, "trigger", {}, void 0, true)
+        ]),
+        _: 3
+      }, 8, ["id", "aria-label", "aria-describedby", "aria-controls", "aria-expanded", "onClick"]),
+      $props.description ? (openBlock(), createElementBlock("span", {
+        key: 0,
+        id: $data.descriptionId,
+        class: "header-menu__description hidden-visually"
+      }, toDisplayString($props.description), 9, _hoisted_1)) : createCommentVNode("", true),
+      withDirectives(createElementVNode("div", _hoisted_2, null, 512), [
+        [vShow, $data.opened]
+      ]),
+      withDirectives(createElementVNode("div", {
+        id: `header-menu-${$props.id}`,
+        class: "header-menu__wrapper"
+      }, [
+        createElementVNode("div", _hoisted_4, [
+          renderSlot(_ctx.$slots, "default", {}, void 0, true)
+        ], 512)
+      ], 8, _hoisted_3), [
+        [vShow, $data.opened]
+      ])
+    ]),
+    _: 3
+  }, 16, ["id", "aria-labelledby", "class"])), [
+    [_directive_click_outside, $options.clickOutsideConfig]
+  ]);
+}
+const NcHeaderMenu = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-194cb04b"]]);
+export {
+  NcHeaderMenu as N
+};

package/dist/chunks/NcHeaderMenu-CJVtnKpb.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcHeaderMenu-CJVtnKpb.mjs","sources":["../../src/components/NcHeaderMenu/NcHeaderMenu.vue"],"sourcesContent":[" <!--\n  - @copyright Copyright (c) 2020 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\n<docs>\nThis component is made to be used in the Nextcloud top header.\n\n```\n<template>\n\t<div id=\"nextcloud-header\">\n\t\t<NcHeaderMenu id=\"search\"\n\t\t\taria-label=\"Search\">\n\t\t\t<template #trigger>\n\t\t\t\t<Magnify />\n\t\t\t</template>\n\t\t\t<div>\n\t\t\t\t<input placeholder=\"Search for files, comments, contacts...\" type=\"search\" style=\"width: 99%;\" />\n\t\t\t\t<NcEmptyContent\n\t\t\t\t\tname=\"Search\"\n\t\t\t\t\tdescription=\"Start typing to search\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Magnify />\n\t\t\t\t\t</template>\n\t\t\t\t</NcEmptyContent>\n\t\t\t</div>\n\t\t</NcHeaderMenu>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t},\n}\n</script>\n<style>\n#nextcloud-header {\n\tdisplay: flex;\n\tjustify-content: right;\n\tbackground-color: var(--color-primary);\n}\n</style>\n```\n</docs>\n\n<template>\n\t<component :is=\"wrapperTag\"\n\t\t:id=\"id\"\n\t\tref=\"headerMenu\"\n\t\tv-click-outside=\"clickOutsideConfig\"\n\t\t:aria-labelledby=\"isNav ? triggerId : null\"\n\t\t:class=\"{ 'header-menu--opened': opened }\"\n\t\tclass=\"header-menu\"\n\t\tv-on=\"listeners\">\n\t\t<!-- Trigger -->\n\t\t<NcButton :id=\"isNav ? triggerId : null\"\n\t\t\tref=\"trigger\"\n\t\t\ttype=\"tertiary-no-background\"\n\t\t\tclass=\"header-menu__trigger\"\n\t\t\t:aria-label=\"ariaLabel\"\n\t\t\t:aria-describedby=\"description ? descriptionId : null\"\n\t\t\t:aria-controls=\"`header-menu-${id}`\"\n\t\t\t:aria-expanded=\"opened.toString()\"\n\t\t\t@click.prevent=\"toggleMenu\">\n\t\t\t<template #icon>\n\t\t\t\t<!-- @slot Icon trigger slot. Make sure the svg path\n\t\t\t\tis at least 16px. Usually mdi icon works at 20px -->\n\t\t\t\t<slot name=\"trigger\" />\n\t\t\t</template>\n\t\t</NcButton>\n\n\t\t<span v-if=\"description\"\n\t\t\t:id=\"descriptionId\"\n\t\t\tclass=\"header-menu__description hidden-visually\">\n\t\t\t{{ description }}\n\t\t</span>\n\n\t\t<!-- Visual triangle -->\n\t\t<div v-show=\"opened\" class=\"header-menu__carret\" />\n\n\t\t<!-- Menu opened content -->\n\t\t<div v-show=\"opened\"\n\t\t\t:id=\"`header-menu-${id}`\"\n\t\t\tclass=\"header-menu__wrapper\">\n\t\t\t<div ref=\"content\" class=\"header-menu__content\">\n\t\t\t\t<!-- @slot Main content -->\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t</div>\n\t</component>\n</template>\n\n<script>\nimport { vOnClickOutside as ClickOutside } from '@vueuse/components'\nimport { createFocusTrap } from 'focus-trap'\n\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport { clickOutsideOptions } from '../../mixins/index.js'\nimport { getTrapStack } from '../../utils/focusTrap.js'\n\nimport NcButton from '../NcButton/index.ts'\n\nexport default {\n\tname: 'NcHeaderMenu',\n\n\tcomponents: {\n\t\tNcButton,\n\t},\n\n\tdirectives: {\n\t\tClickOutside,\n\t},\n\n\tmixins: [\n\t\tclickOutsideOptions,\n\t],\n\n\tprops: {\n\t\t/**\n\t\t * Unique id for this menu\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * aria-label attribute of the menu open button\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Current menu open state\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Pass `true` if the header menu is used for website navigation\n\t\t *\n\t\t * The wrapper tag will be set to `nav` and its `aria-labelledby`\n\t\t * will be associated with the menu open button\n\t\t */\n\t\tisNav: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Additional visually hidden description text for the menu\n\t\t * open button\n\t\t */\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: [\n\t\t'close',\n\t\t'closed',\n\t\t'open',\n\t\t'opened',\n\t\t'update:open',\n\t\t'cancel',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tfocusTrap: null,\n\t\t\topened: this.open,\n\t\t\tshortcutsDisabled: window.OCP?.Accessibility?.disableKeyboardShortcuts?.(),\n\t\t\ttriggerId: GenRandomId(),\n\t\t\tdescriptionId: GenRandomId(),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\twrapperTag() {\n\t\t\treturn this.isNav ? 'nav' : 'div'\n\t\t},\n\n\t\tclickOutsideConfig() {\n\t\t\treturn [\n\t\t\t\tthis.closeMenu,\n\t\t\t\tthis.clickOutsideOptions,\n\t\t\t]\n\t\t},\n\n\t\tlisteners() {\n\t\t\tif (this.isNav) {\n\t\t\t\treturn {\n\t\t\t\t\tfocusout: this.onFocusOut,\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn null\n\t\t},\n\t},\n\n\twatch: {\n\t\topen(open) {\n\t\t\tif (open) {\n\t\t\t\tthis.openMenu()\n\t\t\t} else {\n\t\t\t\tthis.closeMenu()\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\tdocument.addEventListener('keydown', this.onKeyDown)\n\t},\n\tbeforeUnmount() {\n\t\tdocument.removeEventListener('keydown', this.onKeyDown)\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Toggle the current menu open state\n\t\t */\n\t\ttoggleMenu() {\n\t\t\t// Toggling current state\n\t\t\tif (!this.opened) {\n\t\t\t\tthis.openMenu()\n\t\t\t} else {\n\t\t\t\tthis.closeMenu()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Close the current menu\n\t\t *\n\t\t * @param {boolean} cancelled emit a cancel event instead of close\n\t\t */\n\t\tcloseMenu(cancelled = false) {\n\t\t\t// Close the menu\n\t\t\tthis.opened = false\n\t\t\tthis.$emit(cancelled ? 'cancel' : 'close')\n\t\t\tthis.$emit('update:open', false)\n\n\t\t\t// Kill focus trap\n\t\t\tthis.clearFocusTrap()\n\n\t\t\t// Wait for component to finish rendering\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.$emit('closed')\n\t\t\t})\n\t\t},\n\n\t\t/**\n\t\t * Open the current menu\n\t\t */\n\t\topenMenu() {\n\t\t\t// Open the menu\n\t\t\tthis.opened = true\n\t\t\tthis.$emit('open')\n\t\t\tthis.$emit('update:open', true)\n\n\t\t\t// Wait for component to finish rendering\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.useFocusTrap()\n\t\t\t\tthis.$emit('opened')\n\t\t\t})\n\t\t},\n\n\t\tonKeyDown(event) {\n\t\t\tif (this.shortcutsDisabled || !this.opened) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// If escape have been pressed, we close\n\t\t\tif (event.key === 'Escape') {\n\t\t\t\tevent.preventDefault()\n\n\t\t\t\t/** User cancelled the menu by pressing escape */\n\t\t\t\tthis.closeMenu(true)\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * @param {FocusEvent} event The focus event\n\t\t */\n\t\tonFocusOut(event) {\n\t\t\tif (!this.$refs.headerMenu.contains(event.relatedTarget)) {\n\t\t\t\tthis.closeMenu()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Add focus trap for accessibility.\n\t\t * Shall only be used when all children are mounted\n\t\t * and available in the DOM. We use $nextTick for that.\n\t\t */\n\t\tasync useFocusTrap() {\n\t\t\tif (this.isNav || this.focusTrap) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Init focus trap\n\t\t\tconst contentContainer = this.$refs.content\n\t\t\tthis.focusTrap = createFocusTrap(contentContainer, {\n\t\t\t\tallowOutsideClick: true,\n\t\t\t\ttrapStack: getTrapStack(),\n\t\t\t\tfallbackFocus: this.$refs.trigger,\n\t\t\t})\n\t\t\tthis.focusTrap.activate()\n\t\t},\n\t\tclearFocusTrap() {\n\t\t\tthis.focusTrap?.deactivate()\n\t\t\tthis.focusTrap = null\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n// content inner and outer margin\n// Also used for menu top-right positioning\n$externalMargin: 8px;\n\n.header-menu {\n\tposition: relative;\n\twidth: var(--header-height);\n\theight: var(--header-height);\n\n\t#{&}__trigger {\n\t\twidth: 100% !important;\n\t\theight: var(--header-height);\n\t\topacity: .85;\n\n\t\t// header is filled with primary or image background\n\t\tfilter: none !important;\n\t\tcolor: var(--color-primary-text) !important;\n\t}\n\n\t&--opened &__trigger,\n\t&__trigger:hover,\n\t&__trigger:focus,\n\t&__trigger:active {\n\t\topacity: 1;\n\t}\n\n\t#{&}__trigger:focus-visible {\n\t\toutline: none !important;\n\t\tbox-shadow: none !important;\n\t}\n\n\t&__wrapper {\n\t\tposition: fixed;\n\t\tz-index: 2000;\n\t\ttop: 50px;\n\t\tinset-inline-end: 0;\n\t\tbox-sizing: border-box;\n\t\tmargin: 0 $externalMargin;\n\t\tpadding: 8px;\n\t\tborder-radius: 0 0 var(--border-radius) var(--border-radius);\n\t\tborder-radius: var(--border-radius-large);\n\t\tbackground-color: var(--color-main-background);\n\n\t\tfilter: drop-shadow(0 1px 5px var(--color-box-shadow));\n\t}\n\n\t&__carret {\n\t\tposition: absolute;\n\t\tz-index: 2001; // Because __wrapper is 2000.\n\t\tbottom: 0;\n\t\tinset-inline-start: calc(50% - 10px);\n\t\twidth: 0;\n\t\theight: 0;\n\t\tcontent: ' ';\n\t\tpointer-events: none;\n\t\tborder: 10px solid transparent;\n\t\tborder-bottom-color: var(--color-main-background);\n\t}\n\n\t&__content {\n\t\toverflow: auto;\n\t\twidth: 350px;\n\t\tmax-width: calc(100vw - 2 * $externalMargin);\n\t\tmin-height: calc(44px * 1.5);\n\t\tmax-height: calc(100vh - 50px * 2);\n\t\t:deep(.empty-content) {\n\t\t\tmargin: 12vh 10px;\n\t\t}\n\t}\n}\n\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.header-menu {\n\t\twidth: $clickable-area;\n\t}\n}\n</style>\n"],"names":["ClickOutside","_withDirectives","_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_withCtx","_createVNode","_withModifiers","_renderSlot","_createElementBlock","_toDisplayString","_createCommentVNode","_createElementVNode"],"mappings":"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"}

package/dist/chunks/NcHighlight-CR5kySMp.mjs

@@ -0,0 +1,183 @@
+import { h } from "vue";
+/**
+ * @copyright Copyright (c) 2020 Raimund Schlüßler <raimund.schluessler@mailbox.org>
+ *
+ * @author Raimund Schlüßler <raimund.schluessler@mailbox.org>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+const FindRanges = (text, search) => {
+  const ranges = [];
+  let currentIndex = 0;
+  let index = text.toLowerCase().indexOf(search.toLowerCase(), currentIndex);
+  let i = 0;
+  while (index > -1 && i < text.length) {
+    currentIndex = index + search.length;
+    ranges.push({ start: index, end: currentIndex });
+    index = text.toLowerCase().indexOf(search.toLowerCase(), currentIndex);
+    i++;
+  }
+  return ranges;
+};
+const _sfc_main = {
+  name: "NcHighlight",
+  props: {
+    /**
+     * The string to display
+     */
+    text: {
+      type: String,
+      default: ""
+    },
+    /**
+     * The string to match and highlight
+     */
+    search: {
+      type: String,
+      default: ""
+    },
+    /**
+     * The ranges to highlight, takes precedence over the search prop.
+     */
+    highlight: {
+      type: Array,
+      default: () => []
+    }
+  },
+  computed: {
+    /**
+     * The indice ranges which should be highlighted.
+     * If an array with ranges is provided, we use it. Otherwise
+     * we calculate it based on the provided substring to highlight.
+     *
+     * @return {Array} The array of ranges to highlight
+     */
+    ranges() {
+      let ranges = [];
+      if (!this.search && this.highlight.length === 0) {
+        return ranges;
+      }
+      if (this.highlight.length > 0) {
+        ranges = this.highlight;
+      } else {
+        ranges = FindRanges(this.text, this.search);
+      }
+      ranges.forEach((range, i) => {
+        if (range.end < range.start) {
+          ranges[i] = {
+            start: range.end,
+            end: range.start
+          };
+        }
+      });
+      ranges = ranges.reduce((validRanges, range) => {
+        if (range.start < this.text.length && range.end > 0) {
+          validRanges.push({
+            start: range.start < 0 ? 0 : range.start,
+            end: range.end > this.text.length ? this.text.length : range.end
+          });
+        }
+        return validRanges;
+      }, []);
+      ranges.sort((a, b) => {
+        return a.start - b.start;
+      });
+      ranges = ranges.reduce((mergedRanges, range) => {
+        if (!mergedRanges.length) {
+          mergedRanges.push(range);
+        } else {
+          const idx = mergedRanges.length - 1;
+          if (mergedRanges[idx].end >= range.start) {
+            mergedRanges[idx] = {
+              start: mergedRanges[idx].start,
+              end: Math.max(mergedRanges[idx].end, range.end)
+            };
+          } else {
+            mergedRanges.push(range);
+          }
+        }
+        return mergedRanges;
+      }, []);
+      return ranges;
+    },
+    /**
+     * Calculate the different chunks to show based on the ranges to highlight.
+     *
+     * @return {Array} The chunks
+     */
+    chunks() {
+      if (this.ranges.length === 0) {
+        return [{
+          start: 0,
+          end: this.text.length,
+          highlight: false,
+          text: this.text
+        }];
+      }
+      const chunks = [];
+      let currentIndex = 0;
+      let currentRange = 0;
+      while (currentIndex < this.text.length) {
+        const range = this.ranges[currentRange];
+        if (range.start === currentIndex) {
+          chunks.push({
+            ...range,
+            highlight: true,
+            text: this.text.slice(range.start, range.end)
+          });
+          currentRange++;
+          currentIndex = range.end;
+          if (currentRange >= this.ranges.length && currentIndex < this.text.length) {
+            chunks.push({
+              start: currentIndex,
+              end: this.text.length,
+              highlight: false,
+              text: this.text.slice(currentIndex)
+            });
+            currentIndex = this.text.length;
+          }
+          continue;
+        }
+        chunks.push({
+          start: currentIndex,
+          end: range.start,
+          highlight: false,
+          text: this.text.slice(currentIndex, range.start)
+        });
+        currentIndex = range.start;
+      }
+      return chunks;
+    }
+  },
+  /**
+   * The render function to display the component
+   *
+   * @return {object} The created VNode
+   */
+  render() {
+    if (!this.ranges.length) {
+      return h("span", {}, this.text);
+    }
+    return h("span", {}, this.chunks.map((chunk) => {
+      return chunk.highlight ? h("strong", {}, chunk.text) : chunk.text;
+    }));
+  }
+};
+export {
+  FindRanges as F,
+  _sfc_main as _
+};

package/dist/chunks/NcHighlight-CR5kySMp.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcHighlight-CR5kySMp.mjs","sources":["../../src/utils/FindRanges.js","../../src/components/NcHighlight/NcHighlight.vue"],"sourcesContent":["/**\n * @copyright Copyright (c) 2020 Raimund Schlüßler <raimund.schluessler@mailbox.org>\n *\n * @author Raimund Schlüßler <raimund.schluessler@mailbox.org>\n *\n * @license AGPL-3.0-or-later\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU Affero General Public License as\n * published by the Free Software Foundation, either version 3 of the\n * License, or (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU Affero General Public License for more details.\n *\n * You should have received a copy of the GNU Affero General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n *\n */\n\n/**\n * Find the ranges of a substr in a given string\n *\n * @param {string} text The text to search in\n * @param {string} search The text to search for\n * @return {Array} The array of ranges to highlight\n */\nconst FindRanges = (text, search) => {\n\tconst ranges = []\n\tlet currentIndex = 0\n\tlet index = text.toLowerCase().indexOf(search.toLowerCase(), currentIndex)\n\t// Variable to track that we don't iterate more often than the length of the text.\n\t// Shouldn't happen anyway, but just to be sure to not hang the browser for some reason.\n\tlet i = 0\n\twhile (index > -1 && i < text.length) {\n\t\tcurrentIndex = index + search.length\n\t\tranges.push({ start: index, end: currentIndex })\n\n\t\tindex = text.toLowerCase().indexOf(search.toLowerCase(), currentIndex)\n\t\ti++\n\t}\n\treturn ranges\n}\n\nexport default FindRanges\n","<!--\n  - @copyright Copyright (c) 2021 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\n### General description\n\nHighlight a string with html &lt;strong&gt;. Accepts a substring to highlight or an array with ranges.\n\n### Usage\n\n```vue\n<template>\n\t<div>\n\t\t<NcHighlight text=\"Highlight me please!\" search=\"me\" />\n\t\t<br />\n\t\t<NcHighlight text=\"Highlight me please!\" :highlight=\"[{ start: 4, end: 12 }]\" />\n\t</div>\n</template>\n```\n</docs>\n\n<script>\nimport FindRanges from '../../utils/FindRanges.js'\n\nimport { h } from 'vue'\n\nexport default {\n\tname: 'NcHighlight',\n\tprops: {\n\t\t/**\n\t\t * The string to display\n\t\t */\n\t\ttext: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The string to match and highlight\n\t\t */\n\t\tsearch: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The ranges to highlight, takes precedence over the search prop.\n\t\t */\n\t\thighlight: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\t},\n\tcomputed: {\n\t\t/**\n\t\t * The indice ranges which should be highlighted.\n\t\t * If an array with ranges is provided, we use it. Otherwise\n\t\t * we calculate it based on the provided substring to highlight.\n\t\t *\n\t\t * @return {Array} The array of ranges to highlight\n\t\t */\n\t\tranges() {\n\t\t\tlet ranges = []\n\t\t\t// If the search term and the highlight array is empty, return early with empty array\n\t\t\tif (!this.search && this.highlight.length === 0) {\n\t\t\t\treturn ranges\n\t\t\t}\n\n\t\t\t// If there are ranges to highlight provided, we use this array.\n\t\t\tif (this.highlight.length > 0) {\n\t\t\t\tranges = this.highlight\n\t\t\t// Otherwise we check the text to highlight for matches of the search term.\n\t\t\t} else {\n\t\t\t\tranges = FindRanges(this.text, this.search)\n\t\t\t}\n\n\t\t\t/**\n\t\t\t * Ensure that the start of each range is equal to or smaller than the end\n\t\t\t */\n\t\t\tranges.forEach((range, i) => {\n\t\t\t\tif (range.end < range.start) {\n\t\t\t\t\tranges[i] = {\n\t\t\t\t\t\tstart: range.end,\n\t\t\t\t\t\tend: range.start,\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t})\n\n\t\t\t/**\n\t\t\t * Validate the ranges array to be within the string length\n\t\t\t * and discard ranges which are completely out of bonds.\n\t\t\t */\n\t\t\tranges = ranges.reduce((validRanges, range) => {\n\t\t\t\tif (range.start < this.text.length && range.end > 0) {\n\t\t\t\t\tvalidRanges.push({\n\t\t\t\t\t\tstart: (range.start < 0) ? 0 : range.start,\n\t\t\t\t\t\tend: (range.end > this.text.length) ? this.text.length : range.end,\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t\treturn validRanges\n\t\t\t}, [])\n\n\t\t\t/**\n\t\t\t * Sort ranges ascendingly (necessary for next step)\n\t\t\t */\n\t\t\tranges.sort((a, b) => {\n\t\t\t\treturn a.start - b.start\n\t\t\t})\n\n\t\t\t/**\n\t\t\t * Merge overlapping or adjacent ranges\n\t\t\t */\n\t\t\tranges = ranges.reduce((mergedRanges, range) => {\n\t\t\t\t// If there are no ranges, just add the range\n\t\t\t\tif (!mergedRanges.length) {\n\t\t\t\t\tmergedRanges.push(range)\n\t\t\t\t} else {\n\t\t\t\t\t// If the range overlaps the last range, merge them\n\t\t\t\t\tconst idx = mergedRanges.length - 1\n\t\t\t\t\tif (mergedRanges[idx].end >= range.start) {\n\t\t\t\t\t\tmergedRanges[idx] = {\n\t\t\t\t\t\t\tstart: mergedRanges[idx].start,\n\t\t\t\t\t\t\tend: Math.max(mergedRanges[idx].end, range.end),\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\tmergedRanges.push(range)\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\treturn mergedRanges\n\t\t\t}, [])\n\n\t\t\treturn ranges\n\t\t},\n\t\t/**\n\t\t * Calculate the different chunks to show based on the ranges to highlight.\n\t\t *\n\t\t * @return {Array} The chunks\n\t\t */\n\t\tchunks() {\n\t\t\t// If the ranges array is empty, show only one chunk with all text\n\t\t\tif (this.ranges.length === 0) {\n\t\t\t\treturn [{\n\t\t\t\t\tstart: 0,\n\t\t\t\t\tend: this.text.length,\n\t\t\t\t\thighlight: false,\n\t\t\t\t\ttext: this.text,\n\t\t\t\t}]\n\t\t\t}\n\t\t\t// Calculate the chunks\n\t\t\tconst chunks = []\n\t\t\tlet currentIndex = 0\n\t\t\tlet currentRange = 0\n\t\t\t// Iterate over all characters in the text\n\t\t\twhile (currentIndex < this.text.length) {\n\t\t\t\t// Get the first range to highlight\n\t\t\t\tconst range = this.ranges[currentRange]\n\t\t\t\t// If the range starts at the current index, construct a chunk to highlight,\n\t\t\t\t// set the next range and continue with the next iteration.\n\t\t\t\tif (range.start === currentIndex) {\n\t\t\t\t\tchunks.push({\n\t\t\t\t\t\t...range,\n\t\t\t\t\t\thighlight: true,\n\t\t\t\t\t\ttext: this.text.slice(range.start, range.end),\n\t\t\t\t\t})\n\t\t\t\t\tcurrentRange++\n\t\t\t\t\tcurrentIndex = range.end\n\t\t\t\t\t// If this was the last range to highlight and we haven't reached the end of the text,\n\t\t\t\t\t// add the rest of the text without highlighting.\n\t\t\t\t\tif (currentRange >= this.ranges.length && currentIndex < this.text.length) {\n\t\t\t\t\t\tchunks.push({\n\t\t\t\t\t\t\tstart: currentIndex,\n\t\t\t\t\t\t\tend: this.text.length,\n\t\t\t\t\t\t\thighlight: false,\n\t\t\t\t\t\t\ttext: this.text.slice(currentIndex),\n\t\t\t\t\t\t})\n\t\t\t\t\t\t// Set the current index so the while loop ends.\n\t\t\t\t\t\tcurrentIndex = this.text.length\n\t\t\t\t\t}\n\t\t\t\t\tcontinue\n\t\t\t\t}\n\t\t\t\t// If the current range does start after the current index, construct a chunk without\n\t\t\t\t// highlighting and set the current index to the start of the current range.\n\t\t\t\tchunks.push({\n\t\t\t\t\tstart: currentIndex,\n\t\t\t\t\tend: range.start,\n\t\t\t\t\thighlight: false,\n\t\t\t\t\ttext: this.text.slice(currentIndex, range.start),\n\t\t\t\t})\n\t\t\t\tcurrentIndex = range.start\n\t\t\t}\n\t\t\treturn chunks\n\t\t},\n\t},\n\t/**\n\t * The render function to display the component\n\t *\n\t * @return {object} The created VNode\n\t */\n\trender() {\n\t\tif (!this.ranges.length) {\n\t\t\treturn h('span', {}, this.text)\n\t\t}\n\n\t\treturn h('span', {}, this.chunks.map(chunk => {\n\t\t\treturn chunk.highlight ? h('strong', {}, chunk.text) : chunk.text\n\t\t}))\n\t},\n}\n</script>\n"],"names":[],"mappings":"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"}

package/dist/chunks/NcIconSvgWrapper-C0csZ9zg.mjs

@@ -0,0 +1,106 @@
+import '../assets/NcIconSvgWrapper-C95UOHYS.css';
+import { warn, openBlock, createElementBlock, normalizeProps, mergeProps, createElementVNode, useCssVars } from "vue";
+import DOMPurify from "dompurify";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+const _sfc_main = {
+  name: "NcIconSvgWrapper",
+  props: {
+    /**
+     * Set if the icon should be used as inline content e.g. within text.
+     * By default the icon is made a block element for use inside `icon`-slots.
+     */
+    inline: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Raw SVG string to render
+     */
+    svg: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Label of the icon, used in aria-label
+     */
+    name: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Raw SVG path to render. Takes precedence over the SVG string in the `svg` prop.
+     */
+    path: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Size of the icon to show. Only use if not using within an icon slot.
+     * Defaults to 20px which is the Nextcloud icon size for all icon slots.
+     * @default 20
+     */
+    size: {
+      type: [Number, String],
+      default: 20,
+      validator: (value) => typeof value === "number" || value === "auto"
+    }
+  },
+  computed: {
+    /**
+     * Icon size used in CSS
+     */
+    iconSize() {
+      return typeof this.size === "number" ? `${this.size}px` : this.size;
+    },
+    cleanSvg() {
+      if (!this.svg || this.path) {
+        return;
+      }
+      const svg = DOMPurify.sanitize(this.svg);
+      const svgDocument = new DOMParser().parseFromString(svg, "image/svg+xml");
+      if (svgDocument.querySelector("parsererror")) {
+        warn("SVG is not valid");
+        return "";
+      }
+      if (svgDocument.documentElement.id) {
+        svgDocument.documentElement.removeAttribute("id");
+      }
+      return svgDocument.documentElement.outerHTML;
+    },
+    attributes() {
+      return {
+        class: ["icon-vue", { "icon-vue--inline": this.inline }],
+        role: "img",
+        "aria-hidden": !this.name ? true : void 0,
+        "aria-label": this.name || void 0
+      };
+    }
+  }
+};
+const __injectCSSVars__ = () => {
+  useCssVars((_ctx) => ({
+    "58b5890d": _ctx.iconSize
+  }));
+};
+const __setup__ = _sfc_main.setup;
+_sfc_main.setup = __setup__ ? (props, ctx) => {
+  __injectCSSVars__();
+  return __setup__(props, ctx);
+} : __injectCSSVars__;
+const _hoisted_1 = {
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+const _hoisted_2 = ["d"];
+const _hoisted_3 = ["innerHTML"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return !$options.cleanSvg ? (openBlock(), createElementBlock("span", normalizeProps(mergeProps({ key: 0 }, $options.attributes)), [
+    (openBlock(), createElementBlock("svg", _hoisted_1, [
+      createElementVNode("path", { d: $props.path }, null, 8, _hoisted_2)
+    ]))
+  ], 16)) : (openBlock(), createElementBlock("span", mergeProps({ key: 1 }, $options.attributes, { innerHTML: $options.cleanSvg }), null, 16, _hoisted_3));
+}
+const NcIconSvgWrapper = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-48c40866"]]);
+export {
+  NcIconSvgWrapper as N
+};

package/dist/chunks/NcIconSvgWrapper-C0csZ9zg.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcIconSvgWrapper-C0csZ9zg.mjs","sources":["../../src/components/NcIconSvgWrapper/NcIconSvgWrapper.vue"],"sourcesContent":["<!--\n  - @copyright 2022 Christopher Ng <chrng8@gmail.com>\n  -\n  - @author Christopher Ng <chrng8@gmail.com>\n  -\n  - @license AGPL-3.0-or-later\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n-->\n\n<docs>\n### Description\n\nRender raw SVG string icons.\n\n### Usage within `icon`-slot\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<NcButton aria-label=\"Close\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"closeSvg\" name=\"Close\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Settings\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"cogSvg\" name=\"Cog\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Add\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"plusSvg\" name=\"Plus\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Send\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :path=\"mdiSend\" name=\"Send\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Star\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :path=\"mdiStar\" name=\"Star\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t</div>\n</template>\n\n<script>\nimport closeSvg from '@mdi/svg/svg/close.svg?raw'\nimport cogSvg from '@mdi/svg/svg/cog.svg?raw'\nimport plusSvg from '@mdi/svg/svg/plus.svg?raw'\nimport { mdiSend } from '@mdi/js'\nimport { mdiStar } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\t// This icons are static data, so you do not need to put them into `data` which will make them reactive\n\t\treturn {\n\t\t\tcloseSvg,\n\t\t\tcogSvg,\n\t\t\tplusSvg,\n\t\t\tmdiSend,\n\t\t\tmdiStar,\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(5, max-content);\n\tgap: 10px;\n}\n</style>\n```\n\n### Inline usage inside text\n\n```vue\n<template>\n\t<p>\n\t\tThis is my <NcIconSvgWrapper inline :path=\"mdiStar\" /> Favorite\n\t</p>\n</template>\n<script>\nimport { mdiStar } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tmdiStar,\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<span v-if=\"!cleanSvg\"\n\t\tv-bind=\"attributes\">\n\t\t<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t<path :d=\"path\" />\n\t\t</svg>\n\t</span>\n\t<span v-else\n\t\tv-bind=\"attributes\"\n\t\tv-html=\"cleanSvg\" /> <!-- eslint-disable-line vue/no-v-html -->\n</template>\n\n<script>\nimport { warn } from 'vue'\nimport DOMPurify from 'dompurify'\n\nexport default {\n\tname: 'NcIconSvgWrapper',\n\n\tprops: {\n\t\t/**\n\t\t * Set if the icon should be used as inline content e.g. within text.\n\t\t * By default the icon is made a block element for use inside `icon`-slots.\n\t\t */\n\t\tinline: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Raw SVG string to render\n\t\t */\n\t\tsvg: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Label of the icon, used in aria-label\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Raw SVG path to render. Takes precedence over the SVG string in the `svg` prop.\n\t\t */\n\t\tpath: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Size of the icon to show. Only use if not using within an icon slot.\n\t\t * Defaults to 20px which is the Nextcloud icon size for all icon slots.\n\t\t * @default 20\n\t\t */\n\t\tsize: {\n\t\t\ttype: [Number, String],\n\t\t\tdefault: 20,\n\t\t\tvalidator: (value) => typeof value === 'number' || value === 'auto',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * Icon size used in CSS\n\t\t */\n\t\ticonSize() {\n\t\t\treturn typeof this.size === 'number' ? `${this.size}px` : this.size\n\t\t},\n\n\t\tcleanSvg() {\n\t\t\tif (!this.svg || this.path) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst svg = DOMPurify.sanitize(this.svg)\n\n\t\t\tconst svgDocument = new DOMParser().parseFromString(svg, 'image/svg+xml')\n\n\t\t\tif (svgDocument.querySelector('parsererror')) {\n\t\t\t\twarn('SVG is not valid')\n\t\t\t\treturn ''\n\t\t\t}\n\n\t\t\tif (svgDocument.documentElement.id) {\n\t\t\t\tsvgDocument.documentElement.removeAttribute('id')\n\t\t\t}\n\n\t\t\treturn svgDocument.documentElement.outerHTML\n\t\t},\n\t\tattributes() {\n\t\t\treturn {\n\t\t\t\tclass: ['icon-vue', { 'icon-vue--inline': this.inline }],\n\t\t\t\trole: 'img',\n\t\t\t\t'aria-hidden': !this.name ? true : undefined,\n\t\t\t\t'aria-label': this.name || undefined,\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.icon-vue {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tmin-width: 44px;\n\tmin-height: 44px;\n\topacity: 1;\n\n\t&--inline {\n\t\tdisplay: inline-flex;\n\t\tmin-width: fit-content;\n\t\tmin-height: fit-content;\n\t\tvertical-align: text-bottom;\n\t}\n\n\t&:deep(svg) {\n\t\tfill: currentColor;\n\t\twidth: v-bind('iconSize');\n\t\theight: v-bind('iconSize');\n\t\tmax-width: v-bind('iconSize');\n\t\tmax-height: v-bind('iconSize');\n\t}\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_normalizeProps","_mergeProps","_createElementVNode"],"mappings":";;;AAgIA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKN,QAAQ;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAKD,KAAK;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,MAAM;AAAA,MACL,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,MACT,WAAW,CAAC,UAAU,OAAO,UAAU,YAAY,UAAU;AAAA,IAC7D;AAAA,EACD;AAAA,EAED,UAAU;AAAA;AAAA;AAAA;AAAA,IAIT,WAAW;AACV,aAAO,OAAO,KAAK,SAAS,WAAW,GAAG,KAAK,IAAI,OAAO,KAAK;AAAA,IAC/D;AAAA,IAED,WAAW;AACV,UAAI,CAAC,KAAK,OAAO,KAAK,MAAM;AAC3B;AAAA,MACD;AAEA,YAAM,MAAM,UAAU,SAAS,KAAK,GAAG;AAEvC,YAAM,cAAc,IAAI,UAAS,EAAG,gBAAgB,KAAK,eAAe;AAExE,UAAI,YAAY,cAAc,aAAa,GAAG;AAC7C,aAAK,kBAAkB;AACvB,eAAO;AAAA,MACR;AAEA,UAAI,YAAY,gBAAgB,IAAI;AACnC,oBAAY,gBAAgB,gBAAgB,IAAI;AAAA,MACjD;AAEA,aAAO,YAAY,gBAAgB;AAAA,IACnC;AAAA,IACD,aAAa;AACZ,aAAO;AAAA,QACN,OAAO,CAAC,YAAY,EAAE,oBAAoB,KAAK,OAAO,CAAC;AAAA,QACvD,MAAM;AAAA,QACN,eAAe,CAAC,KAAK,OAAO,OAAO;AAAA,QACnC,cAAc,KAAK,QAAQ;AAAA,MAC5B;AAAA,IACA;AAAA,EACD;AACF;;;;;;;;;;;;EAnGO,SAAQ;AAAA,EAAY,OAAM;;AAnHjC,MAAA,aAAA,CAAA,GAAA;AAAA,MAAA,aAAA,CAAA,WAAA;;UAiHc,SAAQ,YAArBA,aAAAC,mBAKO,QAtHRC,eAAAC,WAAA,EAAA,KAAA,KAkHU,SAAU,UAAA,CAAA,GAAA;AAAA,KAClBH,aAAAC,mBAEM,OAFN,YAEM;AAAA,MADLG,mBAAkB,QAAX,EAAA,GAAG,OAAA,QApHb,MAAA,GAAA,UAAA;AAAA;0BAuHCH,mBAEqB,QAFrBE,WAEqB,EAzHtB,KAAA,EAAA,GAwHU,qBACR,EAAA,WAAQ,SAAA,SAAQ,CAzHlB,GAAA,MAAA,IAAA,UAAA;;;"}