@nextcloud/vue 9.0.0-rc.4 → 9.0.0-rc.5

package/dist/assets/{NcTextArea-DoBYU3IE.css → NcTextArea-BLRA2iY6.css}

@@ -9,28 +9,28 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-5326da23] {
+.material-design-icon[data-v-d0fe3bf2] {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
-.textarea[data-v-5326da23] {
+.textarea[data-v-d0fe3bf2] {
   position: relative;
   width: 100%;
-  border-radius: var(--border-radius-large);
+  border-radius: var(--border-radius-element);
   margin-block-start: 6px;
   resize: vertical;
 }
-.textarea__main-wrapper[data-v-5326da23] {
+.textarea__main-wrapper[data-v-d0fe3bf2] {
   position: relative;
 }
-.textarea--disabled[data-v-5326da23] {
+.textarea--disabled[data-v-d0fe3bf2] {
   opacity: 0.7;
   filter: saturate(0.7);
 }
-.textarea__input[data-v-5326da23] {
+.textarea__input[data-v-d0fe3bf2] {
   margin: 0;
   padding-inline: 10px 6px;
   width: 100%;
@@ -40,39 +40,39 @@
   background-color: var(--color-main-background);
   color: var(--color-main-text);
   border: var(--border-width-input, 2px) solid var(--color-border-maxcontrast);
-  border-radius: var(--border-radius-large);
+  border-radius: var(--border-radius-element);
   cursor: pointer;
 }
-.textarea__input[data-v-5326da23]:active:not([disabled]), .textarea__input[data-v-5326da23]:hover:not([disabled]), .textarea__input[data-v-5326da23]:focus:not([disabled]) {
+.textarea__input[data-v-d0fe3bf2]:active:not([disabled]), .textarea__input[data-v-d0fe3bf2]:hover:not([disabled]), .textarea__input[data-v-d0fe3bf2]:focus:not([disabled]) {
   border-width: var(--border-width-input-focused, 2px);
   border-color: var(--color-main-text);
   box-shadow: 0 0 0 2px var(--color-main-background) !important;
 }
-.textarea__input[data-v-5326da23]:not(:focus, .textarea__input--label-outside)::placeholder {
+.textarea__input[data-v-d0fe3bf2]:not(:focus, .textarea__input--label-outside)::placeholder {
   opacity: 0;
 }
-.textarea__input[data-v-5326da23]:focus {
+.textarea__input[data-v-d0fe3bf2]:focus {
   cursor: text;
 }
-.textarea__input[data-v-5326da23]:disabled {
+.textarea__input[data-v-d0fe3bf2]:disabled {
   cursor: default;
 }
-.textarea__input[data-v-5326da23]:focus-visible {
+.textarea__input[data-v-d0fe3bf2]:focus-visible {
   box-shadow: unset !important;
 }
-.textarea__input--success[data-v-5326da23] {
+.textarea__input--success[data-v-d0fe3bf2] {
   border-color: var(--color-success) !important;
 }
-.textarea__input--success[data-v-5326da23]:focus-visible {
+.textarea__input--success[data-v-d0fe3bf2]:focus-visible {
   box-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;
 }
-.textarea__input--error[data-v-5326da23] {
+.textarea__input--error[data-v-d0fe3bf2] {
   border-color: var(--color-error) !important;
 }
-.textarea__input--error[data-v-5326da23]:focus-visible {
+.textarea__input--error[data-v-d0fe3bf2]:focus-visible {
   box-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;
 }
-.textarea__label[data-v-5326da23] {
+.textarea__label[data-v-d0fe3bf2] {
   position: absolute;
   margin-inline: 12px 0;
   max-width: fit-content;
@@ -85,7 +85,7 @@
   pointer-events: none;
   transition: 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);
 }
-.textarea__input:focus + .textarea__label[data-v-5326da23], .textarea__input:not(:placeholder-shown) + .textarea__label[data-v-5326da23] {
+.textarea__input:focus + .textarea__label[data-v-d0fe3bf2], .textarea__input:not(:placeholder-shown) + .textarea__label[data-v-d0fe3bf2] {
   inset-block-start: -10px;
   line-height: 1.5;
   font-size: 13px;
@@ -96,17 +96,17 @@
   margin-inline-start: 8px;
   transition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick);
 }
-.textarea__helper-text-message[data-v-5326da23] {
+.textarea__helper-text-message[data-v-d0fe3bf2] {
   padding-block: 4px;
   display: flex;
   align-items: center;
 }
-.textarea__helper-text-message__icon[data-v-5326da23] {
+.textarea__helper-text-message__icon[data-v-d0fe3bf2] {
   margin-inline-end: 8px;
 }
-.textarea__helper-text-message--error[data-v-5326da23] {
+.textarea__helper-text-message--error[data-v-d0fe3bf2] {
   color: var(--color-error-text);
 }
-.textarea__helper-text-message--success[data-v-5326da23] {
+.textarea__helper-text-message--success[data-v-d0fe3bf2] {
   color: var(--color-success-text);
 }

package/dist/assets/{NcUserStatusIcon-CtJLt6AU.css → NcUserStatusIcon-BcLND4gJ.css}

@@ -9,14 +9,14 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-350f3d1c] {
+.material-design-icon[data-v-96a66bf4] {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
-.user-status-icon[data-v-350f3d1c] {
+.user-status-icon[data-v-96a66bf4] {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -25,6 +25,6 @@
   max-width: 20px;
   max-height: 20px;
 }
-.user-status-icon--invisible[data-v-350f3d1c] {
+.user-status-icon--invisible[data-v-96a66bf4] {
   filter: var(--background-invert-if-dark);
 }

package/dist/assets/{referencePickerModal-DIHQ6_wW.css → referencePickerModal-D80hwmre.css}

@@ -26,40 +26,40 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-ad83a93d] {
+.material-design-icon[data-v-867e58fc] {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
-.provider-list[data-v-ad83a93d] {
+.provider-list[data-v-867e58fc] {
   width: 100%;
   min-height: 400px;
   padding: 0 16px 16px 16px;
   display: flex;
   flex-direction: column;
 }
-.provider-list--select[data-v-ad83a93d] {
+.provider-list--select[data-v-867e58fc] {
   width: 100%;
 }
-.provider-list--select .provider[data-v-ad83a93d] {
+.provider-list--select .provider[data-v-867e58fc] {
   display: flex;
   align-items: center;
   height: 28px;
   overflow: hidden;
 }
-.provider-list--select .provider .link-icon[data-v-ad83a93d] {
+.provider-list--select .provider .link-icon[data-v-867e58fc] {
   margin-inline-end: 8px;
 }
-.provider-list--select .provider .provider-icon[data-v-ad83a93d] {
+.provider-list--select .provider .provider-icon[data-v-867e58fc] {
   width: 20px;
   height: 20px;
   object-fit: contain;
   margin-inline-end: 8px;
   filter: var(--background-invert-if-dark);
 }
-.provider-list--select .provider .option-text[data-v-ad83a93d] {
+.provider-list--select .provider .option-text[data-v-867e58fc] {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -74,14 +74,14 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-236df0ce] {
+.material-design-icon[data-v-8285b115] {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
-.widget-custom[data-v-236df0ce] {
+.widget-custom[data-v-8285b115] {
   width: 100%;
   margin: auto;
   margin-bottom: calc(var(--default-grid-baseline, 4px) * 3);
@@ -92,12 +92,12 @@
   background-color: transparent;
   display: flex;
 }
-.widget-custom.full-width[data-v-236df0ce] {
+.widget-custom.full-width[data-v-8285b115] {
   width: var(--widget-full-width, 100%) !important;
   inset-inline-start: calc((var(--widget-full-width, 100%) - 100%) / 2 * -1);
   position: relative;
 }
-.widget-access[data-v-236df0ce] {
+.widget-access[data-v-8285b115] {
   width: 100%;
   margin: auto;
   margin-bottom: calc(var(--default-grid-baseline, 4px) * 3);
@@ -109,7 +109,7 @@
   display: flex;
   padding: calc(var(--default-grid-baseline, 4px) * 3);
 }
-.widget-default[data-v-236df0ce] {
+.widget-default[data-v-8285b115] {
   width: 100%;
   margin: auto;
   margin-bottom: calc(var(--default-grid-baseline, 4px) * 3);
@@ -120,42 +120,42 @@
   background-color: transparent;
   display: flex;
 }
-.widget-default--compact[data-v-236df0ce] {
+.widget-default--compact[data-v-8285b115] {
   flex-direction: column;
 }
-.widget-default--compact .widget-default--image[data-v-236df0ce] {
+.widget-default--compact .widget-default--image[data-v-8285b115] {
   width: 100%;
   height: 150px;
 }
-.widget-default--compact .widget-default--details[data-v-236df0ce] {
+.widget-default--compact .widget-default--details[data-v-8285b115] {
   width: 100%;
   padding-top: calc(var(--default-grid-baseline, 4px) * 2);
   padding-bottom: calc(var(--default-grid-baseline, 4px) * 2);
 }
-.widget-default--compact .widget-default--description[data-v-236df0ce] {
+.widget-default--compact .widget-default--description[data-v-8285b115] {
   display: none;
 }
-.widget-default--image[data-v-236df0ce] {
+.widget-default--image[data-v-8285b115] {
   width: 40%;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
 }
-.widget-default--name[data-v-236df0ce] {
+.widget-default--name[data-v-8285b115] {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-weight: bold;
 }
-.widget-default--details[data-v-236df0ce] {
+.widget-default--details[data-v-8285b115] {
   padding: calc(var(--default-grid-baseline, 4px) * 3);
   width: 60%;
 }
-.widget-default--details p[data-v-236df0ce] {
+.widget-default--details p[data-v-8285b115] {
   margin: 0;
   padding: 0;
 }
-.widget-default--description[data-v-236df0ce] {
+.widget-default--description[data-v-8285b115] {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
@@ -163,16 +163,16 @@
   line-clamp: 3; /* stylelint-disable-line property-no-unknown */
   -webkit-box-orient: vertical;
 }
-.widget-default--link[data-v-236df0ce] {
+.widget-default--link[data-v-8285b115] {
   color: var(--color-text-maxcontrast);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.toggle-interactive[data-v-236df0ce] {
+.toggle-interactive[data-v-8285b115] {
   position: relative;
 }
-.toggle-interactive .toggle-interactive--button[data-v-236df0ce] {
+.toggle-interactive .toggle-interactive--button[data-v-8285b115] {
   position: absolute;
   bottom: var(--default-grid-baseline);
   inset-inline-end: var(--default-grid-baseline);
@@ -188,14 +188,14 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-22bb0aaa] {
+.material-design-icon[data-v-4c1766c7] {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
-.raw-link[data-v-22bb0aaa] {
+.raw-link[data-v-4c1766c7] {
   width: 100%;
   min-height: 350px;
   display: flex;
@@ -203,19 +203,19 @@
   overflow-y: auto;
   padding: 0 16px 16px 16px;
 }
-.raw-link .input-wrapper[data-v-22bb0aaa] {
+.raw-link .input-wrapper[data-v-4c1766c7] {
   width: 100%;
 }
-.raw-link .reference-widget[data-v-22bb0aaa] {
+.raw-link .reference-widget[data-v-4c1766c7] {
   display: flex;
 }
-.raw-link--empty-content .provider-icon[data-v-22bb0aaa] {
+.raw-link--empty-content .provider-icon[data-v-4c1766c7] {
   width: 150px;
   height: 150px;
   object-fit: contain;
   filter: var(--background-invert-if-dark);
 }
-.raw-link--input[data-v-22bb0aaa] {
+.raw-link--input[data-v-4c1766c7] {
   width: 99%;
 }/**
  * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
@@ -271,47 +271,47 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-c1841318] {
+.material-design-icon[data-v-17458277] {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
-.smart-picker-search[data-v-c1841318] {
+.smart-picker-search[data-v-17458277] {
   width: 100%;
   display: flex;
   flex-direction: column;
   padding: 0 16px 16px 16px;
 }
-.smart-picker-search.with-empty-content[data-v-c1841318] {
+.smart-picker-search.with-empty-content[data-v-17458277] {
   min-height: 400px;
 }
-.smart-picker-search .provider-icon[data-v-c1841318] {
+.smart-picker-search .provider-icon[data-v-17458277] {
   width: 150px;
   height: 150px;
   object-fit: contain;
   filter: var(--background-invert-if-dark);
 }
-.smart-picker-search--select[data-v-c1841318] {
+.smart-picker-search--select[data-v-17458277] {
   width: 100%;
 }
-.smart-picker-search--select .search-result[data-v-c1841318] {
+.smart-picker-search--select .search-result[data-v-17458277] {
   width: 100%;
 }
-.smart-picker-search--select .group-name-icon[data-v-c1841318],
-.smart-picker-search--select .option-simple-icon[data-v-c1841318] {
+.smart-picker-search--select .group-name-icon[data-v-17458277],
+.smart-picker-search--select .option-simple-icon[data-v-17458277] {
   width: 20px;
   height: 20px;
   margin: 0 20px 0 10px;
 }
-.smart-picker-search--select .custom-option[data-v-c1841318] {
+.smart-picker-search--select .custom-option[data-v-17458277] {
   height: var(--default-clickable-area);
   display: flex;
   align-items: center;
   overflow: hidden;
 }
-.smart-picker-search--select .option-text[data-v-c1841318] {
+.smart-picker-search--select .option-text[data-v-17458277] {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -378,14 +378,14 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-4d850eac] {
+.material-design-icon[data-v-2a52b076] {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
-.reference-picker-modal--content[data-v-4d850eac] {
+.reference-picker-modal--content[data-v-2a52b076] {
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -393,21 +393,21 @@
   justify-content: center;
   overflow-y: auto;
 }
-.reference-picker-modal--content .close-button[data-v-4d850eac],
-.reference-picker-modal--content .back-button[data-v-4d850eac] {
+.reference-picker-modal--content .close-button[data-v-2a52b076],
+.reference-picker-modal--content .back-button[data-v-2a52b076] {
   position: absolute;
   top: 4px;
 }
-.reference-picker-modal--content .back-button[data-v-4d850eac] {
+.reference-picker-modal--content .back-button[data-v-2a52b076] {
   inset-inline-start: 4px;
 }
-.reference-picker-modal--content .close-button[data-v-4d850eac] {
+.reference-picker-modal--content .close-button[data-v-2a52b076] {
   inset-inline-end: 4px;
 }
-.reference-picker-modal--content > h2[data-v-4d850eac] {
+.reference-picker-modal--content > h2[data-v-2a52b076] {
   display: flex;
   margin: 12px 0 20px 0;
 }
-.reference-picker-modal--content > h2 .icon[data-v-4d850eac] {
+.reference-picker-modal--content > h2 .icon[data-v-2a52b076] {
   margin-inline-end: 8px;
 }

package/dist/chunks/{NcActionButtonGroup-BVbWDFaC.mjs → NcActionButtonGroup-zqttoOi7.mjs}

@@ -1,7 +1,7 @@
-import '../assets/NcActionButtonGroup-BND4GQdv.css';
+import '../assets/NcActionButtonGroup-BLIEEeG3.css';
 import { defineComponent, createElementBlock, openBlock, createCommentVNode, createElementVNode, toDisplayString, renderSlot } from "vue";
 import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
-import { r as register, a as t } from "./_l10n-tXci8WM1.mjs";
+import { r as register, a as t } from "./_l10n-_R1HqC4N.mjs";
 import { a as NC_ACTIONS_IS_SEMANTIC_MENU } from "./useNcActions-CiGWxAJE.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 register();
@@ -57,4 +57,4 @@ const NcActionButtonGroup = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _
 export {
   NcActionButtonGroup as N
 };
-//# sourceMappingURL=NcActionButtonGroup-BVbWDFaC.mjs.map
+//# sourceMappingURL=NcActionButtonGroup-zqttoOi7.mjs.map

package/dist/chunks/{NcActionButtonGroup-BVbWDFaC.mjs.map → NcActionButtonGroup-zqttoOi7.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcActionButtonGroup-BVbWDFaC.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<AlignLeft :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<AlignCenter :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<AlignRight :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<Plus :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 AlignLeft from 'vue-material-design-icons/AlignHorizontalLeft'\nimport AlignRight from 'vue-material-design-icons/AlignHorizontalRight'\nimport AlignCenter from 'vue-material-design-icons/AlignHorizontalCenter'\nimport Plus from 'vue-material-design-icons/Plus'\n\nexport default {\n\tcomponents: {\n\t\tAlignLeft,\n\t\tAlignRight,\n\t\tAlignCenter,\n\t\tPlus,\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 { createElementId } from '../../utils/createElementId.ts'\nimport { t } from '../../l10n.js'\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\">\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\tli {\n\t\t\tflex: 1 1;\n\t\t}\n\n\t\t.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-large);\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","_toDisplayString","_createCommentVNode","_createElementVNode","_renderSlot"],"mappings":";;;;;;AAgGA,MAAK,YAAa,gBAAa;AAAA,EAC9B,MAAM;AAAA,EAEN,QAAQ;AAAA,IACP,kBAAkB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,MAAM;AAAA,MACL,UAAU;AAAA,MACV,SAAS;AAAA,MACT,MAAM;AAAA,IACN;AAAA,EACD;AAAA,EAED,QAAQ;AACP,WAAO;AAAA,MACN,SAAS,gBAAiB;AAAA,IAC3B;AAAA,EACA;AAAA,EAED,SAAS;AAAA,IACR;AAAA,EACA;AACF,CAAC;AA9HD,MAAA,aAAA,CAAA,MAAA;AAAA,MAAA,aAAA,CAAA,IAAA;AAAA,MAAA,aAAA,CAAA,iBAAA;;sBA6ECA,mBAOK,MAAA;AAAA,IAPD,OAAM;AAAA,IAAwB,MAAM,KAAgB,oBAAA;AAAA;IAC5C,KAAI,qBAAfA,mBAEM,OAAA;AAAA,MAhFR,KAAA;AAAA,MA8EoB,IAAI,KAAO;AAAA,IACzB,GAAAC,gBAAA,KAAA,IAAI,GA/EV,GAAA,UAAA,KAAAC,mBAAA,IAAA,IAAA;AAAA,IAiFEC,mBAEK,MAAA;AAAA,MAFD,OAAM;AAAA,MAA0B,MAAK;AAAA,MAAS,mBAAiB,KAAA,OAAO,KAAA,UAAU;AAAA;MACnFC,WAAQ,KAAA,QAAA,SAAA;AAAA,IAlFX,GAAA,GAAA,UAAA;AAAA,EAAA,GAAA,GAAA,UAAA;;;"}
+{"version":3,"file":"NcActionButtonGroup-zqttoOi7.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<AlignLeft :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<AlignCenter :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<AlignRight :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<Plus :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 AlignLeft from 'vue-material-design-icons/AlignHorizontalLeft'\nimport AlignRight from 'vue-material-design-icons/AlignHorizontalRight'\nimport AlignCenter from 'vue-material-design-icons/AlignHorizontalCenter'\nimport Plus from 'vue-material-design-icons/Plus'\n\nexport default {\n\tcomponents: {\n\t\tAlignLeft,\n\t\tAlignRight,\n\t\tAlignCenter,\n\t\tPlus,\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 { createElementId } from '../../utils/createElementId.ts'\nimport { t } from '../../l10n.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\">\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\tli {\n\t\t\tflex: 1 1;\n\t\t}\n\n\t\t.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","_toDisplayString","_createCommentVNode","_createElementVNode","_renderSlot"],"mappings":";;;;;;AAgGA,MAAK,YAAa,gBAAa;AAAA,EAC9B,MAAM;AAAA,EAEN,QAAQ;AAAA,IACP,kBAAkB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,MAAM;AAAA,MACL,UAAU;AAAA,MACV,SAAS;AAAA,MACT,MAAM;AAAA,IACN;AAAA,EACD;AAAA,EAED,QAAQ;AACP,WAAO;AAAA,MACN,SAAS,gBAAiB;AAAA,IAC3B;AAAA,EACA;AAAA,EAED,SAAS;AAAA,IACR;AAAA,EACA;AACF,CAAC;AA9HD,MAAA,aAAA,CAAA,MAAA;AAAA,MAAA,aAAA,CAAA,IAAA;AAAA,MAAA,aAAA,CAAA,iBAAA;;sBA6ECA,mBAOK,MAAA;AAAA,IAPD,OAAM;AAAA,IAAwB,MAAM,KAAgB,oBAAA;AAAA;IAC5C,KAAI,qBAAfA,mBAEM,OAAA;AAAA,MAhFR,KAAA;AAAA,MA8EoB,IAAI,KAAO;AAAA,IACzB,GAAAC,gBAAA,KAAA,IAAI,GA/EV,GAAA,UAAA,KAAAC,mBAAA,IAAA,IAAA;AAAA,IAiFEC,mBAEK,MAAA;AAAA,MAFD,OAAM;AAAA,MAA0B,MAAK;AAAA,MAAS,mBAAiB,KAAA,OAAO,KAAA,UAAU;AAAA;MACnFC,WAAQ,KAAA,QAAA,SAAA;AAAA,IAlFX,GAAA,GAAA,UAAA;AAAA,EAAA,GAAA,GAAA,UAAA;;;"}

package/dist/chunks/{NcActionInput-B_f8z2fo.mjs → NcActionInput-uNqbQcU9.mjs}

@@ -1,13 +1,13 @@
-import '../assets/NcActionInput-BA67jS1l.css';
-import { N as NcColorPicker } from "./NcColorPicker-BNpZzN-p.mjs";
-import { N as NcDateTimePicker } from "./NcDateTimePicker-CKOTExmB.mjs";
-import { N as NcDateTimePickerNative } from "./NcDateTimePickerNative-NVYPDSmf.mjs";
-import { N as NcPasswordField } from "./NcPasswordField-w13_Lpyn.mjs";
-import { N as NcSelect } from "./NcSelect-D6XzjG4n.mjs";
-import { _ as _sfc_main$1 } from "./NcTextField.vue_vue_type_script_setup_true_lang-B65hrkLW.mjs";
+import '../assets/NcActionInput-BZCvMPVy.css';
+import { N as NcColorPicker } from "./NcColorPicker-BRIu0Qel.mjs";
+import { N as NcDateTimePicker } from "./NcDateTimePicker-Dliaj0xD.mjs";
+import { N as NcDateTimePickerNative } from "./NcDateTimePickerNative-CEm70Aaw.mjs";
+import { N as NcPasswordField } from "./NcPasswordField-JRyxT6wU.mjs";
+import { N as NcSelect } from "./NcSelect-DlAtugnK.mjs";
+import { _ as _sfc_main$1 } from "./NcTextField.vue_vue_type_script_setup_true_lang-DM5tkqJq.mjs";
 import { A as ActionGlobalMixin } from "./actionGlobal-BZFdtdJL.mjs";
 import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
-import { r as register, e as t45, a as t } from "./_l10n-tXci8WM1.mjs";
+import { r as register, e as t45, a as t } from "./_l10n-_R1HqC4N.mjs";
 import { resolveComponent, createElementBlock, openBlock, normalizeClass, createElementVNode, renderSlot, normalizeStyle, withModifiers, createCommentVNode, toDisplayString, createBlock, mergeProps, createVNode, withCtx } from "vue";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 register(t45);
@@ -345,8 +345,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ], 34)
   ], 2);
 }
-const NcActionInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-5352b9fa"]]);
+const NcActionInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-912c4f6f"]]);
 export {
   NcActionInput as N
 };
-//# sourceMappingURL=NcActionInput-B_f8z2fo.mjs.map
+//# sourceMappingURL=NcActionInput-uNqbQcU9.mjs.map

package/dist/chunks/{NcActionInput-B_f8z2fo.mjs.map → NcActionInput-uNqbQcU9.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcActionInput-B_f8z2fo.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<Pencil :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<Pencil :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<Pencil :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<Key :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<Key :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<Eyedropper :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<Pencil :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<Close :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput type=\"date\" isNativePicker v-model=\"date\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Pencil :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<Pencil :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<Pencil :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<Pencil :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 Close from 'vue-material-design-icons/Close'\n\timport Eyedropper from 'vue-material-design-icons/Eyedropper'\n\timport Key from 'vue-material-design-icons/Key'\n\timport Pencil from 'vue-material-design-icons/Pencil'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tClose,\n\t\t\tEyedropper,\n\t\t\tKey,\n\t\t\tPencil,\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 :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\tclass=\"action-input\"\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 :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\t\taria-hidden=\"true\"\n\t\t\t\t\t\tclass=\"action-input__icon\" />\n\t\t\t\t</slot>\n\t\t\t</span>\n\n\t\t\t<!-- form and input -->\n\t\t\t<form ref=\"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 v-if=\"label && labelOutside\"\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 v-if=\"datePickerType\"\n\t\t\t\t\t\t\tref=\"datetimepicker\"\n\t\t\t\t\t\t\t:model-value=\"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:input-class=\"['mx-input', { 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:model-value=\"onUpdateModelValue\" />\n\n\t\t\t\t\t\t<NcDateTimePickerNative v-else-if=\"isNativePicker\"\n\t\t\t\t\t\t\t:id=\"idNativeDateTimePicker\"\n\t\t\t\t\t\t\t:model-value=\"modelValue\"\n\t\t\t\t\t\t\t:type=\"nativeDatePickerType\"\n\t\t\t\t\t\t\t:input-class=\"{ 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:model-value=\"onUpdateModelValue\" />\n\n\t\t\t\t\t\t<NcSelect v-else-if=\"isMultiselectType\"\n\t\t\t\t\t\t\t:model-value=\"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:append-to-body=\"false\"\n\t\t\t\t\t\t\t:input-class=\"{ 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:model-value=\"onUpdateModelValue\" />\n\n\t\t\t\t\t\t<NcPasswordField v-else-if=\"type==='password'\"\n\t\t\t\t\t\t\t:id=\"inputId\"\n\t\t\t\t\t\t\t:model-value=\"modelValue\"\n\t\t\t\t\t\t\t:label=\"label\"\n\t\t\t\t\t\t\t:label-outside=\"!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:input-class=\"{ focusable: isFocusable }\"\n\t\t\t\t\t\t\t:show-trailing-button=\"showTrailingButton && !disabled\"\n\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\t@update:model-value=\"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 v-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 id=\"inputId\"\n\t\t\t\t\t\t\t\t\t:model-value=\"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:model-value=\"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 :style=\"{'background-color': modelValue}\"\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</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 v-else\n\t\t\t\t\t\t\t:id=\"inputId\"\n\t\t\t\t\t\t\t:model-value=\"modelValue\"\n\t\t\t\t\t\t\t:label=\"label\"\n\t\t\t\t\t\t\t:label-outside=\"!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:input-class=\"{ focusable: isFocusable }\"\n\t\t\t\t\t\t\t:type=\"type\"\n\t\t\t\t\t\t\ttrailing-button-icon=\"arrowRight\"\n\t\t\t\t\t\t\t:trailing-button-label=\"trailingButtonLabel\"\n\t\t\t\t\t\t\t:show-trailing-button=\"showTrailingButton && !disabled\"\n\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\t@trailing-button-click=\"$refs.form.requestSubmit()\"\n\t\t\t\t\t\t\t@update:model-value=\"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 NcColorPicker from '../NcColorPicker/index.ts'\nimport NcDateTimePicker from '../NcDateTimePicker/index.js'\nimport NcDateTimePickerNative from '../NcDateTimePickerNative/index.ts'\nimport NcPasswordField from '../NcPasswordField/index.ts'\nimport NcSelect from '../NcSelect/index.js'\nimport NcTextField from '../NcTextField/index.ts'\nimport ActionGlobalMixin from '../../mixins/actionGlobal.js'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { t } from '../../l10n.js'\n\nexport default {\n\tname: 'NcActionInput',\n\n\tcomponents: {\n\t\tNcColorPicker,\n\t\tNcDateTimePicker,\n\t\tNcDateTimePickerNative,\n\t\tNcPasswordField,\n\t\tNcSelect,\n\t\tNcTextField,\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\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\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\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 ['date', 'datetime-local', 'month', 'multiselect',\n\t\t\t\t\t'number', 'password', 'search', 'tel',\n\t\t\t\t\t'text', 'time', 'url', 'week', 'color',\n\t\t\t\t\t'email'].indexOf(type) > -1\n\t\t\t},\n\t\t},\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\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\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\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\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\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\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\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\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\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 (error) {\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\tcase 'date':\n\t\t\tcase 'month':\n\t\t\tcase 'time':\n\t\t\tcase 'week':\n\t\t\tcase 'datetime-local':\n\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\tcase 'date':\n\t\t\t\tcase 'month':\n\t\t\t\tcase 'time':\n\t\t\t\t\treturn this.type\n\n\t\t\t\tcase 'datetime-local':\n\t\t\t\t\treturn 'datetime'\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn false\n\t\t},\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\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\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-large);\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","_normalizeClass","_createElementVNode","_renderSlot","_normalizeStyle","_withModifiers","_toDisplayString","_createCommentVNode","_openBlock","_createBlock","_mergeProps","_createVNode","_withCtx"],"mappings":"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"}
+{"version":3,"file":"NcActionInput-uNqbQcU9.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<Pencil :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<Pencil :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<Pencil :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<Key :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<Key :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<Eyedropper :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<Pencil :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<Close :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput type=\"date\" isNativePicker v-model=\"date\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Pencil :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<Pencil :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<Pencil :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<Pencil :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 Close from 'vue-material-design-icons/Close'\n\timport Eyedropper from 'vue-material-design-icons/Eyedropper'\n\timport Key from 'vue-material-design-icons/Key'\n\timport Pencil from 'vue-material-design-icons/Pencil'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tClose,\n\t\t\tEyedropper,\n\t\t\tKey,\n\t\t\tPencil,\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 :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\tclass=\"action-input\"\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 :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\t\taria-hidden=\"true\"\n\t\t\t\t\t\tclass=\"action-input__icon\" />\n\t\t\t\t</slot>\n\t\t\t</span>\n\n\t\t\t<!-- form and input -->\n\t\t\t<form ref=\"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 v-if=\"label && labelOutside\"\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 v-if=\"datePickerType\"\n\t\t\t\t\t\t\tref=\"datetimepicker\"\n\t\t\t\t\t\t\t:model-value=\"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:input-class=\"['mx-input', { 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:model-value=\"onUpdateModelValue\" />\n\n\t\t\t\t\t\t<NcDateTimePickerNative v-else-if=\"isNativePicker\"\n\t\t\t\t\t\t\t:id=\"idNativeDateTimePicker\"\n\t\t\t\t\t\t\t:model-value=\"modelValue\"\n\t\t\t\t\t\t\t:type=\"nativeDatePickerType\"\n\t\t\t\t\t\t\t:input-class=\"{ 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:model-value=\"onUpdateModelValue\" />\n\n\t\t\t\t\t\t<NcSelect v-else-if=\"isMultiselectType\"\n\t\t\t\t\t\t\t:model-value=\"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:append-to-body=\"false\"\n\t\t\t\t\t\t\t:input-class=\"{ 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:model-value=\"onUpdateModelValue\" />\n\n\t\t\t\t\t\t<NcPasswordField v-else-if=\"type==='password'\"\n\t\t\t\t\t\t\t:id=\"inputId\"\n\t\t\t\t\t\t\t:model-value=\"modelValue\"\n\t\t\t\t\t\t\t:label=\"label\"\n\t\t\t\t\t\t\t:label-outside=\"!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:input-class=\"{ focusable: isFocusable }\"\n\t\t\t\t\t\t\t:show-trailing-button=\"showTrailingButton && !disabled\"\n\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\t@update:model-value=\"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 v-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 id=\"inputId\"\n\t\t\t\t\t\t\t\t\t:model-value=\"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:model-value=\"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 :style=\"{'background-color': modelValue}\"\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</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 v-else\n\t\t\t\t\t\t\t:id=\"inputId\"\n\t\t\t\t\t\t\t:model-value=\"modelValue\"\n\t\t\t\t\t\t\t:label=\"label\"\n\t\t\t\t\t\t\t:label-outside=\"!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:input-class=\"{ focusable: isFocusable }\"\n\t\t\t\t\t\t\t:type=\"type\"\n\t\t\t\t\t\t\ttrailing-button-icon=\"arrowRight\"\n\t\t\t\t\t\t\t:trailing-button-label=\"trailingButtonLabel\"\n\t\t\t\t\t\t\t:show-trailing-button=\"showTrailingButton && !disabled\"\n\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\t@trailing-button-click=\"$refs.form.requestSubmit()\"\n\t\t\t\t\t\t\t@update:model-value=\"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 NcColorPicker from '../NcColorPicker/index.ts'\nimport NcDateTimePicker from '../NcDateTimePicker/index.js'\nimport NcDateTimePickerNative from '../NcDateTimePickerNative/index.ts'\nimport NcPasswordField from '../NcPasswordField/index.ts'\nimport NcSelect from '../NcSelect/index.js'\nimport NcTextField from '../NcTextField/index.ts'\nimport ActionGlobalMixin from '../../mixins/actionGlobal.js'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { t } from '../../l10n.ts'\n\nexport default {\n\tname: 'NcActionInput',\n\n\tcomponents: {\n\t\tNcColorPicker,\n\t\tNcDateTimePicker,\n\t\tNcDateTimePickerNative,\n\t\tNcPasswordField,\n\t\tNcSelect,\n\t\tNcTextField,\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\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\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\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 ['date', 'datetime-local', 'month', 'multiselect',\n\t\t\t\t\t'number', 'password', 'search', 'tel',\n\t\t\t\t\t'text', 'time', 'url', 'week', 'color',\n\t\t\t\t\t'email'].indexOf(type) > -1\n\t\t\t},\n\t\t},\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\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\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\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\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\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\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\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\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\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 (error) {\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\tcase 'date':\n\t\t\tcase 'month':\n\t\t\tcase 'time':\n\t\t\tcase 'week':\n\t\t\tcase 'datetime-local':\n\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\tcase 'date':\n\t\t\t\tcase 'month':\n\t\t\t\tcase 'time':\n\t\t\t\t\treturn this.type\n\n\t\t\t\tcase 'datetime-local':\n\t\t\t\t\treturn 'datetime'\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn false\n\t\t},\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\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\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","_normalizeClass","_createElementVNode","_renderSlot","_normalizeStyle","_withModifiers","_toDisplayString","_createCommentVNode","_openBlock","_createBlock","_mergeProps","_createVNode","_withCtx"],"mappings":"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"}