@nextcloud/vue 9.0.0-alpha.1 → 9.0.0-alpha.3

package/dist/chunks/NcActionButton-VnbqrtOY.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcActionButton-VnbqrtOY.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\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 v-model=\"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 v-model=\"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 v-model=\"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 v-model=\"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 v-model=\"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: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\temits: ['update:modelValue'],\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: -$icon-margin;\n}\n</style>\n"],"names":["_sfc_main","Check","ChevronRight","behavior","attributes","event","_hoisted_1","_hoisted_2","_hoisted_4","_hoisted_6","_hoisted_7","normalizeClass","$props","$options","createElementVNode","mergeProps","_ctx","_cache","args","renderSlot","normalizeStyle","openBlock","createElementBlock","_hoisted_3","_hoisted_9","createCommentVNode"],"mappings":";;;;;;AAwYA,MAAAA,IAAA;AAAA,EACC,MAAA;AAAA;IAGC,WAAAC;AAAA,IACA,kBAAAC;AAAA;;EAID,QAAA;AAAA,IACC,kBAAA;AAAA,MACC,MAAA;AAAA;;;EAKF,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;IAcC,UAAA;AAAA;;;;;;;IASA,QAAA;AAAA;;;;;;;;;;MAYC,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA,CAAA,UAAA,YAAA,SAAA,SAAA,QAAA,EAAA,SAAAA,CAAA;AAAA;;;;;;;;;;;;;MAeA,MAAA,CAAA,SAAA,MAAA;AAAA;;;;;;IAQD,OAAA;AAAA;;;;;EAQD,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOE,aAAA,CAAA,KAAA;AAAA;;;;;4EAQC,KAAA,eAAA,KAAA,QAED,KAAA;AAAA;;;;;AAOA,aAAA,KAAA,SAAA,YAAA,KAAA,SAAA,UACC,KAAA;;;;;IAQF,mBAAA;AACC,YAAAC,IAAA,CAAA;oFAOEA,EAAA,OAAA,2EAED,KAAA,SAAA,cAAA,KAAA,eAAA,YAAA,KAAA,eAAA,UAECA,EAAA,OAAA,oBACAA,EAAA,cAAA,IAAA,KAAA,eAAA,OAAA,UAAA,KAAA,aAAA,SAAA,kIAOFA;AAAA;;EAIF,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKC,YAAAC,GAAA;AACC,WAAA,QAAAA,CAAA,oFAIE,OAAA,KAAA,cAAA,YAEC,KAAA,aACC,KAAA,MAAA,qBAAA,KAAA,KAAA;;;AAaP,uDA9iBAC,IAAA,CAAA,MAAA,GAAAC,IAAA,CAAA,cAAA,SAAA,MAAA;;EAiWI,OAAA;GACQC,IAAA,EAAA,OAAA,sBAAA,yEAlWZC,IAAA,CAAA,aAAA,GAAAC,IAAA,CAAA,aAAA;;EAmXgB,OAAA;;;EAKyB,OAAA;;;;;IA3CpC,OAAAC,EAAA,CAAA,UAAA,EAAA,oBAAAC,EAAA,SAAA,CAAA,CAAA;AAAA,IAA0D,MAAAC,EAAA,oBAAA;AAAA;IAC7DC,EAAA,UAAAC,EAAA;AAAA,MAAS,cAAAC,EAAA;AAAA;;;;MAKP,OAAAA,EAAA;AAAA,MACA,MAAAH,EAAA;AAAA;MAEA,SAAAI,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAAL,EAAA,eAAAA,EAAA,YAAA,GAAAK,CAAA;AAAA;MAEDC,EAAAH,EAAA,QAAA,QAAA,CAAA,GAAA,MAAA;AAAA;UACQ,OAAAL,EAAA,CAAA,CAAAK,EAAA,YAAA,6BAAAA,EAAA,IAAA,GAAA,qBAAA,CAAA;AAAA,UACL,OAAAI,EAAA,EAAA,iBAAAJ,EAAA,YAAA,OAAA,OAAAA,EAAA,MAAA,OAAA,KAAA,CAAA;AAAA,UACD,eAAA;AAAA;;gBAKFK,EAAA,GAAAC,EAAA,QAAAC,GAAA;AAAA;;;UAQO,OAAA;AAAA;QAxWV,GAAA,MAAA,GAAAd,CAAA;AAAA;;QA+WI,OAAA;AAAA;MA/WJ,GAAA,MAAA,GAAAC,CAAA;;;QAsXoC,MAAA;AAAA,QAAU,OAAA;AAAA;;QACA,MAAA;AAAA,QAAU,OAAA;AAAA,kCACrDW,EAAA,GAAAC,EAAA,QAAAE,CAAA,KAxXHC,EAAA,IAAA,EAAA;AAAA;IAAA,GAAA,IAAAlB,CAAA;AAAA,EAAA,GAAA,IAAAD,CAAA;;;"}

package/dist/chunks/NcActionButton-sJpgOVU9.cjs

