@nextcloud/vue 9.0.0-alpha.5 → 9.0.0-alpha.7

package/dist/chunks/NcColorPicker-DQqAv2wB.mjs

@@ -0,0 +1,274 @@
+import '../assets/NcColorPicker-3h8DrL_S.css';
+import { N as NcButton } from "./NcButton-QmfEsvXC.mjs";
+import { N as NcPopover } from "./NcPopover-D4D97Y3j.mjs";
+import { r as register, i as t1, a as t } from "./_l10n-BEP_UzXI.mjs";
+import { d as defaultPalette } from "./GenColors-G1ZRJcz5.mjs";
+import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
+import { A as ArrowLeft } from "./ArrowLeft-CanHG70H.mjs";
+import { C as Check } from "./Check-5i4xKnkl.mjs";
+import { D as DotsHorizontal } from "./DotsHorizontal-AMVAlTNH.mjs";
+import { Chrome } from "@ckpack/vue-color";
+import { defineComponent, resolveComponent, createBlock, openBlock, withCtx, createElementVNode, normalizeClass, createVNode, createElementBlock, createCommentVNode, Transition, Fragment, renderList, normalizeStyle, createTextVNode, toDisplayString, renderSlot, normalizeProps, guardReactiveProps } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+register(t1);
+const HEX_REGEX = /^#([a-f0-9]{3}|[a-f0-9]{6})$/i;
+const _sfc_main = defineComponent({
+  name: "NcColorPicker",
+  components: {
+    ArrowLeft,
+    Check,
+    Chrome,
+    DotsHorizontal,
+    NcButton,
+    NcPopover
+  },
+  props: {
+    /**
+     * A HEX color that represents the initial value of the picker
+     */
+    modelValue: {
+      type: String,
+      required: true
+    },
+    /**
+     * Set to `true` to enable advanced fields including HEX, RGB, and HSL
+     */
+    advancedFields: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Limit selectable colors to only the provided palette
+     */
+    paletteOnly: {
+      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: () => [...defaultPalette],
+      validator: (palette) => palette.every(
+        (item) => typeof item === "string" && HEX_REGEX.test(item) || typeof item === "object" && item.color && HEX_REGEX.test(item.color)
+      )
+    },
+    /**
+     * Selector for the popover container
+     */
+    container: {
+      type: [String, Object, Element, Boolean],
+      default: "body"
+    }
+  },
+  emits: [
+    "submit",
+    "close",
+    "update:open",
+    "update:modelValue"
+  ],
+  data() {
+    return {
+      currentColor: this.modelValue,
+      advanced: false,
+      ariaBack: t("Back"),
+      ariaMore: 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 : t("A color with a HEX value {hex}", { hex: item.color })
+      }));
+    },
+    uid() {
+      return GenRandomId();
+    },
+    contrastColor() {
+      const black = "#000000";
+      const white = "#FFFFFF";
+      return this.calculateLuma(this.currentColor) > 0.5 ? black : white;
+    }
+  },
+  watch: {
+    modelValue(color) {
+      this.currentColor = color;
+    }
+  },
+  methods: {
+    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("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.$emit("update:modelValue", 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
+     */
+    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)] : null;
+    }
+  }
+});
+const _hoisted_1 = ["aria-label"];
+const _hoisted_2 = {
+  key: 0,
+  class: "color-picker__simple"
+};
+const _hoisted_3 = ["aria-label", "name", "checked", "onClick"];
+const _hoisted_4 = {
+  key: 0,
+  class: "color-picker__navigation"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_Check = resolveComponent("Check");
+  const _component_Chrome = resolveComponent("Chrome");
+  const _component_ArrowLeft = resolveComponent("ArrowLeft");
+  const _component_NcButton = resolveComponent("NcButton");
+  const _component_DotsHorizontal = resolveComponent("DotsHorizontal");
+  const _component_NcPopover = resolveComponent("NcPopover");
+  return openBlock(), createBlock(_component_NcPopover, {
+    "popup-role": "dialog",
+    container: _ctx.container,
+    onApplyHide: _ctx.handleClose
+  }, {
+    trigger: withCtx((slotProps) => [
+      renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps)), void 0, true)
+    ]),
+    default: withCtx((slotProps) => [
+      createElementVNode("div", {
+        role: "dialog",
+        class: normalizeClass(["color-picker", { "color-picker--advanced-fields": _ctx.advanced && _ctx.advancedFields }]),
+        "aria-modal": "true",
+        "aria-label": _ctx.t("Color picker")
+      }, [
+        createVNode(Transition, {
+          name: "slide",
+          mode: "out-in"
+        }, {
+          default: withCtx(() => [
+            !_ctx.advanced ? (openBlock(), createElementBlock("div", _hoisted_2, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.normalizedPalette, ({ color, name }, index) => {
+                return openBlock(), createElementBlock("label", {
+                  key: index,
+                  style: normalizeStyle({ backgroundColor: color }),
+                  class: normalizeClass(["color-picker__simple-color-circle", { "color-picker__simple-color-circle--active": color === _ctx.currentColor }])
+                }, [
+                  color === _ctx.currentColor ? (openBlock(), createBlock(_component_Check, {
+                    key: 0,
+                    size: 20,
+                    "fill-color": _ctx.contrastColor
+                  }, null, 8, ["fill-color"])) : createCommentVNode("", true),
+                  createElementVNode("input", {
+                    type: "radio",
+                    class: "hidden-visually",
+                    "aria-label": name,
+                    name: `color-picker-${_ctx.uid}`,
+                    checked: color === _ctx.currentColor,
+                    onClick: ($event) => _ctx.pickColor(color)
+                  }, null, 8, _hoisted_3)
+                ], 6);
+              }), 128))
+            ])) : (openBlock(), createBlock(_component_Chrome, {
+              key: 1,
+              modelValue: _ctx.currentColor,
+              "onUpdate:modelValue": [
+                _cache[0] || (_cache[0] = ($event) => _ctx.currentColor = $event),
+                _ctx.pickColor
+              ],
+              class: "color-picker__advanced",
+              "disable-alpha": true,
+              "disable-fields": !_ctx.advancedFields
+            }, null, 8, ["modelValue", "disable-fields", "onUpdate:modelValue"]))
+          ]),
+          _: 1
+        }),
+        !_ctx.paletteOnly ? (openBlock(), createElementBlock("div", _hoisted_4, [
+          _ctx.advanced ? (openBlock(), createBlock(_component_NcButton, {
+            key: 0,
+            type: "tertiary",
+            "aria-label": _ctx.ariaBack,
+            onClick: _ctx.handleBack
+          }, {
+            icon: withCtx(() => [
+              createVNode(_component_ArrowLeft, { size: 20 })
+            ]),
+            _: 1
+          }, 8, ["aria-label", "onClick"])) : (openBlock(), createBlock(_component_NcButton, {
+            key: 1,
+            type: "tertiary",
+            "aria-label": _ctx.ariaMore,
+            onClick: _ctx.handleMoreSettings
+          }, {
+            icon: withCtx(() => [
+              createVNode(_component_DotsHorizontal, { size: 20 })
+            ]),
+            _: 1
+          }, 8, ["aria-label", "onClick"])),
+          createVNode(_component_NcButton, {
+            type: "primary",
+            onClick: ($event) => _ctx.handleConfirm(slotProps.hide)
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(_ctx.t("Choose")), 1)
+            ]),
+            _: 2
+          }, 1032, ["onClick"])
+        ])) : createCommentVNode("", true)
+      ], 10, _hoisted_1)
+    ]),
+    _: 3
+  }, 8, ["container", "onApplyHide"]);
+}
+const NcColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-2b167f1d"]]);
+export {
+  NcColorPicker as N
+};

