@nextcloud/vue 8.31.0 → 8.33.0

package/dist/chunks/NcColorPicker-Cae6XNoK.mjs

@@ -1,255 +0,0 @@
-import '../assets/NcColorPicker-CGI9ElwB.css';
-import { f as mdiDotsHorizontal, a as mdiCheck, g as mdiArrowLeft } from "./mdi-DXu6GWVJ.mjs";
-import { useVModel } from "@vueuse/core";
-import { Chrome } from "vue-color";
-import { u as useModelMigration } from "./useModelMigration-EhAWvqDD.mjs";
-import { r as register, l as t1, a as t } from "./_l10n-BEfeU7gr.mjs";
-import { d as defaultPalette } from "./GenColors-DIH749TS.mjs";
-import { G as GenRandomId } from "./GenRandomId-F5ebeBB_.mjs";
-import { N as NcButton } from "./NcButton-CWPBzbcC.mjs";
-import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-BreCg8pX.mjs";
-import { N as NcPopover } from "./NcPopover-DMUA5d7U.mjs";
-import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
-register(t1);
-const HEX_REGEX = /^#([a-f0-9]{3}|[a-f0-9]{6})$/i;
-const _sfc_main = {
-  name: "NcColorPicker",
-  components: {
-    Chrome,
-    NcButton,
-    NcIconSvgWrapper,
-    NcPopover
-  },
-  model: {
-    prop: "modelValue",
-    event: "update:modelValue"
-  },
-  props: {
-    /**
-     * Removed in v9 - use `modelValue` (`v-model`) instead
-     *
-     * @deprecated
-     */
-    value: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * A HEX color that represents the initial value of the picker
-     */
-    modelValue: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Set to `true` to enable advanced fields including HEX, RGB, and HSL
-     */
-    advancedFields: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Selector for the popover container
-     */
-    container: {
-      type: [Boolean, String, Object, Element],
-      default: "body"
-    },
-    /**
-     * The open state of the color picker.
-     * This can be used as two-way binding together with the `update:open` event.
-     */
-    open: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Provide a custom array of colors to show.
-     * Can be either an array of string hexadecimal colors,
-     * or an array of object with a `color` property with hexadecimal color string,
-     * and a `name` property for accessibility.
-     *
-     * @type {string[] | {color: string, name: string}[]}
-     */
-    palette: {
-      type: Array,
-      default: () => [...defaultPalette],
-      validator: (palette) => palette.every((item) => typeof item === "string" && HEX_REGEX.test(item) || typeof item === "object" && item.color && HEX_REGEX.test(item.color))
-    },
-    /**
-     * Limit selectable colors to only the provided palette
-     */
-    paletteOnly: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: [
-    /**
-     * @deprecated use the `closed` event instead.
-     */
-    "close",
-    /**
-     * Emitted when the color picker is closed and all transitions have finished.
-     */
-    "closed",
-    "submit",
-    "update:open",
-    /**
-     * Emits a hexadecimal string e.g. '#ffffff'
-     */
-    "update:modelValue",
-    /**
-     * Same as update:modelValue for Vue 2 compatibility
-     */
-    "update:model-value",
-    /**
-     * Same as update:modelValue for Vue 2 compatibility.
-     *
-     * @deprecated Removed in v9 - use `update:modelValue` (`v-model`) instead
-     */
-    "input",
-    /**
-     * @deprecated Removed in v9 - use `update:modelValue` (`v-model`) instead
-     */
-    "update:value"
-  ],
-  setup(props, { emit }) {
-    const model = useModelMigration("value", "update:value", true);
-    const modelOpen = useVModel(props, "open", emit);
-    return {
-      mdiArrowLeft,
-      mdiCheck,
-      mdiDotsHorizontal,
-      model,
-      modelOpen
-    };
-  },
-  data() {
-    return {
-      currentColor: this.model,
-      advanced: false,
-      ariaBack: t("Back"),
-      ariaMore: t("More options")
-    };
-  },
-  computed: {
-    normalizedPalette() {
-      return this.palette.map((item) => ({
-        color: typeof item === "object" ? item.color : item,
-        name: typeof item === "object" && item.name ? item.name : t("A color with a HEX value {hex}", { hex: item.color })
-      }));
-    },
-    uid() {
-      return GenRandomId();
-    },
-    contrastColor() {
-      const black = "#000000";
-      const white = "#FFFFFF";
-      return this.calculateLuma(this.currentColor) > 0.5 ? black : white;
-    }
-  },
-  watch: {
-    model(color) {
-      this.currentColor = color;
-    }
-  },
-  methods: {
-    t,
-    /**
-     * Submit a picked colour and close picker
-     *
-     * @param {Function} hideCallback callback to close popover
-     */
-    handleConfirm(hideCallback) {
-      this.$emit("submit", this.currentColor);
-      hideCallback();
-      this.advanced = false;
-    },
-    handleClose() {
-      this.$emit("close");
-      this.$emit("closed");
-      this.$emit("update:open", false);
-    },
-    /**
-     * Inner navigations
-     */
-    handleBack() {
-      this.advanced = false;
-    },
-    handleMoreSettings() {
-      this.advanced = true;
-    },
-    /**
-     * Pick a colour
-     *
-     * @param {string} color the picked color
-     */
-    pickColor(color) {
-      if (typeof color !== "string") {
-        color = this.currentColor.hex;
-      }
-      this.currentColor = color;
-      this.model = color;
-      this.$emit("input", color);
-    },
-    /**
-     * Calculate luminance of provided hex color
-     *
-     * @param {string} color the hex color
-     */
-    calculateLuma(color) {
-      const [red, green, blue] = this.hexToRGB(color);
-      return (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255;
-    },
-    /**
-     * Convert hex color to RGB
-     *
-     * @param {string} hex the hex color
-     * @return {[number, number, number]}
-     */
-    hexToRGB(hex) {
-      const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-      return result ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)] : [0, 0, 0];
-    }
-  }
-};
-var _sfc_render = function render() {
-  var _vm = this, _c = _vm._self._c;
-  return _c("NcPopover", _vm._g(_vm._b({ attrs: { "shown": _vm.modelOpen, "container": _vm.container, "popup-role": "dialog" }, on: { "update:shown": function($event) {
-    _vm.modelOpen = $event;
-  }, "apply-hide": _vm.handleClose }, scopedSlots: _vm._u([{ key: "trigger", fn: function(slotProps) {
-    return [_vm._t("default", null, null, slotProps)];
-  } }, { key: "default", fn: function(slotProps) {
-    return [_c("div", { staticClass: "color-picker", class: { "color-picker--advanced-fields": _vm.advanced && _vm.advancedFields }, attrs: { "role": "dialog", "aria-modal": "true", "aria-label": _vm.t("Color picker") } }, [_c("Transition", { attrs: { "name": "slide", "mode": "out-in" } }, [!_vm.advanced ? _c("div", { staticClass: "color-picker__simple" }, _vm._l(_vm.normalizedPalette, function({ color, name }, index) {
-      return _c("label", { key: index, staticClass: "color-picker__simple-color-circle", class: { "color-picker__simple-color-circle--active": color === _vm.currentColor }, style: {
-        backgroundColor: color,
-        color: _vm.contrastColor
-      } }, [color === _vm.currentColor ? _c("NcIconSvgWrapper", { attrs: { "path": _vm.mdiCheck } }) : _vm._e(), _c("input", { staticClass: "hidden-visually", attrs: { "type": "radio", "aria-label": name, "name": `color-picker-${_vm.uid}` }, domProps: { "checked": color === _vm.currentColor }, on: { "click": function($event) {
-        return _vm.pickColor(color);
-      } } })], 1);
-    }), 0) : _c("Chrome", { staticClass: "color-picker__advanced", attrs: { "disable-alpha": true, "disable-fields": !_vm.advancedFields }, on: { "input": _vm.pickColor }, model: { value: _vm.currentColor, callback: function($$v) {
-      _vm.currentColor = $$v;
-    }, expression: "currentColor" } })], 1), !_vm.paletteOnly ? _c("div", { staticClass: "color-picker__navigation" }, [_vm.advanced ? _c("NcButton", { attrs: { "aria-label": _vm.ariaBack, "variant": "tertiary" }, on: { "click": _vm.handleBack }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-      return [_c("NcIconSvgWrapper", { attrs: { "directional": "", "path": _vm.mdiArrowLeft } })];
-    }, proxy: true }], null, true) }) : _c("NcButton", { attrs: { "aria-label": _vm.ariaMore, "variant": "tertiary" }, on: { "click": _vm.handleMoreSettings }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-      return [_c("NcIconSvgWrapper", { attrs: { "path": _vm.mdiDotsHorizontal } })];
-    }, proxy: true }], null, true) }), _c("NcButton", { attrs: { "variant": "primary" }, on: { "click": function($event) {
-      return _vm.handleConfirm(slotProps.hide);
-    } } }, [_vm._v(" " + _vm._s(_vm.t("Choose")) + " ")])], 1) : _vm._e()], 1)];
-  } }], null, true) }, "NcPopover", _vm.$attrs, false), _vm.$listeners));
-};
-var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  "5fe0f834"
-);
-const NcColorPicker = __component__.exports;
-export {
-  NcColorPicker as N
-};
-//# sourceMappingURL=NcColorPicker-Cae6XNoK.mjs.map

