@nextcloud/vue 8.30.0 → 8.32.0

package/dist/chunks/NcColorPicker-DpLU-oKM.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcColorPicker-DpLU-oKM.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<script setup lang=\"ts\">\nimport type { Color } from '../../utils/colors.ts'\n\nimport { mdiArrowLeft, mdiCheck, mdiCloseCircleOutline, mdiDotsHorizontal } from '@mdi/js'\nimport { useVModel } from '@vueuse/core'\nimport { computed, ref } from 'vue'\nimport { Chrome } from 'vue-color'\nimport NcButton from '../NcButton/NcButton.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport NcPopover from '../NcPopover/NcPopover.vue'\nimport { useModelMigration } from '../../composables/useModelMigration.ts'\nimport { t } from '../../l10n.js'\nimport { COLOR_BLACK, COLOR_WHITE, defaultPalette } from '../../utils/colors.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { logger } from '../../utils/logger.ts'\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * Set to `true` to enable advanced fields including HEX, RGB, and HSL\n\t */\n\tadvancedFields?: boolean\n\n\t/**\n\t * Allow to clear the current color.\n\t * When set the `update:modelValue` and `submit` event might emit also `undefined`.\n\t */\n\tclearable?: boolean\n\n\t/**\n\t * Selector for the popover container\n\t */\n\tcontainer?: string | Element\n\n\t/**\n\t * The model value (selected color).\n\t */\n\tmodelValue?: string // eslint-disable-line vue/no-unused-properties -- used by useModelMigration\n\n\t/**\n\t * @deprecated use `modelValue`\n\t */\n\tvalue?: string // eslint-disable-line vue/no-unused-properties -- used by useModelMigration\n\n\t/**\n\t * Current open state of the color picker\n\t */\n\topen?: boolean // eslint-disable-line vue/no-unused-properties -- used by useVModel\n\n\t/**\n\t * Provide a custom array of colors to show.\n\t * Can be either an array of string hexadecimal colors,\n\t * or an array of object with a `color` property with hexadecimal color string,\n\t * and a `name` property for accessibility.\n\t */\n\tpalette?: string[] | Color[]\n\n\t/**\n\t * Limit selectable colors to only the provided palette\n\t */\n\tpaletteOnly?: boolean\n}>(), {\n\tcontainer: 'body',\n\tpalette: () => [],\n\tmodelValue: '',\n\tvalue: undefined,\n})\n\nconst emit = defineEmits<{\n\t/**\n\t * Emitted when the submit button was pressed.\n\t * The payload is the same as the current modelValue.\n\t *\n\t * The value might be undefined if the `clearable` prop is set.\n\t */\n\t(e: 'submit', v: string | undefined): void\n\n\t/**\n\t * The color picker was fully closed.\n\t */\n\t(e: 'close'): void\n\n\t/**\n\t * The updated color\n\t */\n\t(e: 'update:modelValue', v: string | undefined): void\n\n\t/**\n\t * @deprecated use `update:modelValue`\n\t */\n\t(e: 'update:value', v: string | undefined): void\n}>()\n\nconst currentColor = useModelMigration<string | undefined>('value', 'update:value', true)\n// watchEffect(() => console.error('current: ', currentColor.value))\n\nconst modelOpen = useVModel(props, 'open', emit, { passive: true, eventName: 'update:open' })\n\nconst HEX_REGEX = /^#([a-f0-9]{3}|[a-f0-9]{6})$/i\n\n/**\n * Unique id used to identify different color pickers\n */\nconst id = createElementId()\n\n/**\n * Is the advanced picker is open\n */\nconst advanced = ref(false)\n\n/**\n * Normalized palette by converting array of hex colors to color objects.\n * This also ensures there is a default palette if needed (no palette passed).\n */\nconst normalizedPalette = computed(() => {\n\tlet palette = props.palette as (string | Color)[]\n\tfor (const color of palette) {\n\t\tif ((typeof color === 'string' && !color.match(HEX_REGEX))\n\t\t\t|| (typeof color === 'object' && !color.color?.match(HEX_REGEX))) {\n\t\t\tlogger.error('[NcColorPicker] Invalid palette passed', { color })\n\t\t\tpalette = []\n\t\t\tbreak\n\t\t}\n\t}\n\n\tif (palette.length === 0) {\n\t\tpalette = props.clearable\n\t\t\t? [...defaultPalette, COLOR_BLACK, COLOR_WHITE]\n\t\t\t: [...defaultPalette]\n\t}\n\n\treturn palette.map((item: Color | string) => ({\n\t\tcolor: typeof item === 'object' ? item.color : item,\n\t\tname: typeof item === 'object' && item.name\n\t\t\t? item.name\n\t\t\t: t('A color with a HEX value {hex}', { hex: typeof item === 'string' ? item : item.color }),\n\t}))\n})\n\n/**\n * Submit a picked colour and close picker\n *\n * @param hideCallback - callback to close popover\n */\nfunction handleConfirm(hideCallback: () => void) {\n\temit('submit', currentColor.value)\n\thideCallback()\n\tadvanced.value = false\n}\n\n/**\n * Toggle the currently selected palette color.\n *\n * @param color - The color to toggle\n */\nfunction toggleColor(color: string | Color) {\n\tcolor = typeof color === 'string' ? color : color.color\n\n\tif (props.clearable && currentColor.value === color) {\n\t\tcurrentColor.value = undefined\n\t} else {\n\t\tcurrentColor.value = color\n\t}\n}\n\n/**\n * @param color - The picked color from the Chrome component\n * @param color.hex - The hex string of the color\n */\nfunction pickCustomColor(color: { hex: string }): void {\n\tcurrentColor.value = color.hex\n}\n\n/**\n * Get the text color with the most constrast for a given background color.\n *\n * @param color - The background color\n */\nfunction getContrastColor(color: string): string {\n\treturn calculateLuma(color) > 0.5\n\t\t? COLOR_BLACK.color\n\t\t: COLOR_WHITE.color\n}\n\n/**\n * Calculate luminance of provided hex color\n *\n * @param color - The hex color\n */\nfunction calculateLuma(color: string) {\n\tconst [red, green, blue] = hexToRGB(color)\n\treturn (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255\n}\n\n/**\n * Convert hex color to RGB\n *\n * @param hex - The hex color\n */\nfunction hexToRGB(hex: string) {\n\tconst result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex)\n\treturn result\n\t\t? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)]\n\t\t: [0, 0, 0]\n}\n</script>\n\n<script lang=\"ts\">\nexport default {\n\tmodel: {\n\t\tevent: 'update:modelValue',\n\t\tprop: 'modelValue',\n\t},\n}\n</script>\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=\"emit('close')\">\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=\"{\n\t\t\t\t\t'color-picker--advanced-fields': advanced && advancedFields,\n\t\t\t\t\t'color-picker--clearable': clearable,\n\t\t\t\t}\">\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: getContrastColor(color),\n\t\t\t\t\t\t\t}\">\n\t\t\t\t\t\t\t<span class=\"hidden-visually\">\n\t\t\t\t\t\t\t\t{{ color }} -- {{ currentColor }}\n\t\t\t\t\t\t\t</span>\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-${id}`\"\n\t\t\t\t\t\t\t\t:checked=\"color === currentColor\"\n\t\t\t\t\t\t\t\t@click=\"toggleColor(color)\">\n\t\t\t\t\t\t</label>\n\t\t\t\t\t\t<label v-if=\"clearable\" class=\"color-picker__clear\" :title=\"t('No color')\">\n\t\t\t\t\t\t\t<NcIconSvgWrapper\n\t\t\t\t\t\t\t\t:size=\"currentColor ? 28 : 34 /* size is adusted so that inner mdi icon aligns with color circles */\"\n\t\t\t\t\t\t\t\t:path=\"mdiCloseCircleOutline\" />\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=\"t('No color')\"\n\t\t\t\t\t\t\t\t:name=\"`color-picker-${id}`\"\n\t\t\t\t\t\t\t\t:checked=\"!currentColor\"\n\t\t\t\t\t\t\t\t@click=\"currentColor = undefined\">\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\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:value=\"currentColor ?? '#000000'\"\n\t\t\t\t\t\t@input=\"pickCustomColor\" />\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=\"t('Back')\"\n\t\t\t\t\t\t:title=\"t('Back')\"\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t@click=\"advanced = false\">\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=\"t('More options')\"\n\t\t\t\t\t\t:title=\"t('More options')\"\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t@click=\"advanced = true\">\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<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\tpadding: var(--border-radius-element); // align with NcPopover border radius\n\tmin-width: calc(4 * var(--default-clickable-area) + 2 * var(--border-radius-element)); // space for 4 color circles\n\n\t&--clearable {\n\t\tmin-width: calc(5 * var(--default-clickable-area) + 2 * var(--border-radius-element));\n\t}\n\n\t&--advanced-fields {\n\t\tmin-width: 264px;\n\t}\n\n\t&__clear {\n\t\tcolor: var(--color-main-text);\n\n\t\t&:hover:not(:has(:checked)) {\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\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\tgap: var(--default-grid-baseline);\n\t\tjustify-content: space-between;\n\t\tmargin-top: calc(2 * var(--default-grid-baseline));\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-inline-start: 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</style>\n\n<docs>\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],\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* Allowing to clear the selected color\n\n```vue\n<template>\n\t<div class=\"container1\">\n\t\t<NcColorPicker clearable v-model=\"color\">\n\t\t\t<NcButton>Click Me</NcButton>\n\t\t</NcColorPicker>\n\t\t<div :style=\"{'background-color': color}\" class=\"color-preview\" :class=\"{'color-preview--none': !color}\" />\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 scoped>\n.container1 {\n\tdisplay: flex;\n\tgap: 20px;\n}\n\n.color-preview {\n\twidth: 100px;\n\theight: 34px;\n\tborder: 1px solid black;\n\tborder-radius: 6px;\n}\n\n.color-preview--none {\n\tbackground: repeating-conic-gradient(#808080 0 25%, #0000 0 50%) 50% / 20px 20px;\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"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoNA,MAAA,cAAe;AAAA,EACd,OAAO;AAAA,IACN,OAAO;AAAA,IACP,MAAM;AAAA,EAAA;AAER;;;;;;;;;;;;;;;;AAxHA,UAAM,eAAe,kBAAsC,SAAS,gBAAgB,IAAI;AAGxF,UAAM,YAAY,UAAU,OAAO,QAAQ,MAAM,EAAE,SAAS,MAAM,WAAW,eAAe;AAE5F,UAAM,YAAY;AAKlB,UAAM,KAAK,gBAAA;AAKX,UAAM,WAAW,IAAI,KAAK;AAM1B,UAAM,oBAAoB,SAAS,MAAM;;AACxC,UAAI,UAAU,MAAM;AACpB,iBAAW,SAAS,SAAS;AAC5B,YAAK,OAAO,UAAU,YAAY,CAAC,MAAM,MAAM,SAAS,KACnD,OAAO,UAAU,YAAY,GAAC,KAAA,MAAM,UAAN,OAAA,SAAA,GAAa,MAAM,SAAA,IAAa;AAClE,iBAAO,MAAM,0CAA0C,EAAE,MAAA,CAAO;AAChE,oBAAU,CAAA;AACV;AAAA,QACD;AAAA,MACD;AAEA,UAAI,QAAQ,WAAW,GAAG;AACzB,kBAAU,MAAM,YACb,CAAC,GAAG,gBAAgB,aAAa,WAAW,IAC5C,CAAC,GAAG,cAAc;AAAA,MACtB;AAEA,aAAO,QAAQ,IAAI,CAAC,UAA0B;AAAA,QAC7C,OAAO,OAAO,SAAS,WAAW,KAAK,QAAQ;AAAA,QAC/C,MAAM,OAAO,SAAS,YAAY,KAAK,OACpC,KAAK,OACL,EAAE,kCAAkC,EAAE,KAAK,OAAO,SAAS,WAAW,OAAO,KAAK,OAAO;AAAA,MAAA,EAC3F;AAAA,IACH,CAAC;AAOD,aAAS,cAAc,cAA0B;AAChD,WAAK,UAAU,aAAa,KAAK;AACjC,mBAAA;AACA,eAAS,QAAQ;AAAA,IAClB;AAOA,aAAS,YAAY,OAAuB;AAC3C,cAAQ,OAAO,UAAU,WAAW,QAAQ,MAAM;AAElD,UAAI,MAAM,aAAa,aAAa,UAAU,OAAO;AACpD,qBAAa,QAAQ;AAAA,MACtB,OAAO;AACN,qBAAa,QAAQ;AAAA,MACtB;AAAA,IACD;AAMA,aAAS,gBAAgB,OAA8B;AACtD,mBAAa,QAAQ,MAAM;AAAA,IAC5B;AAOA,aAAS,iBAAiB,OAAuB;AAChD,aAAO,cAAc,KAAK,IAAI,MAC3B,YAAY,QACZ,YAAY;AAAA,IAChB;AAOA,aAAS,cAAc,OAAe;AACrC,YAAM,CAAC,KAAK,OAAO,IAAI,IAAI,SAAS,KAAK;AACzC,cAAQ,SAAS,MAAM,SAAS,QAAQ,SAAS,QAAQ;AAAA,IAC1D;AAOA,aAAS,SAAS,KAAa;AAC9B,YAAM,SAAS,4CAA4C,KAAK,GAAG;AACnE,aAAO,SACJ,CAAC,SAAS,OAAO,CAAC,GAAG,EAAE,GAAG,SAAS,OAAO,CAAC,GAAG,EAAE,GAAG,SAAS,OAAO,CAAC,GAAG,EAAE,CAAC,IAC1E,CAAC,GAAG,GAAG,CAAC;AAAA,IACZ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcColorPicker-F-UP8OaJ.cjs

