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

package/dist/chunks/NcTextArea-DeoDvFwH.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcTextArea-DeoDvFwH.mjs","sources":["../../src/components/NcTextArea/NcTextArea.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Description\n\nThis component is a textarea field.\nIt extends and styles an HTMLTextAreaElement.\n\n```\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcTextArea v-model=\"text\"\n\t\t\tlabel=\"Text area\"\n\t\t\tplaceholder=\"Placeholders are possible\"\n\t\t\thelper-text=\"This is a regular helper text.\" />\n\t\t<NcTextArea label=\"Success state\"\n\t\t\t:success=\"true\" />\n\t\t<NcTextArea label=\"Error state\"\n\t\t\tplaceholder=\"Enter something valid\"\n\t\t\thelper-text=\"Helper texts will be styled accordingly.\"\n\t\t\t:error=\"true\" />\n\t\t<NcTextArea label=\"Disabled\"\n\t\t\t:disabled=\"true\" />\n\t\t<NcTextArea label=\"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<NcTextArea id=\"textField\"\n\t\t\t\t:label-outside=\"true\"\n\t\t\t\tplaceholder=\"Text area with external label\" />\n\t\t</div>\n\t\t<NcTextArea label=\"Custom size and no resize\"\n\t\t\tresize=\"none\"\n\t\t\trows=\"5\" />\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttext: 'This is text.',\n\t\t}\n\t},\n}\n</script>\n\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\talign-items: center;\n\tgap: 14px;\n\n\t> label {\n\t\tflex-shrink: 0;\n\t}\n}\n</style>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport type { VueClassType } from '../../utils/VueTypes.ts'\n\nimport { mdiAlertCircle, mdiCheck } from '@mdi/js'\nimport { computed, useAttrs, useTemplateRef, watch } from 'vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { isLegacy } from '../../utils/legacy.ts'\nimport logger from '../../utils/logger.ts'\n\ndefineOptions({ inheritAttrs: false })\n\n/**\n * The value of the text area\n */\nconst modelValue = defineModel<string>({ required: true })\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * Disable the text area\n\t */\n\tdisabled?: boolean\n\n\t/**\n\t * Toggles the error state of the component.\n\t * Adds an error icon.\n\t */\n\terror?: boolean\n\n\t/**\n\t * Additional helper text message\n\t *\n\t * This will be displayed beneath the input field. In case the field is\n\t * also marked as having an error, the text will be displayed in red.\n\t */\n\thelperText?: string\n\n\t/**\n\t * The id of the textarea element\n\t */\n\tid?: string\n\n\t/**\n\t * Class to add to the `<textarea>` element.\n\t */\n\tinputClass?: VueClassType\n\n\t/**\n\t * The input label, always provide one for accessibility purposes.\n\t * On Nextcloud before version 32 this will also be used as a placeholder\n\t * unless the placeholder prop is populated with a different string.\n\t */\n\tlabel?: string\n\n\t/**\n\t * Pass in true if you want to use an external label. This is useful\n\t * if you need a label that looks different from the one provided by\n\t * this component\n\t */\n\tlabelOutside?: boolean\n\n\t/**\n\t * The placeholder of the input.\n\t * On Nextcloud before 32 this defaults to the value of the `label` prop.\n\t */\n\tplaceholder?: string\n\n\t/**\n\t * The resize CSS property sets whether an element is resizable, and if\n\t * so, in which directions.\n\t */\n\tresize?: 'both' | 'vertical' | 'horizontal' | 'none'\n\n\t/**\n\t * Toggles the success state of the component.\n\t * Adds a checkmark icon.\n\t */\n\tsuccess?: boolean\n}>(), {\n\thelperText: undefined,\n\tid: () => createElementId(),\n\tinputClass: '',\n\tlabel: undefined,\n\tplaceholder: undefined,\n\tresize: 'both',\n})\n\ndefineExpose({\n\tfocus,\n\tselect,\n})\n\n/**\n * The native text area component instance\n */\nconst textAreaElement = useTemplateRef('input')\n\n// needs to be a getter as attrs are not reactive\nconst attrs = useAttrs()\n\nconst internalPlaceholder = computed(() => props.placeholder || (isLegacy ? props.label : undefined))\n\n// warn about invalid labels (missing label and no label outside)\nwatch(() => props.labelOutside, () => {\n\tif (!props.labelOutside && !props.label) {\n\t\tlogger.warn('[NcTextArea] You need to add a label to the NcInputField component. Either use the prop label or use an external one, as per the example in the documentation.')\n\t}\n})\n\nconst ariaDescribedby = computed(() => {\n\tconst ariaDescribedby: string[] = []\n\tif (props.helperText) {\n\t\tariaDescribedby.push(`${props.id}-helper-text`)\n\t}\n\tif (typeof attrs['aria-describedby'] === 'string') {\n\t\tariaDescribedby.push(attrs['aria-describedby'])\n\t}\n\treturn ariaDescribedby.join(' ') || undefined\n})\n\n/**\n * Update the model value to the text area value.\n *\n * @param event - The input event\n */\nfunction handleInput(event: Event) {\n\tconst { value } = event.target as HTMLTextAreaElement\n\tmodelValue.value = value\n}\n\n/**\n * Focus the input element\n *\n * @param options - Focus options\n * @public\n */\nfunction focus(options?: FocusOptions) {\n\ttextAreaElement.value!.focus(options)\n}\n\n/**\n * Select all the text in the input\n *\n * @public\n */\nfunction select() {\n\ttextAreaElement.value!.select()\n}\n</script>\n\n<template>\n\t<div class=\"textarea\"\n\t\t:class=\"[\n\t\t\t$attrs.class,\n\t\t\t{\n\t\t\t\t'textarea--disabled': disabled,\n\t\t\t\t'textarea--legacy': isLegacy,\n\t\t\t},\n\t\t]\">\n\t\t<div class=\"textarea__main-wrapper\">\n\t\t\t<textarea\n\t\t\t\tv-bind=\"{ ...$attrs, class: undefined }\"\n\t\t\t\t:id\n\t\t\t\tref=\"input\"\n\t\t\t\t:aria-describedby\n\t\t\t\taria-live=\"polite\"\n\t\t\t\tclass=\"textarea__input\"\n\t\t\t\t:class=\"[\n\t\t\t\t\tinputClass,\n\t\t\t\t\t{\n\t\t\t\t\t\t'textarea__input--label-outside': labelOutside,\n\t\t\t\t\t\t'textarea__input--legacy': isLegacy,\n\t\t\t\t\t\t'textarea__input--success': success,\n\t\t\t\t\t\t'textarea__input--error': error,\n\t\t\t\t\t},\n\t\t\t\t]\"\n\t\t\t\t:disabled\n\t\t\t\t:placeholder=\"internalPlaceholder\"\n\t\t\t\t:style=\"{ resize }\"\n\t\t\t\t:value=\"modelValue\"\n\t\t\t\t@input=\"handleInput\" />\n\t\t\t<!-- Label -->\n\t\t\t<label\n\t\t\t\tv-if=\"!labelOutside\"\n\t\t\t\tclass=\"textarea__label\"\n\t\t\t\t:for=\"id\">\n\t\t\t\t{{ label }}\n\t\t\t</label>\n\t\t</div>\n\t\t<p\n\t\t\tv-if=\"helperText\"\n\t\t\t:id=\"`${id}-helper-text`\"\n\t\t\tclass=\"textarea__helper-text-message\"\n\t\t\t:class=\"{\n\t\t\t\t'textarea__helper-text-message--error': error,\n\t\t\t\t'textarea__helper-text-message--success': success,\n\t\t\t}\">\n\t\t\t<NcIconSvgWrapper v-if=\"success\" class=\"textarea__helper-text-message__icon\" :path=\"mdiCheck\" />\n\t\t\t<NcIconSvgWrapper v-else-if=\"error\" class=\"textarea__helper-text-message__icon\" :path=\"mdiAlertCircle\" />\n\t\t\t{{ helperText }}\n\t\t</p>\n\t</div>\n</template>\n\n<style lang=\"scss\" scoped>\n.textarea {\n\t--input-border-color: var(--color-border-maxcontrast);\n\t--input-border-width-offset: calc(var(--border-width-input-focused, 2px) - var(--border-width-input, 2px));\n\tposition: relative;\n\twidth: 100%;\n\tborder-radius: var(--border-radius-element);\n\tmargin-block-start: 6px; // for the label in active state\n\tresize: vertical;\n\n\t&--disabled {\n\t\topacity: 0.7;\n\t\tfilter: saturate(0.7);\n\t}\n\n\t&__main-wrapper {\n\t\theight: calc(var(--default-clickable-area) * 2);\n\t\tpadding: var(--border-width-input, 2px);\n\t\tposition: relative;\n\n\t\t&:not(:has([disabled])):has(textarea:focus),\n\t\t&:not(:has([disabled])):has(textarea:active) {\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t&__input {\n\t\tmargin: 0;\n\t\tpadding-block: calc(10px + var(--input-border-width-offset));\n\t\tpadding-inline: calc(12px - var(--border-width-input, 2px) + var(--input-border-width-offset)); // align with label 8px margin label + 4px padding label - 2px border input\n\t\twidth: 100%;\n\t\tfont-size: var(--default-font-size);\n\t\ttext-overflow: ellipsis;\n\t\tcursor: pointer;\n\n\t\tbackground-color: var(--color-main-background);\n\t\tcolor: var(--color-main-text);\n\t\t// we use box shadow to create a border as this allows use to have a nice gradient\n\t\tborder: none;\n\t\tborder-radius: var(--border-radius-element);\n\t\tbox-shadow:\n\t\t\t0 -1px var(--input-border-color),\n\t\t\t0 0 0 1px color-mix(in srgb, var(--input-border-color), 65% transparent);\n\n\t\t&:hover:not([disabled]) {\n\t\t\tbox-shadow: 0 0 0 1px var(--input-border-color);\n\t\t}\n\t\t&:active:not([disabled]),\n\t\t&:focus:not([disabled]) {\n\t\t\t--input-border-width-offset: 0px;\n\t\t\t--input-border-color: var(--color-main-text);\n\t\t\tborder: var(--border-width-input-focused, 2px) solid var(--input-border-color);\n\t\t\tbox-shadow: 0 0 0 2px var(--color-main-background) !important;\n\t\t}\n\n\t\t// Hide placeholder while not focussed -> show label instead (only if internal label is used)\n\t\t&:not(:focus,&--label-outside)::placeholder {\n\t\t\topacity: 0;\n\t\t}\n\n\t\t&:focus {\n\t\t\tcursor: text;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: unset !important; // Override server rules\n\t\t}\n\n\t\t&--success {\n\t\t\t--input-border-color: var(--color-border-success, var(--color-success)) !important; //Override hover border color\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px\n\t\t\t}\n\t\t}\n\n\t\t&--error {\n\t\t\t--input-border-color: var(--color-border-error, var(--color-error)) !important; //Override hover border color\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px\n\t\t\t}\n\t\t}\n\t}\n\n\t&__label {\n\t\tposition: absolute;\n\t\tmargin-inline: 12px 0;\n\t\tmax-width: fit-content;\n\t\tinset-block-start: 11px;\n\t\tinset-inline: 0;\n\t\t// Fix color so that users do not think the input already has content\n\t\tcolor: var(--color-text-maxcontrast);\n\t\t// only one line labels are allowed\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\t// forward events to input\n\t\tpointer-events: none;\n\t\t// Position transition\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick), background-color var(--animation-quick) var(--animation-slow);\n\t}\n\n\t&__input:focus + &__label,\n\t&__input:not(:placeholder-shown) + &__label {\n\t\tinset-block-start: -10px;\n\t\tline-height: 1.5; // minimum allowed line height for accessibility\n\t\tfont-size: 13px; // minimum allowed font size for accessibility\n\t\tfont-weight: 500;\n\t\tcolor: var(--color-main-text);\n\t\tbackground-color: var(--color-main-background);\n\t\tpadding-inline: 4px;\n\t\tmargin-inline-start: 8px;\n\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick);\n\t}\n\n\t&__helper-text-message {\n\t\tpadding-block: 4px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\n\t\t&__icon {\n\t\t\tmargin-inline-end: 8px;\n\t\t}\n\n\t\t&--error {\n\t\t\tcolor: var(--color-error-text);\n\t\t}\n\n\t\t&--success {\n\t\t\tcolor: var(--color-success-text);\n\t\t}\n\t}\n\n\t// for Nextcloud 31 and older we need the old design with only one color\n\t&--legacy {\n\t\t.textarea__input {\n\t\t\tbox-shadow: 0 0 0 1px var(--input-border-color);\n\t\t}\n\n\t\t.textarea__main-wrapper:hover:not(:has([disabled])) {\n\t\t\tpadding: 0;\n\n\t\t\t.textarea__input {\n\t\t\t\t--input-border-color: var(--color-main-text);\n\t\t\t\t// Reset padding offset when focused\n\t\t\t\t--input-border-width-offset: 0px;\n\t\t\t\tborder: var(--border-width-input-focused, 2px) solid var(--input-border-color);\n\t\t\t\tbox-shadow: 0 0 0 2px var(--color-main-background) !important;\n\t\t\t}\n\t\t}\n\t}\n}\n</style>\n"],"names":["_useModel","ariaDescribedby","_createElementBlock","$attrs","disabled","_unref","_createElementVNode","_mergeProps","id","inputClass","labelOutside","success","error","resize","label","helperText","_createBlock","_createTextVNode"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwFA,UAAM,aAAaA,SAAmB,SAAA,YAAmB;AAEzD,UAAM,QAAQ;AAsEd,aAAa;AAAA,MACZ;AAAA,MACA;AAAA,IAAA,CACA;AAKD,UAAM,kBAAkB,eAAe,OAAO;AAG9C,UAAM,QAAQ,SAAA;AAEd,UAAM,sBAAsB,SAAS,MAAM,MAAM,gBAAgB,WAAW,MAAM,QAAQ,OAAU;AAGpG,UAAM,MAAM,MAAM,cAAc,MAAM;AACrC,UAAI,CAAC,MAAM,gBAAgB,CAAC,MAAM,OAAO;AACxC,eAAO,KAAK,gKAAgK;AAAA,MAC7K;AAAA,IACD,CAAC;AAED,UAAM,kBAAkB,SAAS,MAAM;AACtC,YAAMC,mBAA4B,CAAA;AAClC,UAAI,MAAM,YAAY;AACrBA,yBAAgB,KAAK,GAAG,MAAM,EAAE,cAAc;AAAA,MAC/C;AACA,UAAI,OAAO,MAAM,kBAAkB,MAAM,UAAU;AAClDA,yBAAgB,KAAK,MAAM,kBAAkB,CAAC;AAAA,MAC/C;AACA,aAAOA,iBAAgB,KAAK,GAAG,KAAK;AAAA,IACrC,CAAC;AAOD,aAAS,YAAY,OAAc;AAClC,YAAM,EAAE,UAAU,MAAM;AACxB,iBAAW,QAAQ;AAAA,IACpB;AAQA,aAAS,MAAM,SAAwB;AACtC,sBAAgB,MAAO,MAAM,OAAO;AAAA,IACrC;AAOA,aAAS,SAAS;AACjB,sBAAgB,MAAO,OAAA;AAAA,IACxB;;0BAICC,mBAkDM,OAAA;AAAA,QAlDD,uBAAM,YAAU;AAAA,UACPC,KAAAA,OAAO;AAAA;kCAAsCC,KAAAA;AAAAA,gCAAkCC,MAAA,QAAA;AAAA,UAAA;AAAA;;QAO5FC,mBA6BM,OA7BN,YA6BM;AAAA,UA5BLA,mBAoBwB,YApBxBC,WAoBwB,EAAA,GAnBVJ,KAAAA,eAAe,UAAS;AAAA,YACpC,IAAAK,KAAAA;AAAAA,YACD,KAAI;AAAA,YACH,oBAAA,gBAAA;AAAA,YACD,aAAU;AAAA,YACV,QAAM,mBAAiB;AAAA,cACRC,KAAAA;AAAAA;kDAA2DC,KAAAA;AAAAA,2CAA+CL,MAAA,QAAA;AAAA,4CAA4CM,KAAAA;AAAAA,0CAAyCC,KAAAA;AAAAA,cAAAA;AAAAA;YAS7M,UAAAR,KAAAA;AAAAA,YACA,aAAa,oBAAA;AAAA,YACb,iBAASS,KAAAA,OAAAA;AAAAA,YACT,OAAO,WAAA;AAAA,YACP,SAAO;AAAA,UAAA;WAGDH,KAAAA,6BADRR,mBAKQ,SAAA;AAAA;YAHP,OAAM;AAAA,YACL,KAAKM,KAAAA;AAAAA,UAAAA,mBACHM,KAAAA,KAAK,GAAA,GAAA,UAAA;;QAIHC,KAAAA,2BADPb,mBAWI,KAAA;AAAA;UATF,OAAOM,KAAAA,EAAE;AAAA,UACV,uBAAM,iCAA+B;AAAA,oDACiBI,KAAAA;AAAAA,sDAAqDD,KAAAA;AAAAA,UAAAA;;UAInFA,KAAAA,wBAAxBK,YAAgG,kBAAA;AAAA;YAA/D,OAAM;AAAA,YAAuC,MAAMX,MAAA,QAAA;AAAA,UAAA,yBACvDO,KAAAA,sBAA7BI,YAAyG,kBAAA;AAAA;YAArE,OAAM;AAAA,YAAuC,MAAMX,MAAA,cAAA;AAAA,UAAA;UAAkBY,gBAAA,sBACtGF,KAAAA,UAAU,GAAA,CAAA;AAAA,QAAA;;;;;;"}

package/dist/chunks/{NcTextField.vue_vue_type_script_setup_true_lang-DzcUUWHO.mjs → NcTextField.vue_vue_type_script_setup_true_lang-Deo569jY.mjs}

@@ -1,8 +1,8 @@
 import { defineComponent, mergeModels, useModel, useTemplateRef, computed, createBlock, openBlock, unref, mergeProps, createSlots, withCtx, renderSlot } from "vue";
-import { m as mdiArrowRight, a as mdiUndo, b as mdiClose } from "./mdi-B9TPxVka.mjs";
-import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-CprKb_SE.mjs";
-import { N as NcInputField } from "./NcInputField-Cz1RwzSy.mjs";
-import { r as register, a as t } from "./_l10n-ZllQPIu_.mjs";
+import { m as mdiArrowRight, a as mdiUndo, b as mdiClose } from "./mdi-D_GPbmUY.mjs";
+import { r as register, a as t } from "./_l10n-C6k5LExr.mjs";
+import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-5AA93z-F.mjs";
+import { N as NcInputField } from "./NcInputField-BWhRRLNR.mjs";
 register();
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "NcTextField",
@@ -28,8 +28,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   }),
   emits: ["update:modelValue"],
   setup(__props, { expose: __expose }) {
-    const props = __props;
     const modelValue = useModel(__props, "modelValue");
+    const props = __props;
     __expose({
       focus,
       select
@@ -42,9 +42,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     const NcInputFieldPropNames = new Set(Object.keys(NcInputField.props));
     const propsToForward = computed(() => {
-      const sharedProps = Object.fromEntries(
-        Object.entries(props).filter(([key]) => NcInputFieldPropNames.has(key))
-      );
+      const sharedProps = Object.fromEntries(Object.entries(props).filter(([key]) => NcInputFieldPropNames.has(key)));
       sharedProps.trailingButtonLabel ??= defaultTrailingButtonLabels[props.trailingButtonIcon];
       return sharedProps;
     });
@@ -88,4 +86,4 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 export {
   _sfc_main as _
 };
-//# sourceMappingURL=NcTextField.vue_vue_type_script_setup_true_lang-DzcUUWHO.mjs.map
+//# sourceMappingURL=NcTextField.vue_vue_type_script_setup_true_lang-Deo569jY.mjs.map

package/dist/chunks/NcTextField.vue_vue_type_script_setup_true_lang-Deo569jY.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcTextField.vue_vue_type_script_setup_true_lang-Deo569jY.mjs","sources":["../../src/components/NcTextField/NcTextField.vue"],"sourcesContent":["<!--\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=\"With helper text\"\n\t\t\thelper-text=\"This is an optional message to show e.g. validation errors.\"\n\t\t\t@trailing-button-click=\"clearText\">\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\tgap: 14px;\n\twidth: 100%;\n\tmargin-top: 1rem;\n}\n\n.external-label label {\n\tpadding-top: 7px;\n\twhite-space: nowrap;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<NcInputField\n\t\tv-bind=\"propsToForward\"\n\t\tref=\"input-field-key\"\n\t\tv-model=\"modelValue\">\n\t\t<template v-if=\"!!$slots.icon\" #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<NcIconSvgWrapper v-if=\"trailingButtonIcon === 'arrowEnd'\" directional :path=\"mdiArrowRight\" />\n\t\t\t<NcIconSvgWrapper v-else :path=\"trailingButtonIcon === 'undo' ? mdiUndo : mdiClose\" />\n\t\t</template>\n\t</NcInputField>\n</template>\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\nimport type { NcInputFieldProps } from '../NcInputField/index.ts'\n\nimport { mdiArrowRight, mdiClose, mdiUndo } from '@mdi/js'\nimport { computed, useTemplateRef } from 'vue'\nimport { t } from '../../l10n.ts'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.ts'\nimport NcInputField from '../NcInputField/index.ts'\n\n/**\n * The value of the input field\n * If type is 'number' and a number is passed as value than the type of `update:value` will also be 'number'\n */\nconst modelValue = defineModel<string | number>('modelValue', { default: '' })\n\nconst props = withDefaults(defineProps<NcInputFieldProps & {\n\t/**\n\t * Specifies which material design icon should be used for the trailing button.\n\t */\n\ttrailingButtonIcon?: 'arrowEnd' | 'close' | 'undo'\n\n\t/**\n\t * The `aria-label` to set on the trailing button\n\t * If no explicit value is set it will default to the one matching the `trailingButtonIcon`:\n\t * - 'Clear text'\n\t * - 'Save changes'\n\t * - 'Undo changes'\n\t */\n\ttrailingButtonLabel?: string\n}>(), {\n\ttrailingButtonIcon: 'close',\n\ttrailingButtonLabel: undefined,\n})\n\ndefineSlots<{\n\t/**\n\t * Leading icon, set the size to 20.\n\t */\n\ticon?: Slot\n}>()\n\ndefineExpose({\n\tfocus,\n\tselect,\n})\n\nconst inputField = useTemplateRef('input-field-key')\n\nconst defaultTrailingButtonLabels = {\n\tarrowEnd: t('Save changes'),\n\tclose: t('Clear text'),\n\tundo: t('Undo changes'),\n}\n\nconst NcInputFieldPropNames = new Set(Object.keys(NcInputField.props))\nconst propsToForward = computed<NcInputFieldProps>(() => {\n\tconst sharedProps = Object.fromEntries(Object.entries(props)\n\t\t.filter(([key]) => NcInputFieldPropNames.has(key)))\n\n\tsharedProps.trailingButtonLabel ??= defaultTrailingButtonLabels[props.trailingButtonIcon]\n\treturn sharedProps satisfies NcInputFieldProps\n})\n\n/**\n * Focus the input element\n *\n * @param options - Focus options\n * @public\n */\nfunction focus(options?: FocusOptions) {\n\tinputField.value!.focus(options)\n}\n\n/**\n * Select all the text in the input\n *\n * @public\n */\nfunction select() {\n\tinputField.value!.select()\n}\n</script>\n"],"names":["_useModel","_createBlock","_unref","_mergeProps","$slots","_renderSlot","type","trailingButtonIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6JA,UAAM,aAAaA,SAA4B,SAAC,YAA6B;AAE7E,UAAM,QAAQ;AA0Bd,aAAa;AAAA,MACZ;AAAA,MACA;AAAA,IAAA,CACA;AAED,UAAM,aAAa,eAAe,iBAAiB;AAEnD,UAAM,8BAA8B;AAAA,MACnC,UAAU,EAAE,cAAc;AAAA,MAC1B,OAAO,EAAE,YAAY;AAAA,MACrB,MAAM,EAAE,cAAc;AAAA,IAAA;AAGvB,UAAM,wBAAwB,IAAI,IAAI,OAAO,KAAK,aAAa,KAAK,CAAC;AACrE,UAAM,iBAAiB,SAA4B,MAAM;AACxD,YAAM,cAAc,OAAO,YAAY,OAAO,QAAQ,KAAK,EACzD,OAAO,CAAC,CAAC,GAAG,MAAM,sBAAsB,IAAI,GAAG,CAAC,CAAC;AAEnD,kBAAY,wBAAwB,4BAA4B,MAAM,kBAAkB;AACxF,aAAO;AAAA,IACR,CAAC;AAQD,aAAS,MAAM,SAAwB;AACtC,iBAAW,MAAO,MAAM,OAAO;AAAA,IAChC;AAOA,aAAS,SAAS;AACjB,iBAAW,MAAO,OAAA;AAAA,IACnB;;0BAjGCC,YAaeC,MAAA,YAAA,GAbfC,WAae,eAAA,OAZQ;AAAA,QACtB,KAAI;AAAA,oBACK,WAAA;AAAA,qEAAA,WAAU,QAAA;AAAA,MAAA;QACDC,CAAAA,CAAAA,KAAAA,OAAO;gBAAO;AAAA,sBAC/B,MAAoB;AAAA,YAApBC,WAAoB,KAAA,QAAA,MAAA;AAAA,UAAA;;;QAILC,KAAAA,SAAI;gBAAgB;AAAA,sBACnC,MAA+F;AAAA,YAAvEC,KAAAA,uBAAkB,2BAA1CN,YAA+FC,MAAA,gBAAA,GAAA;AAAA;cAApC,aAAA;AAAA,cAAa,MAAMA,MAAA,aAAA;AAAA,YAAA,uCAC9ED,YAAsFC,MAAA,gBAAA,GAAA;AAAA;cAA5D,MAAMK,KAAAA,uBAAkB,SAAcL,MAAA,OAAA,IAAUA,MAAA,QAAA;AAAA,YAAA;;;;;;;;"}

package/dist/chunks/{NcTimezonePicker.vue_vue_type_script_setup_true_lang-Dsco6qEJ.mjs → NcTimezonePicker.vue_vue_type_script_setup_true_lang-NZWpDFzm.mjs}

@@ -1,8 +1,8 @@
 import { defineComponent, mergeModels, useModel, computed, createBlock, openBlock, unref } from "vue";
 import { getTimezoneManager as getTimezoneManager$1, getReadableTimezoneName, getSortedTimezoneList } from "@nextcloud/timezones";
+import { r as register, a as t } from "./_l10n-C6k5LExr.mjs";
 import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
-import { r as register, a as t } from "./_l10n-ZllQPIu_.mjs";
-import { N as NcSelect } from "./NcSelect-C6qHqfAO.mjs";
+import { N as NcSelect } from "./NcSelect-CrWaLc3g.mjs";
 register();
 const timezoneManager = getTimezoneManager$1();
 let initialized = false;
@@ -24,8 +24,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   }),
   emits: ["update:modelValue"],
   setup(__props) {
-    const props = __props;
     const modelValue = useModel(__props, "modelValue");
+    const props = __props;
     const selectedTimezone = computed({
       set(timezone) {
         modelValue.value = timezone.timezoneId;
@@ -95,4 +95,4 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 export {
   _sfc_main as _
 };
-//# sourceMappingURL=NcTimezonePicker.vue_vue_type_script_setup_true_lang-Dsco6qEJ.mjs.map
+//# sourceMappingURL=NcTimezonePicker.vue_vue_type_script_setup_true_lang-NZWpDFzm.mjs.map

package/dist/chunks/NcTimezonePicker.vue_vue_type_script_setup_true_lang-NZWpDFzm.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcTimezonePicker.vue_vue_type_script_setup_true_lang-NZWpDFzm.mjs","sources":["../../src/components/NcTimezonePicker/timezoneDataProviderService.ts","../../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 { getTimezoneManager } from '@nextcloud/timezones'\n\nconst timezoneManager = getTimezoneManager()\nlet initialized = false\n\n/**\n * Gets the timezone-manager\n * initializes it if necessary\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<script setup lang=\"ts\">\nimport type {\n\tIContinent,\n\tIRegion,\n\tITimezone,\n} from '@nextcloud/timezones'\n\nimport {\n\tgetReadableTimezoneName,\n\tgetSortedTimezoneList,\n} from '@nextcloud/timezones'\nimport { computed } from 'vue'\nimport { t } from '../../l10n.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport NcSelect from '../NcSelect/index.js'\nimport getTimezoneManager from './timezoneDataProviderService.js'\n\n/**\n * The selected timezone.\n * Use v-model for two-way binding.\n * 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 */\nconst modelValue = defineModel<string>({ default: 'floating' })\n\nconst props = withDefaults(defineProps<{\n\t/**\n\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 */\n\tadditionalTimezones?: ITimezone[]\n\n\t/**\n\t * ID of the inner vue-select element, can be used for labels like: `vs-${uid}__combobox`\n\t */\n\tuid?: string\n}>(), {\n\tadditionalTimezones: () => [],\n\tuid: createElementId(),\n})\n\nconst selectedTimezone = computed({\n\tset(timezone: IRegion) {\n\t\tmodelValue.value = timezone.timezoneId\n\t},\n\tget(): IRegion {\n\t\tfor (const additionalTimezone of props.additionalTimezones) {\n\t\t\tif (additionalTimezone.timezoneId === modelValue.value) {\n\t\t\t\treturn {\n\t\t\t\t\tcities: [],\n\t\t\t\t\t...additionalTimezone,\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn {\n\t\t\tlabel: getReadableTimezoneName(modelValue.value),\n\t\t\ttimezoneId: modelValue.value,\n\t\t\tcities: [],\n\t\t}\n\t},\n})\n\nconst options = computed(() => {\n\tconst timezoneManager = getTimezoneManager()\n\tconst timezoneList: IContinent[] = getSortedTimezoneList(\n\t\ttimezoneManager.listAllTimezones(),\n\t\tprops.additionalTimezones,\n\t\tt('Global'), // TRANSLATORS: This refers to global timezones in the timezone picker\n\t)\n\t/**\n\t * Since NcSelect does not support groups,\n\t * we create an object with the grouped timezones and continent labels.\n\t *\n\t * NOTE for now we are removing the grouping from the fields to fix an accessibility issue\n\t * in the future, other options can be introduced to better display the different areas\n\t */\n\tconst timezonesGrouped: IRegion[] = []\n\tfor (const group of Object.values(timezoneList)) {\n\t\t// Add an entry as group label\n\t\t// const continent = `tz-group__${group.continent}`\n\t\t// timezonesGrouped.push({\n\t\t// label: group.continent,\n\t\t// continent,\n\t\t// timezoneId: continent,\n\t\t// regions: group.regions,\n\t\t// })\n\t\ttimezonesGrouped.push(...group.regions)\n\t}\n\treturn timezonesGrouped\n})\n\n/**\n * Returns whether this is a continent label,\n * or an actual timezone. Continent labels are not selectable.\n *\n * @param option The option\n */\nfunction isSelectable(option: IRegion): boolean {\n\treturn !option.timezoneId.startsWith('tz-group__')\n}\n\n/**\n * Function to filter the timezone list.\n * We search in the timezoneId, so both continent and region names can be matched.\n *\n * @param option - The timezone option\n * @param label - The label of the timezone\n * @param search - The search string\n */\nfunction filterBy(option: IContinent | IRegion, label: string, search: string): boolean {\n\t// We split the search term in case one searches \"<continent> <region>\".\n\tconst terms = search.trim().split(' ')\n\n\t// For the continent labels, we have to check if one region matches every search term.\n\tif ('continent' in option) {\n\t\treturn option.regions.some((region) => {\n\t\t\treturn matchTimezoneId(region.timezoneId, terms)\n\t\t})\n\t}\n\n\t// For a region, every search term must be found.\n\treturn matchTimezoneId(option.timezoneId, terms)\n}\n\n/**\n * @param timezoneId - The timezone id to check\n * @param terms - Terms to validate\n */\nfunction matchTimezoneId(timezoneId: string, terms: string[]): boolean {\n\treturn terms.every((term) => timezoneId.toLowerCase().includes(term.toLowerCase()))\n}\n</script>\n\n<template>\n\t<NcSelect\n\t\tv-model=\"selectedTimezone\"\n\t\t:aria-label-combobox=\"t('Search for timezone')\"\n\t\t:clearable=\"false\"\n\t\t:filter-by\n\t\t:multiple=\"false\"\n\t\t:options\n\t\t:placeholder=\"t('Type to search time zone')\"\n\t\t:selectable=\"isSelectable\"\n\t\t:uid\n\t\tlabel=\"label\" />\n</template>\n"],"names":["getTimezoneManager","_useModel","timezoneManager","_createBlock","_unref","uid"],"mappings":";;;;;;AAOA,MAAM,kBAAkBA,qBAAA;AACxB,IAAI,cAAc;AAMlB,SAAA,qBAA0B;AACzB,MAAI,CAAC,aAAa;AACjB,oBAAgB,yBAAA;AAChB,kBAAc;AAAA,EACf;AAEA,SAAO;AACR;;;;;;;;;;;;AC2BA,UAAM,aAAaC,SAAmB,SAAA,YAAwB;AAE9D,UAAM,QAAQ;AAed,UAAM,mBAAmB,SAAS;AAAA,MACjC,IAAI,UAAmB;AACtB,mBAAW,QAAQ,SAAS;AAAA,MAC7B;AAAA,MACA,MAAe;AACd,mBAAW,sBAAsB,MAAM,qBAAqB;AAC3D,cAAI,mBAAmB,eAAe,WAAW,OAAO;AACvD,mBAAO;AAAA,cACN,QAAQ,CAAA;AAAA,cACR,GAAG;AAAA,YAAA;AAAA,UAEL;AAAA,QACD;AAEA,eAAO;AAAA,UACN,OAAO,wBAAwB,WAAW,KAAK;AAAA,UAC/C,YAAY,WAAW;AAAA,UACvB,QAAQ,CAAA;AAAA,QAAC;AAAA,MAEX;AAAA,IAAA,CACA;AAED,UAAM,UAAU,SAAS,MAAM;AAC9B,YAAMC,mBAAkB,mBAAA;AACxB,YAAM,eAA6B;AAAA,QAClCA,iBAAgB,iBAAA;AAAA,QAChB,MAAM;AAAA,QACN,EAAE,QAAQ;AAAA;AAAA,MAAA;AASX,YAAM,mBAA8B,CAAA;AACpC,iBAAW,SAAS,OAAO,OAAO,YAAY,GAAG;AAShD,yBAAiB,KAAK,GAAG,MAAM,OAAO;AAAA,MACvC;AACA,aAAO;AAAA,IACR,CAAC;AAQD,aAAS,aAAa,QAA0B;AAC/C,aAAO,CAAC,OAAO,WAAW,WAAW,YAAY;AAAA,IAClD;AAUA,aAAS,SAAS,QAA8B,OAAe,QAAyB;AAEvF,YAAM,QAAQ,OAAO,KAAA,EAAO,MAAM,GAAG;AAGrC,UAAI,eAAe,QAAQ;AAC1B,eAAO,OAAO,QAAQ,KAAK,CAAC,WAAW;AACtC,iBAAO,gBAAgB,OAAO,YAAY,KAAK;AAAA,QAChD,CAAC;AAAA,MACF;AAGA,aAAO,gBAAgB,OAAO,YAAY,KAAK;AAAA,IAChD;AAMA,aAAS,gBAAgB,YAAoB,OAA0B;AACtE,aAAO,MAAM,MAAM,CAAC,SAAS,WAAW,YAAA,EAAc,SAAS,KAAK,YAAA,CAAa,CAAC;AAAA,IACnF;;0BAICC,YAUiBC,MAAA,QAAA,GAAA;AAAA,oBATP,iBAAA;AAAA,qEAAA,iBAAgB,QAAA;AAAA,QACxB,uBAAqBA,MAAA,CAAA,EAAC,qBAAA;AAAA,QACtB,WAAW;AAAA,QACX,aAAA;AAAA,QACA,UAAU;AAAA,QACV,SAAA,QAAA;AAAA,QACA,aAAaA,MAAA,CAAA,EAAC,0BAAA;AAAA,QACd,YAAY;AAAA,QACZ,KAAAC,KAAAA;AAAAA,QACD,OAAM;AAAA,MAAA;;;;"}

package/dist/chunks/{NcUserBubble-CqKN_gM4.mjs → NcUserBubble-LsKBmWoL.mjs}

@@ -1,9 +1,9 @@
-import '../assets/NcUserBubble-CqaL0Oxv.css';
+import '../assets/NcUserBubble-ChgvvPPf.css';
 import { createElementBlock, openBlock, renderSlot, defineComponent, mergeModels, useModel, computed, warn, watch, createBlock, resolveDynamicComponent, unref, withCtx, mergeProps, createVNode, createElementVNode, createCommentVNode, normalizeStyle, toDisplayString } from "vue";
-import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
-import { N as NcAvatar } from "./NcAvatar-CnRCSalb.mjs";
-import { N as NcPopover } from "./NcPopover-Zs7qt_Zd.mjs";
 import { RouterLink } from "vue-router";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+import { N as NcAvatar } from "./NcAvatar-CPVozEHO.mjs";
+import { N as NcPopover } from "./NcPopover-D8iSVK-p.mjs";
 const _sfc_main$1 = {};
 function _sfc_render(_ctx, _cache) {
   return openBlock(), createElementBlock("div", null, [
@@ -34,9 +34,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   }),
   emits: /* @__PURE__ */ mergeModels(["click"], ["update:open"]),
   setup(__props, { emit: __emit }) {
+    const isOpen = useModel(__props, "open");
     const props = __props;
     const emit = __emit;
-    const isOpen = useModel(__props, "open");
     const isAvatarUrl = computed(() => {
       if (!props.avatarImage) {
         return false;
@@ -44,7 +44,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       try {
         const url = new URL(props.avatarImage);
         return !!url;
-      } catch (error) {
+      } catch {
         return false;
       }
     });
@@ -59,7 +59,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       try {
         const url = new URL(props.url, props.url?.startsWith?.("/") ? window.location.href : void 0);
         return !!url;
-      } catch (error) {
+      } catch {
         warn("[NcUserBubble] Invalid URL passed", { url: props.url });
         return false;
       }
@@ -129,8 +129,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const NcUserBubble = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a7e3a34c"]]);
+const NcUserBubble = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-37bde6b7"]]);
 export {
   NcUserBubble as N
 };
-//# sourceMappingURL=NcUserBubble-CqKN_gM4.mjs.map
+//# sourceMappingURL=NcUserBubble-LsKBmWoL.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcUserBubble-LsKBmWoL.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  - 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:size=\"34\"\n\tdisplay-name=\"Administrator\"\n\tuser=\"admin\">\n\t<template #name>\n\t\t<NcButton aria-label=\"Remove user\"\n\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t@click=\"alert\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :path=\"mdiClose\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t</template>\n</NcUserBubble>\n</template>\n<script>\nimport { mdiClose } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tmdiClose,\n\t\t}\n\t},\n\tmethods: {\n\t\talert() {\n\t\t\talert('Removed')\n\t\t},\n\t},\n}\n</script>\n```\n\n</docs>\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\nimport type { RouteLocation } from 'vue-router'\n\nimport { computed, warn, watch } from 'vue'\nimport { RouterLink } from 'vue-router'\nimport NcUserBubbleDiv from './NcUserBubbleDiv.vue'\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcPopover from '../NcPopover/index.js'\n\n/**\n * Default popover state. Requires the UserBubble\n * to have some content to render inside the popover\n */\nconst isOpen = defineModel<boolean>('open')\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * Override generated avatar, can be an url or an icon class\n\t */\n\tavatarImage?: string\n\n\t/**\n\t * Provide the user id if this is a user\n\t */\n\tuser?: string\n\n\t/**\n\t * Displayed label\n\t */\n\tdisplayName?: string\n\n\t/**\n\t * Whether or not to display the user-status\n\t */\n\tshowUserStatus?: boolean\n\n\t/**\n\t * Define the whole bubble as a link\n\t */\n\turl?: string\n\n\t/**\n\t * Use bubble as a router-link for in-app navigation\n\t */\n\tto?: RouteLocation\n\n\t/**\n\t * Use the primary colour\n\t */\n\tprimary?: boolean\n\n\t/**\n\t * This is the height of the component\n\t */\n\tsize?: number\n\n\t/**\n\t * This is the margin of the avatar (size - margin = avatar size)\n\t */\n\tmargin?: number\n}>(), {\n\tavatarImage: undefined,\n\tdisplayName: undefined,\n\tuser: undefined,\n\turl: undefined,\n\tto: undefined,\n\tmargin: 2,\n\tsize: 20,\n})\n\nconst emit = defineEmits<{\n\t/**\n\t * The mouse click event\n\t */\n\tclick: [event: MouseEvent]\n}>()\n\ndefineSlots<{\n\t/**\n\t * Main Popover content on userbubble hover/focus\n\t */\n\tdefault?: Slot\n\n\t/**\n\t * Optional slot just after the name\n\t */\n\tname?: Slot\n}>()\n\n/**\n * Is the provided avatar url valid or not\n */\nconst isAvatarUrl = computed(() => {\n\tif (!props.avatarImage) {\n\t\treturn false\n\t}\n\n\ttry {\n\t\tconst url = new URL(props.avatarImage)\n\t\treturn !!url\n\t} catch {\n\t\treturn false\n\t}\n})\n\n/**\n * Do we have a custom avatar or not\n */\nconst isCustomAvatar = computed(() => !!props.avatarImage)\n\nconst avatarStyle = computed(() => ({\n\tmarginInlineStart: `${props.margin}px`,\n}))\n\n/**\n * Is the URL prop set\n */\nconst hasUrl = computed(() => {\n\tif (!props.url || props.url.trim() === '') {\n\t\treturn false\n\t}\n\ttry {\n\t\tconst url = new URL(props.url, props.url?.startsWith?.('/') ? window.location.href : undefined)\n\t\treturn !!url\n\t} catch {\n\t\twarn('[NcUserBubble] Invalid URL passed', { url: props.url })\n\t\treturn false\n\t}\n})\n\n/**\n * href attribute to pass to content container\n */\nconst href = computed(() => hasUrl.value ? props.url : undefined)\n\nconst contentComponent = computed(() => {\n\tif (hasUrl.value) {\n\t\treturn 'a'\n\t} else if (props.to) {\n\t\treturn RouterLink\n\t} else {\n\t\treturn 'div'\n\t}\n})\n\nconst contentStyle = computed(() => ({\n\theight: `${props.size}px`,\n\tlineHeight: `${props.size}px`,\n\tborderRadius: `${props.size / 2}px`,\n}))\n\nwatch([() => props.displayName, () => props.user], () => {\n\tif (!props.displayName && !props.user) {\n\t\twarn('[NcUserBubble] At least `displayName` or `user` property should be set.')\n\t}\n})\n</script>\n\n<template>\n\t<component\n\t\t:is=\"!!$slots.default ? NcPopover : NcUserBubbleDiv\"\n\t\tv-model:shown=\"isOpen\"\n\t\tclass=\"user-bubble__wrapper\"\n\t\ttrigger=\"hover focus\">\n\t\t<!-- Main userbubble structure -->\n\t\t<template #trigger=\"{ attrs }\">\n\t\t\t<component\n\t\t\t\t:is=\"contentComponent\"\n\t\t\t\tclass=\"user-bubble__content\"\n\t\t\t\t:class=\"{ 'user-bubble__content--primary': primary }\"\n\t\t\t\t:style=\"contentStyle\"\n\t\t\t\t:to\n\t\t\t\t:href\n\t\t\t\tv-bind=\"attrs\"\n\t\t\t\t@click=\"emit('click', $event)\">\n\t\t\t\t<!-- NcAvatar -->\n\t\t\t\t<NcAvatar\n\t\t\t\t\t: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=\"avatarStyle\"\n\t\t\t\t\t:disable-tooltip=\"true\"\n\t\t\t\t\t:disable-menu=\"true\"\n\t\t\t\t\t:hide-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<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 />\n\t</component>\n</template>\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 end padding\n\t\t\tpadding-inline-end: 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-block: 0;\n\t\tpadding-inline: 4px 0;\n\t}\n}\n</style>\n"],"names":["_createElementBlock","_renderSlot","_useModel","_openBlock","_createBlock","_resolveDynamicComponent","$slots","_unref","_withCtx","_mergeProps","primary","to","_createVNode","avatarImage","user","displayName","size","margin","showUserStatus","_createElementVNode","_toDisplayString"],"mappings":";;;;;;;sBAMCA,mBAEM,OAAA,MAAA;AAAA,IADLC,WAAuB,KAAA,QAAA,SAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;ACwEzB,UAAM,SAASC,SAAoB,SAAC,MAAM;AAE1C,UAAM,QAAQ;AAuDd,UAAM,OAAO;AAsBb,UAAM,cAAc,SAAS,MAAM;AAClC,UAAI,CAAC,MAAM,aAAa;AACvB,eAAO;AAAA,MACR;AAEA,UAAI;AACH,cAAM,MAAM,IAAI,IAAI,MAAM,WAAW;AACrC,eAAO,CAAC,CAAC;AAAA,MACV,QAAQ;AACP,eAAO;AAAA,MACR;AAAA,IACD,CAAC;AAKD,UAAM,iBAAiB,SAAS,MAAM,CAAC,CAAC,MAAM,WAAW;AAEzD,UAAM,cAAc,SAAS,OAAO;AAAA,MACnC,mBAAmB,GAAG,MAAM,MAAM;AAAA,IAAA,EACjC;AAKF,UAAM,SAAS,SAAS,MAAM;AAC7B,UAAI,CAAC,MAAM,OAAO,MAAM,IAAI,KAAA,MAAW,IAAI;AAC1C,eAAO;AAAA,MACR;AACA,UAAI;AACH,cAAM,MAAM,IAAI,IAAI,MAAM,KAAK,MAAM,KAAK,aAAa,GAAG,IAAI,OAAO,SAAS,OAAO,MAAS;AAC9F,eAAO,CAAC,CAAC;AAAA,MACV,QAAQ;AACP,aAAK,qCAAqC,EAAE,KAAK,MAAM,KAAK;AAC5D,eAAO;AAAA,MACR;AAAA,IACD,CAAC;AAKD,UAAM,OAAO,SAAS,MAAM,OAAO,QAAQ,MAAM,MAAM,MAAS;AAEhE,UAAM,mBAAmB,SAAS,MAAM;AACvC,UAAI,OAAO,OAAO;AACjB,eAAO;AAAA,MACR,WAAW,MAAM,IAAI;AACpB,eAAO;AAAA,MACR,OAAO;AACN,eAAO;AAAA,MACR;AAAA,IACD,CAAC;AAED,UAAM,eAAe,SAAS,OAAO;AAAA,MACpC,QAAQ,GAAG,MAAM,IAAI;AAAA,MACrB,YAAY,GAAG,MAAM,IAAI;AAAA,MACzB,cAAc,GAAG,MAAM,OAAO,CAAC;AAAA,IAAA,EAC9B;AAEF,UAAM,CAAC,MAAM,MAAM,aAAa,MAAM,MAAM,IAAI,GAAG,MAAM;AACxD,UAAI,CAAC,MAAM,eAAe,CAAC,MAAM,MAAM;AACtC,aAAK,yEAAyE;AAAA,MAC/E;AAAA,IACD,CAAC;;AAIA,aAAAC,UAAA,GAAAC,YAyCYC,0BAxCJC,KAAAA,OAAO,UAAUC,MAAA,SAAA,IAAY,eAAe,GAAA;AAAA,QAC3C,OAAO,OAAA;AAAA,gEAAA,OAAM,QAAA;AAAA,QACrB,OAAM;AAAA,QACN,SAAQ;AAAA,MAAA;QAEG,SAAOC,QACjB,CA8BY,EA/BS,YAAK;AAAA,wBAC1BJ,YA8BYC,wBA7BN,iBAAA,KAAgB,GADtBI,WA8BY;AAAA,YA5BX,OAAK,CAAC,wBAAsB,EAAA,iCACeC,KAAAA,SAAO;AAAA,YACjD,OAAO,aAAA;AAAA,YACP,IAAAC,KAAAA;AAAAA,YACA,MAAA,KAAA;AAAA,UAAA,GACO,OAAK;AAAA,YACZ,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,KAAI,SAAU,MAAM;AAAA,UAAA;6BAE5B,MAU+B;AAAA,cAV/BC,YAU+BL,MAAA,QAAA,GAAA;AAAA,gBAT7B,KAAK,eAAA,SAAkB,oBAAcM,KAAAA,cAAc;AAAA,gBACnD,cAAY,eAAA,SAAc,CAAK,oBAAcA,KAAAA,cAAc;AAAA,gBAC3D,MAAMC,KAAAA;AAAAA,gBACN,gBAAcC,KAAAA;AAAAA,gBACd,MAAMC,KAAAA,OAAQC,KAAAA,SAAM;AAAA,gBACpB,sBAAO,YAAA,KAAW;AAAA,gBAClB,mBAAiB;AAAA,gBACjB,gBAAc;AAAA,gBACd,gBAAcC,KAAAA;AAAAA,gBACf,OAAM;AAAA,cAAA;cAGPC,mBAEO,QAFP,YAEOC,gBADHL,KAAAA,eAAeD,KAAAA,IAAI,GAAA,CAAA;AAAA,cAGTR,CAAAA,CAAAA,KAAAA,OAAO,QAArBH,UAAA,GAAAH,mBAEO,QAFP,YAEO;AAAA,gBADNC,WAAoB,KAAA,QAAA,QAAA,CAAA,GAAA,QAAA,IAAA;AAAA,cAAA;;;;;yBAKvB,MAAQ;AAAA,UAARA,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,QAAA,IAAA;AAAA,QAAA;;;;;;;"}

