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

package/dist/chunks/{NcEmojiPicker-84m02Stk.mjs → NcEmojiPicker-oWZ5anxp.mjs}

@@ -1,13 +1,13 @@
-import "../assets/NcEmojiPicker-KRMyqbWg.css";
-import { g as E, s as T } from "./emoji-tllD0Rvt.mjs";
-import { C as m } from "./GenColors-avBT67Zu.mjs";
-import { openBlock as u, createElementBlock as p, mergeProps as w, createElementVNode as f, toDisplayString as y, createCommentVNode as x, resolveComponent as a, createBlock as B, withCtx as d, renderSlot as F, normalizeProps as A, guardReactiveProps as I, createVNode as c, createSlots as z, normalizeStyle as V } from "vue";
+import "../assets/NcEmojiPicker-nDpi1GKA.css";
+import { g as E, s as T } from "./emoji-mEkenm2t.mjs";
+import { C as m } from "./GenColors-L7jWucCS.mjs";
+import { openBlock as d, createElementBlock as p, mergeProps as w, createElementVNode as f, toDisplayString as y, createCommentVNode as x, resolveComponent as a, createBlock as B, withCtx as u, renderSlot as F, normalizeProps as A, guardReactiveProps as I, createVNode as c, createSlots as z, normalizeStyle as V } from "vue";
 import { _ as S } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
