@nextcloud/vue 9.4.0 → 9.5.0

package/dist/assets/{NcListItem-CWa6A_FV.css → NcListItem-Cat18cSx.css}

@@ -9,65 +9,65 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-7a363257] {
+.material-design-icon[data-v-bc710154] {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
-.list-item__wrapper[data-v-7a363257] {
+.list-item__wrapper[data-v-bc710154] {
   display: flex;
   position: relative;
   width: 100%;
   padding: 2px 4px;
 }
-.list-item__wrapper[data-v-7a363257]:first-of-type {
+.list-item__wrapper[data-v-bc710154]:first-of-type {
   padding-block-start: 4px;
 }
-.list-item__wrapper[data-v-7a363257]:last-of-type {
+.list-item__wrapper[data-v-bc710154]:last-of-type {
   padding-block-end: 4px;
 }
-.list-item__wrapper--active .list-item[data-v-7a363257], .list-item__wrapper.active .list-item[data-v-7a363257] {
+.list-item__wrapper--active .list-item[data-v-bc710154], .list-item__wrapper.active .list-item[data-v-bc710154] {
   background-color: var(--color-primary-element);
   color: var(--color-primary-element-text) !important;
 }
-.list-item__wrapper--active .list-item[data-v-7a363257]:hover, .list-item__wrapper--active .list-item[data-v-7a363257]:focus-within, .list-item__wrapper--active .list-item[data-v-7a363257]:has(:focus-visible), .list-item__wrapper--active .list-item[data-v-7a363257]:has(:active), .list-item__wrapper.active .list-item[data-v-7a363257]:hover, .list-item__wrapper.active .list-item[data-v-7a363257]:focus-within, .list-item__wrapper.active .list-item[data-v-7a363257]:has(:focus-visible), .list-item__wrapper.active .list-item[data-v-7a363257]:has(:active) {
+.list-item__wrapper--active .list-item[data-v-bc710154]:hover, .list-item__wrapper--active .list-item[data-v-bc710154]:focus-within, .list-item__wrapper--active .list-item[data-v-bc710154]:has(:focus-visible), .list-item__wrapper--active .list-item[data-v-bc710154]:has(:active), .list-item__wrapper.active .list-item[data-v-bc710154]:hover, .list-item__wrapper.active .list-item[data-v-bc710154]:focus-within, .list-item__wrapper.active .list-item[data-v-bc710154]:has(:focus-visible), .list-item__wrapper.active .list-item[data-v-bc710154]:has(:active) {
   background-color: var(--color-primary-element-hover);
 }
-.list-item__wrapper--active .list-item-content__name[data-v-7a363257],
-.list-item__wrapper--active .list-item-content__subname[data-v-7a363257],
-.list-item__wrapper--active .list-item-content__details[data-v-7a363257],
-.list-item__wrapper--active .list-item-details__details[data-v-7a363257], .list-item__wrapper.active .list-item-content__name[data-v-7a363257],
-.list-item__wrapper.active .list-item-content__subname[data-v-7a363257],
-.list-item__wrapper.active .list-item-content__details[data-v-7a363257],
-.list-item__wrapper.active .list-item-details__details[data-v-7a363257] {
+.list-item__wrapper--active .list-item-content__name[data-v-bc710154],
+.list-item__wrapper--active .list-item-content__subname[data-v-bc710154],
+.list-item__wrapper--active .list-item-content__details[data-v-bc710154],
+.list-item__wrapper--active .list-item-details__details[data-v-bc710154], .list-item__wrapper.active .list-item-content__name[data-v-bc710154],
+.list-item__wrapper.active .list-item-content__subname[data-v-bc710154],
+.list-item__wrapper.active .list-item-content__details[data-v-bc710154],
+.list-item__wrapper.active .list-item-details__details[data-v-bc710154] {
   color: var(--color-primary-element-text) !important;
 }
-.list-item__wrapper .list-item-content__name[data-v-7a363257],
-.list-item__wrapper .list-item-content__subname[data-v-7a363257],
-.list-item__wrapper .list-item-content__details[data-v-7a363257],
-.list-item__wrapper .list-item-details__details[data-v-7a363257] {
+.list-item__wrapper .list-item-content__name[data-v-bc710154],
+.list-item__wrapper .list-item-content__subname[data-v-bc710154],
+.list-item__wrapper .list-item-content__details[data-v-bc710154],
+.list-item__wrapper .list-item-details__details[data-v-bc710154] {
   white-space: nowrap;
   margin-block: 0;
   margin-inline: 0 auto;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.list-item-content__name[data-v-7a363257] {
+.list-item-content__name[data-v-bc710154] {
   min-width: 100px;
   flex: 1 1 10%;
   font-weight: 500;
 }
-.list-item-content__subname[data-v-7a363257] {
+.list-item-content__subname[data-v-bc710154] {
   flex: 1 0;
   min-width: 0;
   color: var(--color-text-maxcontrast);
 }
-.list-item-content__subname--bold[data-v-7a363257] {
+.list-item-content__subname--bold[data-v-bc710154] {
   font-weight: 500;
 }
-.list-item[data-v-7a363257] {
+.list-item[data-v-bc710154] {
   --list-item-padding: var(--default-grid-baseline);
   --list-item-height: 2lh;
   --list-item-border-radius: var(--border-radius-element, 32px);
@@ -83,40 +83,40 @@
   transition: background-color var(--animation-quick) ease-in-out;
   list-style: none;
 }
-.list-item[data-v-7a363257]:hover, .list-item[data-v-7a363257]:focus-within, .list-item[data-v-7a363257]:has(:active), .list-item[data-v-7a363257]:has(:focus-visible) {
+.list-item[data-v-bc710154]:hover, .list-item[data-v-bc710154]:focus-within, .list-item[data-v-bc710154]:has(:active), .list-item[data-v-bc710154]:has(:focus-visible) {
   background-color: var(--color-background-hover);
 }
-.list-item[data-v-7a363257]:has(.list-item__anchor:focus-visible) {
+.list-item[data-v-bc710154]:has(.list-item__anchor:focus-visible) {
   outline: 2px solid var(--color-main-text);
   box-shadow: 0 0 0 4px var(--color-main-background);
 }
-.list-item--compact[data-v-7a363257] {
+.list-item--compact[data-v-bc710154] {
   --list-item-padding: calc(0.5 * var(--default-grid-baseline)) var(--default-grid-baseline);
 }
-.list-item--compact[data-v-7a363257]:not(:has(.list-item-content__subname)) {
+.list-item--compact[data-v-bc710154]:not(:has(.list-item-content__subname)) {
   --list-item-height: var(--default-clickable-area);
 }
-.list-item--one-line[data-v-7a363257] {
+.list-item--one-line[data-v-bc710154] {
   --list-item-height: var(--default-clickable-area);
   --list-item-border-radius: var(--border-radius-element, calc(var(--default-clickable-area) / 2));
   --list-item-padding: var(--default-grid-baseline);
 }
-.list-item--one-line .list-item-content__main[data-v-7a363257] {
+.list-item--one-line .list-item-content__main[data-v-bc710154] {
   display: flex;
   justify-content: start;
   gap: 12px;
   min-width: 0;
 }
-.list-item--one-line .list-item-content__details[data-v-7a363257] {
+.list-item--one-line .list-item-content__details[data-v-bc710154] {
   flex-direction: row;
   align-items: center;
   justify-content: end;
 }
-.list-item--one-line .list-item-content__name[data-v-7a363257] {
+.list-item--one-line .list-item-content__name[data-v-bc710154] {
   align-self: center;
   max-width: 300px;
 }
-.list-item__anchor[data-v-7a363257] {
+.list-item__anchor[data-v-bc710154] {
   color: inherit;
   display: flex;
   flex: 1 0 auto;
@@ -124,54 +124,54 @@
   height: var(--list-item-height);
   min-width: 0;
 }
-.list-item__anchor[data-v-7a363257]:focus-visible {
+.list-item__anchor[data-v-bc710154]:focus-visible {
   outline: none;
 }
-.list-item-content[data-v-7a363257] {
+.list-item-content[data-v-bc710154] {
   display: flex;
   flex: 1 0;
   justify-content: space-between;
   padding-inline-start: calc(2 * var(--default-grid-baseline));
   min-width: 0;
 }
-.list-item-content__main[data-v-7a363257] {
+.list-item-content__main[data-v-bc710154] {
   flex: 1 0;
   width: 0;
   margin: auto 0;
 }
-.list-item-content__main--oneline[data-v-7a363257] {
+.list-item-content__main--oneline[data-v-bc710154] {
   display: flex;
 }
-.list-item-content__details[data-v-7a363257] {
+.list-item-content__details[data-v-bc710154] {
   display: flex;
   flex-direction: column;
   justify-content: end;
   align-items: end;
 }
-.list-item-content__actions[data-v-7a363257], .list-item-content__extra-actions[data-v-7a363257] {
+.list-item-content__actions[data-v-bc710154], .list-item-content__extra-actions[data-v-bc710154] {
   flex: 0 0 auto;
   align-self: center;
   justify-content: center;
   margin-inline-start: var(--default-grid-baseline);
 }
-.list-item-content__extra-actions[data-v-7a363257] {
+.list-item-content__extra-actions[data-v-bc710154] {
   display: flex;
   align-items: center;
   gap: var(--default-grid-baseline);
 }
-.list-item-details__details[data-v-7a363257] {
+.list-item-details__details[data-v-bc710154] {
   color: var(--color-text-maxcontrast);
   margin: 0 9px !important;
   font-weight: normal;
 }
-.list-item-details__extra[data-v-7a363257] {
+.list-item-details__extra[data-v-bc710154] {
   margin: 2px 4px 0 4px;
   display: flex;
   align-items: center;
 }
-.list-item-details__indicator[data-v-7a363257] {
+.list-item-details__indicator[data-v-bc710154] {
   margin: 0 5px;
 }
-.list-item__extra[data-v-7a363257] {
+.list-item__extra[data-v-bc710154] {
   margin-top: var(--default-grid-baseline);
 }

package/dist/assets/{NcProgressBar-BAPOXMAL.css → NcProgressBar-D1DYRrCN.css}

@@ -9,20 +9,20 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-38ba4aa1] {
+.material-design-icon[data-v-353fa414] {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
-.progress-bar[data-v-38ba4aa1] {
+.progress-bar[data-v-353fa414] {
   display: block;
   height: var(--progress-bar-height);
-  --progress-bar-color: var(--0a7905e8);
-  --progress-bar-height: var(--d7eb5974);
+  --progress-bar-color: var(--3a86fec2);
+  --progress-bar-height: var(--57442460);
 }
-.progress-bar--linear[data-v-38ba4aa1] {
+.progress-bar--linear[data-v-353fa414] {
   width: 100%;
   overflow: hidden;
   border: 0;
@@ -30,28 +30,39 @@
   background: var(--color-background-dark);
   border-radius: calc(var(--progress-bar-height) / 2);
 }
-.progress-bar--linear[data-v-38ba4aa1]::-webkit-progress-bar {
+.progress-bar--linear[data-v-353fa414]::-webkit-progress-bar {
   height: var(--progress-bar-height);
   background-color: transparent;
 }
-.progress-bar--linear[data-v-38ba4aa1]::-webkit-progress-value {
+.progress-bar--linear[data-v-353fa414]::-webkit-progress-value {
   background: var(--progress-bar-color, var(--gradient-primary-background));
   border-radius: calc(var(--progress-bar-height) / 2);
 }
-.progress-bar--linear[data-v-38ba4aa1]::-moz-progress-bar {
+.progress-bar--linear[data-v-353fa414]::-moz-progress-bar {
   background: var(--progress-bar-color, var(--gradient-primary-background));
   border-radius: calc(var(--progress-bar-height) / 2);
 }
-.progress-bar--circular[data-v-38ba4aa1] {
+.progress-bar--circular[data-v-353fa414] {
   width: var(--progress-bar-height);
   color: var(--progress-bar-color);
 }
-.progress-bar--error[data-v-38ba4aa1] {
+.progress-bar--error[data-v-353fa414] {
   color: var(--color-text-error, var(--color-error)) !important;
 }
-.progress-bar--error[data-v-38ba4aa1]::-moz-progress-bar {
+.progress-bar--error[data-v-353fa414]::-moz-progress-bar {
   background: var(--color-text-error, var(--color-error)) !important;
 }
-.progress-bar--error[data-v-38ba4aa1]::-webkit-progress-value {
+.progress-bar--error[data-v-353fa414]::-webkit-progress-value {
   background: var(--color-text-error, var(--color-error)) !important;
+}
+.progress-bar-container[data-v-353fa414] {
+  display: flex;
+  align-items: center;
+  gap: calc(2 * var(--default-grid-baseline));
+}
+.progress-bar__value[data-v-353fa414] {
+  font-size: var(--font-size-small, 13px);
+  font-variant-numeric: tabular-nums;
+  min-width: 4ch;
+  text-align: end;
 }

package/dist/assets/{NcRadioGroupButton-kVqVEDKS.css → NcRadioGroupButton-xGU7fVa3.css}

@@ -48,7 +48,7 @@
 ._radioGroupButton_FB-C-:has(._radioGroupButton__icon_lWzM4) {
   padding-inline-start: var(--radio-group-button--padding);
 }
-._radioGroupButton_FB-C-:hover {
+._radioGroupButton_FB-C-:hover:not(._radioGroupButton_disabled_08iwH) {
   background-color: var(--radio-group-button--background-color-hover);
 }
 ._radioGroupButton_FB-C-:focus-within {
@@ -65,6 +65,14 @@
 ._radioGroupButton__label_gjGCq {
   font-weight: bold;
 }
+._radioGroupButton_disabled_08iwH {
+  filter: saturate(0.7);
+  opacity: 0.5;
+  cursor: default;
+}
+._radioGroupButton_disabled_08iwH * {
+  cursor: default;
+}
 ._radioGroupButton__icon_lWzM4 {
   --radio-group-button--icon-size: calc(var(--default-clickable-area) - 4px);
   display: flex;

package/dist/assets/NcSelectUsers-YF5729PJ.css

@@ -0,0 +1,4 @@
+
+.nc-select-users[data-v-e8e18fd3] .vs__selected {
+	padding-inline: 0 5px !important;
+}

package/dist/chunks/{NcActionButtonGroup-C4oY8x5z.mjs → NcActionButtonGroup-C7ej9wLo.mjs}

@@ -1,6 +1,6 @@
 import '../assets/NcActionButtonGroup-Bt8kRk79.css';
 import { defineComponent, createElementBlock, openBlock, createCommentVNode, createElementVNode, toDisplayString, renderSlot } from "vue";
-import { r as register, a as t } from "./_l10n-BSFzy-71.mjs";
+import { r as register, a as t } from "./_l10n-Dq_eYxz_.mjs";
 import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
 import { a as NC_ACTIONS_IS_SEMANTIC_MENU } from "./useNcActions-BzPO2c4h.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
@@ -57,4 +57,4 @@ const NcActionButtonGroup = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _
 export {
   NcActionButtonGroup as N
 };
-//# sourceMappingURL=NcActionButtonGroup-C4oY8x5z.mjs.map
+//# sourceMappingURL=NcActionButtonGroup-C7ej9wLo.mjs.map

package/dist/chunks/{NcActionButtonGroup-C4oY8x5z.mjs.map → NcActionButtonGroup-C7ej9wLo.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcActionButtonGroup-C4oY8x5z.mjs","sources":["../../src/components/NcActionButtonGroup/NcActionButtonGroup.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots,\nto group buttons as one visual action, like for text alignment.\nThis should be used sparingly for accessibility.\n\n```vue\n<template>\n\t<div style=\"display: flex; align-items: center;\">\n\t\t<NcActions>\n\t\t\t<NcActionButtonGroup name=\"Text alignment\">\n\t\t\t\t<NcActionButton aria-label=\"Align left\"\n\t\t\t\t\tv-model=\"alignment\"\n\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\tvalue=\"l\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconAlignHorizontalLeft :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton aria-label=\"Align center\"\n\t\t\t\t\tv-model=\"alignment\"\n\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\tvalue=\"c\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconAlignHorizontalCenter :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton aria-label=\"Align right\"\n\t\t\t\t\tv-model=\"alignment\"\n\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\tvalue=\"r\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconAlignHorizontalRight :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcActionButton>\n\t\t\t</NcActionButtonGroup>\n\t\t\t<NcActionButton :close-after-click=\"true\"\n\t\t\t\t@click=\"showMessage('Some other action')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconPlus :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSome other action\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</div>\n</template>\n<script>\nimport IconAlignHorizontalLeft from 'vue-material-design-icons/AlignHorizontalLeft.vue'\nimport IconAlignHorizontalRight from 'vue-material-design-icons/AlignHorizontalRight.vue'\nimport IconAlignHorizontalCenter from 'vue-material-design-icons/AlignHorizontalCenter.vue'\nimport IconPlus from 'vue-material-design-icons/Plus.vue'\n\nexport default {\n\tcomponents: {\n\t\tIconAlignHorizontalLeft,\n\t\tIconAlignHorizontalRight,\n\t\tIconAlignHorizontalCenter,\n\t\tIconPlus,\n\t},\n\tdata() {\n\t\treturn { alignment: 'l' }\n\t},\n\tmethods: {\n\t\tshowMessage(msg) {\n\t\t\talert(msg)\n\t\t},\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<li class=\"nc-button-group-base\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t<div v-if=\"name\" :id=\"labelId\">\n\t\t\t{{ name }}\n\t\t</div>\n\t\t<ul class=\"nc-button-group-content\" role=\"group\" :aria-labelledby=\"name ? labelId : undefined\">\n\t\t\t<slot />\n\t\t</ul>\n\t</li>\n</template>\n\n<script>\nimport { defineComponent } from 'vue'\nimport { t } from '../../l10n.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { NC_ACTIONS_IS_SEMANTIC_MENU } from '../NcActions/useNcActions.ts'\n\n/**\n * A wrapper for allowing inlining NcAction components within the action menu\n */\nexport default defineComponent({\n\tname: 'NcActionButtonGroup',\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: NC_ACTIONS_IS_SEMANTIC_MENU,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Optional text shown below the button group\n\t\t */\n\t\tname: {\n\t\t\trequired: false,\n\t\t\tdefault: undefined,\n\t\t\ttype: String,\n\t\t},\n\t},\n\n\tsetup() {\n\t\treturn {\n\t\t\tlabelId: createElementId(),\n\t\t}\n\t},\n\n\tmethods: {\n\t\tt,\n\t},\n})\n</script>\n\n<style lang=\"scss\" scoped>\n.nc-button-group-base {\n\t>div {\n\t\ttext-align: center;\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\n\tul.nc-button-group-content {\n\t\tdisplay: flex;\n\t\tgap: 4px; // required for the focus-visible outline\n\t\tjustify-content: space-between;\n\t\t:slotted(li) {\n\t\t\tflex: 1 1;\n\t\t}\n\n\t\t:deep(.action-button) {\n\t\t\t// Fix action buttons beeing shifted to the left (right padding)\n\t\t\tpadding: 0 !important;\n\t\t\twidth: 100%;\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\n\t\t\t&.action-button--active {\n\t\t\t\tbackground-color: var(--color-primary-element);\n\t\t\t\tborder-radius: var(--border-radius-element);\n\t\t\t\tcolor: var(--color-primary-element-text);\n\n\t\t\t\t&:hover, &:focus, &:focus-within {\n\t\t\t\t\tbackground-color: var(--color-primary-element-hover);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.action-button__pressed-icon {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\t}\n}\n</style>\n"],"names":["_createElementBlock","_createElementVNode","_renderSlot"],"mappings":";;;;;;AAgGA,MAAK,YAAa,gBAAa;AAAA,EAC9B,MAAM;AAAA,EAEN,QAAQ;AAAA,IACP,kBAAkB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA;;EAIX,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,MAAM;AAAA,MACL,UAAU;AAAA,MACV,SAAS;AAAA,MACT,MAAM;AAAA;;EAIR,QAAQ;AACP,WAAO;AAAA,MACN,SAAS,gBAAe;AAAA,IACzB;AAAA,EACD;AAAA,EAEA,SAAS;AAAA,IACR;AAAA;AAEF,CAAC;;;;;sBAjDAA,mBAOK,MAAA;AAAA,IAPD,OAAM;AAAA,IAAwB,MAAM,KAAA,oBAAgB;AAAA;IAC5C,KAAA,qBAAXA,mBAEM,OAAA;AAAA;MAFY,IAAI,KAAA;AAAA,uBAClB,KAAA,IAAI,GAAA,GAAA,UAAA;IAERC,mBAEK,MAAA;AAAA,MAFD,OAAM;AAAA,MAA0B,MAAK;AAAA,MAAS,mBAAiB,KAAA,OAAO,KAAA,UAAU;AAAA;MACnFC,WAAQ,KAAA,QAAA,SAAA;AAAA;;;;"}
+{"version":3,"file":"NcActionButtonGroup-C7ej9wLo.mjs","sources":["../../src/components/NcActionButtonGroup/NcActionButtonGroup.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots,\nto group buttons as one visual action, like for text alignment.\nThis should be used sparingly for accessibility.\n\n```vue\n<template>\n\t<div style=\"display: flex; align-items: center;\">\n\t\t<NcActions>\n\t\t\t<NcActionButtonGroup name=\"Text alignment\">\n\t\t\t\t<NcActionButton aria-label=\"Align left\"\n\t\t\t\t\tv-model=\"alignment\"\n\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\tvalue=\"l\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconAlignHorizontalLeft :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton aria-label=\"Align center\"\n\t\t\t\t\tv-model=\"alignment\"\n\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\tvalue=\"c\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconAlignHorizontalCenter :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton aria-label=\"Align right\"\n\t\t\t\t\tv-model=\"alignment\"\n\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\tvalue=\"r\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconAlignHorizontalRight :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcActionButton>\n\t\t\t</NcActionButtonGroup>\n\t\t\t<NcActionButton :close-after-click=\"true\"\n\t\t\t\t@click=\"showMessage('Some other action')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconPlus :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSome other action\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</div>\n</template>\n<script>\nimport IconAlignHorizontalLeft from 'vue-material-design-icons/AlignHorizontalLeft.vue'\nimport IconAlignHorizontalRight from 'vue-material-design-icons/AlignHorizontalRight.vue'\nimport IconAlignHorizontalCenter from 'vue-material-design-icons/AlignHorizontalCenter.vue'\nimport IconPlus from 'vue-material-design-icons/Plus.vue'\n\nexport default {\n\tcomponents: {\n\t\tIconAlignHorizontalLeft,\n\t\tIconAlignHorizontalRight,\n\t\tIconAlignHorizontalCenter,\n\t\tIconPlus,\n\t},\n\tdata() {\n\t\treturn { alignment: 'l' }\n\t},\n\tmethods: {\n\t\tshowMessage(msg) {\n\t\t\talert(msg)\n\t\t},\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<li class=\"nc-button-group-base\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t<div v-if=\"name\" :id=\"labelId\">\n\t\t\t{{ name }}\n\t\t</div>\n\t\t<ul class=\"nc-button-group-content\" role=\"group\" :aria-labelledby=\"name ? labelId : undefined\">\n\t\t\t<slot />\n\t\t</ul>\n\t</li>\n</template>\n\n<script>\nimport { defineComponent } from 'vue'\nimport { t } from '../../l10n.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { NC_ACTIONS_IS_SEMANTIC_MENU } from '../NcActions/useNcActions.ts'\n\n/**\n * A wrapper for allowing inlining NcAction components within the action menu\n */\nexport default defineComponent({\n\tname: 'NcActionButtonGroup',\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: NC_ACTIONS_IS_SEMANTIC_MENU,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Optional text shown below the button group\n\t\t */\n\t\tname: {\n\t\t\trequired: false,\n\t\t\tdefault: undefined,\n\t\t\ttype: String,\n\t\t},\n\t},\n\n\tsetup() {\n\t\treturn {\n\t\t\tlabelId: createElementId(),\n\t\t}\n\t},\n\n\tmethods: {\n\t\tt,\n\t},\n})\n</script>\n\n<style lang=\"scss\" scoped>\n.nc-button-group-base {\n\t>div {\n\t\ttext-align: center;\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\n\tul.nc-button-group-content {\n\t\tdisplay: flex;\n\t\tgap: 4px; // required for the focus-visible outline\n\t\tjustify-content: space-between;\n\t\t:slotted(li) {\n\t\t\tflex: 1 1;\n\t\t}\n\n\t\t:deep(.action-button) {\n\t\t\t// Fix action buttons beeing shifted to the left (right padding)\n\t\t\tpadding: 0 !important;\n\t\t\twidth: 100%;\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\n\t\t\t&.action-button--active {\n\t\t\t\tbackground-color: var(--color-primary-element);\n\t\t\t\tborder-radius: var(--border-radius-element);\n\t\t\t\tcolor: var(--color-primary-element-text);\n\n\t\t\t\t&:hover, &:focus, &:focus-within {\n\t\t\t\t\tbackground-color: var(--color-primary-element-hover);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.action-button__pressed-icon {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\t}\n}\n</style>\n"],"names":["_createElementBlock","_createElementVNode","_renderSlot"],"mappings":";;;;;;AAgGA,MAAK,YAAa,gBAAa;AAAA,EAC9B,MAAM;AAAA,EAEN,QAAQ;AAAA,IACP,kBAAkB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA;;EAIX,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,MAAM;AAAA,MACL,UAAU;AAAA,MACV,SAAS;AAAA,MACT,MAAM;AAAA;;EAIR,QAAQ;AACP,WAAO;AAAA,MACN,SAAS,gBAAe;AAAA,IACzB;AAAA,EACD;AAAA,EAEA,SAAS;AAAA,IACR;AAAA;AAEF,CAAC;;;;;sBAjDAA,mBAOK,MAAA;AAAA,IAPD,OAAM;AAAA,IAAwB,MAAM,KAAA,oBAAgB;AAAA;IAC5C,KAAA,qBAAXA,mBAEM,OAAA;AAAA;MAFY,IAAI,KAAA;AAAA,uBAClB,KAAA,IAAI,GAAA,GAAA,UAAA;IAERC,mBAEK,MAAA;AAAA,MAFD,OAAM;AAAA,MAA0B,MAAK;AAAA,MAAS,mBAAiB,KAAA,OAAO,KAAA,UAAU;AAAA;MACnFC,WAAQ,KAAA,QAAA,SAAA;AAAA;;;;"}

package/dist/chunks/{NcActionInput-Cgazb3df.mjs → NcActionInput-1xeJpD6P.mjs}

@@ -1,11 +1,11 @@
 import '../assets/NcActionInput-BO4gR6sg.css';
 import { defineAsyncComponent, resolveComponent, createElementBlock, openBlock, normalizeClass, createElementVNode, renderSlot, normalizeStyle, withModifiers, createCommentVNode, toDisplayString, createBlock, mergeProps, createVNode, withCtx } from "vue";
-import { r as register, l as t48, a as t } from "./_l10n-BSFzy-71.mjs";
+import { r as register, l as t48, a as t } from "./_l10n-Dq_eYxz_.mjs";
 import { A as ActionGlobalMixin } from "./actionGlobal-BZFdtdJL.mjs";
 import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
-import { N as NcDateTimePickerNative } from "./NcDateTimePickerNative-DvvKjw_h.mjs";
-import { N as NcPasswordField } from "./NcPasswordField-DYF18Cdo.mjs";
-import { _ as _sfc_main$1 } from "./NcTextField.vue_vue_type_script_setup_true_lang-Cv9c1EWI.mjs";
+import { N as NcDateTimePickerNative } from "./NcDateTimePickerNative-C_4mwR_o.mjs";
+import { N as NcPasswordField } from "./NcPasswordField-uaMO2pdt.mjs";
+import { _ as _sfc_main$1 } from "./NcTextField.vue_vue_type_script_setup_true_lang-BxkYy7wv.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 register(t48);
 const _sfc_main = {
@@ -349,4 +349,4 @@ const NcActionInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_re
 export {
   NcActionInput as N
 };
-//# sourceMappingURL=NcActionInput-Cgazb3df.mjs.map
+//# sourceMappingURL=NcActionInput-1xeJpD6P.mjs.map

package/dist/chunks/{NcActionInput-Cgazb3df.mjs.map → NcActionInput-1xeJpD6P.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcActionInput-Cgazb3df.mjs","sources":["../../src/components/NcActionInput/NcActionInput.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots.\n\nIt is recommended to not only provide a placeholder, but also a label.\nThe label should describe what input is expected and the placehold what format the input should have.\n\nAll undocumented attributes will be bound to the input, the datepicker or the select component, e.g. `maxlength`, `not-before`.\nFor the `NcSelect` component, all events will be passed through. Please see the `NcSelect` component's documentation for more details and examples.\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionInput v-model=\"text\" :label-outside=\"true\" label=\"Label outside the input\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconPencilOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput v-model=\"text\" :show-trailing-button=\"false\" label=\"Input without trailing button\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconPencilOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput v-model=\"text\" label=\"Input with placeholder\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconPencilOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tThis is the placeholder\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput type=\"password\" v-model=\"text\" label=\"Password with visible label\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconKeyOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPassword placeholder\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput type=\"password\" v-model=\"text\" :show-trailing-button=\"false\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconKeyOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPassword placeholder\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput type=\"color\" v-model=\"color\" label=\"Favorite color\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconEyedropper :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tColor placeholder\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput label=\"Visible label\" v-model=\"text\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconPencilOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tInput with visible label\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput :disabled=\"true\" label=\"This is a disabled input\">\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</NcActionInput>\n\t\t\t<NcActionInput type=\"date\" label=\"Native date picker\" isNativePicker v-model=\"date\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconPencilOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPlease pick a date\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput type=\"date\" v-model=\"date\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconPencilOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPlease pick a date\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput\n\t\t\t\ttype=\"multiselect\"\n\t\t\t\tinput-label=\"Fruit selection\"\n\t\t\t\t:options=\"['Apple', 'Banana', 'Cherry']\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconPencilOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPlease pick a fruit\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput\n\t\t\t\tv-model=\"multiSelected\"\n\t\t\t\ttype=\"multiselect\"\n\t\t\t\tinput-label=\"Fruit selection\"\n\t\t\t\ttrack-by=\"id\"\n\t\t\t\t:append-to-body=\"true\"\n\t\t\t\t:multiple=\"true\"\n\t\t\t\t:options=\"[{label:'Apple', id: 'apple'}, {label:'Banana', id: 'banana'}, {label:'Cherry', id: 'cherry'}]\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconPencilOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPlease pick a fruit object\n\t\t\t</NcActionInput>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport IconClose from 'vue-material-design-icons/Close.vue'\n\timport IconEyedropper from 'vue-material-design-icons/Eyedropper.vue'\n\timport IconKeyOutline from 'vue-material-design-icons/KeyOutline.vue'\n\timport IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconClose,\n\t\t\tIconEyedropper,\n\t\t\tIconKeyOutline,\n\t\t\tIconPencilOutline,\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tcolor: '#0082C9',\n\t\t\t\tdate: new Date(),\n\t\t\t\ttext: 'This is the input text',\n\t\t\t\tmultiSelected: [],\n\t\t\t}\n\t\t},\n\t}\n\t</script>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" :class=\"[{ 'action--disabled': disabled }, $props.class]\">\n\t\t<span\n\t\t\tclass=\"action-input\"\n\t\t\t:class=\"{\n\t\t\t\t'action-input-picker--disabled': disabled,\n\t\t\t\t'action-input--visible-label': labelOutside && label,\n\t\t\t}\"\n\t\t\t@mouseleave=\"onLeave\">\n\t\t\t<span class=\"action-input__icon-wrapper\">\n\t\t\t\t<!-- @slot Manually provide icon -->\n\t\t\t\t<slot name=\"icon\">\n\t\t\t\t\t<span\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\tclass=\"action-input__icon\"\n\t\t\t\t\t\t:class=\"[isIconUrl ? 'action-input__icon--url' : icon]\"\n\t\t\t\t\t\t:style=\"{ backgroundImage: isIconUrl ? `url(${icon})` : null }\" />\n\t\t\t\t</slot>\n\t\t\t</span>\n\n\t\t\t<!-- form and input -->\n\t\t\t<form\n\t\t\t\tref=\"form\"\n\t\t\t\tclass=\"action-input__form\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t@submit.prevent=\"onSubmit\">\n\t\t\t\t<div class=\"action-input__container\">\n\t\t\t\t\t<label\n\t\t\t\t\t\tv-if=\"label && labelOutside && !isNativePicker\"\n\t\t\t\t\t\tclass=\"action-input__text-label\"\n\t\t\t\t\t\t:class=\"{ 'action-input__text-label--hidden': !labelOutside }\"\n\t\t\t\t\t\t:for=\"inputId\">\n\t\t\t\t\t\t{{ label }}\n\t\t\t\t\t</label>\n\t\t\t\t\t<div class=\"action-input__input-container\">\n\n\t\t\t\t\t\t<NcDateTimePicker\n\t\t\t\t\t\t\tv-if=\"datePickerType\"\n\t\t\t\t\t\t\tref=\"datetimepicker\"\n\t\t\t\t\t\t\t:modelValue=\"modelValue\"\n\t\t\t\t\t\t\tstyle=\"z-index: 99999999999;\"\n\t\t\t\t\t\t\t:placeholder=\"text\"\n\t\t\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t\t\t:type=\"datePickerType\"\n\t\t\t\t\t\t\t:inputClass=\"['mx-input', { focusable: isFocusable }]\"\n\t\t\t\t\t\t\tclass=\"action-input__datetimepicker\"\n\t\t\t\t\t\t\tappendToBody\n\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\t@update:modelValue=\"onUpdateModelValue\" />\n\n\t\t\t\t\t\t<NcDateTimePickerNative\n\t\t\t\t\t\t\tv-else-if=\"isNativePicker\"\n\t\t\t\t\t\t\t:id=\"idNativeDateTimePicker\"\n\t\t\t\t\t\t\t:modelValue=\"modelValue\"\n\t\t\t\t\t\t\t:label=\"label\"\n\t\t\t\t\t\t\t:type=\"nativeDatePickerType\"\n\t\t\t\t\t\t\t:inputClass=\"{ focusable: isFocusable }\"\n\t\t\t\t\t\t\tclass=\"action-input__datetimepicker\"\n\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\t@update:modelValue=\"onUpdateModelValue\" />\n\n\t\t\t\t\t\t<NcSelect\n\t\t\t\t\t\t\tv-else-if=\"isMultiselectType\"\n\t\t\t\t\t\t\t:modelValue=\"modelValue\"\n\t\t\t\t\t\t\t:placeholder=\"text\"\n\t\t\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t\t\t:appendToBody=\"false\"\n\t\t\t\t\t\t\t:inputClass=\"{ focusable: isFocusable }\"\n\t\t\t\t\t\t\tclass=\"action-input__multi\"\n\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\t@update:modelValue=\"onUpdateModelValue\" />\n\n\t\t\t\t\t\t<NcPasswordField\n\t\t\t\t\t\t\tv-else-if=\"type === 'password'\"\n\t\t\t\t\t\t\t:id=\"inputId\"\n\t\t\t\t\t\t\t:modelValue=\"modelValue\"\n\t\t\t\t\t\t\t:label=\"label\"\n\t\t\t\t\t\t\t:labelOutside=\"!label || labelOutside\"\n\t\t\t\t\t\t\t:placeholder=\"text\"\n\t\t\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t\t\t:inputClass=\"{ focusable: isFocusable }\"\n\t\t\t\t\t\t\t:showTrailingButton=\"showTrailingButton && !disabled\"\n\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\t@update:modelValue=\"onUpdateModelValue\" />\n\n\t\t\t\t\t\t<div v-else-if=\"type === 'color'\" class=\"action-input__container\">\n\t\t\t\t\t\t\t<label\n\t\t\t\t\t\t\t\tv-if=\"label && type === 'color'\"\n\t\t\t\t\t\t\t\tclass=\"action-input__text-label\"\n\t\t\t\t\t\t\t\t:class=\"{ 'action-input__text-label--hidden': !labelOutside }\"\n\t\t\t\t\t\t\t\t:for=\"inputId\">\n\t\t\t\t\t\t\t\t{{ label }}\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t<div class=\"action-input__input-container\">\n\t\t\t\t\t\t\t\t<NcColorPicker\n\t\t\t\t\t\t\t\t\tid=\"inputId\"\n\t\t\t\t\t\t\t\t\t:modelValue=\"modelValue\"\n\t\t\t\t\t\t\t\t\tclass=\"colorpicker__trigger\"\n\t\t\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\t\t\t@update:modelValue=\"onUpdateModelValue\"\n\t\t\t\t\t\t\t\t\t@submit=\"$refs.form.requestSubmit()\">\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\tclass=\"colorpicker__preview\"\n\t\t\t\t\t\t\t\t\t\t:class=\"{ focusable: isFocusable }\"\n\t\t\t\t\t\t\t\t\t\t:style=\"{ 'background-color': modelValue }\" />\n\t\t\t\t\t\t\t\t</NcColorPicker>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<NcTextField\n\t\t\t\t\t\t\tv-else\n\t\t\t\t\t\t\t:id=\"inputId\"\n\t\t\t\t\t\t\t:modelValue=\"modelValue\"\n\t\t\t\t\t\t\t:label=\"label\"\n\t\t\t\t\t\t\t:labelOutside=\"!label || labelOutside\"\n\t\t\t\t\t\t\t:placeholder=\"text\"\n\t\t\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t\t\t:inputClass=\"{ focusable: isFocusable }\"\n\t\t\t\t\t\t\t:type=\"type\"\n\t\t\t\t\t\t\ttrailingButtonIcon=\"arrowRight\"\n\t\t\t\t\t\t\t:trailingButtonLabel=\"trailingButtonLabel\"\n\t\t\t\t\t\t\t:showTrailingButton=\"showTrailingButton && !disabled\"\n\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\t@trailingButtonClick=\"$refs.form.requestSubmit()\"\n\t\t\t\t\t\t\t@update:modelValue=\"onUpdateModelValue\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</form>\n\t\t</span>\n\t</li>\n</template>\n\n<script>\nimport { defineAsyncComponent } from 'vue'\nimport { t } from '../../l10n.ts'\nimport ActionGlobalMixin from '../../mixins/actionGlobal.js'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport NcDateTimePickerNative from '../NcDateTimePickerNative/index.ts'\nimport NcPasswordField from '../NcPasswordField/index.ts'\nimport NcTextField from '../NcTextField/index.ts'\n\nexport default {\n\tname: 'NcActionInput',\n\n\tcomponents: {\n\t\tNcDateTimePickerNative,\n\t\tNcPasswordField,\n\t\tNcTextField,\n\t\t// Lazy load components with more than 50kB bundle size impact\n\t\tNcColorPicker: defineAsyncComponent(() => import('../NcColorPicker/index.ts')),\n\t\tNcDateTimePicker: defineAsyncComponent(() => import('../NcDateTimePicker/index.js')),\n\t\tNcSelect: defineAsyncComponent(() => import('../NcSelect/index.js')),\n\t},\n\n\tmixins: [ActionGlobalMixin],\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * id attribute of the checkbox element\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'action-' + createElementId(),\n\t\t\tvalidator: (id) => id.trim() !== '',\n\t\t},\n\n\t\t/**\n\t\t * id attribute of the text input element\n\t\t */\n\t\tinputId: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'action-input-' + createElementId(),\n\t\t\tvalidator: (id) => id.trim() !== '',\n\t\t},\n\n\t\t/**\n\t\t * Icon to show with the action, can be either a CSS class or an URL\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * type attribute of the input field\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'text',\n\t\t\tvalidator(type) {\n\t\t\t\treturn [\n\t\t\t\t\t'date',\n\t\t\t\t\t'datetime-local',\n\t\t\t\t\t'month',\n\t\t\t\t\t'multiselect',\n\t\t\t\t\t'number',\n\t\t\t\t\t'password',\n\t\t\t\t\t'search',\n\t\t\t\t\t'tel',\n\t\t\t\t\t'text',\n\t\t\t\t\t'time',\n\t\t\t\t\t'url',\n\t\t\t\t\t'week',\n\t\t\t\t\t'color',\n\t\t\t\t\t'email',\n\t\t\t\t].includes(type)\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * id attribute for the native date time picker\n\t\t */\n\t\tidNativeDateTimePicker: {\n\t\t\ttype: String,\n\t\t\tdefault: 'date-time-picker_id',\n\t\t},\n\n\t\t/**\n\t\t * Flag to use a native date time picker\n\t\t */\n\t\tisNativePicker: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * The visible input label for accessibility purposes.\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * If you want to show the label just above the\n\t\t * input field, pass in `true` to this prop.\n\t\t */\n\t\tlabelOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * value attribute of the input field\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: [String, Date, Number, Array],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * disabled state of the input field\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * aria-label attribute of the input field\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Attribute forwarded to the underlying NcPasswordField and NcTextField\n\t\t */\n\t\tshowTrailingButton: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Trailing button label forwarded to the underlying NcTextField\n\t\t */\n\t\ttrailingButtonLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Submit'),\n\t\t},\n\n\t\t/**\n\t\t * CSS class to apply to the root element.\n\t\t */\n\t\tclass: {\n\t\t\ttype: [String, Array, Object],\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: [\n\t\t'submit',\n\t\t'update:modelValue',\n\t],\n\n\tcomputed: {\n\t\tisIconUrl() {\n\t\t\ttry {\n\t\t\t\treturn new URL(this.icon)\n\t\t\t} catch {\n\t\t\t\treturn false\n\t\t\t}\n\t\t},\n\n\t\tisMultiselectType() {\n\t\t\treturn this.type === 'multiselect'\n\t\t},\n\n\t\tnativeDatePickerType() {\n\t\t\tswitch (this.type) {\n\t\t\t\tcase 'date':\n\t\t\t\tcase 'month':\n\t\t\t\tcase 'time':\n\t\t\t\tcase 'week':\n\t\t\t\tcase 'datetime-local':\n\t\t\t\t\treturn this.type\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\n\t\tdatePickerType() {\n\t\t\tif (!this.isNativePicker) {\n\t\t\t\tswitch (this.type) {\n\t\t\t\t\tcase 'date':\n\t\t\t\t\tcase 'month':\n\t\t\t\t\tcase 'time':\n\t\t\t\t\t\treturn this.type\n\n\t\t\t\t\tcase 'datetime-local':\n\t\t\t\t\t\treturn 'datetime'\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\n\t\t/**\n\t\t * determines if the action is focusable\n\t\t *\n\t\t * @return {boolean} is the action focusable ?\n\t\t */\n\t\tisFocusable() {\n\t\t\treturn !this.disabled\n\t\t},\n\t},\n\n\tmethods: {\n\t\t// closing datepicker popup on mouseleave = unfocus\n\t\tonLeave() {\n\t\t\tif (this.$refs.datetimepicker && this.$refs.datetimepicker.$refs.datepicker) {\n\t\t\t\tthis.$refs.datetimepicker.$refs.datepicker.closePopup()\n\t\t\t}\n\t\t},\n\n\t\tonSubmit(event) {\n\t\t\tevent.preventDefault()\n\t\t\tevent.stopPropagation()\n\t\t\tif (!this.disabled) {\n\t\t\t\t/**\n\t\t\t\t * Emitted on submit of the input field\n\t\t\t\t *\n\t\t\t\t * @type {Event}\n\t\t\t\t */\n\t\t\t\tthis.$emit('submit', event)\n\t\t\t} else {\n\t\t\t\t// ignore submit\n\t\t\t\treturn false\n\t\t\t}\n\t\t},\n\n\t\tonUpdateModelValue(event) {\n\t\t\t/**\n\t\t\t * Emitted on update of the model value\n\t\t\t *\n\t\t\t * @type {Event}\n\t\t\t */\n\t\t\tthis.$emit('update:modelValue', event)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@use '../../assets/inputs.scss';\n@use '../../assets/action.scss' as *;\n@include action-active;\n@include action--disabled;\n\n$input-margin: 4px;\n\n.action-input {\n\tdisplay: flex;\n\talign-items: flex-start;\n\n\twidth: 100%;\n\theight: auto;\n\tmargin: 0;\n\tpadding: 0;\n\n\tcursor: pointer;\n\twhite-space: nowrap;\n\n\tcolor: var(--color-main-text);\n\tborder: 0;\n\tborder-radius: 0; // otherwise Safari will cut the border-radius area\n\tbackground-color: transparent;\n\tbox-shadow: none;\n\n\tfont-weight: normal;\n\n\t&__icon-wrapper {\n\t\tdisplay: flex;\n\t\talign-self: center;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\n\t\t&:deep(.material-design-icon) {\n\t\t\twidth: var(--default-clickable-area);\n\t\t\theight: var(--default-clickable-area);\n\t\t\topacity: $opacity_full;\n\n\t\t\t.material-design-icon__svg {\n\t\t\t\tvertical-align: middle;\n\t\t\t}\n\t\t}\n\t}\n\n\t& > span {\n\t\tcursor: pointer;\n\t\twhite-space: nowrap;\n\t}\n\n\t&__icon {\n\t\tmin-width: 0; /* Overwrite icons*/\n\t\tmin-height: 0;\n\t\t// Keep padding to define the width to assure correct position of a possible text\n\t\tpadding: calc(var(--default-clickable-area) / 2) 0 calc(var(--default-clickable-area) / 2) var(--default-clickable-area);\n\n\t\tbackground-position: #{$icon-margin} center;\n\t\tbackground-size: $icon-size;\n\t}\n\n\t// Forms & text inputs\n\t&__form {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tflex: 1 1 auto;\n\n\t\tmargin: $input-margin 0;\n\t\tpadding-inline-end: $icon-margin;\n\t}\n\n\t&__container {\n\t\tposition: relative;\n\t\twidth: 100%;\n\t}\n\n\t&__input-container {\n\t\tdisplay: flex;\n\n\t\t.colorpicker {\n\t\t\t&__trigger,\n\t\t\t&__preview {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\n\t\t\t&__preview {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 36px;\n\t\t\t\tborder-radius: var(--border-radius-element);\n\t\t\t\tborder: 2px solid var(--color-border-maxcontrast);\n\t\t\t\tbox-shadow: none !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__text-label {\n\t\tpadding: 4px 0;\n\t\tdisplay: block;\n\n\t\t&--hidden {\n\t\t\tposition: absolute;\n\t\t\tinset-inline-start: 0;\n\t\t\twidth: 1px;\n\t\t\theight: 1px;\n\t\t\toverflow: hidden;\n\t\t\tz-index: -1;\n\t\t\topacity: 0;\n\t\t}\n\t}\n\n\t&__datetimepicker {\n\t\twidth: 100%;\n\n\t\t:deep(.mx-input) {\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\n\t&__multi {\n\t\twidth: 100%;\n\t}\n}\n\n// if a form is the last of the list\n// add the same bottomMargin as the right padding\n// for visual balance\nli:last-child > .action-input {\n\tpadding-bottom: calc($icon-margin - $input-margin);\n}\n\n// same for first item\nli:first-child > .action-input:not(.action-input--visible-label) {\n\tpadding-top: calc($icon-margin - $input-margin);\n}\n\n</style>\n"],"names":["NcTextField","_createElementBlock","_createElementVNode","_renderSlot","_normalizeClass","_normalizeStyle","_openBlock","_createBlock","_mergeProps","_createVNode"],"mappings":"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"}
+{"version":3,"file":"NcActionInput-1xeJpD6P.mjs","sources":["../../src/components/NcActionInput/NcActionInput.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots.\n\nIt is recommended to not only provide a placeholder, but also a label.\nThe label should describe what input is expected and the placehold what format the input should have.\n\nAll undocumented attributes will be bound to the input, the datepicker or the select component, e.g. `maxlength`, `not-before`.\nFor the `NcSelect` component, all events will be passed through. Please see the `NcSelect` component's documentation for more details and examples.\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionInput v-model=\"text\" :label-outside=\"true\" label=\"Label outside the input\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconPencilOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput v-model=\"text\" :show-trailing-button=\"false\" label=\"Input without trailing button\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconPencilOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput v-model=\"text\" label=\"Input with placeholder\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconPencilOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tThis is the placeholder\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput type=\"password\" v-model=\"text\" label=\"Password with visible label\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconKeyOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPassword placeholder\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput type=\"password\" v-model=\"text\" :show-trailing-button=\"false\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconKeyOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPassword placeholder\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput type=\"color\" v-model=\"color\" label=\"Favorite color\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconEyedropper :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tColor placeholder\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput label=\"Visible label\" v-model=\"text\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconPencilOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tInput with visible label\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput :disabled=\"true\" label=\"This is a disabled input\">\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</NcActionInput>\n\t\t\t<NcActionInput type=\"date\" label=\"Native date picker\" isNativePicker v-model=\"date\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconPencilOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPlease pick a date\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput type=\"date\" v-model=\"date\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconPencilOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPlease pick a date\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput\n\t\t\t\ttype=\"multiselect\"\n\t\t\t\tinput-label=\"Fruit selection\"\n\t\t\t\t:options=\"['Apple', 'Banana', 'Cherry']\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconPencilOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPlease pick a fruit\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput\n\t\t\t\tv-model=\"multiSelected\"\n\t\t\t\ttype=\"multiselect\"\n\t\t\t\tinput-label=\"Fruit selection\"\n\t\t\t\ttrack-by=\"id\"\n\t\t\t\t:append-to-body=\"true\"\n\t\t\t\t:multiple=\"true\"\n\t\t\t\t:options=\"[{label:'Apple', id: 'apple'}, {label:'Banana', id: 'banana'}, {label:'Cherry', id: 'cherry'}]\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconPencilOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPlease pick a fruit object\n\t\t\t</NcActionInput>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport IconClose from 'vue-material-design-icons/Close.vue'\n\timport IconEyedropper from 'vue-material-design-icons/Eyedropper.vue'\n\timport IconKeyOutline from 'vue-material-design-icons/KeyOutline.vue'\n\timport IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconClose,\n\t\t\tIconEyedropper,\n\t\t\tIconKeyOutline,\n\t\t\tIconPencilOutline,\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tcolor: '#0082C9',\n\t\t\t\tdate: new Date(),\n\t\t\t\ttext: 'This is the input text',\n\t\t\t\tmultiSelected: [],\n\t\t\t}\n\t\t},\n\t}\n\t</script>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" :class=\"[{ 'action--disabled': disabled }, $props.class]\">\n\t\t<span\n\t\t\tclass=\"action-input\"\n\t\t\t:class=\"{\n\t\t\t\t'action-input-picker--disabled': disabled,\n\t\t\t\t'action-input--visible-label': labelOutside && label,\n\t\t\t}\"\n\t\t\t@mouseleave=\"onLeave\">\n\t\t\t<span class=\"action-input__icon-wrapper\">\n\t\t\t\t<!-- @slot Manually provide icon -->\n\t\t\t\t<slot name=\"icon\">\n\t\t\t\t\t<span\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\tclass=\"action-input__icon\"\n\t\t\t\t\t\t:class=\"[isIconUrl ? 'action-input__icon--url' : icon]\"\n\t\t\t\t\t\t:style=\"{ backgroundImage: isIconUrl ? `url(${icon})` : null }\" />\n\t\t\t\t</slot>\n\t\t\t</span>\n\n\t\t\t<!-- form and input -->\n\t\t\t<form\n\t\t\t\tref=\"form\"\n\t\t\t\tclass=\"action-input__form\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t@submit.prevent=\"onSubmit\">\n\t\t\t\t<div class=\"action-input__container\">\n\t\t\t\t\t<label\n\t\t\t\t\t\tv-if=\"label && labelOutside && !isNativePicker\"\n\t\t\t\t\t\tclass=\"action-input__text-label\"\n\t\t\t\t\t\t:class=\"{ 'action-input__text-label--hidden': !labelOutside }\"\n\t\t\t\t\t\t:for=\"inputId\">\n\t\t\t\t\t\t{{ label }}\n\t\t\t\t\t</label>\n\t\t\t\t\t<div class=\"action-input__input-container\">\n\n\t\t\t\t\t\t<NcDateTimePicker\n\t\t\t\t\t\t\tv-if=\"datePickerType\"\n\t\t\t\t\t\t\tref=\"datetimepicker\"\n\t\t\t\t\t\t\t:modelValue=\"modelValue\"\n\t\t\t\t\t\t\tstyle=\"z-index: 99999999999;\"\n\t\t\t\t\t\t\t:placeholder=\"text\"\n\t\t\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t\t\t:type=\"datePickerType\"\n\t\t\t\t\t\t\t:inputClass=\"['mx-input', { focusable: isFocusable }]\"\n\t\t\t\t\t\t\tclass=\"action-input__datetimepicker\"\n\t\t\t\t\t\t\tappendToBody\n\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\t@update:modelValue=\"onUpdateModelValue\" />\n\n\t\t\t\t\t\t<NcDateTimePickerNative\n\t\t\t\t\t\t\tv-else-if=\"isNativePicker\"\n\t\t\t\t\t\t\t:id=\"idNativeDateTimePicker\"\n\t\t\t\t\t\t\t:modelValue=\"modelValue\"\n\t\t\t\t\t\t\t:label=\"label\"\n\t\t\t\t\t\t\t:type=\"nativeDatePickerType\"\n\t\t\t\t\t\t\t:inputClass=\"{ focusable: isFocusable }\"\n\t\t\t\t\t\t\tclass=\"action-input__datetimepicker\"\n\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\t@update:modelValue=\"onUpdateModelValue\" />\n\n\t\t\t\t\t\t<NcSelect\n\t\t\t\t\t\t\tv-else-if=\"isMultiselectType\"\n\t\t\t\t\t\t\t:modelValue=\"modelValue\"\n\t\t\t\t\t\t\t:placeholder=\"text\"\n\t\t\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t\t\t:appendToBody=\"false\"\n\t\t\t\t\t\t\t:inputClass=\"{ focusable: isFocusable }\"\n\t\t\t\t\t\t\tclass=\"action-input__multi\"\n\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\t@update:modelValue=\"onUpdateModelValue\" />\n\n\t\t\t\t\t\t<NcPasswordField\n\t\t\t\t\t\t\tv-else-if=\"type === 'password'\"\n\t\t\t\t\t\t\t:id=\"inputId\"\n\t\t\t\t\t\t\t:modelValue=\"modelValue\"\n\t\t\t\t\t\t\t:label=\"label\"\n\t\t\t\t\t\t\t:labelOutside=\"!label || labelOutside\"\n\t\t\t\t\t\t\t:placeholder=\"text\"\n\t\t\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t\t\t:inputClass=\"{ focusable: isFocusable }\"\n\t\t\t\t\t\t\t:showTrailingButton=\"showTrailingButton && !disabled\"\n\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\t@update:modelValue=\"onUpdateModelValue\" />\n\n\t\t\t\t\t\t<div v-else-if=\"type === 'color'\" class=\"action-input__container\">\n\t\t\t\t\t\t\t<label\n\t\t\t\t\t\t\t\tv-if=\"label && type === 'color'\"\n\t\t\t\t\t\t\t\tclass=\"action-input__text-label\"\n\t\t\t\t\t\t\t\t:class=\"{ 'action-input__text-label--hidden': !labelOutside }\"\n\t\t\t\t\t\t\t\t:for=\"inputId\">\n\t\t\t\t\t\t\t\t{{ label }}\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t<div class=\"action-input__input-container\">\n\t\t\t\t\t\t\t\t<NcColorPicker\n\t\t\t\t\t\t\t\t\tid=\"inputId\"\n\t\t\t\t\t\t\t\t\t:modelValue=\"modelValue\"\n\t\t\t\t\t\t\t\t\tclass=\"colorpicker__trigger\"\n\t\t\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\t\t\t@update:modelValue=\"onUpdateModelValue\"\n\t\t\t\t\t\t\t\t\t@submit=\"$refs.form.requestSubmit()\">\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\tclass=\"colorpicker__preview\"\n\t\t\t\t\t\t\t\t\t\t:class=\"{ focusable: isFocusable }\"\n\t\t\t\t\t\t\t\t\t\t:style=\"{ 'background-color': modelValue }\" />\n\t\t\t\t\t\t\t\t</NcColorPicker>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<NcTextField\n\t\t\t\t\t\t\tv-else\n\t\t\t\t\t\t\t:id=\"inputId\"\n\t\t\t\t\t\t\t:modelValue=\"modelValue\"\n\t\t\t\t\t\t\t:label=\"label\"\n\t\t\t\t\t\t\t:labelOutside=\"!label || labelOutside\"\n\t\t\t\t\t\t\t:placeholder=\"text\"\n\t\t\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t\t\t:inputClass=\"{ focusable: isFocusable }\"\n\t\t\t\t\t\t\t:type=\"type\"\n\t\t\t\t\t\t\ttrailingButtonIcon=\"arrowRight\"\n\t\t\t\t\t\t\t:trailingButtonLabel=\"trailingButtonLabel\"\n\t\t\t\t\t\t\t:showTrailingButton=\"showTrailingButton && !disabled\"\n\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\t@trailingButtonClick=\"$refs.form.requestSubmit()\"\n\t\t\t\t\t\t\t@update:modelValue=\"onUpdateModelValue\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</form>\n\t\t</span>\n\t</li>\n</template>\n\n<script>\nimport { defineAsyncComponent } from 'vue'\nimport { t } from '../../l10n.ts'\nimport ActionGlobalMixin from '../../mixins/actionGlobal.js'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport NcDateTimePickerNative from '../NcDateTimePickerNative/index.ts'\nimport NcPasswordField from '../NcPasswordField/index.ts'\nimport NcTextField from '../NcTextField/index.ts'\n\nexport default {\n\tname: 'NcActionInput',\n\n\tcomponents: {\n\t\tNcDateTimePickerNative,\n\t\tNcPasswordField,\n\t\tNcTextField,\n\t\t// Lazy load components with more than 50kB bundle size impact\n\t\tNcColorPicker: defineAsyncComponent(() => import('../NcColorPicker/index.ts')),\n\t\tNcDateTimePicker: defineAsyncComponent(() => import('../NcDateTimePicker/index.js')),\n\t\tNcSelect: defineAsyncComponent(() => import('../NcSelect/index.js')),\n\t},\n\n\tmixins: [ActionGlobalMixin],\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * id attribute of the checkbox element\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'action-' + createElementId(),\n\t\t\tvalidator: (id) => id.trim() !== '',\n\t\t},\n\n\t\t/**\n\t\t * id attribute of the text input element\n\t\t */\n\t\tinputId: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'action-input-' + createElementId(),\n\t\t\tvalidator: (id) => id.trim() !== '',\n\t\t},\n\n\t\t/**\n\t\t * Icon to show with the action, can be either a CSS class or an URL\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * type attribute of the input field\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'text',\n\t\t\tvalidator(type) {\n\t\t\t\treturn [\n\t\t\t\t\t'date',\n\t\t\t\t\t'datetime-local',\n\t\t\t\t\t'month',\n\t\t\t\t\t'multiselect',\n\t\t\t\t\t'number',\n\t\t\t\t\t'password',\n\t\t\t\t\t'search',\n\t\t\t\t\t'tel',\n\t\t\t\t\t'text',\n\t\t\t\t\t'time',\n\t\t\t\t\t'url',\n\t\t\t\t\t'week',\n\t\t\t\t\t'color',\n\t\t\t\t\t'email',\n\t\t\t\t].includes(type)\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * id attribute for the native date time picker\n\t\t */\n\t\tidNativeDateTimePicker: {\n\t\t\ttype: String,\n\t\t\tdefault: 'date-time-picker_id',\n\t\t},\n\n\t\t/**\n\t\t * Flag to use a native date time picker\n\t\t */\n\t\tisNativePicker: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * The visible input label for accessibility purposes.\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * If you want to show the label just above the\n\t\t * input field, pass in `true` to this prop.\n\t\t */\n\t\tlabelOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * value attribute of the input field\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: [String, Date, Number, Array],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * disabled state of the input field\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * aria-label attribute of the input field\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Attribute forwarded to the underlying NcPasswordField and NcTextField\n\t\t */\n\t\tshowTrailingButton: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Trailing button label forwarded to the underlying NcTextField\n\t\t */\n\t\ttrailingButtonLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Submit'),\n\t\t},\n\n\t\t/**\n\t\t * CSS class to apply to the root element.\n\t\t */\n\t\tclass: {\n\t\t\ttype: [String, Array, Object],\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: [\n\t\t'submit',\n\t\t'update:modelValue',\n\t],\n\n\tcomputed: {\n\t\tisIconUrl() {\n\t\t\ttry {\n\t\t\t\treturn new URL(this.icon)\n\t\t\t} catch {\n\t\t\t\treturn false\n\t\t\t}\n\t\t},\n\n\t\tisMultiselectType() {\n\t\t\treturn this.type === 'multiselect'\n\t\t},\n\n\t\tnativeDatePickerType() {\n\t\t\tswitch (this.type) {\n\t\t\t\tcase 'date':\n\t\t\t\tcase 'month':\n\t\t\t\tcase 'time':\n\t\t\t\tcase 'week':\n\t\t\t\tcase 'datetime-local':\n\t\t\t\t\treturn this.type\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\n\t\tdatePickerType() {\n\t\t\tif (!this.isNativePicker) {\n\t\t\t\tswitch (this.type) {\n\t\t\t\t\tcase 'date':\n\t\t\t\t\tcase 'month':\n\t\t\t\t\tcase 'time':\n\t\t\t\t\t\treturn this.type\n\n\t\t\t\t\tcase 'datetime-local':\n\t\t\t\t\t\treturn 'datetime'\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\n\t\t/**\n\t\t * determines if the action is focusable\n\t\t *\n\t\t * @return {boolean} is the action focusable ?\n\t\t */\n\t\tisFocusable() {\n\t\t\treturn !this.disabled\n\t\t},\n\t},\n\n\tmethods: {\n\t\t// closing datepicker popup on mouseleave = unfocus\n\t\tonLeave() {\n\t\t\tif (this.$refs.datetimepicker && this.$refs.datetimepicker.$refs.datepicker) {\n\t\t\t\tthis.$refs.datetimepicker.$refs.datepicker.closePopup()\n\t\t\t}\n\t\t},\n\n\t\tonSubmit(event) {\n\t\t\tevent.preventDefault()\n\t\t\tevent.stopPropagation()\n\t\t\tif (!this.disabled) {\n\t\t\t\t/**\n\t\t\t\t * Emitted on submit of the input field\n\t\t\t\t *\n\t\t\t\t * @type {Event}\n\t\t\t\t */\n\t\t\t\tthis.$emit('submit', event)\n\t\t\t} else {\n\t\t\t\t// ignore submit\n\t\t\t\treturn false\n\t\t\t}\n\t\t},\n\n\t\tonUpdateModelValue(event) {\n\t\t\t/**\n\t\t\t * Emitted on update of the model value\n\t\t\t *\n\t\t\t * @type {Event}\n\t\t\t */\n\t\t\tthis.$emit('update:modelValue', event)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@use '../../assets/inputs.scss';\n@use '../../assets/action.scss' as *;\n@include action-active;\n@include action--disabled;\n\n$input-margin: 4px;\n\n.action-input {\n\tdisplay: flex;\n\talign-items: flex-start;\n\n\twidth: 100%;\n\theight: auto;\n\tmargin: 0;\n\tpadding: 0;\n\n\tcursor: pointer;\n\twhite-space: nowrap;\n\n\tcolor: var(--color-main-text);\n\tborder: 0;\n\tborder-radius: 0; // otherwise Safari will cut the border-radius area\n\tbackground-color: transparent;\n\tbox-shadow: none;\n\n\tfont-weight: normal;\n\n\t&__icon-wrapper {\n\t\tdisplay: flex;\n\t\talign-self: center;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\n\t\t&:deep(.material-design-icon) {\n\t\t\twidth: var(--default-clickable-area);\n\t\t\theight: var(--default-clickable-area);\n\t\t\topacity: $opacity_full;\n\n\t\t\t.material-design-icon__svg {\n\t\t\t\tvertical-align: middle;\n\t\t\t}\n\t\t}\n\t}\n\n\t& > span {\n\t\tcursor: pointer;\n\t\twhite-space: nowrap;\n\t}\n\n\t&__icon {\n\t\tmin-width: 0; /* Overwrite icons*/\n\t\tmin-height: 0;\n\t\t// Keep padding to define the width to assure correct position of a possible text\n\t\tpadding: calc(var(--default-clickable-area) / 2) 0 calc(var(--default-clickable-area) / 2) var(--default-clickable-area);\n\n\t\tbackground-position: #{$icon-margin} center;\n\t\tbackground-size: $icon-size;\n\t}\n\n\t// Forms & text inputs\n\t&__form {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tflex: 1 1 auto;\n\n\t\tmargin: $input-margin 0;\n\t\tpadding-inline-end: $icon-margin;\n\t}\n\n\t&__container {\n\t\tposition: relative;\n\t\twidth: 100%;\n\t}\n\n\t&__input-container {\n\t\tdisplay: flex;\n\n\t\t.colorpicker {\n\t\t\t&__trigger,\n\t\t\t&__preview {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\n\t\t\t&__preview {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 36px;\n\t\t\t\tborder-radius: var(--border-radius-element);\n\t\t\t\tborder: 2px solid var(--color-border-maxcontrast);\n\t\t\t\tbox-shadow: none !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__text-label {\n\t\tpadding: 4px 0;\n\t\tdisplay: block;\n\n\t\t&--hidden {\n\t\t\tposition: absolute;\n\t\t\tinset-inline-start: 0;\n\t\t\twidth: 1px;\n\t\t\theight: 1px;\n\t\t\toverflow: hidden;\n\t\t\tz-index: -1;\n\t\t\topacity: 0;\n\t\t}\n\t}\n\n\t&__datetimepicker {\n\t\twidth: 100%;\n\n\t\t:deep(.mx-input) {\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\n\t&__multi {\n\t\twidth: 100%;\n\t}\n}\n\n// if a form is the last of the list\n// add the same bottomMargin as the right padding\n// for visual balance\nli:last-child > .action-input {\n\tpadding-bottom: calc($icon-margin - $input-margin);\n}\n\n// same for first item\nli:first-child > .action-input:not(.action-input--visible-label) {\n\tpadding-top: calc($icon-margin - $input-margin);\n}\n\n</style>\n"],"names":["NcTextField","_createElementBlock","_createElementVNode","_renderSlot","_normalizeClass","_normalizeStyle","_openBlock","_createBlock","_mergeProps","_createVNode"],"mappings":"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"}

package/dist/chunks/{NcActions-CCXgfwjS.mjs → NcActions-BWDsG06k.mjs}

@@ -2,9 +2,9 @@ import '../assets/NcActions-DOI7rRa0.css';
 import { createElementBlock, openBlock, mergeProps, createElementVNode, createCommentVNode, toDisplayString, Comment, Fragment, Text, warn, h, computed } from "vue";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 import { u as useTrapStackControl } from "./useTrapStackControl-B6cEicto.mjs";
-import { r as register, F as t4, a as t } from "./_l10n-BSFzy-71.mjs";
+import { r as register, F as t4, a as t } from "./_l10n-Dq_eYxz_.mjs";
 import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
-import { N as NcButton } from "./NcButton-CzpKEx4V.mjs";
+import { N as NcButton } from "./NcButton-C9D47Igd.mjs";
 import { N as NcPopover } from "./NcPopover-OqcYrWOx.mjs";
 import { N as NC_ACTIONS_CLOSE_MENU, a as NC_ACTIONS_IS_SEMANTIC_MENU } from "./useNcActions-BzPO2c4h.mjs";
 const _sfc_main$1 = {
@@ -763,4 +763,4 @@ export {
   NcActions as N,
   isSlotPopulated as i
 };
-//# sourceMappingURL=NcActions-CCXgfwjS.mjs.map
+//# sourceMappingURL=NcActions-BWDsG06k.mjs.map