npm - @nextcloud/vue - Versions diffs - 8.27.0 → 8.29.0 - Mend

@nextcloud/vue 8.27.0 → 8.29.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (503) hide show

package/dist/chunks/{GenColors-B49R8TGp.mjs.map → GenColors-DNN63dHB.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GenColors-~~B49R8TGp~~.mjs","sources":["../../src/utils/GenColors.js"],"sourcesContent":["/*\n SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n /\n\nimport { t } from '../l10n.js'\n\nexport class Color {\n\n\t/\n\t @param {number} r The red value\n\t * @param {number} g The green value\n\t * @param {number} b The blue value\n\t * @param {string} [name] The name of the color\n\t /\n\tconstructor(r, g, b, name) {\n\t\tthis.r = r\n\t\tthis.g = g\n\t\tthis.b = b\n\t\tif (name) {\n\t\t\tthis.name = name\n\t\t}\n\t}\n\n\tget color() {\n\t\tconst toHex = (num) => `00${num.toString(16)}`.slice(-2)\n\t\treturn `#${toHex(this.r)}${toHex(this.g)}${toHex(this.b)}`\n\t}\n\n}\n\n/\n Calculate the number of steps\n \n @param {number} steps The number of steps\n * @param {Array} ends The ends\n * @return {Array} Array containing the number of steps per color\n /\nfunction stepCalc(steps, ends) {\n\tconst step = new Array(3)\n\tstep[0] = (ends[1].r - ends[0].r) / steps\n\tstep[1] = (ends[1].g - ends[0].g) / steps\n\tstep[2] = (ends[1].b - ends[0].b) / steps\n\treturn step\n}\n\n/\n Create a color palette from two colors\n \n @param {number} steps The number of steps the palette has\n * @param {Color} color1 The first color\n * @param {Color} color2 The second color\n * @return {Array} The created palette array\n /\nfunction mixPalette(steps, color1, color2) {\n\tconst palette = []\n\tpalette.push(color1)\n\tconst step = stepCalc(steps, [color1, color2])\n\tfor (let i = 1; i < steps; i++) {\n\t\tconst r = Math.floor(color1.r + step[0] i)\n\t\tconst g = Math.floor(color1.g + step[1] * i)\n\t\tconst b = Math.floor(color1.b + step[2] * i)\n\t\tpalette.push(new Color(r, g, b))\n\t}\n\treturn palette\n}\n\n/*\n Like GenColor(4) but with labels\n /\nexport const defaultPalette = [\n\tnew Color(182, 70, 157, t('Purple')),\n\tnew Color(\n\t\t191, 103, 139,\n\t\tt('Rosy brown'), // TRANSLATORS: A color name for RGB(191, 103, 139)\n\t),\n\tnew Color(\n\t\t201, 136, 121,\n\t\tt('Feldspar'), // TRANSLATORS: A color name for RGB(201, 136, 121)\n\t),\n\tnew Color(\n\t\t211, 169, 103,\n\t\tt('Whiskey'), // TRANSLATORS: A color name for RGB(211, 169, 103)\n\t),\n\tnew Color(\n\t\t221, 203, 85,\n\t\tt('Gold'),\n\t),\n\tnew Color(\n\t\t165, 184, 114,\n\t\tt('Olivine'), // TRANSLATORS: A color name for RGB(165, 184, 114)\n\t),\n\tnew Color(\n\t\t110, 166, 143,\n\t\tt('Acapulco'), // TRANSLATORS: A color name for RGB(110, 166, 143)\n\t),\n\tnew Color(\n\t\t55, 148, 172,\n\t\tt('Boston Blue'), // TRANSLATORS: A color name for RGB(55, 148, 172)\n\t),\n\tnew Color(\n\t\t0, 130, 201,\n\t\tt('Nextcloud blue'),\n\t),\n\tnew Color(\n\t\t45, 115, 190,\n\t\tt('Mariner'), // TRANSLATORS: A color name for RGB(45, 115, 190)\n\t),\n\tnew Color(\n\t\t91, 100, 179,\n\t\tt('Blue Violet'), // TRANSLATORS: A color name for RGB(91, 100, 179)\n\t),\n\tnew Color(\n\t\t136, 85, 168,\n\t\tt('Deluge'), // TRANSLATORS: A color name for RGB(136, 85, 168)\n\t),\n]\n\n/\n Generate colors from the official nextcloud color\n * You can provide how many colors you want (multiplied by 3)\n * if step = 6\n * 3 colors * 6 will result in 18 generated colors\n \n @param {number} [steps] Number of steps to go from a color to another\n * @return {object[]}\n */\nexport function GenColors(steps) {\n\tif (!steps) {\n\t\tsteps = 6\n\t}\n\n\tif (steps === 4) {\n\t\treturn defaultPalette\n\t}\n\n\tconst red = new Color(182, 70, 157, t('Purple'))\n\tconst yellow = new Color(221, 203, 85, t('Gold'))\n\tconst blue = new Color(0, 130, 201, t('Nextcloud blue'))\n\n\tconst palette1 = mixPalette(steps, red, yellow)\n\tconst palette2 = mixPalette(steps, yellow, blue)\n\tconst palette3 = mixPalette(steps, blue, red)\n\n\treturn palette1.concat(palette2).concat(palette3)\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"GenColors-DNN63dHB.mjs","sources":["../../src/utils/GenColors.js"],"sourcesContent":["/*\n SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n /\n\nimport { t } from '../l10n.js'\n\nexport class Color {\n\n\t/\n\t @param {number} r The red value\n\t * @param {number} g The green value\n\t * @param {number} b The blue value\n\t * @param {string} [name] The name of the color\n\t /\n\tconstructor(r, g, b, name) {\n\t\tthis.r = r\n\t\tthis.g = g\n\t\tthis.b = b\n\t\tif (name) {\n\t\t\tthis.name = name\n\t\t}\n\t}\n\n\tget color() {\n\t\tconst toHex = (num) => `00${num.toString(16)}`.slice(-2)\n\t\treturn `#${toHex(this.r)}${toHex(this.g)}${toHex(this.b)}`\n\t}\n\n}\n\n/\n Calculate the number of steps\n \n @param {number} steps The number of steps\n * @param {Array} ends The ends\n * @return {Array} Array containing the number of steps per color\n /\nfunction stepCalc(steps, ends) {\n\tconst step = new Array(3)\n\tstep[0] = (ends[1].r - ends[0].r) / steps\n\tstep[1] = (ends[1].g - ends[0].g) / steps\n\tstep[2] = (ends[1].b - ends[0].b) / steps\n\treturn step\n}\n\n/\n Create a color palette from two colors\n \n @param {number} steps The number of steps the palette has\n * @param {Color} color1 The first color\n * @param {Color} color2 The second color\n * @return {Array} The created palette array\n /\nfunction mixPalette(steps, color1, color2) {\n\tconst palette = []\n\tpalette.push(color1)\n\tconst step = stepCalc(steps, [color1, color2])\n\tfor (let i = 1; i < steps; i++) {\n\t\tconst r = Math.floor(color1.r + step[0] i)\n\t\tconst g = Math.floor(color1.g + step[1] * i)\n\t\tconst b = Math.floor(color1.b + step[2] * i)\n\t\tpalette.push(new Color(r, g, b))\n\t}\n\treturn palette\n}\n\n/*\n Like GenColor(4) but with labels\n /\nexport const defaultPalette = [\n\tnew Color(182, 70, 157, t('Purple')),\n\tnew Color(\n\t\t191, 103, 139,\n\t\tt('Rosy brown'), // TRANSLATORS: A color name for RGB(191, 103, 139)\n\t),\n\tnew Color(\n\t\t201, 136, 121,\n\t\tt('Feldspar'), // TRANSLATORS: A color name for RGB(201, 136, 121)\n\t),\n\tnew Color(\n\t\t211, 169, 103,\n\t\tt('Whiskey'), // TRANSLATORS: A color name for RGB(211, 169, 103)\n\t),\n\tnew Color(\n\t\t221, 203, 85,\n\t\tt('Gold'),\n\t),\n\tnew Color(\n\t\t165, 184, 114,\n\t\tt('Olivine'), // TRANSLATORS: A color name for RGB(165, 184, 114)\n\t),\n\tnew Color(\n\t\t110, 166, 143,\n\t\tt('Acapulco'), // TRANSLATORS: A color name for RGB(110, 166, 143)\n\t),\n\tnew Color(\n\t\t55, 148, 172,\n\t\tt('Boston Blue'), // TRANSLATORS: A color name for RGB(55, 148, 172)\n\t),\n\tnew Color(\n\t\t0, 130, 201,\n\t\tt('Nextcloud blue'),\n\t),\n\tnew Color(\n\t\t45, 115, 190,\n\t\tt('Mariner'), // TRANSLATORS: A color name for RGB(45, 115, 190)\n\t),\n\tnew Color(\n\t\t91, 100, 179,\n\t\tt('Blue Violet'), // TRANSLATORS: A color name for RGB(91, 100, 179)\n\t),\n\tnew Color(\n\t\t136, 85, 168,\n\t\tt('Deluge'), // TRANSLATORS: A color name for RGB(136, 85, 168)\n\t),\n]\n\n/\n Generate colors from the official nextcloud color\n * You can provide how many colors you want (multiplied by 3)\n * if step = 6\n * 3 colors * 6 will result in 18 generated colors\n \n @param {number} [steps] Number of steps to go from a color to another\n * @return {object[]}\n */\nexport function GenColors(steps) {\n\tif (!steps) {\n\t\tsteps = 6\n\t}\n\n\tif (steps === 4) {\n\t\treturn defaultPalette\n\t}\n\n\tconst red = new Color(182, 70, 157, t('Purple'))\n\tconst yellow = new Color(221, 203, 85, t('Gold'))\n\tconst blue = new Color(0, 130, 201, t('Nextcloud blue'))\n\n\tconst palette1 = mixPalette(steps, red, yellow)\n\tconst palette2 = mixPalette(steps, yellow, blue)\n\tconst palette3 = mixPalette(steps, blue, red)\n\n\treturn palette1.concat(palette2).concat(palette3)\n}\n"],"names":[],"mappings":";;AAOO,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQlB,YAAY,GAAG,GAAG,GAAG,MAAM;AAC1B,SAAK,IAAI;AACT,SAAK,IAAI;AACT,SAAK,IAAI;AACT,QAAI,MAAM;AACT,WAAK,OAAO;AAAA,IACf;AAAA,EACA;AAAA,EAEC,IAAI,QAAQ;AACX,UAAM,QAAQ,CAAC,QAAQ,KAAK,IAAI,SAAS,EAAE,CAAC,GAAG,MAAM,EAAE;AACvD,WAAO,IAAI,MAAM,KAAK,CAAC,CAAC,GAAG,MAAM,KAAK,CAAC,CAAC,GAAG,MAAM,KAAK,CAAC,CAAC;AAAA,EAC1D;AAEA;AASA,SAAS,SAAS,OAAO,MAAM;AAC9B,QAAM,OAAO,IAAI,MAAM,CAAC;AACxB,OAAK,CAAC,KAAK,KAAK,CAAC,EAAE,IAAI,KAAK,CAAC,EAAE,KAAK;AACpC,OAAK,CAAC,KAAK,KAAK,CAAC,EAAE,IAAI,KAAK,CAAC,EAAE,KAAK;AACpC,OAAK,CAAC,KAAK,KAAK,CAAC,EAAE,IAAI,KAAK,CAAC,EAAE,KAAK;AACpC,SAAO;AACR;AAUA,SAAS,WAAW,OAAO,QAAQ,QAAQ;AAC1C,QAAM,UAAU,CAAA;AAChB,UAAQ,KAAK,MAAM;AACnB,QAAM,OAAO,SAAS,OAAO,CAAC,QAAQ,MAAM,CAAC;AAC7C,WAAS,IAAI,GAAG,IAAI,OAAO,KAAK;AAC/B,UAAM,IAAI,KAAK,MAAM,OAAO,IAAI,KAAK,CAAC,IAAI,CAAC;AAC3C,UAAM,IAAI,KAAK,MAAM,OAAO,IAAI,KAAK,CAAC,IAAI,CAAC;AAC3C,UAAM,IAAI,KAAK,MAAM,OAAO,IAAI,KAAK,CAAC,IAAI,CAAC;AAC3C,YAAQ,KAAK,IAAI,MAAM,GAAG,GAAG,CAAC,CAAC;AAAA,EACjC;AACC,SAAO;AACR;AAKY,MAAC,iBAAiB;AAAA,EAC7B,IAAI,MAAM,KAAK,IAAI,KAAK,EAAE,QAAQ,CAAC;AAAA,EACnC,IAAI;AAAA,IACH;AAAA,IAAK;AAAA,IAAK;AAAA,IACV,EAAE,YAAY;AAAA;AAAA,EACd;AAAA,EACD,IAAI;AAAA,IACH;AAAA,IAAK;AAAA,IAAK;AAAA,IACV,EAAE,UAAU;AAAA;AAAA,EACZ;AAAA,EACD,IAAI;AAAA,IACH;AAAA,IAAK;AAAA,IAAK;AAAA,IACV,EAAE,SAAS;AAAA;AAAA,EACX;AAAA,EACD,IAAI;AAAA,IACH;AAAA,IAAK;AAAA,IAAK;AAAA,IACV,EAAE,MAAM;AAAA,EACR;AAAA,EACD,IAAI;AAAA,IACH;AAAA,IAAK;AAAA,IAAK;AAAA,IACV,EAAE,SAAS;AAAA;AAAA,EACX;AAAA,EACD,IAAI;AAAA,IACH;AAAA,IAAK;AAAA,IAAK;AAAA,IACV,EAAE,UAAU;AAAA;AAAA,EACZ;AAAA,EACD,IAAI;AAAA,IACH;AAAA,IAAI;AAAA,IAAK;AAAA,IACT,EAAE,aAAa;AAAA;AAAA,EACf;AAAA,EACD,IAAI;AAAA,IACH;AAAA,IAAG;AAAA,IAAK;AAAA,IACR,EAAE,gBAAgB;AAAA,EAClB;AAAA,EACD,IAAI;AAAA,IACH;AAAA,IAAI;AAAA,IAAK;AAAA,IACT,EAAE,SAAS;AAAA;AAAA,EACX;AAAA,EACD,IAAI;AAAA,IACH;AAAA,IAAI;AAAA,IAAK;AAAA,IACT,EAAE,aAAa;AAAA;AAAA,EACf;AAAA,EACD,IAAI;AAAA,IACH;AAAA,IAAK;AAAA,IAAI;AAAA,IACT,EAAE,QAAQ;AAAA;AAAA,EACV;AACF;AAWO,SAAS,UAAU,OAAO;AAShC,QAAM,MAAM,IAAI,MAAM,KAAK,IAAI,KAAK,EAAE,QAAQ,CAAC;AAC/C,QAAM,SAAS,IAAI,MAAM,KAAK,KAAK,IAAI,EAAE,MAAM,CAAC;AAChD,QAAM,OAAO,IAAI,MAAM,GAAG,KAAK,KAAK,EAAE,gBAAgB,CAAC;AAEvD,QAAM,WAAW,WAAW,OAAO,KAAK,MAAM;AAC9C,QAAM,WAAW,WAAW,OAAO,QAAQ,IAAI;AAC/C,QAAM,WAAW,WAAW,OAAO,MAAM,GAAG;AAE5C,SAAO,SAAS,OAAO,QAAQ,EAAE,OAAO,QAAQ;AACjD;"}

package/dist/chunks/{NcActionButton-CD87AU6W.cjs → NcActionButton-2qh96K_i.cjs} RENAMED Viewed

@@ -1,6 +1,6 @@
-require('../assets/NcActionButton-CuV1ITDb.css');
+require('../assets/NcActionButton-D8Lyueq3.css');
 "use strict";
-const mdi = require("./mdi-YVKlPhQN.cjs");
+const mdi = require("./mdi-BqDPfc6J.cjs");
 const actionText = require("./actionText-BcrK4uH1.cjs");
 const NcIconSvgWrapper = require("./NcIconSvgWrapper-CrnN5Sq5.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
@@ -174,8 +174,8 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "02eeec54"
+  "102cfc0a"
 );
 const NcActionButton = __component__.exports;
 exports.NcActionButton = NcActionButton;
-//# sourceMappingURL=NcActionButton-CD87AU6W.cjs.map
+//# sourceMappingURL=NcActionButton-2qh96K_i.cjs.map

package/dist/chunks/{NcActionButton-CD87AU6W.cjs.map → NcActionButton-2qh96K_i.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcActionButton-CD87AU6W.cjs","sources":["../../src/components/NcActionButton/NcActionButton.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots.\n\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionButton @click=\"showMessage('Delete')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDelete\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :close-after-click=\"true\" @click=\"showMessage('Delete and close menu')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDelete and close\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :is-menu=\"true\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Plus :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tCreate\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :disabled=\"true\" @click=\"showMessage('Disabled')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDisabled button\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport Delete from 'vue-material-design-icons/Delete.vue'\n\timport Plus from 'vue-material-design-icons/Plus.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tDelete,\n\t\t\tPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n```\n\nIf you're using a long text, you can specify a `name` prop.\n\nFor the same purpose, but in a more compact way, `description` prop can be used.\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\t<NcActionButton description=\"Subline description for the button\" @click=\"showMessage('Edit')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tEdit\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport Delete from 'vue-material-design-icons/Delete.vue'\n\timport Pencil from 'vue-material-design-icons/Pencil.vue'\n\timport Plus from 'vue-material-design-icons/Plus.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tDelete,\n\t\t\tPencil,\n\t\t\tPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n\n```\n\nAction icon attribute with a single action\n\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionButton @click=\"showMessage('Add')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Plus :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tAdd new\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport Plus from 'vue-material-design-icons/Plus.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n\n```\n\nYou can also use a custom icon, for example from the vue-material-design-icons library:\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<HandBackLeft :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise left hand\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<HandBackRight :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise right hand\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'\nimport HandBackRight from 'vue-material-design-icons/HandBackRight.vue'\n\nexport default {\n\tcomponents: {\n\t\tHandBackLeft,\n\t\tHandBackRight,\n\t},\n}\n</script>\n```\n\n### With different model behavior\nBy default the button will act like a normal button, but it is also possible to change the behavior to a toggle button, checkbox button or radio button.\n\nFor example to have the button act like a toggle button just set the `modelValue` property to the toggle state:\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton :model-value.sync=\"fullscreen\">\n\t\t\t<template #icon>\n\t\t\t\t<Fullscreen :size=\"20\" />\n\t\t\t</template>\n\t\t\tFullscreen\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport Fullscreen from 'vue-material-design-icons/Fullscreen.vue'\n\nexport default {\n\tcomponents: {\n\t\tFullscreen,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tfullscreen: true,\n\t\t}\n\t},\n}\n</script>\n```\n\nAnother example would be using it with checkbox semantics, to enable or disable features.\nThis also allows tri-state behavior (`true`, `false`, `null`) in which case `aria-checked` will be either `true`, `false` or `mixed`.\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton :model-value.sync=\"handRaised\" type=\"checkbox\">\n\t\t\t<template #icon>\n\t\t\t\t<HandBackLeft :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise hand\n\t\t</NcActionButton>\n\t\t<NcActionButton :model-value.sync=\"fullscreen\" type=\"checkbox\">\n\t\t\t<template #icon>\n\t\t\t\t<Fullscreen :size=\"20\" />\n\t\t\t</template>\n\t\t\tFullscreen\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'\nimport Fullscreen from 'vue-material-design-icons/Fullscreen.vue'\n\nexport default {\n\tcomponents: {\n\t\tHandBackLeft,\n\t\tFullscreen,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tfullscreen: true,\n\t\t\thandRaised: false,\n\t\t}\n\t},\n}\n</script>\n```\n\nIt is also possible to use the button with radio semantics, this is only possible in menus and not for inline actions!\n\nWith a string `modelValue`, checked state is determined by the `value` property and updates `modelValue` with the new `value` string.\n\nWith a boolean `modelValue`, checked state is determined by `modelValue` and updates to `true` on check.\n\nNote: unlike native radio buttons, `NcActionButton` are not grouped by name, so you need to connect them by bind correct `modelValue``.\n\n```vue\n<template>\n\t<div>\n\t\t<NcActions>\n\t\t\t<NcActionButton :model-value.sync=\"payment\" type=\"radio\" value=\"cash\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cash :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPay with cash\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :model-value.sync=\"payment\" type=\"radio\" value=\"card\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<CreditCard :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPay by card\n\t\t\t</NcActionButton>\n\t\t\t<NcActionSeparator />\n\t\t\t<NcActionButton type=\"radio\" :model-value=\"align.isLeft\" @update:modelValue=\"setAlign('Left', $event)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<FormatAlignLeft :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tLeft\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton type=\"radio\" :model-value=\"align.isCenter\" @update:modelValue=\"setAlign('Center', $event)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<FormatAlignCenter :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tCenter\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton type=\"radio\" :model-value=\"align.isRight\" @update:modelValue=\"setAlign('Right', $event)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<FormatAlignRight :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tRight\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t\t<p>payment = \"{{ payment }}\"</p>\n\t\t<p>align.isLeft = {{ align.isLeft }}</p>\n\t\t<p>align.isCenter = {{ align.isCenter }}</p>\n\t\t<p>align.isRight = {{ align.isRight }}</p>\n\t</div>\n</template>\n<script>\nimport Cash from 'vue-material-design-icons/Cash.vue'\nimport CreditCard from 'vue-material-design-icons/CreditCard.vue'\nimport FormatAlignLeft from 'vue-material-design-icons/FormatAlignLeft.vue'\nimport FormatAlignCenter from 'vue-material-design-icons/FormatAlignCenter.vue'\nimport FormatAlignRight from 'vue-material-design-icons/FormatAlignRight.vue'\n\nexport default {\n\tcomponents: {\n\t\tCash,\n\t\tCreditCard,\n\t\tFormatAlignLeft,\n\t\tFormatAlignCenter,\n\t\tFormatAlignRight,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tpayment: 'card',\n\t\t\talign: {\n\t\t\t\tisLeft: false,\n\t\t\t\tisCenter: true,\n\t\t\t\tisRight: false,\n\t\t\t},\n\t\t}\n\t},\n\tmethods: {\n\t\tsetAlign(direction, value) {\n\t\t\tthis.align.isLeft = false\n\t\t\tthis.align.isCenter = false\n\t\t\tthis.align.isRight = false\n\t\t\tthis.align[`is${direction}`] = value\n\t\t},\n\t}\n}\n</script>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" :class=\"{ 'action--disabled': disabled }\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t<button :aria-label=\"ariaLabel\"\n\t\t\t:class=\"['action-button button-vue', {\n\t\t\t\t'action-button--active': isChecked,\n\t\t\t\tfocusable: isFocusable,\n\t\t\t}]\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:title=\"title\"\n\t\t\t:type=\"nativeType\"\n\t\t\tv-bind=\"buttonAttributes\"\n\t\t\t@click=\"handleClick\">\n\t\t\t<!-- @slot Manually provide icon -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<span :class=\"[isIconUrl ? 'action-button__icon--url' : icon]\"\n\t\t\t\t\t:style=\"{ backgroundImage: isIconUrl ? `url(${icon})` : null }\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclass=\"action-button__icon\" />\n\t\t\t</slot>\n\n\t\t\t<!-- long text with name -->\n\t\t\t<span class=\"action-button__longtext-wrapper\">\n\t\t\t\t<strong v-if=\"name\"\n\t\t\t\t\tclass=\"action-button__name\">\n\t\t\t\t\t{{ name }}\n\t\t\t\t</strong>\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 v-if=\"isLongText\"\n\t\t\t\t\tclass=\"action-button__longtext\"\n\t\t\t\t\tv-text=\"text\" />\n\t\t\t\t<!-- default text display -->\n\t\t\t\t<span v-else\n\t\t\t\t\tclass=\"action-button__text\">\n\t\t\t\t\t{{ text }}\n\t\t\t\t</span>\n\t\t\t\t<span v-if=\"description\"\n\t\t\t\t\tclass=\"action-button__description\"\n\t\t\t\t\tv-text=\"description\" />\n\t\t\t</span>\n\n\t\t\t<!-- right(in LTR) or left(in RTL) arrow icon when there is a sub-menu -->\n\t\t\t<NcIconSvgWrapper v-if=\"isMenu\"\n\t\t\t\tclass=\"action-button__menu-icon\"\n\t\t\t\tdirectional\n\t\t\t\t:path=\"mdiChevronRight\" />\n\t\t\t<NcIconSvgWrapper v-else-if=\"isChecked\" :path=\"mdiCheck\" class=\"action-button__pressed-icon\" />\n\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 { mdiCheck, mdiChevronRight } from '@mdi/js'\nimport ActionTextMixin from '../../mixins/actionText.js'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\n\n/*\n Button component to be used in Actions\n /\nexport default {\n\tname: 'NcActionButton',\n\n\tcomponents: {\n\t\tNcIconSvgWrapper,\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\n\t\t/\n\t\t Small underlying text content of the entry\n\t\t /\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\tsetup() {\n\t\treturn {\n\t\t\tmdiCheck,\n\t\t\tmdiChevronRight,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/\n\t\t determines if the action is focusable\n\t\t \n\t\t @return {boolean} is the action focusable ?\n\t\t /\n\t\tisFocusable() {\n\t\t\treturn !this.disabled\n\t\t},\n\n\t\t/\n\t\t The current \"checked\" or \"pressed\" state for the model behavior\n\t\t /\n\t\tisChecked() {\n\t\t\tif (this.type === 'radio' && typeof this.modelValue !== 'boolean') {\n\t\t\t\treturn this.modelValue === this.value\n\t\t\t}\n\t\t\treturn this.modelValue\n\t\t},\n\n\t\t/\n\t\t The native HTML type to set on the button\n\t\t /\n\t\tnativeType() {\n\t\t\tif (this.type === 'submit' \|\| this.type === 'reset') {\n\t\t\t\treturn this.type\n\t\t\t}\n\t\t\treturn 'button'\n\t\t},\n\n\t\t/\n\t\t HTML attributes to bind to the <button>\n\t\t /\n\t\tbuttonAttributes() {\n\t\t\tconst attributes = {}\n\n\t\t\tif (this.isInSemanticMenu) {\n\t\t\t\t// By default it needs to be a menu item in semantic menus\n\t\t\t\tattributes.role = 'menuitem'\n\n\t\t\t\tif (this.type === 'radio') {\n\t\t\t\t\tattributes.role = 'menuitemradio'\n\t\t\t\t\tattributes['aria-checked'] = this.isChecked ? 'true' : 'false'\n\t\t\t\t} else if (this.type === 'checkbox' \|\| (this.nativeType === 'button' && this.modelValue !== null)) {\n\t\t\t\t\t// either if checkbox behavior was set or the model value is not unset\n\t\t\t\t\tattributes.role = 'menuitemcheckbox'\n\t\t\t\t\tattributes['aria-checked'] = this.modelValue === null ? 'mixed' : (this.modelValue ? 'true' : 'false')\n\t\t\t\t}\n\t\t\t} else if (this.modelValue !== null && this.nativeType === 'button') {\n\t\t\t\t// In case this has a modelValue it is considered a toggle button, so we need to set the aria-pressed\n\t\t\t\tattributes['aria-pressed'] = this.modelValue ? 'true' : 'false'\n\t\t\t}\n\n\t\t\treturn attributes\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/\n\t\t Forward click event, let mixin handle the close-after-click and emit new modelValue if needed\n\t\t * @param {MouseEvent} event The click event\n\t\t /\n\t\thandleClick(event) {\n\t\t\tthis.onClick(event)\n\t\t\t// If modelValue or type is set (so modelValue might be null for tri-state) we need to update it\n\t\t\tif (this.modelValue !== null \|\| this.type !== 'button') {\n\t\t\t\tif (this.type === 'radio') {\n\t\t\t\t\tif (typeof this.modelValue !== 'boolean') {\n\t\t\t\t\t\t// String-value radios behavior is similar to native - click on checked radio does nothing\n\t\t\t\t\t\tif (!this.isChecked) {\n\t\t\t\t\t\t\tthis.$emit('update:modelValue', this.value)\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// Boolean radio allows to uncheck\n\t\t\t\t\t\tthis.$emit('update:modelValue', !this.isChecked)\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\t// Checkbox toggles value\n\t\t\t\t\tthis.$emit('update:modelValue', !this.isChecked)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@import '../../assets/action';\n@include action-active;\n@include action--disabled;\n@include action-item('button');\n\n.action-button__pressed-icon {\n\tmargin-inline: auto calc($icon-margin -1);\n}\n</style>\n"],"names":["NcIconSvgWrapper","ActionTextMixin","mdiCheck","mdiChevronRight"],"mappings":"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"}
1	+ {"version":3,"file":"NcActionButton-2qh96K_i.cjs","sources":["../../src/components/NcActionButton/NcActionButton.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots.\n\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionButton @click=\"showMessage('Delete')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDelete\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :close-after-click=\"true\" @click=\"showMessage('Delete and close menu')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDelete and close\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :is-menu=\"true\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Plus :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tCreate\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :disabled=\"true\" @click=\"showMessage('Disabled')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDisabled button\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport Delete from 'vue-material-design-icons/Delete.vue'\n\timport Plus from 'vue-material-design-icons/Plus.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tDelete,\n\t\t\tPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n```\n\nIf you're using a long text, you can specify a `name` prop.\n\nFor the same purpose, but in a more compact way, `description` prop can be used.\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\t<NcActionButton description=\"Subline description for the button\" @click=\"showMessage('Edit')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tEdit\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport Delete from 'vue-material-design-icons/Delete.vue'\n\timport Pencil from 'vue-material-design-icons/Pencil.vue'\n\timport Plus from 'vue-material-design-icons/Plus.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tDelete,\n\t\t\tPencil,\n\t\t\tPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n\n```\n\nAction icon attribute with a single action\n\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionButton @click=\"showMessage('Add')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Plus :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tAdd new\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport Plus from 'vue-material-design-icons/Plus.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n\n```\n\nYou can also use a custom icon, for example from the vue-material-design-icons library:\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<HandBackLeft :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise left hand\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<HandBackRight :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise right hand\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'\nimport HandBackRight from 'vue-material-design-icons/HandBackRight.vue'\n\nexport default {\n\tcomponents: {\n\t\tHandBackLeft,\n\t\tHandBackRight,\n\t},\n}\n</script>\n```\n\n### With different model behavior\nBy default the button will act like a normal button, but it is also possible to change the behavior to a toggle button, checkbox button or radio button.\n\nFor example to have the button act like a toggle button just set the `modelValue` property to the toggle state:\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton :model-value.sync=\"fullscreen\">\n\t\t\t<template #icon>\n\t\t\t\t<Fullscreen :size=\"20\" />\n\t\t\t</template>\n\t\t\tFullscreen\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport Fullscreen from 'vue-material-design-icons/Fullscreen.vue'\n\nexport default {\n\tcomponents: {\n\t\tFullscreen,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tfullscreen: true,\n\t\t}\n\t},\n}\n</script>\n```\n\nAnother example would be using it with checkbox semantics, to enable or disable features.\nThis also allows tri-state behavior (`true`, `false`, `null`) in which case `aria-checked` will be either `true`, `false` or `mixed`.\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton :model-value.sync=\"handRaised\" type=\"checkbox\">\n\t\t\t<template #icon>\n\t\t\t\t<HandBackLeft :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise hand\n\t\t</NcActionButton>\n\t\t<NcActionButton :model-value.sync=\"fullscreen\" type=\"checkbox\">\n\t\t\t<template #icon>\n\t\t\t\t<Fullscreen :size=\"20\" />\n\t\t\t</template>\n\t\t\tFullscreen\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'\nimport Fullscreen from 'vue-material-design-icons/Fullscreen.vue'\n\nexport default {\n\tcomponents: {\n\t\tHandBackLeft,\n\t\tFullscreen,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tfullscreen: true,\n\t\t\thandRaised: false,\n\t\t}\n\t},\n}\n</script>\n```\n\nIt is also possible to use the button with radio semantics, this is only possible in menus and not for inline actions!\n\nWith a string `modelValue`, checked state is determined by the `value` property and updates `modelValue` with the new `value` string.\n\nWith a boolean `modelValue`, checked state is determined by `modelValue` and updates to `true` on check.\n\nNote: unlike native radio buttons, `NcActionButton` are not grouped by name, so you need to connect them by bind correct `modelValue``.\n\n```vue\n<template>\n\t<div>\n\t\t<NcActions>\n\t\t\t<NcActionButton :model-value.sync=\"payment\" type=\"radio\" value=\"cash\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cash :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPay with cash\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :model-value.sync=\"payment\" type=\"radio\" value=\"card\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<CreditCard :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPay by card\n\t\t\t</NcActionButton>\n\t\t\t<NcActionSeparator />\n\t\t\t<NcActionButton type=\"radio\" :model-value=\"align.isLeft\" @update:modelValue=\"setAlign('Left', $event)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<FormatAlignLeft :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tLeft\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton type=\"radio\" :model-value=\"align.isCenter\" @update:modelValue=\"setAlign('Center', $event)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<FormatAlignCenter :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tCenter\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton type=\"radio\" :model-value=\"align.isRight\" @update:modelValue=\"setAlign('Right', $event)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<FormatAlignRight :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tRight\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t\t<p>payment = \"{{ payment }}\"</p>\n\t\t<p>align.isLeft = {{ align.isLeft }}</p>\n\t\t<p>align.isCenter = {{ align.isCenter }}</p>\n\t\t<p>align.isRight = {{ align.isRight }}</p>\n\t</div>\n</template>\n<script>\nimport Cash from 'vue-material-design-icons/Cash.vue'\nimport CreditCard from 'vue-material-design-icons/CreditCard.vue'\nimport FormatAlignLeft from 'vue-material-design-icons/FormatAlignLeft.vue'\nimport FormatAlignCenter from 'vue-material-design-icons/FormatAlignCenter.vue'\nimport FormatAlignRight from 'vue-material-design-icons/FormatAlignRight.vue'\n\nexport default {\n\tcomponents: {\n\t\tCash,\n\t\tCreditCard,\n\t\tFormatAlignLeft,\n\t\tFormatAlignCenter,\n\t\tFormatAlignRight,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tpayment: 'card',\n\t\t\talign: {\n\t\t\t\tisLeft: false,\n\t\t\t\tisCenter: true,\n\t\t\t\tisRight: false,\n\t\t\t},\n\t\t}\n\t},\n\tmethods: {\n\t\tsetAlign(direction, value) {\n\t\t\tthis.align.isLeft = false\n\t\t\tthis.align.isCenter = false\n\t\t\tthis.align.isRight = false\n\t\t\tthis.align[`is${direction}`] = value\n\t\t},\n\t}\n}\n</script>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" :class=\"{ 'action--disabled': disabled }\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t<button :aria-label=\"ariaLabel\"\n\t\t\t:class=\"['action-button button-vue', {\n\t\t\t\t'action-button--active': isChecked,\n\t\t\t\tfocusable: isFocusable,\n\t\t\t}]\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:title=\"title\"\n\t\t\t:type=\"nativeType\"\n\t\t\tv-bind=\"buttonAttributes\"\n\t\t\t@click=\"handleClick\">\n\t\t\t<!-- @slot Manually provide icon -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<span :class=\"[isIconUrl ? 'action-button__icon--url' : icon]\"\n\t\t\t\t\t:style=\"{ backgroundImage: isIconUrl ? `url(${icon})` : null }\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclass=\"action-button__icon\" />\n\t\t\t</slot>\n\n\t\t\t<!-- long text with name -->\n\t\t\t<span class=\"action-button__longtext-wrapper\">\n\t\t\t\t<strong v-if=\"name\"\n\t\t\t\t\tclass=\"action-button__name\">\n\t\t\t\t\t{{ name }}\n\t\t\t\t</strong>\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 v-if=\"isLongText\"\n\t\t\t\t\tclass=\"action-button__longtext\"\n\t\t\t\t\tv-text=\"text\" />\n\t\t\t\t<!-- default text display -->\n\t\t\t\t<span v-else\n\t\t\t\t\tclass=\"action-button__text\">\n\t\t\t\t\t{{ text }}\n\t\t\t\t</span>\n\t\t\t\t<span v-if=\"description\"\n\t\t\t\t\tclass=\"action-button__description\"\n\t\t\t\t\tv-text=\"description\" />\n\t\t\t</span>\n\n\t\t\t<!-- right(in LTR) or left(in RTL) arrow icon when there is a sub-menu -->\n\t\t\t<NcIconSvgWrapper v-if=\"isMenu\"\n\t\t\t\tclass=\"action-button__menu-icon\"\n\t\t\t\tdirectional\n\t\t\t\t:path=\"mdiChevronRight\" />\n\t\t\t<NcIconSvgWrapper v-else-if=\"isChecked\" :path=\"mdiCheck\" class=\"action-button__pressed-icon\" />\n\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 { mdiCheck, mdiChevronRight } from '@mdi/js'\nimport ActionTextMixin from '../../mixins/actionText.js'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\n\n/*\n Button component to be used in Actions\n /\nexport default {\n\tname: 'NcActionButton',\n\n\tcomponents: {\n\t\tNcIconSvgWrapper,\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\n\t\t/\n\t\t Small underlying text content of the entry\n\t\t /\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\tsetup() {\n\t\treturn {\n\t\t\tmdiCheck,\n\t\t\tmdiChevronRight,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/\n\t\t determines if the action is focusable\n\t\t \n\t\t @return {boolean} is the action focusable ?\n\t\t /\n\t\tisFocusable() {\n\t\t\treturn !this.disabled\n\t\t},\n\n\t\t/\n\t\t The current \"checked\" or \"pressed\" state for the model behavior\n\t\t /\n\t\tisChecked() {\n\t\t\tif (this.type === 'radio' && typeof this.modelValue !== 'boolean') {\n\t\t\t\treturn this.modelValue === this.value\n\t\t\t}\n\t\t\treturn this.modelValue\n\t\t},\n\n\t\t/\n\t\t The native HTML type to set on the button\n\t\t /\n\t\tnativeType() {\n\t\t\tif (this.type === 'submit' \|\| this.type === 'reset') {\n\t\t\t\treturn this.type\n\t\t\t}\n\t\t\treturn 'button'\n\t\t},\n\n\t\t/\n\t\t HTML attributes to bind to the <button>\n\t\t /\n\t\tbuttonAttributes() {\n\t\t\tconst attributes = {}\n\n\t\t\tif (this.isInSemanticMenu) {\n\t\t\t\t// By default it needs to be a menu item in semantic menus\n\t\t\t\tattributes.role = 'menuitem'\n\n\t\t\t\tif (this.type === 'radio') {\n\t\t\t\t\tattributes.role = 'menuitemradio'\n\t\t\t\t\tattributes['aria-checked'] = this.isChecked ? 'true' : 'false'\n\t\t\t\t} else if (this.type === 'checkbox' \|\| (this.nativeType === 'button' && this.modelValue !== null)) {\n\t\t\t\t\t// either if checkbox behavior was set or the model value is not unset\n\t\t\t\t\tattributes.role = 'menuitemcheckbox'\n\t\t\t\t\tattributes['aria-checked'] = this.modelValue === null ? 'mixed' : (this.modelValue ? 'true' : 'false')\n\t\t\t\t}\n\t\t\t} else if (this.modelValue !== null && this.nativeType === 'button') {\n\t\t\t\t// In case this has a modelValue it is considered a toggle button, so we need to set the aria-pressed\n\t\t\t\tattributes['aria-pressed'] = this.modelValue ? 'true' : 'false'\n\t\t\t}\n\n\t\t\treturn attributes\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/\n\t\t Forward click event, let mixin handle the close-after-click and emit new modelValue if needed\n\t\t * @param {MouseEvent} event The click event\n\t\t /\n\t\thandleClick(event) {\n\t\t\tthis.onClick(event)\n\t\t\t// If modelValue or type is set (so modelValue might be null for tri-state) we need to update it\n\t\t\tif (this.modelValue !== null \|\| this.type !== 'button') {\n\t\t\t\tif (this.type === 'radio') {\n\t\t\t\t\tif (typeof this.modelValue !== 'boolean') {\n\t\t\t\t\t\t// String-value radios behavior is similar to native - click on checked radio does nothing\n\t\t\t\t\t\tif (!this.isChecked) {\n\t\t\t\t\t\t\tthis.$emit('update:modelValue', this.value)\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// Boolean radio allows to uncheck\n\t\t\t\t\t\tthis.$emit('update:modelValue', !this.isChecked)\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\t// Checkbox toggles value\n\t\t\t\t\tthis.$emit('update:modelValue', !this.isChecked)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@import '../../assets/action';\n@include action-active;\n@include action--disabled;\n@include action-item('button');\n\n.action-button {\n\t&__pressed-icon {\n\t\tmargin-inline: auto calc($icon-margin -1);\n\t}\n\n\t* {\n\t\tcursor: pointer;\n\t}\n}\n</style>\n"],"names":["NcIconSvgWrapper","ActionTextMixin","mdiCheck","mdiChevronRight"],"mappings":"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"}

