npm - @nextcloud/vue - Versions diffs - 8.12.0 → 8.13.0 - Mend

@nextcloud/vue 8.12.0 → 8.13.0

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

Files changed (782) hide show

package/dist/chunks/NcCheckboxRadioSwitch-08IiPYnO.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcCheckboxRadioSwitch-08IiPYnO.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\n<template>\n\t<span :id=\"!isButtonType ? `${id}-label` : undefined\"\n\t\tclass=\"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<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\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\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 * 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\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: 4px;\n\tuser-select: none;\n\tmin-height: $clickable-area;\n\tborder-radius: $clickable-area;\n\tpadding: 4px calc(($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}\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-right: $icon-margin;\n\t}\n\n\t&:not(&--button-variant) {\n\t\t.checkbox-content__icon > * {\n\t\t\tcolor: var(--color-primary-element);\n\t\t}\n\t}\n\n\t&, * {\n\t\tcursor: pointer;\n\t\tflex-shrink: 0;\n\t}\n}\n</style>\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 attributes on the element are passed to the inner input element - except for the button type.\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:aria-label=\"isButtonType && ariaLabel ? ariaLabel : undefined\"\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': hasIndeterminate ? indeterminate : false,\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-bind=\"isButtonType ? $attrs : {}\"\n\t\tv-on=\"isButtonType ? listeners : null\">\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=\"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: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.native=\"onToggle\">\n\t\t\t<template #icon>\n\t\t\t\t\n\t\t\t\t<slot name=\"icon\" />\n\t\t\t</template>\n\n\t\t\t\n\t\t\t<slot />\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 GenRandomId from '../../utils/GenRandomId.js'\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-' + 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 * 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 `: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\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\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 * 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\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.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\tt,\n\t\tn,\n\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.checked)\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:checked', values.filter((v) => v !== this.value))\n\t\t\t} else {\n\t\t\t\tthis.$emit('update:checked', [...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}\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$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\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: $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\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"],"mappings":"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","x_google_ignoreList":[0,1,2,3,4,5,6]}

package/dist/chunks/{NcCheckboxRadioSwitch-CIHl8lnP.cjs → NcCheckboxRadioSwitch-BC-PCCMB.cjs} RENAMED Viewed

@@ -1,9 +1,9 @@
 "use strict";
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-DbFIE4_M.cjs");
 const Components_NcLoadingIcon = require("../Components/NcLoadingIcon.cjs");
-require("./NcCheckboxRadioSwitch.vue_vue_type_style_index_0_scoped_6d6e6a47_lang-D2wGnjg7.cjs");
-const GenRandomId = require("./GenRandomId-kBCcgMJd.cjs");
-const _l10n = require("./_l10n-BYPqjHzt.cjs");
+require("./NcCheckboxRadioSwitch.vue_vue_type_style_index_0_scoped_45bd1a5d_lang-DM3kps3m.cjs");
+const GenRandomId = require("./GenRandomId-BQDud3d4.cjs");
+const _l10n = require("./_l10n-BGF_R72e.cjs");
 const _sfc_main$8 = {
   name: "CheckboxBlankOutlineIcon",
   emits: ["click"],
@@ -387,7 +387,7 @@ var __component__$1 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_staticRenderFns$1,
   false,
   null,
-  "adf98230",
+  "d9ed614b",
   null,
   null
 );
@@ -677,7 +677,7 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "6d6e6a47",
+  "45bd1a5d",
   null,
   null
 );

package/dist/chunks/NcCheckboxRadioSwitch-BC-PCCMB.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcCheckboxRadioSwitch-BC-PCCMB.cjs","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\n<template>\n\t<span :id=\"!isButtonType ? `${id}-label` : undefined\"\n\t\tclass=\"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<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\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\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 * 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\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: 4px;\n\tuser-select: none;\n\tmin-height: $clickable-area;\n\tborder-radius: $clickable-area;\n\tpadding: 4px calc(($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}\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-right: $icon-margin;\n\t}\n\n\t&:not(&--button-variant) {\n\t\t.checkbox-content__icon > * {\n\t\t\tcolor: var(--color-primary-element);\n\t\t}\n\t}\n\n\t&, * {\n\t\tcursor: pointer;\n\t\tflex-shrink: 0;\n\t}\n}\n</style>\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 attributes on the element are passed to the inner input element - except for the button type.\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:aria-label=\"isButtonType && ariaLabel ? ariaLabel : undefined\"\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': hasIndeterminate ? indeterminate : false,\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-bind=\"isButtonType ? $attrs : {}\"\n\t\tv-on=\"isButtonType ? listeners : null\">\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=\"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: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.native=\"onToggle\">\n\t\t\t<template #icon>\n\t\t\t\t\n\t\t\t\t<slot name=\"icon\" />\n\t\t\t</template>\n\n\t\t\t\n\t\t\t<slot />\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 GenRandomId from '../../utils/GenRandomId.js'\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-' + 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 * 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 `: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\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\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 * 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\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.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\tt,\n\t\tn,\n\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.checked)\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:checked', values.filter((v) => v !== this.value))\n\t\t\t} else {\n\t\t\t\tthis.$emit('update:checked', [...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}\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$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\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: $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\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","NcLoadingIcon","GenRandomId","t","n"],"mappings":"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","x_google_ignoreList":[0,1,2,3,4,5,6]}

package/dist/chunks/NcCheckboxRadioSwitch.vue_vue_type_style_index_0_scoped_45bd1a5d_lang-DM3kps3m.cjs ADDED Viewed

@@ -0,0 +1,4 @@
+require('../assets/NcCheckboxRadioSwitch-CFKCb80n.css');
+"use strict";
+const _l10n = require("./_l10n-BGF_R72e.cjs");
+_l10n.register();

package/dist/chunks/NcCheckboxRadioSwitch.vue_vue_type_style_index_0_scoped_45bd1a5d_lang-DM3kps3m.cjs.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"NcCheckboxRadioSwitch.vue_vue_type_style_index_0_scoped_45bd1a5d_lang-DM3kps3m.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/chunks/NcCheckboxRadioSwitch.vue_vue_type_style_index_0_scoped_45bd1a5d_lang-DP6Ws4da.mjs ADDED Viewed

@@ -0,0 +1,3 @@
+import '../assets/NcCheckboxRadioSwitch-CFKCb80n.css';
+import { r as register } from "./_l10n-B6zipH_A.mjs";
+register();

package/dist/chunks/NcCheckboxRadioSwitch.vue_vue_type_style_index_0_scoped_45bd1a5d_lang-DP6Ws4da.mjs.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"NcCheckboxRadioSwitch.vue_vue_type_style_index_0_scoped_45bd1a5d_lang-DP6Ws4da.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/chunks/{NcColorPicker-BEs2B-HB.mjs → NcColorPicker-C5AAUZow.mjs} RENAMED Viewed

@@ -1,9 +1,9 @@
-import '../assets/NcColorPicker-CzKZjMxY.css';
+import '../assets/NcColorPicker-DH3H7HLS.css';
 import NcButton from "../Components/NcButton.mjs";
-import { N as NcPopover } from "./NcPopover-foxJPAfG.mjs";
-import { r as register, i as t1, a as t } from "./_l10n-hRR5zBTZ.mjs";
-import { d as defaultPalette } from "./GenColors-DcjtQMk3.mjs";
-import { G as GenRandomId } from "./GenRandomId-CXkjMlAT.mjs";
+import { N as NcPopover } from "./NcPopover-VxUr4c6P.mjs";
+import { r as register, i as t1, a as t } from "./_l10n-B6zipH_A.mjs";
+import { d as defaultPalette } from "./GenColors-BvNpSI9g.mjs";
+import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
 import { A as ArrowLeft } from "./ArrowLeft-B9iGweTd.mjs";
 import { C as Check } from "./Check-PawIlCwa.mjs";
 import { D as DotsHorizontal } from "./DotsHorizontal-C0STD_HU.mjs";
@@ -181,7 +181,7 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "98a7b314",
+  "e1b585f0",
   null,
   null
 );

