@nextcloud/vue 9.3.1 → 9.3.2

package/dist/chunks/{NcTextArea-CdtxX_QJ.mjs.map → NcTextArea-2CifgNom.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcTextArea-CdtxX_QJ.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 { mdiAlertCircleOutline, 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\nconst attrs = useAttrs()\n\n/**\n * The native text area component instance\n */\nconst textAreaElement = useTemplateRef('input')\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\n\t\tclass=\"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\n\t\t\t\tv-if=\"success\"\n\t\t\t\tclass=\"textarea__helper-text-message__icon\"\n\t\t\t\t:path=\"mdiCheck\"\n\t\t\t\tinline />\n\t\t\t<NcIconSvgWrapper\n\t\t\t\tv-else-if=\"error\"\n\t\t\t\tclass=\"textarea__helper-text-message__icon\"\n\t\t\t\t:path=\"mdiAlertCircleOutline\"\n\t\t\t\tinline />\n\t\t\t{{ helperText }}\n\t\t</p>\n\t</div>\n</template>\n\n<style lang=\"scss\" scoped>\n@use '../../assets/input-border.scss' as border;\n\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-focused, 2px);\n\t\tposition: relative;\n\t}\n\n\t&__input {\n\t\tmargin: 0;\n\t\tpadding-block: var(--border-radius-element);\n\t\tpadding-inline: 10px; // 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@include border.inputBorder('.textarea--legacy', var(--input-border-color));\n\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}\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</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;AAED,UAAM,QAAQ,SAAA;AAKd,UAAM,kBAAkB,eAAe,OAAO;AAE9C,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,mBA2DM,OAAA;AAAA,QA1DL,uBAAM,YAAU;AAAA,UACHC,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,mBAmBI,KAAA;AAAA;UAjBF,OAAOM,KAAAA,EAAE;AAAA,UACV,uBAAM,iCAA+B;AAAA,oDACiBI,KAAAA;AAAAA,sDAAqDD,KAAAA;AAAAA,UAAAA;;UAKpGA,KAAAA,wBADPK,YAIU,kBAAA;AAAA;YAFT,OAAM;AAAA,YACL,MAAMX,MAAA,QAAA;AAAA,YACP,QAAA;AAAA,UAAA,yBAEWO,KAAAA,sBADZI,YAIU,kBAAA;AAAA;YAFT,OAAM;AAAA,YACL,MAAMX,MAAA,qBAAA;AAAA,YACP,QAAA;AAAA,UAAA;UAASY,gBAAA,sBACPF,KAAAA,UAAU,GAAA,CAAA;AAAA,QAAA;;;;;;"}
+{"version":3,"file":"NcTextArea-2CifgNom.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 { mdiAlertCircleOutline, 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\nconst attrs = useAttrs()\n\n/**\n * The native text area component instance\n */\nconst textAreaElement = useTemplateRef('input')\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\n\t\tclass=\"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\n\t\t\t\tv-if=\"success\"\n\t\t\t\tclass=\"textarea__helper-text-message__icon\"\n\t\t\t\t:path=\"mdiCheck\"\n\t\t\t\tinline />\n\t\t\t<NcIconSvgWrapper\n\t\t\t\tv-else-if=\"error\"\n\t\t\t\tclass=\"textarea__helper-text-message__icon\"\n\t\t\t\t:path=\"mdiAlertCircleOutline\"\n\t\t\t\tinline />\n\t\t\t{{ helperText }}\n\t\t</p>\n\t</div>\n</template>\n\n<style lang=\"scss\" scoped>\n@use '../../assets/input-border.scss' as border;\n\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-focused, 2px);\n\t\tposition: relative;\n\t}\n\n\t&__input {\n\t\tmargin: 0;\n\t\tpadding-block: var(--border-radius-element);\n\t\tpadding-inline: 10px; // 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@include border.inputBorder('.textarea--legacy', var(--input-border-color));\n\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}\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</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;AAED,UAAM,QAAQ,SAAA;AAKd,UAAM,kBAAkB,eAAe,OAAO;AAE9C,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,mBA2DM,OAAA;AAAA,QA1DL,uBAAM,YAAU;AAAA,UACHC,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,mBAmBI,KAAA;AAAA;UAjBF,OAAOM,KAAAA,EAAE;AAAA,UACV,uBAAM,iCAA+B;AAAA,oDACiBI,KAAAA;AAAAA,sDAAqDD,KAAAA;AAAAA,UAAAA;;UAKpGA,KAAAA,wBADPK,YAIU,kBAAA;AAAA;YAFT,OAAM;AAAA,YACL,MAAMX,MAAA,QAAA;AAAA,YACP,QAAA;AAAA,UAAA,yBAEWO,KAAAA,sBADZI,YAIU,kBAAA;AAAA;YAFT,OAAM;AAAA,YACL,MAAMX,MAAA,qBAAA;AAAA,YACP,QAAA;AAAA,UAAA;UAASY,gBAAA,sBACPF,KAAAA,UAAU,GAAA,CAAA;AAAA,QAAA;;;;;;"}

package/dist/chunks/{NcTextField.vue_vue_type_script_setup_true_lang-D1y_LfGJ.mjs → NcTextField.vue_vue_type_script_setup_true_lang-BfjSL2EJ.mjs}

@@ -1,9 +1,9 @@
 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-XFJRiRqJ.mjs";
-import { r as register, a as t } from "./_l10n-DrTiip5c.mjs";
+import { m as mdiArrowRight, a as mdiUndo, b as mdiClose } from "./mdi-DvQxv1t7.mjs";
+import { r as register, b as t50, c as t18, a as t } from "./_l10n-CgsPi8nC.mjs";
 import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-BvLanNaW.mjs";
-import { N as NcInputField } from "./NcInputField-Bwsh2aHY.mjs";
-register();
+import { N as NcInputField } from "./NcInputField-D7Nv5QhT.mjs";
+register(t18, t50);
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "NcTextField",
   props: /* @__PURE__ */ mergeModels({
@@ -86,4 +86,4 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 export {
   _sfc_main as _
 };
-//# sourceMappingURL=NcTextField.vue_vue_type_script_setup_true_lang-D1y_LfGJ.mjs.map
+//# sourceMappingURL=NcTextField.vue_vue_type_script_setup_true_lang-BfjSL2EJ.mjs.map

package/dist/chunks/{NcTextField.vue_vue_type_script_setup_true_lang-D1y_LfGJ.mjs.map → NcTextField.vue_vue_type_script_setup_true_lang-BfjSL2EJ.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcTextField.vue_vue_type_script_setup_true_lang-D1y_LfGJ.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<IconLockOutline :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 IconLockOutline from 'vue-material-design-icons/LockOutline'\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\tIconLockOutline,\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=\"inputField\"\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 inputFieldInstance = useTemplateRef('inputField')\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\tinputFieldInstance.value!.focus(options)\n}\n\n/**\n * Select all the text in the input\n *\n * @public\n */\nfunction select() {\n\tinputFieldInstance.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,qBAAqB,eAAe,YAAY;AAEtD,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,yBAAmB,MAAO,MAAM,OAAO;AAAA,IACxC;AAOA,aAAS,SAAS;AACjB,yBAAmB,MAAO,OAAA;AAAA,IAC3B;;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;;;;;;;;"}
+{"version":3,"file":"NcTextField.vue_vue_type_script_setup_true_lang-BfjSL2EJ.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<IconLockOutline :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 IconLockOutline from 'vue-material-design-icons/LockOutline'\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\tIconLockOutline,\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=\"inputField\"\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 inputFieldInstance = useTemplateRef('inputField')\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\tinputFieldInstance.value!.focus(options)\n}\n\n/**\n * Select all the text in the input\n *\n * @public\n */\nfunction select() {\n\tinputFieldInstance.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,qBAAqB,eAAe,YAAY;AAEtD,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,yBAAmB,MAAO,MAAM,OAAO;AAAA,IACxC;AAOA,aAAS,SAAS;AACjB,yBAAmB,MAAO,OAAA;AAAA,IAC3B;;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/{NcThemeProvider.vue_vue_type_script_setup_true_lang-nUDJsDGI.mjs → NcThemeProvider.vue_vue_type_script_setup_true_lang-DWn1DRTx.mjs}

@@ -1,5 +1,5 @@
 import { defineComponent, computed, provide, createElementBlock, openBlock, normalizeProps, renderSlot } from "vue";
-import { I as INJECTION_KEY_THEME } from "./constants-Bls5liKo.mjs";
+import { I as INJECTION_KEY_THEME } from "./constants-wIEKSp2G.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "NcThemeProvider",
   props: {
@@ -27,4 +27,4 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 export {
   _sfc_main as _
 };
-//# sourceMappingURL=NcThemeProvider.vue_vue_type_script_setup_true_lang-nUDJsDGI.mjs.map
+//# sourceMappingURL=NcThemeProvider.vue_vue_type_script_setup_true_lang-DWn1DRTx.mjs.map

package/dist/chunks/{NcThemeProvider.vue_vue_type_script_setup_true_lang-nUDJsDGI.mjs.map → NcThemeProvider.vue_vue_type_script_setup_true_lang-DWn1DRTx.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcThemeProvider.vue_vue_type_script_setup_true_lang-nUDJsDGI.mjs","sources":["../../src/components/NcThemeProvider/NcThemeProvider.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis components allows to enforce a color theme on its content,\nfor example enforce the content to be always rendered in dark theme regardless of browser or user config.\n\n### Example\n```vue\n<template>\n\t<NcThemeProvider class=\"wrapper\" :dark=\"userTheme === 'dark'\">\n\t\t<div class=\"controls\">\n\t\t\t<fieldset>\n\t\t\t\t<legend>\n\t\t\t\t\tUser theme\n\t\t\t\t</legend>\n\t\t\t\t<div class=\"controls__select\">\n\t\t\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t\t\tv-model=\"userTheme\"\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tvalue=\"dark\">\n\t\t\t\t\t\tDark\n\t\t\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t\t\tv-model=\"userTheme\"\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tvalue=\"light\">\n\t\t\t\t\t\tLight\n\t\t\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t\t</div>\n\t\t\t</fieldset>\n\t\t\t<fieldset>\n\t\t\t\t<legend>\n\t\t\t\t\tNcThemeProvider theme\n\t\t\t\t</legend>\n\t\t\t\t<div class=\"controls__select\">\n\t\t\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t\t\tv-model=\"providerTheme\"\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tvalue=\"default\">\n\t\t\t\t\t\tNone (default)\n\t\t\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t\t\tv-model=\"providerTheme\"\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tvalue=\"dark\">\n\t\t\t\t\t\tDark\n\t\t\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t\t\tv-model=\"providerTheme\"\n\t\t\t\t\t\tvalue=\"light\"\n\t\t\t\t\t\ttype=\"radio\">\n\t\t\t\t\t\tLight\n\t\t\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t\t</div>\n\t\t\t</fieldset>\n\t\t</div>\n\t\t<p class=\"theme-preview\">\n\t\t\tThis is shown in user theme\n\t\t</p>\n\t\t<NcThemeProvider\n\t\t\t:dark=\"providerTheme === 'dark'\"\n\t\t\t:light=\"providerTheme === 'light'\">\n\t\t\t<div class=\"theme-preview\">\n\t\t\t\tThis is shown in the overridden theme.\n\t\t\t</div>\n\t\t</NcThemeProvider>\n\t</NcThemeProvider>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tuserTheme: 'light',\n\t\t\tproviderTheme: 'default',\n\t\t}\n\t}\n}\n</script>\n<style scoped>\n.wrapper {\n\tbackground-color: var(--color-main-background);\n\tcolor: var(--color-main-text);\n}\n\n.controls {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: 2lh;\n}\n\n.controls__select {\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: var(--default-grid-baseline);\n}\n\nlegend {\n\twidth: 100%;\n\ttext-align: center;\n}\n\n.theme-preview {\n\tbackground-color: var(--color-main-background);\n\tcolor: var(--color-main-text);\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin-top: 0.5lh;\n\tmin-height: 2lh;\n}\n</style>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport { computed, provide } from 'vue'\nimport { INJECTION_KEY_THEME } from '../../composables/useIsDarkTheme/constants.ts'\n\nconst props = defineProps<{\n\t/**\n\t * Enforce the dark theme for the content.\n\t */\n\tdark?: boolean\n\n\t/**\n\t * Enforce the light theme for the content\n\t */\n\tlight?: boolean\n}>()\n\nconst theme = computed(() => {\n\tif (props.dark) {\n\t\treturn 'dark'\n\t} else if (props.light) {\n\t\treturn 'light'\n\t}\n\treturn ''\n})\nprovide(INJECTION_KEY_THEME, theme)\n</script>\n\n<template>\n\t<div :[`data-theme-${theme}`]=\"theme\">\n\t\t<slot />\n\t</div>\n</template>\n"],"names":["_createElementBlock","_normalizeProps","_renderSlot"],"mappings":";;;;;;;;;AAyHA,UAAM,QAAQ;AAYd,UAAM,QAAQ,SAAS,MAAM;AAC5B,UAAI,MAAM,MAAM;AACf,eAAO;AAAA,MACR,WAAW,MAAM,OAAO;AACvB,eAAO;AAAA,MACR;AACA,aAAO;AAAA,IACR,CAAC;AACD,YAAQ,qBAAqB,KAAK;;0BAIjCA,mBAEM,OAAAC,eAAA,EAAA,CAAA,cAFc,MAAA,KAAK,MAAA,EAAA,GAAM,MAAA,MAAA,CAAK,GAAA;AAAA,QACnCC,WAAQ,KAAA,QAAA,SAAA;AAAA,MAAA;;;;"}
+{"version":3,"file":"NcThemeProvider.vue_vue_type_script_setup_true_lang-DWn1DRTx.mjs","sources":["../../src/components/NcThemeProvider/NcThemeProvider.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis components allows to enforce a color theme on its content,\nfor example enforce the content to be always rendered in dark theme regardless of browser or user config.\n\n### Example\n```vue\n<template>\n\t<NcThemeProvider class=\"wrapper\" :dark=\"userTheme === 'dark'\">\n\t\t<div class=\"controls\">\n\t\t\t<fieldset>\n\t\t\t\t<legend>\n\t\t\t\t\tUser theme\n\t\t\t\t</legend>\n\t\t\t\t<div class=\"controls__select\">\n\t\t\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t\t\tv-model=\"userTheme\"\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tvalue=\"dark\">\n\t\t\t\t\t\tDark\n\t\t\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t\t\tv-model=\"userTheme\"\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tvalue=\"light\">\n\t\t\t\t\t\tLight\n\t\t\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t\t</div>\n\t\t\t</fieldset>\n\t\t\t<fieldset>\n\t\t\t\t<legend>\n\t\t\t\t\tNcThemeProvider theme\n\t\t\t\t</legend>\n\t\t\t\t<div class=\"controls__select\">\n\t\t\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t\t\tv-model=\"providerTheme\"\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tvalue=\"default\">\n\t\t\t\t\t\tNone (default)\n\t\t\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t\t\tv-model=\"providerTheme\"\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tvalue=\"dark\">\n\t\t\t\t\t\tDark\n\t\t\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t\t\tv-model=\"providerTheme\"\n\t\t\t\t\t\tvalue=\"light\"\n\t\t\t\t\t\ttype=\"radio\">\n\t\t\t\t\t\tLight\n\t\t\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t\t</div>\n\t\t\t</fieldset>\n\t\t</div>\n\t\t<p class=\"theme-preview\">\n\t\t\tThis is shown in user theme\n\t\t</p>\n\t\t<NcThemeProvider\n\t\t\t:dark=\"providerTheme === 'dark'\"\n\t\t\t:light=\"providerTheme === 'light'\">\n\t\t\t<div class=\"theme-preview\">\n\t\t\t\tThis is shown in the overridden theme.\n\t\t\t</div>\n\t\t</NcThemeProvider>\n\t</NcThemeProvider>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tuserTheme: 'light',\n\t\t\tproviderTheme: 'default',\n\t\t}\n\t}\n}\n</script>\n<style scoped>\n.wrapper {\n\tbackground-color: var(--color-main-background);\n\tcolor: var(--color-main-text);\n}\n\n.controls {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: 2lh;\n}\n\n.controls__select {\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: var(--default-grid-baseline);\n}\n\nlegend {\n\twidth: 100%;\n\ttext-align: center;\n}\n\n.theme-preview {\n\tbackground-color: var(--color-main-background);\n\tcolor: var(--color-main-text);\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin-top: 0.5lh;\n\tmin-height: 2lh;\n}\n</style>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport { computed, provide } from 'vue'\nimport { INJECTION_KEY_THEME } from '../../composables/useIsDarkTheme/constants.ts'\n\nconst props = defineProps<{\n\t/**\n\t * Enforce the dark theme for the content.\n\t */\n\tdark?: boolean\n\n\t/**\n\t * Enforce the light theme for the content\n\t */\n\tlight?: boolean\n}>()\n\nconst theme = computed(() => {\n\tif (props.dark) {\n\t\treturn 'dark'\n\t} else if (props.light) {\n\t\treturn 'light'\n\t}\n\treturn ''\n})\nprovide(INJECTION_KEY_THEME, theme)\n</script>\n\n<template>\n\t<div :[`data-theme-${theme}`]=\"theme\">\n\t\t<slot />\n\t</div>\n</template>\n"],"names":["_createElementBlock","_normalizeProps","_renderSlot"],"mappings":";;;;;;;;;AAyHA,UAAM,QAAQ;AAYd,UAAM,QAAQ,SAAS,MAAM;AAC5B,UAAI,MAAM,MAAM;AACf,eAAO;AAAA,MACR,WAAW,MAAM,OAAO;AACvB,eAAO;AAAA,MACR;AACA,aAAO;AAAA,IACR,CAAC;AACD,YAAQ,qBAAqB,KAAK;;0BAIjCA,mBAEM,OAAAC,eAAA,EAAA,CAAA,cAFc,MAAA,KAAK,MAAA,EAAA,GAAM,MAAA,MAAA,CAAK,GAAA;AAAA,QACnCC,WAAQ,KAAA,QAAA,SAAA;AAAA,MAAA;;;;"}

package/dist/chunks/{NcTimezonePicker.vue_vue_type_script_setup_true_lang-CGFRZR-3.mjs → NcTimezonePicker.vue_vue_type_script_setup_true_lang-BffYEppS.mjs}

@@ -1,8 +1,8 @@
 import { defineComponent, mergeModels, useModel, computed, createBlock, openBlock, unref } from "vue";
-import { N as NcSelect } from "./NcSelect-Czzsi3P_.mjs";
-import { r as register, a as t } from "./_l10n-DrTiip5c.mjs";
+import { N as NcSelect } from "./NcSelect-Cc9_a8nG.mjs";
+import { r as register, h as t44, a as t } from "./_l10n-CgsPi8nC.mjs";
 import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
-register();
+register(t44);
 function formatTimezoneId(timezoneId) {
   return timezoneId.slice(timezoneId.indexOf("/") + 1).replaceAll("/", " - ").replaceAll("_", " ");
 }
@@ -63,4 +63,4 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 export {
   _sfc_main as _
 };
-//# sourceMappingURL=NcTimezonePicker.vue_vue_type_script_setup_true_lang-CGFRZR-3.mjs.map
+//# sourceMappingURL=NcTimezonePicker.vue_vue_type_script_setup_true_lang-BffYEppS.mjs.map

package/dist/chunks/{NcTimezonePicker.vue_vue_type_script_setup_true_lang-CGFRZR-3.mjs.map → NcTimezonePicker.vue_vue_type_script_setup_true_lang-BffYEppS.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcTimezonePicker.vue_vue_type_script_setup_true_lang-CGFRZR-3.mjs","sources":["../../src/components/NcTimezonePicker/timezoneUtils.ts","../../src/components/NcTimezonePicker/NcTimezonePicker.vue"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\n/**\n * Convert timezone ID in IANA format (e.g. \"Europe/Berlin\") to a more human-readable format\n *\n * @param timezoneId - IANA timezone ID (e.g. \"America/Argentina/San_Juan\")\n * @return Formatted timezone string (e.g. \"Argentina - San Juan\")\n */\nfunction formatTimezoneId(timezoneId: string) {\n\treturn timezoneId\n\t\t// 'America/Argentina/San_Juan' -> 'Argentina/San_Juan'\n\t\t.slice(timezoneId.indexOf('/') + 1)\n\t\t// 'Argentina/San_Juan' -> 'Argentina - San_Juan'\n\t\t.replaceAll('/', ' - ')\n\t\t// 'San_Juan' -> 'San Juan'\n\t\t.replaceAll('_', ' ')\n}\n\n/**\n * Get a list of supported IANA timezone IDs (e.g. \"Europe/Berlin\") with human-readable labels,\n * excluding Etc/* administrative zones not used by users (see: https://en.wikipedia.org/wiki/Tz_database#Areas)\n */\nexport function getTimezones() {\n\treturn Intl.supportedValuesOf('timeZone')\n\t\t.filter((tz) => !tz.startsWith('Etc/'))\n\t\t.map((timezoneId) => ({\n\t\t\ttimezoneId,\n\t\t\tlabel: formatTimezoneId(timezoneId),\n\t\t}))\n\t\t.sort((a, b) => a.timezoneId.localeCompare(b.timezoneId))\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: 'Europe/Berlin',\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport NcSelect from '../NcSelect/NcSelect.vue'\nimport { t } from '../../l10n.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { getTimezones } from './timezoneUtils.ts'\n\nexport type ITimezone = {\n\t/**\n\t * Time zone ID in IANA format, e.g. \"Europe/Berlin\", or \"floating\" for a time independent of timezone, or a custom timezone ID\n\t */\n\ttimezoneId: string\n\t/**\n\t * Localized label of the timezone, e.g. \"Central European Standard Time\"\n\t */\n\tlabel: string\n\t/**\n\t * Continent the timezone if any, e.g. \"Europe\" (not localized)\n\t */\n\tcontinent: string\n}\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 formattedAdditionalTimezones = computed(() => {\n\treturn props.additionalTimezones.map(({ timezoneId, label }) => ({\n\t\ttimezoneId,\n\t\tlabel,\n\t}))\n})\n\nconst options = computed(() => {\n\tconst timezones = getTimezones()\n\ttimezones.unshift(...formattedAdditionalTimezones.value)\n\treturn timezones\n})\n\n/**\n * NcSelect's filterBy prop to search timezone by any option property\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: ITimezone, label: string, search: string): boolean {\n\tconst terms = search.trim().split(/\\s+/)\n\tconst values = Object.values(option)\n\treturn terms.every((term) => {\n\t\treturn values.some((value) => value.toLowerCase().includes(term.toLowerCase()))\n\t})\n}\n</script>\n\n<template>\n\t<NcSelect\n\t\tv-model=\"modelValue\"\n\t\t:aria-label-combobox=\"t('Search for time zone')\"\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:uid\n\t\t:reduce=\"(option) => option.timezoneId\"\n\t\tlabel=\"label\" />\n</template>\n"],"names":["_useModel","_createBlock","_unref","uid"],"mappings":";;;;;AAWA,SAAS,iBAAiB,YAAoB;AAC7C,SAAO,WAEL,MAAM,WAAW,QAAQ,GAAG,IAAI,CAAC,EAEjC,WAAW,KAAK,KAAK,EAErB,WAAW,KAAK,GAAG;AACtB;AAMO,SAAS,eAAe;AAC9B,SAAO,KAAK,kBAAkB,UAAU,EACtC,OAAO,CAAC,OAAO,CAAC,GAAG,WAAW,MAAM,CAAC,EACrC,IAAI,CAAC,gBAAgB;AAAA,IACrB;AAAA,IACA,OAAO,iBAAiB,UAAU;AAAA,EAAA,EACjC,EACD,KAAK,CAAC,GAAG,MAAM,EAAE,WAAW,cAAc,EAAE,UAAU,CAAC;AAC1D;;;;;;;;;;;;ACoBA,UAAM,aAAaA,SAAmB,SAAA,YAAwB;AAE9D,UAAM,QAAQ;AAed,UAAM,+BAA+B,SAAS,MAAM;AACnD,aAAO,MAAM,oBAAoB,IAAI,CAAC,EAAE,YAAY,aAAa;AAAA,QAChE;AAAA,QACA;AAAA,MAAA,EACC;AAAA,IACH,CAAC;AAED,UAAM,UAAU,SAAS,MAAM;AAC9B,YAAM,YAAY,aAAA;AAClB,gBAAU,QAAQ,GAAG,6BAA6B,KAAK;AACvD,aAAO;AAAA,IACR,CAAC;AASD,aAAS,SAAS,QAAmB,OAAe,QAAyB;AAC5E,YAAM,QAAQ,OAAO,KAAA,EAAO,MAAM,KAAK;AACvC,YAAM,SAAS,OAAO,OAAO,MAAM;AACnC,aAAO,MAAM,MAAM,CAAC,SAAS;AAC5B,eAAO,OAAO,KAAK,CAAC,UAAU,MAAM,YAAA,EAAc,SAAS,KAAK,YAAA,CAAa,CAAC;AAAA,MAC/E,CAAC;AAAA,IACF;;0BAICC,YAUiB,UAAA;AAAA,oBATP,WAAA;AAAA,qEAAA,WAAU,QAAA;AAAA,QAClB,uBAAqBC,MAAA,CAAA,EAAC,sBAAA;AAAA,QACtB,WAAW;AAAA,QACX,aAAA;AAAA,QACA,UAAU;AAAA,QACV,SAAA,QAAA;AAAA,QACA,aAAaA,MAAA,CAAA,EAAC,0BAAA;AAAA,QACd,KAAAC,KAAAA;AAAAA,QACA,QAAM,CAAG,WAAW,OAAO;AAAA,QAC5B,OAAM;AAAA,MAAA;;;;"}
+{"version":3,"file":"NcTimezonePicker.vue_vue_type_script_setup_true_lang-BffYEppS.mjs","sources":["../../src/components/NcTimezonePicker/timezoneUtils.ts","../../src/components/NcTimezonePicker/NcTimezonePicker.vue"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\n/**\n * Convert timezone ID in IANA format (e.g. \"Europe/Berlin\") to a more human-readable format\n *\n * @param timezoneId - IANA timezone ID (e.g. \"America/Argentina/San_Juan\")\n * @return Formatted timezone string (e.g. \"Argentina - San Juan\")\n */\nfunction formatTimezoneId(timezoneId: string) {\n\treturn timezoneId\n\t\t// 'America/Argentina/San_Juan' -> 'Argentina/San_Juan'\n\t\t.slice(timezoneId.indexOf('/') + 1)\n\t\t// 'Argentina/San_Juan' -> 'Argentina - San_Juan'\n\t\t.replaceAll('/', ' - ')\n\t\t// 'San_Juan' -> 'San Juan'\n\t\t.replaceAll('_', ' ')\n}\n\n/**\n * Get a list of supported IANA timezone IDs (e.g. \"Europe/Berlin\") with human-readable labels,\n * excluding Etc/* administrative zones not used by users (see: https://en.wikipedia.org/wiki/Tz_database#Areas)\n */\nexport function getTimezones() {\n\treturn Intl.supportedValuesOf('timeZone')\n\t\t.filter((tz) => !tz.startsWith('Etc/'))\n\t\t.map((timezoneId) => ({\n\t\t\ttimezoneId,\n\t\t\tlabel: formatTimezoneId(timezoneId),\n\t\t}))\n\t\t.sort((a, b) => a.timezoneId.localeCompare(b.timezoneId))\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: 'Europe/Berlin',\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport NcSelect from '../NcSelect/NcSelect.vue'\nimport { t } from '../../l10n.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { getTimezones } from './timezoneUtils.ts'\n\nexport type ITimezone = {\n\t/**\n\t * Time zone ID in IANA format, e.g. \"Europe/Berlin\", or \"floating\" for a time independent of timezone, or a custom timezone ID\n\t */\n\ttimezoneId: string\n\t/**\n\t * Localized label of the timezone, e.g. \"Central European Standard Time\"\n\t */\n\tlabel: string\n\t/**\n\t * Continent the timezone if any, e.g. \"Europe\" (not localized)\n\t */\n\tcontinent: string\n}\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 formattedAdditionalTimezones = computed(() => {\n\treturn props.additionalTimezones.map(({ timezoneId, label }) => ({\n\t\ttimezoneId,\n\t\tlabel,\n\t}))\n})\n\nconst options = computed(() => {\n\tconst timezones = getTimezones()\n\ttimezones.unshift(...formattedAdditionalTimezones.value)\n\treturn timezones\n})\n\n/**\n * NcSelect's filterBy prop to search timezone by any option property\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: ITimezone, label: string, search: string): boolean {\n\tconst terms = search.trim().split(/\\s+/)\n\tconst values = Object.values(option)\n\treturn terms.every((term) => {\n\t\treturn values.some((value) => value.toLowerCase().includes(term.toLowerCase()))\n\t})\n}\n</script>\n\n<template>\n\t<NcSelect\n\t\tv-model=\"modelValue\"\n\t\t:aria-label-combobox=\"t('Search for time zone')\"\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:uid\n\t\t:reduce=\"(option) => option.timezoneId\"\n\t\tlabel=\"label\" />\n</template>\n"],"names":["_useModel","_createBlock","_unref","uid"],"mappings":";;;;;AAWA,SAAS,iBAAiB,YAAoB;AAC7C,SAAO,WAEL,MAAM,WAAW,QAAQ,GAAG,IAAI,CAAC,EAEjC,WAAW,KAAK,KAAK,EAErB,WAAW,KAAK,GAAG;AACtB;AAMO,SAAS,eAAe;AAC9B,SAAO,KAAK,kBAAkB,UAAU,EACtC,OAAO,CAAC,OAAO,CAAC,GAAG,WAAW,MAAM,CAAC,EACrC,IAAI,CAAC,gBAAgB;AAAA,IACrB;AAAA,IACA,OAAO,iBAAiB,UAAU;AAAA,EAAA,EACjC,EACD,KAAK,CAAC,GAAG,MAAM,EAAE,WAAW,cAAc,EAAE,UAAU,CAAC;AAC1D;;;;;;;;;;;;ACoBA,UAAM,aAAaA,SAAmB,SAAA,YAAwB;AAE9D,UAAM,QAAQ;AAed,UAAM,+BAA+B,SAAS,MAAM;AACnD,aAAO,MAAM,oBAAoB,IAAI,CAAC,EAAE,YAAY,aAAa;AAAA,QAChE;AAAA,QACA;AAAA,MAAA,EACC;AAAA,IACH,CAAC;AAED,UAAM,UAAU,SAAS,MAAM;AAC9B,YAAM,YAAY,aAAA;AAClB,gBAAU,QAAQ,GAAG,6BAA6B,KAAK;AACvD,aAAO;AAAA,IACR,CAAC;AASD,aAAS,SAAS,QAAmB,OAAe,QAAyB;AAC5E,YAAM,QAAQ,OAAO,KAAA,EAAO,MAAM,KAAK;AACvC,YAAM,SAAS,OAAO,OAAO,MAAM;AACnC,aAAO,MAAM,MAAM,CAAC,SAAS;AAC5B,eAAO,OAAO,KAAK,CAAC,UAAU,MAAM,YAAA,EAAc,SAAS,KAAK,YAAA,CAAa,CAAC;AAAA,MAC/E,CAAC;AAAA,IACF;;0BAICC,YAUiB,UAAA;AAAA,oBATP,WAAA;AAAA,qEAAA,WAAU,QAAA;AAAA,QAClB,uBAAqBC,MAAA,CAAA,EAAC,sBAAA;AAAA,QACtB,WAAW;AAAA,QACX,aAAA;AAAA,QACA,UAAU;AAAA,QACV,SAAA,QAAA;AAAA,QACA,aAAaA,MAAA,CAAA,EAAC,0BAAA;AAAA,QACd,KAAAC,KAAAA;AAAAA,QACA,QAAM,CAAG,WAAW,OAAO;AAAA,QAC5B,OAAM;AAAA,MAAA;;;;"}

package/dist/chunks/{NcUserBubble-DPAmU2_J.mjs → NcUserBubble-CiB-Lu5C.mjs}

@@ -1,7 +1,7 @@
 import '../assets/NcUserBubble-B3Jad98g.css';
 import { createElementBlock, openBlock, renderSlot, defineComponent, mergeModels, useModel, computed, warn, watch, createBlock, resolveDynamicComponent, withCtx, mergeProps, createVNode, createElementVNode, createCommentVNode, normalizeStyle, toDisplayString } from "vue";
 import { RouterLink } from "vue-router";
-import { N as NcAvatar } from "./NcAvatar-DmUGApWA.mjs";
+import { N as NcAvatar } from "./NcAvatar-S8EJR2BK.mjs";
 import { N as NcPopover } from "./NcPopover-C-MTaPCs.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 const _sfc_main$1 = {};
@@ -133,4 +133,4 @@ const NcUserBubble = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data
 export {
   NcUserBubble as N
 };
-//# sourceMappingURL=NcUserBubble-DPAmU2_J.mjs.map
+//# sourceMappingURL=NcUserBubble-CiB-Lu5C.mjs.map

package/dist/chunks/{NcUserBubble-DPAmU2_J.mjs.map → NcUserBubble-CiB-Lu5C.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcUserBubble-DPAmU2_J.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 NcAvatar from '../NcAvatar/NcAvatar.vue'\nimport NcPopover from '../NcPopover/NcPopover.vue'\nimport NcUserBubbleDiv from './NcUserBubbleDiv.vue'\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","_withCtx","_mergeProps","primary","to","_createVNode","avatarImage","user","displayName","size","margin","showUserStatus","_createElementVNode","_toDisplayString"],"mappings":"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"}
+{"version":3,"file":"NcUserBubble-CiB-Lu5C.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 NcAvatar from '../NcAvatar/NcAvatar.vue'\nimport NcPopover from '../NcPopover/NcPopover.vue'\nimport NcUserBubbleDiv from './NcUserBubbleDiv.vue'\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","_withCtx","_mergeProps","primary","to","_createVNode","avatarImage","user","displayName","size","margin","showUserStatus","_createElementVNode","_toDisplayString"],"mappings":"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"}

package/dist/chunks/{NcUserStatusIcon-CGEf7fej.mjs → NcUserStatusIcon-BgElapLh.mjs}

@@ -3,7 +3,7 @@ import { defineComponent, mergeModels, useModel, computed, watch, createElementB
 import axios from "@nextcloud/axios";
 import { getCapabilities } from "@nextcloud/capabilities";
 import { generateOcsUrl } from "@nextcloud/router";
-import { r as register, y as t11, a as t } from "./_l10n-DrTiip5c.mjs";
+import { r as register, Q as t51, R as t11, a as t } from "./_l10n-CgsPi8nC.mjs";
 import { l as logger } from "./logger-D3RVzcfQ.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 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';
@@ -11,7 +11,7 @@ const busySvg = '<!--\n  - SPDX-FileCopyrightText: 2020 Google Inc.\n  - SPDX-Li
 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(t51);
 register(t11);
 function getUserStatusText(status) {
   switch (status) {
@@ -86,4 +86,4 @@ export {
   NcUserStatusIcon as N,
   getUserStatusText as g
 };
-//# sourceMappingURL=NcUserStatusIcon-CGEf7fej.mjs.map
+//# sourceMappingURL=NcUserStatusIcon-BgElapLh.mjs.map

package/dist/chunks/{NcUserStatusIcon-CGEf7fej.mjs.map → NcUserStatusIcon-BgElapLh.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcUserStatusIcon-CGEf7fej.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;;;;;"}
+{"version":3,"file":"NcUserStatusIcon-BgElapLh.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;;;;;"}