@nextcloud/vue 8.31.0 → 8.32.0

package/dist/chunks/NcColorPicker-D-E2dT4Q.cjs

@@ -1,254 +0,0 @@
-require('../assets/NcColorPicker-CGI9ElwB.css');
-"use strict";
-const mdi = require("./mdi-BBwE-MZC.cjs");
-const core = require("@vueuse/core");
-const vueColor = require("vue-color");
-const useModelMigration = require("./useModelMigration-D5zhrNXr.cjs");
-const _l10n = require("./_l10n-DM-VRK9x.cjs");
-const GenColors = require("./GenColors-BVouTbTJ.cjs");
-const GenRandomId = require("./GenRandomId-D7iOvpZS.cjs");
-const NcButton = require("./NcButton-DOsCAjiE.cjs");
-const NcIconSvgWrapper = require("./NcIconSvgWrapper-D-aKMbf3.cjs");
-const NcPopover = require("./NcPopover-DkX3Esbr.cjs");
-const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
-_l10n.register(_l10n.t1);
-const HEX_REGEX = /^#([a-f0-9]{3}|[a-f0-9]{6})$/i;
-const _sfc_main = {
-  name: "NcColorPicker",
-  components: {
-    Chrome: vueColor.Chrome,
-    NcButton: NcButton.NcButton,
-    NcIconSvgWrapper: NcIconSvgWrapper.NcIconSvgWrapper,
-    NcPopover: NcPopover.NcPopover
-  },
-  model: {
-    prop: "modelValue",
-    event: "update:modelValue"
-  },
-  props: {
-    /**
-     * Removed in v9 - use `modelValue` (`v-model`) instead
-     *
-     * @deprecated
-     */
-    value: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * A HEX color that represents the initial value of the picker
-     */
-    modelValue: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Set to `true` to enable advanced fields including HEX, RGB, and HSL
-     */
-    advancedFields: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Selector for the popover container
-     */
-    container: {
-      type: [Boolean, String, Object, Element],
-      default: "body"
-    },
-    /**
-     * The open state of the color picker.
-     * This can be used as two-way binding together with the `update:open` event.
-     */
-    open: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Provide a custom array of colors to show.
-     * Can be either an array of string hexadecimal colors,
-     * or an array of object with a `color` property with hexadecimal color string,
-     * and a `name` property for accessibility.
-     *
-     * @type {string[] | {color: string, name: string}[]}
-     */
-    palette: {
-      type: Array,
-      default: () => [...GenColors.defaultPalette],
-      validator: (palette) => palette.every((item) => typeof item === "string" && HEX_REGEX.test(item) || typeof item === "object" && item.color && HEX_REGEX.test(item.color))
-    },
-    /**
-     * Limit selectable colors to only the provided palette
-     */
-    paletteOnly: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: [
-    /**
-     * @deprecated use the `closed` event instead.
-     */
-    "close",
-    /**
-     * Emitted when the color picker is closed and all transitions have finished.
-     */
-    "closed",
-    "submit",
-    "update:open",
-    /**
-     * Emits a hexadecimal string e.g. '#ffffff'
-     */
-    "update:modelValue",
-    /**
-     * Same as update:modelValue for Vue 2 compatibility
-     */
-    "update:model-value",
-    /**
-     * Same as update:modelValue for Vue 2 compatibility.
-     *
-     * @deprecated Removed in v9 - use `update:modelValue` (`v-model`) instead
-     */
-    "input",
-    /**
-     * @deprecated Removed in v9 - use `update:modelValue` (`v-model`) instead
-     */
-    "update:value"
-  ],
-  setup(props, { emit }) {
-    const model = useModelMigration.useModelMigration("value", "update:value", true);
-    const modelOpen = core.useVModel(props, "open", emit);
-    return {
-      mdiArrowLeft: mdi.mdiArrowLeft,
-      mdiCheck: mdi.mdiCheck,
-      mdiDotsHorizontal: mdi.mdiDotsHorizontal,
-      model,
-      modelOpen
-    };
-  },
-  data() {
-    return {
-      currentColor: this.model,
-      advanced: false,
-      ariaBack: _l10n.t("Back"),
-      ariaMore: _l10n.t("More options")
-    };
-  },
-  computed: {
-    normalizedPalette() {
-      return this.palette.map((item) => ({
-        color: typeof item === "object" ? item.color : item,
-        name: typeof item === "object" && item.name ? item.name : _l10n.t("A color with a HEX value {hex}", { hex: item.color })
-      }));
-    },
-    uid() {
-      return GenRandomId.GenRandomId();
-    },
-    contrastColor() {
-      const black = "#000000";
-      const white = "#FFFFFF";
-      return this.calculateLuma(this.currentColor) > 0.5 ? black : white;
-    }
-  },
-  watch: {
-    model(color) {
-      this.currentColor = color;
-    }
-  },
-  methods: {
-    t: _l10n.t,
-    /**
-     * Submit a picked colour and close picker
-     *
-     * @param {Function} hideCallback callback to close popover
-     */
-    handleConfirm(hideCallback) {
-      this.$emit("submit", this.currentColor);
-      hideCallback();
-      this.advanced = false;
-    },
-    handleClose() {
-      this.$emit("close");
-      this.$emit("closed");
-      this.$emit("update:open", false);
-    },
-    /**
-     * Inner navigations
-     */
-    handleBack() {
-      this.advanced = false;
-    },
-    handleMoreSettings() {
-      this.advanced = true;
-    },
-    /**
-     * Pick a colour
-     *
-     * @param {string} color the picked color
-     */
-    pickColor(color) {
-      if (typeof color !== "string") {
-        color = this.currentColor.hex;
-      }
-      this.currentColor = color;
-      this.model = color;
-      this.$emit("input", color);
-    },
-    /**
-     * Calculate luminance of provided hex color
-     *
-     * @param {string} color the hex color
-     */
-    calculateLuma(color) {
-      const [red, green, blue] = this.hexToRGB(color);
-      return (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255;
-    },
-    /**
-     * Convert hex color to RGB
-     *
-     * @param {string} hex the hex color
-     * @return {[number, number, number]}
-     */
-    hexToRGB(hex) {
-      const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-      return result ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)] : [0, 0, 0];
-    }
-  }
-};
-var _sfc_render = function render() {
-  var _vm = this, _c = _vm._self._c;
-  return _c("NcPopover", _vm._g(_vm._b({ attrs: { "shown": _vm.modelOpen, "container": _vm.container, "popup-role": "dialog" }, on: { "update:shown": function($event) {
-    _vm.modelOpen = $event;
-  }, "apply-hide": _vm.handleClose }, scopedSlots: _vm._u([{ key: "trigger", fn: function(slotProps) {
-    return [_vm._t("default", null, null, slotProps)];
-  } }, { key: "default", fn: function(slotProps) {
-    return [_c("div", { staticClass: "color-picker", class: { "color-picker--advanced-fields": _vm.advanced && _vm.advancedFields }, attrs: { "role": "dialog", "aria-modal": "true", "aria-label": _vm.t("Color picker") } }, [_c("Transition", { attrs: { "name": "slide", "mode": "out-in" } }, [!_vm.advanced ? _c("div", { staticClass: "color-picker__simple" }, _vm._l(_vm.normalizedPalette, function({ color, name }, index) {
-      return _c("label", { key: index, staticClass: "color-picker__simple-color-circle", class: { "color-picker__simple-color-circle--active": color === _vm.currentColor }, style: {
-        backgroundColor: color,
-        color: _vm.contrastColor
-      } }, [color === _vm.currentColor ? _c("NcIconSvgWrapper", { attrs: { "path": _vm.mdiCheck } }) : _vm._e(), _c("input", { staticClass: "hidden-visually", attrs: { "type": "radio", "aria-label": name, "name": `color-picker-${_vm.uid}` }, domProps: { "checked": color === _vm.currentColor }, on: { "click": function($event) {
-        return _vm.pickColor(color);
-      } } })], 1);
-    }), 0) : _c("Chrome", { staticClass: "color-picker__advanced", attrs: { "disable-alpha": true, "disable-fields": !_vm.advancedFields }, on: { "input": _vm.pickColor }, model: { value: _vm.currentColor, callback: function($$v) {
-      _vm.currentColor = $$v;
-    }, expression: "currentColor" } })], 1), !_vm.paletteOnly ? _c("div", { staticClass: "color-picker__navigation" }, [_vm.advanced ? _c("NcButton", { attrs: { "aria-label": _vm.ariaBack, "variant": "tertiary" }, on: { "click": _vm.handleBack }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-      return [_c("NcIconSvgWrapper", { attrs: { "directional": "", "path": _vm.mdiArrowLeft } })];
-    }, proxy: true }], null, true) }) : _c("NcButton", { attrs: { "aria-label": _vm.ariaMore, "variant": "tertiary" }, on: { "click": _vm.handleMoreSettings }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-      return [_c("NcIconSvgWrapper", { attrs: { "path": _vm.mdiDotsHorizontal } })];
-    }, proxy: true }], null, true) }), _c("NcButton", { attrs: { "variant": "primary" }, on: { "click": function($event) {
-      return _vm.handleConfirm(slotProps.hide);
-    } } }, [_vm._v(" " + _vm._s(_vm.t("Choose")) + " ")])], 1) : _vm._e()], 1)];
-  } }], null, true) }, "NcPopover", _vm.$attrs, false), _vm.$listeners));
-};
-var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  "5fe0f834"
-);
-const NcColorPicker = __component__.exports;
-exports.NcColorPicker = NcColorPicker;
-//# sourceMappingURL=NcColorPicker-D-E2dT4Q.cjs.map