package/dist/chunks/NcColorPicker-DQqAv2wB.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcColorPicker-DQqAv2wB.mjs","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-model 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\" v-model:shown=\"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 popup-role=\"dialog\"\n\t\t:container=\"container\"\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 role=\"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 v-for=\"({ color, name }, index) in normalizedPalette\"\n\t\t\t\t\t\t\t:key=\"index\"\n\t\t\t\t\t\t\t:style=\"{ backgroundColor: color }\"\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<Check v-if=\"color === currentColor\" :size=\"20\" :fill-color=\"contrastColor\" />\n\t\t\t\t\t\t\t<input type=\"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 v-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@update:model-value=\"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 v-if=\"advanced\"\n\t\t\t\t\t\ttype=\"tertiary\"\n\t\t\t\t\t\t:aria-label=\"ariaBack\"\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<ArrowLeft :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcButton>\n\t\t\t\t\t<NcButton v-else\n\t\t\t\t\t\ttype=\"tertiary\"\n\t\t\t\t\t\t:aria-label=\"ariaMore\"\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<DotsHorizontal :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcButton>\n\t\t\t\t\t<NcButton type=\"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 NcButton from '../NcButton/index.ts'\nimport NcPopover from '../NcPopover/index.js'\nimport { t } from '../../l10n.js'\nimport { defaultPalette } from '../../utils/GenColors.js'\n\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'\nimport Check from 'vue-material-design-icons/Check.vue'\nimport DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'\n\nimport { Chrome } from '@ckpack/vue-color'\nimport { defineComponent } from 'vue'\n\nconst HEX_REGEX = /^#([a-f0-9]{3}|[a-f0-9]{6})$/i\n\nexport default defineComponent({\n\tname: 'NcColorPicker',\n\n\tcomponents: {\n\t\tArrowLeft,\n\t\tCheck,\n\t\tChrome,\n\t\tDotsHorizontal,\n\t\tNcButton,\n\t\tNcPopover,\n\t},\n\n\tprops: {\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\trequired: true,\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 * 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\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 =>\n\t\t\t\t(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\t),\n\t\t},\n\n\t\t/**\n\t\t * Selector for the popover container\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: [String, Object, Element, Boolean],\n\t\t\tdefault: 'body',\n\t\t},\n\t},\n\n\temits: [\n\t\t'submit',\n\t\t'close',\n\t\t'update:open',\n\t\t'update:modelValue',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tcurrentColor: this.modelValue,\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\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\tmodelValue(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 * @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\t\thandleClose() {\n\t\t\t/**\n\t\t\t * Emitted after picker close\n\t\t\t */\n\t\t\tthis.$emit('close')\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\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\t/**\n\t\t\t * Emits a hexadecimal string e.g. '#ffffff'\n\t\t\t */\n\t\t\tthis.$emit('update:modelValue', color)\n\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\t calculateLuma(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 */\n\t\t hexToRGB(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: null\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\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-from {\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-from {\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":["_createBlock","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps","_createElementVNode","_normalizeClass","_createVNode","_Transition","_openBlock","_createElementBlock","_Fragment","_renderList","_normalizeStyle","_createCommentVNode","_createTextVNode","_toDisplayString"],"mappings":"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"}

package/dist/chunks/NcContent-CsDFFKvH.mjs

