@nextcloud/vue 9.0.0-rc.6 → 9.0.0-rc.8

package/dist/chunks/{NcEmojiPicker-DL9u7r5m.mjs → NcEmojiPicker-CjRa0HIg.mjs}

@@ -1,18 +1,17 @@
-import '../assets/NcEmojiPicker-CeVpBSVx.css';
-import { isFocusable } from "tabbable";
-import { Picker, Emoji, EmojiIndex } from "emoji-mart-vue-fast/src/index.js";
-import { u as useTrapStackControl } from "./useTrapStackControl-yqM2SDEs.mjs";
-import { s as setCurrentSkinTone, g as getCurrentSkinTone } from "./emoji-BY_D0V5K.mjs";
-import { C as Color } from "./colors-B71CwSnx.mjs";
-import { r as register, k as t40, l as t35, m as t15, n as t5, a as t } from "./_l10n-ZllQPIu_.mjs";
+import '../assets/NcEmojiPicker-BO_GV-CM.css';
 import data from "emoji-mart-vue-fast/data/all.json";
+import { Picker, Emoji, EmojiIndex } from "emoji-mart-vue-fast/src/index.js";
+import { isFocusable } from "tabbable";
 import { createElementBlock, openBlock, mergeProps, createElementVNode, createCommentVNode, toDisplayString, resolveComponent, createBlock, withCtx, createVNode, withKeys, withModifiers, createSlots, normalizeStyle, renderSlot, normalizeProps, guardReactiveProps } from "vue";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