package/dist/chunks/NcColorPicker-D-E2dT4Q.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcColorPicker-D-E2dT4Q.cjs","sources":["../../src/components/NcColorPicker/NcColorPicker.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### General description\n\nThis component allows the user to choose a color. It consists of 2\nactual pickers:\n\n- One simple picker with a predefined palette of colors;\n- One more advanced picker that provides the full color spectrum;\n\n### Usage\n\n* Using v-model and passing in an HTML element that will be treated as a trigger:\n\n```vue\n<template>\n\t<div class=\"container0\">\n\t\t<NcColorPicker v-model=\"color\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcColorPicker>\n\t\t<NcColorPicker v-model=\"color\" :palette=\"customPalette\">\n\t\t\t<NcButton> Click Me for a custom palette </NcButton>\n\t\t</NcColorPicker>\n\t\t<div :style=\"{'background-color': color}\" class=\"color0\" />\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tcolor: '#0082c9',\n\t\t\tcustomPalette: [\n\t\t\t\t'#E40303',\n\t\t\t\t'#FF8C00',\n\t\t\t\t'#FFED00',\n\t\t\t\t'#008026',\n\t\t\t\t'#24408E',\n\t\t\t\t'#732982',\n\t\t\t\t'#5BCEFA',\n\t\t\t\t'#F5A9B8',\n\t\t\t\t'#FFFFFF',\n\t\t\t\t'#F5A9B8',\n\t\t\t\t'#5BCEFA',\n\t\t\t],\n\t\t}\n\t}\n}\n</script>\n<style>\n.container0 {\n\tdisplay: flex;\n\tgap: 20px;\n}\n\n.color0 {\n\twidth: 100px;\n\theight: 34px;\n\tborder-radius: 6px;\n}\n</style>\n```\n\n* Using v-bind for both color and open state and emitting an event that updates the color\n\n```vue\n<template>\n\t<div class=\"container1\">\n\t\t<NcButton @click=\"open = !open\"> Click Me </NcButton>\n\t\t<NcColorPicker v-model=\"color\" :open.sync=\"open\" v-slot=\"{ attrs }\">\n\t\t\t<div v-bind=\"attrs\" :style=\"{'background-color': color}\" class=\"color1\" />\n\t\t</NcColorPicker>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tcolor: '#0082c9',\n\t\t\topen: false\n\t\t}\n\t},\n}\n</script>\n<style>\n.container1 {\n\tdisplay: flex;\n\tgap: 20px;\n}\n\n.color1 {\n\twidth: 100px;\n\theight: 34px;\n\tborder-radius: 6px;\n}\n</style>\n```\n\n* Using advanced fields including HEX, RGB, and HSL:\n\n```vue\n<template>\n\t<div class=\"container0\">\n\t\t<NcColorPicker v-model=\"color\"\n\t\t\t:advanced-fields=\"true\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcColorPicker>\n\t\t<div :style=\"{'background-color': color}\" class=\"color0\" />\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tcolor: '#0082c9'\n\t\t}\n\t}\n}\n</script>\n<style>\n.container0 {\n\tdisplay: flex;\n\tgap: 20px;\n}\n\n.color0 {\n\twidth: 100px;\n\theight: 34px;\n\tborder-radius: 6px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<NcPopover\n\t\t:shown.sync=\"modelOpen\"\n\t\t:container=\"container\"\n\t\tpopup-role=\"dialog\"\n\t\tv-bind=\"$attrs\"\n\t\tv-on=\"$listeners\"\n\t\t@apply-hide=\"handleClose\">\n\t\t<template #trigger=\"slotProps\">\n\t\t\t<slot v-bind=\"slotProps\" />\n\t\t</template>\n\t\t<template #default=\"slotProps\">\n\t\t\t<div\n\t\t\t\trole=\"dialog\"\n\t\t\t\tclass=\"color-picker\"\n\t\t\t\taria-modal=\"true\"\n\t\t\t\t:aria-label=\"t('Color picker')\"\n\t\t\t\t:class=\"{ 'color-picker--advanced-fields': advanced && advancedFields }\">\n\t\t\t\t<Transition name=\"slide\" mode=\"out-in\">\n\t\t\t\t\t<div v-if=\"!advanced\" class=\"color-picker__simple\">\n\t\t\t\t\t\t<label\n\t\t\t\t\t\t\tv-for=\"({ color, name }, index) in normalizedPalette\"\n\t\t\t\t\t\t\t:key=\"index\"\n\t\t\t\t\t\t\tclass=\"color-picker__simple-color-circle\"\n\t\t\t\t\t\t\t:class=\"{ 'color-picker__simple-color-circle--active': color === currentColor }\"\n\t\t\t\t\t\t\t:style=\"{\n\t\t\t\t\t\t\t\tbackgroundColor: color,\n\t\t\t\t\t\t\t\tcolor: contrastColor,\n\t\t\t\t\t\t\t}\">\n\t\t\t\t\t\t\t<NcIconSvgWrapper v-if=\"color === currentColor\" :path=\"mdiCheck\" />\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\t\tclass=\"hidden-visually\"\n\t\t\t\t\t\t\t\t:aria-label=\"name\"\n\t\t\t\t\t\t\t\t:name=\"`color-picker-${uid}`\"\n\t\t\t\t\t\t\t\t:checked=\"color === currentColor\"\n\t\t\t\t\t\t\t\t@click=\"pickColor(color)\">\n\t\t\t\t\t\t</label>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Chrome\n\t\t\t\t\t\tv-else\n\t\t\t\t\t\tv-model=\"currentColor\"\n\t\t\t\t\t\tclass=\"color-picker__advanced\"\n\t\t\t\t\t\t:disable-alpha=\"true\"\n\t\t\t\t\t\t:disable-fields=\"!advancedFields\"\n\t\t\t\t\t\t@input=\"pickColor\" />\n\t\t\t\t</Transition>\n\t\t\t\t<div v-if=\"!paletteOnly\" class=\"color-picker__navigation\">\n\t\t\t\t\t<NcButton\n\t\t\t\t\t\tv-if=\"advanced\"\n\t\t\t\t\t\t:aria-label=\"ariaBack\"\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t@click=\"handleBack\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper directional :path=\"mdiArrowLeft\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcButton>\n\t\t\t\t\t<NcButton\n\t\t\t\t\t\tv-else\n\t\t\t\t\t\t:aria-label=\"ariaMore\"\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t@click=\"handleMoreSettings\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiDotsHorizontal\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcButton>\n\t\t\t\t\t<NcButton\n\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t@click=\"handleConfirm(slotProps.hide)\">\n\t\t\t\t\t\t{{ t('Choose') }}\n\t\t\t\t\t</NcButton>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</template>\n\t</NcPopover>\n</template>\n\n<script>\nimport { mdiArrowLeft, mdiCheck, mdiDotsHorizontal } from '@mdi/js'\nimport { useVModel } from '@vueuse/core'\nimport { Chrome } from 'vue-color'\nimport { useModelMigration } from '../../composables/useModelMigration.ts'\nimport { t } from '../../l10n.js'\nimport { defaultPalette } from '../../utils/GenColors.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport NcButton from '../NcButton/index.js'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\nimport NcPopover from '../NcPopover/index.js'\n\nconst HEX_REGEX = /^#([a-f0-9]{3}|[a-f0-9]{6})$/i\n\nexport default {\n\tname: 'NcColorPicker',\n\n\tcomponents: {\n\t\tChrome,\n\t\tNcButton,\n\t\tNcIconSvgWrapper,\n\t\tNcPopover,\n\t},\n\n\tmodel: {\n\t\tprop: 'modelValue',\n\t\tevent: 'update:modelValue',\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Removed in v9 - use `modelValue` (`v-model`) instead\n\t\t *\n\t\t * @deprecated\n\t\t */\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * A HEX color that represents the initial value of the picker\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Set to `true` to enable advanced fields including HEX, RGB, and HSL\n\t\t */\n\t\tadvancedFields: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\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\n\t\t/**\n\t\t * The open state of the color picker.\n\t\t * This can be used as two-way binding together with the `update:open` event.\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Provide a custom array of colors to show.\n\t\t * Can be either an array of string hexadecimal colors,\n\t\t * or an array of object with a `color` property with hexadecimal color string,\n\t\t * and a `name` property for accessibility.\n\t\t *\n\t\t * @type {string[] | {color: string, name: string}[]}\n\t\t */\n\t\tpalette: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [...defaultPalette],\n\t\t\tvalidator: (palette) => palette.every((item) => (typeof item === 'string' && HEX_REGEX.test(item))\n\t\t\t\t|| (typeof item === 'object' && item.color && HEX_REGEX.test(item.color))),\n\t\t},\n\n\t\t/**\n\t\t * Limit selectable colors to only the provided palette\n\t\t */\n\t\tpaletteOnly: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t/**\n\t\t * @deprecated use the `closed` event instead.\n\t\t */\n\t\t'close',\n\t\t/**\n\t\t * Emitted when the color picker is closed and all transitions have finished.\n\t\t */\n\t\t'closed',\n\t\t'submit',\n\t\t'update:open',\n\t\t/**\n\t\t * Emits a hexadecimal string e.g. '#ffffff'\n\t\t */\n\t\t'update:modelValue',\n\t\t/**\n\t\t * Same as update:modelValue for Vue 2 compatibility\n\t\t */\n\t\t'update:model-value',\n\t\t/**\n\t\t * Same as update:modelValue for Vue 2 compatibility.\n\t\t *\n\t\t * @deprecated Removed in v9 - use `update:modelValue` (`v-model`) instead\n\t\t */\n\t\t'input',\n\t\t/**\n\t\t * @deprecated Removed in v9 - use `update:modelValue` (`v-model`) instead\n\t\t */\n\t\t'update:value',\n\t],\n\n\tsetup(props, { emit }) {\n\t\tconst model = useModelMigration('value', 'update:value', true)\n\t\tconst modelOpen = useVModel(props, 'open', emit)\n\n\t\treturn {\n\t\t\tmdiArrowLeft,\n\t\t\tmdiCheck,\n\t\t\tmdiDotsHorizontal,\n\t\t\tmodel,\n\t\t\tmodelOpen,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tcurrentColor: this.model,\n\t\t\tadvanced: false,\n\t\t\tariaBack: t('Back'),\n\t\t\tariaMore: t('More options'),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tnormalizedPalette() {\n\t\t\treturn this.palette.map((item) => ({\n\t\t\t\tcolor: typeof item === 'object' ? item.color : item,\n\t\t\t\tname: typeof item === 'object' && item.name\n\t\t\t\t\t? item.name\n\t\t\t\t\t: t('A color with a HEX value {hex}', { hex: item.color }),\n\t\t\t}))\n\t\t},\n\n\t\tuid() {\n\t\t\treturn GenRandomId()\n\t\t},\n\n\t\tcontrastColor() {\n\t\t\tconst black = '#000000'\n\t\t\tconst white = '#FFFFFF'\n\t\t\treturn (this.calculateLuma(this.currentColor) > 0.5) ? black : white\n\t\t},\n\t},\n\n\twatch: {\n\t\tmodel(color) {\n\t\t\tthis.currentColor = color\n\t\t},\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\t/**\n\t\t * Submit a picked colour and close picker\n\t\t *\n\t\t * @param {Function} hideCallback callback to close popover\n\t\t */\n\t\thandleConfirm(hideCallback) {\n\t\t\t/**\n\t\t\t * Emits a hexadecimal string e.g. '#ffffff'\n\t\t\t */\n\t\t\tthis.$emit('submit', this.currentColor)\n\t\t\thideCallback()\n\n\t\t\tthis.advanced = false\n\t\t},\n\n\t\thandleClose() {\n\t\t\t/**\n\t\t\t * Emitted after picker close.\n\t\t\t *\n\t\t\t * @deprecated removed in v9 - use the `closed` event instead\n\t\t\t */\n\t\t\tthis.$emit('close')\n\t\t\t/**\n\t\t\t * Emitted after the picker is closed and all transitions have finished.\n\t\t\t */\n\t\t\tthis.$emit('closed')\n\t\t\t/**\n\t\t\t * @deprecated use the 'close' event instead\n\t\t\t */\n\t\t\tthis.$emit('update:open', false)\n\t\t},\n\n\t\t/**\n\t\t * Inner navigations\n\t\t */\n\t\thandleBack() {\n\t\t\tthis.advanced = false\n\t\t},\n\n\t\thandleMoreSettings() {\n\t\t\tthis.advanced = true\n\t\t},\n\n\t\t/**\n\t\t * Pick a colour\n\t\t *\n\t\t * @param {string} color the picked color\n\t\t */\n\t\tpickColor(color) {\n\t\t\tif (typeof color !== 'string') {\n\t\t\t\tcolor = this.currentColor.hex\n\t\t\t}\n\t\t\tthis.currentColor = color\n\n\t\t\tthis.model = color\n\n\t\t\t/**\n\t\t\t * Emits a hexadecimal string e.g. '#ffffff'\n\t\t\t */\n\t\t\tthis.$emit('input', color)\n\t\t},\n\n\t\t/**\n\t\t * Calculate luminance of provided hex color\n\t\t *\n\t\t * @param {string} color the hex color\n\t\t */\n\t\tcalculateLuma(color) {\n\t\t\tconst [red, green, blue] = this.hexToRGB(color)\n\t\t\treturn (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255\n\t\t},\n\n\t\t/**\n\t\t * Convert hex color to RGB\n\t\t *\n\t\t * @param {string} hex the hex color\n\t\t * @return {[number, number, number]}\n\t\t */\n\t\thexToRGB(hex) {\n\t\t\tconst result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex)\n\t\t\treturn result\n\t\t\t\t? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)]\n\t\t\t\t: [0, 0, 0]\n\t\t},\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n.color-picker {\n\tdisplay: flex;\n\toverflow: hidden;\n\talign-content: flex-end;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\tbox-sizing: content-box !important;\n\twidth: 176px;\n\tpadding: 8px;\n\tborder-radius: 3px;\n\n\t&--advanced-fields {\n\t\twidth: 264px;\n\t}\n\n\t&__simple {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat(auto-fit, var(--default-clickable-area));\n\t\tgrid-auto-rows: var(--default-clickable-area);\n\n\t\t&-color-circle {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: calc(var(--default-clickable-area) - 10px);\n\t\t\theight: calc(var(--default-clickable-area) - 10px);\n\t\t\tmin-height: calc(var(--default-clickable-area) - 10px);\n\t\t\tmargin: auto;\n\t\t\tpadding: 0;\n\t\t\tcolor: white;\n\t\t\tborder: 1px solid rgba(0, 0, 0, 0.25);\n\t\t\tborder-radius: 50%;\n\t\t\tfont-size: 16px;\n\t\t\t&:focus-within {\n\t\t\t\toutline: 2px solid var(--color-main-text);\n\t\t\t}\n\t\t\t&:hover {\n\t\t\t\topacity: .6;\n\t\t\t}\n\t\t\t&--active {\n\t\t\t\twidth: calc(var(--default-clickable-area) - 6px);\n\t\t\t\theight: calc(var(--default-clickable-area) - 6px);\n\t\t\t\tmin-height: calc(var(--default-clickable-area) - 6px);\n\t\t\t\ttransition: all 100ms ease-in-out;\n\t\t\t\topacity: 1 !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__advanced {\n\t\tbox-shadow: none !important;\n\t}\n\n\t&__navigation {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: space-between;\n\t\tmargin-top: 10px;\n\t}\n}\n\n:deep() .vc {\n\t&-chrome {\n\t\twidth: unset;\n\t\tbackground-color: var(--color-main-background);\n\n\t\t&-color-wrap {\n\t\t\twidth: 30px;\n\t\t\theight: 30px;\n\t\t}\n\n\t\t&-active-color {\n\t\t\tborder-radius: 17px;\n\t\t}\n\n\t\t&-body {\n\t\t\tpadding: 14px 0 0 0;\n\t\t\tbackground-color: var(--color-main-background);\n\n\t\t\t.vc-input__input {\n\t\t\t\t--input-border-radius: var(--border-radius-element, var(--border-radius-large));\n\t\t\t\t--input-border-width-offset: calc(var(--border-width-input-focused, 2px) - var(--border-width-input, 2px));\n\t\t\t\twidth: 100%;\n\t\t\t\theight: var(--default-clickable-area);\n\t\t\t\tmargin: 0;\n\t\t\t\tpadding-inline: calc(var(--border-radius-large) + var(--input-border-width-offset));\n\t\t\t\tpadding-block: var(--input-border-width-offset);\n\t\t\t\tborder: var(--border-width-input, 2px) solid var(--color-border-maxcontrast);\n\t\t\t\tborder-radius: var(--input-border-radius);\n\t\t\t\tfont-size: var(--default-font-size);\n\t\t\t\tcolor: var(--color-main-text);\n\t\t\t\tbox-shadow: none;\n\n\t\t\t\t&:active:not([disabled]),\n\t\t\t\t&:hover:not([disabled]),\n\t\t\t\t&:focus:not([disabled]) {\n\t\t\t\t\t// Reset padding offset when focused\n\t\t\t\t\t--input-border-width-offset: 0px;\n\t\t\t\t\tborder-color: var(--color-main-text);\n\t\t\t\t\tborder-width: var(--border-width-input-focused, 2px);\n\t\t\t\t\tbox-shadow: 0 0 0 2px var(--color-main-background) !important;\n\n\t\t\t\t\t& + .vc-input__label {\n\t\t\t\t\t\tcolor: var(--color-main-text);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.vc-input__label {\n\t\t\t\tposition: absolute;\n\t\t\t\tinset-inline: var(--border-width-input-focused, 2px);\n\t\t\t\tinset-block-start: calc(-1.5 * var(--font-size-small, 13px) / 2);\n\t\t\t\tmax-width: fit-content;\n\t\t\t\tmargin-inline: calc(var(--border-radius-large) - var(--default-grid-baseline));\n\t\t\t\tmargin-block: 0;\n\t\t\t\tpadding-inline: var(--default-grid-baseline);\n\t\t\t\tfont-family: var(--font-face);\n\t\t\t\tfont-size: var(--font-size-small, 13px);\n\t\t\t\tline-height: 1.5;\n\t\t\t\tfont-weight: 500;\n\t\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\t\tbackground-color: var(--color-main-background);\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\n\t\t&-toggle-btn {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t\twidth: var(--default-clickable-area);\n\t\t\theight: var(--default-clickable-area);\n\t\t\tmargin-left: 6px;\n\t\t\tfilter: var(--background-invert-if-dark);\n\t\t}\n\n\t\t&-toggle-icon {\n\t\t\twidth: 24px;\n\t\t\theight: 24px;\n\t\t\tmargin: 0;\n\t\t}\n\n\t\t&-toggle-icon-highlight {\n\t\t\twidth: var(--default-clickable-area);\n\t\t\theight: var(--default-clickable-area);\n\t\t\tinset: 0;\n\t\t}\n\n\t\t&-saturation {\n\t\t\t&-wrap {\n\t\t\t\tborder-radius: 3px;\n\t\t\t}\n\n\t\t\t&-circle {\n\t\t\t\twidth: 20px;\n\t\t\t\theight: 20px;\n\t\t\t}\n\t\t}\n\t}\n}\n\n.slide {\n\t&-enter {\n\t\ttransform: translateX(-50%);\n\t\topacity: 0;\n\t}\n\t&-enter-to {\n\t\ttransform: translateX(0);\n\t\topacity: 1;\n\t}\n\t&-leave {\n\t\ttransform: translateX(0);\n\t\topacity: 1;\n\t}\n\t&-leave-to {\n\t\ttransform: translateX(-50%);\n\t\topacity: 0;\n\t}\n\t&-enter-active,\n\t&-leave-active {\n\t\ttransition: all 50ms ease-in-out;\n\t}\n}\n\n</style>\n"],"names":["Chrome","NcButton","NcIconSvgWrapper","NcPopover","defaultPalette","useModelMigration","useVModel","mdiArrowLeft","mdiCheck","mdiDotsHorizontal","t","GenRandomId"],"mappings":"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"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"NcEmojiPicker-B2SLfIBu.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\t:shown.sync=\"open\"\n\t\t:container=\"container\"\n\t\tpopup-role=\"dialog\"\n\t\tv-bind=\"$attrs\"\n\t\t:focus-trap=\"false /* Handled manually to remove emoji buttons from TAB sequence */\"\n\t\tv-on=\"$listeners\"\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=\"i18n\"\n\t\t\t\t:native=\"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=\"showPreview\"\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.native.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\tclass=\"search\"\n\t\t\t\t\t\t\t:value.sync=\"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\"\n\t\t\t\t\t\t\t@trailing-button-click=\"clearSearch(); onSearch('');\"\n\t\t\t\t\t\t\t@update: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=\"container\"\n\t\t\t\t\t\t\t:palette=\"skinTonePalette\"\n\t\t\t\t\t\t\t:value=\"currentColor.color\"\n\t\t\t\t\t\t\t@update: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\t:native=\"true\"\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\t:native=\"true\"\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 { Emoji, EmojiIndex, Picker } from 'emoji-mart-vue-fast'\nimport data from 'emoji-mart-vue-fast/data/all.json'\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.js'\nimport { Color } from '../../utils/GenColors.js'\nimport NcButton from '../NcButton/index.js'\nimport NcPopover from '../NcPopover/index.js'\nimport NcTextField from '../NcTextField/index.js'\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\tEmoji,\n\t\tIconCircle,\n\t\tNcButton,\n\t\tNcColorPicker,\n\t\tNcPopover,\n\t\tNcTextField,\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\t// eslint-disable-next-line vue/no-boolean-default\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'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 *\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('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\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\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, var(--border-radius-pill));\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-left: -21px;\n\tmargin-top: -3px;\n}\n</style>\n"],"names":["_sfc_main"],"mappings":";;;;;;;;;;;;AAoBA,MAAAA,cAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,OAAA;AAAA,IACA,OAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;ACsLA,IAAA;AAEA,MAAA,OAAA;AAAA,EACA,QAAA,EAAA,cAAA;AAAA,EACA,UAAA,EAAA,gBAAA;AAAA,EACA,YAAA;AAAA,IACA,QAAA,EAAA,gBAAA;AAAA,IACA,QAAA,EAAA,iBAAA;AAAA,IACA,SAAA,EAAA,mBAAA;AAAA,IACA,QAAA,EAAA,eAAA;AAAA,IACA,QAAA,EAAA,kBAAA;AAAA,IACA,OAAA,EAAA,cAAA;AAAA,IACA,UAAA,EAAA,YAAA;AAAA,IACA,QAAA,EAAA,iBAAA;AAAA,IACA,SAAA,EAAA,SAAA;AAAA,IACA,SAAA,EAAA,SAAA;AAAA,IACA,OAAA,EAAA,OAAA;AAAA,IACA,QAAA,EAAA,QAAA;AAAA,EACA;AACA;AAEA,MAAA,kBAAA;AAAA,EACA,IAAA,MAAA,KAAA,KAAA,IAAA,EAAA,oBAAA,CAAA;AAAA,EACA,IAAA,MAAA,KAAA,KAAA,KAAA,EAAA,iBAAA,CAAA;AAAA,EACA,IAAA,MAAA,KAAA,KAAA,KAAA,EAAA,wBAAA,CAAA;AAAA,EACA,IAAA,MAAA,KAAA,KAAA,IAAA,EAAA,kBAAA,CAAA;AAAA,EACA,IAAA,MAAA,KAAA,KAAA,IAAA,EAAA,uBAAA,CAAA;AAAA,EACA,IAAA,MAAA,IAAA,IAAA,IAAA,EAAA,gBAAA,CAAA;AACA;AAEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,sBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,EAAA,eAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA;AAAA;AAAA,MAEA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA,CAAA,SAAA,QAAA,QAAA,OAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA;AAEA,QAAA,CAAA,YAAA;AACA,mBAAA,IAAA,WAAA,IAAA;AAAA,IACA;AAEA,WAAA;AAAA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,UAAA,kBAAA,mBAAA;AAEA,WAAA;AAAA;AAAA;AAAA;AAAA,MAIA,cAAA,gBAAA,kBAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMA;AAAA,MACA,QAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,SAAA;AACA,aAAA,KAAA,cAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAGA,wBAAA,MAAA,KAAA,IAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,WAAA,SAAA;AACA,WAAA,MAAA,OAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,iBAAA,OAAA;AACA,YAAA,QAAA,KAAA,gBAAA,UAAA,CAAA,SAAA,KAAA,MAAA,kBAAA,MAAA,YAAA,CAAA;AACA,UAAA,QAAA,IAAA;AACA,aAAA,kBAAA,QAAA;AACA,aAAA,eAAA,KAAA,gBAAA,KAAA;AACA,2BAAA,KAAA,eAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,OAAA,aAAA;AAIA,WAAA,MAAA,UAAA,YAAA,MAAA;AAKA,WAAA,MAAA,eAAA,WAAA;AAEA,UAAA,KAAA,eAAA;AACA,aAAA,OAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,WAAA;AACA,WAAA,MAAA,UAAA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,WAAA,MAAA,OAAA,MAAA;AAAA,IACA;AAAA,IAEA,YAAA;AAGA,UAAA,CAAA,SAAA,iBAAA,KAAA,MAAA,OAAA,IAAA,SAAA,SAAA,aAAA,KAAA,CAAA,YAAA,SAAA,aAAA,GAAA;AACA,aAAA,MAAA,QAAA,IAAA,cAAA,yBAAA,GAAA,MAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,kCAAA,OAAA;AACA,YAAA,UAAA,MAAA;AACA,YAAA,YAAA,MAAA,KAAA,KAAA,MAAA,OAAA,IAAA,iBAAA,sCAAA,CAAA;AACA,UAAA,CAAA,MAAA,UAAA;AACA,cAAA,WAAA,UAAA,KAAA,CAAA,SAAA,QAAA,wBAAA,IAAA,IAAA,KAAA,2BAAA,KAAA,UAAA,CAAA;AACA,iBAAA,MAAA;AAAA,MACA,OAAA;AACA,cAAA,WAAA,UAAA,SAAA,CAAA,SAAA,QAAA,wBAAA,IAAA,IAAA,KAAA,2BAAA,KAAA,UAAA,GAAA,EAAA;AACA,iBAAA,MAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,MAAA,oCAAA,qBAAA,OAAA;AAIA,WAAA,MAAA,OAAA,mBAAA,EAAA,KAAA;AAGA,YAAA,KAAA,UAAA;AAQA,YAAA,gBAAA,KAAA,MAAA,OAAA,IAAA,cAAA,4BAAA;AACA,qBAAA,eAAA;AAAA,QACA,OAAA;AAAA,QACA,QAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}

