@nextcloud/vue 9.0.0-alpha.2 → 9.0.0-alpha.4

package/dist/chunks/NcTextField-W5cVvjob.mjs

@@ -0,0 +1,173 @@
+import { N as NcInputField } from "./NcInputField-BrAvsgA4.mjs";
+import { C as Close } from "./Close-pmiXntgw.mjs";
+import { A as ArrowRight } from "./ArrowRight-Cg6xGDcS.mjs";
+import { openBlock, createElementBlock, mergeProps, createElementVNode, toDisplayString, createCommentVNode, resolveComponent, createBlock, createSlots, withCtx, renderSlot } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+import { r as register, c as t43, d as t15, a as t } from "./_l10n-C3nxU4O-.mjs";
+const _sfc_main$1 = {
+  name: "UndoVariantIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+const _hoisted_1 = ["aria-hidden", "aria-label"];
+const _hoisted_2 = ["fill", "width", "height"];
+const _hoisted_3 = { d: "M13.5,7A6.5,6.5 0 0,1 20,13.5A6.5,6.5 0 0,1 13.5,20H10V18H13.5C16,18 18,16 18,13.5C18,11 16,9 13.5,9H7.83L10.91,12.09L9.5,13.5L4,8L9.5,2.5L10.92,3.91L7.83,7H13.5M6,18H8V20H6V18Z" };
+const _hoisted_4 = { key: 0 };
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : true,
+    "aria-label": $props.title,
+    class: "material-design-icon undo-variant-icon",
+    role: "img",
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      createElementVNode("path", _hoisted_3, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2))
+  ], 16, _hoisted_1);
+}
+const Undo = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+register(t15, t43);
+const NcInputFieldProps = new Set(Object.keys(NcInputField.props));
+const _sfc_main = {
+  name: "NcTextField",
+  components: {
+    NcInputField,
+    Close,
+    ArrowRight,
+    Undo
+  },
+  props: {
+    /**
+     * Any [NcInputField](#/Components/NcFields?id=ncinputfield) props
+     */
+    // Not an actual prop but needed to show in vue-styleguidist docs
+    // eslint-disable-next-line
+    " ": {},
+    // Reuse all the props from NcInputField for better typing and documentation
+    ...NcInputField.props,
+    /**
+     * The `aria-label` to set on the trailing button
+     * If no explicit value is set it will default to the one matching the `trailingButtonIcon`:
+     * @default 'Clear text'|'Save changes'|'Undo changes'
+     */
+    trailingButtonLabel: {
+      type: String,
+      default: ""
+    },
+    // Custom props
+    /**
+     * Specifies which material design icon should be used for the trailing
+     * button.
+     * @type {'close'|'arrowRight'|'undo'}
+     */
+    trailingButtonIcon: {
+      type: String,
+      default: "close",
+      validator: (value) => [
+        "close",
+        "arrowRight",
+        "undo"
+      ].includes(value)
+    }
+  },
+  emits: [
+    "update:modelValue"
+  ],
+  computed: {
+    propsToForward() {
+      const predefinedLabels = {
+        undo: t("Undo changes"),
+        close: t("Clear text"),
+        arrowRight: t("Save changes")
+      };
+      return {
+        // Proxy original NcInputField's props
+        ...Object.fromEntries(
+          Object.entries(this.$props).filter(([key]) => NcInputFieldProps.has(key))
+        ),
+        // Adjust aria-label for predefined trailing buttons
+        trailingButtonLabel: this.trailingButtonLabel || predefinedLabels[this.trailingButtonIcon]
+      };
+    }
+  },
+  methods: {
+    /**
+     * Focus the input element
+     *
+     * @public
+     */
+    focus() {
+      this.$refs.inputField.focus();
+    },
+    /**
+     * Select all the text in the input
+     *
+     * @public
+     */
+    select() {
+      this.$refs.inputField.select();
+    },
+    handleInput(event) {
+      this.$emit("update:modelValue", event);
+    }
+  }
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_Close = resolveComponent("Close");
+  const _component_ArrowRight = resolveComponent("ArrowRight");
+  const _component_Undo = resolveComponent("Undo");
+  const _component_NcInputField = resolveComponent("NcInputField");
+  return openBlock(), createBlock(_component_NcInputField, mergeProps($options.propsToForward, {
+    ref: "inputField",
+    "onUpdate:modelValue": $options.handleInput
+  }), createSlots({ _: 2 }, [
+    !!_ctx.$slots.icon ? {
+      name: "icon",
+      fn: withCtx(() => [
+        renderSlot(_ctx.$slots, "icon")
+      ]),
+      key: "0"
+    } : void 0,
+    _ctx.type !== "search" ? {
+      name: "trailing-button-icon",
+      fn: withCtx(() => [
+        $props.trailingButtonIcon === "close" ? (openBlock(), createBlock(_component_Close, {
+          key: 0,
+          size: 20
+        })) : $props.trailingButtonIcon === "arrowRight" ? (openBlock(), createBlock(_component_ArrowRight, {
+          key: 1,
+          size: 20
+        })) : $props.trailingButtonIcon === "undo" ? (openBlock(), createBlock(_component_Undo, {
+          key: 2,
+          size: 20
+        })) : createCommentVNode("", true)
+      ]),
+      key: "1"
+    } : void 0
+  ]), 1040, ["onUpdate:modelValue"]);
+}
+const NcTextField = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  NcTextField as N
+};