package/dist/chunks/NcColorPicker-C5AAUZow.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcColorPicker-C5AAUZow.mjs","sources":["../../src/components/NcColorPicker/NcColorPicker.vue"],"sourcesContent":["\n\n<docs>\n\n### General description\n\nThis component allows the user to choose a color. It consists of 2\nactual pickers:\n\n- One simple picker with a predefined palette of colors;\n- One more advanced picker that provides the full color spectrum;\n\n### Usage\n\n* Using v-model and passing in an HTML element that will be treated as a trigger:\n\n```vue\n<template>\n\t<div class=\"container0\">\n\t\t<NcColorPicker v-model=\"color\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcColorPicker>\n\t\t<NcColorPicker v-model=\"color\" :palette=\"customPalette\">\n\t\t\t<NcButton> Click Me for a custom palette </NcButton>\n\t\t</NcColorPicker>\n\t\t<div :style=\"{'background-color': color}\" class=\"color0\" />\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tcolor: '#0082c9',\n\t\t\tcustomPalette: [\n\t\t\t\t'#E40303',\n\t\t\t\t'#FF8C00',\n\t\t\t\t'#FFED00',\n\t\t\t\t'#008026',\n\t\t\t\t'#24408E',\n\t\t\t\t'#732982',\n\t\t\t\t'#5BCEFA',\n\t\t\t\t'#F5A9B8',\n\t\t\t\t'#FFFFFF',\n\t\t\t\t'#F5A9B8',\n\t\t\t\t'#5BCEFA',\n\t\t\t],\n\t\t}\n\t}\n}\n</script>\n<style>\n.container0 {\n\tdisplay: flex;\n\tgap: 20px;\n}\n\n.color0 {\n\twidth: 100px;\n\theight: 40px;\n\tborder-radius: 6px;\n}\n</style>\n```\n\n* Using v-bind for both color and open state and emitting an event that updates the color\n\n```vue\n<template>\n\t<div class=\"container1\">\n\t\t<NcButton @click=\"open = !open\"> Click Me </NcButton>\n\t\t<NcColorPicker :value=\"color\" @input=\"updateColor\" :shown.sync=\"open\" @submit=\"open = false\" v-slot=\"{ attrs }\">\n\t\t\t<div v-bind=\"attrs\" :style=\"{'background-color': color}\" class=\"color1\" />\n\t\t</NcColorPicker>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tcolor: '#0082c9',\n\t\t\topen: false\n\t\t}\n\t},\n\tmethods: {\n\t\tupdateColor(e) {\n\t\t\tthis.color = e\n\t\t}\n\t}\n}\n</script>\n<style>\n.container1 {\n\tdisplay: flex;\n}\n\n.color1 {\n\twidth: 100px;\n\theight: 40px;\n\tmargin-left: 20px;\n\tborder-radius: 6px;\n}\n</style>\n```\n\n* Using advanced fields including HEX, RGB, and HSL:\n\n```vue\n<template>\n\t<div class=\"container0\">\n\t\t<NcColorPicker v-model=\"color\"\n\t\t\t:advanced-fields=\"true\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcColorPicker>\n\t\t<div :style=\"{'background-color': color}\" class=\"color0\" />\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tcolor: '#0082c9'\n\t\t}\n\t}\n}\n</script>\n<style>\n.container0 {\n\tdisplay: flex;\n}\n\n.color0 {\n\twidth: 100px;\n\theight: 40px;\n\tmargin-left: 20px;\n\tborder-radius: 6px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<NcPopover popup-role=\"dialog\"\n\t\t:container=\"container\"\n\t\tv-bind=\"$attrs\"\n\t\tv-on=\"$listeners\"\n\t\t@apply-hide=\"handleClose\">\n\t\t<template #trigger=\"slotProps\">\n\t\t\t<slot v-bind=\"slotProps\" />\n\t\t</template>\n\t\t<div role=\"dialog\"\n\t\t\tclass=\"color-picker\"\n\t\t\taria-modal=\"true\"\n\t\t\t:aria-label=\"t('Color picker')\"\n\t\t\t:class=\"{ 'color-picker--advanced-fields': advanced && advancedFields }\">\n\t\t\t<Transition name=\"slide\" mode=\"out-in\">\n\t\t\t\t<div v-if=\"!advanced\" class=\"color-picker__simple\">\n\t\t\t\t\t<label v-for=\"({ color, name }, index) in normalizedPalette\"\n\t\t\t\t\t\t:key=\"index\"\n\t\t\t\t\t\t:style=\"{ backgroundColor: color }\"\n\t\t\t\t\t\tclass=\"color-picker__simple-color-circle\"\n\t\t\t\t\t\t:class=\"{ 'color-picker__simple-color-circle--active' : color === currentColor }\">\n\t\t\t\t\t\t<Check v-if=\"color === currentColor\" :size=\"20\" :fill-color=\"contrastColor\" />\n\t\t\t\t\t\t<input type=\"radio\"\n\t\t\t\t\t\t\tclass=\"hidden-visually\"\n\t\t\t\t\t\t\t:aria-label=\"name\"\n\t\t\t\t\t\t\t:name=\"`color-picker-${uid}`\"\n\t\t\t\t\t\t\t:checked=\"color === currentColor\"\n\t\t\t\t\t\t\t@click=\"pickColor(color)\">\n\t\t\t\t\t</label>\n\t\t\t\t</div>\n\t\t\t\t<Chrome v-else\n\t\t\t\t\tv-model=\"currentColor\"\n\t\t\t\t\tclass=\"color-picker__advanced\"\n\t\t\t\t\t:disable-alpha=\"true\"\n\t\t\t\t\t:disable-fields=\"!advancedFields\"\n\t\t\t\t\t@input=\"pickColor\" />\n\t\t\t</Transition>\n\t\t\t<div v-if=\"!paletteOnly\" class=\"color-picker__navigation\">\n\t\t\t\t<NcButton v-if=\"advanced\"\n\t\t\t\t\ttype=\"tertiary\"\n\t\t\t\t\t:aria-label=\"ariaBack\"\n\t\t\t\t\t@click=\"handleBack\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<ArrowLeft :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t\t<NcButton v-else\n\t\t\t\t\ttype=\"tertiary\"\n\t\t\t\t\t:aria-label=\"ariaMore\"\n\t\t\t\t\t@click=\"handleMoreSettings\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<DotsHorizontal :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t\t<NcButton type=\"primary\"\n\t\t\t\t\t@click=\"handleConfirm\">\n\t\t\t\t\t{{ t('Choose') }}\n\t\t\t\t</NcButton>\n\t\t\t</div>\n\t\t</div>\n\t</NcPopover>\n</template>\n\n<script>\nimport NcButton from '../NcButton/index.js'\nimport NcPopover from '../NcPopover/index.js'\nimport { t } from '../../l10n.js'\nimport { defaultPalette } from '../../utils/GenColors.js'\n\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'\nimport Check from 'vue-material-design-icons/Check.vue'\nimport DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'\n\nimport { Chrome } from 'vue-color'\n\nconst HEX_REGEX = /^#([a-f0-9]{3}|[a-f0-9]{6})$/i\n\nexport default {\n\tname: 'NcColorPicker',\n\n\tcomponents: {\n\t\tArrowLeft,\n\t\tCheck,\n\t\tChrome,\n\t\tDotsHorizontal,\n\t\tNcButton,\n\t\tNcPopover,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * A HEX color that represents the initial value of the picker\n\t\t */\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Set to `true` to enable advanced fields including HEX, RGB, and HSL\n\t\t */\n\t\tadvancedFields: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Limit selectable colors to only the provided palette\n\t\t */\n\t\tpaletteOnly: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Provide a custom array of colors to show.\n\t\t * Can be either an array of string hexadecimal colors,\n\t\t * or an array of object with a `color` property with hexadecimal color string,\n\t\t * and a `name` property for accessibility.\n\t\t *\n\t\t * @type {string[] | {color: string, name: string}[]}\n\t\t */\n\t\tpalette: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [...defaultPalette],\n\t\t\tvalidator: (palette) => palette.every(item =>\n\t\t\t\t(typeof item === 'string' && HEX_REGEX.test(item))\n\t\t\t\t|| (typeof item === 'object' && item.color && HEX_REGEX.test(item.color)),\n\t\t\t),\n\t\t},\n\n\t\t/**\n\t\t * Selector for the popover container\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: [String, Object, Element, Boolean],\n\t\t\tdefault: 'body',\n\t\t},\n\t},\n\n\temits: [\n\t\t'submit',\n\t\t'close',\n\t\t'update:open',\n\t\t'update:value',\n\t\t'input',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tcurrentColor: this.value,\n\t\t\tadvanced: false,\n\t\t\tariaBack: t('Back'),\n\t\t\tariaMore: t('More options'),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tnormalizedPalette() {\n\t\t\treturn this.palette.map((item) => ({\n\t\t\t\tcolor: typeof item === 'object' ? item.color : item,\n\t\t\t\tname: typeof item === 'object' && item.name\n\t\t\t\t\t? item.name\n\t\t\t\t\t: t('A color with a HEX value {hex}', { hex: item.color }),\n\t\t\t}))\n\t\t},\n\n\t\tuid() {\n\t\t\treturn GenRandomId()\n\t\t},\n\t\tcontrastColor() {\n\t\t\tconst black = '#000000'\n\t\t\tconst white = '#FFFFFF'\n\t\t\treturn (this.calculateLuma(this.currentColor) > 0.5) ? black : white\n\t\t},\n\t},\n\n\twatch: {\n\t\tvalue(color) {\n\t\t\tthis.currentColor = color\n\t\t},\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\t/**\n\t\t * Submit a picked colour and close picker\n\t\t */\n\t\thandleConfirm() {\n\t\t\t/**\n\t\t\t * Emits a hexadecimal string e.g. '#ffffff'\n\t\t\t */\n\t\t\tthis.$emit('submit', this.currentColor)\n\t\t\tthis.handleClose()\n\n\t\t\tthis.advanced = false\n\t\t},\n\t\thandleClose() {\n\t\t\t/**\n\t\t\t * Emitted after picker close\n\t\t\t */\n\t\t\tthis.$emit('close')\n\t\t\tthis.$emit('update:open', false)\n\t\t},\n\n\t\t/**\n\t\t * Inner navigations\n\t\t */\n\t\thandleBack() {\n\t\t\tthis.advanced = false\n\t\t},\n\t\thandleMoreSettings() {\n\t\t\tthis.advanced = true\n\t\t},\n\n\t\t/**\n\t\t * Pick a colour\n\t\t *\n\t\t * @param {string} color the picked color\n\t\t */\n\t\tpickColor(color) {\n\t\t\tif (typeof color !== 'string') {\n\t\t\t\tcolor = this.currentColor.hex\n\t\t\t}\n\t\t\tthis.currentColor = color\n\n\t\t\t/**\n\t\t\t * Emits a hexadecimal string e.g. '#ffffff'\n\t\t\t */\n\t\t\tthis.$emit('update:value', color)\n\n\t\t\t/**\n\t\t\t * Emits a hexadecimal string e.g. '#ffffff'\n\t\t\t */\n\t\t\tthis.$emit('input', color)\n\n\t\t},\n\n\t\t/**\n\t\t * Calculate luminance of provided hex color\n\t\t *\n\t\t * @param {string} color the hex color\n\t\t */\n\t\t calculateLuma(color) {\n\t\t\tconst [red, green, blue] = this.hexToRGB(color)\n\t\t\treturn (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255\n\t\t},\n\n\t\t/**\n\t\t * Convert hex color to RGB\n\t\t *\n\t\t * @param {string} hex the hex color\n\t\t */\n\t\t hexToRGB(hex) {\n\t\t\tconst result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex)\n\t\t\treturn result\n\t\t\t\t? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)]\n\t\t\t\t: null\n\t\t},\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n.color-picker {\n\tdisplay: flex;\n\toverflow: hidden;\n\talign-content: flex-end;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\tbox-sizing: content-box !important;\n\twidth: 176px;\n\tpadding: 8px;\n\tborder-radius: 3px;\n\n\t&--advanced-fields {\n\t\twidth: 264px;\n\t}\n\n\t&__simple {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat(auto-fit, $clickable-area);\n\t\tgrid-auto-rows: $clickable-area;\n\n\t\t&-color-circle {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 34px;\n\t\t\theight: 34px;\n\t\t\tmin-height: 34px;\n\t\t\tmargin: auto;\n\t\t\tpadding: 0;\n\t\t\tcolor: white;\n\t\t\tborder: 1px solid rgba(0, 0, 0, 0.25);\n\t\t\tborder-radius: 50%;\n\t\t\tfont-size: 16px;\n\t\t\t&:focus-within {\n\t\t\t\toutline: 2px solid var(--color-main-text);\n\t\t\t}\n\t\t\t&:hover {\n\t\t\t\topacity: .6;\n\t\t\t}\n\t\t\t&--active {\n\t\t\t\twidth: 38px;\n\t\t\t\theight: 38px;\n\t\t\t\tmin-height: 38px;\n\t\t\t\ttransition: all 100ms ease-in-out;\n\t\t\t\topacity: 1 !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__advanced {\n\t\tbox-shadow: none !important;\n\t}\n\n\t&__navigation {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: space-between;\n\t\tmargin-top: 10px;\n\t}\n}\n\n:deep() .vc {\n\t&-chrome {\n\t\twidth: unset;\n\t\tbackground-color: var(--color-main-background);\n\n\t\t&-color-wrap {\n\t\t\twidth: 30px;\n\t\t\theight: 30px;\n\t\t}\n\n\t\t&-active-color {\n\t\t\twidth: 34px;\n\t\t\theight: 34px;\n\t\t\tborder-radius: 17px;\n\t\t}\n\n\t\t&-body {\n\t\t\tpadding: 14px 0 0 0;\n\t\t\tbackground-color: var(--color-main-background);\n\t\t\t.vc-input__input {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\t\t}\n\n\t\t&-toggle-btn {\n\t\t\tfilter: var(--background-invert-if-dark);\n\t\t}\n\n\t\t&-saturation {\n\t\t\t&-wrap {\n\t\t\t\tborder-radius: 3px;\n\t\t\t}\n\n\t\t\t&-circle {\n\t\t\t\twidth: 20px;\n\t\t\t\theight: 20px;\n\t\t\t}\n\t\t}\n\t}\n}\n\n.slide {\n\t&-enter {\n\t\ttransform: translateX(-50%);\n\t\topacity: 0;\n\t}\n\t&-enter-to {\n\t\ttransform: translateX(0);\n\t\topacity: 1;\n\t}\n\t&-leave {\n\t\ttransform: translateX(0);\n\t\topacity: 1;\n\t}\n\t&-leave-to {\n\t\ttransform: translateX(-50%);\n\t\topacity: 0;\n\t}\n\t&-enter-active,\n\t&-leave-active {\n\t\ttransition: all 50ms ease-in-out;\n\t}\n}\n\n</style>\n"],"names":[],"mappings":"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"}

