@nextcloud/vue 9.0.0-rc.6 → 9.0.0-rc.7

package/dist/chunks/NcDashboardWidget-Wkx_9xKh.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcDashboardWidget-Wkx_9xKh.mjs","sources":["../../node_modules/vue-material-design-icons/Check.vue","../../src/components/NcDashboardWidget/NcDashboardWidget.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon check-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"CheckIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n## Usage\n\n### Simplest example with custom item\n```vue\n<template>\n\t<NcDashboardWidget :items=\"items\">\n\t\t<template #default=\"{ item }\">\n\t\t\t{{ item.name }}\n\t\t</template>\n\t</NcDashboardWidget>\n</template>\n\n<script>\nconst myItems = [\n\t{\n\t\tname: 'first',\n\t\tcontent: 'blabla',\n\t},\n\t{\n\t\tname: 'second',\n\t\tcontent: 'fuzzfuzz',\n\t},\n]\nexport default {\n\tname: 'MyDashboardWidget',\n\tprops: [],\n\tdata() {\n\t\treturn {\n\t\t\titems: myItems\n\t\t}\n\t},\n}\n</script>\n```\n\n### Showing items and a half empty content message\n```vue\n<template>\n\t<NcDashboardWidget :items=\"items\"\n\t\t:show-items-and-empty-content=\"true\"\n\t\t:half-empty-content-message=\"'No unread items'\">\n\t\t<template #default=\"{ item }\">\n\t\t\t{{ item.name }}\n\t\t</template>\n\t</NcDashboardWidget>\n</template>\n\n<script>\nconst myItems = [\n\t{\n\t\tname: 'first',\n\t\tcontent: 'blabla',\n\t},\n\t{\n\t\tname: 'second',\n\t\tcontent: 'fuzzfuzz',\n\t},\n]\nexport default {\n\tname: 'MyDashboardWidget',\n\tprops: [],\n\tdata() {\n\t\treturn {\n\t\t\titems: myItems\n\t\t}\n\t},\n}\n</script>\n```\n\n### Complete example using NcDashboardWidgetItem\n\n```vue\n<template>\n\t<NcDashboardWidget :items=\"items\"\n\t\t:show-more-url=\"'https://nextcloud.com'\"\n\t\t:item-menu=\"itemMenu\"\n\t\t@hide=\"onHide\"\n\t\t@markDone=\"onMarkDone\">\n\n\t\t<template #empty-content>\n\t\t\tNothing to display\n\t\t</template>\n\t</NcDashboardWidget>\n</template>\n\n<script>\nconst myItems = [\n\t{\n\t\tid: '1',\n\t\ttargetUrl: 'https://target.org',\n\t\tavatarUrl: 'https://avatar.url/img.png',\n\t\tavatarUsername: 'Robert',\n\t\tavatarIsNoUser: true,\n\t\toverlayIconUrl: '/svg/core/actions/sound?color=000',\n\t\tmainText: 'First item text',\n\t\tsubText: 'First item subtext',\n\t},\n\t{\n\t\tid: '2',\n\t\ttargetUrl: 'https://other-target.org',\n\t\tavatarUrl: 'https://other-avatar.url/img.png',\n\t\toverlayIconUrl: '/svg/core/actions/add?color=000',\n\t\tmainText: 'Second item text',\n\t\tsubText: 'Second item subtext',\n\t},\n]\nconst myItemMenu = {\n\t// triggers an event named \"markDone\" when clicked\n\t'markDone': {\n\t\ttext: 'Mark as done',\n\t\ticon: 'icon-checkmark',\n\t},\n\t// triggers an event named \"hide\" when clicked\n\t'hide': {\n\t\ttext: 'Hide',\n\t\ticon: 'icon-toggle',\n\t},\n}\nexport default {\n\tname: 'MyDashboardWidget',\n\tprops: [],\n\tdata() {\n\t\treturn {\n\t\t\titems: myItems,\n\t\t\titemMenu: myItemMenu,\n\t\t\tloading: true,\n\t\t}\n\t},\n\tmethods: {\n\t\tonMoreClick() {\n\t\t\tconsole.log('more clicked')\n\t\t\tconst win = window.open('https://wherever.you.want', '_blank')\n\t\t\twin.focus()\n\t\t},\n\t\tonHide(item) {\n\t\t\tconsole.log('user wants to hide item ' + item.id)\n\t\t\t// do what you want\n\t\t},\n\t\tonMarkDone(item) {\n\t\t\tconsole.log('user wants to mark item ' + item.id + ' as done')\n\t\t\t// do what you want\n\t\t},\n\t},\n}\n</script>\n```\n\n</docs>\n\n<template>\n\t<div class=\"dashboard-widget\">\n\t\t<!-- This element is shown if we have items, but want to show a general message as well.\n\t\tCan be used e.g. to show \"No mentions\" on top of the item list. -->\n\t\t<NcEmptyContent v-if=\"showHalfEmptyContentArea\"\n\t\t\t:description=\"halfEmptyContentString\"\n\t\t\tclass=\"half-screen\">\n\t\t\t<template #icon>\n\t\t\t\t<!-- @slot The icon to show in the half empty content area. -->\n\t\t\t\t<slot name=\"halfEmptyContentIcon\">\n\t\t\t\t\t<Check />\n\t\t\t\t</slot>\n\t\t\t</template>\n\t\t</NcEmptyContent>\n\t\t<!-- The list of items to show. -->\n\t\t<ul>\n\t\t\t<li v-for=\"item in displayedItems\" :key=\"item.id\">\n\t\t\t\t<!-- @slot The default slot can be optionally overridden. It contains the template of one item. -->\n\t\t\t\t<slot name=\"default\" :item=\"item\">\n\t\t\t\t\t<NcDashboardWidgetItem v-bind=\"item\"\n\t\t\t\t\t\t:item-menu=\"itemMenu\"\n\t\t\t\t\t\tv-on=\"handlers\" />\n\t\t\t\t</slot>\n\t\t\t</li>\n\t\t</ul>\n\t\t<!-- While the widget is loading, we show a list of placeholder items. -->\n\t\t<div v-if=\"loading\">\n\t\t\t<div v-for=\"i in 7\" :key=\"i\" class=\"item-list__entry\">\n\t\t\t\t<NcAvatar class=\"item-avatar\" :size=\"44\" />\n\t\t\t\t<div class=\"item__details\">\n\t\t\t\t\t<h3>&nbsp;</h3>\n\t\t\t\t\t<p class=\"message\">\n&nbsp;\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<!-- @slot Slot for showing information in case of an empty item list. -->\n\t\t<slot v-else-if=\"items.length === 0\" name=\"empty-content\">\n\t\t\t<NcEmptyContent v-if=\"emptyContentMessage\"\n\t\t\t\t:description=\"emptyContentMessage\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<!-- @slot The icon to show in the empty content area. -->\n\t\t\t\t\t<slot name=\"emptyContentIcon\" />\n\t\t\t\t</template>\n\t\t\t</NcEmptyContent>\n\t\t</slot>\n\t\t<!-- A \"show more\" link, e.g. to navigate to the main app belonging to this widget. -->\n\t\t<a v-else-if=\"showMore\"\n\t\t\t:href=\"showMoreUrl\"\n\t\t\ttarget=\"_blank\"\n\t\t\tclass=\"more\"\n\t\t\ttabindex=\"0\">\n\t\t\t{{ showMoreLabel }}\n\t\t</a>\n\t</div>\n</template>\n\n<script>\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcDashboardWidgetItem from '../NcDashboardWidgetItem/index.js'\nimport NcEmptyContent from '../NcEmptyContent/index.ts'\n\nimport Check from 'vue-material-design-icons/Check.vue'\n\nimport { t } from '../../l10n.ts'\n\nexport default {\n\tname: 'NcDashboardWidget',\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcDashboardWidgetItem,\n\t\tNcEmptyContent,\n\t\tCheck,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * An array containing the items to show (specific structure must be respected,\n\t\t * except if you override item rendering in the default slot).\n\t\t */\n\t\titems: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => { return [] },\n\t\t},\n\t\t/**\n\t\t * If this is set, a \"show more\" text is displayed on the widget's bottom.\n\t\t * It's a link pointing to this URL.\n\t\t */\n\t\tshowMoreUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The text of show more button.\n\t\t *\n\t\t * Expected to be in the form \"More {itemName} …\"\n\t\t */\n\t\tshowMoreLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: t('More items …'),\n\t\t},\n\t\t/**\n\t\t * A boolean to put the widget in a loading state.\n\t\t */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * An object containing context menu entries that will be displayed for each item.\n\t\t */\n\t\titemMenu: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => { return {} },\n\t\t},\n\t\t/**\n\t\t * Whether both the items and the empty content message are shown.\n\t\t * Usefull for e.g. showing \"No mentions\" and a list of elements.\n\t\t */\n\t\tshowItemsAndEmptyContent: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * The text to show in the empty content area.\n\t\t */\n\t\temptyContentMessage: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The text to show in the half empty content area.\n\t\t */\n\t\thalfEmptyContentMessage: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\t// forward menu events to my parent\n\t\thandlers() {\n\t\t\tconst h = {}\n\t\t\tfor (const evName in this.itemMenu) {\n\t\t\t\th[evName] = (it) => {\n\t\t\t\t\tthis.$emit(evName, it)\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn h\n\t\t},\n\t\tdisplayedItems() {\n\t\t\tconst nbItems = (this.showMoreUrl && this.items.length >= this.maxItemNumber)\n\t\t\t\t? this.maxItemNumber - 1\n\t\t\t\t: this.maxItemNumber\n\t\t\treturn this.items.slice(0, nbItems)\n\t\t},\n\n\t\tshowHalfEmptyContentArea() {\n\t\t\treturn this.showItemsAndEmptyContent && this.halfEmptyContentString && this.items.length !== 0\n\t\t},\n\n\t\thalfEmptyContentString() {\n\t\t\treturn this.halfEmptyContentMessage || this.emptyContentMessage\n\t\t},\n\n\t\tmaxItemNumber() {\n\t\t\treturn this.showItemsAndEmptyContent ? 5 : 7\n\t\t},\n\n\t\tshowMore() {\n\t\t\treturn this.showMoreUrl && this.items.length >= this.maxItemNumber\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.dashboard-widget :deep(.empty-content) {\n\ttext-align: center;\n\tpadding-top: 5vh;\n\t&.half-screen {\n\t\tpadding-top: 0;\n\t\tmargin-bottom: 1vh;\n\t}\n}\n\n.more {\n\tdisplay: block;\n\ttext-align: center;\n\tcolor: var(--color-text-maxcontrast);\n\tline-height: 60px;\n\tcursor: pointer;\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: var(--color-background-hover);\n\t\tborder-radius: var(--border-radius-element);\n\t\tcolor: var(--color-main-text);\n\t}\n}\n\n/* skeleton */\n.item-list__entry {\n\tdisplay: flex;\n\talign-items: flex-start;\n\tpadding: 8px;\n\n\t.item-avatar {\n\t\tposition: relative;\n\t\tmargin-block: auto;\n\t\tbackground-color: var(--color-background-dark) !important;\n\t}\n\t.item__details {\n\t\tpadding-inline-start: 8px;\n\t\tmax-height: var(--default-clickable-area);\n\t\tflex-grow: 1;\n\t\toverflow: hidden;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\n\t\th3,\n\t\t.message {\n\t\t\twhite-space: nowrap;\n\t\t\tbackground-color: var(--color-background-dark);\n\t\t}\n\t\th3 {\n\t\t\tfont-size: 100%;\n\t\t\tmargin: 0;\n\t\t}\n\t\t.message {\n\t\t\twidth: 80%;\n\t\t\theight: 15px;\n\t\t\tmargin-top: 5px;\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main","_hoisted_3","_createElementBlock","_mergeProps","_createElementVNode","_openBlock","_createBlock","_renderSlot","_createVNode","_Fragment","_renderList","_toHandlers"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/chunks/NcDashboardWidgetItem-CMrxp0Lc.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcDashboardWidgetItem-CMrxp0Lc.mjs","sources":["../../src/components/NcDashboardWidgetItem/NcDashboardWidgetItem.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 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 is meant to be used inside a DashboardWidget component.\n\n</docs>\n\n<template>\n\t<div @mouseover=\"hovered = true\" @mouseleave=\"hovered = false\">\n\t\t<component :is=\"targetUrl ? 'a' : 'div'\"\n\t\t\t:href=\"targetUrl || undefined\"\n\t\t\t:target=\"targetUrl ? '_blank' : undefined\"\n\t\t\t:class=\"{ 'item-list__entry': true, 'item-list__entry--has-actions-menu': gotMenu }\"\n\t\t\t@click=\"onLinkClick\">\n\t\t\t<!-- @slot Slot for passing a user avatar. -->\n\t\t\t<slot name=\"avatar\" :avatar-url=\"avatarUrl\" :avatar-username=\"avatarUsername\">\n\t\t\t\t<NcAvatar class=\"item-avatar\"\n\t\t\t\t\t:size=\"44\"\n\t\t\t\t\t:url=\"avatarUrl\"\n\t\t\t\t\t:user=\"avatarUsername\"\n\t\t\t\t\t:is-no-user=\"avatarIsNoUser\"\n\t\t\t\t\t:hide-status=\"gotOverlayIcon\" />\n\t\t\t</slot>\n\t\t\t<img v-if=\"overlayIconUrl\"\n\t\t\t\tclass=\"item-icon\"\n\t\t\t\talt=\"\"\n\t\t\t\t:src=\"overlayIconUrl\">\n\t\t\t<div class=\"item__details\">\n\t\t\t\t<h3 :title=\"mainText\">\n\t\t\t\t\t{{ mainText }}\n\t\t\t\t</h3>\n\t\t\t\t<span v-if=\"subText !== ''\" class=\"message\" :title=\"subText\">\n\t\t\t\t\t{{ subText }}\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t\t<NcActions v-if=\"gotMenu\" :force-menu=\"forceMenu\">\n\t\t\t\t<!-- @slot This slot can be used to provide actions for each dashboard widget item. -->\n\t\t\t\t<slot name=\"actions\">\n\t\t\t\t\t<NcActionButton v-for=\"(m, menuItemId) in itemMenu\"\n\t\t\t\t\t\t:key=\"menuItemId\"\n\t\t\t\t\t\t:icon=\"m.icon\"\n\t\t\t\t\t\t:close-after-click=\"true\"\n\t\t\t\t\t\t@click.prevent.stop=\"$emit(menuItemId, item)\">\n\t\t\t\t\t\t{{ m.text }}\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</slot>\n\t\t\t</NcActions>\n\t\t</component>\n\t</div>\n</template>\n\n<script>\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcActions from '../NcActions/index.js'\nimport NcActionButton from '../NcActionButton/index.js'\n\nexport default {\n\tname: 'NcDashboardWidgetItem',\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcActions,\n\t\tNcActionButton,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The item id (optional)\n\t\t */\n\t\tid: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * The item element is a link to this URL (optional)\n\t\t */\n\t\ttargetUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Where to get the avatar image. (optional) Used if avatarUsername is not defined.\n\t\t */\n\t\tavatarUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Name to provide to the Avatar. (optional) Used if avatarUrl is not defined.\n\t\t */\n\t\tavatarUsername: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Is the avatarUsername not a user's name? (optional, false by default)\n\t\t */\n\t\tavatarIsNoUser: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Small icon to display on the bottom-right corner of the avatar (optional)\n\t\t */\n\t\toverlayIconUrl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Item main text (mandatory)\n\t\t */\n\t\tmainText: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * Item subline text (optional)\n\t\t */\n\t\tsubText: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * An object containing context menu entries that will be displayed for each items (optional)\n\t\t */\n\t\titemMenu: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => { return {} },\n\t\t},\n\n\t\t/**\n\t\t * Specify whether the 3 dot menu is forced when only one action is present\n\t\t */\n\t\tforceMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\thovered: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\titem() {\n\t\t\treturn {\n\t\t\t\tid: this.id,\n\t\t\t\ttargetUrl: this.targetUrl,\n\t\t\t\tavatarUrl: this.avatarUrl,\n\t\t\t\tavatarUsername: this.avatarUsername,\n\t\t\t\toverlayIconUrl: this.overlayIconUrl,\n\t\t\t\tmainText: this.mainText,\n\t\t\t\tsubText: this.subText,\n\t\t\t}\n\t\t},\n\t\tgotMenu() {\n\t\t\treturn Object.keys(this.itemMenu).length !== 0 || !!this.$slots.actions\n\t\t},\n\t\tgotOverlayIcon() {\n\t\t\treturn this.overlayIconUrl && this.overlayIconUrl !== ''\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonLinkClick(event) {\n\t\t\tif (event.target.closest('.action-item')) {\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.item-list__entry {\n\tdisplay: flex;\n\talign-items: center;\n\tposition: relative;\n\tpadding: 8px;\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: var(--color-background-hover);\n\t\tborder-radius: var(--border-radius-element);\n\t}\n\t.item-avatar {\n\t\tposition: relative;\n\t\tmargin-top: auto;\n\t\tmargin-bottom: auto;\n\t}\n\t.item__details {\n\t\tpadding-inline-start: 8px;\n\t\tmax-height: fit-content;\n\t\tflex-grow: 1;\n\t\toverflow: hidden;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\tmin-height: var(--default-clickable-area);\n\n\t\th3,\n\t\t.message {\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t}\n\t\t.message span {\n\t\t\twidth: 10px;\n\t\t\tdisplay: inline-block;\n\t\t\tmargin-bottom: -3px;\n\t\t}\n\t\th3 {\n\t\t\tfont-size: 100%;\n\t\t\tmargin: 0;\n\t\t}\n\t\t.message {\n\t\t\twidth: 100%;\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\t}\n\n\t.item-icon {\n\t\tposition: relative;\n\t\twidth: 14px;\n\t\theight: 14px;\n\t\tmargin-top: 25px;\n\t\tmargin-inline: -10px -2px;\n\t}\n\n\tbutton.primary {\n\t\tpadding: 21px;\n\t\tmargin: 0;\n\t}\n}\n/*\n.content-popover {\n\theight: 0px;\n\twidth: 0px;\n\tmargin-inline: auto;\n}\n.popover-container {\n\twidth: 100%;\n\theight: 0px;\n}\n*/\n</style>\n"],"names":["_createElementBlock","_openBlock","_createBlock","_resolveDynamicComponent","_renderSlot","_createVNode","_createElementVNode","_Fragment","_renderList","_withModifiers","_createTextVNode","_toDisplayString"],"mappings":";;;;;AA8DA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EACN,YAAY;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA;EAGD,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,IAAI;AAAA,MACH,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA;;;;IAKV,WAAW;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAKV,WAAW;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAKV,gBAAgB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAKV,gBAAgB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAKV,gBAAgB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAKV,UAAU;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA;;;;IAKX,SAAS;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAKV,UAAU;AAAA,MACT,MAAM;AAAA,MACN,SAAS,MAAM;AAAE,eAAO,CAAA;AAAA,MAAG;AAAA;;;;IAM5B,WAAW;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA;;EAIX,OAAO;AACN,WAAO;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACD;AAAA,EAEA,UAAU;AAAA,IACT,OAAO;AACN,aAAO;AAAA,QACN,IAAI,KAAK;AAAA,QACT,WAAW,KAAK;AAAA,QAChB,WAAW,KAAK;AAAA,QAChB,gBAAgB,KAAK;AAAA,QACrB,gBAAgB,KAAK;AAAA,QACrB,UAAU,KAAK;AAAA,QACf,SAAS,KAAK;AAAA,MACf;AAAA,IACD;AAAA,IACA,UAAU;AACT,aAAO,OAAO,KAAK,KAAK,QAAQ,EAAE,WAAW,KAAK,CAAC,CAAC,KAAK,OAAO;AAAA,IACjE;AAAA,IACA,iBAAiB;AAChB,aAAO,KAAK,kBAAkB,KAAK,mBAAmB;AAAA,IACvD;AAAA;EAGD,SAAS;AAAA,IACR,YAAY,OAAO;AAClB,UAAI,MAAM,OAAO,QAAQ,cAAc,GAAG;AACzC,cAAM,eAAc;AAAA,MACrB;AAAA,IACD;AAAA;AAEF;;AAhJQ,MAAA,aAAA,EAAA,OAAM,gBAAe;;;;;;;sBAnB5BA,mBAwCM,OAAA;AAAA,IAxCA,mDAAW,MAAA,UAAO;AAAA,IAAU,oDAAY,MAAA,UAAO;AAAA;KACpDC,UAAA,GAAAC,YAsCYC,wBAtCI,OAAA,YAAS,MAAA,KAAA,GAAA;AAAA,MACvB,MAAM,OAAA,aAAa;AAAA,MACnB,QAAQ,OAAA,YAAS,WAAc;AAAA,MAC/B,wFAAyE,SAAA,SAAO;AAAA,MAChF,SAAO,SAAA;AAAA;uBAER,MAOO;AAAA,QAPPC,WAOO,KAAA,QAAA,UAAA;AAAA,UAPc,WAAY,OAAA;AAAA,UAAY,gBAAiB,OAAA;AAAA,WAA9D,MAOO;AAAA,UANNC,YAKiC,qBAAA;AAAA,YALvB,OAAM;AAAA,YACd,MAAM;AAAA,YACN,KAAK,OAAA;AAAA,YACL,MAAM,OAAA;AAAA,YACN,cAAY,OAAA;AAAA,YACZ,eAAa,SAAA;AAAA;;QAEL,OAAA,+BAAXL,mBAGuB,OAAA;AAAA;UAFtB,OAAM;AAAA,UACN,KAAI;AAAA,UACH,KAAK,OAAA;AAAA;QACPM,mBAOM,OAPN,YAOM;AAAA,UANLA,mBAEK,MAAA,EAFA,OAAO,OAAA,SAAQ,mBAChB,OAAA,QAAQ,GAAA,GAAA,UAAA;AAAA,UAEA,OAAA,YAAO,mBAAnBN,mBAEO,QAAA;AAAA;YAFqB,OAAM;AAAA,YAAW,OAAO,OAAA;AAAA,6BAChD,OAAA,OAAO,GAAA,GAAA,UAAA;;QAGK,SAAA,wBAAjBE,YAWY,sBAAA;AAAA;UAXe,cAAY,OAAA;AAAA;2BAEtC,MAQO;AAAA,YARPE,WAQO,4BARP,MAQO;AAAA,eAPNH,UAAA,IAAA,GAAAD,mBAMiBO,UAAA,MAAAC,WANyB,OAAA,UAAQ,CAA1B,GAAG,eAAU;oCAArCN,YAMiB,2BAAA;AAAA,kBALf,KAAK;AAAA,kBACL,MAAM,EAAE;AAAA,kBACR,qBAAmB;AAAA,kBACnB,SAAKO,cAAA,YAAe,KAAA,MAAM,YAAY,SAAA,IAAI,GAAA,CAAA,WAAA,MAAA,CAAA;AAAA;mCAC3C,MAAY;AAAA,oBAATC,gBAAAC,gBAAA,EAAE,IAAI,GAAA,CAAA;AAAA;;;;;;;;;;;;;;"}

