@nextcloud/vue 8.0.0-beta.8 → 8.0.0-beta.9

package/dist/Components/NcCheckboxRadioSwitch.cjs

@@ -1,20 +1,132 @@
-var I = require("../assets/index-194e9415.css");
-const c = require("./NcLoadingIcon.cjs"), d = require("../chunks/GenRandomId-c214d235.cjs"), u = require("../chunks/l10n-4326316a.cjs"), l = require("vue-material-design-icons/CheckboxBlankOutline.vue"), h = require("vue-material-design-icons/MinusBox.vue"), p = require("vue-material-design-icons/CheckboxMarked.vue"), f = require("vue-material-design-icons/RadioboxMarked.vue"), k = require("vue-material-design-icons/RadioboxBlank.vue"), _ = require("vue-material-design-icons/ToggleSwitchOff.vue"), b = require("vue-material-design-icons/ToggleSwitch.vue"), m = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), n = (t) => t && t.__esModule ? t : { default: t }, y = /* @__PURE__ */ n(l), g = /* @__PURE__ */ n(h), x = /* @__PURE__ */ n(p), w = /* @__PURE__ */ n(f), v = /* @__PURE__ */ n(k), C = /* @__PURE__ */ n(_), S = /* @__PURE__ */ n(b);
-const o = "checkbox", s = "radio", a = "switch", r = "button", T = {
+var P = require("../assets/index-c06ad941.css");
+const u = require("vue-material-design-icons/CheckboxBlankOutline.vue"), l = require("vue-material-design-icons/MinusBox.vue"), d = require("vue-material-design-icons/CheckboxMarked.vue"), h = require("vue-material-design-icons/RadioboxMarked.vue"), p = require("vue-material-design-icons/RadioboxBlank.vue"), f = require("vue-material-design-icons/ToggleSwitchOff.vue"), _ = require("vue-material-design-icons/ToggleSwitch.vue"), b = require("./NcLoadingIcon.cjs"), c = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), k = require("../chunks/GenRandomId-c214d235.cjs"), y = require("../chunks/l10n-c7bd0ea6.cjs"), o = (t) => t && t.__esModule ? t : { default: t }, m = /* @__PURE__ */ o(u), x = /* @__PURE__ */ o(l), g = /* @__PURE__ */ o(d), C = /* @__PURE__ */ o(h), v = /* @__PURE__ */ o(p), w = /* @__PURE__ */ o(f), B = /* @__PURE__ */ o(_);
+const T = {
+  name: "NcCheckboxContent",
+  components: {
+    NcLoadingIcon: b
+  },
+  props: {
+    /**
+     * Unique id attribute of the input to label
+     */
+    id: {
+      type: String,
+      default: null
+    },
+    /**
+     * Class for the icon element
+     */
+    iconClass: {
+      type: [String, Object],
+      default: null
+    },
+    /**
+     * Class for the text element
+     */
+    textClass: {
+      type: [String, Object],
+      default: null
+    },
+    /**
+     * Type of the input. checkbox, radio, switch, or button.
+     *
+     * Only use button when used in a `tablist` container and the
+     * `tab` role is set.
+     */
+    type: {
+      type: String,
+      default: "checkbox",
+      validator: (t) => [
+        a,
+        s,
+        i,
+        r
+      ].includes(t)
+    },
+    /**
+     * Toggle the alternative button style
+     */
+    buttonVariant: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * True if the entry is checked
+     */
+    isChecked: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Loading state
+     */
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Icon size
+     */
+    size: {
+      type: Number,
+      default: 24
+    }
+  },
+  computed: {
+    isButtonType() {
+      return this.type === r;
+    },
+    wrapperElement() {
+      return this.isButtonType ? "span" : "label";
+    },
+    /**
+     * Returns the proper Material icon depending on the select case
+     *
+     * @return {object}
+     */
+    checkboxRadioIconElement() {
+      return this.type === s ? this.isChecked ? C.default : v.default : this.type === i ? this.isChecked ? B.default : w.default : this.indeterminate ? x.default : this.isChecked ? g.default : m.default;
+    }
+  }
+};
+var S = function() {
+  var e = this, n = e._self._c;
+  return n(e.wrapperElement, { tag: "component", staticClass: "checkbox-content", attrs: { for: e.isButtonType ? null : e.id } }, [n("span", { class: ["checkbox-content__icon", e.iconClass], attrs: { "aria-hidden": !0 } }, [e._t("icon", function() {
+    return [e.loading ? n("NcLoadingIcon") : e.buttonVariant ? e._e() : n(e.checkboxRadioIconElement, { tag: "component", attrs: { size: e.size } })];
+  }, { checked: e.isChecked, loading: e.loading })], 2), n("span", { class: ["checkbox-content__text", e.textClass] }, [e._t("default")], 2)]);
+}, E = [], q = /* @__PURE__ */ c.normalizeComponent(
+  T,
+  S,
+  E,
+  !1,
+  null,
+  "ad1f8733",
+  null,
+  null
+);
+const R = q.exports;
+const a = "checkbox", s = "radio", i = "switch", r = "button", z = {
   name: "NcCheckboxRadioSwitch",
   components: {
-    NcLoadingIcon: c
+    NcCheckboxContent: R
   },
-  mixins: [u.l10n],
+  mixins: [y.l10n],
   props: {
     /**
      * Unique id attribute of the input
      */
     id: {
       type: String,
-      default: () => "checkbox-radio-switch-" + d.GenRandomId(),
+      default: () => "checkbox-radio-switch-" + k.GenRandomId(),
       validator: (t) => t.trim() !== ""
     },
+    /**
+     * Unique id attribute of the wrapper element
+     */
+    wrapperId: {
+      type: String,
+      default: null
+    },
     /**
      * Input name. Required for radio, optional for checkbox, and ignored
      * for button.
@@ -33,9 +145,9 @@ const o = "checkbox", s = "radio", a = "switch", r = "button", T = {
       type: String,
       default: "checkbox",
       validator: (t) => [
-        o,
-        s,
         a,
+        s,
+        i,
         r
       ].includes(t)
     },
@@ -100,24 +212,34 @@ const o = "checkbox", s = "radio", a = "switch", r = "button", T = {
     },
     /**
      * Wrapping element tag
+     *
+     * When `type` is set to `button` this will be ignored
+     *
+     * Defaults to `span`
      */
     wrapperElement: {
       type: String,
-      default: "span"
+      default: null
     }
   },
   emits: ["update:checked"],
   computed: {
+    isButtonType() {
+      return this.type === r;
+    },
+    computedWrapperElement() {
+      return this.isButtonType ? "button" : this.wrapperElement !== null ? this.wrapperElement : "span";
+    },
     inputProps() {
-      return this.type === r ? null : {
+      return this.isButtonType ? null : {
         checked: this.isChecked,
         indeterminate: this.indeterminate,
         required: this.required,
         name: this.name
       };
     },
-    inputListeners() {
-      return this.type === r ? {
+    listeners() {
+      return this.isButtonType ? {
         click: this.onToggle
       } : {
         change: this.onToggle
@@ -126,10 +248,10 @@ const o = "checkbox", s = "radio", a = "switch", r = "button", T = {
     /**
      * Icon size
      *
-     @return {number}
+     * @return {number}
      */
     size() {
-      return this.type === a ? 36 : 24;
+      return this.type === i ? 36 : 24;
     },
     /**
      * Css local variables for this component
@@ -149,10 +271,10 @@ const o = "checkbox", s = "radio", a = "switch", r = "button", T = {
      */
     inputType() {
       return [
-        o,
+        a,
         s,
         r
-      ].includes(this.type) ? this.type : o;
+      ].includes(this.type) ? this.type : a;
     },
     /**
      * Check if that entry is checked
@@ -163,22 +285,14 @@ const o = "checkbox", s = "radio", a = "switch", r = "button", T = {
      */
     isChecked() {
       return this.value !== null ? Array.isArray(this.checked) ? [...this.checked].indexOf(this.value) > -1 : this.checked === this.value : this.checked === !0;
-    },
-    /**
-     * Returns the proper Material icon depending on the select case
-     *
-     * @return {object}
-     */
-    checkboxRadioIconElement() {
-      return this.type === s ? this.isChecked ? w.default : v.default : this.type === a ? this.isChecked ? S.default : C.default : this.indeterminate ? g.default : this.isChecked ? x.default : y.default;
     }
   },
   mounted() {
-    if (this.name && this.type === o && !Array.isArray(this.checked))
+    if (this.name && this.type === a && !Array.isArray(this.checked))
       throw new Error("When using groups of checkboxes, the updated value will be an array.");
-    if (this.name && this.type === a)
+    if (this.name && this.type === i)
       throw new Error("Switches are not made to be used for data sets. Please use checkboxes instead.");
-    if (typeof this.checked != "boolean" && this.type === a)
+    if (typeof this.checked != "boolean" && this.type === i)
       throw new Error("Switches can only be used with boolean as checked prop.");
   },
   methods: {
@@ -189,7 +303,7 @@ const o = "checkbox", s = "radio", a = "switch", r = "button", T = {
         this.$emit("update:checked", this.value);
         return;
       }
-      if (this.type === a) {
+      if (this.type === i) {
         this.$emit("update:checked", !this.isChecked);
         return;
       }
@@ -210,28 +324,29 @@ const o = "checkbox", s = "radio", a = "switch", r = "button", T = {
     }
   }
 };
-var B = function() {
-  var e = this, i = e._self._c;
-  return i(e.wrapperElement, { tag: "component", staticClass: "checkbox-radio-switch", class: {
+var I = function() {
+  var e = this, n = e._self._c;
+  return n(e.computedWrapperElement, e._g({ tag: "component", staticClass: "checkbox-radio-switch", class: {
     ["checkbox-radio-switch-" + e.type]: e.type,
     "checkbox-radio-switch--checked": e.isChecked,
     "checkbox-radio-switch--disabled": e.disabled,
     "checkbox-radio-switch--indeterminate": e.indeterminate,
     "checkbox-radio-switch--button-variant": e.buttonVariant,
     "checkbox-radio-switch--button-variant-v-grouped": e.buttonVariant && e.buttonVariantGrouped === "vertical",
-    "checkbox-radio-switch--button-variant-h-grouped": e.buttonVariant && e.buttonVariantGrouped === "horizontal"
-  }, style: e.cssVars }, [i("input", e._g(e._b({ staticClass: "checkbox-radio-switch__input", attrs: { id: e.id, disabled: e.disabled, type: e.inputType }, domProps: { value: e.value } }, "input", e.inputProps, !1), e.inputListeners)), i("label", { staticClass: "checkbox-radio-switch__label", attrs: { for: e.id } }, [i("div", { staticClass: "checkbox-radio-switch__icon" }, [e._t("icon", function() {
-    return [e.loading ? i("NcLoadingIcon") : e.buttonVariant ? e._e() : i(e.checkboxRadioIconElement, { tag: "component", attrs: { size: e.size } })];
-  }, { checked: e.isChecked, loading: e.loading })], 2), i("span", { staticClass: "checkbox-radio-switch__label-text" }, [e._t("default")], 2)])]);
-}, q = [], E = /* @__PURE__ */ m.normalizeComponent(
-  T,
-  B,
-  q,
+    "checkbox-radio-switch--button-variant-h-grouped": e.buttonVariant && e.buttonVariantGrouped === "horizontal",
+    "button-vue": e.isButtonType
+  }, style: e.cssVars, attrs: { id: e.wrapperId, type: e.isButtonType ? "button" : null } }, e.isButtonType ? e.listeners : null), [e.isButtonType ? e._e() : n("input", e._g(e._b({ staticClass: "checkbox-radio-switch__input", attrs: { id: e.id, disabled: e.disabled, type: e.inputType }, domProps: { value: e.value } }, "input", e.inputProps, !1), e.listeners)), n("NcCheckboxContent", { staticClass: "checkbox-radio-switch__content", attrs: { id: e.id, "icon-class": "checkbox-radio-switch__icon", "text-class": "checkbox-radio-switch__text", type: e.type, "button-variant": e.buttonVariant, "is-checked": e.isChecked, loading: e.loading, size: e.size }, scopedSlots: e._u([{ key: "icon", fn: function() {
+    return [e._t("icon")];
+  }, proxy: !0 }], null, !0) }, [e._t("default")], 2)], 1);
+}, N = [], V = /* @__PURE__ */ c.normalizeComponent(
+  z,
+  I,
+  N,
   !1,
   null,
-  "a6f82e18",
+  "dcc8fabc",
   null,
   null
 );
-const R = E.exports;
-module.exports = R;
+const O = V.exports;
+module.exports = O;

package/dist/Components/NcCheckboxRadioSwitch.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcCheckboxRadioSwitch.cjs","sources":["../../src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2021 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  - @author Ferdinand Thiessen <opensource@fthiessen.de>\n  -\n  - @license AGPL-3.0-or-later\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<docs>\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\n### Standard checkbox\n```vue\n<template>\n\t<div>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"sharingEnabled\">Enable sharing</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"sharingEnabled\" :disabled=\"true\">Enable sharing (disabled)</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked=\"sharingEnabled\" :loading=\"loading\" @update:checked=\"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 :checked.sync=\"sharingPermission\" value=\"r\" name=\"sharing_permission_radio\" type=\"radio\">Default permission read</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"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\t:checked.sync=\"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\t:checked.sync=\"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\t:checked.sync=\"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\t:checked.sync=\"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\t:checked.sync=\"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\t:checked.sync=\"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\t:checked.sync=\"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\t:checked.sync=\"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\" :checked.sync=\"sharingPermission\" value=\"r\" name=\"sharing_permission\">Permission read</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"sharingPermission\" value=\"w\" name=\"sharing_permission\">Permission write</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"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 :checked.sync=\"sharingEnabled\" type=\"switch\">Enable sharing</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"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=\"wrapperElement\"\n\t\t:class=\"{\n\t\t\t['checkbox-radio-switch-' + type]: type,\n\t\t\t'checkbox-radio-switch--checked': isChecked,\n\t\t\t'checkbox-radio-switch--disabled': disabled,\n\t\t\t'checkbox-radio-switch--indeterminate': indeterminate,\n\t\t\t'checkbox-radio-switch--button-variant': buttonVariant,\n\t\t\t'checkbox-radio-switch--button-variant-v-grouped': buttonVariant && buttonVariantGrouped === 'vertical',\n\t\t\t'checkbox-radio-switch--button-variant-h-grouped': buttonVariant && buttonVariantGrouped === 'horizontal',\n\t\t}\"\n\t\t:style=\"cssVars\"\n\t\tclass=\"checkbox-radio-switch\">\n\t\t<input :id=\"id\"\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\tv-bind=\"inputProps\"\n\t\t\tv-on=\"inputListeners\">\n\t\t<label :for=\"id\" class=\"checkbox-radio-switch__label\">\n\t\t\t<div class=\"checkbox-radio-switch__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\t\t@binding {bool} checked The input checked state\n\t\t\t\t\t\t@binding {bool} loading The loading state\n\t\t\t\t-->\n\t\t\t\t<slot name=\"icon\"\n\t\t\t\t\t:checked=\"isChecked\"\n\t\t\t\t\t:loading=\"loading\">\n\t\t\t\t\t<NcLoadingIcon v-if=\"loading\" />\n\t\t\t\t\t<component :is=\"checkboxRadioIconElement\"\n\t\t\t\t\t\tv-else-if=\"!buttonVariant\"\n\t\t\t\t\t\t:size=\"size\" />\n\t\t\t\t</slot>\n\t\t\t</div>\n\n\t\t\t<!-- @slot The checkbox/radio label -->\n\t\t\t<span class=\"checkbox-radio-switch__label-text\"><slot /></span>\n\t\t</label>\n\t</component>\n</template>\n\n<script>\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport l10n from '../../mixins/l10n.js'\n\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\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: 'NcCheckboxRadioSwitch',\n\n\tcomponents: {\n\t\tNcLoadingIcon,\n\t},\n\n\tmixins: [l10n],\n\n\tprops: {\n\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-' + GenRandomId(),\n\t\t\tvalidator: id => id.trim() !== '',\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 * 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\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 * Possible values are `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 `:value.sync`\n\t\t */\n\t\tchecked: {\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\twrapperElement: {\n\t\t\ttype: String,\n\t\t\tdefault: 'span',\n\t\t},\n\t},\n\n\temits: ['update:checked'],\n\n\tcomputed: {\n\t\tinputProps() {\n\t\t\tif (this.type === TYPE_BUTTON) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\treturn {\n\t\t\t\tchecked: this.isChecked,\n\t\t\t\tindeterminate: this.indeterminate,\n\t\t\t\trequired: this.required,\n\t\t\t\tname: this.name,\n\t\t\t}\n\t\t},\n\n\t\tinputListeners() {\n\t\t\tif (this.type === TYPE_BUTTON) {\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 * 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 * Css local variables for this component\n\t\t *\n\t\t * @return {object}\n\t\t */\n\t\tcssVars() {\n\t\t\treturn {\n\t\t\t\t'--icon-size': this.size + 'px',\n\t\t\t}\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.checked)) {\n\t\t\t\t\treturn [...this.checked].indexOf(this.value) > -1\n\t\t\t\t}\n\t\t\t\treturn this.checked === this.value\n\t\t\t}\n\t\t\treturn this.checked === true\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\tmounted() {\n\t\tif (this.name && this.type === TYPE_CHECKBOX) {\n\t\t\tif (!Array.isArray(this.checked)) {\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.checked !== 'boolean' && this.type === TYPE_SWITCH) {\n\t\t\tthrow new Error('Switches can only be used with boolean as checked prop.')\n\t\t}\n\t},\n\n\tmethods: {\n\t\tonToggle() {\n\t\t\tif (this.disabled) {\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:checked', 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:checked', !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.checked === 'boolean') {\n\t\t\t\tthis.$emit('update:checked', !this.isChecked)\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\t\t\tthis.$emit('update:checked', values)\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\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 + label {\n\t\toutline: 2px solid var(--color-primary-element) !important;\n\t}\n\n\t&__label {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tflex-direction: row;\n\t\tgap: 4px;\n\t\tuser-select: none;\n\t\tmin-height: $clickable-area;\n\t\tborder-radius: $clickable-area;\n\t\tpadding: 4px $icon-margin;\n\t\t// Set to 100% to make text overflow work on button style\n\t\twidth: 100%;\n\t\t// but restrict to content so plain checkboxes / radio switches do not expand\n\t\tmax-width: fit-content;\n\n\t\t&, * {\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t&-text: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\tcolor: var(--color-primary-element);\n\t\twidth: var(--icon-size);\n\t\theight: var(--icon-size);\n\t}\n\n\t&--disabled &__label {\n\t\topacity: $opacity_disabled;\n\t\t.checkbox-radio-switch__icon > * {\n\t\t\tcolor: var(--color-main-text)\n\t\t}\n\t}\n\n\t&:not(&--disabled, &--checked):focus-within &__label,\n\t&:not(&--disabled, &--checked) &__label:hover {\n\t\tbackground-color: var(--color-background-hover);\n\t}\n\n\t&--checked:not(&--disabled):focus-within &__label,\n\t&--checked:not(&--disabled) &__label:hover {\n\t\tbackground-color: var(--color-primary-element-light-hover);\n\t}\n\n\t// Switch specific rules\n\t&-switch:not(&--checked) &__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 &__icon > * {\n\t\tcolor: var(--color-primary-element-light);\n\t}\n\n\t$border-radius: calc(var(--default-clickable-area) / 2);\n\t// keep inner border width in mind\n\t$border-radius-outer: calc($border-radius + 2px);\n\n\t&--button-variant.checkbox-radio-switch {\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\tlabel {\n\t\t\t\tbackground-color: var(--color-primary-element-light);\n\t\t\t}\n\t\t}\n\t}\n\n\t// Text overflow of button style\n\t&--button-variant &__label-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) &__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 &__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 &__label {\n\t\tborder-radius: $border-radius;\n\t}\n\n\t/* Special rules for vertical button groups */\n\t&--button-variant-v-grouped &__label {\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-top-left-radius: $border-radius-outer;\n\t\t\tborder-top-right-radius: $border-radius-outer;\n\t\t}\n\t\t&:last-of-type {\n\t\t\tborder-bottom-left-radius: $border-radius-outer;\n\t\t\tborder-bottom-right-radius: $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__label {\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-top-left-radius: $border-radius-outer;\n\t\t\tborder-bottom-left-radius: $border-radius-outer;\n\t\t}\n\t\t&:last-of-type {\n\t\t\tborder-top-right-radius: $border-radius-outer;\n\t\t\tborder-bottom-right-radius: $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-right: 0!important;\n\t\t\t.checkbox-radio-switch__label {\n\t\t\t\tmargin-right: 2px;\n\t\t\t}\n\t\t}\n\t\t&:not(:first-of-type) {\n\t\t\tborder-left: 0!important;\n\t\t}\n\t}\n\t&--button-variant-h-grouped &__label-text {\n\t\ttext-align: center;\n\t}\n\t&--button-variant-h-grouped &__label {\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":["TYPE_CHECKBOX","TYPE_RADIO","TYPE_SWITCH","TYPE_BUTTON","_sfc_main","Components_NcLoadingIcon","l10n","GenRandomId","id","type","v","RadioboxMarked__default","RadioboxBlank__default","ToggleSwitch__default","ToggleSwitchOff__default","MinusBox__default","CheckboxMarked__default","CheckboxBlankOutline__default","values","input"],"mappings":";;AA0TA,MAAAA,IAAA,YACAC,IAAA,SACAC,IAAA,UACAC,IAAA,UAEAC,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,eAAAC;AAAA,EACA;AAAA,EAEA,QAAA,CAAAC,EAAA,IAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAKA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,2BAAAC,EAAA,YAAA;AAAA,MACA,WAAA,CAAAC,MAAAA,EAAA,KAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA;AAAA,QACAT;AAAA,QACAC;AAAA,QACAC;AAAA,QACAC;AAAA,MACA,EAAA,SAAAM,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,sBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA,CAAA,MAAA,YAAA,YAAA,EAAA,SAAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA,CAAA,SAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,CAAA,gBAAA;AAAA,EAEA,UAAA;AAAA,IACA,aAAA;AACA,aAAA,KAAA,SAAAP,IACA,OAEA;AAAA,QACA,SAAA,KAAA;AAAA,QACA,eAAA,KAAA;AAAA,QACA,UAAA,KAAA;AAAA,QACA,MAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,aAAA,KAAA,SAAAA,IACA;AAAA,QACA,OAAA,KAAA;AAAA,MACA,IAEA;AAAA,QACA,QAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,OAAA;AACA,aAAA,KAAA,SAAAD,IACA,KACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,UAAA;AACA,aAAA;AAAA,QACA,eAAA,KAAA,OAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,YAAA;AAMA,aALA;AAAA,QACAF;AAAA,QACAC;AAAA,QACAE;AAAA,MACA,EACA,SAAA,KAAA,IAAA,IACA,KAAA,OAEAH;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,YAAA;AACA,aAAA,KAAA,UAAA,OACA,MAAA,QAAA,KAAA,OAAA,IACA,CAAA,GAAA,KAAA,OAAA,EAAA,QAAA,KAAA,KAAA,IAAA,KAEA,KAAA,YAAA,KAAA,QAEA,KAAA,YAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,2BAAA;AACA,aAAA,KAAA,SAAAC,IACA,KAAA,YACAU,EAAA,UAEAC,EAAA,UAIA,KAAA,SAAAV,IACA,KAAA,YACAW,EAAA,UAEAC,EAAA,UAIA,KAAA,gBACAC,EAAA,UAEA,KAAA,YACAC,EAAA,UAEAC,EAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,QAAA,KAAA,QAAA,KAAA,SAAAjB,KACA,CAAA,MAAA,QAAA,KAAA,OAAA;AACA,YAAA,IAAA,MAAA,sEAAA;AAKA,QAAA,KAAA,QAAA,KAAA,SAAAE;AACA,YAAA,IAAA,MAAA,gFAAA;AAIA,QAAA,OAAA,KAAA,WAAA,aAAA,KAAA,SAAAA;AACA,YAAA,IAAA,MAAA,yDAAA;AAAA,EAEA;AAAA,EAEA,SAAA;AAAA,IACA,WAAA;AACA,UAAA,KAAA;AACA;AAIA,UAAA,KAAA,SAAAD,GAAA;AACA,aAAA,MAAA,kBAAA,KAAA,KAAA;AACA;AAAA,MACA;AAGA,UAAA,KAAA,SAAAC,GAAA;AACA,aAAA,MAAA,kBAAA,CAAA,KAAA,SAAA;AACA;AAAA,MACA;AAGA,UAAA,OAAA,KAAA,WAAA,WAAA;AACA,aAAA,MAAA,kBAAA,CAAA,KAAA,SAAA;AACA;AAAA,MACA;AAGA,YAAAgB,IAAA,KAAA,aAAA,EACA,OAAA,CAAAC,MAAAA,EAAA,OAAA,EACA,IAAA,CAAAA,MAAAA,EAAA,KAAA;AACA,WAAA,MAAA,kBAAAD,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,eAAA;AACA,aAAA,CAAA,GAAA,SAAA,kBAAA,KAAA,IAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcCheckboxRadioSwitch.cjs","sources":["../../src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue","../../src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue"],"sourcesContent":["<!--\n  - @copyright 2023 Christopher Ng <chrng8@gmail.com>\n  -\n  - @author Christopher Ng <chrng8@gmail.com>\n  -\n  - @license AGPL-3.0-or-later\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n-->\n\n<template>\n\t<component :is=\"wrapperElement\"\n\t\t:for=\"!isButtonType ? id : null\"\n\t\tclass=\"checkbox-content\">\n\t\t<span :class=\"['checkbox-content__icon', iconClass]\"\n\t\t\t:aria-hidden=\"true\">\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 :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</component>\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\nimport { TYPE_BUTTON, TYPE_CHECKBOX, TYPE_RADIO, TYPE_SWITCH } from './NcCheckboxRadioSwitch.vue'\n\nexport default {\n\tname: 'NcCheckboxContent',\n\n\tcomponents: {\n\t\tNcLoadingIcon,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Unique id attribute of the input to label\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\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\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 * 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\twrapperElement() {\n\t\t\tif (this.isButtonType) {\n\t\t\t\treturn 'span'\n\t\t\t}\n\t\t\treturn 'label'\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: 4px;\n\tuser-select: none;\n\tmin-height: $clickable-area;\n\tborder-radius: $clickable-area;\n\tpadding: 4px $icon-margin;\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\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\tcolor: var(--color-primary-element);\n\t\twidth: var(--icon-size);\n\t\theight: var(--icon-size);\n\t}\n\n\t&, * {\n\t\tcursor: pointer;\n\t}\n}\n</style>\n","<!--\n  - @copyright Copyright (c) 2021 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  - @author Ferdinand Thiessen <opensource@fthiessen.de>\n  -\n  - @license AGPL-3.0-or-later\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<docs>\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\n### Standard checkbox\n```vue\n<template>\n\t<div>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"sharingEnabled\">Enable sharing</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"sharingEnabled\" :disabled=\"true\">Enable sharing (disabled)</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked=\"sharingEnabled\" :loading=\"loading\" @update:checked=\"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 :checked.sync=\"sharingPermission\" value=\"r\" name=\"sharing_permission_radio\" type=\"radio\">Default permission read</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"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\t:checked.sync=\"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\t:checked.sync=\"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\t:checked.sync=\"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\t:checked.sync=\"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\t:checked.sync=\"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\t:checked.sync=\"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\t:checked.sync=\"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\t:checked.sync=\"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\" :checked.sync=\"sharingPermission\" value=\"r\" name=\"sharing_permission\">Permission read</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"sharingPermission\" value=\"w\" name=\"sharing_permission\">Permission write</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"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 :checked.sync=\"sharingEnabled\" type=\"switch\">Enable sharing</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :checked.sync=\"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\"\n\t\t:class=\"{\n\t\t\t['checkbox-radio-switch-' + type]: type,\n\t\t\t'checkbox-radio-switch--checked': isChecked,\n\t\t\t'checkbox-radio-switch--disabled': disabled,\n\t\t\t'checkbox-radio-switch--indeterminate': indeterminate,\n\t\t\t'checkbox-radio-switch--button-variant': buttonVariant,\n\t\t\t'checkbox-radio-switch--button-variant-v-grouped': buttonVariant && buttonVariantGrouped === 'vertical',\n\t\t\t'checkbox-radio-switch--button-variant-h-grouped': buttonVariant && buttonVariantGrouped === 'horizontal',\n\t\t\t'button-vue': isButtonType,\n\t\t}\"\n\t\tclass=\"checkbox-radio-switch\"\n\t\t:style=\"cssVars\"\n\t\t:type=\"isButtonType ? 'button' : null\"\n\t\tv-on=\"isButtonType ? listeners : null\">\n\t\t<input v-if=\"!isButtonType\"\n\t\t\t:id=\"id\"\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\tv-bind=\"inputProps\"\n\t\t\tv-on=\"listeners\">\n\t\t<NcCheckboxContent :id=\"id\"\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: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<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<!-- @slot The checkbox/radio label -->\n\t\t\t<slot />\n\t\t</NcCheckboxContent>\n\t</component>\n</template>\n\n<script>\nimport NcCheckboxContent from './NcCheckboxContent.vue'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport l10n from '../../mixins/l10n.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: 'NcCheckboxRadioSwitch',\n\n\tcomponents: {\n\t\tNcCheckboxContent,\n\t},\n\n\tmixins: [l10n],\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-' + GenRandomId(),\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 * 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\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 * Possible values are `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 `:value.sync`\n\t\t */\n\t\tchecked: {\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\t},\n\n\temits: ['update:checked'],\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\tinputProps() {\n\t\t\tif (this.isButtonType) {\n\t\t\t\treturn null\n\t\t\t}\n\t\t\treturn {\n\t\t\t\tchecked: this.isChecked,\n\t\t\t\tindeterminate: this.indeterminate,\n\t\t\t\trequired: this.required,\n\t\t\t\tname: this.name,\n\t\t\t}\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 * 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 * Css local variables for this component\n\t\t *\n\t\t * @return {object}\n\t\t */\n\t\tcssVars() {\n\t\t\treturn {\n\t\t\t\t'--icon-size': this.size + 'px',\n\t\t\t}\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.checked)) {\n\t\t\t\t\treturn [...this.checked].indexOf(this.value) > -1\n\t\t\t\t}\n\t\t\t\treturn this.checked === this.value\n\t\t\t}\n\t\t\treturn this.checked === true\n\t\t},\n\t},\n\n\tmounted() {\n\t\tif (this.name && this.type === TYPE_CHECKBOX) {\n\t\t\tif (!Array.isArray(this.checked)) {\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.checked !== 'boolean' && this.type === TYPE_SWITCH) {\n\t\t\tthrow new Error('Switches can only be used with boolean as checked prop.')\n\t\t}\n\t},\n\n\tmethods: {\n\t\tonToggle() {\n\t\t\tif (this.disabled) {\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:checked', 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:checked', !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.checked === 'boolean') {\n\t\t\t\tthis.$emit('update:checked', !this.isChecked)\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\t\t\tthis.$emit('update:checked', values)\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\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\toutline: 2px solid var(--color-primary-element) !important;\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}\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-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$border-radius: calc(var(--default-clickable-area) / 2);\n\t// keep inner border width in mind\n\t$border-radius-outer: calc($border-radius + 2px);\n\n\t&--button-variant.checkbox-radio-switch {\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-light);\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: $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-top-left-radius: $border-radius-outer;\n\t\t\tborder-top-right-radius: $border-radius-outer;\n\t\t}\n\t\t&:last-of-type {\n\t\t\tborder-bottom-left-radius: $border-radius-outer;\n\t\t\tborder-bottom-right-radius: $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-top-left-radius: $border-radius-outer;\n\t\t\tborder-bottom-left-radius: $border-radius-outer;\n\t\t}\n\t\t&:last-of-type {\n\t\t\tborder-top-right-radius: $border-radius-outer;\n\t\t\tborder-bottom-right-radius: $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-right: 0!important;\n\t\t\t.checkbox-radio-switch__content {\n\t\t\t\tmargin-right: 2px;\n\t\t\t}\n\t\t}\n\t\t&:not(:first-of-type) {\n\t\t\tborder-left: 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}\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$1","Components_NcLoadingIcon","type","TYPE_CHECKBOX","TYPE_RADIO","TYPE_SWITCH","TYPE_BUTTON","RadioboxMarked__default","RadioboxBlank__default","ToggleSwitch__default","ToggleSwitchOff__default","MinusBox__default","CheckboxMarked__default","CheckboxBlankOutline__default","_sfc_main","NcCheckboxContent","l10n","GenRandomId","id","v","values","input"],"mappings":";;AA8DA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,eAAAC;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA;AAAA,QACAC;AAAA,QACAC;AAAA,QACAC;AAAA,QACAC;AAAA,MACA,EAAA,SAAAJ,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,eAAA;AACA,aAAA,KAAA,SAAAI;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,aAAA,KAAA,eACA,SAEA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,2BAAA;AACA,aAAA,KAAA,SAAAF,IACA,KAAA,YACAG,EAAA,UAEAC,EAAA,UAIA,KAAA,SAAAH,IACA,KAAA,YACAI,EAAA,UAEAC,EAAA,UAIA,KAAA,gBACAC,EAAA,UAEA,KAAA,YACAC,EAAA,UAEAC,EAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;AC0HA,MAAAV,IAAA,YACAC,IAAA,SACAC,IAAA,UACAC,IAAA,UAEAQ,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,mBAAAC;AAAA,EACA;AAAA,EAEA,QAAA,CAAAC,EAAA,IAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,2BAAAC,EAAA,YAAA;AAAA,MACA,WAAA,CAAAC,MAAAA,EAAA,KAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAhB,MAAA;AAAA,QACAC;AAAA,QACAC;AAAA,QACAC;AAAA,QACAC;AAAA,MACA,EAAA,SAAAJ,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,sBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAiB,MAAA,CAAA,MAAA,YAAA,YAAA,EAAA,SAAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA,CAAA,SAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,CAAA,gBAAA;AAAA,EAEA,UAAA;AAAA,IACA,eAAA;AACA,aAAA,KAAA,SAAAb;AAAA,IACA;AAAA,IAEA,yBAAA;AACA,aAAA,KAAA,eACA,WAEA,KAAA,mBAAA,OACA,KAAA,iBAEA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA,KAAA,eACA,OAEA;AAAA,QACA,SAAA,KAAA;AAAA,QACA,eAAA,KAAA;AAAA,QACA,UAAA,KAAA;AAAA,QACA,MAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,aAAA,KAAA,eACA;AAAA,QACA,OAAA,KAAA;AAAA,MACA,IAEA;AAAA,QACA,QAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,OAAA;AACA,aAAA,KAAA,SAAAD,IACA,KACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,UAAA;AACA,aAAA;AAAA,QACA,eAAA,KAAA,OAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,YAAA;AAMA,aALA;AAAA,QACAF;AAAA,QACAC;AAAA,QACAE;AAAA,MACA,EACA,SAAA,KAAA,IAAA,IACA,KAAA,OAEAH;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,YAAA;AACA,aAAA,KAAA,UAAA,OACA,MAAA,QAAA,KAAA,OAAA,IACA,CAAA,GAAA,KAAA,OAAA,EAAA,QAAA,KAAA,KAAA,IAAA,KAEA,KAAA,YAAA,KAAA,QAEA,KAAA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,QAAA,KAAA,QAAA,KAAA,SAAAA,KACA,CAAA,MAAA,QAAA,KAAA,OAAA;AACA,YAAA,IAAA,MAAA,sEAAA;AAKA,QAAA,KAAA,QAAA,KAAA,SAAAE;AACA,YAAA,IAAA,MAAA,gFAAA;AAIA,QAAA,OAAA,KAAA,WAAA,aAAA,KAAA,SAAAA;AACA,YAAA,IAAA,MAAA,yDAAA;AAAA,EAEA;AAAA,EAEA,SAAA;AAAA,IACA,WAAA;AACA,UAAA,KAAA;AACA;AAIA,UAAA,KAAA,SAAAD,GAAA;AACA,aAAA,MAAA,kBAAA,KAAA,KAAA;AACA;AAAA,MACA;AAGA,UAAA,KAAA,SAAAC,GAAA;AACA,aAAA,MAAA,kBAAA,CAAA,KAAA,SAAA;AACA;AAAA,MACA;AAGA,UAAA,OAAA,KAAA,WAAA,WAAA;AACA,aAAA,MAAA,kBAAA,CAAA,KAAA,SAAA;AACA;AAAA,MACA;AAGA,YAAAe,IAAA,KAAA,aAAA,EACA,OAAA,CAAAC,MAAAA,EAAA,OAAA,EACA,IAAA,CAAAA,MAAAA,EAAA,KAAA;AACA,WAAA,MAAA,kBAAAD,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,eAAA;AACA,aAAA,CAAA,GAAA,SAAA,kBAAA,KAAA,IAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}