@dialpad/dialtone 9.110.1 → 9.111.0

package/dist/vue3/components/datepicker/modules/month-year-picker.vue.cjs

@@ -1,247 +0,0 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const vue = require("vue");
-const vue3 = require("@dialpad/dialtone-icons/vue3");
-const datepicker_constants = require("../datepicker_constants.cjs");
-const useMonthYearPicker = require("../composables/useMonthYearPicker.cjs");
-const stack = require("../../stack/stack.vue.cjs");
-const tooltip = require("../../tooltip/tooltip.vue.cjs");
-const button = require("../../button/button.vue.cjs");
-const _hoisted_1 = {
-  id: "calendar-heading",
-  class: "d-datepicker__month-year-title"
-};
-const _sfc_main = {
-  __name: "month-year-picker",
-  props: {
-    locale: {
-      type: String,
-      required: true
-    },
-    prevMonthLabel: {
-      type: String,
-      required: true
-    },
-    nextMonthLabel: {
-      type: String,
-      required: true
-    },
-    prevYearLabel: {
-      type: String,
-      required: true
-    },
-    nextYearLabel: {
-      type: String,
-      required: true
-    },
-    changeToLabel: {
-      type: String,
-      required: true
-    },
-    selectedDate: {
-      type: Date,
-      required: true
-    }
-  },
-  emits: [
-    /**
-       * Will retrieve the calendar days of the given date
-       *
-       * @event calendar-days
-       * @type {Array}
-       */
-    "calendar-days",
-    /**
-       * Will focus first day in calendar
-       *
-       * @event focus-first-day
-       */
-    "focus-first-day",
-    /**
-       * Will focus last day in calendar
-       *
-       * @event focus-last-day
-       */
-    "focus-last-day",
-    /**
-       * Will close the datepicker
-       *
-       * @event close-datepicker
-       */
-    "close-datepicker"
-  ],
-  setup(__props, { expose: __expose, emit: __emit }) {
-    const props = __props;
-    const emits = __emit;
-    const {
-      selectMonth,
-      selectYear,
-      formattedMonth,
-      setDayRef,
-      focusMonthYearPicker,
-      handleKeyDown,
-      changeMonth,
-      changeYear,
-      goToNextMonth,
-      goToPrevMonth
-    } = useMonthYearPicker.useMonthYearPicker(props, emits);
-    vue.onMounted(() => {
-      focusMonthYearPicker();
-    });
-    __expose({
-      focusMonthYearPicker,
-      goToNextMonth,
-      goToPrevMonth
-    });
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.unref(stack.default), {
-        direction: "row",
-        class: "d-datepicker__month-year",
-        gap: "300"
-      }, {
-        default: vue.withCtx(() => [
-          vue.createVNode(vue.unref(stack.default), {
-            as: "nav",
-            direction: "row",
-            gap: "200",
-            class: "d-datepicker__nav"
-          }, {
-            default: vue.withCtx(() => [
-              vue.createVNode(vue.unref(tooltip.default), {
-                message: __props.prevYearLabel,
-                placement: "top",
-                "fallback-placements": ["top-start", "auto"]
-              }, {
-                anchor: vue.withCtx(() => [
-                  vue.createVNode(vue.unref(button.default), {
-                    id: "prevYearButton",
-                    ref: (el) => {
-                      if (el) vue.unref(setDayRef)(el);
-                    },
-                    size: "xs",
-                    importance: "clear",
-                    kind: "muted",
-                    circle: true,
-                    class: "d-datepicker__nav-btn",
-                    type: "button",
-                    "aria-label": `${__props.changeToLabel} ${__props.prevYearLabel} ${vue.unref(selectYear) - 1}`,
-                    onClick: _cache[0] || (_cache[0] = ($event) => vue.unref(changeYear)(-1)),
-                    onKeydown: _cache[1] || (_cache[1] = ($event) => vue.unref(handleKeyDown)($event))
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.createVNode(vue.unref(vue3.DtIconChevronsLeft), { size: "200" })
-                    ]),
-                    _: 1
-                  }, 8, ["aria-label"])
-                ]),
-                _: 1
-              }, 8, ["message"]),
-              vue.createVNode(vue.unref(tooltip.default), {
-                message: __props.prevMonthLabel,
-                placement: "top",
-                "fallback-placements": ["top-end", "auto"]
-              }, {
-                anchor: vue.withCtx(() => [
-                  vue.createVNode(vue.unref(button.default), {
-                    id: "prevMonthButton",
-                    ref: (el) => {
-                      if (el) vue.unref(setDayRef)(el);
-                    },
-                    size: "xs",
-                    importance: "clear",
-                    kind: "muted",
-                    circle: true,
-                    class: "d-datepicker__nav-btn",
-                    type: "button",
-                    "aria-label": `${__props.changeToLabel} ${__props.prevMonthLabel} ${vue.unref(formattedMonth)(vue.unref(selectMonth) - 1, vue.unref(datepicker_constants.INTL_MONTH_FORMAT), __props.locale)}`,
-                    onClick: _cache[2] || (_cache[2] = ($event) => vue.unref(changeMonth)(-1)),
-                    onKeydown: _cache[3] || (_cache[3] = ($event) => vue.unref(handleKeyDown)($event))
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.createVNode(vue.unref(vue3.DtIconChevronLeft), { size: "200" })
-                    ]),
-                    _: 1
-                  }, 8, ["aria-label"])
-                ]),
-                _: 1
-              }, 8, ["message"])
-            ]),
-            _: 1
-          }),
-          vue.createElementVNode("div", _hoisted_1, vue.toDisplayString(vue.unref(formattedMonth)(vue.unref(selectMonth), vue.unref(datepicker_constants.INTL_MONTH_FORMAT), __props.locale)) + " " + vue.toDisplayString(vue.unref(selectYear)), 1),
-          vue.createVNode(vue.unref(stack.default), {
-            as: "nav",
-            direction: "row",
-            gap: "200",
-            class: "d-datepicker__nav"
-          }, {
-            default: vue.withCtx(() => [
-              vue.createVNode(vue.unref(tooltip.default), {
-                message: __props.nextMonthLabel,
-                placement: "top",
-                "fallback-placements": ["top-start", "auto"]
-              }, {
-                anchor: vue.withCtx(() => [
-                  vue.createVNode(vue.unref(button.default), {
-                    id: "nextMonthButton",
-                    ref: (el) => {
-                      if (el) vue.unref(setDayRef)(el);
-                    },
-                    size: "xs",
-                    importance: "clear",
-                    kind: "muted",
-                    circle: true,
-                    class: "d-datepicker__nav-btn",
-                    type: "button",
-                    "aria-label": `${__props.changeToLabel} ${__props.nextMonthLabel} ${vue.unref(formattedMonth)(vue.unref(selectMonth) + 1, vue.unref(datepicker_constants.INTL_MONTH_FORMAT), __props.locale)}`,
-                    onClick: _cache[4] || (_cache[4] = ($event) => vue.unref(changeMonth)(1)),
-                    onKeydown: _cache[5] || (_cache[5] = ($event) => vue.unref(handleKeyDown)($event))
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.createVNode(vue.unref(vue3.DtIconChevronRight), { size: "200" })
-                    ]),
-                    _: 1
-                  }, 8, ["aria-label"])
-                ]),
-                _: 1
-              }, 8, ["message"]),
-              vue.createVNode(vue.unref(tooltip.default), {
-                message: __props.nextYearLabel,
-                placement: "top",
-                "fallback-placements": ["top-end", "auto"]
-              }, {
-                anchor: vue.withCtx(() => [
-                  vue.createVNode(vue.unref(button.default), {
-                    id: "nextYearButton",
-                    ref: (el) => {
-                      if (el) vue.unref(setDayRef)(el);
-                    },
-                    size: "xs",
-                    importance: "clear",
-                    kind: "muted",
-                    circle: true,
-                    class: "d-datepicker__nav-btn",
-                    type: "button",
-                    "aria-label": `${__props.changeToLabel} ${__props.nextYearLabel} ${vue.unref(selectYear) + 1}`,
-                    onClick: _cache[6] || (_cache[6] = ($event) => vue.unref(changeYear)(1)),
-                    onKeydown: _cache[7] || (_cache[7] = ($event) => vue.unref(handleKeyDown)($event))
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.createVNode(vue.unref(vue3.DtIconChevronsRight), { size: "200" })
-                    ]),
-                    _: 1
-                  }, 8, ["aria-label"])
-                ]),
-                _: 1
-              }, 8, ["message"])
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      });
-    };
-  }
-};
-exports.default = _sfc_main;
-//# sourceMappingURL=month-year-picker.vue.cjs.map