package/dist/chunks/NcDateTimePicker-BarX7J-6.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcDateTimePicker-BarX7J-6.mjs","sources":["../../src/components/NcDateTimePicker/NcDateTimePicker.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nIn general it is recommended to use the native date picker (see `NcDateTimePickerNative` which is based on `<input type=\"date\">`).\nBut some use cases are not covered by the native date selector, like selecting ranges or selecting a timezone.\nFor those cases this component can be used.\n\n### General examples\n```vue\n<template>\n\t<div class=\"wrapper\">\n\t\t<fieldset class=\"type-select\">\n\t\t\t<legend>Picker mode</legend>\n\t\t\t<NcCheckboxRadioSwitch v-model=\"type\" type=\"radio\" value=\"date\">Date</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch v-model=\"type\" type=\"radio\" value=\"datetime\">Date and time</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch v-model=\"type\" type=\"radio\" value=\"week\">Week</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch v-model=\"type\" type=\"radio\" value=\"month\">Month</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch v-model=\"type\" type=\"radio\" value=\"year\">Year</NcCheckboxRadioSwitch>\n\t\t</fieldset>\n\t\t<NcDateTimePicker\n\t\t\tv-model=\"time\"\n\t\t\t:type />\n\t\t<span>{{ time }}</span>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttype: 'date',\n\t\t\ttime: new Date('2022-10-10 10:10:10'),\n\t\t}\n\t},\n}\n</script>\n<style scoped>\n.wrapper {\n\tdisplay: flex;\n\tflex-direction: column;\n}\n\n.type-select {\n\tdisplay: flex;\n\tflex-direction: row;\n\tflex-wrap: wrap;\n}\n</style>\n```\n\n### Example with confirm button\n\nBy default the date is applied as soon as you select the day in the calendar.\nSometimes - especially when selecting date and time - it is required to only emit the selected date when the flow is finished.\nFor this the `confirm` prop can be used, this will add a confirmation button to the selector.\n\n```vue\n<template>\n\t<span>\n\t\t<NcDateTimePicker\n\t\t\tv-model=\"time\"\n\t\t\ttype=\"datetime\"\n\t\t\tconfirm />\n\t\t{{ time }}\n\t</span>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttime: null,\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n### Range picker\n\nThe most common use case for the `NcDateTimePicker` is picking a range, as this is not supported by the native date picker.\n\nWhen selecting the range picker type, the model value type will change from `Date` to `[Date, Date]`.\nMeaning an array with two dates is used, the first date is the range start and the second date is the range end.\n\n```vue\n<template>\n\t<div>\n\t\t<fieldset class=\"type-select\">\n\t\t\t<legend>Picker mode</legend>\n\t\t\t<NcCheckboxRadioSwitch v-model=\"type\" type=\"radio\" value=\"date-range\">Date</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch v-model=\"type\" type=\"radio\" value=\"time-range\">Time</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch v-model=\"type\" type=\"radio\" value=\"datetime-range\">Date and time</NcCheckboxRadioSwitch>\n\t\t</fieldset>\n\n\t\t<NcDateTimePicker\n\t\t\t:key=\"type\"\n\t\t\tv-model=\"time\"\n\t\t\t:type />\n\t\t<div>\n\t\t\t<div>Start: {{ formatDate(time[0]) }}</div>\n\t\t\t<div>End: {{ formatDate(time[1]) }}</div>\n\t\t</div>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttime: [new Date(2025, 3, 18, 12, 30), new Date(2025, 3, 21, 13, 30)],\n\t\t\ttype: 'date-range',\n\t\t}\n\t},\n\tmethods: {\n\t\tformatDate(date) {\n\t\t\tconst dateString = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`\n\t\t\tconst timeString = `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`\n\t\t\tif (this.type === 'date-range') {\n\t\t\t\treturn dateString\n\t\t\t} else if (this.type === 'time-range') {\n\t\t\t\treturn timeString\n\t\t\t}\n\t\t\treturn `${dateString} ${timeString}`\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.type-select {\n\tdisplay: flex;\n\tflex-direction: row;\n\tflex-wrap: wrap;\n}\n</style>\n```\n\n### Time zone aware date picker\n\nThe datepicker can optionally include a picker for the preferred time zone. The selected time does not factor in the\npicked time zone, but you will have to convert it yourself when necessary.\n\n```vue\n<template>\n\t<span>\n\t\t<NcDateTimePicker\n\t\t\tv-model=\"time\"\n\t\t\ttype=\"datetime\"\n\t\t\tshow-timezone-select\n\t\t\tv-model:timezone-id=\"tz\" /><br>\n\t\t{{ time }} | {{ tz }}\n\t</span>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttime: undefined,\n\t\t\ttz: 'Europe/Berlin',\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport type {\n\t// The emitted object for time picker\n\tTimeObj as LibraryTimeObject,\n\t// The accepted model value\n\tModelValue as LibraryModelValue,\n\tVueDatePickerProps,\n} from '@vuepic/vue-datepicker'\n\nimport {\n\tmdiCalendarBlank,\n\tmdiChevronDown,\n\tmdiChevronLeft,\n\tmdiChevronRight,\n\tmdiChevronUp,\n\tmdiClock,\n\tmdiClose,\n} from '@mdi/js'\nimport {\n\tgetFirstDay,\n\tgetDayNames,\n\tgetDayNamesMin,\n\tgetCanonicalLocale,\n} from '@nextcloud/l10n'\nimport { computed, useTemplateRef } from 'vue'\nimport { t } from '../../l10n.ts'\n\nimport VueDatePicker from '@vuepic/vue-datepicker'\nimport NcButton from '../NcButton/index.ts'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport NcTimezonePicker from '../NcTimezonePicker/NcTimezonePicker.vue'\n\ntype LibraryFormatOptions = VueDatePickerProps['format']\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * If set to true the menu will be placed on the `<body>`\n\t * instead of default placement on the picker.\n\t */\n\tappendToBody?: boolean\n\n\t/**\n\t * Aria label for the input box.\n\t *\n\t * @default 'Datepicker input'\n\t */\n\tariaLabel?: string\n\n\t/**\n\t * Aria label for the date picker menu.\n\t *\n\t * @default 'Datepicker menu'\n\t */\n\tariaLabelMenu?: string\n\n\t/**\n\t * Allow to clear the input.\n\t *\n\t * @default false\n\t */\n\tclearable?: boolean\n\n\t/**\n\t * Do not auto-apply the date but require clicking the confirmation button.\n\t * @default false\n\t */\n\tconfirm?: boolean\n\n\t/**\n\t * Preview format for the picker input field.\n\t * Can either be a string of Unicode tokens or a function that takes a Date object\n\t * or for range picker an array of two dates, and returns the formatted date as string.\n\t *\n\t * @default Intl.DateTimeFormat is used to format dates and times\n\t * @see https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table\n\t */\n\tformat?: string | ((date: Date) => string) | ((dates: [Date, Date]) => string)\n\n\t/**\n\t * The locale to use for formatting the shown dates.\n\t * By default the users current Nextcloud locale is used.\n\t */\n\tlocale?: string\n\n\t/**\n\t * Default increment step for minutes in the time picker.\n\t * @default 10\n\t */\n\tminuteStep?: number\n\n\t/**\n\t * The value to initialize, but also two-way bind the selected date. The date is – like the `Date` object in\n\t * JavaScript – tied to UTC. The selected time zone does not have an influence of the selected time and date\n\t * value. You have to translate the time yourself when you want to factor in time zones.\n\t *\n\t * When using the range picker then an array containing the start and end date needs to be passed.\n\t */\n\tmodelValue?: Date | [Date, Date] | null\n\n\t/**\n\t * Optional custom placeholder for the input box.\n\t */\n\tplaceholder?: string\n\n\t/**\n\t * Include a timezone picker within the menu.\n\t * Please note that the dates are still bound to the locale timezone\n\t * and any conversion needs to be done by the app itself.\n\t *\n\t * @default false\n\t */\n\tshowTimezoneSelect?: boolean\n\n\t/**\n\t * Show the ISO week numbers within the calendar.\n\t *\n\t * @default false\n\t */\n\tshowWeekNumber?: boolean\n\n\t/**\n\t * Type of the picker.\n\t * There is some special handling for ranges as those types require a `[Date, Date]` model value.\n\t * - The 'date-range' type will enable a range picker for dates\n\t * - The 'time-range' allows picking a time range.\n\t * - The 'datetime-range' allows picking dates with times assigned.\n\t *\n\t * @default 'date'\n\t */\n\ttype?: 'date' | 'datetime' | 'time' | 'week' | 'month' | 'year' | 'date-range' | 'time-range' | 'datetime-range'\n}>(), {\n\tariaLabel: t('Datepicker input'),\n\tariaLabelMenu: t('Datepicker menu'),\n\tformat: undefined,\n\tlocale: getCanonicalLocale(),\n\tminuteStep: 10,\n\ttimezoneId: 'UTC',\n\tmodelValue: null,\n\t// set by fallbackPlaceholder\n\tplaceholder: undefined,\n\ttype: 'date',\n})\n\n/**\n * The preselected IANA time zone ID for the time zone picker,\n * only relevant in combination with `show-timezone-select`.\n * The prop supports two-way binding through v-model directive.\n *\n * @example `Europe/Berlin`\n * @default 'UTC'\n */\nconst timezoneId = defineModel<string>('timezoneId', { default: 'UTC' })\n\nconst target = useTemplateRef('target-key')\nconst picker = useTemplateRef('picker-key')\n\nconst emit = defineEmits<{\n\t/**\n\t * If range picker is enabled then an array containing start and end date are emitted.\n\t * Otherwise the selected date is emitted.\n\t * `null` is emitted if `clearable` is set to `true` and the value was cleared.\n\t */\n\t'update:modelValue': [Date | [Date, Date] | null]\n\t'update:timezoneId': [string]\n}>()\n\n/**\n * Mapping of the model-value prop to the format expected by the library.\n * We do not directly pass the prop and adjust the interface to not transparently wrap the library.\n * This has show as beeing a pain in the past when we need to switch underlying libraries.\n */\nconst value = computed<LibraryModelValue>(() => {\n\tif (props.modelValue === null && props.clearable) {\n\t\treturn null\n\t}\n\n\tif (props.type === 'week') {\n\t\tconst date = props.modelValue instanceof Date ? props.modelValue : new Date()\n\t\tconst end = new Date(date)\n\t\tend.setUTCDate(date.getUTCDate() + 6)\n\t\treturn [date, end]\n\t} else if (props.type === 'year') {\n\t\tconst date = props.modelValue instanceof Date ? props.modelValue : new Date()\n\t\treturn date.getUTCFullYear()\n\t} else if (props.type === 'month') {\n\t\tconst date = props.modelValue instanceof Date ? props.modelValue : new Date()\n\t\treturn { year: date.getUTCFullYear(), month: date.getUTCMonth() }\n\t} else if (props.type === 'time') {\n\t\tconst time = props.modelValue instanceof Date ? props.modelValue : new Date()\n\t\treturn {\n\t\t\thours: time.getHours(),\n\t\t\tminutes: time.getMinutes(),\n\t\t\tseconds: time.getSeconds(),\n\t\t} satisfies LibraryTimeObject\n\t} else if (props.type === 'time-range') {\n\t\tconst time = [props.modelValue].flat()\n\t\tif (time.length !== 2) {\n\t\t\tconst start = new Date()\n\t\t\tconst end = new Date(start)\n\t\t\tend.setHours(end.getHours() + 1)\n\t\t\ttime.splice(0, 2, start, end)\n\t\t}\n\n\t\treturn (time as [Date, Date]).map((date) => ({\n\t\t\thours: date.getHours(),\n\t\t\tminutes: date.getMinutes(),\n\t\t\tseconds: date.getSeconds(),\n\t\t} as LibraryTimeObject))\n\t} else if (props.type.endsWith('-range')) {\n\t\tif (props.modelValue === undefined) {\n\t\t\tconst start = new Date()\n\t\t\tconst end = new Date(start)\n\t\t\tend.setUTCDate(start.getUTCDate() + 7)\n\t\t\treturn [start, end]\n\t\t}\n\t\treturn props.modelValue\n\t}\n\n\t// no special handling for other types needed\n\treturn props.modelValue ?? new Date()\n})\n\nconst placeholderFallback = computed(() => {\n\tif (props.type === 'date') {\n\t\treturn t('Select date')\n\t} else if (props.type === 'time') {\n\t\treturn t('Select time')\n\t} else if (props.type === 'datetime') {\n\t\treturn t('Select date and time')\n\t} else if (props.type === 'week') {\n\t\treturn t('Select week')\n\t} else if (props.type === 'month') {\n\t\treturn t('Select month')\n\t} else if (props.type === 'year') {\n\t\treturn t('Select year')\n\t} else if (props.type.endsWith('-range')) {\n\t\treturn t('Select time range')\n\t}\n\t// should not be reached\n\treturn t('Select date and time')\n})\n\n/**\n * The date (time) formatting to be used by the library.\n * We use the provided format if possible, otherwise we provide a formatting function\n * which uses the browsers Intl API to format the date / time in the current users locale.\n */\nconst realFormat = computed<LibraryFormatOptions>(() => {\n\tif (props.format) {\n\t\t// we can cast the type here as in this case its either string\n\t\t// function `(Date) => string` or `([Date, Date]) => string` where we cast to `(Date[]) => string` here.\n\t\treturn props.format as LibraryFormatOptions\n\t} else if (props.type === 'week') {\n\t\t// cannot format weeks with Intl.\n\t\treturn 'RR-II'\n\t}\n\n\tlet formatter: Intl.DateTimeFormat | undefined\n\tif (props.type === 'date' || props.type === 'date-range') {\n\t\tformatter = new Intl.DateTimeFormat(getCanonicalLocale(), { dateStyle: 'medium' })\n\t} else if (props.type === 'time' || props.type === 'time-range') {\n\t\tformatter = new Intl.DateTimeFormat(getCanonicalLocale(), { timeStyle: 'short' })\n\t} else if (props.type === 'datetime' || props.type === 'datetime-range') {\n\t\tformatter = new Intl.DateTimeFormat(getCanonicalLocale(), { dateStyle: 'medium', timeStyle: 'short' })\n\t} else if (props.type === 'month') {\n\t\tformatter = new Intl.DateTimeFormat(getCanonicalLocale(), { year: 'numeric', month: '2-digit' })\n\t} else if (props.type === 'year') {\n\t\tformatter = new Intl.DateTimeFormat(getCanonicalLocale(), { year: 'numeric' })\n\t}\n\n\tif (formatter) {\n\t\treturn (input: Date | [Date, Date]) => Array.isArray(input)\n\t\t\t? formatter.formatRange(input[0], input[1])\n\t\t\t: formatter.format(input)\n\t}\n\n\t// fallback to default formatting\n\treturn undefined\n})\n\nconst pickerType = computed(() => ({\n\ttimePicker: props.type === 'time' || props.type === 'time-range',\n\tyearPicker: props.type === 'year',\n\tmonthPicker: props.type === 'month',\n\tweekPicker: props.type === 'week',\n\trange: props.type.endsWith('-range') && {\n\t\t// do not use partial ranges (meaning after selecting the start [Date, null] will be emitted)\n\t\t// if this is needed someday we can enable it,\n\t\t// but its not covered by our component interface (props / events) documentation so just disabled for now.\n\t\tpartialRange: false,\n\t},\n\tenableTimePicker: !(props.type === 'date' || props.type === 'date-range'),\n\tflow: props.type === 'datetime'\n\t\t? ['calendar', 'time'] as ['calendar', 'time']\n\t\t: undefined,\n}))\n\n/**\n * Called on model value update of the library.\n * @param value The value emitted from the underlying library\n */\nfunction onUpdateModelValue(value: LibraryModelValue): void {\n\tif (value === null) {\n\t\treturn emit('update:modelValue', null)\n\t}\n\n\tif (props.type === 'time') {\n\t\t// time is provided as an object\n\t\temit('update:modelValue', formatLibraryTime(value as LibraryTimeObject))\n\t} else if (props.type === 'time-range') {\n\t\t// same as time but as an array with two elements\n\t\tconst start = formatLibraryTime(value[0])\n\t\tconst end = formatLibraryTime(value[1])\n\t\t// ensure end is beyond the start\n\t\tif (end.getTime() < start.getTime()) {\n\t\t\tend.setDate(end.getDate() + 1)\n\t\t}\n\t\temit('update:modelValue', [start, end])\n\t} else if (props.type === 'month') {\n\t\t// month is emitted as an object with month and year attribute\n\t\tconst data = value as { month: number, year: number }\n\t\temit('update:modelValue', new Date(data.year, data.month, 1))\n\t} else if (props.type === 'year') {\n\t\t// Years are emitted as the numeric year e.g. 2022\n\t\temit('update:modelValue', new Date(value as number, 0))\n\t} else if (props.type === 'week') {\n\t\t// weeks are emitted as [Date, Date]\n\t\temit('update:modelValue', value[0])\n\t} else {\n\t\t// otherwise it already emits the correct format\n\t\temit('update:modelValue', value as Date | [Date, Date])\n\t}\n}\n\n/**\n * Format a vuepick time object to native JS Date object.\n *\n * @param time - The library time value object\n */\nfunction formatLibraryTime(time: LibraryTimeObject): Date {\n\tconst date = new Date()\n\tdate.setHours(time.hours)\n\tdate.setMinutes(time.minutes)\n\tdate.setSeconds(time.seconds)\n\treturn date\n}\n\n// Localization\n\nconst dayNames = getDayNamesMin()\n\nconst weekStart = getFirstDay()\n\n// TRANSLATORS: A very short abbrevation used as a heading for \"week number\"\nconst weekNumName = t('W')\n\nconst ariaLabels = computed(() => ({\n\ttoggleOverlay: t('Toggle overlay'),\n\tmenu: props.ariaLabelMenu,\n\tinput: props.ariaLabel,\n\topenTimePicker: t('Open time picker'),\n\tcloseTimePicker: t('Close time Picker'),\n\tincrementValue: (type: 'hours' | 'minutes' | 'seconds') => {\n\t\tif (type === 'hours') {\n\t\t\treturn t('Increment hours')\n\t\t} else if (type === 'minutes') {\n\t\t\treturn t('Increment minutes')\n\t\t}\n\t\treturn t('Increment seconds')\n\t},\n\tdecrementValue: (type: 'hours' | 'minutes' | 'seconds') => {\n\t\tif (type === 'hours') {\n\t\t\treturn t('Decrement hours')\n\t\t} else if (type === 'minutes') {\n\t\t\treturn t('Decrement minutes')\n\t\t}\n\t\treturn t('Decrement seconds')\n\t},\n\topenTpOverlay: (type: 'hours' | 'minutes' | 'seconds') => {\n\t\tif (type === 'hours') {\n\t\t\treturn t('Open hours overlay')\n\t\t} else if (type === 'minutes') {\n\t\t\treturn t('Open minutes overlay')\n\t\t}\n\t\treturn t('Open seconds overlay')\n\t},\n\tamPmButton: t('Switch AM/PM mode'),\n\topenYearsOverlay: t('Open years overlay'),\n\topenMonthsOverlay: t('Open months overlay'),\n\tnextMonth: t('Next month'),\n\tprevMonth: t('Previous month'),\n\tnextYear: t('Next year'),\n\tprevYear: t('Previous year'),\n\tweekDay: (day: number) => getDayNames()[day],\n\tclearInput: t('Clear value'),\n\tcalendarIcon: t('Calendar icon'),\n\ttimePicker: t('Time picker'),\n\tmonthPicker: (overlay: boolean) => overlay ? t('Month picker overlay') : t('Month picker'),\n\tyearPicker: (overlay: boolean) => overlay ? t('Year picker overlay') : t('Year picker'),\n}))\n\n/**\n * Select the current value.\n * This is used by the confirmation button if `confirmation` was set.\n */\nfunction selectDate() {\n\tpicker.value!.selectDate()\n}\n\n/**\n * Cancel the current selection by closing the overlay.\n * This is used by the confirmation button if `confirmation` was set.\n */\nfunction cancelSelection() {\n\tpicker.value!.closeMenu()\n}\n</script>\n\n<template>\n\t<div class=\"vue-date-time-picker__wrapper\">\n\t\t<VueDatePicker ref=\"picker-key\"\n\t\t\t:aria-labels\n\t\t\t:auto-apply=\"!confirm\"\n\t\t\tclass=\"vue-date-time-picker\"\n\t\t\t:class=\"{ 'vue-date-time-picker--clearable': clearable }\"\n\t\t\t:cancel-text=\"t('Cancel')\"\n\t\t\t:clearable\n\t\t\t:day-names\n\t\t\t:placeholder=\"placeholder ?? placeholderFallback\"\n\t\t\t:format=\"realFormat\"\n\t\t\t:locale\n\t\t\t:minutes-increment=\"minuteStep\"\n\t\t\t:model-value=\"value\"\n\t\t\t:now-button-label=\"t('Now')\"\n\t\t\t:select-text=\"t('Pick')\"\n\t\t\tsix-weeks=\"fair\"\n\t\t\t:teleport=\"appendToBody ? (target || undefined) : false\"\n\t\t\ttext-input\n\t\t\t:week-num-name\n\t\t\t:week-numbers=\"showWeekNumber ? { type: 'iso' } : undefined\"\n\t\t\t:week-start\n\t\t\tv-bind=\"pickerType\"\n\t\t\t@update:model-value=\"onUpdateModelValue\">\n\t\t\t<template #action-buttons>\n\t\t\t\t<NcButton size=\"small\" variant=\"tertiary\" @click=\"cancelSelection\">\n\t\t\t\t\t{{ t('Cancel') }}\n\t\t\t\t</NcButton>\n\t\t\t\t<NcButton size=\"small\" variant=\"primary\" @click=\"selectDate\">\n\t\t\t\t\t{{ t('Pick') }}\n\t\t\t\t</NcButton>\n\t\t\t</template>\n\t\t\t<template #clear-icon=\"{ clear }\">\n\t\t\t\t<NcButton :aria-label=\"t('Clear value')\"\n\t\t\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t\t\t@click=\"clear\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper inline :path=\"mdiClose\" :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t</template>\n\t\t\t<template #input-icon>\n\t\t\t\t<NcIconSvgWrapper :path=\"mdiCalendarBlank\" :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #clock-icon>\n\t\t\t\t<NcIconSvgWrapper inline :path=\"mdiClock\" :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #arrow-left>\n\t\t\t\t<NcIconSvgWrapper inline :path=\"mdiChevronLeft\" :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #arrow-right>\n\t\t\t\t<NcIconSvgWrapper inline :path=\"mdiChevronRight\" :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #arrow-down>\n\t\t\t\t<NcIconSvgWrapper inline :path=\"mdiChevronDown\" :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #arrow-up>\n\t\t\t\t<NcIconSvgWrapper inline :path=\"mdiChevronUp\" :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template v-if=\"showTimezoneSelect\" #action-extra>\n\t\t\t\t<NcTimezonePicker v-model=\"timezoneId\"\n\t\t\t\t\tclass=\"vue-date-time-picker__timezone\"\n\t\t\t\t\t:append-to-body=\"false\"\n\t\t\t\t\t:input-label=\"t('Timezone')\" />\n\t\t\t</template>\n\t\t</VueDatePicker>\n\t\t<Teleport to=\"body\" :disabled=\"!appendToBody\">\n\t\t\t<div ref=\"target-key\" class=\"vue-date-time-picker__wrapper\" />\n\t\t</Teleport>\n\t</div>\n</template>\n\n<style scoped lang=\"scss\">\n@use \"sass:meta\";\n\n.vue-date-time-picker__wrapper {\n\t// This is under :root in @vuepic/vue-datepicker/dist/main.css, so importing it scoped won't work\n\t--dp-common-transition: all var(--animation-quick) ease-in;\n\t--dp-menu-padding: 6px 8px;\n\t--dp-animation-duration: var(--animation-quick);\n\t--dp-menu-appear-transition-timing: cubic-bezier(.4, 0, 1, 1);\n\t--dp-transition-timing: ease-out;\n\t--dp-action-row-transtion: all 0.2s ease-in;\n\t--dp-font-family: var(--font-face);\n\t--dp-border-radius: var(--border-radius-element);\n\t--dp-cell-border-radius: var(--border-radius-small);\n\t--dp-transition-length: 22px;\n\t--dp-transition-timing-general: var(--animation-quick);\n\t--dp-button-height: var(--default-clickable-area);\n\t--dp-month-year-row-height: var(--default-clickable-area);\n\t--dp-month-year-row-button-size: var(--clickable-area-small);\n\t--dp-button-icon-height: 20px;\n\t--dp-calendar-wrap-padding: 0 5px;\n\t--dp-cell-size: var(--default-clickable-area);\n\t--dp-cell-padding: 5px;\n\t--dp-common-padding: 10px;\n\t--dp-input-icon-padding: var(--default-clickable-area);\n\t--dp-input-padding: 6px 12px;\n\t--dp-menu-min-width: 260px;\n\t--dp-action-buttons-padding: 1px 6px;\n\t--dp-row-margin: 5px 0;\n\t--dp-calendar-header-cell-padding: 0.5rem;\n\t--dp-multi-calendars-spacing: 10px;\n\t--dp-overlay-col-padding: 3px;\n\t--dp-time-inc-dec-button-size: var(--default-clickable-area);\n\t--dp-font-size: 1rem;\n\t--dp-preview-font-size: var(--font-size-small);\n\t--dp-time-font-size: 2rem;\n\t--dp-action-button-height: var(--clickable-area-small);\n\t--dp-action-row-padding: 8px;\n\t--dp-direction: ltr;\n\n\t// We need to import the vuepic styles, but at least scoped to our class and scope\n\t// plain @import does not work as this will scope all styles imported.\n\t:deep() {\n\t\t@include meta.load-css('@vuepic/vue-datepicker/dist/main.css');\n\t}\n\n\t.vue-date-time-picker--clearable :deep(.dp__input) {\n\t\tpadding-inline-end: var(--default-clickable-area);\n\t}\n\n\t.vue-date-time-picker__timezone {\n\t\tmin-width: unset;\n\t\twidth: 100%;\n\t}\n\n\t:deep(.icon-vue) {\n\t\t// we enforce full opacity to not create a11y issues with contrast\n\t\topacity: 1 !important;\n\t}\n\n\t// time selector button should have consistent padding\n\t:deep(.dp--tp-wrap),\n\t:deep(.dp__action_extra) {\n\t\tpadding: var(--dp-menu-padding);\n\t\tpadding-top: 0;\n\t}\n\n\t:deep(.dp__overlay.dp--overlay-absolute) {\n\t\tpadding: var(--dp-menu-padding);\n\n\t\t.dp__btn.dp__button.dp__button_bottom {\n\t\t\tinset-block-end: 6px;\n\t\t}\n\t}\n\n\t:deep(.dp__btn.dp__button.dp__button_bottom),\n\t:deep(.dp--tp-wrap .dp__button) {\n\t\twidth: 100%;\n\t}\n\n\t:deep(.dp__btn.dp__button.dp__overlay_action) {\n\t\twidth: calc(100% - 16px);\n\t}\n\n\t// fix issues caused by Nextcloud server styles\n\t:deep(input) {\n\t\tpadding-inline-start: var(--dp-input-icon-padding) !important;\n\t}\n\t:deep(.dp__btn) {\n\t\tmargin: 0;\n\t}\n\t:deep(.dp__inner_nav) {\n\t\theight: fit-content;\n\t\twidth: fit-content;\n\t}\n\n\t// make the bottom page toggle stand out better\n\t:deep(.dp__btn.dp__button.dp__button_bottom) {\n\t\tcolor: var(--color-primary-element-light);\n\t\tbackground-color: var(--color-primary-element-light);\n\t}\n\n\t// Fix server styles causing buttons to be primary colored\n\t:deep(.dp--header-wrap .dp__btn:not(.dp__button_bottom)),\n\t:deep(.dp__time_col .dp__btn) {\n\t\tbackground-color: var(--color-main-background);\n\n\t\t&:hover {\n\t\t\tbackground: var(--dp-hover-color);\n\t\t\tcolor: var(--dp-hover-icon-color);\n\t\t}\n\t}\n\n\t// Server styles cause the month and year to be fit-content -> fixing it to be max size.\n\t:deep(.dp__month_year_select) {\n\t\tflex: 1;\n\t}\n\t:deep(.dp--time-overlay-btn) {\n\t\tfont-size: calc(2 * var(--default-font-size)) !important;\n\t}\n\n\t// Adjust padding to prevent horizontal scrolling in time selection\n\t:deep(.dp__time_input .dp__time_col_reg_block) {\n\t\tpadding: 0 calc(4 * var(--default-grid-baseline));\n\t}\n\n\t.vue-date-time-picker.dp__theme_dark,\n\t.vue-date-time-picker.dp__theme_light,\n\t:deep(.dp__theme_dark),\n\t:deep(.dp__theme_light) {\n\t\t--dp-background-color: var(--color-main-background);\n\t\t--dp-text-color: var(--color-main-text);\n\t\t--dp-hover-color: var(--color-primary-element-light-hover);\n\t\t--dp-hover-text-color: var(--color-primary-element-light-text);\n\t\t--dp-hover-icon-color: var(--color-primary-element-light-text);\n\t\t--dp-primary-color: var(--color-primary-element);\n\t\t--dp-primary-disabled-color: var(--color-primary-element-hover);\n\t\t--dp-primary-text-color: var(--color-primary-element-text);\n\t\t--dp-secondary-color: var(--color-text-maxcontrast); // this is used for \"disabled\" dates\n\t\t--dp-border-color: var(--color-border);\n\t\t--dp-menu-border-color: var(--color-border-dark);\n\t\t--dp-border-color-hover: var(--color-border-maxcontrast);\n\t\t--dp-border-color-focus: var(--color-border-maxcontrast);\n\t\t--dp-disabled-color: var(--color-background-dark);\n\t\t--dp-disabled-color-text: var(--color-text-maxcontrast);\n\t\t--dp-scroll-bar-background: var(--color-scrollbar);\n\t\t--dp-scroll-bar-color: var(--color-scrollbar);\n\t\t--dp-success-color: var(--color-success);\n\t\t--dp-success-color-disabled: var(--color-success-hover);\n\t\t--dp-icon-color: var(--color-main-text);\n\t\t--dp-danger-color: var(--color-error);\n\t\t--dp-marker-color: var(--color-text-error, var(--color-error));\n\t\t--dp-tooltip-color: var(--color-main-text);\n\t\t--dp-highlight-color: var(--color-main-text);\n\t}\n}\n</style>\n"],"names":["_useModel","value","_openBlock","_createElementBlock","_createVNode","_unref","_mergeProps","confirm","clearable","placeholder","locale","minuteStep","appendToBody","showWeekNumber","_createSlots","_withCtx","showTimezoneSelect","NcTimezonePicker","_createBlock","_Teleport","_createElementVNode"],"mappings":"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"}

