@nextcloud/vue 9.0.0-alpha.7 → 9.0.0-alpha.8

package/dist/chunks/{NcButton-QmfEsvXC.mjs → NcButton-BHLqKKYP.mjs}

@@ -1,6 +1,18 @@
-import '../assets/NcButton-C50FLvfa.css';
+import '../assets/NcButton-wmjlEdLP.css';
 import { Comment, Fragment, Text, defineComponent, h, resolveComponent } from "vue";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+function isSlotPopulated(vnodes) {
+  return Array.isArray(vnodes) && vnodes.some((node) => {
+    if (node === null) return false;
+    if (typeof node === "object") {
+      const vnode = node;
+      if (vnode.type === Comment) return false;
+      if (vnode.type === Fragment && !isSlotPopulated(vnode.children)) return false;
+      if (vnode.type === Text && !vnode.children.trim()) return false;
+    }
+    return true;
+  });
+}
 var ButtonAlignment = /* @__PURE__ */ ((ButtonAlignment2) => {
   ButtonAlignment2["Start"] = "start";
   ButtonAlignment2["StartReverse"] = "start-reverse";
@@ -10,35 +22,23 @@ var ButtonAlignment = /* @__PURE__ */ ((ButtonAlignment2) => {
   ButtonAlignment2["EndReverse"] = "end-reverse";
   return ButtonAlignment2;
 })(ButtonAlignment || {});
-var ButtonNativeType = /* @__PURE__ */ ((ButtonNativeType2) => {
-  ButtonNativeType2["Submit"] = "submit";
-  ButtonNativeType2["Reset"] = "reset";
-  ButtonNativeType2["Button"] = "button";
-  return ButtonNativeType2;
-})(ButtonNativeType || {});
 var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
-  ButtonType2["Primary"] = "primary";
-  ButtonType2["Secondary"] = "secondary";
-  ButtonType2["Tertiary"] = "tertiary";
-  ButtonType2["TertiaryNoBackground"] = "tertiary-no-background";
-  ButtonType2["TertiaryOnPrimary"] = "tertiary-on-primary";
-  ButtonType2["Error"] = "error";
-  ButtonType2["Warning"] = "warning";
-  ButtonType2["Success"] = "success";
+  ButtonType2["Submit"] = "submit";
+  ButtonType2["Reset"] = "reset";
+  ButtonType2["Button"] = "button";
   return ButtonType2;
 })(ButtonType || {});