@@ -1,173 +0,0 @@
-var N = require("../assets/NcActionButton-De4wlKZH.css");
-const c = require("./Check-fwcsc82n.cjs"), u = require("./ChevronRight-7GGKl2bX.cjs"), r = require("./actionText-H_SIpDkO.cjs"), e = require("vue"), d = require("./_plugin-vue_export-helper-xG2iG1wl.cjs"), h = {
-  name: "NcActionButton",
-  components: {
-    CheckIcon: c.Check,
-    ChevronRightIcon: u.ChevronRight
-  },
-  mixins: [r.ActionTextMixin],
-  inject: {
-    isInSemanticMenu: {
-      from: "NcActions:isSemanticMenu",
-      default: !1
-    }
-  },
-  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: !1
-    },
-    /**
-     * If this is a menu, a chevron icon will
-     * be added at the end of the line
-     */
-    isMenu: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * 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: (t) => ["button", "checkbox", "radio", "reset", "submit"].includes(t)
-    },
-    /**
-     * 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
-    }
-  },
-  emits: ["update:modelValue"],
-  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() {
-      return this.type === "radio" && typeof this.modelValue != "boolean" ? this.modelValue === this.value : this.modelValue;
-    },
-    /**
-     * The native HTML type to set on the button
-     */
-    nativeType() {
-      return this.type === "submit" || this.type === "reset" ? this.type : "button";
-    },
-    /**
-     * HTML attributes to bind to the <button>
-     */
-    buttonAttributes() {
-      const t = {};
-      return this.isInSemanticMenu ? (t.role = "menuitem", this.type === "radio" ? (t.role = "menuitemradio", t["aria-checked"] = this.isChecked ? "true" : "false") : (this.type === "checkbox" || this.nativeType === "button" && this.modelValue !== null) && (t.role = "menuitemcheckbox", t["aria-checked"] = this.modelValue === null ? "mixed" : this.modelValue ? "true" : "false")) : this.modelValue !== null && this.nativeType === "button" && (t["aria-pressed"] = this.modelValue ? "true" : "false"), t;
-    }
-  },
-  methods: {
-    /**
-     * Forward click event, let mixin handle the close-after-click and emit new modelValue if needed
-     * @param {MouseEvent} event The click event
-     */
-    handleClick(t) {
-      this.onClick(t), (this.modelValue !== null || this.type !== "button") && (this.type === "radio" ? typeof this.modelValue != "boolean" ? this.isChecked || this.$emit("update:modelValue", this.value) : this.$emit("update:modelValue", !this.isChecked) : this.$emit("update:modelValue", !this.isChecked));
-    }
-  }
-}, m = (t) => (e.pushScopeId("data-v-c3504a17"), t = t(), e.popScopeId(), t), p = ["role"], b = ["aria-label", "title", "type"], k = {
-  key: 0,
-  class: "action-button__longtext-wrapper"
-}, _ = { class: "action-button__name" }, y = /* @__PURE__ */ m(() => /* @__PURE__ */ e.createElementVNode("br", null, null, -1)), C = ["textContent"], f = ["textContent"], V = {
-  key: 2,
-  class: "action-button__text"
-}, g = {
-  key: 5,
-  class: "action-button__pressed-icon material-design-icon"
-};
-function B(t, o, i, I, S, n) {
-  const l = e.resolveComponent("ChevronRightIcon"), s = e.resolveComponent("CheckIcon");
-  return e.openBlock(), e.createElementBlock("li", {
-    class: e.normalizeClass(["action", { "action--disabled": i.disabled }]),
-    role: n.isInSemanticMenu && "presentation"
-  }, [
-    e.createElementVNode("button", e.mergeProps({
-      "aria-label": t.ariaLabel,
-      class: ["action-button button-vue", {
-        "action-button--active": n.isChecked,
-        focusable: n.isFocusable
-      }],
-      title: t.title,
-      type: n.nativeType
-    }, n.buttonAttributes, {
-      onClick: o[0] || (o[0] = (...a) => n.handleClick && n.handleClick(...a))
-    }), [
-      e.renderSlot(t.$slots, "icon", {}, () => [
-        e.createElementVNode("span", {
-          class: e.normalizeClass([[t.isIconUrl ? "action-button__icon--url" : t.icon], "action-button__icon"]),
-          style: e.normalizeStyle({ backgroundImage: t.isIconUrl ? "url(".concat(t.icon, ")") : null }),
-          "aria-hidden": "true"
-        }, null, 6)
-      ], !0),
-      t.name ? (e.openBlock(), e.createElementBlock("span", k, [
-        e.createElementVNode("strong", _, e.toDisplayString(t.name), 1),
-        y,
-        e.createElementVNode("span", {
-          class: "action-button__longtext",
-          textContent: e.toDisplayString(t.text)
-        }, null, 8, C)
-      ])) : t.isLongText ? (e.openBlock(), e.createElementBlock("span", {
-        key: 1,
-        class: "action-button__longtext",
-        textContent: e.toDisplayString(t.text)
-      }, null, 8, f)) : (e.openBlock(), e.createElementBlock("span", V, e.toDisplayString(t.text), 1)),
-      i.isMenu ? (e.openBlock(), e.createBlock(l, {
-        key: 3,
-        size: 20,
-        class: "action-button__menu-icon"
-      })) : n.isChecked === !0 ? (e.openBlock(), e.createBlock(s, {
-        key: 4,
-        size: 20,
-        class: "action-button__pressed-icon"
-      })) : n.isChecked === !1 ? (e.openBlock(), e.createElementBlock("span", g)) : e.createCommentVNode("", !0),
-      e.createCommentVNode("", !0)
-    ], 16, b)
-  ], 10, p);
-}
-const v = /* @__PURE__ */ d._export_sfc(h, [["render", B], ["__scopeId", "data-v-c3504a17"]]);
-exports.NcActionButton = v;