package/dist/chunks/NcTextField-W5cVvjob.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcTextField-W5cVvjob.mjs","sources":["../../node_modules/vue-material-design-icons/UndoVariant.vue","../../src/components/NcTextField/NcTextField.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : true\"\n        :aria-label=\"title\"\n        class=\"material-design-icon undo-variant-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M13.5,7A6.5,6.5 0 0,1 20,13.5A6.5,6.5 0 0,1 13.5,20H10V18H13.5C16,18 18,16 18,13.5C18,11 16,9 13.5,9H7.83L10.91,12.09L9.5,13.5L4,8L9.5,2.5L10.92,3.91L7.83,7H13.5M6,18H8V20H6V18Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"UndoVariantIcon\",\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: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Description\nSee [NcInputField](#/Components/NcFields?id=ncinputfield) for a list of all available props.\n\nGeneral purpose text field component.\nIt is recommended to not only provide a placeholder, but also a label.\nThe label should describe what input is expected and the placehold what format the input should have.\n\nNote: the inner html `input` element inherits all the attributes from the\nNcTextField component so you can add things like `autocomplete`, `maxlength`\nand `minlength`.\n\n```\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcTextField v-model=\"text1\"\n\t\t\tlabel=\"Leading icon and clear trailing button\"\n\t\t\ttrailing-button-icon=\"close\"\n\t\t\t:show-trailing-button=\"text1 !== ''\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t\t<template #icon>\n\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t</template>\n\t\t</NcTextField>\n\t\t<NcTextField v-model=\"text4\"\n\t\t\tlabel=\"Internal label\"\n\t\t\tplaceholder=\"That can be used together with placeholder\"\n\t\t\ttrailing-button-icon=\"close\"\n\t\t\t:show-trailing-button=\"text4 !== ''\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t\t<template #icon>\n\t\t\t\t<Lock :size=\"20\" />\n\t\t\t</template>\n\t\t</NcTextField>\n\t\t<NcTextField v-model=\"text2\"\n\t\t\tlabel=\"Success state\"\n\t\t\tplaceholder=\"Placeholders are possible\"\n\t\t\t:success=\"true\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t</NcTextField>\n\t\t<NcTextField v-model=\"text3\"\n\t\t\tlabel=\"Error state\"\n\t\t\tplaceholder=\"Enter something valid\"\n\t\t\t:error=\"true\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t</NcTextField>\n\t\t<NcTextField :model-value=\"\"\n\t\t\tlabel=\"Disabled\"\n\t\t\t:disabled=\"true\" />\n\t\t<NcTextField :model-value=\"\"\n\t\t\tlabel=\"Disabled + Success\"\n\t\t\t:success=\"true\"\n\t\t\t:disabled=\"true\" />\n\t\t<div class=\"external-label\">\n\t\t\t<label for=\"textField\">External label</label>\n\t\t\t<NcTextField v-model=\"text5\"\n\t\t\t\tid=\"textField\"\n\t\t\t\t:label-outside=\"true\"\n\t\t\t\tplaceholder=\"Input with external label\"\n\t\t\t\t@trailing-button-click=\"clearText\" />\n\t\t</div>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\nimport Lock from 'vue-material-design-icons/Lock'\nimport Close from 'vue-material-design-icons/Close'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttext1: '',\n\t\t\ttext2: '',\n\t\t\ttext3: '',\n\t\t\ttext4: '',\n\t\t\ttext5: '',\n\t\t}\n\t},\n\n\tcomponents: {\n\t\tMagnify,\n\t\tLock,\n\t\tClose,\n\t},\n\n\tmethods: {\n\t\tclearText() {\n\t\t\tthis.text1 = ''\n\t\t\tthis.text3 = ''\n\t\t}\n\t}\n}\n</script>\n<style lang=\"scss\" scoped>\n.wrapper {\n\tdisplay: flex;\n\tgap: 4px;\n\talign-items: flex-end;\n\tflex-wrap: wrap;\n}\n\n.external-label {\n\tdisplay: flex;\n\twidth: 100%;\n\tmargin-top: 1rem;\n}\n\n.external-label label {\n\tpadding-top: 7px;\n\tpadding-right: 14px;\n\twhite-space: nowrap;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<NcInputField v-bind=\"propsToForward\"\n\t\tref=\"inputField\"\n\t\t@update:model-value=\"handleInput\">\n\t\t<template v-if=\"!!$slots.icon\" #icon>\n\t\t\t<!-- Default slot for the leading icon -->\n\t\t\t<slot name=\"icon\" />\n\t\t</template>\n\n\t\t<!-- Trailing icon slot, except for search type input as the browser already adds a trailing close icon -->\n\t\t<template v-if=\"type !== 'search'\" #trailing-button-icon>\n\t\t\t<Close v-if=\"trailingButtonIcon === 'close'\" :size=\"20\" />\n\t\t\t<ArrowRight v-else-if=\"trailingButtonIcon === 'arrowRight'\" :size=\"20\" />\n\t\t\t<Undo v-else-if=\"trailingButtonIcon === 'undo'\" :size=\"20\" />\n\t\t</template>\n\t</NcInputField>\n</template>\n\n<script>\n\nimport NcInputField from '../NcInputField/NcInputField.vue'\n\nimport Close from 'vue-material-design-icons/Close.vue'\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport Undo from 'vue-material-design-icons/UndoVariant.vue'\n\nimport { t } from '../../l10n.js'\n\nconst NcInputFieldProps = new Set(Object.keys(NcInputField.props))\n\nexport default {\n\tname: 'NcTextField',\n\n\tcomponents: {\n\t\tNcInputField,\n\t\tClose,\n\t\tArrowRight,\n\t\tUndo,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Any [NcInputField](#/Components/NcFields?id=ncinputfield) props\n\t\t */\n\t\t// Not an actual prop but needed to show in vue-styleguidist docs\n\t\t// eslint-disable-next-line\n\t\t' ': {},\n\n\t\t// Reuse all the props from NcInputField for better typing and documentation\n\t\t...NcInputField.props,\n\n\t\t/**\n\t\t * The `aria-label` to set on the trailing button\n\t\t * If no explicit value is set it will default to the one matching the `trailingButtonIcon`:\n\t\t * @default 'Clear text'|'Save changes'|'Undo changes'\n\t\t */\n\t\ttrailingButtonLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t// Custom props\n\n\t\t/**\n\t\t * Specifies which material design icon should be used for the trailing\n\t\t * button.\n\t\t * @type {'close'|'arrowRight'|'undo'}\n\t\t */\n\t\ttrailingButtonIcon: {\n\t\t\ttype: String,\n\t\t\tdefault: 'close',\n\t\t\tvalidator: (value) => [\n\t\t\t\t'close',\n\t\t\t\t'arrowRight',\n\t\t\t\t'undo',\n\t\t\t].includes(value),\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:modelValue',\n\t],\n\n\tcomputed: {\n\t\tpropsToForward() {\n\t\t\tconst predefinedLabels = {\n\t\t\t\tundo: t('Undo changes'),\n\t\t\t\tclose: t('Clear text'),\n\t\t\t\tarrowRight: t('Save changes'),\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\t// Proxy original NcInputField's props\n\t\t\t\t...Object.fromEntries(\n\t\t\t\t\tObject.entries(this.$props).filter(([key]) => NcInputFieldProps.has(key)),\n\t\t\t\t),\n\t\t\t\t// Adjust aria-label for predefined trailing buttons\n\t\t\t\ttrailingButtonLabel: this.trailingButtonLabel || predefinedLabels[this.trailingButtonIcon],\n\t\t\t}\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Focus the input element\n\t\t *\n\t\t * @public\n\t\t */\n\t\tfocus() {\n\t\t\tthis.$refs.inputField.focus()\n\t\t},\n\n\t\t/**\n\t\t * Select all the text in the input\n\t\t *\n\t\t * @public\n\t\t */\n\t\tselect() {\n\t\t\tthis.$refs.inputField.select()\n\t\t},\n\n\t\thandleInput(event) {\n\t\t\tthis.$emit('update:modelValue', event)\n\t\t},\n\t},\n}\n</script>\n"],"names":["_sfc_main","_createElementBlock","_mergeProps","_createElementVNode","_createCommentVNode","_createBlock","_createSlots","_withCtx","_renderSlot"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/chunks/NcTimezonePicker-DQ7LMeQo.mjs

@@ -0,0 +1,187 @@
+import { r as register, s as t23, a as t, u as t37 } from "./_l10n-C3nxU4O-.mjs";
+import { getTimezoneManager as getTimezoneManager$1 } from "@nextcloud/timezones";
+import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
+import { N as NcSelect } from "./NcSelect-CPlvJjcY.mjs";
+import { resolveComponent, openBlock, createBlock } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+register(t23);
+function getSortedTimezoneList(timezoneList = [], additionalTimezones = []) {
+  const sortedByContinent = {};
+  const sortedList = [];
+  for (const timezoneId of timezoneList) {
+    const components = timezoneId.split("/");
+    let [continent, name] = [components.shift(), components.join("/")];
+    if (!name) {
+      name = continent;
+      continent = t("Global");
+    }
+    sortedByContinent[continent] = sortedByContinent[continent] || {
+      continent,
+      regions: []
+    };
+    sortedByContinent[continent].regions.push({
+      label: getReadableTimezoneName(name),
+      cities: [],
+      timezoneId
+    });
+  }
+  for (const additionalTimezone of additionalTimezones) {
+    const { continent, label, timezoneId } = additionalTimezone;
+    sortedByContinent[continent] = sortedByContinent[continent] || {
+      continent,
+      regions: []
+    };
+    sortedByContinent[continent].regions.push({
+      label,
+      cities: [],
+      timezoneId
+    });
+  }
+  for (const continent in sortedByContinent) {
+    if (!Object.prototype.hasOwnProperty.call(sortedByContinent, continent)) {
+      continue;
+    }
+    sortedByContinent[continent].regions.sort((a, b) => {
+      if (a.label < b.label) {
+        return -1;
+      }
+      return 1;
+    });
+    sortedList.push(sortedByContinent[continent]);
+  }
+  sortedList.sort((a, b) => {
+    if (a.continent < b.continent) {
+      return -1;
+    }
+    return 1;
+  });
+  return sortedList;
+}
+function getReadableTimezoneName(timezoneId) {
+  return timezoneId.split("_").join(" ").replace("St ", "St. ").split("/").join(" - ");
+}
+const timezoneManager = getTimezoneManager$1();
+let initialized = false;
+function getTimezoneManager() {
+  if (!initialized) {
+    timezoneManager.registerDefaultTimezones();
+    initialized = true;
+  }
+  return timezoneManager;
+}
+register(t37);
+const _sfc_main = {
+  name: "NcTimezonePicker",
+  components: {
+    NcSelect
+  },
+  props: {
+    /**
+     * An array of additional timezones to include with the standard database. Useful if there is a custom timezone, e.g. read from user data
+     */
+    additionalTimezones: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * The selected timezone. Use v-model for two-way binding. The default timezone is floating, which means a time independent of timezone. See https://icalendar.org/CalDAV-Access-RFC-4791/7-3-date-and-floating-time.html for details.
+     */
+    modelValue: {
+      type: String,
+      default: "floating"
+    },
+    /**
+     * ID of the inner vue-select element, can be used for labels like: `vs-${uid}__combobox`
+     */
+    uid: {
+      type: [String, Number],
+      default: () => `tz-${GenRandomId(5)}`
+    }
+  },
+  emits: ["update:modelValue"],
+  computed: {
+    placeholder() {
+      return t("Type to search time zone");
+    },
+    selectedTimezone() {
+      for (const additionalTimezone of this.additionalTimezones) {
+        if (additionalTimezone.timezoneId === this.modelValue) {
+          return additionalTimezone;
+        }
+      }
+      return {
+        label: getReadableTimezoneName(this.modelValue),
+        timezoneId: this.modelValue
+      };
+    },
+    options() {
+      const timezoneManager2 = getTimezoneManager();
+      const timezoneList = getSortedTimezoneList(timezoneManager2.listAllTimezones(), this.additionalTimezones);
+      let timezonesGrouped = [];
+      Object.values(timezoneList).forEach((group) => {
+        timezonesGrouped = timezonesGrouped.concat(group.regions);
+      });
+      return timezonesGrouped;
+    }
+  },
+  methods: {
+    t,
+    change(newValue) {
+      if (!newValue) {
+        return;
+      }
+      this.$emit("update:modelValue", newValue.timezoneId);
+    },
+    /**
+     * Returns whether this is a continent label,
+     * or an actual timezone. Continent labels are not selectable.
+     *
+     * @param {string} option The option
+     * @return {boolean}
+     */
+    isSelectable(option) {
+      return !option.timezoneId.startsWith("tz-group__");
+    },
+    /**
+     * Function to filter the timezone list.
+     * We search in the timezoneId, so both continent and region names can be matched.
+     *
+     * @param {object} option The timezone option
+     * @param {string} label The label of the timezone
+     * @param {string} search The search string
+     * @return {boolean}
+     */
+    filterBy(option, label, search) {
+      const terms = search.trim().split(" ");
+      if (option.timezoneId.startsWith("tz-group__")) {
+        return option.regions.some((region) => {
+          return this.matchTimezoneId(region.timezoneId, terms);
+        });
+      }
+      return this.matchTimezoneId(option.timezoneId, terms);
+    },
+    matchTimezoneId(timezoneId, terms) {
+      return terms.every((term) => timezoneId.toLowerCase().includes(term.toLowerCase()));
+    }
+  }
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_NcSelect = resolveComponent("NcSelect");
+  return openBlock(), createBlock(_component_NcSelect, {
+    "aria-label-combobox": $options.t("Search for time zone"),
+    clearable: false,
+    "filter-by": $options.filterBy,
+    "model-value": $options.selectedTimezone,
+    multiple: false,
+    options: $options.options,
+    placeholder: $options.placeholder,
+    selectable: $options.isSelectable,
+    uid: $props.uid,
+    label: "label",
+    "onOption:selected": $options.change
+  }, null, 8, ["aria-label-combobox", "filter-by", "model-value", "options", "placeholder", "selectable", "uid", "onOption:selected"]);
+}
+const NcTimezonePicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  NcTimezonePicker as N
+};

