npm - @nextcloud/vue - Versions diffs - 9.1.0 → 9.2.0 - Mend

@nextcloud/vue 9.1.0 → 9.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (289) hide show

package/dist/chunks/NcFormBoxSwitch-gHZMcoCQ.mjs ADDED Viewed

@@ -0,0 +1,97 @@
+import '../assets/NcFormBoxSwitch-BmyNQCbA.css';
+import { defineComponent, mergeModels, useModel, watch, createBlock, openBlock, unref, createSlots, withCtx, withDirectives, createVNode, createElementVNode, normalizeClass, vModelCheckbox, renderSlot, createTextVNode, toDisplayString } from "vue";
+import { j as mdiToggleSwitch, k as mdiToggleSwitchOff } from "./mdi-8kZvl9vo.mjs";
+import { N as NcFormBoxItem } from "./NcFormBoxItem-C3We3v_4.mjs";
+import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-5AA93z-F.mjs";
+import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+const _hoisted_1 = ["id", "aria-describedby", "disabled"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "NcFormBoxSwitch",
+  props: /* @__PURE__ */ mergeModels({
+    label: { default: () => void 0 },
+    description: { default: () => void 0 },
+    disabled: { type: Boolean, default: false }
+  }, {
+    "modelValue": { type: Boolean, ...{ required: true } },
+    "modelModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["enable", "disable"], ["update:modelValue"]),
+  setup(__props, { emit: __emit }) {
+    const modelValue = useModel(__props, "modelValue");
+    const emit = __emit;
+    const inputId = createElementId();
+    watch(modelValue, () => {
+      if (modelValue.value) {
+        emit("enable");
+      } else {
+        emit("disable");
+      }
+    }, {
+      // defineModel emits update:modelValue synchronously
+      // Watching it synchronously to emit the enable/disable events together with the update:modelValue event
+      flush: "sync"
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(NcFormBoxItem, {
+        tag: "label",
+        for: unref(inputId)
+      }, createSlots({
+        icon: withCtx(({ descriptionId }) => [
+          withDirectives(createElementVNode("input", {
+            id: unref(inputId),
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+            class: normalizeClass(_ctx.$style.formBoxSwitch__input),
+            type: "checkbox",
+            role: "switch",
+            "aria-describedby": descriptionId,
+            disabled: _ctx.disabled
+          }, null, 10, _hoisted_1), [
+            [vModelCheckbox, modelValue.value]
+          ]),
+          createVNode(NcIconSvgWrapper, {
+            path: modelValue.value ? unref(mdiToggleSwitch) : unref(mdiToggleSwitchOff),
+            class: normalizeClass(_ctx.$style.formBoxSwitch__icon),
+            size: 34,
+            inline: ""
+          }, null, 8, ["path", "class"])
+        ]),
+        _: 2
+      }, [
+        _ctx.$slots.default || _ctx.label ? {
+          name: "default",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "default", {}, () => [
+              createTextVNode(toDisplayString(_ctx.label), 1)
+            ])
+          ]),
+          key: "0"
+        } : void 0,
+        _ctx.$slots.description || _ctx.description ? {
+          name: "description",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "description", {}, () => [
+              createTextVNode(toDisplayString(_ctx.description), 1)
+            ])
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1032, ["for"]);
+    };
+  }
+});
+const formBoxSwitch__input = "_formBoxSwitch__input_hjv1a_20";
+const formBoxSwitch__icon = "_formBoxSwitch__icon_hjv1a_34";
+const style0 = {
+  "material-design-icon": "_material-design-icon_hjv1a_12",
+  formBoxSwitch__input,
+  formBoxSwitch__icon
+};
+const cssModules = {
+  "$style": style0
+};
+const NcFormBoxSwitch = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  NcFormBoxSwitch as N
+};
+//# sourceMappingURL=NcFormBoxSwitch-gHZMcoCQ.mjs.map