@@ -0,0 +1,130 @@
+import '../assets/NcContent-BgziefsK.css';
+import { emit } from "@nextcloud/event-bus";
+import { useIsMobile } from "../composables/useIsMobile/index.mjs";
+import { r as register, B as t28, a as t } from "./_l10n-BEP_UzXI.mjs";
+import { N as NcButton } from "./NcButton-QmfEsvXC.mjs";
+import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-BYTrkA66.mjs";
+import { resolveComponent, createElementBlock, openBlock, normalizeClass, createBlock, renderSlot, Teleport, createElementVNode, withDirectives, toDisplayString, createVNode, withModifiers, withCtx, createTextVNode, vShow } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+register(t28);
+const contentSvg = '<!--\n  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n<svg width="395" height="314" viewBox="0 0 395 314" fill="none" xmlns="http://www.w3.org/2000/svg">\n<rect width="395" height="314" rx="11" fill="#439DCD"/>\n<rect x="13" y="51" width="366" height="248" rx="8" fill="white"/>\n<rect x="22" y="111" width="92" height="12" rx="6" fill="#DEDEDE"/>\n<rect x="22" y="127" width="92" height="12" rx="6" fill="#DEDEDE"/>\n<rect x="22" y="63" width="92" height="12" rx="6" fill="#DEDEDE"/>\n<rect x="22" y="191" width="92" height="12" rx="6" fill="#DEDEDE"/>\n<rect x="22" y="143" width="92" height="12" rx="6" fill="#DEDEDE"/>\n<rect x="22" y="79" width="92" height="12" rx="6" fill="#DEDEDE"/>\n<rect x="22" y="159" width="92" height="12" rx="6" fill="#DEDEDE"/>\n<rect x="22" y="95" width="92" height="12" rx="6" fill="#DEDEDE"/>\n<rect x="22" y="175" width="92" height="12" rx="6" fill="#DEDEDE"/>\n<path d="M288 145C277.56 147.8 265.32 149 254 149C242.68 149 230.44 147.8 220 145L218 153C225.44 155 234 156.32 242 157V209H250V185H258V209H266V157C274 156.32 282.56 155 290 153L288 145ZM254 145C258.4 145 262 141.4 262 137C262 132.6 258.4 129 254 129C249.6 129 246 132.6 246 137C246 141.4 249.6 145 254 145Z" fill="#DEDEDE"/>\n<path d="M43.5358 13C38.6641 13 34.535 16.2415 33.2552 20.6333C32.143 18.3038 29.7327 16.6718 26.9564 16.6718C23.1385 16.6718 20 19.7521 20 23.4993C20 27.2465 23.1385 30.3282 26.9564 30.3282C29.7327 30.3282 32.1429 28.6952 33.2552 26.3653C34.535 30.7575 38.6641 34 43.5358 34C48.3715 34 52.4796 30.8064 53.7921 26.4637C54.9249 28.7407 57.3053 30.3282 60.0421 30.3282C63.8601 30.3282 67 27.2465 67 23.4993C67 19.7521 63.8601 16.6718 60.0421 16.6718C57.3053 16.6718 54.9249 18.2583 53.7921 20.5349C52.4796 16.1926 48.3715 13 43.5358 13ZM43.5358 17.0079C47.2134 17.0079 50.1512 19.8899 50.1512 23.4993C50.1512 27.1087 47.2134 29.9921 43.5358 29.9921C39.8583 29.9921 36.9218 27.1087 36.9218 23.4993C36.9218 19.8899 39.8583 17.0079 43.5358 17.0079ZM26.9564 20.6797C28.5677 20.6797 29.8307 21.9179 29.8307 23.4993C29.8307 25.0807 28.5677 26.3203 26.9564 26.3203C25.3452 26.3203 24.0836 25.0807 24.0836 23.4993C24.0836 21.9179 25.3452 20.6797 26.9564 20.6797ZM60.0421 20.6797C61.6534 20.6797 62.9164 21.9179 62.9164 23.4993C62.9164 25.0807 61.6534 26.3203 60.0421 26.3203C58.4309 26.3203 57.1693 25.0807 57.1693 23.4993C57.1693 21.9179 58.4309 20.6797 60.0421 20.6797Z" fill="white"/>\n<rect x="79" y="20" width="8" height="8" rx="4" fill="white"/>\n<rect x="99" y="20" width="8" height="8" rx="4" fill="white"/>\n<rect x="119" y="20" width="8" height="8" rx="4" fill="white"/>\n<rect x="139" y="20" width="8" height="8" rx="4" fill="white"/>\n<rect x="159" y="20" width="8" height="8" rx="4" fill="white"/>\n<rect x="179" y="20" width="8" height="8" rx="4" fill="white"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C5.37258 0 0 5.37259 0 12V302C0 308.627 5.37259 314 12 314H383C389.627 314 395 308.627 395 302V12C395 5.37258 389.627 0 383 0H12ZM140 44C132.268 44 126 50.268 126 58V292C126 299.732 132.268 306 140 306H372C379.732 306 386 299.732 386 292V58C386 50.268 379.732 44 372 44H140Z" fill="black" fill-opacity="0.35"/>\n</svg>\n';
+const navigationSvg = '<!--\n  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n<svg width="395" height="314" viewBox="0 0 395 314" fill="none" xmlns="http://www.w3.org/2000/svg">\n<rect width="395" height="314" rx="11" fill="#439DCD"/>\n<rect x="13" y="51" width="366" height="248" rx="8" fill="white"/>\n<rect x="22" y="111" width="92" height="12" rx="6" fill="#DEDEDE"/>\n<rect x="22" y="127" width="92" height="12" rx="6" fill="#DEDEDE"/>\n<rect x="22" y="63" width="92" height="12" rx="6" fill="#DEDEDE"/>\n<rect x="22" y="191" width="92" height="12" rx="6" fill="#DEDEDE"/>\n<rect x="22" y="143" width="92" height="12" rx="6" fill="#DEDEDE"/>\n<rect x="22" y="79" width="92" height="12" rx="6" fill="#DEDEDE"/>\n<rect x="22" y="159" width="92" height="12" rx="6" fill="#DEDEDE"/>\n<rect x="22" y="95" width="92" height="12" rx="6" fill="#DEDEDE"/>\n<rect x="22" y="175" width="92" height="12" rx="6" fill="#DEDEDE"/>\n<path d="M288 145C277.56 147.8 265.32 149 254 149C242.68 149 230.44 147.8 220 145L218 153C225.44 155 234 156.32 242 157V209H250V185H258V209H266V157C274 156.32 282.56 155 290 153L288 145ZM254 145C258.4 145 262 141.4 262 137C262 132.6 258.4 129 254 129C249.6 129 246 132.6 246 137C246 141.4 249.6 145 254 145Z" fill="#DEDEDE"/>\n<path d="M43.5358 13C38.6641 13 34.535 16.2415 33.2552 20.6333C32.143 18.3038 29.7327 16.6718 26.9564 16.6718C23.1385 16.6718 20 19.7521 20 23.4993C20 27.2465 23.1385 30.3282 26.9564 30.3282C29.7327 30.3282 32.1429 28.6952 33.2552 26.3653C34.535 30.7575 38.6641 34 43.5358 34C48.3715 34 52.4796 30.8064 53.7921 26.4637C54.9249 28.7407 57.3053 30.3282 60.0421 30.3282C63.8601 30.3282 67 27.2465 67 23.4993C67 19.7521 63.8601 16.6718 60.0421 16.6718C57.3053 16.6718 54.9249 18.2583 53.7921 20.5349C52.4796 16.1926 48.3715 13 43.5358 13ZM43.5358 17.0079C47.2134 17.0079 50.1512 19.8899 50.1512 23.4993C50.1512 27.1087 47.2134 29.9921 43.5358 29.9921C39.8583 29.9921 36.9218 27.1087 36.9218 23.4993C36.9218 19.8899 39.8583 17.0079 43.5358 17.0079ZM26.9564 20.6797C28.5677 20.6797 29.8307 21.9179 29.8307 23.4993C29.8307 25.0807 28.5677 26.3203 26.9564 26.3203C25.3452 26.3203 24.0836 25.0807 24.0836 23.4993C24.0836 21.9179 25.3452 20.6797 26.9564 20.6797ZM60.0421 20.6797C61.6534 20.6797 62.9164 21.9179 62.9164 23.4993C62.9164 25.0807 61.6534 26.3203 60.0421 26.3203C58.4309 26.3203 57.1693 25.0807 57.1693 23.4993C57.1693 21.9179 58.4309 20.6797 60.0421 20.6797Z" fill="white"/>\n<rect x="79" y="20" width="8" height="8" rx="4" fill="white"/>\n<rect x="99" y="20" width="8" height="8" rx="4" fill="white"/>\n<rect x="119" y="20" width="8" height="8" rx="4" fill="white"/>\n<rect x="139" y="20" width="8" height="8" rx="4" fill="white"/>\n<rect x="159" y="20" width="8" height="8" rx="4" fill="white"/>\n<rect x="179" y="20" width="8" height="8" rx="4" fill="white"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C5.37258 0 0 5.37259 0 12V302C0 308.627 5.37259 314 12 314H383C389.627 314 395 308.627 395 302V12C395 5.37258 389.627 0 383 0H12ZM112 44C119.732 44 126 50.268 126 58V292C126 299.732 119.732 306 112 306H20C12.268 306 6 299.732 6 292V58C6 50.268 12.268 44 20 44H112Z" fill="black" fill-opacity="0.35"/>\n</svg>\n';
+const _sfc_main = {
+  name: "NcContent",
+  components: {
+    NcButton,
+    NcIconSvgWrapper
+  },
+  provide() {
+    return {
+      "NcContent:setHasAppNavigation": this.setAppNavigation,
+      "NcContent:selector": "#content-vue"
+    };
+  },
+  props: {
+    appName: {
+      type: String,
+      required: true
+    }
+  },
+  setup() {
+    const isMobile = useIsMobile();
+    return {
+      isMobile
+    };
+  },
+  data() {
+    return {
+      hasAppNavigation: false,
+      currentFocus: ""
+      // unknown
+    };
+  },
+  computed: {
+    currentImage() {
+      if (this.currentFocus === "navigation") {
+        return navigationSvg;
+      }
+      return contentSvg;
+    }
+  },
+  beforeMount() {
+    const container = document.getElementById("skip-actions");
+    if (container) {
+      container.innerHTML = "";
+      container.classList.add("vue-skip-actions");
+    }
+  },
+  methods: {
+    t,
+    openAppNavigation() {
+      emit("toggle-navigation", { open: true });
+      this.$nextTick(() => {
+        window.location.hash = "app-navigation-vue";
+        document.getElementById("app-navigation-vue").focus();
+      });
+    },
+    setAppNavigation(value) {
+      this.hasAppNavigation = value;
+      if (this.currentFocus === "") {
+        this.currentFocus = "navigation";
+      }
+    }
+  }
+};
+const _hoisted_1 = { class: "vue-skip-actions__container" };
+const _hoisted_2 = { class: "vue-skip-actions__headline" };
+const _hoisted_3 = { class: "vue-skip-actions__buttons" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_NcButton = resolveComponent("NcButton");
+  const _component_NcIconSvgWrapper = resolveComponent("NcIconSvgWrapper");
+  return openBlock(), createElementBlock("div", {
+    id: "content-vue",
+    class: normalizeClass(["content", `app-${$props.appName.toLowerCase()}`])
+  }, [
+    (openBlock(), createBlock(Teleport, { to: "#skip-actions" }, [
+      createElementVNode("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, toDisplayString($options.t("Keyboard navigation help")), 1),
+        createElementVNode("div", _hoisted_3, [
+          withDirectives(createVNode(_component_NcButton, {
+            type: "tertiary",
+            href: "#app-navigation-vue",
+            onClick: withModifiers($options.openAppNavigation, ["prevent"]),
+            onFocusin: _cache[0] || (_cache[0] = ($event) => $data.currentFocus = "navigation"),
+            onMouseover: _cache[1] || (_cache[1] = ($event) => $data.currentFocus = "navigation")
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString($options.t("Skip to app navigation")), 1)
+            ]),
+            _: 1
+          }, 8, ["onClick"]), [
+            [vShow, $data.hasAppNavigation]
+          ]),
+          createVNode(_component_NcButton, {
+            type: "tertiary",
+            href: "#app-content-vue",
+            onFocusin: _cache[2] || (_cache[2] = ($event) => $data.currentFocus = "content"),
+            onMouseover: _cache[3] || (_cache[3] = ($event) => $data.currentFocus = "content")
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString($options.t("Skip to main content")), 1)
+            ]),
+            _: 1
+          })
+        ]),
+        withDirectives(createVNode(_component_NcIconSvgWrapper, {
+          class: "vue-skip-actions__image",
+          svg: $options.currentImage,
+          size: "auto"
+        }, null, 8, ["svg"]), [
+          [vShow, !$setup.isMobile]
+        ])
+      ])
+    ])),
+    renderSlot(_ctx.$slots, "default", {}, void 0, true)
+  ], 2);
+}
+const NcContent = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-22bc26c3"]]);
+export {
+  NcContent as N
+};