package/dist/chunks/NcTimezonePicker-DQ7LMeQo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcTimezonePicker-DQ7LMeQo.mjs","sources":["../../src/components/NcTimezonePicker/timezone.js","../../src/components/NcTimezonePicker/timezoneDataProviderService.js","../../src/components/NcTimezonePicker/NcTimezonePicker.vue"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport { t } from '../../l10n.js'\n\n/**\n *\n * @param {string[]} timezoneList List of Olsen timezones\n * @param {Array} additionalTimezones List of additional timezones\n * @return {Array}\n */\nexport function getSortedTimezoneList(timezoneList = [], additionalTimezones = []) {\n\tconst sortedByContinent = {}\n\tconst sortedList = []\n\n\tfor (const timezoneId of timezoneList) {\n\t\tconst components = timezoneId.split('/')\n\t\tlet [continent, name] = [components.shift(), components.join('/')]\n\t\tif (!name) {\n\t\t\tname = continent\n\t\t\t// TRANSLATORS This refers to global timezones in the timezone picker\n\t\t\tcontinent = t('Global')\n\t\t}\n\n\t\tsortedByContinent[continent] = sortedByContinent[continent] || {\n\t\t\tcontinent,\n\t\t\tregions: [],\n\t\t}\n\n\t\tsortedByContinent[continent].regions.push({\n\t\t\tlabel: getReadableTimezoneName(name),\n\t\t\tcities: [],\n\t\t\ttimezoneId,\n\t\t})\n\t}\n\n\tfor (const additionalTimezone of additionalTimezones) {\n\t\tconst { continent, label, timezoneId } = additionalTimezone\n\n\t\tsortedByContinent[continent] = sortedByContinent[continent] || {\n\t\t\tcontinent,\n\t\t\tregions: [],\n\t\t}\n\n\t\tsortedByContinent[continent].regions.push({\n\t\t\tlabel,\n\t\t\tcities: [],\n\t\t\ttimezoneId,\n\t\t})\n\t}\n\n\tfor (const continent in sortedByContinent) {\n\t\tif (!Object.prototype.hasOwnProperty.call(sortedByContinent, continent)) {\n\t\t\tcontinue\n\t\t}\n\n\t\tsortedByContinent[continent].regions.sort((a, b) => {\n\t\t\tif (a.label < b.label) {\n\t\t\t\treturn -1\n\t\t\t}\n\n\t\t\treturn 1\n\t\t})\n\t\tsortedList.push(sortedByContinent[continent])\n\t}\n\n\t// Sort continents by name\n\tsortedList.sort((a, b) => {\n\t\tif (a.continent < b.continent) {\n\t\t\treturn -1\n\t\t}\n\n\t\treturn 1\n\t})\n\n\treturn sortedList\n}\n\n/**\n * Get human-readable name for timezoneId\n *\n * @param {string} timezoneId TimezoneId to turn human-readable\n * @return {string}\n */\nexport function getReadableTimezoneName(timezoneId) {\n\treturn timezoneId\n\t\t.split('_')\n\t\t.join(' ')\n\t\t.replace('St ', 'St. ')\n\t\t.split('/')\n\t\t.join(' - ')\n}\n","/**\n * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport { getTimezoneManager } from '@nextcloud/timezones'\n\nconst timezoneManager = getTimezoneManager()\nlet initialized = false\n\n/**\n * Gets the timezone-manager\n * initializes it if necessary\n *\n * @return {object}\n */\nexport default function() {\n\tif (!initialized) {\n\t\ttimezoneManager.registerDefaultTimezones()\n\t\tinitialized = true\n\t}\n\n\treturn timezoneManager\n}\n","<!--\n  - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Example\n```vue\n<template>\n\t<span>\n\t\t<NcTimezonePicker v-model=\"tz\" />\n\t\t{{ tz }}\n\t</span>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttz: 'Hawaiian Standard Time',\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<NcSelect :aria-label-combobox=\"t('Search for time zone')\"\n\t\t:clearable=\"false\"\n\t\t:filter-by=\"filterBy\"\n\t\t:model-value=\"selectedTimezone\"\n\t\t:multiple=\"false\"\n\t\t:options=\"options\"\n\t\t:placeholder=\"placeholder\"\n\t\t:selectable=\"isSelectable\"\n\t\t:uid=\"uid\"\n\t\tlabel=\"label\"\n\t\t@option:selected=\"change\" />\n</template>\n\n<script>\nimport {\n\tgetReadableTimezoneName,\n\tgetSortedTimezoneList,\n} from './timezone.js'\nimport getTimezoneManager from './timezoneDataProviderService.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport NcSelect from '../NcSelect/index.js'\nimport { t } from '../../l10n.js'\n\nexport default {\n\tname: 'NcTimezonePicker',\n\tcomponents: {\n\t\tNcSelect,\n\t},\n\tprops: {\n\t\t/**\n\t\t * An array of additional timezones to include with the standard database. Useful if there is a custom timezone, e.g. read from user data\n\t\t */\n\t\tadditionalTimezones: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\t\t/**\n\t\t * The selected timezone. Use v-model for two-way binding. The default timezone is floating, which means a time independent of timezone. See https://icalendar.org/CalDAV-Access-RFC-4791/7-3-date-and-floating-time.html for details.\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: String,\n\t\t\tdefault: 'floating',\n\t\t},\n\t\t/**\n\t\t * ID of the inner vue-select element, can be used for labels like: `vs-${uid}__combobox`\n\t\t */\n\t\tuid: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: () => `tz-${GenRandomId(5)}`,\n\t\t},\n\t},\n\temits: ['update:modelValue'],\n\tcomputed: {\n\t\tplaceholder() {\n\t\t\treturn t('Type to search time zone')\n\t\t},\n\t\tselectedTimezone() {\n\t\t\tfor (const additionalTimezone of this.additionalTimezones) {\n\t\t\t\tif (additionalTimezone.timezoneId === this.modelValue) {\n\t\t\t\t\treturn additionalTimezone\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tlabel: getReadableTimezoneName(this.modelValue),\n\t\t\t\ttimezoneId: this.modelValue,\n\t\t\t}\n\t\t},\n\t\toptions() {\n\t\t\tconst timezoneManager = getTimezoneManager()\n\t\t\tconst timezoneList = getSortedTimezoneList(timezoneManager.listAllTimezones(), this.additionalTimezones)\n\t\t\t/**\n\t\t\t * Since NcSelect does not support groups,\n\t\t\t * we create an object with the grouped timezones and continent labels.\n\t\t\t *\n\t\t\t * NOTE for now we are removing the grouping from the fields to fix an accessibility issue\n\t\t\t * in the future, other options can be introduced to better display the different areas\n\t\t\t */\n\t\t\tlet timezonesGrouped = []\n\t\t\tObject.values(timezoneList).forEach(group => {\n\t\t\t\t// Add an entry as group label\n\t\t\t\t// timezonesGrouped.push({\n\t\t\t\t// label: group.continent,\n\t\t\t\t// timezoneId: `tz-group__${group.continent}`,\n\t\t\t\t// regions: group.regions,\n\t\t\t\t// })\n\t\t\t\ttimezonesGrouped = timezonesGrouped.concat(group.regions)\n\t\t\t})\n\t\t\treturn timezonesGrouped\n\t\t},\n\t},\n\tmethods: {\n\t\tt,\n\n\t\tchange(newValue) {\n\t\t\tif (!newValue) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t/**\n\t\t\t * Two-way binding of the value prop. Use v-model=\"selectedTimezone\" for two-way binding\n\t\t\t */\n\t\t\tthis.$emit('update:modelValue', newValue.timezoneId)\n\t\t},\n\n\t\t/**\n\t\t * Returns whether this is a continent label,\n\t\t * or an actual timezone. Continent labels are not selectable.\n\t\t *\n\t\t * @param {string} option The option\n\t\t * @return {boolean}\n\t\t */\n\t\tisSelectable(option) {\n\t\t\treturn !option.timezoneId.startsWith('tz-group__')\n\t\t},\n\n\t\t/**\n\t\t * Function to filter the timezone list.\n\t\t * We search in the timezoneId, so both continent and region names can be matched.\n\t\t *\n\t\t * @param {object} option The timezone option\n\t\t * @param {string} label The label of the timezone\n\t\t * @param {string} search The search string\n\t\t * @return {boolean}\n\t\t */\n\t\tfilterBy(option, label, search) {\n\t\t\t// We split the search term in case one searches \"<continent> <region>\".\n\t\t\tconst terms = search.trim().split(' ')\n\n\t\t\t// For the continent labels, we have to check if one region matches every search term.\n\t\t\tif (option.timezoneId.startsWith('tz-group__')) {\n\t\t\t\treturn option.regions.some(region => {\n\t\t\t\t\treturn this.matchTimezoneId(region.timezoneId, terms)\n\t\t\t\t})\n\t\t\t}\n\n\t\t\t// For a region, every search term must be found.\n\t\t\treturn this.matchTimezoneId(option.timezoneId, terms)\n\t\t},\n\n\t\tmatchTimezoneId(timezoneId, terms) {\n\t\t\treturn terms.every(term => timezoneId.toLowerCase().includes(term.toLowerCase()))\n\t\t},\n\t},\n}\n</script>\n"],"names":["getTimezoneManager","timezoneManager","_createBlock"],"mappings":"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"}