package/dist/chunks/NcActionButton-sJpgOVU9.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcActionButton-sJpgOVU9.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\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 v-model=\"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 v-model=\"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 v-model=\"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 v-model=\"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 v-model=\"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: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\temits: ['update:modelValue'],\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: -$icon-margin;\n}\n</style>\n"],"names":["_sfc_main","Check","ChevronRight","behavior","attributes","event","_hoisted_1","_hoisted_2","_hoisted_4","_hoisted_6","_hoisted_7","vue","$props","$options","_ctx","_cache","args","_hoisted_3","_hoisted_9"],"mappings":";8MAwYAA,IAAA;AAAA,EACC,MAAA;AAAA;IAGC,WAAAC,EAAA;AAAA,IACA,kBAAAC,EAAA;AAAA;;EAID,QAAA;AAAA,IACC,kBAAA;AAAA,MACC,MAAA;AAAA;;;EAKF,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;IAcC,UAAA;AAAA;;;;;;;IASA,QAAA;AAAA;;;;;;;;;;MAYC,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA,CAAA,UAAA,YAAA,SAAA,SAAA,QAAA,EAAA,SAAAA,CAAA;AAAA;;;;;;;;;;;;;MAeA,MAAA,CAAA,SAAA,MAAA;AAAA;;;;;;IAQD,OAAA;AAAA;;;;;EAQD,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOE,aAAA,CAAA,KAAA;AAAA;;;;;4EAQC,KAAA,eAAA,KAAA,QAED,KAAA;AAAA;;;;;AAOA,aAAA,KAAA,SAAA,YAAA,KAAA,SAAA,UACC,KAAA;;;;;IAQF,mBAAA;AACC,YAAAC,IAAA,CAAA;oFAOEA,EAAA,OAAA,2EAED,KAAA,SAAA,cAAA,KAAA,eAAA,YAAA,KAAA,eAAA,UAECA,EAAA,OAAA,oBACAA,EAAA,cAAA,IAAA,KAAA,eAAA,OAAA,UAAA,KAAA,aAAA,SAAA,kIAOFA;AAAA;;EAIF,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKC,YAAAC,GAAA;AACC,WAAA,QAAAA,CAAA,oFAIE,OAAA,KAAA,cAAA,YAEC,KAAA,aACC,KAAA,MAAA,qBAAA,KAAA,KAAA;;;AAaP,8EA9iBAC,IAAA,CAAA,MAAA,GAAAC,IAAA,CAAA,cAAA,SAAA,MAAA;;EAiWI,OAAA;GACQC,IAAA,EAAA,OAAA,sBAAA,4FAlWZC,IAAA,CAAA,aAAA,GAAAC,IAAA,CAAA,aAAA;;EAmXgB,OAAA;;;EAKyB,OAAA;;;;;IA3CpC,OAAAC,EAAA,eAAA,CAAA,UAAA,EAAA,oBAAAC,EAAA,SAAA,CAAA,CAAA;AAAA,IAA0D,MAAAC,EAAA,oBAAA;AAAA;IAC7DF,EAAA,mBAAA,UAAAA,EAAA,WAAA;AAAA,MAAS,cAAAG,EAAA;AAAA;;;;MAKP,OAAAA,EAAA;AAAA,MACA,MAAAD,EAAA;AAAA;MAEA,SAAAE,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAAH,EAAA,eAAAA,EAAA,YAAA,GAAAG,CAAA;AAAA;MAEDL,EAAA,WAAAG,EAAA,QAAA,QAAA,CAAA,GAAA,MAAA;AAAA;UACQ,OAAAH,EAAA,eAAA,CAAA,CAAAG,EAAA,YAAA,6BAAAA,EAAA,IAAA,GAAA,qBAAA,CAAA;AAAA,UACL,OAAAH,EAAA,eAAA,EAAA,iBAAAG,EAAA,YAAA,OAAA,OAAAA,EAAA,MAAA,OAAA,KAAA,CAAA;AAAA,UACD,eAAA;AAAA;;gBAKFH,EAAA,UAAA,GAAAA,EAAA,mBAAA,QAAAM,GAAA;AAAA;;;UAQO,OAAA;AAAA;QAxWV,GAAA,MAAA,GAAAR,CAAA;AAAA;;QA+WI,OAAA;AAAA;MA/WJ,GAAA,MAAA,GAAAC,CAAA;;;QAsXoC,MAAA;AAAA,QAAU,OAAA;AAAA;;QACA,MAAA;AAAA,QAAU,OAAA;AAAA,kCACrDC,EAAA,UAAA,GAAAA,EAAA,mBAAA,QAAAO,CAAA,KAxXHP,EAAA,mBAAA,IAAA,EAAA;AAAA;IAAA,GAAA,IAAAJ,CAAA;AAAA,EAAA,GAAA,IAAAD,CAAA;;;;"}

package/dist/chunks/NcActionButtonGroup-5PPiueIz.cjs

@@ -1,50 +0,0 @@
-var _ = require("../assets/NcActionButtonGroup-oXobVIqQ.css");
-const e = require("vue"), o = require("./GenRandomId-ULxaMkkr.cjs"), t = require("./_l10n-Fl7RzbcZ.cjs"), r = require("./_plugin-vue_export-helper-xG2iG1wl.cjs");
-t.register();
-const i = e.defineComponent({
-  name: "NcActionButtonGroup",
-  inject: {
-    isInSemanticMenu: {
-      from: "NcActions:isSemanticMenu",
-      default: !1
-    }
-  },
-  props: {
-    /**
-     * Optional text shown below the button group
-     */
-    name: {
-      required: !1,
-      default: void 0,
-      type: String
-    }
-  },
-  setup() {
-    return {
-      labelId: "nc-action-button-group-".concat(o.GenRandomId())
-    };
-  },
-  methods: {
-    t: t.t
-  }
-}), s = ["role"], a = ["id"], c = ["aria-labelledby"];
-function l(n, d, p, m, f, b) {
-  return e.openBlock(), e.createElementBlock("li", {
-    class: "nc-button-group-base",
-    role: n.isInSemanticMenu && "presentation"
-  }, [
-    n.name ? (e.openBlock(), e.createElementBlock("div", {
-      key: 0,
-      id: n.labelId
-    }, e.toDisplayString(n.name), 9, a)) : e.createCommentVNode("", !0),
-    e.createElementVNode("ul", {
-      class: "nc-button-group-content",
-      role: "group",
-      "aria-labelledby": n.name ? n.labelId : void 0
-    }, [
-      e.renderSlot(n.$slots, "default")
-    ], 8, c)
-  ], 8, s);
-}
-const u = /* @__PURE__ */ r._export_sfc(i, [["render", l]]);
-exports.NcActionButtonGroup = u;