package/dist/chunks/NcDateTimePickerNative-BOoA1aEf.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcDateTimePickerNative-BOoA1aEf.mjs","sources":["../../src/components/NcDateTimePickerNative/NcDateTimePickerNative.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### General description\n\nThis components provides a wrapper around the native browser datetime picker. <br>\nThis is an input with some type of date e.g. https://html.spec.whatwg.org/multipage/input.html#local-date-and-time-state-(type=datetime-local). <br>\nAll available types are: 'date', 'datetime-local', 'month', 'time' and 'week', please check them here: https://html.spec.whatwg.org/multipage/input.html#  <br>\n\n### Examples\n\n```vue\n<template>\n\t<div>\n\t\t<span>Picked date: {{ value || 'null' }}</span>\n\t\t<hr/>\n\t\t<div class=\"flex\">\n\t\t\t<NcSelect v-bind=\"props\" v-model=\"type\" />\n\t\t\t<NcDateTimePickerNative\n\t\t\t\tv-model=\"value\"\n\t\t\t\t:label=\"label\"\n\t\t\t\t:type=\"type\" />\n\t\t</div>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tprops: {\n\t\t\t\t\tclearable: false,\n\t\t\t\t\tinputLabel: 'Picker type',\n\t\t\t\t\toptions: [\n\t\t\t\t\t\t'date',\n\t\t\t\t\t\t'datetime-local',\n\t\t\t\t\t\t'month',\n\t\t\t\t\t\t'time',\n\t\t\t\t\t\t'week',\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t\ttype: 'datetime-local',\n\t\t\t\tvalue: new Date(),\n\t\t\t\tlabel: 'Select a new date or time',\n\t\t\t}\n\t\t},\n\t}\n</script>\n<style scoped>\n.flex {\n\tdisplay: flex;\n\tgap: 4px;\n}\n</style>\n```\n\n#### Usage: type='datetime-local' with min date and max date\n```vue\n<template>\n\t<div>\n\t\t<span>Picked date: {{ value || 'null' }}</span>\n\t\t<NcDateTimePickerNative\n\t\t\tv-model=\"value\"\n\t\t\t:min=\"yesterdayDate\"\n\t\t\t:max=\"someDate\"\n\t\t\t:label=\"label\"\n\t\t\ttype=\"datetime-local\" />\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tvalue: new Date(),\n\t\t\t\tlabel: 'Please select a new date',\n\t\t\t\tyesterdayDate: new Date(new Date().setDate(new Date().getDate() - 1)),\n\t\t\t\tsomeDate: new Date(new Date().setDate(new Date().getDate() + 7)),\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n</docs>\n\n<script setup lang=\"ts\">\nimport type { VueClassType } from '../../utils/VueTypes.ts'\n\nimport { computed } from 'vue'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { t } from '../../l10n.ts'\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * HTML class of the element\n\t */\n\tclass?: VueClassType\n\n\t/**\n\t * ID of the input element\n\t */\n\tid?: string\n\n\t/**\n\t * Class to add to the input field.\n\t * Necessary to use NcDateTimePickerNative in the NcActionInput component.\n\t */\n\tinputClass?: VueClassType\n\n\t/**\n\t * type attribute of the input field\n\t * default type: String\n\t * The type of the input element, it can be `date`, `datetime-local`, `month`, `time`, `week`\n\t */\n\ttype?: 'date' | 'datetime-local' | 'month' | 'time' | 'week'\n\n\t/**\n\t * Visual label of the input\n\t */\n\tlabel?: string\n\n\t/**\n\t * min attribute of the input field\n\t */\n\tmin?: Date | null\n\n\t/**\n\t * max attribute of the input field\n\t */\n\tmax?: Date | null\n\n\t/**\n\t * Flag to hide the label.\n\t * The hidden input label for accessibility purposes.\n\t */\n\thideLabel?: boolean\n}>(), {\n\tclass: undefined,\n\tid: () => createElementId(),\n\tinputClass: '',\n\tlabel: () => t('Please choose a date'),\n\tmax: null,\n\tmin: null,\n\tmodelValue: null,\n\ttype: 'date',\n})\n\n/**\n * The date is – like the `Date` object in JavaScript – tied to UTC.\n * The selected time zone does not have an influence of the selected time and date value.\n * You have to translate the time yourself when you want to factor in time zones.\n * Pass null to clear the input field.\n */\nconst modelValue = defineModel<Date | null>({ default: null })\n\nconst formattedValue = computed(() => modelValue.value ? formatValue(modelValue.value) : '')\nconst formattedMax = computed(() => props.max ? formatValue(props.max) : undefined)\nconst formattedMin = computed(() => props.min ? formatValue(props.min) : undefined)\n\n/**\n * Returns Object with string values of a Date\n *\n * @param value - The selected value\n */\nfunction getReadableDate(value: Date) {\n\tconst yyyy = value.getFullYear().toString().padStart(4, '0')\n\tconst MM = (value.getMonth() + 1).toString().padStart(2, '0')\n\tconst dd = value.getDate().toString().padStart(2, '0')\n\tconst hh = value.getHours().toString().padStart(2, '0')\n\tconst mm = value.getMinutes().toString().padStart(2, '0')\n\n\treturn { yyyy, MM, dd, hh, mm }\n}\n\n/**\n * Returns preformatted value for the input field\n *\n * @param value - The selected value\n */\nfunction formatValue(value: Date): string {\n\tconst { yyyy, MM, dd, hh, mm } = getReadableDate(value)\n\tif (props.type === 'datetime-local') {\n\t\treturn `${yyyy}-${MM}-${dd}T${hh}:${mm}`\n\t} else if (props.type === 'date') {\n\t\treturn `${yyyy}-${MM}-${dd}`\n\t} else if (props.type === 'month') {\n\t\treturn `${yyyy}-${MM}`\n\t} else if (props.type === 'time') {\n\t\treturn `${hh}:${mm}`\n\t} else if (props.type === 'week') {\n\t\tconst startDate = new Date(Number.parseInt(yyyy), 0, 1)\n\t\tconst daysSinceBeginningOfYear = Math.floor((value.getTime() - startDate.getTime())\n\t\t\t/ (24 * 60 * 60 * 1000))\n\t\tconst weekNumber = Math.ceil(daysSinceBeginningOfYear / 7)\n\t\treturn `${yyyy}-W${weekNumber}`\n\t}\n\treturn ''\n}\n\n/**\n * Handle the input event\n *\n * @param event - The input event payload\n */\nfunction onInput(event: Event): void {\n\tconst input = event.target as HTMLInputElement\n\tif (!input || isNaN(input.valueAsNumber)) {\n\t\tmodelValue.value = null\n\t} else if (props.type === 'time') {\n\t\tconst time = input.value\n\n\t\tconst { yyyy, MM, dd } = getReadableDate(modelValue.value || new Date())\n\t\tmodelValue.value = new Date(`${yyyy}-${MM}-${dd}T${time}`)\n\t} else if (props.type === 'month') {\n\t\tconst MM = (new Date(input.value).getMonth() + 1).toString().padStart(2, '0')\n\t\tconst { yyyy, dd, hh, mm } = getReadableDate(modelValue.value || new Date())\n\t\tmodelValue.value = new Date(`${yyyy}-${MM}-${dd}T${hh}:${mm}`)\n\t} else {\n\t\tconst timezoneOffsetSeconds = new Date(input.valueAsNumber).getTimezoneOffset() * 1000 * 60\n\t\tconst inputDateWithTimezone = input.valueAsNumber + timezoneOffsetSeconds\n\t\tmodelValue.value = new Date(inputDateWithTimezone)\n\t}\n}\n</script>\n\n<template>\n\t<div class=\"native-datetime-picker\" :class=\"$props.class\">\n\t\t<label class=\"native-datetime-picker__label\"\n\t\t\t:class=\"{ 'hidden-visually': hideLabel }\"\n\t\t\t:for=\"id\">\n\t\t\t{{ label }}\n\t\t</label>\n\t\t<input :id\n\t\t\tclass=\"native-datetime-picker__input\"\n\t\t\t:class=\"inputClass\"\n\t\t\t:type\n\t\t\t:value=\"formattedValue\"\n\t\t\t:min=\"formattedMin\"\n\t\t\t:max=\"formattedMax\"\n\t\t\tv-bind=\"$attrs\"\n\t\t\t@input=\"onInput\">\n\t</div>\n</template>\n\n<style lang=\"scss\" scoped>\n.native-datetime-picker {\n\tdisplay: flex;\n\tflex-direction: column;\n\n\t.native-datetime-picker__label {\n\t\tmargin-block-end: 2px;\n\t}\n\n\t.native-datetime-picker__input {\n\t\t// If border width differs between focused and unfocused we need to compensate to prevent jumping\n\t\t--input-border-width-offset: calc(var(--border-width-input-focused, 2px) - var(--border-width-input, 2px));\n\t\twidth: 100%;\n\t\tflex: 0 0 auto;\n\t\tmargin: 0;\n\t\tpadding-inline-start: calc(var(--border-radius-element) + var(--input-border-width-offset));\n\t\tpadding-inline-end: calc(var(--default-grid-baseline) + var(--input-border-width-offset));\n\t\tborder: var(--border-width-input, 2px) solid var(--color-border-maxcontrast);\n\n\t\t&:active:not([disabled]),\n\t\t&:hover:not([disabled]),\n\t\t&:focus:not([disabled]),\n\t\t&:focus-within:not([disabled]) {\n\t\t\tborder-color: var(--color-main-text);\n\t\t\tborder-width: var(--border-width-input-focused, 2px);\n\t\t\tbox-shadow: 0 0 0 2px var(--color-main-background) !important;\n\t\t\t// Reset padding offset when focused\n\t\t\t--input-border-width-offset: 0px;\n\t\t}\n\t}\n}\n\n[data-theme-light],\n[data-themes*=light] {\n\t.native-datetime-picker__input {\n\t\tcolor-scheme: light;\n\t}\n}\n\n[data-theme-dark],\n[data-themes*=dark] {\n\t.native-datetime-picker__input {\n\t\tcolor-scheme: dark;\n\t}\n}\n\n[data-theme-default],\n[data-themes*=default] {\n\t@media (prefers-color-scheme: light) {\n\t\t.native-datetime-picker__input {\n\t\t\tcolor-scheme: light;\n\t\t}\n\t}\n\t@media (prefers-color-scheme: dark) {\n\t\t.native-datetime-picker__input {\n\t\t\tcolor-scheme: dark;\n\t\t}\n\t}\n}\n</style>\n"],"names":["_useModel","_createElementBlock","_normalizeClass","$props","_createElementVNode","hideLabel","id","label","_mergeProps","inputClass","type","$attrs"],"mappings":"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"}

package/dist/chunks/NcDialog-IKWAQK-K.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcDialog-IKWAQK-K.mjs","sources":["../../src/components/NcDialog/NcDialog.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### General description\n\nThis component uses the `NcModal` under the hood for allowing users to create generic dialogs.\n\n### Basic example\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"showDialog = true\">Show dialog</NcButton>\n\t\t<NcDialog v-model:open=\"showDialog\" name=\"Confirmation\" message=\"Are you sure to proceed?\" :buttons=\"buttons\" />\n\t\t<p>Last response: {{ lastResponse }}</p>\n\t</div>\n</template>\n<script>\nimport IconCancel from '@mdi/svg/svg/cancel.svg?raw'\nimport IconCheck from '@mdi/svg/svg/check.svg?raw'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tlastResponse: 'None',\n\t\t\tbuttons: [\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Cancel',\n\t\t\t\t\ticon: IconCancel,\n\t\t\t\t\tcallback: () => { this.lastResponse = 'Pressed \"Cancel\"' },\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Ok',\n\t\t\t\t\ttype: 'primary',\n\t\t\t\t\ticon: IconCheck,\n\t\t\t\t\tcallback: () => { this.lastResponse = 'Pressed \"Ok\"' },\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t},\n}\n</script>\n```\n\n### Use custom actions and content\nInstead of using the buttons property, you can also inject your custom actions using a named slot.\nYou can also use the default slot to inject custom content.\n\n```vue\n<template>\n\t<div style=\"display: flex; gap: 12px;\">\n\t\t<NcButton @click=\"showDialog = true\">Show dialog</NcButton>\n\t\t<NcButton @click=\"showLongDialog = true\">Show long dialog</NcButton>\n\t\t<NcDialog v-if=\"showDialog\" name=\"Warning\" no-close>\n\t\t\t<template #actions>\n\t\t\t\t<NcButton @click=\"showDialog = false\">Ok</NcButton>\n\t\t\t</template>\n\t\t\t<div style=\"color: red; font-weight: bold;\">This is serious</div>\n\t\t</NcDialog>\n\t\t<NcDialog v-model:open=\"showLongDialog\" name=\"Lorem Ipsum\">\n\t\t\t<p v-for=\"i in new Array(63)\" :key=\"i\">Lorem ipsum dolor sit amet.</p>\n\t\t</NcDialog>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tshowLongDialog: false,\n\t\t}\n\t},\n}\n</script>\n```\n\n### Form example\nIt is also possible to use the dialog for small forms.\nThis can be used when asking for a password, a name or similar to have native form validation.\n\nTo make the dialog a form the `is-form` prop needs to be set.\nWhen using the form variant you can also pass buttons with `nativeType` prop to add a native `submit` button.\n\nNote that this is not possible if the dialog contains a navigation!\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"showDialog = true\">Show dialog</NcButton>\n\t\t<NcDialog is-form\n\t\t\t:buttons=\"buttons\"\n\t\t\tname=\"Choose a name\"\n\t\t\tv-model:open=\"showDialog\"\n\t\t\t@submit=\"currentName = newName\"\n\t\t\t@reset=\"newName = ''\"\n\t\t\t@closing=\"newName = ''\">\n\t\t\t<NcTextField v-model=\"newName\"\n\t\t\t\tlabel=\"New name\"\n\t\t\t\tminlength=\"6\"\n\t\t\t\tplaceholder=\"Min. 6 characters\"\n\t\t\t\trequired />\n\t\t</NcDialog>\n\t\t<p>New name: {{ currentName }}</p>\n\t</div>\n</template>\n<script>\nimport IconCheck from '@mdi/svg/svg/check.svg?raw'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tnewName: '',\n\t\t\tcurrentName: 'none yet.',\n\t\t\tbuttons: [\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Reset',\n\t\t\t\t\tnativeType: 'reset',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Submit',\n\t\t\t\t\ttype: 'primary',\n\t\t\t\t\tnativeType: 'submit',\n\t\t\t\t\ticon: IconCheck,\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t},\n}\n</script>\n```\n\n### Loading buttons\nSometimes a dialog ends with a request and this request might fail due to server-side-validation.\nIn this case it is often desired to keep the dialog open, this can be done by returning `false` from the button callback,\nto not block this callback should return a `Promise<false>`.\n\nIt is also possible to get the result of the callback from the dialog, as the result is passed as the payload of the `closing` event.\n\nWhile the promise is awaited the button will have a loading state,\nthis means, as long as no custom `icon`-slot is used, a loading icon will be shown.\nPlease note that the **button will not be disabled or accessibility reasons**,\nbecause disabled elements cannot be focused and so the loading state could not be communicated e.g. via screen readers.\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"openDialog\">Show dialog</NcButton>\n\t\t<NcDialog :buttons=\"buttons\"\n\t\t\tname=\"Create user\"\n\t\t\t:message=\"message\"\n\t\t\t:open.sync=\"showDialog\"\n\t\t\t@closing=\"response = $event\"\n\t\t\t@update:open=\"clickClosesDialog = false\" />\n\t\t<div style=\"margin-top: 8px;\">Dialog response: {{ response }}</div>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tclickClosesDialog: false,\n\t\t\tresponse: 'none',\n\t\t}\n\t},\n\n\tmethods: {\n\t\tasync callback() {\n\t\t\t// wait 3 seconds\n\t\t\tawait new Promise((resolve) => window.setTimeout(resolve, 3000))\n\t\t\tthis.clickClosesDialog = !this.clickClosesDialog\n\t\t\t// Do not close the dialog on first and then every second button click\n\t\t\tif (this.clickClosesDialog) {\n\t\t\t\t// return false means the dialog stays open\n\t\t\t\treturn false\n\t\t\t}\n\t\t\treturn '✅'\n\t\t},\n\n\t\topenDialog() {\n\t\t\tthis.response = 'none'\n\t\t\tthis.showDialog = true\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tbuttons() {\n\t\t\treturn [\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Create user',\n\t\t\t\t\ttype: 'primary',\n\t\t\t\t\tcallback: this.callback,\n\t\t\t\t}\n\t\t\t]\n\t\t},\n\t\tmessage() {\n\t\t\tif (this.clickClosesDialog) {\n\t\t\t\treturn 'Next button click will work and close the dialog.'\n\t\t\t} else {\n\t\t\t\treturn 'Clicking the button will load but not close the dialog.'\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport type { ComponentProps, VueClassType } from '../../utils/VueTypes.ts'\n\nimport { useElementSize } from '@vueuse/core'\nimport { computed, ref, useTemplateRef, type Slot } from 'vue'\n\nimport NcModal from '../NcModal/index.js'\nimport NcDialogButton from '../NcDialogButton/index.ts'\n\nimport { createElementId } from '../../utils/createElementId.ts'\n\ntype NcDialogButtonProps = ComponentProps<typeof NcDialogButton>\n\nconst props = withDefaults(defineProps<{\n\t/** Name of the dialog (the heading) */\n\tname: string\n\n\t/** Text of the dialog */\n\tmessage?: string\n\n\t/** Additional elements to add to the focus trap */\n\tadditionalTrapElements?: Array<string | HTMLElement>\n\n\t/**\n\t * The element where to mount the dialog, if `null` is passed the dialog is mounted in place.\n\t */\n\tcontainer?: string\n\n\t/**\n\t * Size of the underlying NcModal\n\t */\n\tsize?: 'small'|'normal'|'large'|'full'\n\n\t/**\n\t * Buttons to display\n\t */\n\tbuttons?: NcDialogButtonProps[]\n\n\t/**\n\t * Make the dialog wrapper a HTML form element.\n\t * The buttons will be wrapped within the form so they can be used as submit / reset buttons.\n\t * Please note that when using the property the `navigation` should not be used.\n\t */\n\tisForm?: boolean\n\n\t/**\n\t * Do not show the close button for the dialog.\n\t */\n\tnoClose?: boolean\n\n\t/**\n\t * Close the dialog if the user clicked outside of the dialog\n\t * Only relevant if `noClose` is not set.\n\t */\n\tcloseOnClickOutside?: boolean\n\n\t/**\n\t * Declare if hiding the modal should be animated\n\t */\n\toutTransition?: boolean\n\n\t/**\n\t * aria-label for the dialog navigation.\n\t * Use it when you want to provide a more meaningful label than the dialog name.\n\t *\n\t * By default, navigation is labeled by the dialog name.\n\t */\n\tnavigationAriaLabel?: string\n\n\t/**\n\t * aria-labelledby for the dialog navigation.\n\t * Use it when you have an implicit navigation label (e.g. a heading).\n\t *\n\t * By default, navigation is labeled by the dialog name.\n\t */\n\tnavigationAriaLabelledby?: string\n\n\t/**\n\t * Optionally pass additional classes which will be set on the content wrapper for custom styling\n\t */\n\tcontentClasses?: VueClassType\n\n\t/**\n\t * Optionally pass additional classes which will be set on the dialog itself\n\t * (the default `class` attribute will be set on the modal wrapper)\n\t */\n\tdialogClasses?: VueClassType\n\n\t/**\n\t * Optionally pass additional classes which will be set on the navigation for custom styling\n\t * @example\n\t * ```html\n\t * <DialogBase :navigation-classes=\"['mydialog-navigation']\"><!-- --></DialogBase>\n\t * <!-- ... -->\n\t * <style lang=\"scss\">\n\t * :deep(.mydialog-navigation) {\n\t *     flex-direction: row-reverse;\n\t * }\n\t * </style>\n\t * ```\n\t */\n\tnavigationClasses?: VueClassType\n}>(), {\n\tadditionalTrapElements: () => [],\n\tbuttons: () => [],\n\tcontainer: 'body',\n\tcontentClasses: '',\n\tdialogClasses: '',\n\tmessage: '',\n\tnavigationAriaLabel: '',\n\tnavigationAriaLabelledby: '',\n\tnavigationClasses: '',\n\tsize: 'small',\n})\n\n/**\n * Whether the dialog should be shown\n */\nconst open = defineModel<boolean>('open', { default: true })\n\nconst emit = defineEmits<{\n\t/**\n\t * Emitted when the dialog is closing, so the out transition did not finish yet.\n\t *\n\t * @param result - The result of the button callback (`undefined` if closing because of clicking the 'close'-button)\n\t */\n\tclosing: [result?: unknown]\n\t/**\n\t * Forwarded HTMLFormElement reset event (only if `is-form` is set).\n\t *\n\t * @param event - The forwarded form event\n\t */\n\treset: [event: Event]\n\t/**\n\t * Forwarded HTMLFormElement submit event (only if `is-form` is set)\n\t *\n\t * @param event - The submit event\n\t */\n\tsubmit: [event: SubmitEvent]\n}>()\n\nconst slots = defineSlots<{\n\tactions?: Slot\n\tdefault?: Slot\n\tnavigation?: Slot\n}>()\n\n/**\n * The dialog wrapper element\n */\nconst wrapper = useTemplateRef('wrapper-key')\n\n/**\n * We use the dialog width to decide if we collapse the navigation (flex direction row)\n */\nconst { width: dialogWidth } = useElementSize(wrapper, { width: 900, height: 0 })\n\n/**\n * Whether the navigation is collapsed due to dialog and window size\n * (collapses when modal is below: 900px modal width - 2x 12px margin)\n */\nconst isNavigationCollapsed = computed(() => dialogWidth.value < 876)\n\n/**\n * Whether a navigation was passed and the element should be displayed\n */\nconst hasNavigation = computed(() => slots?.navigation !== undefined)\n\n/**\n * The unique id of the nav element\n */\nconst navigationId = createElementId()\n\n/**\n * aria-label attribute for the nav element\n */\nconst navigationAriaLabelAttr = computed(() => props.navigationAriaLabel || undefined)\n\n/**\n * aria-labelledby attribute for the nav element\n */\nconst navigationAriaLabelledbyAttr = computed(() => {\n\tif (props.navigationAriaLabel) {\n\t\t// Not needed, already labelled by aria-label\n\t\treturn undefined\n\t}\n\t// Use dialog name as a fallback label for navigation\n\treturn props.navigationAriaLabelledby || navigationId\n})\n\nconst dialogElement = useTemplateRef<HTMLDivElement|HTMLFormElement>('dialog-key')\n/**\n * The HTML element to use for the dialog wrapper - either form or plain div\n */\nconst dialogTagName = computed(() => props.isForm && !hasNavigation.value ? 'form' : 'div')\n/**\n * Listener to assign to the dialog element\n * This only sets the `@submit` listener if the dialog element is a form\n */\nconst dialogListeners = computed(() => dialogTagName.value === 'form'\n\t? {\n\t\t/**\n\t\t * @param event - Form submit event\n\t\t */\n\t\tsubmit(event: SubmitEvent) {\n\t\t\tevent.preventDefault()\n\t\t\temit('submit', event)\n\t\t},\n\n\t\t/**\n\t\t * @param event - Form submit event\n\t\t */\n\t\treset(event: Event) {\n\t\t\tevent.preventDefault()\n\t\t\temit('reset', event)\n\t\t},\n\t}\n\t: {},\n)\n\n/**\n * If the underlying modal is shown\n */\nconst showModal = ref(true)\n\n// Because NcModal does not emit `close` when show prop is changed\n/**\n * Handle clicking a dialog button -> should close\n * @param button - The button that was clicked\n * @param result - Result of the callback function\n */\nfunction handleButtonClose(button: NcDialogButtonProps, result: unknown) {\n\t// Skip close on submit if invalid dialog\n\tif (button.type === 'submit'\n\t\t&& dialogTagName.value === 'form'\n\t\t&& 'reportValidity' in dialogElement.value!\n\t\t&& !dialogElement.value.reportValidity()) {\n\t\treturn\n\t}\n\thandleClosing(result)\n\twindow.setTimeout(() => handleClosed(), 300)\n}\n\n/**\n * Handle closing the dialog, optional out transition did not run yet\n * @param result - The result of the callback\n */\nfunction handleClosing(result?: unknown): void {\n\tshowModal.value = false\n\temit('closing', result)\n}\n\n/**\n * Handle dialog closed (out transition finished)\n */\nconst handleClosed = () => {\n\tshowModal.value = true\n\topen.value = false\n}\n\n/**\n * Properties to pass to the underlying NcModal\n */\nconst modalProps = computed(() => ({\n\tnoClose: props.noClose,\n\tcontainer: props.container === undefined ? 'body' : props.container,\n\t// we do not pass the name as we already have the name as the headline\n\t// name: props.name,\n\t// But we need to set the correct label id so the dialog is labelled\n\tlabelId: navigationId,\n\tsize: props.size,\n\tshow: open.value && showModal.value,\n\toutTransition: props.outTransition,\n\tcloseOnClickOutside: props.closeOnClickOutside,\n\tadditionalTrapElements: props.additionalTrapElements,\n}))\n</script>\n\n<template>\n\t<NcModal v-if=\"open\"\n\t\tclass=\"dialog__modal\"\n\t\t:enable-slideshow=\"false\"\n\t\tdisable-swipe\n\t\tv-bind=\"modalProps\"\n\t\t@close=\"handleClosed\"\n\t\t@update:show=\"handleClosing()\">\n\t\t<!-- The dialog name / header -->\n\t\t<h2 :id=\"navigationId\" class=\"dialog__name\" v-text=\"name\" />\n\t\t<component :is=\"dialogTagName\"\n\t\t\tref=\"dialog-key\"\n\t\t\tclass=\"dialog\"\n\t\t\t:class=\"dialogClasses\"\n\t\t\tv-on=\"dialogListeners\">\n\t\t\t<div ref=\"wrapper-key\" :class=\"['dialog__wrapper', { 'dialog__wrapper--collapsed': isNavigationCollapsed }]\">\n\t\t\t\t<!-- When the navigation is collapsed (too small dialog) it is displayed above the main content, otherwise on the inline start -->\n\t\t\t\t<nav v-if=\"hasNavigation\"\n\t\t\t\t\tclass=\"dialog__navigation\"\n\t\t\t\t\t:class=\"navigationClasses\"\n\t\t\t\t\t:aria-label=\"navigationAriaLabelAttr\"\n\t\t\t\t\t:aria-labelledby=\"navigationAriaLabelledbyAttr\">\n\t\t\t\t\t<slot name=\"navigation\" :is-collapsed=\"isNavigationCollapsed\" />\n\t\t\t\t</nav>\n\t\t\t\t<!-- Main dialog content -->\n\t\t\t\t<div class=\"dialog__content\" :class=\"contentClasses\">\n\t\t\t\t\t<slot>\n\t\t\t\t\t\t<p class=\"dialog__text\">\n\t\t\t\t\t\t\t{{ message }}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</slot>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<!-- The dialog actions aka the buttons -->\n\t\t\t<div class=\"dialog__actions\">\n\t\t\t\t<slot name=\"actions\">\n\t\t\t\t\t<NcDialogButton v-for=\"(button, idx) in buttons\"\n\t\t\t\t\t\t:key=\"idx\"\n\t\t\t\t\t\tv-bind=\"button\"\n\t\t\t\t\t\t@click=\"(_, result) => handleButtonClose(button, result)\" />\n\t\t\t\t</slot>\n\t\t\t</div>\n\t\t</component>\n\t</NcModal>\n</template>\n\n<style lang=\"scss\">\n/** When having the small dialog style we override the modal styling so dialogs look more dialog like */\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.dialog__modal .modal-wrapper--small .modal-container {\n\t\twidth: fit-content;\n\t\theight: unset;\n\t\tmax-height: 90%;\n\t\tposition: relative;\n\t\ttop: unset;\n\t\tborder-radius: var(--border-radius-element);\n\t}\n}\n</style>\n\n<style lang=\"scss\" scoped>\n.dialog {\n\theight: 100%;\n\twidth: 100%;\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\toverflow: hidden;\n\n\t&__modal {\n\t\t:deep(.modal-wrapper .modal-container) {\n\t\t\tdisplay: flex !important;\n\t\t\tpadding-block: 4px 0; // 4px to align with close button, 0 block-end to make overflowing content on scroll look nice\n\t\t\tpadding-inline: 12px 0; // Same as with padding-block, we need the actions to have a margin of 4px for the button outline\n\t\t}\n\t\t:deep(.modal-wrapper .modal-container__content) {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\toverflow: hidden; // Only overflow on the .dialog__content\n\t\t}\n\t}\n\n\t&__wrapper {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\t// Auto scale to fit\n\t\tflex: 1;\n\t\tmin-height: 0;\n\t\toverflow: hidden;\n\n\t\t&--collapsed {\n\t\t\tflex-direction: column;\n\t\t}\n\t}\n\n\t&__navigation {\n\t\tdisplay: flex;\n\t\tflex-shrink: 0;\n\t}\n\n\t// Navigation styling when side-by-side with content\n\t&__wrapper:not(&__wrapper--collapsed) &__navigation {\n\t\tflex-direction: column;\n\n\t\toverflow: hidden auto;\n\t\theight: 100%;\n\t\tmin-width: 200px;\n\t\tmargin-inline-end: 20px;\n\t}\n\n\t// Navigation styling when on top of content\n\t&__wrapper#{&}__wrapper--collapsed &__navigation {\n\t\tflex-direction: row;\n\t\tjustify-content: space-between;\n\n\t\toverflow: auto hidden;\n\t\twidth: 100%;\n\t\tmin-width: 100%;\n\t}\n\n\t&__name {\n\t\tfont-size: 21px;\n\n\t\ttext-align: center;\n\t\theight: fit-content;\n\t\tmin-height: var(--default-clickable-area);\n\t\tline-height: var(--default-clickable-area);\n\t\toverflow-wrap: break-word;\n\t\tmargin-block: 0 12px;\n\t}\n\n\t&__content {\n\t\t// Auto fit\n\t\tflex: 1;\n\t\tmin-height: 0;\n\t\toverflow: auto;\n\t\t// see .dialog__modal, we can not set the padding there to prevent floating scroll bars\n\t\tpadding-inline-end: 12px;\n\t}\n\n\t// In case only text content is show\n\t&__text {\n\t\t// Also add padding to the bottom to make it more readable\n\t\tpadding-block-end: 6px;\n\t}\n\n\t&__actions {\n\t\tdisplay: flex;\n\t\tgap: 6px;\n\t\talign-content: center;\n\t\tjustify-content: end;\n\n\t\twidth: 100%;\n\t\tmax-width: 100%;\n\t\tpadding-inline: 0 12px; // 12px to align with the overall modal padding\n\t\tmargin-inline: 0;\n\t\tmargin-block: 0;\n\n\t\t&:not(:empty) {\n\t\t\tmargin-block: 6px 12px; // only if there are actions, we add margin so if it is empty scroll content looks nice\n\t\t}\n\t}\n}\n\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t// Ensure the dialog name does not interfere with the close button\n\t.dialog__name {\n\t\ttext-align: start;\n\t\tmargin-inline-end: var(--default-clickable-area);\n\t}\n}\n</style>\n"],"names":["_useModel","_useSlots","_openBlock","_createBlock","_unref","_mergeProps","_createElementVNode","_toDisplayString","name","_resolveDynamicComponent","dialogClasses","_toHandlers","_createElementBlock","_normalizeClass","navigationClasses","_renderSlot","contentClasses","message","_Fragment","_renderList","buttons"],"mappings":"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"}