package/dist/chunks/NcColorPicker-Cae6XNoK.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcColorPicker-Cae6XNoK.mjs","sources":["../../src/components/NcColorPicker/NcColorPicker.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\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: 34px;\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 v-model=\"color\" :open.sync=\"open\" 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}\n</script>\n<style>\n.container1 {\n\tdisplay: flex;\n\tgap: 20px;\n}\n\n.color1 {\n\twidth: 100px;\n\theight: 34px;\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\tgap: 20px;\n}\n\n.color0 {\n\twidth: 100px;\n\theight: 34px;\n\tborder-radius: 6px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<NcPopover\n\t\t:shown.sync=\"modelOpen\"\n\t\t:container=\"container\"\n\t\tpopup-role=\"dialog\"\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<template #default=\"slotProps\">\n\t\t\t<div\n\t\t\t\trole=\"dialog\"\n\t\t\t\tclass=\"color-picker\"\n\t\t\t\taria-modal=\"true\"\n\t\t\t\t:aria-label=\"t('Color picker')\"\n\t\t\t\t:class=\"{ 'color-picker--advanced-fields': advanced && advancedFields }\">\n\t\t\t\t<Transition name=\"slide\" mode=\"out-in\">\n\t\t\t\t\t<div v-if=\"!advanced\" class=\"color-picker__simple\">\n\t\t\t\t\t\t<label\n\t\t\t\t\t\t\tv-for=\"({ color, name }, index) in normalizedPalette\"\n\t\t\t\t\t\t\t:key=\"index\"\n\t\t\t\t\t\t\tclass=\"color-picker__simple-color-circle\"\n\t\t\t\t\t\t\t:class=\"{ 'color-picker__simple-color-circle--active': color === currentColor }\"\n\t\t\t\t\t\t\t:style=\"{\n\t\t\t\t\t\t\t\tbackgroundColor: color,\n\t\t\t\t\t\t\t\tcolor: contrastColor,\n\t\t\t\t\t\t\t}\">\n\t\t\t\t\t\t\t<NcIconSvgWrapper v-if=\"color === currentColor\" :path=\"mdiCheck\" />\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\t\tclass=\"hidden-visually\"\n\t\t\t\t\t\t\t\t:aria-label=\"name\"\n\t\t\t\t\t\t\t\t:name=\"`color-picker-${uid}`\"\n\t\t\t\t\t\t\t\t:checked=\"color === currentColor\"\n\t\t\t\t\t\t\t\t@click=\"pickColor(color)\">\n\t\t\t\t\t\t</label>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Chrome\n\t\t\t\t\t\tv-else\n\t\t\t\t\t\tv-model=\"currentColor\"\n\t\t\t\t\t\tclass=\"color-picker__advanced\"\n\t\t\t\t\t\t:disable-alpha=\"true\"\n\t\t\t\t\t\t:disable-fields=\"!advancedFields\"\n\t\t\t\t\t\t@input=\"pickColor\" />\n\t\t\t\t</Transition>\n\t\t\t\t<div v-if=\"!paletteOnly\" class=\"color-picker__navigation\">\n\t\t\t\t\t<NcButton\n\t\t\t\t\t\tv-if=\"advanced\"\n\t\t\t\t\t\t:aria-label=\"ariaBack\"\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t@click=\"handleBack\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper directional :path=\"mdiArrowLeft\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcButton>\n\t\t\t\t\t<NcButton\n\t\t\t\t\t\tv-else\n\t\t\t\t\t\t:aria-label=\"ariaMore\"\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t@click=\"handleMoreSettings\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiDotsHorizontal\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcButton>\n\t\t\t\t\t<NcButton\n\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t@click=\"handleConfirm(slotProps.hide)\">\n\t\t\t\t\t\t{{ t('Choose') }}\n\t\t\t\t\t</NcButton>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</template>\n\t</NcPopover>\n</template>\n\n<script>\nimport { mdiArrowLeft, mdiCheck, mdiDotsHorizontal } from '@mdi/js'\nimport { useVModel } from '@vueuse/core'\nimport { Chrome } from 'vue-color'\nimport { useModelMigration } from '../../composables/useModelMigration.ts'\nimport { t } from '../../l10n.js'\nimport { defaultPalette } from '../../utils/GenColors.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport NcButton from '../NcButton/index.js'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\nimport NcPopover from '../NcPopover/index.js'\n\nconst HEX_REGEX = /^#([a-f0-9]{3}|[a-f0-9]{6})$/i\n\nexport default {\n\tname: 'NcColorPicker',\n\n\tcomponents: {\n\t\tChrome,\n\t\tNcButton,\n\t\tNcIconSvgWrapper,\n\t\tNcPopover,\n\t},\n\n\tmodel: {\n\t\tprop: 'modelValue',\n\t\tevent: 'update:modelValue',\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Removed in v9 - use `modelValue` (`v-model`) instead\n\t\t *\n\t\t * @deprecated\n\t\t */\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * A HEX color that represents the initial value of the picker\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\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 * Selector for the popover container\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: [Boolean, String, Object, Element],\n\t\t\tdefault: 'body',\n\t\t},\n\n\t\t/**\n\t\t * The open state of the color picker.\n\t\t * This can be used as two-way binding together with the `update:open` event.\n\t\t */\n\t\topen: {\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) => (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},\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\t},\n\n\temits: [\n\t\t/**\n\t\t * @deprecated use the `closed` event instead.\n\t\t */\n\t\t'close',\n\t\t/**\n\t\t * Emitted when the color picker is closed and all transitions have finished.\n\t\t */\n\t\t'closed',\n\t\t'submit',\n\t\t'update:open',\n\t\t/**\n\t\t * Emits a hexadecimal string e.g. '#ffffff'\n\t\t */\n\t\t'update:modelValue',\n\t\t/**\n\t\t * Same as update:modelValue for Vue 2 compatibility\n\t\t */\n\t\t'update:model-value',\n\t\t/**\n\t\t * Same as update:modelValue for Vue 2 compatibility.\n\t\t *\n\t\t * @deprecated Removed in v9 - use `update:modelValue` (`v-model`) instead\n\t\t */\n\t\t'input',\n\t\t/**\n\t\t * @deprecated Removed in v9 - use `update:modelValue` (`v-model`) instead\n\t\t */\n\t\t'update:value',\n\t],\n\n\tsetup(props, { emit }) {\n\t\tconst model = useModelMigration('value', 'update:value', true)\n\t\tconst modelOpen = useVModel(props, 'open', emit)\n\n\t\treturn {\n\t\t\tmdiArrowLeft,\n\t\t\tmdiCheck,\n\t\t\tmdiDotsHorizontal,\n\t\t\tmodel,\n\t\t\tmodelOpen,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tcurrentColor: this.model,\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\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\tmodel(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\t * @param {Function} hideCallback callback to close popover\n\t\t */\n\t\thandleConfirm(hideCallback) {\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\thideCallback()\n\n\t\t\tthis.advanced = false\n\t\t},\n\n\t\thandleClose() {\n\t\t\t/**\n\t\t\t * Emitted after picker close.\n\t\t\t *\n\t\t\t * @deprecated removed in v9 - use the `closed` event instead\n\t\t\t */\n\t\t\tthis.$emit('close')\n\t\t\t/**\n\t\t\t * Emitted after the picker is closed and all transitions have finished.\n\t\t\t */\n\t\t\tthis.$emit('closed')\n\t\t\t/**\n\t\t\t * @deprecated use the 'close' event instead\n\t\t\t */\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\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\tthis.model = 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\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\tcalculateLuma(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 * @return {[number, number, number]}\n\t\t */\n\t\thexToRGB(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: [0, 0, 0]\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, var(--default-clickable-area));\n\t\tgrid-auto-rows: var(--default-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: calc(var(--default-clickable-area) - 10px);\n\t\t\theight: calc(var(--default-clickable-area) - 10px);\n\t\t\tmin-height: calc(var(--default-clickable-area) - 10px);\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: calc(var(--default-clickable-area) - 6px);\n\t\t\t\theight: calc(var(--default-clickable-area) - 6px);\n\t\t\t\tmin-height: calc(var(--default-clickable-area) - 6px);\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\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\n\t\t\t.vc-input__input {\n\t\t\t\t--input-border-radius: var(--border-radius-element, var(--border-radius-large));\n\t\t\t\t--input-border-width-offset: calc(var(--border-width-input-focused, 2px) - var(--border-width-input, 2px));\n\t\t\t\twidth: 100%;\n\t\t\t\theight: var(--default-clickable-area);\n\t\t\t\tmargin: 0;\n\t\t\t\tpadding-inline: calc(var(--border-radius-large) + var(--input-border-width-offset));\n\t\t\t\tpadding-block: var(--input-border-width-offset);\n\t\t\t\tborder: var(--border-width-input, 2px) solid var(--color-border-maxcontrast);\n\t\t\t\tborder-radius: var(--input-border-radius);\n\t\t\t\tfont-size: var(--default-font-size);\n\t\t\t\tcolor: var(--color-main-text);\n\t\t\t\tbox-shadow: none;\n\n\t\t\t\t&:active:not([disabled]),\n\t\t\t\t&:hover:not([disabled]),\n\t\t\t\t&:focus:not([disabled]) {\n\t\t\t\t\t// Reset padding offset when focused\n\t\t\t\t\t--input-border-width-offset: 0px;\n\t\t\t\t\tborder-color: var(--color-main-text);\n\t\t\t\t\tborder-width: var(--border-width-input-focused, 2px);\n\t\t\t\t\tbox-shadow: 0 0 0 2px var(--color-main-background) !important;\n\n\t\t\t\t\t& + .vc-input__label {\n\t\t\t\t\t\tcolor: var(--color-main-text);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.vc-input__label {\n\t\t\t\tposition: absolute;\n\t\t\t\tinset-inline: var(--border-width-input-focused, 2px);\n\t\t\t\tinset-block-start: calc(-1.5 * var(--font-size-small, 13px) / 2);\n\t\t\t\tmax-width: fit-content;\n\t\t\t\tmargin-inline: calc(var(--border-radius-large) - var(--default-grid-baseline));\n\t\t\t\tmargin-block: 0;\n\t\t\t\tpadding-inline: var(--default-grid-baseline);\n\t\t\t\tfont-family: var(--font-face);\n\t\t\t\tfont-size: var(--font-size-small, 13px);\n\t\t\t\tline-height: 1.5;\n\t\t\t\tfont-weight: 500;\n\t\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\t\tbackground-color: var(--color-main-background);\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\n\t\t&-toggle-btn {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t\twidth: var(--default-clickable-area);\n\t\t\theight: var(--default-clickable-area);\n\t\t\tmargin-left: 6px;\n\t\t\tfilter: var(--background-invert-if-dark);\n\t\t}\n\n\t\t&-toggle-icon {\n\t\t\twidth: 24px;\n\t\t\theight: 24px;\n\t\t\tmargin: 0;\n\t\t}\n\n\t\t&-toggle-icon-highlight {\n\t\t\twidth: var(--default-clickable-area);\n\t\t\theight: var(--default-clickable-area);\n\t\t\tinset: 0;\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":";;;;;;;;;;;;AAmOA,MAAA,YAAA;AAEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA,CAAA,SAAA,QAAA,QAAA,OAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA,GAAA,cAAA;AAAA,MACA,WAAA,CAAA,YAAA,QAAA,MAAA,CAAA,SAAA,OAAA,SAAA,YAAA,UAAA,KAAA,IAAA,KACA,OAAA,SAAA,YAAA,KAAA,SAAA,UAAA,KAAA,KAAA,KAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA,EACA;AAAA,EAEA,MAAA,OAAA,EAAA,QAAA;AACA,UAAA,QAAA,kBAAA,SAAA,gBAAA,IAAA;AACA,UAAA,YAAA,UAAA,OAAA,QAAA,IAAA;AAEA,WAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,cAAA,KAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA,EAAA,MAAA;AAAA,MACA,UAAA,EAAA,cAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,oBAAA;AACA,aAAA,KAAA,QAAA,IAAA,CAAA,UAAA;AAAA,QACA,OAAA,OAAA,SAAA,WAAA,KAAA,QAAA;AAAA,QACA,MAAA,OAAA,SAAA,YAAA,KAAA,OACA,KAAA,OACA,EAAA,kCAAA,EAAA,KAAA,KAAA,MAAA,CAAA;AAAA,MACA,EAAA;AAAA,IACA;AAAA,IAEA,MAAA;AACA,aAAA,YAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,YAAA,QAAA;AACA,YAAA,QAAA;AACA,aAAA,KAAA,cAAA,KAAA,YAAA,IAAA,MAAA,QAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA,OAAA;AACA,WAAA,eAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,cAAA,cAAA;AAIA,WAAA,MAAA,UAAA,KAAA,YAAA;AACA,mBAAA;AAEA,WAAA,WAAA;AAAA,IACA;AAAA,IAEA,cAAA;AAMA,WAAA,MAAA,OAAA;AAIA,WAAA,MAAA,QAAA;AAIA,WAAA,MAAA,eAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AACA,WAAA,WAAA;AAAA,IACA;AAAA,IAEA,qBAAA;AACA,WAAA,WAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,UAAA,OAAA;AACA,UAAA,OAAA,UAAA,UAAA;AACA,gBAAA,KAAA,aAAA;AAAA,MACA;AACA,WAAA,eAAA;AAEA,WAAA,QAAA;AAKA,WAAA,MAAA,SAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,cAAA,OAAA;AACA,YAAA,CAAA,KAAA,OAAA,IAAA,IAAA,KAAA,SAAA,KAAA;AACA,cAAA,SAAA,MAAA,SAAA,QAAA,SAAA,QAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,SAAA,KAAA;AACA,YAAA,SAAA,4CAAA,KAAA,GAAA;AACA,aAAA,SACA,CAAA,SAAA,OAAA,CAAA,GAAA,EAAA,GAAA,SAAA,OAAA,CAAA,GAAA,EAAA,GAAA,SAAA,OAAA,CAAA,GAAA,EAAA,CAAA,IACA,CAAA,GAAA,GAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcColorPicker-D-E2dT4Q.cjs