package/dist/chunks/NcEmojiPicker-q_n1Rd8U.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcEmojiPicker-q_n1Rd8U.cjs","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\t:shown.sync=\"open\"\n\t\t:container=\"container\"\n\t\tpopup-role=\"dialog\"\n\t\tv-bind=\"$attrs\"\n\t\t:focus-trap=\"false /* Handled manually to remove emoji buttons from TAB sequence */\"\n\t\tv-on=\"$listeners\"\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=\"i18n\"\n\t\t\t\t:native=\"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=\"showPreview\"\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.native.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\tclass=\"search\"\n\t\t\t\t\t\t\t:value.sync=\"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\"\n\t\t\t\t\t\t\t@trailing-button-click=\"clearSearch(); onSearch('');\"\n\t\t\t\t\t\t\t@update: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=\"container\"\n\t\t\t\t\t\t\t:palette=\"skinTonePalette\"\n\t\t\t\t\t\t\t:value=\"currentColor.color\"\n\t\t\t\t\t\t\t@update: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\t:native=\"true\"\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\t:native=\"true\"\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 { Emoji, EmojiIndex, Picker } from 'emoji-mart-vue-fast'\nimport data from 'emoji-mart-vue-fast/data/all.json'\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.js'\nimport { Color } from '../../utils/GenColors.js'\nimport NcButton from '../NcButton/index.js'\nimport NcPopover from '../NcPopover/index.js'\nimport NcTextField from '../NcTextField/index.js'\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\tEmoji,\n\t\tIconCircle,\n\t\tNcButton,\n\t\tNcColorPicker,\n\t\tNcPopover,\n\t\tNcTextField,\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\t// eslint-disable-next-line vue/no-boolean-default\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'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 *\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('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\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\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, var(--border-radius-pill));\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-left: -21px;\n\tmargin-top: -3px;\n}\n</style>\n"],"names":["_sfc_main","t","Color","Emoji","NcButton","NcColorPicker","NcPopover","NcTextField","Picker","EmojiIndex","data","getCurrentSkinTone","useTrapStackControl","setCurrentSkinTone","isFocusable"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/chunks/NcRelatedResourcesPanel-jHQ2bRko.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcRelatedResourcesPanel-jHQ2bRko.cjs","sources":["../../src/components/NcRelatedResourcesPanel/NcResource.vue","../../node_modules/vue-material-design-icons/AccountGroup.vue","../../node_modules/vue-material-design-icons/OpenInNew.vue","../../src/components/NcRelatedResourcesPanel/NcTeamResources.vue","../../src/components/NcRelatedResourcesPanel/NcRelatedResourcesPanel.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<li class=\"resource\">\n\t\t<NcButton\n\t\t\tclass=\"resource__button\"\n\t\t\t:aria-label=\"labelTranslated\"\n\t\t\t:to=\"route\"\n\t\t\t:href=\"route ? null : url\"\n\t\t\tvariant=\"tertiary\">\n\t\t\t<template #icon>\n\t\t\t\t<div class=\"resource__icon\">\n\t\t\t\t\t<img :src=\"icon\">\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t{{ name }}\n\t\t</NcButton>\n\t</li>\n</template>\n\n<script>\nimport { t } from '../../l10n.js'\nimport NcButton from '../NcButton/index.js'\nimport { getRoute } from '../NcRichText/autolink.js'\n\nexport default {\n\tname: 'NcResource',\n\n\tcomponents: {\n\t\tNcButton,\n\t},\n\n\t/* eslint vue/require-prop-comment: warn -- TODO: Add a proper doc block about what this props do */\n\tprops: {\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\turl: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tlabelTranslated: t('Open link to \"{resourceName}\"', { resourceName: this.name }),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\troute() {\n\t\t\treturn getRoute(this.$router, this.url)\n\t\t},\n\t},\n\n\tmethods: {\n\t\tt,\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.resource {\n\tdisplay: flex;\n\talign-items: center;\n\theight: var(--default-clickable-area);\n\n\t// Override default NcButton styles\n\t&__button {\n\t\twidth: 100% !important;\n\t\tjustify-content: flex-start !important;\n\t\tpadding: 0 !important;\n\n\t\t&:deep {\n\t\t\t.button-vue__wrapper {\n\t\t\t\tjustify-content: flex-start !important;\n\n\t\t\t\t.button-vue__text {\n\t\t\t\t\tfont-weight: normal !important;\n\t\t\t\t\tmargin-left: 2px !important;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t&__icon {\n\t\twidth: 32px;\n\t\theight: 32px;\n\t\tbackground-color: var(--color-text-maxcontrast);\n\t\tborder-radius: 50%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\n\t\timg {\n\t\t\twidth: 16px;\n\t\t\theight: 16px;\n\t\t\tfilter: var(--background-invert-if-dark);\n\t\t}\n\t}\n}\n</style>\n","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon account-group-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,5.5A3.5,3.5 0 0,1 15.5,9A3.5,3.5 0 0,1 12,12.5A3.5,3.5 0 0,1 8.5,9A3.5,3.5 0 0,1 12,5.5M5,8C5.56,8 6.08,8.15 6.53,8.42C6.38,9.85 6.8,11.27 7.66,12.38C7.16,13.34 6.16,14 5,14A3,3 0 0,1 2,11A3,3 0 0,1 5,8M19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14C17.84,14 16.84,13.34 16.34,12.38C17.2,11.27 17.62,9.85 17.47,8.42C17.92,8.15 18.44,8 19,8M5.5,18.25C5.5,16.18 8.41,14.5 12,14.5C15.59,14.5 18.5,16.18 18.5,18.25V20H5.5V18.25M0,20V18.5C0,17.11 1.89,15.94 4.45,15.6C3.86,16.28 3.5,17.22 3.5,18.25V20H0M24,20H20.5V18.25C20.5,17.22 20.14,16.28 19.55,15.6C22.11,15.94 24,17.11 24,18.5V20Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"AccountGroupIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon open-in-new-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=\"M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"OpenInNewIcon\",\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: 2023 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n<template>\n\t<div v-if=\"appEnabled && isVisible\" class=\"team-resources\">\n\t\t<h5 class=\"team-resources__header\">\n\t\t\t{{ t('Related team resources') }}\n\t\t</h5>\n\t\t<details\n\t\t\tv-for=\"team in teamResources\"\n\t\t\t:key=\"team.teamId\"\n\t\t\tname=\"Team resources\"\n\t\t\tclass=\"related-team\"\n\t\t\t:open=\"open(team.teamId)\"\n\t\t\t@toggle=\"(event) => toggleOpen(team.teamId, event.target.open)\">\n\t\t\t<summary class=\"related-team__header\">\n\t\t\t\t<h5 class=\"related-team__name\">\n\t\t\t\t\t<AccountGroup :size=\"20\" />\n\t\t\t\t\t{{ team.displayName }}\n\t\t\t\t</h5>\n\t\t\t\t<NcButton\n\t\t\t\t\t:aria-label=\"t('View team')\"\n\t\t\t\t\t:href=\"team.link\"\n\t\t\t\t\t:title=\"t('View team')\"\n\t\t\t\t\tvariant=\"tertiary\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<OpenInNew :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\n\t\t\t\t<ChevronUp\n\t\t\t\t\tv-if=\"open(team.teamId)\"\n\t\t\t\t\t:size=\"20\" />\n\t\t\t\t<ChevronDown\n\t\t\t\t\tv-else\n\t\t\t\t\t:size=\"20\" />\n\t\t\t</summary>\n\n\t\t\t<div>\n\t\t\t\t<div\n\t\t\t\t\tv-for=\"provider in teamProviders(team.teamId)\"\n\t\t\t\t\t:key=\"provider.id\"\n\t\t\t\t\tclass=\"related-team-provider\">\n\t\t\t\t\t<h6 v-if=\"provider.resources.length > 0\">\n\t\t\t\t\t\t{{ provider.name }}\n\t\t\t\t\t</h6>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t<li v-for=\"resource in provider.resources\" :key=\"resource.url\" class=\"related-team-resource\">\n\t\t\t\t\t\t\t<a :href=\"resource.url\" class=\"related-team-resource__link\">\n\t\t\t\t\t\t\t\t<span v-if=\"resource.iconEmoji\" class=\"resource__icon\">\n\t\t\t\t\t\t\t\t\t{{ resource.iconEmoji }}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper\n\t\t\t\t\t\t\t\t\tv-else-if=\"resource.iconSvg\"\n\t\t\t\t\t\t\t\t\tclass=\"resource__icon\"\n\t\t\t\t\t\t\t\t\t:svg=\"resource.iconSvg\"\n\t\t\t\t\t\t\t\t\t:size=\"20\" />\n\t\t\t\t\t\t\t\t<span v-else-if=\"resource.iconURL\" class=\"resource__icon\">\n\t\t\t\t\t\t\t\t\t<img :src=\"resource.iconURL\" alt=\"\">\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t<span class=\"resource__name\">\n\t\t\t\t\t\t\t\t\t{{ resource.label }}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t</ul>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</details>\n\t</div>\n</template>\n\n<script>\nimport axios from '@nextcloud/axios'\nimport { getCapabilities } from '@nextcloud/capabilities'\nimport { generateOcsUrl } from '@nextcloud/router'\nimport AccountGroup from 'vue-material-design-icons/AccountGroup.vue'\nimport ChevronDown from 'vue-material-design-icons/ChevronDown.vue'\nimport ChevronUp from 'vue-material-design-icons/ChevronUp.vue'\nimport OpenInNew from 'vue-material-design-icons/OpenInNew.vue'\nimport NcButton from '../NcButton/NcButton.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { t } from '../../l10n.js'\nimport { logger } from '../../utils/logger.ts'\n\nconst teamResourceProviders = getCapabilities()?.circles?.teamResourceProviders ?? []\n\nexport default {\n\tname: 'NcTeamResources',\n\n\tcomponents: {\n\t\tAccountGroup,\n\t\tChevronDown,\n\t\tChevronUp,\n\t\tOpenInNew,\n\t\tNcButton,\n\t\tNcIconSvgWrapper,\n\t},\n\n\t/* eslint vue/require-prop-comment: warn -- TODO: Add a proper doc block about what this props do */\n\tprops: {\n\t\tproviderId: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\titemId: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tappEnabled: OC?.appswebroots?.circles !== undefined && (OC.config.version.split('.')[0] ?? 0) >= 29,\n\t\t\tloading: false,\n\t\t\tteamResources: null,\n\t\t\tteamOpen: [],\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tisVisible() {\n\t\t\treturn !this.loading && this.teamResources?.length > 0\n\t\t},\n\n\t\tteamProviders() {\n\t\t\treturn (teamId) => {\n\t\t\t\tconst team = this.teamResources.find((t) => t.teamId === teamId)\n\t\t\t\treturn team.resources?.reduce((acc, resource) => {\n\t\t\t\t\tif (resource.provider.id === this.providerId && resource.id === String(this.itemId)) {\n\t\t\t\t\t\treturn acc\n\t\t\t\t\t}\n\n\t\t\t\t\tif (!acc[resource.provider.id]) {\n\t\t\t\t\t\tacc[resource.provider.id] = resource.provider\n\t\t\t\t\t\tacc[resource.provider.id].resources = []\n\t\t\t\t\t}\n\n\t\t\t\t\tif (resource.provider.id === this.providerId && resource.id === String(this.itemId)) {\n\t\t\t\t\t\treturn acc\n\t\t\t\t\t}\n\n\t\t\t\t\tacc[resource.provider.id].resources.push(resource)\n\t\t\t\t\treturn acc\n\t\t\t\t}, {})\n\t\t\t}\n\t\t},\n\n\t\topen() {\n\t\t\treturn (teamId) => {\n\t\t\t\treturn this.teamOpen.indexOf(teamId) !== -1\n\t\t\t}\n\t\t},\n\t},\n\n\twatch: {\n\t\tproviderId() {\n\t\t\tthis.fetchTeamResources()\n\t\t},\n\n\t\titemId() {\n\t\t\tthis.fetchTeamResources()\n\t\t},\n\t},\n\n\tcreated() {\n\t\tthis.fetchTeamResources()\n\t},\n\n\tmethods: {\n\t\tt,\n\t\tasync fetchTeamResources() {\n\t\t\tif (!teamResourceProviders.includes(this.providerId)) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\ttry {\n\t\t\t\tthis.loading = true\n\t\t\t\tconst response = await axios.get(generateOcsUrl(`/teams/resources/${this.providerId}/${this.itemId}`))\n\t\t\t\tthis.teamResources = response.data.ocs.data.teams\n\t\t\t\tthis.teamOpen = [this.teamResources[0]?.teamId]\n\t\t\t} catch (e) {\n\t\t\t\tthis.teamResources = null\n\t\t\t\tlogger.error(e)\n\t\t\t} finally {\n\t\t\t\tthis.loading = false\n\t\t\t}\n\t\t},\n\n\t\ttoggleOpen(teamId, open) {\n\t\t\tif (open) {\n\t\t\t\tthis.teamOpen.push(teamId)\n\t\t\t} else {\n\t\t\t\tthis.teamOpen.splice(this.teamOpen.indexOf(teamId), 1)\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.team-resources__header {\n\tfont-weight: bold;\n\tmargin-bottom: 6px;\n}\n\n.related-team {\n\tborder-radius: var(--border-radius-rounded);\n\tborder: 2px solid var(--color-border-dark);\n\tmargin-bottom: 6px;\n\n\t&__open {\n\t\tborder-color: var(--color-primary-element);\n\t}\n\n\t&__header {\n\t\tpadding: 6px;\n\t\tpadding-right: 24px;\n\t\tdisplay: flex;\n\t\tgap: 12px;\n\t}\n\n\t&__name {\n\t\tdisplay: flex;\n\t\tflex-grow: 1;\n\t\talign-items: center;\n\t\tgap: 12px;\n\t\tpadding: 6px 12px;\n\t\tfont-weight: bold;\n\t\tmargin: 0;\n\t}\n\n\t.related-team-provider {\n\t\tpadding: 6px 12px;\n\n\t\t&__name {\n\t\t\tfont-weight: bold;\n\t\t\tmargin-bottom: 3px;\n\t\t}\n\n\t\t&__link {\n\t\t\tdisplay: flex;\n\t\t\tgap: 12px;\n\t\t\tpadding: 6px 12px;\n\t\t\tfont-weight: bold;\n\t\t}\n\t}\n\n\t.related-team-resource {\n\t\t&__link {\n\t\t\tdisplay: flex;\n\t\t\tgap: 12px;\n\t\t\theight: var(--default-clickable-area);\n\t\t\talign-items: center;\n\t\t\tborder-radius: var(--border-radius-large);\n\n\t\t\t&:hover {\n\t\t\t\tbackground-color: var(--color-background-hover);\n\t\t\t}\n\t\t\t&:focus {\n\t\t\t\tbackground-color: var(--color-background-hover);\n\t\t\t\toutline: 2px solid var(--color-primary-element);\n\t\t\t}\n\t\t}\n\t\t.resource__icon {\n\t\t\twidth: var(--default-clickable-area);\n\t\t\theight: var(--default-clickable-area);\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\ttext-align: center;\n\n\t\t\t& > img {\n\t\t\t\tborder-radius: var(--border-radius-pill);\n\t\t\t\toverflow: hidden;\n\t\t\t\twidth: 32px;\n\t\t\t\theight: 32px;\n\t\t\t}\n\t\t}\n\t}\n}\n</style>\n","<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Usage\n\nUse this component to display the related resources of a given item.\n\n```\n<template>\n\t<NcRelatedResourcesPanel provider-id=\"talk\"\n\t\theader=\"Related resources for talk\"\n\t\t:item-id=\"conversationId\" />\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tconversationId: 1,\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<div>\n\t\t<NcTeamResources\n\t\t\t:provider-id=\"providerId\"\n\t\t\t:item-id=\"itemId\" />\n\n\t\t<div v-if=\"appEnabled && isVisible\" class=\"related-resources\">\n\t\t\t<div class=\"related-resources__header\">\n\t\t\t\t<h5>{{ header }}</h5>\n\t\t\t\t<p>{{ subline }}</p>\n\t\t\t</div>\n\n\t\t\t<NcResource\n\t\t\t\tv-for=\"resource in resources\"\n\t\t\t\t:key=\"resource.itemId\"\n\t\t\t\tclass=\"related-resources__entry\"\n\t\t\t\t:icon=\"resource.icon\"\n\t\t\t\t:name=\"resource.title\"\n\t\t\t\t:url=\"resource.url\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport axios from '@nextcloud/axios'\nimport { generateOcsUrl } from '@nextcloud/router'\nimport NcResource from './NcResource.vue'\nimport NcTeamResources from './NcTeamResources.vue'\nimport { t } from '../../l10n.js'\nimport { logger } from '../../utils/logger.ts'\n\nexport default {\n\tname: 'NcRelatedResourcesPanel',\n\n\tcomponents: {\n\t\tNcResource,\n\t\tNcTeamResources,\n\t},\n\n\t/* eslint vue/require-prop-comment: warn -- TODO: Add a proper doc block about what this props do */\n\tprops: {\n\t\t/**\n\t\t * The provider id implemented with `\\OCA\\RelatedResources\\IRelatedResourceProvider::getProviderId()`\n\t\t */\n\t\tproviderId: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * The item id which uniquely identities the e.g. Calendar event, Deck board, file, Talk room, etc.\n\t\t */\n\t\titemId: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Limits to specific resource type. i.e. any provider id implemented with `\\OCA\\RelatedResources\\IRelatedResourceProvider::getProviderId()`\n\t\t */\n\t\tresourceType: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Set the maximum number of resources to load\n\t\t */\n\t\tlimit: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t},\n\n\t\t/**\n\t\t * Only used by the files sidebar\n\t\t *\n\t\t * File info is passed when registered with `OCA.Sharing.ShareTabSections.registerSection()`\n\t\t */\n\t\tfileInfo: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Make the header name dynamic\n\t\t */\n\t\theader: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Related resources'),\n\t\t},\n\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Anything shared with the same group of people will show up here'),\n\t\t},\n\n\t\t/**\n\t\t * If this element is used on a primary element set to true for primary styling.\n\t\t */\n\t\tprimary: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t'has-error',\n\t\t'has-resources',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tappEnabled: OC?.appswebroots?.related_resources !== undefined,\n\t\t\tloading: false,\n\t\t\terror: null,\n\t\t\tresources: [],\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tisVisible() {\n\t\t\tif (this.loading) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\treturn this.error ?? this.resources.length > 0\n\t\t},\n\n\t\tsubline() {\n\t\t\tif (this.error) {\n\t\t\t\treturn t('Error getting related resources. Please contact your system administrator if you have any questions.')\n\t\t\t}\n\t\t\treturn this.description\n\t\t},\n\n\t\thasResourceInfo() {\n\t\t\tif (this.providerId !== null && this.itemId !== null) {\n\t\t\t\treturn true\n\t\t\t}\n\t\t\tif (this.fileInfo !== null) {\n\t\t\t\treturn true\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\n\t\tisFiles() {\n\t\t\treturn this.fileInfo?.id !== undefined\n\t\t},\n\n\t\turl() {\n\t\t\tlet providerId = null\n\t\t\tlet itemId = null\n\n\t\t\tif (this.isFiles) {\n\t\t\t\tproviderId = 'files'\n\t\t\t\titemId = this.fileInfo.id\n\t\t\t} else {\n\t\t\t\tproviderId = this.providerId\n\t\t\t\titemId = this.itemId\n\t\t\t}\n\n\t\t\treturn generateOcsUrl('/apps/related_resources/related/{providerId}?itemId={itemId}&resourceType={resourceType}&limit={limit}&format=json', {\n\t\t\t\tproviderId,\n\t\t\t\titemId,\n\t\t\t\tresourceType: this.resourceType,\n\t\t\t\tlimit: this.limit,\n\t\t\t})\n\t\t},\n\t},\n\n\twatch: {\n\t\tproviderId() {\n\t\t\tthis.fetchRelatedResources()\n\t\t},\n\n\t\titemId() {\n\t\t\tthis.fetchRelatedResources()\n\t\t},\n\n\t\tfileInfo() {\n\t\t\tthis.fetchRelatedResources()\n\t\t},\n\n\t\terror(error) {\n\t\t\t/**\n\t\t\t * Emitted when the error value changes\n\t\t\t *\n\t\t\t * @type {boolean}\n\t\t\t */\n\t\t\tthis.$emit('has-error', Boolean(error))\n\t\t},\n\n\t\tresources(resources) {\n\t\t\t/**\n\t\t\t * Emitted when the resources value changes\n\t\t\t *\n\t\t\t * @type {boolean}\n\t\t\t */\n\t\t\tthis.$emit('has-resources', resources.length > 0)\n\t\t},\n\t},\n\n\tcreated() {\n\t\tthis.fetchRelatedResources()\n\t},\n\n\tmethods: {\n\t\tt,\n\t\tasync fetchRelatedResources() {\n\t\t\tif (!this.appEnabled || !this.hasResourceInfo) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.loading = true\n\t\t\tthis.error = null\n\t\t\tthis.resources = []\n\t\t\ttry {\n\t\t\t\tconst response = await axios.get(this.url)\n\t\t\t\tthis.resources = response.data.ocs?.data\n\t\t\t} catch (e) {\n\t\t\t\tthis.error = e\n\t\t\t\tlogger.error(e)\n\t\t\t} finally {\n\t\t\t\tthis.loading = false\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.related-resources {\n\t&__header {\n\n\t\th5 {\n\t\t\tfont-weight: bold;\n\t\t\tmargin-bottom: 6px;\n\t\t}\n\n\t\tp {\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main","NcButton","t","getRoute","getCapabilities","ChevronDown","ChevronUp","NcIconSvgWrapper","axios","generateOcsUrl","logger"],"mappings":"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","x_google_ignoreList":[1,2]}