-import { N as NcButton } from "./NcButton-BMnvzy1A.mjs";
-import { N as NcColorPicker } from "./NcColorPicker-D6g3v7Qc.mjs";
-import { N as NcPopover } from "./NcPopover-Zs7qt_Zd.mjs";
-import { _ as _sfc_main$2 } from "./NcTextField.vue_vue_type_script_setup_true_lang-DzcUUWHO.mjs";
-register(t5, t15, t35, t40);
+import { N as NcColorPicker } from "./NcColorPicker-87VzdyIQ.mjs";
+import { u as useTrapStackControl } from "./useTrapStackControl-B6cEicto.mjs";
+import { s as setCurrentSkinTone, g as getCurrentSkinTone } from "./emoji-BY_D0V5K.mjs";
+import { r as register, j as t41, k as t36, l as t16, m as t5, a as t } from "./_l10n-C6k5LExr.mjs";
+import { C as Color } from "./colors-Dm63yanX.mjs";
+import { N as NcButton } from "./NcButton-DkC5k3Lb.mjs";
+import { N as NcPopover } from "./NcPopover-D8iSVK-p.mjs";
+import { _ as _sfc_main$2 } from "./NcTextField.vue_vue_type_script_setup_true_lang-Deo569jY.mjs";
 const _sfc_main$1 = {
   name: "CircleIcon",
   emits: ["click"],
@@ -33,7 +32,7 @@ const _sfc_main$1 = {
 const _hoisted_1$1 = ["aria-hidden", "aria-label"];
 const _hoisted_2$1 = ["fill", "width", "height"];
 const _hoisted_3$1 = { d: "M12,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" };
-const _hoisted_4 = { key: 0 };
+const _hoisted_4$1 = { key: 0 };
 function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
     "aria-hidden": $props.title ? null : "true",
@@ -50,12 +49,13 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
       viewBox: "0 0 24 24"
     }, [
       createElementVNode("path", _hoisted_3$1, [
-        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$1, toDisplayString($props.title), 1)) : createCommentVNode("", true)
       ])
     ], 8, _hoisted_2$1))
   ], 16, _hoisted_1$1);
 }
 const IconCircle = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+register(t5, t16, t36, t41);
 let emojiIndex;
 const i18n = {
   search: t("Search emoji"),
@@ -148,7 +148,7 @@ const _sfc_main = {
      * Selector for the popover container
      */
     container: {
-      type: [String, Object, Element, Boolean],
+      type: [Boolean, String, Object, Element],
       default: "body"
     }
   },
@@ -177,6 +177,7 @@ const _sfc_main = {
       currentColor: skinTonePalette[currentSkinTone - 1],
       /**
        * The current active skin tone
+       *
        * @type {1|2|3|4|5|6}
        */
       currentSkinTone,
@@ -200,6 +201,7 @@ const _sfc_main = {
     },
     /**
      * Update the current skin tone by the result of the color picker
+     *
      * @param {string} color Color set
      */
     onChangeSkinTone(color) {
@@ -231,6 +233,7 @@ const _sfc_main = {
     /**
      * Manually handle Tab navigation skipping emoji buttons.
      * Navigation over emojis is handled by Arrow keys.
+     *
      * @param {KeyboardEvent} event - Keyboard event
      */
     handleTabNavigationSkippingEmojis(event) {
@@ -246,6 +249,7 @@ const _sfc_main = {
     },
     /**
      * Handle arrow navigation via <Picker>'s handlers with scroll bug fix
+     *
      * @param {'onArrowLeft' | 'onArrowRight' | 'onArrowDown' | 'onArrowUp'} originalHandlerName - Picker's arrow keydown handler name
      * @param {KeyboardEvent} event - Keyboard event
      */
@@ -260,9 +264,10 @@ const _sfc_main = {
     }
   }
 };
-const _hoisted_1 = { class: "search__wrapper" };
-const _hoisted_2 = { class: "emoji-mart-category-label" };
+const _hoisted_1 = { class: "nc-emoji-picker-container" };
+const _hoisted_2 = { class: "search__wrapper" };
 const _hoisted_3 = { class: "emoji-mart-category-label" };
+const _hoisted_4 = { class: "emoji-mart-category-label" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_NcTextField = resolveComponent("NcTextField");
   const _component_IconCircle = resolveComponent("IconCircle");
@@ -285,116 +290,117 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps)), void 0, true)
     ]),
     default: withCtx(() => [
-      createVNode(_component_Picker, mergeProps({
-        ref: "picker",
-        class: "nc-emoji-picker",
-        color: "var(--color-primary-element)",
-        data: $setup.emojiIndex,
-        emoji: $props.previewFallbackEmoji,
-        i18n: $setup.i18n,
-        native: $options.native,
-        "emoji-size": 20,
-        "per-line": 8,
-        "picker-styles": { width: "320px" },
-        "show-preview": $props.showPreview,
-        skin: $data.currentSkinTone,
-        "show-skin-tones": false,
-        title: $props.previewFallbackName,
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-label": $options.t("Emoji picker")
-      }, _ctx.$attrs, {
-        onKeydown: withKeys(withModifiers($options.handleTabNavigationSkippingEmojis, ["prevent"]), ["tab"]),
-        onSelect: $options.select
-      }), createSlots({
-        searchTemplate: withCtx(({ onSearch }) => [
-          createElementVNode("div", _hoisted_1, [
-            createVNode(_component_NcTextField, {
-              ref: "search",
-              modelValue: $data.search,
-              "onUpdate:modelValue": [
-                _cache[0] || (_cache[0] = ($event) => $data.search = $event),
-                ($event) => onSearch($data.search)
-              ],
-              class: "search",
-              label: $options.t("Search"),
-              "label-visible": true,
-              placeholder: $setup.i18n.search,
-              "trailing-button-icon": "close",
-              "trailing-button-label": $options.t("Clear search"),
-              "show-trailing-button": $data.search !== "",
-              onKeydown: [
-                _cache[1] || (_cache[1] = withKeys(($event) => $options.callPickerArrowHandlerWithScrollFix("onArrowLeft", $event), ["left"])),
-                _cache[2] || (_cache[2] = withKeys(($event) => $options.callPickerArrowHandlerWithScrollFix("onArrowRight", $event), ["right"])),
-                _cache[3] || (_cache[3] = withKeys(($event) => $options.callPickerArrowHandlerWithScrollFix("onArrowDown", $event), ["down"])),
-                _cache[4] || (_cache[4] = withKeys(($event) => $options.callPickerArrowHandlerWithScrollFix("onArrowUp", $event), ["up"])),
-                _cache[5] || (_cache[5] = withKeys(($event) => _ctx.$refs.picker.onEnter($event), ["enter"]))
-              ],
-              onTrailingButtonClick: ($event) => {
-                $options.clearSearch();
-                onSearch("");
-              }
-            }, null, 8, ["modelValue", "label", "placeholder", "trailing-button-label", "show-trailing-button", "onTrailingButtonClick", "onUpdate:modelValue"]),
-            createVNode(_component_NcColorPicker, {
-              "palette-only": "",
-              container: $props.container,
-              palette: $setup.skinTonePalette,
-              "model-value": $data.currentColor.color,
-              "onUpdate:modelValue": $options.onChangeSkinTone
-            }, {
-              default: withCtx(() => [
-                createVNode(_component_NcButton, {
-                  "aria-label": $options.t("Skin tone"),
-                  variant: "tertiary-no-background"
-                }, {
-                  icon: withCtx(() => [
-                    createVNode(_component_IconCircle, {
-                      style: normalizeStyle({ color: $data.currentColor.color }),
-                      title: $data.currentColor.name,
-                      size: 20
-                    }, null, 8, ["style", "title"])
-                  ]),
-                  _: 1
-                }, 8, ["aria-label"])
-              ]),
-              _: 1
-            }, 8, ["container", "palette", "model-value", "onUpdate:modelValue"])
-          ])
-        ]),
-        _: 2
-      }, [
-        $props.allowUnselect && $props.selectedEmoji ? {
-          name: "customCategory",
-          fn: withCtx(() => [
+      createElementVNode("div", _hoisted_1, [
+        createVNode(_component_Picker, mergeProps({
+          ref: "picker",
+          color: "var(--color-primary-element)",
+          data: $setup.emojiIndex,
+          emoji: $props.previewFallbackEmoji,
+          i18n: $setup.i18n,
+          native: $options.native,
+          "emoji-size": 20,
+          "per-line": 8,
+          "picker-styles": { width: "320px" },
+          "show-preview": $props.showPreview,
+          skin: $data.currentSkinTone,
+          "show-skin-tones": false,
+          title: $props.previewFallbackName,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": $options.t("Emoji picker")
+        }, _ctx.$attrs, {
+          onKeydown: withKeys(withModifiers($options.handleTabNavigationSkippingEmojis, ["prevent"]), ["tab"]),
+          onSelect: $options.select
+        }), createSlots({
+          searchTemplate: withCtx(({ onSearch }) => [
             createElementVNode("div", _hoisted_2, [
-              createElementVNode("h3", _hoisted_3, toDisplayString($options.t("Selected")), 1)
-            ]),
-            createVNode(_component_Emoji, {
-              class: "emoji-selected",
-              data: $setup.emojiIndex,
-              emoji: $props.selectedEmoji,
-              native: "",
-              size: 32,
-              onClick: $options.unselect
-            }, null, 8, ["data", "emoji", "onClick"]),
-            createVNode(_component_Emoji, {
-              class: "emoji-delete",
-              data: $setup.emojiIndex,
-              emoji: ":x:",
-              native: "",
-              size: 10,
-              onClick: $options.unselect
-            }, null, 8, ["data", "onClick"])
+              createVNode(_component_NcTextField, {
+                ref: "search",
+                modelValue: $data.search,
+                "onUpdate:modelValue": [
+                  _cache[0] || (_cache[0] = ($event) => $data.search = $event),
+                  ($event) => onSearch($data.search)
+                ],
+                class: "search",
+                label: $options.t("Search"),
+                "label-visible": true,
+                placeholder: $setup.i18n.search,
+                "trailing-button-icon": "close",
+                "trailing-button-label": $options.t("Clear search"),
+                "show-trailing-button": $data.search !== "",
+                onKeydown: [
+                  _cache[1] || (_cache[1] = withKeys(($event) => $options.callPickerArrowHandlerWithScrollFix("onArrowLeft", $event), ["left"])),
+                  _cache[2] || (_cache[2] = withKeys(($event) => $options.callPickerArrowHandlerWithScrollFix("onArrowRight", $event), ["right"])),
+                  _cache[3] || (_cache[3] = withKeys(($event) => $options.callPickerArrowHandlerWithScrollFix("onArrowDown", $event), ["down"])),
+                  _cache[4] || (_cache[4] = withKeys(($event) => $options.callPickerArrowHandlerWithScrollFix("onArrowUp", $event), ["up"])),
+                  _cache[5] || (_cache[5] = withKeys(($event) => _ctx.$refs.picker.onEnter($event), ["enter"]))
+                ],
+                onTrailingButtonClick: ($event) => {
+                  $options.clearSearch();
+                  onSearch("");
+                }
+              }, null, 8, ["modelValue", "label", "placeholder", "trailing-button-label", "show-trailing-button", "onTrailingButtonClick", "onUpdate:modelValue"]),
+              createVNode(_component_NcColorPicker, {
+                "palette-only": "",
+                container: $props.container,
+                palette: $setup.skinTonePalette,
+                "model-value": $data.currentColor.color,
+                "onUpdate:modelValue": $options.onChangeSkinTone
+              }, {
+                default: withCtx(() => [
+                  createVNode(_component_NcButton, {
+                    "aria-label": $options.t("Skin tone"),
+                    variant: "tertiary-no-background"
+                  }, {
+                    icon: withCtx(() => [
+                      createVNode(_component_IconCircle, {
+                        style: normalizeStyle({ color: $data.currentColor.color }),
+                        title: $data.currentColor.name,
+                        size: 20
+                      }, null, 8, ["style", "title"])
+                    ]),
+                    _: 1
+                  }, 8, ["aria-label"])
+                ]),
+                _: 1
+              }, 8, ["container", "palette", "model-value", "onUpdate:modelValue"])
+            ])
           ]),
-          key: "0"
-        } : void 0
-      ]), 1040, ["data", "emoji", "i18n", "native", "show-preview", "skin", "title", "aria-label", "onKeydown", "onSelect"])
+          _: 2
+        }, [
+          $props.allowUnselect && $props.selectedEmoji ? {
+            name: "customCategory",
+            fn: withCtx(() => [
+              createElementVNode("div", _hoisted_3, [
+                createElementVNode("h3", _hoisted_4, toDisplayString($options.t("Selected")), 1)
+              ]),
+              createVNode(_component_Emoji, {
+                class: "emoji-selected",
+                data: $setup.emojiIndex,
+                emoji: $props.selectedEmoji,
+                native: "",
+                size: 32,
+                onClick: $options.unselect
+              }, null, 8, ["data", "emoji", "onClick"]),
+              createVNode(_component_Emoji, {
+                class: "emoji-delete",
+                data: $setup.emojiIndex,
+                emoji: ":x:",
+                native: "",
+                size: 10,
+                onClick: $options.unselect
+              }, null, 8, ["data", "onClick"])
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1040, ["data", "emoji", "i18n", "native", "show-preview", "skin", "title", "aria-label", "onKeydown", "onSelect"])
+      ])
     ]),
     _: 3
   }, 8, ["shown", "container", "onAfterShow", "onAfterHide"]);
 }
-const NcEmojiPicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-12f86ed6"]]);
+const NcEmojiPicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-f2f99131"]]);
 export {
   NcEmojiPicker as N
 };
-//# sourceMappingURL=NcEmojiPicker-DL9u7r5m.mjs.map
+//# sourceMappingURL=NcEmojiPicker-CjRa0HIg.mjs.map

package/dist/chunks/NcEmojiPicker-CjRa0HIg.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcEmojiPicker-CjRa0HIg.mjs","sources":["../../node_modules/vue-material-design-icons/Circle.vue","../../src/components/NcEmojiPicker/NcEmojiPicker.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon 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=\"M12,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: \"CircleIcon\",\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  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### General description\n\nThis component allows the user to pick an emoji.\n\n### Usage\n\n* Listen to the select event and pass in an HTML element that will be treated as a trigger:\n\n```vue\n<template>\n\t<div>\n\t\t<NcEmojiPicker @select=\"select\" style=\"display: inline-block\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcEmojiPicker>\n\t\t<span>selected emoji: {{ emoji }}</span>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\temoji: '',\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tselect(emoji) {\n\t\t\t\tthis.emoji = emoji\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n* Showing a preview and keeping it open after a user selected an emoji\n\n```vue\n<template>\n\t<div>\n\t\t<NcEmojiPicker\n\t\t\t:close-on-select=\"false\"\n\t\t\t:show-preview=\"true\"\n\t\t\t@select=\"select\"\n\t\t\tstyle=\"display: inline-block\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcEmojiPicker>\n\t\t<span>selected emoji: {{ emoji }}</span>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\temoji: '',\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tselect(emoji) {\n\t\t\t\tthis.emoji = emoji\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n* Allow unselecting a previously set emoji.\n\n```vue\n<template>\n\t<div>\n\t\t<NcEmojiPicker\n\t\t\t:show-preview=\"true\"\n\t\t\t:allow-unselect=\"true\"\n\t\t\t:selected-emoji=\"emoji\"\n\t\t\t@select=\"select\"\n\t\t\t@unselect=\"unselect\"\n\t\t\tstyle=\"display: inline-block\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcEmojiPicker>\n\t\t<span>selected emoji: {{ emoji }}</span>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\temoji: '',\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tselect(emoji) {\n\t\t\t\tthis.emoji = emoji\n\t\t\t},\n\t\t\tunselect() {\n\t\t\t\tthis.emoji = ''\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n</docs>\n\n<template>\n\t<NcPopover\n\t\tref=\"popover\"\n\t\tv-model:shown=\"open\"\n\t\t:container=\"container\"\n\t\tpopup-role=\"dialog\"\n\t\t:no-focus-trap=\"true /* Handled manually to remove emoji buttons from TAB sequence */\"\n\t\t@after-show=\"afterShow\"\n\t\t@after-hide=\"afterHide\">\n\t\t<template #trigger=\"slotProps\">\n\t\t\t<slot v-bind=\"slotProps\" />\n\t\t</template>\n\t\t<div class=\"nc-emoji-picker-container\">\n\t\t\t<Picker\n\t\t\t\tref=\"picker\"\n\t\t\t\tcolor=\"var(--color-primary-element)\"\n\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t:emoji=\"previewFallbackEmoji\"\n\t\t\t\t:i18n\n\t\t\t\t:native\n\t\t\t\t:emoji-size=\"20\"\n\t\t\t\t:per-line=\"8\"\n\t\t\t\t:picker-styles=\"{ width: '320px' }\"\n\t\t\t\t:show-preview\n\t\t\t\t:skin=\"currentSkinTone\"\n\t\t\t\t:show-skin-tones=\"false\"\n\t\t\t\t:title=\"previewFallbackName\"\n\t\t\t\trole=\"dialog\"\n\t\t\t\taria-modal=\"true\"\n\t\t\t\t:aria-label=\"t('Emoji picker')\"\n\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t@keydown.tab.prevent=\"handleTabNavigationSkippingEmojis\"\n\t\t\t\t@select=\"select\">\n\t\t\t\t<template #searchTemplate=\"{ onSearch }\">\n\t\t\t\t\t<div class=\"search__wrapper\">\n\t\t\t\t\t\t<NcTextField\n\t\t\t\t\t\t\tref=\"search\"\n\t\t\t\t\t\t\tv-model=\"search\"\n\t\t\t\t\t\t\tclass=\"search\"\n\t\t\t\t\t\t\t:label=\"t('Search')\"\n\t\t\t\t\t\t\t:label-visible=\"true\"\n\t\t\t\t\t\t\t:placeholder=\"i18n.search\"\n\t\t\t\t\t\t\ttrailing-button-icon=\"close\"\n\t\t\t\t\t\t\t:trailing-button-label=\"t('Clear search')\"\n\t\t\t\t\t\t\t:show-trailing-button=\"search !== ''\"\n\t\t\t\t\t\t\t@keydown.left=\"callPickerArrowHandlerWithScrollFix('onArrowLeft', $event)\"\n\t\t\t\t\t\t\t@keydown.right=\"callPickerArrowHandlerWithScrollFix('onArrowRight', $event)\"\n\t\t\t\t\t\t\t@keydown.down=\"callPickerArrowHandlerWithScrollFix('onArrowDown', $event)\"\n\t\t\t\t\t\t\t@keydown.up=\"callPickerArrowHandlerWithScrollFix('onArrowUp', $event)\"\n\t\t\t\t\t\t\t@keydown.enter=\"$refs.picker.onEnter($event)\"\n\t\t\t\t\t\t\t@trailing-button-click=\"clearSearch(); onSearch('');\"\n\t\t\t\t\t\t\t@update:model-value=\"onSearch(search)\" />\n\t\t\t\t\t\t<NcColorPicker\n\t\t\t\t\t\t\tpalette-only\n\t\t\t\t\t\t\t:container\n\t\t\t\t\t\t\t:palette=\"skinTonePalette\"\n\t\t\t\t\t\t\t:model-value=\"currentColor.color\"\n\t\t\t\t\t\t\t@update:model-value=\"onChangeSkinTone\">\n\t\t\t\t\t\t\t<NcButton :aria-label=\"t('Skin tone')\" variant=\"tertiary-no-background\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconCircle :style=\"{ color: currentColor.color }\" :title=\"currentColor.name\" :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</NcColorPicker>\n\t\t\t\t\t</div>\n\t\t\t\t</template>\n\t\t\t\t<template v-if=\"allowUnselect && selectedEmoji\" #customCategory>\n\t\t\t\t\t<div class=\"emoji-mart-category-label\">\n\t\t\t\t\t\t<h3 class=\"emoji-mart-category-label\">\n\t\t\t\t\t\t\t{{ t('Selected') }}\n\t\t\t\t\t\t</h3>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Emoji\n\t\t\t\t\t\tclass=\"emoji-selected\"\n\t\t\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t\t\t:emoji=\"selectedEmoji\"\n\t\t\t\t\t\tnative\n\t\t\t\t\t\t:size=\"32\"\n\t\t\t\t\t\t@click=\"unselect\" />\n\t\t\t\t\t<Emoji\n\t\t\t\t\t\tclass=\"emoji-delete\"\n\t\t\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t\t\temoji=\":x:\"\n\t\t\t\t\t\tnative\n\t\t\t\t\t\t:size=\"10\"\n\t\t\t\t\t\t@click=\"unselect\" />\n\t\t\t\t</template>\n\t\t\t</Picker>\n\t\t</div>\n\t</NcPopover>\n</template>\n\n<script>\nimport data from 'emoji-mart-vue-fast/data/all.json'\nimport { Emoji, EmojiIndex, Picker } from 'emoji-mart-vue-fast/src/index.js'\nimport { isFocusable } from 'tabbable'\nimport IconCircle from 'vue-material-design-icons/Circle.vue'\nimport NcColorPicker from '../NcColorPicker/NcColorPicker.vue'\nimport { useTrapStackControl } from '../../composables/useTrapStackControl.ts'\nimport { getCurrentSkinTone, setCurrentSkinTone } from '../../functions/emoji/emoji.ts'\nimport { t } from '../../l10n.ts'\nimport { Color } from '../../utils/colors.ts'\nimport NcButton from '../NcButton/index.ts'\nimport NcPopover from '../NcPopover/index.js'\nimport NcTextField from '../NcTextField/index.ts'\n\n// Shared emoji index and skinTone for all NcEmojiPicker instances\n// Will be initialized on the first NcEmojiPicker creating\nlet emojiIndex\n\nconst i18n = {\n\tsearch: t('Search emoji'),\n\tnotfound: t('No emoji found'),\n\tcategories: {\n\t\tsearch: t('Search results'),\n\t\trecent: t('Frequently used'),\n\t\tsmileys: t('Smileys & Emotion'),\n\t\tpeople: t('People & Body'),\n\t\tnature: t('Animals & Nature'),\n\t\tfoods: t('Food & Drink'),\n\t\tactivity: t('Activities'),\n\t\tplaces: t('Travel & Places'),\n\t\tobjects: t('Objects'),\n\t\tsymbols: t('Symbols'),\n\t\tflags: t('Flags'),\n\t\tcustom: t('Custom'),\n\t},\n}\n\nconst skinTonePalette = [\n\tnew Color(255, 222, 52, t('Neutral skin color')),\n\tnew Color(228, 205, 166, t('Light skin tone')),\n\tnew Color(250, 221, 192, t('Medium light skin tone')),\n\tnew Color(174, 129, 87, t('Medium skin tone')),\n\tnew Color(158, 113, 88, t('Medium dark skin tone')),\n\tnew Color(96, 79, 69, t('Dark skin tone')),\n]\n\nexport default {\n\tname: 'NcEmojiPicker',\n\n\tcomponents: {\n\t\tIconCircle,\n\t\tNcButton,\n\t\tNcColorPicker,\n\t\tNcPopover,\n\t\tNcTextField,\n\t\tEmoji,\n\t\tPicker,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The emoji-set\n\t\t */\n\t\tactiveSet: {\n\t\t\ttype: String,\n\t\t\tdefault: 'native',\n\t\t},\n\n\t\t/**\n\t\t * Show preview section when hovering emoji\n\t\t */\n\t\tshowPreview: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Allow unselecting the selected emoji\n\t\t */\n\t\tallowUnselect: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Selected emoji to allow unselecting\n\t\t */\n\t\tselectedEmoji: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * The fallback emoji in the preview section\n\t\t */\n\t\tpreviewFallbackEmoji: {\n\t\t\ttype: String,\n\t\t\tdefault: 'grinning',\n\t\t},\n\n\t\t/**\n\t\t * The fallback text in the preview section\n\t\t */\n\t\tpreviewFallbackName: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Pick an emoji'),\n\t\t},\n\n\t\t/**\n\t\t * Whether to close the emoji picker after picking one\n\t\t */\n\t\tcloseOnSelect: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Selector for the popover container\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: [Boolean, String, Object, Element],\n\t\t\tdefault: 'body',\n\t\t},\n\t},\n\n\temits: [\n\t\t'select',\n\t\t'selectData',\n\t\t'unselect',\n\t],\n\n\tsetup() {\n\t\t// If this is the first instance of NcEmojiPicker - setup EmojiIndex\n\t\tif (!emojiIndex) {\n\t\t\temojiIndex = new EmojiIndex(data)\n\t\t}\n\n\t\treturn {\n\t\t\t// Non-reactive constants\n\t\t\temojiIndex,\n\t\t\tskinTonePalette,\n\t\t\ti18n,\n\t\t}\n\t},\n\n\tdata() {\n\t\tconst currentSkinTone = getCurrentSkinTone()\n\n\t\treturn {\n\t\t\t/**\n\t\t\t * The current active color from the skin tone palette\n\t\t\t */\n\t\t\tcurrentColor: skinTonePalette[currentSkinTone - 1],\n\t\t\t/**\n\t\t\t * The current active skin tone\n\t\t\t *\n\t\t\t * @type {1|2|3|4|5|6}\n\t\t\t */\n\t\t\tcurrentSkinTone,\n\t\t\tsearch: '',\n\t\t\topen: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tnative() {\n\t\t\treturn this.activeSet === 'native'\n\t\t},\n\t},\n\n\tcreated() {\n\t\t// Component has its own custom focus management\n\t\t// The global focus trap stack should be paused\n\t\tuseTrapStackControl(() => this.open)\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\tclearSearch() {\n\t\t\tthis.search = ''\n\t\t\tthis.$refs.search.focus()\n\t\t},\n\n\t\t/**\n\t\t * Update the current skin tone by the result of the color picker\n\t\t *\n\t\t * @param {string} color Color set\n\t\t */\n\t\tonChangeSkinTone(color) {\n\t\t\tconst index = this.skinTonePalette.findIndex((tone) => tone.color.toLowerCase() === color.toLowerCase())\n\t\t\tif (index > -1) {\n\t\t\t\tthis.currentSkinTone = index + 1\n\t\t\t\tthis.currentColor = this.skinTonePalette[index]\n\t\t\t\tsetCurrentSkinTone(this.currentSkinTone)\n\t\t\t}\n\t\t},\n\n\t\tselect(emojiObject) {\n\t\t\t/**\n\t\t\t * Emits a string containing the emoji e.g. '👩🏿‍💻'\n\t\t\t */\n\t\t\tthis.$emit('select', emojiObject.native)\n\n\t\t\t/**\n\t\t\t * Emits a object with more data about the picked emoji\n\t\t\t */\n\t\t\tthis.$emit('selectData', emojiObject)\n\n\t\t\tif (this.closeOnSelect) {\n\t\t\t\tthis.open = false\n\t\t\t}\n\t\t},\n\n\t\tunselect() {\n\t\t\tthis.$emit('unselect')\n\t\t},\n\n\t\tafterShow() {\n\t\t\tthis.$refs.search.focus()\n\t\t},\n\n\t\tafterHide() {\n\t\t\t// Manually return focus to the trigger button, as we disabled focus-trap\n\t\t\t// But only if there is no focus target outside the picker, for example, input element that received focus by click closing the emoji picker\n\t\t\tif (!document.activeElement || this.$refs.picker.$el.contains(document.activeElement) || !isFocusable(document.activeElement)) {\n\t\t\t\tthis.$refs.popover.$el.querySelector('button, [role=\"button\"]')?.focus()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Manually handle Tab navigation skipping emoji buttons.\n\t\t * Navigation over emojis is handled by Arrow keys.\n\t\t *\n\t\t * @param {KeyboardEvent} event - Keyboard event\n\t\t */\n\t\thandleTabNavigationSkippingEmojis(event) {\n\t\t\tconst current = event.target\n\t\t\tconst focusable = Array.from(this.$refs.picker.$el.querySelectorAll('button:not(.emoji-mart-emoji), input'))\n\t\t\tif (!event.shiftKey) {\n\t\t\t\tconst nextNode = focusable.find((node) => current.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_FOLLOWING) || focusable[0]\n\t\t\t\tnextNode.focus()\n\t\t\t} else {\n\t\t\t\tconst prevNode = focusable.findLast((node) => current.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_PRECEDING) || focusable.at(-1)\n\t\t\t\tprevNode.focus()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Handle arrow navigation via <Picker>'s handlers with scroll bug fix\n\t\t *\n\t\t * @param {'onArrowLeft' | 'onArrowRight' | 'onArrowDown' | 'onArrowUp'} originalHandlerName - Picker's arrow keydown handler name\n\t\t * @param {KeyboardEvent} event - Keyboard event\n\t\t */\n\t\tasync callPickerArrowHandlerWithScrollFix(originalHandlerName, event) {\n\t\t\t// Call the original handler\n\t\t\t// See: https://github.com/serebrov/emoji-mart-vue/blob/a1ea72673a111cce78dc8caad8bc9ea3e02ad5bd/src/components/Picker.vue#L29\n\t\t\t// TODO: expose these methods via slot props in upstream library\n\t\t\tthis.$refs.picker[originalHandlerName](event)\n\n\t\t\t// Wait until emoji-mart-vue-fast scrolls\n\t\t\tawait this.$nextTick()\n\n\t\t\t// Scroll position is incorrect after emoji-mart-vue-fast scrolls...\n\t\t\t// It calculates scroll incorrectly.\n\t\t\t// It doesn't take into account, that emojis are wrapped into categories sections\n\t\t\t// See: https://github.com/serebrov/emoji-mart-vue/blob/a1ea72673a111cce78dc8caad8bc9ea3e02ad5bd/src/utils/picker.js#L244\n\t\t\t// Now scroll to the correct position\n\t\t\t// TODO: fix in upstream\n\t\t\tconst selectedEmoji = this.$refs.picker.$el.querySelector('.emoji-mart-emoji-selected')\n\t\t\tselectedEmoji?.scrollIntoView({\n\t\t\t\tblock: 'center',\n\t\t\t\tinline: 'center',\n\t\t\t})\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n@use \"sass:meta\";\n\n.nc-emoji-picker-container :deep() {\n\t@include meta.load-css('emoji-mart-vue-fast/css/emoji-mart.css');\n}\n\n.nc-emoji-picker-container :deep(.emoji-mart) {\n\tbackground-color: var(--color-main-background) !important;\n\tborder: 0;\n\tcolor: var(--color-main-text) !important;\n\tdisplay: flex !important;\n\n\t// Reset emoji-mart styles\n\tbutton {\n\t\tborder: none;\n\t\tbackground: transparent;\n\t\tfont-size: inherit;\n\t}\n\n\t.emoji-mart-bar,\n\t.emoji-mart-anchors,\n\t.emoji-mart-search,\n\t.emoji-mart-search input,\n\t.emoji-mart-category,\n\t.emoji-mart-category-label,\n\t.emoji-mart-category-label span,\n\t.emoji-mart-skin-swatches {\n\t\tbackground-color: transparent !important;\n\t\tborder-color: var(--color-border) !important;\n\t\tcolor: inherit !important;\n\t}\n\n\t.emoji-mart-anchors {\n\t\tpadding-block: 0;\n\t\tpadding-inline: calc(2 * var(--default-grid-baseline));\n\t}\n\n\t.emoji-mart-anchor {\n\t\tborder-radius: 0;\n\t\tmargin: 0 !important;\n\t\tpadding: 0 !important;\n\t\theight: var(--clickable-area-small);\n\t\tmin-width: var(--clickable-area-small);\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--color-background-hover);\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\toutline: 2px solid var(--color-primary-element) !important;\n\t\t\toutline-offset: -2px;\n\t\t}\n\n\t\t// Icon\n\t\tdiv {\n\t\t\tdisplay: grid;\n\t\t\tplace-content: center;\n\t\t}\n\t}\n\n\t.emoji-mart-scroll {\n\t\tpadding-inline: calc(2 * var(--default-grid-baseline));\n\t\tpadding-block: 0 calc(2 * var(--default-grid-baseline));\n\t}\n\n\t.emoji-mart-category {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat(8, 1fr);\n\t\tjustify-items: stretch;\n\n\t\t&.emoji-mart-no-results {\n\t\t\tgrid-template-columns: 1fr;\n\t\t\tfont-size: inherit;\n\t\t\tcolor: var(--color-text-maxcontrast) !important;\n\t\t}\n\t}\n\n\t/* Label element in the section grid */\n\tdiv.emoji-mart-category-label {\n\t\tgrid-column: span 8;\n\t\tjustify-self: stretch;\n\t}\n\n\t/* An actual heading inside the element */\n\th3.emoji-mart-category-label  {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\t// Inline with buttons\n\t\theight: var(--default-clickable-area);\n\t\tmargin: 0;\n\t\t// Inline with input\n\t\tpadding-inline: calc(2 * var(--default-grid-baseline));\n\t\tpadding-block: 0;\n\t\tuser-select: none;\n\t}\n\n\t.emoji-mart-emoji {\n\t\taspect-ratio: 1 / 1;\n\t\ttext-align: center;\n\t\tmargin: 0 !important;\n\t\tpadding: 0 !important;\n\n\t\t&:hover,\n\t\t&:focus-visible,\n\t\t&.emoji-mart-emoji-selected {\n\t\t\tbackground-color: var(--color-background-hover) !important;\n\t\t\tborder: none;\n\t\t\tborder-radius: var(--border-radius-element);\n\t\t\tbox-shadow: none !important;\n\t\t\toutline: 2px solid var(--color-primary-element) !important;\n\t\t\toutline-offset: -2px;\n\t\t}\n\n\t\t&::before {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\tspan {\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n}\n\n.search__wrapper {\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: var(--default-grid-baseline);\n\talign-items: end;\n\tpadding-block: var(--default-grid-baseline);\n\tpadding-inline: calc(2 * var(--default-grid-baseline));\n}\n\n.row-selected {\n\tbutton, span {\n\t\tvertical-align: middle;\n\t}\n}\n\n.emoji-delete {\n\tvertical-align: top;\n\tmargin-inline-start: -21px;\n\tmargin-top: -3px;\n}\n</style>\n"],"names":["_sfc_main","_hoisted_3","_createElementBlock","_mergeProps","_createElementVNode","_openBlock","NcTextField","_createBlock","_withCtx","_renderSlot","_createVNode","_withKeys","_normalizeStyle","_toDisplayString"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/chunks/{NcHeaderButton-DAxGG1vc.mjs → NcHeaderButton-DafXYbXB.mjs}

@@ -1,7 +1,7 @@
-import '../assets/NcHeaderButton-BZeIVAHI.css';
+import '../assets/NcHeaderButton-CVOQgRjm.css';
 import { defineComponent, createElementBlock, openBlock, createVNode, createCommentVNode, unref, withModifiers, withCtx, renderSlot, toDisplayString } from "vue";
 import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
-import { N as NcButton } from "./NcButton-BMnvzy1A.mjs";
+import { N as NcButton } from "./NcButton-DkC5k3Lb.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 const _hoisted_1 = ["id"];
 const _hoisted_2 = ["id"];
@@ -42,8 +42,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const NcHeaderButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-dbefb31d"]]);
+const NcHeaderButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-92fb182d"]]);
 export {
   NcHeaderButton as N
 };
-//# sourceMappingURL=NcHeaderButton-DAxGG1vc.mjs.map
+//# sourceMappingURL=NcHeaderButton-DafXYbXB.mjs.map

package/dist/chunks/NcHeaderButton-DafXYbXB.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcHeaderButton-DafXYbXB.mjs","sources":["../../src/components/NcHeaderButton/NcHeaderButton.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used in the Nextcloud top header,\nsimilar to the NcHeaderMenu but to be used when only a trigger button is needed, e.g. when opening a dialog.\n\n```\n<template>\n\t<div id=\"nextcloud-header\">\n\t\t<NcHeaderButton id=\"search-dialog\"\n\t\t\taria-label=\"Search\"\n\t\t\t@click=\"showDialog = true\">\n\t\t\t<template #icon>\n\t\t\t\t<Magnify />\n\t\t\t</template>\n\t\t</NcHeaderButton>\n\n\t\t<NcDialog name=\"Search\"\n\t\t\tsize=\"normal\"\n\t\t\tv-model:open=\"showDialog\">\n\t\t\t<NcTextField label=\"Search for files, comments, contacts …\"\n\t\t\t\ttype=\"search\"\n\t\t\t\tv-model=\"query\" />\n\t\t\t<NcEmptyContent name=\"Search\"\n\t\t\t\t:description=\"query ? `No results for '${query}'` : 'Start typing to search'\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Magnify />\n\t\t\t\t</template>\n\t\t\t</NcEmptyContent>\n\t\t</NcDialog>\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\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tquery: '',\n\t\t}\n\t},\n}\n</script>\n<style>\n#nextcloud-header {\n\tdisplay: flex;\n\tjustify-content: right;\n\tbackground-color: var(--color-primary);\n\theight: var(--header-height, 50px);\n\tpadding-inline-end: 12px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<!-- We need a wrapper for server styles to apply -->\n\t<div :id=\"id\" class=\"header-menu\">\n\t\t<NcButton\n\t\t\t:aria-label=\"ariaLabel\"\n\t\t\t:aria-describedby=\"descriptionId\"\n\t\t\tclass=\"header-menu__trigger\"\n\t\t\tsize=\"large\"\n\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t@click.prevent=\"$emit('click', $event)\">\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=\"icon\" />\n\t\t\t</template>\n\t\t</NcButton>\n\n\t\t<span\n\t\t\tv-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\t</div>\n</template>\n\n<script setup lang=\"ts\">\nimport { createElementId } from '../../utils/createElementId.ts'\nimport NcButton from '../NcButton/index.ts'\n\ndefineProps<{\n\t/** Unique id for this menu */\n\tid: string\n\t/** `aria-label` attribute of the button */\n\tariaLabel: string\n\t/** Optional visually hidden description text for the button */\n\tdescription?: string\n}>()\n\ndefineEmits<{\n\tclick: [event: MouseEvent]\n}>()\n\nconst descriptionId = createElementId()\n</script>\n\n<style lang=\"scss\" scoped>\n@use '../NcHeaderMenu/header-menu__trigger.scss';\n</style>\n"],"names":["_createElementBlock","id","_createVNode","_unref","ariaLabel","_withModifiers","$emit","_renderSlot","description"],"mappings":";;;;;;;;;;;;;;;AA0GA,UAAM,gBAAgB,gBAAA;;0BAzCrBA,mBAqBM,OAAA;AAAA,QArBA,IAAIC,KAAAA;AAAAA,QAAI,OAAM;AAAA,MAAA;QACnBC,YAYWC,MAAA,QAAA,GAAA;AAAA,UAXT,cAAYC,KAAAA;AAAAA,UACZ,oBAAkBD,MAAA,aAAA;AAAA,UACnB,OAAM;AAAA,UACN,MAAK;AAAA,UACL,SAAQ;AAAA,UACP,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAAE,cAAA,CAAA,WAAUC,KAAAA,MAAK,SAAU,MAAM,GAAA,CAAA,SAAA,CAAA;AAAA,QAAA;UAC1B,cAGV,MAAoB;AAAA,YAApBC,WAAoB,KAAA,QAAA,QAAA,CAAA,GAAA,QAAA,IAAA;AAAA,UAAA;;;QAKfC,KAAAA,4BADPR,mBAKO,QAAA;AAAA;UAHL,IAAIG,MAAA,aAAA;AAAA,UACL,OAAM;AAAA,QAAA,mBACHK,KAAAA,WAAW,GAAA,GAAA,UAAA;;;;;;"}

package/dist/chunks/{NcHeaderMenu-DcBWHaZv.mjs → NcHeaderMenu-fnBUbMrU.mjs}

@@ -1,4 +1,4 @@
-import '../assets/NcHeaderMenu-U_duiDuh.css';
+import '../assets/NcHeaderMenu-BkGG39vE.css';
 import { defineComponent, ref, computed, useTemplateRef, watch, nextTick, createBlock, openBlock, resolveDynamicComponent, normalizeClass, unref, withCtx, createVNode, createElementBlock, createCommentVNode, withDirectives, withModifiers, renderSlot, toDisplayString, createElementVNode, vShow } from "vue";
 import { onClickOutside } from "@vueuse/core";
 import { createFocusTrap } from "focus-trap";
@@ -7,9 +7,10 @@ import { useHotKey } from "../composables/useHotKey/index.mjs";
 import "../composables/useIsDarkTheme/index.mjs";
 import "../composables/useIsFullscreen/index.mjs";
 import "../composables/useIsMobile/index.mjs";
-import { g as getTrapStack } from "./focusTrap-HJQ4pqHV.mjs";
+import { u as useTrapStackControl } from "./useTrapStackControl-B6cEicto.mjs";
 import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
-import { N as NcButton } from "./NcButton-BMnvzy1A.mjs";
+import { g as getTrapStack } from "./focusTrap-HJQ4pqHV.mjs";
+import { N as NcButton } from "./NcButton-DkC5k3Lb.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 const _hoisted_1 = ["id"];
 const _hoisted_2 = { class: "header-menu__caret" };
@@ -22,10 +23,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "NcHeaderMenu",
   props: {
     id: {},
-    ariaLabel: {},
+    ariaLabel: { default: () => void 0 },
     open: { type: Boolean, default: false },
     isNav: { type: Boolean, default: false },
-    description: {},
+    description: { default: () => void 0 },
     excludeClickOutsideSelectors: { default: () => [] }
   },
   emits: ["closed", "opened", "update:open"],
@@ -39,11 +40,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const contentContainer = useTemplateRef("content-container-key");
     const headerMenu = useTemplateRef("header-menu-key");
     const triggerButton = useTemplateRef("trigger-button-key");
-    const ignore = computed(
-      () => Array.isArray(__props.excludeClickOutsideSelectors) ? __props.excludeClickOutsideSelectors : __props.excludeClickOutsideSelectors.split(" ")
-    );
+    const ignore = computed(() => Array.isArray(__props.excludeClickOutsideSelectors) ? __props.excludeClickOutsideSelectors : __props.excludeClickOutsideSelectors.split(" "));
     onClickOutside(headerMenu, () => setMenuState(false), { ignore });
     useHotKey("Escape", () => setMenuState(false), { prevent: true });
+    useTrapStackControl(isOpened, {
+      disabled: () => !__props.isNav
+    });
     watch(() => __props.open, (state) => setMenuState(state));
     function toggleMenu() {
       setMenuState(!isOpened.value);
@@ -96,9 +98,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           createVNode(unref(NcButton), {
             id: _ctx.isNav ? unref(triggerId) : null,
             ref: "trigger-button-key",
-            class: "header-menu__trigger",
             "aria-controls": `header-menu-${_ctx.id}`,
             "aria-expanded": isOpened.value.toString(),
+            "aria-label": _ctx.ariaLabel,
+            class: "header-menu__trigger",
             size: "large",
             variant: "tertiary-no-background",
             onClick: withModifiers(toggleMenu, ["prevent"])
@@ -107,7 +110,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               renderSlot(_ctx.$slots, "trigger", {}, void 0, true)
             ]),
             _: 3
-          }, 8, ["id", "aria-controls", "aria-expanded"]),
+          }, 8, ["id", "aria-controls", "aria-expanded", "aria-label"]),
           _ctx.description ? (openBlock(), createElementBlock("span", {
             key: 0,
             id: unref(descriptionId),
@@ -132,8 +135,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const NcHeaderMenu = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c1b2b551"]]);
+const NcHeaderMenu = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-24286a7c"]]);
 export {
   NcHeaderMenu as N
 };
-//# sourceMappingURL=NcHeaderMenu-DcBWHaZv.mjs.map
+//# sourceMappingURL=NcHeaderMenu-fnBUbMrU.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcHeaderMenu-fnBUbMrU.mjs","sources":["../../src/components/NcHeaderMenu/NcHeaderMenu.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\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<NcTextField label=\"Search for files, comments, contacts …\"\n\t\t\t\t\tstyle=\"padding-inline: 8px;\"\n\t\t\t\t\ttype=\"search\"\n\t\t\t\t\tv-model=\"query\" />\n\t\t\t\t<NcEmptyContent\n\t\t\t\t\tname=\"Search\"\n\t\t\t\t\t:description=\"query ? `No results for '${query}'` : '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\tdata() {\n\t\treturn {\n\t\t\tquery: '',\n\t\t}\n\t},\n}\n</script>\n<style>\n#nextcloud-header {\n\tdisplay: flex;\n\tjustify-content: end;\n\tbackground-color: var(--color-primary);\n\theight: var(--header-height, 50px);\n\tpadding-inline-end: 12px;\n}\n</style>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport type { FocusTrap } from 'focus-trap'\nimport type { Slot } from 'vue'\n\nimport { onClickOutside } from '@vueuse/core'\nimport { createFocusTrap } from 'focus-trap'\nimport { computed, nextTick, ref, useTemplateRef, watch } from 'vue'\nimport { useHotKey } from '../../composables/index.js'\nimport { useTrapStackControl } from '../../composables/useTrapStackControl.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { getTrapStack } from '../../utils/focusTrap.js'\nimport NcButton from '../NcButton/index.ts'\n\nconst {\n\tariaLabel = undefined,\n\tdescription = undefined,\n\texcludeClickOutsideSelectors = [],\n\topen = false,\n\tisNav = false,\n} = defineProps<{\n\t/**\n\t * Unique id for this menu\n\t */\n\tid: string\n\n\t/**\n\t * aria-label attribute of the menu open button\n\t */\n\tariaLabel?: string\n\n\t/**\n\t * Current menu open state\n\t */\n\topen?: boolean\n\n\t/**\n\t * Pass `true` if the header menu is used for website navigation\n\t *\n\t * The wrapper tag will be set to `nav` and its `aria-labelledby`\n\t * will be associated with the menu open button\n\t */\n\tisNav?: boolean\n\n\t/**\n\t * Additional visually hidden description text for the menu\n\t * open button\n\t */\n\tdescription?: string\n\n\t/**\n\t * A query-selector or an array of query-selectors\n\t * to be ignored when clicking outside an element\n\t */\n\texcludeClickOutsideSelectors?: string | string[]\n}>()\n\nconst emit = defineEmits<{\n\t/** Emitted when the menu is fully closed (animation done) */\n\tclosed: []\n\n\t/** Emitted when the menu is fully opened (animation done) */\n\topened: []\n\n\t/** Updated open state */\n\t'update:open': [v: boolean]\n}>()\n\ndefineSlots<{\n\t/** The menu content */\n\tdefault?: Slot\n\t/** Icon trigger slot. Make sure the svg path is at least 16px. Usually mdi icon works at 20px */\n\ttrigger?: Slot\n}>()\n\n/** Id of the menu description */\nconst descriptionId = createElementId()\n/** Id of the trigger button */\nconst triggerId = createElementId()\n/** The active focus trap (if any) */\nconst focusTrap = ref<FocusTrap>()\n/** Is the menu currently opened */\nconst isOpened = ref(open)\n/** HTML tag to use for the header menu */\nconst wrapperTag = computed(() => isNav ? 'nav' : 'div')\n\n/** The menu content container element */\nconst contentContainer = useTemplateRef('content-container-key')\n/** The overall header menu wrapping element (<nav> or <div>) */\nconst headerMenu = useTemplateRef<HTMLElement>('header-menu-key')\n/** The menu trigger button */\nconst triggerButton = useTemplateRef('trigger-button-key')\n\n// Handle click outside of the menu -> should close the menu\nconst ignore = computed(() => Array.isArray(excludeClickOutsideSelectors)\n\t? excludeClickOutsideSelectors\n\t: excludeClickOutsideSelectors.split(' '))\nonClickOutside(headerMenu, () => setMenuState(false), { ignore })\n\n// Pressing escape should close the menu\nuseHotKey('Escape', () => setMenuState(false), { prevent: true })\n\n// When component has its own custom focus management\n// The global focus trap stack should be paused\nuseTrapStackControl(isOpened, {\n\tdisabled: () => !isNav,\n})\n\n// Watch the open prop to adjust the internal opened state\nwatch(() => open, (state: boolean) => setMenuState(state))\n\n/**\n * Toggle the current menu open state\n */\nfunction toggleMenu() {\n\tsetMenuState(!isOpened.value)\n}\n\n/**\n * Set the menu opened state\n *\n * @param state The opened state to set\n */\nasync function setMenuState(state: boolean) {\n\tif (state === isOpened.value) {\n\t\treturn\n\t}\n\n\tisOpened.value = state\n\temit('update:open', state)\n\n\t// wait one tick to make sure the rendering finished\n\tawait nextTick()\n\t// either add or clear the focus trap\n\tawait (state ? addFocusTrap() : clearFocusTrap())\n\n\t// Emit signal to mark finished toggling\n\t// @ts-expect-error This seems to be broken in Vue's typescript macro compiler...\n\temit(state ? 'opened' : 'closed')\n}\n\n/**\n * When this is role navigation, then we cannot apply a focus trap.\n * In this case we close the menu on focus-out.\n *\n * @param event the focus event\n */\nfunction onFocusOut(event: FocusEvent) {\n\t// Is not a navigation\n\tif (!isNav) {\n\t\treturn\n\t}\n\n\t// Event target is not a node\n\tif (!(event.relatedTarget instanceof Node)) {\n\t\treturn\n\t}\n\n\tif (headerMenu.value?.contains(event.relatedTarget)) {\n\t\tsetMenuState(false)\n\t}\n}\n\n/**\n * Add focus trap for accessibility.\n * Shall only be used when all children are mounted\n * and available in the DOM. We use $nextTick for that.\n */\nasync function addFocusTrap() {\n\t// We cannot add the focus trap on navigation roles\n\t// also skip if already set\n\tif (isNav || focusTrap.value) {\n\t\treturn\n\t}\n\n\t// Init focus trap\n\tfocusTrap.value = createFocusTrap(contentContainer.value!, {\n\t\tallowOutsideClick: true,\n\t\ttrapStack: getTrapStack(),\n\t\tfallbackFocus: triggerButton.value?.$el,\n\t})\n\tfocusTrap.value.activate()\n}\n\n/**\n * Deactivate and clear the focus trap\n */\nfunction clearFocusTrap() {\n\tfocusTrap.value?.deactivate()\n\tfocusTrap.value = undefined\n}\n</script>\n\n<template>\n\t<component\n\t\t:is=\"wrapperTag\"\n\t\t:id=\"id\"\n\t\tref=\"header-menu-key\"\n\t\t:aria-labelledby=\"isNav ? triggerId : null\"\n\t\t:class=\"{ 'header-menu--opened': isOpened }\"\n\t\tclass=\"header-menu\"\n\t\t@focusout=\"onFocusOut\">\n\t\t<!-- Trigger -->\n\t\t<NcButton\n\t\t\t:id=\"isNav ? triggerId : null\"\n\t\t\tref=\"trigger-button-key\"\n\t\t\t:aria-controls=\"`header-menu-${id}`\"\n\t\t\t:aria-expanded=\"isOpened.toString()\"\n\t\t\t:aria-label\n\t\t\tclass=\"header-menu__trigger\"\n\t\t\tsize=\"large\"\n\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t@click.prevent=\"toggleMenu\">\n\t\t\t<template #icon>\n\t\t\t\t<slot name=\"trigger\" />\n\t\t\t</template>\n\t\t</NcButton>\n\n\t\t<span\n\t\t\tv-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=\"isOpened\" class=\"header-menu__caret\" />\n\n\t\t<!-- Menu opened content -->\n\t\t<div\n\t\t\tv-show=\"isOpened\"\n\t\t\t:id=\"`header-menu-${id}`\"\n\t\t\tclass=\"header-menu__wrapper\">\n\t\t\t<div ref=\"content-container-key\" class=\"header-menu__content\">\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t</div>\n\t</component>\n</template>\n\n<style lang=\"scss\" scoped>\n@use './header-menu__trigger.scss';\n\n// content inner and outer margin\n// Also used for menu top-right positioning\n$externalMargin: 8px;\n\n.header-menu {\n\t&__wrapper {\n\t\tposition: fixed;\n\t\tz-index: 2000;\n\t\ttop: var(--header-height);\n\t\tinset-inline-end: 0;\n\t\tbox-sizing: border-box;\n\t\tmargin: 0 $externalMargin;\n\t\tborder-radius: var(--border-radius-element);\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&__caret {\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(var(--default-clickable-area) * 1.5);\n\t\tmax-height: calc(100vh - var(--header-height) * 2);\n\t\t:deep(.empty-content) {\n\t\t\tmargin: 12vh 10px;\n\t\t}\n\t}\n}\n</style>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","id","isNav","_unref","_normalizeClass","_createVNode","ariaLabel","_renderSlot","description","_createElementBlock","_withDirectives","_createElementVNode"],"mappings":"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"}

package/dist/chunks/NcHighlight.vue_vue_type_script_lang-DnWQDM_2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcHighlight.vue_vue_type_script_lang-DnWQDM_2.mjs","sources":["../../src/utils/findRanges.ts","../../src/components/NcHighlight/NcHighlight.vue"],"sourcesContent":["/*!\n * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nexport interface StringRange {\n\tstart: number\n\tend: number\n}\n\n/**\n * Find the ranges of a substr in a given string\n *\n * @param text - The text to search in\n * @param search - The text to search for\n * @return The array of ranges to highlight\n */\nexport function findRanges(text: string, search: string): StringRange[] {\n\tconst ranges: StringRange[] = []\n\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}\n\treturn ranges\n}\n","<!--\n  - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\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 lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { StringRange } from '../../utils/findRanges.ts'\n\nimport { defineComponent, h } from 'vue'\nimport { findRanges } from '../../utils/findRanges.ts'\n\n/**\n * Represents one chunk of the input text\n */\nexport interface HighlightChunk extends StringRange {\n\thighlight: boolean\n\ttext: string\n}\n\nexport default defineComponent({\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\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\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 as PropType<StringRange[]>,\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 The array of ranges to highlight\n\t\t */\n\t\tranges(): StringRange[] {\n\t\t\tlet ranges: StringRange[] = []\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<StringRange[]>((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<StringRange[]>((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\tchunks(): HighlightChunk[] {\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\n\t\t\t// Calculate the chunks\n\t\t\tconst chunks: HighlightChunk[] = []\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\n\t/**\n\t * The render function to display the component\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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"}
+{"version":3,"file":"NcHighlight.vue_vue_type_script_lang-DnWQDM_2.mjs","sources":["../../src/utils/findRanges.ts","../../src/components/NcHighlight/NcHighlight.vue"],"sourcesContent":["/*!\n * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nexport interface StringRange {\n\tstart: number\n\tend: number\n}\n\n/**\n * Find the ranges of a substr in a given string\n *\n * @param text - The text to search in\n * @param search - The text to search for\n * @return The array of ranges to highlight\n */\nexport function findRanges(text: string, search: string): StringRange[] {\n\tconst ranges: StringRange[] = []\n\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}\n\treturn ranges\n}\n","<!--\n  - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\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 lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { StringRange } from '../../utils/findRanges.ts'\n\nimport { defineComponent, h } from 'vue'\nimport { findRanges } from '../../utils/findRanges.ts'\n\n/**\n * Represents one chunk of the input text\n */\nexport interface HighlightChunk extends StringRange {\n\thighlight: boolean\n\ttext: string\n}\n\nexport default defineComponent({\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\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\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 as PropType<StringRange[]>,\n\t\t\tdefault: () => [],\n\t\t},\n\t},\n\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 The array of ranges to highlight\n\t\t */\n\t\tranges(): StringRange[] {\n\t\t\tlet ranges: StringRange[] = []\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<StringRange[]>((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<StringRange[]>((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\n\t\t/**\n\t\t * Calculate the different chunks to show based on the ranges to highlight.\n\t\t */\n\t\tchunks(): HighlightChunk[] {\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\n\t\t\t// Calculate the chunks\n\t\t\tconst chunks: HighlightChunk[] = []\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\n\t/**\n\t * The render function to display the component\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-CprKb_SE.mjs → NcIconSvgWrapper-5AA93z-F.mjs}

@@ -1,4 +1,4 @@
-import '../assets/NcIconSvgWrapper-CJfAwN6-.css';
+import '../assets/NcIconSvgWrapper-D6qXQDNo.css';
 import { defineComponent, useCssVars, computed, warn, createElementBlock, openBlock, normalizeClass, createElementVNode } from "vue";
 import DOMPurify from "dompurify";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
@@ -22,7 +22,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     useCssVars((_ctx) => ({
-      "a360429a": iconSize.value
+      "0c3ef411": iconSize.value
     }));
     const props = __props;
     const iconSize = computed(() => typeof props.size === "number" ? `${props.size}px` : props.size);
@@ -61,8 +61,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const NcIconSvgWrapper = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-bd3d356d"]]);
+const NcIconSvgWrapper = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5a43cff9"]]);
 export {
   NcIconSvgWrapper as N
 };
-//# sourceMappingURL=NcIconSvgWrapper-CprKb_SE.mjs.map
+//# sourceMappingURL=NcIconSvgWrapper-5AA93z-F.mjs.map