@dialpad/dialtone 9.158.0 → 9.160.0

package/dist/vue3/lib/button/button.js

@@ -1,10 +1,10 @@
-import { warn as m, openBlock as a, createElementBlock as o, mergeProps as y, toHandlers as O, normalizeClass as u, renderSlot as c, createCommentVNode as f } from "vue";
-import { hasSlotContent as l } from "../../common/utils/index.js";
-import { INVALID_COMBINATION as _, BUTTON_SIZE_MODIFIERS as r, BUTTON_IMPORTANCE_MODIFIERS as h, BUTTON_KIND_MODIFIERS as b, BUTTON_ICON_SIZES as p, ICON_POSITION_MODIFIERS as I, BUTTON_TYPES as k } from "./button-constants.js";
-import { DialtoneLocalization as S } from "../../localization/index.js";
-import { _ as v } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-import { getLinkKindModifier as N, LINK_KIND_MODIFIERS as B } from "../link/link-constants.js";
-const g = {
+import { warn as l, resolveComponent as y, openBlock as r, createBlock as I, resolveDynamicComponent as k, mergeProps as O, toHandlers as _, withCtx as v, createElementBlock as u, normalizeClass as c, renderSlot as f, createCommentVNode as h } from "vue";
+import { hasSlotContent as o } from "../../common/utils/index.js";
+import { INVALID_COMBINATION as S, BUTTON_SIZE_MODIFIERS as d, BUTTON_IMPORTANCE_MODIFIERS as b, BUTTON_KIND_MODIFIERS as p, BUTTON_ICON_SIZES as g, ICON_POSITION_MODIFIERS as m, BUTTON_TYPES as N } from "./button-constants.js";
+import { DialtoneLocalization as B } from "../../localization/index.js";
+import { _ as D } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import { getLinkKindModifier as C, LINK_KIND_MODIFIERS as T } from "../link/link-constants.js";
+const L = {
   compatConfig: { MODE: 3 },
   name: "DtButton",
   props: {
@@ -23,7 +23,7 @@ const g = {
     iconPosition: {
       type: String,
       default: "left",
-      validator: (t) => Object.keys(I).includes(t)
+      validator: (t) => Object.keys(m).includes(t)
     },
     /**
      * The fill and outline of the button associated with its visual importance.
@@ -32,7 +32,7 @@ const g = {
     importance: {
       type: String,
       default: "primary",
-      validator: (t) => Object.keys(h).includes(t)
+      validator: (t) => Object.keys(b).includes(t)
     },
     /**
      * Whether the button should be styled as a link or not.
@@ -51,7 +51,7 @@ const g = {
     linkKind: {
       type: String,
       default: "default",
-      validator: (t) => Object.keys(B).includes(t)
+      validator: (t) => Object.keys(T).includes(t)
     },
     /**
      * Determines whether the link should have inverted styling if the button is styled as a link.
@@ -73,26 +73,17 @@ const g = {
     },
     /**
      * HTML button type attribute
-     * <a
-     *   class="d-link"
-     *   href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type"
-     *   target="_blank"
-     * >
-     *   (Reference)
-     * </a>
+     * <a class="d-link" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type" target="_blank">(Reference)</a>
      * @values button, submit, reset
      */
     type: {
       type: String,
       default: "button",
-      validator: (t) => k.includes(t)
+      validator: (t) => N.includes(t)
     },
     /**
      * Button width, accepts
-     * <a class="d-link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/width" target="_blank">
-     *   CSS width attribute
-     * </a>
-     * values
+     * <a class="d-link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/width" target="_blank">CSS width attribute</a> values
      */
     width: {
       type: String,
@@ -105,7 +96,7 @@ const g = {
     size: {
       type: String,
       default: "md",
-      validator: (t) => Object.keys(r).includes(t)
+      validator: (t) => Object.keys(d).includes(t)
     },
     /**
      * Used to customize the label container
@@ -129,7 +120,7 @@ const g = {
     kind: {
       type: String,
       default: "default",
-      validator: (t) => Object.keys(b).includes(t)
+      validator: (t) => Object.keys(p).includes(t)
     },
     /**
      * Determines whether a screenreader reads live updates of
@@ -149,6 +140,46 @@ const g = {
     active: {
       type: Boolean,
       default: !1
+    },
+    /**
+     * vue-router `to` prop. When provided, renders a `<router-link>`
+     * for client-side SPA navigation.
+     * @see https://router.vuejs.org/api/interfaces/RouterLinkProps.html#to
+     */
+    to: {
+      type: [String, Object],
+      default: null
+    },
+    /**
+     * When provided, renders an `<a>` element for standard browser navigation.
+     */
+    href: {
+      type: String,
+      default: null
+    },
+    /**
+     * HTML anchor target attribute. Only applied when using the `href` prop.
+     * @values _self, _blank, _parent, _top
+     */
+    target: {
+      type: String,
+      default: null
+    },
+    /**
+     * HTML anchor rel attribute. Only applied when using the `href` prop.
+     */
+    rel: {
+      type: String,
+      default: null
+    },
+    /**
+     * vue-router `replace` prop. When true, navigation will not leave a
+     * history entry. Only applied when using the `to` prop.
+     * @values true, false
+     */
+    replace: {
+      type: Boolean,
+      default: !1
     }
   },
   emits: [
@@ -169,29 +200,55 @@ const g = {
   ],
   data() {
     return {
-      ICON_POSITION_MODIFIERS: I,
+      ICON_POSITION_MODIFIERS: m,
       // whether the button is currently in focus
       isInFocus: !1,
-      hasSlotContent: l,
-      i18n: new S()
+      hasSlotContent: o,
+      i18n: new B()
     };
   },
   computed: {
-    buttonListeners() {
-      return {
-        focusin: (t) => {
-          this.isInFocus = this.assertiveOnFocus, this.$emit("focusin", t);
+    computedTag() {
+      return this.to ? this.resolveRouterLink() : this.href ? "a" : "button";
+    },
+    isNativeButton() {
+      return !this.to && !this.href;
+    },
+    computedAttrs() {
+      return this.to ? {
+        to: this.to,
+        replace: this.replace,
+        ...this.disabled && { "aria-disabled": "true", tabindex: "-1" }
+      } : this.href ? {
+        href: this.disabled ? null : this.href,
+        target: this.target,
+        rel: this.rel,
+        ...this.disabled && { "aria-disabled": "true", tabindex: "-1" }
+      } : {
+        type: this.type,
+        disabled: this.disabled
+      };
+    },
+    computedListeners() {
+      const t = {
+        focusin: (e) => {
+          this.isInFocus = this.assertiveOnFocus, this.$emit("focusin", e);
         },
-        focusout: (t) => {
-          this.isInFocus = !1, this.$emit("focusout", t);
+        focusout: (e) => {
+          this.isInFocus = !1, this.$emit("focusout", e);
         }
       };
+      return this.isNativeButton || (this.disabled && (t.click = (e) => {
+        e.preventDefault(), e.stopImmediatePropagation();
+      }), t.keydown = (e) => {
+        (e.key === " " || e.code === "Space") && (e.preventDefault(), this.disabled || e.target.click());
+      }), t;
     },
     computedAriaLive() {
       return this.assertiveOnFocus && this.isInFocus ? "assertive" : this.$attrs.ariaLive;
     },
     iconSize() {
-      return p[this.size];
+      return g[this.size];
     }
   },
   watch: {
@@ -199,21 +256,28 @@ const g = {
       deep: !0,
       immediate: !0,
       handler() {
-        process.env.NODE_ENV !== "production" && (this.circle && this.link && m("You cannot enable circle and link at the same time", this), this.isInvalidPropCombination(this.circle, this.kind, this.importance));
+        process.env.NODE_ENV !== "production" && (this.circle && this.link && l("You cannot enable circle and link at the same time", this), this.isInvalidPropCombination(this.circle, this.kind, this.importance));
       }
     }
   },
   methods: {
+    resolveRouterLink() {
+      try {
+        return y("RouterLink");
+      } catch {
+        return l('DtButton: "to" prop requires vue-router. Falling back to <a>.'), "a";
+      }
+    },
     buttonClasses() {
       return this.link ? [
         "d-link",
-        N(this.linkKind, this.linkInverted),
-        r[this.size]
+        C(this.linkKind, this.linkInverted),
+        d[this.size]
       ] : this.kind === "unstyled" ? ["d-btn--unstyled"] : [
         "d-btn",
-        h[this.importance],
-        b[this.kind],
-        r[this.size],
+        b[this.importance],
+        p[this.kind],
+        d[this.size],
         {
           "d-btn--circle": this.circle,
           "d-btn--loading": this.loading,
@@ -223,66 +287,67 @@ const g = {
         }
       ];
     },
-    isInvalidPropCombination(t, d, e) {
+    isInvalidPropCombination(t, e, i) {
       if (this.kind === "unstyled")
         return !0;
-      for (const i of _)
-        if (t === i.circle && d === i.kind && e === i.importance)
-          return console.warn(i.message), !1;
+      for (const s of S)
+        if (t === s.circle && e === s.kind && i === s.importance)
+          return l(s.message), !1;
       return !0;
     },
     shouldRenderIcon() {
-      return l(this.$slots.icon) && !this.link;
+      return o(this.$slots.icon) && !this.link;
     },
     isIconOnly() {
-      return this.shouldRenderIcon() && !l(this.$slots.default);
+      return this.shouldRenderIcon() && !o(this.$slots.default);
     },
     isVerticalIconLayout() {
       return !this.isIconOnly() && ["top", "bottom"].includes(this.iconPosition);
     }
   }
-}, C = ["type", "disabled", "aria-live", "aria-label"];
-function D(t, d, e, i, s, n) {
-  return a(), o("button", y({
+};
+function E(t, e, i, s, a, n) {
+  return r(), I(k(n.computedTag), O({
     class: [
       "base-button__button",
       n.buttonClasses()
     ],
     "data-qa": "dt-button",
-    type: e.type,
-    disabled: e.disabled,
-    style: { width: e.width },
+    style: { width: i.width },
     "aria-live": n.computedAriaLive,
-    "aria-label": e.loading ? s.i18n.$t("DIALTONE_LOADING") : t.$attrs["aria-label"]
-  }, O(n.buttonListeners, !0)), [
-    n.shouldRenderIcon() ? (a(), o("span", {
-      key: 0,
-      "data-qa": "dt-button-icon",
-      class: u([
-        "base-button__icon",
-        {
-          "d-btn__icon": e.kind !== "unstyled",
-          [s.ICON_POSITION_MODIFIERS[e.iconPosition]]: e.kind !== "unstyled"
-        }
-      ])
-    }, [
-      c(t.$slots, "icon", { iconSize: n.iconSize })
-    ], 2)) : f("", !0),
-    s.hasSlotContent(t.$slots.default) ? (a(), o("span", {
-      key: 1,
-      "data-qa": "dt-button-label",
-      class: u([
-        "base-button__label",
-        { "d-btn__label": e.kind !== "unstyled" },
-        e.labelClass
-      ])
-    }, [
-      c(t.$slots, "default")
-    ], 2)) : f("", !0)
-  ], 16, C);
+    "aria-label": i.loading ? a.i18n.$t("DIALTONE_LOADING") : t.$attrs["aria-label"]
+  }, n.computedAttrs, _(n.computedListeners)), {
+    default: v(() => [
+      n.shouldRenderIcon() ? (r(), u("span", {
+        key: 0,
+        "data-qa": "dt-button-icon",
+        class: c([
+          "base-button__icon",
+          {
+            "d-btn__icon": i.kind !== "unstyled",
+            [a.ICON_POSITION_MODIFIERS[i.iconPosition]]: i.kind !== "unstyled"
+          }
+        ])
+      }, [
+        f(t.$slots, "icon", { iconSize: n.iconSize })
+      ], 2)) : h("", !0),
+      a.hasSlotContent(t.$slots.default) ? (r(), u("span", {
+        key: 1,
+        "data-qa": "dt-button-label",
+        class: c([
+          "base-button__label",
+          { "d-btn__label": i.kind !== "unstyled" },
+          i.labelClass
+        ])
+      }, [
+        f(t.$slots, "default")
+      ], 2)) : h("", !0)
+    ]),
+    _: 3
+  }, 16, ["class", "style", "aria-live", "aria-label"]);
 }
-const R = /* @__PURE__ */ v(g, [["render", D]]);
+const z = /* @__PURE__ */ D(L, [["render", E]]);
 export {
-  R as default
+  z as default
 };
 //# sourceMappingURL=button.js.map

package/dist/vue3/lib/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../../components/button/button.vue"],"sourcesContent":["<template>\n  <button\n    :class=\"[\n      'base-button__button',\n      buttonClasses(),\n    ]\"\n    data-qa=\"dt-button\"\n    :type=\"type\"\n    :disabled=\"disabled\"\n    :style=\"{ width: width }\"\n    :aria-live=\"computedAriaLive\"\n    :aria-label=\"loading ? i18n.$t('DIALTONE_LOADING') : $attrs['aria-label']\"\n    v-on=\"buttonListeners\"\n  >\n    <!-- NOTE(cormac): This span is needed since we can't apply styles to slots. -->\n    <span\n      v-if=\"shouldRenderIcon()\"\n      data-qa=\"dt-button-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          [ICON_POSITION_MODIFIERS[iconPosition]]: kind !== 'unstyled',\n        },\n      ]\"\n    >\n      <!-- @slot Button icon -->\n      <slot\n        name=\"icon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span\n      v-if=\"hasSlotContent($slots.default)\"\n      data-qa=\"dt-button-label\"\n      :class=\"[\n        'base-button__label',\n        { 'd-btn__label': kind !== 'unstyled' },\n        labelClass,\n      ]\"\n    >\n      <!-- @slot Content within button -->\n      <slot />\n    </span>\n  </button>\n</template>\n\n<script>\nimport { warn } from 'vue';\nimport { hasSlotContent } from '@/common/utils';\n\nimport {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_ICON_SIZES,\n  BUTTON_TYPES,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n} from './button_constants';\n\nimport { LINK_KIND_MODIFIERS, getLinkKindModifier } from '@/components/link';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * A button is a UI element which allows users to take an action throughout the app.\n * It is important a button is identifiable, consistent, and communicates its actions clearly,\n * and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/button.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtButton',\n\n  props: {\n    /**\n     * Whether the button is a circle or not.\n     * @values true, false\n     */\n    circle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     * @values left, right, top, bottom\n     */\n    iconPosition: {\n      type: String,\n      default: 'left',\n      validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     * @values clear, outlined, primary\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n      validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n    },\n\n    /**\n     * Whether the button should be styled as a link or not.\n     * @values true, false\n     * @see DtLink\n     */\n    link: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the link and button if the button is styled as a link.\n     * @values default, warning, danger, success, muted\n     * @see DtLink\n     */\n    linkKind: {\n      type: String,\n      default: 'default',\n      validator: (lk) => Object.keys(LINK_KIND_MODIFIERS).includes(lk),\n    },\n\n    /**\n     * Determines whether the link should have inverted styling if the button is styled as a link.\n     * @values true, false\n     * @see DtLink\n     */\n    linkInverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button disabled attribute\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\"> (Reference) </a>\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button type attribute\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\"\n     *   target=\"_blank\"\n     * >\n     *   (Reference)\n     * </a>\n     * @values button, submit, reset\n     */\n    type: {\n      type: String,\n      default: 'button',\n      validator: (t) => BUTTON_TYPES.includes(t),\n    },\n\n    /**\n     * Button width, accepts\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">\n     *   CSS width attribute\n     * </a>\n     * values\n     */\n    width: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The size of the button.\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the button should display a loading animation or not.\n     * @values true, false\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the button.\n     * @values default, unstyled, muted, danger, positive, inverted\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button\n     * is in focus. default is to not.\n     * @values true, false\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have active styling\n     * default is false.\n     * @values true, false\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native button focus in event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native button focus out event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  data () {\n    return {\n      ICON_POSITION_MODIFIERS,\n      // whether the button is currently in focus\n      isInFocus: false,\n      hasSlotContent,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n\n    buttonListeners () {\n      return {\n        focusin: (e) => {\n          this.isInFocus = this.assertiveOnFocus;\n          this.$emit('focusin', e);\n        },\n\n        focusout: (e) => {\n          this.isInFocus = false;\n          this.$emit('focusout', e);\n        },\n      };\n    },\n\n    computedAriaLive () {\n      return this.assertiveOnFocus && this.isInFocus ? 'assertive' : this.$attrs.ariaLive;\n    },\n\n    iconSize () {\n      return BUTTON_ICON_SIZES[this.size];\n    },\n  },\n\n  watch: {\n    $props: {\n      deep: true,\n      immediate: true,\n      handler () {\n        if (process.env.NODE_ENV === 'production') return;\n\n        if (this.circle && this.link) {\n          warn('You cannot enable circle and link at the same time', this);\n        }\n\n        this.isInvalidPropCombination(this.circle, this.kind, this.importance);\n      },\n    },\n  },\n\n  methods: {\n    buttonClasses () {\n      if (this.link) {\n        return [\n          'd-link',\n          getLinkKindModifier(this.linkKind, this.linkInverted),\n          BUTTON_SIZE_MODIFIERS[this.size],\n        ];\n      }\n      if (this.kind === 'unstyled') {\n        return ['d-btn--unstyled'];\n      }\n      return [\n        'd-btn',\n        BUTTON_IMPORTANCE_MODIFIERS[this.importance],\n        BUTTON_KIND_MODIFIERS[this.kind],\n        BUTTON_SIZE_MODIFIERS[this.size],\n        {\n          'd-btn--circle': this.circle,\n          'd-btn--loading': this.loading,\n          'd-btn--icon-only': this.isIconOnly(),\n          'd-btn--vertical': this.isVerticalIconLayout(),\n          'd-btn--active': this.active,\n        },\n      ];\n    },\n\n    isInvalidPropCombination (circle, kind, importance) {\n      // Skip validation if unstyled is true\n      if (this.kind === 'unstyled') {\n        return true;\n      }\n\n      for (const row of INVALID_COMBINATION) {\n        if (circle === row.circle && kind === row.kind && importance === row.importance) {\n          console.warn(row.message);\n          return false;\n        }\n      }\n      return true;\n    },\n\n    shouldRenderIcon () {\n      return hasSlotContent(this.$slots.icon) && !this.link;\n    },\n\n    isIconOnly () {\n      return this.shouldRenderIcon() && !hasSlotContent(this.$slots.default);\n    },\n\n    isVerticalIconLayout () {\n      return !this.isIconOnly() && ['top', 'bottom'].includes(this.iconPosition);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","position","ICON_POSITION_MODIFIERS","i","BUTTON_IMPORTANCE_MODIFIERS","lk","LINK_KIND_MODIFIERS","BUTTON_TYPES","s","BUTTON_SIZE_MODIFIERS","k","BUTTON_KIND_MODIFIERS","hasSlotContent","DialtoneLocalization","e","BUTTON_ICON_SIZES","warn","getLinkKindModifier","circle","kind","importance","row","INVALID_COMBINATION","_openBlock","_createElementBlock","_mergeProps","$options","$props","$data","_ctx","_toHandlers","_normalizeClass","_renderSlot"],"mappings":"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"}
+{"version":3,"file":"button.js","sources":["../../../components/button/button.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"computedTag\"\n    :class=\"[\n      'base-button__button',\n      buttonClasses(),\n    ]\"\n    data-qa=\"dt-button\"\n    :style=\"{ width: width }\"\n    :aria-live=\"computedAriaLive\"\n    :aria-label=\"loading ? i18n.$t('DIALTONE_LOADING') : $attrs['aria-label']\"\n    v-bind=\"computedAttrs\"\n    v-on=\"computedListeners\"\n  >\n    <!-- NOTE(cormac): This span is needed since we can't apply styles to slots. -->\n    <span\n      v-if=\"shouldRenderIcon()\"\n      data-qa=\"dt-button-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          [ICON_POSITION_MODIFIERS[iconPosition]]: kind !== 'unstyled',\n        },\n      ]\"\n    >\n      <!-- @slot Button icon -->\n      <slot\n        name=\"icon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span\n      v-if=\"hasSlotContent($slots.default)\"\n      data-qa=\"dt-button-label\"\n      :class=\"[\n        'base-button__label',\n        { 'd-btn__label': kind !== 'unstyled' },\n        labelClass,\n      ]\"\n    >\n      <!-- @slot Content within button -->\n      <slot />\n    </span>\n  </component>\n</template>\n\n<script>\nimport { warn, resolveComponent } from 'vue';\nimport { hasSlotContent } from '@/common/utils';\n\nimport {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_ICON_SIZES,\n  BUTTON_TYPES,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n} from './button_constants';\n\nimport { LINK_KIND_MODIFIERS, getLinkKindModifier } from '@/components/link';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * A button is a UI element which allows users to take an action throughout the app.\n * It is important a button is identifiable, consistent, and communicates its actions clearly,\n * and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/button.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtButton',\n\n  props: {\n    /**\n     * Whether the button is a circle or not.\n     * @values true, false\n     */\n    circle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     * @values left, right, top, bottom\n     */\n    iconPosition: {\n      type: String,\n      default: 'left',\n      validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     * @values clear, outlined, primary\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n      validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n    },\n\n    /**\n     * Whether the button should be styled as a link or not.\n     * @values true, false\n     * @see DtLink\n     */\n    link: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the link and button if the button is styled as a link.\n     * @values default, warning, danger, success, muted\n     * @see DtLink\n     */\n    linkKind: {\n      type: String,\n      default: 'default',\n      validator: (lk) => Object.keys(LINK_KIND_MODIFIERS).includes(lk),\n    },\n\n    /**\n     * Determines whether the link should have inverted styling if the button is styled as a link.\n     * @values true, false\n     * @see DtLink\n     */\n    linkInverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button disabled attribute\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\"> (Reference) </a>\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button type attribute\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\" target=\"_blank\">(Reference)</a>\n     * @values button, submit, reset\n     */\n    type: {\n      type: String,\n      default: 'button',\n      validator: (t) => BUTTON_TYPES.includes(t),\n    },\n\n    /**\n     * Button width, accepts\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">CSS width attribute</a> values\n     */\n    width: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The size of the button.\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the button should display a loading animation or not.\n     * @values true, false\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the button.\n     * @values default, unstyled, muted, danger, positive, inverted\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button\n     * is in focus. default is to not.\n     * @values true, false\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have active styling\n     * default is false.\n     * @values true, false\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * vue-router `to` prop. When provided, renders a `<router-link>`\n     * for client-side SPA navigation.\n     * @see https://router.vuejs.org/api/interfaces/RouterLinkProps.html#to\n     */\n    to: {\n      type: [String, Object],\n      default: null,\n    },\n\n    /**\n     * When provided, renders an `<a>` element for standard browser navigation.\n     */\n    href: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * HTML anchor target attribute. Only applied when using the `href` prop.\n     * @values _self, _blank, _parent, _top\n     */\n    target: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * HTML anchor rel attribute. Only applied when using the `href` prop.\n     */\n    rel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * vue-router `replace` prop. When true, navigation will not leave a\n     * history entry. Only applied when using the `to` prop.\n     * @values true, false\n     */\n    replace: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native button focus in event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native button focus out event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  data () {\n    return {\n      ICON_POSITION_MODIFIERS,\n      // whether the button is currently in focus\n      isInFocus: false,\n      hasSlotContent,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    computedTag () {\n      if (this.to) return this.resolveRouterLink();\n      if (this.href) return 'a';\n      return 'button';\n    },\n\n    isNativeButton () {\n      return !this.to && !this.href;\n    },\n\n    computedAttrs () {\n      if (this.to) {\n        return {\n          to: this.to,\n          replace: this.replace,\n          ...(this.disabled && { 'aria-disabled': 'true', tabindex: '-1' }),\n        };\n      }\n      if (this.href) {\n        return {\n          href: this.disabled ? null : this.href,\n          target: this.target,\n          rel: this.rel,\n          ...(this.disabled && { 'aria-disabled': 'true', tabindex: '-1' }),\n        };\n      }\n      return {\n        type: this.type,\n        disabled: this.disabled,\n      };\n    },\n\n    computedListeners () {\n      const listeners = {\n        focusin: (e) => {\n          this.isInFocus = this.assertiveOnFocus;\n          this.$emit('focusin', e);\n        },\n\n        focusout: (e) => {\n          this.isInFocus = false;\n          this.$emit('focusout', e);\n        },\n      };\n\n      if (!this.isNativeButton) {\n        // Prevent click when disabled for link elements.\n        // stopImmediatePropagation prevents parent onClick attrs from firing.\n        if (this.disabled) {\n          listeners.click = (e) => {\n            e.preventDefault();\n            e.stopImmediatePropagation();\n          };\n        }\n\n        // Space key handler: <a> only responds to Enter natively,\n        // but buttons respond to both Enter and Space.\n        listeners.keydown = (e) => {\n          if (e.key === ' ' || e.code === 'Space') {\n            e.preventDefault();\n            if (!this.disabled) {\n              e.target.click();\n            }\n          }\n        };\n      }\n\n      return listeners;\n    },\n\n    computedAriaLive () {\n      return this.assertiveOnFocus && this.isInFocus ? 'assertive' : this.$attrs.ariaLive;\n    },\n\n    iconSize () {\n      return BUTTON_ICON_SIZES[this.size];\n    },\n  },\n\n  watch: {\n    $props: {\n      deep: true,\n      immediate: true,\n      handler () {\n        if (process.env.NODE_ENV === 'production') return;\n\n        if (this.circle && this.link) {\n          warn('You cannot enable circle and link at the same time', this);\n        }\n\n        this.isInvalidPropCombination(this.circle, this.kind, this.importance);\n      },\n    },\n  },\n\n  methods: {\n    resolveRouterLink () {\n      try {\n        return resolveComponent('RouterLink');\n      } catch {\n        warn('DtButton: \"to\" prop requires vue-router. Falling back to <a>.');\n        return 'a';\n      }\n    },\n\n    buttonClasses () {\n      if (this.link) {\n        return [\n          'd-link',\n          getLinkKindModifier(this.linkKind, this.linkInverted),\n          BUTTON_SIZE_MODIFIERS[this.size],\n        ];\n      }\n      if (this.kind === 'unstyled') {\n        return ['d-btn--unstyled'];\n      }\n      return [\n        'd-btn',\n        BUTTON_IMPORTANCE_MODIFIERS[this.importance],\n        BUTTON_KIND_MODIFIERS[this.kind],\n        BUTTON_SIZE_MODIFIERS[this.size],\n        {\n          'd-btn--circle': this.circle,\n          'd-btn--loading': this.loading,\n          'd-btn--icon-only': this.isIconOnly(),\n          'd-btn--vertical': this.isVerticalIconLayout(),\n          'd-btn--active': this.active,\n        },\n      ];\n    },\n\n    isInvalidPropCombination (circle, kind, importance) {\n      // Skip validation if unstyled is true\n      if (this.kind === 'unstyled') {\n        return true;\n      }\n\n      for (const row of INVALID_COMBINATION) {\n        if (circle === row.circle && kind === row.kind && importance === row.importance) {\n          warn(row.message);\n          return false;\n        }\n      }\n      return true;\n    },\n\n    shouldRenderIcon () {\n      return hasSlotContent(this.$slots.icon) && !this.link;\n    },\n\n    isIconOnly () {\n      return this.shouldRenderIcon() && !hasSlotContent(this.$slots.default);\n    },\n\n    isVerticalIconLayout () {\n      return !this.isIconOnly() && ['top', 'bottom'].includes(this.iconPosition);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","position","ICON_POSITION_MODIFIERS","i","BUTTON_IMPORTANCE_MODIFIERS","lk","LINK_KIND_MODIFIERS","BUTTON_TYPES","s","BUTTON_SIZE_MODIFIERS","k","BUTTON_KIND_MODIFIERS","hasSlotContent","DialtoneLocalization","listeners","BUTTON_ICON_SIZES","warn","resolveComponent","getLinkKindModifier","circle","kind","importance","row","INVALID_COMBINATION","_createBlock","_resolveDynamicComponent","$options","_mergeProps","$props","$data","_ctx","_toHandlers","_createElementBlock","_normalizeClass","_renderSlot"],"mappings":"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"}

package/dist/vue3/lib/datepicker/datepicker.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),A=require("@dialpad/dialtone-icons/vue3"),h=require("date-fns"),$=require("./utils.cjs"),x=require("./datepicker-constants.cjs"),v=require("../../common/utils/index.cjs"),L=require("../../localization/index.cjs"),M=require("../stack/stack.cjs"),C=require("../tooltip/tooltip.cjs"),N=require("../button/button.cjs");function P(i,u){const c=e.ref(h.getMonth(i.selectedDate)),t=e.ref(h.getYear(i.selectedDate)),r=e.ref(null),n=e.ref(0),p=e.ref([]),f=new L.DialtoneLocalization,m=e.computed(()=>$.getCalendarDays(c.value,t.value,r.value));e.watch(c,()=>{l(),u("calendar-days",m.value)},{immediate:!0}),e.watch(t,()=>{l(),u("calendar-days",m.value)},{immediate:!0});function D(a){return $.formatMonth(a,x.INTL_MONTH_FORMAT,f.currentLocale)}function _(a){p.value.includes(a)||p.value.push(a)}function k(){v.returnFirstEl(p.value[0].$el).focus()}function b(a){switch(a.key){case"ArrowLeft":a.preventDefault(),n.value===0?(n.value=3,v.returnFirstEl(p.value[n.value].$el).focus()):(n.value--,v.returnFirstEl(p.value[n.value].$el).focus());break;case"ArrowRight":a.preventDefault(),n.value===3?(n.value=0,v.returnFirstEl(p.value[n.value].$el).focus()):(n.value++,v.returnFirstEl(p.value[n.value].$el).focus());break;case"ArrowDown":a.preventDefault(),u("focus-first-day");break;case"Tab":a.preventDefault(),u("focus-first-day");break;case"Escape":u("close-datepicker");break}}function l(){const a=h.getYear(i.selectedDate),g=h.getMonth(i.selectedDate);a!==t.value||g!==c.value?r.value=null:r.value=h.getDate(i.selectedDate)}function o(a){(c.value===0&&a===-1||c.value===11&&a===1)&&(t.value+=a);const g=h.set(i.selectedDate,{month:c.value,year:t.value}),R=a===1?h.addMonths(g,1):h.subMonths(g,1);c.value=h.getMonth(R)}function y(a){t.value=t.value+a}function d(){o(1)}function T(){o(-1)}function E(){return`${f.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${f.$t("DIALTONE_DATEPICKER_PREVIOUS_YEAR")} ${t.value-1}`}function w(){return`${f.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${f.$t("DIALTONE_DATEPICKER_PREVIOUS_MONTH")} ${D(c.value-1)}`}function I(){return`${f.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${f.$t("DIALTONE_DATEPICKER_NEXT_YEAR")} ${t.value+1}`}function s(){return`${f.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${f.$t("DIALTONE_DATEPICKER_NEXT_MONTH")} ${D(c.value+1)}`}return{selectMonth:c,selectYear:t,formattedMonth:D,setDayRef:_,focusMonthYearPicker:k,handleKeyDown:b,changeMonth:o,changeYear:y,goToNextMonth:d,goToPrevMonth:T,previousYearAriaLabel:E,previousMonthAriaLabel:w,nextYearAriaLabel:I,nextMonthAriaLabel:s}}const F={id:"calendar-heading",class:"d-datepicker__month-year-title"},O={__name:"month-year-picker",props:{selectedDate:{type:Date,required:!0}},emits:["calendar-days","focus-first-day","focus-last-day","close-datepicker"],setup(i,{expose:u,emit:c}){const t=i,r=c,n=new L.DialtoneLocalization,{selectMonth:p,selectYear:f,formattedMonth:m,setDayRef:D,focusMonthYearPicker:_,handleKeyDown:k,changeMonth:b,changeYear:l,goToNextMonth:o,goToPrevMonth:y,previousYearAriaLabel:d,previousMonthAriaLabel:T,nextMonthAriaLabel:E,nextYearAriaLabel:w}=P(t,r);return e.onMounted(()=>{_()}),u({focusMonthYearPicker:_,goToNextMonth:o,goToPrevMonth:y}),(I,s)=>(e.openBlock(),e.createBlock(e.unref(M.default),{class:"d-datepicker__month-year",direction:"row",gap:"300"},{default:e.withCtx(()=>[e.createVNode(e.unref(M.default),{as:"nav",class:"d-datepicker__nav",direction:"row",gap:"200"},{default:e.withCtx(()=>[e.createVNode(e.unref(C.default),{"fallback-placements":["top-start","auto"],message:e.unref(n).$t("DIALTONE_DATEPICKER_PREVIOUS_YEAR"),placement:"top"},{anchor:e.withCtx(()=>[e.createVNode(e.unref(N.default),{id:"prevYearButton",ref:a=>{a&&e.unref(D)(a)},"aria-label":e.unref(d)(),circle:!0,class:"d-datepicker__nav-btn",importance:"clear",kind:"muted",size:"xs",type:"button",onClick:s[0]||(s[0]=a=>e.unref(l)(-1)),onKeydown:s[1]||(s[1]=a=>e.unref(k)(a))},{default:e.withCtx(()=>[e.createVNode(e.unref(A.DtIconChevronsLeft),{size:"200"})]),_:1},8,["aria-label"])]),_:1},8,["message"]),e.createVNode(e.unref(C.default),{"fallback-placements":["top-start","auto"],message:e.unref(n).$t("DIALTONE_DATEPICKER_PREVIOUS_MONTH"),placement:"top"},{anchor:e.withCtx(()=>[e.createVNode(e.unref(N.default),{id:"prevMonthButton",ref:a=>{a&&e.unref(D)(a)},"aria-label":e.unref(T)(),circle:!0,class:"d-datepicker__nav-btn",importance:"clear",kind:"muted",size:"xs",type:"button",onClick:s[2]||(s[2]=a=>e.unref(b)(-1)),onKeydown:s[3]||(s[3]=a=>e.unref(k)(a))},{default:e.withCtx(()=>[e.createVNode(e.unref(A.DtIconChevronLeft),{size:"200"})]),_:1},8,["aria-label"])]),_:1},8,["message"])]),_:1}),e.createElementVNode("div",F,e.toDisplayString(e.unref(m)(e.unref(p)))+" "+e.toDisplayString(e.unref(f)),1),e.createVNode(e.unref(M.default),{as:"nav",class:"d-datepicker__nav",direction:"row",gap:"200"},{default:e.withCtx(()=>[e.createVNode(e.unref(C.default),{"fallback-placements":["top-end","auto"],message:e.unref(n).$t("DIALTONE_DATEPICKER_NEXT_MONTH"),placement:"top"},{anchor:e.withCtx(()=>[e.createVNode(e.unref(N.default),{id:"nextMonthButton",ref:a=>{a&&e.unref(D)(a)},"aria-label":e.unref(E)(),circle:!0,class:"d-datepicker__nav-btn",importance:"clear",kind:"muted",size:"xs",type:"button",onClick:s[4]||(s[4]=a=>e.unref(b)(1)),onKeydown:s[5]||(s[5]=a=>e.unref(k)(a))},{default:e.withCtx(()=>[e.createVNode(e.unref(A.DtIconChevronRight),{size:"200"})]),_:1},8,["aria-label"])]),_:1},8,["message"]),e.createVNode(e.unref(C.default),{"fallback-placements":["top-end","auto"],message:e.unref(n).$t("DIALTONE_DATEPICKER_NEXT_YEAR"),placement:"top"},{anchor:e.withCtx(()=>[e.createVNode(e.unref(N.default),{id:"nextYearButton",ref:a=>{a&&e.unref(D)(a)},"aria-label":e.unref(w)(),circle:!0,class:"d-datepicker__nav-btn",importance:"clear",kind:"muted",size:"xs",type:"button",onClick:s[6]||(s[6]=a=>e.unref(l)(1)),onKeydown:s[7]||(s[7]=a=>e.unref(k)(a))},{default:e.withCtx(()=>[e.createVNode(e.unref(A.DtIconChevronsRight),{size:"200"})]),_:1},8,["aria-label"])]),_:1},8,["message"])]),_:1})]),_:1}))}};function V(i,u){const c=e.ref(null),t=e.ref(0),r=e.ref([]),n=new L.DialtoneLocalization,p=e.computed(()=>$.getWeekDayNames(i.locale,x.WEEK_START));e.watch(()=>i.calendarDays,()=>{t.value=0,r.value=[],c.value=null});function f(l){return n.$t("DIALTONE_DATEPICKER_SELECT_DAY")+` ${$.formatDate(l.value,x.INTL_MONTH_FORMAT,n.currentLocale)}`}function m(l,o){!r.value.some(y=>y.el===l)&&o.currentMonth&&r.value.push({el:l,day:o})}function D(l){switch(l.key){case"ArrowUp":l.preventDefault(),t.value-=7;try{v.returnFirstEl(r.value[t.value].el.$el).focus()}catch{const o=$.calculatePrevFocusDate(r.value[t.value+7].day.value);u("go-to-prev-month"),e.nextTick(()=>{v.returnFirstEl(r.value[o-1].el.$el).focus(),t.value+=o-1})}break;case"ArrowDown":l.preventDefault(),t.value+=7;try{v.returnFirstEl(r.value[t.value].el.$el).focus()}catch{const o=$.calculateNextFocusDate(r.value[t.value-7].day.value);u("go-to-next-month"),e.nextTick(()=>{v.returnFirstEl(r.value[o-1].el.$el).focus(),t.value+=o-1})}break;case"ArrowLeft":l.preventDefault(),t.value>0?(t.value-=1,v.returnFirstEl(r.value[t.value].el.$el).focus()):(u("go-to-prev-month"),k());break;case"ArrowRight":l.preventDefault(),t.value<r.value.length-1?(t.value+=1,v.returnFirstEl(r.value[t.value].el.$el).focus()):(u("go-to-next-month"),_());break;case"Tab":l.preventDefault(),u("focus-month-year-picker");break;case"Escape":u("close-datepicker");break}}function _(){t.value=0,e.nextTick(()=>{v.returnFirstEl(r.value[t.value].el.$el).focus()})}function k(){e.nextTick(()=>{t.value=r.value.length-1,v.returnFirstEl(r.value[t.value].el.$el).focus()})}function b(l){l.currentMonth&&(c.value=l.text,u("select-date",l.value))}return{selectedDay:c,weekDays:p,dayAriaLabel:f,setDayRef:m,handleKeyDown:D,focusFirstDay:_,selectDay:b}}const Y={class:"d-datepicker__calendar","aria-labelledby":"calendar-heading"},K=["title","aria-label"],B={__name:"calendar",props:{calendarDays:{type:Array,required:!0}},emits:["select-date","focus-month-year-picker","close-datepicker","go-to-next-month","go-to-prev-month"],setup(i,{expose:u,emit:c}){const t=i,r=c,{selectedDay:n,weekDays:p,dayAriaLabel:f,setDayRef:m,handleKeyDown:D,focusFirstDay:_,selectDay:k}=V(t,r);return u({focusFirstDay:_}),(b,l)=>(e.openBlock(),e.createElementBlock("table",Y,[e.createElementVNode("thead",null,[e.createElementVNode("tr",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(p),o=>(e.openBlock(),e.createElementBlock("th",{key:o,scope:"col",class:"d-datepicker__cell d-datepicker__cell--header"},[e.createElementVNode("span",{class:"d-datepicker__weekday",title:o,"aria-label":o},e.toDisplayString(o),9,K)]))),128))])]),e.createElementVNode("tbody",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.calendarDays,(o,y)=>(e.openBlock(),e.createElementBlock("tr",{key:y},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.days,(d,T)=>(e.openBlock(),e.createElementBlock("td",{key:y+T,class:"d-datepicker__cell",role:"listbox"},[e.createVNode(e.unref(N.default),{ref_for:!0,ref:E=>{E&&e.unref(m)(E,d)},class:e.normalizeClass(["d-datepicker__day",{"d-datepicker__day--disabled":!d.currentMonth,"d-datepicker__day--selected":e.unref(n)?d.text===e.unref(n)&&d.currentMonth:d.selected}]),circle:!0,size:"sm",importance:"clear",disabled:!d.currentMonth,type:"button","aria-selected":e.unref(n)?d.text===e.unref(n)&&d.currentMonth:d.selected,"aria-label":e.unref(f)(d),role:"option",onClick:E=>e.unref(k)(d),onKeydown:l[0]||(l[0]=E=>e.unref(D)(E))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(d.text),1)]),_:2},1032,["disabled","class","aria-selected","aria-label","onClick"])]))),128))]))),128))])]))}},z={class:"d-datepicker__hd"},S={class:"d-datepicker__bd"},q={__name:"datepicker",props:{selectedDate:{type:Date,default:()=>new Date}},emits:["selected-date","close-datepicker"],setup(i){const u=e.ref([]);function c(t){u.value=t}return e.onMounted(()=>{const t=e.getCurrentInstance();v.warnIfUnmounted(v.returnFirstEl(t.proxy.$el),"datepicker")}),(t,r)=>(e.openBlock(),e.createBlock(e.unref(M.default),{class:"d-datepicker",gap:"400"},{default:e.withCtx(()=>[e.createElementVNode("div",z,[e.createVNode(O,{ref:"monthYearPicker","selected-date":i.selectedDate,onCalendarDays:c,onFocusFirstDay:r[0]||(r[0]=n=>t.$refs.calendar.focusFirstDay()),onFocusLastDay:r[1]||(r[1]=n=>t.$refs.calendar.focusLastDay()),onCloseDatepicker:r[2]||(r[2]=n=>t.$emit("close-datepicker"))},null,8,["selected-date"])]),e.createElementVNode("div",S,[e.createVNode(B,{ref:"calendar","calendar-days":u.value,onSelectDate:r[3]||(r[3]=n=>t.$emit("selected-date",n)),onFocusMonthYearPicker:r[4]||(r[4]=n=>t.$refs.monthYearPicker.focusMonthYearPicker()),onCloseDatepicker:r[5]||(r[5]=n=>t.$emit("close-datepicker")),onGoToNextMonth:r[6]||(r[6]=n=>t.$refs.monthYearPicker.goToNextMonth()),onGoToPrevMonth:r[7]||(r[7]=n=>t.$refs.monthYearPicker.goToPrevMonth())},null,8,["calendar-days"])])]),_:1}))}};exports.default=q;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),g=require("@dialpad/dialtone-icons/vue3"),c=require("date-fns"),N=require("./utils.cjs"),P=require("./datepicker-constants.cjs"),v=require("../../common/utils/index.cjs"),R=require("../../localization/index.cjs"),A=require("../stack/stack.cjs"),M=require("../tooltip/tooltip.cjs"),T=require("../button/button.cjs");function V(r,o){const s=e.ref(c.getMonth(r.selectedDate)),a=e.ref(c.getYear(r.selectedDate)),n=e.ref(null),l=e.ref(0),m=e.ref([]),D=new R.DialtoneLocalization,b=e.computed(()=>N.getCalendarDays(s.value,a.value,n.value,r.minDate,r.maxDate)),k=e.computed(()=>{if(!r.minDate)return!1;const t=c.subMonths(new Date(a.value,s.value,1),1);return c.endOfMonth(t)<c.startOfDay(r.minDate)}),E=e.computed(()=>{if(!r.maxDate)return!1;const t=c.addMonths(new Date(a.value,s.value,1),1);return c.startOfMonth(t)>c.startOfDay(r.maxDate)}),p=e.computed(()=>{if(!r.minDate)return!1;const t=new Date(a.value-1,s.value,1);return c.endOfMonth(t)<c.startOfDay(r.minDate)}),_=e.computed(()=>{if(!r.maxDate)return!1;const t=new Date(a.value+1,s.value,1);return c.startOfMonth(t)>c.startOfDay(r.maxDate)});e.watch(s,()=>{$(),o("calendar-days",b.value)},{immediate:!0}),e.watch(a,()=>{$(),o("calendar-days",b.value)},{immediate:!0}),e.watch(()=>r.minDate,()=>{o("calendar-days",b.value)}),e.watch(()=>r.maxDate,()=>{o("calendar-days",b.value)});function u(t){return N.formatMonth(t,P.INTL_MONTH_FORMAT,D.currentLocale)}function i(t){m.value.includes(t)||m.value.push(t)}function y(){v.returnFirstEl(m.value[0].$el).focus()}function f(t){switch(t.key){case"ArrowLeft":t.preventDefault(),l.value===0?(l.value=3,v.returnFirstEl(m.value[l.value].$el).focus()):(l.value--,v.returnFirstEl(m.value[l.value].$el).focus());break;case"ArrowRight":t.preventDefault(),l.value===3?(l.value=0,v.returnFirstEl(m.value[l.value].$el).focus()):(l.value++,v.returnFirstEl(m.value[l.value].$el).focus());break;case"ArrowDown":t.preventDefault(),o("focus-first-day");break;case"Tab":t.preventDefault(),o("focus-first-day");break;case"Escape":o("close-datepicker");break}}function $(){const t=c.getYear(r.selectedDate),x=c.getMonth(r.selectedDate);t!==a.value||x!==s.value?n.value=null:n.value=c.getDate(r.selectedDate)}function h(t){if(t===-1&&k.value||t===1&&E.value)return;(s.value===0&&t===-1||s.value===11&&t===1)&&(a.value+=t);const x=c.set(r.selectedDate,{month:s.value,year:a.value}),F=t===1?c.addMonths(x,1):c.subMonths(x,1);s.value=c.getMonth(F)}function w(t){t===-1&&p.value||t===1&&_.value||(a.value=a.value+t)}function C(){h(1)}function L(){h(-1)}function I(){return`${D.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${D.$t("DIALTONE_DATEPICKER_PREVIOUS_YEAR")} ${a.value-1}`}function O(){return`${D.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${D.$t("DIALTONE_DATEPICKER_PREVIOUS_MONTH")} ${u(s.value-1)}`}function Y(){return`${D.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${D.$t("DIALTONE_DATEPICKER_NEXT_YEAR")} ${a.value+1}`}function d(){return`${D.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${D.$t("DIALTONE_DATEPICKER_NEXT_MONTH")} ${u(s.value+1)}`}return{selectMonth:s,selectYear:a,formattedMonth:u,setDayRef:i,focusMonthYearPicker:y,handleKeyDown:f,changeMonth:h,changeYear:w,goToNextMonth:C,goToPrevMonth:L,isPrevMonthDisabled:k,isNextMonthDisabled:E,isPrevYearDisabled:p,isNextYearDisabled:_,previousYearAriaLabel:I,previousMonthAriaLabel:O,nextYearAriaLabel:Y,nextMonthAriaLabel:d}}const K={id:"calendar-heading",class:"d-datepicker__month-year-title"},B={__name:"month-year-picker",props:{selectedDate:{type:Date,required:!0},minDate:{type:Date,default:null},maxDate:{type:Date,default:null}},emits:["calendar-days","focus-first-day","focus-last-day","close-datepicker"],setup(r,{expose:o,emit:s}){const a=r,n=s,l=new R.DialtoneLocalization,{selectMonth:m,selectYear:D,formattedMonth:b,setDayRef:k,focusMonthYearPicker:E,handleKeyDown:p,changeMonth:_,changeYear:u,goToNextMonth:i,goToPrevMonth:y,isPrevMonthDisabled:f,isNextMonthDisabled:$,isPrevYearDisabled:h,isNextYearDisabled:w,previousYearAriaLabel:C,previousMonthAriaLabel:L,nextMonthAriaLabel:I,nextYearAriaLabel:O}=V(a,n);return e.onMounted(()=>{E()}),o({focusMonthYearPicker:E,goToNextMonth:i,goToPrevMonth:y}),(Y,d)=>(e.openBlock(),e.createBlock(e.unref(A.default),{class:"d-datepicker__month-year",direction:"row",gap:"300"},{default:e.withCtx(()=>[e.createVNode(e.unref(A.default),{as:"nav",class:"d-datepicker__nav",direction:"row",gap:"200"},{default:e.withCtx(()=>[e.createVNode(e.unref(M.default),{"fallback-placements":["top-start","auto"],message:e.unref(l).$t("DIALTONE_DATEPICKER_PREVIOUS_YEAR"),placement:"top"},{anchor:e.withCtx(()=>[e.createVNode(e.unref(T.default),{id:"prevYearButton",ref:t=>{t&&e.unref(k)(t)},"aria-label":e.unref(C)(),circle:!0,disabled:e.unref(h),class:"d-datepicker__nav-btn",importance:"clear",kind:"muted",size:"xs",type:"button",onClick:d[0]||(d[0]=t=>e.unref(u)(-1)),onKeydown:d[1]||(d[1]=t=>e.unref(p)(t))},{default:e.withCtx(()=>[e.createVNode(e.unref(g.DtIconChevronsLeft),{size:"200"})]),_:1},8,["aria-label","disabled"])]),_:1},8,["message"]),e.createVNode(e.unref(M.default),{"fallback-placements":["top-start","auto"],message:e.unref(l).$t("DIALTONE_DATEPICKER_PREVIOUS_MONTH"),placement:"top"},{anchor:e.withCtx(()=>[e.createVNode(e.unref(T.default),{id:"prevMonthButton",ref:t=>{t&&e.unref(k)(t)},"aria-label":e.unref(L)(),circle:!0,disabled:e.unref(f),class:"d-datepicker__nav-btn",importance:"clear",kind:"muted",size:"xs",type:"button",onClick:d[2]||(d[2]=t=>e.unref(_)(-1)),onKeydown:d[3]||(d[3]=t=>e.unref(p)(t))},{default:e.withCtx(()=>[e.createVNode(e.unref(g.DtIconChevronLeft),{size:"200"})]),_:1},8,["aria-label","disabled"])]),_:1},8,["message"])]),_:1}),e.createElementVNode("div",K,e.toDisplayString(e.unref(b)(e.unref(m)))+" "+e.toDisplayString(e.unref(D)),1),e.createVNode(e.unref(A.default),{as:"nav",class:"d-datepicker__nav",direction:"row",gap:"200"},{default:e.withCtx(()=>[e.createVNode(e.unref(M.default),{"fallback-placements":["top-end","auto"],message:e.unref(l).$t("DIALTONE_DATEPICKER_NEXT_MONTH"),placement:"top"},{anchor:e.withCtx(()=>[e.createVNode(e.unref(T.default),{id:"nextMonthButton",ref:t=>{t&&e.unref(k)(t)},"aria-label":e.unref(I)(),circle:!0,disabled:e.unref($),class:"d-datepicker__nav-btn",importance:"clear",kind:"muted",size:"xs",type:"button",onClick:d[4]||(d[4]=t=>e.unref(_)(1)),onKeydown:d[5]||(d[5]=t=>e.unref(p)(t))},{default:e.withCtx(()=>[e.createVNode(e.unref(g.DtIconChevronRight),{size:"200"})]),_:1},8,["aria-label","disabled"])]),_:1},8,["message"]),e.createVNode(e.unref(M.default),{"fallback-placements":["top-end","auto"],message:e.unref(l).$t("DIALTONE_DATEPICKER_NEXT_YEAR"),placement:"top"},{anchor:e.withCtx(()=>[e.createVNode(e.unref(T.default),{id:"nextYearButton",ref:t=>{t&&e.unref(k)(t)},"aria-label":e.unref(O)(),circle:!0,disabled:e.unref(w),class:"d-datepicker__nav-btn",importance:"clear",kind:"muted",size:"xs",type:"button",onClick:d[6]||(d[6]=t=>e.unref(u)(1)),onKeydown:d[7]||(d[7]=t=>e.unref(p)(t))},{default:e.withCtx(()=>[e.createVNode(e.unref(g.DtIconChevronsRight),{size:"200"})]),_:1},8,["aria-label","disabled"])]),_:1},8,["message"])]),_:1})]),_:1}))}};function z(r,o){const s=e.ref(null),a=e.ref(0),n=e.ref([]),l=new R.DialtoneLocalization,m=e.computed(()=>N.getWeekDayNames(r.locale,P.WEEK_START));e.watch(()=>r.calendarDays,()=>{a.value=0,n.value=[],s.value=null});function D(u){return l.$t("DIALTONE_DATEPICKER_SELECT_DAY")+` ${N.formatDate(u.value,P.INTL_MONTH_FORMAT,l.currentLocale)}`}function b(u,i){!n.value.some(y=>y.el===u)&&!i.disabled&&n.value.push({el:u,day:i})}function k(u){switch(u.key){case"ArrowUp":u.preventDefault(),a.value-=7;try{v.returnFirstEl(n.value[a.value].el.$el).focus()}catch{const i=N.calculatePrevFocusDate(n.value[a.value+7].day.value);o("go-to-prev-month"),e.nextTick(()=>{v.returnFirstEl(n.value[i-1].el.$el).focus(),a.value+=i-1})}break;case"ArrowDown":u.preventDefault(),a.value+=7;try{v.returnFirstEl(n.value[a.value].el.$el).focus()}catch{const i=N.calculateNextFocusDate(n.value[a.value-7].day.value);o("go-to-next-month"),e.nextTick(()=>{v.returnFirstEl(n.value[i-1].el.$el).focus(),a.value+=i-1})}break;case"ArrowLeft":u.preventDefault(),a.value>0?(a.value-=1,v.returnFirstEl(n.value[a.value].el.$el).focus()):(o("go-to-prev-month"),p());break;case"ArrowRight":u.preventDefault(),a.value<n.value.length-1?(a.value+=1,v.returnFirstEl(n.value[a.value].el.$el).focus()):(o("go-to-next-month"),E());break;case"Tab":u.preventDefault(),o("focus-month-year-picker");break;case"Escape":o("close-datepicker");break}}function E(){a.value=0,e.nextTick(()=>{v.returnFirstEl(n.value[a.value].el.$el).focus()})}function p(){e.nextTick(()=>{a.value=n.value.length-1,v.returnFirstEl(n.value[a.value].el.$el).focus()})}function _(u){u.disabled||(s.value=u.text,o("select-date",u.value))}return{selectedDay:s,weekDays:m,dayAriaLabel:D,setDayRef:b,handleKeyDown:k,focusFirstDay:E,selectDay:_}}const q={class:"d-datepicker__calendar","aria-labelledby":"calendar-heading"},S=["title","aria-label"],H={__name:"calendar",props:{calendarDays:{type:Array,required:!0}},emits:["select-date","focus-month-year-picker","close-datepicker","go-to-next-month","go-to-prev-month"],setup(r,{expose:o,emit:s}){const a=r,n=s,{selectedDay:l,weekDays:m,dayAriaLabel:D,setDayRef:b,handleKeyDown:k,focusFirstDay:E,selectDay:p}=z(a,n);return o({focusFirstDay:E}),(_,u)=>(e.openBlock(),e.createElementBlock("table",q,[e.createElementVNode("thead",null,[e.createElementVNode("tr",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(m),i=>(e.openBlock(),e.createElementBlock("th",{key:i,scope:"col",class:"d-datepicker__cell d-datepicker__cell--header"},[e.createElementVNode("span",{class:"d-datepicker__weekday",title:i,"aria-label":i},e.toDisplayString(i),9,S)]))),128))])]),e.createElementVNode("tbody",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.calendarDays,(i,y)=>(e.openBlock(),e.createElementBlock("tr",{key:y},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.days,(f,$)=>(e.openBlock(),e.createElementBlock("td",{key:y+$,class:"d-datepicker__cell",role:"listbox"},[e.createVNode(e.unref(T.default),{ref_for:!0,ref:h=>{h&&e.unref(b)(h,f)},class:e.normalizeClass(["d-datepicker__day",{"d-datepicker__day--disabled":f.disabled,"d-datepicker__day--selected":e.unref(l)?f.text===e.unref(l)&&!f.disabled:f.selected}]),circle:!0,size:"sm",importance:"clear",disabled:f.disabled,type:"button","aria-selected":e.unref(l)?f.text===e.unref(l)&&!f.disabled:f.selected,"aria-label":e.unref(D)(f),role:"option",onClick:h=>e.unref(p)(f),onKeydown:u[0]||(u[0]=h=>e.unref(k)(h))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(f.text),1)]),_:2},1032,["disabled","class","aria-selected","aria-label","onClick"])]))),128))]))),128))])]))}},G={class:"d-datepicker__hd"},U={class:"d-datepicker__bd"},X={__name:"datepicker",props:{selectedDate:{type:Date,default:()=>new Date},minDate:{type:Date,default:null},maxDate:{type:Date,default:null,validator:(r,o)=>r&&o.minDate&&r<o.minDate?(console.warn("[DtDatepicker]: maxDate must be after or equal to minDate."),!1):!0}},emits:["selected-date","close-datepicker"],setup(r){const o=e.ref([]);function s(a){o.value=a}return e.onMounted(()=>{const a=e.getCurrentInstance();v.warnIfUnmounted(v.returnFirstEl(a.proxy.$el),"datepicker")}),(a,n)=>(e.openBlock(),e.createBlock(e.unref(A.default),{class:"d-datepicker",gap:"400"},{default:e.withCtx(()=>[e.createElementVNode("div",G,[e.createVNode(B,{ref:"monthYearPicker","selected-date":r.selectedDate,"min-date":r.minDate,"max-date":r.maxDate,onCalendarDays:s,onFocusFirstDay:n[0]||(n[0]=l=>a.$refs.calendar.focusFirstDay()),onFocusLastDay:n[1]||(n[1]=l=>a.$refs.calendar.focusLastDay()),onCloseDatepicker:n[2]||(n[2]=l=>a.$emit("close-datepicker"))},null,8,["selected-date","min-date","max-date"])]),e.createElementVNode("div",U,[e.createVNode(H,{ref:"calendar","calendar-days":o.value,onSelectDate:n[3]||(n[3]=l=>a.$emit("selected-date",l)),onFocusMonthYearPicker:n[4]||(n[4]=l=>a.$refs.monthYearPicker.focusMonthYearPicker()),onCloseDatepicker:n[5]||(n[5]=l=>a.$emit("close-datepicker")),onGoToNextMonth:n[6]||(n[6]=l=>a.$refs.monthYearPicker.goToNextMonth()),onGoToPrevMonth:n[7]||(n[7]=l=>a.$refs.monthYearPicker.goToPrevMonth())},null,8,["calendar-days"])])]),_:1}))}};exports.default=X;
 //# sourceMappingURL=datepicker.cjs.map