package/dist/chunks/NcUserBubble-DrQahQl0.mjs

@@ -0,0 +1,212 @@
+import '../assets/NcUserBubble-CIfQjmmP.css';
+import { openBlock, createElementBlock, renderSlot, warn, resolveComponent, createBlock, resolveDynamicComponent, withCtx, mergeProps, createVNode, normalizeStyle, createElementVNode, toDisplayString, createCommentVNode } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+import { N as NcAvatar } from "./NcAvatar-OjWzLdGK.mjs";
+import { N as NcPopover } from "./NcPopover-BXfbq-Vs.mjs";
+const _sfc_main$1 = {
+  name: "NcUserBubbleDiv"
+};
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", null, [
+    renderSlot(_ctx.$slots, "trigger")
+  ]);
+}
+const NcUserBubbleDiv = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+const _sfc_main = {
+  name: "NcUserBubble",
+  components: {
+    NcAvatar,
+    NcPopover,
+    NcUserBubbleDiv
+  },
+  props: {
+    /**
+     * Override generated avatar, can be an url or an icon class
+     */
+    avatarImage: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Provide the user id if this is a user
+     */
+    user: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Displayed label
+     */
+    displayName: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Whether or not to display the user-status
+     */
+    showUserStatus: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Define the whole bubble as a link
+     */
+    url: {
+      type: String,
+      default: void 0,
+      validator: (url) => {
+        try {
+          url = new URL(url, url?.startsWith?.("/") ? window.location.href : void 0);
+          return !!url;
+        } catch (error) {
+          return false;
+        }
+      }
+    },
+    /**
+     * Default popover state. Requires the UserBubble
+     * to have some content to render inside the popover
+     */
+    open: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Use the primary colour
+     */
+    primary: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * This is the height of the component
+     */
+    size: {
+      type: Number,
+      default: 20
+    },
+    /**
+     * This is the margin of the avatar (size - margin = avatar size)
+     */
+    margin: {
+      type: Number,
+      default: 2
+    }
+  },
+  emits: [
+    "click",
+    "update:open"
+  ],
+  computed: {
+    /**
+     * Is the provided avatar url valid or not
+     *
+     * @return {boolean}
+     */
+    isAvatarUrl() {
+      if (!this.avatarImage) {
+        return false;
+      }
+      try {
+        const url = new URL(this.avatarImage);
+        return !!url;
+      } catch (error) {
+        return false;
+      }
+    },
+    /**
+     * Do we have a custom avatar or not
+     *
+     * @return {boolean}
+     */
+    isCustomAvatar() {
+      return !!this.avatarImage;
+    },
+    hasUrl() {
+      return this.url && this.url.trim() !== "";
+    },
+    isLinkComponent() {
+      return this.hasUrl ? "a" : "div";
+    },
+    styles() {
+      return {
+        content: {
+          height: this.size + "px",
+          lineHeight: this.size + "px",
+          borderRadius: this.size / 2 + "px"
+        },
+        avatar: {
+          marginLeft: this.margin + "px"
+        }
+      };
+    }
+  },
+  mounted() {
+    if (!this.displayName && !this.user) {
+      warn("[NcUserBubble] At least `displayName` or `user` property should be set.");
+    }
+  },
+  methods: {
+    onOpenChange(state) {
+      this.$emit("update:open", state);
+    },
+    /**
+     * Catch and forward click event to parent
+     *
+     * @param {Event} event the click event
+     */
+    onClick(event) {
+      this.$emit("click", event);
+    }
+  }
+};
+const _hoisted_1 = { class: "user-bubble__name" };
+const _hoisted_2 = {
+  key: 0,
+  class: "user-bubble__secondary"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_NcAvatar = resolveComponent("NcAvatar");
+  return openBlock(), createBlock(resolveDynamicComponent(!!_ctx.$slots.default ? "NcPopover" : "NcUserBubbleDiv"), {
+    trigger: "hover focus",
+    shown: $props.open,
+    class: "user-bubble__wrapper",
+    "onUpdate:open": $options.onOpenChange
+  }, {
+    trigger: withCtx(({ attrs }) => [
+      (openBlock(), createBlock(resolveDynamicComponent($options.isLinkComponent), mergeProps({
+        class: ["user-bubble__content", { "user-bubble__content--primary": $props.primary }],
+        style: $options.styles.content,
+        href: $options.hasUrl ? $props.url : null
+      }, attrs, { onClick: $options.onClick }), {
+        default: withCtx(() => [
+          createVNode(_component_NcAvatar, {
+            url: $options.isCustomAvatar && $options.isAvatarUrl ? $props.avatarImage : void 0,
+            "icon-class": $options.isCustomAvatar && !$options.isAvatarUrl ? $props.avatarImage : void 0,
+            user: $props.user,
+            "display-name": $props.displayName,
+            size: $props.size - $props.margin * 2,
+            style: normalizeStyle($options.styles.avatar),
+            "disable-tooltip": true,
+            "disable-menu": true,
+            "show-user-status": $props.showUserStatus,
+            class: "user-bubble__avatar"
+          }, null, 8, ["url", "icon-class", "user", "display-name", "size", "style", "show-user-status"]),
+          createElementVNode("span", _hoisted_1, toDisplayString($props.displayName || $props.user), 1),
+          !!_ctx.$slots.name ? (openBlock(), createElementBlock("span", _hoisted_2, [
+            renderSlot(_ctx.$slots, "name", {}, void 0, true)
+          ])) : createCommentVNode("", true)
+        ]),
+        _: 2
+      }, 1040, ["style", "href", "class", "onClick"]))
+    ]),
+    default: withCtx(() => [
+      renderSlot(_ctx.$slots, "default", {}, void 0, true)
+    ]),
+    _: 3
+  }, 40, ["shown", "onUpdate:open"]);
+}
+const NcUserBubble = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-c724f3fb"]]);
+export {
+  NcUserBubble as N
+};