package/dist/chunks/NcFormBoxSwitch-gHZMcoCQ.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcFormBoxSwitch-gHZMcoCQ.mjs","sources":["../../src/components/NcFormBoxSwitch/NcFormBoxSwitch.vue"],"sourcesContent":["\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport { mdiToggleSwitch, mdiToggleSwitchOff } from '@mdi/js'\nimport { watch } from 'vue'\nimport NcFormBoxItem from '../NcFormBox/NcFormBoxItem.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { createElementId } from '../../utils/createElementId.ts'\n\n/** Switch toggle model value */\nconst modelValue = defineModel<boolean>({ required: true })\n\nconst {\n\tlabel = undefined,\n\tdescription = undefined,\n\tdisabled = false,\n} = defineProps<{\n\t/** Main label */\n\tlabel?: string\n\t/** Optional description below the label, also used for the aria-describedby */\n\tdescription?: string\n\t/** Disabled state */\n\tdisabled?: boolean\n}>()\n\nconst emit = defineEmits<{\n\t/** Switch is toggled ON */\n\tenable: []\n\t/** Switch is toggled OFF */\n\tdisable: []\n}>()\n\ndefineSlots<{\n\t/** Custom label content */\n\tdefault?: Slot\n\t/** Custom description content */\n\tdescription?: Slot\n}>()\n\nconst inputId = createElementId()\n\nwatch(modelValue, () => {\n\tif (modelValue.value) {\n\t\temit('enable')\n\t} else {\n\t\temit('disable')\n\t}\n}, {\n\t// defineModel emits update:modelValue synchronously\n\t// Watching it synchronously to emit the enable/disable events together with the update:modelValue event\n\tflush: 'sync',\n})\n</script>\n\n<template>\n\t<NcFormBoxItem\n\t\ttag=\"label\"\n\t\t:for=\"inputId\">\n\t\t<template v-if=\"$slots.default || label\" #default>\n\t\t\t<slot>\n\t\t\t\t{{ label }}\n\t\t\t</slot>\n\t\t</template>\n\t\t<template v-if=\"$slots.description || description\" #description>\n\t\t\t<slot name=\"description\">\n\t\t\t\t{{ description }}\n\t\t\t</slot>\n\t\t</template>\n\t\t<template #icon=\"{ descriptionId }\">\n\t\t\t<input\n\t\t\t\t:id=\"inputId\"\n\t\t\t\tv-model=\"modelValue\"\n\t\t\t\t:class=\"$style.formBoxSwitch__input\"\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\trole=\"switch\"\n\t\t\t\t:aria-describedby=\"descriptionId\"\n\t\t\t\t:disabled>\n\t\t\t<NcIconSvgWrapper\n\t\t\t\t:path=\"modelValue ? mdiToggleSwitch : mdiToggleSwitchOff\"\n\t\t\t\t:class=\"$style.formBoxSwitch__icon\"\n\t\t\t\t:size=\"34 /* --default-clickable-area */\"\n\t\t\t\tinline />\n\t\t</template>\n\t</NcFormBoxItem>\n</template>\n\n<style lang=\"scss\" module>\ninput.formBoxSwitch__input {\n\tmargin: 0;\n\twidth: var(--default-clickable-area);\n\t/* Keep it visually hidden but on the position of visual switch icon */\n\tposition: absolute;\n\tinset-block: 0;\n\tinset-inline-end: var(--form-element-label-offset);\n\tz-index: -1;\n\topacity: 0 !important;\n\t/* Override server styles */\n\theight: auto;\n\tcursor: inherit;\n}\n\n.formBoxSwitch__icon {\n\tcolor: var(--color-text-maxcontrast);\n}\n\ninput:checked + .formBoxSwitch__icon {\n\tcolor: var(--color-primary-element);\n}\n</style>\n\n<docs>\n### General\n\nA toggle switch to be used within `<NcFormBox>`.\n\nLike other form box items, it has a label and an optional description.\n\nIn addition to the standard `v-model` binding, it emits `enable` and `disable` events when toggled **on** or **off**.\n\n```vue\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tswitchValue: false,\n\t\t}\n\t}\n}\n</script>\n\n<template>\n\t<NcFormBox>\n\t\t<NcFormBoxSwitch v-model=\"switchValue\" label=\"Turn camera and microphone off by default\" />\n\t\t<NcFormBoxSwitch\n\t\t\tv-model=\"switchValue\"\n\t\t\tlabel=\"Blur camera background by default\"\n\t\t\tdisabled />\n\t\t<NcFormBoxSwitch\n\t\t\tv-model=\"switchValue\"\n\t\t\tlabel=\"Skip device preview before joining a call\"\n\t\t\tdescription=\"Will always show if recording consent is required\"\n\t\t\t@update:modelValue=\"console.log('Switch toggled', $event, switchValue)\"\n\t\t\t@enable=\"console.log('Switch enabled', switchValue)\"\n\t\t\t@disable=\"console.log('Switch disabled', switchValue)\"\n\t\t/>\n\t\t<NcFormBoxSwitch v-model=\"switchValue\" />\n\t</NcFormBox>\n</template>\n```\n</docs>\n"],"names":["_useModel","_createBlock","_unref","_withCtx","_createElementVNode","_normalizeClass","$style","disabled","_createVNode","$slots","label","_renderSlot","description"],"mappings":";;;;;;;;;;;;;;;;;;;AAeA,UAAM,aAAaA,SAAoB,SAAA,YAAmB;AAe1D,UAAM,OAAO;AAcb,UAAM,UAAU,gBAAA;AAEhB,UAAM,YAAY,MAAM;AACvB,UAAI,WAAW,OAAO;AACrB,aAAK,QAAQ;AAAA,MACd,OAAO;AACN,aAAK,SAAS;AAAA,MACf;AAAA,IACD,GAAG;AAAA;AAAA;AAAA,MAGF,OAAO;AAAA,IAAA,CACP;;0BAIAC,YA4BgB,eAAA;AAAA,QA3Bf,KAAI;AAAA,QACH,KAAKC,MAAA,OAAA;AAAA,MAAA;QAWK,MAAIC,QACd,CAOW,EARO,oBAAa;AAAA,yBAC/BC,mBAOW,SAAA;AAAA,YANT,IAAIF,MAAA,OAAA;AAAA,yEACI,WAAU,QAAA;AAAA,YAClB,OAAKG,eAAEC,KAAAA,OAAO,oBAAoB;AAAA,YACnC,MAAK;AAAA,YACL,MAAK;AAAA,YACJ,oBAAkB;AAAA,YAClB,UAAAC,KAAAA;AAAAA,UAAAA;6BALQ,WAAA,KAAU;AAAA,UAAA;UAMpBC,YAIU,kBAAA;AAAA,YAHR,MAAM,WAAA,QAAaN,MAAA,eAAA,IAAkBA,MAAA,kBAAA;AAAA,YACrC,OAAKG,eAAEC,KAAAA,OAAO,mBAAmB;AAAA,YACjC,MAAM;AAAA,YACP,QAAA;AAAA,UAAA;;;;QAvBcG,KAAAA,OAAO,WAAWC,KAAAA;gBAAQ;AAAA,sBACzC,MAEO;AAAA,YAFPC,WAEO,4BAFP,MAEO;AAAA,8CADHD,KAAAA,KAAK,GAAA,CAAA;AAAA,YAAA;;;;QAGMD,KAAAA,OAAO,eAAeG,KAAAA;gBAAc;AAAA,sBACnD,MAEO;AAAA,YAFPD,WAEO,gCAFP,MAEO;AAAA,8CADHC,KAAAA,WAAW,GAAA,CAAA;AAAA,YAAA;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcFormGroup-CnSfPFey.mjs ADDED Viewed