package/dist/chunks/NcContent-CsDFFKvH.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcContent-CsDFFKvH.mjs","sources":["../../src/components/NcContent/content-selected.svg?raw","../../src/components/NcContent/navigation-selected.svg?raw","../../src/components/NcContent/NcContent.vue"],"sourcesContent":["export default \"<!--\\n  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\\n  - SPDX-License-Identifier: AGPL-3.0-or-later\\n-->\\n<svg width=\\\"395\\\" height=\\\"314\\\" viewBox=\\\"0 0 395 314\\\" fill=\\\"none\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\">\\n<rect width=\\\"395\\\" height=\\\"314\\\" rx=\\\"11\\\" fill=\\\"#439DCD\\\"/>\\n<rect x=\\\"13\\\" y=\\\"51\\\" width=\\\"366\\\" height=\\\"248\\\" rx=\\\"8\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"22\\\" y=\\\"111\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"127\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"63\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"191\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"143\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"79\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"159\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"95\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"175\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<path d=\\\"M288 145C277.56 147.8 265.32 149 254 149C242.68 149 230.44 147.8 220 145L218 153C225.44 155 234 156.32 242 157V209H250V185H258V209H266V157C274 156.32 282.56 155 290 153L288 145ZM254 145C258.4 145 262 141.4 262 137C262 132.6 258.4 129 254 129C249.6 129 246 132.6 246 137C246 141.4 249.6 145 254 145Z\\\" fill=\\\"#DEDEDE\\\"/>\\n<path d=\\\"M43.5358 13C38.6641 13 34.535 16.2415 33.2552 20.6333C32.143 18.3038 29.7327 16.6718 26.9564 16.6718C23.1385 16.6718 20 19.7521 20 23.4993C20 27.2465 23.1385 30.3282 26.9564 30.3282C29.7327 30.3282 32.1429 28.6952 33.2552 26.3653C34.535 30.7575 38.6641 34 43.5358 34C48.3715 34 52.4796 30.8064 53.7921 26.4637C54.9249 28.7407 57.3053 30.3282 60.0421 30.3282C63.8601 30.3282 67 27.2465 67 23.4993C67 19.7521 63.8601 16.6718 60.0421 16.6718C57.3053 16.6718 54.9249 18.2583 53.7921 20.5349C52.4796 16.1926 48.3715 13 43.5358 13ZM43.5358 17.0079C47.2134 17.0079 50.1512 19.8899 50.1512 23.4993C50.1512 27.1087 47.2134 29.9921 43.5358 29.9921C39.8583 29.9921 36.9218 27.1087 36.9218 23.4993C36.9218 19.8899 39.8583 17.0079 43.5358 17.0079ZM26.9564 20.6797C28.5677 20.6797 29.8307 21.9179 29.8307 23.4993C29.8307 25.0807 28.5677 26.3203 26.9564 26.3203C25.3452 26.3203 24.0836 25.0807 24.0836 23.4993C24.0836 21.9179 25.3452 20.6797 26.9564 20.6797ZM60.0421 20.6797C61.6534 20.6797 62.9164 21.9179 62.9164 23.4993C62.9164 25.0807 61.6534 26.3203 60.0421 26.3203C58.4309 26.3203 57.1693 25.0807 57.1693 23.4993C57.1693 21.9179 58.4309 20.6797 60.0421 20.6797Z\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"79\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"99\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"119\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"139\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"159\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"179\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<path fill-rule=\\\"evenodd\\\" clip-rule=\\\"evenodd\\\" d=\\\"M12 0C5.37258 0 0 5.37259 0 12V302C0 308.627 5.37259 314 12 314H383C389.627 314 395 308.627 395 302V12C395 5.37258 389.627 0 383 0H12ZM140 44C132.268 44 126 50.268 126 58V292C126 299.732 132.268 306 140 306H372C379.732 306 386 299.732 386 292V58C386 50.268 379.732 44 372 44H140Z\\\" fill=\\\"black\\\" fill-opacity=\\\"0.35\\\"/>\\n</svg>\\n\"","export default \"<!--\\n  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\\n  - SPDX-License-Identifier: AGPL-3.0-or-later\\n-->\\n<svg width=\\\"395\\\" height=\\\"314\\\" viewBox=\\\"0 0 395 314\\\" fill=\\\"none\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\">\\n<rect width=\\\"395\\\" height=\\\"314\\\" rx=\\\"11\\\" fill=\\\"#439DCD\\\"/>\\n<rect x=\\\"13\\\" y=\\\"51\\\" width=\\\"366\\\" height=\\\"248\\\" rx=\\\"8\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"22\\\" y=\\\"111\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"127\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"63\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"191\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"143\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"79\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"159\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"95\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"175\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<path d=\\\"M288 145C277.56 147.8 265.32 149 254 149C242.68 149 230.44 147.8 220 145L218 153C225.44 155 234 156.32 242 157V209H250V185H258V209H266V157C274 156.32 282.56 155 290 153L288 145ZM254 145C258.4 145 262 141.4 262 137C262 132.6 258.4 129 254 129C249.6 129 246 132.6 246 137C246 141.4 249.6 145 254 145Z\\\" fill=\\\"#DEDEDE\\\"/>\\n<path d=\\\"M43.5358 13C38.6641 13 34.535 16.2415 33.2552 20.6333C32.143 18.3038 29.7327 16.6718 26.9564 16.6718C23.1385 16.6718 20 19.7521 20 23.4993C20 27.2465 23.1385 30.3282 26.9564 30.3282C29.7327 30.3282 32.1429 28.6952 33.2552 26.3653C34.535 30.7575 38.6641 34 43.5358 34C48.3715 34 52.4796 30.8064 53.7921 26.4637C54.9249 28.7407 57.3053 30.3282 60.0421 30.3282C63.8601 30.3282 67 27.2465 67 23.4993C67 19.7521 63.8601 16.6718 60.0421 16.6718C57.3053 16.6718 54.9249 18.2583 53.7921 20.5349C52.4796 16.1926 48.3715 13 43.5358 13ZM43.5358 17.0079C47.2134 17.0079 50.1512 19.8899 50.1512 23.4993C50.1512 27.1087 47.2134 29.9921 43.5358 29.9921C39.8583 29.9921 36.9218 27.1087 36.9218 23.4993C36.9218 19.8899 39.8583 17.0079 43.5358 17.0079ZM26.9564 20.6797C28.5677 20.6797 29.8307 21.9179 29.8307 23.4993C29.8307 25.0807 28.5677 26.3203 26.9564 26.3203C25.3452 26.3203 24.0836 25.0807 24.0836 23.4993C24.0836 21.9179 25.3452 20.6797 26.9564 20.6797ZM60.0421 20.6797C61.6534 20.6797 62.9164 21.9179 62.9164 23.4993C62.9164 25.0807 61.6534 26.3203 60.0421 26.3203C58.4309 26.3203 57.1693 25.0807 57.1693 23.4993C57.1693 21.9179 58.4309 20.6797 60.0421 20.6797Z\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"79\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"99\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"119\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"139\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"159\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"179\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<path fill-rule=\\\"evenodd\\\" clip-rule=\\\"evenodd\\\" d=\\\"M12 0C5.37258 0 0 5.37259 0 12V302C0 308.627 5.37259 314 12 314H383C389.627 314 395 308.627 395 302V12C395 5.37258 389.627 0 383 0H12ZM112 44C119.732 44 126 50.268 126 58V292C126 299.732 119.732 306 112 306H20C12.268 306 6 299.732 6 292V58C6 50.268 12.268 44 20 44H112Z\\\" fill=\\\"black\\\" fill-opacity=\\\"0.35\\\"/>\\n</svg>\\n\"","<!--\n  - SPDX-FileCopyrightText: 2018 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 provides the default container of all apps.\nIt _MUST_ be used as the main wrapper of your app.\nIt includes the Navigation, the App content and the Sidebar.\n\nIt also will set the skip content buttons needed for accessibility.\n\n### Standard usage\n\n```vue\n\t<template>\n\t\t<div id=\"skip-actions\" />\n\t\t<NcContent app-name=\"forms\">\n\t\t\t<NcAppNavigation>\n\t\t\t\t<template #list>\n\t\t\t\t\t<NcAppNavigationNew text=\"Create article\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"My navigation\" title=\"My title\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Check :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcAppNavigationItem>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigation>\n\t\t\t<NcAppContent>\n\t\t\t\t<h2>Your main app content here</h2>\n\t\t\t\t<NcButton @click=\"opened = !opened\">Toggle sidebar</NcButton>\n\t\t\t</NcAppContent>\n\t\t\t<NcAppSidebar v-if=\"opened\" name=\"cat-picture.jpg\" @close=\"opened=false\">\n\t\t\t\tSidebar content\n\t\t\t</NcAppSidebar>\n\t\t</NcContent>\n\t</template>\n\t<script>\n\timport Check from 'vue-material-design-icons/Check'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tCheck,\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\topened: false,\n\t\t\t}\n\t\t}\n\t}\n\t</script>\n\t<style>\n\t\t#content-vue {\n\t\t\tposition: relative;\n\t\t\twidth: 800px;\n\t\t\theight: 400px;\n\t\t}\n\t</style>\n```\n\n</docs>\n\n<template>\n\t<div id=\"content-vue\" :class=\"['content', `app-${appName.toLowerCase()}`]\">\n\t\t<Teleport to=\"#skip-actions\">\n\t\t\t<div class=\"vue-skip-actions__container\">\n\t\t\t\t<div class=\"vue-skip-actions__headline\">\n\t\t\t\t\t{{ t('Keyboard navigation help') }}\n\t\t\t\t</div>\n\t\t\t\t<div class=\"vue-skip-actions__buttons\">\n\t\t\t\t\t<NcButton v-show=\"hasAppNavigation\"\n\t\t\t\t\t\ttype=\"tertiary\"\n\t\t\t\t\t\thref=\"#app-navigation-vue\"\n\t\t\t\t\t\t@click.prevent=\"openAppNavigation\"\n\t\t\t\t\t\t@focusin=\"currentFocus = 'navigation'\"\n\t\t\t\t\t\t@mouseover=\"currentFocus = 'navigation'\">\n\t\t\t\t\t\t{{ t('Skip to app navigation') }}\n\t\t\t\t\t</NcButton>\n\t\t\t\t\t<NcButton type=\"tertiary\"\n\t\t\t\t\t\thref=\"#app-content-vue\"\n\t\t\t\t\t\t@focusin=\"currentFocus = 'content'\"\n\t\t\t\t\t\t@mouseover=\"currentFocus = 'content'\">\n\t\t\t\t\t\t{{ t('Skip to main content') }}\n\t\t\t\t\t</NcButton>\n\t\t\t\t</div>\n\t\t\t\t<NcIconSvgWrapper v-show=\"!isMobile\"\n\t\t\t\t\tclass=\"vue-skip-actions__image\"\n\t\t\t\t\t:svg=\"currentImage\"\n\t\t\t\t\tsize=\"auto\" />\n\t\t\t</div>\n\t\t</Teleport>\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\nimport { emit } from '@nextcloud/event-bus'\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\nimport { t } from '../../l10n.js'\n\nimport NcButton from '../NcButton/NcButton.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\n\n/* eslint-disable import/no-unresolved */\nimport contentSvg from './content-selected.svg?raw'\nimport navigationSvg from './navigation-selected.svg?raw'\n/* eslint-enable import/no-unresolved */\n\nexport default {\n\tname: 'NcContent',\n\tcomponents: {\n\t\tNcButton,\n\t\tNcIconSvgWrapper,\n\t},\n\tprovide() {\n\t\treturn {\n\t\t\t'NcContent:setHasAppNavigation': this.setAppNavigation,\n\t\t\t'NcContent:selector': '#content-vue',\n\t\t}\n\t},\n\tprops: {\n\t\tappName: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t},\n\tsetup() {\n\t\tconst isMobile = useIsMobile()\n\t\treturn {\n\t\t\tisMobile,\n\t\t}\n\t},\n\tdata() {\n\t\treturn {\n\t\t\thasAppNavigation: false,\n\t\t\tcurrentFocus: '', // unknown\n\t\t}\n\t},\n\tcomputed: {\n\t\tcurrentImage() {\n\t\t\tif (this.currentFocus === 'navigation') {\n\t\t\t\treturn navigationSvg\n\t\t\t}\n\t\t\treturn contentSvg\n\t\t},\n\t},\n\tbeforeMount() {\n\t\tconst container = document.getElementById('skip-actions')\n\t\tif (container) {\n\t\t\t// clear default buttons\n\t\t\tcontainer.innerHTML = ''\n\t\t\t// add class for scoping styles\n\t\t\tcontainer.classList.add('vue-skip-actions')\n\t\t}\n\t},\n\tmethods: {\n\t\tt,\n\t\topenAppNavigation() {\n\t\t\temit('toggle-navigation', { open: true })\n\t\t\tthis.$nextTick(() => {\n\t\t\t\twindow.location.hash = 'app-navigation-vue'\n\t\t\t\t// we need to manually focus if the window location is already set to the app-navigation then it will not focus again\n\t\t\t\tdocument.getElementById('app-navigation-vue').focus()\n\t\t\t})\n\t\t},\n\t\tsetAppNavigation(value) {\n\t\t\tthis.hasAppNavigation = value\n\t\t\t// If app navigation is available and no focus was set yet, set it to navigation as it is the first button\n\t\t\tif (this.currentFocus === '') {\n\t\t\t\tthis.currentFocus = 'navigation'\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n// Remove server stylings and add a backdrop\n#skip-actions.vue-skip-actions:focus-within {\n\ttop: 0!important;\n\tleft: 0!important;\n\twidth: 100vw;\n\theight: 100vh;\n\tpadding: var(--body-container-margin)!important;\n\tbackdrop-filter: brightness(50%);\n}\n</style>\n\n<style lang=\"scss\" scoped>\n.vue-skip-actions {\n\t&__container {\n\t\tbackground-color: var(--color-main-background);\n\t\tborder-radius: var(--border-radius-large);\n\t\tpadding: 22px;\n\t}\n\n\t&__headline {\n\t\tfont-weight: bold;\n\t\tfont-size: 20px;\n\t\tline-height: 30px;\n\t\tmargin-bottom: 12px;\n\t}\n\n\t&__buttons {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t\tgap: 12px;\n\n\t\t> * {\n\t\t\t// Ensure buttons are same width on smaller screens (container wrapped)\n\t\t\tflex: 1 0 fit-content;\n\t\t}\n\t}\n\n\t&__image {\n\t\tmargin-top: 12px;\n\t}\n}\n\n.content {\n\tdisplay: flex;\n\twidth: calc(100% - var(--body-container-margin) * 2);\n\tborder-radius: var(--body-container-radius);\n\theight: var(--body-height);\n\toverflow: hidden;\n\tpadding: 0;\n\n\t&:not(.with-sidebar--full) {\n\t\tposition: fixed;\n\t}\n\n\t&,\n\t& * {\n\t\tbox-sizing: border-box;\n\t}\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_createBlock","_Teleport","_createElementVNode","_toDisplayString","_createVNode","_withModifiers","_withCtx","_createTextVNode","_renderSlot"],"mappings":"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"}