package/dist/chunks/NcActionButtonGroup-5PPiueIz.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcActionButtonGroup-5PPiueIz.cjs","sources":["../../src/components/NcActionButtonGroup/NcActionButtonGroup.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2022\n  -\n  - @license AGPL-3.0-or-later\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,\nto group buttons as one visual action, like for text alignment.\nThis should be used sparingly for accessibility.\n\n```vue\n<template>\n\t<div style=\"display: flex; align-items: center;\">\n\t\t<NcActions>\n\t\t\t<NcActionButtonGroup name=\"Text alignment\">\n\t\t\t\t<NcActionButton aria-label=\"Align left\"\n\t\t\t\t\tv-model=\"alignment\"\n\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\tvalue=\"l\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<AlignLeft :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton aria-label=\"Align center\"\n\t\t\t\t\tv-model=\"alignment\"\n\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\tvalue=\"c\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<AlignCenter :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton aria-label=\"Align right\"\n\t\t\t\t\tv-model=\"alignment\"\n\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\tvalue=\"r\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<AlignRight :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcActionButton>\n\t\t\t</NcActionButtonGroup>\n\t\t\t<NcActionButton :close-after-click=\"true\"\n\t\t\t\t@click=\"showMessage('Some other action')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Plus :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSome other action\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</div>\n</template>\n<script>\nimport AlignLeft from 'vue-material-design-icons/AlignHorizontalLeft'\nimport AlignRight from 'vue-material-design-icons/AlignHorizontalRight'\nimport AlignCenter from 'vue-material-design-icons/AlignHorizontalCenter'\nimport Plus from 'vue-material-design-icons/Plus'\n\nexport default {\n\tcomponents: {\n\t\tAlignLeft,\n\t\tAlignRight,\n\t\tAlignCenter,\n\t\tPlus,\n\t},\n\tdata() {\n\t\treturn { alignment: 'l' }\n\t},\n\tmethods: {\n\t\tshowMessage(msg) {\n\t\t\talert(msg)\n\t\t},\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<li class=\"nc-button-group-base\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t<div v-if=\"name\" :id=\"labelId\">\n\t\t\t{{ name }}\n\t\t</div>\n\t\t<ul class=\"nc-button-group-content\" role=\"group\" :aria-labelledby=\"name ? labelId : undefined\">\n\t\t\t<slot />\n\t\t</ul>\n\t</li>\n</template>\n\n<script>\nimport { defineComponent } from 'vue'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport { t } from '../../l10n.js'\n\n/**\n * A wrapper for allowing inlining NcAction components within the action menu\n */\nexport default defineComponent({\n\tname: 'NcActionButtonGroup',\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: 'NcActions:isSemanticMenu',\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Optional text shown below the button group\n\t\t */\n\t\tname: {\n\t\t\trequired: false,\n\t\t\tdefault: undefined,\n\t\t\ttype: String,\n\t\t},\n\t},\n\n\tsetup() {\n\t\treturn {\n\t\t\tlabelId: `nc-action-button-group-${GenRandomId()}`,\n\t\t}\n\t},\n\n\tmethods: {\n\t\tt,\n\t},\n})\n</script>\n\n<style lang=\"scss\">\n.nc-button-group-base {\n\t>div {\n\t\ttext-align: center;\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\n\tul.nc-button-group-content {\n\t\tdisplay: flex;\n\t\tgap: 4px; // required for the focus-visible outline\n\t\tjustify-content: space-between;\n\t\tli {\n\t\t\tflex: 1 1;\n\t\t}\n\n\t\t.action-button {\n\t\t\t// Fix action buttons beeing shifted to the left (right padding)\n\t\t\tpadding: 0 !important;\n\t\t\twidth: 100%;\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\n\t\t\t&.action-button--active {\n\t\t\t\tbackground-color: var(--color-primary-element);\n\t\t\t\tborder-radius: var(--border-radius-large);\n\t\t\t\tcolor: var(--color-primary-element-text);\n\n\t\t\t\t&:hover, &:focus, &:focus-within {\n\t\t\t\t\tbackground-color: var(--color-primary-element-hover);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.action-button__pressed-icon {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main","vue","_hoisted_1","_hoisted_2","_hoisted_3","_ctx"],"mappings":";;;AA8GA,MAAAA,IAAAC,EAAA,gBAAA;AAAA;EAGC,QAAA;AAAA,IACC,kBAAA;AAAA,MACC,MAAA;AAAA;;;EAKF,OAAA;AAAA;AAAA;AAAA;AAAA;MAKE,UAAA;AAAA,MACA,SAAA;AAAA;;;EAKF,QAAA;AACC,WAAA;AAAA;IAEA;AAAA;EAGD,SAAA;AAAA;;AAGD,CAAA,GA5IAC,IAAA,CAAA,MAAA,GAAAC,IAAA,CAAA,IAAA,GAAAC,IAAA,CAAA,iBAAA;;;IA4FK,OAAA;AAAA,IAA8B,MAAAC,EAAA,oBAAA;AAAA;;;MACf,IAAAA,EAAA;AAAA,IACd,GAAAJ,EAAA,gBAAAI,EAAA,IAAA,GAAA,GAAAF,CAAA,KA9FNF,EAAA,mBAAA,IAAA,EAAA;AAAA;MAgGM,OAAA;AAAA,MAAgC,MAAA;AAAA,MAAc,mBAAAI,EAAA,OAAAA,EAAA,UAAA;AAAA;;IAhGpD,GAAA,GAAAD,CAAA;AAAA,EAAA,GAAA,GAAAF,CAAA;;;;"}

package/dist/chunks/NcActionButtonGroup-oFPVvd4U.mjs

@@ -1,55 +0,0 @@
-import "../assets/NcActionButtonGroup-oXobVIqQ.css";
-import { defineComponent as t, openBlock as n, createElementBlock as o, toDisplayString as r, createCommentVNode as a, createElementVNode as s, renderSlot as i } from "vue";
-import { G as l } from "./GenRandomId-VodkdWbp.mjs";
-import { r as d, a as c } from "./_l10n-uuAvfQgY.mjs";
-import { _ as u } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
-d();
-const m = t({
-  name: "NcActionButtonGroup",
-  inject: {
-    isInSemanticMenu: {
-      from: "NcActions:isSemanticMenu",
-      default: !1
-    }
-  },
-  props: {
-    /**
-     * Optional text shown below the button group
-     */
-    name: {
-      required: !1,
-      default: void 0,
-      type: String
-    }
-  },
-  setup() {
-    return {
-      labelId: "nc-action-button-group-".concat(l())
-    };
-  },
-  methods: {
-    t: c
-  }
-}), p = ["role"], f = ["id"], b = ["aria-labelledby"];
-function _(e, g, I, N, S, $) {
-  return n(), o("li", {
-    class: "nc-button-group-base",
-    role: e.isInSemanticMenu && "presentation"
-  }, [
-    e.name ? (n(), o("div", {
-      key: 0,
-      id: e.labelId
-    }, r(e.name), 9, f)) : a("", !0),
-    s("ul", {
-      class: "nc-button-group-content",
-      role: "group",
-      "aria-labelledby": e.name ? e.labelId : void 0
-    }, [
-      i(e.$slots, "default")
-    ], 8, b)
-  ], 8, p);
-}
-const A = /* @__PURE__ */ u(m, [["render", _]]);
-export {
-  A as N
-};

package/dist/chunks/NcActionButtonGroup-oFPVvd4U.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcActionButtonGroup-oFPVvd4U.mjs","sources":["../../src/components/NcActionButtonGroup/NcActionButtonGroup.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2022\n  -\n  - @license AGPL-3.0-or-later\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,\nto group buttons as one visual action, like for text alignment.\nThis should be used sparingly for accessibility.\n\n```vue\n<template>\n\t<div style=\"display: flex; align-items: center;\">\n\t\t<NcActions>\n\t\t\t<NcActionButtonGroup name=\"Text alignment\">\n\t\t\t\t<NcActionButton aria-label=\"Align left\"\n\t\t\t\t\tv-model=\"alignment\"\n\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\tvalue=\"l\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<AlignLeft :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton aria-label=\"Align center\"\n\t\t\t\t\tv-model=\"alignment\"\n\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\tvalue=\"c\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<AlignCenter :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton aria-label=\"Align right\"\n\t\t\t\t\tv-model=\"alignment\"\n\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\tvalue=\"r\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<AlignRight :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcActionButton>\n\t\t\t</NcActionButtonGroup>\n\t\t\t<NcActionButton :close-after-click=\"true\"\n\t\t\t\t@click=\"showMessage('Some other action')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Plus :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSome other action\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</div>\n</template>\n<script>\nimport AlignLeft from 'vue-material-design-icons/AlignHorizontalLeft'\nimport AlignRight from 'vue-material-design-icons/AlignHorizontalRight'\nimport AlignCenter from 'vue-material-design-icons/AlignHorizontalCenter'\nimport Plus from 'vue-material-design-icons/Plus'\n\nexport default {\n\tcomponents: {\n\t\tAlignLeft,\n\t\tAlignRight,\n\t\tAlignCenter,\n\t\tPlus,\n\t},\n\tdata() {\n\t\treturn { alignment: 'l' }\n\t},\n\tmethods: {\n\t\tshowMessage(msg) {\n\t\t\talert(msg)\n\t\t},\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<li class=\"nc-button-group-base\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t<div v-if=\"name\" :id=\"labelId\">\n\t\t\t{{ name }}\n\t\t</div>\n\t\t<ul class=\"nc-button-group-content\" role=\"group\" :aria-labelledby=\"name ? labelId : undefined\">\n\t\t\t<slot />\n\t\t</ul>\n\t</li>\n</template>\n\n<script>\nimport { defineComponent } from 'vue'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport { t } from '../../l10n.js'\n\n/**\n * A wrapper for allowing inlining NcAction components within the action menu\n */\nexport default defineComponent({\n\tname: 'NcActionButtonGroup',\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: 'NcActions:isSemanticMenu',\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Optional text shown below the button group\n\t\t */\n\t\tname: {\n\t\t\trequired: false,\n\t\t\tdefault: undefined,\n\t\t\ttype: String,\n\t\t},\n\t},\n\n\tsetup() {\n\t\treturn {\n\t\t\tlabelId: `nc-action-button-group-${GenRandomId()}`,\n\t\t}\n\t},\n\n\tmethods: {\n\t\tt,\n\t},\n})\n</script>\n\n<style lang=\"scss\">\n.nc-button-group-base {\n\t>div {\n\t\ttext-align: center;\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\n\tul.nc-button-group-content {\n\t\tdisplay: flex;\n\t\tgap: 4px; // required for the focus-visible outline\n\t\tjustify-content: space-between;\n\t\tli {\n\t\t\tflex: 1 1;\n\t\t}\n\n\t\t.action-button {\n\t\t\t// Fix action buttons beeing shifted to the left (right padding)\n\t\t\tpadding: 0 !important;\n\t\t\twidth: 100%;\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\n\t\t\t&.action-button--active {\n\t\t\t\tbackground-color: var(--color-primary-element);\n\t\t\t\tborder-radius: var(--border-radius-large);\n\t\t\t\tcolor: var(--color-primary-element-text);\n\n\t\t\t\t&:hover, &:focus, &:focus-within {\n\t\t\t\t\tbackground-color: var(--color-primary-element-hover);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.action-button__pressed-icon {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main","defineComponent","_hoisted_1","_hoisted_2","_hoisted_3","_ctx","toDisplayString","createCommentVNode"],"mappings":";;;;;;AA8GA,MAAAA,IAAAC,EAAA;AAAA;EAGC,QAAA;AAAA,IACC,kBAAA;AAAA,MACC,MAAA;AAAA;;;EAKF,OAAA;AAAA;AAAA;AAAA;AAAA;MAKE,UAAA;AAAA,MACA,SAAA;AAAA;;;EAKF,QAAA;AACC,WAAA;AAAA;IAEA;AAAA;EAGD,SAAA;AAAA;;AAGD,CAAA,GA5IAC,IAAA,CAAA,MAAA,GAAAC,IAAA,CAAA,IAAA,GAAAC,IAAA,CAAA,iBAAA;;;IA4FK,OAAA;AAAA,IAA8B,MAAAC,EAAA,oBAAA;AAAA;;;MACf,IAAAA,EAAA;AAAA,IACd,GAAAC,EAAAD,EAAA,IAAA,GAAA,GAAAF,CAAA,KA9FNI,EAAA,IAAA,EAAA;AAAA;MAgGM,OAAA;AAAA,MAAgC,MAAA;AAAA,MAAc,mBAAAF,EAAA,OAAAA,EAAA,UAAA;AAAA;;IAhGpD,GAAA,GAAAD,CAAA;AAAA,EAAA,GAAA,GAAAF,CAAA;;;"}

