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

package/dist/chunks/{NcDateTimePicker-GHt3kJ7B.mjs → NcDateTimePicker-ahgVldMQ.mjs}

@@ -1,11 +1,11 @@
-import "../assets/NcDateTimePicker-SsDztIsS.css";
-import { r as P, F as T, a as n } from "./_l10n-JmazR_zZ.mjs";
+import "../assets/NcDateTimePicker-CC5ocPIo.css";
+import { r as P, F as T, a as i } from "./_l10n-uuAvfQgY.mjs";
 import { G as N } from "./GenRandomId-VodkdWbp.mjs";
-import { N as Y } from "./NcTimezonePicker-wLjOcbbU.mjs";
-import { N as _ } from "./NcPopover-HwP68PjO.mjs";
-import { S as H } from "./ScopeComponent-KbEZrKGJ.mjs";
-import { openBlock as a, createElementBlock as l, mergeProps as u, createElementVNode as i, toDisplayString as h, createCommentVNode as z, resolveComponent as d, createBlock as c, createSlots as $, withCtx as p, withModifiers as V, createVNode as C, renderList as B, renderSlot as I, normalizeProps as U, guardReactiveProps as W } from "vue";
-import { _ as f } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
+import { N as Y } from "./NcTimezonePicker-EPCmHeHy.mjs";
+import { N as _ } from "./NcPopover-XgOWyuQF.mjs";
+import { S as H } from "./ScopeComponent-mG7CSpxl.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-hUChTQA_.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);
@@ -26,28 +26,28 @@ const R = {
     }
   }
 }, 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, m, g, y) {
-  return a(), l("span", u(e.$attrs, {
-    "aria-hidden": !t.title,
+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] = (s) => e.$emit("click", s))
+    onClick: o[0] || (o[0] = (d) => e.$emit("click", d))
   }), [
-    (a(), l("svg", {
+    (a(), s("svg", {
       fill: t.fillColor,
       class: "material-design-icon__svg",
       width: t.size,
       height: t.size,
       viewBox: "0 0 24 24"
     }, [
-      i("path", J, [
-        t.title ? (a(), l("title", K, h(t.title), 1)) : z("", !0)
+      l("path", J, [
+        t.title ? (a(), s("title", K, f(t.title), 1)) : z("", !0)
       ])
     ], 8, q))
   ], 16, Z);
 }
-const X = /* @__PURE__ */ f(R, [["render", Q]]), x = {
+const X = /* @__PURE__ */ g(R, [["render", Q]]), x = {
   name: "WebIcon",
   emits: ["click"],
   props: {
@@ -64,28 +64,28 @@ const X = /* @__PURE__ */ f(R, [["render", Q]]), x = {
     }
   }
 }, 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, m, g, y) {
-  return a(), l("span", u(e.$attrs, {
-    "aria-hidden": !t.title,
+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] = (s) => e.$emit("click", s))
+    onClick: o[0] || (o[0] = (d) => e.$emit("click", d))
   }), [
-    (a(), l("svg", {
+    (a(), s("svg", {
       fill: t.fillColor,
       class: "material-design-icon__svg",
       width: t.size,
       height: t.size,
       viewBox: "0 0 24 24"
     }, [
-      i("path", oe, [
-        t.title ? (a(), l("title", ae, h(t.title), 1)) : z("", !0)
+      l("path", oe, [
+        t.title ? (a(), s("title", ae, f(t.title), 1)) : z("", !0)
       ])
     ], 8, te))
   ], 16, ee);
 }
-const ne = /* @__PURE__ */ f(x, [["render", re]]), w = {
+const ne = /* @__PURE__ */ g(x, [["render", re]]), w = {
   date: "YYYY-MM-DD",
   datetime: "YYYY-MM-DD H:mm:ss",
   year: "YYYY",
@@ -169,7 +169,7 @@ const ne = /* @__PURE__ */ f(x, [["render", re]]), w = {
   ],
   setup() {
     return {
-      timezoneDialogHeaderId: `timezone-dialog-header-${N()}`
+      timezoneDialogHeaderId: "timezone-dialog-header-".concat(N())
     };
   },
   data() {
@@ -205,7 +205,7 @@ const ne = /* @__PURE__ */ f(x, [["render", re]]), w = {
      * @return {string}
      */
     defaultPlaceholder() {
-      return this.type === "time" ? n("Pick a time") : this.type === "month" ? n("Pick a month") : this.type === "year" ? n("Pick a year") : this.type === "week" ? n("Pick a week") : this.type === "date" ? n("Pick a date") : n("Pick a date and a time");
+      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
@@ -214,26 +214,28 @@ const ne = /* @__PURE__ */ f(x, [["render", re]]), w = {
      * @return {string}
      */
     formatTypeMap() {
-      return w[this.type] ?? w.date;
+      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: (o) => {
-          const t = new Date(Date.UTC(o.getFullYear(), o.getMonth(), o.getDate()));
-          t.setUTCDate(t.getUTCDate() + 4 - (t.getUTCDay() || 7));
-          const m = new Date(Date.UTC(t.getUTCFullYear(), 0, 1));
-          return Math.ceil(((t - m) / 864e5 + 1) / 7);
+        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
-        ...this.formatter ?? {}
+        ...(o = this.formatter) != null ? o : {}
       };
     }
   },
   methods: {
-    t: n,
+    t: i,
     handleSelectYear(e) {
       const o = this.$refs.datepicker.currentValue;
       if (o)
@@ -262,9 +264,9 @@ const ne = /* @__PURE__ */ f(x, [["render", re]]), w = {
     }
   }
 }), le = ["aria-labelledby"], se = { class: "timezone-popover-wrapper__label" }, de = ["id"];
-function me(e, o, t, m, g, y) {
-  const s = d("Web"), M = d("NcTimezonePicker"), v = d("NcPopover"), b = d("CalendarBlank"), D = d("DatePicker");
-  return a(), c(D, {
+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,
@@ -279,58 +281,58 @@ function me(e, o, t, m, g, y) {
     value: e.modelValue,
     onSelectYear: e.handleSelectYear,
     onSelectMonth: e.handleSelectMonth,
-    "onUpdate:value": o[2] || (o[2] = (r) => e.$emit("update:modelValue", r))
+    "onUpdate:value": o[2] || (o[2] = (n) => e.$emit("update:modelValue", n))
   }, $({
-    "icon-calendar": p(() => [
-      e.showTimezoneSelect ? (a(), c(v, {
+    "icon-calendar": c(() => [
+      e.showTimezoneSelect ? (a(), u(v, {
         key: 0,
         shown: e.showTimezonePopover,
-        "onUpdate:shown": o[1] || (o[1] = (r) => e.showTimezonePopover = r),
+        "onUpdate:shown": o[1] || (o[1] = (n) => e.showTimezonePopover = n),
         "popup-role": "dialog",
         "popover-base-class": "timezone-select__popper"
       }, {
-        trigger: p(({ attrs: r }) => [
-          i("button", u({
+        trigger: c(({ attrs: n }) => [
+          l("button", h({
             class: ["datetime-picker-inline-icon", { "datetime-picker-inline-icon--highlighted": e.highlightTimezone }]
-          }, r, {
+          }, n, {
             onMousedown: V(() => {
             }, ["stop", "prevent"])
           }), [
-            C(s, { size: 20 })
+            C(d, { size: 20 })
           ], 16)
         ]),
-        default: p(() => [
-          i("div", {
+        default: c(() => [
+          l("div", {
             role: "dialog",
             "aria-labelledby": e.timezoneDialogHeaderId
           }, [
-            i("div", se, [
-              i("strong", { id: e.timezoneDialogHeaderId }, h(e.t("Please select a time zone:")), 9, de)
+            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] = (r) => e.$emit("update:timezone-id", r))
+              "onUpdate:modelValue": o[0] || (o[0] = (n) => e.$emit("update:timezone-id", n))
             }, null, 8, ["model-value"])
           ], 8, le)
         ]),
         _: 1
-      }, 8, ["shown"])) : (a(), c(b, {
+      }, 8, ["shown"])) : (a(), u(b, {
         key: 1,
         size: 20
       }))
     ]),
     _: 2
   }, [
-    B(e.$slots, (r, k) => ({
+    B(e.$slots, (n, k) => ({
       name: k,
-      fn: p((S) => [
+      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__ */ f(ie, [["render", me], ["__scopeId", "data-v-5cf80a29"]]);
+const ze = /* @__PURE__ */ g(ie, [["render", me], ["__scopeId", "data-v-5cf80a29"]]);
 export {
   ze as N
 };

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcDateTimePicker-ahgVldMQ.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;\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]}

package/dist/chunks/{NcDateTimePickerNative-nDQjZSiZ.mjs → NcDateTimePickerNative-3Xru7_OT.mjs}

@@ -1,5 +1,5 @@
-import "../assets/NcDateTimePickerNative-QBosiBWA.css";
-import { S as h } from "./ScopeComponent-KbEZrKGJ.mjs";
+import "../assets/NcDateTimePickerNative-BeREqSH_.css";
+import { S as h } from "./ScopeComponent-mG7CSpxl.mjs";
 import { openBlock as f, createElementBlock as y, createElementVNode as m, normalizeClass as c, toDisplayString as $, mergeProps as g } from "vue";
 import { _ as D } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
 const S = ["date", "datetime-local", "month", "time", "week"], M = h({
@@ -103,18 +103,18 @@ const S = ["date", "datetime-local", "month", "time", "week"], M = h({
         const a = e.target.value;
         if (this.modelValue === "") {
           const { yyyy: r, MM: l, dd: d } = this.getReadableDate(/* @__PURE__ */ new Date());
-          return this.$emit("update:modelValue", /* @__PURE__ */ new Date(`${r}-${l}-${d}T${a}`));
+          return this.$emit("update:modelValue", new Date("".concat(r, "-").concat(l, "-").concat(d, "T").concat(a)));
         }
         const { yyyy: i, MM: n, dd: o } = this.getReadableDate(this.modelValue);
-        return this.$emit("update:modelValue", /* @__PURE__ */ new Date(`${i}-${n}-${o}T${a}`));
+        return this.$emit("update:modelValue", new Date("".concat(i, "-").concat(n, "-").concat(o, "T").concat(a)));
       } else if (this.type === "month") {
         const a = (new Date(e.target.value).getMonth() + 1).toString().padStart(2, "0");
         if (this.modelValue === "") {
           const { yyyy: l, dd: d, hh: u, mm: p } = this.getReadableDate(/* @__PURE__ */ new Date());
-          return this.$emit("update:modelValue", /* @__PURE__ */ new Date(`${l}-${a}-${d}T${u}:${p}`));
+          return this.$emit("update:modelValue", new Date("".concat(l, "-").concat(a, "-").concat(d, "T").concat(u, ":").concat(p)));
         }
         const { yyyy: i, dd: n, hh: o, mm: r } = this.getReadableDate(this.value);
-        return this.$emit("update:modelValue", /* @__PURE__ */ new Date(`${i}-${a}-${n}T${o}:${r}`));
+        return this.$emit("update:modelValue", new Date("".concat(i, "-").concat(a, "-").concat(n, "T").concat(o, ":").concat(r)));
       }
       const t = new Date(e.target.valueAsNumber).getTimezoneOffset() * 1e3 * 60, s = e.target.valueAsNumber + t;
       return this.$emit("update:modelValue", new Date(s));
@@ -141,16 +141,16 @@ const S = ["date", "datetime-local", "month", "time", "week"], M = h({
       if (e instanceof Date) {
         const { yyyy: t, MM: s, dd: a, hh: i, mm: n } = this.getReadableDate(e);
         if (this.type === "datetime-local")
-          return `${t}-${s}-${a}T${i}:${n}`;
+          return "".concat(t, "-").concat(s, "-").concat(a, "T").concat(i, ":").concat(n);
         if (this.type === "date")
-          return `${t}-${s}-${a}`;
+          return "".concat(t, "-").concat(s, "-").concat(a);
         if (this.type === "month")
-          return `${t}-${s}`;
+          return "".concat(t, "-").concat(s);
         if (this.type === "time")
-          return `${i}:${n}`;
+          return "".concat(i, ":").concat(n);
         if (this.type === "week") {
           const o = new Date(t, 0, 1), r = Math.floor((e - o) / (24 * 60 * 60 * 1e3)), l = Math.ceil(r / 7);
-          return `${t}-W${l}`;
+          return "".concat(t, "-W").concat(l);
         }
       } else
         return "";
@@ -175,7 +175,7 @@ function N(e, t, s, a, i, n) {
     }), null, 16, w)
   ]);
 }
-const v = /* @__PURE__ */ D(M, [["render", N], ["__scopeId", "data-v-f735263a"]]);
+const v = /* @__PURE__ */ D(M, [["render", N], ["__scopeId", "data-v-c51c751c"]]);
 export {
   v as N
 };

package/dist/chunks/{NcDateTimePickerNative-nDQjZSiZ.mjs.map → NcDateTimePickerNative-3Xru7_OT.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcDateTimePickerNative-nDQjZSiZ.mjs","sources":["../../src/components/NcDateTimePickerNative/NcDateTimePickerNative.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2022 Julia Kirschenheuter <julia.kirschenheuter@nextcloud.com>\n  -\n  - @author Julia Kirschenheuter <julia.kirschenheuter@nextcloud.com>\n  - @author Richard Steinmetz <richard@steinmetz.cloud>\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\n### General description\n\nThis components provides a wrapper around the native browser datetime picker. <br>\nThis is an input with some type of date e.g. https://html.spec.whatwg.org/multipage/input.html#local-date-and-time-state-(type=datetime-local). <br>\nAll available types are: 'date', 'datetime-local', 'month', 'time' and 'week', please check them here: https://html.spec.whatwg.org/multipage/input.html#  <br>\n\n### Examples\n\n#### Usage: type='datetime-local'\n```vue\n<template>\n\t<div>\n\t\t<span>Picked date: {{ value || 'null' }}</span>\n\t\t<NcDateTimePickerNative\n\t\t\tv-model=\"value\"\n\t\t\t:id=\"id\"\n\t\t\t:label=\"label\"\n\t\t\ttype=\"datetime-local\" />\n\t\tThe date selected is {{ value }}\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tvalue: new Date(),\n\t\t\t\tid: 'date-time-picker',\n\t\t\t\tlabel: 'Please select a new date',\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Usage: type='datetime-local' with min date and max date\n```vue\n<template>\n\t<div>\n\t\t<span>Picked date: {{ value || 'null' }}</span>\n\t\t<NcDateTimePickerNative\n\t\t\tv-model=\"value\"\n\t\t\t:id=\"id\"\n\t\t\t:min=\"yesterdayDate\"\n\t\t\t:max=\"someDate\"\n\t\t\t:label=\"label\"\n\t\t\ttype=\"datetime-local\" />\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tvalue: new Date(),\n\t\t\t\tid: 'date-time-picker',\n\t\t\t\tlabel: 'Please select a new date',\n\t\t\t\tyesterdayDate: new Date(new Date().setDate(new Date().getDate() - 1)),\n\t\t\t\tsomeDate: new Date(new Date().setDate(new Date().getDate() + 7)),\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Usage: type='week'\n```vue\n<template>\n\t<div>\n\t\t<span>Picked date: {{ value || 'null' }}</span>\n\t\t<NcDateTimePickerNative\n\t\t\tv-model=\"value\"\n\t\t\t:id=\"id\"\n\t\t\t:label=\"label\"\n\t\t\ttype=\"week\" />\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tvalue: new Date(),\n\t\t\t\tid: 'date-time-picker',\n\t\t\t\tlabel: 'Please select a new date',\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Usage: type='month'\n```vue\n<template>\n\t<div>\n\t\t<span>Picked date: {{ value || 'null' }}</span>\n\t\t<NcDateTimePickerNative\n\t\t\tv-model=\"value\"\n\t\t\t:id=\"id\"\n\t\t\t:label=\"label\"\n\t\t\ttype=\"month\" />\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tvalue: new Date(),\n\t\t\t\tid: 'date-time-picker',\n\t\t\t\tlabel: 'Please select a new date',\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n</docs>\n\n<template>\n\t<div class=\"native-datetime-picker\">\n\t\t<label :class=\"{ 'hidden-visually': hideLabel }\" :for=\"id\">{{ label }}</label>\n\t\t<input :id=\"id\"\n\t\t\tclass=\"native-datetime-picker--input\"\n\t\t\t:class=\"inputClass\"\n\t\t\t:type=\"type\"\n\t\t\t:value=\"formattedValue\"\n\t\t\t:min=\"formattedMin\"\n\t\t\t:max=\"formattedMax\"\n\t\t\tv-bind=\"$attrs\"\n\t\t\t@input=\"onInput\">\n\t</div>\n</template>\n\n<script>\nimport ScopeComponent from '../../utils/ScopeComponent.js'\n\nconst inputDateTypes = ['date', 'datetime-local', 'month', 'time', 'week']\n\nexport default ScopeComponent({\n\tname: 'NcDateTimePickerNative',\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * The date is – like the `Date` object in JavaScript – tied to UTC.\n\t\t * The selected time zone does not have an influence of the selected time and date value.\n\t\t * You have to translate the time yourself when you want to factor in time zones.\n\t\t * Pass null to clear the input field.\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: Date,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * id attribute of the input field\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * type attribute of the input field\n\t\t * default type: String\n\t\t * The type of the input element, it can be `date`, `datetime-local`, `month`, `time`, `week`\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'date',\n\t\t\tvalidate: (name) => inputDateTypes.includes(name),\n\t\t},\n\t\t/**\n\t\t * text inside the label element\n\t\t * default type: String\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: 'Please choose a date',\n\t\t},\n\t\t/**\n\t\t * min attribute of the input field\n\t\t * default type: null\n\t\t */\n\t\tmin: {\n\t\t\ttype: [Date, Boolean],\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * max attribute of the input field\n\t\t * default type: null\n\t\t */\n\t\tmax: {\n\t\t\ttype: [Date, Boolean],\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * Flag to hide the label\n\t\t * default type: String\n\t\t * The hidden input label for accessibility purposes.\n\t\t */\n\t\thideLabel: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Class to add to the input field.\n\t\t * Necessary to use NcDateTimePickerNative in the NcActionInput component.\n\t\t */\n\t\tinputClass: {\n\t\t\ttype: [Object, String],\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:modelValue',\n\t],\n\n\tcomputed: {\n\t\tformattedValue() {\n\t\t\treturn this.formatValue(this.modelValue)\n\t\t},\n\t\tformattedMin() {\n\t\t\tif (this.min) {\n\t\t\t\treturn this.formatValue(this.min)\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\t\tformattedMax() {\n\t\t\tif (this.max) {\n\t\t\t\treturn this.formatValue(this.max)\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Handle the input event\n\t\t *\n\t\t * @param {InputEvent} $event input event payload\n\t\t * @return {Date|null} new chosen Date() or null\n\t\t */\n\t\tonInput($event) {\n\t\t\tif (isNaN($event.target.valueAsNumber)) {\n\t\t\t\t/**\n\t\t\t\t * Emitted when the input value changes\n\t\t\t\t *\n\t\t\t\t * @return {null} null value\n\t\t\t\t */\n\t\t\t\treturn this.$emit('update:modelValue', null)\n\t\t\t}\n\t\t\tif (this.type === 'time') {\n\t\t\t\tconst time = $event.target.value\n\t\t\t\tif (this.modelValue === '') {\n\t\t\t\t\t// this case is because of Chrome bug\n\t\t\t\t\tconst { yyyy, MM, dd } = this.getReadableDate(new Date())\n\t\t\t\t\t/**\n\t\t\t\t\t * Emitted when the input value changes\n\t\t\t\t\t *\n\t\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t\t */\n\t\t\t\t\treturn this.$emit('update:modelValue', new Date(`${yyyy}-${MM}-${dd}T${time}`))\n\t\t\t\t}\n\t\t\t\tconst { yyyy, MM, dd } = this.getReadableDate(this.modelValue)\n\t\t\t\t/**\n\t\t\t\t * Emitted when the input value changes\n\t\t\t\t *\n\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t */\n\t\t\t\treturn this.$emit('update:modelValue', new Date(`${yyyy}-${MM}-${dd}T${time}`))\n\t\t\t} else if (this.type === 'month') {\n\t\t\t\tconst MM = (new Date($event.target.value).getMonth() + 1).toString().padStart(2, '0')\n\t\t\t\tif (this.modelValue === '') {\n\t\t\t\t\tconst { yyyy, dd, hh, mm } = this.getReadableDate(new Date())\n\t\t\t\t\t/**\n\t\t\t\t\t * Emitted when the input value changes\n\t\t\t\t\t *\n\t\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t\t */\n\t\t\t\t\treturn this.$emit('update:modelValue', new Date(`${yyyy}-${MM}-${dd}T${hh}:${mm}`))\n\t\t\t\t}\n\t\t\t\tconst { yyyy, dd, hh, mm } = this.getReadableDate(this.value)\n\t\t\t\t/**\n\t\t\t\t * Emitted when the input value changes\n\t\t\t\t *\n\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t */\n\t\t\t\treturn this.$emit('update:modelValue', new Date(`${yyyy}-${MM}-${dd}T${hh}:${mm}`))\n\t\t\t}\n\t\t\tconst timezoneOffsetSeconds = new Date($event.target.valueAsNumber).getTimezoneOffset() * 1000 * 60\n\t\t\tconst inputDateWithTimezone = $event.target.valueAsNumber + timezoneOffsetSeconds\n\t\t\t/**\n\t\t\t * Emitted when the input value changes\n\t\t\t *\n\t\t\t * @return {Date} new chosen Date()\n\t\t\t */\n\t\t\treturn this.$emit('update:modelValue', new Date(inputDateWithTimezone))\n\t\t},\n\t\t/**\n\t\t * Returns Object with string values of a Date\n\t\t *\n\t\t * @param {Date} value The selected value\n\t\t * @return {object|undefined}\n\t\t */\n\t\tgetReadableDate(value) {\n\t\t\tif (value instanceof Date) {\n\t\t\t\tconst yyyy = value.getFullYear().toString().padStart(4, '0')\n\t\t\t\tconst MM = (value.getMonth() + 1).toString().padStart(2, '0')\n\t\t\t\tconst dd = value.getDate().toString().padStart(2, '0')\n\t\t\t\tconst hh = value.getHours().toString().padStart(2, '0')\n\t\t\t\tconst mm = value.getMinutes().toString().padStart(2, '0')\n\n\t\t\t\treturn { yyyy, MM, dd, hh, mm }\n\t\t\t}\n\t\t},\n\t\t/**\n\t\t * Returns preformatted value for the input field\n\t\t *\n\t\t * @param {Date} value The selected value\n\t\t * @return {string|undefined}\n\t\t */\n\t\tformatValue(value) {\n\t\t\tif (value instanceof Date) {\n\t\t\t\tconst { yyyy, MM, dd, hh, mm } = this.getReadableDate(value)\n\t\t\t\tif (this.type === 'datetime-local') {\n\t\t\t\t\treturn `${yyyy}-${MM}-${dd}T${hh}:${mm}`\n\t\t\t\t} else if (this.type === 'date') {\n\t\t\t\t\treturn `${yyyy}-${MM}-${dd}`\n\t\t\t\t} else if (this.type === 'month') {\n\t\t\t\t\treturn `${yyyy}-${MM}`\n\t\t\t\t} else if (this.type === 'time') {\n\t\t\t\t\treturn `${hh}:${mm}`\n\t\t\t\t} else if (this.type === 'week') {\n\t\t\t\t\tconst startDate = new Date(yyyy, 0, 1)\n\t\t\t\t\tconst daysSinceBeginningOfYear = Math.floor((value - startDate)\n\t\t\t\t\t\t/ (24 * 60 * 60 * 1000))\n\t\t\t\t\tconst weekNumber = Math.ceil(daysSinceBeginningOfYear / 7)\n\t\t\t\t\treturn `${yyyy}-W${weekNumber}`\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\treturn ''\n\t\t\t}\n\t\t},\n\t},\n})\n</script>\n\n<style lang=\"scss\" scoped>\n\t.native-datetime-picker {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n\n\t.native-datetime-picker .native-datetime-picker--input {\n\t\twidth: 100%;\n\t\tflex: 0 0 auto;\n\t\tpadding-right: 4px;\n\t}\n\n\t[data-theme-light],\n\t[data-themes*=light] {\n\t\t.native-datetime-picker--input {\n\t\t\tcolor-scheme: light;\n\t\t}\n\t}\n\n\t[data-theme-dark],\n\t[data-themes*=dark] {\n\t\t.native-datetime-picker--input {\n\t\t\tcolor-scheme: dark;\n\t\t}\n\t}\n</style>\n"],"names":["inputDateTypes","_sfc_main","ScopeComponent","$event","yyyy","MM","dd","time","hh","mm","timezoneOffsetSeconds","inputDateWithTimezone","value","startDate","_hoisted_1","_hoisted_2","_hoisted_3","openBlock","createElementBlock","_ctx","toDisplayString","createElementVNode","mergeProps","_cache","args"],"mappings":"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"}
+{"version":3,"file":"NcDateTimePickerNative-3Xru7_OT.mjs","sources":["../../src/components/NcDateTimePickerNative/NcDateTimePickerNative.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2022 Julia Kirschenheuter <julia.kirschenheuter@nextcloud.com>\n  -\n  - @author Julia Kirschenheuter <julia.kirschenheuter@nextcloud.com>\n  - @author Richard Steinmetz <richard@steinmetz.cloud>\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\n### General description\n\nThis components provides a wrapper around the native browser datetime picker. <br>\nThis is an input with some type of date e.g. https://html.spec.whatwg.org/multipage/input.html#local-date-and-time-state-(type=datetime-local). <br>\nAll available types are: 'date', 'datetime-local', 'month', 'time' and 'week', please check them here: https://html.spec.whatwg.org/multipage/input.html#  <br>\n\n### Examples\n\n#### Usage: type='datetime-local'\n```vue\n<template>\n\t<div>\n\t\t<span>Picked date: {{ value || 'null' }}</span>\n\t\t<NcDateTimePickerNative\n\t\t\tv-model=\"value\"\n\t\t\t:id=\"id\"\n\t\t\t:label=\"label\"\n\t\t\ttype=\"datetime-local\" />\n\t\tThe date selected is {{ value }}\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tvalue: new Date(),\n\t\t\t\tid: 'date-time-picker',\n\t\t\t\tlabel: 'Please select a new date',\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Usage: type='datetime-local' with min date and max date\n```vue\n<template>\n\t<div>\n\t\t<span>Picked date: {{ value || 'null' }}</span>\n\t\t<NcDateTimePickerNative\n\t\t\tv-model=\"value\"\n\t\t\t:id=\"id\"\n\t\t\t:min=\"yesterdayDate\"\n\t\t\t:max=\"someDate\"\n\t\t\t:label=\"label\"\n\t\t\ttype=\"datetime-local\" />\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tvalue: new Date(),\n\t\t\t\tid: 'date-time-picker',\n\t\t\t\tlabel: 'Please select a new date',\n\t\t\t\tyesterdayDate: new Date(new Date().setDate(new Date().getDate() - 1)),\n\t\t\t\tsomeDate: new Date(new Date().setDate(new Date().getDate() + 7)),\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Usage: type='week'\n```vue\n<template>\n\t<div>\n\t\t<span>Picked date: {{ value || 'null' }}</span>\n\t\t<NcDateTimePickerNative\n\t\t\tv-model=\"value\"\n\t\t\t:id=\"id\"\n\t\t\t:label=\"label\"\n\t\t\ttype=\"week\" />\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tvalue: new Date(),\n\t\t\t\tid: 'date-time-picker',\n\t\t\t\tlabel: 'Please select a new date',\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Usage: type='month'\n```vue\n<template>\n\t<div>\n\t\t<span>Picked date: {{ value || 'null' }}</span>\n\t\t<NcDateTimePickerNative\n\t\t\tv-model=\"value\"\n\t\t\t:id=\"id\"\n\t\t\t:label=\"label\"\n\t\t\ttype=\"month\" />\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tvalue: new Date(),\n\t\t\t\tid: 'date-time-picker',\n\t\t\t\tlabel: 'Please select a new date',\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n</docs>\n\n<template>\n\t<div class=\"native-datetime-picker\">\n\t\t<label :class=\"{ 'hidden-visually': hideLabel }\" :for=\"id\">{{ label }}</label>\n\t\t<input :id=\"id\"\n\t\t\tclass=\"native-datetime-picker--input\"\n\t\t\t:class=\"inputClass\"\n\t\t\t:type=\"type\"\n\t\t\t:value=\"formattedValue\"\n\t\t\t:min=\"formattedMin\"\n\t\t\t:max=\"formattedMax\"\n\t\t\tv-bind=\"$attrs\"\n\t\t\t@input=\"onInput\">\n\t</div>\n</template>\n\n<script>\nimport ScopeComponent from '../../utils/ScopeComponent.js'\n\nconst inputDateTypes = ['date', 'datetime-local', 'month', 'time', 'week']\n\nexport default ScopeComponent({\n\tname: 'NcDateTimePickerNative',\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * The date is – like the `Date` object in JavaScript – tied to UTC.\n\t\t * The selected time zone does not have an influence of the selected time and date value.\n\t\t * You have to translate the time yourself when you want to factor in time zones.\n\t\t * Pass null to clear the input field.\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: Date,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * id attribute of the input field\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * type attribute of the input field\n\t\t * default type: String\n\t\t * The type of the input element, it can be `date`, `datetime-local`, `month`, `time`, `week`\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'date',\n\t\t\tvalidate: (name) => inputDateTypes.includes(name),\n\t\t},\n\t\t/**\n\t\t * text inside the label element\n\t\t * default type: String\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: 'Please choose a date',\n\t\t},\n\t\t/**\n\t\t * min attribute of the input field\n\t\t * default type: null\n\t\t */\n\t\tmin: {\n\t\t\ttype: [Date, Boolean],\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * max attribute of the input field\n\t\t * default type: null\n\t\t */\n\t\tmax: {\n\t\t\ttype: [Date, Boolean],\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * Flag to hide the label\n\t\t * default type: String\n\t\t * The hidden input label for accessibility purposes.\n\t\t */\n\t\thideLabel: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Class to add to the input field.\n\t\t * Necessary to use NcDateTimePickerNative in the NcActionInput component.\n\t\t */\n\t\tinputClass: {\n\t\t\ttype: [Object, String],\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:modelValue',\n\t],\n\n\tcomputed: {\n\t\tformattedValue() {\n\t\t\treturn this.formatValue(this.modelValue)\n\t\t},\n\t\tformattedMin() {\n\t\t\tif (this.min) {\n\t\t\t\treturn this.formatValue(this.min)\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\t\tformattedMax() {\n\t\t\tif (this.max) {\n\t\t\t\treturn this.formatValue(this.max)\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Handle the input event\n\t\t *\n\t\t * @param {InputEvent} $event input event payload\n\t\t * @return {Date|null} new chosen Date() or null\n\t\t */\n\t\tonInput($event) {\n\t\t\tif (isNaN($event.target.valueAsNumber)) {\n\t\t\t\t/**\n\t\t\t\t * Emitted when the input value changes\n\t\t\t\t *\n\t\t\t\t * @return {null} null value\n\t\t\t\t */\n\t\t\t\treturn this.$emit('update:modelValue', null)\n\t\t\t}\n\t\t\tif (this.type === 'time') {\n\t\t\t\tconst time = $event.target.value\n\t\t\t\tif (this.modelValue === '') {\n\t\t\t\t\t// this case is because of Chrome bug\n\t\t\t\t\tconst { yyyy, MM, dd } = this.getReadableDate(new Date())\n\t\t\t\t\t/**\n\t\t\t\t\t * Emitted when the input value changes\n\t\t\t\t\t *\n\t\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t\t */\n\t\t\t\t\treturn this.$emit('update:modelValue', new Date(`${yyyy}-${MM}-${dd}T${time}`))\n\t\t\t\t}\n\t\t\t\tconst { yyyy, MM, dd } = this.getReadableDate(this.modelValue)\n\t\t\t\t/**\n\t\t\t\t * Emitted when the input value changes\n\t\t\t\t *\n\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t */\n\t\t\t\treturn this.$emit('update:modelValue', new Date(`${yyyy}-${MM}-${dd}T${time}`))\n\t\t\t} else if (this.type === 'month') {\n\t\t\t\tconst MM = (new Date($event.target.value).getMonth() + 1).toString().padStart(2, '0')\n\t\t\t\tif (this.modelValue === '') {\n\t\t\t\t\tconst { yyyy, dd, hh, mm } = this.getReadableDate(new Date())\n\t\t\t\t\t/**\n\t\t\t\t\t * Emitted when the input value changes\n\t\t\t\t\t *\n\t\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t\t */\n\t\t\t\t\treturn this.$emit('update:modelValue', new Date(`${yyyy}-${MM}-${dd}T${hh}:${mm}`))\n\t\t\t\t}\n\t\t\t\tconst { yyyy, dd, hh, mm } = this.getReadableDate(this.value)\n\t\t\t\t/**\n\t\t\t\t * Emitted when the input value changes\n\t\t\t\t *\n\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t */\n\t\t\t\treturn this.$emit('update:modelValue', new Date(`${yyyy}-${MM}-${dd}T${hh}:${mm}`))\n\t\t\t}\n\t\t\tconst timezoneOffsetSeconds = new Date($event.target.valueAsNumber).getTimezoneOffset() * 1000 * 60\n\t\t\tconst inputDateWithTimezone = $event.target.valueAsNumber + timezoneOffsetSeconds\n\t\t\t/**\n\t\t\t * Emitted when the input value changes\n\t\t\t *\n\t\t\t * @return {Date} new chosen Date()\n\t\t\t */\n\t\t\treturn this.$emit('update:modelValue', new Date(inputDateWithTimezone))\n\t\t},\n\t\t/**\n\t\t * Returns Object with string values of a Date\n\t\t *\n\t\t * @param {Date} value The selected value\n\t\t * @return {object|undefined}\n\t\t */\n\t\tgetReadableDate(value) {\n\t\t\tif (value instanceof Date) {\n\t\t\t\tconst yyyy = value.getFullYear().toString().padStart(4, '0')\n\t\t\t\tconst MM = (value.getMonth() + 1).toString().padStart(2, '0')\n\t\t\t\tconst dd = value.getDate().toString().padStart(2, '0')\n\t\t\t\tconst hh = value.getHours().toString().padStart(2, '0')\n\t\t\t\tconst mm = value.getMinutes().toString().padStart(2, '0')\n\n\t\t\t\treturn { yyyy, MM, dd, hh, mm }\n\t\t\t}\n\t\t},\n\t\t/**\n\t\t * Returns preformatted value for the input field\n\t\t *\n\t\t * @param {Date} value The selected value\n\t\t * @return {string|undefined}\n\t\t */\n\t\tformatValue(value) {\n\t\t\tif (value instanceof Date) {\n\t\t\t\tconst { yyyy, MM, dd, hh, mm } = this.getReadableDate(value)\n\t\t\t\tif (this.type === 'datetime-local') {\n\t\t\t\t\treturn `${yyyy}-${MM}-${dd}T${hh}:${mm}`\n\t\t\t\t} else if (this.type === 'date') {\n\t\t\t\t\treturn `${yyyy}-${MM}-${dd}`\n\t\t\t\t} else if (this.type === 'month') {\n\t\t\t\t\treturn `${yyyy}-${MM}`\n\t\t\t\t} else if (this.type === 'time') {\n\t\t\t\t\treturn `${hh}:${mm}`\n\t\t\t\t} else if (this.type === 'week') {\n\t\t\t\t\tconst startDate = new Date(yyyy, 0, 1)\n\t\t\t\t\tconst daysSinceBeginningOfYear = Math.floor((value - startDate)\n\t\t\t\t\t\t/ (24 * 60 * 60 * 1000))\n\t\t\t\t\tconst weekNumber = Math.ceil(daysSinceBeginningOfYear / 7)\n\t\t\t\t\treturn `${yyyy}-W${weekNumber}`\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\treturn ''\n\t\t\t}\n\t\t},\n\t},\n})\n</script>\n\n<style lang=\"scss\" scoped>\n\t.native-datetime-picker {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n\n\t.native-datetime-picker .native-datetime-picker--input {\n\t\twidth: 100%;\n\t\tflex: 0 0 auto;\n\t\tpadding-right: 4px;\n\t}\n\n\t[data-theme-light],\n\t[data-themes*=light] {\n\t\t.native-datetime-picker--input {\n\t\t\tcolor-scheme: light;\n\t\t}\n\t}\n\n\t[data-theme-dark],\n\t[data-themes*=dark] {\n\t\t.native-datetime-picker--input {\n\t\t\tcolor-scheme: dark;\n\t\t}\n\t}\n\n\t[data-theme-default],\n\t[data-themes*=default] {\n\t\t@media (prefers-color-scheme: light) {\n\t\t\t.native-datetime-picker--input {\n\t\t\t\tcolor-scheme: light;\n\t\t\t}\n\t\t}\n\t\t@media (prefers-color-scheme: dark) {\n\t\t\t.native-datetime-picker--input {\n\t\t\t\tcolor-scheme: dark;\n\t\t\t}\n\t\t}\n\t}\n</style>\n"],"names":["inputDateTypes","_sfc_main","ScopeComponent","$event","yyyy","MM","dd","time","hh","mm","timezoneOffsetSeconds","inputDateWithTimezone","value","startDate","_hoisted_1","_hoisted_2","_hoisted_3","openBlock","createElementBlock","_ctx","toDisplayString","createElementVNode","mergeProps","_cache","args"],"mappings":";;;;AAiKA,MAAAA,IAAA,CAAA,QAAA,kBAAA,SAAA,QAAA,MAAA,GAEAC,IAAAC,EAAA;AAAA;EAEC,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;MAQE,MAAA;AAAA;;;;;IAOD,IAAA;AAAA;;;;;;;;;;MAWC,SAAA;AAAA;;;;;;IAOD,OAAA;AAAA;;;;;;;;MASC,MAAA,CAAA,MAAA,OAAA;AAAA;;;;;;;MAQA,MAAA,CAAA,MAAA,OAAA;AAAA;;;;;;;;;;;;;;;;MAiBA,MAAA,CAAA,QAAA,MAAA;AAAA;;;EAKF,OAAA;AAAA,IACC;AAAA;EAGD,UAAA;AAAA,IACC,iBAAA;AACC,aAAA,KAAA,YAAA,KAAA,UAAA;AAAA;IAED,eAAA;wBAEE,KAAA,YAAA,KAAA,GAAA;;IAIF,eAAA;wBAEE,KAAA,YAAA,KAAA,GAAA;;;EAMH,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOC,QAAAC,GAAA;AACC,UAAA,MAAAA,EAAA,OAAA,aAAA;AAMC,eAAA,KAAA,MAAA,qBAAA,IAAA;;;;;AAYC,iBAAA,KAAA,MAAA,qBAAA,IAAA,KAAA,GAAA,OAAAC,GAAA,KAAA,OAAAC,GAAA,KAAA,OAAAC,GAAA,KAAA,OAAAC,EAAA,CAAA;AAAA,QACD;;AAOA,eAAA,KAAA,MAAA,qBAAA,IAAA,KAAA,GAAA,OAAAH,GAAA,KAAA,OAAAC,GAAA,KAAA,OAAAC,GAAA,KAAA,OAAAC,EAAA,CAAA;AAAA;AAEA,cAAAF,KAAA,IAAA,KAAAF,EAAA,OAAA,KAAA,EAAA,SAAA,IAAA,GAAA,SAAA,EAAA,SAAA,GAAA,GAAA;;;AAQC,iBAAA,KAAA,MAAA,qBAAA,IAAA,KAAA,GAAA,OAAAC,GAAA,KAAA,OAAAC,GAAA,KAAA,OAAAC,GAAA,KAAA,OAAAE,GAAA,KAAA,OAAAC,EAAA,CAAA;AAAA,QACD;;AAOA,eAAA,KAAA,MAAA,qBAAA,IAAA,KAAA,GAAA,OAAAL,GAAA,KAAA,OAAAC,GAAA,KAAA,OAAAC,GAAA,KAAA,OAAAE,GAAA,KAAA,OAAAC,EAAA,CAAA;AAAA,MACD;AACA,YAAAC,IAAA,IAAA,KAAAP,EAAA,OAAA,aAAA,EAAA,kBAAA,IAAA,MAAA,IACAQ,IAAAR,EAAA,OAAA,gBAAAO;AAMA,aAAA,KAAA,MAAA,qBAAA,IAAA,KAAAC,CAAA,CAAA;AAAA;;;;;;;;;;;MAiBA;AAAA;;;;;;;IAQD,YAAAC,GAAA;;;AAGE,YAAA,KAAA,SAAA;AACC,iBAAA,GAAA,OAAAR,GAAA,KAAA,OAAAC,GAAA,KAAA,OAAAC,GAAA,KAAA,OAAAE,GAAA,KAAA,OAAAC;;;;AAIA,iBAAA,GAAA,OAAAL,GAAA,KAAA,OAAAC;;AAEA,iBAAA,GAAA,OAAAG,GAAA,KAAA,OAAAC;;AAEA,gBAAAI,IAAA,IAAA,KAAAT,GAAA,GAAA,CAAA,6BAEC,KAAA,KAAA,KAAA,IAAA;;QAGF;AAAA;AAEA,eAAA;AAAA;;AAIJ,CAAA,GAlOMU,IAAA,EAAA,OAAA,yBAAA,GAhJNC,IAAA,CAAA,KAAA,GAAAC,IAAA,CAAA,MAAA,QAAA,SAAA,OAAA,KAAA;;AAgJC,SAAAC,EAAA,GAAAC,EAAA,OAAAJ,GAAA;AAAA;;MACmD,KAAAK,EAAA;AAAA,IAAY,GAAAC,EAAAD,EAAA,KAAA,GAAA,IAAAJ,CAAA;AAAA,IAC9DM,EAAA,SAAAC,EAAA;AAAA,MAAQ,IAAAH,EAAA;AAAA;MAGN,MAAAA,EAAA;AAAA,MACA,OAAAA,EAAA;AAAA,MACA,KAAAA,EAAA;AAAA,MACA,KAAAA,EAAA;AAAA;MAEA,SAAAI,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAAL,EAAA,WAAAA,EAAA,QAAA,GAAAK,CAAA;AAAA,IA1JJ,CAAA,GAAA,MAAA,IAAAR,CAAA;AAAA;;;"}

package/dist/chunks/{NcDateTimePickerNative-m30hv5MT.cjs → NcDateTimePickerNative-xSITuvpX.cjs}

@@ -1,5 +1,5 @@
-var M = require("../assets/NcDateTimePickerNative-QBosiBWA.css");
-const h = require("./ScopeComponent-4ppIHwI4.cjs"), o = require("vue"), f = require("./_plugin-vue_export-helper-xG2iG1wl.cjs"), c = ["date", "datetime-local", "month", "time", "week"], y = h.ScopeComponent({
+var M = require("../assets/NcDateTimePickerNative-BeREqSH_.css");
+const h = require("./ScopeComponent-Gzz2FMnQ.cjs"), o = require("vue"), c = require("./_plugin-vue_export-helper-xG2iG1wl.cjs"), f = ["date", "datetime-local", "month", "time", "week"], y = h.ScopeComponent({
   name: "NcDateTimePickerNative",
   inheritAttrs: !1,
   props: {
@@ -28,7 +28,7 @@ const h = require("./ScopeComponent-4ppIHwI4.cjs"), o = require("vue"), f = requ
     type: {
       type: String,
       default: "date",
-      validate: (e) => c.includes(e)
+      validate: (e) => f.includes(e)
     },
     /**
      * text inside the label element
@@ -100,18 +100,18 @@ const h = require("./ScopeComponent-4ppIHwI4.cjs"), o = require("vue"), f = requ
         const a = e.target.value;
         if (this.modelValue === "") {
           const { yyyy: l, MM: d, dd: u } = this.getReadableDate(/* @__PURE__ */ new Date());
-          return this.$emit("update:modelValue", /* @__PURE__ */ new Date(`${l}-${d}-${u}T${a}`));
+          return this.$emit("update:modelValue", new Date("".concat(l, "-").concat(d, "-").concat(u, "T").concat(a)));
         }
         const { yyyy: i, MM: n, dd: s } = this.getReadableDate(this.modelValue);
-        return this.$emit("update:modelValue", /* @__PURE__ */ new Date(`${i}-${n}-${s}T${a}`));
+        return this.$emit("update:modelValue", new Date("".concat(i, "-").concat(n, "-").concat(s, "T").concat(a)));
       } else if (this.type === "month") {
         const a = (new Date(e.target.value).getMonth() + 1).toString().padStart(2, "0");
         if (this.modelValue === "") {
           const { yyyy: d, dd: u, hh: m, mm: p } = this.getReadableDate(/* @__PURE__ */ new Date());
-          return this.$emit("update:modelValue", /* @__PURE__ */ new Date(`${d}-${a}-${u}T${m}:${p}`));
+          return this.$emit("update:modelValue", new Date("".concat(d, "-").concat(a, "-").concat(u, "T").concat(m, ":").concat(p)));
         }
         const { yyyy: i, dd: n, hh: s, mm: l } = this.getReadableDate(this.value);
-        return this.$emit("update:modelValue", /* @__PURE__ */ new Date(`${i}-${a}-${n}T${s}:${l}`));
+        return this.$emit("update:modelValue", new Date("".concat(i, "-").concat(a, "-").concat(n, "T").concat(s, ":").concat(l)));
       }
       const t = new Date(e.target.valueAsNumber).getTimezoneOffset() * 1e3 * 60, r = e.target.valueAsNumber + t;
       return this.$emit("update:modelValue", new Date(r));
@@ -138,16 +138,16 @@ const h = require("./ScopeComponent-4ppIHwI4.cjs"), o = require("vue"), f = requ
       if (e instanceof Date) {
         const { yyyy: t, MM: r, dd: a, hh: i, mm: n } = this.getReadableDate(e);
         if (this.type === "datetime-local")
-          return `${t}-${r}-${a}T${i}:${n}`;
+          return "".concat(t, "-").concat(r, "-").concat(a, "T").concat(i, ":").concat(n);
         if (this.type === "date")
-          return `${t}-${r}-${a}`;
+          return "".concat(t, "-").concat(r, "-").concat(a);
         if (this.type === "month")
-          return `${t}-${r}`;
+          return "".concat(t, "-").concat(r);
         if (this.type === "time")
-          return `${i}:${n}`;
+          return "".concat(i, ":").concat(n);
         if (this.type === "week") {
           const s = new Date(t, 0, 1), l = Math.floor((e - s) / (24 * 60 * 60 * 1e3)), d = Math.ceil(l / 7);
-          return `${t}-W${d}`;
+          return "".concat(t, "-W").concat(d);
         }
       } else
         return "";
@@ -172,5 +172,5 @@ function S(e, t, r, a, i, n) {
     }), null, 16, D)
   ]);
 }
-const V = /* @__PURE__ */ f._export_sfc(y, [["render", S], ["__scopeId", "data-v-f735263a"]]);
+const V = /* @__PURE__ */ c._export_sfc(y, [["render", S], ["__scopeId", "data-v-c51c751c"]]);
 exports.NcDateTimePickerNative = V;

package/dist/chunks/{NcDateTimePickerNative-m30hv5MT.cjs.map → NcDateTimePickerNative-xSITuvpX.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"NcDateTimePickerNative-m30hv5MT.cjs","sources":["../../src/components/NcDateTimePickerNative/NcDateTimePickerNative.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2022 Julia Kirschenheuter <julia.kirschenheuter@nextcloud.com>\n  -\n  - @author Julia Kirschenheuter <julia.kirschenheuter@nextcloud.com>\n  - @author Richard Steinmetz <richard@steinmetz.cloud>\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\n### General description\n\nThis components provides a wrapper around the native browser datetime picker. <br>\nThis is an input with some type of date e.g. https://html.spec.whatwg.org/multipage/input.html#local-date-and-time-state-(type=datetime-local). <br>\nAll available types are: 'date', 'datetime-local', 'month', 'time' and 'week', please check them here: https://html.spec.whatwg.org/multipage/input.html#  <br>\n\n### Examples\n\n#### Usage: type='datetime-local'\n```vue\n<template>\n\t<div>\n\t\t<span>Picked date: {{ value || 'null' }}</span>\n\t\t<NcDateTimePickerNative\n\t\t\tv-model=\"value\"\n\t\t\t:id=\"id\"\n\t\t\t:label=\"label\"\n\t\t\ttype=\"datetime-local\" />\n\t\tThe date selected is {{ value }}\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tvalue: new Date(),\n\t\t\t\tid: 'date-time-picker',\n\t\t\t\tlabel: 'Please select a new date',\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Usage: type='datetime-local' with min date and max date\n```vue\n<template>\n\t<div>\n\t\t<span>Picked date: {{ value || 'null' }}</span>\n\t\t<NcDateTimePickerNative\n\t\t\tv-model=\"value\"\n\t\t\t:id=\"id\"\n\t\t\t:min=\"yesterdayDate\"\n\t\t\t:max=\"someDate\"\n\t\t\t:label=\"label\"\n\t\t\ttype=\"datetime-local\" />\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tvalue: new Date(),\n\t\t\t\tid: 'date-time-picker',\n\t\t\t\tlabel: 'Please select a new date',\n\t\t\t\tyesterdayDate: new Date(new Date().setDate(new Date().getDate() - 1)),\n\t\t\t\tsomeDate: new Date(new Date().setDate(new Date().getDate() + 7)),\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Usage: type='week'\n```vue\n<template>\n\t<div>\n\t\t<span>Picked date: {{ value || 'null' }}</span>\n\t\t<NcDateTimePickerNative\n\t\t\tv-model=\"value\"\n\t\t\t:id=\"id\"\n\t\t\t:label=\"label\"\n\t\t\ttype=\"week\" />\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tvalue: new Date(),\n\t\t\t\tid: 'date-time-picker',\n\t\t\t\tlabel: 'Please select a new date',\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Usage: type='month'\n```vue\n<template>\n\t<div>\n\t\t<span>Picked date: {{ value || 'null' }}</span>\n\t\t<NcDateTimePickerNative\n\t\t\tv-model=\"value\"\n\t\t\t:id=\"id\"\n\t\t\t:label=\"label\"\n\t\t\ttype=\"month\" />\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tvalue: new Date(),\n\t\t\t\tid: 'date-time-picker',\n\t\t\t\tlabel: 'Please select a new date',\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n</docs>\n\n<template>\n\t<div class=\"native-datetime-picker\">\n\t\t<label :class=\"{ 'hidden-visually': hideLabel }\" :for=\"id\">{{ label }}</label>\n\t\t<input :id=\"id\"\n\t\t\tclass=\"native-datetime-picker--input\"\n\t\t\t:class=\"inputClass\"\n\t\t\t:type=\"type\"\n\t\t\t:value=\"formattedValue\"\n\t\t\t:min=\"formattedMin\"\n\t\t\t:max=\"formattedMax\"\n\t\t\tv-bind=\"$attrs\"\n\t\t\t@input=\"onInput\">\n\t</div>\n</template>\n\n<script>\nimport ScopeComponent from '../../utils/ScopeComponent.js'\n\nconst inputDateTypes = ['date', 'datetime-local', 'month', 'time', 'week']\n\nexport default ScopeComponent({\n\tname: 'NcDateTimePickerNative',\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * The date is – like the `Date` object in JavaScript – tied to UTC.\n\t\t * The selected time zone does not have an influence of the selected time and date value.\n\t\t * You have to translate the time yourself when you want to factor in time zones.\n\t\t * Pass null to clear the input field.\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: Date,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * id attribute of the input field\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * type attribute of the input field\n\t\t * default type: String\n\t\t * The type of the input element, it can be `date`, `datetime-local`, `month`, `time`, `week`\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'date',\n\t\t\tvalidate: (name) => inputDateTypes.includes(name),\n\t\t},\n\t\t/**\n\t\t * text inside the label element\n\t\t * default type: String\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: 'Please choose a date',\n\t\t},\n\t\t/**\n\t\t * min attribute of the input field\n\t\t * default type: null\n\t\t */\n\t\tmin: {\n\t\t\ttype: [Date, Boolean],\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * max attribute of the input field\n\t\t * default type: null\n\t\t */\n\t\tmax: {\n\t\t\ttype: [Date, Boolean],\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * Flag to hide the label\n\t\t * default type: String\n\t\t * The hidden input label for accessibility purposes.\n\t\t */\n\t\thideLabel: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Class to add to the input field.\n\t\t * Necessary to use NcDateTimePickerNative in the NcActionInput component.\n\t\t */\n\t\tinputClass: {\n\t\t\ttype: [Object, String],\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:modelValue',\n\t],\n\n\tcomputed: {\n\t\tformattedValue() {\n\t\t\treturn this.formatValue(this.modelValue)\n\t\t},\n\t\tformattedMin() {\n\t\t\tif (this.min) {\n\t\t\t\treturn this.formatValue(this.min)\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\t\tformattedMax() {\n\t\t\tif (this.max) {\n\t\t\t\treturn this.formatValue(this.max)\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Handle the input event\n\t\t *\n\t\t * @param {InputEvent} $event input event payload\n\t\t * @return {Date|null} new chosen Date() or null\n\t\t */\n\t\tonInput($event) {\n\t\t\tif (isNaN($event.target.valueAsNumber)) {\n\t\t\t\t/**\n\t\t\t\t * Emitted when the input value changes\n\t\t\t\t *\n\t\t\t\t * @return {null} null value\n\t\t\t\t */\n\t\t\t\treturn this.$emit('update:modelValue', null)\n\t\t\t}\n\t\t\tif (this.type === 'time') {\n\t\t\t\tconst time = $event.target.value\n\t\t\t\tif (this.modelValue === '') {\n\t\t\t\t\t// this case is because of Chrome bug\n\t\t\t\t\tconst { yyyy, MM, dd } = this.getReadableDate(new Date())\n\t\t\t\t\t/**\n\t\t\t\t\t * Emitted when the input value changes\n\t\t\t\t\t *\n\t\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t\t */\n\t\t\t\t\treturn this.$emit('update:modelValue', new Date(`${yyyy}-${MM}-${dd}T${time}`))\n\t\t\t\t}\n\t\t\t\tconst { yyyy, MM, dd } = this.getReadableDate(this.modelValue)\n\t\t\t\t/**\n\t\t\t\t * Emitted when the input value changes\n\t\t\t\t *\n\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t */\n\t\t\t\treturn this.$emit('update:modelValue', new Date(`${yyyy}-${MM}-${dd}T${time}`))\n\t\t\t} else if (this.type === 'month') {\n\t\t\t\tconst MM = (new Date($event.target.value).getMonth() + 1).toString().padStart(2, '0')\n\t\t\t\tif (this.modelValue === '') {\n\t\t\t\t\tconst { yyyy, dd, hh, mm } = this.getReadableDate(new Date())\n\t\t\t\t\t/**\n\t\t\t\t\t * Emitted when the input value changes\n\t\t\t\t\t *\n\t\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t\t */\n\t\t\t\t\treturn this.$emit('update:modelValue', new Date(`${yyyy}-${MM}-${dd}T${hh}:${mm}`))\n\t\t\t\t}\n\t\t\t\tconst { yyyy, dd, hh, mm } = this.getReadableDate(this.value)\n\t\t\t\t/**\n\t\t\t\t * Emitted when the input value changes\n\t\t\t\t *\n\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t */\n\t\t\t\treturn this.$emit('update:modelValue', new Date(`${yyyy}-${MM}-${dd}T${hh}:${mm}`))\n\t\t\t}\n\t\t\tconst timezoneOffsetSeconds = new Date($event.target.valueAsNumber).getTimezoneOffset() * 1000 * 60\n\t\t\tconst inputDateWithTimezone = $event.target.valueAsNumber + timezoneOffsetSeconds\n\t\t\t/**\n\t\t\t * Emitted when the input value changes\n\t\t\t *\n\t\t\t * @return {Date} new chosen Date()\n\t\t\t */\n\t\t\treturn this.$emit('update:modelValue', new Date(inputDateWithTimezone))\n\t\t},\n\t\t/**\n\t\t * Returns Object with string values of a Date\n\t\t *\n\t\t * @param {Date} value The selected value\n\t\t * @return {object|undefined}\n\t\t */\n\t\tgetReadableDate(value) {\n\t\t\tif (value instanceof Date) {\n\t\t\t\tconst yyyy = value.getFullYear().toString().padStart(4, '0')\n\t\t\t\tconst MM = (value.getMonth() + 1).toString().padStart(2, '0')\n\t\t\t\tconst dd = value.getDate().toString().padStart(2, '0')\n\t\t\t\tconst hh = value.getHours().toString().padStart(2, '0')\n\t\t\t\tconst mm = value.getMinutes().toString().padStart(2, '0')\n\n\t\t\t\treturn { yyyy, MM, dd, hh, mm }\n\t\t\t}\n\t\t},\n\t\t/**\n\t\t * Returns preformatted value for the input field\n\t\t *\n\t\t * @param {Date} value The selected value\n\t\t * @return {string|undefined}\n\t\t */\n\t\tformatValue(value) {\n\t\t\tif (value instanceof Date) {\n\t\t\t\tconst { yyyy, MM, dd, hh, mm } = this.getReadableDate(value)\n\t\t\t\tif (this.type === 'datetime-local') {\n\t\t\t\t\treturn `${yyyy}-${MM}-${dd}T${hh}:${mm}`\n\t\t\t\t} else if (this.type === 'date') {\n\t\t\t\t\treturn `${yyyy}-${MM}-${dd}`\n\t\t\t\t} else if (this.type === 'month') {\n\t\t\t\t\treturn `${yyyy}-${MM}`\n\t\t\t\t} else if (this.type === 'time') {\n\t\t\t\t\treturn `${hh}:${mm}`\n\t\t\t\t} else if (this.type === 'week') {\n\t\t\t\t\tconst startDate = new Date(yyyy, 0, 1)\n\t\t\t\t\tconst daysSinceBeginningOfYear = Math.floor((value - startDate)\n\t\t\t\t\t\t/ (24 * 60 * 60 * 1000))\n\t\t\t\t\tconst weekNumber = Math.ceil(daysSinceBeginningOfYear / 7)\n\t\t\t\t\treturn `${yyyy}-W${weekNumber}`\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\treturn ''\n\t\t\t}\n\t\t},\n\t},\n})\n</script>\n\n<style lang=\"scss\" scoped>\n\t.native-datetime-picker {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n\n\t.native-datetime-picker .native-datetime-picker--input {\n\t\twidth: 100%;\n\t\tflex: 0 0 auto;\n\t\tpadding-right: 4px;\n\t}\n\n\t[data-theme-light],\n\t[data-themes*=light] {\n\t\t.native-datetime-picker--input {\n\t\t\tcolor-scheme: light;\n\t\t}\n\t}\n\n\t[data-theme-dark],\n\t[data-themes*=dark] {\n\t\t.native-datetime-picker--input {\n\t\t\tcolor-scheme: dark;\n\t\t}\n\t}\n</style>\n"],"names":["inputDateTypes","_sfc_main","ScopeComponent","$event","yyyy","MM","dd","time","hh","mm","timezoneOffsetSeconds","inputDateWithTimezone","value","startDate","_hoisted_1","_hoisted_2","_hoisted_3","vue","_ctx","_cache","args"],"mappings":";iIAiKAA,IAAA,CAAA,QAAA,kBAAA,SAAA,QAAA,MAAA,GAEAC,IAAAC,EAAA,eAAA;AAAA;EAEC,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;MAQE,MAAA;AAAA;;;;;IAOD,IAAA;AAAA;;;;;;;;;;MAWC,SAAA;AAAA;;;;;;IAOD,OAAA;AAAA;;;;;;;;MASC,MAAA,CAAA,MAAA,OAAA;AAAA;;;;;;;MAQA,MAAA,CAAA,MAAA,OAAA;AAAA;;;;;;;;;;;;;;;;MAiBA,MAAA,CAAA,QAAA,MAAA;AAAA;;;EAKF,OAAA;AAAA,IACC;AAAA;EAGD,UAAA;AAAA,IACC,iBAAA;AACC,aAAA,KAAA,YAAA,KAAA,UAAA;AAAA;IAED,eAAA;wBAEE,KAAA,YAAA,KAAA,GAAA;;IAIF,eAAA;wBAEE,KAAA,YAAA,KAAA,GAAA;;;EAMH,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOC,QAAAC,GAAA;AACC,UAAA,MAAAA,EAAA,OAAA,aAAA;AAMC,eAAA,KAAA,MAAA,qBAAA,IAAA;;;;;AAYC,iBAAA,KAAA,MAAA,qBAAA,oBAAA,KAAA,GAAAC,CAAA,IAAAC,CAAA,IAAAC,CAAA,IAAAC,CAAA,EAAA,CAAA;AAAA,QACD;;AAOA,eAAA,KAAA,MAAA,qBAAA,oBAAA,KAAA,GAAAH,CAAA,IAAAC,CAAA,IAAAC,CAAA,IAAAC,CAAA,EAAA,CAAA;AAAA;AAEA,cAAAF,KAAA,IAAA,KAAAF,EAAA,OAAA,KAAA,EAAA,SAAA,IAAA,GAAA,SAAA,EAAA,SAAA,GAAA,GAAA;;;AAQC,iBAAA,KAAA,MAAA,qBAAA,oBAAA,KAAA,GAAAC,CAAA,IAAAC,CAAA,IAAAC,CAAA,IAAAE,CAAA,IAAAC,CAAA,EAAA,CAAA;AAAA,QACD;;AAOA,eAAA,KAAA,MAAA,qBAAA,oBAAA,KAAA,GAAAL,CAAA,IAAAC,CAAA,IAAAC,CAAA,IAAAE,CAAA,IAAAC,CAAA,EAAA,CAAA;AAAA,MACD;AACA,YAAAC,IAAA,IAAA,KAAAP,EAAA,OAAA,aAAA,EAAA,kBAAA,IAAA,MAAA,IACAQ,IAAAR,EAAA,OAAA,gBAAAO;AAMA,aAAA,KAAA,MAAA,qBAAA,IAAA,KAAAC,CAAA,CAAA;AAAA;;;;;;;;;;;MAiBA;AAAA;;;;;;;IAQD,YAAAC,GAAA;;;AAGE,YAAA,KAAA,SAAA;AACC,iBAAA,GAAAR,CAAA,IAAAC,CAAA,IAAAC,CAAA,IAAAE,CAAA,IAAAC,CAAA;;;;AAIA,iBAAA,GAAAL,CAAA,IAAAC,CAAA;;AAEA,iBAAA,GAAAG,CAAA,IAAAC,CAAA;;AAEA,gBAAAI,IAAA,IAAA,KAAAT,GAAA,GAAA,CAAA,6BAEC,KAAA,KAAA,KAAA,IAAA;;QAGF;AAAA;AAEA,eAAA;AAAA;;AAIJ,CAAA,GAlOMU,IAAA,EAAA,OAAA,yBAAA,GAhJNC,IAAA,CAAA,KAAA,GAAAC,IAAA,CAAA,MAAA,QAAA,SAAA,OAAA,KAAA;;AAgJC,SAAAC,EAAA,UAAA,GAAAA,EAAA,mBAAA,OAAAH,GAAA;AAAA;;MACmD,KAAAI,EAAA;AAAA,IAAY,GAAAD,EAAA,gBAAAC,EAAA,KAAA,GAAA,IAAAH,CAAA;AAAA,IAC9DE,EAAA,mBAAA,SAAAA,EAAA,WAAA;AAAA,MAAQ,IAAAC,EAAA;AAAA;MAGN,MAAAA,EAAA;AAAA,MACA,OAAAA,EAAA;AAAA,MACA,KAAAA,EAAA;AAAA,MACA,KAAAA,EAAA;AAAA;MAEA,SAAAC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAAF,EAAA,WAAAA,EAAA,QAAA,GAAAE,CAAA;AAAA,IA1JJ,CAAA,GAAA,MAAA,IAAAJ,CAAA;AAAA;;;;"}
+{"version":3,"file":"NcDateTimePickerNative-xSITuvpX.cjs","sources":["../../src/components/NcDateTimePickerNative/NcDateTimePickerNative.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2022 Julia Kirschenheuter <julia.kirschenheuter@nextcloud.com>\n  -\n  - @author Julia Kirschenheuter <julia.kirschenheuter@nextcloud.com>\n  - @author Richard Steinmetz <richard@steinmetz.cloud>\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\n### General description\n\nThis components provides a wrapper around the native browser datetime picker. <br>\nThis is an input with some type of date e.g. https://html.spec.whatwg.org/multipage/input.html#local-date-and-time-state-(type=datetime-local). <br>\nAll available types are: 'date', 'datetime-local', 'month', 'time' and 'week', please check them here: https://html.spec.whatwg.org/multipage/input.html#  <br>\n\n### Examples\n\n#### Usage: type='datetime-local'\n```vue\n<template>\n\t<div>\n\t\t<span>Picked date: {{ value || 'null' }}</span>\n\t\t<NcDateTimePickerNative\n\t\t\tv-model=\"value\"\n\t\t\t:id=\"id\"\n\t\t\t:label=\"label\"\n\t\t\ttype=\"datetime-local\" />\n\t\tThe date selected is {{ value }}\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tvalue: new Date(),\n\t\t\t\tid: 'date-time-picker',\n\t\t\t\tlabel: 'Please select a new date',\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Usage: type='datetime-local' with min date and max date\n```vue\n<template>\n\t<div>\n\t\t<span>Picked date: {{ value || 'null' }}</span>\n\t\t<NcDateTimePickerNative\n\t\t\tv-model=\"value\"\n\t\t\t:id=\"id\"\n\t\t\t:min=\"yesterdayDate\"\n\t\t\t:max=\"someDate\"\n\t\t\t:label=\"label\"\n\t\t\ttype=\"datetime-local\" />\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tvalue: new Date(),\n\t\t\t\tid: 'date-time-picker',\n\t\t\t\tlabel: 'Please select a new date',\n\t\t\t\tyesterdayDate: new Date(new Date().setDate(new Date().getDate() - 1)),\n\t\t\t\tsomeDate: new Date(new Date().setDate(new Date().getDate() + 7)),\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Usage: type='week'\n```vue\n<template>\n\t<div>\n\t\t<span>Picked date: {{ value || 'null' }}</span>\n\t\t<NcDateTimePickerNative\n\t\t\tv-model=\"value\"\n\t\t\t:id=\"id\"\n\t\t\t:label=\"label\"\n\t\t\ttype=\"week\" />\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tvalue: new Date(),\n\t\t\t\tid: 'date-time-picker',\n\t\t\t\tlabel: 'Please select a new date',\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Usage: type='month'\n```vue\n<template>\n\t<div>\n\t\t<span>Picked date: {{ value || 'null' }}</span>\n\t\t<NcDateTimePickerNative\n\t\t\tv-model=\"value\"\n\t\t\t:id=\"id\"\n\t\t\t:label=\"label\"\n\t\t\ttype=\"month\" />\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tvalue: new Date(),\n\t\t\t\tid: 'date-time-picker',\n\t\t\t\tlabel: 'Please select a new date',\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n</docs>\n\n<template>\n\t<div class=\"native-datetime-picker\">\n\t\t<label :class=\"{ 'hidden-visually': hideLabel }\" :for=\"id\">{{ label }}</label>\n\t\t<input :id=\"id\"\n\t\t\tclass=\"native-datetime-picker--input\"\n\t\t\t:class=\"inputClass\"\n\t\t\t:type=\"type\"\n\t\t\t:value=\"formattedValue\"\n\t\t\t:min=\"formattedMin\"\n\t\t\t:max=\"formattedMax\"\n\t\t\tv-bind=\"$attrs\"\n\t\t\t@input=\"onInput\">\n\t</div>\n</template>\n\n<script>\nimport ScopeComponent from '../../utils/ScopeComponent.js'\n\nconst inputDateTypes = ['date', 'datetime-local', 'month', 'time', 'week']\n\nexport default ScopeComponent({\n\tname: 'NcDateTimePickerNative',\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * The date is – like the `Date` object in JavaScript – tied to UTC.\n\t\t * The selected time zone does not have an influence of the selected time and date value.\n\t\t * You have to translate the time yourself when you want to factor in time zones.\n\t\t * Pass null to clear the input field.\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: Date,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * id attribute of the input field\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * type attribute of the input field\n\t\t * default type: String\n\t\t * The type of the input element, it can be `date`, `datetime-local`, `month`, `time`, `week`\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'date',\n\t\t\tvalidate: (name) => inputDateTypes.includes(name),\n\t\t},\n\t\t/**\n\t\t * text inside the label element\n\t\t * default type: String\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: 'Please choose a date',\n\t\t},\n\t\t/**\n\t\t * min attribute of the input field\n\t\t * default type: null\n\t\t */\n\t\tmin: {\n\t\t\ttype: [Date, Boolean],\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * max attribute of the input field\n\t\t * default type: null\n\t\t */\n\t\tmax: {\n\t\t\ttype: [Date, Boolean],\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * Flag to hide the label\n\t\t * default type: String\n\t\t * The hidden input label for accessibility purposes.\n\t\t */\n\t\thideLabel: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Class to add to the input field.\n\t\t * Necessary to use NcDateTimePickerNative in the NcActionInput component.\n\t\t */\n\t\tinputClass: {\n\t\t\ttype: [Object, String],\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:modelValue',\n\t],\n\n\tcomputed: {\n\t\tformattedValue() {\n\t\t\treturn this.formatValue(this.modelValue)\n\t\t},\n\t\tformattedMin() {\n\t\t\tif (this.min) {\n\t\t\t\treturn this.formatValue(this.min)\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\t\tformattedMax() {\n\t\t\tif (this.max) {\n\t\t\t\treturn this.formatValue(this.max)\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Handle the input event\n\t\t *\n\t\t * @param {InputEvent} $event input event payload\n\t\t * @return {Date|null} new chosen Date() or null\n\t\t */\n\t\tonInput($event) {\n\t\t\tif (isNaN($event.target.valueAsNumber)) {\n\t\t\t\t/**\n\t\t\t\t * Emitted when the input value changes\n\t\t\t\t *\n\t\t\t\t * @return {null} null value\n\t\t\t\t */\n\t\t\t\treturn this.$emit('update:modelValue', null)\n\t\t\t}\n\t\t\tif (this.type === 'time') {\n\t\t\t\tconst time = $event.target.value\n\t\t\t\tif (this.modelValue === '') {\n\t\t\t\t\t// this case is because of Chrome bug\n\t\t\t\t\tconst { yyyy, MM, dd } = this.getReadableDate(new Date())\n\t\t\t\t\t/**\n\t\t\t\t\t * Emitted when the input value changes\n\t\t\t\t\t *\n\t\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t\t */\n\t\t\t\t\treturn this.$emit('update:modelValue', new Date(`${yyyy}-${MM}-${dd}T${time}`))\n\t\t\t\t}\n\t\t\t\tconst { yyyy, MM, dd } = this.getReadableDate(this.modelValue)\n\t\t\t\t/**\n\t\t\t\t * Emitted when the input value changes\n\t\t\t\t *\n\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t */\n\t\t\t\treturn this.$emit('update:modelValue', new Date(`${yyyy}-${MM}-${dd}T${time}`))\n\t\t\t} else if (this.type === 'month') {\n\t\t\t\tconst MM = (new Date($event.target.value).getMonth() + 1).toString().padStart(2, '0')\n\t\t\t\tif (this.modelValue === '') {\n\t\t\t\t\tconst { yyyy, dd, hh, mm } = this.getReadableDate(new Date())\n\t\t\t\t\t/**\n\t\t\t\t\t * Emitted when the input value changes\n\t\t\t\t\t *\n\t\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t\t */\n\t\t\t\t\treturn this.$emit('update:modelValue', new Date(`${yyyy}-${MM}-${dd}T${hh}:${mm}`))\n\t\t\t\t}\n\t\t\t\tconst { yyyy, dd, hh, mm } = this.getReadableDate(this.value)\n\t\t\t\t/**\n\t\t\t\t * Emitted when the input value changes\n\t\t\t\t *\n\t\t\t\t * @return {Date} new chosen Date()\n\t\t\t\t */\n\t\t\t\treturn this.$emit('update:modelValue', new Date(`${yyyy}-${MM}-${dd}T${hh}:${mm}`))\n\t\t\t}\n\t\t\tconst timezoneOffsetSeconds = new Date($event.target.valueAsNumber).getTimezoneOffset() * 1000 * 60\n\t\t\tconst inputDateWithTimezone = $event.target.valueAsNumber + timezoneOffsetSeconds\n\t\t\t/**\n\t\t\t * Emitted when the input value changes\n\t\t\t *\n\t\t\t * @return {Date} new chosen Date()\n\t\t\t */\n\t\t\treturn this.$emit('update:modelValue', new Date(inputDateWithTimezone))\n\t\t},\n\t\t/**\n\t\t * Returns Object with string values of a Date\n\t\t *\n\t\t * @param {Date} value The selected value\n\t\t * @return {object|undefined}\n\t\t */\n\t\tgetReadableDate(value) {\n\t\t\tif (value instanceof Date) {\n\t\t\t\tconst yyyy = value.getFullYear().toString().padStart(4, '0')\n\t\t\t\tconst MM = (value.getMonth() + 1).toString().padStart(2, '0')\n\t\t\t\tconst dd = value.getDate().toString().padStart(2, '0')\n\t\t\t\tconst hh = value.getHours().toString().padStart(2, '0')\n\t\t\t\tconst mm = value.getMinutes().toString().padStart(2, '0')\n\n\t\t\t\treturn { yyyy, MM, dd, hh, mm }\n\t\t\t}\n\t\t},\n\t\t/**\n\t\t * Returns preformatted value for the input field\n\t\t *\n\t\t * @param {Date} value The selected value\n\t\t * @return {string|undefined}\n\t\t */\n\t\tformatValue(value) {\n\t\t\tif (value instanceof Date) {\n\t\t\t\tconst { yyyy, MM, dd, hh, mm } = this.getReadableDate(value)\n\t\t\t\tif (this.type === 'datetime-local') {\n\t\t\t\t\treturn `${yyyy}-${MM}-${dd}T${hh}:${mm}`\n\t\t\t\t} else if (this.type === 'date') {\n\t\t\t\t\treturn `${yyyy}-${MM}-${dd}`\n\t\t\t\t} else if (this.type === 'month') {\n\t\t\t\t\treturn `${yyyy}-${MM}`\n\t\t\t\t} else if (this.type === 'time') {\n\t\t\t\t\treturn `${hh}:${mm}`\n\t\t\t\t} else if (this.type === 'week') {\n\t\t\t\t\tconst startDate = new Date(yyyy, 0, 1)\n\t\t\t\t\tconst daysSinceBeginningOfYear = Math.floor((value - startDate)\n\t\t\t\t\t\t/ (24 * 60 * 60 * 1000))\n\t\t\t\t\tconst weekNumber = Math.ceil(daysSinceBeginningOfYear / 7)\n\t\t\t\t\treturn `${yyyy}-W${weekNumber}`\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\treturn ''\n\t\t\t}\n\t\t},\n\t},\n})\n</script>\n\n<style lang=\"scss\" scoped>\n\t.native-datetime-picker {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n\n\t.native-datetime-picker .native-datetime-picker--input {\n\t\twidth: 100%;\n\t\tflex: 0 0 auto;\n\t\tpadding-right: 4px;\n\t}\n\n\t[data-theme-light],\n\t[data-themes*=light] {\n\t\t.native-datetime-picker--input {\n\t\t\tcolor-scheme: light;\n\t\t}\n\t}\n\n\t[data-theme-dark],\n\t[data-themes*=dark] {\n\t\t.native-datetime-picker--input {\n\t\t\tcolor-scheme: dark;\n\t\t}\n\t}\n\n\t[data-theme-default],\n\t[data-themes*=default] {\n\t\t@media (prefers-color-scheme: light) {\n\t\t\t.native-datetime-picker--input {\n\t\t\t\tcolor-scheme: light;\n\t\t\t}\n\t\t}\n\t\t@media (prefers-color-scheme: dark) {\n\t\t\t.native-datetime-picker--input {\n\t\t\t\tcolor-scheme: dark;\n\t\t\t}\n\t\t}\n\t}\n</style>\n"],"names":["inputDateTypes","_sfc_main","ScopeComponent","$event","yyyy","MM","dd","time","hh","mm","timezoneOffsetSeconds","inputDateWithTimezone","value","startDate","_hoisted_1","_hoisted_2","_hoisted_3","vue","_ctx","_cache","args"],"mappings":"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"}