@nextcloud/vue 8.0.0-beta.8 → 8.0.0

package/CHANGELOG.md

@@ -2,8 +2,8 @@
 
 All notable changes to this project will be documented in this file.
 
-## v8 **Unreleased** (beta)
-[Full Changelog](https://github.com/nextcloud-libraries/nextcloud-vue/compare/v7.11.2...v8.0.0-beta.6)
+## [v8.0.0](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v8.0.0) (2023-11-08)
+[Full Changelog](https://github.com/nextcloud-libraries/nextcloud-vue/compare/v7.11.2...v8.0.0)
 
 ### :boom: Breaking changes
 - Update node engines to next LTS (node 20 / npm 9)
@@ -28,6 +28,8 @@ All notable changes to this project will be documented in this file.
 - feat(NcIconSvgWrapper)!: remove ID from svg [\#4607](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4607) ([ShGKme](https://github.com/ShGKme))
 
 ### :rocket: Enhancements
+- feat(NcAppSettingsDialog): Allow to add icons to the navigation sections [\#4745](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4745) ([susnux](https://github.com/susnux))
+- feat(NcButton): Allow to format text of button [\#4367](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4367) ([susnux](https://github.com/susnux))
 - enh\(NcDatetime\): New component for displaying timestamps as time relative from now [\#4219](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4219) ([susnux](https://github.com/susnux))
 - feat\(NcInputField\): Append custom aria-describedby to input field [\#4225](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4225) ([Pytal](https://github.com/Pytal))
 - feat\(NcNoteCard\): Add new 'info' version to display informational messaged [\#4063](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4063) ([moan0s](https://github.com/moan0s))
@@ -49,6 +51,18 @@ All notable changes to this project will be documented in this file.
 - enh(NcAppNavigationCaption): Forward listeners [\#4494](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4494) ([Pytal](https://github.com/Pytal))
 - enh(a11y): Use button as header menu trigger [\#4481](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4481) ([Pytal](https://github.com/Pytal))
 - enh(a11y): Add nav to header menu [\#4487](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4487) ([Pytal](https://github.com/Pytal))
+- feat(NcIconSvgWrapper): allow to render raw svg paths [\#4643](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4643) ([raimund-schluessler](https://github.com/raimund-schluessler))
+- feat(NcDialog): New component (moved from `@nextcloud/dialogs`) [\#4550](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4550) ([susnux](https://github.com/susnux))
+- feat(NcSelect): Allow to filter users by email notation [\#4653](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4653) ([susnux](https://github.com/susnux))
+- enh(NcAppSidebarTabs): Make tab navigation accessible [\#4663](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4663) ([Pytal](https://github.com/Pytal))
+- Add the resource type on RelatedResourcesPanel [\#4662](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4662) ([GretaD](https://github.com/GretaD))
+- feat(NcTextArea): implement new textarea component [\#4605](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4605) ([st3iny](https://github.com/st3iny))
+- Add header prop to NcRelatedResourcesPanel [\#4703](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4703) ([GretaD](https://github.com/GretaD)
+- feat(NcAppNavigationItem): Add `active` property to set active state & use `aria-current` [\#4716](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4716) ([susnux](https://github.com/susnux)
+- feat(NcActionButton): support menu styling  [\#4724](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4724) ([skjnldsv](https://github.com/skjnldsv)
+- Made description dynamic on related resources [\#4729](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4729) ([GretaD](https://github.com/GretaD)
+- fix(NcTimezonePicker): Allow to set ID of inner select component [\#4734](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4734) ([susnux](https://github.com/susnux)
+- Allow preventing link insertion in RichContentEditable [\#3890](https://github.com/nextcloud-libraries/nextcloud-vue/pull/3890) ([julien-nc](https://github.com/julien-nc)
 
 ### :bug: Fixed bugs
 - fix\(NcSettingsSelectGroup\): Migrate from deprecated `NcMultiselect` to `NcSelect` [\#4120](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4120) ([susnux](https://github.com/susnux))
@@ -125,6 +139,54 @@ All notable changes to this project will be documented in this file.
 - fix: handling of empty values in NcDateTimePickerNative [\#4540](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4540) ([st3iny](https://github.com/st3iny))
 - fix(NcIconSvgWrapper): remove new keepId prop [\#4609](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4609) ([ShGKme](https://github.com/ShGKme))
 - fix(NcInputField): Adjust styling of the internal label [\#4578](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4578) ([susnux](https://github.com/susnux))
+- fix: invert datepicker buttons on dark mode [\#4618](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4618) ([raimund-schluessler](https://github.com/raimund-schluessler))
+- fix(NcListItem): adjust paddings and hover styles for list items [\#4628](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4628) ([Antreesy](https://github.com/Antreesy))
+- fix(NcActionInput): Set default trailing button label [\#4632](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4632) ([Pytal](https://github.com/Pytal))
+- fix(NcAvatar): Ensure the aria label includes the status if there is any visible status indicator [\#4593](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4593) ([susnux](https://github.com/susnux))
+- fix(NcAppNavigationItem): Ensure primary styling when the item is active [\#4650](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4650) ([susnux](https://github.com/susnux))
+- fix(NcModal): Some modal improvments [\#4645](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4645) ([susnux](https://github.com/susnux))
+- fix(NcActions): Various accessibility improvements [\#4648](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4648) ([Pytal](https://github.com/Pytal))
+- Fix NcBreadcrumbs styles to wrap buttons [\#4640](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4640) ([JuliaKirschenheuter](https://github.com/JuliaKirschenheuter))
+- fix(NcDashboardWidgetItem): do not assign href="" with empty link [\#4672](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4672) ([ShGKme](https://github.com/ShGKme))
+- fix(NcActions): do not pass popoverBaseClass as an attr to NcPopover [\#4673](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4673) ([ShGKme](https://github.com/ShGKme))
+- fix(NcActions): Allow to set attributes to inline actions [\#4671](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4671) ([susnux](https://github.com/susnux))
+- fix(NcAvatar): make it a span phrasing element [\#4674](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4674) ([ShGKme](https://github.com/ShGKme))
+- fix: Avoid closing all modals on escape if multiple are present [\#4677](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4677) ([juliushaertl](https://github.com/juliushaertl))
+- fix: If a aria-selected button is present we focus on this one instead of the first entry [\#4678](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4678) ([juliushaertl](https://github.com/juliushaertl))
+- fix(NcCheckboxRadioSwitch): Restore wrapper element prop [\#4679](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4679) ([Pytal](https://github.com/Pytal))
+- fix(Nc*Field): do not pass all props to InputField BY filtering $props [\#4666](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4666) ([ShGKme](https://github.com/ShGKme))
+- fix(NcDialog): NcModal registration [\#4682](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4682) ([Pytal](https://github.com/Pytal))
+- fix: remove empty attributes values [\#4686](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4686) ([ShGKme](https://github.com/ShGKme))
+- fix(dialog): fix component registration [\#4685](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4685) ([ShGKme](https://github.com/ShGKme))
+- fix(NcCheckboxRadioSwitch): fix circular import [\#4691](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4691) ([raimund-schluessler](https://github.com/raimund-schluessler)
+- fix(NcCheckboxRadioSwitch): forward indeterminate prop [\#4690](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4690) ([raimund-schluessler](https://github.com/raimund-schluessler)
+- Change heading in EmptyContent to `span` [\#4702](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4702) ([JuliaKirschenheuter](https://github.com/JuliaKirschenheuter)
+- fix(NcRelatedResourcesPanel): t is not defined [\#4705](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4705) ([raimund-schluessler](https://github.com/raimund-schluessler)
+- fix(NcAppNavigationItem): Do not include `aria-expanded` attribute if there are no children [\#4715](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4715) ([susnux](https://github.com/susnux)
+- fix(NcDialog): register components in NcDialogButton [\#4725](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4725) ([ShGKme](https://github.com/ShGKme)
+- fix(NcActions): Detect navigation menu links correctly [\#4707](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4707) ([Pytal](https://github.com/Pytal)
+- fix(NcSelect): Ensure selected option has enough contrast when the menu is opened [\#4733](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4733) ([susnux](https://github.com/susnux)
+- fix(NcEmptyContent): Fix regression that changed the color of the description text [\#4735](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4735) ([susnux](https://github.com/susnux)
+- fix(NcAppContent): Set normal scrollbar width on resizeable NcAppContentList [\#4710](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4710) ([mejo-](https://github.com/mejo-)
+- fix(NcAvatar): Improve initials generation to filter out special characters [\#4737](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4737) ([susnux](https://github.com/susnux)
+- fix(NcAvatar): remove alt attr from span[role=img] [\#4748](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4748) ([ShGKme](https://github.com/ShGKme)
+- fix(NcSidebarTab): Ensure there is an `aria-label` if the `aria-labelledby` element does not exist [\#4736](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4736) ([susnux](https://github.com/susnux)
+- add scoped to all ncappnavigation components [\#4730](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4730) ([szaimen](https://github.com/szaimen)
+- Create outline for `focus-within` on RadioSwitch [\#4699](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4699) ([JuliaKirschenheuter](https://github.com/JuliaKirschenheuter)
+- fix: NcUserBubble properties [\#4743](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4743) ([susnux](https://github.com/susnux)
+- fix(NcUserBubble): only forward necessary props [\#4756](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4756) ([raimund-schluessler](https://github.com/raimund-schluessler)
+- fix(NcInputField): Bring input field height to 44px and fixes its focus feedback [\#4718](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4718) ([marcoambrosini](https://github.com/marcoambrosini)
+- fix(NcTimezonePicker): Add correct `aria-label` [\#4762](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4762) ([susnux](https://github.com/susnux)
+- Fix input field trailing button alignment [\#4770](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4770) ([marcoambrosini](https://github.com/marcoambrosini)
+- fix(NcSelectTags): Allow object type value [\#4771](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4771) ([Pytal](https://github.com/Pytal)
+- fix(NcAppNavigation): Ensure `--app-navigation-padding` is set also on app-content [\#4776](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4776) ([susnux](https://github.com/susnux)
+- fix(NcAppNavigation): add focus trap on mobile and improve a11y [\#4633](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4633) ([ShGKme](https://github.com/ShGKme)
+- fix(NcAppNavigation): small screen support [\#4767](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4767) ([ShGKme](https://github.com/ShGKme)
+### Other Changes
+- Updates for project Nextcloud vue library [\#4757](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4757) ([transifex-integration](https://github.com/transifex-integration)
+- Change styles for focused Select [\#4728](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4728) ([JuliaKirschenheuter](https://github.com/JuliaKirschenheuter)
+- feat(NcActions): focus the first action again if no action have a focus after render [\#4775](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4775) ([skjnldsv](https://github.com/skjnldsv)
+- fix(NcAppNavigation): remove background square connecting toggle and navigation [\#4779](https://github.com/nextcloud-libraries/nextcloud-vue/pull/4779) ([ShGKme](https://github.com/ShGKme)
 
 ## [v7.11.2](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v7.11.2) (2023-05-05)
 

package/dist/Components/NcActionButton.cjs

@@ -1,8 +1,11 @@
-var _ = require("../assets/index-becfbea7.css");
-const e = require("../chunks/actionText-b0bd6eb7.cjs"), s = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
+var u = require("../assets/index-0e9b11c7.css");
+const e = require("../chunks/ChevronRight-a4c1e0d3.cjs"), o = require("../chunks/actionText-54bc24a6.cjs"), s = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
 const a = {
   name: "NcActionButton",
-  mixins: [e.ActionTextMixin],
+  components: {
+    ChevronRightIcon: e.ChevronRight
+  },
+  mixins: [o.ActionTextMixin],
   props: {
     /**
      * disabled state of the action button
@@ -17,6 +20,14 @@ const a = {
     ariaHidden: {
       type: Boolean,
       default: null
+    },
+    /**
+     * If this is a menu, a chevron icon will
+     * be added at the end of the line
+     */
+    isMenu: {
+      type: Boolean,
+      default: !1
     }
   },
   computed: {
@@ -30,20 +41,20 @@ const a = {
     }
   }
 };
-var o = function() {
+var i = function() {
   var t = this, n = t._self._c;
-  return n("li", { staticClass: "action", class: { "action--disabled": t.disabled }, attrs: { role: "presentation" } }, [n("button", { staticClass: "action-button", class: { focusable: t.isFocusable }, attrs: { "aria-label": t.ariaLabel, title: t.title, role: "menuitem", type: "button" }, on: { click: t.onClick } }, [t._t("icon", function() {
+  return n("li", { staticClass: "action", class: { "action--disabled": t.disabled } }, [n("button", { staticClass: "action-button", class: { focusable: t.isFocusable }, attrs: { "aria-label": t.ariaLabel, title: t.title, role: "menuitem", type: "button" }, on: { click: t.onClick } }, [t._t("icon", function() {
     return [n("span", { staticClass: "action-button__icon", class: [t.isIconUrl ? "action-button__icon--url" : t.icon], style: { backgroundImage: t.isIconUrl ? `url(${t.icon})` : null }, attrs: { "aria-hidden": t.ariaHidden } })];
-  }), t.name ? n("p", [n("strong", { staticClass: "action-button__name" }, [t._v(" " + t._s(t.name) + " ")]), n("br"), n("span", { staticClass: "action-button__longtext", domProps: { textContent: t._s(t.text) } })]) : t.isLongText ? n("p", { staticClass: "action-button__longtext", domProps: { textContent: t._s(t.text) } }) : n("span", { staticClass: "action-button__text" }, [t._v(t._s(t.text))]), t._e()], 2)]);
-}, i = [], c = /* @__PURE__ */ s.normalizeComponent(
+  }), t.name ? n("span", { staticClass: "action-button__longtext-wrapper" }, [n("strong", { staticClass: "action-button__name" }, [t._v(" " + t._s(t.name) + " ")]), n("br"), n("span", { staticClass: "action-button__longtext", domProps: { textContent: t._s(t.text) } })]) : t.isLongText ? n("span", { staticClass: "action-button__longtext", domProps: { textContent: t._s(t.text) } }) : n("span", { staticClass: "action-button__text" }, [t._v(t._s(t.text))]), t.isMenu ? n("ChevronRightIcon", { staticClass: "action-button__menu-icon" }) : t._e(), t._e()], 2)]);
+}, c = [], l = /* @__PURE__ */ s.normalizeComponent(
   a,
-  o,
   i,
+  c,
   !1,
   null,
-  "7ad61f44",
+  "4ad257bb",
   null,
   null
 );
-const l = c.exports;
-module.exports = l;
+const r = l.exports;
+module.exports = r;

package/dist/Components/NcActionButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcActionButton.cjs","sources":["../../src/components/NcActionButton/NcActionButton.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  - @author Marco Ambrosini <marcoambrosini@icloud.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots.\n\n```vue\n\t<template>\n\t\t<div style=\"display: flex; align-items: center;\">\n\t\t\t<NcActions>\n\t\t\t\t<NcActionButton @click=\"showMessage('Delete')\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tDelete\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton :close-after-click=\"true\" @click=\"showMessage('Delete and close menu')\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tDelete and close\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton :close-after-click=\"true\" @click=\"focusInput\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Plus :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tCreate\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton :disabled=\"true\" @click=\"showMessage('Disabled')\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tDisabled button\n\t\t\t\t</NcActionButton>\n\t\t\t</NcActions>\n\t\t\t<input ref=\"input\" />\n\t\t</div>\n\t</template>\n\t<script>\n\timport Delete from 'vue-material-design-icons/Delete'\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tDelete,\n\t\t\tPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t\tfocusInput() {\n\t\t\t\tthis.$nextTick(() => this.$refs.input.focus())\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n```\n\nIf you're using a long text you can specify a name\n\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionButton @click=\"showMessage('Add')\">\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\tAdd new\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton name=\"Long button\" @click=\"showMessage('Delete')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tThis button is associated with a very long text.\\nAnd with new lines too.\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport Delete from 'vue-material-design-icons/Delete'\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tDelete,\n\t\t\tPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n\n```\n\nAction icon attribute with a single action\n\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionButton @click=\"showMessage('Add')\">\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\tAdd new\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n\n```\n\nYou can also use a custom icon, for example from the vue-material-design-icons library:\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<HandBackLeft :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise left hand\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<HandBackRight :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise right hand\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport HandBackLeft from 'vue-material-design-icons/HandBackLeft'\nimport HandBackRight from 'vue-material-design-icons/HandBackRight'\n\nexport default {\n\tcomponents: {\n\t\tHandBackLeft,\n\t\tHandBackRight,\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" role=\"presentation\" :class=\"{ 'action--disabled': disabled }\">\n\t\t<button class=\"action-button\"\n\t\t\t:class=\"{ focusable: isFocusable }\"\n\t\t\t:aria-label=\"ariaLabel\"\n\t\t\t:title=\"title\"\n\t\t\trole=\"menuitem\"\n\t\t\ttype=\"button\"\n\t\t\t@click=\"onClick\">\n\t\t\t<!-- @slot Manually provide icon -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<span :class=\"[isIconUrl ? 'action-button__icon--url' : icon]\"\n\t\t\t\t\t:style=\"{ backgroundImage: isIconUrl ? `url(${icon})` : null }\"\n\t\t\t\t\t:aria-hidden=\"ariaHidden\"\n\t\t\t\t\tclass=\"action-button__icon\" />\n\t\t\t</slot>\n\n\t\t\t<!-- long text with name -->\n\t\t\t<p v-if=\"name\">\n\t\t\t\t<strong class=\"action-button__name\">\n\t\t\t\t\t{{ name }}\n\t\t\t\t</strong>\n\t\t\t\t<br>\n\t\t\t\t<!-- white space is shown on longtext, so we can't\n\t\t\t\t\tput {{ text }} on a new line for code readability -->\n\t\t\t\t<span class=\"action-button__longtext\" v-text=\"text\" />\n\t\t\t</p>\n\n\t\t\t<!-- long text only -->\n\t\t\t<!-- white space is shown on longtext, so we can't\n\t\t\t\tput {{ text }} on a new line for code readability -->\n\t\t\t<p v-else-if=\"isLongText\"\n\t\t\t\tclass=\"action-button__longtext\"\n\t\t\t\tv-text=\"text\" />\n\n\t\t\t<!-- default text display -->\n\t\t\t<span v-else class=\"action-button__text\">{{ text }}</span>\n\n\t\t\t<!-- fake slot to gather inner text -->\n\t\t\t<slot v-if=\"false\" />\n\t\t</button>\n\t</li>\n</template>\n\n<script>\nimport ActionTextMixin from '../../mixins/actionText.js'\n\n/**\n * Button component to be used in Actions\n */\nexport default {\n\tname: 'NcActionButton',\n\n\tmixins: [ActionTextMixin],\n\n\tprops: {\n\t\t/**\n\t\t * disabled state of the action button\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-hidden attribute for the icon slot\n\t\t */\n\t\tariaHidden: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\tcomputed: {\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</script>\n\n<style lang=\"scss\" scoped>\n@import '../../assets/action';\n@include action-active;\n@include action--disabled;\n@include action-item('button');\n</style>\n"],"names":["_sfc_main","actionText"],"mappings":";;AAsOA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,QAAA,CAAAC,EAAA,eAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AACA,aAAA,CAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcActionButton.cjs","sources":["../../src/components/NcActionButton/NcActionButton.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  - @author Marco Ambrosini <marcoambrosini@icloud.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots.\n\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionButton @click=\"showMessage('Delete')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDelete\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :close-after-click=\"true\" @click=\"showMessage('Delete and close menu')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDelete and close\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :is-menu=\"true\">\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\tCreate\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :disabled=\"true\" @click=\"showMessage('Disabled')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDisabled button\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport Delete from 'vue-material-design-icons/Delete'\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tDelete,\n\t\t\tPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n```\n\nIf you're using a long text you can specify a name\n\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionButton @click=\"showMessage('Add')\">\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\tAdd new\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton name=\"Long button\" @click=\"showMessage('Delete')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tThis button is associated with a very long text.\\nAnd with new lines too.\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport Delete from 'vue-material-design-icons/Delete'\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tDelete,\n\t\t\tPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n\n```\n\nAction icon attribute with a single action\n\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionButton @click=\"showMessage('Add')\">\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\tAdd new\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n\n```\n\nYou can also use a custom icon, for example from the vue-material-design-icons library:\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<HandBackLeft :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise left hand\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<HandBackRight :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise right hand\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport HandBackLeft from 'vue-material-design-icons/HandBackLeft'\nimport HandBackRight from 'vue-material-design-icons/HandBackRight'\n\nexport default {\n\tcomponents: {\n\t\tHandBackLeft,\n\t\tHandBackRight,\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" :class=\"{ 'action--disabled': disabled }\">\n\t\t<button class=\"action-button\"\n\t\t\t:class=\"{ focusable: isFocusable }\"\n\t\t\t:aria-label=\"ariaLabel\"\n\t\t\t:title=\"title\"\n\t\t\trole=\"menuitem\"\n\t\t\ttype=\"button\"\n\t\t\t@click=\"onClick\">\n\t\t\t<!-- @slot Manually provide icon -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<span :class=\"[isIconUrl ? 'action-button__icon--url' : icon]\"\n\t\t\t\t\t:style=\"{ backgroundImage: isIconUrl ? `url(${icon})` : null }\"\n\t\t\t\t\t:aria-hidden=\"ariaHidden\"\n\t\t\t\t\tclass=\"action-button__icon\" />\n\t\t\t</slot>\n\n\t\t\t<!-- long text with name -->\n\t\t\t<span v-if=\"name\"\n\t\t\t\tclass=\"action-button__longtext-wrapper\">\n\t\t\t\t<strong class=\"action-button__name\">\n\t\t\t\t\t{{ name }}\n\t\t\t\t</strong>\n\t\t\t\t<br>\n\t\t\t\t<!-- white space is shown on longtext, so we can't\n\t\t\t\t\tput {{ text }} on a new line for code readability -->\n\t\t\t\t<span class=\"action-button__longtext\" v-text=\"text\" />\n\t\t\t</span>\n\n\t\t\t<!-- long text only -->\n\t\t\t<!-- white space is shown on longtext, so we can't\n\t\t\t\tput {{ text }} on a new line for code readability -->\n\t\t\t<span v-else-if=\"isLongText\"\n\t\t\t\tclass=\"action-button__longtext\"\n\t\t\t\tv-text=\"text\" />\n\n\t\t\t<!-- default text display -->\n\t\t\t<span v-else class=\"action-button__text\">{{ text }}</span>\n\n\t\t\t<!-- right arrow icon when there is a sub-menu -->\n\t\t\t<ChevronRightIcon v-if=\"isMenu\" class=\"action-button__menu-icon\" />\n\n\t\t\t<!-- fake slot to gather inner text -->\n\t\t\t<slot v-if=\"false\" />\n\t\t</button>\n\t</li>\n</template>\n\n<script>\nimport ChevronRightIcon from 'vue-material-design-icons/ChevronRight.vue'\nimport ActionTextMixin from '../../mixins/actionText.js'\n\n/**\n * Button component to be used in Actions\n */\nexport default {\n\tname: 'NcActionButton',\n\n\tcomponents: {\n\t\tChevronRightIcon,\n\t},\n\tmixins: [ActionTextMixin],\n\n\tprops: {\n\t\t/**\n\t\t * disabled state of the action button\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-hidden attribute for the icon slot\n\t\t */\n\t\tariaHidden: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * If this is a menu, a chevron icon will\n\t\t * be added at the end of the line\n\t\t */\n\t\tisMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\tcomputed: {\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</script>\n\n<style lang=\"scss\" scoped>\n@import '../../assets/action';\n@include action-active;\n@include action--disabled;\n@include action-item('button');\n</style>\n"],"names":["_sfc_main","ChevronRight","actionText"],"mappings":";;AAqOA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,kBAAAC,EAAA;AAAA,EACA;AAAA,EACA,QAAA,CAAAC,EAAA,eAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AACA,aAAA,CAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcActionButton.mjs

@@ -1,8 +1,12 @@
-import "../assets/index-becfbea7.css";
-import { A as a } from "../chunks/actionText-9f5c55bd.mjs";
-import { n as o } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
-const s = {
+import "../assets/index-0e9b11c7.css";
+import { C as o } from "../chunks/ChevronRight-1a6a6cf2.mjs";
+import { A as a } from "../chunks/actionText-a64be267.mjs";
+import { n as s } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+const e = {
   name: "NcActionButton",
+  components: {
+    ChevronRightIcon: o
+  },
   mixins: [a],
   props: {
     /**
@@ -18,6 +22,14 @@ const s = {
     ariaHidden: {
       type: Boolean,
       default: null
+    },
+    /**
+     * If this is a menu, a chevron icon will
+     * be added at the end of the line
+     */
+    isMenu: {
+      type: Boolean,
+      default: !1
     }
   },
   computed: {
@@ -31,22 +43,22 @@ const s = {
     }
   }
 };
-var e = function() {
+var i = function() {
   var t = this, n = t._self._c;
-  return n("li", { staticClass: "action", class: { "action--disabled": t.disabled }, attrs: { role: "presentation" } }, [n("button", { staticClass: "action-button", class: { focusable: t.isFocusable }, attrs: { "aria-label": t.ariaLabel, title: t.title, role: "menuitem", type: "button" }, on: { click: t.onClick } }, [t._t("icon", function() {
+  return n("li", { staticClass: "action", class: { "action--disabled": t.disabled } }, [n("button", { staticClass: "action-button", class: { focusable: t.isFocusable }, attrs: { "aria-label": t.ariaLabel, title: t.title, role: "menuitem", type: "button" }, on: { click: t.onClick } }, [t._t("icon", function() {
     return [n("span", { staticClass: "action-button__icon", class: [t.isIconUrl ? "action-button__icon--url" : t.icon], style: { backgroundImage: t.isIconUrl ? `url(${t.icon})` : null }, attrs: { "aria-hidden": t.ariaHidden } })];
-  }), t.name ? n("p", [n("strong", { staticClass: "action-button__name" }, [t._v(" " + t._s(t.name) + " ")]), n("br"), n("span", { staticClass: "action-button__longtext", domProps: { textContent: t._s(t.text) } })]) : t.isLongText ? n("p", { staticClass: "action-button__longtext", domProps: { textContent: t._s(t.text) } }) : n("span", { staticClass: "action-button__text" }, [t._v(t._s(t.text))]), t._e()], 2)]);
-}, i = [], l = /* @__PURE__ */ o(
-  s,
+  }), t.name ? n("span", { staticClass: "action-button__longtext-wrapper" }, [n("strong", { staticClass: "action-button__name" }, [t._v(" " + t._s(t.name) + " ")]), n("br"), n("span", { staticClass: "action-button__longtext", domProps: { textContent: t._s(t.text) } })]) : t.isLongText ? n("span", { staticClass: "action-button__longtext", domProps: { textContent: t._s(t.text) } }) : n("span", { staticClass: "action-button__text" }, [t._v(t._s(t.text))]), t.isMenu ? n("ChevronRightIcon", { staticClass: "action-button__menu-icon" }) : t._e(), t._e()], 2)]);
+}, c = [], l = /* @__PURE__ */ s(
   e,
   i,
+  c,
   !1,
   null,
-  "7ad61f44",
+  "4ad257bb",
   null,
   null
 );
-const d = l.exports;
+const b = l.exports;
 export {
-  d as default
+  b as default
 };

package/dist/Components/NcActionButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcActionButton.mjs","sources":["../../src/components/NcActionButton/NcActionButton.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  - @author Marco Ambrosini <marcoambrosini@icloud.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots.\n\n```vue\n\t<template>\n\t\t<div style=\"display: flex; align-items: center;\">\n\t\t\t<NcActions>\n\t\t\t\t<NcActionButton @click=\"showMessage('Delete')\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tDelete\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton :close-after-click=\"true\" @click=\"showMessage('Delete and close menu')\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tDelete and close\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton :close-after-click=\"true\" @click=\"focusInput\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Plus :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tCreate\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton :disabled=\"true\" @click=\"showMessage('Disabled')\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tDisabled button\n\t\t\t\t</NcActionButton>\n\t\t\t</NcActions>\n\t\t\t<input ref=\"input\" />\n\t\t</div>\n\t</template>\n\t<script>\n\timport Delete from 'vue-material-design-icons/Delete'\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tDelete,\n\t\t\tPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t\tfocusInput() {\n\t\t\t\tthis.$nextTick(() => this.$refs.input.focus())\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n```\n\nIf you're using a long text you can specify a name\n\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionButton @click=\"showMessage('Add')\">\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\tAdd new\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton name=\"Long button\" @click=\"showMessage('Delete')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tThis button is associated with a very long text.\\nAnd with new lines too.\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport Delete from 'vue-material-design-icons/Delete'\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tDelete,\n\t\t\tPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n\n```\n\nAction icon attribute with a single action\n\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionButton @click=\"showMessage('Add')\">\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\tAdd new\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n\n```\n\nYou can also use a custom icon, for example from the vue-material-design-icons library:\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<HandBackLeft :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise left hand\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<HandBackRight :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise right hand\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport HandBackLeft from 'vue-material-design-icons/HandBackLeft'\nimport HandBackRight from 'vue-material-design-icons/HandBackRight'\n\nexport default {\n\tcomponents: {\n\t\tHandBackLeft,\n\t\tHandBackRight,\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" role=\"presentation\" :class=\"{ 'action--disabled': disabled }\">\n\t\t<button class=\"action-button\"\n\t\t\t:class=\"{ focusable: isFocusable }\"\n\t\t\t:aria-label=\"ariaLabel\"\n\t\t\t:title=\"title\"\n\t\t\trole=\"menuitem\"\n\t\t\ttype=\"button\"\n\t\t\t@click=\"onClick\">\n\t\t\t<!-- @slot Manually provide icon -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<span :class=\"[isIconUrl ? 'action-button__icon--url' : icon]\"\n\t\t\t\t\t:style=\"{ backgroundImage: isIconUrl ? `url(${icon})` : null }\"\n\t\t\t\t\t:aria-hidden=\"ariaHidden\"\n\t\t\t\t\tclass=\"action-button__icon\" />\n\t\t\t</slot>\n\n\t\t\t<!-- long text with name -->\n\t\t\t<p v-if=\"name\">\n\t\t\t\t<strong class=\"action-button__name\">\n\t\t\t\t\t{{ name }}\n\t\t\t\t</strong>\n\t\t\t\t<br>\n\t\t\t\t<!-- white space is shown on longtext, so we can't\n\t\t\t\t\tput {{ text }} on a new line for code readability -->\n\t\t\t\t<span class=\"action-button__longtext\" v-text=\"text\" />\n\t\t\t</p>\n\n\t\t\t<!-- long text only -->\n\t\t\t<!-- white space is shown on longtext, so we can't\n\t\t\t\tput {{ text }} on a new line for code readability -->\n\t\t\t<p v-else-if=\"isLongText\"\n\t\t\t\tclass=\"action-button__longtext\"\n\t\t\t\tv-text=\"text\" />\n\n\t\t\t<!-- default text display -->\n\t\t\t<span v-else class=\"action-button__text\">{{ text }}</span>\n\n\t\t\t<!-- fake slot to gather inner text -->\n\t\t\t<slot v-if=\"false\" />\n\t\t</button>\n\t</li>\n</template>\n\n<script>\nimport ActionTextMixin from '../../mixins/actionText.js'\n\n/**\n * Button component to be used in Actions\n */\nexport default {\n\tname: 'NcActionButton',\n\n\tmixins: [ActionTextMixin],\n\n\tprops: {\n\t\t/**\n\t\t * disabled state of the action button\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-hidden attribute for the icon slot\n\t\t */\n\t\tariaHidden: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\tcomputed: {\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</script>\n\n<style lang=\"scss\" scoped>\n@import '../../assets/action';\n@include action-active;\n@include action--disabled;\n@include action-item('button');\n</style>\n"],"names":["_sfc_main","ActionTextMixin"],"mappings":";;;AAsOA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,QAAA,CAAAC,CAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AACA,aAAA,CAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcActionButton.mjs","sources":["../../src/components/NcActionButton/NcActionButton.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  - @author Marco Ambrosini <marcoambrosini@icloud.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots.\n\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionButton @click=\"showMessage('Delete')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDelete\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :close-after-click=\"true\" @click=\"showMessage('Delete and close menu')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDelete and close\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :is-menu=\"true\">\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\tCreate\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :disabled=\"true\" @click=\"showMessage('Disabled')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDisabled button\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport Delete from 'vue-material-design-icons/Delete'\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tDelete,\n\t\t\tPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n```\n\nIf you're using a long text you can specify a name\n\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionButton @click=\"showMessage('Add')\">\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\tAdd new\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton name=\"Long button\" @click=\"showMessage('Delete')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tThis button is associated with a very long text.\\nAnd with new lines too.\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport Delete from 'vue-material-design-icons/Delete'\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tDelete,\n\t\t\tPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n\n```\n\nAction icon attribute with a single action\n\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionButton @click=\"showMessage('Add')\">\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\tAdd new\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n\n```\n\nYou can also use a custom icon, for example from the vue-material-design-icons library:\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<HandBackLeft :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise left hand\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<HandBackRight :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise right hand\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport HandBackLeft from 'vue-material-design-icons/HandBackLeft'\nimport HandBackRight from 'vue-material-design-icons/HandBackRight'\n\nexport default {\n\tcomponents: {\n\t\tHandBackLeft,\n\t\tHandBackRight,\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" :class=\"{ 'action--disabled': disabled }\">\n\t\t<button class=\"action-button\"\n\t\t\t:class=\"{ focusable: isFocusable }\"\n\t\t\t:aria-label=\"ariaLabel\"\n\t\t\t:title=\"title\"\n\t\t\trole=\"menuitem\"\n\t\t\ttype=\"button\"\n\t\t\t@click=\"onClick\">\n\t\t\t<!-- @slot Manually provide icon -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<span :class=\"[isIconUrl ? 'action-button__icon--url' : icon]\"\n\t\t\t\t\t:style=\"{ backgroundImage: isIconUrl ? `url(${icon})` : null }\"\n\t\t\t\t\t:aria-hidden=\"ariaHidden\"\n\t\t\t\t\tclass=\"action-button__icon\" />\n\t\t\t</slot>\n\n\t\t\t<!-- long text with name -->\n\t\t\t<span v-if=\"name\"\n\t\t\t\tclass=\"action-button__longtext-wrapper\">\n\t\t\t\t<strong class=\"action-button__name\">\n\t\t\t\t\t{{ name }}\n\t\t\t\t</strong>\n\t\t\t\t<br>\n\t\t\t\t<!-- white space is shown on longtext, so we can't\n\t\t\t\t\tput {{ text }} on a new line for code readability -->\n\t\t\t\t<span class=\"action-button__longtext\" v-text=\"text\" />\n\t\t\t</span>\n\n\t\t\t<!-- long text only -->\n\t\t\t<!-- white space is shown on longtext, so we can't\n\t\t\t\tput {{ text }} on a new line for code readability -->\n\t\t\t<span v-else-if=\"isLongText\"\n\t\t\t\tclass=\"action-button__longtext\"\n\t\t\t\tv-text=\"text\" />\n\n\t\t\t<!-- default text display -->\n\t\t\t<span v-else class=\"action-button__text\">{{ text }}</span>\n\n\t\t\t<!-- right arrow icon when there is a sub-menu -->\n\t\t\t<ChevronRightIcon v-if=\"isMenu\" class=\"action-button__menu-icon\" />\n\n\t\t\t<!-- fake slot to gather inner text -->\n\t\t\t<slot v-if=\"false\" />\n\t\t</button>\n\t</li>\n</template>\n\n<script>\nimport ChevronRightIcon from 'vue-material-design-icons/ChevronRight.vue'\nimport ActionTextMixin from '../../mixins/actionText.js'\n\n/**\n * Button component to be used in Actions\n */\nexport default {\n\tname: 'NcActionButton',\n\n\tcomponents: {\n\t\tChevronRightIcon,\n\t},\n\tmixins: [ActionTextMixin],\n\n\tprops: {\n\t\t/**\n\t\t * disabled state of the action button\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-hidden attribute for the icon slot\n\t\t */\n\t\tariaHidden: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * If this is a menu, a chevron icon will\n\t\t * be added at the end of the line\n\t\t */\n\t\tisMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\tcomputed: {\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</script>\n\n<style lang=\"scss\" scoped>\n@import '../../assets/action';\n@include action-active;\n@include action--disabled;\n@include action-item('button');\n</style>\n"],"names":["_sfc_main","ChevronRight","ActionTextMixin"],"mappings":";;;;AAqOA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,kBAAAC;AAAA,EACA;AAAA,EACA,QAAA,CAAAC,CAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AACA,aAAA,CAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcActionInput.cjs

@@ -1,10 +1,10 @@
-var h = require("../assets/index-376d2dec.css");
-const n = require("./NcDateTimePicker.cjs"), l = require("./NcDateTimePickerNative.cjs"), r = require("./NcPasswordField.cjs"), c = require("./NcSelect.cjs"), o = require("./NcTextField.cjs"), u = require("../chunks/actionGlobal-9e29e11b.cjs"), s = require("../chunks/GenRandomId-c214d235.cjs"), d = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
-const p = {
+var v = require("../assets/index-e7c55791.css");
+const s = require("./NcDateTimePicker.cjs"), n = require("./NcDateTimePickerNative.cjs"), r = require("./NcPasswordField.cjs"), c = require("./NcSelect.cjs"), o = require("./NcTextField.cjs"), u = require("../chunks/actionGlobal-9e29e11b.cjs"), l = require("../chunks/GenRandomId-c214d235.cjs"), d = require("../chunks/l10n-9f3afaf5.cjs"), p = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
+const b = {
   name: "NcActionInput",
   components: {
-    NcDateTimePicker: n,
-    NcDateTimePickerNative: l,
+    NcDateTimePicker: s,
+    NcDateTimePickerNative: n,
     NcPasswordField: r,
     NcSelect: c,
     NcTextField: o
@@ -16,7 +16,7 @@ const p = {
      */
     id: {
       type: String,
-      default: () => "action-" + s.GenRandomId(),
+      default: () => "action-" + l.GenRandomId(),
       validator: (t) => t.trim() !== ""
     },
     /**
@@ -24,7 +24,7 @@ const p = {
      */
     inputId: {
       type: String,
-      default: () => "action-input-" + s.GenRandomId(),
+      default: () => "action-input-" + l.GenRandomId(),
       validator: (t) => t.trim() !== ""
     },
     /**
@@ -117,11 +117,18 @@ const p = {
       default: null
     },
     /**
-     * Attribute forwarded to the underlining NcPasswordField and NcTextField
+     * Attribute forwarded to the underlying NcPasswordField and NcTextField
      */
     showTrailingButton: {
       type: Boolean,
       default: !0
+    },
+    /**
+     * Trailing button label forwarded to the underlying NcTextField
+     */
+    trailingButtonLabel: {
+      type: String,
+      default: d.t("Submit")
     }
   },
   emits: [
@@ -192,7 +199,7 @@ const p = {
     }
   }
 };
-var b = function() {
+var _ = function() {
   var e = this, i = e._self._c;
   return i("li", { staticClass: "action", class: { "action--disabled": e.disabled } }, [i("span", { staticClass: "action-input", class: {
     "action-input-picker--disabled": e.disabled,
@@ -205,22 +212,20 @@ var b = function() {
     return e.$emit("input", a);
   }, change: function(a) {
     return e.$emit("change", a);
-  } } }, "NcDateTimePickerNative", e.$attrs, !1)) : e.isMultiselectType ? i("NcSelect", e._g(e._b({ staticClass: "action-input__multi", attrs: { value: e.value, placeholder: e.text, disabled: e.disabled, "append-to-body": !1, "input-class": { focusable: e.isFocusable } } }, "NcSelect", e.$attrs, !1), e.$listeners)) : e.type === "password" ? i("NcPasswordField", e._g(e._b({ attrs: { id: e.inputId, value: e.value, label: e.label, "label-outside": !e.label || e.labelOutside, placeholder: e.text, disabled: e.disabled, "input-class": { focusable: e.isFocusable }, "trailing-button-icon": "arrowRight", "show-trailing-button": e.showTrailingButton && !e.disabled }, on: { "trailing-button-click": function(a) {
-    return e.$refs.form.requestSubmit();
-  }, input: e.onInput, change: e.onChange } }, "NcPasswordField", e.$attrs, !1), e.$listeners)) : e.type === "color" ? i("div", { staticClass: "action-input__container" }, [e.label && e.type === "color" ? i("label", { staticClass: "action-input__text-label", class: { "action-input__text-label--hidden": !e.labelOutside }, attrs: { for: e.inputId } }, [e._v(" " + e._s(e.label) + " ")]) : e._e(), i("div", { staticClass: "action-input__input-container" }, [i("NcColorPicker", e._g(e._b({ staticClass: "colorpicker__trigger", attrs: { id: "inputId", value: e.value }, on: { input: e.onInput, submit: function(a) {
+  } } }, "NcDateTimePickerNative", e.$attrs, !1)) : e.isMultiselectType ? i("NcSelect", e._g(e._b({ staticClass: "action-input__multi", attrs: { value: e.value, placeholder: e.text, disabled: e.disabled, "append-to-body": !1, "input-class": { focusable: e.isFocusable } } }, "NcSelect", e.$attrs, !1), e.$listeners)) : e.type === "password" ? i("NcPasswordField", e._g(e._b({ attrs: { id: e.inputId, value: e.value, label: e.label, "label-outside": !e.label || e.labelOutside, placeholder: e.text, disabled: e.disabled, "input-class": { focusable: e.isFocusable }, "show-trailing-button": e.showTrailingButton && !e.disabled }, on: { input: e.onInput, change: e.onChange } }, "NcPasswordField", e.$attrs, !1), e.$listeners)) : e.type === "color" ? i("div", { staticClass: "action-input__container" }, [e.label && e.type === "color" ? i("label", { staticClass: "action-input__text-label", class: { "action-input__text-label--hidden": !e.labelOutside }, attrs: { for: e.inputId } }, [e._v(" " + e._s(e.label) + " ")]) : e._e(), i("div", { staticClass: "action-input__input-container" }, [i("NcColorPicker", e._g(e._b({ staticClass: "colorpicker__trigger", attrs: { id: "inputId", value: e.value }, on: { input: e.onInput, submit: function(a) {
     return e.$refs.form.requestSubmit();
-  } } }, "NcColorPicker", e.$attrs, !1), e.$listeners), [i("button", { staticClass: "colorpicker__preview", class: { focusable: e.isFocusable }, style: { "background-color": e.value } })])], 1)]) : i("NcTextField", e._g(e._b({ attrs: { id: e.inputId, value: e.value, label: e.label, "label-outside": !e.label || e.labelOutside, placeholder: e.text, disabled: e.disabled, "input-class": { focusable: e.isFocusable }, type: e.type, "trailing-button-icon": "arrowRight", "show-trailing-button": e.showTrailingButton && !e.disabled }, on: { "trailing-button-click": function(a) {
+  } } }, "NcColorPicker", e.$attrs, !1), e.$listeners), [i("button", { staticClass: "colorpicker__preview", class: { focusable: e.isFocusable }, style: { "background-color": e.value } })])], 1)]) : i("NcTextField", e._g(e._b({ attrs: { id: e.inputId, value: e.value, label: e.label, "label-outside": !e.label || e.labelOutside, placeholder: e.text, disabled: e.disabled, "input-class": { focusable: e.isFocusable }, type: e.type, "trailing-button-icon": "arrowRight", "trailing-button-label": e.trailingButtonLabel, "show-trailing-button": e.showTrailingButton && !e.disabled }, on: { "trailing-button-click": function(a) {
     return e.$refs.form.requestSubmit();
   }, input: e.onInput, change: e.onChange } }, "NcTextField", e.$attrs, !1), e.$listeners))], 1)])])])]);
-}, _ = [], m = /* @__PURE__ */ d.normalizeComponent(
-  p,
+}, m = [], f = /* @__PURE__ */ p.normalizeComponent(
   b,
   _,
+  m,
   !1,
   null,
-  "444bf7e8",
+  "7412a2c7",
   null,
   null
 );
-const f = m.exports;
-module.exports = f;
+const h = f.exports;
+module.exports = h;

package/dist/Components/NcActionInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcActionInput.cjs","sources":["../../src/components/NcActionInput/NcActionInput.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  - @author Marco Ambrosini <marcoambrosini@icloud.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\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 :value.sync=\"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 :value.sync=\"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 :value.sync=\"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\" :value.sync=\"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\" :value.sync=\"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\" :value.sync=\"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\" :value.sync=\"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 :value=\"new 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\">\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=\"multiselect\" :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\tlabel=\"label\"\n\t\t\t\ttrack-by=\"id\"\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\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 }\">\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\t:aria-hidden=\"ariaHidden\"\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:value=\"value\"\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@input=\"onInput\"\n\t\t\t\t\t\t\t@change=\"onChange\" />\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:value=\"value\"\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@input=\"$emit('input', $event)\"\n\t\t\t\t\t\t\t@change=\"$emit('change', $event)\" />\n\n\t\t\t\t\t\t<NcSelect v-else-if=\"isMultiselectType\"\n\t\t\t\t\t\t\t:value=\"value\"\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\tv-on=\"$listeners\" />\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:value=\"value\"\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\ttrailing-button-icon=\"arrowRight\"\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\tv-on=\"$listeners\"\n\t\t\t\t\t\t\t@trailing-button-click=\"$refs.form.requestSubmit()\"\n\t\t\t\t\t\t\t@input=\"onInput\"\n\t\t\t\t\t\t\t@change=\"onChange\" />\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:value=\"value\"\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\tv-on=\"$listeners\"\n\t\t\t\t\t\t\t\t\t@input=\"onInput\"\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': value}\"\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:value=\"value\"\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:show-trailing-button=\"showTrailingButton && !disabled\"\n\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\tv-on=\"$listeners\"\n\t\t\t\t\t\t\t@trailing-button-click=\"$refs.form.requestSubmit()\"\n\t\t\t\t\t\t\t@input=\"onInput\"\n\t\t\t\t\t\t\t@change=\"onChange\" />\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 NcDateTimePicker from '../NcDateTimePicker/index.js'\nimport NcDateTimePickerNative from '../NcDateTimePickerNative/index.js'\nimport NcPasswordField from '../NcPasswordField/index.js'\nimport NcSelect from '../NcSelect/index.js'\nimport NcTextField from '../NcTextField/index.js'\nimport ActionGlobalMixin from '../../mixins/actionGlobal.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nexport default {\n\tname: 'NcActionInput',\n\n\tcomponents: {\n\t\tNcDateTimePicker,\n\t\tNcDateTimePickerNative,\n\t\tNcPasswordField,\n\t\tNcSelect,\n\t\tNcTextField,\n\t},\n\n\tmixins: [ActionGlobalMixin],\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-' + GenRandomId(),\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-' + GenRandomId(),\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\tvalue: {\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 * aria-hidden attribute for the icon slot\n\t\t */\n\t\tariaHidden: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * Attribute forwarded to the underlining NcPasswordField and NcTextField\n\t\t */\n\t\tshowTrailingButton: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t},\n\n\temits: [\n\t\t'input',\n\t\t'submit',\n\t\t'change',\n\t\t'update:value',\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\tonInput(event) {\n\t\t\t/**\n\t\t\t * Emitted on input events of the text field\n\t\t\t *\n\t\t\t * @type {Event|Date}\n\t\t\t */\n\t\t\tthis.$emit('input', event)\n\t\t\t/**\n\t\t\t * Emitted when the inputs value changes\n\t\t\t * ! DatetimePicker only send the value\n\t\t\t *\n\t\t\t * @type {string|Date}\n\t\t\t */\n\t\t\tthis.$emit('update:value', event.target ? event.target.value : event)\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\tonChange(event) {\n\t\t\t/**\n\t\t\t * Emitted on change of the input field\n\t\t\t *\n\t\t\t * @type {Event}\n\t\t\t */\n\t\t\tthis.$emit('change', event)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@import '../../assets/inputs';\n@import '../../assets/action';\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: $clickable-area;\n\t\t\theight: $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\n\t\t\tassure correct position of a possible text */\n\t\tpadding: #{math.div($clickable-area, 2)} 0 #{math.div($clickable-area, 2)} $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-right: $icon-margin;\n\t}\n\n\t&__container {\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\tleft: -10000px;\n\t\t\ttop: auto;\n\t\t\twidth: 1px;\n\t\t\theight: 1px;\n\t\t\toverflow: hidden;\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: $icon-margin - $input-margin;\n}\n\n// same for first item\nli:first-child > .action-input:not(.action-input--visible-label) {\n\tpadding-top: $icon-margin - $input-margin;\n}\n\n</style>\n"],"names":["_sfc_main","Components_NcDateTimePicker","Components_NcDateTimePickerNative","Components_NcPasswordField","Components_NcSelect","Components_NcTextField","actionGlobal","GenRandomId","id","type","event"],"mappings":"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"}
+{"version":3,"file":"NcActionInput.cjs","sources":["../../src/components/NcActionInput/NcActionInput.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  - @author Marco Ambrosini <marcoambrosini@icloud.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\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 :value.sync=\"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 :value.sync=\"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 :value.sync=\"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\" :value.sync=\"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\" :value.sync=\"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\" :value.sync=\"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\" :value.sync=\"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 :value=\"new 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\">\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=\"multiselect\" :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\tlabel=\"label\"\n\t\t\t\ttrack-by=\"id\"\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\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 }\">\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\t:aria-hidden=\"ariaHidden\"\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:value=\"value\"\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@input=\"onInput\"\n\t\t\t\t\t\t\t@change=\"onChange\" />\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:value=\"value\"\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@input=\"$emit('input', $event)\"\n\t\t\t\t\t\t\t@change=\"$emit('change', $event)\" />\n\n\t\t\t\t\t\t<NcSelect v-else-if=\"isMultiselectType\"\n\t\t\t\t\t\t\t:value=\"value\"\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\tv-on=\"$listeners\" />\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:value=\"value\"\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\tv-on=\"$listeners\"\n\t\t\t\t\t\t\t@input=\"onInput\"\n\t\t\t\t\t\t\t@change=\"onChange\" />\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:value=\"value\"\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\tv-on=\"$listeners\"\n\t\t\t\t\t\t\t\t\t@input=\"onInput\"\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': value}\"\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:value=\"value\"\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\tv-on=\"$listeners\"\n\t\t\t\t\t\t\t@trailing-button-click=\"$refs.form.requestSubmit()\"\n\t\t\t\t\t\t\t@input=\"onInput\"\n\t\t\t\t\t\t\t@change=\"onChange\" />\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 NcDateTimePicker from '../NcDateTimePicker/index.js'\nimport NcDateTimePickerNative from '../NcDateTimePickerNative/index.js'\nimport NcPasswordField from '../NcPasswordField/index.js'\nimport NcSelect from '../NcSelect/index.js'\nimport NcTextField from '../NcTextField/index.js'\nimport ActionGlobalMixin from '../../mixins/actionGlobal.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport { t } from '../../l10n.js'\n\nexport default {\n\tname: 'NcActionInput',\n\n\tcomponents: {\n\t\tNcDateTimePicker,\n\t\tNcDateTimePickerNative,\n\t\tNcPasswordField,\n\t\tNcSelect,\n\t\tNcTextField,\n\t},\n\n\tmixins: [ActionGlobalMixin],\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-' + GenRandomId(),\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-' + GenRandomId(),\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\tvalue: {\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 * aria-hidden attribute for the icon slot\n\t\t */\n\t\tariaHidden: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: null,\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},\n\n\temits: [\n\t\t'input',\n\t\t'submit',\n\t\t'change',\n\t\t'update:value',\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\tonInput(event) {\n\t\t\t/**\n\t\t\t * Emitted on input events of the text field\n\t\t\t *\n\t\t\t * @type {Event|Date}\n\t\t\t */\n\t\t\tthis.$emit('input', event)\n\t\t\t/**\n\t\t\t * Emitted when the inputs value changes\n\t\t\t * ! DatetimePicker only send the value\n\t\t\t *\n\t\t\t * @type {string|Date}\n\t\t\t */\n\t\t\tthis.$emit('update:value', event.target ? event.target.value : event)\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\tonChange(event) {\n\t\t\t/**\n\t\t\t * Emitted on change of the input field\n\t\t\t *\n\t\t\t * @type {Event}\n\t\t\t */\n\t\t\tthis.$emit('change', event)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@import '../../assets/inputs';\n@import '../../assets/action';\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: $clickable-area;\n\t\t\theight: $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\n\t\t\tassure correct position of a possible text */\n\t\tpadding: #{math.div($clickable-area, 2)} 0 #{math.div($clickable-area, 2)} $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-right: $icon-margin;\n\t}\n\n\t&__container {\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\tleft: -10000px;\n\t\t\ttop: auto;\n\t\t\twidth: 1px;\n\t\t\theight: 1px;\n\t\t\toverflow: hidden;\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: $icon-margin - $input-margin;\n}\n\n// same for first item\nli:first-child > .action-input:not(.action-input--visible-label) {\n\tpadding-top: $icon-margin - $input-margin;\n}\n\n</style>\n"],"names":["_sfc_main","Components_NcDateTimePicker","Components_NcDateTimePickerNative","Components_NcPasswordField","Components_NcSelect","Components_NcTextField","actionGlobal","GenRandomId","id","type","l10n","event"],"mappings":"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"}