package/dist/chunks/NcCounterBubble-6B_JNUUS.mjs

@@ -0,0 +1,77 @@
+import '../assets/NcCounterBubble-DWgyYB0d.css';
+import { getCanonicalLocale } from "@nextcloud/l10n";
+import { createElementBlock, openBlock, normalizeClass, toDisplayString } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+const _sfc_main = {
+  name: "NcCounterBubble",
+  props: {
+    type: {
+      type: String,
+      default: "",
+      validator(value) {
+        return ["highlighted", "outlined", ""].includes(value);
+      }
+    },
+    /**
+     * Specifies whether the component is used within a component that is
+     * active and therefore has a primary background. Inverts the color of
+     * this component when that is the case.
+     */
+    active: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * The count to display in the counter bubble.
+     */
+    count: {
+      type: Number,
+      required: true
+    },
+    /**
+     * Disables humanization to display count as it is.
+     */
+    raw: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  computed: {
+    counterClassObject() {
+      return {
+        "counter-bubble__counter--highlighted": this.type === "highlighted",
+        "counter-bubble__counter--outlined": this.type === "outlined",
+        active: this.active
+      };
+    },
+    humanizedCount() {
+      if (this.raw) {
+        return this.count.toString();
+      }
+      const formatter = new Intl.NumberFormat(getCanonicalLocale(), {
+        notation: "compact",
+        compactDisplay: "short"
+      });
+      return formatter.format(this.count);
+    },
+    originalCountAsTitleIfNeeded() {
+      const countAsString = this.count.toString();
+      if (this.raw || countAsString === this.humanizedCount) {
+        return void 0;
+      }
+      return countAsString;
+    }
+  }
+};
+const _hoisted_1 = ["title"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(["counter-bubble__counter", $options.counterClassObject]),
+    title: $options.originalCountAsTitleIfNeeded
+  }, toDisplayString($options.humanizedCount), 11, _hoisted_1);
+}
+const NcCounterBubble = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-f328a941"]]);
+export {
+  NcCounterBubble as N
+};