package/dist/chunks/NcUserBubble-DrQahQl0.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcUserBubble-DrQahQl0.mjs","sources":["../../src/components/NcUserBubble/NcUserBubbleDiv.vue","../../src/components/NcUserBubble/NcUserBubble.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<div>\n\t\t<slot name=\"trigger\" />\n\t</div>\n</template>\n\n<script>\nexport default {\n\tname: 'NcUserBubbleDiv',\n}\n</script>\n","<!--\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 displays a user together with a small avatar in a grey bubble.\nIt's possible to use an actual user's avatar, just an image/icon as a url or an icon-class,\nto link the bubble to e.g. a users profile\nand to show a popover on hover with e.g. the full user name handle / email address or something else.\n\nThis component has the following slot:\n* a default slot which is for the content of the popover (this is passed to the popover component directly).\n\n### Examples\n\n```vue\n<p>\n\tSome text before <NcUserBubble user=\"admin\" display-name=\"Admin Example\" url=\"/test\">@admin@foreign-host.com</NcUserBubble> and after the bubble.\n\t<NcUserBubble avatar-image=\"icon-group\" display-name=\"test group xyz\" :primary=\"true\">Hey there!</NcUserBubble>\n</p>\n```\n\n### Example with name slot\n\n```vue\n<template>\n<NcUserBubble\n\t:margin=\"4\"\n\t:size=\"30\"\n\tdisplay-name=\"Administrator\"\n\tuser=\"admin\">\n\t<template #name>\n\t\t<a href=\"#\"\n\t\t\ttitle=\"Remove user\"\n\t\t\tclass=\"icon-close\"\n\t\t\t@click=\"alert\" />\n\t</template>\n</NcUserBubble>\n</template>\n<script>\nexport default {\n\tmethods: {\n\t\talert() {\n\t\t\talert('Removed')\n\t\t},\n\t},\n}\n</script>\n<style>\n.icon-close {\n\tdisplay: block;\n\theight: 100%;\n}\n</style>\n```\n\n</docs>\n<template>\n\t<component :is=\"!!$slots.default ? 'NcPopover' : 'NcUserBubbleDiv'\"\n\t\ttrigger=\"hover focus\"\n\t\t:shown=\"open\"\n\t\tclass=\"user-bubble__wrapper\"\n\t\t@update:open=\"onOpenChange\">\n\t\t<!-- Main userbubble structure -->\n\t\t<template #trigger=\"{ attrs }\">\n\t\t\t<component :is=\"isLinkComponent\"\n\t\t\t\tclass=\"user-bubble__content\"\n\t\t\t\t:style=\"styles.content\"\n\t\t\t\t:href=\"hasUrl ? url : null\"\n\t\t\t\t:class=\"{ 'user-bubble__content--primary': primary }\"\n\t\t\t\tv-bind=\"attrs\"\n\t\t\t\t@click=\"onClick\">\n\t\t\t\t<!-- NcAvatar -->\n\t\t\t\t<NcAvatar :url=\"isCustomAvatar && isAvatarUrl ? avatarImage : undefined\"\n\t\t\t\t\t:icon-class=\"isCustomAvatar && !isAvatarUrl ? avatarImage : undefined\"\n\t\t\t\t\t:user=\"user\"\n\t\t\t\t\t:display-name=\"displayName\"\n\t\t\t\t\t:size=\"size - (margin * 2)\"\n\t\t\t\t\t:style=\"styles.avatar\"\n\t\t\t\t\t:disable-tooltip=\"true\"\n\t\t\t\t\t:disable-menu=\"true\"\n\t\t\t\t\t:show-user-status=\"showUserStatus\"\n\t\t\t\t\tclass=\"user-bubble__avatar\" />\n\n\t\t\t\t<!-- Name -->\n\t\t\t\t<span class=\"user-bubble__name\">\n\t\t\t\t\t{{ displayName || user }}\n\t\t\t\t</span>\n\n\t\t\t\t<!-- @slot Optional slot just after the name -->\n\t\t\t\t<span v-if=\"!!$slots.name\" class=\"user-bubble__secondary\">\n\t\t\t\t\t<slot name=\"name\" />\n\t\t\t\t</span>\n\t\t\t</component>\n\t\t</template>\n\n\t\t<!-- @slot Main Popover content on userbubble hover/focus -->\n\t\t<slot />\n\t</component>\n</template>\n\n<script>\nimport NcUserBubbleDiv from './NcUserBubbleDiv.vue'\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcPopover from '../NcPopover/index.js'\nimport { warn } from 'vue'\n\nexport default {\n\tname: 'NcUserBubble',\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcPopover,\n\t\tNcUserBubbleDiv,\n\t},\n\tprops: {\n\t\t/**\n\t\t * Override generated avatar, can be an url or an icon class\n\t\t */\n\t\tavatarImage: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Provide the user id if this is a user\n\t\t */\n\t\tuser: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Displayed label\n\t\t */\n\t\tdisplayName: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Whether or not to display the user-status\n\t\t */\n\t\tshowUserStatus: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Define the whole bubble as a link\n\t\t */\n\t\turl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: (url) => {\n\t\t\t\ttry {\n\t\t\t\t\turl = new URL(url, url?.startsWith?.('/') ? window.location.href : undefined)\n\t\t\t\t\treturn !!url\n\t\t\t\t} catch (error) {\n\t\t\t\t\treturn false\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t\t/**\n\t\t * Default popover state. Requires the UserBubble\n\t\t * to have some content to render inside the popover\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Use the primary colour\n\t\t */\n\t\tprimary: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * This is the height of the component\n\t\t */\n\t\tsize: {\n\t\t\ttype: Number,\n\t\t\tdefault: 20,\n\t\t},\n\t\t/**\n\t\t * This is the margin of the avatar (size - margin = avatar size)\n\t\t */\n\t\tmargin: {\n\t\t\ttype: Number,\n\t\t\tdefault: 2,\n\t\t},\n\t},\n\temits: [\n\t\t'click',\n\t\t'update:open',\n\t],\n\tcomputed: {\n\t\t/**\n\t\t * Is the provided avatar url valid or not\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tisAvatarUrl() {\n\t\t\tif (!this.avatarImage) {\n\t\t\t\treturn false\n\t\t\t}\n\n\t\t\ttry {\n\t\t\t\tconst url = new URL(this.avatarImage)\n\t\t\t\treturn !!url\n\t\t\t} catch (error) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t},\n\t\t/**\n\t\t * Do we have a custom avatar or not\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tisCustomAvatar() {\n\t\t\treturn !!this.avatarImage\n\t\t},\n\n\t\thasUrl() {\n\t\t\treturn this.url && this.url.trim() !== ''\n\t\t},\n\n\t\tisLinkComponent() {\n\t\t\treturn this.hasUrl ? 'a' : 'div'\n\t\t},\n\n\t\tstyles() {\n\t\t\treturn {\n\t\t\t\tcontent: {\n\t\t\t\t\theight: this.size + 'px',\n\t\t\t\t\tlineHeight: this.size + 'px',\n\t\t\t\t\tborderRadius: this.size / 2 + 'px',\n\t\t\t\t},\n\t\t\t\tavatar: {\n\t\t\t\t\tmarginLeft: this.margin + 'px',\n\t\t\t\t},\n\t\t\t}\n\t\t},\n\t},\n\tmounted() {\n\t\tif (!this.displayName && !this.user) {\n\t\t\twarn('[NcUserBubble] At least `displayName` or `user` property should be set.')\n\t\t}\n\t},\n\tmethods: {\n\t\tonOpenChange(state) {\n\t\t\tthis.$emit('update:open', state)\n\t\t},\n\t\t/**\n\t\t * Catch and forward click event to parent\n\t\t *\n\t\t * @param {Event} event the click event\n\t\t */\n\t\tonClick(event) {\n\t\t\tthis.$emit('click', event)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.user-bubble {\n\t&__wrapper {\n\t\t// align inline with text\n\t\tdisplay: inline-block;\n\t\tvertical-align: middle;\n\t\t// shrink and allow grow to fit\n\t\tmin-width: 0;\n\t\tmax-width: 100%;\n\t}\n\n\t&__content {\n\t\tdisplay: inline-flex;\n\t\tmax-width: 100%;\n\t\tbackground-color: var(--color-background-dark);\n\n\t\t&--primary {\n\t\t\tcolor: var(--color-primary-element-text);\n\t\t\tbackground-color: var(--color-primary-element);\n\t\t}\n\n\t\t> :last-child {\n\t\t\t// border radius left padding\n\t\t\tpadding-right: 8px;\n\t\t}\n\t}\n\n\t&__avatar {\n\t\talign-self: center;\n\t}\n\n\t&__name {\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t}\n\n\t&__name,\n\t&__secondary {\n\t\t// proper spacing between avatar, name & slot\n\t\tpadding: 0;\n\t\tpadding-left: 4px;\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","_createElementBlock","_renderSlot","_openBlock","_createBlock","_resolveDynamicComponent","_withCtx","_mergeProps","_createVNode","_normalizeStyle","_createElementVNode","_toDisplayString","_createCommentVNode"],"mappings":"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"}