package/dist/chunks/{NcUserStatusIcon-CDEUKK60.mjs → NcUserStatusIcon-VcPl-lLQ.mjs}

@@ -1,13 +1,19 @@
-import '../assets/NcUserStatusIcon-Du6m_1El.css';
+import '../assets/NcUserStatusIcon-D8HqS9GC.css';
 import { defineComponent, mergeModels, useModel, computed, watch, createElementBlock, createCommentVNode, openBlock, normalizeClass } from "vue";
 import axios from "@nextcloud/axios";
-import { generateOcsUrl } from "@nextcloud/router";
 import { getCapabilities } from "@nextcloud/capabilities";
-import { r as register, B as t10, a as t } from "./_l10n-ZllQPIu_.mjs";
+import { generateOcsUrl } from "@nextcloud/router";
+import { r as register, B as t11, a as t } from "./_l10n-C6k5LExr.mjs";
 import { l as logger } from "./logger-D3RVzcfQ.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
-register(t10);
-const getUserStatusText = (status) => {
+const awaySvg = '<!--\n  - SPDX-FileCopyrightText: 2020 Google Inc.\n  - SPDX-License-Identifier: Apache-2.0\n-->\n<svg viewBox="0 -960 960 960" width="24px" height="24px" xmlns="http://www.w3.org/2000/svg">\n	<path\n		fill="var(--user-status-color-away, var(--color-warning, #C88800))"\n		d="m612-292 56-56-148-148v-184h-80v216l172 172ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/>\n</svg>\n';
+const busySvg = '<!--\n  - SPDX-FileCopyrightText: 2020 Google Inc.\n  - SPDX-License-Identifier: Apache-2.0\n-->\n<svg viewBox="0 -960 960 960" width="24px" height="24px" xmlns="http://www.w3.org/2000/svg">\n	<path\n		fill="var(--user-status-color-busy, var(--color-error, #DB0606))"\n		d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/>\n</svg>\n';
+const dndSvg = '<!--\n  - SPDX-FileCopyrightText: 2020 Google Inc.\n  - SPDX-License-Identifier: Apache-2.0\n-->\n<svg viewBox="0 -960 960 960" width="24px" height="24px" xmlns="http://www.w3.org/2000/svg">\n	<path\n		fill="var(--user-status-color-busy, var(--color-error, #DB0606))"\n		d="M280-440h400v-80H280v80ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/>\n</svg>\n';
+const invisibleSvg = '<!--\n  - SPDX-FileCopyrightText: 2020 Google Inc.\n  - SPDX-License-Identifier: Apache-2.0\n-->\n<svg viewBox="0 -960 960 960" width="24px" height="24px" xmlns="http://www.w3.org/2000/svg">\n	<path\n		fill="var(--user-status-color-offline, var(--color-text-maxcontrast, #6B6B6B))"\n		d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/>\n</svg>\n';
+const onlineSvg = '<!--\n  - SPDX-FileCopyrightText: 2020 Google Inc.\n  - SPDX-License-Identifier: Apache-2.0\n-->\n<svg viewBox="0 -960 960 960" width="24px" height="24px" xmlns="http://www.w3.org/2000/svg">\n	<path\n		fill="var(--user-status-color-online, var(--color-success, #2D7B41))"\n		d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/>\n</svg>\n';
+register();
+register(t11);
+function getUserStatusText(status) {
   switch (status) {
     case "away":
       return t("away");
@@ -25,13 +31,7 @@ const getUserStatusText = (status) => {
     default:
       return status;
   }
-};
-register();
-const onlineSvg = '<!--\n  - SPDX-FileCopyrightText: 2020 Google Inc.\n  - SPDX-License-Identifier: Apache-2.0\n-->\n<svg viewBox="0 -960 960 960" width="24px" height="24px" xmlns="http://www.w3.org/2000/svg">\n	<path\n		fill="var(--color-border-success, var(--color-success))"\n		d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/>\n</svg>\n';
-const awaySvg = '<!--\n  - SPDX-FileCopyrightText: 2020 Google Inc.\n  - SPDX-License-Identifier: Apache-2.0\n-->\n<svg viewBox="0 -960 960 960" width="24px" height="24px" xmlns="http://www.w3.org/2000/svg">\n	<path\n		fill="var(--color-favorite)"\n		d="m612-292 56-56-148-148v-184h-80v216l172 172ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/>\n</svg>\n';
-const busySvg = '<!--\n  - SPDX-FileCopyrightText: 2020 Google Inc.\n  - SPDX-License-Identifier: Apache-2.0\n-->\n<svg viewBox="0 -960 960 960" width="24px" height="24px" xmlns="http://www.w3.org/2000/svg">\n	<path\n		fill="var(--color-border-error, var(--color-error))"\n		d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/>\n</svg>\n';
-const dndSvg = '<!--\n  - SPDX-FileCopyrightText: 2020 Google Inc.\n  - SPDX-License-Identifier: Apache-2.0\n-->\n<svg viewBox="0 -960 960 960" width="24px" height="24px" xmlns="http://www.w3.org/2000/svg">\n	<path\n		fill="var(--color-border-error, var(--color-error))"\n		d="M280-440h400v-80H280v80ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/>\n</svg>\n';
-const invisibleSvg = '<!--\n  - SPDX-FileCopyrightText: 2020 Google Inc.\n  - SPDX-License-Identifier: Apache-2.0\n-->\n<svg viewBox="0 -960 960 960" width="24px" height="24px" xmlns="http://www.w3.org/2000/svg">\n	<path\n		fill="var(--color-text-maxcontrast)"\n		d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/>\n</svg>\n';
+}
 const _hoisted_1 = ["aria-hidden", "aria-label", "innerHTML"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "NcUserStatusIcon",
@@ -44,8 +44,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   }),
   emits: ["update:status"],
   setup(__props) {
-    const props = __props;
     const status = useModel(__props, "status");
+    const props = __props;
     const isInvisible = computed(() => status.value && ["invisible", "offline"].includes(status.value));
     const ariaLabel = computed(() => status.value && (!props.ariaHidden || props.ariaHidden === "false") ? t("User status: {status}", { status: getUserStatusText(status.value) }) : void 0);
     watch(() => props.user, async (user) => {
@@ -81,9 +81,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const NcUserStatusIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a911a043"]]);
+const NcUserStatusIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-009e879d"]]);
 export {
   NcUserStatusIcon as N,
   getUserStatusText as g
 };
-//# sourceMappingURL=NcUserStatusIcon-CDEUKK60.mjs.map
+//# sourceMappingURL=NcUserStatusIcon-VcPl-lLQ.mjs.map

package/dist/chunks/NcUserStatusIcon-VcPl-lLQ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcUserStatusIcon-VcPl-lLQ.mjs","sources":["../../src/assets/status-icons/user-status-away.svg?raw","../../src/assets/status-icons/user-status-busy.svg?raw","../../src/assets/status-icons/user-status-dnd.svg?raw","../../src/assets/status-icons/user-status-invisible.svg?raw","../../src/assets/status-icons/user-status-online.svg?raw","../../src/utils/UserStatus.ts","../../src/components/NcUserStatusIcon/NcUserStatusIcon.vue"],"sourcesContent":["export default \"<!--\\n  - SPDX-FileCopyrightText: 2020 Google Inc.\\n  - SPDX-License-Identifier: Apache-2.0\\n-->\\n<svg viewBox=\\\"0 -960 960 960\\\" width=\\\"24px\\\" height=\\\"24px\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\">\\n\\t<path\\n\\t\\tfill=\\\"var(--user-status-color-away, var(--color-warning, #C88800))\\\"\\n\\t\\td=\\\"m612-292 56-56-148-148v-184h-80v216l172 172ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z\\\"/>\\n</svg>\\n\"","export default \"<!--\\n  - SPDX-FileCopyrightText: 2020 Google Inc.\\n  - SPDX-License-Identifier: Apache-2.0\\n-->\\n<svg viewBox=\\\"0 -960 960 960\\\" width=\\\"24px\\\" height=\\\"24px\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\">\\n\\t<path\\n\\t\\tfill=\\\"var(--user-status-color-busy, var(--color-error, #DB0606))\\\"\\n\\t\\td=\\\"M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z\\\"/>\\n</svg>\\n\"","export default \"<!--\\n  - SPDX-FileCopyrightText: 2020 Google Inc.\\n  - SPDX-License-Identifier: Apache-2.0\\n-->\\n<svg viewBox=\\\"0 -960 960 960\\\" width=\\\"24px\\\" height=\\\"24px\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\">\\n\\t<path\\n\\t\\tfill=\\\"var(--user-status-color-busy, var(--color-error, #DB0606))\\\"\\n\\t\\td=\\\"M280-440h400v-80H280v80ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z\\\"/>\\n</svg>\\n\"","export default \"<!--\\n  - SPDX-FileCopyrightText: 2020 Google Inc.\\n  - SPDX-License-Identifier: Apache-2.0\\n-->\\n<svg viewBox=\\\"0 -960 960 960\\\" width=\\\"24px\\\" height=\\\"24px\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\">\\n\\t<path\\n\\t\\tfill=\\\"var(--user-status-color-offline, var(--color-text-maxcontrast, #6B6B6B))\\\"\\n\\t\\td=\\\"M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\\\"/>\\n</svg>\\n\"","export default \"<!--\\n  - SPDX-FileCopyrightText: 2020 Google Inc.\\n  - SPDX-License-Identifier: Apache-2.0\\n-->\\n<svg viewBox=\\\"0 -960 960 960\\\" width=\\\"24px\\\" height=\\\"24px\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\">\\n\\t<path\\n\\t\\tfill=\\\"var(--user-status-color-online, var(--color-success, #2D7B41))\\\"\\n\\t\\td=\\\"m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z\\\"/>\\n</svg>\\n\"","/**\n * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport { t } from '../l10n.ts'\n\ntype Status = 'online' | 'away' | 'busy' | 'dnd' | 'invisible' | 'offline'\n\n/**\n * Get the translated label for a given user status\n *\n * @param status - The user status\n */\nexport function getUserStatusText(status: Status): string {\n\tswitch (status) {\n\t\tcase 'away': return t('away') // TRANSLATORS: User status if the user is currently away from keyboard\n\t\tcase 'busy': return t('busy')\n\t\tcase 'dnd': return t('do not disturb')\n\t\tcase 'online': return t('online')\n\t\tcase 'invisible': return t('invisible')\n\t\tcase 'offline': return t('offline')\n\t\tdefault: return status\n\t}\n}\n","<!--\n  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Description\n\nThis component displays a user status icon.\n\n### Example\n\n```vue\n<template>\n\t<div class=\"flex\">\n\t\t<div class=\"grid\">\n\t\t\t<NcUserStatusIcon status=\"online\" />\n\t\t\t<span>Online</span>\n\t\t\t<NcUserStatusIcon status=\"away\" />\n\t\t\t<span>Away</span>\n\t\t\t<NcUserStatusIcon status=\"busy\" />\n\t\t\t<span>Busy</span>\n\t\t\t<NcUserStatusIcon status=\"dnd\" />\n\t\t\t<span>Do not disturb</span>\n\t\t\t<NcUserStatusIcon status=\"invisible\" />\n\t\t\t<span>Invisible</span>\n\t\t\t<NcUserStatusIcon status=\"offline\" />\n\t\t\t<span>Offline</span>\n\t\t</div>\n\n\t\t<NcThemeProvider dark>\n\t\t\t<div class=\"grid\">\n\t\t\t\t<NcUserStatusIcon status=\"online\" />\n\t\t\t\t<span>Online</span>\n\t\t\t\t<NcUserStatusIcon status=\"away\" />\n\t\t\t\t<span>Away</span>\n\t\t\t\t<NcUserStatusIcon status=\"busy\" />\n\t\t\t\t<span>Busy</span>\n\t\t\t\t<NcUserStatusIcon status=\"dnd\" />\n\t\t\t\t<span>Do not disturb</span>\n\t\t\t\t<NcUserStatusIcon status=\"invisible\" />\n\t\t\t\t<span>Invisible</span>\n\t\t\t\t<NcUserStatusIcon status=\"offline\" />\n\t\t\t\t<span>Offline</span>\n\t\t\t</div>\n\t\t</NcThemeProvider>\n\t</div>\n</template>\n\n<style>\n.flex {\n\tdisplay: flex;\n\tgap: 4px;\n}\n\n.grid {\n\tdisplay: grid;\n\tgrid-template-columns: 20px 1fr;\n\tgap: 8px;\n\talign-items: center;\n\tpadding: 4px;\n\twidth: fit-content;\n\tbackground-color: var(--color-main-background);\n\tcolor: var(--color-main-text);\n}\n</style>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport axios from '@nextcloud/axios'\nimport { getCapabilities } from '@nextcloud/capabilities'\nimport { generateOcsUrl } from '@nextcloud/router'\nimport { computed, watch } from 'vue'\nimport awaySvg from '../../assets/status-icons/user-status-away.svg?raw'\nimport busySvg from '../../assets/status-icons/user-status-busy.svg?raw'\nimport dndSvg from '../../assets/status-icons/user-status-dnd.svg?raw'\nimport invisibleSvg from '../../assets/status-icons/user-status-invisible.svg?raw'\nimport onlineSvg from '../../assets/status-icons/user-status-online.svg?raw'\nimport { t } from '../../l10n.ts'\nimport logger from '../../utils/logger.ts'\nimport { getUserStatusText } from '../../utils/UserStatus.ts'\n\n/**\n * The user preloaded user status.\n */\nconst status = defineModel<'online' | 'away' | 'busy' | 'dnd' | 'invisible' | 'offline'>('status')\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * Set the user id to fetch the status\n\t */\n\tuser?: string\n\n\t/**\n\t * Set the `aria-hidden` attribute\n\t */\n\tariaHidden?: boolean | 'true' | 'false'\n}>(), {\n\tuser: undefined,\n\tariaHidden: false,\n})\n\nconst isInvisible = computed(() => status.value && ['invisible', 'offline'].includes(status.value))\n\n/**\n * Aria label to set on the element (will be set when ariaHidden is not set)\n */\nconst ariaLabel = computed(() => (\n\tstatus.value && (!props.ariaHidden || props.ariaHidden === 'false')\n\t\t? t('User status: {status}', { status: getUserStatusText(status.value) })\n\t\t: undefined\n))\n\nwatch(() => props.user, async (user) => {\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tif (!status.value && user && (getCapabilities() as any)?.user_status?.enabled) {\n\t\ttry {\n\t\t\tconst { data } = await axios.get(generateOcsUrl('/apps/user_status/api/v1/statuses/{user}', { user }))\n\t\t\tstatus.value = data.ocs?.data?.status\n\t\t} catch (error) {\n\t\t\tlogger.debug('Error while fetching user status', { error })\n\t\t}\n\t}\n}, { immediate: true })\n\nconst matchSvg = {\n\tonline: onlineSvg,\n\taway: awaySvg,\n\tbusy: busySvg,\n\tdnd: dndSvg,\n\tinvisible: invisibleSvg,\n\toffline: invisibleSvg,\n}\nconst activeSvg = computed(() => status.value && matchSvg[status.value])\n</script>\n\n<template>\n\t<span\n\t\tv-if=\"status\"\n\t\tclass=\"user-status-icon\"\n\t\t:class=\"{\n\t\t\t'user-status-icon--invisible': isInvisible,\n\t\t}\"\n\t\t:aria-hidden=\"!ariaLabel || undefined\"\n\t\t:aria-label\n\t\trole=\"img\"\n\t\tv-html=\"activeSvg\" /> <!-- eslint-disable-line vue/no-v-html -->\n</template>\n\n<style lang=\"scss\" scoped>\n.user-status-icon {\n\t// Custom colors for the svg icons, to not rely on server variables\n\t--user-status-color-online: #2D7B41;\n\t--user-status-color-busy: #DB0606;\n\t--user-status-color-away: #C88800;\n\t--user-status-color-offline: #6B6B6B;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\n\t&--invisible {\n\t\tfilter: var(--background-invert-if-dark);\n\t}\n\n\t:deep(svg) {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n}\n</style>\n"],"names":["_useModel","_createElementBlock"],"mappings":";;;;;;;AAAA,MAAA,UAAe;ACAf,MAAA,UAAe;ACAf,MAAA,SAAe;ACAf,MAAA,eAAe;ACAf,MAAA,YAAe;;;ACcR,SAAS,kBAAkB,QAAwB;AACzD,UAAQ,QAAA;AAAA,IACP,KAAK;AAAQ,aAAO,EAAE,MAAM;AAAA;AAAA,IAC5B,KAAK;AAAQ,aAAO,EAAE,MAAM;AAAA,IAC5B,KAAK;AAAO,aAAO,EAAE,gBAAgB;AAAA,IACrC,KAAK;AAAU,aAAO,EAAE,QAAQ;AAAA,IAChC,KAAK;AAAa,aAAO,EAAE,WAAW;AAAA,IACtC,KAAK;AAAW,aAAO,EAAE,SAAS;AAAA,IAClC;AAAS,aAAO;AAAA,EAAA;AAElB;;;;;;;;;;;;;AC8DA,UAAM,SAASA,SAAyE,SAAC,QAAQ;AAEjG,UAAM,QAAQ;AAed,UAAM,cAAc,SAAS,MAAM,OAAO,SAAS,CAAC,aAAa,SAAS,EAAE,SAAS,OAAO,KAAK,CAAC;AAKlG,UAAM,YAAY,SAAS,MAC1B,OAAO,UAAU,CAAC,MAAM,cAAc,MAAM,eAAe,WACxD,EAAE,yBAAyB,EAAE,QAAQ,kBAAkB,OAAO,KAAK,GAAG,IACtE,MACH;AAED,UAAM,MAAM,MAAM,MAAM,OAAO,SAAS;AAEvC,UAAI,CAAC,OAAO,SAAS,QAAS,gBAAA,GAA2B,aAAa,SAAS;AAC9E,YAAI;AACH,gBAAM,EAAE,SAAS,MAAM,MAAM,IAAI,eAAe,4CAA4C,EAAE,KAAA,CAAM,CAAC;AACrG,iBAAO,QAAQ,KAAK,KAAK,MAAM;AAAA,QAChC,SAAS,OAAO;AACf,iBAAO,MAAM,oCAAoC,EAAE,MAAA,CAAO;AAAA,QAC3D;AAAA,MACD;AAAA,IACD,GAAG,EAAE,WAAW,MAAM;AAEtB,UAAM,WAAW;AAAA,MAChB,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,MAAM;AAAA,MACN,KAAK;AAAA,MACL,WAAW;AAAA,MACX,SAAS;AAAA,IAAA;AAEV,UAAM,YAAY,SAAS,MAAM,OAAO,SAAS,SAAS,OAAO,KAAK,CAAC;;aAK/D,OAAA,sBADPC,mBASsB,QAAA;AAAA;QAPrB,uBAAM,oBAAkB;AAAA,yCACoB,YAAA;AAAA,QAAA;QAG3C,eAAW,CAAG,UAAA,SAAa;AAAA,QAC3B,cAAA,UAAA;AAAA,QACD,MAAK;AAAA,QACL,WAAQ,UAAA;AAAA,MAAA;;;;;"}

package/dist/chunks/NcVNodes.vue_vue_type_script_lang-BqUHinRZ.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcVNodes.vue_vue_type_script_lang-BqUHinRZ.mjs","sources":["../../src/components/NcVNodes/NcVNodes.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nA util component to render a VNode or an array of VNodes from the prop or the default slot.\n\n### Render the given or generated VNodes\n\n```vue\n<template>\n\t<NcVNodes :vnodes=\"renderDiv()\" />\n</template>\n\n<script>\nimport { h } from 'vue'\n\nexport default {\n\tmethods: {\n\t\trenderDiv() {\n\t\t\treturn h('div', 'This div was created programmatically as a VNode')\n\t\t},\n\t}\n}\n</script>\n```\n\n### Render content in a conditional wrapper\n\n```vue\n<template>\n\t<div>\n\t\t<p>\n\t\t\t<NcCheckboxRadioSwitch v-model=\"shouldRenderNcNoteCard\">Render text inside \"NcNoteCard\"</NcCheckboxRadioSwitch>\n\t\t</p>\n\t\t<component :is=\"shouldRenderNcNoteCard ? 'NcNoteCard' : 'NcVNodes'\">\n\t\t\t<p>This content is rendered {{ shouldRenderNcNoteCard ? 'with' : 'without' }} a \"NcNoteCard\" wrapper</p>\n\t\t</component>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshouldRenderNcNoteCard: true,\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<script lang=\"ts\">\nimport type { PropType, VNode } from 'vue'\nimport { defineComponent } from 'vue'\n\nexport default defineComponent({\n\tname: 'NcVNodes',\n\n\tprops: {\n\t\t/**\n\t\t * The vnodes to render\n\t\t */\n\t\tvnodes: {\n\t\t\ttype: [Array, Object] as PropType<VNode | VNode[]>,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\t/**\n\t * The render function to display the component\n\t */\n\trender() {\n\t\treturn this.vnodes || this.$slots?.default?.({})\n\t},\n})\n</script>\n"],"names":[],"mappings":";AA0DA,MAAA,YAAe,gBAAgB;AAAA,EAC9B,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,QAAQ;AAAA,MACP,MAAM,CAAC,OAAO,MAAM;AAAA,MACpB,SAAS;AAAA,IAAA;AAAA,EACV;AAAA;AAAA;AAAA;AAAA,EAMD,SAAS;AACR,WAAO,KAAK,UAAU,KAAK,QAAQ,UAAU,CAAA,CAAE;AAAA,EAChD;AACD,CAAC;"}
+{"version":3,"file":"NcVNodes.vue_vue_type_script_lang-BqUHinRZ.mjs","sources":["../../src/components/NcVNodes/NcVNodes.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nA util component to render a VNode or an array of VNodes from the prop or the default slot.\n\n### Render the given or generated VNodes\n\n```vue\n<template>\n\t<NcVNodes :vnodes=\"renderDiv()\" />\n</template>\n\n<script>\nimport { h } from 'vue'\n\nexport default {\n\tmethods: {\n\t\trenderDiv() {\n\t\t\treturn h('div', 'This div was created programmatically as a VNode')\n\t\t},\n\t}\n}\n</script>\n```\n\n### Render content in a conditional wrapper\n\n```vue\n<template>\n\t<div>\n\t\t<p>\n\t\t\t<NcCheckboxRadioSwitch v-model=\"shouldRenderNcNoteCard\">Render text inside \"NcNoteCard\"</NcCheckboxRadioSwitch>\n\t\t</p>\n\t\t<component :is=\"shouldRenderNcNoteCard ? 'NcNoteCard' : 'NcVNodes'\">\n\t\t\t<p>This content is rendered {{ shouldRenderNcNoteCard ? 'with' : 'without' }} a \"NcNoteCard\" wrapper</p>\n\t\t</component>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshouldRenderNcNoteCard: true,\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<script lang=\"ts\">\nimport type { PropType, VNode } from 'vue'\n\nimport { defineComponent } from 'vue'\n\nexport default defineComponent({\n\tname: 'NcVNodes',\n\n\tprops: {\n\t\t/**\n\t\t * The vnodes to render\n\t\t */\n\t\tvnodes: {\n\t\t\ttype: [Array, Object] as PropType<VNode | VNode[]>,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\t/**\n\t * The render function to display the component\n\t */\n\trender() {\n\t\treturn this.vnodes || this.$slots?.default?.({})\n\t},\n})\n</script>\n"],"names":[],"mappings":";AA2DA,MAAA,YAAe,gBAAgB;AAAA,EAC9B,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,QAAQ;AAAA,MACP,MAAM,CAAC,OAAO,MAAM;AAAA,MACpB,SAAS;AAAA,IAAA;AAAA,EACV;AAAA;AAAA;AAAA;AAAA,EAMD,SAAS;AACR,WAAO,KAAK,UAAU,KAAK,QAAQ,UAAU,CAAA,CAAE;AAAA,EAChD;AACD,CAAC;"}