package/dist/chunks/NcActionCaption-SIz5c1sE.cjs

@@ -1,27 +0,0 @@
-var l = require("../assets/NcActionCaption-afJqyJO6.css");
-const e = require("vue"), c = require("./_plugin-vue_export-helper-xG2iG1wl.cjs"), i = {
-  name: "NcActionCaption",
-  inject: {
-    isInSemanticMenu: {
-      from: "NcActions:isSemanticMenu",
-      default: !1
-    }
-  },
-  props: {
-    /**
-     * The caption's text
-     */
-    name: {
-      type: String,
-      required: !0
-    }
-  }
-}, o = ["role"];
-function r(s, p, n, u, _, t) {
-  return e.openBlock(), e.createElementBlock("li", {
-    class: "app-navigation-caption",
-    role: t.isInSemanticMenu && "presentation"
-  }, e.toDisplayString(n.name), 9, o);
-}
-const a = /* @__PURE__ */ c._export_sfc(i, [["render", r], ["__scopeId", "data-v-7c8f7463"]]);
-exports.NcActionCaption = a;

package/dist/chunks/NcActionCaption-SIz5c1sE.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcActionCaption-SIz5c1sE.cjs","sources":["../../src/components/NcActionCaption/NcActionCaption.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2021 Marco Ambrosini <marcoambrosini@icloud.com>\n  -\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<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots.\n\n```vue\n\t<NcActions>\n\t\t<NcActionCaption name=\"Test caption\" />\n\t\t<NcActionCaption name=\"Test caption 2\" />\n\t</NcActions>\n```\n</docs>\n\n<template>\n\t<li class=\"app-navigation-caption\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t{{ name }}\n\t</li>\n</template>\n\n<script>\nexport default {\n\tname: 'NcActionCaption',\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 * The caption's text\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\t.app-navigation-caption {\n\t\tcolor: var(--color-text-maxcontrast);\n\t\tline-height: $clickable-area;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\tbox-shadow: none !important;\n\t\tuser-select: none;\n\t\tpointer-events: none;\n\t\tmargin-left: 12px;\n\t\tpadding-right: 14px;\n\t\theight: $clickable-area;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n</style>\n"],"names":["_sfc_main","_hoisted_1","$options","vue","$props"],"mappings":";mFAsCAA,IAAA;AAAA;EAGC,QAAA;AAAA,IACC,kBAAA;AAAA,MACC,MAAA;AAAA;;;EAKF,OAAA;AAAA;AAAA;AAAA;AAAA;;;;;AASD,GAzDAC,IAAA,CAAA,MAAA;;;IAgCK,OAAA;AAAA,IAAgC,MAAAC,EAAA,oBAAA;AAAA,EAChC,GAAAC,EAAA,gBAAAC,EAAA,IAAA,GAAA,GAAAH,CAAA;;;;"}