package/dist/chunks/{NcActionButton-CuVNJJtW.mjs → NcActionButton-CHrE7amZ.mjs} RENAMED Viewed

@@ -1,5 +1,5 @@
-import '../assets/NcActionButton-CuV1ITDb.css';
-import { m as mdiChevronRight, a as mdiCheck } from "./mdi-VRLMiqbd.mjs";
+import '../assets/NcActionButton-D8Lyueq3.css';
+import { m as mdiChevronRight, a as mdiCheck } from "./mdi-vLkDaZ9y.mjs";
 import { A as ActionTextMixin } from "./actionText-fFcUPi2g.mjs";
 import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-Cb-cPj1R.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
@@ -173,10 +173,10 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "02eeec54"
+  "102cfc0a"
 );
 const NcActionButton = __component__.exports;
 export {
   NcActionButton as N
 };
-//# sourceMappingURL=NcActionButton-CuVNJJtW.mjs.map
+//# sourceMappingURL=NcActionButton-CHrE7amZ.mjs.map

package/dist/chunks/{NcActionButton-CuVNJJtW.mjs.map → NcActionButton-CHrE7amZ.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcActionButton-CuVNJJtW.mjs","sources":["../../src/components/NcActionButton/NcActionButton.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots.\n\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionButton @click=\"showMessage('Delete')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDelete\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :close-after-click=\"true\" @click=\"showMessage('Delete and close menu')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDelete and close\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :is-menu=\"true\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Plus :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tCreate\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :disabled=\"true\" @click=\"showMessage('Disabled')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDisabled button\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport Delete from 'vue-material-design-icons/Delete.vue'\n\timport Plus from 'vue-material-design-icons/Plus.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tDelete,\n\t\t\tPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n```\n\nIf you're using a long text, you can specify a `name` prop.\n\nFor the same purpose, but in a more compact way, `description` prop can be used.\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\t<NcActionButton description=\"Subline description for the button\" @click=\"showMessage('Edit')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tEdit\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport Delete from 'vue-material-design-icons/Delete.vue'\n\timport Pencil from 'vue-material-design-icons/Pencil.vue'\n\timport Plus from 'vue-material-design-icons/Plus.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tDelete,\n\t\t\tPencil,\n\t\t\tPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n\n```\n\nAction icon attribute with a single action\n\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionButton @click=\"showMessage('Add')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Plus :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tAdd new\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport Plus from 'vue-material-design-icons/Plus.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n\n```\n\nYou can also use a custom icon, for example from the vue-material-design-icons library:\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<HandBackLeft :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise left hand\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<HandBackRight :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise right hand\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'\nimport HandBackRight from 'vue-material-design-icons/HandBackRight.vue'\n\nexport default {\n\tcomponents: {\n\t\tHandBackLeft,\n\t\tHandBackRight,\n\t},\n}\n</script>\n```\n\n### With different model behavior\nBy default the button will act like a normal button, but it is also possible to change the behavior to a toggle button, checkbox button or radio button.\n\nFor example to have the button act like a toggle button just set the `modelValue` property to the toggle state:\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton :model-value.sync=\"fullscreen\">\n\t\t\t<template #icon>\n\t\t\t\t<Fullscreen :size=\"20\" />\n\t\t\t</template>\n\t\t\tFullscreen\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport Fullscreen from 'vue-material-design-icons/Fullscreen.vue'\n\nexport default {\n\tcomponents: {\n\t\tFullscreen,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tfullscreen: true,\n\t\t}\n\t},\n}\n</script>\n```\n\nAnother example would be using it with checkbox semantics, to enable or disable features.\nThis also allows tri-state behavior (`true`, `false`, `null`) in which case `aria-checked` will be either `true`, `false` or `mixed`.\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton :model-value.sync=\"handRaised\" type=\"checkbox\">\n\t\t\t<template #icon>\n\t\t\t\t<HandBackLeft :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise hand\n\t\t</NcActionButton>\n\t\t<NcActionButton :model-value.sync=\"fullscreen\" type=\"checkbox\">\n\t\t\t<template #icon>\n\t\t\t\t<Fullscreen :size=\"20\" />\n\t\t\t</template>\n\t\t\tFullscreen\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'\nimport Fullscreen from 'vue-material-design-icons/Fullscreen.vue'\n\nexport default {\n\tcomponents: {\n\t\tHandBackLeft,\n\t\tFullscreen,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tfullscreen: true,\n\t\t\thandRaised: false,\n\t\t}\n\t},\n}\n</script>\n```\n\nIt is also possible to use the button with radio semantics, this is only possible in menus and not for inline actions!\n\nWith a string `modelValue`, checked state is determined by the `value` property and updates `modelValue` with the new `value` string.\n\nWith a boolean `modelValue`, checked state is determined by `modelValue` and updates to `true` on check.\n\nNote: unlike native radio buttons, `NcActionButton` are not grouped by name, so you need to connect them by bind correct `modelValue``.\n\n```vue\n<template>\n\t<div>\n\t\t<NcActions>\n\t\t\t<NcActionButton :model-value.sync=\"payment\" type=\"radio\" value=\"cash\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cash :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPay with cash\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :model-value.sync=\"payment\" type=\"radio\" value=\"card\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<CreditCard :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPay by card\n\t\t\t</NcActionButton>\n\t\t\t<NcActionSeparator />\n\t\t\t<NcActionButton type=\"radio\" :model-value=\"align.isLeft\" @update:modelValue=\"setAlign('Left', $event)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<FormatAlignLeft :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tLeft\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton type=\"radio\" :model-value=\"align.isCenter\" @update:modelValue=\"setAlign('Center', $event)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<FormatAlignCenter :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tCenter\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton type=\"radio\" :model-value=\"align.isRight\" @update:modelValue=\"setAlign('Right', $event)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<FormatAlignRight :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tRight\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t\t<p>payment = \"{{ payment }}\"</p>\n\t\t<p>align.isLeft = {{ align.isLeft }}</p>\n\t\t<p>align.isCenter = {{ align.isCenter }}</p>\n\t\t<p>align.isRight = {{ align.isRight }}</p>\n\t</div>\n</template>\n<script>\nimport Cash from 'vue-material-design-icons/Cash.vue'\nimport CreditCard from 'vue-material-design-icons/CreditCard.vue'\nimport FormatAlignLeft from 'vue-material-design-icons/FormatAlignLeft.vue'\nimport FormatAlignCenter from 'vue-material-design-icons/FormatAlignCenter.vue'\nimport FormatAlignRight from 'vue-material-design-icons/FormatAlignRight.vue'\n\nexport default {\n\tcomponents: {\n\t\tCash,\n\t\tCreditCard,\n\t\tFormatAlignLeft,\n\t\tFormatAlignCenter,\n\t\tFormatAlignRight,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tpayment: 'card',\n\t\t\talign: {\n\t\t\t\tisLeft: false,\n\t\t\t\tisCenter: true,\n\t\t\t\tisRight: false,\n\t\t\t},\n\t\t}\n\t},\n\tmethods: {\n\t\tsetAlign(direction, value) {\n\t\t\tthis.align.isLeft = false\n\t\t\tthis.align.isCenter = false\n\t\t\tthis.align.isRight = false\n\t\t\tthis.align[`is${direction}`] = value\n\t\t},\n\t}\n}\n</script>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" :class=\"{ 'action--disabled': disabled }\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t<button :aria-label=\"ariaLabel\"\n\t\t\t:class=\"['action-button button-vue', {\n\t\t\t\t'action-button--active': isChecked,\n\t\t\t\tfocusable: isFocusable,\n\t\t\t}]\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:title=\"title\"\n\t\t\t:type=\"nativeType\"\n\t\t\tv-bind=\"buttonAttributes\"\n\t\t\t@click=\"handleClick\">\n\t\t\t<!-- @slot Manually provide icon -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<span :class=\"[isIconUrl ? 'action-button__icon--url' : icon]\"\n\t\t\t\t\t:style=\"{ backgroundImage: isIconUrl ? `url(${icon})` : null }\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclass=\"action-button__icon\" />\n\t\t\t</slot>\n\n\t\t\t<!-- long text with name -->\n\t\t\t<span class=\"action-button__longtext-wrapper\">\n\t\t\t\t<strong v-if=\"name\"\n\t\t\t\t\tclass=\"action-button__name\">\n\t\t\t\t\t{{ name }}\n\t\t\t\t</strong>\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 v-if=\"isLongText\"\n\t\t\t\t\tclass=\"action-button__longtext\"\n\t\t\t\t\tv-text=\"text\" />\n\t\t\t\t<!-- default text display -->\n\t\t\t\t<span v-else\n\t\t\t\t\tclass=\"action-button__text\">\n\t\t\t\t\t{{ text }}\n\t\t\t\t</span>\n\t\t\t\t<span v-if=\"description\"\n\t\t\t\t\tclass=\"action-button__description\"\n\t\t\t\t\tv-text=\"description\" />\n\t\t\t</span>\n\n\t\t\t<!-- right(in LTR) or left(in RTL) arrow icon when there is a sub-menu -->\n\t\t\t<NcIconSvgWrapper v-if=\"isMenu\"\n\t\t\t\tclass=\"action-button__menu-icon\"\n\t\t\t\tdirectional\n\t\t\t\t:path=\"mdiChevronRight\" />\n\t\t\t<NcIconSvgWrapper v-else-if=\"isChecked\" :path=\"mdiCheck\" class=\"action-button__pressed-icon\" />\n\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 { mdiCheck, mdiChevronRight } from '@mdi/js'\nimport ActionTextMixin from '../../mixins/actionText.js'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\n\n/*\n Button component to be used in Actions\n /\nexport default {\n\tname: 'NcActionButton',\n\n\tcomponents: {\n\t\tNcIconSvgWrapper,\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\n\t\t/\n\t\t Small underlying text content of the entry\n\t\t /\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\tsetup() {\n\t\treturn {\n\t\t\tmdiCheck,\n\t\t\tmdiChevronRight,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/\n\t\t determines if the action is focusable\n\t\t \n\t\t @return {boolean} is the action focusable ?\n\t\t /\n\t\tisFocusable() {\n\t\t\treturn !this.disabled\n\t\t},\n\n\t\t/\n\t\t The current \"checked\" or \"pressed\" state for the model behavior\n\t\t /\n\t\tisChecked() {\n\t\t\tif (this.type === 'radio' && typeof this.modelValue !== 'boolean') {\n\t\t\t\treturn this.modelValue === this.value\n\t\t\t}\n\t\t\treturn this.modelValue\n\t\t},\n\n\t\t/\n\t\t The native HTML type to set on the button\n\t\t /\n\t\tnativeType() {\n\t\t\tif (this.type === 'submit' \|\| this.type === 'reset') {\n\t\t\t\treturn this.type\n\t\t\t}\n\t\t\treturn 'button'\n\t\t},\n\n\t\t/\n\t\t HTML attributes to bind to the <button>\n\t\t /\n\t\tbuttonAttributes() {\n\t\t\tconst attributes = {}\n\n\t\t\tif (this.isInSemanticMenu) {\n\t\t\t\t// By default it needs to be a menu item in semantic menus\n\t\t\t\tattributes.role = 'menuitem'\n\n\t\t\t\tif (this.type === 'radio') {\n\t\t\t\t\tattributes.role = 'menuitemradio'\n\t\t\t\t\tattributes['aria-checked'] = this.isChecked ? 'true' : 'false'\n\t\t\t\t} else if (this.type === 'checkbox' \|\| (this.nativeType === 'button' && this.modelValue !== null)) {\n\t\t\t\t\t// either if checkbox behavior was set or the model value is not unset\n\t\t\t\t\tattributes.role = 'menuitemcheckbox'\n\t\t\t\t\tattributes['aria-checked'] = this.modelValue === null ? 'mixed' : (this.modelValue ? 'true' : 'false')\n\t\t\t\t}\n\t\t\t} else if (this.modelValue !== null && this.nativeType === 'button') {\n\t\t\t\t// In case this has a modelValue it is considered a toggle button, so we need to set the aria-pressed\n\t\t\t\tattributes['aria-pressed'] = this.modelValue ? 'true' : 'false'\n\t\t\t}\n\n\t\t\treturn attributes\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/\n\t\t Forward click event, let mixin handle the close-after-click and emit new modelValue if needed\n\t\t * @param {MouseEvent} event The click event\n\t\t /\n\t\thandleClick(event) {\n\t\t\tthis.onClick(event)\n\t\t\t// If modelValue or type is set (so modelValue might be null for tri-state) we need to update it\n\t\t\tif (this.modelValue !== null \|\| this.type !== 'button') {\n\t\t\t\tif (this.type === 'radio') {\n\t\t\t\t\tif (typeof this.modelValue !== 'boolean') {\n\t\t\t\t\t\t// String-value radios behavior is similar to native - click on checked radio does nothing\n\t\t\t\t\t\tif (!this.isChecked) {\n\t\t\t\t\t\t\tthis.$emit('update:modelValue', this.value)\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// Boolean radio allows to uncheck\n\t\t\t\t\t\tthis.$emit('update:modelValue', !this.isChecked)\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\t// Checkbox toggles value\n\t\t\t\t\tthis.$emit('update:modelValue', !this.isChecked)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@import '../../assets/action';\n@include action-active;\n@include action--disabled;\n@include action-item('button');\n\n.action-button__pressed-icon {\n\tmargin-inline: auto calc($icon-margin -1);\n}\n</style>\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"NcActionButton-CHrE7amZ.mjs","sources":["../../src/components/NcActionButton/NcActionButton.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots.\n\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionButton @click=\"showMessage('Delete')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDelete\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :close-after-click=\"true\" @click=\"showMessage('Delete and close menu')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDelete and close\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :is-menu=\"true\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Plus :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tCreate\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :disabled=\"true\" @click=\"showMessage('Disabled')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDisabled button\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport Delete from 'vue-material-design-icons/Delete.vue'\n\timport Plus from 'vue-material-design-icons/Plus.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tDelete,\n\t\t\tPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n```\n\nIf you're using a long text, you can specify a `name` prop.\n\nFor the same purpose, but in a more compact way, `description` prop can be used.\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\t<NcActionButton description=\"Subline description for the button\" @click=\"showMessage('Edit')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tEdit\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport Delete from 'vue-material-design-icons/Delete.vue'\n\timport Pencil from 'vue-material-design-icons/Pencil.vue'\n\timport Plus from 'vue-material-design-icons/Plus.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tDelete,\n\t\t\tPencil,\n\t\t\tPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n\n```\n\nAction icon attribute with a single action\n\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionButton @click=\"showMessage('Add')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Plus :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tAdd new\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport Plus from 'vue-material-design-icons/Plus.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n\n```\n\nYou can also use a custom icon, for example from the vue-material-design-icons library:\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<HandBackLeft :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise left hand\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<HandBackRight :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise right hand\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'\nimport HandBackRight from 'vue-material-design-icons/HandBackRight.vue'\n\nexport default {\n\tcomponents: {\n\t\tHandBackLeft,\n\t\tHandBackRight,\n\t},\n}\n</script>\n```\n\n### With different model behavior\nBy default the button will act like a normal button, but it is also possible to change the behavior to a toggle button, checkbox button or radio button.\n\nFor example to have the button act like a toggle button just set the `modelValue` property to the toggle state:\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton :model-value.sync=\"fullscreen\">\n\t\t\t<template #icon>\n\t\t\t\t<Fullscreen :size=\"20\" />\n\t\t\t</template>\n\t\t\tFullscreen\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport Fullscreen from 'vue-material-design-icons/Fullscreen.vue'\n\nexport default {\n\tcomponents: {\n\t\tFullscreen,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tfullscreen: true,\n\t\t}\n\t},\n}\n</script>\n```\n\nAnother example would be using it with checkbox semantics, to enable or disable features.\nThis also allows tri-state behavior (`true`, `false`, `null`) in which case `aria-checked` will be either `true`, `false` or `mixed`.\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton :model-value.sync=\"handRaised\" type=\"checkbox\">\n\t\t\t<template #icon>\n\t\t\t\t<HandBackLeft :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise hand\n\t\t</NcActionButton>\n\t\t<NcActionButton :model-value.sync=\"fullscreen\" type=\"checkbox\">\n\t\t\t<template #icon>\n\t\t\t\t<Fullscreen :size=\"20\" />\n\t\t\t</template>\n\t\t\tFullscreen\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport HandBackLeft from 'vue-material-design-icons/HandBackLeft.vue'\nimport Fullscreen from 'vue-material-design-icons/Fullscreen.vue'\n\nexport default {\n\tcomponents: {\n\t\tHandBackLeft,\n\t\tFullscreen,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tfullscreen: true,\n\t\t\thandRaised: false,\n\t\t}\n\t},\n}\n</script>\n```\n\nIt is also possible to use the button with radio semantics, this is only possible in menus and not for inline actions!\n\nWith a string `modelValue`, checked state is determined by the `value` property and updates `modelValue` with the new `value` string.\n\nWith a boolean `modelValue`, checked state is determined by `modelValue` and updates to `true` on check.\n\nNote: unlike native radio buttons, `NcActionButton` are not grouped by name, so you need to connect them by bind correct `modelValue``.\n\n```vue\n<template>\n\t<div>\n\t\t<NcActions>\n\t\t\t<NcActionButton :model-value.sync=\"payment\" type=\"radio\" value=\"cash\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cash :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPay with cash\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :model-value.sync=\"payment\" type=\"radio\" value=\"card\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<CreditCard :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPay by card\n\t\t\t</NcActionButton>\n\t\t\t<NcActionSeparator />\n\t\t\t<NcActionButton type=\"radio\" :model-value=\"align.isLeft\" @update:modelValue=\"setAlign('Left', $event)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<FormatAlignLeft :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tLeft\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton type=\"radio\" :model-value=\"align.isCenter\" @update:modelValue=\"setAlign('Center', $event)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<FormatAlignCenter :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tCenter\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton type=\"radio\" :model-value=\"align.isRight\" @update:modelValue=\"setAlign('Right', $event)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<FormatAlignRight :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tRight\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t\t<p>payment = \"{{ payment }}\"</p>\n\t\t<p>align.isLeft = {{ align.isLeft }}</p>\n\t\t<p>align.isCenter = {{ align.isCenter }}</p>\n\t\t<p>align.isRight = {{ align.isRight }}</p>\n\t</div>\n</template>\n<script>\nimport Cash from 'vue-material-design-icons/Cash.vue'\nimport CreditCard from 'vue-material-design-icons/CreditCard.vue'\nimport FormatAlignLeft from 'vue-material-design-icons/FormatAlignLeft.vue'\nimport FormatAlignCenter from 'vue-material-design-icons/FormatAlignCenter.vue'\nimport FormatAlignRight from 'vue-material-design-icons/FormatAlignRight.vue'\n\nexport default {\n\tcomponents: {\n\t\tCash,\n\t\tCreditCard,\n\t\tFormatAlignLeft,\n\t\tFormatAlignCenter,\n\t\tFormatAlignRight,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tpayment: 'card',\n\t\t\talign: {\n\t\t\t\tisLeft: false,\n\t\t\t\tisCenter: true,\n\t\t\t\tisRight: false,\n\t\t\t},\n\t\t}\n\t},\n\tmethods: {\n\t\tsetAlign(direction, value) {\n\t\t\tthis.align.isLeft = false\n\t\t\tthis.align.isCenter = false\n\t\t\tthis.align.isRight = false\n\t\t\tthis.align[`is${direction}`] = value\n\t\t},\n\t}\n}\n</script>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" :class=\"{ 'action--disabled': disabled }\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t<button :aria-label=\"ariaLabel\"\n\t\t\t:class=\"['action-button button-vue', {\n\t\t\t\t'action-button--active': isChecked,\n\t\t\t\tfocusable: isFocusable,\n\t\t\t}]\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:title=\"title\"\n\t\t\t:type=\"nativeType\"\n\t\t\tv-bind=\"buttonAttributes\"\n\t\t\t@click=\"handleClick\">\n\t\t\t<!-- @slot Manually provide icon -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<span :class=\"[isIconUrl ? 'action-button__icon--url' : icon]\"\n\t\t\t\t\t:style=\"{ backgroundImage: isIconUrl ? `url(${icon})` : null }\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclass=\"action-button__icon\" />\n\t\t\t</slot>\n\n\t\t\t<!-- long text with name -->\n\t\t\t<span class=\"action-button__longtext-wrapper\">\n\t\t\t\t<strong v-if=\"name\"\n\t\t\t\t\tclass=\"action-button__name\">\n\t\t\t\t\t{{ name }}\n\t\t\t\t</strong>\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 v-if=\"isLongText\"\n\t\t\t\t\tclass=\"action-button__longtext\"\n\t\t\t\t\tv-text=\"text\" />\n\t\t\t\t<!-- default text display -->\n\t\t\t\t<span v-else\n\t\t\t\t\tclass=\"action-button__text\">\n\t\t\t\t\t{{ text }}\n\t\t\t\t</span>\n\t\t\t\t<span v-if=\"description\"\n\t\t\t\t\tclass=\"action-button__description\"\n\t\t\t\t\tv-text=\"description\" />\n\t\t\t</span>\n\n\t\t\t<!-- right(in LTR) or left(in RTL) arrow icon when there is a sub-menu -->\n\t\t\t<NcIconSvgWrapper v-if=\"isMenu\"\n\t\t\t\tclass=\"action-button__menu-icon\"\n\t\t\t\tdirectional\n\t\t\t\t:path=\"mdiChevronRight\" />\n\t\t\t<NcIconSvgWrapper v-else-if=\"isChecked\" :path=\"mdiCheck\" class=\"action-button__pressed-icon\" />\n\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 { mdiCheck, mdiChevronRight } from '@mdi/js'\nimport ActionTextMixin from '../../mixins/actionText.js'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\n\n/*\n Button component to be used in Actions\n /\nexport default {\n\tname: 'NcActionButton',\n\n\tcomponents: {\n\t\tNcIconSvgWrapper,\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\n\t\t/\n\t\t Small underlying text content of the entry\n\t\t /\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\tsetup() {\n\t\treturn {\n\t\t\tmdiCheck,\n\t\t\tmdiChevronRight,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/\n\t\t determines if the action is focusable\n\t\t \n\t\t @return {boolean} is the action focusable ?\n\t\t /\n\t\tisFocusable() {\n\t\t\treturn !this.disabled\n\t\t},\n\n\t\t/\n\t\t The current \"checked\" or \"pressed\" state for the model behavior\n\t\t /\n\t\tisChecked() {\n\t\t\tif (this.type === 'radio' && typeof this.modelValue !== 'boolean') {\n\t\t\t\treturn this.modelValue === this.value\n\t\t\t}\n\t\t\treturn this.modelValue\n\t\t},\n\n\t\t/\n\t\t The native HTML type to set on the button\n\t\t /\n\t\tnativeType() {\n\t\t\tif (this.type === 'submit' \|\| this.type === 'reset') {\n\t\t\t\treturn this.type\n\t\t\t}\n\t\t\treturn 'button'\n\t\t},\n\n\t\t/\n\t\t HTML attributes to bind to the <button>\n\t\t /\n\t\tbuttonAttributes() {\n\t\t\tconst attributes = {}\n\n\t\t\tif (this.isInSemanticMenu) {\n\t\t\t\t// By default it needs to be a menu item in semantic menus\n\t\t\t\tattributes.role = 'menuitem'\n\n\t\t\t\tif (this.type === 'radio') {\n\t\t\t\t\tattributes.role = 'menuitemradio'\n\t\t\t\t\tattributes['aria-checked'] = this.isChecked ? 'true' : 'false'\n\t\t\t\t} else if (this.type === 'checkbox' \|\| (this.nativeType === 'button' && this.modelValue !== null)) {\n\t\t\t\t\t// either if checkbox behavior was set or the model value is not unset\n\t\t\t\t\tattributes.role = 'menuitemcheckbox'\n\t\t\t\t\tattributes['aria-checked'] = this.modelValue === null ? 'mixed' : (this.modelValue ? 'true' : 'false')\n\t\t\t\t}\n\t\t\t} else if (this.modelValue !== null && this.nativeType === 'button') {\n\t\t\t\t// In case this has a modelValue it is considered a toggle button, so we need to set the aria-pressed\n\t\t\t\tattributes['aria-pressed'] = this.modelValue ? 'true' : 'false'\n\t\t\t}\n\n\t\t\treturn attributes\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/\n\t\t Forward click event, let mixin handle the close-after-click and emit new modelValue if needed\n\t\t * @param {MouseEvent} event The click event\n\t\t /\n\t\thandleClick(event) {\n\t\t\tthis.onClick(event)\n\t\t\t// If modelValue or type is set (so modelValue might be null for tri-state) we need to update it\n\t\t\tif (this.modelValue !== null \|\| this.type !== 'button') {\n\t\t\t\tif (this.type === 'radio') {\n\t\t\t\t\tif (typeof this.modelValue !== 'boolean') {\n\t\t\t\t\t\t// String-value radios behavior is similar to native - click on checked radio does nothing\n\t\t\t\t\t\tif (!this.isChecked) {\n\t\t\t\t\t\t\tthis.$emit('update:modelValue', this.value)\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// Boolean radio allows to uncheck\n\t\t\t\t\t\tthis.$emit('update:modelValue', !this.isChecked)\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\t// Checkbox toggles value\n\t\t\t\t\tthis.$emit('update:modelValue', !this.isChecked)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@import '../../assets/action';\n@include action-active;\n@include action--disabled;\n@include action-item('button');\n\n.action-button {\n\t&__pressed-icon {\n\t\tmargin-inline: auto calc($icon-margin -1);\n\t}\n\n\t* {\n\t\tcursor: pointer;\n\t}\n}\n</style>\n"],"names":[],"mappings":"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"}