@@ -0,0 +1,74 @@
+import '../assets/NcFormGroup-BrD0Scm7.css';
+import { defineComponent, useSlots, createElementBlock, openBlock, normalizeClass, createElementVNode, createCommentVNode, renderSlot, createTextVNode, toDisplayString } from "vue";
+import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+const _hoisted_1 = ["aria-describedby"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "NcFormGroup",
+  props: {
+    label: { default: () => void 0 },
+    description: { default: () => void 0 },
+    hideLabel: { type: Boolean, default: false },
+    hideDescription: { type: Boolean, default: false },
+    noGap: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const slots = useSlots();
+    const id = `nc-form-group-${createElementId()}`;
+    const descriptionId = `${id}-description`;
+    const hasDescription = () => !!__props.description || !!slots.description;
+    const getDescriptionId = () => hasDescription() ? descriptionId : void 0;
+    const hasContentOnly = () => __props.hideLabel && (!hasDescription() || __props.hideDescription);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("fieldset", {
+        class: normalizeClass([_ctx.$style.formGroup, { [_ctx.$style.formGroup_noGap]: _ctx.noGap }]),
+        "aria-describedby": getDescriptionId()
+      }, [
+        createElementVNode("legend", {
+          class: normalizeClass([_ctx.$style.formGroup__label, { "hidden-visually": _ctx.hideLabel }])
+        }, [
+          renderSlot(_ctx.$slots, "label", {}, () => [
+            createTextVNode(toDisplayString(_ctx.label || "⚠️ Missing label"), 1)
+          ])
+        ], 2),
+        hasDescription() ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          id: descriptionId,
+          class: normalizeClass([_ctx.$style.formGroup__description, { "hidden-visually": _ctx.hideDescription }])
+        }, [
+          renderSlot(_ctx.$slots, "description", {}, () => [
+            createTextVNode(toDisplayString(_ctx.description), 1)
+          ])
+        ], 2)) : createCommentVNode("", true),
+        createElementVNode("div", {
+          class: normalizeClass([_ctx.$style.formGroup__content, { [_ctx.$style.formGroup__content_only]: hasContentOnly() }])
+        }, [
+          renderSlot(_ctx.$slots, "default")
+        ], 2)
+      ], 10, _hoisted_1);
+    };
+  }
+});
+const formGroup = "_formGroup_9p8a1_20";
+const formGroup_noGap = "_formGroup_noGap_9p8a1_24";
+const formGroup__label = "_formGroup__label_9p8a1_28";
+const formGroup__description = "_formGroup__description_9p8a1_34";
+const formGroup__content = "_formGroup__content_9p8a1_39";
+const formGroup__content_only = "_formGroup__content_only_9p8a1_45";
+const style0 = {
+  "material-design-icon": "_material-design-icon_9p8a1_12",
+  formGroup,
+  formGroup_noGap,
+  formGroup__label,
+  formGroup__description,
+  formGroup__content,
+  formGroup__content_only
+};
+const cssModules = {
+  "$style": style0
+};
+const NcFormGroup = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  NcFormGroup as N
+};
+//# sourceMappingURL=NcFormGroup-CnSfPFey.mjs.map

package/dist/chunks/NcFormGroup-CnSfPFey.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcFormGroup-CnSfPFey.mjs","sources":["../../src/components/NcFormGroup/NcFormGroup.vue"],"sourcesContent":["\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport { createElementId } from '../../utils/createElementId.ts'\n\nconst {\n\tlabel = undefined,\n\tdescription = undefined,\n\thideLabel = false,\n\thideDescription = false,\n\tnoGap = false,\n} = defineProps<{\n\t/**\n\t * Group label #label slot can be used for custom label content\n\t */\n\tlabel?: string\n\t/**\n\t * Optional fieldset description. #description slot can be used for custom description content\n\t */\n\tdescription?: string\n\t/**\n\t * Hide the label visually but keep it accessible for screen readers\n\t */\n\thideLabel?: boolean\n\t/**\n\t * Hide the description visually but keep it accessible for screen readers\n\t */\n\thideDescription?: boolean\n\t/**\n\t * Disable default fieldset content gap between content elements\n\t */\n\tnoGap?: boolean\n}>()\n\nconst slots = defineSlots<{\n\t/**\n\t * Content\n\t */\n\tdefault?: Slot\n\t/**\n\t * Custom label content\n\t */\n\tlabel?: Slot\n\t/**\n\t * Custom description content\n\t */\n\tdescription?: Slot\n}>()\n\nconst id = `nc-form-group-${createElementId()}`\nconst descriptionId = `${id}-description`\n\nconst hasDescription = () => !!description || !!slots.description\nconst getDescriptionId = () => hasDescription() ? descriptionId : undefined\nconst hasContentOnly = () => hideLabel && (!hasDescription() || hideDescription)\n</script>\n\n<template>\n\t<fieldset\n\t\t:class=\"[$style.formGroup, { [$style.formGroup_noGap]: noGap }]\"\n\t\t:aria-describedby=\"getDescriptionId()\">\n\t\t<legend :class=\"[$style.formGroup__label, { 'hidden-visually': hideLabel }]\">\n\t\t\t<slot name=\"label\">\n\t\t\t\t{{ label || '⚠️ Missing label' }}\n\t\t\t</slot>\n\t\t</legend>\n\t\t<div v-if=\"hasDescription()\" :id=\"descriptionId\" :class=\"[$style.formGroup__description, { 'hidden-visually': hideDescription }]\">\n\t\t\t<slot name=\"description\">\n\t\t\t\t{{ description }}\n\t\t\t</slot>\n\t\t</div>\n\t\t<div :class=\"[$style.formGroup__content, { [$style.formGroup__content_only]: hasContentOnly() }]\">\n\t\t\t<slot />\n\t\t</div>\n\t</fieldset>\n</template>\n\n<style lang=\"scss\" module>\n.formGroup {\n\t--form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));\n\t--form-group-content-gap: calc(2 * var(--default-grid-baseline));\n\n\t&.formGroup_noGap {\n\t\t--form-group-content-gap: 0;\n\t}\n}\n\n.formGroup__label {\n\tpadding-inline: var(--form-element-label-offset);\n\tfont-size: var(--font-size);\n\tfont-weight: bold;\n}\n\n.formGroup__description {\n\tpadding-inline: var(--form-element-label-offset);\n\tcolor: var(--color-text-maxcontrast);\n}\n\n.formGroup__content {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: var(--form-group-content-gap);\n\tmargin-block-start: calc(2.5 * var(--default-grid-baseline));\n\n\t&.formGroup__content_only {\n\t\tmargin-block-start: 0;\n\t}\n}\n</style>\n\n<docs>\n### General\n\nLabelled group of form elements.\n\n```vue\n<template>\n\t<NcFormGroup label=\"Personal information\">\n\t\t<NcTextField label=\"First name\" />\n\t\t<NcTextField label=\"Last name\" />\n\t</NcFormGroup>\n</template>\n```\n\n### With description\n\n```vue\n<template>\n\t<NcFormGroup label=\"Personal information\" description=\"Your contact details\">\n\t\t<NcTextField label=\"First name\" />\n\t\t<NcTextField label=\"Last name\" />\n\t</NcFormGroup>\n</template>\n```\n\n### Hidden label/description\n\nYou can visually hide the label and/or the description.\\\nNote: you still must provide the label. Do not visually hide the missing label warning!\n\n```vue\n<template>\n\t<NcFormGroup\n\t\tlabel=\"Personal information\"\n\t\tdescription=\"Your contact details\"\n\t\thide-label\n\t\thide-description>\n\t\t<NcTextField label=\"First name\" />\n\t\t<NcTextField label=\"Last name\" />\n\t</NcFormGroup>\n</template>\n```\n</docs>\n"],"names":["_useSlots","_createElementBlock","_normalizeClass","$style","noGap","_createElementVNode","hideLabel","_renderSlot","label","hideDescription","description"],"mappings":";;;;;;;;;;;;;;AAuCA,UAAM,QAAQA,SAAA;AAed,UAAM,KAAK,iBAAiB,gBAAA,CAAiB;AAC7C,UAAM,gBAAgB,GAAG,EAAE;AAE3B,UAAM,iBAAiB,MAAM,CAAC,CAAC,QAAA,eAAe,CAAC,CAAC,MAAM;AACtD,UAAM,mBAAmB,MAAM,eAAA,IAAmB,gBAAgB;AAClE,UAAM,iBAAiB,MAAM,QAAA,cAAc,CAAC,eAAA,KAAoB,QAAA;;0BAI/DC,mBAgBW,YAAA;AAAA,QAfT,OAAKC,eAAA,CAAGC,YAAO,cAAcA,KAAAA,OAAO,eAAe,GAAGC,KAAAA,MAAAA,CAAK,CAAA;AAAA,QAC3D,oBAAkB,iBAAA;AAAA,MAAgB;QACnCC,mBAIS,UAAA;AAAA,UAJA,OAAKH,eAAA,CAAGC,KAAAA,OAAO,uCAAuCG,KAAAA,WAAS,CAAA;AAAA,QAAA;UACvEC,WAEO,0BAFP,MAEO;AAAA,4CADHC,KAAAA,SAAK,kBAAA,GAAA,CAAA;AAAA,UAAA;;QAGC,iCAAXP,mBAIM,OAAA;AAAA;UAJwB,IAAI;AAAA,UAAgB,OAAKC,eAAA,CAAGC,KAAAA,OAAO,6CAA6CM,KAAAA,iBAAe,CAAA;AAAA,QAAA;UAC5HF,WAEO,gCAFP,MAEO;AAAA,4CADHG,KAAAA,WAAW,GAAA,CAAA;AAAA,UAAA;;QAGhBL,mBAEM,OAAA;AAAA,UAFA,OAAKH,eAAA,CAAGC,YAAO,uBAAuBA,KAAAA,OAAO,uBAAuB,GAAG,eAAA,EAAc,CAAA,CAAA;AAAA,QAAA;UAC1FI,WAAQ,KAAA,QAAA,SAAA;AAAA,QAAA;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcHotkey-V6s3DXUs.mjs → NcHotkey-CmqTn7WR.mjs} RENAMED Viewed

