@nextcloud/vue 9.9.0 → 9.11.0

package/dist/chunks/{NcInputConfirmCancel-CGTllrXj.mjs → NcInputConfirmCancel.mjs}

@@ -1,12 +1,12 @@
-import '../assets/NcInputConfirmCancel-DZEDRf0t.css';
-import { I as IconArrowRight } from "./ArrowRight-B1ncAhus.mjs";
-import { I as IconClose } from "./Close-CuhcJnX2.mjs";
-import { r as register, k as t14, a as t } from "./_l10n-wdIzZwir.mjs";
-import { i as isLegacy34 } from "./legacy-BoqDmOCa.mjs";
-import { N as NcButton } from "./NcButton-jvoYS2my.mjs";
+import '../assets/NcInputConfirmCancel.css';
+import { I as IconArrowRight } from "./ArrowRight.mjs";
+import { I as IconClose } from "./Close.mjs";
+import { r as register, k as t15, a as t } from "./_l10n.mjs";
+import { i as isLegacy34 } from "./legacy.mjs";
+import { N as NcButton } from "./NcButton.mjs";
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, withModifiers, withKeys, withDirectives, vModelText, createVNode, withCtx } from "vue";
-import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
-register(t14);
+import { _ as _export_sfc } from "./_plugin-vue_export-helper.mjs";
+register(t15);
 const _sfc_main = {
   name: "NcInputConfirmCancel",
   components: {
@@ -125,4 +125,4 @@ const NcInputConfirmCancel = /* @__PURE__ */ _export_sfc(_sfc_main, [["render",
 export {
   NcInputConfirmCancel as N
 };
-//# sourceMappingURL=NcInputConfirmCancel-CGTllrXj.mjs.map
+//# sourceMappingURL=NcInputConfirmCancel.mjs.map

package/dist/chunks/NcInputConfirmCancel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcInputConfirmCancel.mjs","sources":["../../src/components/NcAppNavigationItem/NcInputConfirmCancel.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n# Usage\n\n```\n<NcInputConfirmCancel @confirm=\"alert('confirm')\" @cancel=\"alert('cancel')\" />\n```\n</docs>\n\n<template>\n\t<div class=\"app-navigation-input-confirm\" :class=\"{ 'app-navigation-input-confirm--legacy': isLegacy34 }\">\n\t\t<form\n\t\t\t@submit.prevent=\"confirm\"\n\t\t\t@keydown.esc.exact.stop.prevent=\"cancel\"\n\t\t\t@click.stop.prevent>\n\t\t\t<input\n\t\t\t\tref=\"input\"\n\t\t\t\tv-model=\"valueModel\"\n\t\t\t\ttype=\"text\"\n\t\t\t\tclass=\"app-navigation-input-confirm__input\"\n\t\t\t\t:placeholder=\"placeholder\">\n\n\t\t\t<NcButton\n\t\t\t\t:aria-label=\"labelConfirm\"\n\t\t\t\ttype=\"submit\"\n\t\t\t\tvariant=\"primary\"\n\t\t\t\t@click.stop.prevent=\"confirm\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconArrowRight :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\n\t\t\t<NcButton\n\t\t\t\t:aria-label=\"labelCancel\"\n\t\t\t\ttype=\"reset\"\n\t\t\t\t:variant=\"primary ? 'primary' : 'tertiary'\"\n\t\t\t\t@click.stop.prevent=\"cancel\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconClose :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\t\t</form>\n\t</div>\n</template>\n\n<script>\nimport IconArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport IconClose from 'vue-material-design-icons/Close.vue'\nimport { t } from '../../l10n.ts'\nimport { isLegacy34 } from '../../utils/legacy.ts'\nimport NcButton from '../NcButton/index.js'\n\nexport default {\n\tname: 'NcInputConfirmCancel',\n\n\tcomponents: {\n\t\tIconArrowRight,\n\t\tIconClose,\n\t\tNcButton,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * If this element is used on a primary element set to true for primary styling.\n\t\t */\n\t\tprimary: {\n\t\t\tdefault: false,\n\t\t\ttype: Boolean,\n\t\t},\n\n\t\t/**\n\t\t * Placeholder of the edit field\n\t\t */\n\t\tplaceholder: {\n\t\t\tdefault: '',\n\t\t\ttype: String,\n\t\t},\n\n\t\t/**\n\t\t * The current name (model value)\n\t\t */\n\t\tmodelValue: {\n\t\t\tdefault: '',\n\t\t\ttype: String,\n\t\t},\n\t},\n\n\temits: [\n\t\t'cancel',\n\t\t'confirm',\n\t\t'update:modelValue',\n\t],\n\n\tsetup() {\n\t\treturn { isLegacy34 }\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tlabelConfirm: t('Confirm changes'),\n\t\t\tlabelCancel: t('Cancel changes'),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tvalueModel: {\n\t\t\tget() { return this.modelValue },\n\t\t\tset(newValue) {\n\t\t\t\tthis.$emit('update:modelValue', newValue)\n\t\t\t},\n\t\t},\n\t},\n\n\tmethods: {\n\t\tconfirm() {\n\t\t\tthis.$emit('confirm')\n\t\t},\n\n\t\tcancel() {\n\t\t\tthis.$emit('cancel')\n\t\t},\n\n\t\tfocusInput() {\n\t\t\tthis.$refs.input.focus()\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n$input-height: 34px;\n$input-padding: 7px;\n$input-margin: 5px;\n\n.app-navigation-input-confirm {\n\tflex: 1 0 100%;\n\twidth: 100%;\n\n\tform {\n\t\tdisplay: flex;\n\t}\n\n\t&__input {\n\t\theight: $input-height;\n\t\tflex: 1 1 100%;\n\t\tfont-size: 100% !important;\n\t\tmargin: $input-margin !important;\n\t\tmargin-inline-start: -1px - $input-padding !important;\n\t\tpadding: $input-padding !important;\n\n\t\t&:active,\n\t\t&:focus,\n\t\t&:hover {\n\t\t\toutline: none;\n\t\t\tbackground-color: var(--color-main-background);\n\t\t\tcolor: var(--color-main-text);\n\t\t\tborder-color: var(--color-primary-element);\n\t\t}\n\t}\n\n\t// New design (NC34+): square confirm/cancel buttons with consistent gaps.\n\t&:not(&--legacy) {\n\t\tform {\n\t\t\talign-items: center;\n\t\t\tgap: $input-margin;\n\t\t\tpadding-inline-end: $input-margin;\n\t\t}\n\n\t\t.app-navigation-input-confirm__input {\n\t\t\tmargin-inline-end: 0 !important;\n\t\t}\n\n\t\t:deep(.button-vue) {\n\t\t\twidth: $input-height !important;\n\t\t\tmin-width: $input-height !important;\n\t\t\theight: $input-height !important;\n\t\t\tflex: 0 0 $input-height;\n\t\t}\n\t}\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_createVNode"],"mappings":";;;;;;;;AAwDA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,YAAY;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA;EAGD,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,SAAS;AAAA,MACR,SAAS;AAAA,MACT,MAAM;AAAA;;;;IAMP,aAAa;AAAA,MACZ,SAAS;AAAA,MACT,MAAM;AAAA;;;;IAMP,YAAY;AAAA,MACX,SAAS;AAAA,MACT,MAAM;AAAA;;EAIR,OAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA;EAGD,QAAQ;AACP,WAAO,EAAE,WAAS;AAAA,EACnB;AAAA,EAEA,OAAO;AACN,WAAO;AAAA,MACN,cAAc,EAAE,iBAAiB;AAAA,MACjC,aAAa,EAAE,gBAAgB;AAAA,IAChC;AAAA,EACD;AAAA,EAEA,UAAU;AAAA,IACT,YAAY;AAAA,MACX,MAAM;AAAE,eAAO,KAAK;AAAA,MAAW;AAAA,MAC/B,IAAI,UAAU;AACb,aAAK,MAAM,qBAAqB,QAAQ;AAAA,MACzC;AAAA;;EAIF,SAAS;AAAA,IACR,UAAU;AACT,WAAK,MAAM,SAAS;AAAA,IACrB;AAAA,IAEA,SAAS;AACR,WAAK,MAAM,QAAQ;AAAA,IACpB;AAAA,IAEA,aAAa;AACZ,WAAK,MAAM,MAAM,MAAK;AAAA,IACvB;AAAA;AAEF;;;;;;sBApHCA,mBAgCM,OAAA;AAAA,IAhCD,OAAKC,eAAA,CAAC,gCAA8B,EAAA,wCAAmD,OAAA,YAAU,CAAA;AAAA;IACrGC,mBA8BO,QAAA;AAAA,MA7BL,+DAAgB,SAAA,WAAA,SAAA,QAAA,GAAA,IAAA,GAAO,CAAA,SAAA,CAAA;AAAA,MACvB,yEAAgC,SAAA,UAAA,SAAA,OAAA,GAAA,IAAA,GAAM,CAAA,SAAA,QAAA,SAAA,CAAA,GAAA,CAAA,KAAA,CAAA;AAAA,MACtC,iDAAD,MAAA;AAAA,MAAA,GAAmB,CAAA,QAAA,SAAA,CAAA;AAAA;qBACnBA,mBAK4B,SAAA;AAAA,QAJ3B,KAAI;AAAA,qEACK,SAAA,aAAU;AAAA,QACnB,MAAK;AAAA,QACL,OAAM;AAAA,QACL,aAAa,OAAA;AAAA;qBAHL,SAAA,UAAU;AAAA;MAKpBC,YAQW,qBAAA;AAAA,QAPT,cAAY,MAAA;AAAA,QACb,MAAK;AAAA,QACL,SAAQ;AAAA,QACP,uBAAoB,SAAA,SAAO,CAAA,QAAA,SAAA,CAAA;AAAA;QACjB,cACV,MAA6B;AAAA,UAA7BA,YAA6B,2BAAA,EAAZ,MAAM,GAAE,CAAA;AAAA;;;MAI3BA,YAQW,qBAAA;AAAA,QAPT,cAAY,MAAA;AAAA,QACb,MAAK;AAAA,QACJ,SAAS,OAAA,UAAO,YAAA;AAAA,QAChB,uBAAoB,SAAA,QAAM,CAAA,QAAA,SAAA,CAAA;AAAA;QAChB,cACV,MAAwB;AAAA,UAAxBA,YAAwB,sBAAA,EAAZ,MAAM,GAAE,CAAA;AAAA;;;;;;;"}

package/dist/chunks/{NcInputField-5Sg6EUP6.mjs → NcInputField.mjs}

@@ -1,11 +1,11 @@
-import '../assets/NcInputField-DpyFJ1xw.css';
+import '../assets/NcInputField.css';
 import { defineComponent, useModel, useAttrs, useTemplateRef, computed, warn, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, mergeProps, toDisplayString, createCommentVNode, withDirectives, renderSlot, vShow, createBlock, withCtx, createTextVNode, mergeModels } from "vue";
-import { d as mdiCheck, j as mdiAlertCircleOutline } from "./mdi-CpchYUUV.mjs";
-import { N as NcButton } from "./NcButton-jvoYS2my.mjs";
-import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-g8ubWhoz.mjs";
-import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
-import { a as isLegacy } from "./legacy-BoqDmOCa.mjs";
-import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+import { d as mdiCheck, j as mdiAlertCircleOutline } from "./mdi.mjs";
+import { N as NcButton } from "./NcButton.mjs";
+import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper.mjs";
+import { c as createElementId } from "./createElementId.mjs";
+import { a as isLegacy } from "./legacy.mjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper.mjs";
 const _hoisted_1 = { class: "input-field__main-wrapper" };
 const _hoisted_2 = ["id", "aria-describedby", "disabled", "placeholder", "type", "value"];
 const _hoisted_3 = ["for"];
@@ -167,8 +167,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const NcInputField = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-8e16cbb5"]]);
+const NcInputField = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-feb04bef"]]);
 export {
   NcInputField as N
 };
-//# sourceMappingURL=NcInputField-5Sg6EUP6.mjs.map
+//# sourceMappingURL=NcInputField.mjs.map

package/dist/chunks/NcInputField.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcInputField.mjs","sources":["../../src/components/NcInputField/NcInputField.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\n\nThis component is used by the other Fields components.\nIt extends and styles an HTMLInputElement.\n\nYou cannot use it as is. This is here for documentation purposes.\nSee the other field components.\n\nFor a list of all available props and attributes, please check the [HTMLInputElement documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n\n</docs>\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\nimport type { VueClassType } from '../../utils/VueTypes.ts'\n\nimport { mdiAlertCircleOutline, mdiCheck } from '@mdi/js'\nimport { computed, useAttrs, useTemplateRef, warn } from 'vue'\nimport NcButton from '../NcButton/NcButton.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { isLegacy } from '../../utils/legacy.ts'\n\nexport interface NcInputFieldProps {\n\t/**\n\t * Class to add to the root component.\n\t */\n\tclass?: VueClassType\n\n\t/**\n\t * Class to add to the input field.\n\t * Necessary to use NcInputField in the NcActionInput component.\n\t */\n\tinputClass?: VueClassType\n\n\t/**\n\t * HTML id of the input field\n\t */\n\tid?: string\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 unless the placeholder\n\t * prop is populated with a different string.\n\t *\n\t * Note: If the background color is not `--color-main-background` consider using an external label instead (see `labelOutside`).\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 type of the input element.\n\t *\n\t * The date/time types (`date`, `datetime-local`, `month`, `time`, `week`) render a native\n\t * picker; their label always floats as such inputs have no empty placeholder state.\n\t */\n\ttype?: 'text' | 'password' | 'email' | 'tel' | 'url' | 'search' | 'number'\n\t\t| 'date' | 'datetime-local' | 'month' | 'time' | 'week'\n\n\t/**\n\t * The placeholder of the input.\n\t * On Nextcloud before version 32 this would default to the `label` prop.\n\t * On Nextcloud 32 and on v9 of this library it will no longer have a default value.\n\t */\n\tplaceholder?: string\n\n\t/**\n\t * Controls whether to display the trailing button.\n\t */\n\tshowTrailingButton?: boolean\n\n\t/**\n\t * Label of the trailing button\n\t *\n\t * Required when showTrailingButton is set\n\t */\n\ttrailingButtonLabel?: string\n\n\t/**\n\t * Toggles the success state of the component. Adds a checkmark icon.\n\t */\n\tsuccess?: boolean\n\n\t/**\n\t * Toggles the error state of the component. 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 * Disable the input field\n\t */\n\tdisabled?: boolean\n\n\t/**\n\t * Specifies whether the input should have a pill form.\n\t * By default, input has rounded corners.\n\t */\n\tpill?: boolean\n}\n\ndefineOptions({\n\tinheritAttrs: false,\n})\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>({ required: true })\n\nconst props = withDefaults(defineProps<NcInputFieldProps>(), {\n\tclass: '',\n\thelperText: '',\n\tid: () => createElementId(),\n\tinputClass: '',\n\tlabel: undefined,\n\tplaceholder: undefined,\n\ttrailingButtonLabel: undefined,\n\ttype: 'text',\n})\n\nconst emit = defineEmits<{\n\ttrailingButtonClick: [event: MouseEvent]\n}>()\n\ndefineSlots<{\n\t/**\n\t * Leading icon, set the size to 20.\n\t */\n\ticon?: Slot\n\n\t/**\n\t * Icon for the trailing button.\n\t */\n\t'trailing-button-icon'?: Slot\n}>()\n\n// public API\ndefineExpose({\n\tfocus,\n\tselect,\n})\n\nconst attrs = useAttrs()\n\nconst inputElement = useTemplateRef('input')\n\nconst hasTrailingIcon = computed(() => props.showTrailingButton || props.success)\n\nconst internalPlaceholder = computed(() => {\n\tif (props.placeholder) {\n\t\treturn props.placeholder\n\t}\n\tif (props.label) {\n\t\t// if there is a label we use it as fallback on legacy but on current we need\n\t\t// to pass at least an empty string as placeholder to make css `:placeholder-shown` work.\n\t\treturn isLegacy ? props.label : ''\n\t}\n\treturn undefined\n})\n\nconst isValidLabel = computed(() => {\n\tconst isValidLabel = props.label || props.labelOutside\n\tif (!isValidLabel) {\n\t\twarn('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\treturn isValidLabel\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 (attrs['aria-describedby']) {\n\t\tariaDescribedby.push(String(attrs['aria-describedby']))\n\t}\n\treturn ariaDescribedby.join(' ') || undefined\n})\n\n/**\n * Focus the input element\n *\n * @param options - Focus options\n * @public\n */\nfunction focus(options?: FocusOptions) {\n\tinputElement.value!.focus(options)\n}\n\n/**\n * Select all the text in the input\n *\n * @public\n */\nfunction select() {\n\tinputElement.value!.select()\n}\n\n/**\n * Handle the input event of the HTML input.\n * Parses numbers in case of numeric type.\n *\n * @param event - The input event\n */\nfunction handleInput(event: Event) {\n\tconst target = event.target as HTMLInputElement\n\tmodelValue.value = props.type === 'number' && typeof modelValue.value === 'number'\n\t\t? parseFloat(target.value)\n\t\t: target.value\n}\n</script>\n\n<template>\n\t<div\n\t\tclass=\"input-field\"\n\t\t:class=\"[{\n\t\t\t'input-field--disabled': disabled,\n\t\t\t'input-field--error': error,\n\t\t\t'input-field--label-outside': labelOutside || !isValidLabel,\n\t\t\t'input-field--leading-icon': !!$slots.icon,\n\t\t\t'input-field--trailing-icon': hasTrailingIcon,\n\t\t\t'input-field--pill': pill,\n\t\t\t'input-field--success': success,\n\t\t\t'input-field--legacy': isLegacy,\n\t\t}, $props.class]\">\n\t\t<div class=\"input-field__main-wrapper\">\n\t\t\t<input\n\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t:id\n\t\t\t\tref=\"input\"\n\t\t\t\t:aria-describedby=\"ariaDescribedby\"\n\t\t\t\taria-live=\"polite\"\n\t\t\t\tclass=\"input-field__input\"\n\t\t\t\t:class=\"inputClass\"\n\t\t\t\t:disabled\n\t\t\t\t:placeholder=\"internalPlaceholder\"\n\t\t\t\t:type\n\t\t\t\t:value=\"modelValue.toString()\"\n\t\t\t\t@input=\"handleInput\">\n\t\t\t<!-- Label -->\n\t\t\t<label\n\t\t\t\tv-if=\"!labelOutside && isValidLabel\"\n\t\t\t\tclass=\"input-field__label\"\n\t\t\t\t:for=\"id\">\n\t\t\t\t{{ label }}\n\t\t\t</label>\n\n\t\t\t<!-- Leading icon -->\n\t\t\t<div v-show=\"!!$slots.icon\" class=\"input-field__icon input-field__icon--leading\">\n\t\t\t\t<slot name=\"icon\" />\n\t\t\t</div>\n\n\t\t\t<!-- trailing button -->\n\t\t\t<NcButton\n\t\t\t\tv-if=\"showTrailingButton\"\n\t\t\t\tclass=\"input-field__trailing-button\"\n\t\t\t\t:aria-label=\"trailingButtonLabel\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t\t@click=\"emit('trailingButtonClick', $event)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<slot name=\"trailing-button-icon\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\n\t\t\t<!-- Success and error icons -->\n\t\t\t<div\n\t\t\t\tv-else-if=\"success || error\"\n\t\t\t\tclass=\"input-field__icon input-field__icon--trailing\">\n\t\t\t\t<NcIconSvgWrapper v-if=\"success\" :path=\"mdiCheck\" />\n\t\t\t\t<NcIconSvgWrapper v-else :path=\"mdiAlertCircleOutline\" />\n\t\t\t</div>\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=\"input-field__helper-text-message\">\n\t\t\t<NcIconSvgWrapper\n\t\t\t\tv-if=\"success\"\n\t\t\t\tclass=\"input-field__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=\"input-field__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.input-field {\n\t--input-border-color: var(--color-border-maxcontrast);\n\t--input-border-radius: var(--border-radius-element);\n\t// The padding before the input can start (leading button or border)\n\t--input-padding-start: var(--border-radius-element);\n\t// The padding where the input has to end (trailing button or border)\n\t--input-padding-end: var(--border-radius-element);\n\t// positional styles\n\tposition: relative;\n\twidth: 100%;\n\tmargin-block-start: 6px; // for the label in active state\n\n\t&--disabled {\n\t\topacity: 0.4;\n\t\tfilter: saturate(0.4);\n\t}\n\n\t// If there is no internal label we reset the margin reserved for it\n\t&--label-outside {\n\t\tmargin-block-start: 0;\n\t}\n\n\t&--leading-icon {\n\t\t--input-padding-start: calc(var(--default-clickable-area) - var(--default-grid-baseline));\n\t}\n\n\t&--trailing-icon {\n\t\t--input-padding-end: calc(var(--default-clickable-area) - var(--default-grid-baseline));\n\t}\n\n\t&--pill {\n\t\t--input-border-radius: var(--border-radius-pill);\n\t}\n\n\t&__main-wrapper {\n\t\theight: var(--default-clickable-area);\n\t\tpadding: var(--border-width-input-focused, 2px);\n\t\tposition: relative;\n\t}\n\n\t&__input {\n\t\t@include border.inputBorder('.input-field--legacy', var(--input-border-color));\n\t\tbackground-color: var(--color-main-background);\n\t\tcolor: var(--color-main-text);\n\t\tborder-radius: var(--input-border-radius);\n\n\t\tcursor: pointer;\n\t\t-webkit-appearance: textfield !important;\n\t\t-moz-appearance: textfield !important;\n\t\tappearance: textfield !important;\n\n\t\tfont-size: var(--default-font-size);\n\t\ttext-overflow: ellipsis;\n\n\t\tpadding-block: 0;\n\t\tpadding-inline: var(--input-padding-start) var(--input-padding-end);\n\t\theight: 100% !important;\n\t\tmin-height: unset;\n\t\twidth: 100%;\n\n\t\t&::placeholder {\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\n\t\t// prevent Blink and WebKit to add an additional button when type is set to search\n\t\t// we have our properly styled trailing button anyways.\n\t\t&::-webkit-search-cancel-button {\n\t\t\t// its a weird bug in Blink that this rule must not be grouped with the other selectors below.\n\t\t\t// otherwise it is not recognized by Blink\n\t\t\tdisplay: none;\n\t\t}\n\t\t&::-webkit-search-decoration,\n\t\t&::-webkit-search-results-button,\n\t\t&::-webkit-search-results-decoration,\n\t\t&::-ms-clear {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t&:active:not([disabled]),\n\t\t&:focus:not([disabled]) {\n\t\t\t--input-border-color: var(--color-main-text);\n\t\t}\n\n\t\t&:focus + .input-field__label,\n\t\t&:hover:not(:placeholder-shown) + .input-field__label {\n\t\t\tcolor: var(--color-main-text);\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\t}\n\n\t// Hide placeholder while not focussed -> show label instead (only if internal label is used)\n\t&:not(&--label-outside) &__input:not(:focus)::placeholder {\n\t\topacity: 0;\n\t}\n\n\t&__label {\n\t\t--input-label-font-size: var(--default-font-size);\n\t\tfont-size: var(--input-label-font-size);\n\n\t\tposition: absolute;\n\t\tmargin-inline: var(--input-padding-start) var(--input-padding-end);\n\t\tmax-width: fit-content;\n\t\tinset-block-start: calc((var(--default-clickable-area) - 1lh) / 2); // center the label vertically\n\t\tinset-inline: var(--border-width-input-focused, 2px);\n\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\t--input-label-font-size: 13px; // minimum allowed font size for accessibility\n\t\tline-height: 1.5; // minimum allowed line height for accessibility\n\t\t// 1.5 * font-size = line-height; line-height / 2 for centering and make it negative as we need to move outside the element\n\t\tinset-block-start: calc(-1.5 * var(--input-label-font-size) / 2);\n\t\tfont-weight: var(--font-weight-element, 500);\n\t\tborder-radius: var(--default-grid-baseline) var(--default-grid-baseline) 0 0;\n\t\tbackground-color: var(--color-main-background);\n\t\tpadding-inline: var(--default-grid-baseline);\n\t\tmargin-inline: calc(var(--input-padding-start) - var(--default-grid-baseline)) calc(var(--input-padding-end) - var(--default-grid-baseline));\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&__icon {\n\t\tposition: absolute;\n\t\theight: var(--default-clickable-area);\n\t\twidth: var(--default-clickable-area);\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\topacity: 0.7;\n\n\t\tinset-block-end: 0;\n\n\t\t&--leading {\n\t\t\tinset-inline-start: 0px;\n\t\t}\n\n\t\t&--trailing {\n\t\t\tinset-inline-end: 0px;\n\t\t}\n\t}\n\n\t&__trailing-button {\n\t\t--button-size: calc(var(--default-clickable-area) - 2 * var(--border-width-input-focused, 2px)) !important;\n\t\t--button-radius: calc(var(--input-border-radius) - var(--border-width-input-focused, 2px)); // lower radius as size is smaller\n\n\t\t&.button-vue {\n\t\t\tposition: absolute;\n\t\t\ttop: var(--border-width-input-focused, 2px);\n\t\t\tinset-inline-end: var(--border-width-input-focused, 2px);\n\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: none !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__helper-text-message {\n\t\tpadding-block: 4px;\n\t\tpadding-inline: var(--border-radius-element);\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tcolor: var(--color-text-maxcontrast);\n\t\toverflow-wrap: anywhere;\n\n\t\t&__icon {\n\t\t\tmargin-inline-end: 8px;\n\t\t}\n\t}\n\n\t&--error {\n\t\t.input-field__helper-text-message,\n\t\t.input-field__icon--trailing {\n\t\t\tcolor: var(--color-text-error, var(--color-error));\n\t\t}\n\t}\n\n\t&--error .input-field__input,\n\t&__input:user-invalid {\n\t\t--input-border-color: var(--color-border-error, var(--color-error)) !important; //Override hover border color\n\t\t&:focus-visible {\n\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}\n\t}\n\n\t&--success {\n\t\t.input-field__input {\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\t\t.input-field__helper-text-message__icon {\n\t\t\tcolor: var(--color-border-success, var(--color-success));\n\t\t}\n\t}\n}\n</style>\n"],"names":["_useModel","isValidLabel","ariaDescribedby","_createElementBlock","$slots","_unref","$props","_createElementVNode","_mergeProps","_withDirectives","_renderSlot","_createBlock","_openBlock","_createTextVNode"],"mappings":"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"}

package/dist/chunks/{NcKbd-Bh_Tk6Ar.mjs → NcKbd.mjs}

@@ -1,9 +1,9 @@
-import '../assets/NcKbd-DcC56WbC.css';
+import '../assets/NcKbd.css';
 import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, renderSlot, createTextVNode, toDisplayString } from "vue";
-import { r as register, o as t7, a as t } from "./_l10n-wdIzZwir.mjs";
-import { i as isMac } from "./platform-CC2ecGvV.mjs";
-import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
-register(t7);
+import { r as register, p as t8, a as t } from "./_l10n.mjs";
+import { i as isMac } from "./platform.mjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper.mjs";
+register(t8);
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "NcKbd",
   props: {
@@ -38,9 +38,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const kbd = "_kbd_ixPyw";
+const kbd = "_kbd_BJxuE";
 const style0 = {
-  "material-design-icon": "_material-design-icon_ZhQq1",
+  "material-design-icon": "_material-design-icon_9pyby",
   kbd
 };
 const cssModules = {
@@ -50,4 +50,4 @@ const NcKbd = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModule
 export {
   NcKbd as N
 };
-//# sourceMappingURL=NcKbd-Bh_Tk6Ar.mjs.map
+//# sourceMappingURL=NcKbd.mjs.map

package/dist/chunks/NcKbd.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcKbd.mjs","sources":["../../src/components/NcKbd/NcKbd.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport { computed } from 'vue'\nimport { t } from '../../l10n.ts'\nimport { isMac } from '../../utils/platform.ts'\n\nconst {\n\tsymbol = undefined,\n\tmac = isMac,\n} = defineProps<{\n\t/**\n\t * Key name or symbol to display.\n\t * For common special keys (CTRL, ALT, SHIFT, Arrow keys, etc.) it will display the symbol on macOS and the localized name on Windows/Linux.\n\t */\n\tsymbol?: 'ArrowUp' | 'ArrowDown' | 'ArrowLeft' | 'ArrowRight' | 'Control' | 'Alt' | 'Shift' | 'Enter' | 'Space' | 'Tab' | 'Delete' | 'Escape' | (string & {})\n\t/**\n\t * Explicitly use macOS (true) or Windows/Linux (false) key symbols.\n\t * By default it uses the OS detected from the user agent.\n\t */\n\tmac?: boolean | undefined\n}>()\n\ndefineSlots<{\n\tdefault?: Slot\n}>()\n\n/**\n * Map of special key names to symbols or localized names:\n * - macOS uses symbols instead of names\n * - Windows/Linux uses localized names\n * - In ternary expressions, // TRANSLATORS comments only works for the second operand, but not for `else`\n */\nconst labels = computed(() => ({\n\tArrowUp: '↑',\n\tArrowDown: '↓',\n\tArrowLeft: '←',\n\tArrowRight: '→',\n\tControl: !mac\n\t\t? t('Ctrl') // TRANSLATORS: Ctrl key on keyboard (Windows/Linux)\n\t\t: '⌘',\n\tAlt: !mac\n\t\t? t('Alt') // TRANSLATORS: Alt key on keyboard (Windows/Linux)\n\t\t: '⌥',\n\tShift: !mac\n\t\t? t('Shift') // TRANSLATORS: Shift key on keyboard\n\t\t: '⇧',\n\tEnter: !mac\n\t\t? t('Enter') // TRANSLATORS: Enter key on keyboard\n\t\t: '⏎',\n\tTab: !mac\n\t\t? t('Tab') // TRANSLATORS: Tab key on keyboard\n\t\t: '⇥',\n\tDelete: !mac\n\t\t? t('Delete') // TRANSLATORS: Delete key on keyboard\n\t\t: '⌫',\n\tEscape: !mac\n\t\t? t('Escape') // TRANSLATORS: Escape key on keyboard\n\t\t: '⎋',\n\tSpace: t('Space'), // TRANSLATORS: Space key on keyboard\n} as const))\n\nconst label = computed(() => (symbol && labels.value[symbol]) || symbol)\n</script>\n\n<template>\n\t<kbd :class=\"$style.kbd\">\n\t\t<slot>\n\t\t\t{{ label }}\n\t\t</slot>\n\t</kbd>\n</template>\n\n<style lang=\"scss\" module>\n.kbd {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmin-width: var(--default-clickable-area);\n\theight: var(--default-clickable-area);\n\tpadding-inline: calc(2 * var(--default-grid-baseline)) calc(2 * var(--default-grid-baseline));\n\tborder: 2px solid var(--color-primary-element-light);\n\tborder-block-end-width: 4px;\n\tborder-radius: var(--border-radius-element);\n\tbox-shadow: none; /* Override server <kbd> styles */\n\tfont-family: var(--font-family); /* Design decision: looks better with the default font instead of mono */\n\tline-height: 1;\n\twhite-space: nowrap;\n\n\t& + .kbd {\n\t\tmargin-inline-start: calc(1 * var(--default-grid-baseline));\n\t}\n}\n</style>\n\n<docs>\nNextcloud-styled `<kbd>` element. It can be used with a single key symbol in the content or with the `symbol` prop (preferred).\n\nSubsequent `<NcKbd>` elements will have a small margin between them.\n\n```vue\n<template>\n\t<div>\n\t\t<NcKbd symbol=\"Control\" />\n\t\t<NcKbd symbol=\"F\" />\n\t</div>\n</template>\n```\n\n### Special symbols\n\nIt is recommended to use the `symbol` prop. It displays the appropriate symbol or localized name depending on the OS.\nOS detection is automatic but can be overridden via the `mac` prop.\n\n```vue\n<template>\n\t<table class=\"sample-table\">\n\t\t<tr>\n\t\t\t<th>symbol</th>\n\t\t\t<th>Auto</th>\n\t\t\t<th>macOS</th>\n\t\t\t<th>Windows/Linux</th>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>ArrowUp</th>\n\t\t\t<td><NcKbd symbol=\"ArrowUp\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowUp\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowUp\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>ArrowDown</th>\n\t\t\t<td><NcKbd symbol=\"ArrowDown\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowDown\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowDown\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>ArrowLeft</th>\n\t\t\t<td><NcKbd symbol=\"ArrowLeft\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowLeft\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowLeft\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>ArrowRight</th>\n\t\t\t<td><NcKbd symbol=\"ArrowRight\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowRight\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"ArrowRight\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Control</th>\n\t\t\t<td><NcKbd symbol=\"Control\" /></td>\n\t\t\t<td><NcKbd symbol=\"Control\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Control\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Alt</th>\n\t\t\t<td><NcKbd symbol=\"Alt\" /></td>\n\t\t\t<td><NcKbd symbol=\"Alt\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Alt\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Shift</th>\n\t\t\t<td><NcKbd symbol=\"Shift\" /></td>\n\t\t\t<td><NcKbd symbol=\"Shift\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Shift\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Enter</th>\n\t\t\t<td><NcKbd symbol=\"Enter\" /></td>\n\t\t\t<td><NcKbd symbol=\"Enter\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Enter\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Tab</th>\n\t\t\t<td><NcKbd symbol=\"Tab\" /></td>\n\t\t\t<td><NcKbd symbol=\"Tab\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Tab\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Delete</th>\n\t\t\t<td><NcKbd symbol=\"Delete\" /></td>\n\t\t\t<td><NcKbd symbol=\"Delete\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Delete\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Escape</th>\n\t\t\t<td><NcKbd symbol=\"Escape\" /></td>\n\t\t\t<td><NcKbd symbol=\"Escape\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Escape\" :mac=\"false\" /></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th>Space</th>\n\t\t\t<td><NcKbd symbol=\"Space\" /></td>\n\t\t\t<td><NcKbd symbol=\"Space\" :mac=\"true\" /></td>\n\t\t\t<td><NcKbd symbol=\"Space\" :mac=\"false\" /></td>\n\t\t</tr>\n\t</table>\n</template>\n\n<style scoped>\n.sample-table {\n\tborder-collapse: collapse;\n\n\tth,\n\ttd {\n\t\tpadding-inline: calc(2 * var(--default-grid-baseline));\n\t\tpadding-block: calc(1 * var(--default-grid-baseline));\n\t}\n\n\ttr:first-child {\n\t\tborder-block-end: 2px solid var(--color-border);\n\n\t\tth {\n\t\t\tfont-weight: var(--font-weight-heading, bold);\n\t\t}\n\t}\n}\n</style>\n```\n\n### Custom content\n\nIn a special case you might want to use a custom content.\n\n```vue\n<template>\n\t<NcKbd aria-label=\"Eject\">\n\t\t<IconEject :size=\"15\" />\n\t</NcKbd>\n</template>\n\n<script>\nimport IconEject from 'vue-material-design-icons/Eject.vue'\n\nexport default {\n\tcomponents: { IconEject }\n}\n</script>\n```\n</docs>\n"],"names":["_createElementBlock","_normalizeClass","$style","_renderSlot"],"mappings":";;;;;;;;;;;;AAsCA,UAAM,SAAS,SAAS,OAAO;AAAA,MAC9B,SAAS;AAAA,MACT,WAAW;AAAA,MACX,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,SAAS,CAAC,QAAA,MACP,EAAE,MAAM,IACR;AAAA,MACH,KAAK,CAAC,QAAA,MACH,EAAE,KAAK,IACP;AAAA,MACH,OAAO,CAAC,QAAA,MACL,EAAE,OAAO,IACT;AAAA,MACH,OAAO,CAAC,QAAA,MACL,EAAE,OAAO,IACT;AAAA,MACH,KAAK,CAAC,QAAA,MACH,EAAE,KAAK,IACP;AAAA,MACH,QAAQ,CAAC,QAAA,MACN,EAAE,QAAQ,IACV;AAAA,MACH,QAAQ,CAAC,QAAA,MACN,EAAE,QAAQ,IACV;AAAA,MACH,OAAO,EAAE,OAAO;AAAA;AAAA,IAAA,EACN;AAEX,UAAM,QAAQ,SAAS,MAAO,QAAA,UAAU,OAAO,MAAM,QAAA,MAAM,KAAM,QAAA,MAAM;;0BAItEA,mBAIM,OAAA;AAAA,QAJA,OAAKC,eAAEC,KAAAA,OAAO,GAAG;AAAA,MAAA;QACtBC,WAEO,4BAFP,MAEO;AAAA,0CADH,MAAA,KAAK,GAAA,CAAA;AAAA,QAAA;;;;;;;;;;;;;;"}

package/dist/chunks/{NcListItem-BliLJpvU.mjs → NcListItem.mjs}

@@ -1,10 +1,10 @@
-import '../assets/NcListItem-BjeejGlB.css';
-import { i as isLegacy34 } from "./legacy-BoqDmOCa.mjs";
-import { N as NcActions } from "./NcActions-C-wDqSrv.mjs";
-import { N as NcCounterBubble } from "./NcCounterBubble-CV0YMrXW.mjs";
-import { _ as _sfc_main$1 } from "./NcVNodes.vue_vue_type_script_lang-BqUHinRZ.mjs";
+import '../assets/NcListItem.css';
+import { i as isLegacy34 } from "./legacy.mjs";
+import { N as NcActions } from "./NcActions.mjs";
+import { N as NcCounterBubble } from "./NcCounterBubble.mjs";
+import { _ as _sfc_main$1 } from "./NcVNodes.vue_vue_type_script_lang.mjs";
 import { resolveComponent, openBlock, createBlock, resolveDynamicComponent, normalizeProps, guardReactiveProps, withCtx, createElementVNode, mergeProps, normalizeClass, withKeys, renderSlot, createTextVNode, toDisplayString, createElementBlock, createCommentVNode, withDirectives, vShow, createVNode, createSlots } from "vue";
-import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper.mjs";
 const _sfc_main = {
   name: "NcListItem",
   components: {
@@ -382,4 +382,4 @@ const NcListItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_rende
 export {
   NcListItem as N
 };
-//# sourceMappingURL=NcListItem-BliLJpvU.mjs.map
+//# sourceMappingURL=NcListItem.mjs.map

package/dist/chunks/NcListItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcListItem.mjs","sources":["../../src/components/NcListItem/NcListItem.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### Default Usage\n\n```vue\n<template>\n\t<ul>\n\t\t<NcListItem active\n\t\t\tbold\n\t\t\t:counter-number=\"123\"\n\t\t\tcounterType=\"highlighted\"\n\t\t\tdetails=\"1h\"\n\t\t\tname=\"This is an active element with highlighted counter\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircleOutline :size=\"16\" fill-color=\"#fff\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"This is an active element with outlined counter\"\n\t\t\t:bold=\"false\"\n\t\t\t:active=\"true\"\n\t\t\t:counter-number=\"123\"\n\t\t\tcounterType=\"outlined\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#fff\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"This is an active element with normal counter\"\n\t\t\t:bold=\"false\"\n\t\t\t:active=\"true\"\n\t\t\t:counter-number=\"123\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #details>\n\t\t\t\t<LinkIcon :size=\"16\"/>\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#fff\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Name of the element with highlighted counter\"\n\t\t\tbold\n\t\t\t:force-display-actions=\"true\"\n\t\t\tdetails=\"1h\"\n\t\t\t:counter-number=\"123\"\n\t\t\tcounterType=\"highlighted\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Name of the element with outlined counter\"\n\t\t\t:bold=\"false\"\n\t\t\t:force-display-actions=\"true\"\n\t\t\t:counter-number=\"123\"\n\t\t\tcounterType=\"outlined\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Name of the element with normal counter\"\n\t\t\t:bold=\"false\"\n\t\t\t:force-display-actions=\"true\"\n\t\t\tdetails=\"1h\"\n\t\t\t:counter-number=\"123\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Name of the element\"\n\t\t\t:bold=\"false\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #name>\n\t\t\t\t<span style=\"display: flex; gap: 0.5rem; color: var(--color-favorite);\">\n\t\t\t\t\tFlexible styling within the first line of the component\n\t\t\t\t\t<div style=\"color: var(--color-text-error, var(--color-error));\">\n\t\t\t\t\t\tlike this.\n\t\t\t\t\t</div>\n\t\t\t\t</span>\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #details>\n\t\t\t\t<LinkIcon :size=\"16\"/>\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#0082c9\"/>\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Without subname, Name of the element\"\n\t\t\t:bold=\"false\"\n\t\t\tdetails=\"1h\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#0082c9\"/>\n\t\t\t</template>\n\t\t</NcListItem>\n\t</ul>\n</template>\n\n<script>\n\timport CheckboxBlankCircle from 'vue-material-design-icons/CheckboxBlankCircle'\n\timport LinkIcon from 'vue-material-design-icons/Link'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tCheckboxBlankCircle,\n\t\t\tLinkIcon,\n\t\t}\n\t}\n</script>\n\n```\n\n### NcListItem one line mode\n```vue\n<NcListItem active\n\t:bold=\"false\"\n\t:counter-number=\"123\"\n\tcounterType=\"highlighted\"\n\tdetails=\"1h\"\n\tname=\"This is an active element with highlighted counter\"\n\tone-line>\n\t<template #icon>\n\t\t<NcAvatar disable-menu :size=\"34\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t</template>\n\t<template #subname>\n\t\tIn this slot you can put both text and other components such as icons\n\t</template>\n\t<template #indicator>\n\t\t<!-- Color dot -->\n\t\t<CheckboxBlankCircle :size=\"20\" fill-color=\"#fff\" />\n\t</template>\n\t<template #actions>\n\t\t<NcActionButton>\n\t\t\tButton one\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\tButton two\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\tButton three\n\t\t</NcActionButton>\n\t</template>\n</NcListItem>\n```\n### NcListItem with extra actions slot and customized icon\n\nThe `extra-actions` slot can be used to add other interactive components.\n\nThe `actions-icon` slot can be used to pass icon to the inner NcActions component.\n\n```vue\n<template>\n\t<div>\n\t\t<NcListItem\n\t\t\tname=\"This is an active element with extra actions slot\"\n\t\t\tbold\n\t\t\t:active=\"true\"\n\t\t\t:force-display-actions=\"true\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #extra-actions>\n\t\t\t\t<NcButton variant=\"primary\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconCog :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t</template>\n\t\t\t<template #actions-icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"This is an element with extra actions slot\"\n\t\t\tbold>\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #extra-actions>\n\t\t\t\t<NcButton variant=\"tertiary\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconPencilOutline :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t\t<NcButton variant=\"tertiary\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconCogOutline :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t</template>\n\t\t\t<template #actions-icon>\n\t\t\t\t<IconNoteTextOutline :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t</div>\n</template>\n<script>\n\timport IconCog from 'vue-material-design-icons/Cog.vue'\n\timport IconCogOutline from 'vue-material-design-icons/CogOutline.vue'\n\timport IconNoteText from 'vue-material-design-icons/NoteText.vue'\n\timport IconNoteTextOutline from 'vue-material-design-icons/NoteTextOutline.vue'\n\timport IconPencil from 'vue-material-design-icons/Pencil.vue'\n\timport IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconCog,\n\t\t\tIconCogOutline,\n\t\t\tIconNoteText,\n\t\t\tIconNoteTextOutline,\n\t\t\tIconPencil,\n\t\t\tIconPencilOutline,\n\t\t},\n\t}\n</script>\n```\n### NcListItem compact mode\n```vue\n<template>\n\t<ul style=\"width: 350px;\">\n\t\t<NcListItem active\n\t\t\tcompact\n\t\t\tname=\"Active item\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem compact\n\t\t\tname=\"Name of the element\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteTextOutline :size=\"20\" />\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem compact\n\t\t\tname=\"Name of the element\"\n\t\t\t:counter-number=\"1\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteTextOutline :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tThis one is with subname\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem compact\n\t\t\tname=\"Name of the element\"\n\t\t\t:counter-number=\"3\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteTextOutline :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tThis one is with subname\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem compact\n\t\t\tname=\"Name of the element\"\n\t\t\t:counter-number=\"4\"\n\t\t\thref=\"https://nextcloud.com\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteTextOutline :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tThis one is with an external link\n\t\t\t</template>\n\t\t</NcListItem>\n\t</ul>\n</template>\n<script>\n\timport IconNoteText from 'vue-material-design-icons/NoteText.vue'\n\timport IconNoteTextOutline from 'vue-material-design-icons/NoteTextOutline.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconNoteText,\n\t\t\tIconNoteTextOutline,\n\t\t},\n\t}\n</script>\n```\n</docs>\n\n<template>\n\t<!-- This wrapper can be either a router link or a `<li>` -->\n\t<component\n\t\t:is=\"to ? 'router-link' : 'NcVNodes'\"\n\t\tv-slot=\"{ href: routerLinkHref, navigate, isActive }\"\n\t\tv-bind=\"{ ...to && { custom: true, to } }\">\n\t\t<li\n\t\t\tclass=\"list-item__wrapper\"\n\t\t\t:class=\"{\n\t\t\t\t'list-item__wrapper--active': active ?? isActive,\n\t\t\t\t'list-item__wrapper--legacy': isLegacy34,\n\t\t\t}\"\n\t\t\tv-bind=\"$attrs\">\n\t\t\t<div\n\t\t\t\tref=\"list-item\"\n\t\t\t\tclass=\"list-item\"\n\t\t\t\t:class=\"{\n\t\t\t\t\t'list-item--compact': compact,\n\t\t\t\t\t'list-item--one-line': oneLine,\n\t\t\t\t}\"\n\t\t\t\t@mouseover=\"handleMouseover\"\n\t\t\t\t@mouseleave=\"handleMouseleave\">\n\t\t\t\t<a\n\t\t\t\t\t:id=\"anchorId || undefined\"\n\t\t\t\t\t:aria-label=\"linkAriaLabel\"\n\t\t\t\t\tclass=\"list-item__anchor\"\n\t\t\t\t\t:href=\"routerLinkHref || href\"\n\t\t\t\t\t:target=\"target || (href === '#' ? undefined : '_blank')\"\n\t\t\t\t\t:rel=\"href === '#' ? undefined : 'noopener noreferrer'\"\n\t\t\t\t\t@focus=\"showActions\"\n\t\t\t\t\t@focusout=\"handleBlur\"\n\t\t\t\t\t@click=\"onClick($event, navigate, routerLinkHref)\"\n\t\t\t\t\t@dragstart=\"$emit('dragstart', $event)\"\n\t\t\t\t\t@keydown.esc=\"hideActions\">\n\t\t\t\t\t<!-- @slot This slot is used for the NcAvatar or icon, the content of this slot must not be interactive -->\n\t\t\t\t\t<slot name=\"icon\" />\n\n\t\t\t\t\t<!-- Main content -->\n\t\t\t\t\t<div class=\"list-item-content\">\n\t\t\t\t\t\t<div class=\"list-item-content__main\">\n\t\t\t\t\t\t\t<div class=\"list-item-content__name\">\n\t\t\t\t\t\t\t\t<!-- @slot Slot for the first line of the component. prop 'name' is used as a fallback is no slots are provided -->\n\t\t\t\t\t\t\t\t<slot name=\"name\">{{ name }}</slot>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tv-if=\"hasSubname\"\n\t\t\t\t\t\t\t\tclass=\"list-item-content__subname\"\n\t\t\t\t\t\t\t\t:class=\"{ 'list-item-content__subname--bold': bold }\">\n\t\t\t\t\t\t\t\t<!-- @slot Slot for the second line of the component -->\n\t\t\t\t\t\t\t\t<slot name=\"subname\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"list-item-content__details\">\n\t\t\t\t\t\t\t<div v-if=\"showDetails\" class=\"list-item-details__details\">\n\t\t\t\t\t\t\t\t<!-- @slot This slot is used for some details in form of icon (prop `details` as a fallback) -->\n\t\t\t\t\t\t\t\t<slot name=\"details\">{{ details }}</slot>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<!-- Counter and indicator -->\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tv-if=\"counterNumber !== 0 || hasIndicator\"\n\t\t\t\t\t\t\t\tv-show=\"showAdditionalElements\"\n\t\t\t\t\t\t\t\tclass=\"list-item-details__extra\">\n\t\t\t\t\t\t\t\t<NcCounterBubble\n\t\t\t\t\t\t\t\t\tv-if=\"counterNumber !== 0\"\n\t\t\t\t\t\t\t\t\t:count=\"counterNumber\"\n\t\t\t\t\t\t\t\t\t:active=\"isLegacy34 ? (active ?? isActive) : false\"\n\t\t\t\t\t\t\t\t\tclass=\"list-item-details__counter\"\n\t\t\t\t\t\t\t\t\t:type=\"counterType\" />\n\n\t\t\t\t\t\t\t\t<span v-if=\"hasIndicator\" class=\"list-item-details__indicator\">\n\t\t\t\t\t\t\t\t\t<!-- @slot This slot is used for some indicator in form of icon -->\n\t\t\t\t\t\t\t\t\t<slot name=\"indicator\" />\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</a>\n\n\t\t\t\t<div v-if=\"$slots['extra-actions']\" class=\"list-item-content__extra-actions\">\n\t\t\t\t\t<!-- @slot Extra elements next to the right side quick menu -->\n\t\t\t\t\t<slot name=\"extra-actions\" />\n\t\t\t\t</div>\n\n\t\t\t\t<!-- Actions -->\n\t\t\t\t<div\n\t\t\t\t\tv-if=\"forceDisplayActions || displayActionsOnHoverFocus\"\n\t\t\t\t\tclass=\"list-item-content__actions\"\n\t\t\t\t\t@focusout=\"handleBlur\">\n\t\t\t\t\t<NcActions\n\t\t\t\t\t\tref=\"actions\"\n\t\t\t\t\t\t:primary=\"isLegacy34 ? (active ?? isActive) : false\"\n\t\t\t\t\t\t:forceMenu=\"forceMenu\"\n\t\t\t\t\t\t:aria-label=\"actionsAriaLabel\"\n\t\t\t\t\t\t@update:open=\"handleActionsUpdateOpen\">\n\t\t\t\t\t\t<template v-if=\"$slots['actions-icon']\" #icon>\n\t\t\t\t\t\t\t<!-- @slot Provide the custom icon for the right side quick menu -->\n\t\t\t\t\t\t\t<slot name=\"actions-icon\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<!-- @slot Provide the actions for the right side quick menu -->\n\t\t\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t\t</NcActions>\n\t\t\t\t</div>\n\n\t\t\t\t<div v-if=\"$slots.extra\" class=\"list-item__extra\">\n\t\t\t\t\t<!-- @slot Extra elements below the item -->\n\t\t\t\t\t<slot name=\"extra\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</li>\n\t</component>\n</template>\n\n<script>\nimport { isLegacy34 } from '../../utils/legacy.ts'\nimport NcActions from '../NcActions/index.js'\nimport NcCounterBubble from '../NcCounterBubble/index.ts'\nimport NcVNodes from '../NcVNodes/index.ts'\n\nexport default {\n\tname: 'NcListItem',\n\n\tcomponents: {\n\t\tNcActions,\n\t\tNcCounterBubble,\n\t\tNcVNodes,\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * The details text displayed in the upper right part of the component\n\t\t */\n\t\tdetails: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Name (first line of text)\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * The route for the router link.\n\t\t */\n\t\tto: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * The value for the external link\n\t\t */\n\t\thref: {\n\t\t\ttype: String,\n\t\t\tdefault: '#',\n\t\t},\n\n\t\t/**\n\t\t * The HTML target attribute used for the link\n\t\t */\n\t\ttarget: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Id for the `<a>` element\n\t\t */\n\t\tanchorId: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Make subname bold\n\t\t */\n\t\tbold: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Show the NcListItem in compact design\n\t\t */\n\t\tcompact: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Toggle the active state of the component\n\t\t */\n\t\tactive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Aria label for the wrapper element\n\t\t */\n\t\tlinkAriaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Aria label for the actions toggle\n\t\t */\n\t\tactionsAriaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * If different from 0 this component will display the\n\t\t * NcCounterBubble component\n\t\t */\n\t\tcounterNumber: {\n\t\t\ttype: [Number, String],\n\t\t\tdefault: 0,\n\t\t},\n\n\t\t/**\n\t\t * Outlined or highlighted state of the counter\n\t\t */\n\t\tcounterType: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['highlighted', 'outlined', ''].indexOf(value) !== -1\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * To be used only when the elements in the actions menu are very important\n\t\t */\n\t\tforceDisplayActions: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Force the actions to display in a three dot menu\n\t\t */\n\t\tforceMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Show the list component layout\n\t\t */\n\t\toneLine: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t'click',\n\t\t'dragstart',\n\t\t'update:menuOpen',\n\t],\n\n\tsetup() {\n\t\treturn { isLegacy34 }\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\thovered: false,\n\t\t\thasActions: false,\n\t\t\thasSubname: false,\n\t\t\tdisplayActionsOnHoverFocus: false,\n\t\t\tmenuOpen: false,\n\t\t\thasIndicator: false,\n\t\t\thasDetails: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tshowAdditionalElements() {\n\t\t\treturn !this.displayActionsOnHoverFocus || this.forceDisplayActions\n\t\t},\n\n\t\tshowDetails() {\n\t\t\treturn (this.details !== '' || this.hasDetails)\n\t\t\t\t&& (!this.displayActionsOnHoverFocus || this.forceDisplayActions)\n\t\t},\n\t},\n\n\twatch: {\n\n\t\tmenuOpen(newValue) {\n\t\t\t// A click outside both the menu and the root element hides the actions again\n\t\t\tif (!newValue && !this.hovered) {\n\t\t\t\tthis.displayActionsOnHoverFocus = false\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.checkSlots()\n\t},\n\n\tupdated() {\n\t\tthis.checkSlots()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Handle link click\n\t\t *\n\t\t * @param {MouseEvent|KeyboardEvent} event - Native click or keydown event\n\t\t * @param {(event: Event) => void} [navigate] - VueRouter link's navigate if any\n\t\t * @param {string} [routerLinkHref] - VueRouter link's href\n\t\t */\n\t\tonClick(event, navigate, routerLinkHref) {\n\t\t\t// Always forward native event\n\t\t\tthis.$emit('click', event)\n\t\t\t// Do not navigate with control keys - it is opening in a new tab\n\t\t\tif (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Prevent default link behaviour if it's a router-link and navigate manually\n\t\t\tif (routerLinkHref) {\n\t\t\t\tnavigate?.(event)\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\n\t\tshowActions() {\n\t\t\tif (this.hasActions) {\n\t\t\t\tthis.displayActionsOnHoverFocus = true\n\t\t\t}\n\t\t\tthis.hovered = false\n\t\t},\n\n\t\thideActions() {\n\t\t\tthis.displayActionsOnHoverFocus = false\n\t\t},\n\n\t\t/**\n\t\t * @param {FocusEvent} event UI event\n\t\t */\n\t\thandleBlur(event) {\n\t\t\t// do not hide if open\n\t\t\tif (this.menuOpen) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// do not hide if focus is kept within\n\t\t\t// On component unmounting Vue 3 resets the template ref to null,\n\t\t\t// so we can ignore this check\n\t\t\tif (this.$refs['list-item']?.contains(event.relatedTarget)) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.hideActions()\n\t\t},\n\n\t\t/**\n\t\t * Hide the actions on mouseleave unless the menu is open\n\t\t */\n\t\thandleMouseleave() {\n\t\t\tif (!this.menuOpen) {\n\t\t\t\tthis.displayActionsOnHoverFocus = false\n\t\t\t}\n\t\t\tthis.hovered = false\n\t\t},\n\n\t\thandleMouseover() {\n\t\t\tthis.showActions()\n\t\t\tthis.hovered = true\n\t\t},\n\n\t\thandleActionsUpdateOpen(e) {\n\t\t\tthis.menuOpen = e\n\t\t\tthis.$emit('update:menuOpen', e)\n\t\t},\n\n\t\t// Check if subname and actions slots are populated\n\t\tcheckSlots() {\n\t\t\tif (this.hasActions !== !!this.$slots.actions) {\n\t\t\t\tthis.hasActions = !!this.$slots.actions\n\t\t\t}\n\t\t\tif (this.hasSubname !== !!this.$slots.subname) {\n\t\t\t\tthis.hasSubname = !!this.$slots.subname\n\t\t\t}\n\t\t\tif (this.hasIndicator !== !!this.$slots.indicator) {\n\t\t\t\tthis.hasIndicator = !!this.$slots.indicator\n\t\t\t}\n\t\t\tif (this.hasDetails !== !!this.$slots.details) {\n\t\t\t\tthis.hasDetails = !!this.$slots.details\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.list-item__wrapper {\n\tdisplay: flex;\n\tposition: relative;\n\twidth: 100%;\n\t// padding for the focus-visible styles. Width is reduced to compensate it\n\tpadding: 2px 4px;\n\t// The first and lastelement needs also padding for the box shadow of the focus-visible effect\n\t&:first-of-type {\n\t\tpadding-block-start: 4px;\n\t}\n\t&:last-of-type {\n\t\tpadding-block-end: 4px\n\t}\n\n\t&:not(&--legacy):not(&--active):not(.active) {\n\t\t.list-item:hover,\n\t\t.list-item:focus-within,\n\t\t.list-item:has(:active),\n\t\t.list-item:has(:focus-visible) {\n\t\t\tbackground-color: color-mix(in srgb, var(--color-primary-element) 8%, transparent);\n\t\t}\n\t}\n\n\t&--active:not(&--legacy),\n\t&.active:not(&--legacy) {\n\t\t.list-item {\n\t\t\tbackground-color: var(--color-primary-element-light);\n\t\t\tcolor: var(--color-main-text) !important;\n\n\t\t\t&:hover,\n\t\t\t&:focus-within,\n\t\t\t&:has(:focus-visible),\n\t\t\t&:has(:active) {\n\t\t\t\tbackground-color: var(--color-primary-element-light-hover);\n\t\t\t}\n\n\t\t\t&::before {\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\tinset-block: calc(var(--default-grid-baseline, 4px) * 2);\n\t\t\t\tinset-inline-start: 0;\n\t\t\t\twidth: 3px;\n\t\t\t\tbackground-color: var(--color-primary-element);\n\t\t\t\tborder-radius: 999px;\n\t\t\t\tanimation: nc-nav-stripe-in var(--animation-quick, 200ms) ease-out;\n\t\t\t}\n\t\t}\n\n\t\t.list-item-content__name,\n\t\t.list-item-content__subname,\n\t\t.list-item-content__details,\n\t\t.list-item-details__details {\n\t\t\tcolor: var(--color-main-text) !important;\n\t\t}\n\t}\n\n\t// Legacy design (NC < 34): solid primary fill.\n\t&--active.list-item__wrapper--legacy,\n\t&.active.list-item__wrapper--legacy {\n\t\t.list-item {\n\t\t\tbackground-color: var(--color-primary-element);\n\t\t\tcolor: var(--color-primary-element-text) !important;\n\n\t\t\t&:hover,\n\t\t\t&:focus-within,\n\t\t\t&:has(:focus-visible),\n\t\t\t&:has(:active) {\n\t\t\t\tbackground-color: var(--color-primary-element-hover);\n\t\t\t}\n\t\t}\n\n\t\t.list-item-content__name,\n\t\t.list-item-content__subname,\n\t\t.list-item-content__details,\n\t\t.list-item-details__details {\n\t\t\tcolor: var(--color-primary-element-text) !important;\n\t\t}\n\t}\n\n\t@keyframes nc-nav-stripe-in {\n\t\tfrom {\n\t\t\ttransform: scaleY(0);\n\t\t\topacity: 0;\n\t\t}\n\t\tto {\n\t\t\ttransform: scaleY(1);\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t.list-item-content__name,\n\t.list-item-content__subname,\n\t.list-item-content__details,\n\t.list-item-details__details {\n\t\twhite-space: nowrap;\n\t\tmargin-block: 0;\n\t\tmargin-inline: 0 auto;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n}\n\n.list-item-content__name {\n\tmin-width: 100px;\n\tflex: 1 1 10%;\n\tfont-weight: var(--font-weight-element, 500);\n}\n\n.list-item-content__subname {\n\tflex: 1 0;\n\tmin-width: 0;\n\tcolor: var(--color-text-maxcontrast);\n\t&--bold {\n\t\tfont-weight: var(--font-weight-element, 500);\n\t}\n}\n\n// NcListItem\n.list-item {\n\t--list-item-padding: var(--default-grid-baseline);\n\t// The content are two lines of text and respect the 1.5 line height\n\t--list-item-height: 2lh;\n\t--list-item-border-radius: var(--border-radius-element, 32px);\n\t// General styles\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\tposition: relative;\n\tflex: 0 0 auto;\n\tjustify-content: flex-start;\n\tpadding: var(--list-item-padding);\n\twidth: 100%;\n\tborder-radius: var(--border-radius-element, 32px);\n\tcursor: pointer;\n\ttransition: background-color var(--animation-quick) ease-in-out;\n\tlist-style: none;\n\n\t&:hover,\n\t&:focus-within,\n\t&:has(:active),\n\t&:has(:focus-visible) {\n\t\tbackground-color: var(--color-background-hover);\n\t}\n\n\t&:has(&__anchor:focus-visible) {\n\t\toutline: 2px solid var(--color-main-text);\n\t\tbox-shadow: 0 0 0 4px var(--color-main-background);\n\t}\n\n\t&--compact {\n\t\t--list-item-padding: calc(0.5 * var(--default-grid-baseline)) var(--default-grid-baseline);\n\n\t\t&:not(:has(.list-item-content__subname)) {\n\t\t\t--list-item-height: var(--default-clickable-area);\n\t\t}\n\t}\n\n\t&--one-line {\n\t\t--list-item-height: var(--default-clickable-area);\n\t\t--list-item-border-radius: var(--border-radius-element, calc(var(--default-clickable-area) / 2));\n\t\t--list-item-padding: var(--default-grid-baseline);\n\n\t\t.list-item-content__main {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: start;\n\t\t\tgap: 12px;\n\t\t\tmin-width: 0;\n\t\t}\n\t\t.list-item-content__details {\n\t\t\tflex-direction: row;\n\t\t\talign-items: center;\n\t\t\tjustify-content: end;\n\t\t}\n\t\t.list-item-content__name {\n\t\t\talign-self: center;\n\t\t\tmax-width: 300px;\n\t\t}\n\t}\n\n\t&__anchor {\n\t\tcolor: inherit;\n\t\tdisplay: flex;\n\t\tflex: 1 0 auto;\n\t\talign-items: center;\n\t\theight: var(--list-item-height);\n\t\tmin-width: 0;\n\n\t\t// This is handled by the parent container\n\t\t&:focus-visible {\n\t\t\toutline: none;\n\t\t}\n\t}\n\n\t&-content {\n\t\tdisplay: flex;\n\t\tflex: 1 0;\n\t\tjustify-content: space-between;\n\t\tpadding-inline-start: calc(2 * var(--default-grid-baseline));\n\t\tmin-width: 0;\n\n\t\t&__main {\n\t\t\tflex: 1 0;\n\t\t\twidth: 0;\n\t\t\tmargin: auto 0;\n\n\t\t\t&--oneline {\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\t&__details {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tjustify-content: end;\n\t\t\talign-items: end;\n\t\t}\n\n\t\t&__actions,\n\t\t&__extra-actions {\n\t\t\tflex: 0 0 auto;\n\t\t\talign-self: center;\n\t\t\tjustify-content: center;\n\t\t\tmargin-inline-start: var(--default-grid-baseline);\n\t\t}\n\n\t\t&__extra-actions {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: var(--default-grid-baseline);\n\t\t}\n\t}\n\n\t&-details {\n\t\t&__details {\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\tmargin: 0 9px !important;\n\t\t\tfont-weight: var(--font-weight-default, normal);\n\t\t}\n\t\t&__extra {\n\t\t\tmargin: 2px 4px 0 4px;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t}\n\t\t&__indicator {\n\t\t\tmargin: 0 5px;\n\t\t}\n\t}\n\n\t&__extra {\n\t\tmargin-top: var(--default-grid-baseline);\n\t}\n}\n\n</style>\n"],"names":["NcVNodes","_openBlock","_createBlock","_resolveDynamicComponent","_normalizeProps","_guardReactiveProps","_withCtx","_createElementVNode","_mergeProps","_renderSlot","_createElementBlock","_normalizeClass","_withDirectives","_createVNode"],"mappings":"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"}

package/dist/chunks/{NcListItemIcon-Dl_tfkk9.mjs → NcListItemIcon.mjs}

@@ -1,15 +1,15 @@
-import '../assets/NcListItemIcon-DJRcmlo1.css';
+import '../assets/NcListItemIcon.css';
 import "escape-html";
 import "striptags";
 import { resolveComponent, openBlock, createElementBlock, normalizeStyle, normalizeClass, createVNode, mergeProps, createElementVNode, createBlock, toDisplayString, createCommentVNode, renderSlot } from "vue";
 import "../composables/useIsDarkTheme/index.mjs";
 import "@nextcloud/router";
 import "../functions/isDarkTheme/index.mjs";
-import "./NcMentionBubble.vue_vue_type_style_index_0_scoped_3c4a673d_lang-DyqakLm5.mjs";
-import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
-import { u as userStatus, N as NcAvatar } from "./NcAvatar-1KxMUN7V.mjs";
-import { _ as _sfc_main$1 } from "./NcHighlight.vue_vue_type_script_lang-DnWQDM_2.mjs";
-import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-g8ubWhoz.mjs";
+import "./NcMentionBubble.vue_vue_type_style_index_0_scoped_3c4a673d_lang.mjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper.mjs";
+import { u as userStatus, N as NcAvatar } from "./NcAvatar.mjs";
+import { _ as _sfc_main$1 } from "./NcHighlight.vue_vue_type_script_lang.mjs";
+import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper.mjs";
 const margin = 8;
 const defaultSize = 32;
 const _sfc_main = {
@@ -207,4 +207,4 @@ const NcListItemIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_r
 export {
   NcListItemIcon as N
 };
-//# sourceMappingURL=NcListItemIcon-Dl_tfkk9.mjs.map
+//# sourceMappingURL=NcListItemIcon.mjs.map

package/dist/chunks/NcListItemIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcListItemIcon.mjs","sources":["../../src/components/NcListItemIcon/NcListItemIcon.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n## This is used to display a avatar-name/subname + icon layout\nIt might be used for list rendering or within the multiselect for example\n\n> **Note:** Any binding will be forwarded on the Avatar component root\n\n```vue\n<NcListItemIcon name=\"User 1\" />\n<NcListItemIcon name=\"User 1\" subname=\"Hidden subname because size is too small\" :avatar-size=\"24\" />\n```\n```vue\n\t<template>\n\t\t<NcListItemIcon name=\"User 1\" :avatar-size=\"44\">\n\t\t\t<IconAccountOutline :size=\"20\" />\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport IconAccountOutline from 'vue-material-design-icons/AccountOutline.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconAccountOutline,\n\t\t},\n\t}\n\t</script>\n```\n\n### With icon\n```vue\n\t<template>\n\t\t<NcListItemIcon name=\"Group 1\" subname=\"13 members\" :is-no-user=\"true\">\n\t\t\t<IconAccountMultipleOutline :size=\"20\" />\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport IconAccountMultipleOutline from 'vue-material-design-icons/AccountMultipleOutline.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconAccountMultipleOutline,\n\t\t},\n\t}\n\t</script>\n```\n\n### Searching\n```vue\n\t<template>\n\t\t<NcListItemIcon name=\"Test user 1\" subname=\"callmetest@domain.com\" search=\"test\" />\n\t\t<NcListItemIcon name=\"Testing admin\" subname=\"testme@example.com\" search=\"test\" />\n\t\t<NcListItemIcon name=\"Test group 2\" subname=\"loremipsum@domain.com\" :is-no-user=\"true\" search=\"test\">\n\t\t\t<IconAccountMultipleOutline :size=\"20\" />\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport IconAccountMultipleOutline from 'vue-material-design-icons/AccountMultipleOutline.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconAccountMultipleOutline,\n\t\t},\n\t}\n\t</script>\n```\n\n### With actions\n```vue\n\t<template>\n\t\t<NcListItemIcon name=\"Test user 1\" subname=\"callmetest@domain.com\">\n\t\t\t<NcActions>\n\t\t\t\t<NcActionButton @click=\"alert('Edit')\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconPencilOutline :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tEdit\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton @click=\"alert('Delete')\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconDeleteOutline :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tDelete\n\t\t\t\t</NcActionButton>\n\t\t\t</NcActions>\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport IconDeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'\n\timport IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconDeleteOutline,\n\t\t\tIconPencilOutline,\n\t\t},\n\t}\n\t</script>\n```\n</docs>\n\n<template>\n\t<span\n\t\t:id=\"id\"\n\t\tclass=\"option\"\n\t\t:class=\"{ 'option--compact': avatarSize < defaultSize }\"\n\t\t:style=\"cssVars\">\n\t\t<NcAvatar\n\t\t\tv-bind=\"$attrs\"\n\t\t\tdisableMenu\n\t\t\tdisableTooltip\n\t\t\t:displayName=\"displayName || name\"\n\t\t\t:isNoUser=\"isNoUser\"\n\t\t\t:size=\"avatarSize\"\n\t\t\tclass=\"option__avatar\" />\n\t\t<div class=\"option__details\">\n\t\t\t<NcHighlight\n\t\t\t\tclass=\"option__lineone\"\n\t\t\t\t:text=\"name\"\n\t\t\t\t:search=\"searchParts[0]\" />\n\t\t\t<NcHighlight\n\t\t\t\tv-if=\"isValidSubname && isSizeBigEnough\"\n\t\t\t\tclass=\"option__linetwo\"\n\t\t\t\t:text=\"subname\"\n\t\t\t\t:search=\"searchParts[1]\" />\n\t\t\t<span v-else-if=\"hasStatus\">\n\t\t\t\t<span>{{ userStatus.icon }}</span>\n\t\t\t\t<span>{{ userStatus.message }}</span>\n\t\t\t</span>\n\t\t</div>\n\n\t\t<!-- @slot use this slot to add a custom icon or actions -->\n\t\t<slot>\n\t\t\t<NcIconSvgWrapper\n\t\t\t\tv-if=\"hasIconSvg\"\n\t\t\t\tclass=\"option__icon\"\n\t\t\t\t:svg=\"iconSvg\"\n\t\t\t\t:name=\"iconName\" />\n\t\t\t<span\n\t\t\t\tv-else-if=\"hasIcon\"\n\t\t\t\tclass=\"icon option__icon\"\n\t\t\t\t:class=\"icon\"\n\t\t\t\t:aria-label=\"iconName\" />\n\t\t</slot>\n\t</span>\n</template>\n\n<script>\nimport { userStatus } from '../../mixins/index.js'\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcHighlight from '../NcHighlight/index.ts'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.ts'\n\n// global margin, ^2 ratio\nconst margin = 8\nconst defaultSize = 32\n\nexport default {\n\tname: 'NcListItemIcon',\n\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcHighlight,\n\t\tNcIconSvgWrapper,\n\t},\n\n\tmixins: [\n\t\tuserStatus,\n\t],\n\n\tprops: {\n\t\t/**\n\t\t * Default first line text\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Secondary optional line\n\t\t * Only visible on size of 32 and above\n\t\t */\n\t\tsubname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Icon class to be displayed at the end of the component\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * SVG icon to be displayed at the end of the component\n\t\t */\n\t\ticonSvg: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Descriptive name for the icon\n\t\t */\n\t\ticonName: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Search within the highlight of name/subname\n\t\t */\n\t\tsearch: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Set a size in px that will define the avatar height/width\n\t\t * and therefore, the height of the component\n\t\t */\n\t\tavatarSize: {\n\t\t\ttype: Number,\n\t\t\tdefault: defaultSize,\n\t\t},\n\n\t\t/**\n\t\t * Disable the margins of this component.\n\t\t * Useful for integration in `NcSelect` for example\n\t\t */\n\t\tnoMargin: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * See the [Avatar](#Avatar) displayName prop\n\t\t * Fallback to name\n\t\t */\n\t\tdisplayName: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * See the [Avatar](#Avatar) isNoUser prop\n\t\t * Enable/disable the UserStatus fetching\n\t\t */\n\t\tisNoUser: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Unique list item ID\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\tsetup() {\n\t\treturn {\n\t\t\tmargin,\n\t\t\tdefaultSize,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\thasIcon() {\n\t\t\treturn this.icon !== ''\n\t\t},\n\n\t\thasIconSvg() {\n\t\t\treturn this.iconSvg !== ''\n\t\t},\n\n\t\tisValidSubname() {\n\t\t\treturn this.subname?.trim?.() !== ''\n\t\t},\n\n\t\tisSizeBigEnough() {\n\t\t\treturn this.avatarSize >= 26 // the font sizes\n\t\t},\n\n\t\tcssVars() {\n\t\t\t// Don't use margin to calculate the height if noMargin\n\t\t\tconst margin = this.noMargin ? 0 : this.margin\n\n\t\t\treturn {\n\t\t\t\t'--height': this.avatarSize + 2 * margin + 'px',\n\t\t\t\t'--margin': this.margin + 'px',\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Separates the search property into two parts, the first one is the search part on the name, the second on the subname.\n\t\t *\n\t\t * @return {[string, string]}\n\t\t */\n\t\tsearchParts() {\n\t\t\t// Match the email notation like \"Jane <j.doe@example.com>\" with the email address as matching group\n\t\t\tconst EMAIL_NOTATION = /^([^<]*)<([^>]+)>?$/\n\n\t\t\tconst match = this.search.match(EMAIL_NOTATION)\n\t\t\tif (this.isNoUser || !match) {\n\t\t\t\treturn [this.search, this.search]\n\t\t\t}\n\t\t\treturn [match[1].trim(), match[2]]\n\t\t},\n\t},\n\n\tbeforeMount() {\n\t\t// If we don't have a subname and if this is a user\n\t\tif (!this.isNoUser && !this.subname) {\n\t\t\tthis.fetchUserStatus(this.user)\n\t\t}\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.option {\n\tdisplay: flex;\n\talign-items: center;\n\twidth: 100%;\n\theight: var(--height);\n\tcursor: inherit;\n\n\t&__avatar {\n\t\tmargin-inline-end: var(--margin);\n\t}\n\n\t&__details {\n\t\tdisplay: flex;\n\t\tflex: 1 1;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\tmin-width: 0;\n\t}\n\n\t&__lineone {\n\t\tcolor: var(--color-main-text);\n\t}\n\n\t&__linetwo {\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\n\t&__lineone,\n\t&__linetwo {\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\tline-height: 1.2;\n\t\tstrong {\n\t\t\tfont-weight: bold;\n\t\t}\n\t}\n\n\t&--compact {\n\t\t.option {\n\t\t\t&__lineone {\n\t\t\t\tfont-size: 14px;\n\t\t\t}\n\t\t\t&__linetwo {\n\t\t\t\tfont-size: 11px;\n\t\t\t\tline-height: 1.5;\n\t\t\t\tmargin-top: -4px;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__icon {\n\t\twidth: var(--default-clickable-area);\n\t\theight: var(--default-clickable-area);\n\t\tcolor: var(--color-text-maxcontrast);\n\t\t&.icon {\n\t\t\tflex: 0 0 var(--default-clickable-area);\n\t\t\topacity: $opacity_normal;\n\t\t\tbackground-position: center;\n\t\t\tbackground-size: 16px;\n\t\t}\n\t}\n\n\t&__details,\n\t&__lineone,\n\t&__linetwo,\n\t&__icon {\n\t\tcursor: inherit;\n\t}\n}\n</style>\n"],"names":["NcHighlight","margin","_createElementBlock","_normalizeClass","_createVNode","_mergeProps","_createElementVNode","_createBlock","_toDisplayString","_renderSlot"],"mappings":"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"}

package/dist/chunks/{NcLoadingIcon-BOVpFVQz.mjs → NcLoadingIcon.mjs}

@@ -1,6 +1,6 @@
-import '../assets/NcLoadingIcon-CWUlo4XY.css';
+import '../assets/NcLoadingIcon.css';
 import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, toDisplayString, createCommentVNode } from "vue";
-import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper.mjs";
 const _hoisted_1 = ["aria-label"];
 const _hoisted_2 = ["width", "height"];
 const _hoisted_3 = ["fill"];
@@ -54,4 +54,4 @@ const NcLoadingIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "dat
 export {
   NcLoadingIcon as N
 };
-//# sourceMappingURL=NcLoadingIcon-BOVpFVQz.mjs.map
+//# sourceMappingURL=NcLoadingIcon.mjs.map

package/dist/chunks/NcLoadingIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcLoadingIcon.mjs","sources":["../../src/components/NcLoadingIcon/NcLoadingIcon.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# Usage\n\n```\n<div>\n\t<NcLoadingIcon />\n</div>\n<div style=\"background-color: #171717;\">\n\t<NcLoadingIcon :size=\"64\" appearance=\"light\" name=\"Loading on dark background\" />\n</div>\n<div style=\"background-color: #fff;\">\n\t<NcLoadingIcon :size=\"64\" appearance=\"dark\" name=\"Loading on light background\" />\n</div>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * The appearance of the loading icon.\n\t * 'auto' adjusts to the Nextcloud color scheme,\n\t * 'light' and 'dark' are static.\n\t */\n\tappearance?: 'auto' | 'light' | 'dark'\n\n\t/**\n\t * Specify what is loading (the accessible name) if this is not purely for decoration.\n\t */\n\tname?: string\n\n\t/**\n\t * Specify the size of the loading icon.\n\t */\n\tsize?: number\n}>(), {\n\tappearance: 'auto',\n\tname: '',\n\tsize: 20,\n})\n\nconst colors = computed(() => {\n\tconst colors = ['#777', '#CCC']\n\tif (props.appearance === 'light') {\n\t\treturn colors\n\t} else if (props.appearance === 'dark') {\n\t\treturn colors.reverse()\n\t}\n\treturn ['var(--color-loading-light)', 'var(--color-loading-dark)']\n})\n</script>\n\n<template>\n\t<span\n\t\t:aria-label=\"name\"\n\t\trole=\"img\"\n\t\tclass=\"material-design-icon loading-icon\">\n\t\t<svg\n\t\t\t:width=\"size\"\n\t\t\t:height=\"size\"\n\t\t\tviewBox=\"0 0 24 24\">\n\t\t\t<path :fill=\"colors[0]\" d=\"M12,4V2A10,10 0 1,0 22,12H20A8,8 0 1,1 12,4Z\" />\n\t\t\t<path :fill=\"colors[1]\" d=\"M12,4V2A10,10 0 0,1 22,12H20A8,8 0 0,0 12,4Z\">\n\t\t\t\t<title v-if=\"name\">{{ name }}</title>\n\t\t\t</path>\n\t\t</svg>\n\t</span>\n</template>\n\n<style lang=\"scss\" scoped>\n.loading-icon {\n\toverflow: hidden;\n\n\tsvg {\n\t\tanimation: rotate var(--animation-duration, 0.8s) linear infinite;\n\t}\n}\n</style>\n"],"names":["colors","_createElementBlock","_createElementVNode","_openBlock"],"mappings":";;;;;;;;;;;;;;;AAwBA,UAAM,QAAQ;AAuBd,UAAM,SAAS,SAAS,MAAM;AAC7B,YAAMA,UAAS,CAAC,QAAQ,MAAM;AAC9B,UAAI,MAAM,eAAe,SAAS;AACjC,eAAOA;AAAAA,MACR,WAAW,MAAM,eAAe,QAAQ;AACvC,eAAOA,QAAO,QAAA;AAAA,MACf;AACA,aAAO,CAAC,8BAA8B,2BAA2B;AAAA,IAClE,CAAC;;0BAIAC,mBAaO,QAAA;AAAA,QAZL,cAAY,QAAA;AAAA,QACb,MAAK;AAAA,QACL,OAAM;AAAA,MAAA;sBACNA,mBAQM,OAAA;AAAA,UAPJ,OAAO,QAAA;AAAA,UACP,QAAQ,QAAA;AAAA,UACT,SAAQ;AAAA,QAAA;UACRC,mBAA2E,QAAA;AAAA,YAApE,MAAM,OAAA,MAAM,CAAA;AAAA,YAAK,GAAE;AAAA,UAAA;UAC1BA,mBAEO,QAAA;AAAA,YAFA,MAAM,OAAA,MAAM,CAAA;AAAA,YAAK,GAAE;AAAA,UAAA;YACZ,QAAA,QAAbC,UAAA,GAAAF,mBAAqC,qCAAf,QAAA,IAAI,GAAA,CAAA;;;;;;;;"}

package/dist/chunks/{NcMentionBubble.vue_vue_type_style_index_0_scoped_3c4a673d_lang-DyqakLm5.mjs → NcMentionBubble.vue_vue_type_style_index_0_scoped_3c4a673d_lang.mjs}

@@ -1,4 +1,4 @@
-import '../assets/NcMentionBubble-BeGb2xGc.css';
+import '../assets/NcMentionBubble.css';
 import { generateUrl } from "@nextcloud/router";
 import { checkIfDarkTheme } from "../functions/isDarkTheme/index.mjs";
 function getAvatarUrl(user, options) {
@@ -13,4 +13,4 @@ function getAvatarUrl(user, options) {
 export {
   getAvatarUrl as g
 };
-//# sourceMappingURL=NcMentionBubble.vue_vue_type_style_index_0_scoped_3c4a673d_lang-DyqakLm5.mjs.map
+//# sourceMappingURL=NcMentionBubble.vue_vue_type_style_index_0_scoped_3c4a673d_lang.mjs.map

package/dist/chunks/NcMentionBubble.vue_vue_type_style_index_0_scoped_3c4a673d_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcMentionBubble.vue_vue_type_style_index_0_scoped_3c4a673d_lang.mjs","sources":["../../src/utils/getAvatarUrl.ts"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport { generateUrl } from '@nextcloud/router'\nimport { checkIfDarkTheme } from '../functions/isDarkTheme/index.ts'\n\ninterface AvatarUrlOptions {\n\t/**\n\t * Should the dark theme variant be used.\n\t */\n\tisDarkTheme?: boolean\n\n\t/**\n\t * Is the user a guest user.\n\t */\n\tisGuest?: boolean\n\n\t/**\n\t * Size of the avatar.\n\t *\n\t * @default 64\n\t */\n\tsize?: 64 | 512\n}\n\n/**\n * Get the avatar URL for a given user.\n *\n * @param user - The user id\n * @param options - Adjustments for the avatar format\n */\nexport function getAvatarUrl(user: string, options?: AvatarUrlOptions): string {\n\t// backend only supports 64 and 512px\n\t// so we only request the needed size for better caching of the request.\n\tconst size = (options?.size || 64) <= 64\n\t\t? 64\n\t\t: 512\n\n\tconst guestUrl = options?.isGuest\n\t\t? '/guest'\n\t\t: ''\n\tconst themeUrl = options?.isDarkTheme ?? checkIfDarkTheme(document.body)\n\t\t? '/dark'\n\t\t: ''\n\n\treturn generateUrl(`/avatar${guestUrl}/{user}/{size}${themeUrl}?guestFallback=true`, {\n\t\tuser,\n\t\tsize,\n\t})\n}\n"],"names":[],"mappings":";;AAiCO,SAAS,aAAa,MAAc,SAAoC;AAG9E,QAAM,QAAQ,SAAS,QAAQ,OAAO,KACnC,KACA;AAEH,QAAM,WAAW,SAAS,UACvB,WACA;AACH,QAAM,WAAW,SAAS,eAAe,iBAAiB,SAAS,IAAI,IACpE,UACA;AAEH,SAAO,YAAY,UAAU,QAAQ,iBAAiB,QAAQ,uBAAuB;AAAA,IACpF;AAAA,IACA;AAAA,EAAA,CACA;AACF;"}

package/dist/chunks/{NcModal-DiDvgcU8.mjs → NcModal.mjs}

@@ -1,21 +1,21 @@
-import '../assets/NcModal-D81luiuU.css';
+import '../assets/NcModal.css';
 import { getCurrentInstance, warn, defineComponent, useCssVars, useModel, useTemplateRef, onUnmounted, watch, toRef, ref, watchEffect, computed, useSlots, onMounted, openBlock, createBlock, Teleport, createVNode, Transition, withCtx, withDirectives, createElementVNode, mergeProps, unref, createElementBlock, toDisplayString, createCommentVNode, normalizeClass, renderSlot, withModifiers, vShow, mergeModels, nextTick } from "vue";
-import { E as mdiPause, F as mdiPlay, b as mdiClose, z as mdiChevronLeft, c as mdiChevronRight } from "./mdi-CpchYUUV.mjs";
+import { z as mdiPause, A as mdiPlay, b as mdiClose, B as mdiChevronLeft, c as mdiChevronRight } from "./mdi.mjs";
 import { useIntervalFn, useSwipe } from "@vueuse/core";
 import { createFocusTrap } from "focus-trap";
-import { N as NcActions } from "./NcActions-C-wDqSrv.mjs";
-import { N as NcButton } from "./NcButton-jvoYS2my.mjs";
-import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-g8ubWhoz.mjs";
+import { N as NcActions } from "./NcActions.mjs";
+import { N as NcButton } from "./NcButton.mjs";
+import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper.mjs";
 import "../composables/useFormatDateTime/index.mjs";
 import { useHotKey } from "../composables/useHotKey/index.mjs";
 import "../composables/useIsDarkTheme/index.mjs";
 import "../composables/useIsFullscreen/index.mjs";
 import "../composables/useIsMobile/index.mjs";
-import { r as register, D as t36, A as t19, a as t } from "./_l10n-wdIzZwir.mjs";
-import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
-import { g as getTrapStack } from "./focusTrap-HJQ4pqHV.mjs";
-import { i as isRtl } from "./rtl-v0UOPAM7.mjs";
-import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+import { r as register, D as t37, A as t20, a as t } from "./_l10n.mjs";
+import { c as createElementId } from "./createElementId.mjs";
+import { g as getTrapStack } from "./focusTrap.mjs";
+import { i as isRtl } from "./rtl.mjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper.mjs";
 /*!
  * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
@@ -52,7 +52,7 @@ function useScopeIdAttrs() {
   const scopeIdAttrs = Object.fromEntries(scopeIds.map((scopeId) => [scopeId, ""]));
   return scopeIdAttrs;
 }
-register(t19, t36);
+register(t20, t37);
 const _hoisted_1 = ["aria-labelledby", "aria-describedby"];
 const _hoisted_2 = ["data-theme-light", "data-theme-dark"];
 const _hoisted_3 = ["id"];
@@ -433,4 +433,4 @@ const NcModal = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3c
 export {
   NcModal as N
 };
-//# sourceMappingURL=NcModal-DiDvgcU8.mjs.map
+//# sourceMappingURL=NcModal.mjs.map

package/dist/chunks/NcModal.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcModal.mjs","sources":["../../src/composables/useScopeIdAttrs.ts","../../src/components/NcModal/NcModal.vue"],"sourcesContent":["/*!\n * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport type { ComponentInternalInstance } from 'vue'\n\nimport { getCurrentInstance, warn } from 'vue'\n\n/**\n * Get the parent instance of the instance only if the instance is the root node of the parent\n * - Parent > Child - same root node\n * - Parent > div > Child - different root node\n * - Parent > WrapperWithSlot > Child - different root node\n *\n * @param instance - Current instance (internal)\n */\nfunction getSameNodeParent(instance: ComponentInternalInstance): ComponentInternalInstance | null {\n\tif (!instance.parent) {\n\t\treturn null\n\t}\n\n\tif ('vapor' in instance || 'vapor' in instance.parent) {\n\t\twarn('Vapor instances are not supported in useScopeIdAttrs :(')\n\t\treturn null\n\t}\n\n\tif (instance.parent.subTree !== instance.vnode) {\n\t\treturn null\n\t}\n\n\treturn instance.parent\n}\n\n/**\n * Get all ancestor instances of the instance that are on the same root node\n *\n * @param instance - Current instance (internal)\n */\nfunction getSameNodeAncestors(instance: ComponentInternalInstance): ComponentInternalInstance[] {\n\tconst ancestors: ComponentInternalInstance[] = [instance]\n\tlet parent = getSameNodeParent(instance)\n\twhile (parent) {\n\t\tancestors.push(parent)\n\t\tparent = getSameNodeParent(parent)\n\t}\n\treturn ancestors\n}\n\n/**\n * Get a binding object for all data-v-scopeid attributes that are supposed to be on the root node.\n * It allows to have scoped styles from parents in edge cases not covered by Vue:\n * - Teleport on the root\n * - Fragments\n *\n * @todo Do we need to support slotScopeIds for `:slotted()`?\n *\n * @example\n * ```ts\n * <script setup>\n * import { useScopeIdAttrs } from './useScopeIdAttrs.ts'\n * const scopeIdAttrs = useScopeIdAttrs()\n * </script>\n * <template>\n *   <teleport to=\"body\">\n *     <div v-bind=\"scopeIdAttrs\" />\n *   </teleport>\n * </template>\n * ```\n */\nexport function useScopeIdAttrs() {\n\tconst instance = getCurrentInstance()\n\n\tif (!instance) {\n\t\tthrow new Error('useScopeId must be called within a setup context')\n\t}\n\n\tconst sameNodeAncestors = getSameNodeAncestors(instance)\n\tconst scopeIds = sameNodeAncestors.map((instance) => instance.vnode.scopeId).filter(Boolean)\n\tconst scopeIdAttrs = Object.fromEntries(scopeIds.map((scopeId) => [scopeId, '']))\n\treturn scopeIdAttrs\n}\n","<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { UseSwipeDirection } from '@vueuse/core'\nimport type { FocusTargetValueOrFalse, FocusTrap, Options as FocusTrapOptions } from 'focus-trap'\nimport type { Slot } from 'vue'\n\nimport { mdiChevronLeft, mdiChevronRight, mdiClose, mdiPause, mdiPlay } from '@mdi/js'\nimport { useIntervalFn, useSwipe } from '@vueuse/core'\nimport { createFocusTrap } from 'focus-trap'\nimport { computed, nextTick, onMounted, onUnmounted, ref, toRef, useSlots, useTemplateRef, warn, watch, watchEffect } from 'vue'\nimport NcActions from '../NcActions/NcActions.vue'\nimport NcButton from '../NcButton/NcButton.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { useHotKey } from '../../composables/index.ts'\nimport { useScopeIdAttrs } from '../../composables/useScopeIdAttrs.ts'\nimport { t } from '../../l10n.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { getTrapStack } from '../../utils/focusTrap.ts'\nimport { isRtl } from '../../utils/rtl.ts'\n\ndefineOptions({ inheritAttrs: false })\n\n/**\n * The show-state of the modal.\n */\nconst showModal = defineModel<boolean>('show', { default: true })\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * Name to be shown with the modal\n\t */\n\tname?: string\n\n\t/**\n\t * Declare if a previous slide is available\n\t */\n\thasPrevious?: boolean\n\n\t/**\n\t * Declare if a next slide is available\n\t */\n\thasNext?: boolean\n\n\t/**\n\t * Declare if hiding the modal should be animated\n\t */\n\toutTransition?: boolean\n\n\t/**\n\t * Declare if the slideshow functionality should be enabled\n\t */\n\tenableSlideshow?: boolean\n\n\t/**\n\t * Declare the slide interval\n\t */\n\tslideshowDelay?: number\n\n\t/**\n\t * Allow to pause an ongoing slideshow\n\t */\n\tslideshowPaused?: boolean\n\n\t/**\n\t * Disable swipe between slides\n\t */\n\tdisableSwipe?: boolean\n\n\t/**\n\t * Enable spread navigation\n\t */\n\tspreadNavigation?: boolean\n\n\t/**\n\t * Defines the modal size.\n\t * All sizes except 'small' change automatically to full-screen on mobile.\n\t */\n\tsize?: 'small' | 'normal' | 'large' | 'full'\n\n\t/**\n\t * Do not show the close button for the dialog.\n\t */\n\tnoClose?: boolean\n\n\t/**\n\t * Close the modal if the user clicked outside the modal\n\t * Only relevant if `noClose` is not set.\n\t */\n\tcloseOnClickOutside?: boolean\n\n\t/**\n\t * Makes the modal backdrop opaque if true\n\t * Will be overwritten if some buttons are shown outside\n\t */\n\tdark?: boolean\n\n\t/**\n\t * Set light backdrop. Makes the modal header appear light.\n\t */\n\tlightBackdrop?: boolean\n\n\t/**\n\t * Selector for the modal container, pass `null` to prevent automatic container mounting\n\t */\n\tcontainer?: string | null\n\n\t/**\n\t * Pass in `true` if you want the modal 'close' button to be displayed\n\t * outside the modal boundaries, in the top right corner of the window.\n\t *\n\t * @since 8.25.0\n\t */\n\tcloseButtonOutside?: boolean\n\n\t/**\n\t * Additional elements to add to the focus trap\n\t */\n\tadditionalTrapElements?: (string | HTMLElement)[]\n\n\t/**\n\t * Display x items inline\n\t *\n\t * @see NcActions component usage\n\t */\n\tinlineActions?: number\n\n\t/**\n\t * Id of the element that labels the dialog (the name)\n\t * Not needed if the `name` prop is set, but if no name is set you need to provide the ID of an element to label the dialog for accessibility.\n\t */\n\tlabelId?: string\n\n\t/**\n\t * Set element to return focus to after focus trap deactivation\n\t */\n\tsetReturnFocus?: FocusTargetValueOrFalse\n}>(), {\n\tadditionalTrapElements: () => [],\n\tcontainer: 'body',\n\tinlineActions: 0,\n\tlabelId: '',\n\tslideshowDelay: 5000,\n\tsize: 'normal',\n\tname: '',\n\tsetReturnFocus: undefined,\n})\n\nconst emit = defineEmits<{\n\t/**\n\t * Trigger showing the next slide.\n\t *\n\t * @param payload - The event that triggered showing the next slide\n\t */\n\tnext: [payload?: Event]\n\n\t/**\n\t * Trigger showing the previous slide.\n\t *\n\t * @param payload - The event that triggered showing the previous slide\n\t */\n\tprevious: [payload?: Event]\n\n\t/**\n\t * Emitted when the closing animation is finished\n\t *\n\t * @param payload - The event that triggered the close\n\t */\n\tclose: [payload?: Event]\n\n\t/**\n\t * @param payload - The new show-state\n\t */\n\t'update:show': [payload: boolean]\n}>()\n\ndefineSlots<{\n\t/**\n\t * Actions to show (one or more NcAction* components)\n\t */\n\tactions?: Slot\n\n\t/**\n\t * The modal content to show.\n\t */\n\tdefault?: Slot\n}>()\n\nconst scopeIdAttrs = useScopeIdAttrs()\n\nconst modalId = createElementId()\nconst maskElement = useTemplateRef('mask')\n\n// Set up the focus trap (handled by transition event listeners)\nlet focusTrap: FocusTrap | undefined\n// Ensure focus trap is cleared when the component is unmounted\nonUnmounted(() => clearFocusTrap())\n// and update the focus trap container elements when props change\nwatch(() => props.additionalTrapElements, (elements) => {\n\tif (focusTrap) {\n\t\tfocusTrap.updateContainerElements([maskElement.value!, ...elements])\n\t}\n})\n\n// Set up the slideshow\nconst {\n\tisActive: isPlaying,\n\tpause: stopSlideshow,\n\tresume: startSlideshow,\n} = useIntervalFn(nextSlide, toRef(() => props.slideshowDelay), { immediate: false })\n\nconst animationKey = ref(0)\nconst runSlideshow = ref(false)\nwatchEffect(() => {\n\tif (runSlideshow.value && !props.slideshowPaused) {\n\t\tstartSlideshow()\n\t} else if (isPlaying.value) {\n\t\tstopSlideshow()\n\t}\n})\n\nconst cssSlideshowDelay = computed(() => `${props.slideshowDelay}ms`)\n\n// Setup swipe navigation\nconst { stop: stopSwipe } = useSwipe(maskElement, {\n\tonSwipeEnd: handleSwipe,\n})\nonUnmounted(stopSwipe)\n\n// Setup hotkeys (keyboard navigation)\nuseHotKey('Escape', () => {\n\tconst trapStack = getTrapStack()\n\t// Only close the most recent focus trap modal\n\tif (trapStack.at(-1) === focusTrap) {\n\t\tclose()\n\t}\n}, { allowInModal: true })\n\nuseHotKey(['ArrowLeft', 'ArrowRight'], (event) => {\n\t// Ignore arrow navigation, if there is a current focus outside the modal.\n\t// For example, when the focus is in Sidebar or NcActions' items,\n\t// arrow navigation should not be intercepted by modal slider\n\tif (document.activeElement && !maskElement.value!.contains(document.activeElement)) {\n\t\treturn\n\t}\n\n\tif ((event.key === 'ArrowLeft') !== isRtl) {\n\t\tpreviousSlide()\n\t} else {\n\t\tnextSlide()\n\t}\n}, { allowInModal: true })\n\nconst slots = useSlots()\nconst numHeaderActions = computed(() => {\n\tlet actions = 0\n\tif (props.hasNext && props.enableSlideshow) {\n\t\tactions++\n\t}\n\tif (!props.noClose && props.closeButtonOutside) {\n\t\tactions++\n\t}\n\tif (slots.actions) {\n\t\tactions++\n\t}\n\n\treturn actions\n})\n\n// for developers we should add a warning if used with invalid props combination\nonMounted(() => {\n\tif (!props.name && !props.labelId) {\n\t\twarn('[NcModal] You need either set the name or set a `labelId` for accessibility.')\n\t}\n})\n\n/**\n * Trigger showing the next slide\n *\n * @param event - The mouse click event if triggered by user\n */\nfunction nextSlide(event?: Event) {\n\tif (!props.hasNext) {\n\t\trunSlideshow.value = false\n\t\t// do not send the event if nothing is available\n\t\treturn\n\t}\n\n\tif (event && isPlaying.value) {\n\t\trestartSlideshow()\n\t}\n\temit('next', event)\n}\n\n/**\n * Trigger showing the previous slide\n *\n * @param event - The mouse click event if triggered by user\n */\nfunction previousSlide(event?: Event) {\n\tif (!props.hasPrevious) {\n\t\t// do not send the event if nothing is available\n\t\treturn\n\t}\n\n\tif (event && isPlaying.value) {\n\t\trestartSlideshow()\n\t}\n\temit('previous', event)\n}\n\n/**\n * handle the swipe event\n *\n * @param e - The touch event\n * @param direction - Swipe direction\n */\nfunction handleSwipe(e: TouchEvent, direction: UseSwipeDirection) {\n\tif (!props.disableSwipe) {\n\t\tif (direction !== 'left' && direction !== 'right') {\n\t\t\treturn\n\t\t}\n\n\t\tif ((direction === 'left') !== isRtl) {\n\t\t\tnextSlide(e)\n\t\t} else {\n\t\t\tpreviousSlide(e)\n\t\t}\n\t}\n}\n\n/**\n * Reset the slideshow interval and animation\n */\nfunction restartSlideshow() {\n\tstopSlideshow()\n\tstartSlideshow()\n\tanimationKey.value++\n}\n\n/**\n * Handle closing the modal.\n *\n * @param event - The event that triggered closing the modal\n */\nfunction close(event?: Event) {\n\t// do not fire event if forbidden\n\tif (props.noClose) {\n\t\treturn\n\t}\n\n\tshowModal.value = false\n\n\t// delay closing for animation\n\tsetTimeout(() => {\n\t\temit('close', event)\n\t}, 300)\n}\n\n/**\n * Handle click on modal wrapper\n * If `closeOnClickOutside` is set the modal will be closed\n *\n * @param event - The click event\n */\nfunction handleClickModalWrapper(event: MouseEvent) {\n\tif (props.closeOnClickOutside) {\n\t\tclose(event)\n\t}\n}\n\n/**\n * Add focus trap for accessibility.\n */\nasync function useFocusTrap() {\n\t// Don't do anything if we have a focus trap already\n\tif (focusTrap) {\n\t\treturn\n\t}\n\n\t// wait until all children are mounted and available in the DOM before focusTrap can be added\n\tawait nextTick()\n\n\tconst options: FocusTrapOptions = {\n\t\tallowOutsideClick: true,\n\t\tfallbackFocus: maskElement.value!,\n\t\ttrapStack: getTrapStack(),\n\t\t// Esc can be used without stop in content or additionalTrapElements where it should not deactivate modal's focus trap.\n\t\t// Focus trap is deactivated on modal close anyway.\n\t\tescapeDeactivates: false,\n\t\tsetReturnFocus: props.setReturnFocus,\n\t}\n\t// Init focus trap\n\tfocusTrap = createFocusTrap([maskElement.value!, ...props.additionalTrapElements], options)\n\tfocusTrap.activate()\n}\n\n/**\n * Deactivate the active focus trap - if any.\n */\nfunction clearFocusTrap() {\n\tif (!focusTrap) {\n\t\treturn\n\t}\n\tfocusTrap?.deactivate()\n\tfocusTrap = undefined\n}\n</script>\n\n<template>\n\t<Teleport :disabled=\"container === null\" :to=\"container\">\n\t\t<transition\n\t\t\tname=\"fade\"\n\t\t\tappear\n\t\t\t@afterEnter=\"useFocusTrap\"\n\t\t\t@beforeLeave=\"clearFocusTrap\">\n\t\t\t<div\n\t\t\t\tv-show=\"showModal\"\n\t\t\t\tv-bind=\"{ ...$attrs, ...scopeIdAttrs }\"\n\t\t\t\tref=\"mask\"\n\t\t\t\tclass=\"modal-mask\"\n\t\t\t\t:class=\"{\n\t\t\t\t\t'modal-mask--opaque': dark || closeButtonOutside || hasPrevious || hasNext,\n\t\t\t\t\t'modal-mask--light': lightBackdrop,\n\t\t\t\t}\"\n\t\t\t\trole=\"dialog\"\n\t\t\t\taria-modal=\"true\"\n\t\t\t\t:aria-labelledby=\"labelId || `modal-name-${modalId}`\"\n\t\t\t\t:aria-describedby=\"'modal-description-' + modalId\"\n\t\t\t\ttabindex=\"-1\">\n\t\t\t\t<!-- Header -->\n\t\t\t\t<transition name=\"fade-visibility\" appear>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"modal-header\"\n\t\t\t\t\t\t:data-theme-light=\"lightBackdrop\"\n\t\t\t\t\t\t:data-theme-dark=\"!lightBackdrop\">\n\t\t\t\t\t\t<h2\n\t\t\t\t\t\t\tv-if=\"name.trim() !== ''\"\n\t\t\t\t\t\t\t:id=\"'modal-name-' + modalId\"\n\t\t\t\t\t\t\tclass=\"modal-header__name\">\n\t\t\t\t\t\t\t{{ name }}\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t<div class=\"icons-menu\">\n\t\t\t\t\t\t\t<!-- Play-pause toggle -->\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tv-if=\"hasNext && enableSlideshow\"\n\t\t\t\t\t\t\t\tclass=\"play-pause-icons\"\n\t\t\t\t\t\t\t\t:class=\"{ 'play-pause-icons--paused': slideshowPaused }\"\n\t\t\t\t\t\t\t\t:title=\"isPlaying ? t('Pause slideshow') : t('Start slideshow')\"\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t@click=\"runSlideshow = !runSlideshow\">\n\t\t\t\t\t\t\t\t<!-- Play/pause icons -->\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper\n\t\t\t\t\t\t\t\t\tclass=\"play-pause-icons__icon\"\n\t\t\t\t\t\t\t\t\tinline\n\t\t\t\t\t\t\t\t\t:name=\"isPlaying ? t('Pause slideshow') : t('Start slideshow')\"\n\t\t\t\t\t\t\t\t\t:path=\"isPlaying ? mdiPause : mdiPlay\" />\n\n\t\t\t\t\t\t\t\t<!-- Progress circle, css animated -->\n\t\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t\tv-if=\"isPlaying\"\n\t\t\t\t\t\t\t\t\t:key=\"`${modalId}-animation-${animationKey}`\"\n\t\t\t\t\t\t\t\t\tclass=\"progress-ring\"\n\t\t\t\t\t\t\t\t\theight=\"50\"\n\t\t\t\t\t\t\t\t\twidth=\"50\">\n\t\t\t\t\t\t\t\t\t<circle\n\t\t\t\t\t\t\t\t\t\tclass=\"progress-ring__circle\"\n\t\t\t\t\t\t\t\t\t\tstroke=\"white\"\n\t\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\t\t\t\t\t\tfill=\"transparent\"\n\t\t\t\t\t\t\t\t\t\tr=\"15\"\n\t\t\t\t\t\t\t\t\t\tcx=\"25\"\n\t\t\t\t\t\t\t\t\t\tcy=\"25\" />\n\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t</button>\n\n\t\t\t\t\t\t\t<!-- Actions menu -->\n\t\t\t\t\t\t\t<NcActions class=\"header-actions\" :inline=\"inlineActions\">\n\t\t\t\t\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t\t\t\t</NcActions>\n\n\t\t\t\t\t\t\t<!-- Close modal -->\n\t\t\t\t\t\t\t<NcButton\n\t\t\t\t\t\t\t\tv-if=\"!noClose && closeButtonOutside\"\n\t\t\t\t\t\t\t\t:aria-label=\"t('Close')\"\n\t\t\t\t\t\t\t\tclass=\"header-close\"\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t@click=\"close\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiClose\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</transition>\n\n\t\t\t\t<!-- Content wrapper -->\n\t\t\t\t<transition :name=\"`modal-${outTransition ? 'out' : 'in'}`\" appear>\n\t\t\t\t\t<div\n\t\t\t\t\t\tv-show=\"showModal\"\n\t\t\t\t\t\tclass=\"modal-wrapper\"\n\t\t\t\t\t\t:class=\"[\n\t\t\t\t\t\t\t`modal-wrapper--${size}`,\n\t\t\t\t\t\t\t{ 'modal-wrapper--spread-navigation': spreadNavigation },\n\t\t\t\t\t\t]\"\n\t\t\t\t\t\t@mousedown.self=\"handleClickModalWrapper\">\n\t\t\t\t\t\t<!-- Navigation button -->\n\t\t\t\t\t\t<transition name=\"fade-visibility\" appear>\n\t\t\t\t\t\t\t<NcButton\n\t\t\t\t\t\t\t\tv-show=\"hasPrevious\"\n\t\t\t\t\t\t\t\t:aria-label=\"t('Previous')\"\n\t\t\t\t\t\t\t\tclass=\"prev\"\n\t\t\t\t\t\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t\t\t\t\t\t@click=\"previousSlide\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<NcIconSvgWrapper\n\t\t\t\t\t\t\t\t\t\tdirectional\n\t\t\t\t\t\t\t\t\t\t:path=\"mdiChevronLeft\"\n\t\t\t\t\t\t\t\t\t\t:size=\"40\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</transition>\n\n\t\t\t\t\t\t<!-- Content -->\n\t\t\t\t\t\t<div :id=\"'modal-description-' + modalId\" class=\"modal-container\">\n\t\t\t\t\t\t\t<div class=\"modal-container__content\">\n\t\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<!-- Close modal -->\n\t\t\t\t\t\t\t<NcButton\n\t\t\t\t\t\t\t\tv-if=\"!noClose && !closeButtonOutside\"\n\t\t\t\t\t\t\t\t:aria-label=\"t('Close')\"\n\t\t\t\t\t\t\t\tclass=\"modal-container__close\"\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t@click=\"close\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiClose\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<!-- Navigation button -->\n\t\t\t\t\t\t<transition name=\"fade-visibility\" appear>\n\t\t\t\t\t\t\t<NcButton\n\t\t\t\t\t\t\t\tv-show=\"hasNext\"\n\t\t\t\t\t\t\t\t:aria-label=\"t('Next')\"\n\t\t\t\t\t\t\t\tclass=\"next\"\n\t\t\t\t\t\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t\t\t\t\t\t@click=\"nextSlide\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<NcIconSvgWrapper\n\t\t\t\t\t\t\t\t\t\tdirectional\n\t\t\t\t\t\t\t\t\t\t:path=\"mdiChevronRight\"\n\t\t\t\t\t\t\t\t\t\t:size=\"40\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</transition>\n\t\t\t\t\t</div>\n\t\t\t\t</transition>\n\t\t\t</div>\n\t\t</transition>\n\t</Teleport>\n</template>\n\n<style lang=\"scss\" scoped>\n\n.modal-mask {\n\tposition: fixed;\n\tz-index: 9998;\n\ttop: 0;\n\tinset-inline-start: 0;\n\tdisplay: block;\n\twidth: 100%;\n\theight: 100%;\n\t--backdrop-color: 0, 0, 0;\n\tbackground-color: rgba(var(--backdrop-color), .5);\n\n\t&,\n\t& * {\n\t\tbox-sizing: border-box;\n\t}\n\n\t&--opaque {\n\t\tbackground-color: rgba(var(--backdrop-color), .92);\n\t}\n\t&--light {\n\t\t--backdrop-color: 255, 255, 255;\n\t}\n}\n\n.modal-header {\n\tposition: absolute;\n\tz-index: 10001;\n\ttop: 0;\n\tinset-inline: 0 0;\n\t// prevent vue show to use display:none and resetting\n\t// the circle animation loop\n\tdisplay: flex !important;\n\talign-items: center;\n\tjustify-content: space-between;\n\twidth: 100%;\n\theight: var(--header-height);\n\toverflow: hidden;\n\ttransition: opacity 250ms, visibility 250ms;\n\n\t&__name {\n\t\toverflow-x: hidden;\n\t\twidth: 100%;\n\t\tpadding-inline: 12px 0;\n\t\ttransition: padding ease 100ms;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\tfont-size: $icon-size;\n\t\tmargin-block: 0;\n\t}\n\n\t// On wider screens the name can be centered\n\t@media only screen and (min-width: $breakpoint-mobile) {\n\t\t&__name {\n\t\t\t// On wider screens the name is centered, so we need to compensate for the actions to make the name really centered\n\t\t\tpadding-inline-start: calc(var(--header-height) * v-bind('numHeaderActions'));\n\t\t\ttext-align: center;\n\t\t}\n\t}\n\n\t.icons-menu {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: flex-end;\n\t\talign-self: flex-end;\n\n\t\t.header-close {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\tmargin: calc((var(--header-height) - var(--default-clickable-area)) / 2);\n\t\t\tpadding: 0;\n\t\t}\n\n\t\t.play-pause-icons {\n\t\t\tposition: relative;\n\t\t\twidth: var(--header-height);\n\t\t\theight: var(--header-height);\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t\tcursor: pointer;\n\t\t\tborder: none;\n\t\t\tbackground-color: transparent;\n\t\t\t&:hover,\n\t\t\t&:focus {\n\t\t\t\t.play-pause-icons__icon {\n\t\t\t\t\topacity: $opacity_full;\n\t\t\t\t\tborder-radius: calc(var(--default-clickable-area) / 2);\n\t\t\t\t\tbackground-color: $icon-focus-bg;\n\t\t\t\t}\n\t\t\t}\n\t\t\t&__icon {\n\t\t\t\twidth: var(--default-clickable-area);\n\t\t\t\theight: var(--default-clickable-area);\n\t\t\t\tmargin: calc((var(--header-height) - var(--default-clickable-area)) / 2);\n\t\t\t\tcursor: pointer;\n\t\t\t\topacity: $opacity_normal;\n\t\t\t}\n\t\t}\n\n\t\t&:deep() .action-item {\n\t\t\tmargin: calc((var(--header-height) - var(--default-clickable-area)) / 2);\n\n\t\t\t&--single {\n\t\t\t\twidth: var(--default-clickable-area);\n\t\t\t\theight: var(--default-clickable-area);\n\t\t\t\tcursor: pointer;\n\t\t\t\tbackground-position: center;\n\t\t\t\tbackground-size: 22px;\n\t\t\t}\n\t\t}\n\n\t\t// The modal ignores the color theme and adds a black backdrop\n\t\t// so we need to add custom color of the actions toggle\n\t\t.header-actions :deep(button:focus-visible) {\n\t\t\tbox-shadow: none !important;\n\t\t\toutline: 2px solid #fff !important;\n\t\t}\n\t}\n}\n\n.modal-wrapper {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 100%;\n\theight: 100%;\n\n\t/* Navigation buttons */\n\t.prev,\n\t.next {\n\t\tz-index: 10000;\n\t\theight: 35vh;\n\t\tmin-height: 300px;\n\t\tposition: absolute;\n\t\ttransition: opacity 250ms;\n\t\t// hover the mask\n\t\tcolor: white;\n\n\t\t&:focus-visible {\n\t\t\t// Override NcButton focus styles\n\t\t\tbox-shadow: 0 0 0 2px var(--color-primary-element-text);\n\t\t\tbackground-color: var(--color-box-shadow);\n\t\t}\n\t}\n\n\t.prev {\n\t\tinset-inline-start: 2px;\n\t}\n\t.next {\n\t\tinset-inline-end: 2px;\n\t}\n\n\t/* Content */\n\t.modal-container {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\tpadding: 0;\n\t\ttransition: transform 300ms ease;\n\t\tborder-radius: var(--border-radius-container);\n\t\tbackground-color: var(--color-main-background);\n\t\tcolor: var(--color-main-text);\n\t\tbox-shadow: 0 0 40px rgba(0, 0, 0, .2);\n\t\toverflow: auto;\n\n\t\t&__close {\n\t\t\t// Ensure the close button is always on top of the content\n\t\t\tz-index: 1;\n\t\t\tposition: absolute;\n\t\t\ttop: 4px;\n\t\t\tinset-inline-end: var(--default-grid-baseline);\n\t\t}\n\n\t\t&__content {\n\t\t\twidth: 100%;\n\t\t\tmin-height: 52px; // At least the close button shall fit in\n\t\t\toverflow: auto; // avoids unnecessary hacks if the content should be bigger than the modal\n\t\t}\n\t}\n\n\t// We allow 90% max-height, but we need to ensure the header does not overlap the modal\n\t// as the modal is centered, we need the space on top and bottom\n\t$max-modal-height: min(90%, calc(100% - 2 * var(--header-height) - 2 * var(--body-container-margin)));\n\n\t// Sizing\n\t&--small {\n\t\t& > .modal-container {\n\t\t\twidth: 400px;\n\t\t\tmax-width: 90%;\n\t\t\tmax-height: $max-modal-height;\n\t\t}\n\t}\n\t&--normal {\n\t\t& > .modal-container {\n\t\t\tmax-width: 90%;\n\t\t\twidth: 600px;\n\t\t\tmax-height: $max-modal-height;\n\t\t}\n\t}\n\t&--large {\n\t\t& > .modal-container {\n\t\t\tmax-width: 90%;\n\t\t\twidth: 900px;\n\t\t\tmax-height: $max-modal-height;\n\t\t}\n\t}\n\t&--full {\n\t\t& > .modal-container {\n\t\t\twidth: 100%;\n\t\t\theight: calc(100% - var(--header-height));\n\t\t\tposition: absolute;\n\t\t\ttop: var(--header-height);\n\t\t\tborder-radius: 0;\n\t\t}\n\t}\n\n\t// Make modal full screen on mobile\n\t@media only screen and ((max-width: $breakpoint-small-mobile) or (max-height: 400px)) {\n\t\t.modal-container {\n\t\t\tmax-width: initial;\n\t\t\twidth: 100%;\n\t\t\tmax-height: initial;\n\t\t\theight: calc(100% - var(--header-height));\n\t\t\tposition: absolute;\n\t\t\ttop: var(--header-height);\n\t\t\tborder-radius: 0;\n\t\t}\n\t}\n}\n\n/* TRANSITIONS */\n.fade-enter-active,\n.fade-leave-active {\n\ttransition: opacity 250ms;\n}\n\n.fade-enter-from,\n.fade-leave-to {\n\topacity: 0;\n}\n\n.fade-visibility-enter-from,\n.fade-visibility-leave-to {\n\tvisibility: hidden;\n\topacity: 0;\n}\n\n.modal-in-enter-active,\n.modal-in-leave-active,\n.modal-out-enter-active,\n.modal-out-leave-active {\n\ttransition: opacity 250ms;\n}\n\n.modal-in-enter-from,\n.modal-in-leave-to,\n.modal-out-enter-from,\n.modal-out-leave-to {\n\topacity: 0;\n}\n\n.modal-in-enter .modal-container,\n.modal-in-leave-to .modal-container {\n\ttransform: scale(.9);\n}\n\n.modal-out-enter .modal-container,\n.modal-out-leave-to .modal-container {\n\ttransform: scale(1.1);\n}\n\n// animated circle\n$radius: 15;\n$pi: 3.14159265358979;\n\n.modal-mask .play-pause-icons {\n\t.progress-ring {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tinset-inline-start: 0;\n\t\ttransform: rotate(-90deg);\n\t\t.progress-ring__circle {\n\t\t\ttransition: 100ms stroke-dashoffset;\n\t\t\ttransform-origin: 50% 50%; // axis compensation\n\t\t\tanimation: progressring linear v-bind('cssSlideshowDelay') infinite;\n\n\t\t\tstroke-linecap: round;\n\t\t\tstroke-dashoffset: $radius * 2 * $pi; // radius * 2 * PI\n\t\t\tstroke-dasharray: $radius * 2 * $pi; // radius * 2 * PI\n\t\t}\n\t}\n\t&--paused {\n\t\t.play-pause-icons__icon {\n\t\t\tanimation: breath 2s cubic-bezier(.4, 0, .2, 1) infinite;\n\t\t}\n\t\t.progress-ring__circle {\n\t\t\tanimation-play-state: paused !important;\n\t\t}\n\t}\n}\n\n// keyframes get scoped too and break the animation name, we need them unscoped\n@keyframes progressring {\n\tfrom {\n\t\tstroke-dashoffset: $radius * 2 * $pi; // radius * 2 * PI\n\t}\n\tto {\n\t\tstroke-dashoffset: 0;\n\t}\n}\n\n@keyframes breath {\n\t0% {\n\t\topacity: 1;\n\t}\n\t50% {\n\t\topacity: 0;\n\t}\n\t100% {\n\t\topacity: 1;\n\t}\n}\n</style>\n\n<docs>\nThe `NcModel` is the base component used for modals and dialogs.\nWhile `NcDialog` should be used for general dialogs like confirmations or forms,\n`NcModal` allows for custom content like showing image multimedia.\n\nFor showing the modal you can use either `v-model:show=\"showModal\"` or `v-if` on the `NcModal`,\ndepending on whether you require the Modal to stay within the DOM or not. Do not mix both, as this will break the out transition animation.\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"showModal\">Show Modal</NcButton>\n\t\t<NcModal\n\t\t\tv-model:show=\"modal\"\n\t\t\t@close=\"closeModal\"\n\t\t\tsize=\"small\"\n\t\t\tname=\"Name\"\n\t\t\tout-transition>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionCaption name=\"Some action\" />\n\t\t\t</template>\n\t\t\t<div class=\"modal__content\">Hello world</div>\n\t\t</NcModal>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tmodal: false\n\t\t}\n\t},\n\tmethods: {\n\t\tshowModal() {\n\t\t\tthis.modal = true\n\t\t},\n\t\tcloseModal() {\n\t\t\tthis.modal = false\n\t\t}\n\t}\n}\n</script>\n<style scoped>\n.modal__content {\n\tmargin: 50px;\n\ttext-align: center;\n}\n</style>\n```\n\n### Modal with slideshow\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"isOpen = true\">Show Modal</NcButton>\n\t\t<NcModal\n\t\t\tv-if=\"isOpen\"\n\t\t\tclose-button-outside\n\t\t\tenable-slideshow\n\t\t\t:has-next=\"page < lastPage\"\n\t\t\t:has-previous=\"page > 0\"\n\t\t\tname=\"Modal with slideshow\"\n\t\t\t@next=\"page++\"\n\t\t\t@previous=\"page--\"\n\t\t\t@close=\"isOpen = false\">\n\t\t\t<div class=\"modal__content\" :style=\"{ background: currentPage.background }\">\n\t\t\t\t<p class=\"model__content-text\">{{ currentPage.text }}</p>\n\t\t\t</div>\n\t\t</NcModal>\n\t</div>\n</template>\n<script>\nconst PAGES = [\n\t{ text: 'First page', background: 'linear-gradient(#e66465, #9198e5)' },\n\t{ text: 'Second page', background: 'linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c)' },\n\t{ text: 'Third page', background: 'lightblue' },\n\t{ text: 'Last page', background: 'lightgrey' },\n]\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tisOpen: false,\n\t\t\tpage: 0,\n\t\t\tlastPage: PAGES.length - 1,\n\t\t}\n\t},\n\tcomputed: {\n\t\tcurrentPage() {\n\t\t\treturn PAGES[this.page]\n\t\t},\n\t}\n}\n</script>\n<style scoped>\n.modal__content {\n\theight: 100%;\n\tmin-height: 30vh;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.model__content-text {\n\tfont-size: 16px;\n\tfont-weight: var(--font-weight-heading, bold);\n}\n</style>\n```\n\n### Usage of popover in modal\n\n* Set container property to .modal-mask to inject popover context of the modal:\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"showModal\">Show Modal</NcButton>\n\t\t<NcModal\n\t\t\tv-model:show=\"modal\"\n\t\t\tclass=\"emoji-modal\"\n\t\t\tname=\"Modal with popover\"\n\t\t\tsize=\"small\"\n\t\t\t@close=\"closeModal\">\n\t\t\t<div class=\"emoji-modal__content\">\n\t\t\t\t<NcEmojiPicker container=\".emoji-modal\" @select=\"select\">\n\t\t\t\t\t<NcButton>Select emoji {{ emoji }}</NcButton>\n\t\t\t\t</NcEmojiPicker>\n\t\t\t</div>\n\t\t</NcModal>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\temoji: '😛',\n\t\t\tmodal: false\n\t\t}\n\t},\n\tmethods: {\n\t\tshowModal() {\n\t\t\tthis.modal = true\n\t\t},\n\t\tcloseModal() {\n\t\t\tthis.modal = false\n\t\t},\n\t\tselect(emoji) {\n\t\t\tthis.emoji = emoji\n\t\t},\n\t},\n}\n</script>\n<style scoped>\n.emoji-modal__content {\n\tdisplay: flex;\n\tjustify-content: center;\n\tmargin: 20px 0px 100px;\n}\n</style>\n```\n</docs>\n"],"names":["instance","_useModel","_createBlock","_Teleport","_createVNode","_Transition","_withDirectives","_createElementVNode","_mergeProps","$attrs","_unref","_createElementBlock","_normalizeClass","_renderSlot"],"mappings":"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"}

package/dist/chunks/{NcNoteCard-mI7qVZ9j.mjs → NcNoteCard.mjs}

@@ -1,9 +1,9 @@
-import '../assets/NcNoteCard-DfescGKl.css';
+import '../assets/NcNoteCard.css';
 import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, unref, renderSlot, createVNode, createElementVNode, toDisplayString, createCommentVNode } from "vue";
-import { k as mdiAlert, l as mdiInformation, n as mdiCheckboxMarkedCircle, o as mdiAlertDecagram } from "./mdi-CpchYUUV.mjs";
-import { a as isLegacy } from "./legacy-BoqDmOCa.mjs";
-import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-g8ubWhoz.mjs";
-import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+import { k as mdiAlert, l as mdiInformation, n as mdiCheckboxMarkedCircle, o as mdiAlertDecagram } from "./mdi.mjs";
+import { a as isLegacy } from "./legacy.mjs";
+import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper.mjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper.mjs";
 const _hoisted_1 = ["role"];
 const _hoisted_2 = {
   key: 0,
@@ -63,4 +63,4 @@ const NcNoteCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v
 export {
   NcNoteCard as N
 };
-//# sourceMappingURL=NcNoteCard-mI7qVZ9j.mjs.map
+//# sourceMappingURL=NcNoteCard.mjs.map