@@ -0,0 +1,156 @@
+require('../assets/NcColorPicker-CCqpXoam.css');
+"use strict";
+const Vue = require("vue");
+const mdi = require("./mdi-Nhb6SBw8.cjs");
+const core = require("@vueuse/core");
+const vueColor = require("vue-color");
+const NcButton = require("./NcButton-DK7bNZIL.cjs");
+const NcIconSvgWrapper = require("./NcIconSvgWrapper-DoVPfeNg.cjs");
+const NcPopover = require("./NcPopover-DrXnNOgM.cjs");
+const useModelMigration = require("./useModelMigration-HPf30klj.cjs");
+const _l10n = require("./_l10n-9b4TMo5Q.cjs");
+const colors = require("./colors-DcbJ13is.cjs");
+const createElementId = require("./createElementId-DaJhnLzq.cjs");
+const logger = require("./logger-3HuiEIF6.cjs");
+const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
+_l10n.register();
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const __default__ = {
+  model: {
+    event: "update:modelValue",
+    prop: "modelValue"
+  }
+};
+const _sfc_main = /* @__PURE__ */ Vue.defineComponent(__spreadProps(__spreadValues({}, __default__), {
+  __name: "NcColorPicker",
+  props: {
+    advancedFields: { type: Boolean },
+    clearable: { type: Boolean },
+    container: { default: "body" },
+    modelValue: { default: "" },
+    value: { default: void 0 },
+    open: { type: Boolean },
+    palette: { default: () => [] },
+    paletteOnly: { type: Boolean }
+  },
+  emits: ["submit", "close", "update:modelValue", "update:value"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const currentColor = useModelMigration.useModelMigration("value", "update:value", true);
+    const modelOpen = core.useVModel(props, "open", emit, { passive: true, eventName: "update:open" });
+    const HEX_REGEX = /^#([a-f0-9]{3}|[a-f0-9]{6})$/i;
+    const id = createElementId.createElementId();
+    const advanced = Vue.ref(false);
+    const normalizedPalette = Vue.computed(() => {
+      var _a;
+      let palette = props.palette;
+      for (const color of palette) {
+        if (typeof color === "string" && !color.match(HEX_REGEX) || typeof color === "object" && !((_a = color.color) == null ? void 0 : _a.match(HEX_REGEX))) {
+          logger.logger.error("[NcColorPicker] Invalid palette passed", { color });
+          palette = [];
+          break;
+        }
+      }
+      if (palette.length === 0) {
+        palette = props.clearable ? [...colors.defaultPalette, colors.COLOR_BLACK, colors.COLOR_WHITE] : [...colors.defaultPalette];
+      }
+      return 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: typeof item === "string" ? item : item.color })
+      }));
+    });
+    function handleConfirm(hideCallback) {
+      emit("submit", currentColor.value);
+      hideCallback();
+      advanced.value = false;
+    }
+    function toggleColor(color) {
+      color = typeof color === "string" ? color : color.color;
+      if (props.clearable && currentColor.value === color) {
+        currentColor.value = void 0;
+      } else {
+        currentColor.value = color;
+      }
+    }
+    function pickCustomColor(color) {
+      currentColor.value = color.hex;
+    }
+    function getContrastColor(color) {
+      return calculateLuma(color) > 0.5 ? colors.COLOR_BLACK.color : colors.COLOR_WHITE.color;
+    }
+    function calculateLuma(color) {
+      const [red, green, blue] = hexToRGB(color);
+      return (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255;
+    }
+    function 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];
+    }
+    return { __sfc: true, props, emit, currentColor, modelOpen, HEX_REGEX, id, advanced, normalizedPalette, handleConfirm, toggleColor, pickCustomColor, getContrastColor, calculateLuma, hexToRGB, mdiArrowLeft: mdi.mdiArrowLeft, mdiCheck: mdi.mdiCheck, mdiCloseCircleOutline: mdi.mdiCloseCircleOutline, mdiDotsHorizontal: mdi.mdiDotsHorizontal, Chrome: vueColor.Chrome, NcButton: NcButton.NcButton, NcIconSvgWrapper: NcIconSvgWrapper.NcIconSvgWrapper, NcPopover: NcPopover.NcPopover, t: _l10n.t };
+  }
+}));
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy;
+  return _c(_setup.NcPopover, _vm._g(_vm._b({ attrs: { "shown": _setup.modelOpen, "container": _vm.container, "popup-role": "dialog" }, on: { "update:shown": function($event) {
+    _setup.modelOpen = $event;
+  }, "apply-hide": function($event) {
+    return _setup.emit("close");
+  } }, scopedSlots: _vm._u([{ key: "trigger", fn: function(slotProps) {
+    return [_vm._t("default", null, null, slotProps)];
+  } }, { key: "default", fn: function(slotProps) {
+    var _a;
+    return [_c("div", { staticClass: "color-picker", class: {
+      "color-picker--advanced-fields": _setup.advanced && _vm.advancedFields,
+      "color-picker--clearable": _vm.clearable
+    }, attrs: { "role": "dialog", "aria-modal": "true", "aria-label": _setup.t("Color picker") } }, [_c("Transition", { attrs: { "name": "slide", "mode": "out-in" } }, [!_setup.advanced ? _c("div", { staticClass: "color-picker__simple" }, [_vm._l(_setup.normalizedPalette, function({ color, name }, index) {
+      return _c("label", { key: index, staticClass: "color-picker__simple-color-circle", class: { "color-picker__simple-color-circle--active": color === _setup.currentColor }, style: {
+        backgroundColor: color,
+        color: _setup.getContrastColor(color)
+      } }, [_c("span", { staticClass: "hidden-visually" }, [_vm._v(" " + _vm._s(color) + " -- " + _vm._s(_setup.currentColor) + " ")]), color === _setup.currentColor ? _c(_setup.NcIconSvgWrapper, { attrs: { "path": _setup.mdiCheck } }) : _vm._e(), _c("input", { staticClass: "hidden-visually", attrs: { "type": "radio", "aria-label": name, "name": "color-picker-".concat(_setup.id) }, domProps: { "checked": color === _setup.currentColor }, on: { "click": function($event) {
+        return _setup.toggleColor(color);
+      } } })], 1);
+    }), _vm.clearable ? _c("label", { staticClass: "color-picker__clear", attrs: { "title": _setup.t("No color") } }, [_c(_setup.NcIconSvgWrapper, { attrs: { "size": _setup.currentColor ? 28 : 34, "path": _setup.mdiCloseCircleOutline } }), _c("input", { staticClass: "hidden-visually", attrs: { "type": "radio", "aria-label": _setup.t("No color"), "name": "color-picker-".concat(_setup.id) }, domProps: { "checked": !_setup.currentColor }, on: { "click": function($event) {
+      _setup.currentColor = void 0;
+    } } })], 1) : _vm._e()], 2) : _c(_setup.Chrome, { staticClass: "color-picker__advanced", attrs: { "disable-alpha": true, "disable-fields": !_vm.advancedFields, "value": (_a = _setup.currentColor) != null ? _a : "#000000" }, on: { "input": _setup.pickCustomColor } })], 1), !_vm.paletteOnly ? _c("div", { staticClass: "color-picker__navigation" }, [_setup.advanced ? _c(_setup.NcButton, { attrs: { "aria-label": _setup.t("Back"), "title": _setup.t("Back"), "variant": "tertiary" }, on: { "click": function($event) {
+      _setup.advanced = false;
+    } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+      return [_c(_setup.NcIconSvgWrapper, { attrs: { "directional": "", "path": _setup.mdiArrowLeft } })];
+    }, proxy: true }], null, true) }) : _c(_setup.NcButton, { attrs: { "aria-label": _setup.t("More options"), "title": _setup.t("More options"), "variant": "tertiary" }, on: { "click": function($event) {
+      _setup.advanced = true;
+    } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+      return [_c(_setup.NcIconSvgWrapper, { attrs: { "path": _setup.mdiDotsHorizontal } })];
+    }, proxy: true }], null, true) }), _c(_setup.NcButton, { attrs: { "variant": "primary" }, on: { "click": function($event) {
+      return _setup.handleConfirm(slotProps.hide);
+    } } }, [_vm._v(" " + _vm._s(_setup.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,
+  "01d41e75"
+);
+const NcColorPicker = __component__.exports;
+exports.NcColorPicker = NcColorPicker;
+//# sourceMappingURL=NcColorPicker-F-UP8OaJ.cjs.map

package/dist/chunks/NcColorPicker-F-UP8OaJ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcColorPicker-F-UP8OaJ.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<script setup lang=\"ts\">\nimport type { Color } from '../../utils/colors.ts'\n\nimport { mdiArrowLeft, mdiCheck, mdiCloseCircleOutline, mdiDotsHorizontal } from '@mdi/js'\nimport { useVModel } from '@vueuse/core'\nimport { computed, ref } from 'vue'\nimport { Chrome } from 'vue-color'\nimport NcButton from '../NcButton/NcButton.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport NcPopover from '../NcPopover/NcPopover.vue'\nimport { useModelMigration } from '../../composables/useModelMigration.ts'\nimport { t } from '../../l10n.js'\nimport { COLOR_BLACK, COLOR_WHITE, defaultPalette } from '../../utils/colors.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { logger } from '../../utils/logger.ts'\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * Set to `true` to enable advanced fields including HEX, RGB, and HSL\n\t */\n\tadvancedFields?: boolean\n\n\t/**\n\t * Allow to clear the current color.\n\t * When set the `update:modelValue` and `submit` event might emit also `undefined`.\n\t */\n\tclearable?: boolean\n\n\t/**\n\t * Selector for the popover container\n\t */\n\tcontainer?: string | Element\n\n\t/**\n\t * The model value (selected color).\n\t */\n\tmodelValue?: string // eslint-disable-line vue/no-unused-properties -- used by useModelMigration\n\n\t/**\n\t * @deprecated use `modelValue`\n\t */\n\tvalue?: string // eslint-disable-line vue/no-unused-properties -- used by useModelMigration\n\n\t/**\n\t * Current open state of the color picker\n\t */\n\topen?: boolean // eslint-disable-line vue/no-unused-properties -- used by useVModel\n\n\t/**\n\t * Provide a custom array of colors to show.\n\t * Can be either an array of string hexadecimal colors,\n\t * or an array of object with a `color` property with hexadecimal color string,\n\t * and a `name` property for accessibility.\n\t */\n\tpalette?: string[] | Color[]\n\n\t/**\n\t * Limit selectable colors to only the provided palette\n\t */\n\tpaletteOnly?: boolean\n}>(), {\n\tcontainer: 'body',\n\tpalette: () => [],\n\tmodelValue: '',\n\tvalue: undefined,\n})\n\nconst emit = defineEmits<{\n\t/**\n\t * Emitted when the submit button was pressed.\n\t * The payload is the same as the current modelValue.\n\t *\n\t * The value might be undefined if the `clearable` prop is set.\n\t */\n\t(e: 'submit', v: string | undefined): void\n\n\t/**\n\t * The color picker was fully closed.\n\t */\n\t(e: 'close'): void\n\n\t/**\n\t * The updated color\n\t */\n\t(e: 'update:modelValue', v: string | undefined): void\n\n\t/**\n\t * @deprecated use `update:modelValue`\n\t */\n\t(e: 'update:value', v: string | undefined): void\n}>()\n\nconst currentColor = useModelMigration<string | undefined>('value', 'update:value', true)\n// watchEffect(() => console.error('current: ', currentColor.value))\n\nconst modelOpen = useVModel(props, 'open', emit, { passive: true, eventName: 'update:open' })\n\nconst HEX_REGEX = /^#([a-f0-9]{3}|[a-f0-9]{6})$/i\n\n/**\n * Unique id used to identify different color pickers\n */\nconst id = createElementId()\n\n/**\n * Is the advanced picker is open\n */\nconst advanced = ref(false)\n\n/**\n * Normalized palette by converting array of hex colors to color objects.\n * This also ensures there is a default palette if needed (no palette passed).\n */\nconst normalizedPalette = computed(() => {\n\tlet palette = props.palette as (string | Color)[]\n\tfor (const color of palette) {\n\t\tif ((typeof color === 'string' && !color.match(HEX_REGEX))\n\t\t\t|| (typeof color === 'object' && !color.color?.match(HEX_REGEX))) {\n\t\t\tlogger.error('[NcColorPicker] Invalid palette passed', { color })\n\t\t\tpalette = []\n\t\t\tbreak\n\t\t}\n\t}\n\n\tif (palette.length === 0) {\n\t\tpalette = props.clearable\n\t\t\t? [...defaultPalette, COLOR_BLACK, COLOR_WHITE]\n\t\t\t: [...defaultPalette]\n\t}\n\n\treturn palette.map((item: Color | string) => ({\n\t\tcolor: typeof item === 'object' ? item.color : item,\n\t\tname: typeof item === 'object' && item.name\n\t\t\t? item.name\n\t\t\t: t('A color with a HEX value {hex}', { hex: typeof item === 'string' ? item : item.color }),\n\t}))\n})\n\n/**\n * Submit a picked colour and close picker\n *\n * @param hideCallback - callback to close popover\n */\nfunction handleConfirm(hideCallback: () => void) {\n\temit('submit', currentColor.value)\n\thideCallback()\n\tadvanced.value = false\n}\n\n/**\n * Toggle the currently selected palette color.\n *\n * @param color - The color to toggle\n */\nfunction toggleColor(color: string | Color) {\n\tcolor = typeof color === 'string' ? color : color.color\n\n\tif (props.clearable && currentColor.value === color) {\n\t\tcurrentColor.value = undefined\n\t} else {\n\t\tcurrentColor.value = color\n\t}\n}\n\n/**\n * @param color - The picked color from the Chrome component\n * @param color.hex - The hex string of the color\n */\nfunction pickCustomColor(color: { hex: string }): void {\n\tcurrentColor.value = color.hex\n}\n\n/**\n * Get the text color with the most constrast for a given background color.\n *\n * @param color - The background color\n */\nfunction getContrastColor(color: string): string {\n\treturn calculateLuma(color) > 0.5\n\t\t? COLOR_BLACK.color\n\t\t: COLOR_WHITE.color\n}\n\n/**\n * Calculate luminance of provided hex color\n *\n * @param color - The hex color\n */\nfunction calculateLuma(color: string) {\n\tconst [red, green, blue] = hexToRGB(color)\n\treturn (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255\n}\n\n/**\n * Convert hex color to RGB\n *\n * @param hex - The hex color\n */\nfunction hexToRGB(hex: string) {\n\tconst result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex)\n\treturn result\n\t\t? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)]\n\t\t: [0, 0, 0]\n}\n</script>\n\n<script lang=\"ts\">\nexport default {\n\tmodel: {\n\t\tevent: 'update:modelValue',\n\t\tprop: 'modelValue',\n\t},\n}\n</script>\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=\"emit('close')\">\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=\"{\n\t\t\t\t\t'color-picker--advanced-fields': advanced && advancedFields,\n\t\t\t\t\t'color-picker--clearable': clearable,\n\t\t\t\t}\">\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: getContrastColor(color),\n\t\t\t\t\t\t\t}\">\n\t\t\t\t\t\t\t<span class=\"hidden-visually\">\n\t\t\t\t\t\t\t\t{{ color }} -- {{ currentColor }}\n\t\t\t\t\t\t\t</span>\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-${id}`\"\n\t\t\t\t\t\t\t\t:checked=\"color === currentColor\"\n\t\t\t\t\t\t\t\t@click=\"toggleColor(color)\">\n\t\t\t\t\t\t</label>\n\t\t\t\t\t\t<label v-if=\"clearable\" class=\"color-picker__clear\" :title=\"t('No color')\">\n\t\t\t\t\t\t\t<NcIconSvgWrapper\n\t\t\t\t\t\t\t\t:size=\"currentColor ? 28 : 34 /* size is adusted so that inner mdi icon aligns with color circles */\"\n\t\t\t\t\t\t\t\t:path=\"mdiCloseCircleOutline\" />\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=\"t('No color')\"\n\t\t\t\t\t\t\t\t:name=\"`color-picker-${id}`\"\n\t\t\t\t\t\t\t\t:checked=\"!currentColor\"\n\t\t\t\t\t\t\t\t@click=\"currentColor = undefined\">\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\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:value=\"currentColor ?? '#000000'\"\n\t\t\t\t\t\t@input=\"pickCustomColor\" />\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=\"t('Back')\"\n\t\t\t\t\t\t:title=\"t('Back')\"\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t@click=\"advanced = false\">\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=\"t('More options')\"\n\t\t\t\t\t\t:title=\"t('More options')\"\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t@click=\"advanced = true\">\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<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\tpadding: var(--border-radius-element); // align with NcPopover border radius\n\tmin-width: calc(4 * var(--default-clickable-area) + 2 * var(--border-radius-element)); // space for 4 color circles\n\n\t&--clearable {\n\t\tmin-width: calc(5 * var(--default-clickable-area) + 2 * var(--border-radius-element));\n\t}\n\n\t&--advanced-fields {\n\t\tmin-width: 264px;\n\t}\n\n\t&__clear {\n\t\tcolor: var(--color-main-text);\n\n\t\t&:hover:not(:has(:checked)) {\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\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\tgap: var(--default-grid-baseline);\n\t\tjustify-content: space-between;\n\t\tmargin-top: calc(2 * var(--default-grid-baseline));\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-inline-start: 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</style>\n\n<docs>\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],\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* Allowing to clear the selected color\n\n```vue\n<template>\n\t<div class=\"container1\">\n\t\t<NcColorPicker clearable v-model=\"color\">\n\t\t\t<NcButton>Click Me</NcButton>\n\t\t</NcColorPicker>\n\t\t<div :style=\"{'background-color': color}\" class=\"color-preview\" :class=\"{'color-preview--none': !color}\" />\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 scoped>\n.container1 {\n\tdisplay: flex;\n\tgap: 20px;\n}\n\n.color-preview {\n\twidth: 100px;\n\theight: 34px;\n\tborder: 1px solid black;\n\tborder-radius: 6px;\n}\n\n.color-preview--none {\n\tbackground: repeating-conic-gradient(#808080 0 25%, #0000 0 50%) 50% / 20px 20px;\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"],"names":["useModelMigration","useVModel","createElementId","ref","computed","logger","defaultPalette","COLOR_BLACK","COLOR_WHITE","t"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoNA,MAAA,cAAe;AAAA,EACd,OAAO;AAAA,IACN,OAAO;AAAA,IACP,MAAM;AAAA,EAAA;AAER;;;;;;;;;;;;;;;;AAxHA,UAAM,eAAeA,kBAAAA,kBAAsC,SAAS,gBAAgB,IAAI;AAGxF,UAAM,YAAYC,KAAAA,UAAU,OAAO,QAAQ,MAAM,EAAE,SAAS,MAAM,WAAW,eAAe;AAE5F,UAAM,YAAY;AAKlB,UAAM,KAAKC,gBAAAA,gBAAA;AAKX,UAAM,WAAWC,IAAAA,IAAI,KAAK;AAM1B,UAAM,oBAAoBC,IAAAA,SAAS,MAAM;;AACxC,UAAI,UAAU,MAAM;AACpB,iBAAW,SAAS,SAAS;AAC5B,YAAK,OAAO,UAAU,YAAY,CAAC,MAAM,MAAM,SAAS,KACnD,OAAO,UAAU,YAAY,GAAC,KAAA,MAAM,UAAN,OAAA,SAAA,GAAa,MAAM,SAAA,IAAa;AAClEC,iBAAAA,OAAO,MAAM,0CAA0C,EAAE,MAAA,CAAO;AAChE,oBAAU,CAAA;AACV;AAAA,QACD;AAAA,MACD;AAEA,UAAI,QAAQ,WAAW,GAAG;AACzB,kBAAU,MAAM,YACb,CAAC,GAAGC,OAAAA,gBAAgBC,OAAAA,aAAaC,OAAAA,WAAW,IAC5C,CAAC,GAAGF,qBAAc;AAAA,MACtB;AAEA,aAAO,QAAQ,IAAI,CAAC,UAA0B;AAAA,QAC7C,OAAO,OAAO,SAAS,WAAW,KAAK,QAAQ;AAAA,QAC/C,MAAM,OAAO,SAAS,YAAY,KAAK,OACpC,KAAK,OACLG,MAAAA,EAAE,kCAAkC,EAAE,KAAK,OAAO,SAAS,WAAW,OAAO,KAAK,OAAO;AAAA,MAAA,EAC3F;AAAA,IACH,CAAC;AAOD,aAAS,cAAc,cAA0B;AAChD,WAAK,UAAU,aAAa,KAAK;AACjC,mBAAA;AACA,eAAS,QAAQ;AAAA,IAClB;AAOA,aAAS,YAAY,OAAuB;AAC3C,cAAQ,OAAO,UAAU,WAAW,QAAQ,MAAM;AAElD,UAAI,MAAM,aAAa,aAAa,UAAU,OAAO;AACpD,qBAAa,QAAQ;AAAA,MACtB,OAAO;AACN,qBAAa,QAAQ;AAAA,MACtB;AAAA,IACD;AAMA,aAAS,gBAAgB,OAA8B;AACtD,mBAAa,QAAQ,MAAM;AAAA,IAC5B;AAOA,aAAS,iBAAiB,OAAuB;AAChD,aAAO,cAAc,KAAK,IAAI,MAC3BF,OAAAA,YAAY,QACZC,OAAAA,YAAY;AAAA,IAChB;AAOA,aAAS,cAAc,OAAe;AACrC,YAAM,CAAC,KAAK,OAAO,IAAI,IAAI,SAAS,KAAK;AACzC,cAAQ,SAAS,MAAM,SAAS,QAAQ,SAAS,QAAQ;AAAA,IAC1D;AAOA,aAAS,SAAS,KAAa;AAC9B,YAAM,SAAS,4CAA4C,KAAK,GAAG;AACnE,aAAO,SACJ,CAAC,SAAS,OAAO,CAAC,GAAG,EAAE,GAAG,SAAS,OAAO,CAAC,GAAG,EAAE,GAAG,SAAS,OAAO,CAAC,GAAG,EAAE,CAAC,IAC1E,CAAC,GAAG,GAAG,CAAC;AAAA,IACZ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcContent-C0_AA_wt.mjs

@@ -0,0 +1,108 @@
+import '../assets/NcContent-IIXgAj_u.css';
+import { Portal } from "@linusborg/vue-simple-portal";
+import { emit } from "@nextcloud/event-bus";
+import { N as NcButton } from "./NcButton-D3CaJu1f.mjs";
+import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-BCVwmZN2.mjs";
+import { useIsMobile } from "../Composables/useIsMobile.mjs";
+import { r as register, F as t29, a as t } from "./_l10n-DSLCwJSN.mjs";
+import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
+register(t29);
+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: {
+    /**
+     * The application name to use.
+     * This is used to scope all content (content, sidebar, navigation) to the application.
+     */
+    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", { staticClass: "content", class: "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: { "href": "#app-navigation-vue", "variant": "tertiary" }, 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: { "href": "#app-content-vue", "variant": "tertiary" }, 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,
+  "1f87d811"
+);
+const NcContent = __component__.exports;
+export {
+  NcContent as N
+};
+//# sourceMappingURL=NcContent-C0_AA_wt.mjs.map

package/dist/chunks/NcContent-C0_AA_wt.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcContent-C0_AA_wt.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  - 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\"","export default \"<!--\\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\"","<!--\n  - SPDX-FileCopyrightText: 2018 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 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\" :class=\"`app-${appName.toLowerCase()}`\">\n\t\t<!-- TODO: with vue3 the `selector` attribute needs to be changed to `to=\"#skip-actions\"` -->\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\n\t\t\t\t\t\tv-show=\"hasAppNavigation\"\n\t\t\t\t\t\thref=\"#app-navigation-vue\"\n\t\t\t\t\t\tvariant=\"tertiary\"\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\n\t\t\t\t\t\thref=\"#app-content-vue\"\n\t\t\t\t\t\tvariant=\"tertiary\"\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\n\t\t\t\t\tv-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&nbsp;<!-- TODO: Remove with vue3! This is a bug of vue-simple-portal that does not allow a single child, ref LinusBorg/vue-simple-portal#20 -->\n\t\t</Teleport>\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\n// TODO: This is built-in for vue3 just drop the import\nimport { Portal as Teleport } from '@linusborg/vue-simple-portal'\nimport { emit } from '@nextcloud/event-bus'\nimport NcButton from '../NcButton/NcButton.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { useIsMobile } from '../../composables/useIsMobile/index.ts'\nimport { t } from '../../l10n.js'\nimport contentSvg from './content-selected.svg?raw'\nimport navigationSvg from './navigation-selected.svg?raw'\n\nexport default {\n\tname: 'NcContent',\n\tcomponents: {\n\t\tNcButton,\n\t\tNcIconSvgWrapper,\n\t\tTeleport,\n\t},\n\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\n\tprops: {\n\t\t/**\n\t\t * The application name to use.\n\t\t * This is used to scope all content (content, sidebar, navigation) to the application.\n\t\t */\n\t\tappName: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t},\n\n\tsetup() {\n\t\tconst isMobile = useIsMobile()\n\t\treturn {\n\t\t\tisMobile,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\thasAppNavigation: false,\n\t\t\tcurrentFocus: '', // unknown\n\t\t}\n\t},\n\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\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\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\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\n\t\t// Flip the image in RTL mode\n\t\t&:dir(rtl) {\n\t\t\ttransform: rotateY(180deg);\n\t\t}\n\t}\n}\n\n.content {\n\tbox-sizing: border-box;\n\tmargin: var(--body-container-margin);\n\tmargin-top: var(--header-height);\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,MAAA,aAAe;ACAf,MAAA,gBAAe;ACwGf,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAAA;AAAAA,EACA;AAAA,EAEA,UAAA;AACA,WAAA;AAAA,MACA,iCAAA,KAAA;AAAA,MACA,sBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA;AACA,UAAA,WAAA,YAAA;AACA,WAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,kBAAA;AAAA,MACA,cAAA;AAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,eAAA;AACA,UAAA,KAAA,iBAAA,cAAA;AACA,eAAA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,cAAA;AACA,UAAA,YAAA,SAAA,eAAA,cAAA;AACA,QAAA,WAAA;AAEA,gBAAA,YAAA;AAEA,gBAAA,UAAA,IAAA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,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,IAEA,iBAAA,OAAA;AACA,WAAA,mBAAA;AAEA,UAAA,KAAA,iBAAA,IAAA;AACA,aAAA,eAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcContent-DITvuNbF.cjs

@@ -0,0 +1,107 @@
+require('../assets/NcContent-IIXgAj_u.css');
+"use strict";
+const vueSimplePortal = require("@linusborg/vue-simple-portal");
+const eventBus = require("@nextcloud/event-bus");
+const NcButton = require("./NcButton-DK7bNZIL.cjs");
+const NcIconSvgWrapper = require("./NcIconSvgWrapper-DoVPfeNg.cjs");
+const Composables_useIsMobile = require("../Composables/useIsMobile.cjs");
+const _l10n = require("./_l10n-9b4TMo5Q.cjs");
+const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
+_l10n.register(_l10n.t29);
+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: NcButton.NcButton,
+    NcIconSvgWrapper: NcIconSvgWrapper.NcIconSvgWrapper,
+    Teleport: vueSimplePortal.Portal
+  },
+  provide() {
+    return {
+      "NcContent:setHasAppNavigation": this.setAppNavigation,
+      "NcContent:selector": "#content-vue"
+    };
+  },
+  props: {
+    /**
+     * The application name to use.
+     * This is used to scope all content (content, sidebar, navigation) to the application.
+     */
+    appName: {
+      type: String,
+      required: true
+    }
+  },
+  setup() {
+    const isMobile = Composables_useIsMobile.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: _l10n.t,
+    openAppNavigation() {
+      eventBus.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", { staticClass: "content", class: "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: { "href": "#app-navigation-vue", "variant": "tertiary" }, 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: { "href": "#app-content-vue", "variant": "tertiary" }, 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__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  "1f87d811"
+);
+const NcContent = __component__.exports;
+exports.NcContent = NcContent;
+//# sourceMappingURL=NcContent-DITvuNbF.cjs.map

package/dist/chunks/NcContent-DITvuNbF.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcContent-DITvuNbF.cjs","sources":["../../src/components/NcContent/content-selected.svg?raw","../../src/components/NcContent/navigation-selected.svg?raw","../../src/components/NcContent/NcContent.vue"],"sourcesContent":["export default \"<!--\\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\"","export default \"<!--\\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\"","<!--\n  - SPDX-FileCopyrightText: 2018 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 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\" :class=\"`app-${appName.toLowerCase()}`\">\n\t\t<!-- TODO: with vue3 the `selector` attribute needs to be changed to `to=\"#skip-actions\"` -->\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\n\t\t\t\t\t\tv-show=\"hasAppNavigation\"\n\t\t\t\t\t\thref=\"#app-navigation-vue\"\n\t\t\t\t\t\tvariant=\"tertiary\"\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\n\t\t\t\t\t\thref=\"#app-content-vue\"\n\t\t\t\t\t\tvariant=\"tertiary\"\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\n\t\t\t\t\tv-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&nbsp;<!-- TODO: Remove with vue3! This is a bug of vue-simple-portal that does not allow a single child, ref LinusBorg/vue-simple-portal#20 -->\n\t\t</Teleport>\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\n// TODO: This is built-in for vue3 just drop the import\nimport { Portal as Teleport } from '@linusborg/vue-simple-portal'\nimport { emit } from '@nextcloud/event-bus'\nimport NcButton from '../NcButton/NcButton.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { useIsMobile } from '../../composables/useIsMobile/index.ts'\nimport { t } from '../../l10n.js'\nimport contentSvg from './content-selected.svg?raw'\nimport navigationSvg from './navigation-selected.svg?raw'\n\nexport default {\n\tname: 'NcContent',\n\tcomponents: {\n\t\tNcButton,\n\t\tNcIconSvgWrapper,\n\t\tTeleport,\n\t},\n\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\n\tprops: {\n\t\t/**\n\t\t * The application name to use.\n\t\t * This is used to scope all content (content, sidebar, navigation) to the application.\n\t\t */\n\t\tappName: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t},\n\n\tsetup() {\n\t\tconst isMobile = useIsMobile()\n\t\treturn {\n\t\t\tisMobile,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\thasAppNavigation: false,\n\t\t\tcurrentFocus: '', // unknown\n\t\t}\n\t},\n\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\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\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\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\n\t\t// Flip the image in RTL mode\n\t\t&:dir(rtl) {\n\t\t\ttransform: rotateY(180deg);\n\t\t}\n\t}\n}\n\n.content {\n\tbox-sizing: border-box;\n\tmargin: var(--body-container-margin);\n\tmargin-top: var(--header-height);\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":["NcButton","NcIconSvgWrapper","Teleport","useIsMobile","t","emit"],"mappings":";;;;;;;;;AAAA,MAAA,aAAe;ACAf,MAAA,gBAAe;ACwGf,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,UAAAA,SAAAA;AAAAA,IACA,kBAAAC,iBAAAA;AAAAA,IACA,UAAAC,gBAAAA;AAAAA,EACA;AAAA,EAEA,UAAA;AACA,WAAA;AAAA,MACA,iCAAA,KAAA;AAAA,MACA,sBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA;AACA,UAAA,WAAAC,wBAAAA,YAAA;AACA,WAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,kBAAA;AAAA,MACA,cAAA;AAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,eAAA;AACA,UAAA,KAAA,iBAAA,cAAA;AACA,eAAA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,cAAA;AACA,UAAA,YAAA,SAAA,eAAA,cAAA;AACA,QAAA,WAAA;AAEA,gBAAA,YAAA;AAEA,gBAAA,UAAA,IAAA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,GAAAC,MAAAA;AAAAA,IACA,oBAAA;AACAC,eAAAA,KAAA,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,IAEA,iBAAA,OAAA;AACA,WAAA,mBAAA;AAEA,UAAA,KAAA,iBAAA,IAAA;AACA,aAAA,eAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}