@@ -1,6 +1,6 @@
-import '../assets/NcHotkey-QklVKSyr.css';
+import '../assets/NcHotkey-4yi1Hobg.css';
 import { defineComponent, computed, createElementBlock, openBlock, normalizeClass, createElementVNode, renderSlot, Fragment, renderList, createBlock, createTextVNode, toDisplayString } from "vue";
-import { N as NcKbd } from "./NcKbd-CyqxbpJJ.mjs";
+import { N as NcKbd } from "./NcKbd-B87GdbDW.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 const NO_LABEL_WARNING = "⚠️ NcHotKey must have a label or slot content";
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -42,11 +42,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const hotkey = "_hotkey_19tul_20";
-const hotkey__label = "_hotkey__label_19tul_26";
-const hotkey__keys = "_hotkey__keys_19tul_27";
+const hotkey = "_hotkey_1s86g_20";
+const hotkey__label = "_hotkey__label_1s86g_27";
+const hotkey__keys = "_hotkey__keys_1s86g_28";
 const style0 = {
-  "material-design-icon": "_material-design-icon_19tul_12",
+  "material-design-icon": "_material-design-icon_1s86g_12",
   hotkey,
   hotkey__label,
   hotkey__keys
@@ -58,4 +58,4 @@ const NcHotkey = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssMod
 export {
   NcHotkey as N
 };
-//# sourceMappingURL=NcHotkey-V6s3DXUs.mjs.map
+//# sourceMappingURL=NcHotkey-CmqTn7WR.mjs.map

package/dist/chunks/NcHotkey-CmqTn7WR.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcHotkey-CmqTn7WR.mjs","sources":["../../src/components/NcHotkey/NcHotkey.vue"],"sourcesContent":["\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport { computed } from 'vue'\nimport NcKbd from '../NcKbd/NcKbd.vue'\n\nconst {\n\tlabel = undefined,\n\thotkey = undefined,\n} = defineProps<{\n\t/**\n\t * Label for the hotkey\n\t */\n\tlabel?: string\n\t/**\n\t * Hotkey combination string separated by space, for example, `Control Alt T` or `F2` (see `<NcKbd>` for supported key names)\n\t */\n\thotkey?: string\n}>()\n\ndefineSlots<{\n\t/**\n\t * Custom label content\n\t */\n\tdefault?: Slot\n\t/**\n\t * Custom hotkey content for an advanced hotkey layout with <NcKbd> components or other custom content\n\t */\n\thotkey?: Slot\n}>()\n\nconst symbols = computed(() => {\n\treturn hotkey?.split(/\\s+/).map((s) => s.trim())\n})\n\nconst NO_LABEL_WARNING = '⚠️ NcHotKey must have a label or slot content'\n</script>\n\n<template>\n\t<li :class=\"$style.hotkey\">\n\t\t<span role=\"term\" :class=\"$style.hotkey__keys\">\n\t\t\t<slot name=\"hotkey\">\n\t\t\t\t<NcKbd v-for=\"(symbol, index) in symbols\" :key=\"index\" :symbol />\n\t\t\t</slot>\n\t\t</span>\n\t\t<span role=\"definition\" :class=\"$style.hotkey__label\">\n\t\t\t<slot>\n\t\t\t\t{{ label || NO_LABEL_WARNING }}\n\t\t\t</slot>\n\t\t</span>\n\t</li>\n</template>\n\n<style lang=\"scss\" module>\n.hotkey {\n\t--form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));\n\tdisplay: flex;\n\tflex-direction: row-reverse;\n\talign-items: stretch;\n\tpadding-inline: var(--form-element-label-offset);\n\n\t&:first-child {\n\t\t.hotkey__label,\n\t\t.hotkey__keys {\n\t\t\tborder-block-start: none;\n\t\t}\n\t}\n\n}\n\n.hotkey__label,\n.hotkey__keys {\n\tdisplay: flex;\n\talign-items: center;\n\tpadding-block: calc(2 * var(--default-grid-baseline));\n\tborder-block-start: 1px solid var(--color-border);\n}\n\n.hotkey__label {\n\tflex: 1 1 200px;\n}\n\n.hotkey__keys {\n\tflex: 1 1 auto;\n\tflex-wrap: wrap;\n\tjustify-content: end;\n\trow-gap: calc(1 * var(--default-grid-baseline));\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","$style","_createElementVNode","_renderSlot","_openBlock","_Fragment","_renderList","_createBlock","label"],"mappings":";;;AAwCA,MAAM,mBAAmB;;;;;;;;AAJzB,UAAM,UAAU,SAAS,MAAM;AAC9B,aAAO,QAAA,QAAQ,MAAM,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM;AAAA,IAChD,CAAC;;0BAMAA,mBAWK,MAAA;AAAA,QAXA,OAAKC,eAAEC,KAAAA,OAAO,MAAM;AAAA,MAAA;QACxBC,mBAIO,QAAA;AAAA,UAJD,MAAK;AAAA,UAAQ,OAAKF,eAAEC,KAAAA,OAAO,YAAY;AAAA,QAAA;UAC5CE,WAEO,2BAFP,MAEO;AAAA,aADNC,UAAA,IAAA,GAAAL,mBAAiEM,UAAA,MAAAC,WAAhC,QAAA,OAAO,CAAzB,QAAQ,UAAK;kCAA5BC,YAAiE,OAAA;AAAA,gBAAtB,KAAK;AAAA,gBAAQ;AAAA,cAAA;;;;QAG1DL,mBAIO,QAAA;AAAA,UAJD,MAAK;AAAA,UAAc,OAAKF,eAAEC,KAAAA,OAAO,aAAa;AAAA,QAAA;UACnDE,WAEO,4BAFP,MAEO;AAAA,YADHK,gBAAAA,gBAAAA,KAAAA,SAAS,gBAAgB,GAAA,CAAA;AAAA,UAAA;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcHotkeyList-Ck87UwvW.mjs → NcHotkeyList-CuENLgpa.mjs} RENAMED Viewed