package/dist/chunks/NcCounterBubble-6B_JNUUS.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcCounterBubble-6B_JNUUS.mjs","sources":["../../src/components/NcCounterBubble/NcCounterBubble.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### Default usage\n\nNcCounterBubble displays a number from the `count` prop in a bubble.\n\nBy default, the number is **humanized** according to Nextcloud user's locale setting. Humanization can be disabled via `raw` prop.\n\n```vue\n<template>\n\t<table>\n\t\t<tr>\n\t\t\t<th>count</th>\n\t\t\t<th>default</th>\n\t\t\t<th>raw</th>\n\t\t</tr>\n\t\t<tr v-for=\"num in numbers\" :key=\"num\">\n\t\t\t<td>{{ num }}</td>\n\t\t\t<td>\n\t\t\t\t<NcCounterBubble :count=\"num\" />\n\t\t\t</td>\n\t\t\t<td>\n\t\t\t\t<NcCounterBubble :count=\"num\" raw />\n\t\t\t</td>\n\t\t</tr>\n\t</table>\n</template>\n\n<script>\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tnumbers: [1, 9, 75, 450, 1042, 1750, 1999, 14567, 14567890, 2000000008],\n\t\t}\n\t},\n}\n</script>\n\n<style scoped>\ntable {\n\tborder-collapse: collapse;\n}\n\nth,\ntd {\n\tborder: 1px solid var(--color-border);\n\tpadding: var(--default-grid-baseline) calc(var(--default-grid-baseline) * 2);\n}\n\nth {\n\tcolor: var(--color-text-maxcontrast);\n}\n</style>\n```\n\n### Styles\n\nUse different styles for different types of counters.\n\n```\n<template>\n\t<table>\n\t\t<tr>\n\t\t\t<th>type</th>\n\t\t\t<th>counter</th>\n\t\t\t<th>Usage example</th>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>'' (default)</td>\n\t\t\t<td>\n\t\t\t\t<NcCounterBubble :count=\"3\" />\n\t\t\t</td>\n\t\t\t<td></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>outlined</td>\n\t\t\t<td><NcCounterBubble :count=\"3\" type=\"outlined\" /></td>\n\t\t\t<td>Team/group mentions</td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>highlighted</td>\n\t\t\t<td>\n\t\t\t\t<NcCounterBubble :count=\"3\" type=\"highlighted\" />\n\t\t\t</td>\n\t\t\t<td>Direct mentions</td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>outlined active</td>\n\t\t\t<td class=\"active-like\">\n\t\t\t\t<NcCounterBubble :count=\"3\" type=\"outlined\" active />\n\t\t\t</td>\n\t\t\t<td>Same as \"outlined\", but in an \"active\" container</td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>highlighted active</td>\n\t\t\t<td class=\"active-like\">\n\t\t\t\t<NcCounterBubble :count=\"3\" type=\"highlighted\" active />\n\t\t\t</td>\n\t\t\t<td>Same as \"highlighted\", but in an \"active\" container</td>\n\t\t</tr>\n\t</table>\n</template>\n\n<style scoped>\ntable {\n\tborder-collapse: collapse;\n}\n\nth,\ntd {\n\tborder: 1px solid var(--color-border);\n\tpadding: var(--default-grid-baseline) calc(var(--default-grid-baseline) * 2);\n\n\t&.active-like {\n\t\tbackground-color: var(--color-primary-element);\n\t}\n}\n\nth {\n\tcolor: var(--color-text-maxcontrast);\n}\n</style>\n```\n\n### Custom content (removed)\n\nIn v8 it was possible to pass any custom content via the default slot. This feature has been removed. Use `count` prop for numbers or [NcChip](#/Components/NcChip) component for a custom content.\n</docs>\n\n<template>\n\t<div class=\"counter-bubble__counter\"\n\t\t:class=\"counterClassObject\"\n\t\t:title=\"originalCountAsTitleIfNeeded\">\n\t\t{{ humanizedCount }}\n\t</div>\n</template>\n\n<script>\nimport { getCanonicalLocale } from '@nextcloud/l10n'\n\nexport default {\n\tname: 'NcCounterBubble',\n\n\tprops: {\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['highlighted', 'outlined', ''].includes(value)\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * Specifies whether the component is used within a component that is\n\t\t * active and therefore has a primary background. Inverts the color of\n\t\t * this component when that is the case.\n\t\t */\n\t\tactive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * The count to display in the counter bubble.\n\t\t */\n\t\tcount: {\n\t\t\ttype: Number,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Disables humanization to display count as it is.\n\t\t */\n\t\traw: {\n\t\t\ttype: Boolean,\n\t\t\trequired: false,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tcounterClassObject() {\n\t\t\treturn {\n\t\t\t\t'counter-bubble__counter--highlighted': this.type === 'highlighted',\n\t\t\t\t'counter-bubble__counter--outlined': this.type === 'outlined',\n\t\t\t\tactive: this.active,\n\t\t\t}\n\t\t},\n\n\t\thumanizedCount() {\n\t\t\tif (this.raw) {\n\t\t\t\treturn this.count.toString()\n\t\t\t}\n\n\t\t\tconst formatter = new Intl.NumberFormat(getCanonicalLocale(), {\n\t\t\t\tnotation: 'compact',\n\t\t\t\tcompactDisplay: 'short',\n\t\t\t})\n\n\t\t\treturn formatter.format(this.count)\n\t\t},\n\n\t\toriginalCountAsTitleIfNeeded() {\n\t\t\tconst countAsString = this.count.toString()\n\n\t\t\t// If raw or unchanged - no need for the title\n\t\t\tif (this.raw || countAsString === this.humanizedCount) {\n\t\t\t\treturn undefined\n\t\t\t}\n\n\t\t\treturn countAsString\n\t\t},\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n.counter-bubble__counter {\n\t--counter-bubble-height: 22px; // ~ 1cap + 2 * 1.5 * grid\n\tfont-size: var(--font-size-small, 13px);\n\toverflow: hidden;\n\twidth: fit-content;\n\tmin-width: var(--counter-bubble-height); // Make it not narrower than a circle\n\ttext-align: center;\n\tline-height: var(--counter-bubble-height); // Expand line-height to full height to center text vertically\n\tpadding: 0 calc(1.5 * var(--default-grid-baseline));\n\tborder-radius: var(--border-radius-pill);\n\tbackground-color: var(--color-primary-element-light);\n\tfont-weight: bold;\n\tcolor: var(--color-primary-element-light-text);\n\n\t& .active {\n\t\tcolor: var(--color-main-background);\n\t\tbackground-color: var(--color-primary-element-light);\n\t}\n\n\t&--highlighted {\n\t\tcolor: var(--color-primary-element-text);\n\t\tbackground-color: var(--color-primary-element);\n\t}\n\n\t&--highlighted.active {\n\t\tcolor: var(--color-primary-element);\n\t\tbackground-color: var(--color-main-background);\n\t}\n\n\t&--outlined {\n\t\tcolor: var(--color-primary-element);\n\t\tbackground: transparent;\n\t\tbox-shadow: inset 0 0 0 2px;\n\t}\n\n\t&--outlined.active {\n\t\tcolor: var(--color-main-background);\n\t\tbox-shadow: inset 0 0 0 2px;\n\t}\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_toDisplayString"],"mappings":";;;AAiJA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,OAAO;AAAA,IACN,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAU,OAAO;AAChB,eAAO,CAAC,eAAe,YAAY,EAAE,EAAE,SAAS,KAAK;AAAA,MACrD;AAAA,IACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,QAAQ;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACN,MAAM;AAAA,MACN,UAAU;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,KAAK;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS;AAAA,IACT;AAAA,EACD;AAAA,EAED,UAAU;AAAA,IACT,qBAAqB;AACpB,aAAO;AAAA,QACN,wCAAwC,KAAK,SAAS;AAAA,QACtD,qCAAqC,KAAK,SAAS;AAAA,QACnD,QAAQ,KAAK;AAAA,MACd;AAAA,IACA;AAAA,IAED,iBAAiB;AAChB,UAAI,KAAK,KAAK;AACb,eAAO,KAAK,MAAM,SAAQ;AAAA,MAC3B;AAEA,YAAM,YAAY,IAAI,KAAK,aAAa,mBAAkB,GAAI;AAAA,QAC7D,UAAU;AAAA,QACV,gBAAgB;AAAA,MAChB,CAAA;AAED,aAAO,UAAU,OAAO,KAAK,KAAK;AAAA,IAClC;AAAA,IAED,+BAA+B;AAC9B,YAAM,gBAAgB,KAAK,MAAM,SAAQ;AAGzC,UAAI,KAAK,OAAO,kBAAkB,KAAK,gBAAgB;AACtD,eAAO;AAAA,MACR;AAEA,aAAO;AAAA,IACP;AAAA,EACD;AACF;AA1NA,MAAA,aAAA,CAAA,OAAA;;sBAuICA,mBAIM,OAAA;AAAA,IAJD,OAvINC,eAAA,CAuIY,2BACF,SAAkB,kBAAA,CAAA;AAAA,IACzB,OAAO,SAA4B;AAAA,EACjC,GAAAC,gBAAA,SAAA,cAAc,GA1InB,IAAA,UAAA;;;"}