@nextcloud/vue 9.0.0-alpha.0 → 9.0.0-alpha.2

package/dist/chunks/NcDateTime-D7MYyd1V.cjs

@@ -0,0 +1,136 @@
+"use strict";
+const e = require("vue"), w = require("@nextcloud/l10n"), m = require("./_l10n-CEec8lDL.cjs"), _ = require("./_plugin-vue_export-helper-CTzpuyvq.cjs");
+m.register(m.t2);
+/**
+ * @copyright Copyright (c) 2024 Ferdinand Thiessen <opensource@fthiessen.de>
+ *
+ * @author Ferdinand Thiessen <opensource@fthiessen.de>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+const D = {
+  long: m.t("a few seconds ago"),
+  short: m.t("seconds ago"),
+  // FOR TRANSLATORS: Shorter version of 'a few seconds ago'
+  narrow: m.t("sec. ago")
+  // FOR TRANSLATORS: If possible in your language an even shorter version of 'a few seconds ago'
+};
+function T(n = Date.now(), i = {}) {
+  const o = e.ref(Date.now());
+  let t = null;
+  const l = e.ref({
+    timeStyle: "medium",
+    dateStyle: "short",
+    relativeTime: "long",
+    ignoreSeconds: !1,
+    ...e.unref(i)
+  }), r = e.computed(() => ({ ...e.unref(i), ...l.value })), f = e.computed(() => new Date(e.unref(n))), p = e.computed(() => new Intl.DateTimeFormat(w.getCanonicalLocale(), r.value.format).format(f.value)), g = e.computed(() => {
+    if (r.value.relativeTime !== !1) {
+      const a = new Intl.RelativeTimeFormat(w.getCanonicalLocale(), { numeric: "auto", style: r.value.relativeTime }), u = (f.value - o.value) / 1e3;
+      if (Math.abs(u) <= 90)
+        return r.value.ignoreSeconds ? D[r.value.relativeTime] : a.format(Math.round(u), "second");
+      const c = u / 60;
+      if (Math.abs(c) <= 90)
+        return a.format(Math.round(c), "minute");
+      const d = c / 60;
+      if (Math.abs(d) <= 24)
+        return a.format(Math.round(d), "hour");
+      const s = d / 24;
+      if (Math.abs(s) <= 6)
+        return a.format(Math.round(s), "day");
+      const v = s / 7;
+      if (Math.abs(v) <= 4)
+        return a.format(Math.round(v), "week");
+      const h = s / 30;
+      return Math.abs(h) <= 12 ? a.format(Math.round(h), "month") : a.format(Math.round(s / 365), "year");
+    }
+    return p;
+  });
+  return e.watch([r], (a) => {
+    window.clearInterval(t), t = void 0, a.relativeTime && (t = window.setInterval(() => {
+      o.value = /* @__PURE__ */ new Date();
+    }, 1e3));
+  }), e.onMounted(() => {
+    r.value.relativeTime !== !1 && (t = window.setInterval(() => {
+      o.value = /* @__PURE__ */ new Date();
+    }, 1e3));
+  }), e.onUnmounted(() => {
+    window.clearInterval(t);
+  }), {
+    formattedTime: g,
+    formattedFullTime: p,
+    options: l
+  };
+}
+const M = {
+  name: "NcDateTime",
+  props: {
+    /**
+     * The timestamp to display, either an unix timestamp (in milliseconds) or a Date object
+     */
+    timestamp: {
+      type: [Date, Number],
+      required: !0
+    },
+    /**
+     * The format used for displaying, or if relative time is used the format used for the title (optional)
+     *
+     * @type {Intl.DateTimeFormatOptions}
+     */
+    format: {
+      type: Object,
+      default: () => ({ timeStyle: "medium", dateStyle: "short" })
+    },
+    /**
+     * Wether to display the timestamp as time from now (optional)
+     *
+     * - `false`: Disable relative time
+     * - `'long'`: Long text, like *2 seconds ago* (default)
+     * - `'short'`: Short text, like *2 sec. ago*
+     * - `'narrow'`: Even shorter text (same as `'short'` on some languages)
+     */
+    relativeTime: {
+      type: [Boolean, String],
+      default: "long",
+      validator: (n) => n === !1 || ["long", "short", "narrow"].includes(n)
+    },
+    /**
+     * Ignore seconds when displaying the relative time and just show `a few seconds ago`
+     */
+    ignoreSeconds: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(n) {
+    const i = e.computed(() => n.timestamp), { formattedTime: o, formattedFullTime: t } = T(i, n);
+    return {
+      formattedTime: o,
+      formattedFullTime: t
+    };
+  }
+}, y = ["data-timestamp", "title"];
+function S(n, i, o, t, l, r) {
+  return e.openBlock(), e.createElementBlock("span", {
+    class: "nc-datetime",
+    "data-timestamp": o.timestamp,
+    title: t.formattedFullTime
+  }, e.toDisplayString(t.formattedTime), 9, y);
+}
+const b = /* @__PURE__ */ _._export_sfc(M, [["render", S]]);
+exports.NcDateTime = b;
+exports.useFormatDateTime = T;

package/dist/chunks/NcDateTime-D7MYyd1V.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcDateTime-D7MYyd1V.cjs","sources":["../../src/composables/useFormatDateTime.js","../../src/components/NcDateTime/NcDateTime.vue"],"sourcesContent":["/**\n * @copyright Copyright (c) 2024 Ferdinand Thiessen <opensource@fthiessen.de>\n *\n * @author Ferdinand Thiessen <opensource@fthiessen.de>\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\nimport { getCanonicalLocale } from '@nextcloud/l10n'\nimport { computed, onUnmounted, ref, onMounted, watch, unref } from 'vue'\nimport { t } from '../l10n.js'\n\nconst FEW_SECONDS_AGO = {\n\tlong: t('a few seconds ago'),\n\tshort: t('seconds ago'), // FOR TRANSLATORS: Shorter version of 'a few seconds ago'\n\tnarrow: t('sec. ago'), // FOR TRANSLATORS: If possible in your language an even shorter version of 'a few seconds ago'\n}\n\n/**\n * Composable for formatting time stamps using current users locale\n *\n * @param {Date | number | import('vue').Ref<Date> | import('vue').Ref<number>} timestamp Current timestamp\n * @param {object} opts Optional options\n * @param {Intl.DateTimeFormatOptions} opts.format The format used for displaying, or if relative time is used the format used for the title (optional)\n * @param {boolean} opts.ignoreSeconds Ignore seconds when displaying the relative time and just show `a few seconds ago`\n * @param {false | 'long' | 'short' | 'narrow'} opts.relativeTime Wether to display the timestamp as time from now (optional)\n */\nexport function useFormatDateTime(timestamp = Date.now(), opts = {}) {\n\t// Current time as Date.now is not reactive\n\tconst currentTime = ref(Date.now())\n\t// The interval ID for the window\n\tlet intervalId = null\n\n\tconst options = ref({\n\t\ttimeStyle: 'medium',\n\t\tdateStyle: 'short',\n\t\trelativeTime: 'long',\n\t\tignoreSeconds: false,\n\t\t...unref(opts),\n\t})\n\tconst wrappedOptions = computed(() => ({ ...unref(opts), ...options.value }))\n\n\t/** ECMA Date object of the timestamp */\n\tconst date = computed(() => new Date(unref(timestamp)))\n\n\tconst formattedFullTime = computed(() => {\n\t\tconst formatter = new Intl.DateTimeFormat(getCanonicalLocale(), wrappedOptions.value.format)\n\t\treturn formatter.format(date.value)\n\t})\n\n\t/** Time string formatted for main text */\n\tconst formattedTime = computed(() => {\n\t\tif (wrappedOptions.value.relativeTime !== false) {\n\t\t\tconst formatter = new Intl.RelativeTimeFormat(getCanonicalLocale(), { numeric: 'auto', style: wrappedOptions.value.relativeTime })\n\n\t\t\tconst diff = date.value - currentTime.value\n\t\t\tconst seconds = diff / 1000\n\t\t\tif (Math.abs(seconds) <= 90) {\n\t\t\t\tif (wrappedOptions.value.ignoreSeconds) {\n\t\t\t\t\treturn FEW_SECONDS_AGO[wrappedOptions.value.relativeTime]\n\t\t\t\t} else {\n\t\t\t\t\treturn formatter.format(Math.round(seconds), 'second')\n\t\t\t\t}\n\t\t\t}\n\t\t\tconst minutes = seconds / 60\n\t\t\tif (Math.abs(minutes) <= 90) {\n\t\t\t\treturn formatter.format(Math.round(minutes), 'minute')\n\t\t\t}\n\t\t\tconst hours = minutes / 60\n\t\t\tif (Math.abs(hours) <= 24) {\n\t\t\t\treturn formatter.format(Math.round(hours), 'hour')\n\t\t\t}\n\t\t\tconst days = hours / 24\n\t\t\tif (Math.abs(days) <= 6) {\n\t\t\t\treturn formatter.format(Math.round(days), 'day')\n\t\t\t}\n\t\t\tconst weeks = days / 7\n\t\t\tif (Math.abs(weeks) <= 4) {\n\t\t\t\treturn formatter.format(Math.round(weeks), 'week')\n\t\t\t}\n\t\t\tconst months = days / 30\n\t\t\tif (Math.abs(months) <= 12) {\n\t\t\t\treturn formatter.format(Math.round(months), 'month')\n\t\t\t}\n\t\t\treturn formatter.format(Math.round(days / 365), 'year')\n\t\t}\n\t\treturn formattedFullTime\n\t})\n\n\t// Set or clear interval if relative time is dis/enabled\n\twatch([wrappedOptions], (opts) => {\n\t\twindow.clearInterval(intervalId)\n\t\tintervalId = undefined\n\t\tif (opts.relativeTime) {\n\t\t\tintervalId = window.setInterval(() => { currentTime.value = new Date() }, 1000)\n\t\t}\n\t})\n\n\t// Start the interval for setting the current time if relative time is enabled\n\tonMounted(() => {\n\t\tif (wrappedOptions.value.relativeTime !== false) {\n\t\t\tintervalId = window.setInterval(() => { currentTime.value = new Date() }, 1000)\n\t\t}\n\t})\n\n\t// ensure interval is cleared\n\tonUnmounted(() => {\n\t\twindow.clearInterval(intervalId)\n\t})\n\n\treturn {\n\t\tformattedTime,\n\t\tformattedFullTime,\n\t\toptions,\n\t}\n}\n","<!--\n - @copyright Copyright (c) 2023 Ferdinand Thiessen <opensource@fthiessen.de>\n -\n - @author Ferdinand Thiessen <opensource@fthiessen.de>\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\n### General description\n\nThis components purpose is to display a timestamp in the users local time format.\nIt also supports relative time, for examples *6 seconds ago*.\n\n#### Standard usage\n\nWithout any optional parameters the timestamp is displayed as a relative datetime and a title with the full date is added.\n\n```vue\n<template>\n\t<NcDateTime :timestamp=\"timestamp\" />\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Ignore seconds\n\nIf you do not want the seconds to be counted up until minutes are reached you can simply use the `ignore-seconds` property.\n\n```vue\n<template>\n\t<NcDateTime :timestamp=\"timestamp\" :ignore-seconds=\"true\" />\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Custom date or time format\n\nThe component allows to format the full date for the title by settings the `format` property.\nIt is also possible to disable relative time by setting the `relativeTime` property to `false`.\n\n```vue\n<template>\n\t<div>\n\t\t<h4>Short relative time</h4>\n\t\t<NcDateTime :timestamp=\"timestamp\" relative-time=\"short\" />\n\n\t\t<h4>Custom title format</h4>\n\t\t<NcDateTime :timestamp=\"timestamp\" :format=\"timeFormat\" />\n\n\t\t<h4>Without relative time</h4>\n\t\t<NcDateTime :timestamp=\"timestamp\" :format=\"timeFormat\" :relative-time=\"false\" />\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t\t/** For allowed formats see the Intl.DateTimeFormat options */\n\t\t\t\ttimeFormat: {\n\t\t\t\t\tdateStyle: 'short',\n\t\t\t\t\ttimeStyle: 'full'\n\t\t\t\t},\n\t\t\t}\n\t\t},\n\t}\n</script>\n<style>\nh4 {\n\tfont-weight: bold;\n\tmargin-top: 12px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<span class=\"nc-datetime\"\n\t\t:data-timestamp=\"timestamp\"\n\t\t:title=\"formattedFullTime\">{{ formattedTime }}</span>\n</template>\n\n<script>\nimport { computed } from 'vue'\nimport { useFormatDateTime } from '../../composables/useFormatDateTime.js'\n\nexport default {\n\tname: 'NcDateTime',\n\n\tprops: {\n\t\t/**\n\t\t * The timestamp to display, either an unix timestamp (in milliseconds) or a Date object\n\t\t */\n\t\ttimestamp: {\n\t\t\ttype: [Date, Number],\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * The format used for displaying, or if relative time is used the format used for the title (optional)\n\t\t *\n\t\t * @type {Intl.DateTimeFormatOptions}\n\t\t */\n\t\tformat: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({ timeStyle: 'medium', dateStyle: 'short' }),\n\t\t},\n\t\t/**\n\t\t * Wether to display the timestamp as time from now (optional)\n\t\t *\n\t\t * - `false`: Disable relative time\n\t\t * - `'long'`: Long text, like *2 seconds ago* (default)\n\t\t * - `'short'`: Short text, like *2 sec. ago*\n\t\t * - `'narrow'`: Even shorter text (same as `'short'` on some languages)\n\t\t */\n\t\trelativeTime: {\n\t\t\ttype: [Boolean, String],\n\t\t\tdefault: 'long',\n\t\t\tvalidator: (v) => v === false || ['long', 'short', 'narrow'].includes(v),\n\t\t},\n\t\t/**\n\t\t * Ignore seconds when displaying the relative time and just show `a few seconds ago`\n\t\t */\n\t\tignoreSeconds: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tsetup(props) {\n\t\tconst timestamp = computed(() => props.timestamp)\n\t\tconst { formattedTime, formattedFullTime } = useFormatDateTime(timestamp, props)\n\t\treturn {\n\t\t\tformattedTime,\n\t\t\tformattedFullTime,\n\t\t}\n\t},\n}\n</script>\n"],"names":["FEW_SECONDS_AGO","t","useFormatDateTime","timestamp","opts","currentTime","ref","intervalId","options","unref","wrappedOptions","computed","date","formattedFullTime","getCanonicalLocale","formattedTime","formatter","seconds","minutes","hours","days","weeks","months","watch","onMounted","onUnmounted","_sfc_main","v","props","_hoisted_1","_createElementBlock","$props","$setup","_toDisplayString"],"mappings":"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"}

package/dist/chunks/NcDateTimePicker-CpnkJmoO.mjs

@@ -0,0 +1,338 @@
+import "../assets/NcDateTimePicker-CMP2zDCI.css";
+import { r as P, F as T, a as i } from "./_l10n-D1NkaqfQ.mjs";
+import { G as N } from "./GenRandomId-BW3iYFf9.mjs";
+import { N as Y } from "./NcTimezonePicker-Bz-VFrVD.mjs";
+import { N as _ } from "./NcPopover-BTBahSg4.mjs";
+import { S as H } from "./ScopeComponent-CUI_ekHj.mjs";
+import { openBlock as a, createElementBlock as s, mergeProps as h, createElementVNode as l, toDisplayString as f, createCommentVNode as z, resolveComponent as m, createBlock as u, createSlots as $, withCtx as c, withModifiers as V, createVNode as C, renderList as B, renderSlot as I, normalizeProps as U, guardReactiveProps as W } from "vue";
+import { _ as g } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+import { getMonthNames as F, getMonthNamesShort as A, getDayNames as L, getDayNamesShort as O, getDayNamesMin as j, getFirstDay as E } from "@nextcloud/l10n";
+import G from "vue-datepicker-next";
+P(T);
+const R = {
+  name: "CalendarBlankIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+}, Z = ["aria-hidden", "aria-label"], q = ["fill", "width", "height"], J = { d: "M19,19H5V8H19M16,1V3H8V1H6V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H18V1" }, K = { key: 0 };
+function Q(e, o, t, r, p, y) {
+  return a(), s("span", h(e.$attrs, {
+    "aria-hidden": t.title ? null : !0,
+    "aria-label": t.title,
+    class: "material-design-icon calendar-blank-icon",
+    role: "img",
+    onClick: o[0] || (o[0] = (d) => e.$emit("click", d))
+  }), [
+    (a(), s("svg", {
+      fill: t.fillColor,
+      class: "material-design-icon__svg",
+      width: t.size,
+      height: t.size,
+      viewBox: "0 0 24 24"
+    }, [
+      l("path", J, [
+        t.title ? (a(), s("title", K, f(t.title), 1)) : z("", !0)
+      ])
+    ], 8, q))
+  ], 16, Z);
+}
+const X = /* @__PURE__ */ g(R, [["render", Q]]), x = {
+  name: "WebIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+}, ee = ["aria-hidden", "aria-label"], te = ["fill", "width", "height"], oe = { d: "M16.36,14C16.44,13.34 16.5,12.68 16.5,12C16.5,11.32 16.44,10.66 16.36,10H19.74C19.9,10.64 20,11.31 20,12C20,12.69 19.9,13.36 19.74,14M14.59,19.56C15.19,18.45 15.65,17.25 15.97,16H18.92C17.96,17.65 16.43,18.93 14.59,19.56M14.34,14H9.66C9.56,13.34 9.5,12.68 9.5,12C9.5,11.32 9.56,10.65 9.66,10H14.34C14.43,10.65 14.5,11.32 14.5,12C14.5,12.68 14.43,13.34 14.34,14M12,19.96C11.17,18.76 10.5,17.43 10.09,16H13.91C13.5,17.43 12.83,18.76 12,19.96M8,8H5.08C6.03,6.34 7.57,5.06 9.4,4.44C8.8,5.55 8.35,6.75 8,8M5.08,16H8C8.35,17.25 8.8,18.45 9.4,19.56C7.57,18.93 6.03,17.65 5.08,16M4.26,14C4.1,13.36 4,12.69 4,12C4,11.31 4.1,10.64 4.26,10H7.64C7.56,10.66 7.5,11.32 7.5,12C7.5,12.68 7.56,13.34 7.64,14M12,4.03C12.83,5.23 13.5,6.57 13.91,8H10.09C10.5,6.57 11.17,5.23 12,4.03M18.92,8H15.97C15.65,6.75 15.19,5.55 14.59,4.44C16.43,5.07 17.96,6.34 18.92,8M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" }, ae = { key: 0 };
+function re(e, o, t, r, p, y) {
+  return a(), s("span", h(e.$attrs, {
+    "aria-hidden": t.title ? null : !0,
+    "aria-label": t.title,
+    class: "material-design-icon web-icon",
+    role: "img",
+    onClick: o[0] || (o[0] = (d) => e.$emit("click", d))
+  }), [
+    (a(), s("svg", {
+      fill: t.fillColor,
+      class: "material-design-icon__svg",
+      width: t.size,
+      height: t.size,
+      viewBox: "0 0 24 24"
+    }, [
+      l("path", oe, [
+        t.title ? (a(), s("title", ae, f(t.title), 1)) : z("", !0)
+      ])
+    ], 8, te))
+  ], 16, ee);
+}
+const ne = /* @__PURE__ */ g(x, [["render", re]]), w = {
+  date: "YYYY-MM-DD",
+  datetime: "YYYY-MM-DD H:mm:ss",
+  year: "YYYY",
+  month: "YYYY-MM",
+  time: "H:mm:ss",
+  week: "w"
+}, ie = H({
+  name: "NcDateTimePicker",
+  components: {
+    CalendarBlank: X,
+    DatePicker: G,
+    NcPopover: _,
+    NcTimezonePicker: Y,
+    Web: ne
+  },
+  props: {
+    clearable: {
+      type: Boolean,
+      default: !1
+    },
+    minuteStep: {
+      type: Number,
+      default: 10
+    },
+    type: {
+      type: String,
+      default: "date"
+    },
+    format: {
+      type: String,
+      default: null
+    },
+    formatter: {
+      type: Object,
+      default: null
+    },
+    lang: {
+      type: Object,
+      default: null
+    },
+    /**
+     * The value to initialize, but also two-way bind the selected date. The date is – like the `Date` object in
+     * JavaScript – tied to UTC. The selected time zone does not have an influence of the selected time and date
+     * value. You have to translate the time yourself when you want to factor in time zones.
+     */
+    // eslint-disable-next-line
+    modelValue: {
+      default: () => /* @__PURE__ */ new Date()
+    },
+    /**
+     * The preselected IANA time zone ID for the time zone picker, only relevant in combination with `:show-timezone-select="true"`. Example: `Europe/Berlin`. The prop supports two-way binding through v-model directive.
+     */
+    timezoneId: {
+      type: String,
+      default: "UTC"
+    },
+    showTimezoneSelect: {
+      type: Boolean,
+      default: !1
+    },
+    highlightTimezone: {
+      type: Boolean,
+      default: !1
+    },
+    appendToBody: {
+      type: Boolean,
+      default: !1
+    },
+    showWeekNumber: {
+      type: Boolean,
+      default: !1
+    },
+    placeholder: {
+      type: String,
+      default: null
+    }
+  },
+  emits: [
+    "update:modelValue",
+    "update:timezone-id"
+  ],
+  setup() {
+    return {
+      timezoneDialogHeaderId: "timezone-dialog-header-".concat(N())
+    };
+  },
+  data() {
+    return {
+      showTimezonePopover: !1,
+      tzVal: this.timezoneId
+    };
+  },
+  computed: {
+    /**
+     * Datepicker language
+     * https://github.com/mengxiong10/vue2-datepicker/blob/master/locale.md
+     *
+     * @return {object}
+     */
+    defaultLang() {
+      return {
+        formatLocale: {
+          months: F(),
+          monthsShort: A(),
+          weekdays: L(),
+          weekdaysShort: O(),
+          weekdaysMin: j(),
+          // 0 = sunday, 1 = monday
+          firstDayOfWeek: E()
+        },
+        monthFormat: "MMM"
+      };
+    },
+    /**
+     * Translated placeholder
+     *
+     * @return {string}
+     */
+    defaultPlaceholder() {
+      return this.type === "time" ? i("Pick a time") : this.type === "month" ? i("Pick a month") : this.type === "year" ? i("Pick a year") : this.type === "week" ? i("Pick a week") : this.type === "date" ? i("Pick a date") : i("Pick a date and a time");
+    },
+    /**
+     * If format is not provided, try to match the type
+     * or fallback to 'date'
+     *
+     * @return {string}
+     */
+    formatTypeMap() {
+      var e;
+      return (e = w[this.type]) != null ? e : w.date;
+    },
+    /**
+     * The formatter used for the vue-datepicker to fix nextcloud-libraries/nextcloud-vue#5044
+     */
+    internalFormatter() {
+      var o;
+      return {
+        getWeek: (t) => {
+          const r = new Date(Date.UTC(t.getFullYear(), t.getMonth(), t.getDate()));
+          r.setUTCDate(r.getUTCDate() + 4 - (r.getUTCDay() || 7));
+          const p = new Date(Date.UTC(r.getUTCFullYear(), 0, 1));
+          return Math.ceil(((r - p) / 864e5 + 1) / 7);
+        },
+        // allow to override it by users using the `formatter` prop
+        ...(o = this.formatter) != null ? o : {}
+      };
+    }
+  },
+  methods: {
+    t: i,
+    handleSelectYear(e) {
+      const o = this.$refs.datepicker.currentValue;
+      if (o)
+        try {
+          const t = new Date(new Date(o).setFullYear(e));
+          this.$refs.datepicker.selectDate(t);
+        } catch {
+          console.error("Invalid value", o, e);
+        }
+    },
+    handleSelectMonth(e) {
+      const o = this.$refs.datepicker.currentValue;
+      if (o)
+        try {
+          const t = new Date(new Date(o).setMonth(e));
+          this.$refs.datepicker.selectDate(t);
+        } catch {
+          console.error("Invalid value", o, e);
+        }
+    },
+    /**
+     * Toggles the visibility of the time zone popover
+     */
+    toggleTimezonePopover() {
+      this.showTimezoneSelect && (this.showTimezonePopover = !this.showTimezonePopover);
+    }
+  }
+}), le = ["aria-labelledby"], se = { class: "timezone-popover-wrapper__label" }, de = ["id"];
+function me(e, o, t, r, p, y) {
+  const d = m("Web"), M = m("NcTimezonePicker"), v = m("NcPopover"), b = m("CalendarBlank"), D = m("DatePicker");
+  return a(), u(D, {
+    ref: "datepicker",
+    "append-to-body": e.appendToBody,
+    clearable: e.clearable,
+    format: e.format ? e.format : e.formatTypeMap,
+    formatter: e.internalFormatter,
+    lang: e.lang ? e.lang : e.defaultLang,
+    "minute-step": e.minuteStep,
+    placeholder: e.placeholder ? e.placeholder : e.defaultPlaceholder,
+    "popup-class": { "show-week-number": e.showWeekNumber },
+    "show-week-number": e.showWeekNumber,
+    type: e.type,
+    value: e.modelValue,
+    onSelectYear: e.handleSelectYear,
+    onSelectMonth: e.handleSelectMonth,
+    "onUpdate:value": o[2] || (o[2] = (n) => e.$emit("update:modelValue", n))
+  }, $({
+    "icon-calendar": c(() => [
+      e.showTimezoneSelect ? (a(), u(v, {
+        key: 0,
+        shown: e.showTimezonePopover,
+        "onUpdate:shown": o[1] || (o[1] = (n) => e.showTimezonePopover = n),
+        "popup-role": "dialog",
+        "popover-base-class": "timezone-select__popper"
+      }, {
+        trigger: c(({ attrs: n }) => [
+          l("button", h({
+            class: ["datetime-picker-inline-icon", { "datetime-picker-inline-icon--highlighted": e.highlightTimezone }]
+          }, n, {
+            onMousedown: V(() => {
+            }, ["stop", "prevent"])
+          }), [
+            C(d, { size: 20 })
+          ], 16)
+        ]),
+        default: c(() => [
+          l("div", {
+            role: "dialog",
+            "aria-labelledby": e.timezoneDialogHeaderId
+          }, [
+            l("div", se, [
+              l("strong", { id: e.timezoneDialogHeaderId }, f(e.t("Please select a time zone:")), 9, de)
+            ]),
+            C(M, {
+              "model-value": e.tzVal,
+              class: "timezone-popover-wrapper__timezone-select",
+              "onUpdate:modelValue": o[0] || (o[0] = (n) => e.$emit("update:timezone-id", n))
+            }, null, 8, ["model-value"])
+          ], 8, le)
+        ]),
+        _: 1
+      }, 8, ["shown"])) : (a(), u(b, {
+        key: 1,
+        size: 20
+      }))
+    ]),
+    _: 2
+  }, [
+    B(e.$slots, (n, k) => ({
+      name: k,
+      fn: c((S) => [
+        I(e.$slots, k, U(W(S)), void 0, !0)
+      ])
+    }))
+  ]), 1032, ["append-to-body", "clearable", "format", "formatter", "lang", "minute-step", "placeholder", "popup-class", "show-week-number", "type", "value", "onSelectYear", "onSelectMonth"]);
+}
+const ze = /* @__PURE__ */ g(ie, [["render", me], ["__scopeId", "data-v-915ae327"]]);
+export {
+  ze as N
+};

package/dist/chunks/NcDateTimePicker-CpnkJmoO.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcDateTimePicker-CpnkJmoO.mjs","sources":["../../node_modules/vue-material-design-icons/CalendarBlank.vue","../../node_modules/vue-material-design-icons/Web.vue","../../src/components/NcDateTimePicker/NcDateTimePicker.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : true\"\n        :aria-label=\"title\"\n        class=\"material-design-icon calendar-blank-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=\"M19,19H5V8H19M16,1V3H8V1H6V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H18V1\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"CalendarBlankIcon\",\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>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : true\"\n        :aria-label=\"title\"\n        class=\"material-design-icon web-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=\"M16.36,14C16.44,13.34 16.5,12.68 16.5,12C16.5,11.32 16.44,10.66 16.36,10H19.74C19.9,10.64 20,11.31 20,12C20,12.69 19.9,13.36 19.74,14M14.59,19.56C15.19,18.45 15.65,17.25 15.97,16H18.92C17.96,17.65 16.43,18.93 14.59,19.56M14.34,14H9.66C9.56,13.34 9.5,12.68 9.5,12C9.5,11.32 9.56,10.65 9.66,10H14.34C14.43,10.65 14.5,11.32 14.5,12C14.5,12.68 14.43,13.34 14.34,14M12,19.96C11.17,18.76 10.5,17.43 10.09,16H13.91C13.5,17.43 12.83,18.76 12,19.96M8,8H5.08C6.03,6.34 7.57,5.06 9.4,4.44C8.8,5.55 8.35,6.75 8,8M5.08,16H8C8.35,17.25 8.8,18.45 9.4,19.56C7.57,18.93 6.03,17.65 5.08,16M4.26,14C4.1,13.36 4,12.69 4,12C4,11.31 4.1,10.64 4.26,10H7.64C7.56,10.66 7.5,11.32 7.5,12C7.5,12.68 7.56,13.34 7.64,14M12,4.03C12.83,5.23 13.5,6.57 13.91,8H10.09C10.5,6.57 11.17,5.23 12,4.03M18.92,8H15.97C15.65,6.75 15.19,5.55 14.59,4.44C16.43,5.07 17.96,6.34 18.92,8M12,2C6.47,2 2,6.5 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: \"WebIcon\",\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  - @copyright Copyright (c) 2018 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>\n> We're wrapping the awesome datepicker library here https://github.com/mengxiong10/vue-datepicker-next\n> Please check there for all the available options.\n\n### Defaults\n- cleareable: false\n- minute-step: 10\n\n### Example\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{{ time }}\n\t</span>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttime: new Date('2022-10-10 10:10:10'),\n\t\t}\n\t},\n}\n</script>\n```\n\n### Example with confirm button\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```vue\n<template>\n\t<span>\n\t\t<NcDateTimePicker\n\t\t\tv-model=\"time\"\n\t\t\trange\n\t\t\ttype=\"date\" />\n\t\t{{ time }}\n\t</span>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttime: null,\n\t\t}\n\t},\n}\n</script>\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\t:show-timezone-select=\"true\"\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<template>\n\t<DatePicker ref=\"datepicker\"\n\t\t:append-to-body=\"appendToBody\"\n\t\t:clearable=\"clearable\"\n\t\t:format=\"format ? format : formatTypeMap\"\n\t\t:formatter=\"internalFormatter\"\n\t\t:lang=\"lang ? lang : defaultLang\"\n\t\t:minute-step=\"minuteStep\"\n\t\t:placeholder=\"placeholder ? placeholder : defaultPlaceholder\"\n\t\t:popup-class=\"{ 'show-week-number': showWeekNumber }\"\n\t\t:show-week-number=\"showWeekNumber\"\n\t\t:type=\"type\"\n\t\t:value=\"modelValue\"\n\t\t@select-year=\"handleSelectYear\"\n\t\t@select-month=\"handleSelectMonth\"\n\t\t@update:value=\"$emit('update:modelValue', $event)\">\n\t\t<template #icon-calendar>\n\t\t\t<NcPopover v-if=\"showTimezoneSelect\"\n\t\t\t\tv-model:shown=\"showTimezonePopover\"\n\t\t\t\tpopup-role=\"dialog\"\n\t\t\t\tpopover-base-class=\"timezone-select__popper\">\n\t\t\t\t<template #trigger=\"{ attrs }\">\n\t\t\t\t\t<button class=\"datetime-picker-inline-icon\"\n\t\t\t\t\t\t:class=\"{'datetime-picker-inline-icon--highlighted': highlightTimezone}\"\n\t\t\t\t\t\tv-bind=\"attrs\"\n\t\t\t\t\t\t@mousedown.stop.prevent=\"() => {}\">\n\t\t\t\t\t\t<Web :size=\"20\" />\n\t\t\t\t\t</button>\n\t\t\t\t</template>\n\n\t\t\t\t<div role=\"dialog\"\n\t\t\t\t\t:aria-labelledby=\"timezoneDialogHeaderId\">\n\t\t\t\t\t<div class=\"timezone-popover-wrapper__label\">\n\t\t\t\t\t\t<strong :id=\"timezoneDialogHeaderId\">\n\t\t\t\t\t\t\t{{ t('Please select a time zone:') }}\n\t\t\t\t\t\t</strong>\n\t\t\t\t\t</div>\n\t\t\t\t\t<NcTimezonePicker :model-value=\"tzVal\"\n\t\t\t\t\t\tclass=\"timezone-popover-wrapper__timezone-select\"\n\t\t\t\t\t\t@update:model-value=\"$emit('update:timezone-id', $event)\" />\n\t\t\t\t</div>\n\t\t\t</NcPopover>\n\t\t\t<CalendarBlank v-else :size=\"20\" />\n\t\t</template>\n\t\t<template v-for=\"(_, slot) of $slots\" #[slot]=\"scope\">\n\t\t\t<slot :name=\"slot\" v-bind=\"scope\" />\n\t\t</template>\n\t</DatePicker>\n</template>\n\n<script>\nimport { t } from '../../l10n.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport NcTimezonePicker from '../NcTimezonePicker/index.js'\nimport NcPopover from '../NcPopover/index.js'\nimport ScopeComponent from '../../utils/ScopeComponent.js'\n\nimport CalendarBlank from 'vue-material-design-icons/CalendarBlank.vue'\nimport Web from 'vue-material-design-icons/Web.vue'\n\nimport {\n\tgetFirstDay,\n\tgetDayNames,\n\tgetDayNamesShort,\n\tgetDayNamesMin,\n\tgetMonthNames,\n\tgetMonthNamesShort,\n} from '@nextcloud/l10n'\n\nimport DatePicker from 'vue-datepicker-next'\nimport './index.scss'\n\nconst formatMap = {\n\tdate: 'YYYY-MM-DD',\n\tdatetime: 'YYYY-MM-DD H:mm:ss',\n\tyear: 'YYYY',\n\tmonth: 'YYYY-MM',\n\ttime: 'H:mm:ss',\n\tweek: 'w',\n}\n\nexport default ScopeComponent({\n\tname: 'NcDateTimePicker',\n\n\tcomponents: {\n\t\tCalendarBlank,\n\t\tDatePicker,\n\t\tNcPopover,\n\t\tNcTimezonePicker,\n\t\tWeb,\n\t},\n\n\tprops: {\n\t\tclearable: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\tminuteStep: {\n\t\t\ttype: Number,\n\t\t\tdefault: 10,\n\t\t},\n\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'date',\n\t\t},\n\n\t\tformat: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\tformatter: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\tlang: {\n\t\t\ttype: Object,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * The value to initialize, but also two-way bind the selected date. The date is – like the `Date` object in\n\t\t * JavaScript – tied to UTC. The selected time zone does not have an influence of the selected time and date\n\t\t * value. You have to translate the time yourself when you want to factor in time zones.\n\t\t */\n\t\t// eslint-disable-next-line\n\t\tmodelValue: {\n\t\t\tdefault: () => new Date(),\n\t\t},\n\n\t\t/**\n\t\t * The preselected IANA time zone ID for the time zone picker, only relevant in combination with `:show-timezone-select=\"true\"`. Example: `Europe/Berlin`. The prop supports two-way binding through v-model directive.\n\t\t */\n\t\ttimezoneId: {\n\t\t\ttype: String,\n\t\t\tdefault: 'UTC',\n\t\t},\n\n\t\tshowTimezoneSelect: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\thighlightTimezone: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\tappendToBody: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\tshowWeekNumber: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\tplaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:modelValue',\n\t\t'update:timezone-id',\n\t],\n\n\tsetup() {\n\t\treturn {\n\t\t\ttimezoneDialogHeaderId: `timezone-dialog-header-${GenRandomId()}`,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tshowTimezonePopover: false,\n\t\t\ttzVal: this.timezoneId,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * Datepicker language\n\t\t * https://github.com/mengxiong10/vue2-datepicker/blob/master/locale.md\n\t\t *\n\t\t * @return {object}\n\t\t */\n\t\tdefaultLang() {\n\t\t\treturn {\n\t\t\t\tformatLocale: {\n\t\t\t\t\tmonths: getMonthNames(),\n\t\t\t\t\tmonthsShort: getMonthNamesShort(),\n\t\t\t\t\tweekdays: getDayNames(),\n\t\t\t\t\tweekdaysShort: getDayNamesShort(),\n\t\t\t\t\tweekdaysMin: getDayNamesMin(),\n\t\t\t\t\t// 0 = sunday, 1 = monday\n\t\t\t\t\tfirstDayOfWeek: getFirstDay(),\n\t\t\t\t},\n\t\t\t\tmonthFormat: 'MMM',\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Translated placeholder\n\t\t *\n\t\t * @return {string}\n\t\t */\n\t\tdefaultPlaceholder() {\n\t\t\tif (this.type === 'time') {\n\t\t\t\treturn t('Pick a time')\n\t\t\t}\n\t\t\tif (this.type === 'month') {\n\t\t\t\treturn t('Pick a month')\n\t\t\t}\n\t\t\tif (this.type === 'year') {\n\t\t\t\treturn t('Pick a year')\n\t\t\t}\n\t\t\tif (this.type === 'week') {\n\t\t\t\treturn t('Pick a week')\n\t\t\t}\n\t\t\tif (this.type === 'date') {\n\t\t\t\treturn t('Pick a date')\n\t\t\t}\n\t\t\treturn t('Pick a date and a time')\n\t\t},\n\n\t\t/**\n\t\t * If format is not provided, try to match the type\n\t\t * or fallback to 'date'\n\t\t *\n\t\t * @return {string}\n\t\t */\n\t\tformatTypeMap() {\n\t\t\treturn formatMap[this.type] ?? formatMap.date\n\t\t},\n\n\t\t/**\n\t\t * The formatter used for the vue-datepicker to fix nextcloud-libraries/nextcloud-vue#5044\n\t\t */\n\t\tinternalFormatter() {\n\t\t\t/**\n\t\t\t * Get the ISO week number of the date\n\t\t\t * @param {Date} date The date to format\n\t\t\t */\n\t\t\tconst getWeek = (date) => {\n\t\t\t\t// Adjust to nearest Thursday\n\t\t\t\tconst firstThursday = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()))\n\t\t\t\tfirstThursday.setUTCDate(firstThursday.getUTCDate() + 4 - (firstThursday.getUTCDay() || 7))\n\n\t\t\t\tconst yearStart = new Date(Date.UTC(firstThursday.getUTCFullYear(), 0, 1))\n\n\t\t\t\t// Full weeks to nearest Thursday\n\t\t\t\treturn Math.ceil((((firstThursday - yearStart) / 86400000) + 1) / 7)\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tgetWeek,\n\t\t\t\t// allow to override it by users using the `formatter` prop\n\t\t\t\t...(this.formatter ?? {}),\n\t\t\t}\n\t\t},\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\thandleSelectYear(year) {\n\t\t\tconst value = this.$refs.datepicker.currentValue\n\t\t\tif (value) {\n\t\t\t\ttry {\n\t\t\t\t\tconst date = new Date(new Date(value).setFullYear(year))\n\t\t\t\t\tthis.$refs.datepicker.selectDate(date)\n\t\t\t\t} catch (error) {\n\t\t\t\t\tconsole.error('Invalid value', value, year)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\thandleSelectMonth(month) {\n\t\t\tconst value = this.$refs.datepicker.currentValue\n\t\t\tif (value) {\n\t\t\t\ttry {\n\t\t\t\t\tconst date = new Date(new Date(value).setMonth(month))\n\t\t\t\t\tthis.$refs.datepicker.selectDate(date)\n\t\t\t\t} catch (error) {\n\t\t\t\t\tconsole.error('Invalid value', value, month)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Toggles the visibility of the time zone popover\n\t\t */\n\t\ttoggleTimezonePopover() {\n\t\t\tif (!this.showTimezoneSelect) {\n\t\t\t\t// Just a click on the icon, but not for time zones -> ignore\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.showTimezonePopover = !this.showTimezonePopover\n\t\t},\n\t},\n})\n\n</script>\n\n<style lang=\"scss\" scoped>\n.mx-datepicker :deep(.mx-input-wrapper .mx-input) {\n\tbackground-clip: border-box;\n}\n\n.datetime-picker-inline-icon {\n\topacity: .3;\n\tborder: none;\n\tbackground-color: transparent;\n\tborder-radius: 0;\n\tpadding: 0 !important;\n\tmargin: 0;\n\n\t&--highlighted {\n\t\topacity: .7;\n\t}\n\n\t&:focus,\n\t&:hover {\n\t\topacity: 1;\n\t}\n}\n</style>\n\n<style lang=\"scss\">\n// We overwrite the popover base class, so we can style\n// the popover for the timezone select only.\n.v-popper--theme-dropdown.v-popper__popper.timezone-select__popper .v-popper__wrapper {\n\tborder-radius: var(--border-radius-large);\n\n\t.v-popper__inner {\n\t\tpadding: 4px;\n\t\tborder-radius: var(--border-radius-large);\n\n\t\t.timezone-popover-wrapper {\n\t\t\t&__label {\n\t\t\t\tpadding: 4px 0;\n\t\t\t\tpadding-left: 14px; // Left-align with NcSelect text\n\t\t\t}\n\n\t\t\t// We overwrite the border radius of the input to account for the popover border-radius minus the padding\n\t\t\t&__timezone-select.v-select {\n\t\t\t\t.vs__dropdown-toggle {\n\t\t\t\t\tborder-radius: calc(var(--border-radius-large) - 4px);\n\t\t\t\t}\n\n\t\t\t\t&.vs--open {\n\t\t\t\t\t.vs__dropdown-toggle {\n\t\t\t\t\t\tborder-bottom-left-radius: 0;\n\t\t\t\t\t\tborder-bottom-right-radius: 0;\n\t\t\t\t\t}\n\t\t\t\t\t&.select--drop-up .vs__dropdown-toggle {\n\t\t\t\t\t\tborder-radius: 0 0 calc(var(--border-radius-large) - 4px) calc(var(--border-radius-large) - 4px);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n\n// TODO: This should be scoped or targeted by a specific selector, but the NcSelect component does not allow this yet.\n.vs__dropdown-menu--floating {\n\t// Higher z-index than the popover in which the NcSelect is located.\n\tz-index: 100001 !important;\n}\n</style>\n"],"names":["_sfc_main$2","_hoisted_1$2","_hoisted_2$2","_hoisted_3$2","$props","createElementVNode","createCommentVNode","_sfc_main$1","_hoisted_1$1","_hoisted_2$1","_hoisted_3$1","formatMap","_sfc_main","ScopeComponent","NcPopover","NcTimezonePicker","Web","GenRandomId","getMonthNamesShort","getDayNamesShort","t","_a","date","firstThursday","yearStart","value","year","month","_hoisted_1","_hoisted_2","_hoisted_3","_ctx","createSlots","withCtx","_cache","$event","mergeProps","toDisplayString","renderList","_","slot","renderSlot","normalizeProps","guardReactiveProps","scope"],"mappings":"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","x_google_ignoreList":[0,1]}