package/dist/chunks/NcDialogButton.vue_vue_type_script_setup_true_lang-BT66zCa4.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcDialogButton.vue_vue_type_script_setup_true_lang-BT66zCa4.mjs","sources":["../../src/components/NcDialogButton/NcDialogButton.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nDialog button component used by NcDialog in the actions slot to display the buttons passed by the `buttons` prop.\n</docs>\n\n<template>\n\t<NcButton :aria-label=\"label\"\n\t\t:disabled\n\t\t:type\n\t\t:variant\n\t\t@click=\"handleClick\">\n\t\t{{ label }}\n\t\t<template #icon>\n\t\t\t<!-- @slot Allow to set a custom icon for the button -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<!-- The loading state is an information that must be accessible -->\n\t\t\t\t<NcLoadingIcon v-if=\"isLoading\" :name=\"t('Loading …') /* TRANSLATORS: The button is in a loading state*/\" />\n\t\t\t\t<NcIconSvgWrapper v-else-if=\"icon !== undefined\" :svg=\"icon\" />\n\t\t\t</slot>\n\t\t</template>\n\t</NcButton>\n</template>\n\n<script setup lang=\"ts\">\nimport type { ButtonType, ButtonVariant } from '../NcButton/index.ts'\nimport { ref } from 'vue'\nimport { t } from '../../l10n.ts'\n\nimport NcButton from '../NcButton/index'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.ts'\nimport NcLoadingIcon from '../NcLoadingIcon/index.ts'\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * The function that will be called when the button is pressed.\n\t * If the function returns `false` the click is ignored and the dialog will not be closed,\n\t * which is the default behavior of \"reset\"-buttons.\n\t *\n\t * @default '() => {}'\n\t */\n\tcallback?: () => unknown|false\n\n\t/**\n\t * If the button should be shown as disabled.\n\t *\n\t * @default false\n\t */\n\tdisabled?: boolean\n\n\t/**\n\t * Optional inline SVG icon for the button.\n\t *\n\t * @default undefined\n\t */\n\ticon?: string\n\n\t/**\n\t * The label of the button.\n\t */\n\tlabel: string\n\n\t/**\n\t * The button type, see `NcButton`.\n\t *\n\t * @default 'button'\n\t */\n\ttype?: ButtonType\n\n\t/**\n\t * The button variant, see `NcButton`.\n\t *\n\t * @default 'tertiary'\n\t * @since 8.24.0\n\t */\n\tvariant?: ButtonVariant\n}>(), {\n\tcallback: () => {},\n\tdisabled: false,\n\ticon: undefined,\n\ttype: 'button',\n\tvariant: 'tertiary',\n})\n\nconst emit = defineEmits<{\n\t/**\n\t * The click event (`MouseEvent`) and the value returned by the callback\n\t */\n\t'click': [event: MouseEvent, payload: unknown]\n}>()\n\nconst isLoading = ref(false)\n\n/**\n * Handle clicking the button\n * @param e The click event\n */\nasync function handleClick(e: MouseEvent) {\n\t// Do not re-emit while loading\n\tif (isLoading.value) {\n\t\treturn\n\t}\n\n\tisLoading.value = true\n\ttry {\n\t\t// for reset buttons the default is \"false\"\n\t\tconst fallback = props.type === 'reset' ? false : undefined\n\t\tconst result = await props.callback?.() ?? fallback\n\t\tif (result !== false) {\n\t\t\temit('click', e, result)\n\t\t}\n\t} finally {\n\t\tisLoading.value = false\n\t}\n}\n</script>\n"],"names":["_createBlock","_unref","label","disabled","type","variant","_renderSlot","icon"],"mappings":";;;;;;;;;;;;;;;;;;;AAoCA,UAAM,QAAQ;AAmDd,UAAM,OAAO;AAOb,UAAM,YAAY,IAAI,KAAK;AAM3B,mBAAe,YAAY,GAAe;AAEzC,UAAI,UAAU,OAAO;AACpB;AAAA,MACD;AAEA,gBAAU,QAAQ;AAClB,UAAI;AAEH,cAAM,WAAW,MAAM,SAAS,UAAU,QAAQ;AAClD,cAAM,SAAS,MAAM,MAAM,WAAA,KAAgB;AAC3C,YAAI,WAAW,OAAO;AACrB,eAAK,SAAS,GAAG,MAAM;AAAA,QACxB;AAAA,MACD,UAAA;AACC,kBAAU,QAAQ;AAAA,MACnB;AAAA,IACD;;0BA3GCA,YAcWC,MAAA,QAAA,GAAA;AAAA,QAdA,cAAYC,KAAAA;AAAAA,QACrB,UAAAC,KAAAA;AAAAA,QACA,MAAAC,KAAAA;AAAAA,QACA,SAAAC,KAAAA;AAAAA,QACA,SAAO;AAAA,MAAA;QAEG,cAEV,MAIO;AAAA,UAJPC,WAIO,yBAJP,MAIO;AAAA,YAFe,UAAA,sBAArBN,YAA4GC,MAAA,aAAA,GAAA;AAAA;cAA3E,MAAMA,MAAA,CAAA,EAAC,WAAA;AAAA;AAAA,YAAA,yBACXM,KAAAA,SAAS,uBAAtCP,YAA+DC,MAAA,gBAAA,GAAA;AAAA;cAAb,KAAKM,KAAAA;AAAAA,YAAAA;;;yBANzD,MAAW;AAAA,UAARL,gBAAAA,gBAAAA,KAAAA,KAAK,IAAG,KACX,CAAA;AAAA,QAAA;;;;;;"}