-const isSlotPopulated = function(vnodes) {
-  return Array.isArray(vnodes) && vnodes.some((node) => {
-    if (node === null) return false;
-    if (typeof node === "object") {
-      const vnode = node;
-      if (vnode.type === Comment) return false;
-      if (vnode.type === Fragment && !isSlotPopulated(vnode.children)) return false;
-      if (vnode.type === Text && !vnode.children.trim()) return false;
-    }
-    return true;
-  });
-};
+var ButtonVariant = /* @__PURE__ */ ((ButtonVariant2) => {
+  ButtonVariant2["Primary"] = "primary";
+  ButtonVariant2["Secondary"] = "secondary";
+  ButtonVariant2["Tertiary"] = "tertiary";
+  ButtonVariant2["TertiaryNoBackground"] = "tertiary-no-background";
+  ButtonVariant2["TertiaryOnPrimary"] = "tertiary-on-primary";
+  ButtonVariant2["Error"] = "error";
+  ButtonVariant2["Warning"] = "warning";
+  ButtonVariant2["Success"] = "success";
+  return ButtonVariant2;
+})(ButtonVariant || {});
 const _sfc_main = defineComponent({
   name: "NcButton",
   inject: {
@@ -80,33 +80,18 @@ const _sfc_main = defineComponent({
       }
     },
     /**
-     * Specifies the button type
-     * If left empty, the default button style will be applied.
+     * Specifies the HTML button type.
+     * Accepted values: submit, reset, button.
      *
-     * @default 'secondary'
-     * @type {'primary' | 'secondary' | 'tertiary' | 'tertiary-no-background' | 'tertiary-on-primary' | 'error' | 'warning' | 'success'}
+     * @default 'button'
      */
     type: {
       type: String,
-      default: ButtonType.Secondary,
+      default: ButtonType.Button,
       validator(value) {
         return Object.values(ButtonType).includes(value);
       }
     },
-    /**
-     * Specifies the button native type
-     * If left empty, the default "button" type will be used.
-     *
-     * @default 'button'
-     * @type {'submit' | 'reset' | 'button'}
-     */
-    nativeType: {
-      type: String,
-      default: ButtonNativeType.Button,
-      validator(value) {
-        return Object.values(ButtonNativeType).includes(value);
-      }
-    },
     /**
      * Specifies whether the button should span all the available width.
      * By default, buttons span the whole width of the container.
@@ -174,6 +159,21 @@ const _sfc_main = defineComponent({
     pressed: {
       type: Boolean,
       default: null
+    },
+    /**
+     * Specifies the button variant.
+     *
+     * Accepted values: primary, secondary, tertiary, tertiary-no-background, tertiary-on-primary, error, warning, success.
+     *
+     * @default 'secondary'
+     * @since 8.23.0
+     */
+    variant: {
+      type: String,
+      validator(value) {
+        return ["primary", "secondary", "tertiary", "tertiary-no-background", "tertiary-on-primary", "error", "warning", "success"].includes(value);
+      },
+      default: "secondary"
     }
   },
   emits: ["update:pressed", "click"],
@@ -182,13 +182,22 @@ const _sfc_main = defineComponent({
      * The real type to be used for the button, enforces `primary` for pressed state and, if stateful button, any other type for not pressed state
      * Otherwise the type property is used.
      */
-    realType() {
+    realVariant() {
       if (this.pressed) {
         return "primary";
       }
-      if (this.pressed === false && this.type === "primary") {
+      if (this.pressed === false && this.variant === "primary") {
         return "secondary";
       }
+      return this.variant;
+    },
+    /**
+     * The HTML button type
+     */
+    realType() {
+      if (typeof this.pressed === "boolean") {
+        return "button";
+      }
       return this.type;
     },
     /**
@@ -237,7 +246,7 @@ const _sfc_main = defineComponent({
             "button-vue--icon-only": hasIcon && !hasText,
             "button-vue--text-only": hasText && !hasIcon,
             "button-vue--icon-and-text": hasIcon && hasText,
-            [`button-vue--vue-${this.realType}`]: this.realType,
+            [`button-vue--vue-${this.realVariant}`]: this.realVariant,
             "button-vue--wide": this.wide,
             [`button-vue--${this.flexAlignment}`]: this.flexAlignment !== "center",
             "button-vue--reverse": this.isReverseAligned,
@@ -247,7 +256,7 @@ const _sfc_main = defineComponent({
         "aria-label": this.ariaLabel,
         "aria-pressed": hasPressed ? this.pressed.toString() : void 0,
         disabled: this.disabled,
-        type: isLink ? null : this.nativeType,
+        type: isLink ? null : this.type,
         role: isLink ? "button" : null,
         href: this.to ? href : this.href || null,
         target: isLink ? this.target : null,
@@ -288,11 +297,12 @@ const _sfc_main = defineComponent({
     return renderButton();
   }
 });
-const NcButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0c90d19d"]]);
+const NcButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-30a46cdb"]]);
 export {
   ButtonAlignment as B,
   NcButton as N,
-  ButtonNativeType as a,
-  ButtonType as b,
+  ButtonType as a,
+  ButtonVariant as b,
   isSlotPopulated as i
 };
+//# sourceMappingURL=NcButton-BHLqKKYP.mjs.map

package/dist/chunks/NcButton-BHLqKKYP.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcButton-BHLqKKYP.mjs","sources":["../../src/utils/isSlotPopulated.ts","../../src/components/NcButton/types.ts","../../src/components/NcButton/NcButton.vue"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport type { VNode, VNodeNormalizedChildren } from 'vue'\nimport { Fragment, Comment, Text } from 'vue'\n\n/**\n * Checks whether a slot is populated\n *\n * @param vnodes The array of vnodes to check\n */\nexport function isSlotPopulated(vnodes?: VNode[] | VNodeNormalizedChildren) {\n\treturn Array.isArray(vnodes) && vnodes.some(node => {\n\t\tif (node === null) return false\n\t\tif (typeof node === 'object') {\n\t\t\tconst vnode = node as VNode\n\t\t\tif (vnode.type === Comment) return false\n\t\t\tif (vnode.type === Fragment && !isSlotPopulated(vnode.children)) return false\n\t\t\tif (vnode.type === Text && !(vnode.children as string).trim()) return false\n\t\t}\n\t\treturn true\n\t})\n}\n","/**\n * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nexport enum ButtonAlignment {\n\tStart = 'start',\n\tStartReverse = 'start-reverse',\n\tCenter = 'center',\n\tCenterReverse = 'center-reverse',\n\tEnd = 'end',\n\tEndReverse = 'end-reverse',\n}\n\nexport enum ButtonType {\n\tSubmit = 'submit',\n\tReset = 'reset',\n\tButton = 'button',\n}\n\nexport enum ButtonVariant {\n\tPrimary = 'primary',\n\tSecondary = 'secondary',\n\tTertiary = 'tertiary',\n\tTertiaryNoBackground = 'tertiary-no-background',\n\tTertiaryOnPrimary = 'tertiary-on-primary',\n\tError = 'error',\n\t/**\n\t * @deprecated Design-wise not recommended for new code\n\t */\n\tWarning = 'warning',\n\tSuccess = 'success',\n}\n","<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### General description\nGeneral purpose button component. See props for different options.\n[Use material design icons only for icons](https://www.npmjs.com/package/vue-material-design-icons) and remember to set their size to 20.\n\n### Usage\n### Custom icon slot\nTo be used with `vue-material-design-icons` only. For icon classes use the `default-icon` slot.\nIt can be used with one or multiple actions.\n```\n<template>\n<div class=\"wrapper\">\n\t<!-- Style selector -->\n\t<div class=\"grid\">\n\t\t<NcCheckboxRadioSwitch v-model=\"style\" value=\"text\" name=\"style\" type=\"radio\">Text only</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"style\" value=\"icon\" name=\"style\" type=\"radio\">Icon only</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"style\" value=\"icontext\" name=\"style\" type=\"radio\">Icon and text</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"disabled\" type=\"checkbox\">Disabled</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"size\" value=\"small\" name=\"size\" type=\"radio\">Small</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"size\" value=\"normal\" name=\"size\" type=\"radio\">Normal (default)</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"size\" value=\"large\" name=\"size\" type=\"radio\">Large</NcCheckboxRadioSwitch>\n\t</div>\n\n\t<h5>Standard buttons</h5>\n\t<div class=\"grid\">\n\t\t<p>Tertiary, no background</p>\n\t\t<p>Tertiary</p>\n\t\t<p>Secondary</p>\n\t\t<p>Primary</p>\n\t\t<NcButton\n\t\t\taria-label=\"Example text\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:size=\"size\"\n\t\t\tvariant=\"tertiary-no-background\">\n\t\t\t<template v-if=\"style.indexOf('icon') !== -1\" #icon>\n\t\t\t\t<Video\n\t\t\t\t\t:size=\"20\" />\n\t\t\t</template>\n\t\t\t<template v-if=\"style.indexOf('text') !== -1\">Example text</template>\n\t\t</NcButton>\n\t\t<NcButton\n\t\t\taria-label=\"Example text\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:size=\"size\"\n\t\t\tvariant=\"tertiary\">\n\t\t\t<template v-if=\"style.indexOf('icon') !== -1\" #icon>\n\t\t\t\t<Video\n\t\t\t\t\t:size=\"20\" />\n\t\t\t</template>\n\t\t\t<template v-if=\"style.indexOf('text') !== -1\">Example text</template>\n\t\t</NcButton>\n\t\t<NcButton\n\t\t\taria-label=\"Example text\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:size=\"size\">\n\t\t\t<template v-if=\"style.indexOf('icon') !== -1\" #icon>\n\t\t\t\t<Video\n\t\t\t\t\t:size=\"20\" />\n\t\t\t</template>\n\t\t\t<template v-if=\"style.indexOf('text') !== -1\">Example text</template>\n\t\t</NcButton>\n\t\t<NcButton\n\t\t\taria-label=\"Example text\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:size=\"size\"\n\t\t\tvariant=\"primary\">\n\t\t\t<template v-if=\"style.indexOf('icon') !== -1\" #icon>\n\t\t\t\t<Video\n\t\t\t\t\t:size=\"20\" />\n\t\t\t</template>\n\t\t\t<template v-if=\"style.indexOf('text') !== -1\">Example text</template>\n\t\t</NcButton>\n\t</div>\n\n\t<!-- Wide button -->\n\t<h5>Wide button</h5>\n\t<NcButton\n\t\t:disabled=\"disabled\"\n\t\t:size=\"size\"\n\t\t:wide=\"true\"\n\t\ttext=\"Example text\">\n\t\t<template #icon>\n\t\t\t<Video\n\t\t\t\t:size=\"20\" />\n\t\t</template>\n\t\tExample text\n\t</NcButton>\n\n\t<!-- Special buttons -->\n\t<h5>Special buttons</h5>\n\t<div class=\"grid\">\n\t\t<p>Success</p>\n\t\t<p>Warning</p>\n\t\t<p>Error</p>\n\t\t<p> - </p>\n\t\t<NcButton\n\t\t\t:disabled=\"disabled\"\n\t\t\t:size=\"size\"\n\t\t\tvariant=\"success\">\n\t\t\t<template #icon>\n\t\t\t\t<Video\n\t\t\t\t\t:size=\"20\" />\n\t\t\t</template>\n\t\t\tExample text\n\t\t</NcButton>\n\t\t<NcButton\n\t\t\t:disabled=\"disabled\"\n\t\t\t:size=\"size\"\n\t\t\tvariant=\"warning\">\n\t\t\t<template #icon>\n\t\t\t\t<Video\n\t\t\t\t\t:size=\"20\" />\n\t\t\t</template>\n\t\t\tExample text\n\t\t</NcButton>\n\t\t<NcButton\n\t\t\t:disabled=\"disabled\"\n\t\t\t:size=\"size\"\n\t\t\tvariant=\"error\">\n\t\t\t<template #icon>\n\t\t\t\t<Video\n\t\t\t\t\t:size=\"20\" />\n\t\t\t</template>\n\t\t\tExample text\n\t\t</NcButton>\n\t\t<p> - </p>\n\t</div>\n</div>\n\n</template>\n<script>\nimport Video from 'vue-material-design-icons/Video.vue'\n\nexport default {\n\tcomponents: {\n\t\tVideo,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\ttoggled: false,\n\t\t\tdisabled: false,\n\t\t\tsize: 'normal',\n\t\t\tstyle: 'icontext',\n\t\t}\n\t}\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.wrapper {\n\tpadding: 0 12px;\n}\n\n.grid {\n\tdisplay: grid;\n\tgap: 12px;\n\tgrid-template-columns: 1fr 1fr 1fr 1fr;\n\tgrid-template-rows: repeat(auto-fill, auto);\n\tposition: relative;\n\tmargin: 12px 0;\n}\n\nh5 {\n\tfont-weight: bold;\n\tmargin: 40px 0 20px 0;\n}\n\np {\n\ttext-align: center;\n\tmargin: 4px 0 12px 0;\n\tcolor: var(--color-text-maxcontrast)\n}\n\nbutton {\n\tmargin: auto;\n}\n</style>\n```\n\n### Alignment\nSometimes it is required to change the icon alignment on the button, like for switching between pages as in following example:\n\n```vue\n<template>\n\t<div style=\"display: flex; flex-direction: column; gap: 12px;\">\n\t\t<NcButton aria-label=\"center (default)\" variant=\"secondary\" wide>\n\t\t\t<template #icon>\n\t\t\t\t<IconLeft :size=\"20\" />\n\t\t\t</template>\n\t\t\tcenter (default)\n\t\t</NcButton>\n\t\t<NcButton alignment=\"center-reverse\" aria-label=\"center-reverse\" variant=\"secondary\" wide>\n\t\t\t<template #icon>\n\t\t\t\t<IconRight :size=\"20\" />\n\t\t\t</template>\n\t\t\tcenter-reverse\n\t\t</NcButton>\n\t\t<div style=\"display: flex; gap: 12px;\">\n\t\t\t<div style=\"display: flex; flex-direction: column; gap: 12px; flex: 1\">\n\t\t\t\t<NcButton alignment=\"start\" aria-label=\"start\" variant=\"secondary\" wide>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconLeft :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tstart\n\t\t\t\t</NcButton>\n\t\t\t\t<NcButton alignment=\"start-reverse\" aria-label=\"start-reverse\" variant=\"secondary\" wide>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconRight :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tstart-reverse\n\t\t\t\t</NcButton>\n\t\t\t</div>\n\t\t\t<div style=\"display: flex; flex-direction: column; gap: 12px; flex: 1\">\n\t\t\t\t<NcButton alignment=\"end\" aria-label=\"end\" variant=\"secondary\" wide>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconLeft :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tend\n\t\t\t\t</NcButton>\n\t\t\t\t<NcButton alignment=\"end-reverse\" aria-label=\"end-reverse\" variant=\"secondary\" wide>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconRight :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tend-reverse\n\t\t\t\t</NcButton>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</template>\n<script>\nimport IconLeft from 'vue-material-design-icons/ArrowLeft.vue'\nimport IconRight from 'vue-material-design-icons/ArrowRight.vue'\n\nexport default {\n\tcomponents: {\n\t\tIconLeft,\n\t\tIconRight,\n\t},\n}\n</script>\n```\n\n### Pressed state\n\nIt is possible to make the button stateful by adding a pressed state, e.g. if you like to create a favorite button.\nThe button will have the required `aria` attribute for accessibility and visual style (`primary` when pressed, and the configured variant otherwise).\n\nDo not change `text` or `aria-label` of the pressed/unpressed button. See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed\n\n```vue\n<template>\n\t<div>\n\t\t<div style=\"display: flex; gap: 12px;\">\n\t\t\t<NcButton v-model:pressed=\"isFavorite\" aria-label=\"Favorite\" variant=\"tertiary-no-background\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconStar v-if=\"isFavorite\" :size=\"20\" />\n\t\t\t\t\t<IconStarOutline v-else :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\t\t\t<NcButton v-model:pressed=\"isFavorite\" variant=\"tertiary\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconStar v-if=\"isFavorite\" :size=\"20\" />\n\t\t\t\t\t<IconStarOutline v-else :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tFavorite\n\t\t\t</NcButton>\n\t\t\t<NcButton v-model:pressed=\"isFavorite\" aria-label=\"Favorite\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconStar v-if=\"isFavorite\" :size=\"20\" />\n\t\t\t\t\t<IconStarOutline v-else :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\t\t</div>\n\t\t<div>\n\t\t\tIt is {{ isFavorite ? 'a' : 'not a' }} favorite.\n\t\t</div>\n\t</div>\n</template>\n<script>\nimport IconStar from 'vue-material-design-icons/Star.vue'\nimport IconStarOutline from 'vue-material-design-icons/StarOutline.vue'\n\nexport default {\n\tcomponents: {\n\t\tIconStar,\n\t\tIconStarOutline,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tisFavorite: false,\n\t\t}\n\t},\n\tmethods: {\n\t\ttoggleFavorite() {\n\t\t\tthis.isFavorite = !this.isFavorite\n\t\t},\n\t},\n}\n</script>\n```\n\n### Usage example: Sorting table columns\nThe standard way to implement sortable table column headers should be like this:\n\n```vue\n<template>\n\t<table>\n\t\t<thead>\n\t\t\t<tr>\n\t\t\t\t<th :aria-sorted=\"sortedName\" class=\"row-name\">\n\t\t\t\t\t<NcButton alignment=\"start-reverse\"\n\t\t\t\t\t\t:wide=\"true\"\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t@click=\"sortName\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<IconDown v-if=\"sortedName === 'ascending'\" class=\"sort-icon\" :size=\"20\" />\n\t\t\t\t\t\t\t<IconUp v-else-if=\"sortedName === 'descending'\" class=\"sort-icon\" :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<span class=\"table-header\">Name</span>\n\t\t\t\t\t</NcButton>\n\t\t\t\t</th>\n\t\t\t\t<th :aria-sorted=\"sortedSize\" class=\"row-size\">\n\t\t\t\t\t<NcButton alignment=\"end\"\n\t\t\t\t\t\t:wide=\"true\"\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t@click=\"sortSize\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<IconDown v-if=\"sortedSize === 'ascending'\" class=\"sort-icon\" :size=\"20\" />\n\t\t\t\t\t\t\t<IconUp v-else-if=\"sortedSize === 'descending'\" class=\"sort-icon\" :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<span class=\"table-header\">Size</span>\n\t\t\t\t\t</NcButton>\n\t\t\t\t</th>\n\t\t\t</tr>\n\t\t</thead>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t<td class=\"row-name\">Lorem ipsum</td>\n\t\t\t\t<td class=\"row-size\">8 MiB</td>\n\t\t\t</tr>\n\t\t</tbody>\n\t</table>\n</template>\n<script>\nimport IconUp from 'vue-material-design-icons/MenuUp.vue'\nimport IconDown from 'vue-material-design-icons/MenuDown.vue'\n\nexport default {\n\tcomponents: {\n\t\tIconUp,\n\t\tIconDown,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tsortedName: null,\n\t\t\tsortedSize: null,\n\t\t}\n\t},\n\tmethods: {\n\t\tsortName() {\n\t\t\tif (this.sortedName === 'ascending') {\n\t\t\t\tthis.sortedName = 'descending'\n\t\t\t} else if (this.sortedName === 'descending') {\n\t\t\t\tthis.sortedName = null\n\t\t\t} else {\n\t\t\t\tthis.sortedName = 'ascending'\n\t\t\t}\n\t\t},\n\t\tsortSize() {\n\t\t\tif (this.sortedSize === 'ascending') {\n\t\t\t\tthis.sortedSize = 'descending'\n\t\t\t} else if (this.sortedSize === 'descending') {\n\t\t\t\tthis.sortedSize = null\n\t\t\t} else {\n\t\t\t\tthis.sortedSize = 'ascending'\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n<style>\ntable {\n\ttable-layout: fixed;\n\twidth: 300px;\n}\n\ntd.row-name {\n\tpadding-inline-start: 16px;\n}\n\ntd.row-size {\n\ttext-align: end;\n\tpadding-inline-end: 16px;\n}\n\n.table-header {\n\tfont-weight: normal;\n\tcolor: var(--color-text-maxcontrast);\n}\n\n.sort-icon {\n\tcolor: var(--color-text-maxcontrast);\n\tposition: relative;\n\tinset-inline: -10px;\n}\n\n.row-size .sort-icon {\n\tinset-inline: 10px;\n}\n</style>\n```\n\n</docs>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\n\nimport { defineComponent, h, resolveComponent } from 'vue'\nimport { ButtonAlignment, ButtonType } from './types.ts'\nimport { isSlotPopulated } from '../../utils/isSlotPopulated.ts'\n\nexport default defineComponent({\n\tname: 'NcButton',\n\n\tinject: {\n\t\tgetNcPopoverTriggerAttrs: {\n\t\t\tfrom: 'NcPopover:trigger:attrs',\n\t\t\tdefault: () => () => ({}),\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Set the text and icon alignment\n\t\t *\n\t\t * @default 'center'\n\t\t * @type {'start' | 'start-reverse' | 'center' | 'center-reverse' | 'end' | 'end-reverse'}\n\t\t */\n\t\talignment: {\n\t\t\ttype: String as PropType<ButtonAlignment>,\n\t\t\tdefault: ButtonAlignment.Center,\n\t\t\tvalidator(value: string) {\n\t\t\t\treturn Object.values(ButtonAlignment).includes(value as ButtonAlignment)\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * Toggles the disabled state of the button on and off.\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 * Specify the button size\n\t\t * Accepted values: `'small'`, `'normal'` (default), `'large'`\n\t\t */\n\t\tsize: {\n\t\t\ttype: String,\n\t\t\tdefault: 'normal',\n\t\t\tvalidator(value: string) {\n\t\t\t\treturn ['small', 'normal', 'large'].includes(value)\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * Specifies the HTML button type.\n\t\t * Accepted values: submit, reset, button.\n\t\t *\n\t\t * @default 'button'\n\t\t */\n\t\ttype: {\n\t\t\ttype: String as PropType<ButtonType | `${ButtonType}`>,\n\t\t\tdefault: ButtonType.Button,\n\t\t\tvalidator(value: string) {\n\t\t\t\treturn Object.values(ButtonType).includes(value as ButtonType)\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * Specifies whether the button should span all the available width.\n\t\t * By default, buttons span the whole width of the container.\n\t\t */\n\t\twide: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Always try to provide an aria-label to your button. Make it more\n\t\t * specific than the button's name by provide some more context. E.g. if\n\t\t * the name of the button is \"send\" in the Mail app, the aria label could\n\t\t * be \"Send email\".\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Providing the href attribute turns the button component into an `a`\n\t\t * element.\n\t\t */\n\t\thref: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Target for the `a` element if `href` is set.\n\t\t * @default '_self'\n\t\t */\n\t\ttarget: {\n\t\t\ttype: String,\n\t\t\tdefault: '_self',\n\t\t},\n\n\t\t/**\n\t\t * Providing the download attribute with href downloads file when clicking.\n\t\t */\n\t\tdownload: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Providing the to attribute turns the button component into a `router-link`\n\t\t * element. Takes precedence over the href attribute.\n\t\t */\n\t\tto: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: null,\n\t\t},\n\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 * The pressed state of the button if it has a checked state\n\t\t * This will add the `aria-pressed` attribute and for the button to have the primary style in checked state.\n\t\t *\n\t\t * Pressed state is not supported for links\n\t\t */\n\t\tpressed: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Specifies the button variant.\n\t\t *\n\t\t * Accepted values: primary, secondary, tertiary, tertiary-no-background, tertiary-on-primary, error, warning, success.\n\t\t *\n\t\t * @default 'secondary'\n\t\t * @since 8.23.0\n\t\t */\n\t\t variant: {\n\t\t\ttype: String as PropType<ButtonVariant | `${ButtonVariant}`>,\n\t\t\tvalidator(value: string) {\n\t\t\t\treturn ['primary', 'secondary', 'tertiary', 'tertiary-no-background', 'tertiary-on-primary', 'error', 'warning', 'success'].includes(value)\n\t\t\t},\n\t\t\tdefault: 'secondary',\n\t\t},\n\t},\n\n\temits: ['update:pressed', 'click'],\n\n\tcomputed: {\n\t\t/**\n\t\t * The real type to be used for the button, enforces `primary` for pressed state and, if stateful button, any other type for not pressed state\n\t\t * Otherwise the type property is used.\n\t\t */\n\t\trealVariant() {\n\t\t\t// Force *primary* when pressed\n\t\t\tif (this.pressed) {\n\t\t\t\treturn 'primary'\n\t\t\t}\n\t\t\t// If not pressed but button is configured as stateful button then the type must not be primary\n\t\t\tif (this.pressed === false && this.variant === 'primary') {\n\t\t\t\treturn 'secondary'\n\t\t\t}\n\t\t\treturn this.variant\n\t\t},\n\n\t\t/**\n\t\t * The HTML button type\n\t\t */\n\t\trealType() {\n\t\t\tif (typeof this.pressed === 'boolean') {\n\t\t\t\treturn 'button'\n\t\t\t}\n\t\t\treturn this.type\n\t\t},\n\n\t\t/**\n\t\t * The flexbox alignment of the button content\n\t\t */\n\t\tflexAlignment() {\n\t\t\treturn this.alignment.split('-')[0]\n\t\t},\n\n\t\t/**\n\t\t * If the button content should be reversed (icon on the end)\n\t\t */\n\t\tisReverseAligned() {\n\t\t\treturn this.alignment.includes('-')\n\t\t},\n\n\t\tncPopoverTriggerAttrs() {\n\t\t\treturn (this.getNcPopoverTriggerAttrs as () => Record<string, string|undefined>)()\n\t\t},\n\t},\n\n\t/**\n\t * The render function to display the component\n\t *\n\t * @return {object|undefined} The created VNode\n\t */\n\trender() {\n\t\tconst hasText = isSlotPopulated(this.$slots.default?.())\n\t\tconst hasIcon = isSlotPopulated(this.$slots.icon?.())\n\n\t\t/**\n\t\t * Always fill either the text prop or the ariaLabel one.\n\t\t */\n\t\tif (!hasText && !this.ariaLabel) {\n\t\t\tconsole.warn('You need to fill either the text or the ariaLabel props in the button component.', {\n\t\t\t\ttext: this.$slots.default?.()?.[0]?.children,\n\t\t\t\tariaLabel: this.ariaLabel,\n\t\t\t},\n\t\t\tthis)\n\t\t}\n\n\t\tconst isLink = (this.to || this.href)\n\n\t\tconst hasPressed = !isLink && typeof this.pressed === 'boolean'\n\n\t\tconst renderButton = ({ href, navigate, isActive }: {href?: string, navigate?: (ev: Event) => void, isActive?: boolean } = {}) => h(isLink ? 'a' : 'button',\n\t\t\t{\n\t\t\t\tclass: [\n\t\t\t\t\t'button-vue',\n\t\t\t\t\t`button-vue--size-${this.size}`,\n\t\t\t\t\t{\n\t\t\t\t\t\t'button-vue--icon-only': hasIcon && !hasText,\n\t\t\t\t\t\t'button-vue--text-only': hasText && !hasIcon,\n\t\t\t\t\t\t'button-vue--icon-and-text': hasIcon && hasText,\n\t\t\t\t\t\t[`button-vue--vue-${this.realVariant}`]: this.realVariant,\n\t\t\t\t\t\t'button-vue--wide': this.wide,\n\t\t\t\t\t\t[`button-vue--${this.flexAlignment}`]: this.flexAlignment !== 'center',\n\t\t\t\t\t\t'button-vue--reverse': this.isReverseAligned,\n\t\t\t\t\t\tactive: isActive,\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t\t'aria-label': this.ariaLabel,\n\t\t\t\t'aria-pressed': hasPressed ? this.pressed.toString() : undefined,\n\t\t\t\tdisabled: this.disabled,\n\t\t\t\ttype: isLink ? null : this.type,\n\t\t\t\trole: isLink ? 'button' : null,\n\t\t\t\thref: this.to ? href : (this.href || null),\n\t\t\t\ttarget: isLink ? this.target : null,\n\t\t\t\trel: isLink ? 'nofollow noreferrer noopener' : null,\n\t\t\t\tdownload: (!this.to && this.href && this.download) ? this.download : null,\n\t\t\t\t// If this button is used as a popover trigger, we need to apply trigger attrs, e.g. aria attributes\n\t\t\t\t...this.ncPopoverTriggerAttrs,\n\t\t\t\tonClick: ($event) => {\n\t\t\t\t\t// Update pressed prop on click if it is set\n\t\t\t\t\tif (hasPressed) {\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * Update the current pressed state of the button (if the `pressed` property was configured)\n\t\t\t\t\t\t *\n\t\t\t\t\t\t * @property {boolean} newValue The new `pressed`-state\n\t\t\t\t\t\t */\n\t\t\t\t\t\tthis.$emit('update:pressed', !this.pressed)\n\t\t\t\t\t}\n\t\t\t\t\t// We have to both navigate and emit the click event\n\t\t\t\t\tthis.$emit('click', $event)\n\t\t\t\t\tnavigate?.($event)\n\t\t\t\t},\n\t\t\t},\n\t\t\t[\n\t\t\t\th('span', { class: 'button-vue__wrapper' }, [\n\t\t\t\t\thasIcon\n\t\t\t\t\t\t? h('span', {\n\t\t\t\t\t\t\tclass: 'button-vue__icon',\n\t\t\t\t\t\t\t'aria-hidden': 'true',\n\t\t\t\t\t\t},\n\t\t\t\t\t\t[this.$slots.icon?.()],\n\t\t\t\t\t\t)\n\t\t\t\t\t\t: null,\n\t\t\t\t\thasText ? h('span', { class: 'button-vue__text' }, [this.$slots.default?.()]) : null,\n\t\t\t\t]),\n\t\t\t],\n\t\t)\n\n\t\t// If we have a router-link, we wrap the button in it\n\t\tif (this.to) {\n\t\t\treturn h(resolveComponent('router-link'), {\n\t\t\t\tcustom: true,\n\t\t\t\tto: this.to,\n\t\t\t}, {\n\t\t\t\tdefault: renderButton,\n\t\t\t})\n\t\t}\n\t\t// Otherwise we simply return the button\n\t\treturn renderButton()\n\t},\n})\n</script>\n\n<style lang=\"scss\" scoped>\n.button-vue {\n\t// Setup different button sizes\n\t--button-size: var(--default-clickable-area);\n\t--button-radius: var(--border-radius-element, calc(var(--button-size) / 2));\n\t--button-padding: clamp(var(--default-grid-baseline), var(--button-radius), calc(var(--default-grid-baseline) * 4));\n\n\t&--size-small {\n\t\t--button-size: var(--clickable-area-small, 24px);\n\t\t--button-radius: var(--border-radius); // make the border radius even smaller for small buttons\n\t}\n\n\t&--size-large {\n\t\t--button-size: var(--clickable-area-large, 48px);\n\t}\n\n\t// General styles\n\tposition: relative;\n\twidth: fit-content;\n\toverflow: hidden;\n\tborder: 0;\n\tpadding: 0;\n\tfont-size: var(--default-font-size);\n\tfont-weight: bold;\n\tmin-height: var(--button-size);\n\tmin-width: var(--button-size);\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\n\t// Cursor pointer on element and all children\n\tcursor: pointer;\n\t& *,\n\tspan {\n\t\tcursor: pointer;\n\t}\n\tborder-radius: var(--button-radius);\n\ttransition-property: color, border-color, background-color;\n\ttransition-duration: 0.1s;\n\ttransition-timing-function: linear;\n\n\t// No outline feedback for focus. Handled with a toggled class in js (see data)\n\t&:focus {\n\t\toutline: none;\n\t}\n\n\t&:disabled {\n\t\tcursor: default;\n\t\t& * {\n\t\t\tcursor: default;\n\t\t}\n\t\topacity: $opacity_disabled;\n\t\t// Gives a wash out effect\n\t\tfilter: saturate($opacity_normal);\n\t}\n\n\t// Default button type\n\tcolor: var(--color-primary-element-light-text);\n\tbackground-color: var(--color-primary-element-light);\n\t&:hover:not(:disabled) {\n\t\tbackground-color: var(--color-primary-element-light-hover);\n\t}\n\n\t// Back to the default color for this button when active\n\t// TODO: add ripple effect\n\t&:active {\n\t\tbackground-color: var(--color-primary-element-light);\n\t}\n\n\t&__wrapper {\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 100%;\n\t}\n\n\t&--end &__wrapper {\n\t\tjustify-content: end;\n\t}\n\t&--start &__wrapper {\n\t\tjustify-content: start;\n\t}\n\t&--reverse &__wrapper {\n\t\tflex-direction: row-reverse;\n\t}\n\n\t&--reverse#{&}--icon-and-text {\n\t\tpadding-inline: var(--button-padding) var(--default-grid-baseline);\n\t}\n\n\t&__icon {\n\t\theight: var(--button-size);\n\t\twidth: var(--button-size);\n\t\tmin-height: var(--button-size);\n\t\tmin-width: var(--button-size);\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n\t// For small buttons we need to adjust the icon size\n\t&--size-small &__icon {\n\t\t:deep(> *) {\n\t\t\tmax-height: 16px;\n\t\t\tmax-width: 16px;\n\t\t}\n\t\t:deep(svg) {\n\t\t\theight: 16px;\n\t\t\twidth: 16px;\n\t\t}\n\t}\n\n\t&__text {\n\t\tfont-weight: bold;\n\t\tmargin-bottom: 1px;\n\t\tpadding: 2px 0;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\toverflow: hidden;\n\t}\n\n\t// Icon-only button\n\t&--icon-only {\n\t\tline-height: 1;\n\t\twidth: var(--button-size) !important;\n\t}\n\n\t// Text-only button\n\t&--text-only {\n\t\tpadding: 0 var(--button-padding);\n\t\t& .button-vue__text {\n\t\t\tmargin-inline: 4px;\n\t\t}\n\t}\n\n\t// Icon and text button\n\t&--icon-and-text {\n\t\t// icon and text means the icon adds \"visual\" padding thus we need to adjust the text padding\n\t\t--button-padding: min(calc(var(--default-grid-baseline) + var(--button-radius)), calc(var(--default-grid-baseline) * 4));\n\t\t// Adjust padding as the icon already got some padding we need to reduce the padding on the icon side and only add larger padding to the text side\n\t\tpadding-block: 0;\n\t\tpadding-inline: var(--default-grid-baseline) var(--button-padding);\n\t}\n\n\t// Wide button spans the whole width of the container\n\t&--wide {\n\t\twidth: 100%;\n\t}\n\n\t&:focus-visible {\n\t\toutline: 2px solid var(--color-main-text) !important;\n\t\tbox-shadow: 0 0 0 4px var(--color-main-background) !important;\n\t\t&.button-vue--vue-tertiary-on-primary {\n\t\t\toutline: 2px solid var(--color-primary-element-text);\n\t\t\tborder-radius: var(--border-radius-element, var(--border-radius));\n\t\t\tbackground-color: transparent;\n\t\t}\n\t}\n\n\t// Button types\n\n\t// Primary\n\t&--vue-primary {\n\t\tbackground-color: var(--color-primary-element);\n\t\tcolor: var(--color-primary-element-text);\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: var(--color-primary-element-hover);\n\t\t}\n\t\t// Back to the default color for this button when active\n\t\t// TODO: add ripple effect\n\t\t&:active {\n\t\t\tbackground-color: var(--color-primary-element);\n\t\t}\n\t}\n\n\t// Secondary\n\t&--vue-secondary {\n\t\tcolor: var(--color-primary-element-light-text);\n\t\tbackground-color: var(--color-primary-element-light);\n\t\t&:hover:not(:disabled) {\n\t\t\tcolor: var(--color-primary-element-light-text);\n\t\t\tbackground-color: var(--color-primary-element-light-hover);\n\t\t}\n\t}\n\n\t// Tertiary\n\t&--vue-tertiary {\n\t\tcolor: var(--color-main-text);\n\t\tbackground-color: transparent;\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: var(--color-background-hover);\n\t\t}\n\t}\n\n\t// Tertiary, no background\n\t&--vue-tertiary-no-background {\n\t\tcolor: var(--color-main-text);\n\t\tbackground-color: transparent;\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: transparent;\n\t\t}\n\t}\n\n\t// Tertiary on primary color (like the header)\n\t&--vue-tertiary-on-primary {\n\t\tcolor: var(--color-primary-element-text);\n\t\tbackground-color: transparent;\n\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: transparent;\n\t\t}\n\t}\n\n\t// Success\n\t&--vue-success {\n\t\tbackground-color: var(--color-success);\n\t\tcolor: white;\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: var(--color-success-hover);\n\t\t}\n\t\t// Back to the default color for this button when active\n\t\t// : add ripple effect\n\t\t&:active {\n\t\t\tbackground-color: var(--color-success);\n\t\t}\n\t}\n\n\t// Warning\n\t&--vue-warning {\n\t\tbackground-color: var(--color-warning);\n\t\tcolor: white;\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: var(--color-warning-hover);\n\t\t}\n\t\t// Back to the default color for this button when active\n\t\t// TODO: add ripple effect\n\t\t&:active {\n\t\t\tbackground-color: var(--color-warning);\n\t\t}\n\t}\n\n\t// Error\n\t&--vue-error {\n\t\tbackground-color: var(--color-error);\n\t\tcolor: white;\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: var(--color-error-hover);\n\t\t}\n\t\t// Back to the default color for this button when active\n\t\t// TODO: add ripple effect\n\t\t&:active {\n\t\t\tbackground-color: var(--color-error);\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["ButtonAlignment","ButtonType","ButtonVariant"],"mappings":"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"}

package/dist/chunks/{NcCheckboxRadioSwitch-Ctdu7_UC.mjs → NcCheckboxRadioSwitch-CWU_M_ui.mjs}

@@ -1,9 +1,9 @@
-import '../assets/NcCheckboxRadioSwitch-jfJIoM4m.css';
+import '../assets/NcCheckboxRadioSwitch-uwXbP_jb.css';
 import { createElementBlock, openBlock, mergeProps, createElementVNode, createCommentVNode, toDisplayString, resolveComponent, normalizeClass, renderSlot, createBlock, resolveDynamicComponent, toHandlers, withCtx, createVNode, createSlots } from "vue";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 import { N as NcLoadingIcon } from "./NcLoadingIcon-CsMn1bFR.mjs";
-import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
-import { r as register, P as n, a as t } from "./_l10n-BEP_UzXI.mjs";
+import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
+import { r as register, O as n, a as t } from "./_l10n-7kR7gXFc.mjs";
 const _sfc_main$8 = {
   name: "CheckboxBlankOutlineIcon",
   emits: ["click"],
@@ -451,7 +451,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
     ], 2)) : createCommentVNode("", true)
   ], 2);
 }
