@nextcloud/vue 8.4.0 → 8.5.1

package/dist/chunks/NcHeaderMenu-ePmuT5Kz.mjs

@@ -0,0 +1,190 @@
+import "../assets/NcHeaderMenu-06vdn4tC.css";
+import { vOnClickOutside as n } from "@vueuse/components";
+import { createFocusTrap as o } from "focus-trap";
+import { G as s } from "./GenRandomId-VodkdWbp.mjs";
+import a from "../Mixins/clickOutsideOptions.mjs";
+import "../Composables/useIsFullscreen.mjs";
+import "../Composables/useIsMobile.mjs";
+import "@nextcloud/router";
+/* empty css                                                                          */
+import { n as c } from "./_plugin-vue2_normalizer-u6G_3nkj.mjs";
+import "linkify-string";
+import "escape-html";
+import "striptags";
+import "vue";
+import "@nextcloud/auth";
+import "@nextcloud/axios";
+import "@nextcloud/capabilities";
+import { g as u } from "./focusTrap-Py2bQ9-r.mjs";
+import d from "../Components/NcButton.mjs";
+const l = {
+  name: "NcHeaderMenu",
+  components: {
+    NcButton: d
+  },
+  directives: {
+    ClickOutside: n
+  },
+  mixins: [
+    a
+  ],
+  props: {
+    /**
+     * Unique id for this menu
+     */
+    id: {
+      type: String,
+      required: !0
+    },
+    /**
+     * aria-label attribute of the menu open button
+     */
+    ariaLabel: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Current menu open state
+     */
+    open: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Pass `true` if the header menu is used for website navigation
+     *
+     * The wrapper tag will be set to `nav` and its `aria-labelledby`
+     * will be associated with the menu open button
+     */
+    isNav: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Additional visually hidden description text for the menu
+     * open button
+     */
+    description: {
+      type: String,
+      default: null
+    }
+  },
+  emits: [
+    "close",
+    "closed",
+    "open",
+    "opened",
+    "update:open",
+    "cancel"
+  ],
+  data() {
+    return {
+      focusTrap: null,
+      opened: this.open,
+      shortcutsDisabled: window.OCP?.Accessibility?.disableKeyboardShortcuts?.(),
+      triggerId: s(),
+      descriptionId: s()
+    };
+  },
+  computed: {
+    wrapperTag() {
+      return this.isNav ? "nav" : "div";
+    },
+    clickOutsideConfig() {
+      return [
+        this.closeMenu,
+        this.clickOutsideOptions
+      ];
+    },
+    listeners() {
+      return this.isNav ? {
+        focusout: this.onFocusOut
+      } : null;
+    }
+  },
+  watch: {
+    open(t) {
+      t ? this.openMenu() : this.closeMenu();
+    }
+  },
+  mounted() {
+    document.addEventListener("keydown", this.onKeyDown);
+  },
+  beforeDestroy() {
+    document.removeEventListener("keydown", this.onKeyDown);
+  },
+  methods: {
+    /**
+     * Toggle the current menu open state
+     */
+    toggleMenu() {
+      this.opened ? this.closeMenu() : this.openMenu();
+    },
+    /**
+     * Close the current menu
+     *
+     * @param {boolean} cancelled emit a cancel event instead of close
+     */
+    closeMenu(t = !1) {
+      this.opened = !1, this.$emit(t ? "cancel" : "close"), this.$emit("update:open", !1), this.clearFocusTrap(), this.$nextTick(() => {
+        this.$emit("closed");
+      });
+    },
+    /**
+     * Open the current menu
+     */
+    openMenu() {
+      this.opened = !0, this.$emit("open"), this.$emit("update:open", !0), this.$nextTick(() => {
+        this.useFocusTrap(), this.$emit("opened");
+      });
+    },
+    onKeyDown(t) {
+      this.shortcutsDisabled || !this.opened || t.key === "Escape" && (t.preventDefault(), this.closeMenu(!0));
+    },
+    /**
+     * @param {FocusEvent} event The focus event
+     */
+    onFocusOut(t) {
+      this.$refs.headerMenu.contains(t.relatedTarget) || this.closeMenu();
+    },
+    /**
+     * Add focus trap for accessibility.
+     * Shall only be used when all children are mounted
+     * and available in the DOM. We use $nextTick for that.
+     */
+    async useFocusTrap() {
+      if (this.isNav || this.focusTrap)
+        return;
+      const t = this.$refs.content;
+      this.focusTrap = o(t, {
+        allowOutsideClick: !0,
+        trapStack: u(),
+        fallbackFocus: this.$refs.trigger
+      }), this.focusTrap.activate();
+    },
+    clearFocusTrap() {
+      this.focusTrap?.deactivate(), this.focusTrap = null;
+    }
+  }
+};
+var p = function() {
+  var e = this, i = e._self._c;
+  return i(e.wrapperTag, e._g({ directives: [{ name: "click-outside", rawName: "v-click-outside", value: e.clickOutsideConfig, expression: "clickOutsideConfig" }], ref: "headerMenu", tag: "component", staticClass: "header-menu", class: { "header-menu--opened": e.opened }, attrs: { id: e.id, "aria-labelledby": e.isNav ? e.triggerId : null } }, e.listeners), [i("NcButton", { ref: "trigger", staticClass: "header-menu__trigger", attrs: { id: e.isNav ? e.triggerId : null, type: "tertiary-no-background", "aria-label": e.ariaLabel, "aria-describedby": e.description ? e.descriptionId : null, "aria-controls": `header-menu-${e.id}`, "aria-expanded": e.opened.toString() }, on: { click: function(r) {
+    return r.preventDefault(), e.toggleMenu.apply(null, arguments);
+  } }, scopedSlots: e._u([{ key: "icon", fn: function() {
+    return [e._t("trigger")];
+  }, proxy: !0 }], null, !0) }), e.description ? i("span", { staticClass: "header-menu__description hidden-visually", attrs: { id: e.descriptionId } }, [e._v(" " + e._s(e.description) + " ")]) : e._e(), i("div", { directives: [{ name: "show", rawName: "v-show", value: e.opened, expression: "opened" }], staticClass: "header-menu__carret" }), i("div", { directives: [{ name: "show", rawName: "v-show", value: e.opened, expression: "opened" }], staticClass: "header-menu__wrapper", attrs: { id: `header-menu-${e.id}` } }, [i("div", { ref: "content", staticClass: "header-menu__content" }, [e._t("default")], 2)])], 1);
+}, m = [], h = /* @__PURE__ */ c(
+  l,
+  p,
+  m,
+  !1,
+  null,
+  "1bc3a70b",
+  null,
+  null
+);
+const B = h.exports;
+export {
+  B as N
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcHeaderMenu-ePmuT5Kz.mjs","sources":["../../src/components/NcHeaderMenu/NcHeaderMenu.vue"],"sourcesContent":[" <!--\n  - @copyright Copyright (c) 2020 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program.  If not, see <http://www.gnu.org/licenses/>.\n  -\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<input placeholder=\"Search for files, comments, contacts...\" type=\"search\" style=\"width: 99%;\" />\n\t\t\t\t<NcEmptyContent\n\t\t\t\t\tname=\"Search\"\n\t\t\t\t\tdescription=\"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}\n</script>\n<style>\n#nextcloud-header {\n\tdisplay: flex;\n\tjustify-content: right;\n\tbackground-color: var(--color-primary);\n}\n</style>\n```\n</docs>\n\n<template>\n\t<component :is=\"wrapperTag\"\n\t\t:id=\"id\"\n\t\tref=\"headerMenu\"\n\t\tv-click-outside=\"clickOutsideConfig\"\n\t\t:aria-labelledby=\"isNav ? triggerId : null\"\n\t\t:class=\"{ 'header-menu--opened': opened }\"\n\t\tclass=\"header-menu\"\n\t\tv-on=\"listeners\">\n\t\t<!-- Trigger -->\n\t\t<NcButton :id=\"isNav ? triggerId : null\"\n\t\t\tref=\"trigger\"\n\t\t\ttype=\"tertiary-no-background\"\n\t\t\tclass=\"header-menu__trigger\"\n\t\t\t:aria-label=\"ariaLabel\"\n\t\t\t:aria-describedby=\"description ? descriptionId : null\"\n\t\t\t:aria-controls=\"`header-menu-${id}`\"\n\t\t\t:aria-expanded=\"opened.toString()\"\n\t\t\t@click.prevent=\"toggleMenu\">\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=\"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=\"opened\" class=\"header-menu__carret\" />\n\n\t\t<!-- Menu opened content -->\n\t\t<div v-show=\"opened\"\n\t\t\t:id=\"`header-menu-${id}`\"\n\t\t\tclass=\"header-menu__wrapper\">\n\t\t\t<div ref=\"content\" class=\"header-menu__content\">\n\t\t\t\t<!-- @slot Main content -->\n\t\t\t\t<slot />\n\t\t\t</div>\n\t\t</div>\n\t</component>\n</template>\n\n<script>\nimport { vOnClickOutside as ClickOutside } from '@vueuse/components'\nimport { createFocusTrap } from 'focus-trap'\n\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport { clickOutsideOptions } from '../../mixins/index.js'\nimport { getTrapStack } from '../../utils/focusTrap.js'\n\nimport NcButton from '../NcButton/index.js'\n\nexport default {\n\tname: 'NcHeaderMenu',\n\n\tcomponents: {\n\t\tNcButton,\n\t},\n\n\tdirectives: {\n\t\tClickOutside,\n\t},\n\n\tmixins: [\n\t\tclickOutsideOptions,\n\t],\n\n\tprops: {\n\t\t/**\n\t\t * Unique id for this menu\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * aria-label attribute of the menu open button\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Current menu open state\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Pass `true` if the header menu is used for website navigation\n\t\t *\n\t\t * The wrapper tag will be set to `nav` and its `aria-labelledby`\n\t\t * will be associated with the menu open button\n\t\t */\n\t\tisNav: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Additional visually hidden description text for the menu\n\t\t * open button\n\t\t */\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: [\n\t\t'close',\n\t\t'closed',\n\t\t'open',\n\t\t'opened',\n\t\t'update:open',\n\t\t'cancel',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tfocusTrap: null,\n\t\t\topened: this.open,\n\t\t\tshortcutsDisabled: window.OCP?.Accessibility?.disableKeyboardShortcuts?.(),\n\t\t\ttriggerId: GenRandomId(),\n\t\t\tdescriptionId: GenRandomId(),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\twrapperTag() {\n\t\t\treturn this.isNav ? 'nav' : 'div'\n\t\t},\n\n\t\tclickOutsideConfig() {\n\t\t\treturn [\n\t\t\t\tthis.closeMenu,\n\t\t\t\tthis.clickOutsideOptions,\n\t\t\t]\n\t\t},\n\n\t\tlisteners() {\n\t\t\tif (this.isNav) {\n\t\t\t\treturn {\n\t\t\t\t\tfocusout: this.onFocusOut,\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn null\n\t\t},\n\t},\n\n\twatch: {\n\t\topen(open) {\n\t\t\tif (open) {\n\t\t\t\tthis.openMenu()\n\t\t\t} else {\n\t\t\t\tthis.closeMenu()\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\tdocument.addEventListener('keydown', this.onKeyDown)\n\t},\n\tbeforeDestroy() {\n\t\tdocument.removeEventListener('keydown', this.onKeyDown)\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Toggle the current menu open state\n\t\t */\n\t\ttoggleMenu() {\n\t\t\t// Toggling current state\n\t\t\tif (!this.opened) {\n\t\t\t\tthis.openMenu()\n\t\t\t} else {\n\t\t\t\tthis.closeMenu()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Close the current menu\n\t\t *\n\t\t * @param {boolean} cancelled emit a cancel event instead of close\n\t\t */\n\t\tcloseMenu(cancelled = false) {\n\t\t\t// Close the menu\n\t\t\tthis.opened = false\n\t\t\tthis.$emit(cancelled ? 'cancel' : 'close')\n\t\t\tthis.$emit('update:open', false)\n\n\t\t\t// Kill focus trap\n\t\t\tthis.clearFocusTrap()\n\n\t\t\t// Wait for component to finish rendering\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.$emit('closed')\n\t\t\t})\n\t\t},\n\n\t\t/**\n\t\t * Open the current menu\n\t\t */\n\t\topenMenu() {\n\t\t\t// Open the menu\n\t\t\tthis.opened = true\n\t\t\tthis.$emit('open')\n\t\t\tthis.$emit('update:open', true)\n\n\t\t\t// Wait for component to finish rendering\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.useFocusTrap()\n\t\t\t\tthis.$emit('opened')\n\t\t\t})\n\t\t},\n\n\t\tonKeyDown(event) {\n\t\t\tif (this.shortcutsDisabled || !this.opened) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// If escape have been pressed, we close\n\t\t\tif (event.key === 'Escape') {\n\t\t\t\tevent.preventDefault()\n\n\t\t\t\t/** User cancelled the menu by pressing escape */\n\t\t\t\tthis.closeMenu(true)\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * @param {FocusEvent} event The focus event\n\t\t */\n\t\tonFocusOut(event) {\n\t\t\tif (!this.$refs.headerMenu.contains(event.relatedTarget)) {\n\t\t\t\tthis.closeMenu()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Add focus trap for accessibility.\n\t\t * Shall only be used when all children are mounted\n\t\t * and available in the DOM. We use $nextTick for that.\n\t\t */\n\t\tasync useFocusTrap() {\n\t\t\tif (this.isNav || this.focusTrap) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Init focus trap\n\t\t\tconst contentContainer = this.$refs.content\n\t\t\tthis.focusTrap = createFocusTrap(contentContainer, {\n\t\t\t\tallowOutsideClick: true,\n\t\t\t\ttrapStack: getTrapStack(),\n\t\t\t\tfallbackFocus: this.$refs.trigger,\n\t\t\t})\n\t\t\tthis.focusTrap.activate()\n\t\t},\n\t\tclearFocusTrap() {\n\t\t\tthis.focusTrap?.deactivate()\n\t\t\tthis.focusTrap = null\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n// content inner and outer margin\n// Also used for menu top-right positioning\n$externalMargin: 8px;\n\n.header-menu {\n\tposition: relative;\n\twidth: var(--header-height);\n\theight: var(--header-height);\n\n\t#{&}__trigger {\n\t\twidth: var(--header-height) !important;\n\t\theight: var(--header-height);\n\t\topacity: .85;\n\n\t\t// header is filled with primary or image background\n\t\tfilter: none !important;\n\t\tcolor: var(--color-primary-text) !important;\n\t}\n\n\t&--opened &__trigger,\n\t&__trigger:hover,\n\t&__trigger:focus,\n\t&__trigger:active {\n\t\topacity: 1;\n\t}\n\n\t#{&}__trigger:focus-visible {\n\t\toutline: none !important;\n\t\tbox-shadow: none !important;\n\t}\n\n\t&__wrapper {\n\t\tposition: fixed;\n\t\tz-index: 2000;\n\t\ttop: 50px;\n\t\tinset-inline-end: 0;\n\t\tbox-sizing: border-box;\n\t\tmargin: 0 $externalMargin;\n\t\tpadding: 8px;\n\t\tborder-radius: 0 0 var(--border-radius) var(--border-radius);\n\t\tborder-radius: var(--border-radius-large);\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&__carret {\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(44px * 1.5);\n\t\tmax-height: calc(100vh - 50px * 2);\n\t\t:deep(.empty-content) {\n\t\t\tmargin: 12vh 10px;\n\t\t}\n\t}\n}\n\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.header-menu {\n\t\twidth: $clickable-area;\n\n\t\t&__trigger {\n\t\t\twidth: $clickable-area;\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main","NcButton","vOnClickOutside","clickOutsideOptions","GenRandomId","open","cancelled","event","contentContainer","createFocusTrap","getTrapStack"],"mappings":";;;;;;;;;;;;;;;;;;;AA0HA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAC;AAAA,EACA;AAAA,EAEA,YAAA;AAAA,IACA,cAAAC;AAAA,EACA;AAAA,EAEA,QAAA;AAAA,IACAC;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAA,KAAA;AAAA,MACA,mBAAA,OAAA,KAAA,eAAA,2BAAA;AAAA,MACA,WAAAC,EAAA;AAAA,MACA,eAAAA,EAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,aAAA;AACA,aAAA,KAAA,QAAA,QAAA;AAAA,IACA;AAAA,IAEA,qBAAA;AACA,aAAA;AAAA,QACA,KAAA;AAAA,QACA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,aAAA,KAAA,QACA;AAAA,QACA,UAAA,KAAA;AAAA,MACA,IAEA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,KAAAC,GAAA;AACA,MAAAA,IACA,KAAA,SAAA,IAEA,KAAA,UAAA;AAAA,IAEA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,aAAA,iBAAA,WAAA,KAAA,SAAA;AAAA,EACA;AAAA,EACA,gBAAA;AACA,aAAA,oBAAA,WAAA,KAAA,SAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA,IAIA,aAAA;AAEA,MAAA,KAAA,SAGA,KAAA,UAAA,IAFA,KAAA,SAAA;AAAA,IAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,UAAAC,IAAA,IAAA;AAEA,WAAA,SAAA,IACA,KAAA,MAAAA,IAAA,WAAA,OAAA,GACA,KAAA,MAAA,eAAA,EAAA,GAGA,KAAA,eAAA,GAGA,KAAA,UAAA,MAAA;AACA,aAAA,MAAA,QAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAEA,WAAA,SAAA,IACA,KAAA,MAAA,MAAA,GACA,KAAA,MAAA,eAAA,EAAA,GAGA,KAAA,UAAA,MAAA;AACA,aAAA,aAAA,GACA,KAAA,MAAA,QAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,IAEA,UAAAC,GAAA;AACA,MAAA,KAAA,qBAAA,CAAA,KAAA,UAKAA,EAAA,QAAA,aACAA,EAAA,eAAA,GAGA,KAAA,UAAA,EAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAAA,GAAA;AACA,MAAA,KAAA,MAAA,WAAA,SAAAA,EAAA,aAAA,KACA,KAAA,UAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,MAAA,eAAA;AACA,UAAA,KAAA,SAAA,KAAA;AACA;AAGA,YAAAC,IAAA,KAAA,MAAA;AACA,WAAA,YAAAC,EAAAD,GAAA;AAAA,QACA,mBAAA;AAAA,QACA,WAAAE,EAAA;AAAA,QACA,eAAA,KAAA,MAAA;AAAA,MACA,CAAA,GACA,KAAA,UAAA,SAAA;AAAA,IACA;AAAA,IACA,iBAAA;AACA,WAAA,WAAA,WAAA,GACA,KAAA,YAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcIconSvgWrapper-P-GkSjTH.mjs

@@ -0,0 +1,85 @@
+import "../assets/NcIconSvgWrapper-arqrq5Bj.css";
+import i, { useCssVars as o } from "vue";
+import u from "dompurify";
+import { n as p } from "./_plugin-vue2_normalizer-u6G_3nkj.mjs";
+const n = {
+  name: "NcIconSvgWrapper",
+  props: {
+    /**
+     * Raw SVG string to render
+     */
+    svg: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Label of the icon, used in aria-label
+     */
+    name: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Raw SVG path to render. Takes precedence over the SVG string in the `svg` prop.
+     */
+    path: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Size of the icon to show. Only use if not using within an icon slot.
+     * Defaults to 20px which is the Nextcloud icon size for all icon slots.
+     * @default 20
+     */
+    size: {
+      type: [Number, String],
+      default: 20,
+      validator: (t) => typeof t == "number" || t === "auto"
+    }
+  },
+  computed: {
+    /**
+     * Icon size used in CSS
+     */
+    iconSize() {
+      return typeof this.size == "number" ? `${this.size}px` : this.size;
+    },
+    cleanSvg() {
+      if (!this.svg || this.path)
+        return;
+      const t = u.sanitize(this.svg), e = new DOMParser().parseFromString(t, "image/svg+xml");
+      return e.querySelector("parsererror") ? (i.util.warn("SVG is not valid"), "") : (e.documentElement.id && e.documentElement.removeAttribute("id"), e.documentElement.outerHTML);
+    },
+    attributes() {
+      return {
+        class: "icon-vue",
+        role: "img",
+        "aria-hidden": this.name ? void 0 : !0,
+        "aria-label": this.name || void 0
+      };
+    }
+  }
+}, s = () => {
+  o((t, e) => ({
+    "101514ee": t.iconSize
+  }));
+}, a = n.setup;
+n.setup = a ? (t, e) => (s(), a(t, e)) : s;
+const m = n;
+var c = function() {
+  var e = this, r = e._self._c;
+  return e.cleanSvg ? r("span", e._b({ domProps: { innerHTML: e._s(e.cleanSvg) } }, "span", e.attributes, !1)) : r("span", e._b({}, "span", e.attributes, !1), [r("svg", { attrs: { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" } }, [r("path", { attrs: { d: e.path } })])]);
+}, l = [], _ = /* @__PURE__ */ p(
+  m,
+  c,
+  l,
+  !1,
+  null,
+  "ba0d787a",
+  null,
+  null
+);
+const S = _.exports;
+export {
+  S as N
+};

package/dist/chunks/NcIconSvgWrapper-P-GkSjTH.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcIconSvgWrapper-P-GkSjTH.mjs","sources":["../../src/components/NcIconSvgWrapper/NcIconSvgWrapper.vue"],"sourcesContent":["<!--\n  - @copyright 2022 Christopher Ng <chrng8@gmail.com>\n  -\n  - @author Christopher Ng <chrng8@gmail.com>\n  -\n  - @license AGPL-3.0-or-later\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n-->\n\n<docs>\n### Description\n\nRender raw SVG string icons.\n\n### Example\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<NcButton aria-label=\"Close\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"closeSvg\" name=\"Close\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Settings\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"cogSvg\" name=\"Cog\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Add\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"plusSvg\" name=\"Plus\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Send\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :path=\"mdiSend\" name=\"Send\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Star\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :path=\"mdiStar\" name=\"Star\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t</div>\n</template>\n\n<script>\nimport closeSvg from '@mdi/svg/svg/close.svg?raw'\nimport cogSvg from '@mdi/svg/svg/cog.svg?raw'\nimport plusSvg from '@mdi/svg/svg/plus.svg?raw'\nimport { mdiSend } from '@mdi/js'\nimport { mdiStar } from '@mdi/js'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tcloseSvg,\n\t\t\tcogSvg,\n\t\t\tplusSvg,\n\t\t\tmdiSend,\n\t\t\tmdiStar,\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(5, max-content);\n\tgap: 10px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<span v-if=\"!cleanSvg\"\n\t\tv-bind=\"attributes\">\n\t\t<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t<path :d=\"path\" />\n\t\t</svg>\n\t</span>\n\t<span v-else\n\t\tv-bind=\"attributes\"\n\t\tv-html=\"cleanSvg\" /> <!-- eslint-disable-line vue/no-v-html -->\n</template>\n\n<script>\nimport Vue from 'vue'\nimport DOMPurify from 'dompurify'\n\nexport default {\n\tname: 'NcIconSvgWrapper',\n\n\tprops: {\n\t\t/**\n\t\t * Raw SVG string to render\n\t\t */\n\t\tsvg: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Label of the icon, used in aria-label\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Raw SVG path to render. Takes precedence over the SVG string in the `svg` prop.\n\t\t */\n\t\tpath: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Size of the icon to show. Only use if not using within an icon slot.\n\t\t * Defaults to 20px which is the Nextcloud icon size for all icon slots.\n\t\t * @default 20\n\t\t */\n\t\tsize: {\n\t\t\ttype: [Number, String],\n\t\t\tdefault: 20,\n\t\t\tvalidator: (value) => typeof value === 'number' || value === 'auto',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * Icon size used in CSS\n\t\t */\n\t\ticonSize() {\n\t\t\treturn typeof this.size === 'number' ? `${this.size}px` : this.size\n\t\t},\n\n\t\tcleanSvg() {\n\t\t\tif (!this.svg || this.path) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst svg = DOMPurify.sanitize(this.svg)\n\n\t\t\tconst svgDocument = new DOMParser().parseFromString(svg, 'image/svg+xml')\n\n\t\t\tif (svgDocument.querySelector('parsererror')) {\n\t\t\t\tVue.util.warn('SVG is not valid')\n\t\t\t\treturn ''\n\t\t\t}\n\n\t\t\tif (svgDocument.documentElement.id) {\n\t\t\t\tsvgDocument.documentElement.removeAttribute('id')\n\t\t\t}\n\n\t\t\treturn svgDocument.documentElement.outerHTML\n\t\t},\n\t\tattributes() {\n\t\t\treturn {\n\t\t\t\tclass: 'icon-vue',\n\t\t\t\trole: 'img',\n\t\t\t\t'aria-hidden': !this.name ? true : undefined,\n\t\t\t\t'aria-label': this.name || undefined,\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.icon-vue {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tmin-width: 44px;\n\tmin-height: 44px;\n\topacity: 1;\n\n\t&:deep(svg) {\n\t\tfill: currentColor;\n\t\twidth: v-bind('iconSize');\n\t\theight: v-bind('iconSize');\n\t\tmax-width: v-bind('iconSize');\n\t\tmax-height: v-bind('iconSize');\n\t}\n}\n</style>\n"],"names":["__default__","value","svg","DOMPurify","svgDocument","Vue"],"mappings":";;;;AA0GA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,KAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,MAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA,OAAAA,KAAA,YAAAA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AACA,aAAA,OAAA,KAAA,QAAA,WAAA,GAAA,KAAA,IAAA,OAAA,KAAA;AAAA,IACA;AAAA,IAEA,WAAA;AACA,UAAA,CAAA,KAAA,OAAA,KAAA;AACA;AAGA,YAAAC,IAAAC,EAAA,SAAA,KAAA,GAAA,GAEAC,IAAA,IAAA,UAAA,EAAA,gBAAAF,GAAA,eAAA;AAEA,aAAAE,EAAA,cAAA,aAAA,KACAC,EAAA,KAAA,KAAA,kBAAA,GACA,OAGAD,EAAA,gBAAA,MACAA,EAAA,gBAAA,gBAAA,IAAA,GAGAA,EAAA,gBAAA;AAAA,IACA;AAAA,IACA,aAAA;AACA,aAAA;AAAA,QACA,OAAA;AAAA,QACA,MAAA;AAAA,QACA,eAAA,KAAA,OAAA,SAAA;AAAA,QACA,cAAA,KAAA,QAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcIconSvgWrapper-_lgitSfS.cjs

@@ -0,0 +1,80 @@
+var v = require("../assets/NcIconSvgWrapper-arqrq5Bj.css");
+const i = require("vue"), o = require("dompurify"), c = require("./_plugin-vue2_normalizer-DCfUPqga.cjs"), u = (t) => t && t.__esModule ? t : { default: t }, l = /* @__PURE__ */ u(i), _ = /* @__PURE__ */ u(o), n = {
+  name: "NcIconSvgWrapper",
+  props: {
+    /**
+     * Raw SVG string to render
+     */
+    svg: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Label of the icon, used in aria-label
+     */
+    name: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Raw SVG path to render. Takes precedence over the SVG string in the `svg` prop.
+     */
+    path: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Size of the icon to show. Only use if not using within an icon slot.
+     * Defaults to 20px which is the Nextcloud icon size for all icon slots.
+     * @default 20
+     */
+    size: {
+      type: [Number, String],
+      default: 20,
+      validator: (t) => typeof t == "number" || t === "auto"
+    }
+  },
+  computed: {
+    /**
+     * Icon size used in CSS
+     */
+    iconSize() {
+      return typeof this.size == "number" ? `${this.size}px` : this.size;
+    },
+    cleanSvg() {
+      if (!this.svg || this.path)
+        return;
+      const t = _.default.sanitize(this.svg), e = new DOMParser().parseFromString(t, "image/svg+xml");
+      return e.querySelector("parsererror") ? (l.default.util.warn("SVG is not valid"), "") : (e.documentElement.id && e.documentElement.removeAttribute("id"), e.documentElement.outerHTML);
+    },
+    attributes() {
+      return {
+        class: "icon-vue",
+        role: "img",
+        "aria-hidden": this.name ? void 0 : !0,
+        "aria-label": this.name || void 0
+      };
+    }
+  }
+}, s = () => {
+  i.useCssVars((t, e) => ({
+    "101514ee": t.iconSize
+  }));
+}, a = n.setup;
+n.setup = a ? (t, e) => (s(), a(t, e)) : s;
+const p = n;
+var d = function() {
+  var e = this, r = e._self._c;
+  return e.cleanSvg ? r("span", e._b({ domProps: { innerHTML: e._s(e.cleanSvg) } }, "span", e.attributes, !1)) : r("span", e._b({}, "span", e.attributes, !1), [r("svg", { attrs: { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" } }, [r("path", { attrs: { d: e.path } })])]);
+}, m = [], f = /* @__PURE__ */ c.normalizeComponent(
+  p,
+  d,
+  m,
+  !1,
+  null,
+  "ba0d787a",
+  null,
+  null
+);
+const g = f.exports;
+exports.NcIconSvgWrapper = g;

package/dist/chunks/NcIconSvgWrapper-_lgitSfS.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcIconSvgWrapper-_lgitSfS.cjs","sources":["../../src/components/NcIconSvgWrapper/NcIconSvgWrapper.vue"],"sourcesContent":["<!--\n  - @copyright 2022 Christopher Ng <chrng8@gmail.com>\n  -\n  - @author Christopher Ng <chrng8@gmail.com>\n  -\n  - @license AGPL-3.0-or-later\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n-->\n\n<docs>\n### Description\n\nRender raw SVG string icons.\n\n### Example\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<NcButton aria-label=\"Close\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"closeSvg\" name=\"Close\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Settings\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"cogSvg\" name=\"Cog\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Add\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :svg=\"plusSvg\" name=\"Plus\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Send\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :path=\"mdiSend\" name=\"Send\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcButton aria-label=\"Star\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :path=\"mdiStar\" name=\"Star\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t</div>\n</template>\n\n<script>\nimport closeSvg from '@mdi/svg/svg/close.svg?raw'\nimport cogSvg from '@mdi/svg/svg/cog.svg?raw'\nimport plusSvg from '@mdi/svg/svg/plus.svg?raw'\nimport { mdiSend } from '@mdi/js'\nimport { mdiStar } from '@mdi/js'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tcloseSvg,\n\t\t\tcogSvg,\n\t\t\tplusSvg,\n\t\t\tmdiSend,\n\t\t\tmdiStar,\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(5, max-content);\n\tgap: 10px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<span v-if=\"!cleanSvg\"\n\t\tv-bind=\"attributes\">\n\t\t<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t<path :d=\"path\" />\n\t\t</svg>\n\t</span>\n\t<span v-else\n\t\tv-bind=\"attributes\"\n\t\tv-html=\"cleanSvg\" /> <!-- eslint-disable-line vue/no-v-html -->\n</template>\n\n<script>\nimport Vue from 'vue'\nimport DOMPurify from 'dompurify'\n\nexport default {\n\tname: 'NcIconSvgWrapper',\n\n\tprops: {\n\t\t/**\n\t\t * Raw SVG string to render\n\t\t */\n\t\tsvg: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Label of the icon, used in aria-label\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Raw SVG path to render. Takes precedence over the SVG string in the `svg` prop.\n\t\t */\n\t\tpath: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Size of the icon to show. Only use if not using within an icon slot.\n\t\t * Defaults to 20px which is the Nextcloud icon size for all icon slots.\n\t\t * @default 20\n\t\t */\n\t\tsize: {\n\t\t\ttype: [Number, String],\n\t\t\tdefault: 20,\n\t\t\tvalidator: (value) => typeof value === 'number' || value === 'auto',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * Icon size used in CSS\n\t\t */\n\t\ticonSize() {\n\t\t\treturn typeof this.size === 'number' ? `${this.size}px` : this.size\n\t\t},\n\n\t\tcleanSvg() {\n\t\t\tif (!this.svg || this.path) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst svg = DOMPurify.sanitize(this.svg)\n\n\t\t\tconst svgDocument = new DOMParser().parseFromString(svg, 'image/svg+xml')\n\n\t\t\tif (svgDocument.querySelector('parsererror')) {\n\t\t\t\tVue.util.warn('SVG is not valid')\n\t\t\t\treturn ''\n\t\t\t}\n\n\t\t\tif (svgDocument.documentElement.id) {\n\t\t\t\tsvgDocument.documentElement.removeAttribute('id')\n\t\t\t}\n\n\t\t\treturn svgDocument.documentElement.outerHTML\n\t\t},\n\t\tattributes() {\n\t\t\treturn {\n\t\t\t\tclass: 'icon-vue',\n\t\t\t\trole: 'img',\n\t\t\t\t'aria-hidden': !this.name ? true : undefined,\n\t\t\t\t'aria-label': this.name || undefined,\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.icon-vue {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tmin-width: 44px;\n\tmin-height: 44px;\n\topacity: 1;\n\n\t&:deep(svg) {\n\t\tfill: currentColor;\n\t\twidth: v-bind('iconSize');\n\t\theight: v-bind('iconSize');\n\t\tmax-width: v-bind('iconSize');\n\t\tmax-height: v-bind('iconSize');\n\t}\n}\n</style>\n"],"names":["__default__","value","svg","DOMPurify__default","svgDocument","Vue__default"],"mappings":";kNA0GAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,KAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,MAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA,OAAAA,KAAA,YAAAA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AACA,aAAA,OAAA,KAAA,QAAA,WAAA,GAAA,KAAA,IAAA,OAAA,KAAA;AAAA,IACA;AAAA,IAEA,WAAA;AACA,UAAA,CAAA,KAAA,OAAA,KAAA;AACA;AAGA,YAAAC,IAAAC,EAAA,QAAA,SAAA,KAAA,GAAA,GAEAC,IAAA,IAAA,UAAA,EAAA,gBAAAF,GAAA,eAAA;AAEA,aAAAE,EAAA,cAAA,aAAA,KACAC,EAAA,QAAA,KAAA,KAAA,kBAAA,GACA,OAGAD,EAAA,gBAAA,MACAA,EAAA,gBAAA,gBAAA,IAAA,GAGAA,EAAA,gBAAA;AAAA,IACA;AAAA,IACA,aAAA;AACA,aAAA;AAAA,QACA,OAAA;AAAA,QACA,MAAA;AAAA,QACA,eAAA,KAAA,OAAA,SAAA;AAAA,QACA,cAAA,KAAA,QAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcInputConfirmCancel-a08c5cb4.mjs → NcInputConfirmCancel-HrSwS4LK.mjs}

@@ -1,16 +1,16 @@
-import "../assets/NcInputConfirmCancel-45d1d76b.css";
+import "../assets/NcInputConfirmCancel-ks8z8dIn.css";
 import o from "../Components/NcButton.mjs";
-import { r as i, c as l, a } from "./_l10n-f5af5269.mjs";
-import { A as c } from "./ArrowRight-74a9fcb2.mjs";
-import { C as u } from "./Close-271f72e2.mjs";
-import { n as p } from "./_plugin-vue2_normalizer-71e2aa87.mjs";
+import { r as i, m as l, a } from "./_l10n-gZppkly8.mjs";
+import { A as u } from "./ArrowRight-4p6gv-9o.mjs";
+import { C as p } from "./Close-5Hzp7J3v.mjs";
+import { n as c } from "./_plugin-vue2_normalizer-u6G_3nkj.mjs";
 i(l);
 const s = {
   name: "NcInputConfirmCancel",
   components: {
     NcButton: o,
-    ArrowRight: c,
-    Close: u
+    ArrowRight: u,
+    Close: p
   },
   props: {
     /**
@@ -62,7 +62,7 @@ const s = {
     }
   }
 };
-var f = function() {
+var m = function() {
   var e = this, n = e._self._c;
   return n("div", { staticClass: "app-navigation-input-confirm" }, [n("form", { on: { submit: function(t) {
     return t.preventDefault(), e.confirm.apply(null, arguments);
@@ -81,17 +81,17 @@ var f = function() {
   } }, scopedSlots: e._u([{ key: "icon", fn: function() {
     return [n("Close", { attrs: { size: 20 } })];
   }, proxy: !0 }]) })], 1)]);
-}, m = [], y = /* @__PURE__ */ p(
+}, f = [], y = /* @__PURE__ */ c(
   s,
-  f,
   m,
+  f,
   !1,
   null,
   "dcf0becf",
   null,
   null
 );
-const b = y.exports;
+const k = y.exports;
 export {
-  b as N
+  k as N
 };

package/dist/chunks/{NcInputConfirmCancel-a08c5cb4.mjs.map → NcInputConfirmCancel-HrSwS4LK.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcInputConfirmCancel-a08c5cb4.mjs","sources":["../../src/components/NcAppNavigationItem/NcInputConfirmCancel.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2020 Jonathan Treffler <mail@jonathan-treffler.de>\n -\n - @author Jonathan Treffler <mail@jonathan-treffler.de>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\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 native-type=\"submit\"\n\t\t\t\ttype=\"primary\"\n\t\t\t\t:aria-label=\"labelConfirm\"\n\t\t\t\t@click.stop.prevent=\"confirm\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<ArrowRight :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\n\t\t\t<NcButton native-type=\"reset\"\n\t\t\t\t:type=\"primary ? 'primary' : 'tertiary'\"\n\t\t\t\t:aria-label=\"labelCancel\"\n\t\t\t\t@click.stop.prevent=\"cancel\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Close :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 NcButton from '../NcButton/index.js'\nimport { t } from '../../l10n.js'\n\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport Close from 'vue-material-design-icons/Close.vue'\n\nexport default {\n\tname: 'NcInputConfirmCancel',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tArrowRight,\n\t\tClose,\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\tvalue: {\n\t\t\tdefault: '',\n\t\t\ttype: String,\n\t\t},\n\t},\n\n\temits: [\n\t\t'input',\n\t\t'confirm',\n\t\t'cancel',\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.value },\n\t\t\tset(newValue) {\n\t\t\t\tthis.$emit('input', 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-left: -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":["_sfc_main","NcButton","ArrowRight","Close","t","newValue"],"mappings":";;;;;;;AAmEA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,OAAAC;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IAEA,aAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IAEA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,cAAAC,EAAA,iBAAA;AAAA,MACA,aAAAA,EAAA,gBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,YAAA;AAAA,MACA,MAAA;AAAA,eAAA,KAAA;AAAA,MAAA;AAAA,MACA,IAAAC,GAAA;AACA,aAAA,MAAA,SAAAA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,UAAA;AACA,WAAA,MAAA,SAAA;AAAA,IACA;AAAA,IACA,SAAA;AACA,WAAA,MAAA,QAAA;AAAA,IACA;AAAA,IACA,aAAA;AACA,WAAA,MAAA,MAAA,MAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcInputConfirmCancel-HrSwS4LK.mjs","sources":["../../src/components/NcAppNavigationItem/NcInputConfirmCancel.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2020 Jonathan Treffler <mail@jonathan-treffler.de>\n -\n - @author Jonathan Treffler <mail@jonathan-treffler.de>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\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 native-type=\"submit\"\n\t\t\t\ttype=\"primary\"\n\t\t\t\t:aria-label=\"labelConfirm\"\n\t\t\t\t@click.stop.prevent=\"confirm\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<ArrowRight :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\n\t\t\t<NcButton native-type=\"reset\"\n\t\t\t\t:type=\"primary ? 'primary' : 'tertiary'\"\n\t\t\t\t:aria-label=\"labelCancel\"\n\t\t\t\t@click.stop.prevent=\"cancel\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Close :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 NcButton from '../NcButton/index.js'\nimport { t } from '../../l10n.js'\n\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport Close from 'vue-material-design-icons/Close.vue'\n\nexport default {\n\tname: 'NcInputConfirmCancel',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tArrowRight,\n\t\tClose,\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\tvalue: {\n\t\t\tdefault: '',\n\t\t\ttype: String,\n\t\t},\n\t},\n\n\temits: [\n\t\t'input',\n\t\t'confirm',\n\t\t'cancel',\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.value },\n\t\t\tset(newValue) {\n\t\t\t\tthis.$emit('input', 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-left: -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":["_sfc_main","NcButton","ArrowRight","Close","t","newValue"],"mappings":";;;;;;;AAmEA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,OAAAC;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IAEA,aAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IAEA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,cAAAC,EAAA,iBAAA;AAAA,MACA,aAAAA,EAAA,gBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,YAAA;AAAA,MACA,MAAA;AAAA,eAAA,KAAA;AAAA,MAAA;AAAA,MACA,IAAAC,GAAA;AACA,aAAA,MAAA,SAAAA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,UAAA;AACA,WAAA,MAAA,SAAA;AAAA,IACA;AAAA,IACA,SAAA;AACA,WAAA,MAAA,QAAA;AAAA,IACA;AAAA,IACA,aAAA;AACA,WAAA,MAAA,MAAA,MAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcInputConfirmCancel-q4IYDSKH.cjs

@@ -0,0 +1,91 @@
+var y = require("../assets/NcInputConfirmCancel-ks8z8dIn.css");
+const o = require("../Components/NcButton.cjs"), r = require("./_l10n-RVZyA63y.cjs"), i = require("./ArrowRight-uEMed4kl.cjs"), l = require("./Close-QFLrdRdG.cjs"), u = require("./_plugin-vue2_normalizer-DCfUPqga.cjs");
+r.register(r.t12);
+const c = {
+  name: "NcInputConfirmCancel",
+  components: {
+    NcButton: o,
+    ArrowRight: i.ArrowRight,
+    Close: l.Close
+  },
+  props: {
+    /**
+     * If this element is used on a primary element set to true for primary styling.
+     */
+    primary: {
+      default: !1,
+      type: Boolean
+    },
+    placeholder: {
+      default: "",
+      type: String
+    },
+    value: {
+      default: "",
+      type: String
+    }
+  },
+  emits: [
+    "input",
+    "confirm",
+    "cancel"
+  ],
+  data() {
+    return {
+      labelConfirm: r.t("Confirm changes"),
+      labelCancel: r.t("Cancel changes")
+    };
+  },
+  computed: {
+    valueModel: {
+      get() {
+        return this.value;
+      },
+      set(a) {
+        this.$emit("input", a);
+      }
+    }
+  },
+  methods: {
+    confirm() {
+      this.$emit("confirm");
+    },
+    cancel() {
+      this.$emit("cancel");
+    },
+    focusInput() {
+      this.$refs.input.focus();
+    }
+  }
+};
+var s = function() {
+  var e = this, n = e._self._c;
+  return n("div", { staticClass: "app-navigation-input-confirm" }, [n("form", { on: { submit: function(t) {
+    return t.preventDefault(), e.confirm.apply(null, arguments);
+  }, keydown: function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "esc", 27, t.key, ["Esc", "Escape"]) || t.ctrlKey || t.shiftKey || t.altKey || t.metaKey ? null : (t.stopPropagation(), t.preventDefault(), e.cancel.apply(null, arguments));
+  }, click: function(t) {
+    t.stopPropagation(), t.preventDefault();
+  } } }, [n("input", { directives: [{ name: "model", rawName: "v-model", value: e.valueModel, expression: "valueModel" }], ref: "input", staticClass: "app-navigation-input-confirm__input", attrs: { type: "text", placeholder: e.placeholder }, domProps: { value: e.valueModel }, on: { input: function(t) {
+    t.target.composing || (e.valueModel = t.target.value);
+  } } }), n("NcButton", { attrs: { "native-type": "submit", type: "primary", "aria-label": e.labelConfirm }, on: { click: function(t) {
+    return t.stopPropagation(), t.preventDefault(), e.confirm.apply(null, arguments);
+  } }, scopedSlots: e._u([{ key: "icon", fn: function() {
+    return [n("ArrowRight", { attrs: { size: 20 } })];
+  }, proxy: !0 }]) }), n("NcButton", { attrs: { "native-type": "reset", type: e.primary ? "primary" : "tertiary", "aria-label": e.labelCancel }, on: { click: function(t) {
+    return t.stopPropagation(), t.preventDefault(), e.cancel.apply(null, arguments);
+  } }, scopedSlots: e._u([{ key: "icon", fn: function() {
+    return [n("Close", { attrs: { size: 20 } })];
+  }, proxy: !0 }]) })], 1)]);
+}, p = [], f = /* @__PURE__ */ u.normalizeComponent(
+  c,
+  s,
+  p,
+  !1,
+  null,
+  "dcf0becf",
+  null,
+  null
+);
+const m = f.exports;
+exports.NcInputConfirmCancel = m;

package/dist/chunks/{NcInputConfirmCancel-b99898db.cjs.map → NcInputConfirmCancel-q4IYDSKH.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcInputConfirmCancel-b99898db.cjs","sources":["../../src/components/NcAppNavigationItem/NcInputConfirmCancel.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2020 Jonathan Treffler <mail@jonathan-treffler.de>\n -\n - @author Jonathan Treffler <mail@jonathan-treffler.de>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\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 native-type=\"submit\"\n\t\t\t\ttype=\"primary\"\n\t\t\t\t:aria-label=\"labelConfirm\"\n\t\t\t\t@click.stop.prevent=\"confirm\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<ArrowRight :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\n\t\t\t<NcButton native-type=\"reset\"\n\t\t\t\t:type=\"primary ? 'primary' : 'tertiary'\"\n\t\t\t\t:aria-label=\"labelCancel\"\n\t\t\t\t@click.stop.prevent=\"cancel\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Close :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 NcButton from '../NcButton/index.js'\nimport { t } from '../../l10n.js'\n\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport Close from 'vue-material-design-icons/Close.vue'\n\nexport default {\n\tname: 'NcInputConfirmCancel',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tArrowRight,\n\t\tClose,\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\tvalue: {\n\t\t\tdefault: '',\n\t\t\ttype: String,\n\t\t},\n\t},\n\n\temits: [\n\t\t'input',\n\t\t'confirm',\n\t\t'cancel',\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.value },\n\t\t\tset(newValue) {\n\t\t\t\tthis.$emit('input', 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-left: -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":["_sfc_main","Components_NcButton","ArrowRight","Close","_l10n","newValue"],"mappings":";;;AAmEA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC,EAAA;AAAA,IACA,OAAAC,EAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IAEA,aAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IAEA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,cAAAC,EAAA,EAAA,iBAAA;AAAA,MACA,aAAAA,EAAA,EAAA,gBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,YAAA;AAAA,MACA,MAAA;AAAA,eAAA,KAAA;AAAA,MAAA;AAAA,MACA,IAAAC,GAAA;AACA,aAAA,MAAA,SAAAA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,UAAA;AACA,WAAA,MAAA,SAAA;AAAA,IACA;AAAA,IACA,SAAA;AACA,WAAA,MAAA,QAAA;AAAA,IACA;AAAA,IACA,aAAA;AACA,WAAA,MAAA,MAAA,MAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcInputConfirmCancel-q4IYDSKH.cjs","sources":["../../src/components/NcAppNavigationItem/NcInputConfirmCancel.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2020 Jonathan Treffler <mail@jonathan-treffler.de>\n -\n - @author Jonathan Treffler <mail@jonathan-treffler.de>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\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 native-type=\"submit\"\n\t\t\t\ttype=\"primary\"\n\t\t\t\t:aria-label=\"labelConfirm\"\n\t\t\t\t@click.stop.prevent=\"confirm\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<ArrowRight :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\n\t\t\t<NcButton native-type=\"reset\"\n\t\t\t\t:type=\"primary ? 'primary' : 'tertiary'\"\n\t\t\t\t:aria-label=\"labelCancel\"\n\t\t\t\t@click.stop.prevent=\"cancel\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Close :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 NcButton from '../NcButton/index.js'\nimport { t } from '../../l10n.js'\n\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport Close from 'vue-material-design-icons/Close.vue'\n\nexport default {\n\tname: 'NcInputConfirmCancel',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tArrowRight,\n\t\tClose,\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\tvalue: {\n\t\t\tdefault: '',\n\t\t\ttype: String,\n\t\t},\n\t},\n\n\temits: [\n\t\t'input',\n\t\t'confirm',\n\t\t'cancel',\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.value },\n\t\t\tset(newValue) {\n\t\t\t\tthis.$emit('input', 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-left: -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":["_sfc_main","Components_NcButton","ArrowRight","Close","_l10n","newValue"],"mappings":";;;AAmEA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC,EAAA;AAAA,IACA,OAAAC,EAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IAEA,aAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IAEA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,cAAAC,EAAA,EAAA,iBAAA;AAAA,MACA,aAAAA,EAAA,EAAA,gBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,YAAA;AAAA,MACA,MAAA;AAAA,eAAA,KAAA;AAAA,MAAA;AAAA,MACA,IAAAC,GAAA;AACA,aAAA,MAAA,SAAAA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,UAAA;AACA,WAAA,MAAA,SAAA;AAAA,IACA;AAAA,IACA,SAAA;AACA,WAAA,MAAA,QAAA;AAAA,IACA;AAAA,IACA,aAAA;AACA,WAAA,MAAA,MAAA,MAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}