package/dist/chunks/{NcColorPicker-KrvDMhej.cjs → NcColorPicker-DQVfrnSU.cjs} RENAMED Viewed

@@ -1,10 +1,10 @@
-require('../assets/NcColorPicker-CzKZjMxY.css');
+require('../assets/NcColorPicker-DH3H7HLS.css');
 "use strict";
 const Components_NcButton = require("../Components/NcButton.cjs");
-const NcPopover = require("./NcPopover-BS1bBSkg.cjs");
-const _l10n = require("./_l10n-BYPqjHzt.cjs");
-const GenColors = require("./GenColors-CAUl-IDP.cjs");
-const GenRandomId = require("./GenRandomId-kBCcgMJd.cjs");
+const NcPopover = require("./NcPopover-Cl1AvQ5o.cjs");
+const _l10n = require("./_l10n-BGF_R72e.cjs");
+const GenColors = require("./GenColors-Cf5olCPx.cjs");
+const GenRandomId = require("./GenRandomId-BQDud3d4.cjs");
 const ArrowLeft = require("./ArrowLeft-BhNmMdMz.cjs");
 const Check = require("./Check-DZc7keoa.cjs");
 const DotsHorizontal = require("./DotsHorizontal-Cjw3-45t.cjs");
@@ -182,7 +182,7 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "98a7b314",
+  "e1b585f0",
   null,
   null
 );

