@nextcloud/vue/dist/chunks/NcAssistantIcon-BMDc4udc.mjs.map

Nextcloud vue components

{"version":3,"file":"NcAssistantIcon-BMDc4udc.mjs","sources":["../../src/components/NcAssistantIcon/NcAssistantIcon.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n```vue\n<template>\n\t<NcThemeProvider class=\"wrapper\" :dark=\"userTheme === 'dark'\">\n\t\t\t<fieldset class=\"controls\">\n\t\t\t\t<legend>\n\t\t\t\t\tColor theme\n\t\t\t\t</legend>\n\t\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t\tv-model=\"providerTheme\"\n\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\tvalue=\"dark\">\n\t\t\t\t\tDark\n\t\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t\tv-model=\"providerTheme\"\n\t\t\t\t\tvalue=\"light\"\n\t\t\t\t\ttype=\"radio\">\n\t\t\t\t\tLight\n\t\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t</div>\n\t\t</fieldset>\n\t\t<NcThemeProvider\n\t\t\t:dark=\"providerTheme === 'dark'\"\n\t\t\t:light=\"providerTheme === 'light'\">\n\t\t\t<div class=\"theme-preview\">\n\t\t\t\t<NcAssistantIcon />\n\t\t\t</div>\n\t\t</NcThemeProvider>\n\t</NcThemeProvider>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tproviderTheme: 'light',\n\t\t}\n\t}\n}\n</script>\n<style scoped>\n.wrapper {\n\tbackground-color: var(--color-main-background);\n\tcolor: var(--color-main-text);\n}\n\n.controls {\n\tdisplay: flex;\n\tjustify-content: center;\n\tgap: 2lh;\n}\n\nlegend {\n\twidth: 100%;\n\ttext-align: center;\n}\n\n.theme-preview {\n\tbackground-color: var(--color-main-background);\n\tcolor: var(--color-main-text);\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin-top: 0.5lh;\n\tmin-height: 2lh;\n}\n</style>\n```\n\n### Usage as inline icon\n```vue\n<template>\n\t<p>\n\t\tLorem ipsum dolor sit amet <NcAssistantIcon inline /> consetetur sadipscing elitr.\n\t</p>\n</template>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport { mdiCreation } from '@mdi/js'\nimport { computed } from 'vue'\nimport { useIsDarkTheme } from '../../composables/useIsDarkTheme/index.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * Set if the icon should be used as inline content e.g. within text.\n\t * By default the icon is made a block element for use inside `icon`-slots.\n\t */\n\tinline?: boolean\n\n\t/**\n\t * Size of the icon.\n\t * Defaults to the proper size to be used in buttons and other interactive elements\n\t * like all `Nc*` components with an icon slot.\n\t */\n\tsize?: number\n}>(), {\n\tsize: 20,\n})\n\nconst isDarkTheme = useIsDarkTheme()\nconst gradientId = createElementId()\nconst sizePx = computed(() => `${props.size}px`)\n</script>\n\n<template>\n\t<span\n\t\taria-hidden=\"true\"\n\t\t:class=\"[$style.assistantIcon, inline && $style.assistantIcon_inline]\"\n\t\trole=\"img\">\n\t\t<svg :class=\"$style.assistantIcon__svg\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t<defs>\n\t\t\t\t<linearGradient v-if=\"isDarkTheme\" :id=\"gradientId\" gradientTransform=\"rotateX(285)\">\n\t\t\t\t\t<stop offset=\"15%\" stop-color=\"#CDACE7\" />\n\t\t\t\t\t<stop offset=\"40%\" stop-color=\"#008FDB\" />\n\t\t\t\t\t<stop offset=\"82%\" stop-color=\"#A180E0\" />\n\t\t\t\t</linearGradient>\n\t\t\t\t<linearGradient v-else :id=\"gradientId\" gradientTransform=\"rotateX(285)\">\n\t\t\t\t\t<stop offset=\"15%\" stop-color=\"#9669D3\" />\n\t\t\t\t\t<stop offset=\"40%\" stop-color=\"#00679E\" />\n\t\t\t\t\t<stop offset=\"80%\" stop-color=\"#492083\" />\n\t\t\t\t</linearGradient>\n\t\t\t</defs>\n\t\t\t<path :d=\"mdiCreation\" :fill=\"`url('#${gradientId}')`\" />\n\t\t</svg>\n\t</span>\n</template>\n\n<style module lang=\"scss\">\n.assistantIcon {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\n\t&:not(&_inline) {\n\t\tdisplay: flex;\n\t\tmin-height: var(--default-clickable-area);\n\t\tmin-width: var(--default-clickable-area);\n\t}\n\n\t&__svg {\n\t\tdisplay: inline-block;\n\t\twidth: v-bind('sizePx');\n\t\theight: v-bind('sizePx');\n\t\tmax-width: v-bind('sizePx');\n\t\tmax-height: v-bind('sizePx');\n\t}\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","$style","inline","_createElementVNode","_unref"],"mappings":";;;;;;;;;;;;;;;;;;AA0FA,UAAM,QAAQ;AAiBd,UAAM,cAAc,eAAA;AACpB,UAAM,aAAa,gBAAA;AACnB,UAAM,SAAS,SAAS,MAAM,GAAG,MAAM,IAAI,IAAI;;0BAI9CA,mBAmBO,QAAA;AAAA,QAlBN,eAAY;AAAA,QACX,OAAKC,eAAA,CAAGC,YAAO,eAAeC,KAAAA,UAAUD,KAAAA,OAAO,oBAAoB,CAAA;AAAA,QACpE,MAAK;AAAA,MAAA;sBACLF,mBAcM,OAAA;AAAA,UAdA,OAAKC,eAAEC,KAAAA,OAAO,kBAAkB;AAAA,UAAE,SAAQ;AAAA,UAAY,OAAM;AAAA,QAAA;UACjEE,mBAWO,QAAA,MAAA;AAAA,YAVgBC,MAAA,WAAA,kBAAtBL,mBAIiB,kBAAA;AAAA;cAJmB,IAAIK,MAAA,UAAA;AAAA,cAAY,mBAAkB;AAAA,YAAA;cACrED,mBAA0C,QAAA;AAAA,gBAApC,QAAO;AAAA,gBAAM,cAAW;AAAA,cAAA;cAC9BA,mBAA0C,QAAA;AAAA,gBAApC,QAAO;AAAA,gBAAM,cAAW;AAAA,cAAA;cAC9BA,mBAA0C,QAAA;AAAA,gBAApC,QAAO;AAAA,gBAAM,cAAW;AAAA,cAAA;iDAE/BJ,mBAIiB,kBAAA;AAAA;cAJO,IAAIK,MAAA,UAAA;AAAA,cAAY,mBAAkB;AAAA,YAAA;cACzDD,mBAA0C,QAAA;AAAA,gBAApC,QAAO;AAAA,gBAAM,cAAW;AAAA,cAAA;cAC9BA,mBAA0C,QAAA;AAAA,gBAApC,QAAO;AAAA,gBAAM,cAAW;AAAA,cAAA;cAC9BA,mBAA0C,QAAA;AAAA,gBAApC,QAAO;AAAA,gBAAM,cAAW;AAAA,cAAA;;;UAGhCA,mBAAyD,QAAA;AAAA,YAAlD,GAAGC,MAAA,WAAA;AAAA,YAAc,eAAeA,MAAA,UAAA,CAAU;AAAA,UAAA;;;;;;;;;;;;;;;;;;;"}