@@ -1,254 +0,0 @@
-require('../assets/NcColorPicker-CGI9ElwB.css');
-"use strict";
-const mdi = require("./mdi-BBwE-MZC.cjs");
-const core = require("@vueuse/core");
-const vueColor = require("vue-color");
-const useModelMigration = require("./useModelMigration-D5zhrNXr.cjs");
-const _l10n = require("./_l10n-DM-VRK9x.cjs");
-const GenColors = require("./GenColors-BVouTbTJ.cjs");
-const GenRandomId = require("./GenRandomId-D7iOvpZS.cjs");
-const NcButton = require("./NcButton-DOsCAjiE.cjs");
-const NcIconSvgWrapper = require("./NcIconSvgWrapper-D-aKMbf3.cjs");
-const NcPopover = require("./NcPopover-DkX3Esbr.cjs");
-const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
-_l10n.register(_l10n.t1);
-const HEX_REGEX = /^#([a-f0-9]{3}|[a-f0-9]{6})$/i;
-const _sfc_main = {
-  name: "NcColorPicker",
-  components: {
-    Chrome: vueColor.Chrome,
-    NcButton: NcButton.NcButton,
-    NcIconSvgWrapper: NcIconSvgWrapper.NcIconSvgWrapper,
-    NcPopover: NcPopover.NcPopover
-  },
-  model: {
-    prop: "modelValue",
-    event: "update:modelValue"
-  },
-  props: {
-    /**
-     * Removed in v9 - use `modelValue` (`v-model`) instead
-     *
-     * @deprecated
-     */
-    value: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * A HEX color that represents the initial value of the picker
-     */
-    modelValue: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Set to `true` to enable advanced fields including HEX, RGB, and HSL
-     */
-    advancedFields: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Selector for the popover container
-     */
-    container: {
-      type: [Boolean, String, Object, Element],
-      default: "body"
-    },
-    /**
-     * The open state of the color picker.
-     * This can be used as two-way binding together with the `update:open` event.
-     */
-    open: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Provide a custom array of colors to show.
-     * Can be either an array of string hexadecimal colors,
-     * or an array of object with a `color` property with hexadecimal color string,
-     * and a `name` property for accessibility.
-     *
-     * @type {string[] | {color: string, name: string}[]}
-     */
-    palette: {
-      type: Array,
-      default: () => [...GenColors.defaultPalette],
-      validator: (palette) => palette.every((item) => typeof item === "string" && HEX_REGEX.test(item) || typeof item === "object" && item.color && HEX_REGEX.test(item.color))
-    },
-    /**
-     * Limit selectable colors to only the provided palette
-     */
-    paletteOnly: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: [
-    /**
-     * @deprecated use the `closed` event instead.
-     */
-    "close",
-    /**
-     * Emitted when the color picker is closed and all transitions have finished.
-     */
-    "closed",
-    "submit",
-    "update:open",
-    /**
-     * Emits a hexadecimal string e.g. '#ffffff'
-     */
-    "update:modelValue",
-    /**
-     * Same as update:modelValue for Vue 2 compatibility
-     */
-    "update:model-value",
-    /**
-     * Same as update:modelValue for Vue 2 compatibility.
-     *
-     * @deprecated Removed in v9 - use `update:modelValue` (`v-model`) instead
-     */
-    "input",
-    /**
-     * @deprecated Removed in v9 - use `update:modelValue` (`v-model`) instead
-     */
-    "update:value"
-  ],
-  setup(props, { emit }) {
-    const model = useModelMigration.useModelMigration("value", "update:value", true);
-    const modelOpen = core.useVModel(props, "open", emit);
-    return {
-      mdiArrowLeft: mdi.mdiArrowLeft,
-      mdiCheck: mdi.mdiCheck,
-      mdiDotsHorizontal: mdi.mdiDotsHorizontal,
-      model,
-      modelOpen
-    };
-  },
-  data() {
-    return {
-      currentColor: this.model,
-      advanced: false,
-      ariaBack: _l10n.t("Back"),
-      ariaMore: _l10n.t("More options")
-    };
-  },
-  computed: {
-    normalizedPalette() {
-      return this.palette.map((item) => ({
-        color: typeof item === "object" ? item.color : item,
-        name: typeof item === "object" && item.name ? item.name : _l10n.t("A color with a HEX value {hex}", { hex: item.color })
-      }));
-    },
-    uid() {
-      return GenRandomId.GenRandomId();
-    },
-    contrastColor() {
-      const black = "#000000";
-      const white = "#FFFFFF";
-      return this.calculateLuma(this.currentColor) > 0.5 ? black : white;
-    }
-  },
-  watch: {
-    model(color) {
-      this.currentColor = color;
-    }
-  },
-  methods: {
-    t: _l10n.t,
-    /**
-     * Submit a picked colour and close picker
-     *
-     * @param {Function} hideCallback callback to close popover
-     */
-    handleConfirm(hideCallback) {
-      this.$emit("submit", this.currentColor);
-      hideCallback();
-      this.advanced = false;
-    },
-    handleClose() {
-      this.$emit("close");
-      this.$emit("closed");
-      this.$emit("update:open", false);
-    },
-    /**
-     * Inner navigations
-     */
-    handleBack() {
-      this.advanced = false;
-    },
-    handleMoreSettings() {
-      this.advanced = true;
-    },
-    /**
-     * Pick a colour
-     *
-     * @param {string} color the picked color
-     */
-    pickColor(color) {
-      if (typeof color !== "string") {
-        color = this.currentColor.hex;
-      }
-      this.currentColor = color;
-      this.model = color;
-      this.$emit("input", color);
-    },
-    /**
-     * Calculate luminance of provided hex color
-     *
-     * @param {string} color the hex color
-     */
-    calculateLuma(color) {
-      const [red, green, blue] = this.hexToRGB(color);
-      return (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255;
-    },
-    /**
-     * Convert hex color to RGB
-     *
-     * @param {string} hex the hex color
-     * @return {[number, number, number]}
-     */
-    hexToRGB(hex) {
-      const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-      return result ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)] : [0, 0, 0];
-    }
-  }
-};
-var _sfc_render = function render() {
-  var _vm = this, _c = _vm._self._c;
-  return _c("NcPopover", _vm._g(_vm._b({ attrs: { "shown": _vm.modelOpen, "container": _vm.container, "popup-role": "dialog" }, on: { "update:shown": function($event) {
-    _vm.modelOpen = $event;
-  }, "apply-hide": _vm.handleClose }, scopedSlots: _vm._u([{ key: "trigger", fn: function(slotProps) {
-    return [_vm._t("default", null, null, slotProps)];
-  } }, { key: "default", fn: function(slotProps) {
-    return [_c("div", { staticClass: "color-picker", class: { "color-picker--advanced-fields": _vm.advanced && _vm.advancedFields }, attrs: { "role": "dialog", "aria-modal": "true", "aria-label": _vm.t("Color picker") } }, [_c("Transition", { attrs: { "name": "slide", "mode": "out-in" } }, [!_vm.advanced ? _c("div", { staticClass: "color-picker__simple" }, _vm._l(_vm.normalizedPalette, function({ color, name }, index) {
-      return _c("label", { key: index, staticClass: "color-picker__simple-color-circle", class: { "color-picker__simple-color-circle--active": color === _vm.currentColor }, style: {
-        backgroundColor: color,
-        color: _vm.contrastColor
-      } }, [color === _vm.currentColor ? _c("NcIconSvgWrapper", { attrs: { "path": _vm.mdiCheck } }) : _vm._e(), _c("input", { staticClass: "hidden-visually", attrs: { "type": "radio", "aria-label": name, "name": `color-picker-${_vm.uid}` }, domProps: { "checked": color === _vm.currentColor }, on: { "click": function($event) {
-        return _vm.pickColor(color);
-      } } })], 1);
-    }), 0) : _c("Chrome", { staticClass: "color-picker__advanced", attrs: { "disable-alpha": true, "disable-fields": !_vm.advancedFields }, on: { "input": _vm.pickColor }, model: { value: _vm.currentColor, callback: function($$v) {
-      _vm.currentColor = $$v;
-    }, expression: "currentColor" } })], 1), !_vm.paletteOnly ? _c("div", { staticClass: "color-picker__navigation" }, [_vm.advanced ? _c("NcButton", { attrs: { "aria-label": _vm.ariaBack, "variant": "tertiary" }, on: { "click": _vm.handleBack }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-      return [_c("NcIconSvgWrapper", { attrs: { "directional": "", "path": _vm.mdiArrowLeft } })];
-    }, proxy: true }], null, true) }) : _c("NcButton", { attrs: { "aria-label": _vm.ariaMore, "variant": "tertiary" }, on: { "click": _vm.handleMoreSettings }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-      return [_c("NcIconSvgWrapper", { attrs: { "path": _vm.mdiDotsHorizontal } })];
-    }, proxy: true }], null, true) }), _c("NcButton", { attrs: { "variant": "primary" }, on: { "click": function($event) {
-      return _vm.handleConfirm(slotProps.hide);
-    } } }, [_vm._v(" " + _vm._s(_vm.t("Choose")) + " ")])], 1) : _vm._e()], 1)];
-  } }], null, true) }, "NcPopover", _vm.$attrs, false), _vm.$listeners));
-};
-var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  "5fe0f834"
-);
-const NcColorPicker = __component__.exports;
-exports.NcColorPicker = NcColorPicker;
-//# sourceMappingURL=NcColorPicker-D-E2dT4Q.cjs.map