package/dist/chunks/NcActionCaption-vguA2tEL.mjs

@@ -1,31 +0,0 @@
-import "../assets/NcActionCaption-afJqyJO6.css";
-import { openBlock as n, createElementBlock as o, toDisplayString as c } from "vue";
-import { _ as i } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
-const a = {
-  name: "NcActionCaption",
-  inject: {
-    isInSemanticMenu: {
-      from: "NcActions:isSemanticMenu",
-      default: !1
-    }
-  },
-  props: {
-    /**
-     * The caption's text
-     */
-    name: {
-      type: String,
-      required: !0
-    }
-  }
-}, r = ["role"];
-function s(p, m, e, _, f, t) {
-  return n(), o("li", {
-    class: "app-navigation-caption",
-    role: t.isInSemanticMenu && "presentation"
-  }, c(e.name), 9, r);
-}
-const S = /* @__PURE__ */ i(a, [["render", s], ["__scopeId", "data-v-7c8f7463"]]);
-export {
-  S as N
-};

package/dist/chunks/NcActionCaption-vguA2tEL.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcActionCaption-vguA2tEL.mjs","sources":["../../src/components/NcActionCaption/NcActionCaption.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2021 Marco Ambrosini <marcoambrosini@icloud.com>\n  -\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<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots.\n\n```vue\n\t<NcActions>\n\t\t<NcActionCaption name=\"Test caption\" />\n\t\t<NcActionCaption name=\"Test caption 2\" />\n\t</NcActions>\n```\n</docs>\n\n<template>\n\t<li class=\"app-navigation-caption\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t{{ name }}\n\t</li>\n</template>\n\n<script>\nexport default {\n\tname: 'NcActionCaption',\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 * The caption's text\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\t.app-navigation-caption {\n\t\tcolor: var(--color-text-maxcontrast);\n\t\tline-height: $clickable-area;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\tbox-shadow: none !important;\n\t\tuser-select: none;\n\t\tpointer-events: none;\n\t\tmargin-left: 12px;\n\t\tpadding-right: 14px;\n\t\theight: $clickable-area;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n</style>\n"],"names":["_sfc_main","_hoisted_1","$options","toDisplayString","$props"],"mappings":";;;AAsCA,MAAAA,IAAA;AAAA;EAGC,QAAA;AAAA,IACC,kBAAA;AAAA,MACC,MAAA;AAAA;;;EAKF,OAAA;AAAA;AAAA;AAAA;AAAA;;;;;AASD,GAzDAC,IAAA,CAAA,MAAA;;;IAgCK,OAAA;AAAA,IAAgC,MAAAC,EAAA,oBAAA;AAAA,EAChC,GAAAC,EAAAC,EAAA,IAAA,GAAA,GAAAH,CAAA;;;"}