package/dist/chunks/NcColorPicker-DQVfrnSU.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcColorPicker-DQVfrnSU.cjs","sources":["../../src/components/NcColorPicker/NcColorPicker.vue"],"sourcesContent":["\n\n<docs>\n\n### General description\n\nThis component allows the user to choose a color. It consists of 2\nactual pickers:\n\n- One simple picker with a predefined palette of colors;\n- One more advanced picker that provides the full color spectrum;\n\n### Usage\n\n* Using v-model and passing in an HTML element that will be treated as a trigger:\n\n```vue\n<template>\n\t<div class=\"container0\">\n\t\t<NcColorPicker v-model=\"color\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcColorPicker>\n\t\t<NcColorPicker v-model=\"color\" :palette=\"customPalette\">\n\t\t\t<NcButton> Click Me for a custom palette </NcButton>\n\t\t</NcColorPicker>\n\t\t<div :style=\"{'background-color': color}\" class=\"color0\" />\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tcolor: '#0082c9',\n\t\t\tcustomPalette: [\n\t\t\t\t'#E40303',\n\t\t\t\t'#FF8C00',\n\t\t\t\t'#FFED00',\n\t\t\t\t'#008026',\n\t\t\t\t'#24408E',\n\t\t\t\t'#732982',\n\t\t\t\t'#5BCEFA',\n\t\t\t\t'#F5A9B8',\n\t\t\t\t'#FFFFFF',\n\t\t\t\t'#F5A9B8',\n\t\t\t\t'#5BCEFA',\n\t\t\t],\n\t\t}\n\t}\n}\n</script>\n<style>\n.container0 {\n\tdisplay: flex;\n\tgap: 20px;\n}\n\n.color0 {\n\twidth: 100px;\n\theight: 40px;\n\tborder-radius: 6px;\n}\n</style>\n```\n\n* Using v-bind for both color and open state and emitting an event that updates the color\n\n```vue\n<template>\n\t<div class=\"container1\">\n\t\t<NcButton @click=\"open = !open\"> Click Me </NcButton>\n\t\t<NcColorPicker :value=\"color\" @input=\"updateColor\" :shown.sync=\"open\" @submit=\"open = false\" v-slot=\"{ attrs }\">\n\t\t\t<div v-bind=\"attrs\" :style=\"{'background-color': color}\" class=\"color1\" />\n\t\t</NcColorPicker>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tcolor: '#0082c9',\n\t\t\topen: false\n\t\t}\n\t},\n\tmethods: {\n\t\tupdateColor(e) {\n\t\t\tthis.color = e\n\t\t}\n\t}\n}\n</script>\n<style>\n.container1 {\n\tdisplay: flex;\n}\n\n.color1 {\n\twidth: 100px;\n\theight: 40px;\n\tmargin-left: 20px;\n\tborder-radius: 6px;\n}\n</style>\n```\n\n* Using advanced fields including HEX, RGB, and HSL:\n\n```vue\n<template>\n\t<div class=\"container0\">\n\t\t<NcColorPicker v-model=\"color\"\n\t\t\t:advanced-fields=\"true\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcColorPicker>\n\t\t<div :style=\"{'background-color': color}\" class=\"color0\" />\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tcolor: '#0082c9'\n\t\t}\n\t}\n}\n</script>\n<style>\n.container0 {\n\tdisplay: flex;\n}\n\n.color0 {\n\twidth: 100px;\n\theight: 40px;\n\tmargin-left: 20px;\n\tborder-radius: 6px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<NcPopover popup-role=\"dialog\"\n\t\t:container=\"container\"\n\t\tv-bind=\"$attrs\"\n\t\tv-on=\"$listeners\"\n\t\t@apply-hide=\"handleClose\">\n\t\t<template #trigger=\"slotProps\">\n\t\t\t<slot v-bind=\"slotProps\" />\n\t\t</template>\n\t\t<div role=\"dialog\"\n\t\t\tclass=\"color-picker\"\n\t\t\taria-modal=\"true\"\n\t\t\t:aria-label=\"t('Color picker')\"\n\t\t\t:class=\"{ 'color-picker--advanced-fields': advanced && advancedFields }\">\n\t\t\t<Transition name=\"slide\" mode=\"out-in\">\n\t\t\t\t<div v-if=\"!advanced\" class=\"color-picker__simple\">\n\t\t\t\t\t<label v-for=\"({ color, name }, index) in normalizedPalette\"\n\t\t\t\t\t\t:key=\"index\"\n\t\t\t\t\t\t:style=\"{ backgroundColor: color }\"\n\t\t\t\t\t\tclass=\"color-picker__simple-color-circle\"\n\t\t\t\t\t\t:class=\"{ 'color-picker__simple-color-circle--active' : color === currentColor }\">\n\t\t\t\t\t\t<Check v-if=\"color === currentColor\" :size=\"20\" :fill-color=\"contrastColor\" />\n\t\t\t\t\t\t<input type=\"radio\"\n\t\t\t\t\t\t\tclass=\"hidden-visually\"\n\t\t\t\t\t\t\t:aria-label=\"name\"\n\t\t\t\t\t\t\t:name=\"`color-picker-${uid}`\"\n\t\t\t\t\t\t\t:checked=\"color === currentColor\"\n\t\t\t\t\t\t\t@click=\"pickColor(color)\">\n\t\t\t\t\t</label>\n\t\t\t\t</div>\n\t\t\t\t<Chrome v-else\n\t\t\t\t\tv-model=\"currentColor\"\n\t\t\t\t\tclass=\"color-picker__advanced\"\n\t\t\t\t\t:disable-alpha=\"true\"\n\t\t\t\t\t:disable-fields=\"!advancedFields\"\n\t\t\t\t\t@input=\"pickColor\" />\n\t\t\t</Transition>\n\t\t\t<div v-if=\"!paletteOnly\" class=\"color-picker__navigation\">\n\t\t\t\t<NcButton v-if=\"advanced\"\n\t\t\t\t\ttype=\"tertiary\"\n\t\t\t\t\t:aria-label=\"ariaBack\"\n\t\t\t\t\t@click=\"handleBack\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<ArrowLeft :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t\t<NcButton v-else\n\t\t\t\t\ttype=\"tertiary\"\n\t\t\t\t\t:aria-label=\"ariaMore\"\n\t\t\t\t\t@click=\"handleMoreSettings\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<DotsHorizontal :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t\t<NcButton type=\"primary\"\n\t\t\t\t\t@click=\"handleConfirm\">\n\t\t\t\t\t{{ t('Choose') }}\n\t\t\t\t</NcButton>\n\t\t\t</div>\n\t\t</div>\n\t</NcPopover>\n</template>\n\n<script>\nimport NcButton from '../NcButton/index.js'\nimport NcPopover from '../NcPopover/index.js'\nimport { t } from '../../l10n.js'\nimport { defaultPalette } from '../../utils/GenColors.js'\n\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'\nimport Check from 'vue-material-design-icons/Check.vue'\nimport DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'\n\nimport { Chrome } from 'vue-color'\n\nconst HEX_REGEX = /^#([a-f0-9]{3}|[a-f0-9]{6})$/i\n\nexport default {\n\tname: 'NcColorPicker',\n\n\tcomponents: {\n\t\tArrowLeft,\n\t\tCheck,\n\t\tChrome,\n\t\tDotsHorizontal,\n\t\tNcButton,\n\t\tNcPopover,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * A HEX color that represents the initial value of the picker\n\t\t */\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Set to `true` to enable advanced fields including HEX, RGB, and HSL\n\t\t */\n\t\tadvancedFields: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Limit selectable colors to only the provided palette\n\t\t */\n\t\tpaletteOnly: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Provide a custom array of colors to show.\n\t\t * Can be either an array of string hexadecimal colors,\n\t\t * or an array of object with a `color` property with hexadecimal color string,\n\t\t * and a `name` property for accessibility.\n\t\t *\n\t\t * @type {string[] | {color: string, name: string}[]}\n\t\t */\n\t\tpalette: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [...defaultPalette],\n\t\t\tvalidator: (palette) => palette.every(item =>\n\t\t\t\t(typeof item === 'string' && HEX_REGEX.test(item))\n\t\t\t\t|| (typeof item === 'object' && item.color && HEX_REGEX.test(item.color)),\n\t\t\t),\n\t\t},\n\n\t\t/**\n\t\t * Selector for the popover container\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: [String, Object, Element, Boolean],\n\t\t\tdefault: 'body',\n\t\t},\n\t},\n\n\temits: [\n\t\t'submit',\n\t\t'close',\n\t\t'update:open',\n\t\t'update:value',\n\t\t'input',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tcurrentColor: this.value,\n\t\t\tadvanced: false,\n\t\t\tariaBack: t('Back'),\n\t\t\tariaMore: t('More options'),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tnormalizedPalette() {\n\t\t\treturn this.palette.map((item) => ({\n\t\t\t\tcolor: typeof item === 'object' ? item.color : item,\n\t\t\t\tname: typeof item === 'object' && item.name\n\t\t\t\t\t? item.name\n\t\t\t\t\t: t('A color with a HEX value {hex}', { hex: item.color }),\n\t\t\t}))\n\t\t},\n\n\t\tuid() {\n\t\t\treturn GenRandomId()\n\t\t},\n\t\tcontrastColor() {\n\t\t\tconst black = '#000000'\n\t\t\tconst white = '#FFFFFF'\n\t\t\treturn (this.calculateLuma(this.currentColor) > 0.5) ? black : white\n\t\t},\n\t},\n\n\twatch: {\n\t\tvalue(color) {\n\t\t\tthis.currentColor = color\n\t\t},\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\t/**\n\t\t * Submit a picked colour and close picker\n\t\t */\n\t\thandleConfirm() {\n\t\t\t/**\n\t\t\t * Emits a hexadecimal string e.g. '#ffffff'\n\t\t\t */\n\t\t\tthis.$emit('submit', this.currentColor)\n\t\t\tthis.handleClose()\n\n\t\t\tthis.advanced = false\n\t\t},\n\t\thandleClose() {\n\t\t\t/**\n\t\t\t * Emitted after picker close\n\t\t\t */\n\t\t\tthis.$emit('close')\n\t\t\tthis.$emit('update:open', false)\n\t\t},\n\n\t\t/**\n\t\t * Inner navigations\n\t\t */\n\t\thandleBack() {\n\t\t\tthis.advanced = false\n\t\t},\n\t\thandleMoreSettings() {\n\t\t\tthis.advanced = true\n\t\t},\n\n\t\t/**\n\t\t * Pick a colour\n\t\t *\n\t\t * @param {string} color the picked color\n\t\t */\n\t\tpickColor(color) {\n\t\t\tif (typeof color !== 'string') {\n\t\t\t\tcolor = this.currentColor.hex\n\t\t\t}\n\t\t\tthis.currentColor = color\n\n\t\t\t/**\n\t\t\t * Emits a hexadecimal string e.g. '#ffffff'\n\t\t\t */\n\t\t\tthis.$emit('update:value', color)\n\n\t\t\t/**\n\t\t\t * Emits a hexadecimal string e.g. '#ffffff'\n\t\t\t */\n\t\t\tthis.$emit('input', color)\n\n\t\t},\n\n\t\t/**\n\t\t * Calculate luminance of provided hex color\n\t\t *\n\t\t * @param {string} color the hex color\n\t\t */\n\t\t calculateLuma(color) {\n\t\t\tconst [red, green, blue] = this.hexToRGB(color)\n\t\t\treturn (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255\n\t\t},\n\n\t\t/**\n\t\t * Convert hex color to RGB\n\t\t *\n\t\t * @param {string} hex the hex color\n\t\t */\n\t\t hexToRGB(hex) {\n\t\t\tconst result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex)\n\t\t\treturn result\n\t\t\t\t? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)]\n\t\t\t\t: null\n\t\t},\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n.color-picker {\n\tdisplay: flex;\n\toverflow: hidden;\n\talign-content: flex-end;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\tbox-sizing: content-box !important;\n\twidth: 176px;\n\tpadding: 8px;\n\tborder-radius: 3px;\n\n\t&--advanced-fields {\n\t\twidth: 264px;\n\t}\n\n\t&__simple {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat(auto-fit, $clickable-area);\n\t\tgrid-auto-rows: $clickable-area;\n\n\t\t&-color-circle {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\twidth: 34px;\n\t\t\theight: 34px;\n\t\t\tmin-height: 34px;\n\t\t\tmargin: auto;\n\t\t\tpadding: 0;\n\t\t\tcolor: white;\n\t\t\tborder: 1px solid rgba(0, 0, 0, 0.25);\n\t\t\tborder-radius: 50%;\n\t\t\tfont-size: 16px;\n\t\t\t&:focus-within {\n\t\t\t\toutline: 2px solid var(--color-main-text);\n\t\t\t}\n\t\t\t&:hover {\n\t\t\t\topacity: .6;\n\t\t\t}\n\t\t\t&--active {\n\t\t\t\twidth: 38px;\n\t\t\t\theight: 38px;\n\t\t\t\tmin-height: 38px;\n\t\t\t\ttransition: all 100ms ease-in-out;\n\t\t\t\topacity: 1 !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__advanced {\n\t\tbox-shadow: none !important;\n\t}\n\n\t&__navigation {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: space-between;\n\t\tmargin-top: 10px;\n\t}\n}\n\n:deep() .vc {\n\t&-chrome {\n\t\twidth: unset;\n\t\tbackground-color: var(--color-main-background);\n\n\t\t&-color-wrap {\n\t\t\twidth: 30px;\n\t\t\theight: 30px;\n\t\t}\n\n\t\t&-active-color {\n\t\t\twidth: 34px;\n\t\t\theight: 34px;\n\t\t\tborder-radius: 17px;\n\t\t}\n\n\t\t&-body {\n\t\t\tpadding: 14px 0 0 0;\n\t\t\tbackground-color: var(--color-main-background);\n\t\t\t.vc-input__input {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\t\t}\n\n\t\t&-toggle-btn {\n\t\t\tfilter: var(--background-invert-if-dark);\n\t\t}\n\n\t\t&-saturation {\n\t\t\t&-wrap {\n\t\t\t\tborder-radius: 3px;\n\t\t\t}\n\n\t\t\t&-circle {\n\t\t\t\twidth: 20px;\n\t\t\t\theight: 20px;\n\t\t\t}\n\t\t}\n\t}\n}\n\n.slide {\n\t&-enter {\n\t\ttransform: translateX(-50%);\n\t\topacity: 0;\n\t}\n\t&-enter-to {\n\t\ttransform: translateX(0);\n\t\topacity: 1;\n\t}\n\t&-leave {\n\t\ttransform: translateX(0);\n\t\topacity: 1;\n\t}\n\t&-leave-to {\n\t\ttransform: translateX(-50%);\n\t\topacity: 0;\n\t}\n\t&-enter-active,\n\t&-leave-active {\n\t\ttransition: all 50ms ease-in-out;\n\t}\n}\n\n</style>\n"],"names":["ArrowLeft","Check","Chrome","DotsHorizontal","NcButton","NcPopover","defaultPalette","t","GenRandomId"],"mappings":"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"}

