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

package/dist/chunks/{NcActionTextEditable-RUh3BjpU.cjs.map → NcActionTextEditable-faJIAtYw.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcActionTextEditable-RUh3BjpU.cjs","sources":["../../src/components/NcActionTextEditable/NcActionTextEditable.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 [Actions](#Actions) component slots.\nAll undocumented attributes will be bound to the textarea. e.g. `maxlength`\n\n```\n<template>\n\t<NcActions>\n\t\t<NcActionTextEditable model-value=\"This is a textarea\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t</NcActionTextEditable>\n\t\t<NcActionTextEditable :disabled=\"true\" model-value=\"This is a disabled textarea\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t</NcActionTextEditable>\n\t\t<NcActionTextEditable name=\"Please edit the text\" model-value=\"This is a textarea with name\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t</NcActionTextEditable>\n\t</NcActions>\n</template>\n<script>\nimport Pencil from 'vue-material-design-icons/Pencil'\n\nexport default {\n\tcomponents: {\n\t\tPencil,\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" :class=\"{ 'action--disabled': disabled }\">\n\t\t<span class=\"action-text-editable\"\n\t\t\t@click=\"onClick\">\n\t\t\t<!-- @slot Manually provide icon -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<span :class=\"[isIconUrl ? 'action-text-editable__icon--url' : icon]\"\n\t\t\t\t\t:style=\"{ backgroundImage: isIconUrl ? `url(${icon})` : null }\"\n\t\t\t\t\tclass=\"action-text-editable__icon\" />\n\t\t\t</slot>\n\n\t\t\t<!-- form and input -->\n\t\t\t<form ref=\"form\"\n\t\t\t\tclass=\"action-text-editable__form\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t@submit.prevent=\"onSubmit\">\n\t\t\t\t<input :id=\"id\" type=\"submit\" class=\"action-text-editable__submit\">\n\n\t\t\t\t<!-- name -->\n\t\t\t\t<label v-if=\"name\"\n\t\t\t\t\tclass=\"action-text-editable__name\"\n\t\t\t\t\t:for=\"computedId\">\n\t\t\t\t\t{{ name }}\n\t\t\t\t</label>\n\n\t\t\t\t<textarea :id=\"computedId\"\n\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t:value=\"modelValue\"\n\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t:class=\"['action-text-editable__textarea', { focusable: isFocusable }]\"\n\t\t\t\t\t@input=\"onInput\" />\n\n\t\t\t\t<!-- allow the custom font to inject a ::before\n\t\t\t\t\tnot possible on input[type=submit] -->\n\t\t\t\t<label v-show=\"!disabled\" :for=\"id\" class=\"action-text-editable__label\">\n\t\t\t\t\t<ArrowRight :size=\"20\" />\n\t\t\t\t</label>\n\t\t\t</form>\n\t\t</span>\n\t</li>\n</template>\n\n<script>\nimport ActionTextMixin from '../../mixins/actionText.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\n\nexport default {\n\tname: 'NcActionTextEditable',\n\n\tcomponents: {\n\t\tArrowRight,\n\t},\n\n\tmixins: [ActionTextMixin],\n\n\tprops: {\n\t\t/**\n\t\t * id attribute of the checkbox element\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'action-' + GenRandomId(),\n\t\t\tvalidator: id => id.trim() !== '',\n\t\t},\n\t\t/**\n\t\t * disabled state of the text area\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * value attribute of the input field\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: [\n\t\t'input',\n\t\t'update:modelValue',\n\t\t'submit',\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\tcomputedId() {\n\t\t\treturn GenRandomId()\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonInput(event) {\n\t\t\t/**\n\t\t\t * Emitted on input events of the text field\n\t\t\t *\n\t\t\t * @type {Event|Date}\n\t\t\t */\n\t\t\tthis.$emit('input', event)\n\t\t\t/**\n\t\t\t * Emitted when the inputs value changes\n\t\t\t *\n\t\t\t * @type {string|Date}\n\t\t\t */\n\t\t\tthis.$emit('update:modelValue', event.target.value)\n\t\t},\n\t\tonSubmit(event) {\n\t\t\tevent.preventDefault()\n\t\t\tevent.stopPropagation()\n\t\t\tif (!this.disabled) {\n\t\t\t\t/**\n\t\t\t\t * Emitted on submit of the input field\n\t\t\t\t *\n\t\t\t\t * @type {Event}\n\t\t\t\t */\n\t\t\t\tthis.$emit('submit', event)\n\t\t\t} else {\n\t\t\t\t// ignore submit\n\t\t\t\treturn false\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@import '../../assets/inputs';\n@import '../../assets/action';\n@include action-active;\n@include action--disabled;\n\n$input-margin: 4px;\n\n.action-text-editable {\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& > span {\n\t\tcursor: pointer;\n\t\twhite-space: nowrap;\n\t}\n\n\t&__icon {\n\t\tmin-width: 0; /* Overwrite icons*/\n\t\tmin-height: 0;\n\t\t/* Keep padding to define the width to\n\t\t\tassure correct position of a possible text */\n\t\tpadding: #{math.div($clickable-area, 2)} 0 #{math.div($clickable-area, 2)} $clickable-area;\n\n\t\tbackground-position: #{$icon-margin} center;\n\t\tbackground-size: $icon-size;\n\t}\n\n\t&:deep(.material-design-icon) {\n\t\twidth: $clickable-area;\n\t\theight: $clickable-area;\n\t\topacity: $opacity_full;\n\n\t\t.material-design-icon__svg {\n\t\t\tvertical-align: middle;\n\t\t}\n\t}\n\n\t// Forms & text inputs\n\t&__form {\n\t\tdisplay: flex;\n\t\tflex: 1 1 auto;\n\t\tflex-direction: column;\n\n\t\tposition: relative;\n\t\tmargin: $input-margin 0;\n\t\tpadding-right: $icon-margin;\n\t}\n\n\t&__submit {\n\t\tposition: absolute;\n\t\tleft: -10000px;\n\t\ttop: auto;\n\t\twidth: 1px;\n\t\theight: 1px;\n\t\toverflow: hidden;\n\t}\n\n\t&__label {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\n\t\t// bottom-right corner\n\t\tposition: absolute;\n\t\tright: $icon-margin + 1;\n\t\tbottom: 1px;\n\t\twidth: #{$clickable-area - $input-margin * 2};\n\t\theight: #{$clickable-area - $input-margin * 2};\n\t\tbox-sizing: border-box;\n\t\tmargin: 0;\n\t\tpadding: 7px 6px;\n\n\t\tborder: 0;\n\t\tborder-radius: 50%;\n\t\t/* Avoid background under border */\n\t\tbackground-color: var(--color-main-background);\n\t\tbackground-clip: padding-box;\n\n\t\t&, * {\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n\n\t/* Inputs inside popover supports text, submit & reset */\n\t&__textarea {\n\t\tflex: 1 1 auto;\n\t\tcolor: inherit;\n\t\tborder-color: var(--color-border-maxcontrast);\n\n\t\tmin-height: #{$clickable-area * 2 - $input-margin * 2}; /* twice the element margin-y */\n\t\tmax-height: #{$clickable-area * 3 - $input-margin * 2}; /* twice the element margin-y */\n\t\t// block width widening\n\t\tmin-width: $clickable-area * 4;\n\t\twidth: 100% !important;\n\t\tmargin: 0;\n\n\t\t// if disabled, change cursor\n\t\t&:disabled {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t/* only show confirm borders if input is not focused */\n\t\t&:not(:active):not(:hover):not(:focus) {\n\t\t\t&:invalid {\n\t\t\t\t& + .action-text-editable__label {\n\t\t\t\t\tbackground-color: var(--color-error);\n\t\t\t\t}\n\t\t\t}\n\t\t\t&:not(:disabled) + .action-text-editable__label {\n\t\t\t\t&:active,\n\t\t\t\t&:hover,\n\t\t\t\t&:focus {\n\t\t\t\t\tbackground-color: var(--color-primary-element);\n\t\t\t\t\tcolor: var(--color-primary-element-text);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\t&:active,\n\t\t&:hover,\n\t\t&:focus {\n\t\t\t&:not(:disabled) + .action-text-editable__label {\n\t\t\t\t/* above previous input */\n\t\t\t\tz-index: 2;\n\n\t\t\t\tborder-color: var(--color-primary-element);\n\t\t\t\tborder-left-color: transparent;\n\t\t\t}\n\t\t}\n\t}\n}\n\n// if a form is the last of the list\n// add the same bottomMargin as the right padding\n// for visual balance\nli:last-child > .action-text-editable {\n\tmargin-bottom: $icon-margin - $input-margin;\n}\n\n// same for first item\nli:first-child > .action-text-editable {\n\tmargin-top: $icon-margin - $input-margin;\n}\n</style>\n"],"names":["_sfc_main","GenRandomId","event","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","vue","$props","_cache","args","_ctx","$options"],"mappings":";kNA2GAA,IAAA;AAAA;;;;;EASC,OAAA;AAAA;AAAA;AAAA;AAAA,IAIC,IAAA;AAAA;MAEC,SAAA,MAAA,YAAAC,EAAA,YAAA;AAAA;;;;;IAMD,UAAA;AAAA;;;;;;;;;;;EAaD,OAAA;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA;EAGD,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOE,aAAA,CAAA,KAAA;AAAA;;AAIA,aAAAA,EAAA,YAAA;AAAA;;EAIF,SAAA;AAAA,IACC,QAAAC,GAAA;;;IAcA,SAAAA,GAAA;AAGC,UAFAA,EAAA,eAAA,wBAEA,CAAA,KAAA;;;;;;AAaH,GAjMAC,IAAA,CAAA,UAAA,GAAAC,IAAA,CAAA,IAAA,GAAAC,IAAA,CAAA,KAAA,GAAAC,IAAA,CAAA,MAAA,YAAA,OAAA,GAAAC,IAAA,CAAA,KAAA;;;;IA4DK,OAAAC,EAAA,eAAA,CAAA,UAAA,EAAA,oBAAAC,EAAA,SAAA,CAAA,CAAA;AAAA;;MACG,OAAA;AAAA,MACJ,SAAAC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAAC,EAAA,WAAAA,EAAA,QAAA,GAAAD,CAAA;AAAA;MAEDH,EAAA,WAAAI,EAAA,QAAA,QAAA,CAAA,GAAA,MAAA;AAAA;UACQ,OAAAJ,EAAA,eAAA,CAAA,CAAAI,EAAA,YAAA,oCAAAA,EAAA,IAAA,GAAA,4BAAA,CAAA;AAAA,UACL,OAAAJ,EAAA,eAAA,EAAA,iBAAAI,EAAA,YAAA,OAAAA,EAAA,IAAA,MAAA,KAAA,CAAA;AAAA;;;QAKG,KAAA;AAAA,QACL,OAAA;AAAA,QACC,UAAAH,EAAA;AAAA;;;UAEO,IAAAA,EAAA;AAAA,UAAQ,MAAA;AAAA,UAAc,OAAA;AAAA,QA3ElC,GAAA,MAAA,GAAAL,CAAA;AAAA;;UA+EK,OAAA;AAAA,UACC,KAAAS,EAAA;AAAA,QACE,GAAAL,EAAA,gBAAAI,EAAA,IAAA,GAAA,GAAAP,CAAA,KAjFRG,EAAA,mBAAA,IAAA,EAAA;AAAA,QAoFIA,EAAA,mBAAA,YAAAA,EAAA,WAAA;AAAA,UAAW,IAAAK,EAAA;AAAA,UACT,UAAAJ,EAAA;AAAA,UACA,OAAAA,EAAA;AAAA;UAEA,OAAA,CAAA,kCAAA,EAAA,WAAAI,EAAA,YAAA,CAAA;AAAA,UACA,SAAAH,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAAE,EAAA,WAAAA,EAAA,QAAA,GAAAF,CAAA;AAAA,QAzFN,CAAA,GAAA,MAAA,IAAAL,CAAA;AAAA;UA6F+B,KAAAG,EAAA;AAAA,UAAS,OAAA;AAAA;;QA7FxC,GAAA,GAAAF,CAAA,GAAA;AAAA;;MAAA,GAAA,IAAAJ,CAAA;AAAA;;;;;"}
+{"version":3,"file":"NcActionTextEditable-faJIAtYw.cjs","sources":["../../src/components/NcActionTextEditable/NcActionTextEditable.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 [Actions](#Actions) component slots.\nAll undocumented attributes will be bound to the textarea. e.g. `maxlength`\n\n```\n<template>\n\t<NcActions>\n\t\t<NcActionTextEditable model-value=\"This is a textarea\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t</NcActionTextEditable>\n\t\t<NcActionTextEditable :disabled=\"true\" model-value=\"This is a disabled textarea\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t</NcActionTextEditable>\n\t\t<NcActionTextEditable name=\"Please edit the text\" model-value=\"This is a textarea with name\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t</NcActionTextEditable>\n\t</NcActions>\n</template>\n<script>\nimport Pencil from 'vue-material-design-icons/Pencil'\n\nexport default {\n\tcomponents: {\n\t\tPencil,\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" :class=\"{ 'action--disabled': disabled }\">\n\t\t<span class=\"action-text-editable\"\n\t\t\t@click=\"onClick\">\n\t\t\t<!-- @slot Manually provide icon -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<span :class=\"[isIconUrl ? 'action-text-editable__icon--url' : icon]\"\n\t\t\t\t\t:style=\"{ backgroundImage: isIconUrl ? `url(${icon})` : null }\"\n\t\t\t\t\tclass=\"action-text-editable__icon\" />\n\t\t\t</slot>\n\n\t\t\t<!-- form and input -->\n\t\t\t<form ref=\"form\"\n\t\t\t\tclass=\"action-text-editable__form\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t@submit.prevent=\"onSubmit\">\n\t\t\t\t<input :id=\"id\" type=\"submit\" class=\"action-text-editable__submit\">\n\n\t\t\t\t<!-- name -->\n\t\t\t\t<label v-if=\"name\"\n\t\t\t\t\tclass=\"action-text-editable__name\"\n\t\t\t\t\t:for=\"computedId\">\n\t\t\t\t\t{{ name }}\n\t\t\t\t</label>\n\n\t\t\t\t<textarea :id=\"computedId\"\n\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t:value=\"modelValue\"\n\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t:class=\"['action-text-editable__textarea', { focusable: isFocusable }]\"\n\t\t\t\t\t@input=\"onInput\" />\n\n\t\t\t\t<!-- allow the custom font to inject a ::before\n\t\t\t\t\tnot possible on input[type=submit] -->\n\t\t\t\t<label v-show=\"!disabled\" :for=\"id\" class=\"action-text-editable__label\">\n\t\t\t\t\t<ArrowRight :size=\"20\" />\n\t\t\t\t</label>\n\t\t\t</form>\n\t\t</span>\n\t</li>\n</template>\n\n<script>\nimport ActionTextMixin from '../../mixins/actionText.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\n\nexport default {\n\tname: 'NcActionTextEditable',\n\n\tcomponents: {\n\t\tArrowRight,\n\t},\n\n\tmixins: [ActionTextMixin],\n\n\tprops: {\n\t\t/**\n\t\t * id attribute of the checkbox element\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'action-' + GenRandomId(),\n\t\t\tvalidator: id => id.trim() !== '',\n\t\t},\n\t\t/**\n\t\t * disabled state of the text area\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * value attribute of the input field\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: [\n\t\t'input',\n\t\t'update:modelValue',\n\t\t'submit',\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\tcomputedId() {\n\t\t\treturn GenRandomId()\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonInput(event) {\n\t\t\t/**\n\t\t\t * Emitted on input events of the text field\n\t\t\t *\n\t\t\t * @type {Event|Date}\n\t\t\t */\n\t\t\tthis.$emit('input', event)\n\t\t\t/**\n\t\t\t * Emitted when the inputs value changes\n\t\t\t *\n\t\t\t * @type {string|Date}\n\t\t\t */\n\t\t\tthis.$emit('update:modelValue', event.target.value)\n\t\t},\n\t\tonSubmit(event) {\n\t\t\tevent.preventDefault()\n\t\t\tevent.stopPropagation()\n\t\t\tif (!this.disabled) {\n\t\t\t\t/**\n\t\t\t\t * Emitted on submit of the input field\n\t\t\t\t *\n\t\t\t\t * @type {Event}\n\t\t\t\t */\n\t\t\t\tthis.$emit('submit', event)\n\t\t\t} else {\n\t\t\t\t// ignore submit\n\t\t\t\treturn false\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@import '../../assets/inputs';\n@import '../../assets/action';\n@include action-active;\n@include action--disabled;\n\n$input-margin: 4px;\n\n.action-text-editable {\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& > span {\n\t\tcursor: pointer;\n\t\twhite-space: nowrap;\n\t}\n\n\t&__icon {\n\t\tmin-width: 0; /* Overwrite icons*/\n\t\tmin-height: 0;\n\t\t/* Keep padding to define the width to\n\t\t\tassure correct position of a possible text */\n\t\tpadding: #{math.div($clickable-area, 2)} 0 #{math.div($clickable-area, 2)} $clickable-area;\n\n\t\tbackground-position: #{$icon-margin} center;\n\t\tbackground-size: $icon-size;\n\t}\n\n\t&:deep(.material-design-icon) {\n\t\twidth: $clickable-area;\n\t\theight: $clickable-area;\n\t\topacity: $opacity_full;\n\n\t\t.material-design-icon__svg {\n\t\t\tvertical-align: middle;\n\t\t}\n\t}\n\n\t// Forms & text inputs\n\t&__form {\n\t\tdisplay: flex;\n\t\tflex: 1 1 auto;\n\t\tflex-direction: column;\n\n\t\tposition: relative;\n\t\tmargin: $input-margin 0;\n\t\tpadding-right: $icon-margin;\n\t}\n\n\t&__submit {\n\t\tposition: absolute;\n\t\tleft: -10000px;\n\t\ttop: auto;\n\t\twidth: 1px;\n\t\theight: 1px;\n\t\toverflow: hidden;\n\t}\n\n\t&__label {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\n\t\t// bottom-right corner\n\t\tposition: absolute;\n\t\tright: $icon-margin + 1;\n\t\tbottom: 1px;\n\t\twidth: #{$clickable-area - $input-margin * 2};\n\t\theight: #{$clickable-area - $input-margin * 2};\n\t\tbox-sizing: border-box;\n\t\tmargin: 0;\n\t\tpadding: 7px 6px;\n\n\t\tborder: 0;\n\t\tborder-radius: 50%;\n\t\t/* Avoid background under border */\n\t\tbackground-color: var(--color-main-background);\n\t\tbackground-clip: padding-box;\n\n\t\t&, * {\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n\n\t/* Inputs inside popover supports text, submit & reset */\n\t&__textarea {\n\t\tflex: 1 1 auto;\n\t\tcolor: inherit;\n\t\tborder-color: var(--color-border-maxcontrast);\n\n\t\tmin-height: #{$clickable-area * 2 - $input-margin * 2}; /* twice the element margin-y */\n\t\tmax-height: #{$clickable-area * 3 - $input-margin * 2}; /* twice the element margin-y */\n\t\t// block width widening\n\t\tmin-width: $clickable-area * 4;\n\t\twidth: 100% !important;\n\t\tmargin: 0;\n\n\t\t// if disabled, change cursor\n\t\t&:disabled {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t/* only show confirm borders if input is not focused */\n\t\t&:not(:active):not(:hover):not(:focus) {\n\t\t\t&:invalid {\n\t\t\t\t& + .action-text-editable__label {\n\t\t\t\t\tbackground-color: var(--color-error);\n\t\t\t\t}\n\t\t\t}\n\t\t\t&:not(:disabled) + .action-text-editable__label {\n\t\t\t\t&:active,\n\t\t\t\t&:hover,\n\t\t\t\t&:focus {\n\t\t\t\t\tbackground-color: var(--color-primary-element);\n\t\t\t\t\tcolor: var(--color-primary-element-text);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\t&:active,\n\t\t&:hover,\n\t\t&:focus {\n\t\t\t&:not(:disabled) + .action-text-editable__label {\n\t\t\t\t/* above previous input */\n\t\t\t\tz-index: 2;\n\n\t\t\t\tborder-color: var(--color-primary-element);\n\t\t\t\tborder-left-color: transparent;\n\t\t\t}\n\t\t}\n\t}\n}\n\n// if a form is the last of the list\n// add the same bottomMargin as the right padding\n// for visual balance\nli:last-child > .action-text-editable {\n\tmargin-bottom: $icon-margin - $input-margin;\n}\n\n// same for first item\nli:first-child > .action-text-editable {\n\tmargin-top: $icon-margin - $input-margin;\n}\n</style>\n"],"names":["_sfc_main","GenRandomId","event","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","vue","$props","_cache","args","_ctx","$options"],"mappings":";kNA2GAA,IAAA;AAAA;;;;;EASC,OAAA;AAAA;AAAA;AAAA;AAAA,IAIC,IAAA;AAAA;MAEC,SAAA,MAAA,YAAAC,EAAA,YAAA;AAAA;;;;;IAMD,UAAA;AAAA;;;;;;;;;;;EAaD,OAAA;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA;EAGD,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOE,aAAA,CAAA,KAAA;AAAA;;AAIA,aAAAA,EAAA,YAAA;AAAA;;EAIF,SAAA;AAAA,IACC,QAAAC,GAAA;;;IAcA,SAAAA,GAAA;AAGC,UAFAA,EAAA,eAAA,wBAEA,CAAA,KAAA;;;;;;AAaH,GAjMAC,IAAA,CAAA,UAAA,GAAAC,IAAA,CAAA,IAAA,GAAAC,IAAA,CAAA,KAAA,GAAAC,IAAA,CAAA,MAAA,YAAA,OAAA,GAAAC,IAAA,CAAA,KAAA;;;;IA4DK,OAAAC,EAAA,eAAA,CAAA,UAAA,EAAA,oBAAAC,EAAA,SAAA,CAAA,CAAA;AAAA;;MACG,OAAA;AAAA,MACJ,SAAAC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAAC,EAAA,WAAAA,EAAA,QAAA,GAAAD,CAAA;AAAA;MAEDH,EAAA,WAAAI,EAAA,QAAA,QAAA,CAAA,GAAA,MAAA;AAAA;UACQ,OAAAJ,EAAA,eAAA,CAAA,CAAAI,EAAA,YAAA,oCAAAA,EAAA,IAAA,GAAA,4BAAA,CAAA;AAAA,UACL,OAAAJ,EAAA,eAAA,EAAA,iBAAAI,EAAA,YAAA,OAAA,OAAAA,EAAA,MAAA,OAAA,KAAA,CAAA;AAAA;;;QAKG,KAAA;AAAA,QACL,OAAA;AAAA,QACC,UAAAH,EAAA;AAAA;;;UAEO,IAAAA,EAAA;AAAA,UAAQ,MAAA;AAAA,UAAc,OAAA;AAAA,QA3ElC,GAAA,MAAA,GAAAL,CAAA;AAAA;;UA+EK,OAAA;AAAA,UACC,KAAAS,EAAA;AAAA,QACE,GAAAL,EAAA,gBAAAI,EAAA,IAAA,GAAA,GAAAP,CAAA,KAjFRG,EAAA,mBAAA,IAAA,EAAA;AAAA,QAoFIA,EAAA,mBAAA,YAAAA,EAAA,WAAA;AAAA,UAAW,IAAAK,EAAA;AAAA,UACT,UAAAJ,EAAA;AAAA,UACA,OAAAA,EAAA;AAAA;UAEA,OAAA,CAAA,kCAAA,EAAA,WAAAI,EAAA,YAAA,CAAA;AAAA,UACA,SAAAH,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAAE,EAAA,WAAAA,EAAA,QAAA,GAAAF,CAAA;AAAA,QAzFN,CAAA,GAAA,MAAA,IAAAL,CAAA;AAAA;UA6F+B,KAAAG,EAAA;AAAA,UAAS,OAAA;AAAA;;QA7FxC,GAAA,GAAAF,CAAA,GAAA;AAAA;;MAAA,GAAA,IAAAJ,CAAA;AAAA;;;;;"}

package/dist/chunks/{NcActionTextEditable-PAn8Dpv4.mjs → NcActionTextEditable-xPb_cTMW.mjs}

@@ -1,7 +1,7 @@
 import "../assets/NcActionTextEditable-DE_5Sc0w.css";
-import { A as u } from "./actionText-IqPIFk1D.mjs";
+import { A as u } from "./actionText-yZ-YQ_fz.mjs";
 import { G as n } from "./GenRandomId-VodkdWbp.mjs";
-import { A as c } from "./ArrowRight-Fk_qtqpW.mjs";
+import { A as c } from "./ArrowRight-6gYTXvBH.mjs";
 import { resolveComponent as b, openBlock as s, createElementBlock as d, normalizeClass as r, createElementVNode as o, renderSlot as f, normalizeStyle as p, withModifiers as _, toDisplayString as h, createCommentVNode as I, mergeProps as g, withDirectives as S, createVNode as x, vShow as y } from "vue";
 import { _ as A } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
 const k = {
@@ -76,7 +76,7 @@ function E(e, a, t, R, z, i) {
       f(e.$slots, "icon", {}, () => [
         o("span", {
           class: r([[e.isIconUrl ? "action-text-editable__icon--url" : e.icon], "action-text-editable__icon"]),
-          style: p({ backgroundImage: e.isIconUrl ? `url(${e.icon})` : null })
+          style: p({ backgroundImage: e.isIconUrl ? "url(".concat(e.icon, ")") : null })
         }, null, 6)
       ], !0),
       o("form", {

package/dist/chunks/{NcActionTextEditable-PAn8Dpv4.mjs.map → NcActionTextEditable-xPb_cTMW.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcActionTextEditable-PAn8Dpv4.mjs","sources":["../../src/components/NcActionTextEditable/NcActionTextEditable.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 [Actions](#Actions) component slots.\nAll undocumented attributes will be bound to the textarea. e.g. `maxlength`\n\n```\n<template>\n\t<NcActions>\n\t\t<NcActionTextEditable model-value=\"This is a textarea\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t</NcActionTextEditable>\n\t\t<NcActionTextEditable :disabled=\"true\" model-value=\"This is a disabled textarea\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t</NcActionTextEditable>\n\t\t<NcActionTextEditable name=\"Please edit the text\" model-value=\"This is a textarea with name\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t</NcActionTextEditable>\n\t</NcActions>\n</template>\n<script>\nimport Pencil from 'vue-material-design-icons/Pencil'\n\nexport default {\n\tcomponents: {\n\t\tPencil,\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" :class=\"{ 'action--disabled': disabled }\">\n\t\t<span class=\"action-text-editable\"\n\t\t\t@click=\"onClick\">\n\t\t\t<!-- @slot Manually provide icon -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<span :class=\"[isIconUrl ? 'action-text-editable__icon--url' : icon]\"\n\t\t\t\t\t:style=\"{ backgroundImage: isIconUrl ? `url(${icon})` : null }\"\n\t\t\t\t\tclass=\"action-text-editable__icon\" />\n\t\t\t</slot>\n\n\t\t\t<!-- form and input -->\n\t\t\t<form ref=\"form\"\n\t\t\t\tclass=\"action-text-editable__form\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t@submit.prevent=\"onSubmit\">\n\t\t\t\t<input :id=\"id\" type=\"submit\" class=\"action-text-editable__submit\">\n\n\t\t\t\t<!-- name -->\n\t\t\t\t<label v-if=\"name\"\n\t\t\t\t\tclass=\"action-text-editable__name\"\n\t\t\t\t\t:for=\"computedId\">\n\t\t\t\t\t{{ name }}\n\t\t\t\t</label>\n\n\t\t\t\t<textarea :id=\"computedId\"\n\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t:value=\"modelValue\"\n\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t:class=\"['action-text-editable__textarea', { focusable: isFocusable }]\"\n\t\t\t\t\t@input=\"onInput\" />\n\n\t\t\t\t<!-- allow the custom font to inject a ::before\n\t\t\t\t\tnot possible on input[type=submit] -->\n\t\t\t\t<label v-show=\"!disabled\" :for=\"id\" class=\"action-text-editable__label\">\n\t\t\t\t\t<ArrowRight :size=\"20\" />\n\t\t\t\t</label>\n\t\t\t</form>\n\t\t</span>\n\t</li>\n</template>\n\n<script>\nimport ActionTextMixin from '../../mixins/actionText.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\n\nexport default {\n\tname: 'NcActionTextEditable',\n\n\tcomponents: {\n\t\tArrowRight,\n\t},\n\n\tmixins: [ActionTextMixin],\n\n\tprops: {\n\t\t/**\n\t\t * id attribute of the checkbox element\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'action-' + GenRandomId(),\n\t\t\tvalidator: id => id.trim() !== '',\n\t\t},\n\t\t/**\n\t\t * disabled state of the text area\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * value attribute of the input field\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: [\n\t\t'input',\n\t\t'update:modelValue',\n\t\t'submit',\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\tcomputedId() {\n\t\t\treturn GenRandomId()\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonInput(event) {\n\t\t\t/**\n\t\t\t * Emitted on input events of the text field\n\t\t\t *\n\t\t\t * @type {Event|Date}\n\t\t\t */\n\t\t\tthis.$emit('input', event)\n\t\t\t/**\n\t\t\t * Emitted when the inputs value changes\n\t\t\t *\n\t\t\t * @type {string|Date}\n\t\t\t */\n\t\t\tthis.$emit('update:modelValue', event.target.value)\n\t\t},\n\t\tonSubmit(event) {\n\t\t\tevent.preventDefault()\n\t\t\tevent.stopPropagation()\n\t\t\tif (!this.disabled) {\n\t\t\t\t/**\n\t\t\t\t * Emitted on submit of the input field\n\t\t\t\t *\n\t\t\t\t * @type {Event}\n\t\t\t\t */\n\t\t\t\tthis.$emit('submit', event)\n\t\t\t} else {\n\t\t\t\t// ignore submit\n\t\t\t\treturn false\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@import '../../assets/inputs';\n@import '../../assets/action';\n@include action-active;\n@include action--disabled;\n\n$input-margin: 4px;\n\n.action-text-editable {\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& > span {\n\t\tcursor: pointer;\n\t\twhite-space: nowrap;\n\t}\n\n\t&__icon {\n\t\tmin-width: 0; /* Overwrite icons*/\n\t\tmin-height: 0;\n\t\t/* Keep padding to define the width to\n\t\t\tassure correct position of a possible text */\n\t\tpadding: #{math.div($clickable-area, 2)} 0 #{math.div($clickable-area, 2)} $clickable-area;\n\n\t\tbackground-position: #{$icon-margin} center;\n\t\tbackground-size: $icon-size;\n\t}\n\n\t&:deep(.material-design-icon) {\n\t\twidth: $clickable-area;\n\t\theight: $clickable-area;\n\t\topacity: $opacity_full;\n\n\t\t.material-design-icon__svg {\n\t\t\tvertical-align: middle;\n\t\t}\n\t}\n\n\t// Forms & text inputs\n\t&__form {\n\t\tdisplay: flex;\n\t\tflex: 1 1 auto;\n\t\tflex-direction: column;\n\n\t\tposition: relative;\n\t\tmargin: $input-margin 0;\n\t\tpadding-right: $icon-margin;\n\t}\n\n\t&__submit {\n\t\tposition: absolute;\n\t\tleft: -10000px;\n\t\ttop: auto;\n\t\twidth: 1px;\n\t\theight: 1px;\n\t\toverflow: hidden;\n\t}\n\n\t&__label {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\n\t\t// bottom-right corner\n\t\tposition: absolute;\n\t\tright: $icon-margin + 1;\n\t\tbottom: 1px;\n\t\twidth: #{$clickable-area - $input-margin * 2};\n\t\theight: #{$clickable-area - $input-margin * 2};\n\t\tbox-sizing: border-box;\n\t\tmargin: 0;\n\t\tpadding: 7px 6px;\n\n\t\tborder: 0;\n\t\tborder-radius: 50%;\n\t\t/* Avoid background under border */\n\t\tbackground-color: var(--color-main-background);\n\t\tbackground-clip: padding-box;\n\n\t\t&, * {\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n\n\t/* Inputs inside popover supports text, submit & reset */\n\t&__textarea {\n\t\tflex: 1 1 auto;\n\t\tcolor: inherit;\n\t\tborder-color: var(--color-border-maxcontrast);\n\n\t\tmin-height: #{$clickable-area * 2 - $input-margin * 2}; /* twice the element margin-y */\n\t\tmax-height: #{$clickable-area * 3 - $input-margin * 2}; /* twice the element margin-y */\n\t\t// block width widening\n\t\tmin-width: $clickable-area * 4;\n\t\twidth: 100% !important;\n\t\tmargin: 0;\n\n\t\t// if disabled, change cursor\n\t\t&:disabled {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t/* only show confirm borders if input is not focused */\n\t\t&:not(:active):not(:hover):not(:focus) {\n\t\t\t&:invalid {\n\t\t\t\t& + .action-text-editable__label {\n\t\t\t\t\tbackground-color: var(--color-error);\n\t\t\t\t}\n\t\t\t}\n\t\t\t&:not(:disabled) + .action-text-editable__label {\n\t\t\t\t&:active,\n\t\t\t\t&:hover,\n\t\t\t\t&:focus {\n\t\t\t\t\tbackground-color: var(--color-primary-element);\n\t\t\t\t\tcolor: var(--color-primary-element-text);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\t&:active,\n\t\t&:hover,\n\t\t&:focus {\n\t\t\t&:not(:disabled) + .action-text-editable__label {\n\t\t\t\t/* above previous input */\n\t\t\t\tz-index: 2;\n\n\t\t\t\tborder-color: var(--color-primary-element);\n\t\t\t\tborder-left-color: transparent;\n\t\t\t}\n\t\t}\n\t}\n}\n\n// if a form is the last of the list\n// add the same bottomMargin as the right padding\n// for visual balance\nli:last-child > .action-text-editable {\n\tmargin-bottom: $icon-margin - $input-margin;\n}\n\n// same for first item\nli:first-child > .action-text-editable {\n\tmargin-top: $icon-margin - $input-margin;\n}\n</style>\n"],"names":["_sfc_main","GenRandomId","event","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","normalizeClass","$props","_cache","args","_ctx","renderSlot","normalizeStyle","$options","toDisplayString","createCommentVNode","createElementVNode","mergeProps"],"mappings":";;;;;;AA2GA,MAAAA,IAAA;AAAA;;;;;EASC,OAAA;AAAA;AAAA;AAAA;AAAA,IAIC,IAAA;AAAA;MAEC,SAAA,MAAA,YAAAC,EAAA;AAAA;;;;;IAMD,UAAA;AAAA;;;;;;;;;;;EAaD,OAAA;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA;EAGD,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOE,aAAA,CAAA,KAAA;AAAA;;AAIA,aAAAA,EAAA;AAAA;;EAIF,SAAA;AAAA,IACC,QAAAC,GAAA;;;IAcA,SAAAA,GAAA;AAGC,UAFAA,EAAA,eAAA,wBAEA,CAAA,KAAA;;;;;;AAaH,GAjMAC,IAAA,CAAA,UAAA,GAAAC,IAAA,CAAA,IAAA,GAAAC,IAAA,CAAA,KAAA,GAAAC,IAAA,CAAA,MAAA,YAAA,OAAA,GAAAC,IAAA,CAAA,KAAA;;;;IA4DK,OAAAC,EAAA,CAAA,UAAA,EAAA,oBAAAC,EAAA,SAAA,CAAA,CAAA;AAAA;;MACG,OAAA;AAAA,MACJ,SAAAC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAAC,EAAA,WAAAA,EAAA,QAAA,GAAAD,CAAA;AAAA;MAEDE,EAAAD,EAAA,QAAA,QAAA,CAAA,GAAA,MAAA;AAAA;UACQ,OAAAJ,EAAA,CAAA,CAAAI,EAAA,YAAA,oCAAAA,EAAA,IAAA,GAAA,4BAAA,CAAA;AAAA,UACL,OAAAE,EAAA,EAAA,iBAAAF,EAAA,YAAA,OAAAA,EAAA,IAAA,MAAA,KAAA,CAAA;AAAA;;;QAKG,KAAA;AAAA,QACL,OAAA;AAAA,QACC,UAAAH,EAAA;AAAA;;;UAEO,IAAAA,EAAA;AAAA,UAAQ,MAAA;AAAA,UAAc,OAAA;AAAA,QA3ElC,GAAA,MAAA,GAAAL,CAAA;AAAA;;UA+EK,OAAA;AAAA,UACC,KAAAW,EAAA;AAAA,QACE,GAAAC,EAAAJ,EAAA,IAAA,GAAA,GAAAP,CAAA,KAjFRY,EAAA,IAAA,EAAA;AAAA,QAoFIC,EAAA,YAAAC,EAAA;AAAA,UAAW,IAAAJ,EAAA;AAAA,UACT,UAAAN,EAAA;AAAA,UACA,OAAAA,EAAA;AAAA;UAEA,OAAA,CAAA,kCAAA,EAAA,WAAAM,EAAA,YAAA,CAAA;AAAA,UACA,SAAAL,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAAI,EAAA,WAAAA,EAAA,QAAA,GAAAJ,CAAA;AAAA,QAzFN,CAAA,GAAA,MAAA,IAAAL,CAAA;AAAA;UA6F+B,KAAAG,EAAA;AAAA,UAAS,OAAA;AAAA;;QA7FxC,GAAA,GAAAF,CAAA,GAAA;AAAA;;MAAA,GAAA,IAAAJ,CAAA;AAAA;;;;"}
+{"version":3,"file":"NcActionTextEditable-xPb_cTMW.mjs","sources":["../../src/components/NcActionTextEditable/NcActionTextEditable.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 [Actions](#Actions) component slots.\nAll undocumented attributes will be bound to the textarea. e.g. `maxlength`\n\n```\n<template>\n\t<NcActions>\n\t\t<NcActionTextEditable model-value=\"This is a textarea\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t</NcActionTextEditable>\n\t\t<NcActionTextEditable :disabled=\"true\" model-value=\"This is a disabled textarea\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t</NcActionTextEditable>\n\t\t<NcActionTextEditable name=\"Please edit the text\" model-value=\"This is a textarea with name\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t</NcActionTextEditable>\n\t</NcActions>\n</template>\n<script>\nimport Pencil from 'vue-material-design-icons/Pencil'\n\nexport default {\n\tcomponents: {\n\t\tPencil,\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" :class=\"{ 'action--disabled': disabled }\">\n\t\t<span class=\"action-text-editable\"\n\t\t\t@click=\"onClick\">\n\t\t\t<!-- @slot Manually provide icon -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<span :class=\"[isIconUrl ? 'action-text-editable__icon--url' : icon]\"\n\t\t\t\t\t:style=\"{ backgroundImage: isIconUrl ? `url(${icon})` : null }\"\n\t\t\t\t\tclass=\"action-text-editable__icon\" />\n\t\t\t</slot>\n\n\t\t\t<!-- form and input -->\n\t\t\t<form ref=\"form\"\n\t\t\t\tclass=\"action-text-editable__form\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t@submit.prevent=\"onSubmit\">\n\t\t\t\t<input :id=\"id\" type=\"submit\" class=\"action-text-editable__submit\">\n\n\t\t\t\t<!-- name -->\n\t\t\t\t<label v-if=\"name\"\n\t\t\t\t\tclass=\"action-text-editable__name\"\n\t\t\t\t\t:for=\"computedId\">\n\t\t\t\t\t{{ name }}\n\t\t\t\t</label>\n\n\t\t\t\t<textarea :id=\"computedId\"\n\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t:value=\"modelValue\"\n\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t:class=\"['action-text-editable__textarea', { focusable: isFocusable }]\"\n\t\t\t\t\t@input=\"onInput\" />\n\n\t\t\t\t<!-- allow the custom font to inject a ::before\n\t\t\t\t\tnot possible on input[type=submit] -->\n\t\t\t\t<label v-show=\"!disabled\" :for=\"id\" class=\"action-text-editable__label\">\n\t\t\t\t\t<ArrowRight :size=\"20\" />\n\t\t\t\t</label>\n\t\t\t</form>\n\t\t</span>\n\t</li>\n</template>\n\n<script>\nimport ActionTextMixin from '../../mixins/actionText.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\n\nexport default {\n\tname: 'NcActionTextEditable',\n\n\tcomponents: {\n\t\tArrowRight,\n\t},\n\n\tmixins: [ActionTextMixin],\n\n\tprops: {\n\t\t/**\n\t\t * id attribute of the checkbox element\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'action-' + GenRandomId(),\n\t\t\tvalidator: id => id.trim() !== '',\n\t\t},\n\t\t/**\n\t\t * disabled state of the text area\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * value attribute of the input field\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: [\n\t\t'input',\n\t\t'update:modelValue',\n\t\t'submit',\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\tcomputedId() {\n\t\t\treturn GenRandomId()\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonInput(event) {\n\t\t\t/**\n\t\t\t * Emitted on input events of the text field\n\t\t\t *\n\t\t\t * @type {Event|Date}\n\t\t\t */\n\t\t\tthis.$emit('input', event)\n\t\t\t/**\n\t\t\t * Emitted when the inputs value changes\n\t\t\t *\n\t\t\t * @type {string|Date}\n\t\t\t */\n\t\t\tthis.$emit('update:modelValue', event.target.value)\n\t\t},\n\t\tonSubmit(event) {\n\t\t\tevent.preventDefault()\n\t\t\tevent.stopPropagation()\n\t\t\tif (!this.disabled) {\n\t\t\t\t/**\n\t\t\t\t * Emitted on submit of the input field\n\t\t\t\t *\n\t\t\t\t * @type {Event}\n\t\t\t\t */\n\t\t\t\tthis.$emit('submit', event)\n\t\t\t} else {\n\t\t\t\t// ignore submit\n\t\t\t\treturn false\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@import '../../assets/inputs';\n@import '../../assets/action';\n@include action-active;\n@include action--disabled;\n\n$input-margin: 4px;\n\n.action-text-editable {\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& > span {\n\t\tcursor: pointer;\n\t\twhite-space: nowrap;\n\t}\n\n\t&__icon {\n\t\tmin-width: 0; /* Overwrite icons*/\n\t\tmin-height: 0;\n\t\t/* Keep padding to define the width to\n\t\t\tassure correct position of a possible text */\n\t\tpadding: #{math.div($clickable-area, 2)} 0 #{math.div($clickable-area, 2)} $clickable-area;\n\n\t\tbackground-position: #{$icon-margin} center;\n\t\tbackground-size: $icon-size;\n\t}\n\n\t&:deep(.material-design-icon) {\n\t\twidth: $clickable-area;\n\t\theight: $clickable-area;\n\t\topacity: $opacity_full;\n\n\t\t.material-design-icon__svg {\n\t\t\tvertical-align: middle;\n\t\t}\n\t}\n\n\t// Forms & text inputs\n\t&__form {\n\t\tdisplay: flex;\n\t\tflex: 1 1 auto;\n\t\tflex-direction: column;\n\n\t\tposition: relative;\n\t\tmargin: $input-margin 0;\n\t\tpadding-right: $icon-margin;\n\t}\n\n\t&__submit {\n\t\tposition: absolute;\n\t\tleft: -10000px;\n\t\ttop: auto;\n\t\twidth: 1px;\n\t\theight: 1px;\n\t\toverflow: hidden;\n\t}\n\n\t&__label {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\n\t\t// bottom-right corner\n\t\tposition: absolute;\n\t\tright: $icon-margin + 1;\n\t\tbottom: 1px;\n\t\twidth: #{$clickable-area - $input-margin * 2};\n\t\theight: #{$clickable-area - $input-margin * 2};\n\t\tbox-sizing: border-box;\n\t\tmargin: 0;\n\t\tpadding: 7px 6px;\n\n\t\tborder: 0;\n\t\tborder-radius: 50%;\n\t\t/* Avoid background under border */\n\t\tbackground-color: var(--color-main-background);\n\t\tbackground-clip: padding-box;\n\n\t\t&, * {\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n\n\t/* Inputs inside popover supports text, submit & reset */\n\t&__textarea {\n\t\tflex: 1 1 auto;\n\t\tcolor: inherit;\n\t\tborder-color: var(--color-border-maxcontrast);\n\n\t\tmin-height: #{$clickable-area * 2 - $input-margin * 2}; /* twice the element margin-y */\n\t\tmax-height: #{$clickable-area * 3 - $input-margin * 2}; /* twice the element margin-y */\n\t\t// block width widening\n\t\tmin-width: $clickable-area * 4;\n\t\twidth: 100% !important;\n\t\tmargin: 0;\n\n\t\t// if disabled, change cursor\n\t\t&:disabled {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t/* only show confirm borders if input is not focused */\n\t\t&:not(:active):not(:hover):not(:focus) {\n\t\t\t&:invalid {\n\t\t\t\t& + .action-text-editable__label {\n\t\t\t\t\tbackground-color: var(--color-error);\n\t\t\t\t}\n\t\t\t}\n\t\t\t&:not(:disabled) + .action-text-editable__label {\n\t\t\t\t&:active,\n\t\t\t\t&:hover,\n\t\t\t\t&:focus {\n\t\t\t\t\tbackground-color: var(--color-primary-element);\n\t\t\t\t\tcolor: var(--color-primary-element-text);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\t&:active,\n\t\t&:hover,\n\t\t&:focus {\n\t\t\t&:not(:disabled) + .action-text-editable__label {\n\t\t\t\t/* above previous input */\n\t\t\t\tz-index: 2;\n\n\t\t\t\tborder-color: var(--color-primary-element);\n\t\t\t\tborder-left-color: transparent;\n\t\t\t}\n\t\t}\n\t}\n}\n\n// if a form is the last of the list\n// add the same bottomMargin as the right padding\n// for visual balance\nli:last-child > .action-text-editable {\n\tmargin-bottom: $icon-margin - $input-margin;\n}\n\n// same for first item\nli:first-child > .action-text-editable {\n\tmargin-top: $icon-margin - $input-margin;\n}\n</style>\n"],"names":["_sfc_main","GenRandomId","event","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","normalizeClass","$props","_cache","args","_ctx","renderSlot","normalizeStyle","$options","toDisplayString","createCommentVNode","createElementVNode","mergeProps"],"mappings":";;;;;;AA2GA,MAAAA,IAAA;AAAA;;;;;EASC,OAAA;AAAA;AAAA;AAAA;AAAA,IAIC,IAAA;AAAA;MAEC,SAAA,MAAA,YAAAC,EAAA;AAAA;;;;;IAMD,UAAA;AAAA;;;;;;;;;;;EAaD,OAAA;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA;EAGD,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOE,aAAA,CAAA,KAAA;AAAA;;AAIA,aAAAA,EAAA;AAAA;;EAIF,SAAA;AAAA,IACC,QAAAC,GAAA;;;IAcA,SAAAA,GAAA;AAGC,UAFAA,EAAA,eAAA,wBAEA,CAAA,KAAA;;;;;;AAaH,GAjMAC,IAAA,CAAA,UAAA,GAAAC,IAAA,CAAA,IAAA,GAAAC,IAAA,CAAA,KAAA,GAAAC,IAAA,CAAA,MAAA,YAAA,OAAA,GAAAC,IAAA,CAAA,KAAA;;;;IA4DK,OAAAC,EAAA,CAAA,UAAA,EAAA,oBAAAC,EAAA,SAAA,CAAA,CAAA;AAAA;;MACG,OAAA;AAAA,MACJ,SAAAC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAAC,EAAA,WAAAA,EAAA,QAAA,GAAAD,CAAA;AAAA;MAEDE,EAAAD,EAAA,QAAA,QAAA,CAAA,GAAA,MAAA;AAAA;UACQ,OAAAJ,EAAA,CAAA,CAAAI,EAAA,YAAA,oCAAAA,EAAA,IAAA,GAAA,4BAAA,CAAA;AAAA,UACL,OAAAE,EAAA,EAAA,iBAAAF,EAAA,YAAA,OAAA,OAAAA,EAAA,MAAA,OAAA,KAAA,CAAA;AAAA;;;QAKG,KAAA;AAAA,QACL,OAAA;AAAA,QACC,UAAAH,EAAA;AAAA;;;UAEO,IAAAA,EAAA;AAAA,UAAQ,MAAA;AAAA,UAAc,OAAA;AAAA,QA3ElC,GAAA,MAAA,GAAAL,CAAA;AAAA;;UA+EK,OAAA;AAAA,UACC,KAAAW,EAAA;AAAA,QACE,GAAAC,EAAAJ,EAAA,IAAA,GAAA,GAAAP,CAAA,KAjFRY,EAAA,IAAA,EAAA;AAAA,QAoFIC,EAAA,YAAAC,EAAA;AAAA,UAAW,IAAAJ,EAAA;AAAA,UACT,UAAAN,EAAA;AAAA,UACA,OAAAA,EAAA;AAAA;UAEA,OAAA,CAAA,kCAAA,EAAA,WAAAM,EAAA,YAAA,CAAA;AAAA,UACA,SAAAL,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAAI,EAAA,WAAAA,EAAA,QAAA,GAAAJ,CAAA;AAAA,QAzFN,CAAA,GAAA,MAAA,IAAAL,CAAA;AAAA;UA6F+B,KAAAG,EAAA;AAAA,UAAS,OAAA;AAAA;;QA7FxC,GAAA,GAAAF,CAAA,GAAA;AAAA;;MAAA,GAAA,IAAAJ,CAAA;AAAA;;;;"}

package/dist/chunks/{NcActions-6Yv0De7D.mjs → NcActions-76CtOBCq.mjs}

@@ -1,18 +1,19 @@
-import "../assets/NcActions-cEMOhd0g.css";
-import { N as m, i as B } from "./NcButton-nCkJxwsi.mjs";
-import { N as b } from "./NcPopover-HwP68PjO.mjs";
-import { G as M } from "./GenRandomId-VodkdWbp.mjs";
-import { r as k, o as L, a as w } from "./_l10n-JmazR_zZ.mjs";
-import { D as N } from "./DotsHorizontal-2GCivGee.mjs";
-import { computed as E, warn as F, h as n, Fragment as P, mergeProps as _ } from "vue";
-import { _ as T } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
-k(L);
-const a = ".focusable", q = {
+import "../assets/NcActions-PR-7NI_x.css";
+import { N as A, i as K } from "./NcButton-YOXv3gFY.mjs";
+import { N as q } from "./NcPopover-XgOWyuQF.mjs";
+import { G as W } from "./GenRandomId-VodkdWbp.mjs";
+import { g as j } from "./focusTrap-Py2bQ9-r.mjs";
+import { r as J, o as Q, a as X } from "./_l10n-uuAvfQgY.mjs";
+import { D as C } from "./DotsHorizontal-JfmEIGBo.mjs";
+import { computed as Y, warn as Z, h as n, Fragment as ee, mergeProps as te } from "vue";
+import { _ as ie } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
+J(Q);
+const l = ".focusable", se = {
   name: "NcActions",
   components: {
-    NcButton: m,
-    DotsHorizontal: N,
-    NcPopover: b
+    NcButton: A,
+    DotsHorizontal: C,
+    NcPopover: q
   },
   provide() {
     return {
@@ -25,7 +26,7 @@ const a = ".focusable", q = {
        * Provide the role for NcAction* components in the NcActions content.
        * @type {import('vue').ComputedRef<boolean>}
        */
-      "NcActions:isSemanticMenu": E(() => this.isSemanticMenu)
+      "NcActions:isSemanticMenu": Y(() => this.actionsMenuSemanticType === "menu")
     };
   },
   props: {
@@ -104,7 +105,7 @@ const a = ".focusable", q = {
      */
     ariaLabel: {
       type: String,
-      default: w("Actions")
+      default: X("Actions")
     },
     /**
      * @deprecated To be removed in @nextcloud/vue 9. Migration guide: remove ariaHidden prop from NcAction* components.
@@ -157,42 +158,83 @@ const a = ".focusable", q = {
     "update:open",
     "close",
     "focus",
-    "blur"
+    "blur",
+    "click"
   ],
   data() {
     return {
       opened: this.open,
       focusIndex: 0,
-      randomId: `menu-${M()}`,
-      isSemanticMenu: !1,
-      isSemanticNavigation: !1,
-      isSemanticPopoverLike: !1
+      randomId: "menu-".concat(W()),
+      /**
+       * @type {'menu'|'navigation'|'dialog'|'tooltip'|''}
+       */
+      actionsMenuSemanticType: "",
+      externalFocusTrapStack: []
     };
   },
   computed: {
     triggerBtnType() {
       return this.type || (this.primary ? "primary" : this.menuName ? "secondary" : "tertiary");
+    },
+    withFocusTrap() {
+      return this.actionsMenuSemanticType === "dialog";
     }
   },
   watch: {
     // Watch parent prop
     open(e) {
       e !== this.opened && (this.opened = e);
+    },
+    opened() {
+      this.intersectIntoCurrentFocusTrapStack();
     }
   },
   methods: {
+    /**
+     * Get the name of the action component
+     *
+     * @param {import('vue').VNode} action - a vnode with a NcAction* component instance
+     * @return {string} the name of the action component
+     */
+    getActionName(e) {
+      var i;
+      return (i = e == null ? void 0 : e.type) == null ? void 0 : i.name;
+    },
+    /**
+     * When the component has its own focus trap, then it is managed by global trap stack by focus-trap.
+     *
+     * However if the component has no focus trap and is used inside another focus trap - there is an issue.
+     * By default popover content is rendered in body or other container, which is likely outside the current focus trap containers.
+     * It results in broken behavior from focus-trap.
+     *
+     * We need to pause all the focus traps for opening popover and then unpause them back after closing.
+     */
+    intersectIntoCurrentFocusTrapStack() {
+      if (!this.withFocusTrap)
+        if (this.opened) {
+          this.externalFocusTrapStack = [...j()];
+          for (const e of this.externalFocusTrapStack)
+            e.pause();
+        } else {
+          for (const e of this.externalFocusTrapStack)
+            e.unpause();
+          this.externalFocusTrapStack = [];
+        }
+    },
     /**
      * Do we have exactly one Action and
      * is it allowed as a standalone element?
      *
-     * @param {Array} action The action to check
+     * @param {import('vue').VNode} action The action to check
      * @return {boolean}
      */
     isValidSingleAction(e) {
-      return ["NcActionButton", "NcActionLink", "NcActionRouter"].includes(e?.type?.name);
+      return ["NcActionButton", "NcActionLink", "NcActionRouter"].includes(this.getActionName(e));
     },
     isAction(e) {
-      return e.type?.name?.startsWith?.("NcAction");
+      var i, s;
+      return (s = (i = this.getActionName(e)) == null ? void 0 : i.startsWith) == null ? void 0 : s.call(i, "NcAction");
     },
     /**
      * Check whether a icon prop value is an URL or not
@@ -210,7 +252,8 @@ const a = ".focusable", q = {
       this.opened || (this.opened = !0, this.$emit("update:open", !0), this.$emit("open"));
     },
     closeMenu(e = !0) {
-      this.opened && (this.opened = !1, this.$refs.popover?.clearFocusTrap({ returnFocus: e }), this.$emit("update:open", !1), this.$emit("close"), this.focusIndex = 0, this.$refs.menuButton.$el.focus());
+      var i;
+      this.opened && (this.opened = !1, (i = this.$refs.popover) == null || i.clearFocusTrap({ returnFocus: e }), this.$emit("update:open", !1), this.$emit("close"), this.focusIndex = 0, e && this.$refs.menuButton.$el.focus());
     },
     onOpen(e) {
       this.$nextTick(() => {
@@ -223,14 +266,14 @@ const a = ".focusable", q = {
     // this will prevent issues with input being unfocused
     // on mouse move
     onMouseFocusAction(e) {
-      if (document?.activeElement === e.target)
+      if ((document == null ? void 0 : document.activeElement) === e.target)
         return;
       const i = e.target.closest("li");
       if (i && this.$refs.menu.contains(i)) {
-        const o = i.querySelector(a);
-        if (o) {
-          const l = [...this.$refs.menu.querySelectorAll(a)].indexOf(o);
-          l > -1 && (this.focusIndex = l, this.focusAction());
+        const s = i.querySelector(l);
+        if (s) {
+          const c = [...this.$refs.menu.querySelectorAll(l)].indexOf(s);
+          c > -1 && (this.focusIndex = c, this.focusAction());
         }
       }
     },
@@ -240,14 +283,14 @@ const a = ".focusable", q = {
      * @param {object} event The keydown event
      */
     onKeydown(e) {
-      e.key === "Tab" && !this.isSemanticPopoverLike && this.closeMenu(!1), e.key === "ArrowUp" && this.focusPreviousAction(e), e.key === "ArrowDown" && this.focusNextAction(e), e.key === "PageUp" && this.focusFirstAction(e), e.key === "PageDown" && this.focusLastAction(e), e.key === "Escape" && (this.closeMenu(), e.preventDefault());
+      e.key === "Tab" && !this.withFocusTrap && this.closeMenu(!0), e.key === "ArrowUp" && this.focusPreviousAction(e), e.key === "ArrowDown" && this.focusNextAction(e), e.key === "PageUp" && this.focusFirstAction(e), e.key === "PageDown" && this.focusLastAction(e), e.key === "Escape" && (this.closeMenu(), e.preventDefault());
     },
     removeCurrentActive() {
       const e = this.$refs.menu.querySelector("li.active");
       e && e.classList.remove("active");
     },
     focusAction() {
-      const e = this.$refs.menu.querySelectorAll(a)[this.focusIndex];
+      const e = this.$refs.menu.querySelectorAll(l)[this.focusIndex];
       if (e) {
         this.removeCurrentActive();
         const i = e.closest("li.action");
@@ -259,19 +302,19 @@ const a = ".focusable", q = {
     },
     focusNextAction(e) {
       if (this.opened) {
-        const i = this.$refs.menu.querySelectorAll(a).length - 1;
+        const i = this.$refs.menu.querySelectorAll(l).length - 1;
         this.focusIndex === i ? this.focusFirstAction(e) : (this.preventIfEvent(e), this.focusIndex = this.focusIndex + 1), this.focusAction();
       }
     },
     focusFirstAction(e) {
       if (this.opened) {
         this.preventIfEvent(e);
-        const i = [...this.$refs.menu.querySelectorAll(a)].findIndex((o) => o.parentElement.getAttribute("aria-selected"));
+        const i = [...this.$refs.menu.querySelectorAll(l)].findIndex((s) => s.parentElement.getAttribute("aria-selected"));
         this.focusIndex = i > -1 ? i : 0, this.focusAction();
       }
     },
     focusLastAction(e) {
-      this.opened && (this.preventIfEvent(e), this.focusIndex = this.$refs.menu.querySelectorAll(a).length - 1, this.focusAction());
+      this.opened && (this.preventIfEvent(e), this.focusIndex = this.$refs.menu.querySelectorAll(l).length - 1, this.focusAction());
     },
     preventIfEvent(e) {
       e && (e.preventDefault(), e.stopPropagation());
@@ -280,7 +323,10 @@ const a = ".focusable", q = {
       this.$emit("focus", e);
     },
     onBlur(e) {
-      this.$emit("blur", e);
+      this.$emit("blur", e), this.actionsMenuSemanticType === "tooltip" && this.$refs.menu && this.$refs.menu.querySelectorAll(l).length === 0 && this.closeMenu(!1);
+    },
+    onClick(e) {
+      this.$emit("click", e);
     }
   },
   /**
@@ -289,56 +335,63 @@ const a = ".focusable", q = {
    * @return {object|undefined} The created VNode
    */
   render() {
-    const e = [], i = (t, s) => {
-      t.forEach((c) => {
-        if (this.isAction(c)) {
-          s.push(c);
+    var I, T;
+    const e = [], i = (t, o) => {
+      t.forEach((r) => {
+        if (this.isAction(r)) {
+          o.push(r);
           return;
         }
-        c.type === P && i(c.children, s);
+        r.type === ee && i(r.children, o);
       });
     };
-    i(this.$slots.default?.(), e);
-    const o = (t) => t?.type?.name, y = ["NcActionButton", "NcActionButtonGroup", "NcActionCheckbox", "NcActionRadio"], l = ["NcActionInput", "NcActionTextEditable"], v = ["NcActionLink", "NcActionRouter"], d = e.some((t) => l.includes(o(t))), A = e.some((t) => y.includes(o(t))), x = e.some((t) => v.includes(o(t)));
-    this.isSemanticMenu = A && !d, this.isSemanticNavigation = x && !A && !d, this.isSemanticPopoverLike = !this.isSemanticMenu && !this.isSemanticNavigation;
-    const f = this.isSemanticMenu ? "menu" : d ? "dialog" : "true";
-    let r = e.filter(this.isValidSingleAction);
-    if (this.forceMenu && r.length > 0 && this.inline > 0 && (F("Specifying forceMenu will ignore any inline actions rendering."), r = []), e.length === 0)
+    if (i((T = (I = this.$slots).default) == null ? void 0 : T.call(I), e), e.length === 0)
       return;
-    const g = (t) => {
-      const s = t?.props?.icon, c = t?.children?.icon?.()?.[0] ?? (this.isIconUrl(s) ? n("img", { class: "action-item__menutoggle__icon", src: s, alt: "" }) : n("span", { class: ["icon", s] })), p = t?.children?.default?.()?.[0]?.children?.trim(), S = this.forceName ? p : "";
-      let h = t?.props?.title;
-      this.forceName || h || (h = p);
-      const u = { ...t?.props ?? {} }, $ = ["submit", "reset"].includes(u.type) ? u.modelValue : "button";
+    let s = e.filter(this.isValidSingleAction);
+    this.forceMenu && s.length > 0 && this.inline > 0 && (Z("Specifying forceMenu will ignore any inline actions rendering."), s = []);
+    const f = s.slice(0, this.inline), c = e.filter((t) => !f.includes(t)), H = ["NcActionButton", "NcActionButtonGroup", "NcActionCheckbox", "NcActionRadio"], O = ["NcActionInput", "NcActionTextEditable"], U = ["NcActionLink", "NcActionRouter"], D = c.some((t) => O.includes(this.getActionName(t))), V = c.some((t) => H.includes(this.getActionName(t))), z = c.some((t) => U.includes(this.getActionName(t)));
+    D ? this.actionsMenuSemanticType = "dialog" : V ? this.actionsMenuSemanticType = "menu" : z ? this.actionsMenuSemanticType = "navigation" : e.filter((o) => this.getActionName(o).startsWith("NcAction")).length === e.length ? this.actionsMenuSemanticType = "tooltip" : this.actionsMenuSemanticType = "dialog";
+    const y = {
+      dialog: "dialog",
+      menu: "menu",
+      navigation: "true",
+      tooltip: "true"
+    }[this.actionsMenuSemanticType], g = (t) => {
+      var N, d, x, b, $, m, k, v, F, M, B, w, E, _, L, P, R;
+      const o = (N = t == null ? void 0 : t.props) == null ? void 0 : N.icon, r = ($ = (b = (x = (d = t == null ? void 0 : t.children) == null ? void 0 : d.icon) == null ? void 0 : x.call(d)) == null ? void 0 : b[0]) != null ? $ : this.isIconUrl(o) ? n("img", { class: "action-item__menutoggle__icon", src: o, alt: "" }) : n("span", { class: ["icon", o] }), a = (M = (F = (v = (k = (m = t == null ? void 0 : t.children) == null ? void 0 : m.default) == null ? void 0 : k.call(m)) == null ? void 0 : v[0]) == null ? void 0 : F.children) == null ? void 0 : M.trim(), h = this.forceName ? a : "";
+      let p = (B = t == null ? void 0 : t.props) == null ? void 0 : B.title;
+      this.forceName || p || (p = a);
+      const u = { ...(w = t == null ? void 0 : t.props) != null ? w : {} }, G = ["submit", "reset"].includes(u.type) ? u.modelValue : "button";
       return delete u.modelValue, delete u.type, n(
-        m,
-        _(
+        A,
+        te(
           u,
           {
             class: "action-item action-item--single",
-            "aria-label": t?.props?.["aria-label"] || p,
-            title: h,
+            "aria-label": ((E = t == null ? void 0 : t.props) == null ? void 0 : E["aria-label"]) || a,
+            title: p,
             // If it has a menuName, we use a secondary button
-            type: this.type || (S ? "secondary" : "tertiary"),
-            disabled: this.disabled || t?.props?.disabled,
-            pressed: t?.props?.modelValue,
-            nativeType: $,
+            type: this.type || (h ? "secondary" : "tertiary"),
+            disabled: this.disabled || ((_ = t == null ? void 0 : t.props) == null ? void 0 : _.disabled),
+            pressed: (L = t == null ? void 0 : t.props) == null ? void 0 : L.modelValue,
+            nativeType: G,
             onFocus: this.onFocus,
             onBlur: this.onBlur,
             // forward any pressed state from NcButton just like NcActionButton does
-            "onUpdate:pressed": t?.props?.["onUpdate:modelValue"] ?? (() => {
-            })
+            "onUpdate:pressed": (R = (P = t == null ? void 0 : t.props) == null ? void 0 : P["onUpdate:modelValue"]) != null ? R : () => {
+            }
           }
         ),
         {
-          default: () => S,
-          icon: () => c
+          default: () => h,
+          icon: () => r
         }
       );
-    }, I = (t) => {
-      const s = B(this.$slots.icon?.()) ? this.$slots.icon?.() : this.defaultIcon ? n("span", { class: ["icon", this.defaultIcon] }) : n(N, { size: 20 });
+    }, S = (t) => {
+      var r, a, h, p, u;
+      const o = K((a = (r = this.$slots).icon) == null ? void 0 : a.call(r)) ? (p = (h = this.$slots).icon) == null ? void 0 : p.call(h) : this.defaultIcon ? n("span", { class: ["icon", this.defaultIcon] }) : n(C, { size: 20 });
       return n(
-        b,
+        q,
         {
           ref: "popover",
           delay: 0,
@@ -349,17 +402,15 @@ const a = ".focusable", q = {
           container: this.container,
           ...this.manualOpen && { triggers: [] },
           popoverBaseClass: "action-item__popper",
-          popupRole: f,
-          // Menu and navigation should not have focus trap
-          // Tab should close the menu and move focus to the next UI element
-          setReturnFocus: this.isSemanticPopoverLike ? this.$refs.menuButton?.$el : null,
-          focusTrap: this.isSemanticPopoverLike,
+          popupRole: y,
+          setReturnFocus: this.withFocusTrap ? (u = this.$refs.menuButton) == null ? void 0 : u.$el : null,
+          focusTrap: this.withFocusTrap,
           onShow: this.openMenu,
           onAfterShow: this.onOpen,
           onHide: this.closeMenu
         },
         {
-          trigger: () => n(m, {
+          trigger: () => n(A, {
             class: "action-item__menutoggle",
             type: this.triggerBtnType,
             disabled: this.disabled,
@@ -368,9 +419,10 @@ const a = ".focusable", q = {
             "aria-label": this.menuName ? null : this.ariaLabel,
             "aria-controls": this.opened ? this.randomId : null,
             onFocus: this.onFocus,
-            onBlur: this.onBlur
+            onBlur: this.onBlur,
+            onClick: this.onClick
           }, {
-            icon: () => s,
+            icon: () => o,
             default: () => this.menuName
           }),
           default: () => n("div", {
@@ -385,7 +437,7 @@ const a = ".focusable", q = {
             n("ul", {
               id: this.randomId,
               tabindex: "-1",
-              role: f !== "true" ? f : void 0
+              role: y !== "true" ? y : void 0
               // TODO: allow to provide dialog aria-label
             }, [
               t
@@ -394,58 +446,52 @@ const a = ".focusable", q = {
         }
       );
     };
-    if (e.length === 1 && r.length === 1 && !this.forceMenu)
-      return g(r[0]);
-    if (this.$nextTick(() => {
+    return e.length === 1 && s.length === 1 && !this.forceMenu ? g(e[0]) : (this.$nextTick(() => {
       this.opened && this.$refs.menu && (this.$refs.menu.querySelector("li.active") || []).length === 0 && this.focusFirstAction();
-    }), r.length > 0 && this.inline > 0) {
-      const t = r.slice(0, this.inline), s = e.filter((c) => !t.includes(c));
-      return n(
-        "div",
-        {
-          class: [
-            "action-items",
-            `action-item--${this.triggerBtnType}`
-          ]
-        },
-        [
-          // Render inline actions
-          ...t.map(g),
-          // render the rest within the popover menu
-          s.length > 0 ? n(
-            "div",
-            {
-              class: [
-                "action-item",
-                {
-                  "action-item--open": this.opened
-                }
-              ]
-            },
-            [
-              I(s)
-            ]
-          ) : null
+    }), f.length > 0 && this.inline > 0 ? n(
+      "div",
+      {
+        class: [
+          "action-items",
+          "action-item--".concat(this.triggerBtnType)
         ]
-      );
-    }
-    return n(
+      },
+      [
+        // Render inline actions
+        ...f.map(g),
+        // render the rest within the popover menu
+        c.length > 0 ? n(
+          "div",
+          {
+            class: [
+              "action-item",
+              {
+                "action-item--open": this.opened
+              }
+            ]
+          },
+          [
+            S(c)
+          ]
+        ) : null
+      ]
+    ) : n(
       "div",
       {
         class: [
           "action-item action-item--default-popover",
-          `action-item--${this.triggerBtnType}`,
+          "action-item--".concat(this.triggerBtnType),
           {
             "action-item--open": this.opened
           }
         ]
       },
       [
-        I(e)
+        S(e)
       ]
-    );
+    ));
   }
-}, G = /* @__PURE__ */ T(q, [["__scopeId", "data-v-00b334b3"]]);
+}, de = /* @__PURE__ */ ie(se, [["__scopeId", "data-v-c06d6143"]]);
 export {
-  G as N
+  de as N
 };