@nextcloud/vue 8.21.0 → 8.23.0

package/CHANGELOG.md

@@ -5,6 +5,106 @@
 
 # Changelog
 
+## [v8.23.0](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v8.23.0) (2025-02-13)
+[Full Changelog](https://github.com/nextcloud-libraries/nextcloud-vue/compare/v8.22.0...v8.23.0)
+
+### 📝 Notes
+* The individual import path of components, composables, directives, and functions was changed.
+  The type of import is (e.g. `components`) is now lowercase and the `dist` will be omitted.
+  For example to import the `NcButton` component the path has changed:
+
+  ```ts
+  // Old import
+  import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+  // New way to import
+  import NcButton from '@nextcloud/vue/components/NcButton'
+  ```
+
+  The old import paths are still valid, but deprecated and will be removed in version 9.
+* `#default` slot for leading icon is now deprecated in components `NcInputField`, `NcTextField`, `NcPasswordField`. Use `#icon` slot instead.
+* `NcActionRadio` is now expecting String|Number in `v-model` directive (to compare with passed `value`) instead of Boolean. Consider it for migration.
+* Some boolean props have been deprecated in favor of alternatives with default value `false`.
+  This allows to use shorthand notation on the template, as a prop with a default value of `false`
+  will be set to `true` if it is set (without any value) in the template,
+  similar to native HTML boolean attributes.
+  Following components have been adjusted:
+
+  |     Component |        Deprecated prop | New alternative |
+  |---------------|------------------------|-----------------|
+  |     `NcModal` |          `enableSwipe` |  `disableSwipe` |
+  |`NcAppContent` | `allowSwipeNavigation` | `disabledSwipe` |
+
+### 🚀 Enhancements
+* feat: Allow to import without `dist` [\#6385](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6385) \([susnux](https://github.com/susnux)\)
+* feat: Use boolean props with default value false [\#6452](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6452) \([susnux](https://github.com/susnux)\)
+* feat(Nc*Field): add `#icon` slot for forward compatibility with v9, `#default` slot is deprecated [\#6399](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6399) \([ShGKme](https://github.com/ShGKme)\)
+* fix(NcActionRadio): change `modelValue` to behave like NcCheckboxRadioSwitch [\#6264](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6264) [\#6470](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6470) \([Antreesy](https://github.com/Antreesy)\)
+
+### 🐛 Fixed bugs
+* fix(NcAction*): Fix RTL support for component [\#6507](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6507) \([Antreesy](https://github.com/Antreesy)\)
+* fix(NcActions): Remove on `mousemove` listener for auto focus elements [\#6475](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6475) \([susnux](https://github.com/susnux)\)
+* fix(NcActionCheckbox): Fix padding in RTL mode [\#6354](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6354) \([falghamdi125](https://github.com/falghamdi125)\)
+* fix(NcAppNavigation + NcUserBubble + NcRichContenteditable): RTL support [\#6455](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6455) \([DorraJaouad](https://github.com/DorraJaouad)\)
+* fix(NcAvatar): title not shown when component used without menu [\#6297](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6297) \([Koc](https://github.com/Koc)\)
+* fix(NcAvatar): user status and interactivity toggle button Bidi support [\#6407](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6407) \([DorraJaouad](https://github.com/DorraJaouad)\)
+* fix(NcColorPicker): close popover on submit event [\#6336](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6336) \([Antreesy](https://github.com/Antreesy)\)
+* fix(NcCounterBubble): show original count in title when shortened [\#6395](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6395) \([ShGKme](https://github.com/ShGKme)\)
+* fix(NcDateTimePicker): selected and hover time is not readable [\#6492](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6492) \([ShGKme](https://github.com/ShGKme)\)
+* fix(NcDateTimePickerNative): do not set invalid value on clear event [\#6387](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6387) \([Antreesy](https://github.com/Antreesy)\)
+* fix(NcDateTimePickerNative): style alignment with other input components [\#6454](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6454) \([Antreesy](https://github.com/Antreesy)\)
+* fix(NcEmojiPicker): add arrow navigation [\#6466](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6466) \([ShGKme](https://github.com/ShGKme)\)
+* fix(NcEmojiPicker): adjust styles to correctly fit emojis [\#6465](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6465) \([ShGKme](https://github.com/ShGKme)\)
+* fix(NcListItem): Fix padding in RTL mode [\#6359](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6359) \([falghamdi125](https://github.com/falghamdi125)\)
+* fix(NcModal): Enforce opaque backdrop if needed [\#6434](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6434) \([susnux](https://github.com/susnux)\)
+* fix(NcPopover): emit `after-show` after `focus-trap` init to correctly return focus [\#6342](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6342) \([ShGKme](https://github.com/ShGKme)\)
+* fix(NcPopover): blurry content on scaled page in Chromium [\#6512](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6512) \([ShGKme](https://github.com/ShGKme)\)
+* fix(NcRich*): style fixes and RTL support [\#6474](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6474) \([Antreesy](https://github.com/Antreesy)\)
+* fix(NcRichContenteditable): remove value linkify [\#6372](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6372) \([ShGKme](https://github.com/ShGKme)\)
+* fix(NcRichText): adjust conditions for highlight syntax [\#6259](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6259) \([Antreesy](https://github.com/Antreesy)\)
+* fix(NcRichText): extract un-escaping of text/code nodes with XML-like content [\#6499](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6499) [\#6501](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6501) \([Antreesy](https://github.com/Antreesy)\)
+* fix(NcTeamResources): Do not make extraneous requests for resources [\#6379](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6379) \([Pytal](https://github.com/Pytal)\)
+
+### Changed
+* chore(stylelint): `csstools/use-logical` [\#6419](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6419) \([ShGKme](https://github.com/ShGKme)\)
+* chore(stylelint): fix scripts to be unix-compatible [\#6418](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6418) \([ShGKme](https://github.com/ShGKme)\)
+* chore(docs): Do not override assets while building the styleguide [\#6408](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6408) \([susnux](https://github.com/susnux)\)
+* chore(docs): update documentation [\#6460](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6460) \([ShGKme](https://github.com/ShGKme)\)
+* Updated workflows and dependencies
+* Updated translations
+
+## New Contributors
+* @Koc made their first contribution in https://github.com/nextcloud-libraries/nextcloud-vue/pull/6297
+
+## [v8.22.0](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v8.22.0) (2024-12-20)
+[Full Changelog](https://github.com/nextcloud-libraries/nextcloud-vue/compare/v8.21.0...v8.22.0)
+
+### 🚀 Enhancements
+* feat(NcAvatar): implement custom javascript hook action for the contacts menu [\#6238](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6238) \([st3iny](https://github.com/st3iny)\)
+* feat(NcAppNavigation): add `n` hotkey to toggle navigation [\#6311](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6311) \([skjnldsv](https://github.com/skjnldsv)\)
+
+### 🐛 Fixed bugs
+* fix(NcAppNavigationItem): TypeError: this.$refs.actions.$refs.menuButton is undefined [\#6226](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6226) \([wofferl](https://github.com/wofferl)\)
+* fix(NcListItem): Don't require name prop by @artonge in [\#6128](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6128) \([artonge](https://github.com/artonge)\)
+* style(NcCheckboxRadioSwitch): fix styles in disabled state [\#6265](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6265) \([Antreesy](https://github.com/Antreesy)\)
+* fix(NcModal): make 'Close' button the last element for the focus-trap [\#6266](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6266) \([Antreesy](https://github.com/Antreesy)\)
+* fix(NcAppNavigation): Fix sidebar position in RTL and mobile mode.[\#6260](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6260) \([falghamdi125](https://github.com/falghamdi125)\)
+* fix(NcAppContent): add RTL support [\#6303](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6303) \([hamza221](https://github.com/hamza221)\)
+* fix(NcCheckboxRadioSwitch): RTL support [\#6302](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6302) \([hamza221](https://github.com/hamza221)\)
+* fix(NcDateTimePicker): popup position [\#6312](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6312) \([hamza221](https://github.com/hamza221)\)
+* Fix(NcSettingsSection): Add RTL support to NcSettingsSection info icon. [\#6290](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6290) \([falghamdi125](https://github.com/falghamdi125)\)
+* Fix(NcDashboardWidgetItem): Add RTL support to NcDashboardWidgetItem [\#6292](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6292) \([falghamdi125](https://github.com/falghamdi125)\)
+* fix(useHotKey): allow hotkeys with implicit `SHIFT` and add `caseSensitive`, custom event filter options [\#6301](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6301) \([Antreesy](https://github.com/Antreesy)\)
+* fix(NcRichContenteditable): prevent content from overflowing [\#6316](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6316) \([Antreesy](https://github.com/Antreesy)\)
+* fix(NcActionButton): RTL support [\#6200](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6200) \([falghamdi125](https://github.com/falghamdi125)\)
+### Changed
+* docs(NcDateTimePickerNative): add time picker example [\#6188](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6188) \([GVodyanov](https://github.com/GVodyanov)\)
+* chore(NcAppSidebarTabs): remove internal component from docs [\#6253](https://github.com/nextcloud-libraries/nextcloud-vue/pull/6253) \([ShGKme](https://github.com/ShGKme)\)
+* Updated workflows and dependencies
+* Updated translations
+
+## New Contributors
+* @falghamdi125 made their first contribution in https://github.com/nextcloud-libraries/nextcloud-vue/pull/6260
+
 ## [v8.21.0](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v8.21.0) (2024-11-21)
 [Full Changelog](https://github.com/nextcloud-libraries/nextcloud-vue/compare/v8.20.0...v8.21.0)
 

package/README.md

@@ -3,47 +3,58 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
-# Vue components
+# @nextcloud/vue
 
 [![REUSE status](https://api.reuse.software/badge/github.com/nextcloud-libraries/nextcloud-vue)](https://api.reuse.software/info/github.com/nextcloud-libraries/nextcloud-vue)
-[![npm last version](https://img.shields.io/npm/v/@nextcloud/vue.svg?style=flat-square)](https://www.npmjs.com/package/@nextcloud/vue)
-[![Dependabot status](https://img.shields.io/badge/Dependabot-enabled-brightgreen.svg?longCache=true&style=flat-square&logo=dependabot)](https://dependabot.com)
+[![npm last version](https://img.shields.io/npm/v/@nextcloud/vue.svg?style=flat)](https://www.npmjs.com/package/@nextcloud/vue)
+[![Dependabot status](https://img.shields.io/badge/Dependabot-enabled-brightgreen.svg?longCache=true&style=flat&logo=dependabot)](https://dependabot.com)
 
-This repo contains the various Vue.js components that Nextcloud uses for its internal design and structure. It provides standardized UI elements for building Nextcloud app frontends with Vue.js.
+> 🖼️ UI Kit for building Nextcloud apps with Vue
 
-## Documentation
+- ✨ Standardized UI Components
+- 🛠️ Composables and frontend utilities
+- 🔗 [Reference providers](https://docs.nextcloud.com/server/latest/developer_manual/digging_deeper/reference.html) utilities
 
-A list of available components with examples to try out is available in the [documentation](https://nextcloud-vue-components.netlify.app).
+## 📄 Documentation
 
-The documentation is built from the latest development branch, for stable releases the documentation can be found matching the latest minor version:
+| Version        | Target                | Documentation                                         |
+|----------------|-----------------------|-------------------------------------------------------|
+| v9.x [next]    | Nextcloud 30+ (Vue 3) | https://next--nextcloud-vue-components.netlify.app    |
+| v8.x [master]  | Nextcloud 28+ (Vue 2) | https://nextcloud-vue-components.netlify.app          |
+| v7.x [stable7] | Nextcloud 25 - 27     | https://stable7--nextcloud-vue-components.netlify.app |
+| v6.x [stable6] | Nextcloud 24 - 25     | https://stable6--nextcloud-vue-components.netlify.app |
 
-- [master](https://nextcloud-vue-components.netlify.app).
-- [7.x.x](https://stable7--nextcloud-vue-components.netlify.app/)
-- [6.x.x](https://stable6--nextcloud-vue-components.netlify.app/)
+## 📦 Install
 
-## Getting started
+```bash
+npm i @nextcloud/vue
+```
 
-### App example
-If you want to check a real live example of a nextcloud app that uses this library, you can head over to https://github.com/skjnldsv/vueexample/
-We will try to maintain this repository the best we can, but some example might be obsolete. Always check this [repository documentation](#documentation).
+## 🚀 Usage
 
-### Install the library
+Import corresponding components and other modules on use. Check the documentation for more details.
 
-```bash
-npm i --save @nextcloud/vue
-```
+```js
+import NcButton from '@nextcloud/vue/components/NcButton'
+import { useHotKey } from '@nextcloud/vue/composables/useHotKey'
 
-### Usage
+// (Deprecated) Old import path 
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import { useHotKey } from '@nextcloud/vue/dist/Composables/useHotKey.js'
+```
 
-To use a component, just import it:
+Import from a single root is available as well. Use with caution: this might lead to slower build time and larger bundles in some cases.
 
 ```js
-import { NcAppNavigation, NcActions, NcActionButton } from '@nextcloud/vue'
+import { NcButton, useHotKey } from '@nextcloud/vue'
 ```
 
-### Registering all components.
+### (Deprecated) Registering all components
+
+`NextcloudVuePlugin` registers all the components and directives globally.
 
-> Be careful, this will registry all components and directives, even the ones not being used.
+> ⚠️ This installation method leads to extremely large bundle and removed in v9.\
+> If you don't want to import component on usage you may use [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components) instead.
 
 ```js
 import Vue from 'vue'
@@ -52,7 +63,30 @@ import { NextcloudVuePlugin } from '@nextcloud/vue'
 Vue.use(NextcloudVuePlugin)
 ```
 
-## Development setup
+## 🤝 Contributing
+
+### 📜 How to contribute
+
+1. It's always good to check/create an issue first and discuss the problem or feature you want to work on
+2. Fork the repository and create a new branch
+3. Make the changes
+4. Check the change in Vue-Styleguidist and/or Nextcloud apps
+   - Do not forget to `lint` and `test` your changes
+   - If possible, add tests for your changes
+5. Commit and push your changes, create a Pull Request
+   - Make sure to follow the [Conventional Commits](https://www.conventionalcommits.org) in commit messages, and PR titles, for example:\
+     `fix(NcButton): correct layout on Safari`
+   - Make sure to follow the **Pull Request template**
+   - Sign-off you commits for the [Developer Certificate of Origin (DCO)](https://developercertificate.org/)
+6. Get your PR reviewed
+   - If you don't receive a feedback in a week, feel free to mention the maintainers, for example, last developers worked on the module
+7. Get your PR merged 
+
+Please read the [Code of Conduct](https://nextcloud.com/community/code-of-conduct/). This document offers some guidance to ensure Nextcloud participants can cooperate effectively in a positive and inspiring atmosphere and to explain how together we can strengthen and support each other.
+
+More information on how to contribute: [https://nextcloud.com/contribute/](https://nextcloud.com/contribute/)
+
+### 🧑‍💻 Development setup
 
 If you want to work on improving the components it’s best to run the latest code and link it to your local Nextcloud installation:
 
@@ -66,64 +100,36 @@ If you want to work on improving the components it’s best to run the latest co
     - In the repository of an app do `npm link @nextcloud/vue` (you need to re-link any time you do `npm ci` in the app)
 4. Then build the app with: `npm run build` (or watch for changes with `npm run watch`)
 
-## Translations
+### 🌐 Translations
 
-This library uses translated strings.
-When you edit/create a translated string, you need to run `npm run l10n:extract` to update the source files.
-Our awesome translation community will then be notified and a bot will sync those changes automatically.
+Use `t` and `n` functions from `src/l10n.js` to display translated strings. They follow `gettext` and `ngettext` interface from [`@nextcloud/l10n/gettext`](https://nextcloud-libraries.github.io/nextcloud-l10n/modules/_nextcloud_l10n_gettext.html).
 
-Nonetheless, it requires a bit of caution.
-When you implement a translated string, import the `translate` or `translatePlural` and add it in your methods like so:
 ```vue
+<script setup lang="ts">
+import { t } from '../../l10n.js'
+</script>
+
 <template>
 	<element>
 		{{ t('Choose') }}
 	</element>
 </template>
-
-<script>
-import { translate as t } from '@nextcloud/l10n'
-
-export default {
-	methods: {
-		t,
-	},
-}
-</script>
 ```
 
-Please note that using a translated string as an attribute will _NOT_ work.
-But it will work if it's within an element (like the example above)
-```vue
-<template>
-	<element :prop="t('This will not work')" />
-</template>
-```
-
-You will instead have to define the string in the data section and use the relevant variable reference.
-```vue
-<template>
-	<element :prop="chooseProp" />
-</template>
+When you edit/create a translated string, you need to update the l10n files.
+Our awesome translation community will then be notified and a bot will sync translations automatically.
 
-<script>
-export default {
-	data() {
-		return {
-			chooseProp: t('Choose'),
-		},
-	}
-}
-</script>
+```sh
+npm run l10n:extract
 ```
 
-## Styleguide
+### 🐸 Styleguidist
 
 When developing new components or extending components, make sure to also have some bits of related documentation like examples, where applicable.
 To test components and the documentation in that context, you can run `npm run styleguide` to run a local server that serves the style guide
 with all the components.
 
-### Using vue-devtools in Firefox
+#### Using vue-devtools in Firefox
 
 If you want to use [vue-devtools](https://github.com/vuejs/vue-devtools) in Firefox, you need to:
 
@@ -149,7 +155,7 @@ index 0e3a6a705d..416b8b0fb9 100644
         /** @var array Domains from which scripts can get loaded */
 ```
 
-## Releasing a new version
+## 📤 Releasing a new version
 
 - Pull the latest changes from `master` or `stableX`
 - Checkout a new branch with the tag name (e.g `v4.0.1`): `git checkout -b v<version>`

package/dist/Components/NcActionButton.cjs

@@ -1,168 +1,3 @@
-require('../assets/NcActionButton-CNq6xIdS.css');
 "use strict";
-const Check = require("../chunks/Check-Du8mPz_B.cjs");
-const ChevronRight = require("../chunks/ChevronRight-ZCKVg9OI.cjs");
-const actionText = require("../chunks/actionText-BcrK4uH1.cjs");
-const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-V0q-tHlQ.cjs");
-const _sfc_main = {
-  name: "NcActionButton",
-  components: {
-    CheckIcon: Check.Check,
-    ChevronRightIcon: ChevronRight.ChevronRight
-  },
-  mixins: [actionText.ActionTextMixin],
-  inject: {
-    isInSemanticMenu: {
-      from: "NcActions:isSemanticMenu",
-      default: false
-    }
-  },
-  props: {
-    /**
-     * @deprecated To be removed in @nextcloud/vue 9. Migration guide: remove ariaHidden prop from NcAction* components.
-     * @todo Add a check in @nextcloud/vue 9 that this prop is not provided,
-     * otherwise root element will inherit incorrect aria-hidden.
-     */
-    ariaHidden: {
-      type: Boolean,
-      default: null
-    },
-    /**
-     * disabled state of the action button
-     */
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * If this is a menu, a chevron icon will
-     * be added at the end of the line
-     */
-    isMenu: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * The button's behavior, by default the button acts like a normal button with optional toggle button behavior if `modelValue` is `true` or `false`.
-     * But you can also set to checkbox button behavior with tri-state or radio button like behavior.
-     * This extends the native HTML button type attribute.
-     */
-    type: {
-      type: String,
-      default: "button",
-      validator: (behavior) => ["button", "checkbox", "radio", "reset", "submit"].includes(behavior)
-    },
-    /**
-     * The buttons state if `type` is 'checkbox' or 'radio' (meaning if it is pressed / selected).
-     * For checkbox and toggle button behavior - boolean value.
-     * For radio button behavior - could be a boolean checked or a string with the value of the button.
-     * Note: Unlike native radio buttons, NcActionButton are not grouped by name, so you need to connect them by bind correct modelValue.
-     *
-     *  **This is not availabe for `type='submit'` or `type='reset'`**
-     *
-     * If using `type='checkbox'` a `model-value` of `true` means checked, `false` means unchecked and `null` means indeterminate (tri-state)
-     * For `type='radio'` `null` is equal to `false`
-     */
-    modelValue: {
-      type: [Boolean, String],
-      default: null
-    },
-    /**
-     * The value used for the `modelValue` when this component is used with radio behavior
-     * Similar to the `value` attribute of `<input type="radio">`
-     */
-    value: {
-      type: String,
-      default: null
-    }
-  },
-  computed: {
-    /**
-     * determines if the action is focusable
-     *
-     * @return {boolean} is the action focusable ?
-     */
-    isFocusable() {
-      return !this.disabled;
-    },
-    /**
-     * The current "checked" or "pressed" state for the model behavior
-     */
-    isChecked() {
-      if (this.type === "radio" && typeof this.modelValue !== "boolean") {
-        return this.modelValue === this.value;
-      }
-      return this.modelValue;
-    },
-    /**
-     * The native HTML type to set on the button
-     */
-    nativeType() {
-      if (this.type === "submit" || this.type === "reset") {
-        return this.type;
-      }
-      return "button";
-    },
-    /**
-     * HTML attributes to bind to the <button>
-     */
-    buttonAttributes() {
-      const attributes = {};
-      if (this.isInSemanticMenu) {
-        attributes.role = "menuitem";
-        if (this.type === "radio") {
-          attributes.role = "menuitemradio";
-          attributes["aria-checked"] = this.isChecked ? "true" : "false";
-        } else if (this.type === "checkbox" || this.nativeType === "button" && this.modelValue !== null) {
-          attributes.role = "menuitemcheckbox";
-          attributes["aria-checked"] = this.modelValue === null ? "mixed" : this.modelValue ? "true" : "false";
-        }
-      } else if (this.modelValue !== null && this.nativeType === "button") {
-        attributes["aria-pressed"] = this.modelValue ? "true" : "false";
-      }
-      return attributes;
-    }
-  },
-  methods: {
-    /**
-     * Forward click event, let mixin handle the close-after-click and emit new modelValue if needed
-     * @param {MouseEvent} event The click event
-     */
-    handleClick(event) {
-      this.onClick(event);
-      if (this.modelValue !== null || this.type !== "button") {
-        if (this.type === "radio") {
-          if (typeof this.modelValue !== "boolean") {
-            if (!this.isChecked) {
-              this.$emit("update:modelValue", this.value);
-            }
-          } else {
-            this.$emit("update:modelValue", !this.isChecked);
-          }
-        } else {
-          this.$emit("update:modelValue", !this.isChecked);
-        }
-      }
-    }
-  }
-};
-var _sfc_render = function render() {
-  var _vm = this, _c = _vm._self._c;
-  return _c("li", { staticClass: "action", class: { "action--disabled": _vm.disabled }, attrs: { "role": _vm.isInSemanticMenu && "presentation" } }, [_c("button", _vm._b({ class: ["action-button button-vue", {
-    "action-button--active": _vm.isChecked,
-    focusable: _vm.isFocusable
-  }], attrs: { "aria-label": _vm.ariaLabel, "disabled": _vm.disabled, "title": _vm.title, "type": _vm.nativeType }, on: { "click": _vm.handleClick } }, "button", _vm.buttonAttributes, false), [_vm._t("icon", function() {
-    return [_c("span", { staticClass: "action-button__icon", class: [_vm.isIconUrl ? "action-button__icon--url" : _vm.icon], style: { backgroundImage: _vm.isIconUrl ? `url(${_vm.icon})` : null }, attrs: { "aria-hidden": "true" } })];
-  }), _vm.name ? _c("span", { staticClass: "action-button__longtext-wrapper" }, [_c("strong", { staticClass: "action-button__name" }, [_vm._v(" " + _vm._s(_vm.name) + " ")]), _c("br"), _c("span", { staticClass: "action-button__longtext", domProps: { "textContent": _vm._s(_vm.text) } })]) : _vm.isLongText ? _c("span", { staticClass: "action-button__longtext", domProps: { "textContent": _vm._s(_vm.text) } }) : _c("span", { staticClass: "action-button__text" }, [_vm._v(_vm._s(_vm.text))]), _vm.isMenu ? _c("ChevronRightIcon", { staticClass: "action-button__menu-icon", attrs: { "size": 20 } }) : _vm.isChecked === true ? _c("CheckIcon", { staticClass: "action-button__pressed-icon", attrs: { "size": 20 } }) : _vm.isChecked === false ? _c("span", { staticClass: "action-button__pressed-icon material-design-icon" }) : _vm._e(), _vm._e()], 2)]);
-};
-var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  "dba65098"
-);
-const NcActionButton = __component__.exports;
-module.exports = NcActionButton;
+const NcActionButton = require("../chunks/NcActionButton-DcpUnqA7.cjs");
+module.exports = NcActionButton.NcActionButton;

package/dist/Components/NcActionButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcActionButton.cjs","sources":["../../src/components/NcActionButton/NcActionButton.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots.\n\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.vue'\n\timport Plus from 'vue-material-design-icons/Plus.vue'\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.vue'\n\timport Plus from 'vue-material-design-icons/Plus.vue'\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.vue'\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.vue'\nimport HandBackRight from 'vue-material-design-icons/HandBackRight.vue'\n\nexport default {\n\tcomponents: {\n\t\tHandBackLeft,\n\t\tHandBackRight,\n\t},\n}\n</script>\n```\n\n### With different model behavior\nBy default the button will act like a normal button, but it is also possible to change the behavior to a toggle button, checkbox button or radio button.\n\nFor example to have the button act like a toggle button just set the `modelValue` property to the toggle state:\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton :model-value.sync=\"fullscreen\">\n\t\t\t<template #icon>\n\t\t\t\t<Fullscreen :size=\"20\" />\n\t\t\t</template>\n\t\t\tFullscreen\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport Fullscreen from 'vue-material-design-icons/Fullscreen.vue'\n\nexport default {\n\tcomponents: {\n\t\tFullscreen,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tfullscreen: true,\n\t\t}\n\t},\n}\n</script>\n```\n\nAnother example would be using it with checkbox semantics, to enable or disable features.\nThis also allows tri-state behavior (`true`, `false`, `null`) in which case `aria-checked` will be either `true`, `false` or `mixed`.\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton :model-value.sync=\"handRaised\" type=\"checkbox\">\n\t\t\t<template #icon>\n\t\t\t\t<HandBackLeft :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise hand\n\t\t</NcActionButton>\n\t\t<NcActionButton :model-value.sync=\"fullscreen\" type=\"checkbox\">\n\t\t\t<template #icon>\n\t\t\t\t<Fullscreen :size=\"20\" />\n\t\t\t</template>\n\t\t\tFullscreen\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'\nimport Fullscreen from 'vue-material-design-icons/Fullscreen.vue'\n\nexport default {\n\tcomponents: {\n\t\tHandBackLeft,\n\t\tFullscreen,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tfullscreen: true,\n\t\t\thandRaised: false,\n\t\t}\n\t},\n}\n</script>\n```\n\nIt is also possible to use the button with radio semantics, this is only possible in menus and not for inline actions!\n\nWith a string `modelValue`, checked state is determined by the `value` property and updates `modelValue` with the new `value` string.\n\nWith a boolean `modelValue`, checked state is determined by `modelValue` and updates to `true` on check.\n\nNote: unlike native radio buttons, `NcActionButton` are not grouped by name, so you need to connect them by bind correct `modelValue``.\n\n```vue\n<template>\n\t<div>\n\t\t<NcActions>\n\t\t\t<NcActionButton :model-value.sync=\"payment\" type=\"radio\" value=\"cash\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cash :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPay with cash\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :model-value.sync=\"payment\" type=\"radio\" value=\"card\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<CreditCard :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPay by card\n\t\t\t</NcActionButton>\n\t\t\t<NcActionSeparator />\n\t\t\t<NcActionButton type=\"radio\" :model-value=\"align.isLeft\" @update:modelValue=\"setAlign('Left', $event)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<FormatAlignLeft :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tLeft\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton type=\"radio\" :model-value=\"align.isCenter\" @update:modelValue=\"setAlign('Center', $event)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<FormatAlignCenter :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tCenter\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton type=\"radio\" :model-value=\"align.isRight\" @update:modelValue=\"setAlign('Right', $event)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<FormatAlignRight :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tRight\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t\t<p>payment = \"{{ payment }}\"</p>\n\t\t<p>align.isLeft = {{ align.isLeft }}</p>\n\t\t<p>align.isCenter = {{ align.isCenter }}</p>\n\t\t<p>align.isRight = {{ align.isRight }}</p>\n\t</div>\n</template>\n<script>\nimport Cash from 'vue-material-design-icons/Cash.vue'\nimport CreditCard from 'vue-material-design-icons/CreditCard.vue'\nimport FormatAlignLeft from 'vue-material-design-icons/FormatAlignLeft.vue'\nimport FormatAlignCenter from 'vue-material-design-icons/FormatAlignCenter.vue'\nimport FormatAlignRight from 'vue-material-design-icons/FormatAlignRight.vue'\n\nexport default {\n\tcomponents: {\n\t\tCash,\n\t\tCreditCard,\n\t\tFormatAlignLeft,\n\t\tFormatAlignCenter,\n\t\tFormatAlignRight,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tpayment: 'card',\n\t\t\talign: {\n\t\t\t\tisLeft: false,\n\t\t\t\tisCenter: true,\n\t\t\t\tisRight: false,\n\t\t\t},\n\t\t}\n\t},\n\tmethods: {\n\t\tsetAlign(direction, value) {\n\t\t\tthis.align.isLeft = false\n\t\t\tthis.align.isCenter = false\n\t\t\tthis.align.isRight = false\n\t\t\tthis.align[`is${direction}`] = value\n\t\t},\n\t}\n}\n</script>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" :class=\"{ 'action--disabled': disabled }\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t<button :aria-label=\"ariaLabel\"\n\t\t\t:class=\"['action-button button-vue', {\n\t\t\t\t'action-button--active': isChecked,\n\t\t\t\tfocusable: isFocusable,\n\t\t\t}]\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:title=\"title\"\n\t\t\t:type=\"nativeType\"\n\t\t\tv-bind=\"buttonAttributes\"\n\t\t\t@click=\"handleClick\">\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\taria-hidden=\"true\"\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\" :size=\"20\" class=\"action-button__menu-icon\" />\n\t\t\t<CheckIcon v-else-if=\"isChecked === true\" :size=\"20\" class=\"action-button__pressed-icon\" />\n\t\t\t<span v-else-if=\"isChecked === false\" class=\"action-button__pressed-icon material-design-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 CheckIcon from 'vue-material-design-icons/Check.vue'\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\tCheckIcon,\n\t\tChevronRightIcon,\n\t},\n\tmixins: [ActionTextMixin],\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: 'NcActions:isSemanticMenu',\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * @deprecated To be removed in @nextcloud/vue 9. Migration guide: remove ariaHidden prop from NcAction* components.\n\t\t * @todo Add a check in @nextcloud/vue 9 that this prop is not provided,\n\t\t * otherwise root element will inherit incorrect aria-hidden.\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 * 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 * 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\n\t\t/**\n\t\t * The button's behavior, by default the button acts like a normal button with optional toggle button behavior if `modelValue` is `true` or `false`.\n\t\t * But you can also set to checkbox button behavior with tri-state or radio button like behavior.\n\t\t * This extends the native HTML button type attribute.\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'button',\n\t\t\tvalidator: (behavior) => ['button', 'checkbox', 'radio', 'reset', 'submit'].includes(behavior),\n\t\t},\n\n\t\t/**\n\t\t * The buttons state if `type` is 'checkbox' or 'radio' (meaning if it is pressed / selected).\n\t\t * For checkbox and toggle button behavior - boolean value.\n\t\t * For radio button behavior - could be a boolean checked or a string with the value of the button.\n\t\t * Note: Unlike native radio buttons, NcActionButton are not grouped by name, so you need to connect them by bind correct modelValue.\n\t\t *\n\t\t *  **This is not availabe for `type='submit'` or `type='reset'`**\n\t\t *\n\t\t * If using `type='checkbox'` a `model-value` of `true` means checked, `false` means unchecked and `null` means indeterminate (tri-state)\n\t\t * For `type='radio'` `null` is equal to `false`\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: [Boolean, String],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * The value used for the `modelValue` when this component is used with radio behavior\n\t\t * Similar to the `value` attribute of `<input type=\"radio\">`\n\t\t */\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\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\n\t\t/**\n\t\t * The current \"checked\" or \"pressed\" state for the model behavior\n\t\t */\n\t\tisChecked() {\n\t\t\tif (this.type === 'radio' && typeof this.modelValue !== 'boolean') {\n\t\t\t\treturn this.modelValue === this.value\n\t\t\t}\n\t\t\treturn this.modelValue\n\t\t},\n\n\t\t/**\n\t\t * The native HTML type to set on the button\n\t\t */\n\t\tnativeType() {\n\t\t\tif (this.type === 'submit' || this.type === 'reset') {\n\t\t\t\treturn this.type\n\t\t\t}\n\t\t\treturn 'button'\n\t\t},\n\n\t\t/**\n\t\t * HTML attributes to bind to the <button>\n\t\t */\n\t\tbuttonAttributes() {\n\t\t\tconst attributes = {}\n\n\t\t\tif (this.isInSemanticMenu) {\n\t\t\t\t// By default it needs to be a menu item in semantic menus\n\t\t\t\tattributes.role = 'menuitem'\n\n\t\t\t\tif (this.type === 'radio') {\n\t\t\t\t\tattributes.role = 'menuitemradio'\n\t\t\t\t\tattributes['aria-checked'] = this.isChecked ? 'true' : 'false'\n\t\t\t\t} else if (this.type === 'checkbox' || (this.nativeType === 'button' && this.modelValue !== null)) {\n\t\t\t\t\t// either if checkbox behavior was set or the model value is not unset\n\t\t\t\t\tattributes.role = 'menuitemcheckbox'\n\t\t\t\t\tattributes['aria-checked'] = this.modelValue === null ? 'mixed' : (this.modelValue ? 'true' : 'false')\n\t\t\t\t}\n\t\t\t} else if (this.modelValue !== null && this.nativeType === 'button') {\n\t\t\t\t// In case this has a modelValue it is considered a toggle button, so we need to set the aria-pressed\n\t\t\t\tattributes['aria-pressed'] = this.modelValue ? 'true' : 'false'\n\t\t\t}\n\n\t\t\treturn attributes\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Forward click event, let mixin handle the close-after-click and emit new modelValue if needed\n\t\t * @param {MouseEvent} event The click event\n\t\t */\n\t\thandleClick(event) {\n\t\t\tthis.onClick(event)\n\t\t\t// If modelValue or type is set (so modelValue might be null for tri-state) we need to update it\n\t\t\tif (this.modelValue !== null || this.type !== 'button') {\n\t\t\t\tif (this.type === 'radio') {\n\t\t\t\t\tif (typeof this.modelValue !== 'boolean') {\n\t\t\t\t\t\t// String-value radios behavior is similar to native - click on checked radio does nothing\n\t\t\t\t\t\tif (!this.isChecked) {\n\t\t\t\t\t\t\tthis.$emit('update:modelValue', this.value)\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// Boolean radio allows to uncheck\n\t\t\t\t\t\tthis.$emit('update:modelValue', !this.isChecked)\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\t// Checkbox toggles value\n\t\t\t\t\tthis.$emit('update:modelValue', !this.isChecked)\n\t\t\t\t}\n\t\t\t}\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\n.action-button__pressed-icon {\n\tmargin-left: auto;\n\tmargin-right: calc($icon-margin * -1);\n}\n</style>\n"],"names":["CheckIcon","ChevronRightIcon","ActionTextMixin"],"mappings":";;;;;AAuXA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,WAAAA,MAAA;AAAA,IACA,kBAAAC,aAAA;AAAA,EACA;AAAA,EACA,QAAA,CAAAC,WAAAA,eAAA;AAAA,EAEA,QAAA;AAAA,IACA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,aAAA,CAAA,UAAA,YAAA,SAAA,SAAA,QAAA,EAAA,SAAA,QAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAaA,YAAA;AAAA,MACA,MAAA,CAAA,SAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AACA,aAAA,CAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AACA,UAAA,KAAA,SAAA,WAAA,OAAA,KAAA,eAAA,WAAA;AACA,eAAA,KAAA,eAAA,KAAA;AAAA,MACA;AACA,aAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AACA,UAAA,KAAA,SAAA,YAAA,KAAA,SAAA,SAAA;AACA,eAAA,KAAA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAA;AACA,YAAA,aAAA,CAAA;AAEA,UAAA,KAAA,kBAAA;AAEA,mBAAA,OAAA;AAEA,YAAA,KAAA,SAAA,SAAA;AACA,qBAAA,OAAA;AACA,qBAAA,cAAA,IAAA,KAAA,YAAA,SAAA;AAAA,QACA,WAAA,KAAA,SAAA,cAAA,KAAA,eAAA,YAAA,KAAA,eAAA,MAAA;AAEA,qBAAA,OAAA;AACA,qBAAA,cAAA,IAAA,KAAA,eAAA,OAAA,UAAA,KAAA,aAAA,SAAA;AAAA,QACA;AAAA,MACA,WAAA,KAAA,eAAA,QAAA,KAAA,eAAA,UAAA;AAEA,mBAAA,cAAA,IAAA,KAAA,aAAA,SAAA;AAAA,MACA;AAEA,aAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA,OAAA;AACA,WAAA,QAAA,KAAA;AAEA,UAAA,KAAA,eAAA,QAAA,KAAA,SAAA,UAAA;AACA,YAAA,KAAA,SAAA,SAAA;AACA,cAAA,OAAA,KAAA,eAAA,WAAA;AAEA,gBAAA,CAAA,KAAA,WAAA;AACA,mBAAA,MAAA,qBAAA,KAAA,KAAA;AAAA,YACA;AAAA,UACA,OAAA;AAEA,iBAAA,MAAA,qBAAA,CAAA,KAAA,SAAA;AAAA,UACA;AAAA,QACA,OAAA;AAEA,eAAA,MAAA,qBAAA,CAAA,KAAA,SAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcActionButton.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}