package/dist/chunks/NcContent-DlpAl0Ng.mjs ADDED Viewed

@@ -0,0 +1,105 @@
+import '../assets/NcContent--2CGtswk.css';
+import { emit } from "@nextcloud/event-bus";
+import { Portal } from "@linusborg/vue-simple-portal";
+import { useIsMobile } from "../Composables/useIsMobile.mjs";
+import { r as register, D as t26, a as t } from "./_l10n-B6zipH_A.mjs";
+import NcButton from "../Components/NcButton.mjs";
+import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-Ckqpz-vm.mjs";
+import { n as normalizeComponent } from "./_plugin-vue2_normalizer-D637Qkok.mjs";
+register(t26);
+const contentSvg = '<!--\n  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n<svg width="395" height="314" viewBox="0 0 395 314" fill="none" xmlns="http://www.w3.org/2000/svg">\n<rect width="395" height="314" rx="11" fill="#439DCD"/>\n<rect x="13" y="51" width="366" height="248" rx="8" fill="white"/>\n<rect x="22" y="111" width="92" height="12" rx="6" fill="#DEDEDE"/>\n<rect x="22" y="127" width="92" height="12" rx="6" fill="#DEDEDE"/>\n<rect x="22" y="63" width="92" height="12" rx="6" fill="#DEDEDE"/>\n<rect x="22" y="191" width="92" height="12" rx="6" fill="#DEDEDE"/>\n<rect x="22" y="143" width="92" height="12" rx="6" fill="#DEDEDE"/>\n<rect x="22" y="79" width="92" height="12" rx="6" fill="#DEDEDE"/>\n<rect x="22" y="159" width="92" height="12" rx="6" fill="#DEDEDE"/>\n<rect x="22" y="95" width="92" height="12" rx="6" fill="#DEDEDE"/>\n<rect x="22" y="175" width="92" height="12" rx="6" fill="#DEDEDE"/>\n<path d="M288 145C277.56 147.8 265.32 149 254 149C242.68 149 230.44 147.8 220 145L218 153C225.44 155 234 156.32 242 157V209H250V185H258V209H266V157C274 156.32 282.56 155 290 153L288 145ZM254 145C258.4 145 262 141.4 262 137C262 132.6 258.4 129 254 129C249.6 129 246 132.6 246 137C246 141.4 249.6 145 254 145Z" fill="#DEDEDE"/>\n<path d="M43.5358 13C38.6641 13 34.535 16.2415 33.2552 20.6333C32.143 18.3038 29.7327 16.6718 26.9564 16.6718C23.1385 16.6718 20 19.7521 20 23.4993C20 27.2465 23.1385 30.3282 26.9564 30.3282C29.7327 30.3282 32.1429 28.6952 33.2552 26.3653C34.535 30.7575 38.6641 34 43.5358 34C48.3715 34 52.4796 30.8064 53.7921 26.4637C54.9249 28.7407 57.3053 30.3282 60.0421 30.3282C63.8601 30.3282 67 27.2465 67 23.4993C67 19.7521 63.8601 16.6718 60.0421 16.6718C57.3053 16.6718 54.9249 18.2583 53.7921 20.5349C52.4796 16.1926 48.3715 13 43.5358 13ZM43.5358 17.0079C47.2134 17.0079 50.1512 19.8899 50.1512 23.4993C50.1512 27.1087 47.2134 29.9921 43.5358 29.9921C39.8583 29.9921 36.9218 27.1087 36.9218 23.4993C36.9218 19.8899 39.8583 17.0079 43.5358 17.0079ZM26.9564 20.6797C28.5677 20.6797 29.8307 21.9179 29.8307 23.4993C29.8307 25.0807 28.5677 26.3203 26.9564 26.3203C25.3452 26.3203 24.0836 25.0807 24.0836 23.4993C24.0836 21.9179 25.3452 20.6797 26.9564 20.6797ZM60.0421 20.6797C61.6534 20.6797 62.9164 21.9179 62.9164 23.4993C62.9164 25.0807 61.6534 26.3203 60.0421 26.3203C58.4309 26.3203 57.1693 25.0807 57.1693 23.4993C57.1693 21.9179 58.4309 20.6797 60.0421 20.6797Z" fill="white"/>\n<rect x="79" y="20" width="8" height="8" rx="4" fill="white"/>\n<rect x="99" y="20" width="8" height="8" rx="4" fill="white"/>\n<rect x="119" y="20" width="8" height="8" rx="4" fill="white"/>\n<rect x="139" y="20" width="8" height="8" rx="4" fill="white"/>\n<rect x="159" y="20" width="8" height="8" rx="4" fill="white"/>\n<rect x="179" y="20" width="8" height="8" rx="4" fill="white"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C5.37258 0 0 5.37259 0 12V302C0 308.627 5.37259 314 12 314H383C389.627 314 395 308.627 395 302V12C395 5.37258 389.627 0 383 0H12ZM140 44C132.268 44 126 50.268 126 58V292C126 299.732 132.268 306 140 306H372C379.732 306 386 299.732 386 292V58C386 50.268 379.732 44 372 44H140Z" fill="black" fill-opacity="0.35"/>\n</svg>\n';
+const navigationSvg = '<!--\n  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n<svg width="395" height="314" viewBox="0 0 395 314" fill="none" xmlns="http://www.w3.org/2000/svg">\n<rect width="395" height="314" rx="11" fill="#439DCD"/>\n<rect x="13" y="51" width="366" height="248" rx="8" fill="white"/>\n<rect x="22" y="111" width="92" height="12" rx="6" fill="#DEDEDE"/>\n<rect x="22" y="127" width="92" height="12" rx="6" fill="#DEDEDE"/>\n<rect x="22" y="63" width="92" height="12" rx="6" fill="#DEDEDE"/>\n<rect x="22" y="191" width="92" height="12" rx="6" fill="#DEDEDE"/>\n<rect x="22" y="143" width="92" height="12" rx="6" fill="#DEDEDE"/>\n<rect x="22" y="79" width="92" height="12" rx="6" fill="#DEDEDE"/>\n<rect x="22" y="159" width="92" height="12" rx="6" fill="#DEDEDE"/>\n<rect x="22" y="95" width="92" height="12" rx="6" fill="#DEDEDE"/>\n<rect x="22" y="175" width="92" height="12" rx="6" fill="#DEDEDE"/>\n<path d="M288 145C277.56 147.8 265.32 149 254 149C242.68 149 230.44 147.8 220 145L218 153C225.44 155 234 156.32 242 157V209H250V185H258V209H266V157C274 156.32 282.56 155 290 153L288 145ZM254 145C258.4 145 262 141.4 262 137C262 132.6 258.4 129 254 129C249.6 129 246 132.6 246 137C246 141.4 249.6 145 254 145Z" fill="#DEDEDE"/>\n<path d="M43.5358 13C38.6641 13 34.535 16.2415 33.2552 20.6333C32.143 18.3038 29.7327 16.6718 26.9564 16.6718C23.1385 16.6718 20 19.7521 20 23.4993C20 27.2465 23.1385 30.3282 26.9564 30.3282C29.7327 30.3282 32.1429 28.6952 33.2552 26.3653C34.535 30.7575 38.6641 34 43.5358 34C48.3715 34 52.4796 30.8064 53.7921 26.4637C54.9249 28.7407 57.3053 30.3282 60.0421 30.3282C63.8601 30.3282 67 27.2465 67 23.4993C67 19.7521 63.8601 16.6718 60.0421 16.6718C57.3053 16.6718 54.9249 18.2583 53.7921 20.5349C52.4796 16.1926 48.3715 13 43.5358 13ZM43.5358 17.0079C47.2134 17.0079 50.1512 19.8899 50.1512 23.4993C50.1512 27.1087 47.2134 29.9921 43.5358 29.9921C39.8583 29.9921 36.9218 27.1087 36.9218 23.4993C36.9218 19.8899 39.8583 17.0079 43.5358 17.0079ZM26.9564 20.6797C28.5677 20.6797 29.8307 21.9179 29.8307 23.4993C29.8307 25.0807 28.5677 26.3203 26.9564 26.3203C25.3452 26.3203 24.0836 25.0807 24.0836 23.4993C24.0836 21.9179 25.3452 20.6797 26.9564 20.6797ZM60.0421 20.6797C61.6534 20.6797 62.9164 21.9179 62.9164 23.4993C62.9164 25.0807 61.6534 26.3203 60.0421 26.3203C58.4309 26.3203 57.1693 25.0807 57.1693 23.4993C57.1693 21.9179 58.4309 20.6797 60.0421 20.6797Z" fill="white"/>\n<rect x="79" y="20" width="8" height="8" rx="4" fill="white"/>\n<rect x="99" y="20" width="8" height="8" rx="4" fill="white"/>\n<rect x="119" y="20" width="8" height="8" rx="4" fill="white"/>\n<rect x="139" y="20" width="8" height="8" rx="4" fill="white"/>\n<rect x="159" y="20" width="8" height="8" rx="4" fill="white"/>\n<rect x="179" y="20" width="8" height="8" rx="4" fill="white"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C5.37258 0 0 5.37259 0 12V302C0 308.627 5.37259 314 12 314H383C389.627 314 395 308.627 395 302V12C395 5.37258 389.627 0 383 0H12ZM112 44C119.732 44 126 50.268 126 58V292C126 299.732 119.732 306 112 306H20C12.268 306 6 299.732 6 292V58C6 50.268 12.268 44 20 44H112Z" fill="black" fill-opacity="0.35"/>\n</svg>\n';
+const _sfc_main = {
+  name: "NcContent",
+  components: {
+    NcButton,
+    NcIconSvgWrapper,
+    Teleport: Portal
+  },
+  provide() {
+    return {
+      "NcContent:setHasAppNavigation": this.setAppNavigation,
+      "NcContent:selector": "#content-vue"
+    };
+  },
+  props: {
+    appName: {
+      type: String,
+      required: true
+    }
+  },
+  setup() {
+    const isMobile = useIsMobile();
+    return {
+      isMobile
+    };
+  },
+  data() {
+    return {
+      hasAppNavigation: false,
+      currentFocus: ""
+      // unknown
+    };
+  },
+  computed: {
+    currentImage() {
+      if (this.currentFocus === "navigation") {
+        return navigationSvg;
+      }
+      return contentSvg;
+    }
+  },
+  beforeMount() {
+    const container = document.getElementById("skip-actions");
+    if (container) {
+      container.innerHTML = "";
+      container.classList.add("vue-skip-actions");
+    }
+  },
+  methods: {
+    t,
+    openAppNavigation() {
+      emit("toggle-navigation", { open: true });
+      this.$nextTick(() => {
+        window.location.hash = "app-navigation-vue";
+        document.getElementById("app-navigation-vue").focus();
+      });
+    },
+    setAppNavigation(value) {
+      this.hasAppNavigation = value;
+      if (this.currentFocus === "") {
+        this.currentFocus = "navigation";
+      }
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { class: ["content", "app-".concat(_vm.appName.toLowerCase())], attrs: { "id": "content-vue" } }, [_c("Teleport", { attrs: { "selector": "#skip-actions" } }, [_c("div", { staticClass: "vue-skip-actions__container" }, [_c("div", { staticClass: "vue-skip-actions__headline" }, [_vm._v(" " + _vm._s(_vm.t("Keyboard navigation help")) + " ")]), _c("div", { staticClass: "vue-skip-actions__buttons" }, [_c("NcButton", { directives: [{ name: "show", rawName: "v-show", value: _vm.hasAppNavigation, expression: "hasAppNavigation" }], attrs: { "type": "tertiary", "href": "#app-navigation-vue" }, on: { "click": function($event) {
+    $event.preventDefault();
+    return _vm.openAppNavigation.apply(null, arguments);
+  }, "focusin": function($event) {
+    _vm.currentFocus = "navigation";
+  }, "mouseover": function($event) {
+    _vm.currentFocus = "navigation";
+  } } }, [_vm._v(" " + _vm._s(_vm.t("Skip to app navigation")) + " ")]), _c("NcButton", { attrs: { "type": "tertiary", "href": "#app-content-vue" }, on: { "focusin": function($event) {
+    _vm.currentFocus = "content";
+  }, "mouseover": function($event) {
+    _vm.currentFocus = "content";
+  } } }, [_vm._v(" " + _vm._s(_vm.t("Skip to main content")) + " ")])], 1), _c("NcIconSvgWrapper", { directives: [{ name: "show", rawName: "v-show", value: !_vm.isMobile, expression: "!isMobile" }], staticClass: "vue-skip-actions__image", attrs: { "svg": _vm.currentImage, "size": "auto" } })], 1), _vm._v("  ")]), _vm._t("default")], 2);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  "03a7c06d",
+  null,
+  null
+);
+const NcContent = __component__.exports;
+export {
+  NcContent as N
+};

package/dist/chunks/NcContent-DlpAl0Ng.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcContent-DlpAl0Ng.mjs","sources":["../../src/components/NcContent/content-selected.svg?raw","../../src/components/NcContent/navigation-selected.svg?raw","../../src/components/NcContent/NcContent.vue"],"sourcesContent":["export default \"\\n<svg width=\\\"395\\\" height=\\\"314\\\" viewBox=\\\"0 0 395 314\\\" fill=\\\"none\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\">\\n<rect width=\\\"395\\\" height=\\\"314\\\" rx=\\\"11\\\" fill=\\\"#439DCD\\\"/>\\n<rect x=\\\"13\\\" y=\\\"51\\\" width=\\\"366\\\" height=\\\"248\\\" rx=\\\"8\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"22\\\" y=\\\"111\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"127\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"63\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"191\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"143\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"79\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"159\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"95\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"175\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<path d=\\\"M288 145C277.56 147.8 265.32 149 254 149C242.68 149 230.44 147.8 220 145L218 153C225.44 155 234 156.32 242 157V209H250V185H258V209H266V157C274 156.32 282.56 155 290 153L288 145ZM254 145C258.4 145 262 141.4 262 137C262 132.6 258.4 129 254 129C249.6 129 246 132.6 246 137C246 141.4 249.6 145 254 145Z\\\" fill=\\\"#DEDEDE\\\"/>\\n<path d=\\\"M43.5358 13C38.6641 13 34.535 16.2415 33.2552 20.6333C32.143 18.3038 29.7327 16.6718 26.9564 16.6718C23.1385 16.6718 20 19.7521 20 23.4993C20 27.2465 23.1385 30.3282 26.9564 30.3282C29.7327 30.3282 32.1429 28.6952 33.2552 26.3653C34.535 30.7575 38.6641 34 43.5358 34C48.3715 34 52.4796 30.8064 53.7921 26.4637C54.9249 28.7407 57.3053 30.3282 60.0421 30.3282C63.8601 30.3282 67 27.2465 67 23.4993C67 19.7521 63.8601 16.6718 60.0421 16.6718C57.3053 16.6718 54.9249 18.2583 53.7921 20.5349C52.4796 16.1926 48.3715 13 43.5358 13ZM43.5358 17.0079C47.2134 17.0079 50.1512 19.8899 50.1512 23.4993C50.1512 27.1087 47.2134 29.9921 43.5358 29.9921C39.8583 29.9921 36.9218 27.1087 36.9218 23.4993C36.9218 19.8899 39.8583 17.0079 43.5358 17.0079ZM26.9564 20.6797C28.5677 20.6797 29.8307 21.9179 29.8307 23.4993C29.8307 25.0807 28.5677 26.3203 26.9564 26.3203C25.3452 26.3203 24.0836 25.0807 24.0836 23.4993C24.0836 21.9179 25.3452 20.6797 26.9564 20.6797ZM60.0421 20.6797C61.6534 20.6797 62.9164 21.9179 62.9164 23.4993C62.9164 25.0807 61.6534 26.3203 60.0421 26.3203C58.4309 26.3203 57.1693 25.0807 57.1693 23.4993C57.1693 21.9179 58.4309 20.6797 60.0421 20.6797Z\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"79\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"99\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"119\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"139\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"159\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"179\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<path fill-rule=\\\"evenodd\\\" clip-rule=\\\"evenodd\\\" d=\\\"M12 0C5.37258 0 0 5.37259 0 12V302C0 308.627 5.37259 314 12 314H383C389.627 314 395 308.627 395 302V12C395 5.37258 389.627 0 383 0H12ZM140 44C132.268 44 126 50.268 126 58V292C126 299.732 132.268 306 140 306H372C379.732 306 386 299.732 386 292V58C386 50.268 379.732 44 372 44H140Z\\\" fill=\\\"black\\\" fill-opacity=\\\"0.35\\\"/>\\n</svg>\\n\"","export default \"\\n<svg width=\\\"395\\\" height=\\\"314\\\" viewBox=\\\"0 0 395 314\\\" fill=\\\"none\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\">\\n<rect width=\\\"395\\\" height=\\\"314\\\" rx=\\\"11\\\" fill=\\\"#439DCD\\\"/>\\n<rect x=\\\"13\\\" y=\\\"51\\\" width=\\\"366\\\" height=\\\"248\\\" rx=\\\"8\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"22\\\" y=\\\"111\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"127\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"63\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"191\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"143\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"79\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"159\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"95\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<rect x=\\\"22\\\" y=\\\"175\\\" width=\\\"92\\\" height=\\\"12\\\" rx=\\\"6\\\" fill=\\\"#DEDEDE\\\"/>\\n<path d=\\\"M288 145C277.56 147.8 265.32 149 254 149C242.68 149 230.44 147.8 220 145L218 153C225.44 155 234 156.32 242 157V209H250V185H258V209H266V157C274 156.32 282.56 155 290 153L288 145ZM254 145C258.4 145 262 141.4 262 137C262 132.6 258.4 129 254 129C249.6 129 246 132.6 246 137C246 141.4 249.6 145 254 145Z\\\" fill=\\\"#DEDEDE\\\"/>\\n<path d=\\\"M43.5358 13C38.6641 13 34.535 16.2415 33.2552 20.6333C32.143 18.3038 29.7327 16.6718 26.9564 16.6718C23.1385 16.6718 20 19.7521 20 23.4993C20 27.2465 23.1385 30.3282 26.9564 30.3282C29.7327 30.3282 32.1429 28.6952 33.2552 26.3653C34.535 30.7575 38.6641 34 43.5358 34C48.3715 34 52.4796 30.8064 53.7921 26.4637C54.9249 28.7407 57.3053 30.3282 60.0421 30.3282C63.8601 30.3282 67 27.2465 67 23.4993C67 19.7521 63.8601 16.6718 60.0421 16.6718C57.3053 16.6718 54.9249 18.2583 53.7921 20.5349C52.4796 16.1926 48.3715 13 43.5358 13ZM43.5358 17.0079C47.2134 17.0079 50.1512 19.8899 50.1512 23.4993C50.1512 27.1087 47.2134 29.9921 43.5358 29.9921C39.8583 29.9921 36.9218 27.1087 36.9218 23.4993C36.9218 19.8899 39.8583 17.0079 43.5358 17.0079ZM26.9564 20.6797C28.5677 20.6797 29.8307 21.9179 29.8307 23.4993C29.8307 25.0807 28.5677 26.3203 26.9564 26.3203C25.3452 26.3203 24.0836 25.0807 24.0836 23.4993C24.0836 21.9179 25.3452 20.6797 26.9564 20.6797ZM60.0421 20.6797C61.6534 20.6797 62.9164 21.9179 62.9164 23.4993C62.9164 25.0807 61.6534 26.3203 60.0421 26.3203C58.4309 26.3203 57.1693 25.0807 57.1693 23.4993C57.1693 21.9179 58.4309 20.6797 60.0421 20.6797Z\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"79\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"99\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"119\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"139\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"159\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<rect x=\\\"179\\\" y=\\\"20\\\" width=\\\"8\\\" height=\\\"8\\\" rx=\\\"4\\\" fill=\\\"white\\\"/>\\n<path fill-rule=\\\"evenodd\\\" clip-rule=\\\"evenodd\\\" d=\\\"M12 0C5.37258 0 0 5.37259 0 12V302C0 308.627 5.37259 314 12 314H383C389.627 314 395 308.627 395 302V12C395 5.37258 389.627 0 383 0H12ZM112 44C119.732 44 126 50.268 126 58V292C126 299.732 119.732 306 112 306H20C12.268 306 6 299.732 6 292V58C6 50.268 12.268 44 20 44H112Z\\\" fill=\\\"black\\\" fill-opacity=\\\"0.35\\\"/>\\n</svg>\\n\"","\n\n<docs>\n\n### General description\n\nThis component provides the default container of all apps.\nIt _MUST_ be used as the main wrapper of your app.\nIt includes the Navigation, the App content and the Sidebar.\n\nIt also will set the skip content buttons needed for accessibility.\n\n### Standard usage\n\n```vue\n\t<template>\n\t\t<NcContent app-name=\"forms\">\n\t\t\t<NcAppNavigation>\n\t\t\t\t<template #list>\n\t\t\t\t\t<NcAppNavigationNew text=\"Create article\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"My navigation\" title=\"My title\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Check :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcAppNavigationItem>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigation>\n\t\t\t<NcAppContent>\n\t\t\t\t<h2>Your main app content here</h2>\n\t\t\t\t<NcButton @click=\"opened = !opened\">Toggle sidebar</NcButton>\n\t\t\t</NcAppContent>\n\t\t\t<NcAppSidebar v-if=\"opened\" name=\"cat-picture.jpg\" @close=\"opened=false\"></NcAppSidebar>\n\t\t</NcContent>\n\t</template>\n\t<script>\n\timport Check from 'vue-material-design-icons/Check'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tCheck,\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\topened: false,\n\t\t\t}\n\t\t}\n\t}\n\t</script>\n```\n\n</docs>\n\n<template>\n\t<div id=\"content-vue\" :class=\"['content', `app-${appName.toLowerCase()}`]\">\n\t\t\n\t\t<Teleport selector=\"#skip-actions\">\n\t\t\t<div class=\"vue-skip-actions__container\">\n\t\t\t\t<div class=\"vue-skip-actions__headline\">\n\t\t\t\t\t{{ t('Keyboard navigation help') }}\n\t\t\t\t</div>\n\t\t\t\t<div class=\"vue-skip-actions__buttons\">\n\t\t\t\t\t<NcButton v-show=\"hasAppNavigation\"\n\t\t\t\t\t\ttype=\"tertiary\"\n\t\t\t\t\t\thref=\"#app-navigation-vue\"\n\t\t\t\t\t\t@click.prevent=\"openAppNavigation\"\n\t\t\t\t\t\t@focusin=\"currentFocus = 'navigation'\"\n\t\t\t\t\t\t@mouseover=\"currentFocus = 'navigation'\">\n\t\t\t\t\t\t{{ t('Skip to app navigation') }}\n\t\t\t\t\t</NcButton>\n\t\t\t\t\t<NcButton type=\"tertiary\"\n\t\t\t\t\t\thref=\"#app-content-vue\"\n\t\t\t\t\t\t@focusin=\"currentFocus = 'content'\"\n\t\t\t\t\t\t@mouseover=\"currentFocus = 'content'\">\n\t\t\t\t\t\t{{ t('Skip to main content') }}\n\t\t\t\t\t</NcButton>\n\t\t\t\t</div>\n\t\t\t\t<NcIconSvgWrapper v-show=\"!isMobile\"\n\t\t\t\t\tclass=\"vue-skip-actions__image\"\n\t\t\t\t\t:svg=\"currentImage\"\n\t\t\t\t\tsize=\"auto\" />\n\t\t\t</div>\n\t\t\t \n\t\t</Teleport>\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\nimport { emit } from '@nextcloud/event-bus'\n// TODO: This is built-in for vue3 just drop the import\nimport { Portal as Teleport } from '@linusborg/vue-simple-portal'\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\nimport { t } from '../../l10n.js'\n\nimport NcButton from '../NcButton/NcButton.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\n\n/* eslint-disable import/no-unresolved */\nimport contentSvg from './content-selected.svg?raw'\nimport navigationSvg from './navigation-selected.svg?raw'\n/* eslint-enable import/no-unresolved */\n\nexport default {\n\tname: 'NcContent',\n\tcomponents: {\n\t\tNcButton,\n\t\tNcIconSvgWrapper,\n\t\tTeleport,\n\t},\n\tprovide() {\n\t\treturn {\n\t\t\t'NcContent:setHasAppNavigation': this.setAppNavigation,\n\t\t\t'NcContent:selector': '#content-vue',\n\t\t}\n\t},\n\tprops: {\n\t\tappName: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t},\n\tsetup() {\n\t\tconst isMobile = useIsMobile()\n\t\treturn {\n\t\t\tisMobile,\n\t\t}\n\t},\n\tdata() {\n\t\treturn {\n\t\t\thasAppNavigation: false,\n\t\t\tcurrentFocus: '', // unknown\n\t\t}\n\t},\n\tcomputed: {\n\t\tcurrentImage() {\n\t\t\tif (this.currentFocus === 'navigation') {\n\t\t\t\treturn navigationSvg\n\t\t\t}\n\t\t\treturn contentSvg\n\t\t},\n\t},\n\tbeforeMount() {\n\t\tconst container = document.getElementById('skip-actions')\n\t\tif (container) {\n\t\t\t// clear default buttons\n\t\t\tcontainer.innerHTML = ''\n\t\t\t// add class for scoping styles\n\t\t\tcontainer.classList.add('vue-skip-actions')\n\t\t}\n\t},\n\tmethods: {\n\t\tt,\n\t\topenAppNavigation() {\n\t\t\temit('toggle-navigation', { open: true })\n\t\t\tthis.$nextTick(() => {\n\t\t\t\twindow.location.hash = 'app-navigation-vue'\n\t\t\t\t// we need to manually focus if the window location is already set to the app-navigation then it will not focus again\n\t\t\t\tdocument.getElementById('app-navigation-vue').focus()\n\t\t\t})\n\t\t},\n\t\tsetAppNavigation(value) {\n\t\t\tthis.hasAppNavigation = value\n\t\t\t// If app navigation is available and no focus was set yet, set it to navigation as it is the first button\n\t\t\tif (this.currentFocus === '') {\n\t\t\t\tthis.currentFocus = 'navigation'\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n// Remove server stylings and add a backdrop\n#skip-actions.vue-skip-actions:focus-within {\n\ttop: 0!important;\n\tleft: 0!important;\n\twidth: 100vw;\n\theight: 100vh;\n\tpadding: var(--body-container-margin)!important;\n\tbackdrop-filter: brightness(50%);\n}\n</style>\n\n<style lang=\"scss\" scoped>\n.vue-skip-actions {\n\t&__container {\n\t\tbackground-color: var(--color-main-background);\n\t\tborder-radius: var(--border-radius-large);\n\t\tpadding: 22px;\n\t}\n\n\t&__headline {\n\t\tfont-weight: bold;\n\t\tfont-size: 20px;\n\t\tline-height: 30px;\n\t\tmargin-bottom: 12px;\n\t}\n\n\t&__buttons {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t\tgap: 12px;\n\n\t\t> * {\n\t\t\t// Ensure buttons are same width on smaller screens (container wrapped)\n\t\t\tflex: 1 0 fit-content;\n\t\t}\n\t}\n\n\t&__image {\n\t\tmargin-top: 12px;\n\t}\n}\n\n.content {\n\tbox-sizing: border-box;\n\tmargin: var(--body-container-margin);\n\tmargin-top: 50px;\n\tdisplay: flex;\n\twidth: calc(100% - var(--body-container-margin) * 2);\n\tborder-radius: var(--body-container-radius);\n\theight: var(--body-height);\n\toverflow: hidden;\n\tpadding: 0;\n\n\t&:not(.with-sidebar--full) {\n\t\tposition: fixed;\n\t}\n\n\t:deep(*) {\n\t\tbox-sizing: border-box;\n\t}\n}\n</style>\n"],"names":["Teleport"],"mappings":";;;;;;;;AAAA,MAAe,aAAA;ACAf,MAAe,gBAAA;ACyGf,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAAA;AAAAA,EACA;AAAA,EACA,UAAA;AACA,WAAA;AAAA,MACA,iCAAA,KAAA;AAAA,MACA,sBAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA;AAAA,IACA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,QAAA;AACA,UAAA,WAAA,YAAA;AACA,WAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA;AACA,WAAA;AAAA,MACA,kBAAA;AAAA,MACA,cAAA;AAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,UAAA;AAAA,IACA,eAAA;AACA,UAAA,KAAA,iBAAA,cAAA;AACA,eAAA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,cAAA;AACA,UAAA,YAAA,SAAA,eAAA,cAAA;AACA,QAAA,WAAA;AAEA,gBAAA,YAAA;AAEA,gBAAA,UAAA,IAAA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,SAAA;AAAA,IACA;AAAA,IACA,oBAAA;AACA,WAAA,qBAAA,EAAA,MAAA,KAAA,CAAA;AACA,WAAA,UAAA,MAAA;AACA,eAAA,SAAA,OAAA;AAEA,iBAAA,eAAA,oBAAA,EAAA,MAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,IACA,iBAAA,OAAA;AACA,WAAA,mBAAA;AAEA,UAAA,KAAA,iBAAA,IAAA;AACA,aAAA,eAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}