package/dist/chunks/{NcActionButtonGroup-BMy3W9fG.cjs → NcActionButtonGroup-B8Bj-Qb3.cjs} RENAMED Viewed

@@ -2,7 +2,7 @@ require('../assets/NcActionButtonGroup-BND4GQdv.css');
 "use strict";
 const Vue = require("vue");
 const GenRandomId = require("./GenRandomId-BQDud3d4.cjs");
-const _l10n = require("./_l10n-BiiXtYiP.cjs");
+const _l10n = require("./_l10n-DpwcsAC3.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
 _l10n.register();
 const _sfc_main = Vue.defineComponent({
@@ -48,4 +48,4 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
 );
 const NcActionButtonGroup = __component__.exports;
 exports.NcActionButtonGroup = NcActionButtonGroup;
-//# sourceMappingURL=NcActionButtonGroup-BMy3W9fG.cjs.map
+//# sourceMappingURL=NcActionButtonGroup-B8Bj-Qb3.cjs.map

package/dist/chunks/{NcActionButtonGroup-BMy3W9fG.cjs.map → NcActionButtonGroup-B8Bj-Qb3.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcActionButtonGroup-~~BMy3W9fG~~.cjs","sources":["../../src/components/NcActionButtonGroup/NcActionButtonGroup.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots,\nto group buttons as one visual action, like for text alignment.\nThis should be used sparingly for accessibility.\n\n```vue\n<template>\n\t<div style=\"display: flex; align-items: center;\">\n\t\t<NcActions>\n\t\t\t<NcActionButtonGroup name=\"Text alignment\">\n\t\t\t\t<NcActionButton aria-label=\"Align left\"\n\t\t\t\t\t:model-value.sync=\"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\t:model-value.sync=\"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\t:model-value.sync=\"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":["defineComponent","GenRandomId","t"],"mappings":";;;;;;AA+FA,MAAA,YAAAA,IAAAA,gBAAA;AAAA,EACA,MAAA;AAAA,EAEA,QAAA;AAAA,IACA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA;AACA,WAAA;AAAA,MACA,SAAA,0BAAAC,YAAA,YAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,GAAAC,MAAA;AAAA,EACA;AACA,CAAA;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"NcActionButtonGroup-B8Bj-Qb3.cjs","sources":["../../src/components/NcActionButtonGroup/NcActionButtonGroup.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots,\nto group buttons as one visual action, like for text alignment.\nThis should be used sparingly for accessibility.\n\n```vue\n<template>\n\t<div style=\"display: flex; align-items: center;\">\n\t\t<NcActions>\n\t\t\t<NcActionButtonGroup name=\"Text alignment\">\n\t\t\t\t<NcActionButton aria-label=\"Align left\"\n\t\t\t\t\t:model-value.sync=\"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\t:model-value.sync=\"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\t:model-value.sync=\"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":["defineComponent","GenRandomId","t"],"mappings":";;;;;;AA+FA,MAAA,YAAAA,IAAAA,gBAAA;AAAA,EACA,MAAA;AAAA,EAEA,QAAA;AAAA,IACA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA;AACA,WAAA;AAAA,MACA,SAAA,0BAAAC,YAAA,YAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,GAAAC,MAAA;AAAA,EACA;AACA,CAAA;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcActionButtonGroup-DEf00ge6.mjs → NcActionButtonGroup-_R4fp-bK.mjs} RENAMED Viewed

@@ -1,7 +1,7 @@
 import '../assets/NcActionButtonGroup-BND4GQdv.css';
 import { defineComponent } from "vue";
 import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
-import { r as register, a as t } from "./_l10n-DQgzdF9S.mjs";
+import { r as register, a as t } from "./_l10n-BU8-kQzN.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
 register();
 const _sfc_main = defineComponent({
@@ -49,4 +49,4 @@ const NcActionButtonGroup = __component__.exports;
 export {
   NcActionButtonGroup as N
 };
-//# sourceMappingURL=NcActionButtonGroup-DEf00ge6.mjs.map
+//# sourceMappingURL=NcActionButtonGroup-_R4fp-bK.mjs.map

package/dist/chunks/{NcActionButtonGroup-DEf00ge6.mjs.map → NcActionButtonGroup-_R4fp-bK.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcActionButtonGroup-~~DEf00ge6~~.mjs","sources":["../../src/components/NcActionButtonGroup/NcActionButtonGroup.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots,\nto group buttons as one visual action, like for text alignment.\nThis should be used sparingly for accessibility.\n\n```vue\n<template>\n\t<div style=\"display: flex; align-items: center;\">\n\t\t<NcActions>\n\t\t\t<NcActionButtonGroup name=\"Text alignment\">\n\t\t\t\t<NcActionButton aria-label=\"Align left\"\n\t\t\t\t\t:model-value.sync=\"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\t:model-value.sync=\"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\t:model-value.sync=\"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":[],"mappings":";;;;;AA+FA,MAAA,YAAA,gBAAA;AAAA,EACA,MAAA;AAAA,EAEA,QAAA;AAAA,IACA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA;AACA,WAAA;AAAA,MACA,SAAA,0BAAA,YAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA;AAAA,EACA;AACA,CAAA;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"NcActionButtonGroup-_R4fp-bK.mjs","sources":["../../src/components/NcActionButtonGroup/NcActionButtonGroup.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots,\nto group buttons as one visual action, like for text alignment.\nThis should be used sparingly for accessibility.\n\n```vue\n<template>\n\t<div style=\"display: flex; align-items: center;\">\n\t\t<NcActions>\n\t\t\t<NcActionButtonGroup name=\"Text alignment\">\n\t\t\t\t<NcActionButton aria-label=\"Align left\"\n\t\t\t\t\t:model-value.sync=\"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\t:model-value.sync=\"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\t:model-value.sync=\"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":[],"mappings":";;;;;AA+FA,MAAA,YAAA,gBAAA;AAAA,EACA,MAAA;AAAA,EAEA,QAAA;AAAA,IACA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA;AACA,WAAA;AAAA,MACA,SAAA,0BAAA,YAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA;AAAA,EACA;AACA,CAAA;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcActionInput-B4qGsF57.mjs → NcActionInput-BXOssTbe.mjs} RENAMED Viewed

@@ -1,23 +1,24 @@
-import '../assets/NcActionInput-gUagFGC5.css';
-import NcDateTimePicker from "../Components/NcDateTimePicker.mjs";
+import '../assets/NcActionInput-Q0DfTHVL.css';
+import { defineAsyncComponent } from "vue";
 import NcDateTimePickerNative from "../Components/NcDateTimePickerNative.mjs";
-import { N as NcPasswordField } from "./NcPasswordField-DNjegDVj.mjs";
-import { N as NcSelect } from "./NcSelect-CjUzohn5.mjs";
-import { N as NcTextField } from "./NcTextField-o_8gWurX.mjs";
+import { N as NcPasswordField } from "./NcPasswordField-CNUa4WOq.mjs";
+import { N as NcTextField } from "./NcTextField-GdOVvMI8.mjs";
 import { A as ActionGlobalMixin } from "./actionGlobal-DqVa7c7G.mjs";
 import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
-import { r as register, h as t47, a as t } from "./_l10n-DQgzdF9S.mjs";
+import { r as register, i as t47, a as t } from "./_l10n-BU8-kQzN.mjs";
 import { u as useModelMigration } from "./useModelMigration-EhAWvqDD.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
 register(t47);
 const _sfc_main = {
   name: "NcActionInput",
   components: {
-    NcDateTimePicker,
     NcDateTimePickerNative,
     NcPasswordField,
-    NcSelect,
-    NcTextField
+    NcTextField,
+    // Lazy load components with more than 50kB bundle size impact
+    NcColorPicker: defineAsyncComponent(() => import("../Components/NcColorPicker.mjs")),
+    NcDateTimePicker: defineAsyncComponent(() => import("../Components/NcDateTimePicker.mjs")),
+    NcSelect: defineAsyncComponent(() => import("../Components/NcSelect.mjs"))
   },
   mixins: [ActionGlobalMixin],
   model: {
@@ -276,10 +277,10 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "d174eb12"
+  "caba6a2d"
 );
 const NcActionInput = __component__.exports;
 export {
   NcActionInput as N
 };
-//# sourceMappingURL=NcActionInput-B4qGsF57.mjs.map
+//# sourceMappingURL=NcActionInput-BXOssTbe.mjs.map

package/dist/chunks/NcActionInput-BXOssTbe.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcActionInput-BXOssTbe.mjs","sources":["../../src/components/NcActionInput/NcActionInput.vue"],"sourcesContent":["\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots.\n\nIt is recommended to not only provide a placeholder, but also a label.\nThe label should describe what input is expected and the placehold what format the input should have.\n\nAll undocumented attributes will be bound to the input, the datepicker or the select component, e.g. `maxlength`, `not-before`.\nFor the `NcSelect` component, all events will be passed through. Please see the `NcSelect` component's documentation for more details and examples.\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionInput v-model=\"text\" :label-outside=\"true\" label=\"Label outside the input\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput v-model=\"text\" :show-trailing-button=\"false\" label=\"Input without trailing button\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput v-model=\"text\" label=\"Input with placeholder\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tThis is the placeholder\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput type=\"password\" v-model=\"text\" label=\"Password with visible label\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Key :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPassword placeholder\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput type=\"password\" v-model=\"text\" :show-trailing-button=\"false\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Key :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPassword placeholder\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput type=\"color\" v-model=\"color\" label=\"Favorite color\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Eyedropper :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tColor placeholder\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput label=\"Visible label\" v-model=\"text\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tInput with visible label\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput :disabled=\"true\" label=\"This is a disabled input\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Close :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput type=\"date\" isNativePicker v-model=\"date\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPlease pick a date\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput v-model=\"date\" type=\"date\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPlease pick a date\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput\n\t\t\t\tv-model=\"multiSelected\"\n\t\t\t\ttype=\"multiselect\"\n\t\t\t\tinput-label=\"Fruit selection\"\n\t\t\t\t:options=\"['Apple', 'Banana', 'Cherry']\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPlease pick a fruit\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput\n\t\t\t\tv-model=\"multiSelected\"\n\t\t\t\ttype=\"multiselect\"\n\t\t\t\tinput-label=\"Fruit selection\"\n\t\t\t\ttrack-by=\"id\"\n\t\t\t\t:append-to-body=\"true\"\n\t\t\t\t:multiple=\"true\"\n\t\t\t\t:options=\"[{label:'Apple', id: 'apple'}, {label:'Banana', id: 'banana'}, {label:'Cherry', id: 'cherry'}]\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPlease pick a fruit object\n\t\t\t</NcActionInput>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport Close from 'vue-material-design-icons/Close'\n\timport Eyedropper from 'vue-material-design-icons/Eyedropper'\n\timport Key from 'vue-material-design-icons/Key'\n\timport Pencil from 'vue-material-design-icons/Pencil'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tClose,\n\t\t\tEyedropper,\n\t\t\tKey,\n\t\t\tPencil,\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tcolor: '#0082C9',\n\t\t\t\ttext: 'This is the input text',\n\t\t\t\tmultiSelected: [],\n\t\t\t\tdate: new Date(),\n\t\t\t}\n\t\t},\n\t}\n\t</script>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" :class=\"{ 'action--disabled': disabled }\">\n\t\t<span :class=\"{\n\t\t\t\t'action-input-picker--disabled': disabled,\n\t\t\t\t'action-input--visible-label': labelOutside && label,\n\t\t\t}\"\n\t\t\tclass=\"action-input\"\n\t\t\t@mouseleave=\"onLeave\">\n\t\t\t<span class=\"action-input__icon-wrapper\">\n\t\t\t\t\n\t\t\t\t<slot name=\"icon\">\n\t\t\t\t\t<span :class=\"[isIconUrl ? 'action-input__icon--url' : icon]\"\n\t\t\t\t\t\t:style=\"{ backgroundImage: isIconUrl ? `url(${icon})` : null }\"\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\tclass=\"action-input__icon\" />\n\t\t\t\t</slot>\n\t\t\t</span>\n\n\t\t\t\n\t\t\t<form ref=\"form\"\n\t\t\t\tclass=\"action-input__form\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t@submit.prevent=\"onSubmit\">\n\t\t\t\t<div class=\"action-input__container\">\n\t\t\t\t\t<label v-if=\"label && labelOutside\"\n\t\t\t\t\t\tclass=\"action-input__text-label\"\n\t\t\t\t\t\t:class=\"{ 'action-input__text-label--hidden': !labelOutside}\"\n\t\t\t\t\t\t:for=\"inputId\">\n\t\t\t\t\t\t{{ label }}\n\t\t\t\t\t</label>\n\t\t\t\t\t<div class=\"action-input__input-container\">\n\n\t\t\t\t\t\t<NcDateTimePicker v-if=\"datePickerType\"\n\t\t\t\t\t\t\tref=\"datetimepicker\"\n\t\t\t\t\t\t\t:value=\"model\"\n\t\t\t\t\t\t\tstyle=\"z-index: 99999999999;\"\n\t\t\t\t\t\t\t:placeholder=\"text\"\n\t\t\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t\t\t:type=\"datePickerType\"\n\t\t\t\t\t\t\t:input-class=\"['mx-input', { focusable: isFocusable }]\"\n\t\t\t\t\t\t\tclass=\"action-input__datetimepicker\"\n\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\t@input=\"onInput\"\n\t\t\t\t\t\t\t@change=\"onChange\" />\n\n\t\t\t\t\t\t<NcDateTimePickerNative v-else-if=\"isNativePicker\"\n\t\t\t\t\t\t\t:id=\"idNativeDateTimePicker\"\n\t\t\t\t\t\t\t:value=\"model\"\n\t\t\t\t\t\t\t:type=\"nativeDatePickerType\"\n\t\t\t\t\t\t\t:input-class=\"{ focusable: isFocusable }\"\n\t\t\t\t\t\t\tclass=\"action-input__datetimepicker\"\n\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\t@update:model-value=\"model = $event\"\n\t\t\t\t\t\t\t@change=\"$emit('change', $event)\" />\n\n\t\t\t\t\t\t<NcSelect v-else-if=\"isMultiselectType\"\n\t\t\t\t\t\t\t:value=\"model\"\n\t\t\t\t\t\t\t:placeholder=\"text\"\n\t\t\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t\t\t:append-to-body=\"$attrs.appendToBody || $attrs['append-to-body'] || false\"\n\t\t\t\t\t\t\t:input-class=\"{ focusable: isFocusable }\"\n\t\t\t\t\t\t\tclass=\"action-input__multi\"\n\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\tv-on=\"$listeners\" />\n\n\t\t\t\t\t\t<NcPasswordField v-else-if=\"type==='password'\"\n\t\t\t\t\t\t\t:id=\"inputId\"\n\t\t\t\t\t\t\t:value=\"model\"\n\t\t\t\t\t\t\t:label=\"label\"\n\t\t\t\t\t\t\t:label-outside=\"!label || labelOutside\"\n\t\t\t\t\t\t\t:placeholder=\"text\"\n\t\t\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t\t\t:input-class=\"{ focusable: isFocusable }\"\n\t\t\t\t\t\t\t:show-trailing-button=\"showTrailingButton && !disabled\"\n\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\tv-on=\"$listeners\"\n\t\t\t\t\t\t\t@input=\"onInput\"\n\t\t\t\t\t\t\t@change=\"onChange\" />\n\n\t\t\t\t\t\t<div v-else-if=\"type === 'color'\" class=\"action-input__container\">\n\t\t\t\t\t\t\t<label v-if=\"label && type === 'color'\"\n\t\t\t\t\t\t\t\tclass=\"action-input__text-label\"\n\t\t\t\t\t\t\t\t:class=\"{ 'action-input__text-label--hidden': !labelOutside}\"\n\t\t\t\t\t\t\t\t:for=\"inputId\">\n\t\t\t\t\t\t\t\t{{ label }}\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t<div class=\"action-input__input-container\">\n\t\t\t\t\t\t\t\t<NcColorPicker id=\"inputId\"\n\t\t\t\t\t\t\t\t\t:value=\"model\"\n\t\t\t\t\t\t\t\t\tclass=\"colorpicker__trigger\"\n\t\t\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\t\t\tv-on=\"$listeners\"\n\t\t\t\t\t\t\t\t\t@update:model-value=\"onInput\"\n\t\t\t\t\t\t\t\t\t@submit=\"$refs.form.requestSubmit()\">\n\t\t\t\t\t\t\t\t\t<button :style=\"{'background-color': model}\"\n\t\t\t\t\t\t\t\t\t\tclass=\"colorpicker__preview\"\n\t\t\t\t\t\t\t\t\t\t:class=\"{ focusable: isFocusable }\" />\n\t\t\t\t\t\t\t\t</NcColorPicker>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<NcTextField v-else\n\t\t\t\t\t\t\t:id=\"inputId\"\n\t\t\t\t\t\t\t:value=\"model\"\n\t\t\t\t\t\t\t:label=\"label\"\n\t\t\t\t\t\t\t:label-outside=\"!label || labelOutside\"\n\t\t\t\t\t\t\t:placeholder=\"text\"\n\t\t\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t\t\t:input-class=\"{ focusable: isFocusable }\"\n\t\t\t\t\t\t\t:type=\"type\"\n\t\t\t\t\t\t\ttrailing-button-icon=\"arrowRight\"\n\t\t\t\t\t\t\t:trailing-button-label=\"trailingButtonLabel\"\n\t\t\t\t\t\t\t:show-trailing-button=\"showTrailingButton && !disabled\"\n\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\tv-on=\"$listeners\"\n\t\t\t\t\t\t\t@trailing-button-click=\"$refs.form.requestSubmit()\"\n\t\t\t\t\t\t\t@input=\"onInput\"\n\t\t\t\t\t\t\t@change=\"onChange\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</form>\n\t\t</span>\n\t</li>\n</template>\n\n<script>\nimport { defineAsyncComponent } from 'vue'\nimport NcDateTimePickerNative from '../NcDateTimePickerNative/index.js'\nimport NcPasswordField from '../NcPasswordField/index.js'\nimport NcTextField from '../NcTextField/index.js'\nimport ActionGlobalMixin from '../../mixins/actionGlobal.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport { t } from '../../l10n.js'\nimport { useModelMigration } from '../../composables/useModelMigration.ts'\n\nexport default {\n\tname: 'NcActionInput',\n\n\tcomponents: {\n\t\tNcDateTimePickerNative,\n\t\tNcPasswordField,\n\t\tNcTextField,\n\t\t// Lazy load components with more than 50kB bundle size impact\n\t\tNcColorPicker: defineAsyncComponent(() => import('../NcColorPicker/index.js')),\n\t\tNcDateTimePicker: defineAsyncComponent(() => import('../NcDateTimePicker/index.js')),\n\t\tNcSelect: defineAsyncComponent(() => import('../NcSelect/index.js')),\n\t},\n\n\tmixins: [ActionGlobalMixin],\n\n\tmodel: {\n\t\tprop: 'modelValue',\n\t\tevent: 'update:modelValue',\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\t\t/**\n\t\t * id attribute of the text input element\n\t\t */\n\t\tinputId: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'action-input-' + GenRandomId(),\n\t\t\tvalidator: id => id.trim() !== '',\n\t\t},\n\t\t/**\n\t\t * Icon to show with the action, can be either a CSS class or an URL\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * type attribute of the input field\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'text',\n\t\t\tvalidator(type) {\n\t\t\t\treturn ['date', 'datetime-local', 'month', 'multiselect',\n\t\t\t\t\t'number', 'password', 'search', 'tel',\n\t\t\t\t\t'text', 'time', 'url', 'week', 'color',\n\t\t\t\t\t'email'].indexOf(type) > -1\n\t\t\t},\n\t\t},\n\t\t/**\n\t\t * id attribute for the native date time picker\n\t\t */\n\t\tidNativeDateTimePicker: {\n\t\t\ttype: String,\n\t\t\tdefault: 'date-time-picker_id',\n\t\t},\n\t\t/**\n\t\t * Flag to use a native date time picker\n\t\t */\n\t\tisNativePicker: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * The visible input label for accessibility purposes.\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * If you want to show the label just above the\n\t\t * input field, pass in `true` to this prop.\n\t\t */\n\t\tlabelOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\t/**\n\t\t * Removed in v9 - use `update:modelValue` (`v-model`) instead\n\t\t * @deprecated\n\t\t */\n\t\tvalue: {\n\t\t\ttype: [String, Date, Number, Array],\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * value attribute of the input field\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: [String, Date, Number, Array],\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * disabled state of the input field\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * aria-label attribute of the input field\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * @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\t\t/**\n\t\t * Attribute forwarded to the underlying NcPasswordField and NcTextField\n\t\t */\n\t\tshowTrailingButton: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\t/**\n\t\t * Trailing button label forwarded to the underlying NcTextField\n\t\t */\n\t\ttrailingButtonLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Submit'),\n\t\t},\n\t},\n\n\temits: [\n\t\t'input',\n\t\t'submit',\n\t\t'change',\n\t\t/**\n\t\t * Removed in v9 - use `update:modelValue` (`v-model`) instead\n\t\t * @deprecated\n\t\t */\n\t\t'update:value',\n\t\t/**\n\t\t * Emitted when the inputs value changes\n\t\t * ! DatetimePicker only send the value\n\t\t *\n\t\t * @type {string|Date}\n\t\t */\n\t\t'update:modelValue',\n\t\t/** Same as `update:modelValue` but with a different event name */\n\t\t'update:model-value',\n\t],\n\n\tsetup() {\n\t\tconst model = useModelMigration('value', 'update:value')\n\t\treturn {\n\t\t\tmodel,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tisIconUrl() {\n\t\t\ttry {\n\t\t\t\treturn new URL(this.icon)\n\t\t\t} catch (error) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t},\n\n\t\tisMultiselectType() {\n\t\t\treturn this.type === 'multiselect'\n\t\t},\n\n\t\tnativeDatePickerType() {\n\t\t\tswitch (this.type) {\n\t\t\tcase 'date':\n\t\t\tcase 'month':\n\t\t\tcase 'time':\n\t\t\tcase 'week':\n\t\t\tcase 'datetime-local':\n\t\t\t\treturn this.type\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\n\t\tdatePickerType() {\n\t\t\tif (!this.isNativePicker) {\n\t\t\t\tswitch (this.type) {\n\t\t\t\tcase 'date':\n\t\t\t\tcase 'month':\n\t\t\t\tcase 'time':\n\t\t\t\t\treturn this.type\n\n\t\t\t\tcase 'datetime-local':\n\t\t\t\t\treturn 'datetime'\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\t\t/**\n\t\t * determines if the action is focusable\n\t\t *\n\t\t * @return {boolean} is the action focusable ?\n\t\t */\n\t\tisFocusable() {\n\t\t\treturn !this.disabled\n\t\t},\n\t},\n\n\tmethods: {\n\t\t// closing datepicker popup on mouseleave = unfocus\n\t\tonLeave() {\n\t\t\tif (this.$refs.datetimepicker && this.$refs.datetimepicker.$refs.datepicker) {\n\t\t\t\tthis.$refs.datetimepicker.$refs.datepicker.closePopup()\n\t\t\t}\n\t\t},\n\t\tonInput(event) {\n\t\t\t/**\n\t\t\t * Emitted on input events of the text field\n\t\t\t *\n\t\t\t * @type {Event|Date}\n\t\t\t */\n\t\t\tthis.$emit('input', event)\n\n\t\t\tthis.model = event.target ? event.target.value : event\n\t\t},\n\t\tonSubmit(event) {\n\t\t\tevent.preventDefault()\n\t\t\tevent.stopPropagation()\n\t\t\tif (!this.disabled) {\n\t\t\t\t/**\n\t\t\t\t * Emitted on submit of the input field\n\t\t\t\t *\n\t\t\t\t * @type {Event}\n\t\t\t\t */\n\t\t\t\tthis.$emit('submit', event)\n\t\t\t} else {\n\t\t\t\t// ignore submit\n\t\t\t\treturn false\n\t\t\t}\n\t\t},\n\t\tonChange(event) {\n\t\t\t/**\n\t\t\t * Emitted on change of the input field\n\t\t\t *\n\t\t\t * @type {Event}\n\t\t\t */\n\t\t\tthis.$emit('change', event)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@import '../../assets/inputs';\n@import '../../assets/action';\n@include action-active;\n@include action--disabled;\n\n$input-margin: 4px;\n\n.action-input {\n\tdisplay: flex;\n\talign-items: flex-start;\n\n\twidth: 100%;\n\theight: auto;\n\tmargin: 0;\n\tpadding: 0;\n\n\tcursor: pointer;\n\twhite-space: nowrap;\n\n\tcolor: var(--color-main-text);\n\tborder: 0;\n\tborder-radius: 0; // otherwise Safari will cut the border-radius area\n\tbackground-color: transparent;\n\tbox-shadow: none;\n\n\tfont-weight: normal;\n\n\t&__icon-wrapper {\n\t\tdisplay: flex;\n\t\talign-self: center;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\n\t\t&:deep(.material-design-icon) {\n\t\t\twidth: var(--default-clickable-area);\n\t\t\theight: var(--default-clickable-area);\n\t\t\topacity: $opacity_full;\n\n\t\t\t.material-design-icon__svg {\n\t\t\t\tvertical-align: middle;\n\t\t\t}\n\t\t}\n\t}\n\n\t& > span {\n\t\tcursor: pointer;\n\t\twhite-space: nowrap;\n\t}\n\n\t&__icon {\n\t\tmin-width: 0; /* Overwrite icons*/\n\t\tmin-height: 0;\n\t\t// Keep padding to define the width to assure correct position of a possible text\n\t\tpadding: calc(var(--default-clickable-area) / 2) 0 calc(var(--default-clickable-area) / 2) var(--default-clickable-area);\n\n\t\tbackground-position: #{$icon-margin} center;\n\t\tbackground-size: $icon-size;\n\t}\n\n\t// Forms & text inputs\n\t&__form {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tflex: 1 1 auto;\n\n\t\tmargin: $input-margin 0;\n\t\tpadding-inline-end: $icon-margin;\n\t}\n\n\t&__container {\n\t\tposition: relative;\n\t\twidth: 100%;\n\t}\n\n\t&__input-container {\n\t\tdisplay: flex;\n\n\t\t.colorpicker {\n\t\t\t&__trigger,\n\t\t\t&__preview {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\n\t\t\t&__preview {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 36px;\n\t\t\t\tborder-radius: var(--border-radius-large);\n\t\t\t\tborder: 2px solid var(--color-border-maxcontrast);\n\t\t\t\tbox-shadow: none !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__text-label {\n\t\tpadding: 4px 0;\n\t\tdisplay: block;\n\n\t\t&--hidden {\n\t\t\tposition: absolute;\n\t\t\tinset-inline-start: 0;\n\t\t\twidth: 1px;\n\t\t\theight: 1px;\n\t\t\toverflow: hidden;\n\t\t\tz-index: -1;\n\t\t\topacity: 0;\n\t\t}\n\t}\n\n\t&__datetimepicker {\n\t\twidth: 100%;\n\n\t\t:deep(.mx-input) {\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\n\t&__multi {\n\t\twidth: 100%;\n\t}\n}\n\n// if a form is the last of the list\n// add the same bottomMargin as the right padding\n// for visual balance\nli:last-child > .action-input {\n\tpadding-bottom: calc($icon-margin - $input-margin);\n}\n\n// same for first item\nli:first-child > .action-input:not(.action-input--visible-label) {\n\tpadding-top: calc($icon-margin - $input-margin);\n}\n\n</style>\n"],"names":[],"mappings":"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"}

package/dist/chunks/{NcActionInput-BmERg0FB.cjs → NcActionInput-Bv4_2oYO.cjs} RENAMED Viewed

@@ -1,24 +1,26 @@
-require('../assets/NcActionInput-gUagFGC5.css');
+require('../assets/NcActionInput-Q0DfTHVL.css');
 "use strict";
-const Components_NcDateTimePicker = require("../Components/NcDateTimePicker.cjs");
+const Vue = require("vue");
 const Components_NcDateTimePickerNative = require("../Components/NcDateTimePickerNative.cjs");
-const NcPasswordField = require("./NcPasswordField-BCzIotoB.cjs");
-const NcSelect = require("./NcSelect-D2xnxw4_.cjs");
-const NcTextField = require("./NcTextField-Uk5iD8o2.cjs");
+const NcPasswordField = require("./NcPasswordField-Bci0EOiA.cjs");
+const NcTextField = require("./NcTextField-C24Y7Zzr.cjs");
 const actionGlobal = require("./actionGlobal-L0Ls8tPJ.cjs");
 const GenRandomId = require("./GenRandomId-BQDud3d4.cjs");
-const _l10n = require("./_l10n-BiiXtYiP.cjs");
+const _l10n = require("./_l10n-DpwcsAC3.cjs");
 const useModelMigration = require("./useModelMigration-D5zhrNXr.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
+const _interopNamespaceDefaultOnly = (e) => Object.freeze(Object.defineProperty({ __proto__: null, default: e }, Symbol.toStringTag, { value: "Module" }));
 _l10n.register(_l10n.t47);
 const _sfc_main = {
   name: "NcActionInput",
   components: {
-    NcDateTimePicker: Components_NcDateTimePicker,
     NcDateTimePickerNative: Components_NcDateTimePickerNative,
     NcPasswordField: NcPasswordField.NcPasswordField,
-    NcSelect: NcSelect.NcSelect,
-    NcTextField: NcTextField.NcTextField
+    NcTextField: NcTextField.NcTextField,
+    // Lazy load components with more than 50kB bundle size impact
+    NcColorPicker: Vue.defineAsyncComponent(() => Promise.resolve().then(() => /* @__PURE__ */ _interopNamespaceDefaultOnly(require("../Components/NcColorPicker.cjs")))),
+    NcDateTimePicker: Vue.defineAsyncComponent(() => Promise.resolve().then(() => /* @__PURE__ */ _interopNamespaceDefaultOnly(require("../Components/NcDateTimePicker.cjs")))),
+    NcSelect: Vue.defineAsyncComponent(() => Promise.resolve().then(() => /* @__PURE__ */ _interopNamespaceDefaultOnly(require("../Components/NcSelect.cjs"))))
   },
   mixins: [actionGlobal.ActionGlobalMixin],
   model: {
@@ -277,8 +279,8 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "d174eb12"
+  "caba6a2d"
 );
 const NcActionInput = __component__.exports;
 exports.NcActionInput = NcActionInput;
-//# sourceMappingURL=NcActionInput-BmERg0FB.cjs.map
+//# sourceMappingURL=NcActionInput-Bv4_2oYO.cjs.map

package/dist/chunks/NcActionInput-Bv4_2oYO.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcActionInput-Bv4_2oYO.cjs","sources":["../../src/components/NcActionInput/NcActionInput.vue"],"sourcesContent":["\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots.\n\nIt is recommended to not only provide a placeholder, but also a label.\nThe label should describe what input is expected and the placehold what format the input should have.\n\nAll undocumented attributes will be bound to the input, the datepicker or the select component, e.g. `maxlength`, `not-before`.\nFor the `NcSelect` component, all events will be passed through. Please see the `NcSelect` component's documentation for more details and examples.\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionInput v-model=\"text\" :label-outside=\"true\" label=\"Label outside the input\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput v-model=\"text\" :show-trailing-button=\"false\" label=\"Input without trailing button\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput v-model=\"text\" label=\"Input with placeholder\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tThis is the placeholder\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput type=\"password\" v-model=\"text\" label=\"Password with visible label\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Key :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPassword placeholder\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput type=\"password\" v-model=\"text\" :show-trailing-button=\"false\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Key :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPassword placeholder\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput type=\"color\" v-model=\"color\" label=\"Favorite color\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Eyedropper :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tColor placeholder\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput label=\"Visible label\" v-model=\"text\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tInput with visible label\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput :disabled=\"true\" label=\"This is a disabled input\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Close :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput type=\"date\" isNativePicker v-model=\"date\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPlease pick a date\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput v-model=\"date\" type=\"date\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPlease pick a date\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput\n\t\t\t\tv-model=\"multiSelected\"\n\t\t\t\ttype=\"multiselect\"\n\t\t\t\tinput-label=\"Fruit selection\"\n\t\t\t\t:options=\"['Apple', 'Banana', 'Cherry']\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPlease pick a fruit\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput\n\t\t\t\tv-model=\"multiSelected\"\n\t\t\t\ttype=\"multiselect\"\n\t\t\t\tinput-label=\"Fruit selection\"\n\t\t\t\ttrack-by=\"id\"\n\t\t\t\t:append-to-body=\"true\"\n\t\t\t\t:multiple=\"true\"\n\t\t\t\t:options=\"[{label:'Apple', id: 'apple'}, {label:'Banana', id: 'banana'}, {label:'Cherry', id: 'cherry'}]\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPlease pick a fruit object\n\t\t\t</NcActionInput>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport Close from 'vue-material-design-icons/Close'\n\timport Eyedropper from 'vue-material-design-icons/Eyedropper'\n\timport Key from 'vue-material-design-icons/Key'\n\timport Pencil from 'vue-material-design-icons/Pencil'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tClose,\n\t\t\tEyedropper,\n\t\t\tKey,\n\t\t\tPencil,\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tcolor: '#0082C9',\n\t\t\t\ttext: 'This is the input text',\n\t\t\t\tmultiSelected: [],\n\t\t\t\tdate: new Date(),\n\t\t\t}\n\t\t},\n\t}\n\t</script>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" :class=\"{ 'action--disabled': disabled }\">\n\t\t<span :class=\"{\n\t\t\t\t'action-input-picker--disabled': disabled,\n\t\t\t\t'action-input--visible-label': labelOutside && label,\n\t\t\t}\"\n\t\t\tclass=\"action-input\"\n\t\t\t@mouseleave=\"onLeave\">\n\t\t\t<span class=\"action-input__icon-wrapper\">\n\t\t\t\t\n\t\t\t\t<slot name=\"icon\">\n\t\t\t\t\t<span :class=\"[isIconUrl ? 'action-input__icon--url' : icon]\"\n\t\t\t\t\t\t:style=\"{ backgroundImage: isIconUrl ? `url(${icon})` : null }\"\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\tclass=\"action-input__icon\" />\n\t\t\t\t</slot>\n\t\t\t</span>\n\n\t\t\t\n\t\t\t<form ref=\"form\"\n\t\t\t\tclass=\"action-input__form\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t@submit.prevent=\"onSubmit\">\n\t\t\t\t<div class=\"action-input__container\">\n\t\t\t\t\t<label v-if=\"label && labelOutside\"\n\t\t\t\t\t\tclass=\"action-input__text-label\"\n\t\t\t\t\t\t:class=\"{ 'action-input__text-label--hidden': !labelOutside}\"\n\t\t\t\t\t\t:for=\"inputId\">\n\t\t\t\t\t\t{{ label }}\n\t\t\t\t\t</label>\n\t\t\t\t\t<div class=\"action-input__input-container\">\n\n\t\t\t\t\t\t<NcDateTimePicker v-if=\"datePickerType\"\n\t\t\t\t\t\t\tref=\"datetimepicker\"\n\t\t\t\t\t\t\t:value=\"model\"\n\t\t\t\t\t\t\tstyle=\"z-index: 99999999999;\"\n\t\t\t\t\t\t\t:placeholder=\"text\"\n\t\t\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t\t\t:type=\"datePickerType\"\n\t\t\t\t\t\t\t:input-class=\"['mx-input', { focusable: isFocusable }]\"\n\t\t\t\t\t\t\tclass=\"action-input__datetimepicker\"\n\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\t@input=\"onInput\"\n\t\t\t\t\t\t\t@change=\"onChange\" />\n\n\t\t\t\t\t\t<NcDateTimePickerNative v-else-if=\"isNativePicker\"\n\t\t\t\t\t\t\t:id=\"idNativeDateTimePicker\"\n\t\t\t\t\t\t\t:value=\"model\"\n\t\t\t\t\t\t\t:type=\"nativeDatePickerType\"\n\t\t\t\t\t\t\t:input-class=\"{ focusable: isFocusable }\"\n\t\t\t\t\t\t\tclass=\"action-input__datetimepicker\"\n\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\t@update:model-value=\"model = $event\"\n\t\t\t\t\t\t\t@change=\"$emit('change', $event)\" />\n\n\t\t\t\t\t\t<NcSelect v-else-if=\"isMultiselectType\"\n\t\t\t\t\t\t\t:value=\"model\"\n\t\t\t\t\t\t\t:placeholder=\"text\"\n\t\t\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t\t\t:append-to-body=\"$attrs.appendToBody || $attrs['append-to-body'] || false\"\n\t\t\t\t\t\t\t:input-class=\"{ focusable: isFocusable }\"\n\t\t\t\t\t\t\tclass=\"action-input__multi\"\n\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\tv-on=\"$listeners\" />\n\n\t\t\t\t\t\t<NcPasswordField v-else-if=\"type==='password'\"\n\t\t\t\t\t\t\t:id=\"inputId\"\n\t\t\t\t\t\t\t:value=\"model\"\n\t\t\t\t\t\t\t:label=\"label\"\n\t\t\t\t\t\t\t:label-outside=\"!label || labelOutside\"\n\t\t\t\t\t\t\t:placeholder=\"text\"\n\t\t\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t\t\t:input-class=\"{ focusable: isFocusable }\"\n\t\t\t\t\t\t\t:show-trailing-button=\"showTrailingButton && !disabled\"\n\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\tv-on=\"$listeners\"\n\t\t\t\t\t\t\t@input=\"onInput\"\n\t\t\t\t\t\t\t@change=\"onChange\" />\n\n\t\t\t\t\t\t<div v-else-if=\"type === 'color'\" class=\"action-input__container\">\n\t\t\t\t\t\t\t<label v-if=\"label && type === 'color'\"\n\t\t\t\t\t\t\t\tclass=\"action-input__text-label\"\n\t\t\t\t\t\t\t\t:class=\"{ 'action-input__text-label--hidden': !labelOutside}\"\n\t\t\t\t\t\t\t\t:for=\"inputId\">\n\t\t\t\t\t\t\t\t{{ label }}\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t<div class=\"action-input__input-container\">\n\t\t\t\t\t\t\t\t<NcColorPicker id=\"inputId\"\n\t\t\t\t\t\t\t\t\t:value=\"model\"\n\t\t\t\t\t\t\t\t\tclass=\"colorpicker__trigger\"\n\t\t\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\t\t\tv-on=\"$listeners\"\n\t\t\t\t\t\t\t\t\t@update:model-value=\"onInput\"\n\t\t\t\t\t\t\t\t\t@submit=\"$refs.form.requestSubmit()\">\n\t\t\t\t\t\t\t\t\t<button :style=\"{'background-color': model}\"\n\t\t\t\t\t\t\t\t\t\tclass=\"colorpicker__preview\"\n\t\t\t\t\t\t\t\t\t\t:class=\"{ focusable: isFocusable }\" />\n\t\t\t\t\t\t\t\t</NcColorPicker>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<NcTextField v-else\n\t\t\t\t\t\t\t:id=\"inputId\"\n\t\t\t\t\t\t\t:value=\"model\"\n\t\t\t\t\t\t\t:label=\"label\"\n\t\t\t\t\t\t\t:label-outside=\"!label || labelOutside\"\n\t\t\t\t\t\t\t:placeholder=\"text\"\n\t\t\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t\t\t:input-class=\"{ focusable: isFocusable }\"\n\t\t\t\t\t\t\t:type=\"type\"\n\t\t\t\t\t\t\ttrailing-button-icon=\"arrowRight\"\n\t\t\t\t\t\t\t:trailing-button-label=\"trailingButtonLabel\"\n\t\t\t\t\t\t\t:show-trailing-button=\"showTrailingButton && !disabled\"\n\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\tv-on=\"$listeners\"\n\t\t\t\t\t\t\t@trailing-button-click=\"$refs.form.requestSubmit()\"\n\t\t\t\t\t\t\t@input=\"onInput\"\n\t\t\t\t\t\t\t@change=\"onChange\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</form>\n\t\t</span>\n\t</li>\n</template>\n\n<script>\nimport { defineAsyncComponent } from 'vue'\nimport NcDateTimePickerNative from '../NcDateTimePickerNative/index.js'\nimport NcPasswordField from '../NcPasswordField/index.js'\nimport NcTextField from '../NcTextField/index.js'\nimport ActionGlobalMixin from '../../mixins/actionGlobal.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport { t } from '../../l10n.js'\nimport { useModelMigration } from '../../composables/useModelMigration.ts'\n\nexport default {\n\tname: 'NcActionInput',\n\n\tcomponents: {\n\t\tNcDateTimePickerNative,\n\t\tNcPasswordField,\n\t\tNcTextField,\n\t\t// Lazy load components with more than 50kB bundle size impact\n\t\tNcColorPicker: defineAsyncComponent(() => import('../NcColorPicker/index.js')),\n\t\tNcDateTimePicker: defineAsyncComponent(() => import('../NcDateTimePicker/index.js')),\n\t\tNcSelect: defineAsyncComponent(() => import('../NcSelect/index.js')),\n\t},\n\n\tmixins: [ActionGlobalMixin],\n\n\tmodel: {\n\t\tprop: 'modelValue',\n\t\tevent: 'update:modelValue',\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\t\t/**\n\t\t * id attribute of the text input element\n\t\t */\n\t\tinputId: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'action-input-' + GenRandomId(),\n\t\t\tvalidator: id => id.trim() !== '',\n\t\t},\n\t\t/**\n\t\t * Icon to show with the action, can be either a CSS class or an URL\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * type attribute of the input field\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'text',\n\t\t\tvalidator(type) {\n\t\t\t\treturn ['date', 'datetime-local', 'month', 'multiselect',\n\t\t\t\t\t'number', 'password', 'search', 'tel',\n\t\t\t\t\t'text', 'time', 'url', 'week', 'color',\n\t\t\t\t\t'email'].indexOf(type) > -1\n\t\t\t},\n\t\t},\n\t\t/**\n\t\t * id attribute for the native date time picker\n\t\t */\n\t\tidNativeDateTimePicker: {\n\t\t\ttype: String,\n\t\t\tdefault: 'date-time-picker_id',\n\t\t},\n\t\t/**\n\t\t * Flag to use a native date time picker\n\t\t */\n\t\tisNativePicker: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * The visible input label for accessibility purposes.\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * If you want to show the label just above the\n\t\t * input field, pass in `true` to this prop.\n\t\t */\n\t\tlabelOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\t/**\n\t\t * Removed in v9 - use `update:modelValue` (`v-model`) instead\n\t\t * @deprecated\n\t\t */\n\t\tvalue: {\n\t\t\ttype: [String, Date, Number, Array],\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * value attribute of the input field\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: [String, Date, Number, Array],\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * disabled state of the input field\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * aria-label attribute of the input field\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * @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\t\t/**\n\t\t * Attribute forwarded to the underlying NcPasswordField and NcTextField\n\t\t */\n\t\tshowTrailingButton: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\t/**\n\t\t * Trailing button label forwarded to the underlying NcTextField\n\t\t */\n\t\ttrailingButtonLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Submit'),\n\t\t},\n\t},\n\n\temits: [\n\t\t'input',\n\t\t'submit',\n\t\t'change',\n\t\t/**\n\t\t * Removed in v9 - use `update:modelValue` (`v-model`) instead\n\t\t * @deprecated\n\t\t */\n\t\t'update:value',\n\t\t/**\n\t\t * Emitted when the inputs value changes\n\t\t * ! DatetimePicker only send the value\n\t\t *\n\t\t * @type {string|Date}\n\t\t */\n\t\t'update:modelValue',\n\t\t/** Same as `update:modelValue` but with a different event name */\n\t\t'update:model-value',\n\t],\n\n\tsetup() {\n\t\tconst model = useModelMigration('value', 'update:value')\n\t\treturn {\n\t\t\tmodel,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tisIconUrl() {\n\t\t\ttry {\n\t\t\t\treturn new URL(this.icon)\n\t\t\t} catch (error) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t},\n\n\t\tisMultiselectType() {\n\t\t\treturn this.type === 'multiselect'\n\t\t},\n\n\t\tnativeDatePickerType() {\n\t\t\tswitch (this.type) {\n\t\t\tcase 'date':\n\t\t\tcase 'month':\n\t\t\tcase 'time':\n\t\t\tcase 'week':\n\t\t\tcase 'datetime-local':\n\t\t\t\treturn this.type\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\n\t\tdatePickerType() {\n\t\t\tif (!this.isNativePicker) {\n\t\t\t\tswitch (this.type) {\n\t\t\t\tcase 'date':\n\t\t\t\tcase 'month':\n\t\t\t\tcase 'time':\n\t\t\t\t\treturn this.type\n\n\t\t\t\tcase 'datetime-local':\n\t\t\t\t\treturn 'datetime'\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\t\t/**\n\t\t * determines if the action is focusable\n\t\t *\n\t\t * @return {boolean} is the action focusable ?\n\t\t */\n\t\tisFocusable() {\n\t\t\treturn !this.disabled\n\t\t},\n\t},\n\n\tmethods: {\n\t\t// closing datepicker popup on mouseleave = unfocus\n\t\tonLeave() {\n\t\t\tif (this.$refs.datetimepicker && this.$refs.datetimepicker.$refs.datepicker) {\n\t\t\t\tthis.$refs.datetimepicker.$refs.datepicker.closePopup()\n\t\t\t}\n\t\t},\n\t\tonInput(event) {\n\t\t\t/**\n\t\t\t * Emitted on input events of the text field\n\t\t\t *\n\t\t\t * @type {Event|Date}\n\t\t\t */\n\t\t\tthis.$emit('input', event)\n\n\t\t\tthis.model = event.target ? event.target.value : event\n\t\t},\n\t\tonSubmit(event) {\n\t\t\tevent.preventDefault()\n\t\t\tevent.stopPropagation()\n\t\t\tif (!this.disabled) {\n\t\t\t\t/**\n\t\t\t\t * Emitted on submit of the input field\n\t\t\t\t *\n\t\t\t\t * @type {Event}\n\t\t\t\t */\n\t\t\t\tthis.$emit('submit', event)\n\t\t\t} else {\n\t\t\t\t// ignore submit\n\t\t\t\treturn false\n\t\t\t}\n\t\t},\n\t\tonChange(event) {\n\t\t\t/**\n\t\t\t * Emitted on change of the input field\n\t\t\t *\n\t\t\t * @type {Event}\n\t\t\t */\n\t\t\tthis.$emit('change', event)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@import '../../assets/inputs';\n@import '../../assets/action';\n@include action-active;\n@include action--disabled;\n\n$input-margin: 4px;\n\n.action-input {\n\tdisplay: flex;\n\talign-items: flex-start;\n\n\twidth: 100%;\n\theight: auto;\n\tmargin: 0;\n\tpadding: 0;\n\n\tcursor: pointer;\n\twhite-space: nowrap;\n\n\tcolor: var(--color-main-text);\n\tborder: 0;\n\tborder-radius: 0; // otherwise Safari will cut the border-radius area\n\tbackground-color: transparent;\n\tbox-shadow: none;\n\n\tfont-weight: normal;\n\n\t&__icon-wrapper {\n\t\tdisplay: flex;\n\t\talign-self: center;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\n\t\t&:deep(.material-design-icon) {\n\t\t\twidth: var(--default-clickable-area);\n\t\t\theight: var(--default-clickable-area);\n\t\t\topacity: $opacity_full;\n\n\t\t\t.material-design-icon__svg {\n\t\t\t\tvertical-align: middle;\n\t\t\t}\n\t\t}\n\t}\n\n\t& > span {\n\t\tcursor: pointer;\n\t\twhite-space: nowrap;\n\t}\n\n\t&__icon {\n\t\tmin-width: 0; /* Overwrite icons*/\n\t\tmin-height: 0;\n\t\t// Keep padding to define the width to assure correct position of a possible text\n\t\tpadding: calc(var(--default-clickable-area) / 2) 0 calc(var(--default-clickable-area) / 2) var(--default-clickable-area);\n\n\t\tbackground-position: #{$icon-margin} center;\n\t\tbackground-size: $icon-size;\n\t}\n\n\t// Forms & text inputs\n\t&__form {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tflex: 1 1 auto;\n\n\t\tmargin: $input-margin 0;\n\t\tpadding-inline-end: $icon-margin;\n\t}\n\n\t&__container {\n\t\tposition: relative;\n\t\twidth: 100%;\n\t}\n\n\t&__input-container {\n\t\tdisplay: flex;\n\n\t\t.colorpicker {\n\t\t\t&__trigger,\n\t\t\t&__preview {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\n\t\t\t&__preview {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 36px;\n\t\t\t\tborder-radius: var(--border-radius-large);\n\t\t\t\tborder: 2px solid var(--color-border-maxcontrast);\n\t\t\t\tbox-shadow: none !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__text-label {\n\t\tpadding: 4px 0;\n\t\tdisplay: block;\n\n\t\t&--hidden {\n\t\t\tposition: absolute;\n\t\t\tinset-inline-start: 0;\n\t\t\twidth: 1px;\n\t\t\theight: 1px;\n\t\t\toverflow: hidden;\n\t\t\tz-index: -1;\n\t\t\topacity: 0;\n\t\t}\n\t}\n\n\t&__datetimepicker {\n\t\twidth: 100%;\n\n\t\t:deep(.mx-input) {\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\n\t&__multi {\n\t\twidth: 100%;\n\t}\n}\n\n// if a form is the last of the list\n// add the same bottomMargin as the right padding\n// for visual balance\nli:last-child > .action-input {\n\tpadding-bottom: calc($icon-margin - $input-margin);\n}\n\n// same for first item\nli:first-child > .action-input:not(.action-input--visible-label) {\n\tpadding-top: calc($icon-margin - $input-margin);\n}\n\n</style>\n"],"names":["NcDateTimePickerNative","NcPasswordField","NcTextField","defineAsyncComponent","ActionGlobalMixin","GenRandomId","t","useModelMigration"],"mappings":"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"}