package/dist/chunks/NcRelatedResourcesPanel-jvOEQWWO.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcRelatedResourcesPanel-jvOEQWWO.mjs","sources":["../../src/components/NcRelatedResourcesPanel/NcResource.vue","../../node_modules/vue-material-design-icons/AccountGroup.vue","../../node_modules/vue-material-design-icons/OpenInNew.vue","../../src/components/NcRelatedResourcesPanel/NcTeamResources.vue","../../src/components/NcRelatedResourcesPanel/NcRelatedResourcesPanel.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<li class=\"resource\">\n\t\t<NcButton\n\t\t\tclass=\"resource__button\"\n\t\t\t:aria-label=\"labelTranslated\"\n\t\t\t:to=\"route\"\n\t\t\t:href=\"route ? null : url\"\n\t\t\tvariant=\"tertiary\">\n\t\t\t<template #icon>\n\t\t\t\t<div class=\"resource__icon\">\n\t\t\t\t\t<img :src=\"icon\">\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t{{ name }}\n\t\t</NcButton>\n\t</li>\n</template>\n\n<script>\nimport { t } from '../../l10n.js'\nimport NcButton from '../NcButton/index.js'\nimport { getRoute } from '../NcRichText/autolink.js'\n\nexport default {\n\tname: 'NcResource',\n\n\tcomponents: {\n\t\tNcButton,\n\t},\n\n\t/* eslint vue/require-prop-comment: warn -- TODO: Add a proper doc block about what this props do */\n\tprops: {\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\turl: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tlabelTranslated: t('Open link to \"{resourceName}\"', { resourceName: this.name }),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\troute() {\n\t\t\treturn getRoute(this.$router, this.url)\n\t\t},\n\t},\n\n\tmethods: {\n\t\tt,\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.resource {\n\tdisplay: flex;\n\talign-items: center;\n\theight: var(--default-clickable-area);\n\n\t// Override default NcButton styles\n\t&__button {\n\t\twidth: 100% !important;\n\t\tjustify-content: flex-start !important;\n\t\tpadding: 0 !important;\n\n\t\t&:deep {\n\t\t\t.button-vue__wrapper {\n\t\t\t\tjustify-content: flex-start !important;\n\n\t\t\t\t.button-vue__text {\n\t\t\t\t\tfont-weight: normal !important;\n\t\t\t\t\tmargin-left: 2px !important;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t&__icon {\n\t\twidth: 32px;\n\t\theight: 32px;\n\t\tbackground-color: var(--color-text-maxcontrast);\n\t\tborder-radius: 50%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\n\t\timg {\n\t\t\twidth: 16px;\n\t\t\theight: 16px;\n\t\t\tfilter: var(--background-invert-if-dark);\n\t\t}\n\t}\n}\n</style>\n","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon account-group-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,5.5A3.5,3.5 0 0,1 15.5,9A3.5,3.5 0 0,1 12,12.5A3.5,3.5 0 0,1 8.5,9A3.5,3.5 0 0,1 12,5.5M5,8C5.56,8 6.08,8.15 6.53,8.42C6.38,9.85 6.8,11.27 7.66,12.38C7.16,13.34 6.16,14 5,14A3,3 0 0,1 2,11A3,3 0 0,1 5,8M19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14C17.84,14 16.84,13.34 16.34,12.38C17.2,11.27 17.62,9.85 17.47,8.42C17.92,8.15 18.44,8 19,8M5.5,18.25C5.5,16.18 8.41,14.5 12,14.5C15.59,14.5 18.5,16.18 18.5,18.25V20H5.5V18.25M0,20V18.5C0,17.11 1.89,15.94 4.45,15.6C3.86,16.28 3.5,17.22 3.5,18.25V20H0M24,20H20.5V18.25C20.5,17.22 20.14,16.28 19.55,15.6C22.11,15.94 24,17.11 24,18.5V20Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"AccountGroupIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon open-in-new-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=\"M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"OpenInNewIcon\",\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: 2023 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n<template>\n\t<div v-if=\"appEnabled && isVisible\" class=\"team-resources\">\n\t\t<h5 class=\"team-resources__header\">\n\t\t\t{{ t('Related team resources') }}\n\t\t</h5>\n\t\t<details\n\t\t\tv-for=\"team in teamResources\"\n\t\t\t:key=\"team.teamId\"\n\t\t\tname=\"Team resources\"\n\t\t\tclass=\"related-team\"\n\t\t\t:open=\"open(team.teamId)\"\n\t\t\t@toggle=\"(event) => toggleOpen(team.teamId, event.target.open)\">\n\t\t\t<summary class=\"related-team__header\">\n\t\t\t\t<h5 class=\"related-team__name\">\n\t\t\t\t\t<AccountGroup :size=\"20\" />\n\t\t\t\t\t{{ team.displayName }}\n\t\t\t\t</h5>\n\t\t\t\t<NcButton\n\t\t\t\t\t:aria-label=\"t('View team')\"\n\t\t\t\t\t:href=\"team.link\"\n\t\t\t\t\t:title=\"t('View team')\"\n\t\t\t\t\tvariant=\"tertiary\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<OpenInNew :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\n\t\t\t\t<ChevronUp\n\t\t\t\t\tv-if=\"open(team.teamId)\"\n\t\t\t\t\t:size=\"20\" />\n\t\t\t\t<ChevronDown\n\t\t\t\t\tv-else\n\t\t\t\t\t:size=\"20\" />\n\t\t\t</summary>\n\n\t\t\t<div>\n\t\t\t\t<div\n\t\t\t\t\tv-for=\"provider in teamProviders(team.teamId)\"\n\t\t\t\t\t:key=\"provider.id\"\n\t\t\t\t\tclass=\"related-team-provider\">\n\t\t\t\t\t<h6 v-if=\"provider.resources.length > 0\">\n\t\t\t\t\t\t{{ provider.name }}\n\t\t\t\t\t</h6>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t<li v-for=\"resource in provider.resources\" :key=\"resource.url\" class=\"related-team-resource\">\n\t\t\t\t\t\t\t<a :href=\"resource.url\" class=\"related-team-resource__link\">\n\t\t\t\t\t\t\t\t<span v-if=\"resource.iconEmoji\" class=\"resource__icon\">\n\t\t\t\t\t\t\t\t\t{{ resource.iconEmoji }}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper\n\t\t\t\t\t\t\t\t\tv-else-if=\"resource.iconSvg\"\n\t\t\t\t\t\t\t\t\tclass=\"resource__icon\"\n\t\t\t\t\t\t\t\t\t:svg=\"resource.iconSvg\"\n\t\t\t\t\t\t\t\t\t:size=\"20\" />\n\t\t\t\t\t\t\t\t<span v-else-if=\"resource.iconURL\" class=\"resource__icon\">\n\t\t\t\t\t\t\t\t\t<img :src=\"resource.iconURL\" alt=\"\">\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t<span class=\"resource__name\">\n\t\t\t\t\t\t\t\t\t{{ resource.label }}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t</ul>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</details>\n\t</div>\n</template>\n\n<script>\nimport axios from '@nextcloud/axios'\nimport { getCapabilities } from '@nextcloud/capabilities'\nimport { generateOcsUrl } from '@nextcloud/router'\nimport AccountGroup from 'vue-material-design-icons/AccountGroup.vue'\nimport ChevronDown from 'vue-material-design-icons/ChevronDown.vue'\nimport ChevronUp from 'vue-material-design-icons/ChevronUp.vue'\nimport OpenInNew from 'vue-material-design-icons/OpenInNew.vue'\nimport NcButton from '../NcButton/NcButton.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { t } from '../../l10n.js'\nimport { logger } from '../../utils/logger.ts'\n\nconst teamResourceProviders = getCapabilities()?.circles?.teamResourceProviders ?? []\n\nexport default {\n\tname: 'NcTeamResources',\n\n\tcomponents: {\n\t\tAccountGroup,\n\t\tChevronDown,\n\t\tChevronUp,\n\t\tOpenInNew,\n\t\tNcButton,\n\t\tNcIconSvgWrapper,\n\t},\n\n\t/* eslint vue/require-prop-comment: warn -- TODO: Add a proper doc block about what this props do */\n\tprops: {\n\t\tproviderId: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\titemId: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tappEnabled: OC?.appswebroots?.circles !== undefined && (OC.config.version.split('.')[0] ?? 0) >= 29,\n\t\t\tloading: false,\n\t\t\tteamResources: null,\n\t\t\tteamOpen: [],\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tisVisible() {\n\t\t\treturn !this.loading && this.teamResources?.length > 0\n\t\t},\n\n\t\tteamProviders() {\n\t\t\treturn (teamId) => {\n\t\t\t\tconst team = this.teamResources.find((t) => t.teamId === teamId)\n\t\t\t\treturn team.resources?.reduce((acc, resource) => {\n\t\t\t\t\tif (resource.provider.id === this.providerId && resource.id === String(this.itemId)) {\n\t\t\t\t\t\treturn acc\n\t\t\t\t\t}\n\n\t\t\t\t\tif (!acc[resource.provider.id]) {\n\t\t\t\t\t\tacc[resource.provider.id] = resource.provider\n\t\t\t\t\t\tacc[resource.provider.id].resources = []\n\t\t\t\t\t}\n\n\t\t\t\t\tif (resource.provider.id === this.providerId && resource.id === String(this.itemId)) {\n\t\t\t\t\t\treturn acc\n\t\t\t\t\t}\n\n\t\t\t\t\tacc[resource.provider.id].resources.push(resource)\n\t\t\t\t\treturn acc\n\t\t\t\t}, {})\n\t\t\t}\n\t\t},\n\n\t\topen() {\n\t\t\treturn (teamId) => {\n\t\t\t\treturn this.teamOpen.indexOf(teamId) !== -1\n\t\t\t}\n\t\t},\n\t},\n\n\twatch: {\n\t\tproviderId() {\n\t\t\tthis.fetchTeamResources()\n\t\t},\n\n\t\titemId() {\n\t\t\tthis.fetchTeamResources()\n\t\t},\n\t},\n\n\tcreated() {\n\t\tthis.fetchTeamResources()\n\t},\n\n\tmethods: {\n\t\tt,\n\t\tasync fetchTeamResources() {\n\t\t\tif (!teamResourceProviders.includes(this.providerId)) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\ttry {\n\t\t\t\tthis.loading = true\n\t\t\t\tconst response = await axios.get(generateOcsUrl(`/teams/resources/${this.providerId}/${this.itemId}`))\n\t\t\t\tthis.teamResources = response.data.ocs.data.teams\n\t\t\t\tthis.teamOpen = [this.teamResources[0]?.teamId]\n\t\t\t} catch (e) {\n\t\t\t\tthis.teamResources = null\n\t\t\t\tlogger.error(e)\n\t\t\t} finally {\n\t\t\t\tthis.loading = false\n\t\t\t}\n\t\t},\n\n\t\ttoggleOpen(teamId, open) {\n\t\t\tif (open) {\n\t\t\t\tthis.teamOpen.push(teamId)\n\t\t\t} else {\n\t\t\t\tthis.teamOpen.splice(this.teamOpen.indexOf(teamId), 1)\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.team-resources__header {\n\tfont-weight: bold;\n\tmargin-bottom: 6px;\n}\n\n.related-team {\n\tborder-radius: var(--border-radius-rounded);\n\tborder: 2px solid var(--color-border-dark);\n\tmargin-bottom: 6px;\n\n\t&__open {\n\t\tborder-color: var(--color-primary-element);\n\t}\n\n\t&__header {\n\t\tpadding: 6px;\n\t\tpadding-right: 24px;\n\t\tdisplay: flex;\n\t\tgap: 12px;\n\t}\n\n\t&__name {\n\t\tdisplay: flex;\n\t\tflex-grow: 1;\n\t\talign-items: center;\n\t\tgap: 12px;\n\t\tpadding: 6px 12px;\n\t\tfont-weight: bold;\n\t\tmargin: 0;\n\t}\n\n\t.related-team-provider {\n\t\tpadding: 6px 12px;\n\n\t\t&__name {\n\t\t\tfont-weight: bold;\n\t\t\tmargin-bottom: 3px;\n\t\t}\n\n\t\t&__link {\n\t\t\tdisplay: flex;\n\t\t\tgap: 12px;\n\t\t\tpadding: 6px 12px;\n\t\t\tfont-weight: bold;\n\t\t}\n\t}\n\n\t.related-team-resource {\n\t\t&__link {\n\t\t\tdisplay: flex;\n\t\t\tgap: 12px;\n\t\t\theight: var(--default-clickable-area);\n\t\t\talign-items: center;\n\t\t\tborder-radius: var(--border-radius-large);\n\n\t\t\t&:hover {\n\t\t\t\tbackground-color: var(--color-background-hover);\n\t\t\t}\n\t\t\t&:focus {\n\t\t\t\tbackground-color: var(--color-background-hover);\n\t\t\t\toutline: 2px solid var(--color-primary-element);\n\t\t\t}\n\t\t}\n\t\t.resource__icon {\n\t\t\twidth: var(--default-clickable-area);\n\t\t\theight: var(--default-clickable-area);\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\ttext-align: center;\n\n\t\t\t& > img {\n\t\t\t\tborder-radius: var(--border-radius-pill);\n\t\t\t\toverflow: hidden;\n\t\t\t\twidth: 32px;\n\t\t\t\theight: 32px;\n\t\t\t}\n\t\t}\n\t}\n}\n</style>\n","<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Usage\n\nUse this component to display the related resources of a given item.\n\n```\n<template>\n\t<NcRelatedResourcesPanel provider-id=\"talk\"\n\t\theader=\"Related resources for talk\"\n\t\t:item-id=\"conversationId\" />\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tconversationId: 1,\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<div>\n\t\t<NcTeamResources\n\t\t\t:provider-id=\"providerId\"\n\t\t\t:item-id=\"itemId\" />\n\n\t\t<div v-if=\"appEnabled && isVisible\" class=\"related-resources\">\n\t\t\t<div class=\"related-resources__header\">\n\t\t\t\t<h5>{{ header }}</h5>\n\t\t\t\t<p>{{ subline }}</p>\n\t\t\t</div>\n\n\t\t\t<NcResource\n\t\t\t\tv-for=\"resource in resources\"\n\t\t\t\t:key=\"resource.itemId\"\n\t\t\t\tclass=\"related-resources__entry\"\n\t\t\t\t:icon=\"resource.icon\"\n\t\t\t\t:name=\"resource.title\"\n\t\t\t\t:url=\"resource.url\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport axios from '@nextcloud/axios'\nimport { generateOcsUrl } from '@nextcloud/router'\nimport NcResource from './NcResource.vue'\nimport NcTeamResources from './NcTeamResources.vue'\nimport { t } from '../../l10n.js'\nimport { logger } from '../../utils/logger.ts'\n\nexport default {\n\tname: 'NcRelatedResourcesPanel',\n\n\tcomponents: {\n\t\tNcResource,\n\t\tNcTeamResources,\n\t},\n\n\t/* eslint vue/require-prop-comment: warn -- TODO: Add a proper doc block about what this props do */\n\tprops: {\n\t\t/**\n\t\t * The provider id implemented with `\\OCA\\RelatedResources\\IRelatedResourceProvider::getProviderId()`\n\t\t */\n\t\tproviderId: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * The item id which uniquely identities the e.g. Calendar event, Deck board, file, Talk room, etc.\n\t\t */\n\t\titemId: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Limits to specific resource type. i.e. any provider id implemented with `\\OCA\\RelatedResources\\IRelatedResourceProvider::getProviderId()`\n\t\t */\n\t\tresourceType: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Set the maximum number of resources to load\n\t\t */\n\t\tlimit: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t},\n\n\t\t/**\n\t\t * Only used by the files sidebar\n\t\t *\n\t\t * File info is passed when registered with `OCA.Sharing.ShareTabSections.registerSection()`\n\t\t */\n\t\tfileInfo: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Make the header name dynamic\n\t\t */\n\t\theader: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Related resources'),\n\t\t},\n\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Anything shared with the same group of people will show up here'),\n\t\t},\n\n\t\t/**\n\t\t * If this element is used on a primary element set to true for primary styling.\n\t\t */\n\t\tprimary: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t'has-error',\n\t\t'has-resources',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tappEnabled: OC?.appswebroots?.related_resources !== undefined,\n\t\t\tloading: false,\n\t\t\terror: null,\n\t\t\tresources: [],\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tisVisible() {\n\t\t\tif (this.loading) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\treturn this.error ?? this.resources.length > 0\n\t\t},\n\n\t\tsubline() {\n\t\t\tif (this.error) {\n\t\t\t\treturn t('Error getting related resources. Please contact your system administrator if you have any questions.')\n\t\t\t}\n\t\t\treturn this.description\n\t\t},\n\n\t\thasResourceInfo() {\n\t\t\tif (this.providerId !== null && this.itemId !== null) {\n\t\t\t\treturn true\n\t\t\t}\n\t\t\tif (this.fileInfo !== null) {\n\t\t\t\treturn true\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\n\t\tisFiles() {\n\t\t\treturn this.fileInfo?.id !== undefined\n\t\t},\n\n\t\turl() {\n\t\t\tlet providerId = null\n\t\t\tlet itemId = null\n\n\t\t\tif (this.isFiles) {\n\t\t\t\tproviderId = 'files'\n\t\t\t\titemId = this.fileInfo.id\n\t\t\t} else {\n\t\t\t\tproviderId = this.providerId\n\t\t\t\titemId = this.itemId\n\t\t\t}\n\n\t\t\treturn generateOcsUrl('/apps/related_resources/related/{providerId}?itemId={itemId}&resourceType={resourceType}&limit={limit}&format=json', {\n\t\t\t\tproviderId,\n\t\t\t\titemId,\n\t\t\t\tresourceType: this.resourceType,\n\t\t\t\tlimit: this.limit,\n\t\t\t})\n\t\t},\n\t},\n\n\twatch: {\n\t\tproviderId() {\n\t\t\tthis.fetchRelatedResources()\n\t\t},\n\n\t\titemId() {\n\t\t\tthis.fetchRelatedResources()\n\t\t},\n\n\t\tfileInfo() {\n\t\t\tthis.fetchRelatedResources()\n\t\t},\n\n\t\terror(error) {\n\t\t\t/**\n\t\t\t * Emitted when the error value changes\n\t\t\t *\n\t\t\t * @type {boolean}\n\t\t\t */\n\t\t\tthis.$emit('has-error', Boolean(error))\n\t\t},\n\n\t\tresources(resources) {\n\t\t\t/**\n\t\t\t * Emitted when the resources value changes\n\t\t\t *\n\t\t\t * @type {boolean}\n\t\t\t */\n\t\t\tthis.$emit('has-resources', resources.length > 0)\n\t\t},\n\t},\n\n\tcreated() {\n\t\tthis.fetchRelatedResources()\n\t},\n\n\tmethods: {\n\t\tt,\n\t\tasync fetchRelatedResources() {\n\t\t\tif (!this.appEnabled || !this.hasResourceInfo) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.loading = true\n\t\t\tthis.error = null\n\t\t\tthis.resources = []\n\t\t\ttry {\n\t\t\t\tconst response = await axios.get(this.url)\n\t\t\t\tthis.resources = response.data.ocs?.data\n\t\t\t} catch (e) {\n\t\t\t\tthis.error = e\n\t\t\t\tlogger.error(e)\n\t\t\t} finally {\n\t\t\t\tthis.loading = false\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.related-resources {\n\t&__header {\n\n\t\th5 {\n\t\t\tfont-weight: bold;\n\t\t\tmargin-bottom: 6px;\n\t\t}\n\n\t\tp {\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main","t"],"mappings":"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","x_google_ignoreList":[1,2]}