package/dist/chunks/NcColorPicker-D-E2dT4Q.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcColorPicker-D-E2dT4Q.cjs","sources":["../../src/components/NcColorPicker/NcColorPicker.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\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: 34px;\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 v-model=\"color\" :open.sync=\"open\" 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}\n</script>\n<style>\n.container1 {\n\tdisplay: flex;\n\tgap: 20px;\n}\n\n.color1 {\n\twidth: 100px;\n\theight: 34px;\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\tgap: 20px;\n}\n\n.color0 {\n\twidth: 100px;\n\theight: 34px;\n\tborder-radius: 6px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<NcPopover\n\t\t:shown.sync=\"modelOpen\"\n\t\t:container=\"container\"\n\t\tpopup-role=\"dialog\"\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<template #default=\"slotProps\">\n\t\t\t<div\n\t\t\t\trole=\"dialog\"\n\t\t\t\tclass=\"color-picker\"\n\t\t\t\taria-modal=\"true\"\n\t\t\t\t:aria-label=\"t('Color picker')\"\n\t\t\t\t:class=\"{ 'color-picker--advanced-fields': advanced && advancedFields }\">\n\t\t\t\t<Transition name=\"slide\" mode=\"out-in\">\n\t\t\t\t\t<div v-if=\"!advanced\" class=\"color-picker__simple\">\n\t\t\t\t\t\t<label\n\t\t\t\t\t\t\tv-for=\"({ color, name }, index) in normalizedPalette\"\n\t\t\t\t\t\t\t:key=\"index\"\n\t\t\t\t\t\t\tclass=\"color-picker__simple-color-circle\"\n\t\t\t\t\t\t\t:class=\"{ 'color-picker__simple-color-circle--active': color === currentColor }\"\n\t\t\t\t\t\t\t:style=\"{\n\t\t\t\t\t\t\t\tbackgroundColor: color,\n\t\t\t\t\t\t\t\tcolor: contrastColor,\n\t\t\t\t\t\t\t}\">\n\t\t\t\t\t\t\t<NcIconSvgWrapper v-if=\"color === currentColor\" :path=\"mdiCheck\" />\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\t\tclass=\"hidden-visually\"\n\t\t\t\t\t\t\t\t:aria-label=\"name\"\n\t\t\t\t\t\t\t\t:name=\"`color-picker-${uid}`\"\n\t\t\t\t\t\t\t\t:checked=\"color === currentColor\"\n\t\t\t\t\t\t\t\t@click=\"pickColor(color)\">\n\t\t\t\t\t\t</label>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Chrome\n\t\t\t\t\t\tv-else\n\t\t\t\t\t\tv-model=\"currentColor\"\n\t\t\t\t\t\tclass=\"color-picker__advanced\"\n\t\t\t\t\t\t:disable-alpha=\"true\"\n\t\t\t\t\t\t:disable-fields=\"!advancedFields\"\n\t\t\t\t\t\t@input=\"pickColor\" />\n\t\t\t\t</Transition>\n\t\t\t\t<div v-if=\"!paletteOnly\" class=\"color-picker__navigation\">\n\t\t\t\t\t<NcButton\n\t\t\t\t\t\tv-if=\"advanced\"\n\t\t\t\t\t\t:aria-label=\"ariaBack\"\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t@click=\"handleBack\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper directional :path=\"mdiArrowLeft\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcButton>\n\t\t\t\t\t<NcButton\n\t\t\t\t\t\tv-else\n\t\t\t\t\t\t:aria-label=\"ariaMore\"\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t@click=\"handleMoreSettings\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiDotsHorizontal\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcButton>\n\t\t\t\t\t<NcButton\n\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t@click=\"handleConfirm(slotProps.hide)\">\n\t\t\t\t\t\t{{ t('Choose') }}\n\t\t\t\t\t</NcButton>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</template>\n\t</NcPopover>\n</template>\n\n<script>\nimport { mdiArrowLeft, mdiCheck, mdiDotsHorizontal } from '@mdi/js'\nimport { useVModel } from '@vueuse/core'\nimport { Chrome } from 'vue-color'\nimport { useModelMigration } from '../../composables/useModelMigration.ts'\nimport { t } from '../../l10n.js'\nimport { defaultPalette } from '../../utils/GenColors.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport NcButton from '../NcButton/index.js'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\nimport NcPopover from '../NcPopover/index.js'\n\nconst HEX_REGEX = /^#([a-f0-9]{3}|[a-f0-9]{6})$/i\n\nexport default {\n\tname: 'NcColorPicker',\n\n\tcomponents: {\n\t\tChrome,\n\t\tNcButton,\n\t\tNcIconSvgWrapper,\n\t\tNcPopover,\n\t},\n\n\tmodel: {\n\t\tprop: 'modelValue',\n\t\tevent: 'update:modelValue',\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Removed in v9 - use `modelValue` (`v-model`) instead\n\t\t *\n\t\t * @deprecated\n\t\t */\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * A HEX color that represents the initial value of the picker\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\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 * Selector for the popover container\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: [Boolean, String, Object, Element],\n\t\t\tdefault: 'body',\n\t\t},\n\n\t\t/**\n\t\t * The open state of the color picker.\n\t\t * This can be used as two-way binding together with the `update:open` event.\n\t\t */\n\t\topen: {\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) => (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},\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\t},\n\n\temits: [\n\t\t/**\n\t\t * @deprecated use the `closed` event instead.\n\t\t */\n\t\t'close',\n\t\t/**\n\t\t * Emitted when the color picker is closed and all transitions have finished.\n\t\t */\n\t\t'closed',\n\t\t'submit',\n\t\t'update:open',\n\t\t/**\n\t\t * Emits a hexadecimal string e.g. '#ffffff'\n\t\t */\n\t\t'update:modelValue',\n\t\t/**\n\t\t * Same as update:modelValue for Vue 2 compatibility\n\t\t */\n\t\t'update:model-value',\n\t\t/**\n\t\t * Same as update:modelValue for Vue 2 compatibility.\n\t\t *\n\t\t * @deprecated Removed in v9 - use `update:modelValue` (`v-model`) instead\n\t\t */\n\t\t'input',\n\t\t/**\n\t\t * @deprecated Removed in v9 - use `update:modelValue` (`v-model`) instead\n\t\t */\n\t\t'update:value',\n\t],\n\n\tsetup(props, { emit }) {\n\t\tconst model = useModelMigration('value', 'update:value', true)\n\t\tconst modelOpen = useVModel(props, 'open', emit)\n\n\t\treturn {\n\t\t\tmdiArrowLeft,\n\t\t\tmdiCheck,\n\t\t\tmdiDotsHorizontal,\n\t\t\tmodel,\n\t\t\tmodelOpen,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tcurrentColor: this.model,\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\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\tmodel(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\t * @param {Function} hideCallback callback to close popover\n\t\t */\n\t\thandleConfirm(hideCallback) {\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\thideCallback()\n\n\t\t\tthis.advanced = false\n\t\t},\n\n\t\thandleClose() {\n\t\t\t/**\n\t\t\t * Emitted after picker close.\n\t\t\t *\n\t\t\t * @deprecated removed in v9 - use the `closed` event instead\n\t\t\t */\n\t\t\tthis.$emit('close')\n\t\t\t/**\n\t\t\t * Emitted after the picker is closed and all transitions have finished.\n\t\t\t */\n\t\t\tthis.$emit('closed')\n\t\t\t/**\n\t\t\t * @deprecated use the 'close' event instead\n\t\t\t */\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\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\tthis.model = 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\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\tcalculateLuma(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 * @return {[number, number, number]}\n\t\t */\n\t\thexToRGB(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: [0, 0, 0]\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, var(--default-clickable-area));\n\t\tgrid-auto-rows: var(--default-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: calc(var(--default-clickable-area) - 10px);\n\t\t\theight: calc(var(--default-clickable-area) - 10px);\n\t\t\tmin-height: calc(var(--default-clickable-area) - 10px);\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: calc(var(--default-clickable-area) - 6px);\n\t\t\t\theight: calc(var(--default-clickable-area) - 6px);\n\t\t\t\tmin-height: calc(var(--default-clickable-area) - 6px);\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\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\n\t\t\t.vc-input__input {\n\t\t\t\t--input-border-radius: var(--border-radius-element, var(--border-radius-large));\n\t\t\t\t--input-border-width-offset: calc(var(--border-width-input-focused, 2px) - var(--border-width-input, 2px));\n\t\t\t\twidth: 100%;\n\t\t\t\theight: var(--default-clickable-area);\n\t\t\t\tmargin: 0;\n\t\t\t\tpadding-inline: calc(var(--border-radius-large) + var(--input-border-width-offset));\n\t\t\t\tpadding-block: var(--input-border-width-offset);\n\t\t\t\tborder: var(--border-width-input, 2px) solid var(--color-border-maxcontrast);\n\t\t\t\tborder-radius: var(--input-border-radius);\n\t\t\t\tfont-size: var(--default-font-size);\n\t\t\t\tcolor: var(--color-main-text);\n\t\t\t\tbox-shadow: none;\n\n\t\t\t\t&:active:not([disabled]),\n\t\t\t\t&:hover:not([disabled]),\n\t\t\t\t&:focus:not([disabled]) {\n\t\t\t\t\t// Reset padding offset when focused\n\t\t\t\t\t--input-border-width-offset: 0px;\n\t\t\t\t\tborder-color: var(--color-main-text);\n\t\t\t\t\tborder-width: var(--border-width-input-focused, 2px);\n\t\t\t\t\tbox-shadow: 0 0 0 2px var(--color-main-background) !important;\n\n\t\t\t\t\t& + .vc-input__label {\n\t\t\t\t\t\tcolor: var(--color-main-text);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.vc-input__label {\n\t\t\t\tposition: absolute;\n\t\t\t\tinset-inline: var(--border-width-input-focused, 2px);\n\t\t\t\tinset-block-start: calc(-1.5 * var(--font-size-small, 13px) / 2);\n\t\t\t\tmax-width: fit-content;\n\t\t\t\tmargin-inline: calc(var(--border-radius-large) - var(--default-grid-baseline));\n\t\t\t\tmargin-block: 0;\n\t\t\t\tpadding-inline: var(--default-grid-baseline);\n\t\t\t\tfont-family: var(--font-face);\n\t\t\t\tfont-size: var(--font-size-small, 13px);\n\t\t\t\tline-height: 1.5;\n\t\t\t\tfont-weight: 500;\n\t\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\t\tbackground-color: var(--color-main-background);\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\n\t\t&-toggle-btn {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t\twidth: var(--default-clickable-area);\n\t\t\theight: var(--default-clickable-area);\n\t\t\tmargin-left: 6px;\n\t\t\tfilter: var(--background-invert-if-dark);\n\t\t}\n\n\t\t&-toggle-icon {\n\t\t\twidth: 24px;\n\t\t\theight: 24px;\n\t\t\tmargin: 0;\n\t\t}\n\n\t\t&-toggle-icon-highlight {\n\t\t\twidth: var(--default-clickable-area);\n\t\t\theight: var(--default-clickable-area);\n\t\t\tinset: 0;\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":["Chrome","NcButton","NcIconSvgWrapper","NcPopover","defaultPalette","useModelMigration","useVModel","mdiArrowLeft","mdiCheck","mdiDotsHorizontal","t","GenRandomId"],"mappings":";;;;;;;;;;;;;AAmOA,MAAA,YAAA;AAEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,QAAAA,SAAAA;AAAAA,IACA,UAAAC,SAAAA;AAAAA,IACA,kBAAAC,iBAAAA;AAAAA,IACA,WAAAC,UAAAA;AAAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA,CAAA,SAAA,QAAA,QAAA,OAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA,GAAAC,wBAAA;AAAA,MACA,WAAA,CAAA,YAAA,QAAA,MAAA,CAAA,SAAA,OAAA,SAAA,YAAA,UAAA,KAAA,IAAA,KACA,OAAA,SAAA,YAAA,KAAA,SAAA,UAAA,KAAA,KAAA,KAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA,EACA;AAAA,EAEA,MAAA,OAAA,EAAA,QAAA;AACA,UAAA,QAAAC,kBAAAA,kBAAA,SAAA,gBAAA,IAAA;AACA,UAAA,YAAAC,KAAAA,UAAA,OAAA,QAAA,IAAA;AAEA,WAAA;AAAA,MACA,cAAAC,IAAAA;AAAAA,MACA,UAAAC,IAAAA;AAAAA,MACA,mBAAAC,IAAAA;AAAAA,MACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,cAAA,KAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAAC,MAAAA,EAAA,MAAA;AAAA,MACA,UAAAA,MAAAA,EAAA,cAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,oBAAA;AACA,aAAA,KAAA,QAAA,IAAA,CAAA,UAAA;AAAA,QACA,OAAA,OAAA,SAAA,WAAA,KAAA,QAAA;AAAA,QACA,MAAA,OAAA,SAAA,YAAA,KAAA,OACA,KAAA,OACAA,MAAAA,EAAA,kCAAA,EAAA,KAAA,KAAA,MAAA,CAAA;AAAA,MACA,EAAA;AAAA,IACA;AAAA,IAEA,MAAA;AACA,aAAAC,YAAAA,YAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,YAAA,QAAA;AACA,YAAA,QAAA;AACA,aAAA,KAAA,cAAA,KAAA,YAAA,IAAA,MAAA,QAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA,OAAA;AACA,WAAA,eAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,GAAAD,MAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,IAOA,cAAA,cAAA;AAIA,WAAA,MAAA,UAAA,KAAA,YAAA;AACA,mBAAA;AAEA,WAAA,WAAA;AAAA,IACA;AAAA,IAEA,cAAA;AAMA,WAAA,MAAA,OAAA;AAIA,WAAA,MAAA,QAAA;AAIA,WAAA,MAAA,eAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AACA,WAAA,WAAA;AAAA,IACA;AAAA,IAEA,qBAAA;AACA,WAAA,WAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,UAAA,OAAA;AACA,UAAA,OAAA,UAAA,UAAA;AACA,gBAAA,KAAA,aAAA;AAAA,MACA;AACA,WAAA,eAAA;AAEA,WAAA,QAAA;AAKA,WAAA,MAAA,SAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,cAAA,OAAA;AACA,YAAA,CAAA,KAAA,OAAA,IAAA,IAAA,KAAA,SAAA,KAAA;AACA,cAAA,SAAA,MAAA,SAAA,QAAA,SAAA,QAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,SAAA,KAAA;AACA,YAAA,SAAA,4CAAA,KAAA,GAAA;AACA,aAAA,SACA,CAAA,SAAA,OAAA,CAAA,GAAA,EAAA,GAAA,SAAA,OAAA,CAAA,GAAA,EAAA,GAAA,SAAA,OAAA,CAAA,GAAA,EAAA,CAAA,IACA,CAAA,GAAA,GAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}