-import { N as U } from "./NcButton-nCkJxwsi.mjs";
-import { N as D } from "./NcColorPicker-hS0KYrLP.mjs";
-import { N as L } from "./NcPopover-HwP68PjO.mjs";
-import { N as K } from "./NcTextField-avDV7Ry_.mjs";
-import { r as H, u as M, v as O, w as q, a as o } from "./_l10n-JmazR_zZ.mjs";
+import { N as U } from "./NcButton-YOXv3gFY.mjs";
+import { N as D } from "./NcColorPicker-DNy0FRJb.mjs";
+import { N as L } from "./NcPopover-XgOWyuQF.mjs";
+import { N as K } from "./NcTextField-qqwMB07_.mjs";
+import { r as H, u as M, v as O, w as q, a as o } from "./_l10n-uuAvfQgY.mjs";
 import { Emoji as R, Picker as Z, EmojiIndex as G } from "emoji-mart-vue-fast/src/index.js";
 import J from "emoji-mart-vue-fast/data/all.json";
 const Q = {
@@ -27,23 +27,23 @@ const Q = {
     }
   }
 }, W = ["aria-hidden", "aria-label"], X = ["fill", "width", "height"], Y = { 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" }, $ = { key: 0 };
-function ee(e, i, t, l, r, n) {
-  return u(), p("span", w(e.$attrs, {
-    "aria-hidden": !t.title,
-    "aria-label": t.title,
+function ee(t, i, e, r, l, n) {
+  return d(), p("span", w(t.$attrs, {
+    "aria-hidden": e.title ? null : !0,
+    "aria-label": e.title,
     class: "material-design-icon circle-icon",
     role: "img",
-    onClick: i[0] || (i[0] = (h) => e.$emit("click", h))
+    onClick: i[0] || (i[0] = (h) => t.$emit("click", h))
   }), [
-    (u(), p("svg", {
-      fill: t.fillColor,
+    (d(), p("svg", {
+      fill: e.fillColor,
       class: "material-design-icon__svg",
-      width: t.size,
-      height: t.size,
+      width: e.size,
+      height: e.size,
       viewBox: "0 0 24 24"
     }, [
       f("path", Y, [
-        t.title ? (u(), p("title", $, y(t.title), 1)) : x("", !0)
+        e.title ? (d(), p("title", $, y(e.title), 1)) : x("", !0)
       ])
     ], 8, X))
   ], 16, W);
@@ -158,17 +158,17 @@ const oe = {
     };
   },
   data() {
-    const e = E();
+    const t = E();
     return {
       /**
        * The current active color from the skin tone palette
        */
-      currentColor: v[e - 1],
+      currentColor: v[t - 1],
       /**
        * The current active skin tone
        * @type {1|2|3|4|5|6}
        */
-      currentSkinTone: e,
+      currentSkinTone: t,
       search: "",
       open: !1
     };
@@ -181,113 +181,116 @@ const oe = {
   methods: {
     t: o,
     clearSearch() {
+      var i, e;
       this.search = "";
-      const e = this.$refs.search?.$refs.inputField?.$refs.input;
-      e && e.focus();
+      const t = (e = (i = this.$refs.search) == null ? void 0 : i.$refs.inputField) == null ? void 0 : e.$refs.input;
+      t && t.focus();
     },
     /**
      * Update the current skin tone by the result of the color picker
      * @param {string} color Color set
      */
-    onChangeSkinTone(e) {
-      const i = this.skinTonePalette.findIndex((t) => t.color.toLowerCase() === e.toLowerCase());
+    onChangeSkinTone(t) {
+      const i = this.skinTonePalette.findIndex((e) => e.color.toLowerCase() === t.toLowerCase());
       i > -1 && (this.currentSkinTone = i + 1, this.currentColor = this.skinTonePalette[i], T(this.currentSkinTone));
     },
-    select(e) {
-      this.$emit("select", e.native), this.$emit("select-data", e), this.closeOnSelect && (this.open = !1);
+    select(t) {
+      this.$emit("select", t.native), this.$emit("select-data", t), this.closeOnSelect && (this.open = !1);
     },
     unselect() {
       this.$emit("unselect");
     },
     afterShow() {
+      var e, r;
       this.$refs.picker.$el.addEventListener("keydown", this.checkKeyEvent);
-      const i = this.$refs.search?.$refs.inputField?.$refs.input;
+      const i = (r = (e = this.$refs.search) == null ? void 0 : e.$refs.inputField) == null ? void 0 : r.$refs.input;
       i && i.focus();
     },
     afterHide() {
       this.$refs.picker.$el.removeEventListener("keydown", this.checkKeyEvent);
     },
-    checkKeyEvent(e) {
-      if (e.key !== "Tab")
+    checkKeyEvent(t) {
+      if (t.key !== "Tab")
         return;
-      const t = this.$refs.picker.$el.querySelectorAll(
+      const e = this.$refs.picker.$el.querySelectorAll(
         "button, input"
-      ), l = t.length - 1;
-      if (t.length <= 1) {
-        e.preventDefault();
+      ), r = e.length - 1;
+      if (e.length <= 1) {
+        t.preventDefault();
         return;
       }
-      e.shiftKey === !1 && e.target === t[l] ? (e.preventDefault(), t[0].focus()) : e.shiftKey === !0 && e.target === t[0] && (e.preventDefault(), t[l].focus());
+      t.shiftKey === !1 && t.target === e[r] ? (t.preventDefault(), e[0].focus()) : t.shiftKey === !0 && t.target === e[0] && (t.preventDefault(), e[r].focus());
     }
   }
 }, ne = { class: "search__wrapper" }, re = { class: "emoji-mart-category-label" }, le = { class: "emoji-mart-category-label" };
-function ae(e, i, t, l, r, n) {
+function ae(t, i, e, r, l, n) {
   const h = a("NcTextField"), C = a("IconCircle"), b = a("NcButton"), j = a("NcColorPicker"), _ = a("Emoji"), N = a("Picker"), P = a("NcPopover");
-  return u(), B(P, {
-    shown: r.open,
-    "onUpdate:shown": i[1] || (i[1] = (s) => r.open = s),
-    container: t.container,
+  return d(), B(P, {
+    shown: l.open,
+    "onUpdate:shown": i[1] || (i[1] = (s) => l.open = s),
+    container: e.container,
     "popup-role": "dialog",
     onAfterShow: n.afterShow,
     onAfterHide: n.afterHide
   }, {
-    trigger: d((s) => [
-      F(e.$slots, "default", A(I(s)), void 0, !0)
+    trigger: u((s) => [
+      F(t.$slots, "default", A(I(s)), void 0, !0)
     ]),
-    default: d(() => [
+    default: u(() => [
       c(N, w({
         ref: "picker",
         "auto-focus": !1,
         color: "var(--color-primary-element)",
-        data: l.emojiIndex,
-        emoji: t.previewFallbackEmoji,
-        i18n: l.i18n,
+        data: r.emojiIndex,
+        emoji: e.previewFallbackEmoji,
+        i18n: r.i18n,
         native: n.native,
         "emoji-size": 20,
         "per-line": 8,
         "picker-styles": { width: "320px" },
-        "show-preview": t.showPreview,
-        skin: r.currentSkinTone,
+        "show-preview": e.showPreview,
+        skin: l.currentSkinTone,
         "show-skin-tones": !1,
-        title: t.previewFallbackName,
+        title: e.previewFallbackName,
         role: "dialog",
         "aria-label": n.t("Emoji picker")
-      }, e.$attrs, { onSelect: n.select }), z({
-        searchTemplate: d((s) => [
+      }, t.$attrs, { onSelect: n.select }), z({
+        searchTemplate: u((s) => [
           f("div", ne, [
             c(h, {
               ref: "search",
-              modelValue: r.search,
+              modelValue: l.search,
               "onUpdate:modelValue": [
-                i[0] || (i[0] = (k) => r.search = k),
-                (k) => s.onSearch(r.search)
+                i[0] || (i[0] = (k) => l.search = k),
+                (k) => s.onSearch(l.search)
               ],
               class: "search",
               label: n.t("Search"),
               "label-visible": !0,
-              placeholder: l.i18n.search,
+              placeholder: r.i18n.search,
               "trailing-button-icon": "close",
               "trailing-button-label": n.t("Clear search"),
-              "show-trailing-button": r.search !== "",
+              "show-trailing-button": l.search !== "",
               onTrailingButtonClick: (k) => {
-                n.clearSearch(), s.onSearch(r.search);
+                n.clearSearch(), s.onSearch(l.search);
               }
             }, null, 8, ["modelValue", "label", "placeholder", "trailing-button-label", "show-trailing-button", "onTrailingButtonClick", "onUpdate:modelValue"]),
             c(j, {
               "palette-only": "",
-              palette: l.skinTonePalette,
-              "model-value": r.currentColor.color,
+              container: e.container,
+              palette: r.skinTonePalette,
+              "model-value": l.currentColor.color,
               "onUpdate:modelValue": n.onChangeSkinTone
             }, {
-              default: d(() => [
+              default: u(() => [
                 c(b, {
                   "aria-label": n.t("Skin tone"),
                   type: "tertiary-no-background"
                 }, {
-                  icon: d(() => [
+                  icon: u(() => [
                     c(C, {
-                      style: V({ color: r.currentColor.color }),
-                      title: r.currentColor.name,
+                      style: V({ color: l.currentColor.color }),
+                      title: l.currentColor.name,
                       size: 20
                     }, null, 8, ["style", "title"])
                   ]),
@@ -295,28 +298,28 @@ function ae(e, i, t, l, r, n) {
                 }, 8, ["aria-label"])
               ]),
               _: 1
-            }, 8, ["palette", "model-value", "onUpdate:modelValue"])
+            }, 8, ["container", "palette", "model-value", "onUpdate:modelValue"])
           ])
         ]),
         _: 2
       }, [
-        t.allowUnselect && t.selectedEmoji ? {
+        e.allowUnselect && e.selectedEmoji ? {
           name: "customCategory",
-          fn: d(() => [
+          fn: u(() => [
             f("div", re, [
               f("h3", le, y(n.t("Selected")), 1)
             ]),
             c(_, {
               class: "emoji-selected",
-              data: l.emojiIndex,
-              emoji: t.selectedEmoji,
+              data: r.emojiIndex,
+              emoji: e.selectedEmoji,
               native: !0,
               size: 32,
               onClick: n.unselect
             }, null, 8, ["data", "emoji", "onClick"]),
             c(_, {
               class: "emoji-delete",
-              data: l.emojiIndex,
+              data: r.emojiIndex,
               emoji: ":x:",
               native: !0,
               size: 10,
@@ -330,7 +333,7 @@ function ae(e, i, t, l, r, n) {
     _: 3
   }, 8, ["shown", "container", "onAfterShow", "onAfterHide"]);
 }
-const we = /* @__PURE__ */ S(ie, [["render", ae], ["__scopeId", "data-v-3dc1f92d"]]);
+const we = /* @__PURE__ */ S(ie, [["render", ae], ["__scopeId", "data-v-2aa4fa14"]]);
 export {
   we as N
 };

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcEmojiPicker-oWZ5anxp.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 - @copyright Copyright (c) 2020 Georg Ehrke <oc.list@georgehrke.com>\n -\n - @author 2020 Georg Ehrke <oc.list@georgehrke.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>\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 v-model:shown=\"open\"\n\t\t:container=\"container\"\n\t\tpopup-role=\"dialog\"\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<Picker ref=\"picker\"\n\t\t\t:auto-focus=\"false /* We manage the input focus ourselves */\"\n\t\t\tcolor=\"var(--color-primary-element)\"\n\t\t\t:data=\"emojiIndex\"\n\t\t\t:emoji=\"previewFallbackEmoji\"\n\t\t\t:i18n=\"i18n\"\n\t\t\t:native=\"native\"\n\t\t\t:emoji-size=\"20\"\n\t\t\t:per-line=\"8\"\n\t\t\t:picker-styles=\"{ width: '320px' }\"\n\t\t\t:show-preview=\"showPreview\"\n\t\t\t:skin=\"currentSkinTone\"\n\t\t\t:show-skin-tones=\"false\"\n\t\t\t:title=\"previewFallbackName\"\n\t\t\trole=\"dialog\"\n\t\t\t:aria-label=\"t('Emoji picker')\"\n\t\t\tv-bind=\"$attrs\"\n\t\t\t@select=\"select\">\n\t\t\t<template #searchTemplate=\"slotProps\">\n\t\t\t\t<div class=\"search__wrapper\">\n\t\t\t\t\t<NcTextField ref=\"search\"\n\t\t\t\t\t\tv-model=\"search\"\n\t\t\t\t\t\tclass=\"search\"\n\t\t\t\t\t\t:label=\"t('Search')\"\n\t\t\t\t\t\t:label-visible=\"true\"\n\t\t\t\t\t\t:placeholder=\"i18n.search\"\n\t\t\t\t\t\ttrailing-button-icon=\"close\"\n\t\t\t\t\t\t:trailing-button-label=\"t('Clear search')\"\n\t\t\t\t\t\t:show-trailing-button=\"search !== ''\"\n\t\t\t\t\t\t@trailing-button-click=\"clearSearch(); slotProps.onSearch(search);\"\n\t\t\t\t\t\t@update:model-value=\"slotProps.onSearch(search)\" />\n\t\t\t\t\t<NcColorPicker palette-only\n\t\t\t\t\t\t:container=\"container\"\n\t\t\t\t\t\t:palette=\"skinTonePalette\"\n\t\t\t\t\t\t:model-value=\"currentColor.color\"\n\t\t\t\t\t\t@update:model-value=\"onChangeSkinTone\">\n\t\t\t\t\t\t<NcButton :aria-label=\"t('Skin tone')\" type=\"tertiary-no-background\">\n\t\t\t\t\t\t\t<template #icon>\n\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</template>\n\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t</NcColorPicker>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t<template v-if=\"allowUnselect && selectedEmoji\" #customCategory>\n\t\t\t\t<div class=\"emoji-mart-category-label\">\n\t\t\t\t\t<h3 class=\"emoji-mart-category-label\">\n\t\t\t\t\t\t{{ t('Selected') }}\n\t\t\t\t\t</h3>\n\t\t\t\t</div>\n\t\t\t\t<Emoji class=\"emoji-selected\"\n\t\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t\t:emoji=\"selectedEmoji\"\n\t\t\t\t\t:native=\"true\"\n\t\t\t\t\t:size=\"32\"\n\t\t\t\t\t@click=\"unselect\" />\n\t\t\t\t<Emoji class=\"emoji-delete\"\n\t\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t\temoji=\":x:\"\n\t\t\t\t\t:native=\"true\"\n\t\t\t\t\t:size=\"10\"\n\t\t\t\t\t@click=\"unselect\" />\n\t\t\t</template>\n\t\t</Picker>\n\t</NcPopover>\n</template>\n\n<script>\nimport { getCurrentSkinTone, setCurrentSkinTone } from '../../functions/emoji/emoji.ts'\nimport { Color } from '../../utils/GenColors.js'\n\nimport IconCircle from 'vue-material-design-icons/Circle.vue'\nimport NcButton from '../NcButton/index.ts'\nimport NcColorPicker from '../NcColorPicker/NcColorPicker.vue'\nimport NcPopover from '../NcPopover/index.js'\nimport NcTextField from '../NcTextField/index.js'\nimport { t } from '../../l10n.js'\n\nimport { Picker, Emoji, EmojiIndex } from 'emoji-mart-vue-fast/src/index.js'\nimport data from 'emoji-mart-vue-fast/data/all.json'\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\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\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\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\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\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\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: [String, Object, Element, Boolean],\n\t\t\tdefault: 'body',\n\t\t},\n\t},\n\temits: [\n\t\t'select',\n\t\t'select-data',\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 * @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\tmethods: {\n\t\tt,\n\n\t\tclearSearch() {\n\t\t\tthis.search = ''\n\t\t\tconst input = this.$refs.search?.$refs.inputField?.$refs.input\n\t\t\tif (input) {\n\t\t\t\tinput.focus()\n\t\t\t}\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 * @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('select-data', 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\t// add focus trap in modal\n\t\t\tconst picker = this.$refs.picker\n\t\t\tpicker.$el.addEventListener('keydown', this.checkKeyEvent)\n\n\t\t\t// set focus on input search field\n\t\t\tconst input = this.$refs.search?.$refs.inputField?.$refs.input\n\t\t\tif (input) {\n\t\t\t\tinput.focus()\n\t\t\t}\n\t\t},\n\n\t\tafterHide() {\n\t\t\t// remove keydown listner if popover is hidden\n\t\t\tconst picker = this.$refs.picker\n\t\t\tpicker.$el.removeEventListener('keydown', this.checkKeyEvent)\n\t\t},\n\n\t\tcheckKeyEvent(event) {\n\t\t\tif (event.key !== 'Tab') {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tconst picker = this.$refs.picker\n\t\t\tconst focusableList = picker.$el.querySelectorAll(\n\t\t\t\t'button, input',\n\t\t\t)\n\t\t\tconst last = focusableList.length - 1\n\t\t\t// escape early if only 1 or no elements to focus\n\t\t\tif (focusableList.length <= 1) {\n\t\t\t\tevent.preventDefault()\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (event.shiftKey === false && event.target === focusableList[last]) {\n\t\t\t\t// Jump to first item when pressing tab on the latest item\n\t\t\t\tevent.preventDefault()\n\t\t\t\tfocusableList[0].focus()\n\t\t\t} else if (event.shiftKey === true && event.target === focusableList[0]) {\n\t\t\t\t// Jump to the last item if pressing shift+tab on the first item\n\t\t\t\tevent.preventDefault()\n\t\t\t\tfocusableList[last].focus()\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n@import 'emoji-mart-vue-fast/css/emoji-mart.css';\n\n.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// default style reset\n\tbutton {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tborder: none;\n\t\tbackground: transparent;\n\t\tfont-size: inherit;\n\t\theight: 36px;\n\t\twidth: auto;\n\n\t\t* {\n\t\t\tcursor: pointer !important;\n\t\t}\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-search input:focus-visible {\n\t\tbox-shadow: inset 0 0 0 2px var(--color-primary-element);\n\t\toutline: none;\n\t}\n\n\t.emoji-mart-bar {\n\t\t&:first-child {\n\t\t\tborder-top-left-radius: var(--border-radius) !important;\n\t\t\tborder-top-right-radius: var(--border-radius) !important;\n\t\t}\n\t}\n\n\t.emoji-mart-anchors {\n\t\tbutton {\n\t\t\tborder-radius: 0;\n\t\t\tpadding: 12px 4px;\n\t\t\theight: auto;\n\t\t\t&:focus-visible {\n\t\t\t\t/* box-shadow: inset 0 0 0 2px var(--color-primary-element); */\n\t\t\t\toutline: 2px solid var(--color-primary-element);\n\t\t\t}\n\t\t}\n\t}\n\n\t.emoji-mart-category {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tflex-wrap: wrap;\n\t\tjustify-content: start;\n\n\t\t.emoji-mart-category-label,\n\t\t.emoji-mart-emoji {\n\t\t\tuser-select: none;\n\t\t\tflex-grow: 0;\n\t\t\tflex-shrink: 0;\n\t\t}\n\n\t\t.emoji-mart-category-label {\n\t\t\tflex-basis: 100%;\n\t\t\tmargin: 0;\n\t\t}\n\n\t\t.emoji-mart-emoji {\n\t\t\t// 8 emoji per row\n\t\t\tflex-basis: calc(100% / 8);\n\t\t\ttext-align: center;\n\n\t\t\t&:hover::before,\n\t\t\t&.emoji-mart-emoji-selected::before{\n\t\t\t\tbackground-color: var(--color-background-hover) !important;\n\t\t\t\toutline: 2px solid var(--color-primary-element);\n\t\t\t}\n\t\t}\n\t\tbutton {\n\n\t\t\t&:focus-visible {\n\t\t\t\tbackground-color: var(--color-background-hover);\n\t\t\t\tborder: 2px solid var(--color-primary-element) !important;\n\t\t\t\tborder-radius: 50%;\n\t\t\t}\n\t\t}\n\t}\n\n}\n</style>\n\n<style scoped lang=\"scss\">\n.search {\n\t&__wrapper {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tgap: 4px; // for focus-visible outlines\n\t\talign-items: end;\n\t\tpadding: 4px 8px;\n\t}\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-left: -21px;\n\tmargin-top: -3px;\n}\n</style>\n"],"names":["_sfc_main$1","_hoisted_1$1","_hoisted_2$1","_hoisted_3$1","$props","createElementVNode","createCommentVNode","emojiIndex","i18n","t","skinTonePalette","Color","_sfc_main","NcButton","NcPopover","Picker","currentSkinTone","getCurrentSkinTone","input","index","setCurrentSkinTone","emojiObject","event","last","focusableList","_hoisted_1","_hoisted_2","_hoisted_3","$data","_cache","$event","$options","withCtx","createVNode","_component_Picker","mergeProps","$setup","_ctx","createSlots","slotProps","normalizeStyle"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/chunks/{NcEmojiPicker-hxiKGEHb.cjs → NcEmojiPicker-tOE2N9VS.cjs}

@@ -1,5 +1,5 @@
-var O = require("../assets/NcEmojiPicker-KRMyqbWg.css");
-const k = require("./emoji-mJIuLpNR.cjs"), s = require("./GenColors-ojnUsIA8.cjs"), e = require("vue"), C = require("./_plugin-vue_export-helper-xG2iG1wl.cjs"), S = require("./NcButton-Uxh-oARg.cjs"), N = require("./NcColorPicker-rE3Dd7s7.cjs"), j = require("./NcPopover-sVfBFdPh.cjs"), b = require("./NcTextField-bz_keSKF.cjs"), o = require("./_l10n-wK0o0jNS.cjs"), m = require("emoji-mart-vue-fast/src/index.js"), P = require("emoji-mart-vue-fast/data/all.json"), E = (t) => t && t.__esModule ? t : { default: t }, x = /* @__PURE__ */ E(P), T = {
+var O = require("../assets/NcEmojiPicker-nDpi1GKA.css");
+const k = require("./emoji-NrWIXNZ4.cjs"), s = require("./GenColors-vx_p2Tvw.cjs"), e = require("vue"), C = require("./_plugin-vue_export-helper-xG2iG1wl.cjs"), S = require("./NcButton-7UKtzkX5.cjs"), N = require("./NcColorPicker-i9PgTYBd.cjs"), j = require("./NcPopover-J0pw-klF.cjs"), b = require("./NcTextField-zi19KqEm.cjs"), n = require("./_l10n-Fl7RzbcZ.cjs"), m = require("emoji-mart-vue-fast/src/index.js"), P = require("emoji-mart-vue-fast/data/all.json"), E = (t) => t && t.__esModule ? t : { default: t }, x = /* @__PURE__ */ E(P), T = {
   name: "CircleIcon",
   emits: ["click"],
   props: {
@@ -16,54 +16,54 @@ const k = require("./emoji-mJIuLpNR.cjs"), s = require("./GenColors-ojnUsIA8.cjs
     }
   }
 }, B = ["aria-hidden", "aria-label"], V = ["fill", "width", "height"], F = { 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" }, q = { key: 0 };
-function A(t, i, n, c, l, r) {
+function A(t, i, o, l, c, r) {
   return e.openBlock(), e.createElementBlock("span", e.mergeProps(t.$attrs, {
-    "aria-hidden": !n.title,
-    "aria-label": n.title,
+    "aria-hidden": o.title ? null : !0,
+    "aria-label": o.title,
     class: "material-design-icon circle-icon",
     role: "img",
     onClick: i[0] || (i[0] = (u) => t.$emit("click", u))
   }), [
     (e.openBlock(), e.createElementBlock("svg", {
-      fill: n.fillColor,
+      fill: o.fillColor,
       class: "material-design-icon__svg",
-      width: n.size,
-      height: n.size,
+      width: o.size,
+      height: o.size,
       viewBox: "0 0 24 24"
     }, [
       e.createElementVNode("path", F, [
-        n.title ? (e.openBlock(), e.createElementBlock("title", q, e.toDisplayString(n.title), 1)) : e.createCommentVNode("", !0)
+        o.title ? (e.openBlock(), e.createElementBlock("title", q, e.toDisplayString(o.title), 1)) : e.createCommentVNode("", !0)
       ])
     ], 8, V))
   ], 16, B);
 }
 const I = /* @__PURE__ */ C._export_sfc(T, [["render", A]]);
-o.register(o.t6, o.t30, o.t34);
+n.register(n.t6, n.t30, n.t34);
 let h;
 const z = {
-  search: o.t("Search emoji"),
-  notfound: o.t("No emoji found"),
+  search: n.t("Search emoji"),
+  notfound: n.t("No emoji found"),
   categories: {
-    search: o.t("Search results"),
-    recent: o.t("Frequently used"),
-    smileys: o.t("Smileys & Emotion"),
-    people: o.t("People & Body"),
-    nature: o.t("Animals & Nature"),
-    foods: o.t("Food & Drink"),
-    activity: o.t("Activities"),
-    places: o.t("Travel & Places"),
-    objects: o.t("Objects"),
-    symbols: o.t("Symbols"),
-    flags: o.t("Flags"),
-    custom: o.t("Custom")
+    search: n.t("Search results"),
+    recent: n.t("Frequently used"),
+    smileys: n.t("Smileys & Emotion"),
+    people: n.t("People & Body"),
+    nature: n.t("Animals & Nature"),
+    foods: n.t("Food & Drink"),
+    activity: n.t("Activities"),
+    places: n.t("Travel & Places"),
+    objects: n.t("Objects"),
+    symbols: n.t("Symbols"),
+    flags: n.t("Flags"),
+    custom: n.t("Custom")
   }
 }, p = [
-  new s.Color(255, 222, 52, o.t("Neutral skin color")),
-  new s.Color(228, 205, 166, o.t("Light skin tone")),
-  new s.Color(250, 221, 192, o.t("Medium light skin tone")),
-  new s.Color(174, 129, 87, o.t("Medium skin tone")),
-  new s.Color(158, 113, 88, o.t("Medium dark skin tone")),
-  new s.Color(96, 79, 69, o.t("Dark skin tone"))
+  new s.Color(255, 222, 52, n.t("Neutral skin color")),
+  new s.Color(228, 205, 166, n.t("Light skin tone")),
+  new s.Color(250, 221, 192, n.t("Medium light skin tone")),
+  new s.Color(174, 129, 87, n.t("Medium skin tone")),
+  new s.Color(158, 113, 88, n.t("Medium dark skin tone")),
+  new s.Color(96, 79, 69, n.t("Dark skin tone"))
 ], D = {
   name: "NcEmojiPicker",
   components: {
@@ -116,7 +116,7 @@ const z = {
      */
     previewFallbackName: {
       type: String,
-      default: o.t("Pick an emoji")
+      default: n.t("Pick an emoji")
     },
     /**
      * Whether to close the emoji picker after picking one
@@ -168,10 +168,11 @@ const z = {
     }
   },
   methods: {
-    t: o.t,
+    t: n.t,
     clearSearch() {
+      var i, o;
       this.search = "";
-      const t = this.$refs.search?.$refs.inputField?.$refs.input;
+      const t = (o = (i = this.$refs.search) == null ? void 0 : i.$refs.inputField) == null ? void 0 : o.$refs.input;
       t && t.focus();
     },
     /**
@@ -179,7 +180,7 @@ const z = {
      * @param {string} color Color set
      */
     onChangeSkinTone(t) {
-      const i = this.skinTonePalette.findIndex((n) => n.color.toLowerCase() === t.toLowerCase());
+      const i = this.skinTonePalette.findIndex((o) => o.color.toLowerCase() === t.toLowerCase());
       i > -1 && (this.currentSkinTone = i + 1, this.currentColor = this.skinTonePalette[i], k.setCurrentSkinTone(this.currentSkinTone));
     },
     select(t) {
@@ -189,8 +190,9 @@ const z = {
       this.$emit("unselect");
     },
     afterShow() {
+      var o, l;
       this.$refs.picker.$el.addEventListener("keydown", this.checkKeyEvent);
-      const i = this.$refs.search?.$refs.inputField?.$refs.input;
+      const i = (l = (o = this.$refs.search) == null ? void 0 : o.$refs.inputField) == null ? void 0 : l.$refs.input;
       i && i.focus();
     },
     afterHide() {
@@ -199,23 +201,23 @@ const z = {
     checkKeyEvent(t) {
       if (t.key !== "Tab")
         return;
-      const n = this.$refs.picker.$el.querySelectorAll(
+      const o = this.$refs.picker.$el.querySelectorAll(
         "button, input"
-      ), c = n.length - 1;
-      if (n.length <= 1) {
+      ), l = o.length - 1;
+      if (o.length <= 1) {
         t.preventDefault();
         return;
       }
-      t.shiftKey === !1 && t.target === n[c] ? (t.preventDefault(), n[0].focus()) : t.shiftKey === !0 && t.target === n[0] && (t.preventDefault(), n[c].focus());
+      t.shiftKey === !1 && t.target === o[l] ? (t.preventDefault(), o[0].focus()) : t.shiftKey === !0 && t.target === o[0] && (t.preventDefault(), o[l].focus());
     }
   }
 }, U = { class: "search__wrapper" }, L = { class: "emoji-mart-category-label" }, H = { class: "emoji-mart-category-label" };
-function K(t, i, n, c, l, r) {
+function K(t, i, o, l, c, r) {
   const u = e.resolveComponent("NcTextField"), _ = e.resolveComponent("IconCircle"), g = e.resolveComponent("NcButton"), v = e.resolveComponent("NcColorPicker"), f = e.resolveComponent("Emoji"), w = e.resolveComponent("Picker"), y = e.resolveComponent("NcPopover");
   return e.openBlock(), e.createBlock(y, {
-    shown: l.open,
-    "onUpdate:shown": i[1] || (i[1] = (a) => l.open = a),
-    container: n.container,
+    shown: c.open,
+    "onUpdate:shown": i[1] || (i[1] = (a) => c.open = a),
+    container: o.container,
     "popup-role": "dialog",
     onAfterShow: r.afterShow,
     onAfterHide: r.afterHide
@@ -228,17 +230,17 @@ function K(t, i, n, c, l, r) {
         ref: "picker",
         "auto-focus": !1,
         color: "var(--color-primary-element)",
-        data: c.emojiIndex,
-        emoji: n.previewFallbackEmoji,
-        i18n: c.i18n,
+        data: l.emojiIndex,
+        emoji: o.previewFallbackEmoji,
+        i18n: l.i18n,
         native: r.native,
         "emoji-size": 20,
         "per-line": 8,
         "picker-styles": { width: "320px" },
-        "show-preview": n.showPreview,
-        skin: l.currentSkinTone,
+        "show-preview": o.showPreview,
+        skin: c.currentSkinTone,
         "show-skin-tones": !1,
-        title: n.previewFallbackName,
+        title: o.previewFallbackName,
         role: "dialog",
         "aria-label": r.t("Emoji picker")
       }, t.$attrs, { onSelect: r.select }), e.createSlots({
@@ -246,26 +248,27 @@ function K(t, i, n, c, l, r) {
           e.createElementVNode("div", U, [
             e.createVNode(u, {
               ref: "search",
-              modelValue: l.search,
+              modelValue: c.search,
               "onUpdate:modelValue": [
-                i[0] || (i[0] = (d) => l.search = d),
-                (d) => a.onSearch(l.search)
+                i[0] || (i[0] = (d) => c.search = d),
+                (d) => a.onSearch(c.search)
               ],
               class: "search",
               label: r.t("Search"),
               "label-visible": !0,
-              placeholder: c.i18n.search,
+              placeholder: l.i18n.search,
               "trailing-button-icon": "close",
               "trailing-button-label": r.t("Clear search"),
-              "show-trailing-button": l.search !== "",
+              "show-trailing-button": c.search !== "",
               onTrailingButtonClick: (d) => {
-                r.clearSearch(), a.onSearch(l.search);
+                r.clearSearch(), a.onSearch(c.search);
               }
             }, null, 8, ["modelValue", "label", "placeholder", "trailing-button-label", "show-trailing-button", "onTrailingButtonClick", "onUpdate:modelValue"]),
             e.createVNode(v, {
               "palette-only": "",
-              palette: c.skinTonePalette,
-              "model-value": l.currentColor.color,
+              container: o.container,
+              palette: l.skinTonePalette,
+              "model-value": c.currentColor.color,
               "onUpdate:modelValue": r.onChangeSkinTone
             }, {
               default: e.withCtx(() => [
@@ -275,8 +278,8 @@ function K(t, i, n, c, l, r) {
                 }, {
                   icon: e.withCtx(() => [
                     e.createVNode(_, {
-                      style: e.normalizeStyle({ color: l.currentColor.color }),
-                      title: l.currentColor.name,
+                      style: e.normalizeStyle({ color: c.currentColor.color }),
+                      title: c.currentColor.name,
                       size: 20
                     }, null, 8, ["style", "title"])
                   ]),
@@ -284,12 +287,12 @@ function K(t, i, n, c, l, r) {
                 }, 8, ["aria-label"])
               ]),
               _: 1
-            }, 8, ["palette", "model-value", "onUpdate:modelValue"])
+            }, 8, ["container", "palette", "model-value", "onUpdate:modelValue"])
           ])
         ]),
         _: 2
       }, [
-        n.allowUnselect && n.selectedEmoji ? {
+        o.allowUnselect && o.selectedEmoji ? {
           name: "customCategory",
           fn: e.withCtx(() => [
             e.createElementVNode("div", L, [
@@ -297,15 +300,15 @@ function K(t, i, n, c, l, r) {
             ]),
             e.createVNode(f, {
               class: "emoji-selected",
-              data: c.emojiIndex,
-              emoji: n.selectedEmoji,
+              data: l.emojiIndex,
+              emoji: o.selectedEmoji,
               native: !0,
               size: 32,
               onClick: r.unselect
             }, null, 8, ["data", "emoji", "onClick"]),
             e.createVNode(f, {
               class: "emoji-delete",
-              data: c.emojiIndex,
+              data: l.emojiIndex,
               emoji: ":x:",
               native: !0,
               size: 10,
@@ -319,5 +322,5 @@ function K(t, i, n, c, l, r) {
     _: 3
   }, 8, ["shown", "container", "onAfterShow", "onAfterHide"]);
 }
-const M = /* @__PURE__ */ C._export_sfc(D, [["render", K], ["__scopeId", "data-v-3dc1f92d"]]);
+const M = /* @__PURE__ */ C._export_sfc(D, [["render", K], ["__scopeId", "data-v-2aa4fa14"]]);
 exports.NcEmojiPicker = M;