-const NcCheckboxContent = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-18de8bed"]]);
+const NcCheckboxContent = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-95d33103"]]);
 register();
 const _sfc_main = {
   name: "NcCheckboxRadioSwitch",
@@ -466,7 +466,7 @@ const _sfc_main = {
      */
     id: {
       type: String,
-      default: () => "checkbox-radio-switch-" + GenRandomId(),
+      default: () => "checkbox-radio-switch-" + createElementId(),
       validator: (id) => id.trim() !== ""
     },
     /**
@@ -794,7 +794,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 16, ["id", "aria-label", "class", "style", "type"]);
 }
-const NcCheckboxRadioSwitch = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-64447fbc"]]);
+const NcCheckboxRadioSwitch = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-b1b311bc"]]);
 export {
   NcCheckboxRadioSwitch as N
 };
+//# sourceMappingURL=NcCheckboxRadioSwitch-CWU_M_ui.mjs.map

package/dist/chunks/NcCheckboxRadioSwitch-CWU_M_ui.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcCheckboxRadioSwitch-CWU_M_ui.mjs","sources":["../../node_modules/vue-material-design-icons/CheckboxBlankOutline.vue","../../node_modules/vue-material-design-icons/MinusBox.vue","../../node_modules/vue-material-design-icons/CheckboxMarked.vue","../../node_modules/vue-material-design-icons/RadioboxMarked.vue","../../node_modules/vue-material-design-icons/RadioboxBlank.vue","../../node_modules/vue-material-design-icons/ToggleSwitchOff.vue","../../node_modules/vue-material-design-icons/ToggleSwitch.vue","../../src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue","../../src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon checkbox-blank-outline-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"CheckboxBlankOutlineIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon minus-box-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M17,13H7V11H17M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"MinusBoxIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon checkbox-marked-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"CheckboxMarkedIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon radiobox-marked-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"RadioboxMarkedIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon radiobox-blank-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"RadioboxBlankIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon toggle-switch-off-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M7,15A3,3 0 0,1 4,12A3,3 0 0,1 7,9A3,3 0 0,1 10,12A3,3 0 0,1 7,15Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"ToggleSwitchOffIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon toggle-switch-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M17,15A3,3 0 0,1 14,12A3,3 0 0,1 17,9A3,3 0 0,1 20,12A3,3 0 0,1 17,15Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"ToggleSwitchIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<!--\n  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<span class=\"checkbox-content\"\n\t\t:class=\"{\n\t\t\t['checkbox-content-' + type]: true,\n\t\t\t'checkbox-content--button-variant': buttonVariant,\n\t\t\t'checkbox-content--has-text': !!$slots.default,\n\t\t}\">\n\t\t<!--\n\t\t\tlabel can't be used here because of shift+click firefox bug\n\t\t\thttps://bugzilla.mozilla.org/show_bug.cgi?id=559506\n\t\t-->\n\t\t<span :class=\"{\n\t\t\t\t'checkbox-content__icon': true,\n\t\t\t\t'checkbox-content__icon--checked': isChecked,\n\t\t\t\t[iconClass]: true\n\t\t\t}\"\n\t\t\t:aria-hidden=\"true\"\n\t\t\tinert>\n\t\t\t<!-- @slot The checkbox/radio icon, you can use it for adding an icon to the button variant\n\t\t\t\t\t@binding {bool} checked The input checked state\n\t\t\t\t\t@binding {bool} loading The loading state\n\t\t\t-->\n\t\t\t<slot name=\"icon\"\n\t\t\t\t:checked=\"isChecked\"\n\t\t\t\t:loading=\"loading\">\n\t\t\t\t<NcLoadingIcon v-if=\"loading\" />\n\t\t\t\t<component :is=\"checkboxRadioIconElement\"\n\t\t\t\t\tv-else-if=\"!buttonVariant\"\n\t\t\t\t\t:size=\"size\" />\n\t\t\t</slot>\n\t\t</span>\n\n\t\t<span v-if=\"$slots.default\" :class=\"['checkbox-content__text', textClass]\">\n\t\t\t<!-- @slot The checkbox/radio label -->\n\t\t\t<slot />\n\t\t</span>\n\t</span>\n</template>\n\n<script>\nimport CheckboxBlankOutline from 'vue-material-design-icons/CheckboxBlankOutline.vue'\nimport MinusBox from 'vue-material-design-icons/MinusBox.vue'\nimport CheckboxMarked from 'vue-material-design-icons/CheckboxMarked.vue'\nimport RadioboxMarked from 'vue-material-design-icons/RadioboxMarked.vue'\nimport RadioboxBlank from 'vue-material-design-icons/RadioboxBlank.vue'\nimport ToggleSwitchOff from 'vue-material-design-icons/ToggleSwitchOff.vue'\nimport ToggleSwitch from 'vue-material-design-icons/ToggleSwitch.vue'\n\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\n\nexport const TYPE_CHECKBOX = 'checkbox'\nexport const TYPE_RADIO = 'radio'\nexport const TYPE_SWITCH = 'switch'\nexport const TYPE_BUTTON = 'button'\n\nexport default {\n\tname: 'NcCheckboxContent',\n\n\tcomponents: {\n\t\tNcLoadingIcon,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Class for the icon element\n\t\t */\n\t\ticonClass: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Class for the text element\n\t\t */\n\t\ttextClass: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Type of the input. checkbox, radio, switch, or button.\n\t\t *\n\t\t * Only use button when used in a `tablist` container and the\n\t\t * `tab` role is set.\n\t\t *\n\t\t * @type {'checkbox'|'radio'|'switch'|'button'}\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'checkbox',\n\t\t\tvalidator: type => [\n\t\t\t\tTYPE_CHECKBOX,\n\t\t\t\tTYPE_RADIO,\n\t\t\t\tTYPE_SWITCH,\n\t\t\t\tTYPE_BUTTON,\n\t\t\t].includes(type),\n\t\t},\n\n\t\t/**\n\t\t * Toggle the alternative button style\n\t\t */\n\t\tbuttonVariant: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * True if the entry is checked\n\t\t */\n\t\tisChecked: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Indeterminate state\n\t\t */\n\t\tindeterminate: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Loading state\n\t\t */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Icon size\n\t\t */\n\t\tsize: {\n\t\t\ttype: Number,\n\t\t\tdefault: 24,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tisButtonType() {\n\t\t\treturn this.type === TYPE_BUTTON\n\t\t},\n\n\t\t/**\n\t\t * Returns the proper Material icon depending on the select case\n\t\t *\n\t\t * @return {object}\n\t\t */\n\t\tcheckboxRadioIconElement() {\n\t\t\tif (this.type === TYPE_RADIO) {\n\t\t\t\tif (this.isChecked) {\n\t\t\t\t\treturn RadioboxMarked\n\t\t\t\t}\n\t\t\t\treturn RadioboxBlank\n\t\t\t}\n\n\t\t\t// Switch\n\t\t\tif (this.type === TYPE_SWITCH) {\n\t\t\t\tif (this.isChecked) {\n\t\t\t\t\treturn ToggleSwitch\n\t\t\t\t}\n\t\t\t\treturn ToggleSwitchOff\n\t\t\t}\n\n\t\t\t// Checkbox\n\t\t\tif (this.indeterminate) {\n\t\t\t\treturn MinusBox\n\t\t\t}\n\t\t\tif (this.isChecked) {\n\t\t\t\treturn CheckboxMarked\n\t\t\t}\n\t\t\treturn CheckboxBlankOutline\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.checkbox-content {\n\tdisplay: flex;\n\talign-items: center;\n\tflex-direction: row;\n\tgap: var(--default-grid-baseline);\n\tuser-select: none;\n\tmin-height: var(--default-clickable-area);\n\tborder-radius: var(--checkbox-radio-switch--border-radius);\n\tpadding: var(--default-grid-baseline) calc((var(--default-clickable-area) - var(--icon-height)) / 2);\n\t// Set to 100% to make text overflow work on button style\n\twidth: 100%;\n\t// but restrict to content so plain checkboxes / radio switches do not expand\n\tmax-width: fit-content;\n\n\t&__text {\n\t\tflex: 1 0;\n\n\t\t&:empty {\n\t\t\t// hide text if empty to ensure checkbox outline is a circle instead of oval\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t&__icon > * {\n\t\twidth: var(--icon-size);\n\t\theight: var(--icon-size);\n\t\tcolor: var(--color-primary-element);\n\t}\n\n\t&--button-variant {\n\t\t.checkbox-content__icon:not(.checkbox-content__icon--checked) > * {\n\t\t\tcolor: var(--color-primary-element);\n\t\t}\n\n\t\t.checkbox-content__icon--checked > * {\n\t\t\tcolor: var(--color-primary-element-text);\n\t\t}\n\t}\n\n\t&--has-text {\n\t\tpadding-inline-end: $icon-margin;\n\t}\n\n\t&, * {\n\t\tcursor: pointer;\n\t\tflex-shrink: 0;\n\t}\n}\n</style>\n","<!--\n  - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### General description\n\nThis is a simple input checkbox, radio and switch design.\nPlease have a look at proper usage and recommendations: https://material.io/components/checkboxes\n\nNote: All generic attributes on the component, except `class` and `style`, are passed to the inner `input` element *(for the button type the attributes are passed to the `button` element)*.\n\n### Standard checkbox\n```vue\n<template>\n\t<div>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingEnabled\">Enable sharing</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingEnabled\" :disabled=\"true\">Enable sharing (disabled)</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :model-value=\"sharingEnabled\" :loading=\"loading\" @update:model-value=\"onToggle\">Enable sharing (with request loading)</NcCheckboxRadioSwitch>\n\t\t<br>\n\t\tsharingEnabled: {{ sharingEnabled }}\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tloading: false,\n\t\t\tsharingEnabled: false,\n\t\t}\n\t},\n\tmethods: {\n\t\tonToggle() {\n\t\t\tthis.loading = true\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.sharingEnabled = !this.sharingEnabled\n\t\t\t\tthis.loading = false\n\t\t\t}, 1000)\n\t\t}\n\t}\n}\n</script>\n```\n\n### Standard radio set\n```vue\n<template>\n\t<div>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingPermission\" value=\"r\" name=\"sharing_permission_radio\" type=\"radio\">Default permission read</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingPermission\" value=\"rw\" name=\"sharing_permission_radio\" type=\"radio\">Default permission read+write</NcCheckboxRadioSwitch>\n\t\t<br>\n\t\tsharingPermission: {{ sharingPermission }}\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tsharingPermission: 'r',\n\t\t\t}\n\t\t}\n\t}\n</script>\n```\n\n### Standard radio set with alternative button style\n```vue\n<template>\n\t<div>\n\t\t<h4>Horizontal</h4>\n\t\t<div style=\"display: flex\">\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"sharingPermission\"\n\t\t\t\tvalue=\"r\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"horizontal\">\n\t\t\t\tDefault permission read\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"sharingPermission\"\n\t\t\t\tvalue=\"rw\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"horizontal\">\n\t\t\t\tDefault permission read+write\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t</div>\n\t\t<h4>Vertically</h4>\n\t\t<div style=\"width: fit-content\">\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"sharingPermission\"\n\t\t\t\tvalue=\"r\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"vertical\">\n\t\t\t\tDefault permission read\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"sharingPermission\"\n\t\t\t\tvalue=\"rw\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"vertical\">\n\t\t\t\tDefault permission read+write\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t</div>\n\t\tsharingPermission: {{ sharingPermission }}\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tsharingPermission: 'r',\n\t\t}\n\t}\n}\n</script>\n```\n\n### Radio set with button style and icons\n```vue\n<template>\n\t<div>\n\t\t<h4>Horizontal</h4>\n\t\t<div style=\"display: flex\">\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"enableSettings\"\n\t\t\t\tvalue=\"y\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"horizontal\">\n\t\t\t\tEnable settings\n\t\t\t\t<template #icon><CheckIcon :size=\"20\"></template>\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"enableSettings\"\n\t\t\t\tvalue=\"n\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"horizontal\">\n\t\t\t\tDisable settings\n\t\t\t\t<template #icon><CancelIcon :size=\"20\"></template>\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t</div>\n\t\t<h4>Vertically</h4>\n\t\t<div style=\"width: fit-content\">\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"enableSettings\"\n\t\t\t\tvalue=\"y\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"vertical\">\n\t\t\t\tEnable settings\n\t\t\t\t<template #icon><CheckIcon :size=\"20\"></template>\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"enableSettings\"\n\t\t\t\tvalue=\"n\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"vertical\">\n\t\t\t\tDisable settings\n\t\t\t\t<template #icon><CancelIcon :size=\"20\"></template>\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t</div>\n\t\tSettings enabled: {{ enableSettings === 'y' ? 'yes' : 'no' }}\n\t</div>\n</template>\n<script>\nimport CheckIcon from 'vue-material-design-icons/Check.vue'\nimport CancelIcon from 'vue-material-design-icons/Cancel.vue'\nexport default {\n\tcomponents: {\n\t\tCheckIcon,\n\t\tCancelIcon,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tenableSettings: 'n',\n\t\t}\n\t}\n}\n</script>\n```\n\n### Standard checkbox set\n```vue\n<template>\n\t<div>\n\t\t<NcCheckboxRadioSwitch :disabled=\"true\" v-model=\"sharingPermission\" value=\"r\" name=\"sharing_permission\">Permission read</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingPermission\" value=\"w\" name=\"sharing_permission\">Permission write</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingPermission\" value=\"d\" name=\"sharing_permission\">Permission delete</NcCheckboxRadioSwitch>\n\t\t<br>\n\t\tsharingPermission: {{ sharingPermission }}\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tsharingPermission: ['r', 'd'],\n\t\t}\n\t}\n}\n</script>\n```\n\n### Standard switch\n```vue\n<template>\n\t<div>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingEnabled\" type=\"switch\">Enable sharing</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingEnabled\" type=\"switch\" :disabled=\"true\">Enable sharing (disabled)</NcCheckboxRadioSwitch>\n\t\t<br>\n\t\tsharingEnabled: {{ sharingEnabled }}\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tsharingEnabled: true,\n\t\t}\n\t},\n}\n</script>\n```\n\n</docs>\n\n<template>\n\t<component :is=\"computedWrapperElement\"\n\t\t:id=\"wrapperId ?? (isButtonType ? id : null)\"\n\t\t:aria-label=\"isButtonType && ariaLabel ? ariaLabel : undefined\"\n\t\tclass=\"checkbox-radio-switch\"\n\t\t:class=\"[\n\t\t\t$props.class,\n\t\t\t{\n\t\t\t\t['checkbox-radio-switch-' + type]: type,\n\t\t\t\t'checkbox-radio-switch--checked': isChecked,\n\t\t\t\t'checkbox-radio-switch--disabled': disabled,\n\t\t\t\t'checkbox-radio-switch--indeterminate': hasIndeterminate ? indeterminate : false,\n\t\t\t\t'checkbox-radio-switch--button-variant': buttonVariant,\n\t\t\t\t'checkbox-radio-switch--button-variant-v-grouped': buttonVariant && buttonVariantGrouped === 'vertical',\n\t\t\t\t'checkbox-radio-switch--button-variant-h-grouped': buttonVariant && buttonVariantGrouped === 'horizontal',\n\t\t\t\t'button-vue': isButtonType,\n\t\t\t},\n\t\t]\"\n\t\t:style=\"[cssVars, style]\"\n\t\t:type=\"isButtonType ? 'button' : null\"\n\t\tv-bind=\"isButtonType ? $attrs : {} \"\n\t\tv-on=\"isButtonType ? listeners : {}\">\n\t\t<input v-if=\"!isButtonType\"\n\t\t\t:id=\"id\"\n\t\t\t:aria-labelledby=\"!isButtonType && !ariaLabel ? `${id}-label` : null\"\n\t\t\t:aria-label=\"ariaLabel || undefined\"\n\t\t\tclass=\"checkbox-radio-switch__input\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:type=\"inputType\"\n\t\t\t:value=\"value\"\n\t\t\t:checked=\"isChecked\"\n\t\t\t:indeterminate.prop=\"hasIndeterminate ? indeterminate : null\"\n\t\t\t:required=\"required\"\n\t\t\t:name=\"name\"\n\t\t\tv-bind=\"$attrs\"\n\t\t\tv-on=\"listeners\">\n\t\t<NcCheckboxContent :id=\"!isButtonType ? `${id}-label` : undefined\"\n\t\t\tclass=\"checkbox-radio-switch__content\"\n\t\t\ticon-class=\"checkbox-radio-switch__icon\"\n\t\t\ttext-class=\"checkbox-radio-switch__text\"\n\t\t\t:type=\"type\"\n\t\t\t:indeterminate=\"hasIndeterminate ? indeterminate : false\"\n\t\t\t:button-variant=\"buttonVariant\"\n\t\t\t:is-checked=\"isChecked\"\n\t\t\t:loading=\"loading\"\n\t\t\t:size=\"size\"\n\t\t\t@click=\"onToggle\">\n\t\t\t<template #icon>\n\t\t\t\t<!-- @slot The checkbox/radio icon, you can use it for adding an icon to the button variant -->\n\t\t\t\t<slot name=\"icon\" />\n\t\t\t</template>\n\n\t\t\t<template v-if=\"!!$slots.default\" #default>\n\t\t\t\t<!-- @slot The checkbox/radio label -->\n\t\t\t\t<slot />\n\t\t\t</template>\n\t\t</NcCheckboxContent>\n\t</component>\n</template>\n\n<script>\nimport NcCheckboxContent, { TYPE_BUTTON, TYPE_CHECKBOX, TYPE_RADIO, TYPE_SWITCH } from './NcCheckboxContent.vue'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { t, n } from '../../l10n.js'\n\nexport default {\n\tname: 'NcCheckboxRadioSwitch',\n\n\tcomponents: {\n\t\tNcCheckboxContent,\n\t},\n\n\t// We need to pass attributes to the input element\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * Unique id attribute of the input\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'checkbox-radio-switch-' + createElementId(),\n\t\t\tvalidator: id => id.trim() !== '',\n\t\t},\n\n\t\t/**\n\t\t * Unique id attribute of the wrapper element\n\t\t */\n\t\twrapperId: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Input name. Required for radio, optional for checkbox, and ignored\n\t\t * for button.\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Required if no text is set.\n\t\t * The aria-label is forwarded to the input or button.\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Type of the input. checkbox, radio, switch, or button.\n\t\t *\n\t\t * Only use button when used in a `tablist` container and the\n\t\t * `tab` role is set.\n\t\t *\n\t\t * @type {'checkbox'|'radio'|'switch'|'button'}\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'checkbox',\n\t\t\tvalidator: type => [\n\t\t\t\tTYPE_CHECKBOX,\n\t\t\t\tTYPE_RADIO,\n\t\t\t\tTYPE_SWITCH,\n\t\t\t\tTYPE_BUTTON,\n\t\t\t].includes(type),\n\t\t},\n\n\t\t/**\n\t\t * Toggle the alternative button style\n\t\t */\n\t\tbuttonVariant: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Are the elements are all direct siblings?\n\t\t * If so they will be grouped horizontally or vertically\n\t\t *\n\t\t * @type {'no'|'horizontal'|'vertical'}\n\t\t */\n\t\tbuttonVariantGrouped: {\n\t\t\ttype: String,\n\t\t\tdefault: 'no',\n\t\t\tvalidator: v => ['no', 'vertical', 'horizontal'].includes(v),\n\t\t},\n\n\t\t/**\n\t\t * Checked state. To be used with `v-model:value`\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: [Boolean, Array, String],\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Value to be synced on check\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 * Disabled state\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 * Indeterminate state\n\t\t */\n\t\tindeterminate: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Required state\n\t\t */\n\t\trequired: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Loading state\n\t\t */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Wrapping element tag\n\t\t *\n\t\t * When `type` is set to `button` this will be ignored\n\t\t *\n\t\t * Defaults to `span`\n\t\t */\n\t\twrapperElement: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * The class(es) to pass to the wrapper / root element of the component\n\t\t */\n\t\tclass: {\n\t\t\ttype: [String, Array, Object],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * The style to pass to the wrapper / root element of the component\n\t\t */\n\t\tstyle: {\n\t\t\ttype: [String, Array, Object],\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: ['update:modelValue'],\n\n\tcomputed: {\n\t\tisButtonType() {\n\t\t\treturn this.type === TYPE_BUTTON\n\t\t},\n\n\t\tcomputedWrapperElement() {\n\t\t\tif (this.isButtonType) {\n\t\t\t\treturn 'button'\n\t\t\t}\n\t\t\tif (this.wrapperElement !== null) {\n\t\t\t\treturn this.wrapperElement\n\t\t\t}\n\t\t\treturn 'span'\n\t\t},\n\n\t\tlisteners() {\n\t\t\tif (this.isButtonType) {\n\t\t\t\treturn {\n\t\t\t\t\tclick: this.onToggle,\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn {\n\t\t\t\tchange: this.onToggle,\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * CSS local variables for this component\n\t\t * @return {Record<string, string>}\n\t\t */\n\t\tcssVars() {\n\t\t\treturn {\n\t\t\t\t'--icon-size': this.size + 'px',\n\t\t\t\t'--icon-height': (this.type === TYPE_SWITCH ? 16 : this.size) + 'px',\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Icon size\n\t\t *\n\t\t * @return {number}\n\t\t */\n\t\tsize() {\n\t\t\treturn this.type === TYPE_SWITCH\n\t\t\t\t? 36\n\t\t\t\t: 24\n\t\t},\n\n\t\t/**\n\t\t * Return the input type.\n\t\t * Switch is not an official type\n\t\t *\n\t\t * @return {string}\n\t\t */\n\t\tinputType() {\n\t\t\tconst nativeTypes = [\n\t\t\t\tTYPE_CHECKBOX,\n\t\t\t\tTYPE_RADIO,\n\t\t\t\tTYPE_BUTTON,\n\t\t\t]\n\t\t\tif (nativeTypes.includes(this.type)) {\n\t\t\t\treturn this.type\n\t\t\t}\n\t\t\treturn TYPE_CHECKBOX\n\t\t},\n\n\t\t/**\n\t\t * Check if that entry is checked\n\t\t * If value is defined, we use that as the checked value\n\t\t * If not, we expect true/false in this.checked\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tisChecked() {\n\t\t\tif (this.value !== null) {\n\t\t\t\tif (Array.isArray(this.modelValue)) {\n\t\t\t\t\treturn [...this.modelValue].indexOf(this.value) > -1\n\t\t\t\t}\n\t\t\t\treturn this.modelValue === this.value\n\t\t\t}\n\t\t\treturn this.modelValue === true\n\t\t},\n\n\t\thasIndeterminate() {\n\t\t\treturn [\n\t\t\t\tTYPE_CHECKBOX,\n\t\t\t\tTYPE_RADIO,\n\t\t\t].includes(this.inputType)\n\t\t},\n\t},\n\n\tmounted() {\n\t\tif (this.name && this.type === TYPE_CHECKBOX) {\n\t\t\tif (!Array.isArray(this.modelValue)) {\n\t\t\t\tthrow new Error('When using groups of checkboxes, the updated value will be an array.')\n\t\t\t}\n\t\t}\n\n\t\t// https://material.io/components/checkboxes#usage\n\t\tif (this.name && this.type === TYPE_SWITCH) {\n\t\t\tthrow new Error('Switches are not made to be used for data sets. Please use checkboxes instead.')\n\t\t}\n\n\t\t// https://material.io/components/checkboxes#usage\n\t\tif (typeof this.modelValue !== 'boolean' && this.type === TYPE_SWITCH) {\n\t\t\tthrow new Error('Switches can only be used with boolean as modelValue prop.')\n\t\t}\n\t},\n\n\tmethods: {\n\t\tt,\n\t\tn,\n\n\t\tonToggle(event) {\n\t\t\tif (this.disabled || event.target.tagName.toLowerCase() === 'a') {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// If this is a radio, there can only be one value\n\t\t\tif (this.type === TYPE_RADIO) {\n\t\t\t\tthis.$emit('update:modelValue', this.value)\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// If this is a radio, there can only be one value\n\t\t\tif (this.type === TYPE_SWITCH) {\n\t\t\t\tthis.$emit('update:modelValue', !this.isChecked)\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// If the initial value was a boolean, let's keep it that way\n\t\t\tif (typeof this.modelValue === 'boolean') {\n\t\t\t\tthis.$emit('update:modelValue', !this.modelValue)\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Dispatch the checked values as an array if multiple, or single value otherwise\n\t\t\tconst values = this.getInputsSet()\n\t\t\t\t.filter(input => input.checked)\n\t\t\t\t.map(input => input.value)\n\n\t\t\tif (values.includes(this.value)) {\n\t\t\t\tthis.$emit('update:modelValue', values.filter((v) => v !== this.value))\n\t\t\t} else {\n\t\t\t\tthis.$emit('update:modelValue', [...values, this.value])\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Get the input set based on this name\n\t\t *\n\t\t * @return {Node[]}\n\t\t */\n\t\tgetInputsSet() {\n\t\t\treturn [...document.getElementsByName(this.name)]\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.checkbox-radio-switch {\n\tdisplay: flex;\n\talign-items: center;\n\tcolor: var(--color-main-text);\n\tbackground-color: transparent;\n\tfont-size: var(--default-font-size);\n\tline-height: var(--default-line-height);\n\tpadding: 0;\n\tposition: relative;\n\n\t&__input {\n\t\tposition: absolute;\n\t\tz-index: -1;\n\t\topacity: 0 !important; // We need !important, or it gets overwritten by server style\n\t\twidth: var(--icon-size);\n\t\theight: var(--icon-size);\n\t\t// Same as label padding\n\t\tmargin: 4px $icon-margin;\n\t}\n\n\t&__input:focus-visible + &__content,\n\t&__input:focus-visible {\n\t\toutline: 2px solid var(--color-main-text);\n\t\tborder-color: var(--color-main-background);\n\t\toutline-offset: -2px;\n\t}\n\n\t&--disabled &__content {\n\t\topacity: $opacity_disabled;\n\t\t:deep(.checkbox-radio-switch__icon) > * {\n\t\t\tcolor: var(--color-main-text)\n\t\t}\n\t\t&.checkbox-content,\n\t\t&.checkbox-content :deep(*:not(a)) {\n\t\t\tcursor: default !important;\n\t\t}\n\t}\n\n\t&:not(&--disabled, &--checked):focus-within &__content,\n\t&:not(&--disabled, &--checked) &__content:hover {\n\t\tbackground-color: var(--color-background-hover);\n\t}\n\n\t&--checked:not(&--disabled):focus-within &__content,\n\t&--checked:not(&--disabled) &__content:hover {\n\t\tbackground-color: var(--color-primary-element-hover);\n\t}\n\n\t&--checked:not(&--button-variant):not(&--disabled):focus-within &__content,\n\t&--checked:not(&--button-variant):not(&--disabled) &__content:hover {\n\t\tbackground-color: var(--color-primary-element-light-hover);\n\t}\n\n\t// Switch specific rules\n\t&-switch:not(&--checked) :deep(.checkbox-radio-switch__icon) > * {\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\n\t// If switch is checked AND disabled, use the fade primary colour\n\t&-switch.checkbox-radio-switch--disabled.checkbox-radio-switch--checked :deep(.checkbox-radio-switch__icon) > * {\n\t\tcolor: var(--color-primary-element-light);\n\t}\n\n\t--checkbox-radio-switch--border-radius: var(--border-radius-element, calc(var(--default-clickable-area) / 2));\n\t// keep inner border width in mind\n\t--checkbox-radio-switch--border-radius-outer: calc(var(--checkbox-radio-switch--border-radius) + 2px);\n\n\t&--button-variant.checkbox-radio-switch {\n\t\tbackground-color: var(--color-main-background);\n\t\tborder: 2px solid var(--color-border-maxcontrast);\n\t\toverflow: hidden;\n\n\t\t&--checked {\n\t\t\tfont-weight: bold;\n\n\t\t\t.checkbox-radio-switch__content {\n\t\t\t\tbackground-color: var(--color-primary-element);\n\t\t\t\tcolor: var(--color-primary-element-text);\n\t\t\t}\n\t\t}\n\t}\n\n\t// Text overflow of button style\n\t&--button-variant :deep(.checkbox-radio-switch__text) {\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\twhite-space: nowrap;\n\t\twidth: 100%;\n\t}\n\n\t// Set icon color for non active elements to main text color\n\t&--button-variant:not(&--checked) :deep(.checkbox-radio-switch__icon) > * {\n\t\tcolor: var(--color-main-text);\n\t}\n\n\t// Hide icon container if empty to remove virtual padding\n\t&--button-variant :deep(.checkbox-radio-switch__icon:empty) {\n\t\tdisplay: none;\n\t}\n\n\t&--button-variant:not(&--button-variant-v-grouped):not(&--button-variant-h-grouped),\n\t&--button-variant &__content {\n\t\tborder-radius: var(--checkbox-radio-switch--border-radius);\n\t}\n\n\t/* Special rules for vertical button groups */\n\t&--button-variant-v-grouped &__content {\n\t\tflex-basis: 100%;\n\t\t// vertically grouped buttons should all have the same width\n\t\tmax-width: unset;\n\t}\n\t&--button-variant-v-grouped {\n\t\t&:first-of-type {\n\t\t\tborder-start-start-radius: var(--checkbox-radio-switch--border-radius-outer);\n\t\t\tborder-start-end-radius: var(--checkbox-radio-switch--border-radius-outer);\n\t\t}\n\t\t&:last-of-type {\n\t\t\tborder-end-start-radius: var(--checkbox-radio-switch--border-radius-outer);\n\t\t\tborder-end-end-radius: var(--checkbox-radio-switch--border-radius-outer);\n\t\t}\n\n\t\t// remove borders between elements\n\t\t&:not(:last-of-type) {\n\t\t\tborder-bottom: 0!important;\n\t\t\t.checkbox-radio-switch__content {\n\t\t\t\tmargin-bottom: 2px;\n\t\t\t}\n\t\t}\n\t\t&:not(:first-of-type) {\n\t\t\tborder-top: 0!important;\n\t\t}\n\t}\n\n\t/* Special rules for horizontal button groups */\n\t&--button-variant-h-grouped {\n\t\t&:first-of-type {\n\t\t\tborder-start-start-radius: var(--checkbox-radio-switch--border-radius-outer);\n\t\t\tborder-end-start-radius: var(--checkbox-radio-switch--border-radius-outer);\n\t\t}\n\t\t&:last-of-type {\n\t\t\tborder-start-end-radius: var(--checkbox-radio-switch--border-radius-outer);\n\t\t\tborder-end-end-radius: var(--checkbox-radio-switch--border-radius-outer);\n\t\t}\n\n\t\t// remove borders between elements\n\t\t&:not(:last-of-type) {\n\t\t\tborder-inline-end: 0!important;\n\t\t\t.checkbox-radio-switch__content {\n\t\t\t\tmargin-inline-end: 2px;\n\t\t\t}\n\t\t}\n\t\t&:not(:first-of-type) {\n\t\t\tborder-inline-start: 0!important;\n\t\t}\n\t}\n\t&--button-variant-h-grouped :deep(.checkbox-radio-switch__text) {\n\t\ttext-align: center;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\t&--button-variant-h-grouped &__content {\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\twidth: 100%;\n\t\tmargin: 0;\n\t\tgap: 0;\n\t}\n}\n</style>\n"],"names":["_sfc_main","_hoisted_1","_hoisted_2","_hoisted_3","_createElementBlock","_mergeProps","_createElementVNode","_hoisted_4","_createCommentVNode","_normalizeClass","_renderSlot","_openBlock","_createBlock","_resolveDynamicComponent","_toHandlers","_withCtx","_createVNode","_createSlots"],"mappings":";;;;;AAoBA,MAAKA,cAAU;AAAA,EACb,MAAM;AAAA,EACN,OAAO,CAAC,OAAO;AAAA,EACf,OAAO;AAAA,IACL,OAAO;AAAA,MACL,MAAM;AAAA,IACP;AAAA,IACD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,IACD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AACF;AApCA,MAAAC,eAAA,CAAA,eAAA,YAAA;AAAA,MAAAC,eAAA,CAAA,QAAA,SAAA,QAAA;AAYY,MAAAC,eAAA,EAAA,GAAE,uGAAsG;uBAZpH,KAAA,EAAA;;sBACEC,mBAeO,QAfPC,WAAc,KAAM,QAAA;AAAA,IACb,eAAa,OAAK,QAAA,OAAA;AAAA,IAClB,cAAY,OAAK;AAAA,IAClB,OAAM;AAAA,IACN,MAAK;AAAA,IACJ,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,YAAE,KAAK,MAAA,SAAU,MAAM;AAAA;kBACjCD,mBAQM,OAAA;AAAA,MARA,MAAM,OAAS;AAAA,MAChB,OAAM;AAAA,MACL,OAAO,OAAI;AAAA,MACX,QAAQ,OAAI;AAAA,MACb,SAAQ;AAAA;MACXE,mBAEO,QAFPH,cAEO;AAAA,QADQ,OAAK,sBAAlBC,mBAAuC,SAb/CG,8BAa+B,OAAK,KAAA,GAAA,CAAA,KAbpCC,mBAAA,IAAA,IAAA;AAAA;IAAA,GAAA,GAAAN,YAAA;AAAA,EAAA,GAAA,IAAAD,YAAA;;;ACoBA,MAAKD,cAAU;AAAA,EACb,MAAM;AAAA,EACN,OAAO,CAAC,OAAO;AAAA,EACf,OAAO;AAAA,IACL,OAAO;AAAA,MACL,MAAM;AAAA,IACP;AAAA,IACD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,IACD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AACF;AApCA,MAAAC,eAAA,CAAA,eAAA,YAAA;AAAA,MAAAC,eAAA,CAAA,QAAA,SAAA,QAAA;AAYY,MAAAC,eAAA,EAAA,GAAE,sGAAqG;uBAZnH,KAAA,EAAA;;sBACEC,mBAeO,QAfPC,WAAc,KAAM,QAAA;AAAA,IACb,eAAa,OAAK,QAAA,OAAA;AAAA,IAClB,cAAY,OAAK;AAAA,IAClB,OAAM;AAAA,IACN,MAAK;AAAA,IACJ,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,YAAE,KAAK,MAAA,SAAU,MAAM;AAAA;kBACjCD,mBAQM,OAAA;AAAA,MARA,MAAM,OAAS;AAAA,MAChB,OAAM;AAAA,MACL,OAAO,OAAI;AAAA,MACX,QAAQ,OAAI;AAAA,MACb,SAAQ;AAAA;MACXE,mBAEO,QAFPH,cAEO;AAAA,QADQ,OAAK,sBAAlBC,mBAAuC,SAb/CG,8BAa+B,OAAK,KAAA,GAAA,CAAA,KAbpCC,mBAAA,IAAA,IAAA;AAAA;IAAA,GAAA,GAAAN,YAAA;AAAA,EAAA,GAAA,IAAAD,YAAA;;;ACoBA,MAAKD,cAAU;AAAA,EACb,MAAM;AAAA,EACN,OAAO,CAAC,OAAO;AAAA,EACf,OAAO;AAAA,IACL,OAAO;AAAA,MACL,MAAM;AAAA,IACP;AAAA,IACD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,IACD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AACF;AApCA,MAAAC,eAAA,CAAA,eAAA,YAAA;AAAA,MAAAC,eAAA,CAAA,QAAA,SAAA,QAAA;AAYY,MAAAC,eAAA,EAAA,GAAE,uIAAsI;uBAZpJ,KAAA,EAAA;;sBACEC,mBAeO,QAfPC,WAAc,KAAM,QAAA;AAAA,IACb,eAAa,OAAK,QAAA,OAAA;AAAA,IAClB,cAAY,OAAK;AAAA,IAClB,OAAM;AAAA,IACN,MAAK;AAAA,IACJ,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,YAAE,KAAK,MAAA,SAAU,MAAM;AAAA;kBACjCD,mBAQM,OAAA;AAAA,MARA,MAAM,OAAS;AAAA,MAChB,OAAM;AAAA,MACL,OAAO,OAAI;AAAA,MACX,QAAQ,OAAI;AAAA,MACb,SAAQ;AAAA;MACXE,mBAEO,QAFPH,cAEO;AAAA,QADQ,OAAK,sBAAlBC,mBAAuC,SAb/CG,8BAa+B,OAAK,KAAA,GAAA,CAAA,KAbpCC,mBAAA,IAAA,IAAA;AAAA;IAAA,GAAA,GAAAN,YAAA;AAAA,EAAA,GAAA,IAAAD,YAAA;;;ACoBA,MAAKD,cAAU;AAAA,EACb,MAAM;AAAA,EACN,OAAO,CAAC,OAAO;AAAA,EACf,OAAO;AAAA,IACL,OAAO;AAAA,MACL,MAAM;AAAA,IACP;AAAA,IACD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,IACD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AACF;AApCA,MAAAC,eAAA,CAAA,eAAA,YAAA;AAAA,MAAAC,eAAA,CAAA,QAAA,SAAA,QAAA;AAYY,MAAAC,eAAA,EAAA,GAAE,sNAAqN;uBAZnO,KAAA,EAAA;;sBACEC,mBAeO,QAfPC,WAAc,KAAM,QAAA;AAAA,IACb,eAAa,OAAK,QAAA,OAAA;AAAA,IAClB,cAAY,OAAK;AAAA,IAClB,OAAM;AAAA,IACN,MAAK;AAAA,IACJ,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,YAAE,KAAK,MAAA,SAAU,MAAM;AAAA;kBACjCD,mBAQM,OAAA;AAAA,MARA,MAAM,OAAS;AAAA,MAChB,OAAM;AAAA,MACL,OAAO,OAAI;AAAA,MACX,QAAQ,OAAI;AAAA,MACb,SAAQ;AAAA;MACXE,mBAEO,QAFPH,cAEO;AAAA,QADQ,OAAK,sBAAlBC,mBAAuC,SAb/CG,8BAa+B,OAAK,KAAA,GAAA,CAAA,KAbpCC,mBAAA,IAAA,IAAA;AAAA;IAAA,GAAA,GAAAN,YAAA;AAAA,EAAA,GAAA,IAAAD,YAAA;;;ACoBA,MAAKD,cAAU;AAAA,EACb,MAAM;AAAA,EACN,OAAO,CAAC,OAAO;AAAA,EACf,OAAO;AAAA,IACL,OAAO;AAAA,MACL,MAAM;AAAA,IACP;AAAA,IACD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,IACD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AACF;AApCA,MAAAC,eAAA,CAAA,eAAA,YAAA;AAAA,MAAAC,eAAA,CAAA,QAAA,SAAA,QAAA;AAYY,MAAAC,eAAA,EAAA,GAAE,mJAAkJ;uBAZhK,KAAA,EAAA;;sBACEC,mBAeO,QAfPC,WAAc,KAAM,QAAA;AAAA,IACb,eAAa,OAAK,QAAA,OAAA;AAAA,IAClB,cAAY,OAAK;AAAA,IAClB,OAAM;AAAA,IACN,MAAK;AAAA,IACJ,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,YAAE,KAAK,MAAA,SAAU,MAAM;AAAA;kBACjCD,mBAQM,OAAA;AAAA,MARA,MAAM,OAAS;AAAA,MAChB,OAAM;AAAA,MACL,OAAO,OAAI;AAAA,MACX,QAAQ,OAAI;AAAA,MACb,SAAQ;AAAA;MACXE,mBAEO,QAFPH,cAEO;AAAA,QADQ,OAAK,sBAAlBC,mBAAuC,SAb/CG,8BAa+B,OAAK,KAAA,GAAA,CAAA,KAbpCC,mBAAA,IAAA,IAAA;AAAA;IAAA,GAAA,GAAAN,YAAA;AAAA,EAAA,GAAA,IAAAD,YAAA;;;ACoBA,MAAKD,cAAU;AAAA,EACb,MAAM;AAAA,EACN,OAAO,CAAC,OAAO;AAAA,EACf,OAAO;AAAA,IACL,OAAO;AAAA,MACL,MAAM;AAAA,IACP;AAAA,IACD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,IACD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AACF;AApCA,MAAAC,eAAA,CAAA,eAAA,YAAA;AAAA,MAAAC,eAAA,CAAA,QAAA,SAAA,QAAA;AAYY,MAAAC,eAAA,EAAA,GAAE,4IAA2I;uBAZzJ,KAAA,EAAA;;sBACEC,mBAeO,QAfPC,WAAc,KAAM,QAAA;AAAA,IACb,eAAa,OAAK,QAAA,OAAA;AAAA,IAClB,cAAY,OAAK;AAAA,IAClB,OAAM;AAAA,IACN,MAAK;AAAA,IACJ,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,YAAE,KAAK,MAAA,SAAU,MAAM;AAAA;kBACjCD,mBAQM,OAAA;AAAA,MARA,MAAM,OAAS;AAAA,MAChB,OAAM;AAAA,MACL,OAAO,OAAI;AAAA,MACX,QAAQ,OAAI;AAAA,MACb,SAAQ;AAAA;MACXE,mBAEO,QAFPH,cAEO;AAAA,QADQ,OAAK,sBAAlBC,mBAAuC,SAb/CG,8BAa+B,OAAK,KAAA,GAAA,CAAA,KAbpCC,mBAAA,IAAA,IAAA;AAAA;IAAA,GAAA,GAAAN,YAAA;AAAA,EAAA,GAAA,IAAAD,YAAA;;;ACoBA,MAAKD,cAAU;AAAA,EACb,MAAM;AAAA,EACN,OAAO,CAAC,OAAO;AAAA,EACf,OAAO;AAAA,IACL,OAAO;AAAA,MACL,MAAM;AAAA,IACP;AAAA,IACD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,IACD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AACF;AApCA,MAAAC,eAAA,CAAA,eAAA,YAAA;AAAA,MAAA,aAAA,CAAA,QAAA,SAAA,QAAA;AAYY,MAAA,aAAA,EAAA,GAAE,gJAA+I;qBAZ7J,KAAA,EAAA;;sBACEG,mBAeO,QAfPC,WAAc,KAAM,QAAA;AAAA,IACb,eAAa,OAAK,QAAA,OAAA;AAAA,IAClB,cAAY,OAAK;AAAA,IAClB,OAAM;AAAA,IACN,MAAK;AAAA,IACJ,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,YAAE,KAAK,MAAA,SAAU,MAAM;AAAA;kBACjCD,mBAQM,OAAA;AAAA,MARA,MAAM,OAAS;AAAA,MAChB,OAAM;AAAA,MACL,OAAO,OAAI;AAAA,MACX,QAAQ,OAAI;AAAA,MACb,SAAQ;AAAA;MACXE,mBAEO,QAFP,YAEO;AAAA,QADQ,OAAK,sBAAlBF,mBAAuC,SAb/C,4BAa+B,OAAK,KAAA,GAAA,CAAA,KAbpCI,mBAAA,IAAA,IAAA;AAAA;IAAA,GAAA,GAAA,UAAA;AAAA,EAAA,GAAA,IAAAP,YAAA;;;ACuDO,MAAM,gBAAgB;AACtB,MAAM,aAAa;AACnB,MAAM,cAAc;AACpB,MAAM,cAAc;AAE3B,MAAKD,cAAU;AAAA,EACd,MAAM;AAAA,EAEN,YAAY;AAAA,IACX;AAAA,EACA;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,WAAW;AAAA,MACV,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACV,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUD,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,UAAQ;AAAA,QAClB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD,EAAE,SAAS,IAAI;AAAA,IACf;AAAA;AAAA;AAAA;AAAA,IAKD,eAAe;AAAA,MACd,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAKD,eAAe;AAAA,MACd,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAKD,SAAS;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA,EACD;AAAA,EAED,UAAU;AAAA,IACT,eAAe;AACd,aAAO,KAAK,SAAS;AAAA,IACrB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,2BAA2B;AAC1B,UAAI,KAAK,SAAS,YAAY;AAC7B,YAAI,KAAK,WAAW;AACnB,iBAAO;AAAA,QACR;AACA,eAAO;AAAA,MACR;AAGA,UAAI,KAAK,SAAS,aAAa;AAC9B,YAAI,KAAK,WAAW;AACnB,iBAAO;AAAA,QACR;AACA,eAAO;AAAA,MACR;AAGA,UAAI,KAAK,eAAe;AACvB,eAAO;AAAA,MACR;AACA,UAAI,KAAK,WAAW;AACnB,eAAO;AAAA,MACR;AACA,aAAO;AAAA,IACP;AAAA,EACD;AACF;;;sBA9KCI,mBAmCO,QAAA;AAAA,IAnCD,OANPK,gBAMa,oBAAkB;AAAA,6BACO,OAAI,IAAA,GAAA;AAAA,0CAAgD,OAAa;AAAA,MAAqC,8BAAA,CAAA,CAAA,KAAA,OAAO;AAAA;;IASjJH,mBAmBO,QAAA;AAAA,MAnBA,OAhBTG,eAAA;AAAA;2CAgB6F,OAAS;AAAA,SAAO,OAAS,SAAA,GAAA;AAAA;MAKlH,eAAa;AAAA,MACd,OAAA;AAAA;MAKAC,WAOO,KAAA,QAAA,QAAA;AAAA,QANL,SAAS,OAAS;AAAA,QAClB,SAAS,OAAO;AAAA,SAFlB,MAOO;AAAA,QAJe,OAAO,WAA5BC,UAAA,GAAAC,YAAgC,4BA9BpC,KAAA,EAAA,CAAA,MAgCiB,OAAa,8BAD1BA,YA/BJC,wBA+BoB,SAAwB,wBAAA,GAAA;AAAA,UA/B5C,KAAA;AAAA,UAiCM,MAAM,OAAI;AAAA,iCAjChBL,mBAAA,IAAA,IAAA;AAAA;;IAqCc,KAAA,OAAO,wBAAnBJ,mBAGO,QAAA;AAAA,MAxCT,KAAA;AAAA,MAqC+B,OArC/BK,0CAqCiE,OAAS,SAAA,CAAA;AAAA;MAEvEC,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,QAAA,IAAA;AAAA,aAvCXF,mBAAA,IAAA,IAAA;AAAA;;;;ACoTA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,YAAY;AAAA,IACX;AAAA,EACA;AAAA;AAAA,EAGD,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,IAAI;AAAA,MACH,MAAM;AAAA,MACN,SAAS,MAAM,2BAA2B,gBAAiB;AAAA,MAC3D,WAAW,QAAM,GAAG,KAAK,MAAM;AAAA,IAC/B;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUD,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,UAAQ;AAAA,QAClB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD,EAAE,SAAS,IAAI;AAAA,IACf;AAAA;AAAA;AAAA;AAAA,IAKD,eAAe;AAAA,MACd,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQD,sBAAsB;AAAA,MACrB,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,OAAK,CAAC,MAAM,YAAY,YAAY,EAAE,SAAS,CAAC;AAAA,IAC3D;AAAA;AAAA;AAAA;AAAA,IAKD,YAAY;AAAA,MACX,MAAM,CAAC,SAAS,OAAO,MAAM;AAAA,MAC7B,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAKD,eAAe;AAAA,MACd,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAKD,SAAS;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASD,gBAAgB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACN,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACN,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACT;AAAA,EACD;AAAA,EAED,OAAO,CAAC,mBAAmB;AAAA,EAE3B,UAAU;AAAA,IACT,eAAe;AACd,aAAO,KAAK,SAAS;AAAA,IACrB;AAAA,IAED,yBAAyB;AACxB,UAAI,KAAK,cAAc;AACtB,eAAO;AAAA,MACR;AACA,UAAI,KAAK,mBAAmB,MAAM;AACjC,eAAO,KAAK;AAAA,MACb;AACA,aAAO;AAAA,IACP;AAAA,IAED,YAAY;AACX,UAAI,KAAK,cAAc;AACtB,eAAO;AAAA,UACN,OAAO,KAAK;AAAA,QACb;AAAA,MACD;AACA,aAAO;AAAA,QACN,QAAQ,KAAK;AAAA,MACd;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AACT,aAAO;AAAA,QACN,eAAe,KAAK,OAAO;AAAA,QAC3B,kBAAkB,KAAK,SAAS,cAAc,KAAK,KAAK,QAAQ;AAAA,MACjE;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,OAAO;AACN,aAAO,KAAK,SAAS,cAClB,KACA;AAAA,IACH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQD,YAAY;AACX,YAAM,cAAc;AAAA,QACnB;AAAA,QACA;AAAA,QACA;AAAA,MACD;AACA,UAAI,YAAY,SAAS,KAAK,IAAI,GAAG;AACpC,eAAO,KAAK;AAAA,MACb;AACA,aAAO;AAAA,IACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASD,YAAY;AACX,UAAI,KAAK,UAAU,MAAM;AACxB,YAAI,MAAM,QAAQ,KAAK,UAAU,GAAG;AACnC,iBAAO,CAAC,GAAG,KAAK,UAAU,EAAE,QAAQ,KAAK,KAAK,IAAI;AAAA,QACnD;AACA,eAAO,KAAK,eAAe,KAAK;AAAA,MACjC;AACA,aAAO,KAAK,eAAe;AAAA,IAC3B;AAAA,IAED,mBAAmB;AAClB,aAAO;AAAA,QACN;AAAA,QACA;AAAA,QACC,SAAS,KAAK,SAAS;AAAA,IACzB;AAAA,EACD;AAAA,EAED,UAAU;AACT,QAAI,KAAK,QAAQ,KAAK,SAAS,eAAe;AAC7C,UAAI,CAAC,MAAM,QAAQ,KAAK,UAAU,GAAG;AACpC,cAAM,IAAI,MAAM,sEAAsE;AAAA,MACvF;AAAA,IACD;AAGA,QAAI,KAAK,QAAQ,KAAK,SAAS,aAAa;AAC3C,YAAM,IAAI,MAAM,gFAAgF;AAAA,IACjG;AAGA,QAAI,OAAO,KAAK,eAAe,aAAa,KAAK,SAAS,aAAa;AACtE,YAAM,IAAI,MAAM,4DAA4D;AAAA,IAC7E;AAAA,EACA;AAAA,EAED,SAAS;AAAA,IACR;AAAA,IACA;AAAA,IAEA,SAAS,OAAO;AACf,UAAI,KAAK,YAAY,MAAM,OAAO,QAAQ,YAAY,MAAM,KAAK;AAChE;AAAA,MACD;AAGA,UAAI,KAAK,SAAS,YAAY;AAC7B,aAAK,MAAM,qBAAqB,KAAK,KAAK;AAC1C;AAAA,MACD;AAGA,UAAI,KAAK,SAAS,aAAa;AAC9B,aAAK,MAAM,qBAAqB,CAAC,KAAK,SAAS;AAC/C;AAAA,MACD;AAGA,UAAI,OAAO,KAAK,eAAe,WAAW;AACzC,aAAK,MAAM,qBAAqB,CAAC,KAAK,UAAU;AAChD;AAAA,MACD;AAGA,YAAM,SAAS,KAAK,aAAY,EAC9B,OAAO,WAAS,MAAM,OAAO,EAC7B,IAAI,WAAS,MAAM,KAAK;AAE1B,UAAI,OAAO,SAAS,KAAK,KAAK,GAAG;AAChC,aAAK,MAAM,qBAAqB,OAAO,OAAO,CAAC,MAAM,MAAM,KAAK,KAAK,CAAC;AAAA,aAChE;AACN,aAAK,MAAM,qBAAqB,CAAC,GAAG,QAAQ,KAAK,KAAK,CAAC;AAAA,MACxD;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,eAAe;AACd,aAAO,CAAC,GAAG,SAAS,kBAAkB,KAAK,IAAI,CAAC;AAAA,IAChD;AAAA,EACD;AACF;AArnBA,MAAA,aAAA,CAAA,MAAA,mBAAA,cAAA,YAAA,QAAA,SAAA,WAAA,kBAAA,YAAA,MAAA;;;AAoPC,SAAAG,UAAA,GAAAC,YAwDYC,wBAxDI,SAAsB,sBAAA,GAAtCR,WAwDY;AAAA,IAvDV,IAAI,OAAA,cAAc,SAAA,eAAe,OAAE,KAAA;AAAA,IACnC,cAAY,SAAY,gBAAI,mBAAY,OAAA,YAAY;AAAA,IACrD,QAAM,yBAAuB;AAAA,MAChB,KAAA,OAAO;AAAA;QAA4C,CAAA,2BAAA,OAAA,IAAI,GAAG,OAAI;AAAA,0CAAwC,SAAS;AAAA,2CAAyC,OAAQ;AAAA,QAA8C,wCAAA,SAAA,mBAAmB,OAAa,gBAAA;AAAA,iDAAuD,OAAa;AAAA,QAAyD,mDAAA,OAAA,iBAAiB,OAAoB,yBAAA;AAAA,QAAwE,mDAAA,OAAA,iBAAiB,OAAoB,yBAAA;AAAA,sBAAqC,SAAY;AAAA;;IAa1jB,OAAK,CAAG,SAAO,SAAE,OAAK,KAAA;AAAA,IACtB,MAAM,SAAY,eAAA,WAAA;AAAA,EACX,GAAA,SAAA,eAAe,KAAM,SAAA,CAAA,GAC7BS,WAAoC,SAA9B,eAAe,SAAS,YAAA,CAAA,CAAA,CAAA,GAAA;AAAA,IAxQhC,SAAAC,QAyQE,MAakB;AAAA,OAbJ,SAAY,gBAA1BJ,aAAAP,mBAakB,SAblBC,WAakB;AAAA,QAtRpB,KAAA;AAAA,QA0QI,IAAI,OAAE;AAAA,QACN,mBAAkB,CAAA,SAAA,gBAAiB,CAAA,OAAA,eAAe,OAAE,EAAA,WAAA;AAAA,QACpD,cAAY,OAAS,aAAI;AAAA,QAC1B,OAAM;AAAA,QACL,UAAU,OAAQ;AAAA,QAClB,MAAM,SAAS;AAAA,QACf,OAAO,OAAK;AAAA,QACZ,SAAS,SAAS;AAAA,QAClB,kBAAoB,SAAgB,mBAAG,OAAa,gBAAA;AAAA,QACpD,UAAU,OAAQ;AAAA,QAClB,MAAM,OAAI;AAAA,MACH,GAAA,KAAA,QACRS,WAAgB,SAAV,WAtRT,IAAA,CAAA,GAAA,MAAA,IAAA,UAAA,KAAAN,mBAAA,IAAA,IAAA;AAAA,MAuREQ,YAoBoB,8BAAA;AAAA,QApBA,IAAK,CAAA,SAAA,eAAkB,GAAA,OAAA,EAAE,WAAW;AAAA,QACvD,OAAM;AAAA,QACN,cAAW;AAAA,QACX,cAAW;AAAA,QACV,MAAM,OAAI;AAAA,QACV,eAAe,SAAgB,mBAAG,OAAa,gBAAA;AAAA,QAC/C,kBAAgB,OAAa;AAAA,QAC7B,cAAY,SAAS;AAAA,QACrB,SAAS,OAAO;AAAA,QAChB,MAAM,SAAI;AAAA,QACV,SAAO,SAAQ;AAAA,MAjSnB,GAAAC,YAAA;AAAA,QAkSc,cAEV,MAAoB;AAAA,UAApBP,WAAoB,KAAA,QAAA,QAAA,CAAA,GAAA,QAAA,IAAA;AAAA;QApSxB,GAAA;AAAA;QAuSqB,CAAA,CAAA,KAAA,OAAO;UAvS5B,MAuSsC;AAAA,UAvStC,IAAAK,QAySI,MAAQ;AAAA,YAARL,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,QAAA,IAAA;AAAA;UAzSZ,KAAA;AAAA,YAAA;AAAA;;IAAA,GAAA;AAAA;;;","x_google_ignoreList":[0,1,2,3,4,5,6]}

package/dist/chunks/{NcChip-BnD-EmBn.mjs → NcChip-C3U2HYR9.mjs}

@@ -1,11 +1,11 @@
-import '../assets/NcChip-BWWUudAH.css';
+import '../assets/NcChip-CKtzzrlA.css';
 import { defineComponent, useSlots, computed, createElementBlock, openBlock, normalizeClass, createCommentVNode, createElementVNode, createBlock, renderSlot, createTextVNode, toDisplayString, withCtx, createVNode, unref } from "vue";
-import { r as register, a as t } from "./_l10n-BEP_UzXI.mjs";
-import { N as NcActions } from "./NcActions-DxTtucKk.mjs";
-import { N as NcActionButton } from "./NcActionButton-DBFJTCO5.mjs";
+import { e as mdiClose } from "./mdi-zYpVOORa.mjs";
+import { r as register, a as t } from "./_l10n-7kR7gXFc.mjs";
+import { N as NcActions } from "./NcActions-CgKHXNbF.mjs";
+import { N as NcActionButton } from "./NcActionButton-BdQ_qmvW.mjs";
 import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-BYTrkA66.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
-var mdiClose = "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z";
 register();
 const _hoisted_1 = {
   key: 0,
@@ -15,52 +15,12 @@ const _hoisted_2 = { class: "nc-chip__text" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "NcChip",
   props: {
-    /**
-     * aria label to set on the close button
-     * @default 'Close'
-     */
-    ariaLabelClose: {
-      type: String,
-      default: t("Close")
-    },
-    /**
-     * Main text of the chip
-     */
-    text: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Chip style
-     * This sets the background style of the chip, similar to NcButton's `type`
-     */
-    type: {
-      type: String,
-      default: "secondary",
-      validator: (value) => ["primary", "secondary", "tertiary"].includes(value)
-    },
-    /**
-     * SVG path of the icon to use, this takes precedence over `iconSVG`.
-     * For example icon paths from `@mdi/js` can be used.
-     */
-    iconPath: {
-      type: String,
-      default: null
-    },
-    /**
-     * Inline SVG to use as the icon
-     */
-    iconSvg: {
-      type: String,
-      default: null
-    },
-    /**
-     * Set to true to prevent the close button to be shown
-     */
-    noClose: {
-      type: Boolean,
-      default: false
-    }
+    ariaLabelClose: { default: t("Close") },
+    text: { default: "" },
+    iconPath: { default: void 0 },
+    iconSvg: { default: void 0 },
+    noClose: { type: Boolean },
+    variant: { default: "secondary" }
   },
   emits: ["close"],
   setup(__props, { emit: __emit }) {
@@ -76,32 +36,32 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["nc-chip", {
-          [`nc-chip--${__props.type}`]: true,
-          "nc-chip--no-actions": __props.noClose && !hasActions(),
+          [`nc-chip--${_ctx.variant}`]: true,
+          "nc-chip--no-actions": _ctx.noClose && !hasActions(),
           "nc-chip--no-icon": !hasIcon()
         }])
       }, [
         hasIcon() ? (openBlock(), createElementBlock("span", _hoisted_1, [
           renderSlot(_ctx.$slots, "icon", {}, () => [
-            __props.iconPath || __props.iconSvg ? (openBlock(), createBlock(NcIconSvgWrapper, {
+            _ctx.iconPath || _ctx.iconSvg ? (openBlock(), createBlock(NcIconSvgWrapper, {
               key: 0,
               inline: "",
-              path: __props.iconPath,
-              svg: __props.iconPath ? void 0 : __props.iconSvg,
+              path: _ctx.iconPath,
+              svg: _ctx.iconPath ? void 0 : _ctx.iconSvg,
               size: 18
             }, null, 8, ["path", "svg"])) : createCommentVNode("", true)
           ], true)
         ])) : createCommentVNode("", true),
         createElementVNode("span", _hoisted_2, [
           renderSlot(_ctx.$slots, "default", {}, () => [
-            createTextVNode(toDisplayString(__props.text), 1)
+            createTextVNode(toDisplayString(_ctx.text), 1)
           ], true)
         ]),
         canClose.value || hasActions() ? (openBlock(), createBlock(NcActions, {
           key: 1,
           class: "nc-chip__actions",
           "force-menu": !canClose.value,
-          type: "tertiary-no-background"
+          variant: "tertiary-no-background"
         }, {
           default: withCtx(() => [
             canClose.value ? (openBlock(), createBlock(NcActionButton, {
@@ -116,7 +76,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 }, null, 8, ["path"])
               ]),
               default: withCtx(() => [
-                createTextVNode(" " + toDisplayString(__props.ariaLabelClose), 1)
+                createTextVNode(" " + toDisplayString(_ctx.ariaLabelClose), 1)
               ]),
               _: 1
             })) : createCommentVNode("", true),
@@ -128,7 +88,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const NcChip = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-008592cb"]]);
+const NcChip = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ce097ec8"]]);
 export {
   NcChip as N
 };
+//# sourceMappingURL=NcChip-C3U2HYR9.mjs.map

package/dist/chunks/NcChip-C3U2HYR9.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcChip-C3U2HYR9.mjs","sources":["../../src/components/NcChip/NcChip.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n<docs>\n### Basic usage\n\n```vue\n<template>\n\t<div style=\"display: flex; gap: 8px; flex-wrap: wrap;\">\n\t\t<NcChip text=\"Notes.txt\" />\n\t\t<NcChip text=\"Files\" :icon-path=\"mdiFile\" />\n\t\t<NcChip text=\"Color\" :icon-path=\"mdiPalette\" variant=\"tertiary\" />\n\t\t<NcChip text=\"Current time\" :icon-path=\"mdiClock\" no-close variant=\"primary\" />\n\t</div>\n</template>\n<script>\nimport { mdiClock, mdiFile, mdiPalette } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tmdiClock,\n\t\t\tmdiFile,\n\t\t\tmdiPalette,\n\t\t}\n\t}\n}\n</script>\n```\n\n### Advanced usage\n\nIt is also possible to use custom components for the icon by using the `icon` slot.\nIn this example we are using the `NcAvatar` component to render the users avatar as the icon.\n\n*Hint: If you use round icons like avatars you should set their size to `24px` (or use CSS variable `--chip-size`) to make them fully fill and align with the the chip*\n\nAlso it is possible to pass custom actions.\n\n```vue\n<template>\n\t<NcChip>\n\t\t<!-- The icon slot allow to use custom components as the chip icon -->\n\t\t<template #icon>\n\t\t\t<NcAvatar :size=\"24\" user=\"jdoe\" display-name=\"J. Doe\" />\n\t\t</template>\n\t\t<!-- The actions slot allows to add custom actions -->\n\t\t<template #actions>\n\t\t\t<NcActionButton>\n\t\t\t\t<template #icon>\n\t\t\t\t\t<ContactsIcon :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tAdd to contacts\n\t\t\t</NcActionButton>\n\t\t</template>\n\t\t<!-- The default slot can be used for add content, just like the `text` prop -->\n\t\tJ. Doe\n\t</NcChip>\n</template>\n<script>\nimport ContactsIcon from 'vue-material-design-icons/Contacts.vue'\nexport default {\n\tcomponents: {\n\t\tContactsIcon,\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<div class=\"nc-chip\"\n\t\t:class=\"{\n\t\t\t[`nc-chip--${variant}`]: true,\n\t\t\t'nc-chip--no-actions': noClose && !hasActions(),\n\t\t\t'nc-chip--no-icon': !hasIcon(),\n\t\t}\">\n\t\t<span v-if=\"hasIcon()\" class=\"nc-chip__icon\">\n\t\t\t<!-- @slot The icon slot can be used to set the chip icon. Make sure that the icon is not exceeding a height of `24px`. For round icons a exact size of `24px` is recommended. -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<!-- The default icon wrapper uses a size of 18px to ensure the icon is not clipped by the round chip style -->\n\t\t\t\t<NcIconSvgWrapper v-if=\"iconPath || iconSvg\"\n\t\t\t\t\tinline\n\t\t\t\t\t:path=\"iconPath\"\n\t\t\t\t\t:svg=\"iconPath ? undefined : iconSvg\"\n\t\t\t\t\t:size=\"18\" />\n\t\t\t</slot>\n\t\t</span>\n\t\t<span class=\"nc-chip__text\">\n\t\t\t<!-- @slot The default slot can be used to set the text that is shown -->\n\t\t\t<slot>{{ text }}</slot>\n\t\t</span>\n\t\t<NcActions v-if=\"canClose || hasActions()\"\n\t\t\tclass=\"nc-chip__actions\"\n\t\t\t:force-menu=\"!canClose\"\n\t\t\tvariant=\"tertiary-no-background\">\n\t\t\t<NcActionButton v-if=\"canClose\"\n\t\t\t\tclose-after-click\n\t\t\t\t@click=\"onClose\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiClose\" :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t{{ ariaLabelClose }}\n\t\t\t</NcActionButton>\n\t\t\t<!-- @slot The actions slot can be used to add custom actions to the chips actions -->\n\t\t\t<slot name=\"actions\" />\n\t\t</NcActions>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nimport { mdiClose } from '@mdi/js'\nimport { computed, useSlots } from 'vue'\nimport { t } from '../../l10n.js'\n\nimport NcActions from '../NcActions/NcActions.vue'\nimport NcActionButton from '../NcActionButton/NcActionButton.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * aria label to set on the close button\n\t * @default 'Close'\n\t */\n\tariaLabelClose?: string\n\n\t/**\n\t * Main text of the chip.\n\t */\n\ttext?: string\n\n\t/**\n\t * SVG path of the icon to use, this takes precedence over `iconSVG`.\n\t * For example icon paths from `@mdi/js` can be used.\n\t */\n\ticonPath?: string\n\n\t/**\n\t * Inline SVG to use as the icon\n\t */\n\ticonSvg?: string\n\n\t/**\n\t * Set to true to prevent the close button to be shown\n\t */\n\tnoClose?: boolean\n\n\t/**\n\t * Set the chips design variant-\n\t *\n\t * This sets the background style of the chip, similar to NcButton's `variant`.\n\t * @default 'secondary'\n\t * @since 8.23.0\n\t */\n\tvariant: 'primary' | 'secondary' | 'tertiary'\n}>(), {\n\tariaLabelClose: t('Close'),\n\ticonPath: undefined,\n\ticonSvg: undefined,\n\ttext: '',\n\tvariant: 'secondary',\n})\n\nconst emit = defineEmits(['close'])\nconst slots = useSlots()\n\nconst canClose = computed(() => !props.noClose)\nconst hasActions = () => Boolean(slots.actions?.())\nconst hasIcon = () => Boolean(props.iconPath || props.iconSvg || !!slots.icon?.())\n\n/**\n * Handle closing the chip (pressing the X-button)\n */\nfunction onClose() {\n\t/**\n\t * Emitted when the close button is clicked\n\t */\n\temit('close')\n}\n</script>\n\n<style scoped lang=\"scss\">\n.nc-chip {\n\t--chip-size: 24px;\n\t--chip-radius: calc(var(--chip-size) / 2);\n\t// Setup size of wrapper\n\theight: var(--chip-size);\n\tmax-width: fit-content;\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tborder-radius: var(--chip-radius);\n\tbackground-color: var(--color-background-hover);\n\n\t&--primary {\n\t\tbackground-color: var(--color-primary-element);\n\t\tcolor: var(--color-primary-element-text);\n\t}\n\n\t&--secondary {\n\t\tbackground-color: var(--color-primary-element-light);\n\t\tcolor: var(--color-primary-element-light-text);\n\t}\n\n\t&--no-actions &__text {\n\t\t// If there are no actions we need to add some padding to ensure the text is not cut-off\n\t\tpadding-inline-end: calc(1.5 * var(--default-grid-baseline));\n\t}\n\n\t&--no-icon &__text {\n\t\t// Add some more space to the border\n\t\tpadding-inline-start: calc(1.5 * var(--default-grid-baseline));\n\t}\n\n\t&__text {\n\t\t// Allow to grow the text\n\t\t// this is only used if an app forces a width of the chip\n\t\tflex: 1 auto;\n\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\ttext-wrap: nowrap;\n\t}\n\n\t&__icon {\n\t\t// Do neither grow nor shrink, size is fixed\n\t\tflex: 0 0 var(--chip-size);\n\t\tmargin-inline-end: var(--default-grid-baseline);\n\n\t\tline-height: 1;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\n\t\t// Force size\n\t\toverflow: hidden;\n\t\theight: var(--chip-size);\n\t\twidth: var(--chip-size);\n\t}\n\n\t&__actions {\n\t\t// Do neither grow nor shrink, size is fixed\n\t\tflex: 0 0 var(--chip-size);\n\t\t// Adjust action size to match chip size\n\t\t--default-clickable-area: var(--chip-size);\n\t\t--border-radius-element: var(--chip-radius);\n\t}\n}\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAwHA,UAAM,QAAQ;AA4Cd,UAAM,OAAO;AACb,UAAM,QAAQ,SAAS;AAEvB,UAAM,WAAW,SAAS,MAAM,CAAC,MAAM,OAAO;AAC9C,UAAM,aAAa,MAAM,QAAQ,MAAM,WAAW;AAC5C,UAAA,UAAU,MAAM,QAAQ,MAAM,YAAY,MAAM,WAAW,CAAC,CAAC,MAAM,QAAQ;AAKjF,aAAS,UAAU;AAIlB,WAAK,OAAO;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}