package/dist/chunks/NcEllipsisedOption-C8uNDC-j.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcEllipsisedOption-C8uNDC-j.mjs","sources":["../../src/components/NcEllipsisedOption/NcEllipsisedOption.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nA component to display a long text with highlight support in one line truncated with ellipsis in the end but keeping up to 10 last characters.\n\nIt is supposed to be used as an `NcSelect`'s option in first place.\n\n### General usage\n\n```vue\n<template>\n\t<div>\n\t\t<h4>Plain text</h4>\n\t\t<p>{{ text }}</p>\n\n\t\t<h4>Truncated text with <code>text-overflow: ellipsis</code></h4>\n\t\t<p style=\"text-overflow: ellipsis; overflow: hidden; white-space: pre;\">{{ text }}</p>\n\n\t\t<h4>NcEllipsisedOption searching for \"Nineteen\"</h4>\n\t\t<NcEllipsisedOption :name=\"text\" :search=\"search\" />\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttext: 'One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen Sixteen Seventeen Eighteen Nineteen Twenty',\n\t\t\tsearch: 'Nineteen',\n\t\t}\n\t},\n}\n</script>\n```\n\n### Usage in `NcSelect`\n\n```vue\n<template>\n\t<NcSelect v-model=\"selected\" :options=\"options\">\n\t\t<template #option=\"option\">\n\t\t\t<NcEllipsisedOption :name=\"option.label\" />\n\t\t</template>\n\t\t<template #selected-option=\"selectedOption\">\n\t\t\t<NcEllipsisedOption :name=\"selectedOption.label\" />\n\t\t</template>\n\t</NcSelect>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\toptions: [\n\t\t\t\t'Option 1 - a short opt.',\n\t\t\t\t'Option 2 - a very very very very long opt.',\n\t\t\t].map((label) => ({ label })),\n\t\t\tselected: '',\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<span dir=\"auto\" class=\"name-parts\" :title=\"name\">\n\t\t<NcHighlight class=\"name-parts__first\"\n\t\t\t:text=\"part1\"\n\t\t\t:search=\"search\"\n\t\t\t:highlight=\"highlight1\" />\n\t\t<NcHighlight v-if=\"part2\"\n\t\t\tclass=\"name-parts__last\"\n\t\t\t:text=\"part2\"\n\t\t\t:search=\"search\"\n\t\t\t:highlight=\"highlight2\" />\n\t</span>\n</template>\n<script>\nimport { findRanges } from '../../utils/findRanges.ts'\nimport NcHighlight from '../NcHighlight/index.ts'\n\nexport default {\n\tname: 'NcEllipsisedOption',\n\n\tcomponents: {\n\t\tNcHighlight,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The text to be display in one line. If it is longer than 10 characters, it is be truncated with ellipsis in the end but keeping up to 10 last characters to fit the parent container.\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The search value to highlight in the text\n\t\t */\n\t\tsearch: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tneedsTruncate() {\n\t\t\treturn this.name && this.name.length >= 10\n\t\t},\n\t\t/**\n\t\t * Index at which to split the name if it is longer than 10 characters.\n\t\t *\n\t\t * @return {number} The position at which to split\n\t\t */\n\t\tsplit() {\n\t\t\t// leave maximum 10 letters\n\t\t\treturn this.name.length - Math.min(Math.floor(this.name.length / 2), 10)\n\t\t},\n\t\tpart1() {\n\t\t\tif (this.needsTruncate) {\n\t\t\t\treturn this.name.slice(0, this.split)\n\t\t\t}\n\t\t\treturn this.name\n\t\t},\n\t\tpart2() {\n\t\t\tif (this.needsTruncate) {\n\t\t\t\treturn this.name.slice(this.split)\n\t\t\t}\n\t\t\treturn ''\n\t\t},\n\t\t/**\n\t\t * The ranges to highlight. Since we split the string for ellipsising,\n\t\t * the Highlight component cannot figure this out itself and needs the ranges provided.\n\t\t *\n\t\t * @return {Array} The array with the ranges to highlight\n\t\t */\n\t\thighlight1() {\n\t\t\tif (!this.search) {\n\t\t\t\treturn []\n\t\t\t}\n\t\t\treturn findRanges(this.name, this.search)\n\t\t},\n\t\t/**\n\t\t * We shift the ranges for the second part by the position of the split.\n\t\t * Ranges out of the string length are discarded by the Highlight component,\n\t\t * so we don't need to take care of this here.\n\t\t *\n\t\t * @return {Array} The array with the ranges to highlight\n\t\t */\n\t\thighlight2() {\n\t\t\treturn this.highlight1.map(range => {\n\t\t\t\treturn {\n\t\t\t\t\tstart: range.start - this.split,\n\t\t\t\t\tend: range.end - this.split,\n\t\t\t\t}\n\t\t\t})\n\t\t},\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n.name-parts {\n\tdisplay: flex;\n\tmax-width: 100%;\n\tcursor: inherit;\n\t&__first {\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\t&__first,\n\t&__last {\n\t\t// prevent whitespace from being trimmed\n\t\twhite-space: pre;\n\t\tcursor: inherit;\n\t\tstrong {\n\t\t\tfont-weight: bold;\n\t\t}\n\t}\n}\n</style>\n"],"names":["NcHighlight","_createElementBlock","_createVNode","_createBlock"],"mappings":";;;AAqFA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,YAAY;AAAA,iBACXA;AAAAA;EAGD,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAKV,QAAQ;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA;;EAIX,UAAU;AAAA,IACT,gBAAgB;AACf,aAAO,KAAK,QAAQ,KAAK,KAAK,UAAU;AAAA,IACzC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAQ;AAEP,aAAO,KAAK,KAAK,SAAS,KAAK,IAAI,KAAK,MAAM,KAAK,KAAK,SAAS,CAAC,GAAG,EAAE;AAAA,IACxE;AAAA,IACA,QAAQ;AACP,UAAI,KAAK,eAAe;AACvB,eAAO,KAAK,KAAK,MAAM,GAAG,KAAK,KAAK;AAAA,MACrC;AACA,aAAO,KAAK;AAAA,IACb;AAAA,IACA,QAAQ;AACP,UAAI,KAAK,eAAe;AACvB,eAAO,KAAK,KAAK,MAAM,KAAK,KAAK;AAAA,MAClC;AACA,aAAO;AAAA,IACR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAa;AACZ,UAAI,CAAC,KAAK,QAAQ;AACjB,eAAO,CAAA;AAAA,MACR;AACA,aAAO,WAAW,KAAK,MAAM,KAAK,MAAM;AAAA,IACzC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,aAAa;AACZ,aAAO,KAAK,WAAW,IAAI,WAAS;AACnC,eAAO;AAAA,UACN,OAAO,MAAM,QAAQ,KAAK;AAAA,UAC1B,KAAK,MAAM,MAAM,KAAK;AAAA,QACvB;AAAA,MACD,CAAC;AAAA,IACF;AAAA;AAEF;;;;sBA7FCC,mBAUO,QAAA;AAAA,IAVD,KAAI;AAAA,IAAO,OAAM;AAAA,IAAc,OAAO,OAAA;AAAA;IAC3CC,YAG2B,wBAAA;AAAA,MAHd,OAAM;AAAA,MACjB,MAAM,SAAA;AAAA,MACN,QAAQ,OAAA;AAAA,MACR,WAAW,SAAA;AAAA;IACM,SAAA,sBAAnBC,YAI2B,wBAAA;AAAA;MAH1B,OAAM;AAAA,MACL,MAAM,SAAA;AAAA,MACN,QAAQ,OAAA;AAAA,MACR,WAAW,SAAA;AAAA;;;;"}

package/dist/chunks/NcEmojiPicker-DL9u7r5m.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcEmojiPicker-DL9u7r5m.mjs","sources":["../../node_modules/vue-material-design-icons/Circle.vue","../../src/components/NcEmojiPicker/NcEmojiPicker.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon circle-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"CircleIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### General description\n\nThis component allows the user to pick an emoji.\n\n### Usage\n\n* Listen to the select event and pass in an HTML element that will be treated as a trigger:\n\n```vue\n<template>\n\t<div>\n\t\t<NcEmojiPicker @select=\"select\" style=\"display: inline-block\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcEmojiPicker>\n\t\t<span>selected emoji: {{ emoji }}</span>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\temoji: '',\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tselect(emoji) {\n\t\t\t\tthis.emoji = emoji\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n* Showing a preview and keeping it open after a user selected an emoji\n\n```vue\n<template>\n\t<div>\n\t\t<NcEmojiPicker\n\t\t\t:close-on-select=\"false\"\n\t\t\t:show-preview=\"true\"\n\t\t\t@select=\"select\"\n\t\t\tstyle=\"display: inline-block\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcEmojiPicker>\n\t\t<span>selected emoji: {{ emoji }}</span>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\temoji: '',\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tselect(emoji) {\n\t\t\t\tthis.emoji = emoji\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n* Allow unselecting a previously set emoji.\n\n```vue\n<template>\n\t<div>\n\t\t<NcEmojiPicker\n\t\t\t:show-preview=\"true\"\n\t\t\t:allow-unselect=\"true\"\n\t\t\t:selected-emoji=\"emoji\"\n\t\t\t@select=\"select\"\n\t\t\t@unselect=\"unselect\"\n\t\t\tstyle=\"display: inline-block\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcEmojiPicker>\n\t\t<span>selected emoji: {{ emoji }}</span>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\temoji: '',\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tselect(emoji) {\n\t\t\t\tthis.emoji = emoji\n\t\t\t},\n\t\t\tunselect() {\n\t\t\t\tthis.emoji = ''\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n</docs>\n\n<template>\n\t<NcPopover ref=\"popover\"\n\t\tv-model:shown=\"open\"\n\t\t:container=\"container\"\n\t\tpopup-role=\"dialog\"\n\t\t:no-focus-trap=\"true /* Handled manually to remove emoji buttons from TAB sequence */\"\n\t\t@after-show=\"afterShow\"\n\t\t@after-hide=\"afterHide\">\n\t\t<template #trigger=\"slotProps\">\n\t\t\t<slot v-bind=\"slotProps\" />\n\t\t</template>\n\t\t<Picker ref=\"picker\"\n\t\t\tclass=\"nc-emoji-picker\"\n\t\t\tcolor=\"var(--color-primary-element)\"\n\t\t\t:data=\"emojiIndex\"\n\t\t\t:emoji=\"previewFallbackEmoji\"\n\t\t\t:i18n\n\t\t\t:native\n\t\t\t:emoji-size=\"20\"\n\t\t\t:per-line=\"8\"\n\t\t\t:picker-styles=\"{ width: '320px' }\"\n\t\t\t:show-preview\n\t\t\t:skin=\"currentSkinTone\"\n\t\t\t:show-skin-tones=\"false\"\n\t\t\t:title=\"previewFallbackName\"\n\t\t\trole=\"dialog\"\n\t\t\taria-modal=\"true\"\n\t\t\t:aria-label=\"t('Emoji picker')\"\n\t\t\tv-bind=\"$attrs\"\n\t\t\t@keydown.tab.prevent=\"handleTabNavigationSkippingEmojis\"\n\t\t\t@select=\"select\">\n\t\t\t<template #searchTemplate=\"{ onSearch }\">\n\t\t\t\t<div class=\"search__wrapper\">\n\t\t\t\t\t<NcTextField ref=\"search\"\n\t\t\t\t\t\tv-model=\"search\"\n\t\t\t\t\t\tclass=\"search\"\n\t\t\t\t\t\t:label=\"t('Search')\"\n\t\t\t\t\t\t:label-visible=\"true\"\n\t\t\t\t\t\t:placeholder=\"i18n.search\"\n\t\t\t\t\t\ttrailing-button-icon=\"close\"\n\t\t\t\t\t\t:trailing-button-label=\"t('Clear search')\"\n\t\t\t\t\t\t:show-trailing-button=\"search !== ''\"\n\t\t\t\t\t\t@keydown.left=\"callPickerArrowHandlerWithScrollFix('onArrowLeft', $event)\"\n\t\t\t\t\t\t@keydown.right=\"callPickerArrowHandlerWithScrollFix('onArrowRight', $event)\"\n\t\t\t\t\t\t@keydown.down=\"callPickerArrowHandlerWithScrollFix('onArrowDown', $event)\"\n\t\t\t\t\t\t@keydown.up=\"callPickerArrowHandlerWithScrollFix('onArrowUp', $event)\"\n\t\t\t\t\t\t@keydown.enter=\"$refs.picker.onEnter($event)\"\n\t\t\t\t\t\t@trailing-button-click=\"clearSearch(); onSearch('');\"\n\t\t\t\t\t\t@update:model-value=\"onSearch(search)\" />\n\t\t\t\t\t<NcColorPicker palette-only\n\t\t\t\t\t\t:container\n\t\t\t\t\t\t:palette=\"skinTonePalette\"\n\t\t\t\t\t\t:model-value=\"currentColor.color\"\n\t\t\t\t\t\t@update:model-value=\"onChangeSkinTone\">\n\t\t\t\t\t\t<NcButton :aria-label=\"t('Skin tone')\" variant=\"tertiary-no-background\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<IconCircle :style=\"{ color: currentColor.color }\" :title=\"currentColor.name\" :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t</NcColorPicker>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t<template v-if=\"allowUnselect && selectedEmoji\" #customCategory>\n\t\t\t\t<div class=\"emoji-mart-category-label\">\n\t\t\t\t\t<h3 class=\"emoji-mart-category-label\">\n\t\t\t\t\t\t{{ t('Selected') }}\n\t\t\t\t\t</h3>\n\t\t\t\t</div>\n\t\t\t\t<Emoji class=\"emoji-selected\"\n\t\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t\t:emoji=\"selectedEmoji\"\n\t\t\t\t\tnative\n\t\t\t\t\t:size=\"32\"\n\t\t\t\t\t@click=\"unselect\" />\n\t\t\t\t<Emoji class=\"emoji-delete\"\n\t\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t\temoji=\":x:\"\n\t\t\t\t\tnative\n\t\t\t\t\t:size=\"10\"\n\t\t\t\t\t@click=\"unselect\" />\n\t\t\t</template>\n\t\t</Picker>\n\t</NcPopover>\n</template>\n\n<script>\nimport { isFocusable } from 'tabbable'\nimport { Picker, Emoji, EmojiIndex } from 'emoji-mart-vue-fast/src/index.js'\nimport { useTrapStackControl } from '../../composables/useTrapStackControl.ts'\nimport { getCurrentSkinTone, setCurrentSkinTone } from '../../functions/emoji/emoji.ts'\nimport { Color } from '../../utils/colors.ts'\nimport { t } from '../../l10n.ts'\n\nimport data from 'emoji-mart-vue-fast/data/all.json'\n\nimport IconCircle from 'vue-material-design-icons/Circle.vue'\nimport NcButton from '../NcButton/index.ts'\nimport NcColorPicker from '../NcColorPicker/NcColorPicker.vue'\nimport NcPopover from '../NcPopover/index.js'\nimport NcTextField from '../NcTextField/index.ts'\n\n// Shared emoji index and skinTone for all NcEmojiPicker instances\n// Will be initialized on the first NcEmojiPicker creating\nlet emojiIndex\n\nconst i18n = {\n\tsearch: t('Search emoji'),\n\tnotfound: t('No emoji found'),\n\tcategories: {\n\t\tsearch: t('Search results'),\n\t\trecent: t('Frequently used'),\n\t\tsmileys: t('Smileys & Emotion'),\n\t\tpeople: t('People & Body'),\n\t\tnature: t('Animals & Nature'),\n\t\tfoods: t('Food & Drink'),\n\t\tactivity: t('Activities'),\n\t\tplaces: t('Travel & Places'),\n\t\tobjects: t('Objects'),\n\t\tsymbols: t('Symbols'),\n\t\tflags: t('Flags'),\n\t\tcustom: t('Custom'),\n\t},\n}\n\nconst skinTonePalette = [\n\tnew Color(255, 222, 52, t('Neutral skin color')),\n\tnew Color(228, 205, 166, t('Light skin tone')),\n\tnew Color(250, 221, 192, t('Medium light skin tone')),\n\tnew Color(174, 129, 87, t('Medium skin tone')),\n\tnew Color(158, 113, 88, t('Medium dark skin tone')),\n\tnew Color(96, 79, 69, t('Dark skin tone')),\n]\n\nexport default {\n\tname: 'NcEmojiPicker',\n\n\tcomponents: {\n\t\tIconCircle,\n\t\tNcButton,\n\t\tNcColorPicker,\n\t\tNcPopover,\n\t\tNcTextField,\n\t\tEmoji,\n\t\tPicker,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The emoji-set\n\t\t */\n\t\tactiveSet: {\n\t\t\ttype: String,\n\t\t\tdefault: 'native',\n\t\t},\n\t\t/**\n\t\t * Show preview section when hovering emoji\n\t\t */\n\t\tshowPreview: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Allow unselecting the selected emoji\n\t\t */\n\t\tallowUnselect: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Selected emoji to allow unselecting\n\t\t */\n\t\tselectedEmoji: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The fallback emoji in the preview section\n\t\t */\n\t\tpreviewFallbackEmoji: {\n\t\t\ttype: String,\n\t\t\tdefault: 'grinning',\n\t\t},\n\t\t/**\n\t\t * The fallback text in the preview section\n\t\t */\n\t\tpreviewFallbackName: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Pick an emoji'),\n\t\t},\n\t\t/**\n\t\t * Whether to close the emoji picker after picking one\n\t\t */\n\t\tcloseOnSelect: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Selector for the popover container\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: [String, Object, Element, Boolean],\n\t\t\tdefault: 'body',\n\t\t},\n\t},\n\temits: [\n\t\t'select',\n\t\t'selectData',\n\t\t'unselect',\n\t],\n\n\tsetup() {\n\t\t// If this is the first instance of NcEmojiPicker - setup EmojiIndex\n\t\tif (!emojiIndex) {\n\t\t\temojiIndex = new EmojiIndex(data)\n\t\t}\n\n\t\treturn {\n\t\t\t// Non-reactive constants\n\t\t\temojiIndex,\n\t\t\tskinTonePalette,\n\t\t\ti18n,\n\t\t}\n\t},\n\n\tdata() {\n\t\tconst currentSkinTone = getCurrentSkinTone()\n\n\t\treturn {\n\t\t\t/**\n\t\t\t * The current active color from the skin tone palette\n\t\t\t */\n\t\t\tcurrentColor: skinTonePalette[currentSkinTone - 1],\n\t\t\t/**\n\t\t\t * The current active skin tone\n\t\t\t * @type {1|2|3|4|5|6}\n\t\t\t */\n\t\t\tcurrentSkinTone,\n\t\t\tsearch: '',\n\t\t\topen: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tnative() {\n\t\t\treturn this.activeSet === 'native'\n\t\t},\n\t},\n\n\tcreated() {\n\t\t// Component has its own custom focus management\n\t\t// The global focus trap stack should be paused\n\t\tuseTrapStackControl(() => this.open)\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\tclearSearch() {\n\t\t\tthis.search = ''\n\t\t\tthis.$refs.search.focus()\n\t\t},\n\n\t\t/**\n\t\t * Update the current skin tone by the result of the color picker\n\t\t * @param {string} color Color set\n\t\t */\n\t\tonChangeSkinTone(color) {\n\t\t\tconst index = this.skinTonePalette.findIndex((tone) => tone.color.toLowerCase() === color.toLowerCase())\n\t\t\tif (index > -1) {\n\t\t\t\tthis.currentSkinTone = index + 1\n\t\t\t\tthis.currentColor = this.skinTonePalette[index]\n\t\t\t\tsetCurrentSkinTone(this.currentSkinTone)\n\t\t\t}\n\t\t},\n\n\t\tselect(emojiObject) {\n\t\t\t/**\n\t\t\t * Emits a string containing the emoji e.g. '👩🏿‍💻'\n\t\t\t */\n\t\t\tthis.$emit('select', emojiObject.native)\n\n\t\t\t/**\n\t\t\t * Emits a object with more data about the picked emoji\n\t\t\t */\n\t\t\tthis.$emit('selectData', emojiObject)\n\n\t\t\tif (this.closeOnSelect) {\n\t\t\t\tthis.open = false\n\t\t\t}\n\t\t},\n\n\t\tunselect() {\n\t\t\tthis.$emit('unselect')\n\t\t},\n\n\t\tafterShow() {\n\t\t\tthis.$refs.search.focus()\n\t\t},\n\n\t\tafterHide() {\n\t\t\t// Manually return focus to the trigger button, as we disabled focus-trap\n\t\t\t// But only if there is no focus target outside the picker, for example, input element that received focus by click closing the emoji picker\n\t\t\tif (!document.activeElement || this.$refs.picker.$el.contains(document.activeElement) || !isFocusable(document.activeElement)) {\n\t\t\t\tthis.$refs.popover.$el.querySelector('button, [role=\"button\"]')?.focus()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Manually handle Tab navigation skipping emoji buttons.\n\t\t * Navigation over emojis is handled by Arrow keys.\n\t\t * @param {KeyboardEvent} event - Keyboard event\n\t\t */\n\t\thandleTabNavigationSkippingEmojis(event) {\n\t\t\tconst current = event.target\n\t\t\tconst focusable = Array.from(this.$refs.picker.$el.querySelectorAll('button:not(.emoji-mart-emoji), input'))\n\t\t\tif (!event.shiftKey) {\n\t\t\t\tconst nextNode = focusable.find((node) => current.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_FOLLOWING) || focusable[0]\n\t\t\t\tnextNode.focus()\n\t\t\t} else {\n\t\t\t\tconst prevNode = focusable.findLast((node) => current.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_PRECEDING) || focusable.at(-1)\n\t\t\t\tprevNode.focus()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Handle arrow navigation via <Picker>'s handlers with scroll bug fix\n\t\t * @param {'onArrowLeft' | 'onArrowRight' | 'onArrowDown' | 'onArrowUp'} originalHandlerName - Picker's arrow keydown handler name\n\t\t * @param {KeyboardEvent} event - Keyboard event\n\t\t */\n\t\tasync callPickerArrowHandlerWithScrollFix(originalHandlerName, event) {\n\t\t\t// Call the original handler\n\t\t\t// See: https://github.com/serebrov/emoji-mart-vue/blob/a1ea72673a111cce78dc8caad8bc9ea3e02ad5bd/src/components/Picker.vue#L29\n\t\t\t// TODO: expose these methods via slot props in upstream library\n\t\t\tthis.$refs.picker[originalHandlerName](event)\n\n\t\t\t// Wait until emoji-mart-vue-fast scrolls\n\t\t\tawait this.$nextTick()\n\n\t\t\t// Scroll position is incorrect after emoji-mart-vue-fast scrolls...\n\t\t\t// It calculates scroll incorrectly.\n\t\t\t// It doesn't take into account, that emojis are wrapped into categories sections\n\t\t\t// See: https://github.com/serebrov/emoji-mart-vue/blob/a1ea72673a111cce78dc8caad8bc9ea3e02ad5bd/src/utils/picker.js#L244\n\t\t\t// Now scroll to the correct position\n\t\t\t// TODO: fix in upstream\n\t\t\tconst selectedEmoji = this.$refs.picker.$el.querySelector('.emoji-mart-emoji-selected')\n\t\t\tselectedEmoji?.scrollIntoView({\n\t\t\t\tblock: 'center',\n\t\t\t\tinline: 'center',\n\t\t\t})\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n@import 'emoji-mart-vue-fast/css/emoji-mart.css';\n\n.nc-emoji-picker.emoji-mart {\n\tbackground-color: var(--color-main-background) !important;\n\tborder: 0;\n\tcolor: var(--color-main-text) !important;\n\tdisplay: flex !important;\n\n\t// Reset emoji-mart styles\n\tbutton {\n\t\tborder: none;\n\t\tbackground: transparent;\n\t\tfont-size: inherit;\n\t}\n\n\t.emoji-mart-bar,\n\t.emoji-mart-anchors,\n\t.emoji-mart-search,\n\t.emoji-mart-search input,\n\t.emoji-mart-category,\n\t.emoji-mart-category-label,\n\t.emoji-mart-category-label span,\n\t.emoji-mart-skin-swatches {\n\t\tbackground-color: transparent !important;\n\t\tborder-color: var(--color-border) !important;\n\t\tcolor: inherit !important;\n\t}\n\n\t.emoji-mart-anchors {\n\t\tpadding-block: 0;\n\t\tpadding-inline: calc(2 * var(--default-grid-baseline));\n\t}\n\n\t.emoji-mart-anchor {\n\t\tborder-radius: 0;\n\t\tmargin: 0 !important;\n\t\tpadding: 0 !important;\n\t\theight: var(--clickable-area-small);\n\t\tmin-width: var(--clickable-area-small);\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--color-background-hover);\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\toutline: 2px solid var(--color-primary-element) !important;\n\t\t\toutline-offset: -2px;\n\t\t}\n\n\t\t// Icon\n\t\tdiv {\n\t\t\tdisplay: grid;\n\t\t\tplace-content: center;\n\t\t}\n\t}\n\n\t.emoji-mart-scroll {\n\t\tpadding-inline: calc(2 * var(--default-grid-baseline));\n\t\tpadding-block: 0 calc(2 * var(--default-grid-baseline));\n\t}\n\n\t.emoji-mart-category {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: repeat(8, 1fr);\n\t\tjustify-items: stretch;\n\n\t\t&.emoji-mart-no-results {\n\t\t\tgrid-template-columns: 1fr;\n\t\t\tfont-size: inherit;\n\t\t\tcolor: var(--color-text-maxcontrast) !important;\n\t\t}\n\t}\n\n\t/* Label element in the section grid */\n\tdiv.emoji-mart-category-label {\n\t\tgrid-column: span 8;\n\t\tjustify-self: stretch;\n\t}\n\n\t/* An actual heading inside the element */\n\th3.emoji-mart-category-label  {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\t// Inline with buttons\n\t\theight: var(--default-clickable-area);\n\t\tmargin: 0;\n\t\t// Inline with input\n\t\tpadding-inline: calc(2 * var(--default-grid-baseline));\n\t\tpadding-block: 0;\n\t\tuser-select: none;\n\t}\n\n\t.emoji-mart-emoji {\n\t\taspect-ratio: 1 / 1;\n\t\ttext-align: center;\n\t\tmargin: 0 !important;\n\t\tpadding: 0 !important;\n\n\t\t&:hover,\n\t\t&:focus-visible,\n\t\t&.emoji-mart-emoji-selected {\n\t\t\tbackground-color: var(--color-background-hover) !important;\n\t\t\tborder: none;\n\t\t\tborder-radius: var(--border-radius-element);\n\t\t\tbox-shadow: none !important;\n\t\t\toutline: 2px solid var(--color-primary-element) !important;\n\t\t\toutline-offset: -2px;\n\t\t}\n\n\t\t&::before {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\tspan {\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n}\n</style>\n\n<style scoped lang=\"scss\">\n.search__wrapper {\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: var(--default-grid-baseline);\n\talign-items: end;\n\tpadding-block: var(--default-grid-baseline);\n\tpadding-inline: calc(2 * var(--default-grid-baseline));\n}\n\n.row-selected {\n\tbutton, span {\n\t\tvertical-align: middle;\n\t}\n}\n\n.emoji-delete {\n\tvertical-align: top;\n\tmargin-inline-start: -21px;\n\tmargin-top: -3px;\n}\n</style>\n"],"names":["_sfc_main","_hoisted_3","_createElementBlock","_mergeProps","_createElementVNode","_openBlock","NcTextField","_createBlock","_withCtx","_renderSlot","_createVNode","_withKeys","_normalizeStyle","_toDisplayString"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/chunks/NcHeaderButton-DAxGG1vc.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcHeaderButton-DAxGG1vc.mjs","sources":["../../src/components/NcHeaderButton/NcHeaderButton.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used in the Nextcloud top header,\nsimilar to the NcHeaderMenu but to be used when only a trigger button is needed, e.g. when opening a dialog.\n\n```\n<template>\n\t<div id=\"nextcloud-header\">\n\t\t<NcHeaderButton id=\"search-dialog\"\n\t\t\taria-label=\"Search\"\n\t\t\t@click=\"showDialog = true\">\n\t\t\t<template #icon>\n\t\t\t\t<Magnify />\n\t\t\t</template>\n\t\t</NcHeaderButton>\n\n\t\t<NcDialog name=\"Search\"\n\t\t\tsize=\"normal\"\n\t\t\tv-model:open=\"showDialog\">\n\t\t\t<NcTextField label=\"Search for files, comments, contacts…\"\n\t\t\t\ttype=\"search\"\n\t\t\t\tv-model=\"query\" />\n\t\t\t<NcEmptyContent name=\"Search\"\n\t\t\t\t:description=\"query ? `No results for '${query}'` : 'Start typing to search'\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Magnify />\n\t\t\t\t</template>\n\t\t\t</NcEmptyContent>\n\t\t</NcDialog>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tquery: '',\n\t\t}\n\t},\n}\n</script>\n<style>\n#nextcloud-header {\n\tdisplay: flex;\n\tjustify-content: right;\n\tbackground-color: var(--color-primary);\n\theight: var(--header-height, 50px);\n\tpadding-inline-end: 12px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<!-- We need a wrapper for server styles to apply -->\n\t<div :id=\"id\" class=\"header-menu\">\n\t\t<NcButton :aria-label=\"ariaLabel\"\n\t\t\t:aria-describedby=\"descriptionId\"\n\t\t\tclass=\"header-menu__trigger\"\n\t\t\tsize=\"large\"\n\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t@click.prevent=\"$emit('click', $event)\">\n\t\t\t<template #icon>\n\t\t\t\t<!-- @slot Icon trigger slot. Make sure the svg path\n\t\t\t\tis at least 16px. Usually mdi icon works at 20px -->\n\t\t\t\t<slot name=\"icon\" />\n\t\t\t</template>\n\t\t</NcButton>\n\n\t\t<span v-if=\"description\"\n\t\t\t:id=\"descriptionId\"\n\t\t\tclass=\"header-menu__description hidden-visually\">\n\t\t\t{{ description }}\n\t\t</span>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nimport { createElementId } from '../../utils/createElementId.ts'\nimport NcButton from '../NcButton/index.ts'\n\ndefineProps<{\n\t/** Unique id for this menu */\n\tid: string,\n\t/** `aria-label` attribute of the button */\n\tariaLabel: string,\n\t/** Optional visually hidden description text for the button */\n\tdescription?: string\n}>()\n\ndefineEmits<{\n\tclick: [event: MouseEvent]\n}>()\n\nconst descriptionId = createElementId()\n</script>\n\n<style lang=\"scss\" scoped>\n@use '../NcHeaderMenu/header-menu__trigger.scss';\n</style>\n"],"names":["_createElementBlock","id","_createVNode","_unref","ariaLabel","_withModifiers","$emit","_renderSlot","description"],"mappings":";;;;;;;;;;;;;;;AAwGA,UAAM,gBAAgB,gBAAA;;0BAvCrBA,mBAmBM,OAAA;AAAA,QAnBA,IAAIC,KAAAA;AAAAA,QAAI,OAAM;AAAA,MAAA;QACnBC,YAWWC,MAAA,QAAA,GAAA;AAAA,UAXA,cAAYC,KAAAA;AAAAA,UACrB,oBAAkBD,MAAA,aAAA;AAAA,UACnB,OAAM;AAAA,UACN,MAAK;AAAA,UACL,SAAQ;AAAA,UACP,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAAE,cAAA,CAAA,WAAUC,KAAAA,MAAK,SAAU,MAAM,GAAA,CAAA,SAAA,CAAA;AAAA,QAAA;UAC1B,cAGV,MAAoB;AAAA,YAApBC,WAAoB,KAAA,QAAA,QAAA,CAAA,GAAA,QAAA,IAAA;AAAA,UAAA;;;QAIVC,KAAAA,4BAAZR,mBAIO,QAAA;AAAA;UAHL,IAAIG,MAAA,aAAA;AAAA,UACL,OAAM;AAAA,QAAA,mBACHK,KAAAA,WAAW,GAAA,GAAA,UAAA;;;;;;"}

package/dist/chunks/NcHeaderMenu-DcBWHaZv.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcHeaderMenu-DcBWHaZv.mjs","sources":["../../src/components/NcHeaderMenu/NcHeaderMenu.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used in the Nextcloud top header.\n\n```\n<template>\n\t<div id=\"nextcloud-header\">\n\t\t<NcHeaderMenu id=\"search\"\n\t\t\taria-label=\"Search\">\n\t\t\t<template #trigger>\n\t\t\t\t<Magnify />\n\t\t\t</template>\n\t\t\t<div>\n\t\t\t\t<NcTextField label=\"Search for files, comments, contacts…\"\n\t\t\t\t\tstyle=\"padding-inline: 8px;\"\n\t\t\t\t\ttype=\"search\"\n\t\t\t\t\tv-model=\"query\" />\n\t\t\t\t<NcEmptyContent\n\t\t\t\t\tname=\"Search\"\n\t\t\t\t\t:description=\"query ? `No results for '${query}'` : 'Start typing to search'\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Magnify />\n\t\t\t\t\t</template>\n\t\t\t\t</NcEmptyContent>\n\t\t\t</div>\n\t\t</NcHeaderMenu>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tquery: '',\n\t\t}\n\t},\n}\n</script>\n<style>\n#nextcloud-header {\n\tdisplay: flex;\n\tjustify-content: end;\n\tbackground-color: var(--color-primary);\n\theight: var(--header-height, 50px);\n\tpadding-inline-end: 12px;\n}\n</style>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport type { FocusTrap } from 'focus-trap'\n\nimport { onClickOutside } from '@vueuse/core'\nimport { createFocusTrap } from 'focus-trap'\nimport { computed, nextTick, ref, useTemplateRef, watch, type Slot } from 'vue'\nimport { useHotKey } from '../../composables/index.js'\nimport { getTrapStack } from '../../utils/focusTrap.js'\nimport { createElementId } from '../../utils/createElementId.ts'\n\nimport NcButton from '../NcButton/index.ts'\n\nconst {\n\texcludeClickOutsideSelectors = [],\n\topen = false,\n\tisNav = false,\n} = defineProps<{\n\t/**\n\t * Unique id for this menu\n\t */\n\tid: string\n\n\t/**\n\t * aria-label attribute of the menu open button\n\t */\n\tariaLabel?: string\n\n\t/**\n\t * Current menu open state\n\t */\n\topen?: boolean\n\n\t/**\n\t * Pass `true` if the header menu is used for website navigation\n\t *\n\t * The wrapper tag will be set to `nav` and its `aria-labelledby`\n\t * will be associated with the menu open button\n\t */\n\tisNav?: boolean\n\n\t/**\n\t * Additional visually hidden description text for the menu\n\t * open button\n\t */\n\tdescription?: string\n\n\t/**\n\t * A query-selector or an array of query-selectors\n\t * to be ignored when clicking outside an element\n\t */\n\texcludeClickOutsideSelectors?: string | string[]\n}>()\n\nconst emit = defineEmits<{\n\t/** Emitted when the menu is fully closed (animation done) */\n\tclosed: []\n\n\t/** Emitted when the menu is fully opened (animation done) */\n\topened: []\n\n\t/** Updated open state */\n\t'update:open': [v: boolean]\n}>()\n\ndefineSlots<{\n\t/** The menu content */\n\tdefault?: Slot\n\t/** Icon trigger slot. Make sure the svg path is at least 16px. Usually mdi icon works at 20px */\n\ttrigger?: Slot\n}>()\n\n/** Id of the menu description */\nconst descriptionId = createElementId()\n/** Id of the trigger button */\nconst triggerId = createElementId()\n/** The active focus trap (if any) */\nconst focusTrap = ref<FocusTrap>()\n/** Is the menu currently opened */\nconst isOpened = ref(open)\n/** HTML tag to use for the header menu */\nconst wrapperTag = computed(() => isNav ? 'nav' : 'div')\n\n/** The menu content container element */\nconst contentContainer = useTemplateRef('content-container-key')\n/** The overall header menu wrapping element (<nav> or <div>) */\nconst headerMenu = useTemplateRef<HTMLElement>('header-menu-key')\n/** The menu trigger button */\nconst triggerButton = useTemplateRef('trigger-button-key')\n\n// Handle click outside of the menu -> should close the menu\nconst ignore = computed(() => Array.isArray(excludeClickOutsideSelectors)\n\t? excludeClickOutsideSelectors\n\t: excludeClickOutsideSelectors.split(' '),\n)\nonClickOutside(headerMenu, () => setMenuState(false), { ignore })\n\n// Pressing escape should close the menu\nuseHotKey('Escape', () => setMenuState(false), { prevent: true })\n\n// Watch the open prop to adjust the internal opened state\nwatch(() => open, (state: boolean) => setMenuState(state))\n\n/**\n * Toggle the current menu open state\n */\nfunction toggleMenu() {\n\tsetMenuState(!isOpened.value)\n}\n\n/**\n * Set the menu opened state\n * @param state The opened state to set\n */\nasync function setMenuState(state: boolean) {\n\tif (state === isOpened.value) {\n\t\treturn\n\t}\n\n\tisOpened.value = state\n\temit('update:open', state)\n\n\t// wait one tick to make sure the rendering finished\n\tawait nextTick()\n\t// either add or clear the focus trap\n\tawait (state ? addFocusTrap() : clearFocusTrap())\n\n\t// Emit signal to mark finished toggling\n\t// @ts-expect-error This seems to be broken in Vue's typescript macro compiler...\n\temit(state ? 'opened' : 'closed')\n}\n\n/**\n * When this is role navigation, then we cannot apply a focus trap.\n * In this case we close the menu on focus-out.\n *\n * @param event the focus event\n */\nfunction onFocusOut(event: FocusEvent) {\n\t// Is not a navigation\n\tif (!isNav) {\n\t\treturn\n\t}\n\n\t// Event target is not a node\n\tif (!(event.relatedTarget instanceof Node)) {\n\t\treturn\n\t}\n\n\tif (headerMenu.value?.contains(event.relatedTarget)) {\n\t\tsetMenuState(false)\n\t}\n}\n\n/**\n * Add focus trap for accessibility.\n * Shall only be used when all children are mounted\n * and available in the DOM. We use $nextTick for that.\n */\nasync function addFocusTrap() {\n\t// We cannot add the focus trap on navigation roles\n\t// also skip if already set\n\tif (isNav || focusTrap.value) {\n\t\treturn\n\t}\n\n\t// Init focus trap\n\tfocusTrap.value = createFocusTrap(contentContainer.value!, {\n\t\tallowOutsideClick: true,\n\t\ttrapStack: getTrapStack(),\n\t\tfallbackFocus: triggerButton.value?.$el,\n\t})\n\tfocusTrap.value.activate()\n}\n\n/**\n * Deactivate and clear the focus trap\n */\nfunction clearFocusTrap() {\n\tfocusTrap.value?.deactivate()\n\tfocusTrap.value = undefined\n}\n</script>\n\n<template>\n\t<component :is=\"wrapperTag\"\n\t\t:id=\"id\"\n\t\tref=\"header-menu-key\"\n\t\t:aria-labelledby=\"isNav ? triggerId : null\"\n\t\t:class=\"{ 'header-menu--opened': isOpened }\"\n\t\tclass=\"header-menu\"\n\t\t@focusout=\"onFocusOut\">\n\t\t<!-- Trigger -->\n\t\t<NcButton :id=\"isNav ? triggerId : null\"\n\t\t\tref=\"trigger-button-key\"\n\t\t\tclass=\"header-menu__trigger\"\n\t\t\t:aria-controls=\"`header-menu-${id}`\"\n\t\t\t:aria-expanded=\"isOpened.toString()\"\n\t\t\tsize=\"large\"\n\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t@click.prevent=\"toggleMenu\">\n\t\t\t<template #icon>\n\t\t\t\t<slot name=\"trigger\" />\n\t\t\t</template>\n\t\t</NcButton>\n\n\t\t<span v-if=\"description\"\n\t\t\t:id=\"descriptionId\"\n\t\t\tclass=\"header-menu__description hidden-visually\">\n\t\t\t{{ description }}\n\t\t</span>\n\n\t\t<!-- Visual triangle -->\n\t\t<div v-show=\"isOpened\" class=\"header-menu__caret\" />\n\n\t\t<!-- Menu opened content -->\n\t\t<div v-show=\"isOpened\"\n\t\t\t:id=\"`header-menu-${id}`\"\n\t\t\tclass=\"header-menu__wrapper\">\n\t\t\t<div ref=\"content-container-key\" class=\"header-menu__content\">\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t</div>\n\t</component>\n</template>\n\n<style lang=\"scss\" scoped>\n@use './header-menu__trigger.scss';\n\n// content inner and outer margin\n// Also used for menu top-right positioning\n$externalMargin: 8px;\n\n.header-menu {\n\t&__wrapper {\n\t\tposition: fixed;\n\t\tz-index: 2000;\n\t\ttop: var(--header-height);\n\t\tinset-inline-end: 0;\n\t\tbox-sizing: border-box;\n\t\tmargin: 0 $externalMargin;\n\t\tborder-radius: var(--border-radius-element);\n\t\tbackground-color: var(--color-main-background);\n\n\t\tfilter: drop-shadow(0 1px 5px var(--color-box-shadow));\n\t}\n\n\t&__caret {\n\t\tposition: absolute;\n\t\tz-index: 2001; // Because __wrapper is 2000.\n\t\tbottom: 0;\n\t\tinset-inline-start: calc(50% - 10px);\n\t\twidth: 0;\n\t\theight: 0;\n\t\tcontent: ' ';\n\t\tpointer-events: none;\n\t\tborder: 10px solid transparent;\n\t\tborder-bottom-color: var(--color-main-background);\n\t}\n\n\t&__content {\n\t\toverflow: auto;\n\t\twidth: 350px;\n\t\tmax-width: calc(100vw - 2 * $externalMargin);\n\t\tmin-height: calc(var(--default-clickable-area) * 1.5);\n\t\tmax-height: calc(100vh - var(--header-height) * 2);\n\t\t:deep(.empty-content) {\n\t\t\tmargin: 12vh 10px;\n\t\t}\n\t}\n}\n</style>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","id","isNav","_unref","_normalizeClass","_createVNode","_renderSlot","description","_createElementBlock","_withDirectives","_createElementVNode"],"mappings":"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"}

package/dist/chunks/NcInputConfirmCancel-BG4KRrhr.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcInputConfirmCancel-BG4KRrhr.mjs","sources":["../../src/components/NcAppNavigationItem/NcInputConfirmCancel.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n# Usage\n\n```\n<NcInputConfirmCancel @confirm=\"alert('confirm')\" @cancel=\"alert('cancel')\" />\n```\n</docs>\n<template>\n\t<div class=\"app-navigation-input-confirm\">\n\t\t<form @submit.prevent=\"confirm\"\n\t\t\t@keydown.esc.exact.stop.prevent=\"cancel\"\n\t\t\t@click.stop.prevent>\n\t\t\t<input ref=\"input\"\n\t\t\t\tv-model=\"valueModel\"\n\t\t\t\ttype=\"text\"\n\t\t\t\tclass=\"app-navigation-input-confirm__input\"\n\t\t\t\t:placeholder=\"placeholder\">\n\n\t\t\t<NcButton :aria-label=\"labelConfirm\"\n\t\t\t\ttype=\"submit\"\n\t\t\t\tvariant=\"primary\"\n\t\t\t\t@click.stop.prevent=\"confirm\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconArrowRight :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\n\t\t\t<NcButton :aria-label=\"labelCancel\"\n\t\t\t\ttype=\"reset\"\n\t\t\t\t:variant=\"primary ? 'primary' : 'tertiary'\"\n\t\t\t\t@click.stop.prevent=\"cancel\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconClose :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\t\t</form>\n\t</div>\n</template>\n<script>\nimport { t } from '../../l10n.ts'\n\nimport IconArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport IconClose from 'vue-material-design-icons/Close.vue'\nimport NcButton from '../NcButton/index.js'\n\nexport default {\n\tname: 'NcInputConfirmCancel',\n\n\tcomponents: {\n\t\tIconArrowRight,\n\t\tIconClose,\n\t\tNcButton,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * If this element is used on a primary element set to true for primary styling.\n\t\t */\n\t\tprimary: {\n\t\t\tdefault: false,\n\t\t\ttype: Boolean,\n\t\t},\n\n\t\tplaceholder: {\n\t\t\tdefault: '',\n\t\t\ttype: String,\n\t\t},\n\n\t\tmodelValue: {\n\t\t\tdefault: '',\n\t\t\ttype: String,\n\t\t},\n\t},\n\n\temits: [\n\t\t'cancel',\n\t\t'confirm',\n\t\t'update:modelValue',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tlabelConfirm: t('Confirm changes'),\n\t\t\tlabelCancel: t('Cancel changes'),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tvalueModel: {\n\t\t\tget() { return this.modelValue },\n\t\t\tset(newValue) {\n\t\t\t\tthis.$emit('update:modelValue', newValue)\n\t\t\t},\n\t\t},\n\t},\n\n\tmethods: {\n\t\tconfirm() {\n\t\t\tthis.$emit('confirm')\n\t\t},\n\t\tcancel() {\n\t\t\tthis.$emit('cancel')\n\t\t},\n\t\tfocusInput() {\n\t\t\tthis.$refs.input.focus()\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n$input-height: 34px;\n$input-padding: 7px;\n$input-margin: 5px;\n\n.app-navigation-input-confirm {\n\tflex: 1 0 100%;\n\twidth: 100%;\n\n\tform {\n\t\tdisplay: flex;\n\t}\n\n\t&__input {\n\t\theight: $input-height;\n\t\tflex: 1 1 100%;\n\t\tfont-size: 100% !important;\n\t\tmargin: $input-margin !important;\n\t\tmargin-inline-start: -1px - $input-padding !important;\n\t\tpadding: $input-padding !important;\n\n\t\t&:active,\n\t\t&:focus,\n\t\t&:hover {\n\t\t\toutline: none;\n\t\t\tbackground-color: var(--color-main-background);\n\t\t\tcolor: var(--color-main-text);\n\t\t\tborder-color: var(--color-primary-element);\n\t\t}\n\t}\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_createElementVNode","_createVNode"],"mappings":";;;;;;;AAkDA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,YAAY;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA;EAGD,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,SAAS;AAAA,MACR,SAAS;AAAA,MACT,MAAM;AAAA;IAGP,aAAa;AAAA,MACZ,SAAS;AAAA,MACT,MAAM;AAAA;IAGP,YAAY;AAAA,MACX,SAAS;AAAA,MACT,MAAM;AAAA;;EAIR,OAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA;EAGD,OAAO;AACN,WAAO;AAAA,MACN,cAAc,EAAE,iBAAiB;AAAA,MACjC,aAAa,EAAE,gBAAgB;AAAA,IAChC;AAAA,EACD;AAAA,EAEA,UAAU;AAAA,IACT,YAAY;AAAA,MACX,MAAM;AAAE,eAAO,KAAK;AAAA,MAAW;AAAA,MAC/B,IAAI,UAAU;AACb,aAAK,MAAM,qBAAqB,QAAQ;AAAA,MACzC;AAAA;;EAIF,SAAS;AAAA,IACR,UAAU;AACT,WAAK,MAAM,SAAS;AAAA,IACrB;AAAA,IACA,SAAS;AACR,WAAK,MAAM,QAAQ;AAAA,IACpB;AAAA,IACA,aAAa;AACZ,WAAK,MAAM,MAAM,MAAK;AAAA,IACvB;AAAA;AAEF;AAnGM,MAAA,aAAA,EAAA,OAAM,+BAA8B;;;;;;AAAzC,SAAAA,UAAA,GAAAC,mBA4BM,OA5BN,YA4BM;AAAA,IA3BLC,mBA0BO,QAAA;AAAA,MA1BA,+DAAgB,SAAA,WAAA,SAAA,QAAA,GAAA,IAAA,GAAO,CAAA,SAAA,CAAA;AAAA,MAC5B,yEAAgC,SAAA,UAAA,SAAA,OAAA,GAAA,IAAA,GAAM,CAAA,SAAA,QAAA,SAAA,CAAA,GAAA,CAAA,KAAA,CAAA;AAAA,MACtC,iDAAD,MAAA;AAAA,MAAA,GAAmB,CAAA,QAAA,SAAA,CAAA;AAAA;qBACnBA,mBAI4B,SAAA;AAAA,QAJrB,KAAI;AAAA,qEACD,SAAA,aAAU;AAAA,QACnB,MAAK;AAAA,QACL,OAAM;AAAA,QACL,aAAa,OAAA;AAAA;qBAHL,SAAA,UAAU;AAAA;MAKpBC,YAOW,qBAAA;AAAA,QAPA,cAAY,MAAA;AAAA,QACtB,MAAK;AAAA,QACL,SAAQ;AAAA,QACP,uBAAoB,SAAA,SAAO,CAAA,QAAA,SAAA,CAAA;AAAA;QACjB,cACV,MAA6B;AAAA,UAA7BA,YAA6B,2BAAA,EAAZ,MAAM,GAAE,CAAA;AAAA;;;MAI3BA,YAOW,qBAAA;AAAA,QAPA,cAAY,MAAA;AAAA,QACtB,MAAK;AAAA,QACJ,SAAS,OAAA,UAAO,YAAA;AAAA,QAChB,uBAAoB,SAAA,QAAM,CAAA,QAAA,SAAA,CAAA;AAAA;QAChB,cACV,MAAwB;AAAA,UAAxBA,YAAwB,sBAAA,EAAZ,MAAM,GAAE,CAAA;AAAA;;;;;;;"}

package/dist/chunks/NcInputField-Cz1RwzSy.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcInputField-Cz1RwzSy.mjs","sources":["../../src/components/NcInputField/NcInputField.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Description\n\nThis component is used by the other Fields components.\nIt extends and styles an HTMLInputElement.\n\nYou cannot use it as is. This is here for documentation purposes.\nSee the other field components.\n\nFor a list of all available props and attributes, please check the [HTMLInputElement documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n\n</docs>\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\nimport type { VueClassType } from '../../utils/VueTypes.ts'\n\nimport { mdiAlertCircle, mdiCheck } from '@mdi/js'\nimport { computed, useAttrs, useTemplateRef, warn } from 'vue'\nimport NcButton from '../NcButton/index.ts'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\n\nexport interface NcInputFieldProps {\n\t/**\n\t * Class to add to the root component.\n\t */\n\tclass?: VueClassType\n\n\t/**\n\t * Class to add to the input field.\n\t * Necessary to use NcInputField in the NcActionInput component.\n\t */\n\tinputClass?: VueClassType\n\n\t/**\n\t * HTML id of the input field\n\t */\n\tid?: string\n\n\t/**\n\t * The input label, always provide one for accessibility purposes.\n\t *\n\t * Note: If the background color is not `--color-main-background` consider using an external label instead (see `labelOutside`).\n\t */\n\tlabel?: string\n\n\t/**\n\t * Pass in true if you want to use an external label. This is useful\n\t * if you need a label that looks different from the one provided by\n\t * this component\n\t */\n\tlabelOutside?: boolean\n\n\t/**\n\t * The type of the input element\n\t */\n\ttype?: 'text' | 'password' | 'email' | 'tel' | 'url' | 'search' | 'number'\n\n\t/**\n\t * The placeholder of the input.\n\t */\n\tplaceholder?: string\n\n\t/**\n\t * Controls whether to display the trailing button.\n\t */\n\tshowTrailingButton?: boolean\n\n\t/**\n\t * Label of the trailing button\n\t *\n\t * Required when showTrailingButton is set\n\t */\n\ttrailingButtonLabel?: string\n\n\t/**\n\t * Toggles the success state of the component. Adds a checkmark icon.\n\t */\n\tsuccess?: boolean\n\n\t/**\n\t * Toggles the error state of the component. Adds an error icon.\n\t */\n\terror?: boolean\n\n\t/**\n\t * Additional helper text message\n\t *\n\t * This will be displayed beneath the input field. In case the field is\n\t * also marked as having an error, the text will be displayed in red.\n\t */\n\thelperText?: string\n\n\t/**\n\t * Disable the input field\n\t */\n\tdisabled?: boolean\n\n\t/**\n\t * Specifies whether the input should have a pill form.\n\t * By default, input has rounded corners.\n\t */\n\tpill?: boolean\n}\n\nconst props = withDefaults(defineProps<NcInputFieldProps>(), {\n\tclass: '',\n\thelperText: '',\n\tid: () => createElementId(),\n\tinputClass: '',\n\tlabel: undefined,\n\tplaceholder: undefined,\n\ttrailingButtonLabel: undefined,\n\ttype: 'text',\n})\n\n/**\n * The value of the input field\n * If type is 'number' and a number is passed as value than the type of `update:value` will also be 'number'\n */\nconst modelValue = defineModel<string|number>({ required: true })\n\nconst emit = defineEmits<{\n\ttrailingButtonClick: [event: MouseEvent]\n}>()\n\ndefineOptions({\n\tinheritAttrs: false,\n})\n\n// public API\ndefineExpose({\n\tfocus,\n\tselect,\n})\n\ndefineSlots<{\n\t/**\n\t * Leading icon, set the size to 20.\n\t */\n\ticon?: Slot\n\n\t/**\n\t * Icon for the trailing button.\n\t */\n\t'trailing-button-icon'?: Slot\n}>()\n\nconst attrs = useAttrs()\n\nconst input = useTemplateRef('input-key')\n\nconst hasTrailingIcon = computed(() => props.showTrailingButton || props.success)\n\nconst isValidLabel = computed(() => {\n\tconst isValidLabel = props.label || props.labelOutside\n\tif (!isValidLabel) {\n\t\twarn('You need to add a label to the NcInputField component. Either use the prop label or use an external one, as per the example in the documentation.')\n\t}\n\treturn isValidLabel\n})\n\nconst ariaDescribedby = computed(() => {\n\tconst ariaDescribedby: string[] = []\n\tif (props.helperText) {\n\t\tariaDescribedby.push(`${props.id}-helper-text`)\n\t}\n\tif (attrs['aria-describedby']) {\n\t\tariaDescribedby.push(String(attrs['aria-describedby']))\n\t}\n\treturn ariaDescribedby.join(' ') || undefined\n})\n\n/**\n * Focus the input element\n *\n * @param options - Focus options\n * @public\n */\nfunction focus(options?: FocusOptions) {\n\tinput.value!.focus(options)\n}\n\n/**\n * Select all the text in the input\n *\n * @public\n */\nfunction select() {\n\tinput.value!.select()\n}\n\n/**\n * Handle the input event of the HTML input.\n * Parses numbers in case of numeric type.\n *\n * @param event - The input event\n */\nfunction handleInput(event: Event) {\n\tconst target = event.target as HTMLInputElement\n\tmodelValue.value = props.type === 'number' && typeof modelValue.value === 'number'\n\t\t? parseFloat(target.value)\n\t\t: target.value\n}\n</script>\n\n<template>\n\t<div class=\"input-field\"\n\t\t:class=\"[{\n\t\t\t'input-field--disabled': disabled,\n\t\t\t'input-field--error': error,\n\t\t\t'input-field--label-outside': labelOutside || !isValidLabel,\n\t\t\t'input-field--leading-icon': !!$slots.icon,\n\t\t\t'input-field--trailing-icon': hasTrailingIcon,\n\t\t\t'input-field--pill': pill,\n\t\t\t'input-field--success': success,\n\t\t}, $props.class]\">\n\t\t<div class=\"input-field__main-wrapper\">\n\t\t\t<input v-bind=\"$attrs\"\n\t\t\t\t:id\n\t\t\t\tref=\"input-key\"\n\t\t\t\t:aria-describedby=\"ariaDescribedby\"\n\t\t\t\taria-live=\"polite\"\n\t\t\t\tclass=\"input-field__input\"\n\t\t\t\t:class=\"inputClass\"\n\t\t\t\t:disabled\n\t\t\t\t:placeholder\n\t\t\t\t:type\n\t\t\t\t:value=\"modelValue.toString()\"\n\t\t\t\t@input=\"handleInput\">\n\t\t\t<!-- Label -->\n\t\t\t<label v-if=\"!labelOutside && isValidLabel\"\n\t\t\t\tclass=\"input-field__label\"\n\t\t\t\t:for=\"id\">\n\t\t\t\t{{ label }}\n\t\t\t</label>\n\n\t\t\t<!-- Leading icon -->\n\t\t\t<div v-show=\"!!$slots.icon\" class=\"input-field__icon input-field__icon--leading\">\n\t\t\t\t<slot name=\"icon\" />\n\t\t\t</div>\n\n\t\t\t<!-- trailing button -->\n\t\t\t<NcButton v-if=\"showTrailingButton\"\n\t\t\t\tclass=\"input-field__trailing-button\"\n\t\t\t\t:aria-label=\"trailingButtonLabel\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t\t@click=\"emit('trailingButtonClick', $event)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<slot name=\"trailing-button-icon\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\n\t\t\t<!-- Success and error icons -->\n\t\t\t<div v-else-if=\"success || error\"\n\t\t\t\tclass=\"input-field__icon input-field__icon--trailing\">\n\t\t\t\t<NcIconSvgWrapper v-if=\"success\" :path=\"mdiCheck\" />\n\t\t\t\t<NcIconSvgWrapper v-else :path=\"mdiAlertCircle\" />\n\t\t\t</div>\n\t\t</div>\n\t\t<p v-if=\"helperText\"\n\t\t\t:id=\"`${id}-helper-text`\"\n\t\t\tclass=\"input-field__helper-text-message\">\n\t\t\t<NcIconSvgWrapper v-if=\"success\" class=\"input-field__helper-text-message__icon\" :path=\"mdiCheck\" />\n\t\t\t<NcIconSvgWrapper v-else-if=\"error\" class=\"input-field__helper-text-message__icon\" :path=\"mdiAlertCircle\" />\n\t\t\t{{ helperText }}\n\t\t</p>\n\t</div>\n</template>\n\n<style lang=\"scss\" scoped>\n\n.input-field {\n\t--input-border-radius: var(--border-radius-element);\n\t// The padding before the input can start (leading button or border)\n\t--input-padding-start: var(--border-radius-element);\n\t// The padding where the input has to end (trailing button or border)\n\t--input-padding-end: var(--border-radius-element);\n\t// positional styles\n\tposition: relative;\n\twidth: 100%;\n\tmargin-block-start: 6px; // for the label in active state\n\n\t&--disabled {\n\t\topacity: 0.4;\n\t\tfilter: saturate(0.4);\n\t}\n\n\t// If there is no internal label we reset the margin reserved for it\n\t&--label-outside {\n\t\tmargin-block-start: 0;\n\t}\n\n\t&--leading-icon {\n\t\t--input-padding-start: calc(var(--default-clickable-area) - var(--default-grid-baseline));\n\t}\n\n\t&--trailing-icon {\n\t\t--input-padding-end: calc(var(--default-clickable-area) - var(--default-grid-baseline));\n\t}\n\n\t&--pill {\n\t\t--input-border-radius: var(--border-radius-pill);\n\t}\n\n\t&__main-wrapper {\n\t\theight: var(--default-clickable-area);\n\t\tposition: relative;\n\t}\n\n\t&__input {\n\t\t// If border width differes between focused and unfocused we need to compensate to prevent jumping\n\t\t--input-border-width-offset: calc(var(--border-width-input-focused, 2px) - var(--border-width-input, 2px));\n\t\tbackground-color: var(--color-main-background);\n\t\tcolor: var(--color-main-text);\n\t\tborder: var(--border-width-input, 2px) solid var(--color-border-maxcontrast);\n\t\tborder-radius: var(--input-border-radius);\n\n\t\tcursor: pointer;\n\t\t-webkit-appearance: textfield !important;\n\t\t-moz-appearance: textfield !important;\n\t\tappearance: textfield !important;\n\n\t\tfont-size: var(--default-font-size);\n\t\ttext-overflow: ellipsis;\n\n\t\theight: calc(var(--default-clickable-area) - 2 * var(--input-border-width-offset)) !important;\n\t\twidth: 100%;\n\n\t\tpadding-inline: calc(var(--input-padding-start) + var(--input-border-width-offset)) calc(var(--input-padding-end) + var(--input-border-width-offset));\n\t\tpadding-block: var(--input-border-width-offset);\n\n\t\t&::placeholder {\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\n\t\t// prevent Blink and WebKit to add an additional button when type is set to search\n\t\t// we have our properly styled trailing button anyways.\n\t\t&::-webkit-search-cancel-button {\n\t\t\t// its a weird bug in Blink that this rule must not be grouped with the other selectors below.\n\t\t\t// otherwise it is not recognized by Blink\n\t\t\tdisplay: none;\n\t\t}\n\t\t&::-webkit-search-decoration,\n\t\t&::-webkit-search-results-button,\n\t\t&::-webkit-search-results-decoration,\n\t\t&::-ms-clear {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t&:active:not([disabled]),\n\t\t&:hover:not([disabled]),\n\t\t&:focus:not([disabled]) {\n\t\t\tborder-color: var(--color-main-text);\n\t\t\tborder-width: var(--border-width-input-focused, 2px);\n\t\t\tbox-shadow: 0 0 0 2px var(--color-main-background) !important;\n\t\t\t// Reset padding offset when focused\n\t\t\t--input-border-width-offset: 0px;\n\t\t}\n\n\t\t&:focus + .input-field__label,\n\t\t&:hover:not(:placeholder-shown) + .input-field__label {\n\t\t\tcolor: var(--color-main-text);\n\t\t}\n\n\t\t&:focus {\n\t\t\tcursor: text;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: unset !important; // Override server rules\n\t\t}\n\t}\n\n\t// Hide placeholder while not focussed -> show label instead (only if internal label is used)\n\t&:not(&--label-outside) &__input:not(:focus)::placeholder {\n\t\topacity: 0;\n\t}\n\n\t&__label {\n\t\t--input-label-font-size: var(--default-font-size);\n\t\tfont-size: var(--input-label-font-size);\n\n\t\tposition: absolute;\n\t\tmargin-inline: var(--input-padding-start) var(--input-padding-end);\n\t\tmax-width: fit-content;\n\t\tinset-block-start: calc((var(--default-clickable-area) - 1lh) / 2); // center the label vertically\n\t\tinset-inline: var(--border-width-input-focused, 2px);\n\n\t\t// Fix color so that users do not think the input already has content\n\t\tcolor: var(--color-text-maxcontrast);\n\t\t// only one line labels are allowed\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\t// forward events to input\n\t\tpointer-events: none;\n\t\t// Position transition\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick), background-color var(--animation-quick) var(--animation-slow);\n\t}\n\n\t&__input:focus + &__label,\n\t&__input:not(:placeholder-shown) + &__label {\n\t\t--input-label-font-size: 13px; // minimum allowed font size for accessibility\n\t\tline-height: 1.5; // minimum allowed line height for accessibility\n\t\t// 1.5 * font-size = line-height; line-height / 2 for centering and make it negative as we need to move outside the element\n\t\tinset-block-start: calc(-1.5 * var(--input-label-font-size) / 2);\n\t\tfont-weight: 500;\n\t\tborder-radius: var(--default-grid-baseline) var(--default-grid-baseline) 0 0;\n\t\tbackground-color: var(--color-main-background);\n\t\tpadding-inline: var(--default-grid-baseline);\n\t\tmargin-inline: calc(var(--input-padding-start) - var(--default-grid-baseline)) calc(var(--input-padding-end) - var(--default-grid-baseline));\n\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick);\n\t}\n\n\t&__icon {\n\t\tposition: absolute;\n\t\theight: var(--default-clickable-area);\n\t\twidth: var(--default-clickable-area);\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\topacity: 0.7;\n\n\t\tinset-block-end: 0;\n\n\t\t&--leading {\n\t\t\tinset-inline-start: 0px;\n\t\t}\n\n\t\t&--trailing {\n\t\t\tinset-inline-end: 0px;\n\t\t}\n\t}\n\n\t&__trailing-button {\n\t\t--button-size: calc(var(--default-clickable-area) - 2 * var(--border-width-input-focused, 2px)) !important;\n\t\t--button-radius: calc(var(--input-border-radius) - var(--border-width-input-focused, 2px)); // lower radius as size is smaller\n\n\t\t&.button-vue {\n\t\t\tposition: absolute;\n\t\t\ttop: var(--border-width-input-focused, 2px);\n\t\t\tinset-inline-end: var(--border-width-input-focused, 2px);\n\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: none !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__helper-text-message {\n\t\tpadding-block: 4px;\n\t\tpadding-inline: var(--border-radius-element);\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tcolor: var(--color-text-maxcontrast);\n\n\t\t&__icon {\n\t\t\tmargin-inline-end: 8px;\n\t\t}\n\t}\n\n\t&--error {\n\t\t.input-field__helper-text-message,\n\t\t.input-field__icon--trailing {\n\t\t\tcolor: var(--color-text-error, var(--color-error));\n\t\t}\n\t}\n\n\t&--error .input-field__input,\n\t&__input:user-invalid {\n\t\tborder-color: var(--color-border-error, var(--color-error)) !important; //Override hover border color\n\t\t&:focus-visible {\n\t\t\tbox-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px\n\t\t}\n\t}\n\n\t&--success {\n\t\t.input-field__input {\n\t\t\tborder-color: var(--color-border-success, var(--color-success)) !important; //Override hover border color\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px\n\t\t\t}\n\t\t}\n\t\t.input-field__helper-text-message__icon {\n\t\t\tcolor: var(--color-border-success, var(--color-success));\n\t\t}\n\t}\n}\n</style>\n"],"names":["_useModel","isValidLabel","ariaDescribedby","_createElementBlock","disabled","error","labelOutside","$slots","pill","success","$props","_createElementVNode","_mergeProps","id","inputClass","placeholder","type","label","_withDirectives","_renderSlot","showTrailingButton","_createBlock","_unref","trailingButtonLabel","_openBlock","helperText","_createTextVNode"],"mappings":"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"}

package/dist/chunks/NcListItem-CwAOX69Q.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcListItem-CwAOX69Q.mjs","sources":["../../src/components/NcListItem/NcListItem.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### Default Usage\n\n```vue\n<template>\n\t<ul>\n\t\t<NcListItem active\n\t\t\tbold\n\t\t\t:counter-number=\"123\"\n\t\t\tcounterType=\"highlighted\"\n\t\t\tdetails=\"1h\"\n\t\t\tname=\"This is an active element with highlighted counter\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#fff\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"This is an active element with outlined counter\"\n\t\t\t:bold=\"false\"\n\t\t\t:active=\"true\"\n\t\t\t:counter-number=\"123\"\n\t\t\tcounterType=\"outlined\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#fff\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"This is an active element with normal counter\"\n\t\t\t:bold=\"false\"\n\t\t\t:active=\"true\"\n\t\t\t:counter-number=\"123\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #details>\n\t\t\t\t<LinkIcon :size=\"16\"/>\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#fff\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Name of the element with highlighted counter\"\n\t\t\tbold\n\t\t\t:force-display-actions=\"true\"\n\t\t\tdetails=\"1h\"\n\t\t\t:counter-number=\"123\"\n\t\t\tcounterType=\"highlighted\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Name of the element with outlined counter\"\n\t\t\t:bold=\"false\"\n\t\t\t:force-display-actions=\"true\"\n\t\t\t:counter-number=\"123\"\n\t\t\tcounterType=\"outlined\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Name of the element with normal counter\"\n\t\t\t:bold=\"false\"\n\t\t\t:force-display-actions=\"true\"\n\t\t\tdetails=\"1h\"\n\t\t\t:counter-number=\"123\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Name of the element\"\n\t\t\t:bold=\"false\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #name>\n\t\t\t\t<span style=\"display: flex; gap: 0.5rem; color: var(--color-favorite);\">\n\t\t\t\t\tFlexible styling within the first line of the component\n\t\t\t\t\t<div style=\"color: var(--color-text-error, var(--color-error));\">\n\t\t\t\t\t\tlike this.\n\t\t\t\t\t</div>\n\t\t\t\t</span>\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #details>\n\t\t\t\t<LinkIcon :size=\"16\"/>\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#0082c9\"/>\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"Without subname, Name of the element\"\n\t\t\t:bold=\"false\"\n\t\t\tdetails=\"1h\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#0082c9\"/>\n\t\t\t</template>\n\t\t</NcListItem>\n\t</ul>\n</template>\n\n<script>\n\timport CheckboxBlankCircle from 'vue-material-design-icons/CheckboxBlankCircle'\n\timport LinkIcon from 'vue-material-design-icons/Link'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tCheckboxBlankCircle,\n\t\t\tLinkIcon,\n\t\t}\n\t}\n</script>\n\n```\n\n### NcListItem one line mode\n```vue\n<NcListItem active\n\t:bold=\"false\"\n\t:counter-number=\"123\"\n\tcounterType=\"highlighted\"\n\tdetails=\"1h\"\n\tname=\"This is an active element with highlighted counter\"\n\tone-line>\n\t<template #icon>\n\t\t<NcAvatar disable-menu :size=\"34\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t</template>\n\t<template #subname>\n\t\tIn this slot you can put both text and other components such as icons\n\t</template>\n\t<template #indicator>\n\t\t<!-- Color dot -->\n\t\t<CheckboxBlankCircle :size=\"20\" fill-color=\"#fff\" />\n\t</template>\n\t<template #actions>\n\t\t<NcActionButton>\n\t\t\tButton one\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\tButton two\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\tButton three\n\t\t</NcActionButton>\n\t</template>\n</NcListItem>\n```\n### NcListItem with extra actions slot and customized icon\n\nThe `extra-actions` slot can be used to add other interactive components.\n\nThe `actions-icon` slot can be used to pass icon to the inner NcActions component.\n\n```vue\n<template>\n\t<div>\n\t\t<NcListItem\n\t\t\tname=\"This is an active element with extra actions slot\"\n\t\t\tbold\n\t\t\t:active=\"true\"\n\t\t\t:force-display-actions=\"true\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #extra-actions>\n\t\t\t\t<NcButton variant=\"primary\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconCog :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t</template>\n\t\t\t<template #actions-icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\tname=\"This is an element with extra actions slot\"\n\t\t\tbold>\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #extra-actions>\n\t\t\t\t<NcButton variant=\"tertiary\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconPencil :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t\t<NcButton variant=\"tertiary\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconCog :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t</template>\n\t\t\t<template #actions-icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t</div>\n</template>\n<script>\n\timport IconCog from 'vue-material-design-icons/Cog.vue'\n\timport IconNoteText from 'vue-material-design-icons/NoteText.vue'\n\timport IconPencil from 'vue-material-design-icons/Pencil.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconCog,\n\t\t\tIconNoteText,\n\t\t\tIconPencil,\n\t\t},\n\t}\n</script>\n```\n### NcListItem compact mode\n```vue\n<template>\n\t<ul style=\"width: 350px;\">\n\t\t<NcListItem active\n\t\t\tcompact\n\t\t\tname=\"Active item\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem compact\n\t\t\tname=\"Name of the element\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem compact\n\t\t\tname=\"Name of the element\"\n\t\t\t:counter-number=\"1\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tThis one is with subname\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem compact\n\t\t\tname=\"Name of the element\"\n\t\t\t:counter-number=\"3\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tThis one is with subname\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem compact\n\t\t\tname=\"Name of the element\"\n\t\t\t:counter-number=\"4\"\n\t\t\thref=\"https://nextcloud.com\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tThis one is with an external link\n\t\t\t</template>\n\t\t</NcListItem>\n\t</ul>\n</template>\n<script>\n\timport IconNoteText from 'vue-material-design-icons/NoteText.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconNoteText,\n\t\t},\n\t}\n</script>\n```\n</docs>\n\n<template>\n\t<!-- This wrapper can be either a router link or a `<li>` -->\n\t<component :is=\"to ? 'router-link' : 'NcVNodes'\"\n\t\tv-slot=\"{ href: routerLinkHref, navigate, isActive }\"\n\t\tv-bind=\"{ ...to && { custom: true, to } }\">\n\t\t<li class=\"list-item__wrapper\"\n\t\t\t:class=\"{ 'list-item__wrapper--active' : active ?? isActive }\"\n\t\t\tv-bind=\"$attrs\">\n\t\t\t<div ref=\"list-item\"\n\t\t\t\tclass=\"list-item\"\n\t\t\t\t:class=\"{\n\t\t\t\t\t'list-item--compact': compact,\n\t\t\t\t\t'list-item--one-line': oneLine,\n\t\t\t\t}\"\n\t\t\t\t@mouseover=\"handleMouseover\"\n\t\t\t\t@mouseleave=\"handleMouseleave\">\n\t\t\t\t<a :id=\"anchorId || undefined\"\n\t\t\t\t\t:aria-label=\"linkAriaLabel\"\n\t\t\t\t\tclass=\"list-item__anchor\"\n\t\t\t\t\t:href=\"routerLinkHref || href\"\n\t\t\t\t\t:target=\"target || (href === '#' ? undefined : '_blank')\"\n\t\t\t\t\t:rel=\"href === '#' ? undefined : 'noopener noreferrer'\"\n\t\t\t\t\t@focus=\"showActions\"\n\t\t\t\t\t@focusout=\"handleBlur\"\n\t\t\t\t\t@click=\"onClick($event, navigate, routerLinkHref)\"\n\t\t\t\t\t@keydown.esc=\"hideActions\">\n\t\t\t\t\t<!-- @slot This slot is used for the NcAvatar or icon, the content of this slot must not be interactive -->\n\t\t\t\t\t<slot name=\"icon\" />\n\n\t\t\t\t\t<!-- Main content -->\n\t\t\t\t\t<div class=\"list-item-content\">\n\t\t\t\t\t\t<div class=\"list-item-content__main\">\n\t\t\t\t\t\t\t<div class=\"list-item-content__name\">\n\t\t\t\t\t\t\t\t<!-- @slot Slot for the first line of the component. prop 'name' is used as a fallback is no slots are provided -->\n\t\t\t\t\t\t\t\t<slot name=\"name\">{{ name }}</slot>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div v-if=\"hasSubname\"\n\t\t\t\t\t\t\t\tclass=\"list-item-content__subname\"\n\t\t\t\t\t\t\t\t:class=\"{'list-item-content__subname--bold': bold}\">\n\t\t\t\t\t\t\t\t<!-- @slot Slot for the second line of the component -->\n\t\t\t\t\t\t\t\t<slot name=\"subname\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"list-item-content__details\">\n\t\t\t\t\t\t\t<div v-if=\"showDetails\" class=\"list-item-details__details\">\n\t\t\t\t\t\t\t\t<!-- @slot This slot is used for some details in form of icon (prop `details` as a fallback) -->\n\t\t\t\t\t\t\t\t<slot name=\"details\">{{ details }}</slot>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<!-- Counter and indicator -->\n\t\t\t\t\t\t\t<div v-if=\"counterNumber !== 0 || hasIndicator\"\n\t\t\t\t\t\t\t\tv-show=\"showAdditionalElements\"\n\t\t\t\t\t\t\t\tclass=\"list-item-details__extra\">\n\t\t\t\t\t\t\t\t<NcCounterBubble v-if=\"counterNumber !== 0\"\n\t\t\t\t\t\t\t\t\t:count=\"counterNumber\"\n\t\t\t\t\t\t\t\t\t:active=\"active ?? isActive\"\n\t\t\t\t\t\t\t\t\tclass=\"list-item-details__counter\"\n\t\t\t\t\t\t\t\t\t:type=\"counterType\" />\n\n\t\t\t\t\t\t\t\t<span v-if=\"hasIndicator\" class=\"list-item-details__indicator\">\n\t\t\t\t\t\t\t\t\t<!-- @slot This slot is used for some indicator in form of icon -->\n\t\t\t\t\t\t\t\t\t<slot name=\"indicator\" />\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</a>\n\n\t\t\t\t<div v-if=\"$slots['extra-actions']\" class=\"list-item-content__extra-actions\">\n\t\t\t\t\t<!-- @slot Extra elements next to the right side quick menu -->\n\t\t\t\t\t<slot name=\"extra-actions\" />\n\t\t\t\t</div>\n\n\t\t\t\t<!-- Actions -->\n\t\t\t\t<div v-show=\"forceDisplayActions || displayActionsOnHoverFocus\"\n\t\t\t\t\tclass=\"list-item-content__actions\"\n\t\t\t\t\t@focusout=\"handleBlur\">\n\t\t\t\t\t<NcActions ref=\"actions\"\n\t\t\t\t\t\t:primary=\"active ?? isActive\"\n\t\t\t\t\t\t:force-menu=\"forceMenu\"\n\t\t\t\t\t\t:aria-label=\"actionsAriaLabel\"\n\t\t\t\t\t\t@update:open=\"handleActionsUpdateOpen\">\n\t\t\t\t\t\t<template v-if=\"$slots['actions-icon']\" #icon>\n\t\t\t\t\t\t\t<!-- @slot Provide the custom icon for the right side quick menu -->\n\t\t\t\t\t\t\t<slot name=\"actions-icon\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<!-- @slot Provide the actions for the right side quick menu -->\n\t\t\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t\t</NcActions>\n\t\t\t\t</div>\n\n\t\t\t\t<div v-if=\"$slots.extra\" class=\"list-item__extra\">\n\t\t\t\t\t<!-- @slot Extra elements below the item -->\n\t\t\t\t\t<slot name=\"extra\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</li>\n\t</component>\n</template>\n\n<script>\nimport NcActions from '../NcActions/index.js'\nimport NcCounterBubble from '../NcCounterBubble/index.ts'\nimport NcVNodes from '../NcVNodes/index.ts'\n\nexport default {\n\tname: 'NcListItem',\n\n\tcomponents: {\n\t\tNcActions,\n\t\tNcCounterBubble,\n\t\tNcVNodes,\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * The details text displayed in the upper right part of the component\n\t\t */\n\t\tdetails: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Name (first line of text)\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * The route for the router link.\n\t\t */\n\t\tto: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * The value for the external link\n\t\t */\n\t\thref: {\n\t\t\ttype: String,\n\t\t\tdefault: '#',\n\t\t},\n\n\t\ttarget: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Id for the `<a>` element\n\t\t */\n\t\tanchorId: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Make subname bold\n\t\t */\n\t\tbold: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Show the NcListItem in compact design\n\t\t */\n\t\tcompact: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Toggle the active state of the component\n\t\t */\n\t\tactive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Aria label for the wrapper element\n\t\t */\n\t\tlinkAriaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Aria label for the actions toggle\n\t\t */\n\t\tactionsAriaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * If different from 0 this component will display the\n\t\t * NcCounterBubble component\n\t\t */\n\t\t counterNumber: {\n\t\t\t type: [Number, String],\n\t\t\t default: 0,\n\t\t },\n\n\t\t/**\n\t\t * Outlined or highlighted state of the counter\n\t\t */\n\t\tcounterType: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['highlighted', 'outlined', ''].indexOf(value) !== -1\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * To be used only when the elements in the actions menu are very important\n\t\t */\n\t\tforceDisplayActions: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Force the actions to display in a three dot menu\n\t\t */\n\t\tforceMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Show the list component layout\n\t\t */\n\t\toneLine: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t'click',\n\t\t'update:menuOpen',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\thovered: false,\n\t\t\thasActions: false,\n\t\t\thasSubname: false,\n\t\t\tdisplayActionsOnHoverFocus: false,\n\t\t\tmenuOpen: false,\n\t\t\thasIndicator: false,\n\t\t\thasDetails: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tshowAdditionalElements() {\n\t\t\treturn !this.displayActionsOnHoverFocus || this.forceDisplayActions\n\t\t},\n\n\t\tshowDetails() {\n\t\t\treturn (this.details !== '' || this.hasDetails)\n\t\t\t\t&& (!this.displayActionsOnHoverFocus || this.forceDisplayActions)\n\t\t},\n\t},\n\n\twatch: {\n\n\t\tmenuOpen(newValue) {\n\t\t\t// A click outside both the menu and the root element hides the actions again\n\t\t\tif (!newValue && !this.hovered) {\n\t\t\t\tthis.displayActionsOnHoverFocus = false\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.checkSlots()\n\t},\n\n\tupdated() {\n\t\tthis.checkSlots()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Handle link click\n\t\t *\n\t\t * @param {MouseEvent|KeyboardEvent} event - Native click or keydown event\n\t\t * @param {Function} [navigate] - VueRouter link's navigate if any\n\t\t * @param {string} [routerLinkHref] - VueRouter link's href\n\t\t */\n\t\tonClick(event, navigate, routerLinkHref) {\n\t\t\t// Always forward native event\n\t\t\tthis.$emit('click', event)\n\t\t\t// Do not navigate with control keys - it is opening in a new tab\n\t\t\tif (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Prevent default link behaviour if it's a router-link and navigate manually\n\t\t\tif (routerLinkHref) {\n\t\t\t\tnavigate?.(event)\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\n\t\tshowActions() {\n\t\t\tif (this.hasActions) {\n\t\t\t\tthis.displayActionsOnHoverFocus = true\n\t\t\t}\n\t\t\tthis.hovered = false\n\t\t},\n\n\t\thideActions() {\n\t\t\tthis.displayActionsOnHoverFocus = false\n\t\t},\n\n\t\t/**\n\t\t * @param {FocusEvent} event UI event\n\t\t */\n\t\thandleBlur(event) {\n\t\t\t// do not hide if open\n\t\t\tif (this.menuOpen) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// do not hide if focus is kept within\n\t\t\t// On component unmounting Vue 3 resets the template ref to null,\n\t\t\t// so we can ignore this check\n\t\t\tif (this.$refs['list-item']?.contains(event.relatedTarget)) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.hideActions()\n\t\t},\n\n\t\t/**\n\t\t * Hide the actions on mouseleave unless the menu is open\n\t\t */\n\t\thandleMouseleave() {\n\t\t\tif (!this.menuOpen) {\n\t\t\t\tthis.displayActionsOnHoverFocus = false\n\t\t\t}\n\t\t\tthis.hovered = false\n\t\t},\n\n\t\thandleMouseover() {\n\t\t\tthis.showActions()\n\t\t\tthis.hovered = true\n\t\t},\n\n\t\thandleActionsUpdateOpen(e) {\n\t\t\tthis.menuOpen = e\n\t\t\tthis.$emit('update:menuOpen', e)\n\t\t},\n\n\t\t// Check if subname and actions slots are populated\n\t\tcheckSlots() {\n\t\t\tif (this.hasActions !== !!this.$slots.actions) {\n\t\t\t\tthis.hasActions = !!this.$slots.actions\n\t\t\t}\n\t\t\tif (this.hasSubname !== !!this.$slots.subname) {\n\t\t\t\tthis.hasSubname = !!this.$slots.subname\n\t\t\t}\n\t\t\tif (this.hasIndicator !== !!this.$slots.indicator) {\n\t\t\t\tthis.hasIndicator = !!this.$slots.indicator\n\t\t\t}\n\t\t\tif (this.hasDetails !== !!this.$slots.details) {\n\t\t\t\tthis.hasDetails = !!this.$slots.details\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.list-item__wrapper {\n\tdisplay: flex;\n\tposition: relative;\n\twidth: 100%;\n\t// padding for the focus-visible styles. Width is reduced to compensate it\n\tpadding: 2px 4px;\n\t// The first and lastelement needs also padding for the box shadow of the focus-visible effect\n\t&:first-of-type {\n\t\tpadding-block-start: 4px;\n\t}\n\t&:last-of-type {\n\t\tpadding-block-end: 4px\n\t}\n\n\t&--active,\n\t&.active {\n\t\t.list-item {\n\t\t\tbackground-color: var(--color-primary-element);\n\t\t\tcolor: var(--color-primary-element-text) !important;\n\n\t\t\t&:hover,\n\t\t\t&:focus-within,\n\t\t\t&:has(:focus-visible),\n\t\t\t&:has(:active) {\n\t\t\t\tbackground-color: var(--color-primary-element-hover);\n\t\t\t}\n\t\t}\n\n\t\t.list-item-content__name,\n\t\t.list-item-content__subname,\n\t\t.list-item-content__details,\n\t\t.list-item-details__details {\n\t\t\tcolor: var(--color-primary-element-text) !important;\n\t\t}\n\t}\n\t.list-item-content__name,\n\t.list-item-content__subname,\n\t.list-item-content__details,\n\t.list-item-details__details {\n\t\twhite-space: nowrap;\n\t\tmargin-block: 0;\n\t\tmargin-inline: 0 auto;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n}\n\n.list-item-content__name {\n\tmin-width: 100px;\n\tflex: 1 1 10%;\n\tfont-weight: 500;\n}\n\n.list-item-content__subname {\n\tflex: 1 0;\n\tmin-width: 0;\n\tcolor: var(--color-text-maxcontrast);\n\t&--bold {\n\t\tfont-weight: 500;\n\t}\n}\n\n// NcListItem\n.list-item {\n\t--list-item-padding: var(--default-grid-baseline);\n\t// The content are two lines of text and respect the 1.5 line height\n\t--list-item-height: 2lh;\n\t--list-item-border-radius: var(--border-radius-element, 32px);\n\t// General styles\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\tposition: relative;\n\tflex: 0 0 auto;\n\tjustify-content: flex-start;\n\tpadding: var(--list-item-padding);\n\twidth: 100%;\n\tborder-radius: var(--border-radius-element, 32px);\n\tcursor: pointer;\n\ttransition: background-color var(--animation-quick) ease-in-out;\n\tlist-style: none;\n\n\t&:hover,\n\t&:focus-within,\n\t&:has(:active),\n\t&:has(:focus-visible) {\n\t\tbackground-color: var(--color-background-hover);\n\t}\n\n\t&:has(&__anchor:focus-visible) {\n\t\toutline: 2px solid var(--color-main-text);\n\t\tbox-shadow: 0 0 0 4px var(--color-main-background);\n\t}\n\n\t&--compact {\n\t\t--list-item-padding: calc(0.5 * var(--default-grid-baseline)) var(--default-grid-baseline);\n\n\t\t&:not(:has(.list-item-content__subname)) {\n\t\t\t--list-item-height: var(--default-clickable-area);\n\t\t}\n\t}\n\n\t&--one-line {\n\t\t--list-item-height: var(--default-clickable-area);\n\t\t--list-item-border-radius: var(--border-radius-element, calc(var(--default-clickable-area) / 2));\n\t\t--list-item-padding: var(--default-grid-baseline);\n\n\t\t.list-item-content__main {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: start;\n\t\t\tgap: 12px;\n\t\t\tmin-width: 0;\n\t\t}\n\t\t.list-item-content__details {\n\t\t\tflex-direction: row;\n\t\t\talign-items: center;\n\t\t\tjustify-content: end;\n\t\t}\n\t\t.list-item-content__name {\n\t\t\talign-self: center;\n\t\t\tmax-width: 300px;\n\t\t}\n\t}\n\n\t&__anchor {\n\t\tcolor: inherit;\n\t\tdisplay: flex;\n\t\tflex: 1 0 auto;\n\t\talign-items: center;\n\t\theight: var(--list-item-height);\n\t\tmin-width: 0;\n\n\t\t// This is handled by the parent container\n\t\t&:focus-visible {\n\t\t\toutline: none;\n\t\t}\n\t}\n\n\t&-content {\n\t\tdisplay: flex;\n\t\tflex: 1 0;\n\t\tjustify-content: space-between;\n\t\tpadding-inline-start: calc(2 * var(--default-grid-baseline));\n\t\tmin-width: 0;\n\n\t\t&__main {\n\t\t\tflex: 1 0;\n\t\t\twidth: 0;\n\t\t\tmargin: auto 0;\n\n\t\t\t&--oneline {\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\t&__details {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tjustify-content: end;\n\t\t\talign-items: end;\n\t\t}\n\n\t\t&__actions,\n\t\t&__extra-actions {\n\t\t\tflex: 0 0 auto;\n\t\t\talign-self: center;\n\t\t\tjustify-content: center;\n\t\t\tmargin-inline-start: var(--default-grid-baseline);\n\t\t}\n\n\t\t&__extra-actions {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: var(--default-grid-baseline);\n\t\t}\n\t}\n\n\t&-details {\n\t\t&__details {\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\tmargin: 0 9px !important;\n\t\t\tfont-weight: normal;\n\t\t}\n\t\t&__extra {\n\t\t\tmargin: 2px 4px 0 4px;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t}\n\t\t&__indicator {\n\t\t\tmargin: 0 5px;\n\t\t}\n\t}\n\n\t&__extra {\n\t\tmargin-top: var(--default-grid-baseline);\n\t}\n}\n\n</style>\n"],"names":["NcVNodes","_openBlock","_createBlock","_resolveDynamicComponent","_normalizeProps","_guardReactiveProps","_withCtx","_createElementVNode","_mergeProps","_renderSlot","_createElementBlock","_normalizeClass","_withDirectives","_createVNode","_vShow"],"mappings":";;;;;AA0hBA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,YAAY;AAAA,IACX;AAAA,IACA;AAAA,IACA,UAAAA;AAAAA;EAGD,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,SAAS;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,IAAI;AAAA,MACH,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA;;;;IAMV,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA;IAGV,QAAQ;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,UAAU;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,SAAS;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,QAAQ;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,eAAe;AAAA,MACd,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,kBAAkB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOT,eAAe;AAAA,MACd,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA;;;;IAMX,aAAa;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAU,OAAO;AAChB,eAAO,CAAC,eAAe,YAAY,EAAE,EAAE,QAAQ,KAAK,MAAM;AAAA,MAC3D;AAAA;;;;IAMD,qBAAqB;AAAA,MACpB,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,WAAW;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,SAAS;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;;EAIX,OAAO;AAAA,IACN;AAAA,IACA;AAAA;EAGD,OAAO;AACN,WAAO;AAAA,MACN,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,4BAA4B;AAAA,MAC5B,UAAU;AAAA,MACV,cAAc;AAAA,MACd,YAAY;AAAA,IACb;AAAA,EACD;AAAA,EAEA,UAAU;AAAA,IACT,yBAAyB;AACxB,aAAO,CAAC,KAAK,8BAA8B,KAAK;AAAA,IACjD;AAAA,IAEA,cAAc;AACb,cAAQ,KAAK,YAAY,MAAM,KAAK,gBAC/B,CAAC,KAAK,8BAA8B,KAAK;AAAA,IAC/C;AAAA;EAGD,OAAO;AAAA,IAEN,SAAS,UAAU;AAElB,UAAI,CAAC,YAAY,CAAC,KAAK,SAAS;AAC/B,aAAK,6BAA6B;AAAA,MACnC;AAAA,IACD;AAAA;EAGD,UAAU;AACT,SAAK,WAAU;AAAA,EAChB;AAAA,EAEA,UAAU;AACT,SAAK,WAAU;AAAA,EAChB;AAAA,EAEA,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQR,QAAQ,OAAO,UAAU,gBAAgB;AAExC,WAAK,MAAM,SAAS,KAAK;AAEzB,UAAI,MAAM,WAAW,MAAM,UAAU,MAAM,WAAW,MAAM,UAAU;AACrE;AAAA,MACD;AAEA,UAAI,gBAAgB;AACnB,mBAAW,KAAK;AAChB,cAAM,eAAc;AAAA,MACrB;AAAA,IACD;AAAA,IAEA,cAAc;AACb,UAAI,KAAK,YAAY;AACpB,aAAK,6BAA6B;AAAA,MACnC;AACA,WAAK,UAAU;AAAA,IAChB;AAAA,IAEA,cAAc;AACb,WAAK,6BAA6B;AAAA,IACnC;AAAA;AAAA;AAAA;AAAA,IAKA,WAAW,OAAO;AAEjB,UAAI,KAAK,UAAU;AAClB;AAAA,MACD;AAIA,UAAI,KAAK,MAAM,WAAW,GAAG,SAAS,MAAM,aAAa,GAAG;AAC3D;AAAA,MACD;AACA,WAAK,YAAW;AAAA,IACjB;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAmB;AAClB,UAAI,CAAC,KAAK,UAAU;AACnB,aAAK,6BAA6B;AAAA,MACnC;AACA,WAAK,UAAU;AAAA,IAChB;AAAA,IAEA,kBAAkB;AACjB,WAAK,YAAW;AAChB,WAAK,UAAU;AAAA,IAChB;AAAA,IAEA,wBAAwB,GAAG;AAC1B,WAAK,WAAW;AAChB,WAAK,MAAM,mBAAmB,CAAC;AAAA,IAChC;AAAA;AAAA,IAGA,aAAa;AACZ,UAAI,KAAK,eAAe,CAAC,CAAC,KAAK,OAAO,SAAS;AAC9C,aAAK,aAAa,CAAC,CAAC,KAAK,OAAO;AAAA,MACjC;AACA,UAAI,KAAK,eAAe,CAAC,CAAC,KAAK,OAAO,SAAS;AAC9C,aAAK,aAAa,CAAC,CAAC,KAAK,OAAO;AAAA,MACjC;AACA,UAAI,KAAK,iBAAiB,CAAC,CAAC,KAAK,OAAO,WAAW;AAClD,aAAK,eAAe,CAAC,CAAC,KAAK,OAAO;AAAA,MACnC;AACA,UAAI,KAAK,eAAe,CAAC,CAAC,KAAK,OAAO,SAAS;AAC9C,aAAK,aAAa,CAAC,CAAC,KAAK,OAAO;AAAA,MACjC;AAAA,IACD;AAAA;AAEF;;AA5VU,MAAA,aAAA,EAAA,OAAM,oBAAmB;AACxB,MAAA,aAAA,EAAA,OAAM,0BAAyB;AAC9B,MAAA,aAAA,EAAA,OAAM,0BAAyB;AAWhC,MAAA,aAAA,EAAA,OAAM,6BAA4B;;;EACd,OAAM;;;;EAO7B,OAAM;;;;EAOoB,OAAM;;;;EASA,OAAM;;;;EAuBjB,OAAM;;;;;AAxFlC,SAAAC,UAAA,GAAAC,YA8FYC,wBA9FI,OAAA,KAAE,gBAAA,UAAA,GAAAC,eAAAC,mBAAA,EAAA,GAEJ,OAAA,0BAAsB,OAAA,KAAE,CAAA,CAAA,GAAA;AAAA,IACrC,SAAAC,QAAA,CA0FK,EAAA,MA5FW,gBAAgB,UAAU,eAAQ;AAAA,MAElDC,mBA0FK,MA1FLC,WA0FK;AAAA,QA1FD,OAAK,CAAC,sBAAoB,EAAA,8BACY,OAAA,UAAU,SAAQ,CAAA;AAAA,SACnD,KAAA,MAAM,GAAA;AAAA,QACdD,mBAsFM,OAAA;AAAA,UAtFD,KAAI;AAAA,UACR,uBAAM,aAAW;AAAA,kCACoB,OAAA;AAAA,mCAAqC,OAAA;AAAA;UAIzE,oDAAW,SAAA,mBAAA,SAAA,gBAAA,GAAA,IAAA;AAAA,UACX,qDAAY,SAAA,oBAAA,SAAA,iBAAA,GAAA,IAAA;AAAA;UACbA,mBAiDI,KAAA;AAAA,YAjDA,IAAI,OAAA,YAAY;AAAA,YAClB,cAAY,OAAA;AAAA,YACb,OAAM;AAAA,YACL,MAAM,kBAAkB,OAAA;AAAA,YACxB,QAAQ,OAAA,WAAW,OAAA,eAAe,SAAS;AAAA,YAC3C,KAAK,OAAA,SAAI,MAAW,SAAS;AAAA,YAC7B,gDAAO,SAAA,eAAA,SAAA,YAAA,GAAA,IAAA;AAAA,YACP,mDAAU,SAAA,cAAA,SAAA,WAAA,GAAA,IAAA;AAAA,YACV,qBAAO,SAAA,QAAQ,QAAQ,UAAU,cAAc;AAAA,YAC/C,2DAAa,SAAA,eAAA,SAAA,YAAA,GAAA,IAAA,GAAW,CAAA,KAAA,CAAA;AAAA;YAEzBE,WAAoB,KAAA,QAAA,QAAA,CAAA,GAAA,QAAA,IAAA;AAAA,YAGpBF,mBAkCM,OAlCN,YAkCM;AAAA,cAjCLA,mBAWM,OAXN,YAWM;AAAA,gBAVLA,mBAGM,OAHN,YAGM;AAAA,kBADLE,WAAmC,yBAAnC,MAAmC;AAAA,oDAAd,OAAA,IAAI,GAAA,CAAA;AAAA;;gBAEf,MAAA,2BAAXC,mBAKM,OAAA;AAAA;kBAJL,OAAKC,eAAA,CAAC,8BAA4B,EAAA,oCACW,OAAA,KAAI,CAAA,CAAA;AAAA;kBAEjDF,WAAuB,KAAA,QAAA,WAAA,CAAA,GAAA,QAAA,IAAA;AAAA;;cAGzBF,mBAoBM,OApBN,YAoBM;AAAA,gBAnBM,SAAA,eAAXN,aAAAS,mBAGM,OAHN,YAGM;AAAA,kBADLD,WAAyC,4BAAzC,MAAyC;AAAA,oDAAjB,OAAA,OAAO,GAAA,CAAA;AAAA;;gBAGrB,OAAA,uBAAuB,MAAA,eAAlCG,gBAAAX,UAAA,GAAAS,mBAaM,OAbN,YAaM;AAAA,kBAVkB,OAAA,kBAAa,kBAApCR,YAIuB,4BAAA;AAAA;oBAHrB,OAAO,OAAA;AAAA,oBACP,QAAQ,OAAA,UAAU;AAAA,oBACnB,OAAM;AAAA,oBACL,MAAM,OAAA;AAAA;kBAEI,MAAA,gBAAZD,aAAAS,mBAGO,QAHP,YAGO;AAAA,oBADND,WAAyB,KAAA,QAAA,aAAA,CAAA,GAAA,QAAA,IAAA;AAAA;;0BAVlB,SAAA,sBAAsB;AAAA;;;;UAiBvB,KAAA,OAAM,eAAA,KAAjBR,aAAAS,mBAGM,OAHN,YAGM;AAAA,YADLD,WAA6B,KAAA,QAAA,iBAAA,CAAA,GAAA,QAAA,IAAA;AAAA;yBAI9BF,mBAeM,OAAA;AAAA,YAdL,OAAM;AAAA,YACL,mDAAU,SAAA,cAAA,SAAA,WAAA,GAAA,IAAA;AAAA;YACXM,YAWY,sBAAA;AAAA,cAXD,KAAI;AAAA,cACb,SAAS,OAAA,UAAU;AAAA,cACnB,cAAY,OAAA;AAAA,cACZ,cAAY,OAAA;AAAA,cACZ,iBAAa,SAAA;AAAA;+BAMd,MAAuB;AAAA,gBAAvBJ,WAAuB,KAAA,QAAA,WAAA,CAAA,GAAA,QAAA,IAAA;AAAA;;;cALP,KAAA,OAAM,cAAA;sBAAmB;AAAA,4BAExC,MAA4B;AAAA,kBAA5BA,WAA4B,KAAA,QAAA,gBAAA,CAAA,GAAA,QAAA,IAAA;AAAA;;;;;YAVlB,CAAAK,OAAA,OAAA,uBAAuB,MAAA,0BAA0B;AAAA;UAiBnD,KAAA,OAAO,SAAlBb,aAAAS,mBAGM,OAHN,aAGM;AAAA,YADLD,WAAqB,KAAA,QAAA,SAAA,CAAA,GAAA,QAAA,IAAA;AAAA;;;;;;;;"}

package/dist/chunks/NcListItemIcon-26IdztJ2.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcListItemIcon-26IdztJ2.mjs","sources":["../../src/components/NcListItemIcon/NcListItemIcon.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n## This is used to display a avatar-name/subname + icon layout\nIt might be used for list rendering or within the multiselect for example\n\n> **Note:** Any binding will be forwarded on the Avatar component root\n\n```vue\n<NcListItemIcon name=\"User 1\" />\n<NcListItemIcon name=\"User 1\" subname=\"Hidden subname because size is too small\" :avatar-size=\"24\" />\n```\n```vue\n\t<template>\n\t\t<NcListItemIcon name=\"User 1\" :avatar-size=\"44\">\n\t\t\t<Account :size=\"20\" />\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport Account from 'vue-material-design-icons/Account.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tAccount,\n\t\t},\n\t}\n\t</script>\n```\n\n### With icon\n```vue\n\t<template>\n\t\t<NcListItemIcon name=\"Group 1\" subname=\"13 members\" :is-no-user=\"true\">\n\t\t\t<AccountMultiple :size=\"20\" />\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tAccountMultiple,\n\t\t},\n\t}\n\t</script>\n```\n\n### Searching\n```vue\n\t<template>\n\t\t<NcListItemIcon name=\"Test user 1\" subname=\"callmetest@domain.com\" search=\"test\" />\n\t\t<NcListItemIcon name=\"Testing admin\" subname=\"testme@example.com\" search=\"test\" />\n\t\t<NcListItemIcon name=\"Test group 2\" subname=\"loremipsum@domain.com\" :is-no-user=\"true\" search=\"test\">\n\t\t\t<AccountMultiple :size=\"20\" />\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tAccountMultiple,\n\t\t},\n\t}\n\t</script>\n```\n\n### With actions\n```vue\n\t<template>\n\t\t<NcListItemIcon name=\"Test user 1\" subname=\"callmetest@domain.com\">\n\t\t\t<NcActions>\n\t\t\t\t<NcActionButton @click=\"alert('Edit')\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tEdit\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton @click=\"alert('Delete')\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tDelete\n\t\t\t\t</NcActionButton>\n\t\t\t</NcActions>\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport Delete from 'vue-material-design-icons/Delete.vue'\n\timport Pencil from 'vue-material-design-icons/Pencil.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tDelete,\n\t\t\tPencil,\n\t\t},\n\t}\n\t</script>\n```\n</docs>\n\n<template>\n\t<span :id=\"id\"\n\t\tclass=\"option\"\n\t\t:class=\"{ 'option--compact': avatarSize < defaultSize }\"\n\t\t:style=\"cssVars\">\n\t\t<NcAvatar v-bind=\"$attrs\"\n\t\t\t:disable-menu=\"true\"\n\t\t\t:disable-tooltip=\"true\"\n\t\t\t:display-name=\"displayName || name\"\n\t\t\t:is-no-user=\"isNoUser\"\n\t\t\t:size=\"avatarSize\"\n\t\t\tclass=\"option__avatar\" />\n\t\t<div class=\"option__details\">\n\t\t\t<NcHighlight class=\"option__lineone\"\n\t\t\t\t:text=\"name\"\n\t\t\t\t:search=\"searchParts[0]\" />\n\t\t\t<NcHighlight v-if=\"isValidSubname && isSizeBigEnough\"\n\t\t\t\tclass=\"option__linetwo\"\n\t\t\t\t:text=\"subname\"\n\t\t\t\t:search=\"searchParts[1]\" />\n\t\t\t<span v-else-if=\"hasStatus\">\n\t\t\t\t<span>{{ userStatus.icon }}</span>\n\t\t\t\t<span>{{ userStatus.message }}</span>\n\t\t\t</span>\n\t\t</div>\n\n\t\t<!-- @slot use this slot to add a custom icon or actions -->\n\t\t<slot>\n\t\t\t<NcIconSvgWrapper v-if=\"hasIconSvg\"\n\t\t\t\tclass=\"option__icon\"\n\t\t\t\t:svg=\"iconSvg\"\n\t\t\t\t:name=\"iconName\" />\n\t\t\t<span v-else-if=\"hasIcon\"\n\t\t\t\tclass=\"icon option__icon\"\n\t\t\t\t:class=\"icon\"\n\t\t\t\t:aria-label=\"iconName\" />\n\t\t</slot>\n\t</span>\n</template>\n\n<script>\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcHighlight from '../NcHighlight/index.ts'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.ts'\n\nimport { userStatus } from '../../mixins/index.js'\n\n// global margin, ^2 ratio\nconst margin = 8\nconst defaultSize = 32\n\nexport default {\n\tname: 'NcListItemIcon',\n\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcHighlight,\n\t\tNcIconSvgWrapper,\n\t},\n\n\tmixins: [\n\t\tuserStatus,\n\t],\n\n\tprops: {\n\t\t/**\n\t\t * Default first line text\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Secondary optional line\n\t\t * Only visible on size of 32 and above\n\t\t */\n\t\tsubname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Icon class to be displayed at the end of the component\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * SVG icon to be displayed at the end of the component\n\t\t */\n\t\ticonSvg: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Descriptive name for the icon\n\t\t */\n\t\ticonName: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Search within the highlight of name/subname\n\t\t */\n\t\tsearch: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Set a size in px that will define the avatar height/width\n\t\t * and therefore, the height of the component\n\t\t */\n\t\tavatarSize: {\n\t\t\ttype: Number,\n\t\t\tdefault: defaultSize,\n\t\t},\n\n\t\t/**\n\t\t * Disable the margins of this component.\n\t\t * Useful for integration in `NcSelect` for example\n\t\t */\n\t\tnoMargin: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * See the [Avatar](#Avatar) displayName prop\n\t\t * Fallback to name\n\t\t */\n\t\tdisplayName: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * See the [Avatar](#Avatar) isNoUser prop\n\t\t * Enable/disable the UserStatus fetching\n\t\t */\n\t\tisNoUser: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Unique list item ID\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\tsetup() {\n\t\treturn {\n\t\t\tmargin,\n\t\t\tdefaultSize,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\thasIcon() {\n\t\t\treturn this.icon !== ''\n\t\t},\n\n\t\thasIconSvg() {\n\t\t\treturn this.iconSvg !== ''\n\t\t},\n\n\t\tisValidSubname() {\n\t\t\treturn this.subname?.trim?.() !== ''\n\t\t},\n\n\t\tisSizeBigEnough() {\n\t\t\treturn this.avatarSize >= 26 // the font sizes\n\t\t},\n\n\t\tcssVars() {\n\t\t\t// Don't use margin to calculate the height if noMargin\n\t\t\tconst margin = this.noMargin ? 0 : this.margin\n\n\t\t\treturn {\n\t\t\t\t'--height': this.avatarSize + 2 * margin + 'px',\n\t\t\t\t'--margin': this.margin + 'px',\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Separates the search property into two parts, the first one is the search part on the name, the second on the subname.\n\t\t * @return {[string, string]}\n\t\t */\n\t\tsearchParts() {\n\t\t\t// Match the email notation like \"Jane <j.doe@example.com>\" with the email address as matching group\n\t\t\tconst EMAIL_NOTATION = /^([^<]*)<([^>]+)>?$/\n\n\t\t\tconst match = this.search.match(EMAIL_NOTATION)\n\t\t\tif (this.isNoUser || !match) {\n\t\t\t\treturn [this.search, this.search]\n\t\t\t}\n\t\t\treturn [match[1].trim(), match[2]]\n\t\t},\n\t},\n\n\tbeforeMount() {\n\t\t// If we don't have a subname and if this is a user\n\t\tif (!this.isNoUser && !this.subname) {\n\t\t\tthis.fetchUserStatus(this.user)\n\t\t}\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.option {\n\tdisplay: flex;\n\talign-items: center;\n\twidth: 100%;\n\theight: var(--height);\n\tcursor: inherit;\n\n\t&__avatar {\n\t\tmargin-inline-end: var(--margin);\n\t}\n\n\t&__details {\n\t\tdisplay: flex;\n\t\tflex: 1 1;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\tmin-width: 0;\n\t}\n\n\t&__lineone {\n\t\tcolor: var(--color-main-text);\n\t}\n\n\t&__linetwo {\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\n\t&__lineone,\n\t&__linetwo {\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\tline-height: 1.2;\n\t\tstrong {\n\t\t\tfont-weight: bold;\n\t\t}\n\t}\n\n\t&--compact {\n\t\t.option {\n\t\t\t&__lineone {\n\t\t\t\tfont-size: 14px;\n\t\t\t}\n\t\t\t&__linetwo {\n\t\t\t\tfont-size: 11px;\n\t\t\t\tline-height: 1.5;\n\t\t\t\tmargin-top: -4px;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__icon {\n\t\twidth: var(--default-clickable-area);\n\t\theight: var(--default-clickable-area);\n\t\tcolor: var(--color-text-maxcontrast);\n\t\t&.icon {\n\t\t\tflex: 0 0 var(--default-clickable-area);\n\t\t\topacity: $opacity_normal;\n\t\t\tbackground-position: center;\n\t\t\tbackground-size: 16px;\n\t\t}\n\t}\n\n\t&__details,\n\t&__lineone,\n\t&__linetwo,\n\t&__icon {\n\t\tcursor: inherit;\n\t}\n}\n</style>\n"],"names":["NcHighlight","margin","_createElementBlock","_normalizeClass","_createVNode","_mergeProps","_createElementVNode","_createBlock","_toDisplayString","_renderSlot"],"mappings":"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"}