package/dist/vue3/components/datepicker/modules/month-year-picker.vue.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"month-year-picker.vue.cjs","sources":["../../../../components/datepicker/modules/month-year-picker.vue"],"sourcesContent":["<template>\n  <dt-stack\n    direction=\"row\"\n    class=\"d-datepicker__month-year\"\n    gap=\"300\"\n  >\n    <dt-stack\n      as=\"nav\"\n      direction=\"row\"\n      gap=\"200\"\n      class=\"d-datepicker__nav\"\n    >\n      <dt-tooltip\n        :message=\"prevYearLabel\"\n        placement=\"top\"\n        :fallback-placements=\"['top-start', 'auto']\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"prevYearButton\"\n            :ref=\"el => { if (el) setDayRef(el) }\"\n            size=\"xs\"\n            importance=\"clear\"\n            kind=\"muted\"\n            :circle=\"true\"\n            class=\"d-datepicker__nav-btn\"\n            type=\"button\"\n            :aria-label=\"`${changeToLabel} ${prevYearLabel} ${selectYear - 1}`\"\n            @click=\"changeYear(-1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevrons-left\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n      <dt-tooltip\n        :message=\"prevMonthLabel\"\n        placement=\"top\"\n        :fallback-placements=\"['top-end', 'auto']\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"prevMonthButton\"\n            :ref=\"el => { if (el) setDayRef(el) }\"\n            size=\"xs\"\n            importance=\"clear\"\n            kind=\"muted\"\n            :circle=\"true\"\n            class=\"d-datepicker__nav-btn\"\n            type=\"button\"\n            :aria-label=\"\n              `${changeToLabel} ${prevMonthLabel} ${formattedMonth(selectMonth - 1, INTL_MONTH_FORMAT, locale)}`\n            \"\n            @click=\"changeMonth(-1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevron-left\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n    </dt-stack>\n    <div\n      id=\"calendar-heading\"\n      class=\"d-datepicker__month-year-title\"\n    >\n      {{ formattedMonth(selectMonth, INTL_MONTH_FORMAT, locale) }}\n\n      {{ selectYear }}\n    </div>\n    <dt-stack\n      as=\"nav\"\n      direction=\"row\"\n      gap=\"200\"\n      class=\"d-datepicker__nav\"\n    >\n      <dt-tooltip\n        :message=\"nextMonthLabel\"\n        placement=\"top\"\n        :fallback-placements=\"['top-start', 'auto']\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"nextMonthButton\"\n            :ref=\"el => { if (el) setDayRef(el) }\"\n            size=\"xs\"\n            importance=\"clear\"\n            kind=\"muted\"\n            :circle=\"true\"\n            class=\"d-datepicker__nav-btn\"\n            type=\"button\"\n            :aria-label=\"\n              `${changeToLabel} ${nextMonthLabel} ${formattedMonth(selectMonth + 1, INTL_MONTH_FORMAT, locale)}`\n            \"\n            @click=\"changeMonth(1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevron-right\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n      <dt-tooltip\n        :message=\"nextYearLabel\"\n        placement=\"top\"\n        :fallback-placements=\"['top-end', 'auto']\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"nextYearButton\"\n            :ref=\"el => { if (el) setDayRef(el) }\"\n            size=\"xs\"\n            importance=\"clear\"\n            kind=\"muted\"\n            :circle=\"true\"\n            class=\"d-datepicker__nav-btn\"\n            type=\"button\"\n            :aria-label=\"`${changeToLabel} ${nextYearLabel} ${selectYear + 1}`\"\n            @click=\"changeYear(1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevrons-right\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n    </dt-stack>\n  </dt-stack>\n</template>\n\n<script setup>\nimport { DtIconChevronLeft, DtIconChevronsLeft, DtIconChevronRight, DtIconChevronsRight } from '@dialpad/dialtone-icons/vue3';\nimport { DtStack } from '@/components/stack';\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport { INTL_MONTH_FORMAT } from '../datepicker_constants';\nimport { onMounted } from 'vue';\nimport { useMonthYearPicker } from '@/components/datepicker/composables/useMonthYearPicker.js';\n\nconst props = defineProps({\n  locale: {\n    type: String,\n    required: true,\n  },\n\n  prevMonthLabel: {\n    type: String,\n    required: true,\n  },\n\n  nextMonthLabel: {\n    type: String,\n    required: true,\n  },\n\n  prevYearLabel: {\n    type: String,\n    required: true,\n  },\n\n  nextYearLabel: {\n    type: String,\n    required: true,\n  },\n\n  changeToLabel: {\n    type: String,\n    required: true,\n  },\n\n  selectedDate: {\n    type: Date,\n    required: true,\n  },\n});\nconst emits = defineEmits([\n  /**\n     * Will retrieve the calendar days of the given date\n     *\n     * @event calendar-days\n     * @type {Array}\n     */\n  'calendar-days',\n\n  /**\n     * Will focus first day in calendar\n     *\n     * @event focus-first-day\n     */\n  'focus-first-day',\n\n  /**\n     * Will focus last day in calendar\n     *\n     * @event focus-last-day\n     */\n  'focus-last-day',\n\n  /**\n     * Will close the datepicker\n     *\n     * @event close-datepicker\n     */\n  'close-datepicker',\n]);\n\nconst {\n  selectMonth,\n  selectYear,\n  formattedMonth,\n  setDayRef,\n  focusMonthYearPicker,\n  handleKeyDown,\n  changeMonth,\n  changeYear,\n  goToNextMonth,\n  goToPrevMonth,\n} = useMonthYearPicker(props, emits);\n\nonMounted(() => {\n  focusMonthYearPicker();\n});\n\ndefineExpose({\n  focusMonthYearPicker,\n  goToNextMonth,\n  goToPrevMonth,\n});\n</script>\n"],"names":["useMonthYearPicker","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgJA,UAAM,QAAQ;AAoCd,UAAM,QAAQ;AA+Bd,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAIA,mBAAkB,mBAAC,OAAO,KAAK;AAEnCC,QAAAA,UAAU,MAAM;AACd;IACF,CAAC;AAED,aAAa;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue3/components/datepicker/modules/month-year-picker.vue.js

@@ -1,247 +0,0 @@
-import { onMounted, openBlock, createBlock, unref, withCtx, createVNode, createElementVNode, toDisplayString } from "vue";
-import { DtIconChevronsLeft, DtIconChevronLeft, DtIconChevronRight, DtIconChevronsRight } from "@dialpad/dialtone-icons/vue3";
-import { INTL_MONTH_FORMAT } from "../datepicker_constants.js";
-import { useMonthYearPicker } from "../composables/useMonthYearPicker.js";
-import DtStack from "../../stack/stack.vue.js";
-import DtTooltip from "../../tooltip/tooltip.vue.js";
-import DtButton from "../../button/button.vue.js";
-const _hoisted_1 = {
-  id: "calendar-heading",
-  class: "d-datepicker__month-year-title"
-};
-const _sfc_main = {
-  __name: "month-year-picker",
-  props: {
-    locale: {
-      type: String,
-      required: true
-    },
-    prevMonthLabel: {
-      type: String,
-      required: true
-    },
-    nextMonthLabel: {
-      type: String,
-      required: true
-    },
-    prevYearLabel: {
-      type: String,
-      required: true
-    },
-    nextYearLabel: {
-      type: String,
-      required: true
-    },
-    changeToLabel: {
-      type: String,
-      required: true
-    },
-    selectedDate: {
-      type: Date,
-      required: true
-    }
-  },
-  emits: [
-    /**
-       * Will retrieve the calendar days of the given date
-       *
-       * @event calendar-days
-       * @type {Array}
-       */
-    "calendar-days",
-    /**
-       * Will focus first day in calendar
-       *
-       * @event focus-first-day
-       */
-    "focus-first-day",
-    /**
-       * Will focus last day in calendar
-       *
-       * @event focus-last-day
-       */
-    "focus-last-day",
-    /**
-       * Will close the datepicker
-       *
-       * @event close-datepicker
-       */
-    "close-datepicker"
-  ],
-  setup(__props, { expose: __expose, emit: __emit }) {
-    const props = __props;
-    const emits = __emit;
-    const {
-      selectMonth,
-      selectYear,
-      formattedMonth,
-      setDayRef,
-      focusMonthYearPicker,
-      handleKeyDown,
-      changeMonth,
-      changeYear,
-      goToNextMonth,
-      goToPrevMonth
-    } = useMonthYearPicker(props, emits);
-    onMounted(() => {
-      focusMonthYearPicker();
-    });
-    __expose({
-      focusMonthYearPicker,
-      goToNextMonth,
-      goToPrevMonth
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(DtStack), {
-        direction: "row",
-        class: "d-datepicker__month-year",
-        gap: "300"
-      }, {
-        default: withCtx(() => [
-          createVNode(unref(DtStack), {
-            as: "nav",
-            direction: "row",
-            gap: "200",
-            class: "d-datepicker__nav"
-          }, {
-            default: withCtx(() => [
-              createVNode(unref(DtTooltip), {
-                message: __props.prevYearLabel,
-                placement: "top",
-                "fallback-placements": ["top-start", "auto"]
-              }, {
-                anchor: withCtx(() => [
-                  createVNode(unref(DtButton), {
-                    id: "prevYearButton",
-                    ref: (el) => {
-                      if (el) unref(setDayRef)(el);
-                    },
-                    size: "xs",
-                    importance: "clear",
-                    kind: "muted",
-                    circle: true,
-                    class: "d-datepicker__nav-btn",
-                    type: "button",
-                    "aria-label": `${__props.changeToLabel} ${__props.prevYearLabel} ${unref(selectYear) - 1}`,
-                    onClick: _cache[0] || (_cache[0] = ($event) => unref(changeYear)(-1)),
-                    onKeydown: _cache[1] || (_cache[1] = ($event) => unref(handleKeyDown)($event))
-                  }, {
-                    default: withCtx(() => [
-                      createVNode(unref(DtIconChevronsLeft), { size: "200" })
-                    ]),
-                    _: 1
-                  }, 8, ["aria-label"])
-                ]),
-                _: 1
-              }, 8, ["message"]),
-              createVNode(unref(DtTooltip), {
-                message: __props.prevMonthLabel,
-                placement: "top",
-                "fallback-placements": ["top-end", "auto"]
-              }, {
-                anchor: withCtx(() => [
-                  createVNode(unref(DtButton), {
-                    id: "prevMonthButton",
-                    ref: (el) => {
-                      if (el) unref(setDayRef)(el);
-                    },
-                    size: "xs",
-                    importance: "clear",
-                    kind: "muted",
-                    circle: true,
-                    class: "d-datepicker__nav-btn",
-                    type: "button",
-                    "aria-label": `${__props.changeToLabel} ${__props.prevMonthLabel} ${unref(formattedMonth)(unref(selectMonth) - 1, unref(INTL_MONTH_FORMAT), __props.locale)}`,
-                    onClick: _cache[2] || (_cache[2] = ($event) => unref(changeMonth)(-1)),
-                    onKeydown: _cache[3] || (_cache[3] = ($event) => unref(handleKeyDown)($event))
-                  }, {
-                    default: withCtx(() => [
-                      createVNode(unref(DtIconChevronLeft), { size: "200" })
-                    ]),
-                    _: 1
-                  }, 8, ["aria-label"])
-                ]),
-                _: 1
-              }, 8, ["message"])
-            ]),
-            _: 1
-          }),
-          createElementVNode("div", _hoisted_1, toDisplayString(unref(formattedMonth)(unref(selectMonth), unref(INTL_MONTH_FORMAT), __props.locale)) + " " + toDisplayString(unref(selectYear)), 1),
-          createVNode(unref(DtStack), {
-            as: "nav",
-            direction: "row",
-            gap: "200",
-            class: "d-datepicker__nav"
-          }, {
-            default: withCtx(() => [
-              createVNode(unref(DtTooltip), {
-                message: __props.nextMonthLabel,
-                placement: "top",
-                "fallback-placements": ["top-start", "auto"]
-              }, {
-                anchor: withCtx(() => [
-                  createVNode(unref(DtButton), {
-                    id: "nextMonthButton",
-                    ref: (el) => {
-                      if (el) unref(setDayRef)(el);
-                    },
-                    size: "xs",
-                    importance: "clear",
-                    kind: "muted",
-                    circle: true,
-                    class: "d-datepicker__nav-btn",
-                    type: "button",
-                    "aria-label": `${__props.changeToLabel} ${__props.nextMonthLabel} ${unref(formattedMonth)(unref(selectMonth) + 1, unref(INTL_MONTH_FORMAT), __props.locale)}`,
-                    onClick: _cache[4] || (_cache[4] = ($event) => unref(changeMonth)(1)),
-                    onKeydown: _cache[5] || (_cache[5] = ($event) => unref(handleKeyDown)($event))
-                  }, {
-                    default: withCtx(() => [
-                      createVNode(unref(DtIconChevronRight), { size: "200" })
-                    ]),
-                    _: 1
-                  }, 8, ["aria-label"])
-                ]),
-                _: 1
-              }, 8, ["message"]),
-              createVNode(unref(DtTooltip), {
-                message: __props.nextYearLabel,
-                placement: "top",
-                "fallback-placements": ["top-end", "auto"]
-              }, {
-                anchor: withCtx(() => [
-                  createVNode(unref(DtButton), {
-                    id: "nextYearButton",
-                    ref: (el) => {
-                      if (el) unref(setDayRef)(el);
-                    },
-                    size: "xs",
-                    importance: "clear",
-                    kind: "muted",
-                    circle: true,
-                    class: "d-datepicker__nav-btn",
-                    type: "button",
-                    "aria-label": `${__props.changeToLabel} ${__props.nextYearLabel} ${unref(selectYear) + 1}`,
-                    onClick: _cache[6] || (_cache[6] = ($event) => unref(changeYear)(1)),
-                    onKeydown: _cache[7] || (_cache[7] = ($event) => unref(handleKeyDown)($event))
-                  }, {
-                    default: withCtx(() => [
-                      createVNode(unref(DtIconChevronsRight), { size: "200" })
-                    ]),
-                    _: 1
-                  }, 8, ["aria-label"])
-                ]),
-                _: 1
-              }, 8, ["message"])
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      });
-    };
-  }
-};
-export {
-  _sfc_main as default
-};
-//# sourceMappingURL=month-year-picker.vue.js.map

package/dist/vue3/components/datepicker/modules/month-year-picker.vue.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"month-year-picker.vue.js","sources":["../../../../components/datepicker/modules/month-year-picker.vue"],"sourcesContent":["<template>\n  <dt-stack\n    direction=\"row\"\n    class=\"d-datepicker__month-year\"\n    gap=\"300\"\n  >\n    <dt-stack\n      as=\"nav\"\n      direction=\"row\"\n      gap=\"200\"\n      class=\"d-datepicker__nav\"\n    >\n      <dt-tooltip\n        :message=\"prevYearLabel\"\n        placement=\"top\"\n        :fallback-placements=\"['top-start', 'auto']\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"prevYearButton\"\n            :ref=\"el => { if (el) setDayRef(el) }\"\n            size=\"xs\"\n            importance=\"clear\"\n            kind=\"muted\"\n            :circle=\"true\"\n            class=\"d-datepicker__nav-btn\"\n            type=\"button\"\n            :aria-label=\"`${changeToLabel} ${prevYearLabel} ${selectYear - 1}`\"\n            @click=\"changeYear(-1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevrons-left\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n      <dt-tooltip\n        :message=\"prevMonthLabel\"\n        placement=\"top\"\n        :fallback-placements=\"['top-end', 'auto']\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"prevMonthButton\"\n            :ref=\"el => { if (el) setDayRef(el) }\"\n            size=\"xs\"\n            importance=\"clear\"\n            kind=\"muted\"\n            :circle=\"true\"\n            class=\"d-datepicker__nav-btn\"\n            type=\"button\"\n            :aria-label=\"\n              `${changeToLabel} ${prevMonthLabel} ${formattedMonth(selectMonth - 1, INTL_MONTH_FORMAT, locale)}`\n            \"\n            @click=\"changeMonth(-1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevron-left\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n    </dt-stack>\n    <div\n      id=\"calendar-heading\"\n      class=\"d-datepicker__month-year-title\"\n    >\n      {{ formattedMonth(selectMonth, INTL_MONTH_FORMAT, locale) }}\n\n      {{ selectYear }}\n    </div>\n    <dt-stack\n      as=\"nav\"\n      direction=\"row\"\n      gap=\"200\"\n      class=\"d-datepicker__nav\"\n    >\n      <dt-tooltip\n        :message=\"nextMonthLabel\"\n        placement=\"top\"\n        :fallback-placements=\"['top-start', 'auto']\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"nextMonthButton\"\n            :ref=\"el => { if (el) setDayRef(el) }\"\n            size=\"xs\"\n            importance=\"clear\"\n            kind=\"muted\"\n            :circle=\"true\"\n            class=\"d-datepicker__nav-btn\"\n            type=\"button\"\n            :aria-label=\"\n              `${changeToLabel} ${nextMonthLabel} ${formattedMonth(selectMonth + 1, INTL_MONTH_FORMAT, locale)}`\n            \"\n            @click=\"changeMonth(1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevron-right\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n      <dt-tooltip\n        :message=\"nextYearLabel\"\n        placement=\"top\"\n        :fallback-placements=\"['top-end', 'auto']\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"nextYearButton\"\n            :ref=\"el => { if (el) setDayRef(el) }\"\n            size=\"xs\"\n            importance=\"clear\"\n            kind=\"muted\"\n            :circle=\"true\"\n            class=\"d-datepicker__nav-btn\"\n            type=\"button\"\n            :aria-label=\"`${changeToLabel} ${nextYearLabel} ${selectYear + 1}`\"\n            @click=\"changeYear(1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevrons-right\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n    </dt-stack>\n  </dt-stack>\n</template>\n\n<script setup>\nimport { DtIconChevronLeft, DtIconChevronsLeft, DtIconChevronRight, DtIconChevronsRight } from '@dialpad/dialtone-icons/vue3';\nimport { DtStack } from '@/components/stack';\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport { INTL_MONTH_FORMAT } from '../datepicker_constants';\nimport { onMounted } from 'vue';\nimport { useMonthYearPicker } from '@/components/datepicker/composables/useMonthYearPicker.js';\n\nconst props = defineProps({\n  locale: {\n    type: String,\n    required: true,\n  },\n\n  prevMonthLabel: {\n    type: String,\n    required: true,\n  },\n\n  nextMonthLabel: {\n    type: String,\n    required: true,\n  },\n\n  prevYearLabel: {\n    type: String,\n    required: true,\n  },\n\n  nextYearLabel: {\n    type: String,\n    required: true,\n  },\n\n  changeToLabel: {\n    type: String,\n    required: true,\n  },\n\n  selectedDate: {\n    type: Date,\n    required: true,\n  },\n});\nconst emits = defineEmits([\n  /**\n     * Will retrieve the calendar days of the given date\n     *\n     * @event calendar-days\n     * @type {Array}\n     */\n  'calendar-days',\n\n  /**\n     * Will focus first day in calendar\n     *\n     * @event focus-first-day\n     */\n  'focus-first-day',\n\n  /**\n     * Will focus last day in calendar\n     *\n     * @event focus-last-day\n     */\n  'focus-last-day',\n\n  /**\n     * Will close the datepicker\n     *\n     * @event close-datepicker\n     */\n  'close-datepicker',\n]);\n\nconst {\n  selectMonth,\n  selectYear,\n  formattedMonth,\n  setDayRef,\n  focusMonthYearPicker,\n  handleKeyDown,\n  changeMonth,\n  changeYear,\n  goToNextMonth,\n  goToPrevMonth,\n} = useMonthYearPicker(props, emits);\n\nonMounted(() => {\n  focusMonthYearPicker();\n});\n\ndefineExpose({\n  focusMonthYearPicker,\n  goToNextMonth,\n  goToPrevMonth,\n});\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgJA,UAAM,QAAQ;AAoCd,UAAM,QAAQ;AA+Bd,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI,mBAAmB,OAAO,KAAK;AAEnC,cAAU,MAAM;AACd;IACF,CAAC;AAED,aAAa;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue3/components/datepicker/utils.cjs

@@ -1,84 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const dateFns = require("date-fns");
-const datepicker_constants = require("./datepicker_constants.cjs");
-const _parsedGetDate = (value) => value ? new Date(value) : /* @__PURE__ */ new Date();
-const getWeekDays = (startDay, month, selectedDay) => {
-  const startDate = _parsedGetDate(JSON.parse(JSON.stringify(startDay)));
-  const dates = [];
-  for (let i = 0; i < 7; i++) {
-    const next = dateFns.addDays(startDate, i);
-    const isNext = dateFns.getMonth(next) !== month;
-    dates.push({
-      text: next.getDate(),
-      value: next,
-      currentMonth: !isNext,
-      isFirstDayOfMonth: next.getDate() === 1 && !isNext,
-      // will be selected if the date is the same as the selected day and is from the current month
-      selected: selectedDay ? next.getDate() === selectedDay && !isNext : false
-    });
-  }
-  return dates;
-};
-const isDateEqual = (date, dateToCompare) => {
-  if (!date || !dateToCompare) {
-    return false;
-  }
-  return dateFns.isEqual(date, dateToCompare);
-};
-const getCalendarDays = (month, year, selectedDay) => {
-  const weeks = [];
-  const firstDate = _parsedGetDate(new Date(year, month));
-  const lastDate = _parsedGetDate(new Date(year, month + 1, 0));
-  const weekStartsOn = datepicker_constants.WEEK_START;
-  const firstDateInCalendar = dateFns.startOfWeek(firstDate, { weekStartsOn });
-  const addDaysToWeek = (date) => {
-    const days = getWeekDays(date, month, selectedDay);
-    weeks.push({ days });
-    if (!weeks[weeks.length - 1].days.some(
-      (day) => isDateEqual(day.value, lastDate)
-    )) {
-      const nextDate = dateFns.addDays(date, 7);
-      addDaysToWeek(nextDate);
-    }
-  };
-  addDaysToWeek(firstDateInCalendar);
-  return weeks;
-};
-const getWeekDayNames = (locale, weekStart) => {
-  const days = [1, 2, 3, 4, 5, 6, 7].map((day) => {
-    return new Intl.DateTimeFormat(locale, { weekday: "short", timeZone: "UTC" }).format(/* @__PURE__ */ new Date(`2017-01-0${day}T00:00:00+00:00`)).slice(0, 2);
-  });
-  const beforeWeekStart = days.slice(0, weekStart);
-  const afterWeekStart = days.slice(weekStart + 1, days.length);
-  return [days[weekStart]].concat(...afterWeekStart).concat(...beforeWeekStart);
-};
-const formatMonth = (month, monthFormat, locale) => {
-  return new Intl.DateTimeFormat(locale, { month: monthFormat }).format(new Date(2e3, month, 1));
-};
-const calculateNextFocusDate = (currentDate) => {
-  const date = new Date(currentDate);
-  const currentWeekday = dateFns.getDay(date);
-  const nextMonthDate = dateFns.addMonths(date, 1);
-  const nextMonthStart = dateFns.startOfMonth(nextMonthDate);
-  const nextMonthStartWeekday = dateFns.getDay(nextMonthStart);
-  const dayDifference = (currentWeekday - nextMonthStartWeekday + 7) % 7;
-  const focusDate = dateFns.addDays(nextMonthStart, dayDifference);
-  return dateFns.getDate(focusDate);
-};
-const calculatePrevFocusDate = (currentDate) => {
-  const date = new Date(currentDate);
-  const currentWeekday = dateFns.getDay(date);
-  const lastDayOfPrevMonth = dateFns.endOfMonth(dateFns.subMonths(date, 1));
-  let focusDate = lastDayOfPrevMonth;
-  while (dateFns.getDay(focusDate) !== currentWeekday) {
-    focusDate = dateFns.addDays(focusDate, -1);
-  }
-  return dateFns.getDate(focusDate);
-};
-exports.calculateNextFocusDate = calculateNextFocusDate;
-exports.calculatePrevFocusDate = calculatePrevFocusDate;
-exports.formatMonth = formatMonth;
-exports.getCalendarDays = getCalendarDays;
-exports.getWeekDayNames = getWeekDayNames;
-//# sourceMappingURL=utils.cjs.map

package/dist/vue3/components/datepicker/utils.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.cjs","sources":["../../../components/datepicker/utils.js"],"sourcesContent":["import {\n  startOfWeek, addDays, getMonth, isEqual,\n  addMonths, startOfMonth, getDay, getDate,\n  subMonths, endOfMonth,\n} from 'date-fns';\nimport { WEEK_START } from '@/components/datepicker/datepicker_constants.js';\n\nconst _parsedGetDate = (value) => (value ? new Date(value) : new Date());\n\n/**\n * Get 7 days from the provided start date, month is used to check\n * whether the date is from the specified month or in the offset\n */\nconst getWeekDays = (startDay, month, selectedDay) => {\n  const startDate = _parsedGetDate(JSON.parse(JSON.stringify(startDay)));\n  const dates = [];\n  for (let i = 0; i < 7; i++) {\n    const next = addDays(startDate, i);\n    const isNext = getMonth(next) !== month;\n    dates.push({\n      text: next.getDate(),\n      value: next,\n      currentMonth: !isNext,\n      isFirstDayOfMonth: next.getDate() === 1 && !isNext,\n      // will be selected if the date is the same as the selected day and is from the current month\n      selected: selectedDay ? (next.getDate() === selectedDay && !isNext) : false,\n    });\n  }\n  return dates;\n};\n\nconst isDateEqual = (date, dateToCompare) => {\n  if (!date || !dateToCompare) {\n    return false;\n  }\n  return isEqual(date, dateToCompare);\n};\n\n/**\n * Get days for the calendar to be displayed in a table grouped by weeks\n */\nexport const getCalendarDays = (month, year, selectedDay) => {\n  const weeks = [];\n  const firstDate = _parsedGetDate(new Date(year, month));\n  const lastDate = _parsedGetDate(new Date(year, month + 1, 0));\n\n  const weekStartsOn = WEEK_START;\n\n  const firstDateInCalendar = startOfWeek(firstDate, { weekStartsOn });\n\n  const addDaysToWeek = (date) => {\n    const days = getWeekDays(date, month, selectedDay);\n\n    weeks.push({ days });\n\n    if (\n      !weeks[weeks.length - 1].days.some((day) =>\n        isDateEqual(day.value, lastDate),\n      )\n    ) {\n      const nextDate = addDays(date, 7);\n      addDaysToWeek(nextDate);\n    }\n  };\n\n  addDaysToWeek(firstDateInCalendar);\n\n  return weeks;\n};\n\n/**\n * Generate week day names based on locale and in order specified in week start\n */\nexport const getWeekDayNames = (locale, weekStart) => {\n  // Get list in order from sun ... sat\n  const days = [1, 2, 3, 4, 5, 6, 7].map((day) => {\n    return new Intl.DateTimeFormat(locale, { weekday: 'short', timeZone: 'UTC' })\n      .format(new Date(`2017-01-0${day}T00:00:00+00:00`))\n      .slice(0, 2);\n  });\n\n  // Get days that are in order before specified week start\n  const beforeWeekStart = days.slice(0, weekStart);\n  // Get days that are in order after specified week start\n  const afterWeekStart = days.slice(weekStart + 1, days.length);\n\n  // return them in correct order\n  return [days[weekStart]].concat(...afterWeekStart).concat(...beforeWeekStart);\n};\n\nexport const formatMonth = (month, monthFormat, locale) => {\n  return new Intl.DateTimeFormat(locale, { month: monthFormat }).format(new Date(2000, month, 1));\n};\n\nexport const calculateNextFocusDate = (currentDate) => {\n  const date = new Date(currentDate);\n  const currentWeekday = getDay(date);\n  const nextMonthDate = addMonths(date, 1);\n  const nextMonthStart = startOfMonth(nextMonthDate);\n  const nextMonthStartWeekday = getDay(nextMonthStart);\n\n  const dayDifference = (currentWeekday - nextMonthStartWeekday + 7) % 7;\n\n  // Add the difference in days to the first day of the next month\n  const focusDate = addDays(nextMonthStart, dayDifference);\n\n  // Returns only the day of the month\n  return getDate(focusDate);\n};\n\nexport const calculatePrevFocusDate = (currentDate) => {\n  const date = new Date(currentDate);\n  const currentWeekday = getDay(date);\n\n  // Move to the last day of the previous month\n  const lastDayOfPrevMonth = endOfMonth(subMonths(date, 1));\n  let focusDate = lastDayOfPrevMonth;\n\n  // Adjust to the same weekday in the last week of the previous month\n  while (getDay(focusDate) !== currentWeekday) {\n    focusDate = addDays(focusDate, -1);\n  }\n\n  // Returns only the day of the month\n  return getDate(focusDate);\n};\n"],"names":["addDays","getMonth","isEqual","WEEK_START","startOfWeek","getDay","addMonths","startOfMonth","getDate","endOfMonth","subMonths"],"mappings":"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"}