@@ -1,6 +1,6 @@
-import '../assets/NcHotkeyList-B42a0d8Z.css';
+import '../assets/NcHotkeyList-gAZN0WIu.css';
 import { defineComponent, createElementBlock, openBlock, normalizeClass, createElementVNode, toDisplayString, unref, renderSlot } from "vue";
-import { r as register, a as t } from "./_l10n-YZMLsK4O.mjs";
+import { r as register, a as t } from "./_l10n--WxGDYem.mjs";
 import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 register();
@@ -26,8 +26,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const hotkeyList = "_hotkeyList_1lbg8_2";
-const hotkeyList__heading = "_hotkeyList__heading_1lbg8_7";
+const hotkeyList = "_hotkeyList_pf97p_2";
+const hotkeyList__heading = "_hotkeyList__heading_pf97p_6";
 const style0 = {
   hotkeyList,
   hotkeyList__heading
@@ -39,4 +39,4 @@ const NcHotkeyList = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cs
 export {
   NcHotkeyList as N
 };
-//# sourceMappingURL=NcHotkeyList-Ck87UwvW.mjs.map
+//# sourceMappingURL=NcHotkeyList-CuENLgpa.mjs.map

package/dist/chunks/NcHotkeyList-CuENLgpa.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcHotkeyList-CuENLgpa.mjs","sources":["../../src/components/NcHotkeyList/NcHotkeyList.vue"],"sourcesContent":["\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport { t } from '../../l10n.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\n\nconst {\n\tlabel = undefined,\n} = defineProps<{\n\t/**\n\t * Heading list label to use when there are multiple lists of shortcuts\n\t */\n\tlabel?: string\n}>()\n\ndefineSlots<{\n\t/**\n\t * Shortcuts described via <NcHotkey> components\n\t */\n\tdefault?: Slot\n}>()\n\nconst labelId = `NcHotkeyList_${createElementId()}`\n</script>\n\n<template>\n\t<div :class=\"$style.hotkeyList\">\n\t\t<div :id=\"labelId\" :class=\"[$style.hotkeyList__heading, { 'hidden-visually': !label }]\">\n\t\t\t{{ label || t('Keyboard shortcuts') }}\n\t\t</div>\n\t\t<ul :aria-labelledby=\"labelId\">\n\t\t\t<slot />\n\t\t</ul>\n\t</div>\n</template>\n\n<style module>\n.hotkeyList {\n\t--form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));\n}\n\n.hotkeyList__heading {\n\tfont-weight: bold;\n\tmargin-inline: var(--form-element-label-offset);\n}\n</style>\n\n<docs>\n## General\n\nList of keyboard shortcuts for the `<NcAppSettingsShortcutsSection>`.\n\n```vue\n<template>\n\t<NcHotkeyList>\n\t\t<NcHotkey label=\"New File\" hotkey=\"Ctrl N\" />\n\t\t<NcHotkey label=\"Open File\" hotkey=\"Ctrl O\" />\n\t\t<NcHotkey label=\"Save File\" hotkey=\"Ctrl S\" />\n\t</NcHotkeyList>\n</template>\n```\n\n## Groups\n\nThe hotkey list can have an optional heading label. This is useful when there are multiple groups of shortcuts in an app with many shortcuts.\n\n```vue\n<template>\n\t<section>\n\t\t<NcHotkeyList label=\"Actions\">\n\t\t\t<NcHotkey label=\"File actions\" hotkey=\"A\" />\n\t\t\t<NcHotkey label=\"Rename\" hotkey=\"F2\" />\n\t\t\t<NcHotkey label=\"Delete\" hotkey=\"Delete\" />\n\t\t\t<NcHotkey label=\"Add or remove favorite\" hotkey=\"S\" />\n\t\t\t<NcHotkey label=\"Manage tags\" hotkey=\"T\" />\n\t\t</NcHotkeyList>\n\n\t\t<NcHotkeyList label=\"Selection\">\n\t\t\t<NcHotkey label=\"Select all files\" hotkey=\"Control A\" />\n\t\t\t<NcHotkey label=\"Deselect all\" hotkey=\"Escape\" />\n\t\t\t<NcHotkey label=\"Select or deselect\" hotkey=\"Control Space\" />\n\t\t\t<NcHotkey label=\"Select a range\" hotkey=\"Control Shift Space\" />\n\t\t</NcHotkeyList>\n\n\t\t<NcHotkeyList label=\"Navigation\">\n\t\t\t<NcHotkey label=\"Go to parent folder\" hotkey=\"Alt ArrowUp\" />\n\t\t\t<NcHotkey label=\"Go to file above\" hotkey=\"ArrowUp\" />\n\t\t\t<NcHotkey label=\"Go to file below\" hotkey=\"ArrowDown\" />\n\t\t\t<NcHotkey label=\"Go left in grid\" hotkey=\"ArrowLeft\" />\n\t\t\t<NcHotkey label=\"Go right in grid\" hotkey=\"ArrowRight\" />\n\t\t</NcHotkeyList>\n\n\t\t<NcHotkeyList label=\"View\">\n\t\t\t<NcHotkey label=\"Toggle grid view\" hotkey=\"V\" />\n\t\t\t<NcHotkey label=\"Open file sidebar\" hotkey=\"D\" />\n\t\t\t<NcHotkey label=\"Show those shortcuts\" hotkey=\"?\" />\n\t\t</NcHotkeyList>\n\t</section>\n</template>\n```\n</docs>\n"],"names":["_createElementBlock","_normalizeClass","$style","_createElementVNode","label","_unref","_renderSlot"],"mappings":";;;;;;;;;;;AA2BA,UAAM,UAAU,gBAAgB,gBAAA,CAAiB;;0BAIhDA,mBAOM,OAAA;AAAA,QAPA,OAAKC,eAAEC,KAAAA,OAAO,UAAU;AAAA,MAAA;QAC7BC,mBAEM,OAAA;AAAA,UAFA,IAAI;AAAA,UAAU,OAAKF,eAAA,CAAGC,KAAAA,OAAO,2CAA2CE,KAAAA,OAAK,CAAA;AAAA,QAAA,GAC/EA,gBAAAA,KAAAA,SAASC,MAAA,CAAA,EAAC,oBAAA,CAAA,GAAA,CAAA;AAAA,QAEdF,mBAEK,MAAA,EAFA,mBAAiB,WAAO;AAAA,UAC5BG,WAAQ,KAAA,QAAA,SAAA;AAAA,QAAA;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcInputConfirmCancel-Zkh97f-3.mjs → NcInputConfirmCancel-BWJotcI2.mjs} RENAMED Viewed

@@ -1,7 +1,7 @@
 import '../assets/NcInputConfirmCancel-BrdZEfr2.css';
 import { I as IconArrowRight } from "./ArrowRight-DRKHUZMH.mjs";
 import { I as IconClose } from "./Close-D6ngJ4t9.mjs";
-import { r as register, f as t14, a as t } from "./_l10n-YZMLsK4O.mjs";
+import { r as register, f as t14, a as t } from "./_l10n--WxGDYem.mjs";
 import { N as NcButton } from "./NcButton-DkC5k3Lb.mjs";
 import { resolveComponent, createElementBlock, openBlock, createElementVNode, withModifiers, withKeys, withDirectives, createVNode, vModelText, withCtx } from "vue";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
@@ -120,4 +120,4 @@ const NcInputConfirmCancel = /* @__PURE__ */ _export_sfc(_sfc_main, [["render",
 export {
   NcInputConfirmCancel as N
 };
-//# sourceMappingURL=NcInputConfirmCancel-Zkh97f-3.mjs.map
+//# sourceMappingURL=NcInputConfirmCancel-BWJotcI2.mjs.map

package/dist/chunks/{NcInputConfirmCancel-Zkh97f-3.mjs.map → NcInputConfirmCancel-BWJotcI2.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcInputConfirmCancel-~~Zkh97f-3~~.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\">\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 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\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</style>\n"],"names":["_openBlock","_createElementBlock","_createElementVNode","_createVNode"],"mappings":";;;;;;;AAuDA,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,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;AA/GM,MAAA,aAAA,EAAA,OAAM,+BAA8B;;;;;;AAAzC,SAAAA,UAAA,GAAAC,mBAgCM,OAhCN,YAgCM;AAAA,IA/BLC,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;;;;;;;"}
1	+ {"version":3,"file":"NcInputConfirmCancel-BWJotcI2.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\">\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 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\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</style>\n"],"names":["_openBlock","_createElementBlock","_createElementVNode","_createVNode"],"mappings":";;;;;;;AAuDA,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,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;AA/GM,MAAA,aAAA,EAAA,OAAM,+BAA8B;;;;;;AAAzC,SAAAA,UAAA,GAAAC,mBAgCM,OAhCN,YAgCM;AAAA,IA/BLC,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-By_D1kDJ.mjs → NcInputField-DwkKsbxv.mjs} RENAMED Viewed

@@ -1,6 +1,6 @@
 import '../assets/NcInputField-D5SEE7D0.css';
 import { defineComponent, mergeModels, useModel, useAttrs, useTemplateRef, computed, warn, createElementBlock, openBlock, normalizeClass, unref, createElementVNode, createCommentVNode, withDirectives, createBlock, mergeProps, toDisplayString, renderSlot, vShow, withCtx, createTextVNode } from "vue";
-import { d as mdiCheck, e as mdiAlertCircle } from "./mdi-Cjx8NyEs.mjs";
+import { d as mdiCheck, e as mdiAlertCircle } from "./mdi-8kZvl9vo.mjs";
 import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
 import { i as isLegacy } from "./legacy-DcjXBL_t.mjs";
 import { N as NcButton } from "./NcButton-DkC5k3Lb.mjs";
@@ -169,4 +169,4 @@ const NcInputField = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data
 export {
   NcInputField as N
 };
-//# sourceMappingURL=NcInputField-By_D1kDJ.mjs.map
+//# sourceMappingURL=NcInputField-DwkKsbxv.mjs.map

package/dist/chunks/{NcInputField-By_D1kDJ.mjs.map → NcInputField-DwkKsbxv.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcInputField-By_D1kDJ.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 { mdiAlertCircle, mdiCheck } from '@mdi/js'\nimport { computed, useAttrs, useTemplateRef, warn } from 'vue'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { isLegacy } from '../../utils/legacy.ts'\nimport NcButton from '../NcButton/index.ts'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.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\ttype?: 'text' \| 'password' \| 'email' \| 'tel' \| 'url' \| 'search' \| 'number'\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=\"mdiAlertCircle\" />\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 v-if=\"success\" class=\"input-field__helper-text-message__icon\" :path=\"mdiCheck\" />\n\t\t\t<NcIconSvgWrapper v-else-if=\"error\" class=\"input-field__helper-text-message__icon\" :path=\"mdiAlertCircle\" />\n\t\t\t{{ helperText }}\n\t\t</p>\n\t</div>\n</template>\n\n<style lang=\"scss\" scoped>\n\n.input-field {\n\t--input-border-color: var(--color-border-maxcontrast);\n\t--input-border-radius: var(--border-radius-element);\n\t// Used e.g. if border width differs between focused and unfocused we need to compensate to prevent jumping\n\t--input-border-width-offset: calc(var(--border-width-input-focused, 2px) - var(--border-width-input, 2px));\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, 2px);\n\t\tposition: relative;\n\n\t\t&:not(:has([disabled])):has(input:focus),\n\t\t&:not(:has([disabled])):has(input:active) {\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t&__input {\n\t\tbackground-color: var(--color-main-background);\n\t\tcolor: var(--color-main-text);\n\t\tborder: none;\n\t\tborder-radius: var(--input-border-radius);\n\t\tbox-shadow:\n\t\t\t0 -1px var(--input-border-color),\n\t\t\t0 0 0 1px color-mix(in srgb, var(--input-border-color), 65% transparent);\n\n\t\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\theight: 100% !important;\n\t\tmin-height: unset;\n\t\twidth: 100%;\n\t\tpadding-block: var(--input-border-width-offset);\n\t\tpadding-inline: calc(var(--input-padding-start) + var(--input-border-width-offset)) calc(var(--input-padding-end) + var(--input-border-width-offset));\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&:hover:not([disabled]) {\n\t\t\tbox-shadow: 0 0 0 1px var(--input-border-color);;\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\t// Reset padding offset when focused\n\t\t\t--input-border-width-offset: 0px;\n\t\t\tborder: var(--border-width-input-focused, 2px) solid var(--input-border-color);\n\t\t\tbox-shadow: 0 0 0 2px var(--color-main-background) !important;\n\t\t}\n\n\t\t&: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: 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\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\t&--legacy {\n\t\t.input-field__input {\n\t\t\tbox-shadow: 0 0 0 1px var(--input-border-color) inset;\n\t\t}\n\n\t\t.input-field__main-wrapper:hover:not(:has([disabled])) {\n\t\t\tpadding: 0;\n\n\t\t\t.input-field__input {\n\t\t\t\t--input-border-color: var(--color-main-text);\n\t\t\t\t// Reset padding offset when focused\n\t\t\t\t--input-border-width-offset: 0px;\n\t\t\t\tborder: var(--border-width-input-focused, 2px) solid var(--input-border-color);\n\t\t\t\tbox-shadow: 0 0 0 2px var(--color-main-background) !important;\n\t\t\t}\n\t\t}\n\t}\n}\n</style>\n"],"names":["_useModel","isValidLabel","ariaDescribedby","_createElementBlock","disabled","error","labelOutside","$slots","pill","success","_unref","$props","_createElementVNode","_mergeProps","id","inputClass","type","label","_withDirectives","_renderSlot","showTrailingButton","_createBlock","trailingButtonLabel","_openBlock","helperText","_createTextVNode"],"mappings":"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"}
1	+ {"version":3,"file":"NcInputField-DwkKsbxv.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 { mdiAlertCircle, mdiCheck } from '@mdi/js'\nimport { computed, useAttrs, useTemplateRef, warn } from 'vue'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { isLegacy } from '../../utils/legacy.ts'\nimport NcButton from '../NcButton/index.ts'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.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\ttype?: 'text' \| 'password' \| 'email' \| 'tel' \| 'url' \| 'search' \| 'number'\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=\"mdiAlertCircle\" />\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 v-if=\"success\" class=\"input-field__helper-text-message__icon\" :path=\"mdiCheck\" />\n\t\t\t<NcIconSvgWrapper v-else-if=\"error\" class=\"input-field__helper-text-message__icon\" :path=\"mdiAlertCircle\" />\n\t\t\t{{ helperText }}\n\t\t</p>\n\t</div>\n</template>\n\n<style lang=\"scss\" scoped>\n\n.input-field {\n\t--input-border-color: var(--color-border-maxcontrast);\n\t--input-border-radius: var(--border-radius-element);\n\t// Used e.g. if border width differs between focused and unfocused we need to compensate to prevent jumping\n\t--input-border-width-offset: calc(var(--border-width-input-focused, 2px) - var(--border-width-input, 2px));\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, 2px);\n\t\tposition: relative;\n\n\t\t&:not(:has([disabled])):has(input:focus),\n\t\t&:not(:has([disabled])):has(input:active) {\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t&__input {\n\t\tbackground-color: var(--color-main-background);\n\t\tcolor: var(--color-main-text);\n\t\tborder: none;\n\t\tborder-radius: var(--input-border-radius);\n\t\tbox-shadow:\n\t\t\t0 -1px var(--input-border-color),\n\t\t\t0 0 0 1px color-mix(in srgb, var(--input-border-color), 65% transparent);\n\n\t\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\theight: 100% !important;\n\t\tmin-height: unset;\n\t\twidth: 100%;\n\t\tpadding-block: var(--input-border-width-offset);\n\t\tpadding-inline: calc(var(--input-padding-start) + var(--input-border-width-offset)) calc(var(--input-padding-end) + var(--input-border-width-offset));\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&:hover:not([disabled]) {\n\t\t\tbox-shadow: 0 0 0 1px var(--input-border-color);;\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\t// Reset padding offset when focused\n\t\t\t--input-border-width-offset: 0px;\n\t\t\tborder: var(--border-width-input-focused, 2px) solid var(--input-border-color);\n\t\t\tbox-shadow: 0 0 0 2px var(--color-main-background) !important;\n\t\t}\n\n\t\t&: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: 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\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\t&--legacy {\n\t\t.input-field__input {\n\t\t\tbox-shadow: 0 0 0 1px var(--input-border-color) inset;\n\t\t}\n\n\t\t.input-field__main-wrapper:hover:not(:has([disabled])) {\n\t\t\tpadding: 0;\n\n\t\t\t.input-field__input {\n\t\t\t\t--input-border-color: var(--color-main-text);\n\t\t\t\t// Reset padding offset when focused\n\t\t\t\t--input-border-width-offset: 0px;\n\t\t\t\tborder: var(--border-width-input-focused, 2px) solid var(--input-border-color);\n\t\t\t\tbox-shadow: 0 0 0 2px var(--color-main-background) !important;\n\t\t\t}\n\t\t}\n\t}\n}\n</style>\n"],"names":["_useModel","isValidLabel","ariaDescribedby","_createElementBlock","disabled","error","labelOutside","$slots","pill","success","_unref","$props","_createElementVNode","_mergeProps","id","inputClass","type","label","_withDirectives","_renderSlot","showTrailingButton","_createBlock","trailingButtonLabel","_openBlock","helperText","_createTextVNode"],"mappings":"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"}

package/dist/chunks/{NcKbd-CyqxbpJJ.mjs → NcKbd-B87GdbDW.mjs} RENAMED Viewed

@@ -1,6 +1,6 @@
 import '../assets/NcKbd-BGW1_Jb7.css';
 import { defineComponent, computed, createElementBlock, openBlock, normalizeClass, renderSlot, createTextVNode, toDisplayString } from "vue";
-import { r as register, a as t } from "./_l10n-YZMLsK4O.mjs";
+import { r as register, a as t } from "./_l10n--WxGDYem.mjs";
 import { i as isMac } from "./platform-CC2ecGvV.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 register();
@@ -50,4 +50,4 @@ const NcKbd = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModule
 export {
   NcKbd as N
 };
-//# sourceMappingURL=NcKbd-CyqxbpJJ.mjs.map
+//# sourceMappingURL=NcKbd-B87GdbDW.mjs.map

package/dist/chunks/{NcKbd-CyqxbpJJ.mjs.map → NcKbd-B87GdbDW.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcKbd-~~CyqxbpJJ~~.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: 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;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"NcKbd-B87GdbDW.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: 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-z4qAtAqe.mjs → NcListItem-BLSWE2Hb.mjs} RENAMED Viewed

@@ -1,8 +1,8 @@
-import '../assets/NcListItem-BRTO5Id3.css';
-import { N as NcActions } from "./NcActions-C-E6BGfZ.mjs";
+import '../assets/NcListItem-D9Lk0t6j.css';
+import { N as NcActions } from "./NcActions-QtUC1sD3.mjs";
 import { N as NcCounterBubble } from "./NcCounterBubble-CxxHHh8i.mjs";
 import { _ as _sfc_main$1 } from "./NcVNodes.vue_vue_type_script_lang-BqUHinRZ.mjs";
-import { resolveComponent, createBlock, openBlock, resolveDynamicComponent, normalizeProps, guardReactiveProps, withCtx, createElementVNode, mergeProps, normalizeClass, createElementBlock, createCommentVNode, withDirectives, withKeys, renderSlot, createTextVNode, toDisplayString, vShow, createVNode, createSlots } from "vue";
+import { resolveComponent, createBlock, openBlock, resolveDynamicComponent, normalizeProps, guardReactiveProps, withCtx, createElementVNode, mergeProps, normalizeClass, createElementBlock, createCommentVNode, withKeys, renderSlot, createTextVNode, toDisplayString, withDirectives, vShow, createVNode, createSlots } from "vue";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 const _sfc_main = {
   name: "NcListItem",
@@ -261,7 +261,7 @@ const _hoisted_9 = {
   class: "list-item-content__extra-actions"
 };
 const _hoisted_10 = {
-  key: 1,
+  key: 2,
   class: "list-item__extra"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -334,7 +334,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           _ctx.$slots["extra-actions"] ? (openBlock(), createElementBlock("div", _hoisted_9, [
             renderSlot(_ctx.$slots, "extra-actions", {}, void 0, true)
           ])) : createCommentVNode("", true),
-          withDirectives(createElementVNode("div", {
+          $props.forceDisplayActions || $data.displayActionsOnHoverFocus ? (openBlock(), createElementBlock("div", {
+            key: 1,
             class: "list-item-content__actions",
             onFocusout: _cache[3] || (_cache[3] = (...args) => $options.handleBlur && $options.handleBlur(...args))
           }, [
@@ -358,9 +359,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 key: "0"
               } : void 0
             ]), 1032, ["primary", "force-menu", "aria-label", "onUpdate:open"])
-          ], 544), [
-            [vShow, $props.forceDisplayActions || $data.displayActionsOnHoverFocus]
-          ]),
+          ], 32)) : createCommentVNode("", true),
           _ctx.$slots.extra ? (openBlock(), createElementBlock("div", _hoisted_10, [
             renderSlot(_ctx.$slots, "extra", {}, void 0, true)
           ])) : createCommentVNode("", true)
@@ -370,8 +369,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 16);
 }
-const NcListItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-56c9c89e"]]);
+const NcListItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-2db1b2fa"]]);
 export {
   NcListItem as N
 };
-//# sourceMappingURL=NcListItem-z4qAtAqe.mjs.map
+//# sourceMappingURL=NcListItem-BLSWE2Hb.mjs.map