package/dist/chunks/NcActionCheckbox-5-bIAzkC.mjs

@@ -1,113 +0,0 @@
-import "../assets/NcActionCheckbox-T379T-FC.css";
-import { A as l } from "./actionGlobal-pi4JQ0yh.mjs";
-import { G as s } from "./GenRandomId-VodkdWbp.mjs";
-import { openBlock as d, createElementBlock as r, normalizeClass as o, createElementVNode as n, withKeys as h, withModifiers as u, toDisplayString as m, createCommentVNode as f } from "vue";
-import { _ as k } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
-const b = {
-  name: "NcActionCheckbox",
-  mixins: [l],
-  inject: {
-    isInSemanticMenu: {
-      from: "NcActions:isSemanticMenu",
-      default: !1
-    }
-  },
-  props: {
-    /**
-     * id attribute of the checkbox element
-     */
-    id: {
-      type: String,
-      default: () => "action-" + s(),
-      validator: (t) => t.trim() !== ""
-    },
-    /**
-     * checked state of the the checkbox element
-     */
-    modelValue: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * value of the checkbox input
-     */
-    value: {
-      type: [String, Number],
-      default: ""
-    },
-    /**
-     * disabled state of the checkbox element
-     */
-    disabled: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  emits: [
-    "change",
-    "check",
-    "uncheck",
-    "update:modelValue"
-  ],
-  computed: {
-    /**
-     * determines if the action is focusable
-     *
-     * @return {boolean} is the action focusable ?
-     */
-    isFocusable() {
-      return !this.disabled;
-    },
-    /**
-     * aria-checked attribute for role="menuitemcheckbox"
-     *
-     * @return {'true'|'false'|undefined} aria-checked value if needed
-     */
-    ariaChecked() {
-      if (this.isInSemanticMenu)
-        return this.modelValue ? "true" : "false";
-    }
-  },
-  methods: {
-    checkInput() {
-      this.$refs.label.click();
-    },
-    onChange(t) {
-      this.$emit("update:modelValue", this.$refs.checkbox.checked), this.$emit("change", t), this.$refs.checkbox.checked ? this.$emit("check") : this.$emit("uncheck");
-    }
-  }
-}, x = ["role"], _ = ["role", "aria-checked"], p = ["id", "disabled", "checked", "value"], C = ["for"];
-function g(t, a, c, I, y, e) {
-  return d(), r("li", {
-    class: o(["action", { "action--disabled": c.disabled }]),
-    role: e.isInSemanticMenu && "presentation"
-  }, [
-    n("span", {
-      class: "action-checkbox",
-      role: e.isInSemanticMenu && "menuitemcheckbox",
-      "aria-checked": e.ariaChecked
-    }, [
-      n("input", {
-        id: c.id,
-        ref: "checkbox",
-        disabled: c.disabled,
-        checked: c.modelValue,
-        value: c.value,
-        class: o([{ focusable: e.isFocusable }, "checkbox action-checkbox__checkbox"]),
-        type: "checkbox",
-        onKeydown: a[0] || (a[0] = h(u((...i) => e.checkInput && e.checkInput(...i), ["exact", "prevent"]), ["enter"])),
-        onChange: a[1] || (a[1] = (...i) => e.onChange && e.onChange(...i))
-      }, null, 42, p),
-      n("label", {
-        ref: "label",
-        for: c.id,
-        class: "action-checkbox__label"
-      }, m(t.text), 9, C),
-      f("", !0)
-    ], 8, _)
-  ], 10, x);
-}
-const A = /* @__PURE__ */ k(b, [["render", g], ["__scopeId", "data-v-f70de5e1"]]);
-export {
-  A as N
-};

package/dist/chunks/NcActionCheckbox-5-bIAzkC.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcActionCheckbox-5-bIAzkC.mjs","sources":["../../src/components/NcActionCheckbox/NcActionCheckbox.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<NcActions>\n\t\t<NcActionCheckbox @change=\"alert('(un)checked !')\">First choice</NcActionCheckbox>\n\t\t<NcActionCheckbox value=\"second\" @change=\"alert('(un)checked !')\">Second choice</NcActionCheckbox>\n\t\t<NcActionCheckbox :model-value=\"true\" @change=\"alert('(un)checked !')\">Third choice (checked)</NcActionCheckbox>\n\t\t<NcActionCheckbox :disabled=\"true\" @change=\"alert('(un)checked !')\">Second choice (disabled)</NcActionCheckbox>\n\t</NcActions>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" :class=\"{ 'action--disabled': disabled }\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t<span class=\"action-checkbox\" :role=\"isInSemanticMenu && 'menuitemcheckbox'\" :aria-checked=\"ariaChecked\">\n\t\t\t<input :id=\"id\"\n\t\t\t\tref=\"checkbox\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t:checked=\"modelValue\"\n\t\t\t\t:value=\"value\"\n\t\t\t\t:class=\"{ focusable: isFocusable }\"\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tclass=\"checkbox action-checkbox__checkbox\"\n\t\t\t\t@keydown.enter.exact.prevent=\"checkInput\"\n\t\t\t\t@change=\"onChange\">\n\t\t\t<label ref=\"label\" :for=\"id\" class=\"action-checkbox__label\">{{ text }}</label>\n\n\t\t\t<!-- fake slot to gather inner text -->\n\t\t\t<slot v-if=\"false\" />\n\t\t</span>\n\t</li>\n</template>\n\n<script>\nimport ActionGlobalMixin from '../../mixins/actionGlobal.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nexport default {\n\tname: 'NcActionCheckbox',\n\n\tmixins: [ActionGlobalMixin],\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 * 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\n\t\t/**\n\t\t * checked state of the the checkbox element\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * value of the checkbox input\n\t\t */\n\t\tvalue: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * disabled state of the checkbox element\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t'change',\n\t\t'check',\n\t\t'uncheck',\n\t\t'update:modelValue',\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 * aria-checked attribute for role=\"menuitemcheckbox\"\n\t\t *\n\t\t * @return {'true'|'false'|undefined} aria-checked value if needed\n\t\t */\n\t\tariaChecked() {\n\t\t\tif (this.isInSemanticMenu) {\n\t\t\t\treturn this.modelValue ? 'true' : 'false'\n\t\t\t}\n\t\t\treturn undefined\n\t\t},\n\t},\n\n\tmethods: {\n\t\tcheckInput(/* event */) {\n\t\t\t// by clicking we also trigger the change event\n\t\t\tthis.$refs.label.click()\n\t\t},\n\t\tonChange(event) {\n\t\t\t/**\n\t\t\t * Emitted when the checkbox state is changed\n\t\t\t *\n\t\t\t * @type {boolean}\n\t\t\t */\n\t\t\tthis.$emit('update:modelValue', this.$refs.checkbox.checked)\n\n\t\t\t/**\n\t\t\t * Emitted when the checkbox state is changed\n\t\t\t *\n\t\t\t * @type {Event}\n\t\t\t */\n\t\t\tthis.$emit('change', event)\n\n\t\t\tif (this.$refs.checkbox.checked) {\n\t\t\t\t/**\n\t\t\t\t * Emitted when the checkbox is checked\n\t\t\t\t *\n\t\t\t\t * @type {Event}\n\t\t\t\t */\n\t\t\t\tthis.$emit('check')\n\t\t\t} else {\n\t\t\t\t/**\n\t\t\t\t * Emitted when the checkbox is unchecked\n\t\t\t\t *\n\t\t\t\t * @type {Event}\n\t\t\t\t */\n\t\t\t\tthis.$emit('uncheck')\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\n.action-checkbox {\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\tline-height: $clickable-area;\n\n\t/* checkbox/radio fixes */\n\t&__checkbox {\n\t\tposition: absolute;\n\t\ttop: auto;\n\t\tleft: -10000px;\n\n\t\toverflow: hidden;\n\n\t\twidth: 1px;\n\t\theight: 1px;\n\t}\n\n\t&__label {\n\t\tdisplay: flex;\n\t\talign-items: center; // align checkbox to text\n\n\t\twidth: 100%;\n\t\tpadding: 0 !important;\n\t\tpadding-right: $icon-margin !important;\n\n\t\t// checkbox-width is 12px, border is 2\n\t\t// (44 - 14 - 2) / 2 = 14\n\t\t&::before {\n\t\t\tmargin: 0 14px 0 !important;\n\t\t}\n\t}\n\n\t&--disabled {\n\t\t&,\n\t\t.action-checkbox__label {\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","GenRandomId","event","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","normalizeClass","$props","$options","_cache","args","toDisplayString","_ctx"],"mappings":";;;;;AA6DA,MAAAA,IAAA;AAAA;;EAKC,QAAA;AAAA,IACC,kBAAA;AAAA,MACC,MAAA;AAAA;;;EAKF,OAAA;AAAA;AAAA;AAAA;AAAA,IAIC,IAAA;AAAA;MAEC,SAAA,MAAA,YAAAC,EAAA;AAAA;;;;;;;;;;;;IAeD,OAAA;AAAA,MACC,MAAA,CAAA,QAAA,MAAA;AAAA;;;;;IAOD,UAAA;AAAA;;;;EAMD,OAAA;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;EAGD,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOE,aAAA,CAAA,KAAA;AAAA;;;;;;;;AAUC,eAAA,KAAA,aAAA,SAAA;AAAA;;EAMH,SAAA;AAAA,IACC,aAAA;;;IAIA,SAAAC,GAAA;6FAeC,KAAA,MAAA,SAAA,UAMC,KAAA,MAAA,OAAA,IAOA,KAAA,MAAA,SAAA;AAAA;;AAIJ,GA/KAC,IAAA,CAAA,MAAA,GAAAC,IAAA,CAAA,QAAA,cAAA,GAAAC,IAAA,CAAA,MAAA,YAAA,WAAA,OAAA,GAAAC,IAAA,CAAA,KAAA;;;IAqCK,OAAAC,EAAA,CAAA,UAAA,EAAA,oBAAAC,EAAA,SAAA,CAAA,CAAA;AAAA,IAA0D,MAAAC,EAAA,oBAAA;AAAA;;MACvD,OAAA;AAAA,MAAyB,MAAAA,EAAA,oBAAA;AAAA,MAA+C,gBAAAA,EAAA;AAAA;;QACrE,IAAAD,EAAA;AAAA,QACP,KAAA;AAAA,QACC,UAAAA,EAAA;AAAA,QACA,SAAAA,EAAA;AAAA,QACA,OAAAA,EAAA;AAAA,QACA,OAAAD,EAAA,CAAA,EAAA,WAAAE,EAAA,YAAA,GAAA,oCAAA,CAAA;AAAA,QACD,MAAA;AAAA;QAGC,UAAAC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAAF,EAAA,YAAAA,EAAA,SAAA,GAAAE,CAAA;AAAA,MAhDL,GAAA,MAAA,IAAAN,CAAA;AAAA;QAiDU,KAAA;AAAA,QAAa,KAAAG,EAAA;AAAA,QAAS,OAAA;AAAA,MAAkC,GAAAI,EAAAC,EAAA,IAAA,GAAA,GAAAP,CAAA;AAAA;IAjDlE,GAAA,GAAAF,CAAA;AAAA,EAAA,GAAA,IAAAD,CAAA;;;"}