@dialpad/dialtone 9.123.2 → 9.125.0

package/dist/vue2/lib/notice/notice-action.js

@@ -1,24 +1,17 @@
-import { DtIconClose as s } from "@dialpad/dialtone-icons/vue2";
-import n from "../../common/mixins/sr-only-close-button.js";
-import i from "../../shared/sr_only_close_button.js";
-import { n as l } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
+import { DtIconClose as n } from "@dialpad/dialtone-icons/vue2";
+import s from "../../shared/sr_only_close_button.js";
+import { n as i } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
 import c from "../button/button.js";
-const a = {
+import l from "../../common/mixins/localization.js";
+const r = {
   name: "DtNoticeAction",
   components: {
-    DtIconClose: s,
+    DtIconClose: n,
     DtButton: c,
-    SrOnlyCloseButton: i
+    SrOnlyCloseButton: s
   },
-  mixins: [n],
+  mixins: [l],
   props: {
-    /**
-     * Props for the notice close button.
-     */
-    closeButtonProps: {
-      type: Object,
-      default: () => ({})
-    },
     /**
      * Hides the close button from the notice
      * @values true, false
@@ -52,11 +45,11 @@ const a = {
           this.close(), this.$emit("click", e);
         }
       };
+    },
+    closeButtonTitle() {
+      return this.i18n.$t("DIALTONE_CLOSE_BUTTON");
     }
   },
-  created() {
-    !this.hideClose && !this.closeButtonProps.ariaLabel && console.error("Invalid props: you must pass in closeButtonProps.ariaLabel if the close button is displayed.");
-  },
   mounted() {
     this.hideClose || (this.lastFocusedElement = document.activeElement);
   },
@@ -70,18 +63,18 @@ const a = {
     }
   }
 };
-var r = function() {
+var a = function() {
   var t = this, o = t._self._c;
-  return o("div", { staticClass: "d-notice__actions", attrs: { "data-qa": "notice-content-actions" } }, [t.hideAction ? t._e() : t._t("default"), t.hideClose ? t._e() : o("dt-button", t._g(t._b({ ref: "closeButton", attrs: { "data-qa": "dt-notice-action-close-button", size: "sm", importance: "clear", circle: "", "aria-label": t.closeButtonProps.ariaLabel ? t.closeButtonProps.ariaLabel : "Close" }, scopedSlots: t._u([{ key: "icon", fn: function() {
+  return o("div", { staticClass: "d-notice__actions", attrs: { "data-qa": "notice-content-actions" } }, [t.hideAction ? t._e() : t._t("default"), t.hideClose ? o("sr-only-close-button", { on: { close: t.close } }) : o("dt-button", t._g({ ref: "closeButton", attrs: { circle: "", "data-qa": "dt-notice-action-close-button", importance: "clear", size: "sm", "aria-label": t.closeButtonTitle, title: t.closeButtonTitle }, scopedSlots: t._u([{ key: "icon", fn: function() {
     return [o("dt-icon-close", { attrs: { size: "200" } })];
-  }, proxy: !0 }], null, !1, 4156074325) }, "dt-button", t.closeButtonProps, !1), t.noticeActionListeners)), t.showVisuallyHiddenClose ? o("sr-only-close-button", { attrs: { "visually-hidden-close-label": t.visuallyHiddenCloseLabel }, on: { close: t.close } }) : t._e()], 2);
-}, d = [], u = /* @__PURE__ */ l(
-  a,
+  }, proxy: !0 }], null, !1, 4156074325) }, t.noticeActionListeners))], 2);
+}, m = [], u = /* @__PURE__ */ i(
   r,
-  d
+  a,
+  m
 );
-const b = u.exports;
+const B = u.exports;
 export {
-  b as default
+  B as default
 };
 //# sourceMappingURL=notice-action.js.map

package/dist/vue2/lib/notice/notice-action.js.map

@@ -1 +1 @@
-{"version":3,"file":"notice-action.js","sources":["../../../components/notice/notice_action.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-notice__actions\"\n    data-qa=\"notice-content-actions\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot v-if=\"!hideAction\" />\n    <dt-button\n      v-if=\"!hideClose\"\n      ref=\"closeButton\"\n      data-qa=\"dt-notice-action-close-button\"\n      size=\"sm\"\n      importance=\"clear\"\n      circle\n      :aria-label=\"closeButtonProps.ariaLabel ? closeButtonProps.ariaLabel : 'Close'\"\n      v-bind=\"closeButtonProps\"\n      v-on=\"noticeActionListeners\"\n    >\n      <template #icon>\n        <dt-icon-close\n          size=\"200\"\n        />\n      </template>\n    </dt-button>\n    <sr-only-close-button\n      v-if=\"showVisuallyHiddenClose\"\n      :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n      @close=\"close\"\n    />\n  </div>\n</template>\n\n<script>\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue2';\nimport { DtButton } from '@/components/button';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\n\nexport default {\n  name: 'DtNoticeAction',\n\n  components: {\n    DtIconClose,\n    DtButton,\n    SrOnlyCloseButton,\n  },\n\n  mixins: [SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * Props for the notice close button.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Hides the close button from the notice\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n  ],\n\n  computed: {\n    noticeActionListeners () {\n      return {\n        ...this.$listeners,\n\n        click: event => {\n          this.close();\n          this.$emit('click', event);\n        },\n      };\n    },\n  },\n\n  created () {\n    if (!this.hideClose && !this.closeButtonProps.ariaLabel) {\n      console.error('Invalid props: you must pass in closeButtonProps.ariaLabel if the close button is displayed.');\n    }\n  },\n\n  mounted () {\n    if (!this.hideClose) {\n      this.lastFocusedElement = document.activeElement;\n    }\n  },\n\n  beforeDestroy () {\n    this.lastFocusedElement?.focus();\n  },\n\n  methods: {\n    close () {\n      this.$emit('close');\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtIconClose","DtButton","SrOnlyCloseButton","SrOnlyCloseButtonMixin","event","_a"],"mappings":";;;;;AAsCA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,mBAAAC;AAAA,EACA;AAAA,EAEA,QAAA,CAAAC,CAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,wBAAA;AACA,aAAA;AAAA,QACA,GAAA,KAAA;AAAA,QAEA,OAAA,CAAAC,MAAA;AACA,eAAA,MAAA,GACA,KAAA,MAAA,SAAAA,CAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,IAAA,CAAA,KAAA,aAAA,CAAA,KAAA,iBAAA,aACA,QAAA,MAAA,8FAAA;AAAA,EAEA;AAAA,EAEA,UAAA;AACA,IAAA,KAAA,cACA,KAAA,qBAAA,SAAA;AAAA,EAEA;AAAA,EAEA,gBAAA;;AACA,KAAAC,IAAA,KAAA,uBAAA,QAAAA,EAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,QAAA;AACA,WAAA,MAAA,OAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;"}
+{"version":3,"file":"notice-action.js","sources":["../../../components/notice/notice_action.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-notice__actions\"\n    data-qa=\"notice-content-actions\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot v-if=\"!hideAction\" />\n    <dt-button\n      v-if=\"!hideClose\"\n      ref=\"closeButton\"\n      circle\n      data-qa=\"dt-notice-action-close-button\"\n      importance=\"clear\"\n      size=\"sm\"\n      :aria-label=\"closeButtonTitle\"\n      :title=\"closeButtonTitle\"\n      v-on=\"noticeActionListeners\"\n    >\n      <template #icon>\n        <dt-icon-close\n          size=\"200\"\n        />\n      </template>\n    </dt-button>\n    <sr-only-close-button\n      v-else\n      @close=\"close\"\n    />\n  </div>\n</template>\n\n<script>\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue2';\nimport { DtButton } from '@/components/button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\nimport { DtLocalizationMixin } from '@/common/mixins';\n\nexport default {\n  name: 'DtNoticeAction',\n\n  components: {\n    DtIconClose,\n    DtButton,\n    SrOnlyCloseButton,\n  },\n\n  mixins: [DtLocalizationMixin],\n\n  props: {\n    /**\n     * Hides the close button from the notice\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n  ],\n\n  computed: {\n    noticeActionListeners () {\n      return {\n        ...this.$listeners,\n\n        click: event => {\n          this.close();\n          this.$emit('click', event);\n        },\n      };\n    },\n\n    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n    },\n  },\n\n  mounted () {\n    if (!this.hideClose) {\n      this.lastFocusedElement = document.activeElement;\n    }\n  },\n\n  beforeDestroy () {\n    this.lastFocusedElement?.focus();\n  },\n\n  methods: {\n    close () {\n      this.$emit('close');\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtIconClose","DtButton","SrOnlyCloseButton","DtLocalizationMixin","event","_a"],"mappings":";;;;;AAqCA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,mBAAAC;AAAA,EACA;AAAA,EAEA,QAAA,CAAAC,CAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,wBAAA;AACA,aAAA;AAAA,QACA,GAAA,KAAA;AAAA,QAEA,OAAA,CAAAC,MAAA;AACA,eAAA,MAAA,GACA,KAAA,MAAA,SAAAA,CAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,aAAA,KAAA,KAAA,GAAA,uBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,IAAA,KAAA,cACA,KAAA,qBAAA,SAAA;AAAA,EAEA;AAAA,EAEA,gBAAA;;AACA,KAAAC,IAAA,KAAA,uBAAA,QAAAA,EAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,QAAA;AACA,WAAA,MAAA,OAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;"}

package/dist/vue2/lib/notice/notice.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("./notice-icon.cjs"),c=require("./notice-content.cjs"),s=require("./notice-action.cjs"),i=require("./notice-constants.cjs"),l=require("../../common/mixins/sr-only-close-button.cjs"),r=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),d={name:"DtNotice",components:{DtNoticeIcon:o.default,DtNoticeContent:c.default,DtNoticeAction:s.default},mixins:[l.default],props:{titleId:{type:String,default:void 0},contentId:{type:String,default:void 0},title:{type:String,default:""},role:{type:String,default:"status",validate(t){return i.NOTICE_ROLES.includes(t)}},important:{type:Boolean,default:!1},kind:{type:String,default:"base",validate(t){return i.NOTICE_KINDS.includes(t)}},closeButtonProps:{type:Object,default:()=>({})},hideClose:{type:Boolean,default:!1},hideIcon:{type:Boolean,default:!1},hideAction:{type:Boolean,default:!1},truncateText:{type:Boolean,default:!1}},emits:["close"],computed:{noticeClass(){return["d-notice",{error:"d-notice--error",info:"d-notice--info",success:"d-notice--success",warning:"d-notice--warning",base:"d-notice--base"}[this.kind],{"d-notice--important":this.important,"d-notice--truncate":this.truncateText}]}}};var a=function(){var e=this,n=e._self._c;return n("aside",{class:e.noticeClass,attrs:{"data-qa":"notice"}},[e.hideIcon?e._e():n("dt-notice-icon",{attrs:{kind:e.kind}},[e._t("icon")],2),n("dt-notice-content",e._g({attrs:{"title-id":e.titleId,"content-id":e.contentId,title:e.title,role:e.role},scopedSlots:e._u([{key:"titleOverride",fn:function(){return[e._t("titleOverride")]},proxy:!0}],null,!0)},e.$listeners),[e._t("default")],2),n("dt-notice-action",e._g({attrs:{"hide-action":e.hideAction,"hide-close":e.hideClose,"close-button-props":e.closeButtonProps,"visually-hidden-close":e.visuallyHiddenClose,"visually-hidden-close-label":e.visuallyHiddenCloseLabel}},e.$listeners),[e._t("action")],2)],1)},u=[],_=r.n(d,a,u);const f=_.exports;exports.default=f;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("./notice-icon.cjs"),c=require("./notice-content.cjs"),r=require("./notice-action.cjs"),i=require("./notice-constants.cjs"),s=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),a={name:"DtNotice",components:{DtNoticeIcon:o.default,DtNoticeContent:c.default,DtNoticeAction:r.default},props:{titleId:{type:String,default:void 0},contentId:{type:String,default:void 0},title:{type:String,default:""},role:{type:String,default:"status",validate(e){return i.NOTICE_ROLES.includes(e)}},important:{type:Boolean,default:!1},kind:{type:String,default:"base",validate(e){return i.NOTICE_KINDS.includes(e)}},hideClose:{type:Boolean,default:!1},hideIcon:{type:Boolean,default:!1},hideAction:{type:Boolean,default:!1},truncateText:{type:Boolean,default:!1}},emits:["close"],computed:{noticeClass(){return["d-notice",{error:"d-notice--error",info:"d-notice--info",success:"d-notice--success",warning:"d-notice--warning",base:"d-notice--base"}[this.kind],{"d-notice--important":this.important,"d-notice--truncate":this.truncateText}]}}};var d=function(){var t=this,n=t._self._c;return n("aside",{class:t.noticeClass,attrs:{"data-qa":"notice"}},[t.hideIcon?t._e():n("dt-notice-icon",{attrs:{kind:t.kind}},[t._t("icon")],2),n("dt-notice-content",t._g({attrs:{"title-id":t.titleId,"content-id":t.contentId,title:t.title,role:t.role},scopedSlots:t._u([{key:"titleOverride",fn:function(){return[t._t("titleOverride")]},proxy:!0}],null,!0)},t.$listeners),[t._t("default")],2),n("dt-notice-action",t._g({attrs:{"hide-action":t.hideAction,"hide-close":t.hideClose}},t.$listeners),[t._t("action")],2)],1)},l=[],u=s.n(a,d,l);const _=u.exports;exports.default=_;
 //# sourceMappingURL=notice.cjs.map

package/dist/vue2/lib/notice/notice.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"notice.cjs","sources":["../../../components/notice/notice.vue"],"sourcesContent":["<template>\n  <aside\n    :class=\"noticeClass\"\n    data-qa=\"notice\"\n  >\n    <dt-notice-icon\n      v-if=\"!hideIcon\"\n      :kind=\"kind\"\n    >\n      <!-- @slot Slot for custom icon -->\n      <slot name=\"icon\" />\n    </dt-notice-icon>\n    <dt-notice-content\n      :title-id=\"titleId\"\n      :content-id=\"contentId\"\n      :title=\"title\"\n      :role=\"role\"\n      v-on=\"$listeners\"\n    >\n      <template #titleOverride>\n        <!-- @slot Allows you to override the title, only use this if you need\n        to override with something other than text. Otherwise use the \"title\" prop. -->\n        <slot name=\"titleOverride\" />\n      </template>\n      <!-- @slot the main textual content of the notice -->\n      <slot />\n    </dt-notice-content>\n    <dt-notice-action\n      :hide-action=\"hideAction\"\n      :hide-close=\"hideClose\"\n      :close-button-props=\"closeButtonProps\"\n      :visually-hidden-close=\"visuallyHiddenClose\"\n      :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n      v-on=\"$listeners\"\n    >\n      <!-- @slot Enter a possible action for the user to take, such as a link to another page -->\n      <slot name=\"action\" />\n    </dt-notice-action>\n  </aside>\n</template>\n\n<script>\nimport DtNoticeIcon from './notice_icon.vue';\nimport DtNoticeContent from './notice_content.vue';\nimport DtNoticeAction from './notice_action.vue';\nimport { NOTICE_KINDS, NOTICE_ROLES } from './notice_constants';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\n\n/**\n * A notice is an informational and assistive message that appears inline with content.\n * @see https://dialtone.dialpad.com/components/notice.html\n */\nexport default {\n  name: 'DtNotice',\n\n  components: {\n    DtNoticeIcon,\n    DtNoticeContent,\n    DtNoticeAction,\n  },\n\n  mixins: [SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * Sets an ID on the title element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the title.\n     */\n    titleId: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Sets an ID on the content element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the content.\n     */\n    contentId: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Title header of the notice. This can be left blank to remove the title from the notice entirely.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Provides a role for the notice. 'status' is used to communicate a message. 'alert' is used to communicate an\n     * important message that does not contain any interactive elements. 'alertdialog' is used to communicate an\n     * important message that does contain interactive elements.\n     * @values alert, alertdialog, status\n     */\n    role: {\n      type: String,\n      default: 'status',\n      validate (role) {\n        return NOTICE_ROLES.includes(role);\n      },\n    },\n\n    /**\n     * Used in scenarios where the message needs to visually dominate the screen.\n     * This will also change the aria role from status to alert.\n     * @values true, false\n     */\n    important: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Severity level of the notice, sets the icon and background\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Props for the notice close button.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Hides the close button from the notice\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the icon from the notice\n     * @values true, false\n     */\n    hideIcon: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Truncates the content instead of wrapping.\n     * Used when the notice needs to have a fixed height.\n     * @values true, false\n     */\n    truncateText: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n  ],\n\n  computed: {\n    noticeClass () {\n      const noticeKinds = {\n        error: 'd-notice--error',\n        info: 'd-notice--info',\n        success: 'd-notice--success',\n        warning: 'd-notice--warning',\n        base: 'd-notice--base',\n      };\n      return [\n        'd-notice',\n        noticeKinds[this.kind],\n        { 'd-notice--important': this.important, 'd-notice--truncate': this.truncateText },\n      ];\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtNoticeIcon","DtNoticeContent","DtNoticeAction","SrOnlyCloseButtonMixin","role","NOTICE_ROLES","kind","NOTICE_KINDS"],"mappings":"0WAoDAA,EAAA,CACA,KAAA,WAEA,WAAA,CACA,aAAAC,EAAA,QACA,gBAAAC,EAAA,QACA,eAAAC,EAAA,OACA,EAEA,OAAA,CAAAC,EAAAA,OAAA,EAEA,MAAA,CAKA,QAAA,CACA,KAAA,OACA,QAAA,MACA,EAMA,UAAA,CACA,KAAA,OACA,QAAA,MACA,EAKA,MAAA,CACA,KAAA,OACA,QAAA,EACA,EAQA,KAAA,CACA,KAAA,OACA,QAAA,SACA,SAAAC,EAAA,CACA,OAAAC,EAAA,aAAA,SAAAD,CAAA,CACA,CACA,EAOA,UAAA,CACA,KAAA,QACA,QAAA,EACA,EAMA,KAAA,CACA,KAAA,OACA,QAAA,OACA,SAAAE,EAAA,CACA,OAAAC,EAAA,aAAA,SAAAD,CAAA,CACA,CACA,EAKA,iBAAA,CACA,KAAA,OACA,QAAA,KAAA,CAAA,EACA,EAMA,UAAA,CACA,KAAA,QACA,QAAA,EACA,EAMA,SAAA,CACA,KAAA,QACA,QAAA,EACA,EAMA,WAAA,CACA,KAAA,QACA,QAAA,EACA,EAOA,aAAA,CACA,KAAA,QACA,QAAA,EACA,CACA,EAEA,MAAA,CAMA,OACA,EAEA,SAAA,CACA,aAAA,CAQA,MAAA,CACA,WARA,CACA,MAAA,kBACA,KAAA,iBACA,QAAA,oBACA,QAAA,oBACA,KAAA,gBACA,EAGA,KAAA,IAAA,EACA,CAAA,sBAAA,KAAA,UAAA,qBAAA,KAAA,YAAA,CACA,CACA,CACA,CACA"}
+{"version":3,"file":"notice.cjs","sources":["../../../components/notice/notice.vue"],"sourcesContent":["<template>\n  <aside\n    :class=\"noticeClass\"\n    data-qa=\"notice\"\n  >\n    <dt-notice-icon\n      v-if=\"!hideIcon\"\n      :kind=\"kind\"\n    >\n      <!-- @slot Slot for custom icon -->\n      <slot name=\"icon\" />\n    </dt-notice-icon>\n    <dt-notice-content\n      :title-id=\"titleId\"\n      :content-id=\"contentId\"\n      :title=\"title\"\n      :role=\"role\"\n      v-on=\"$listeners\"\n    >\n      <template #titleOverride>\n        <!-- @slot Allows you to override the title, only use this if you need\n        to override with something other than text. Otherwise use the \"title\" prop. -->\n        <slot name=\"titleOverride\" />\n      </template>\n      <!-- @slot the main textual content of the notice -->\n      <slot />\n    </dt-notice-content>\n    <dt-notice-action\n      :hide-action=\"hideAction\"\n      :hide-close=\"hideClose\"\n      v-on=\"$listeners\"\n    >\n      <!-- @slot Enter a possible action for the user to take, such as a link to another page -->\n      <slot name=\"action\" />\n    </dt-notice-action>\n  </aside>\n</template>\n\n<script>\nimport DtNoticeIcon from './notice_icon.vue';\nimport DtNoticeContent from './notice_content.vue';\nimport DtNoticeAction from './notice_action.vue';\nimport { NOTICE_KINDS, NOTICE_ROLES } from './notice_constants';\n\n/**\n * A notice is an informational and assistive message that appears inline with content.\n * @see https://dialtone.dialpad.com/components/notice.html\n */\nexport default {\n  name: 'DtNotice',\n\n  components: {\n    DtNoticeIcon,\n    DtNoticeContent,\n    DtNoticeAction,\n  },\n\n  props: {\n    /**\n     * Sets an ID on the title element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the title.\n     */\n    titleId: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Sets an ID on the content element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the content.\n     */\n    contentId: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Title header of the notice. This can be left blank to remove the title from the notice entirely.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Provides a role for the notice. 'status' is used to communicate a message. 'alert' is used to communicate an\n     * important message that does not contain any interactive elements. 'alertdialog' is used to communicate an\n     * important message that does contain interactive elements.\n     * @values alert, alertdialog, status\n     */\n    role: {\n      type: String,\n      default: 'status',\n      validate (role) {\n        return NOTICE_ROLES.includes(role);\n      },\n    },\n\n    /**\n     * Used in scenarios where the message needs to visually dominate the screen.\n     * This will also change the aria role from status to alert.\n     * @values true, false\n     */\n    important: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Severity level of the notice, sets the icon and background\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Hides the close button from the notice\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the icon from the notice\n     * @values true, false\n     */\n    hideIcon: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Truncates the content instead of wrapping.\n     * Used when the notice needs to have a fixed height.\n     * @values true, false\n     */\n    truncateText: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n  ],\n\n  computed: {\n    noticeClass () {\n      const noticeKinds = {\n        error: 'd-notice--error',\n        info: 'd-notice--info',\n        success: 'd-notice--success',\n        warning: 'd-notice--warning',\n        base: 'd-notice--base',\n      };\n      return [\n        'd-notice',\n        noticeKinds[this.kind],\n        { 'd-notice--important': this.important, 'd-notice--truncate': this.truncateText },\n      ];\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtNoticeIcon","DtNoticeContent","DtNoticeAction","role","NOTICE_ROLES","kind","NOTICE_KINDS"],"mappings":"gTAgDAA,EAAA,CACA,KAAA,WAEA,WAAA,CACA,aAAAC,EAAA,QACA,gBAAAC,EAAA,QACA,eAAAC,EAAA,OACA,EAEA,MAAA,CAKA,QAAA,CACA,KAAA,OACA,QAAA,MACA,EAMA,UAAA,CACA,KAAA,OACA,QAAA,MACA,EAKA,MAAA,CACA,KAAA,OACA,QAAA,EACA,EAQA,KAAA,CACA,KAAA,OACA,QAAA,SACA,SAAAC,EAAA,CACA,OAAAC,EAAA,aAAA,SAAAD,CAAA,CACA,CACA,EAOA,UAAA,CACA,KAAA,QACA,QAAA,EACA,EAMA,KAAA,CACA,KAAA,OACA,QAAA,OACA,SAAAE,EAAA,CACA,OAAAC,EAAA,aAAA,SAAAD,CAAA,CACA,CACA,EAMA,UAAA,CACA,KAAA,QACA,QAAA,EACA,EAMA,SAAA,CACA,KAAA,QACA,QAAA,EACA,EAMA,WAAA,CACA,KAAA,QACA,QAAA,EACA,EAOA,aAAA,CACA,KAAA,QACA,QAAA,EACA,CACA,EAEA,MAAA,CAMA,OACA,EAEA,SAAA,CACA,aAAA,CAQA,MAAA,CACA,WARA,CACA,MAAA,kBACA,KAAA,iBACA,QAAA,oBACA,QAAA,oBACA,KAAA,gBACA,EAGA,KAAA,IAAA,EACA,CAAA,sBAAA,KAAA,UAAA,qBAAA,KAAA,YAAA,CACA,CACA,CACA,CACA"}

package/dist/vue2/lib/notice/notice.js

@@ -1,17 +1,15 @@
-import o from "./notice-icon.js";
-import i from "./notice-content.js";
-import s from "./notice-action.js";
-import { NOTICE_ROLES as r, NOTICE_KINDS as l } from "./notice-constants.js";
-import a from "../../common/mixins/sr-only-close-button.js";
-import { n as c } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
-const d = {
+import i from "./notice-icon.js";
+import o from "./notice-content.js";
+import r from "./notice-action.js";
+import { NOTICE_ROLES as c, NOTICE_KINDS as a } from "./notice-constants.js";
+import { n as d } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
+const s = {
   name: "DtNotice",
   components: {
-    DtNoticeIcon: o,
-    DtNoticeContent: i,
-    DtNoticeAction: s
+    DtNoticeIcon: i,
+    DtNoticeContent: o,
+    DtNoticeAction: r
   },
-  mixins: [a],
   props: {
     /**
      * Sets an ID on the title element of the component. Useful for aria-describedby
@@ -46,7 +44,7 @@ const d = {
       type: String,
       default: "status",
       validate(e) {
-        return r.includes(e);
+        return c.includes(e);
       }
     },
     /**
@@ -66,16 +64,9 @@ const d = {
       type: String,
       default: "base",
       validate(e) {
-        return l.includes(e);
+        return a.includes(e);
       }
     },
-    /**
-     * Props for the notice close button.
-     */
-    closeButtonProps: {
-      type: Object,
-      default: () => ({})
-    },
     /**
      * Hides the close button from the notice
      * @values true, false
@@ -134,17 +125,17 @@ const d = {
     }
   }
 };
-var u = function() {
+var l = function() {
   var t = this, n = t._self._c;
   return n("aside", { class: t.noticeClass, attrs: { "data-qa": "notice" } }, [t.hideIcon ? t._e() : n("dt-notice-icon", { attrs: { kind: t.kind } }, [t._t("icon")], 2), n("dt-notice-content", t._g({ attrs: { "title-id": t.titleId, "content-id": t.contentId, title: t.title, role: t.role }, scopedSlots: t._u([{ key: "titleOverride", fn: function() {
     return [t._t("titleOverride")];
-  }, proxy: !0 }], null, !0) }, t.$listeners), [t._t("default")], 2), n("dt-notice-action", t._g({ attrs: { "hide-action": t.hideAction, "hide-close": t.hideClose, "close-button-props": t.closeButtonProps, "visually-hidden-close": t.visuallyHiddenClose, "visually-hidden-close-label": t.visuallyHiddenCloseLabel } }, t.$listeners), [t._t("action")], 2)], 1);
-}, f = [], p = /* @__PURE__ */ c(
-  d,
-  u,
-  f
+  }, proxy: !0 }], null, !0) }, t.$listeners), [t._t("default")], 2), n("dt-notice-action", t._g({ attrs: { "hide-action": t.hideAction, "hide-close": t.hideClose } }, t.$listeners), [t._t("action")], 2)], 1);
+}, u = [], f = /* @__PURE__ */ d(
+  s,
+  l,
+  u
 );
-const I = p.exports;
+const I = f.exports;
 export {
   I as default
 };

package/dist/vue2/lib/notice/notice.js.map

@@ -1 +1 @@
-{"version":3,"file":"notice.js","sources":["../../../components/notice/notice.vue"],"sourcesContent":["<template>\n  <aside\n    :class=\"noticeClass\"\n    data-qa=\"notice\"\n  >\n    <dt-notice-icon\n      v-if=\"!hideIcon\"\n      :kind=\"kind\"\n    >\n      <!-- @slot Slot for custom icon -->\n      <slot name=\"icon\" />\n    </dt-notice-icon>\n    <dt-notice-content\n      :title-id=\"titleId\"\n      :content-id=\"contentId\"\n      :title=\"title\"\n      :role=\"role\"\n      v-on=\"$listeners\"\n    >\n      <template #titleOverride>\n        <!-- @slot Allows you to override the title, only use this if you need\n        to override with something other than text. Otherwise use the \"title\" prop. -->\n        <slot name=\"titleOverride\" />\n      </template>\n      <!-- @slot the main textual content of the notice -->\n      <slot />\n    </dt-notice-content>\n    <dt-notice-action\n      :hide-action=\"hideAction\"\n      :hide-close=\"hideClose\"\n      :close-button-props=\"closeButtonProps\"\n      :visually-hidden-close=\"visuallyHiddenClose\"\n      :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n      v-on=\"$listeners\"\n    >\n      <!-- @slot Enter a possible action for the user to take, such as a link to another page -->\n      <slot name=\"action\" />\n    </dt-notice-action>\n  </aside>\n</template>\n\n<script>\nimport DtNoticeIcon from './notice_icon.vue';\nimport DtNoticeContent from './notice_content.vue';\nimport DtNoticeAction from './notice_action.vue';\nimport { NOTICE_KINDS, NOTICE_ROLES } from './notice_constants';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\n\n/**\n * A notice is an informational and assistive message that appears inline with content.\n * @see https://dialtone.dialpad.com/components/notice.html\n */\nexport default {\n  name: 'DtNotice',\n\n  components: {\n    DtNoticeIcon,\n    DtNoticeContent,\n    DtNoticeAction,\n  },\n\n  mixins: [SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * Sets an ID on the title element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the title.\n     */\n    titleId: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Sets an ID on the content element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the content.\n     */\n    contentId: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Title header of the notice. This can be left blank to remove the title from the notice entirely.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Provides a role for the notice. 'status' is used to communicate a message. 'alert' is used to communicate an\n     * important message that does not contain any interactive elements. 'alertdialog' is used to communicate an\n     * important message that does contain interactive elements.\n     * @values alert, alertdialog, status\n     */\n    role: {\n      type: String,\n      default: 'status',\n      validate (role) {\n        return NOTICE_ROLES.includes(role);\n      },\n    },\n\n    /**\n     * Used in scenarios where the message needs to visually dominate the screen.\n     * This will also change the aria role from status to alert.\n     * @values true, false\n     */\n    important: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Severity level of the notice, sets the icon and background\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Props for the notice close button.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Hides the close button from the notice\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the icon from the notice\n     * @values true, false\n     */\n    hideIcon: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Truncates the content instead of wrapping.\n     * Used when the notice needs to have a fixed height.\n     * @values true, false\n     */\n    truncateText: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n  ],\n\n  computed: {\n    noticeClass () {\n      const noticeKinds = {\n        error: 'd-notice--error',\n        info: 'd-notice--info',\n        success: 'd-notice--success',\n        warning: 'd-notice--warning',\n        base: 'd-notice--base',\n      };\n      return [\n        'd-notice',\n        noticeKinds[this.kind],\n        { 'd-notice--important': this.important, 'd-notice--truncate': this.truncateText },\n      ];\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtNoticeIcon","DtNoticeContent","DtNoticeAction","SrOnlyCloseButtonMixin","role","NOTICE_ROLES","kind","NOTICE_KINDS"],"mappings":";;;;;;AAoDA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,cAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,gBAAAC;AAAA,EACA;AAAA,EAEA,QAAA,CAAAC,CAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAAC,GAAA;AACA,eAAAC,EAAA,SAAAD,CAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAAE,GAAA;AACA,eAAAC,EAAA,SAAAD,CAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,cAAA;AAQA,aAAA;AAAA,QACA;AAAA,QARA;AAAA,UACA,OAAA;AAAA,UACA,MAAA;AAAA,UACA,SAAA;AAAA,UACA,SAAA;AAAA,UACA,MAAA;AAAA,QACA,EAGA,KAAA,IAAA;AAAA,QACA,EAAA,uBAAA,KAAA,WAAA,sBAAA,KAAA,aAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;"}
+{"version":3,"file":"notice.js","sources":["../../../components/notice/notice.vue"],"sourcesContent":["<template>\n  <aside\n    :class=\"noticeClass\"\n    data-qa=\"notice\"\n  >\n    <dt-notice-icon\n      v-if=\"!hideIcon\"\n      :kind=\"kind\"\n    >\n      <!-- @slot Slot for custom icon -->\n      <slot name=\"icon\" />\n    </dt-notice-icon>\n    <dt-notice-content\n      :title-id=\"titleId\"\n      :content-id=\"contentId\"\n      :title=\"title\"\n      :role=\"role\"\n      v-on=\"$listeners\"\n    >\n      <template #titleOverride>\n        <!-- @slot Allows you to override the title, only use this if you need\n        to override with something other than text. Otherwise use the \"title\" prop. -->\n        <slot name=\"titleOverride\" />\n      </template>\n      <!-- @slot the main textual content of the notice -->\n      <slot />\n    </dt-notice-content>\n    <dt-notice-action\n      :hide-action=\"hideAction\"\n      :hide-close=\"hideClose\"\n      v-on=\"$listeners\"\n    >\n      <!-- @slot Enter a possible action for the user to take, such as a link to another page -->\n      <slot name=\"action\" />\n    </dt-notice-action>\n  </aside>\n</template>\n\n<script>\nimport DtNoticeIcon from './notice_icon.vue';\nimport DtNoticeContent from './notice_content.vue';\nimport DtNoticeAction from './notice_action.vue';\nimport { NOTICE_KINDS, NOTICE_ROLES } from './notice_constants';\n\n/**\n * A notice is an informational and assistive message that appears inline with content.\n * @see https://dialtone.dialpad.com/components/notice.html\n */\nexport default {\n  name: 'DtNotice',\n\n  components: {\n    DtNoticeIcon,\n    DtNoticeContent,\n    DtNoticeAction,\n  },\n\n  props: {\n    /**\n     * Sets an ID on the title element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the title.\n     */\n    titleId: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Sets an ID on the content element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the content.\n     */\n    contentId: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Title header of the notice. This can be left blank to remove the title from the notice entirely.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Provides a role for the notice. 'status' is used to communicate a message. 'alert' is used to communicate an\n     * important message that does not contain any interactive elements. 'alertdialog' is used to communicate an\n     * important message that does contain interactive elements.\n     * @values alert, alertdialog, status\n     */\n    role: {\n      type: String,\n      default: 'status',\n      validate (role) {\n        return NOTICE_ROLES.includes(role);\n      },\n    },\n\n    /**\n     * Used in scenarios where the message needs to visually dominate the screen.\n     * This will also change the aria role from status to alert.\n     * @values true, false\n     */\n    important: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Severity level of the notice, sets the icon and background\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Hides the close button from the notice\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the icon from the notice\n     * @values true, false\n     */\n    hideIcon: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Truncates the content instead of wrapping.\n     * Used when the notice needs to have a fixed height.\n     * @values true, false\n     */\n    truncateText: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n  ],\n\n  computed: {\n    noticeClass () {\n      const noticeKinds = {\n        error: 'd-notice--error',\n        info: 'd-notice--info',\n        success: 'd-notice--success',\n        warning: 'd-notice--warning',\n        base: 'd-notice--base',\n      };\n      return [\n        'd-notice',\n        noticeKinds[this.kind],\n        { 'd-notice--important': this.important, 'd-notice--truncate': this.truncateText },\n      ];\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtNoticeIcon","DtNoticeContent","DtNoticeAction","role","NOTICE_ROLES","kind","NOTICE_KINDS"],"mappings":";;;;;AAgDA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,cAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,gBAAAC;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAAC,GAAA;AACA,eAAAC,EAAA,SAAAD,CAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAAE,GAAA;AACA,eAAAC,EAAA,SAAAD,CAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,cAAA;AAQA,aAAA;AAAA,QACA;AAAA,QARA;AAAA,UACA,OAAA;AAAA,UACA,MAAA;AAAA,UACA,SAAA;AAAA,UACA,SAAA;AAAA,UACA,MAAA;AAAA,QACA,EAGA,KAAA,IAAA;AAAA,QACA,EAAA,uBAAA,KAAA,WAAA,sBAAA,KAAA,aAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;"}

package/dist/vue2/lib/pagination/pagination.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("@dialpad/dialtone-icons/vue2"),c=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),l=require("../button/button.cjs"),g={name:"DtPagination",components:{DtButton:l.default,DtIconChevronLeft:o.DtIconChevronLeft,DtIconChevronRight:o.DtIconChevronRight,DtIconMoreHorizontal:o.DtIconMoreHorizontal},props:{ariaLabel:{type:String,required:!0},totalPages:{type:Number,required:!0},prevAriaLabel:{type:String,required:!0},nextAriaLabel:{type:String,required:!0},pageNumberAriaLabel:{type:Function,required:!0},activePage:{type:Number,default:1},maxVisible:{type:Number,default:5},hideEdges:{type:Boolean,default:!1}},emits:["change"],data(){return{currentPage:this.activePage}},computed:{isFirstPage(){return this.currentPage===1},isLastPage(){return this.currentPage===this.totalPages},pages(){if(this.maxVisible===0)return[];if(this.totalPages<=this.maxVisible)return this.range(1,this.totalPages);let r=this.maxVisible-1,t=this.totalPages-r+1;if(this.hideEdges&&(r=r+1,t=t-1),this.currentPage<r){const n=[...this.range(1,r),"..."];return this.hideEdges||n.push(this.totalPages),n}if(this.currentPage>t){const n=["...",...this.range(t,this.totalPages)];return this.hideEdges||n.unshift(1),n}const a=this.maxVisible-(3-this.maxVisible%2),e=Math.floor(a/2);let i=this.currentPage-e,s=this.currentPage+e;this.hideEdges&&(i=i-1,s=s+1);const u=["...",...this.range(i,s),"..."];return this.hideEdges?u:[1,...u,this.totalPages]}},watch:{activePage(){this.currentPage=this.activePage}},methods:{range(r,t){const a=[];r=r>0?r:1;for(let e=r;e<=t;e++)a.push(e);return a},changePage(r){this.currentPage=r,this.$emit("change",this.currentPage)}}};var d=function(){var t=this,a=t._self._c;return a("nav",{staticClass:"d-pagination",attrs:{"aria-label":t.ariaLabel}},[a("dt-button",{staticClass:"d-pagination__button",attrs:{"data-qa":"dt-pagination-prev","aria-label":t.prevAriaLabel,kind:"muted",importance:"clear",disabled:t.isFirstPage},on:{click:function(e){return t.changePage(t.currentPage-1)}},scopedSlots:t._u([{key:"icon",fn:function(){return[a("dt-icon-chevron-left",{attrs:{size:"300"}})]},proxy:!0}])}),t._l(t.pages,function(e,i){return a("div",{key:`page-${e}-${i}`,class:{"d-pagination__separator":isNaN(Number(e))}},[isNaN(Number(e))?a("div",{staticClass:"d-pagination__separator-icon",attrs:{"data-qa":"dt-pagination-separator"}},[a("dt-icon-more-horizontal",{attrs:{size:"300"}})],1):a("dt-button",{attrs:{"aria-label":t.pageNumberAriaLabel(e),kind:t.currentPage===e?"default":"muted",importance:t.currentPage===e?"primary":"clear","label-class":""},on:{click:function(s){return t.changePage(e)}}},[t._v(" "+t._s(e)+" ")])],1)}),a("dt-button",{staticClass:"d-pagination__button",attrs:{"data-qa":"dt-pagination-next","aria-label":t.nextAriaLabel,disabled:t.isLastPage,kind:"muted",importance:"clear"},on:{click:function(e){return t.changePage(t.currentPage+1)}},scopedSlots:t._u([{key:"icon",fn:function(){return[a("dt-icon-chevron-right",{attrs:{size:"300"}})]},proxy:!0}])})],2)},h=[],p=c.n(g,d,h);const b=p.exports;exports.default=b;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("@dialpad/dialtone-icons/vue2"),u=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),l=require("../button/button.cjs"),g=require("../../common/mixins/localization.cjs"),h={name:"DtPagination",components:{DtButton:l.default,DtIconChevronLeft:o.DtIconChevronLeft,DtIconChevronRight:o.DtIconChevronRight,DtIconMoreHorizontal:o.DtIconMoreHorizontal},mixins:[g.default],props:{ariaLabel:{type:String,required:!0},totalPages:{type:Number,required:!0},activePage:{type:Number,default:1},maxVisible:{type:Number,default:5},hideEdges:{type:Boolean,default:!1}},emits:["change"],data(){return{currentPage:this.activePage}},computed:{isFirstPage(){return this.currentPage===1},isLastPage(){return this.currentPage===this.totalPages},pages(){if(this.maxVisible===0)return[];if(this.totalPages<=this.maxVisible)return this.range(1,this.totalPages);let e=this.maxVisible-1,t=this.totalPages-e+1;if(this.hideEdges&&(e=e+1,t=t-1),this.currentPage<e){const n=[...this.range(1,e),"..."];return this.hideEdges||n.push(this.totalPages),n}if(this.currentPage>t){const n=["...",...this.range(t,this.totalPages)];return this.hideEdges||n.unshift(1),n}const i=this.maxVisible-(3-this.maxVisible%2),a=Math.floor(i/2);let r=this.currentPage-a,s=this.currentPage+a;this.hideEdges&&(r=r-1,s=s+1);const c=["...",...this.range(r,s),"..."];return this.hideEdges?c:[1,...c,this.totalPages]},prevAriaLabel(){return this.isFirstPage?this.i18n.$t("DIALTONE_PAGINATION_FIRST_PAGE"):this.i18n.$t("DIALTONE_PAGINATION_PREVIOUS_PAGE")},nextAriaLabel(){return this.isLastPage?this.i18n.$t("DIALTONE_PAGINATION_LAST_PAGE"):this.i18n.$t("DIALTONE_PAGINATION_NEXT_PAGE")},pageNumberAriaLabel(){return e=>e===this.totalPages?`${this.i18n.$t("DIALTONE_PAGINATION_LAST_PAGE")} ${e}`:`${this.i18n.$t("DIALTONE_PAGINATION_PAGE_NUMBER",{page:e})}`}},watch:{activePage(){this.currentPage=this.activePage}},methods:{range(e,t){const i=[];e=e>0?e:1;for(let a=e;a<=t;a++)i.push(a);return i},changePage(e){this.currentPage=e,this.$emit("change",this.currentPage)}}};var d=function(){var t=this,i=t._self._c;return i("nav",{staticClass:"d-pagination",attrs:{"aria-label":t.ariaLabel}},[i("dt-button",{staticClass:"d-pagination__button",attrs:{"data-qa":"dt-pagination-prev","aria-label":t.prevAriaLabel,kind:"muted",importance:"clear",disabled:t.isFirstPage},on:{click:function(a){return t.changePage(t.currentPage-1)}},scopedSlots:t._u([{key:"icon",fn:function(){return[i("dt-icon-chevron-left",{attrs:{size:"300"}})]},proxy:!0}])}),t._l(t.pages,function(a,r){return i("div",{key:`page-${a}-${r}`,class:{"d-pagination__separator":isNaN(Number(a))}},[isNaN(Number(a))?i("div",{staticClass:"d-pagination__separator-icon",attrs:{"data-qa":"dt-pagination-separator"}},[i("dt-icon-more-horizontal",{attrs:{size:"300"}})],1):i("dt-button",{attrs:{"aria-label":t.pageNumberAriaLabel(a),kind:t.currentPage===a?"default":"muted",importance:t.currentPage===a?"primary":"clear","label-class":""},on:{click:function(s){return t.changePage(a)}}},[t._v(" "+t._s(a)+" ")])],1)}),i("dt-button",{staticClass:"d-pagination__button",attrs:{"data-qa":"dt-pagination-next","aria-label":t.nextAriaLabel,disabled:t.isLastPage,kind:"muted",importance:"clear"},on:{click:function(a){return t.changePage(t.currentPage+1)}},scopedSlots:t._u([{key:"icon",fn:function(){return[i("dt-icon-chevron-right",{attrs:{size:"300"}})]},proxy:!0}])})],2)},_=[],P=u.n(h,d,_);const b=P.exports;exports.default=b;
 //# sourceMappingURL=pagination.cjs.map

package/dist/vue2/lib/pagination/pagination.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.cjs","sources":["../../../components/pagination/pagination.vue"],"sourcesContent":["<template>\n  <nav\n    :aria-label=\"ariaLabel\"\n    class=\"d-pagination\"\n  >\n    <dt-button\n      class=\"d-pagination__button\"\n      data-qa=\"dt-pagination-prev\"\n      :aria-label=\"prevAriaLabel\"\n      kind=\"muted\"\n      importance=\"clear\"\n      :disabled=\"isFirstPage\"\n      @click=\"changePage(currentPage - 1)\"\n    >\n      <template #icon>\n        <dt-icon-chevron-left\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n    <div\n      v-for=\"(page, index) in pages\"\n      :key=\"`page-${page}-${index}`\"\n      :class=\"{ 'd-pagination__separator': isNaN(Number(page)) }\"\n    >\n      <!-- eslint-disable vue/no-bare-strings-in-template -->\n      <div\n        v-if=\"isNaN(Number(page))\"\n        class=\"d-pagination__separator-icon\"\n        data-qa=\"dt-pagination-separator\"\n      >\n        <dt-icon-more-horizontal\n          size=\"300\"\n        />\n        <!-- … -->\n      </div>\n      <!-- eslint-enable vue/no-bare-strings-in-template -->\n      <dt-button\n        v-else\n        :aria-label=\"pageNumberAriaLabel(page)\"\n        :kind=\"currentPage === page ? 'default' : 'muted'\"\n        :importance=\"currentPage === page ? 'primary' : 'clear'\"\n        label-class=\"\"\n        @click=\"changePage(page)\"\n      >\n        {{ page }}\n      </dt-button>\n    </div>\n    <dt-button\n      class=\"d-pagination__button\"\n      data-qa=\"dt-pagination-next\"\n      :aria-label=\"nextAriaLabel\"\n      :disabled=\"isLastPage\"\n      kind=\"muted\"\n      importance=\"clear\"\n      @click=\"changePage(currentPage + 1)\"\n    >\n      <template #icon>\n        <dt-icon-chevron-right\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n  </nav>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIconChevronLeft, DtIconChevronRight, DtIconMoreHorizontal } from '@dialpad/dialtone-icons/vue2';\n\n/**\n * Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.\n * @see https://dialtone.dialpad.com/components/pagination.html\n */\nexport default {\n  name: 'DtPagination',\n\n  components: {\n    DtButton,\n    DtIconChevronLeft,\n    DtIconChevronRight,\n    DtIconMoreHorizontal,\n  },\n\n  props: {\n    /**\n     * Descriptive label for the pagination content.\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * The total number of the pages\n     */\n    totalPages: {\n      type: Number,\n      required: true,\n    },\n\n    /**\n     * Descriptive label for the previous button.\n     */\n    prevAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Descriptive label for the next button.\n     */\n    nextAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * A method that will be called to get the aria label of each page.\n     */\n    pageNumberAriaLabel: {\n      type: Function,\n      required: true,\n    },\n\n    /**\n     * The active current page in the list of pages, defaults to the first page\n     */\n    activePage: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Determines the max pages to be shown in the list. Using an odd number is recommended.\n     * If an even number is given, then it will be rounded down to the nearest odd number to always\n     * keep current page in the middle when current page is in the mid-range.\n     */\n    maxVisible: {\n      type: Number,\n      default: 5,\n    },\n\n    /**\n     * Sometimes you may need to hide start and end page number buttons when moving in between.\n     * This prop will be used to hide the first and last page buttons when not near the edges.\n     * This is useful when your backend does not support offset and you can only use cursor based pagination.\n     */\n    hideEdges: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Page change event\n     *\n     * @event change\n     * @type {Number}\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      currentPage: this.activePage,\n    };\n  },\n\n  computed: {\n    isFirstPage () {\n      return this.currentPage === 1;\n    },\n\n    isLastPage () {\n      return this.currentPage === this.totalPages;\n    },\n\n    pages () {\n      if (this.maxVisible === 0) {\n        return [];\n      }\n      if (this.totalPages <= this.maxVisible) {\n        return this.range(1, this.totalPages);\n      }\n\n      let start = this.maxVisible - 1;\n      let end = this.totalPages - start + 1;\n\n      // if hideEdges is true, modify the start and\n      // end to account for the hidden pages\n      if (this.hideEdges) {\n        start = start + 1;\n        end = end - 1;\n      }\n\n      if (this.currentPage < start) {\n        const pages = [...this.range(1, start), '...'];\n        if (!this.hideEdges) {\n          // add last page to the end\n          pages.push(this.totalPages);\n        }\n        return pages;\n      }\n\n      if (this.currentPage > end) {\n        const pages = ['...', ...this.range(end, this.totalPages)];\n        if (!this.hideEdges) {\n          // add first page to the beginning\n          pages.unshift(1);\n        }\n        return pages;\n      }\n\n      // rounding to the nearest odd according to the maxlength to always show the page number in the middle.\n      const total = this.maxVisible - (3 - this.maxVisible % 2);\n      const centerIndex = Math.floor(total / 2);\n      let left = this.currentPage - centerIndex;\n      let right = this.currentPage + centerIndex;\n\n      // if hideEdge is true, modify the left and right to account for the hidden pages\n      if (this.hideEdges) {\n        left = left - 1;\n        right = right + 1;\n      }\n\n      const pages = ['...', ...this.range(left, right), '...'];\n      if (!this.hideEdges) {\n        return [1, ...pages, this.totalPages];\n      }\n      return pages;\n    },\n  },\n\n  watch: {\n    activePage () {\n      this.currentPage = this.activePage;\n    },\n  },\n\n  methods: {\n    range (from, to) {\n      const range = [];\n      from = from > 0 ? from : 1;\n      for (let i = from; i <= to; i++) {\n        range.push(i);\n      }\n      return range;\n    },\n\n    changePage (page) {\n      this.currentPage = page;\n      this.$emit('change', this.currentPage);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtIconChevronLeft","DtIconChevronRight","DtIconMoreHorizontal","start","end","pages","total","centerIndex","left","right","from","to","range","i","page"],"mappings":"sPA0EAA,EAAA,CACA,KAAA,eAEA,WAAA,CACA,SAAAC,EAAA,QACA,kBAAAC,EAAA,kBACA,mBAAAC,EAAA,mBACA,qBAAAC,EAAA,oBACA,EAEA,MAAA,CAIA,UAAA,CACA,KAAA,OACA,SAAA,EACA,EAKA,WAAA,CACA,KAAA,OACA,SAAA,EACA,EAKA,cAAA,CACA,KAAA,OACA,SAAA,EACA,EAKA,cAAA,CACA,KAAA,OACA,SAAA,EACA,EAKA,oBAAA,CACA,KAAA,SACA,SAAA,EACA,EAKA,WAAA,CACA,KAAA,OACA,QAAA,CACA,EAOA,WAAA,CACA,KAAA,OACA,QAAA,CACA,EAOA,UAAA,CACA,KAAA,QACA,QAAA,EACA,CACA,EAEA,MAAA,CAOA,QACA,EAEA,MAAA,CACA,MAAA,CACA,YAAA,KAAA,UACA,CACA,EAEA,SAAA,CACA,aAAA,CACA,OAAA,KAAA,cAAA,CACA,EAEA,YAAA,CACA,OAAA,KAAA,cAAA,KAAA,UACA,EAEA,OAAA,CACA,GAAA,KAAA,aAAA,EACA,MAAA,GAEA,GAAA,KAAA,YAAA,KAAA,WACA,OAAA,KAAA,MAAA,EAAA,KAAA,UAAA,EAGA,IAAAC,EAAA,KAAA,WAAA,EACAC,EAAA,KAAA,WAAAD,EAAA,EASA,GALA,KAAA,YACAA,EAAAA,EAAA,EACAC,EAAAA,EAAA,GAGA,KAAA,YAAAD,EAAA,CACA,MAAAE,EAAA,CAAA,GAAA,KAAA,MAAA,EAAAF,CAAA,EAAA,KAAA,EACA,OAAA,KAAA,WAEAE,EAAA,KAAA,KAAA,UAAA,EAEAA,CACA,CAEA,GAAA,KAAA,YAAAD,EAAA,CACA,MAAAC,EAAA,CAAA,MAAA,GAAA,KAAA,MAAAD,EAAA,KAAA,UAAA,CAAA,EACA,OAAA,KAAA,WAEAC,EAAA,QAAA,CAAA,EAEAA,CACA,CAGA,MAAAC,EAAA,KAAA,YAAA,EAAA,KAAA,WAAA,GACAC,EAAA,KAAA,MAAAD,EAAA,CAAA,EACA,IAAAE,EAAA,KAAA,YAAAD,EACAE,EAAA,KAAA,YAAAF,EAGA,KAAA,YACAC,EAAAA,EAAA,EACAC,EAAAA,EAAA,GAGA,MAAAJ,EAAA,CAAA,MAAA,GAAA,KAAA,MAAAG,EAAAC,CAAA,EAAA,KAAA,EACA,OAAA,KAAA,UAGAJ,EAFA,CAAA,EAAA,GAAAA,EAAA,KAAA,UAAA,CAGA,CACA,EAEA,MAAA,CACA,YAAA,CACA,KAAA,YAAA,KAAA,UACA,CACA,EAEA,QAAA,CACA,MAAAK,EAAAC,EAAA,CACA,MAAAC,EAAA,CAAA,EACAF,EAAAA,EAAA,EAAAA,EAAA,EACA,QAAAG,EAAAH,EAAAG,GAAAF,EAAAE,IACAD,EAAA,KAAAC,CAAA,EAEA,OAAAD,CACA,EAEA,WAAAE,EAAA,CACA,KAAA,YAAAA,EACA,KAAA,MAAA,SAAA,KAAA,WAAA,CACA,CACA,CACA"}
+{"version":3,"file":"pagination.cjs","sources":["../../../components/pagination/pagination.vue"],"sourcesContent":["<template>\n  <nav\n    :aria-label=\"ariaLabel\"\n    class=\"d-pagination\"\n  >\n    <dt-button\n      class=\"d-pagination__button\"\n      data-qa=\"dt-pagination-prev\"\n      :aria-label=\"prevAriaLabel\"\n      kind=\"muted\"\n      importance=\"clear\"\n      :disabled=\"isFirstPage\"\n      @click=\"changePage(currentPage - 1)\"\n    >\n      <template #icon>\n        <dt-icon-chevron-left\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n    <div\n      v-for=\"(page, index) in pages\"\n      :key=\"`page-${page}-${index}`\"\n      :class=\"{ 'd-pagination__separator': isNaN(Number(page)) }\"\n    >\n      <!-- eslint-disable vue/no-bare-strings-in-template -->\n      <div\n        v-if=\"isNaN(Number(page))\"\n        class=\"d-pagination__separator-icon\"\n        data-qa=\"dt-pagination-separator\"\n      >\n        <dt-icon-more-horizontal\n          size=\"300\"\n        />\n        <!-- … -->\n      </div>\n      <dt-button\n        v-else\n        :aria-label=\"pageNumberAriaLabel(page)\"\n        :kind=\"currentPage === page ? 'default' : 'muted'\"\n        :importance=\"currentPage === page ? 'primary' : 'clear'\"\n        label-class=\"\"\n        @click=\"changePage(page)\"\n      >\n        {{ page }}\n      </dt-button>\n    </div>\n    <dt-button\n      class=\"d-pagination__button\"\n      data-qa=\"dt-pagination-next\"\n      :aria-label=\"nextAriaLabel\"\n      :disabled=\"isLastPage\"\n      kind=\"muted\"\n      importance=\"clear\"\n      @click=\"changePage(currentPage + 1)\"\n    >\n      <template #icon>\n        <dt-icon-chevron-right\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n  </nav>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIconChevronLeft, DtIconChevronRight, DtIconMoreHorizontal } from '@dialpad/dialtone-icons/vue2';\nimport { DtLocalizationMixin } from '@/common/mixins';\n\n/**\n * Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.\n * @see https://dialtone.dialpad.com/components/pagination.html\n */\nexport default {\n  name: 'DtPagination',\n\n  components: {\n    DtButton,\n    DtIconChevronLeft,\n    DtIconChevronRight,\n    DtIconMoreHorizontal,\n  },\n\n  mixins: [DtLocalizationMixin],\n\n  props: {\n    /**\n     * Descriptive label for the pagination content.\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * The total number of the pages\n     */\n    totalPages: {\n      type: Number,\n      required: true,\n    },\n\n    /**\n     * The active current page in the list of pages, defaults to the first page\n     */\n    activePage: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Determines the max pages to be shown in the list. Using an odd number is recommended.\n     * If an even number is given, then it will be rounded down to the nearest odd number to always\n     * keep current page in the middle when current page is in the mid-range.\n     */\n    maxVisible: {\n      type: Number,\n      default: 5,\n    },\n\n    /**\n     * Sometimes you may need to hide start and end page number buttons when moving in between.\n     * This prop will be used to hide the first and last page buttons when not near the edges.\n     * This is useful when your backend does not support offset and you can only use cursor based pagination.\n     */\n    hideEdges: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Page change event\n     *\n     * @event change\n     * @type {Number}\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      currentPage: this.activePage,\n    };\n  },\n\n  computed: {\n    isFirstPage () {\n      return this.currentPage === 1;\n    },\n\n    isLastPage () {\n      return this.currentPage === this.totalPages;\n    },\n\n    // eslint-disable-next-line complexity\n    pages () {\n      if (this.maxVisible === 0) {\n        return [];\n      }\n      if (this.totalPages <= this.maxVisible) {\n        return this.range(1, this.totalPages);\n      }\n\n      let start = this.maxVisible - 1;\n      let end = this.totalPages - start + 1;\n\n      // if hideEdges is true, modify the start and\n      // end to account for the hidden pages\n      if (this.hideEdges) {\n        start = start + 1;\n        end = end - 1;\n      }\n\n      if (this.currentPage < start) {\n        const pages = [...this.range(1, start), '...'];\n        if (!this.hideEdges) {\n          // add last page to the end\n          pages.push(this.totalPages);\n        }\n        return pages;\n      }\n\n      if (this.currentPage > end) {\n        const pages = ['...', ...this.range(end, this.totalPages)];\n        if (!this.hideEdges) {\n          // add first page to the beginning\n          pages.unshift(1);\n        }\n        return pages;\n      }\n\n      // rounding to the nearest odd according to the maxlength to always show the page number in the middle.\n      const total = this.maxVisible - (3 - this.maxVisible % 2);\n      const centerIndex = Math.floor(total / 2);\n      let left = this.currentPage - centerIndex;\n      let right = this.currentPage + centerIndex;\n\n      // if hideEdge is true, modify the left and right to account for the hidden pages\n      if (this.hideEdges) {\n        left = left - 1;\n        right = right + 1;\n      }\n\n      const pages = ['...', ...this.range(left, right), '...'];\n      if (!this.hideEdges) {\n        return [1, ...pages, this.totalPages];\n      }\n      return pages;\n    },\n\n    prevAriaLabel () {\n      return this.isFirstPage ? this.i18n.$t('DIALTONE_PAGINATION_FIRST_PAGE') : this.i18n.$t('DIALTONE_PAGINATION_PREVIOUS_PAGE');\n    },\n\n    nextAriaLabel () {\n      return this.isLastPage ? this.i18n.$t('DIALTONE_PAGINATION_LAST_PAGE') : this.i18n.$t('DIALTONE_PAGINATION_NEXT_PAGE');\n    },\n\n    pageNumberAriaLabel () {\n      return (page) => {\n        return page === this.totalPages ? `${this.i18n.$t('DIALTONE_PAGINATION_LAST_PAGE')} ${page}` : `${this.i18n.$t('DIALTONE_PAGINATION_PAGE_NUMBER', { page })}`;\n      };\n    },\n  },\n\n  watch: {\n    activePage () {\n      this.currentPage = this.activePage;\n    },\n  },\n\n  methods: {\n    range (from, to) {\n      const range = [];\n      from = from > 0 ? from : 1;\n      for (let i = from; i <= to; i++) {\n        range.push(i);\n      }\n      return range;\n    },\n\n    changePage (page) {\n      this.currentPage = page;\n      this.$emit('change', this.currentPage);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtIconChevronLeft","DtIconChevronRight","DtIconMoreHorizontal","DtLocalizationMixin","start","end","pages","total","centerIndex","left","right","page","from","to","range","i"],"mappings":"wSA0EAA,EAAA,CACA,KAAA,eAEA,WAAA,CACA,SAAAC,EAAA,QACA,kBAAAC,EAAA,kBACA,mBAAAC,EAAA,mBACA,qBAAAC,EAAA,oBACA,EAEA,OAAA,CAAAC,EAAAA,OAAA,EAEA,MAAA,CAIA,UAAA,CACA,KAAA,OACA,SAAA,EACA,EAKA,WAAA,CACA,KAAA,OACA,SAAA,EACA,EAKA,WAAA,CACA,KAAA,OACA,QAAA,CACA,EAOA,WAAA,CACA,KAAA,OACA,QAAA,CACA,EAOA,UAAA,CACA,KAAA,QACA,QAAA,EACA,CACA,EAEA,MAAA,CAOA,QACA,EAEA,MAAA,CACA,MAAA,CACA,YAAA,KAAA,UACA,CACA,EAEA,SAAA,CACA,aAAA,CACA,OAAA,KAAA,cAAA,CACA,EAEA,YAAA,CACA,OAAA,KAAA,cAAA,KAAA,UACA,EAGA,OAAA,CACA,GAAA,KAAA,aAAA,EACA,MAAA,GAEA,GAAA,KAAA,YAAA,KAAA,WACA,OAAA,KAAA,MAAA,EAAA,KAAA,UAAA,EAGA,IAAAC,EAAA,KAAA,WAAA,EACAC,EAAA,KAAA,WAAAD,EAAA,EASA,GALA,KAAA,YACAA,EAAAA,EAAA,EACAC,EAAAA,EAAA,GAGA,KAAA,YAAAD,EAAA,CACA,MAAAE,EAAA,CAAA,GAAA,KAAA,MAAA,EAAAF,CAAA,EAAA,KAAA,EACA,OAAA,KAAA,WAEAE,EAAA,KAAA,KAAA,UAAA,EAEAA,CACA,CAEA,GAAA,KAAA,YAAAD,EAAA,CACA,MAAAC,EAAA,CAAA,MAAA,GAAA,KAAA,MAAAD,EAAA,KAAA,UAAA,CAAA,EACA,OAAA,KAAA,WAEAC,EAAA,QAAA,CAAA,EAEAA,CACA,CAGA,MAAAC,EAAA,KAAA,YAAA,EAAA,KAAA,WAAA,GACAC,EAAA,KAAA,MAAAD,EAAA,CAAA,EACA,IAAAE,EAAA,KAAA,YAAAD,EACAE,EAAA,KAAA,YAAAF,EAGA,KAAA,YACAC,EAAAA,EAAA,EACAC,EAAAA,EAAA,GAGA,MAAAJ,EAAA,CAAA,MAAA,GAAA,KAAA,MAAAG,EAAAC,CAAA,EAAA,KAAA,EACA,OAAA,KAAA,UAGAJ,EAFA,CAAA,EAAA,GAAAA,EAAA,KAAA,UAAA,CAGA,EAEA,eAAA,CACA,OAAA,KAAA,YAAA,KAAA,KAAA,GAAA,gCAAA,EAAA,KAAA,KAAA,GAAA,mCAAA,CACA,EAEA,eAAA,CACA,OAAA,KAAA,WAAA,KAAA,KAAA,GAAA,+BAAA,EAAA,KAAA,KAAA,GAAA,+BAAA,CACA,EAEA,qBAAA,CACA,OAAAK,GACAA,IAAA,KAAA,WAAA,GAAA,KAAA,KAAA,GAAA,+BAAA,CAAA,IAAAA,CAAA,GAAA,GAAA,KAAA,KAAA,GAAA,kCAAA,CAAA,KAAAA,EAAA,CAAA,EAEA,CACA,EAEA,MAAA,CACA,YAAA,CACA,KAAA,YAAA,KAAA,UACA,CACA,EAEA,QAAA,CACA,MAAAC,EAAAC,EAAA,CACA,MAAAC,EAAA,CAAA,EACAF,EAAAA,EAAA,EAAAA,EAAA,EACA,QAAAG,EAAAH,EAAAG,GAAAF,EAAAE,IACAD,EAAA,KAAAC,CAAA,EAEA,OAAAD,CACA,EAEA,WAAAH,EAAA,CACA,KAAA,YAAAA,EACA,KAAA,MAAA,SAAA,KAAA,WAAA,CACA,CACA,CACA"}

package/dist/vue2/lib/pagination/pagination.js

@@ -1,14 +1,16 @@
-import { DtIconChevronLeft as c, DtIconChevronRight as u, DtIconMoreHorizontal as g } from "@dialpad/dialtone-icons/vue2";
-import { n as l } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
-import d from "../button/button.js";
-const h = {
+import { DtIconChevronLeft as c, DtIconChevronRight as u, DtIconMoreHorizontal as l } from "@dialpad/dialtone-icons/vue2";
+import { n as h } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
+import g from "../button/button.js";
+import d from "../../common/mixins/localization.js";
+const P = {
   name: "DtPagination",
   components: {
-    DtButton: d,
+    DtButton: g,
     DtIconChevronLeft: c,
     DtIconChevronRight: u,
-    DtIconMoreHorizontal: g
+    DtIconMoreHorizontal: l
   },
+  mixins: [d],
   props: {
     /**
      * Descriptive label for the pagination content.
@@ -24,27 +26,6 @@ const h = {
       type: Number,
       required: !0
     },
-    /**
-     * Descriptive label for the previous button.
-     */
-    prevAriaLabel: {
-      type: String,
-      required: !0
-    },
-    /**
-     * Descriptive label for the next button.
-     */
-    nextAriaLabel: {
-      type: String,
-      required: !0
-    },
-    /**
-     * A method that will be called to get the aria label of each page.
-     */
-    pageNumberAriaLabel: {
-      type: Function,
-      required: !0
-    },
     /**
      * The active current page in the list of pages, defaults to the first page
      */
@@ -92,25 +73,35 @@ const h = {
     isLastPage() {
       return this.currentPage === this.totalPages;
     },
+    // eslint-disable-next-line complexity
     pages() {
       if (this.maxVisible === 0)
         return [];
       if (this.totalPages <= this.maxVisible)
         return this.range(1, this.totalPages);
-      let r = this.maxVisible - 1, t = this.totalPages - r + 1;
-      if (this.hideEdges && (r = r + 1, t = t - 1), this.currentPage < r) {
-        const n = [...this.range(1, r), "..."];
+      let e = this.maxVisible - 1, t = this.totalPages - e + 1;
+      if (this.hideEdges && (e = e + 1, t = t - 1), this.currentPage < e) {
+        const n = [...this.range(1, e), "..."];
         return this.hideEdges || n.push(this.totalPages), n;
       }
       if (this.currentPage > t) {
         const n = ["...", ...this.range(t, this.totalPages)];
         return this.hideEdges || n.unshift(1), n;
       }
-      const a = this.maxVisible - (3 - this.maxVisible % 2), e = Math.floor(a / 2);
-      let i = this.currentPage - e, s = this.currentPage + e;
-      this.hideEdges && (i = i - 1, s = s + 1);
-      const o = ["...", ...this.range(i, s), "..."];
+      const i = this.maxVisible - (3 - this.maxVisible % 2), a = Math.floor(i / 2);
+      let r = this.currentPage - a, s = this.currentPage + a;
+      this.hideEdges && (r = r - 1, s = s + 1);
+      const o = ["...", ...this.range(r, s), "..."];
       return this.hideEdges ? o : [1, ...o, this.totalPages];
+    },
+    prevAriaLabel() {
+      return this.isFirstPage ? this.i18n.$t("DIALTONE_PAGINATION_FIRST_PAGE") : this.i18n.$t("DIALTONE_PAGINATION_PREVIOUS_PAGE");
+    },
+    nextAriaLabel() {
+      return this.isLastPage ? this.i18n.$t("DIALTONE_PAGINATION_LAST_PAGE") : this.i18n.$t("DIALTONE_PAGINATION_NEXT_PAGE");
+    },
+    pageNumberAriaLabel() {
+      return (e) => e === this.totalPages ? `${this.i18n.$t("DIALTONE_PAGINATION_LAST_PAGE")} ${e}` : `${this.i18n.$t("DIALTONE_PAGINATION_PAGE_NUMBER", { page: e })}`;
     }
   },
   watch: {
@@ -119,40 +110,40 @@ const h = {
     }
   },
   methods: {
-    range(r, t) {
-      const a = [];
-      r = r > 0 ? r : 1;
-      for (let e = r; e <= t; e++)
-        a.push(e);
-      return a;
+    range(e, t) {
+      const i = [];
+      e = e > 0 ? e : 1;
+      for (let a = e; a <= t; a++)
+        i.push(a);
+      return i;
     },
-    changePage(r) {
-      this.currentPage = r, this.$emit("change", this.currentPage);
+    changePage(e) {
+      this.currentPage = e, this.$emit("change", this.currentPage);
     }
   }
 };
-var p = function() {
-  var t = this, a = t._self._c;
-  return a("nav", { staticClass: "d-pagination", attrs: { "aria-label": t.ariaLabel } }, [a("dt-button", { staticClass: "d-pagination__button", attrs: { "data-qa": "dt-pagination-prev", "aria-label": t.prevAriaLabel, kind: "muted", importance: "clear", disabled: t.isFirstPage }, on: { click: function(e) {
+var _ = function() {
+  var t = this, i = t._self._c;
+  return i("nav", { staticClass: "d-pagination", attrs: { "aria-label": t.ariaLabel } }, [i("dt-button", { staticClass: "d-pagination__button", attrs: { "data-qa": "dt-pagination-prev", "aria-label": t.prevAriaLabel, kind: "muted", importance: "clear", disabled: t.isFirstPage }, on: { click: function(a) {
     return t.changePage(t.currentPage - 1);
   } }, scopedSlots: t._u([{ key: "icon", fn: function() {
-    return [a("dt-icon-chevron-left", { attrs: { size: "300" } })];
-  }, proxy: !0 }]) }), t._l(t.pages, function(e, i) {
-    return a("div", { key: `page-${e}-${i}`, class: { "d-pagination__separator": isNaN(Number(e)) } }, [isNaN(Number(e)) ? a("div", { staticClass: "d-pagination__separator-icon", attrs: { "data-qa": "dt-pagination-separator" } }, [a("dt-icon-more-horizontal", { attrs: { size: "300" } })], 1) : a("dt-button", { attrs: { "aria-label": t.pageNumberAriaLabel(e), kind: t.currentPage === e ? "default" : "muted", importance: t.currentPage === e ? "primary" : "clear", "label-class": "" }, on: { click: function(s) {
-      return t.changePage(e);
-    } } }, [t._v(" " + t._s(e) + " ")])], 1);
-  }), a("dt-button", { staticClass: "d-pagination__button", attrs: { "data-qa": "dt-pagination-next", "aria-label": t.nextAriaLabel, disabled: t.isLastPage, kind: "muted", importance: "clear" }, on: { click: function(e) {
+    return [i("dt-icon-chevron-left", { attrs: { size: "300" } })];
+  }, proxy: !0 }]) }), t._l(t.pages, function(a, r) {
+    return i("div", { key: `page-${a}-${r}`, class: { "d-pagination__separator": isNaN(Number(a)) } }, [isNaN(Number(a)) ? i("div", { staticClass: "d-pagination__separator-icon", attrs: { "data-qa": "dt-pagination-separator" } }, [i("dt-icon-more-horizontal", { attrs: { size: "300" } })], 1) : i("dt-button", { attrs: { "aria-label": t.pageNumberAriaLabel(a), kind: t.currentPage === a ? "default" : "muted", importance: t.currentPage === a ? "primary" : "clear", "label-class": "" }, on: { click: function(s) {
+      return t.changePage(a);
+    } } }, [t._v(" " + t._s(a) + " ")])], 1);
+  }), i("dt-button", { staticClass: "d-pagination__button", attrs: { "data-qa": "dt-pagination-next", "aria-label": t.nextAriaLabel, disabled: t.isLastPage, kind: "muted", importance: "clear" }, on: { click: function(a) {
     return t.changePage(t.currentPage + 1);
   } }, scopedSlots: t._u([{ key: "icon", fn: function() {
-    return [a("dt-icon-chevron-right", { attrs: { size: "300" } })];
+    return [i("dt-icon-chevron-right", { attrs: { size: "300" } })];
   }, proxy: !0 }]) })], 2);
-}, m = [], P = /* @__PURE__ */ l(
-  h,
-  p,
-  m
+}, p = [], m = /* @__PURE__ */ h(
+  P,
+  _,
+  p
 );
-const v = P.exports;
+const I = m.exports;
 export {
-  v as default
+  I as default
 };
 //# sourceMappingURL=pagination.js.map

package/dist/vue2/lib/pagination/pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","sources":["../../../components/pagination/pagination.vue"],"sourcesContent":["<template>\n  <nav\n    :aria-label=\"ariaLabel\"\n    class=\"d-pagination\"\n  >\n    <dt-button\n      class=\"d-pagination__button\"\n      data-qa=\"dt-pagination-prev\"\n      :aria-label=\"prevAriaLabel\"\n      kind=\"muted\"\n      importance=\"clear\"\n      :disabled=\"isFirstPage\"\n      @click=\"changePage(currentPage - 1)\"\n    >\n      <template #icon>\n        <dt-icon-chevron-left\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n    <div\n      v-for=\"(page, index) in pages\"\n      :key=\"`page-${page}-${index}`\"\n      :class=\"{ 'd-pagination__separator': isNaN(Number(page)) }\"\n    >\n      <!-- eslint-disable vue/no-bare-strings-in-template -->\n      <div\n        v-if=\"isNaN(Number(page))\"\n        class=\"d-pagination__separator-icon\"\n        data-qa=\"dt-pagination-separator\"\n      >\n        <dt-icon-more-horizontal\n          size=\"300\"\n        />\n        <!-- … -->\n      </div>\n      <!-- eslint-enable vue/no-bare-strings-in-template -->\n      <dt-button\n        v-else\n        :aria-label=\"pageNumberAriaLabel(page)\"\n        :kind=\"currentPage === page ? 'default' : 'muted'\"\n        :importance=\"currentPage === page ? 'primary' : 'clear'\"\n        label-class=\"\"\n        @click=\"changePage(page)\"\n      >\n        {{ page }}\n      </dt-button>\n    </div>\n    <dt-button\n      class=\"d-pagination__button\"\n      data-qa=\"dt-pagination-next\"\n      :aria-label=\"nextAriaLabel\"\n      :disabled=\"isLastPage\"\n      kind=\"muted\"\n      importance=\"clear\"\n      @click=\"changePage(currentPage + 1)\"\n    >\n      <template #icon>\n        <dt-icon-chevron-right\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n  </nav>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIconChevronLeft, DtIconChevronRight, DtIconMoreHorizontal } from '@dialpad/dialtone-icons/vue2';\n\n/**\n * Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.\n * @see https://dialtone.dialpad.com/components/pagination.html\n */\nexport default {\n  name: 'DtPagination',\n\n  components: {\n    DtButton,\n    DtIconChevronLeft,\n    DtIconChevronRight,\n    DtIconMoreHorizontal,\n  },\n\n  props: {\n    /**\n     * Descriptive label for the pagination content.\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * The total number of the pages\n     */\n    totalPages: {\n      type: Number,\n      required: true,\n    },\n\n    /**\n     * Descriptive label for the previous button.\n     */\n    prevAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Descriptive label for the next button.\n     */\n    nextAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * A method that will be called to get the aria label of each page.\n     */\n    pageNumberAriaLabel: {\n      type: Function,\n      required: true,\n    },\n\n    /**\n     * The active current page in the list of pages, defaults to the first page\n     */\n    activePage: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Determines the max pages to be shown in the list. Using an odd number is recommended.\n     * If an even number is given, then it will be rounded down to the nearest odd number to always\n     * keep current page in the middle when current page is in the mid-range.\n     */\n    maxVisible: {\n      type: Number,\n      default: 5,\n    },\n\n    /**\n     * Sometimes you may need to hide start and end page number buttons when moving in between.\n     * This prop will be used to hide the first and last page buttons when not near the edges.\n     * This is useful when your backend does not support offset and you can only use cursor based pagination.\n     */\n    hideEdges: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Page change event\n     *\n     * @event change\n     * @type {Number}\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      currentPage: this.activePage,\n    };\n  },\n\n  computed: {\n    isFirstPage () {\n      return this.currentPage === 1;\n    },\n\n    isLastPage () {\n      return this.currentPage === this.totalPages;\n    },\n\n    pages () {\n      if (this.maxVisible === 0) {\n        return [];\n      }\n      if (this.totalPages <= this.maxVisible) {\n        return this.range(1, this.totalPages);\n      }\n\n      let start = this.maxVisible - 1;\n      let end = this.totalPages - start + 1;\n\n      // if hideEdges is true, modify the start and\n      // end to account for the hidden pages\n      if (this.hideEdges) {\n        start = start + 1;\n        end = end - 1;\n      }\n\n      if (this.currentPage < start) {\n        const pages = [...this.range(1, start), '...'];\n        if (!this.hideEdges) {\n          // add last page to the end\n          pages.push(this.totalPages);\n        }\n        return pages;\n      }\n\n      if (this.currentPage > end) {\n        const pages = ['...', ...this.range(end, this.totalPages)];\n        if (!this.hideEdges) {\n          // add first page to the beginning\n          pages.unshift(1);\n        }\n        return pages;\n      }\n\n      // rounding to the nearest odd according to the maxlength to always show the page number in the middle.\n      const total = this.maxVisible - (3 - this.maxVisible % 2);\n      const centerIndex = Math.floor(total / 2);\n      let left = this.currentPage - centerIndex;\n      let right = this.currentPage + centerIndex;\n\n      // if hideEdge is true, modify the left and right to account for the hidden pages\n      if (this.hideEdges) {\n        left = left - 1;\n        right = right + 1;\n      }\n\n      const pages = ['...', ...this.range(left, right), '...'];\n      if (!this.hideEdges) {\n        return [1, ...pages, this.totalPages];\n      }\n      return pages;\n    },\n  },\n\n  watch: {\n    activePage () {\n      this.currentPage = this.activePage;\n    },\n  },\n\n  methods: {\n    range (from, to) {\n      const range = [];\n      from = from > 0 ? from : 1;\n      for (let i = from; i <= to; i++) {\n        range.push(i);\n      }\n      return range;\n    },\n\n    changePage (page) {\n      this.currentPage = page;\n      this.$emit('change', this.currentPage);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtIconChevronLeft","DtIconChevronRight","DtIconMoreHorizontal","start","end","pages","total","centerIndex","left","right","from","to","range","i","page"],"mappings":"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"}
+{"version":3,"file":"pagination.js","sources":["../../../components/pagination/pagination.vue"],"sourcesContent":["<template>\n  <nav\n    :aria-label=\"ariaLabel\"\n    class=\"d-pagination\"\n  >\n    <dt-button\n      class=\"d-pagination__button\"\n      data-qa=\"dt-pagination-prev\"\n      :aria-label=\"prevAriaLabel\"\n      kind=\"muted\"\n      importance=\"clear\"\n      :disabled=\"isFirstPage\"\n      @click=\"changePage(currentPage - 1)\"\n    >\n      <template #icon>\n        <dt-icon-chevron-left\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n    <div\n      v-for=\"(page, index) in pages\"\n      :key=\"`page-${page}-${index}`\"\n      :class=\"{ 'd-pagination__separator': isNaN(Number(page)) }\"\n    >\n      <!-- eslint-disable vue/no-bare-strings-in-template -->\n      <div\n        v-if=\"isNaN(Number(page))\"\n        class=\"d-pagination__separator-icon\"\n        data-qa=\"dt-pagination-separator\"\n      >\n        <dt-icon-more-horizontal\n          size=\"300\"\n        />\n        <!-- … -->\n      </div>\n      <dt-button\n        v-else\n        :aria-label=\"pageNumberAriaLabel(page)\"\n        :kind=\"currentPage === page ? 'default' : 'muted'\"\n        :importance=\"currentPage === page ? 'primary' : 'clear'\"\n        label-class=\"\"\n        @click=\"changePage(page)\"\n      >\n        {{ page }}\n      </dt-button>\n    </div>\n    <dt-button\n      class=\"d-pagination__button\"\n      data-qa=\"dt-pagination-next\"\n      :aria-label=\"nextAriaLabel\"\n      :disabled=\"isLastPage\"\n      kind=\"muted\"\n      importance=\"clear\"\n      @click=\"changePage(currentPage + 1)\"\n    >\n      <template #icon>\n        <dt-icon-chevron-right\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n  </nav>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIconChevronLeft, DtIconChevronRight, DtIconMoreHorizontal } from '@dialpad/dialtone-icons/vue2';\nimport { DtLocalizationMixin } from '@/common/mixins';\n\n/**\n * Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.\n * @see https://dialtone.dialpad.com/components/pagination.html\n */\nexport default {\n  name: 'DtPagination',\n\n  components: {\n    DtButton,\n    DtIconChevronLeft,\n    DtIconChevronRight,\n    DtIconMoreHorizontal,\n  },\n\n  mixins: [DtLocalizationMixin],\n\n  props: {\n    /**\n     * Descriptive label for the pagination content.\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * The total number of the pages\n     */\n    totalPages: {\n      type: Number,\n      required: true,\n    },\n\n    /**\n     * The active current page in the list of pages, defaults to the first page\n     */\n    activePage: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Determines the max pages to be shown in the list. Using an odd number is recommended.\n     * If an even number is given, then it will be rounded down to the nearest odd number to always\n     * keep current page in the middle when current page is in the mid-range.\n     */\n    maxVisible: {\n      type: Number,\n      default: 5,\n    },\n\n    /**\n     * Sometimes you may need to hide start and end page number buttons when moving in between.\n     * This prop will be used to hide the first and last page buttons when not near the edges.\n     * This is useful when your backend does not support offset and you can only use cursor based pagination.\n     */\n    hideEdges: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Page change event\n     *\n     * @event change\n     * @type {Number}\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      currentPage: this.activePage,\n    };\n  },\n\n  computed: {\n    isFirstPage () {\n      return this.currentPage === 1;\n    },\n\n    isLastPage () {\n      return this.currentPage === this.totalPages;\n    },\n\n    // eslint-disable-next-line complexity\n    pages () {\n      if (this.maxVisible === 0) {\n        return [];\n      }\n      if (this.totalPages <= this.maxVisible) {\n        return this.range(1, this.totalPages);\n      }\n\n      let start = this.maxVisible - 1;\n      let end = this.totalPages - start + 1;\n\n      // if hideEdges is true, modify the start and\n      // end to account for the hidden pages\n      if (this.hideEdges) {\n        start = start + 1;\n        end = end - 1;\n      }\n\n      if (this.currentPage < start) {\n        const pages = [...this.range(1, start), '...'];\n        if (!this.hideEdges) {\n          // add last page to the end\n          pages.push(this.totalPages);\n        }\n        return pages;\n      }\n\n      if (this.currentPage > end) {\n        const pages = ['...', ...this.range(end, this.totalPages)];\n        if (!this.hideEdges) {\n          // add first page to the beginning\n          pages.unshift(1);\n        }\n        return pages;\n      }\n\n      // rounding to the nearest odd according to the maxlength to always show the page number in the middle.\n      const total = this.maxVisible - (3 - this.maxVisible % 2);\n      const centerIndex = Math.floor(total / 2);\n      let left = this.currentPage - centerIndex;\n      let right = this.currentPage + centerIndex;\n\n      // if hideEdge is true, modify the left and right to account for the hidden pages\n      if (this.hideEdges) {\n        left = left - 1;\n        right = right + 1;\n      }\n\n      const pages = ['...', ...this.range(left, right), '...'];\n      if (!this.hideEdges) {\n        return [1, ...pages, this.totalPages];\n      }\n      return pages;\n    },\n\n    prevAriaLabel () {\n      return this.isFirstPage ? this.i18n.$t('DIALTONE_PAGINATION_FIRST_PAGE') : this.i18n.$t('DIALTONE_PAGINATION_PREVIOUS_PAGE');\n    },\n\n    nextAriaLabel () {\n      return this.isLastPage ? this.i18n.$t('DIALTONE_PAGINATION_LAST_PAGE') : this.i18n.$t('DIALTONE_PAGINATION_NEXT_PAGE');\n    },\n\n    pageNumberAriaLabel () {\n      return (page) => {\n        return page === this.totalPages ? `${this.i18n.$t('DIALTONE_PAGINATION_LAST_PAGE')} ${page}` : `${this.i18n.$t('DIALTONE_PAGINATION_PAGE_NUMBER', { page })}`;\n      };\n    },\n  },\n\n  watch: {\n    activePage () {\n      this.currentPage = this.activePage;\n    },\n  },\n\n  methods: {\n    range (from, to) {\n      const range = [];\n      from = from > 0 ? from : 1;\n      for (let i = from; i <= to; i++) {\n        range.push(i);\n      }\n      return range;\n    },\n\n    changePage (page) {\n      this.currentPage = page;\n      this.$emit('change', this.currentPage);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtIconChevronLeft","DtIconChevronRight","DtIconMoreHorizontal","DtLocalizationMixin","start","end","pages","total","centerIndex","left","right","page","from","to","range","i"],"mappings":"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"}

package/dist/vue2/lib/popover/popover-header-footer.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("@dialpad/dialtone-icons/vue2"),n=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),s=require("../button/button.cjs"),c={name:"PopoverHeaderFooter",components:{DtButton:s.default,DtIconClose:r.DtIconClose},props:{type:{type:String,validator:function(t){return["header","footer"].includes(t)}},contentClass:{type:[String,Array,Object],default:""},showCloseButton:{type:Boolean,default:!1},closeButtonProps:{type:Object,default:()=>{}}},emits:["close"],methods:{focusCloseButton(){var e;const t=(e=this.$refs["popover__close-button"])==null?void 0:e.$el;t==null||t.focus()}}};var a=function(){var e=this,o=e._self._c;return o("div",{class:{"d-popover__header":e.type==="header","d-popover__footer":e.type==="footer"},attrs:{"data-qa":"dt-popover-header-footer"}},[e.$slots.content?o("div",{class:[{"d-popover__header__content":e.type==="header","d-popover__footer__content":e.type==="footer"},e.contentClass],attrs:{"data-qa":"dt-popover-header-footer-content"}},[e._t("content")],2):e._e(),e.showCloseButton?o("dt-button",e._b({ref:"popover__close-button",class:{"d-popover__header__close-button":e.type==="header","d-popover__footer__close-button":e.type==="footer"},attrs:{"data-qa":"dt-popover-close",importance:"outlined",kind:"muted",circle:""},on:{click:function(d){return e.$emit("close")}},scopedSlots:e._u([{key:"icon",fn:function(){return[o("dt-icon-close",{attrs:{size:"300"}})]},proxy:!0}],null,!1,2465905460)},"dt-button",e.closeButtonProps,!1)):e._e()],1)},_=[],l=n.n(c,a,_);const p=l.exports;exports.default=p;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("@dialpad/dialtone-icons/vue2"),n=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),s=require("../button/button.cjs"),c=require("../../common/mixins/localization.cjs"),a={name:"PopoverHeaderFooter",components:{DtButton:s.default,DtIconClose:r.DtIconClose},mixins:[c.default],props:{type:{type:String,validator:function(t){return["header","footer"].includes(t)}},contentClass:{type:[String,Array,Object],default:""},showCloseButton:{type:Boolean,default:!1}},emits:["close"],computed:{closeButtonTitle(){return this.i18n.$t("DIALTONE_CLOSE_BUTTON")}},methods:{focusCloseButton(){var e;const t=(e=this.$refs["popover__close-button"])==null?void 0:e.$el;t==null||t.focus()}}};var l=function(){var e=this,o=e._self._c;return o("div",{class:{"d-popover__header":e.type==="header","d-popover__footer":e.type==="footer"},attrs:{"data-qa":"dt-popover-header-footer"}},[e.$slots.content?o("div",{class:[{"d-popover__header__content":e.type==="header","d-popover__footer__content":e.type==="footer"},e.contentClass],attrs:{"data-qa":"dt-popover-header-footer-content"}},[e._t("content")],2):e._e(),e.showCloseButton?o("dt-button",{ref:"popover__close-button",class:{"d-popover__header__close-button":e.type==="header","d-popover__footer__close-button":e.type==="footer"},attrs:{"data-qa":"dt-popover-close",importance:"outlined",kind:"muted",circle:"","aria-label":e.closeButtonTitle,title:e.closeButtonTitle},on:{click:function(d){return e.$emit("close")}},scopedSlots:e._u([{key:"icon",fn:function(){return[o("dt-icon-close",{attrs:{size:"300"}})]},proxy:!0}],null,!1,2465905460)}):e._e()],1)},_=[],u=n.n(a,l,_);const i=u.exports;exports.default=i;
 //# sourceMappingURL=popover-header-footer.cjs.map

package/dist/vue2/lib/popover/popover-header-footer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"popover-header-footer.cjs","sources":["../../../components/popover/popover_header_footer.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"dt-popover-header-footer\"\n    :class=\"{\n      'd-popover__header': type === 'header',\n      'd-popover__footer': type === 'footer',\n    }\"\n  >\n    <div\n      v-if=\"$slots.content\"\n      data-qa=\"dt-popover-header-footer-content\"\n      :class=\"[{\n        'd-popover__header__content': type === 'header',\n        'd-popover__footer__content': type === 'footer',\n      }, contentClass]\"\n    >\n      <!-- @slot Slot for main content -->\n      <slot name=\"content\" />\n    </div>\n    <dt-button\n      v-if=\"showCloseButton\"\n      ref=\"popover__close-button\"\n      data-qa=\"dt-popover-close\"\n      :class=\"{\n        'd-popover__header__close-button': type === 'header',\n        'd-popover__footer__close-button': type === 'footer',\n      }\"\n      importance=\"outlined\"\n      kind=\"muted\"\n      circle\n      v-bind=\"closeButtonProps\"\n      @click=\"$emit('close')\"\n    >\n      <template #icon>\n        <dt-icon-close\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n  </div>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue2';\n\nexport default {\n  name: 'PopoverHeaderFooter',\n  components: {\n    DtButton,\n    DtIconClose,\n  },\n\n  props: {\n    // eslint-disable-next-line vue/require-default-prop\n    type: {\n      type: String,\n      validator: function (value) {\n        return ['header', 'footer'].includes(value);\n      },\n    },\n\n    /**\n     * Additional class name for the content wrapper element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Determines visibility for close button\n     * @values true, false\n     */\n    showCloseButton: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * A set of props to be passed into the popover's header close button.\n     * Requires an 'ariaLabel' property.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: () => {},\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when popover is closed\n     *\n     * @event close\n     * @type { Boolean }\n     */\n    'close',\n  ],\n\n  methods: {\n    focusCloseButton () {\n      const closeButton = this.$refs['popover__close-button']?.$el;\n      closeButton?.focus();\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtIconClose","value","closeButton","_a"],"mappings":"sPA8CAA,EAAA,CACA,KAAA,sBACA,WAAA,CACA,SAAAC,EAAA,QACA,YAAAC,EAAA,WACA,EAEA,MAAA,CAEA,KAAA,CACA,KAAA,OACA,UAAA,SAAAC,EAAA,CACA,MAAA,CAAA,SAAA,QAAA,EAAA,SAAAA,CAAA,CACA,CACA,EAKA,aAAA,CACA,KAAA,CAAA,OAAA,MAAA,MAAA,EACA,QAAA,EACA,EAMA,gBAAA,CACA,KAAA,QACA,QAAA,EACA,EAMA,iBAAA,CACA,KAAA,OACA,QAAA,IAAA,CAAA,CACA,CACA,EAEA,MAAA,CAOA,OACA,EAEA,QAAA,CACA,kBAAA,OACA,MAAAC,GAAAC,EAAA,KAAA,MAAA,uBAAA,IAAA,YAAAA,EAAA,IACAD,GAAA,MAAAA,EAAA,OACA,CACA,CACA"}
+{"version":3,"file":"popover-header-footer.cjs","sources":["../../../components/popover/popover_header_footer.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"dt-popover-header-footer\"\n    :class=\"{\n      'd-popover__header': type === 'header',\n      'd-popover__footer': type === 'footer',\n    }\"\n  >\n    <div\n      v-if=\"$slots.content\"\n      data-qa=\"dt-popover-header-footer-content\"\n      :class=\"[{\n        'd-popover__header__content': type === 'header',\n        'd-popover__footer__content': type === 'footer',\n      }, contentClass]\"\n    >\n      <!-- @slot Slot for main content -->\n      <slot name=\"content\" />\n    </div>\n    <dt-button\n      v-if=\"showCloseButton\"\n      ref=\"popover__close-button\"\n      data-qa=\"dt-popover-close\"\n      :class=\"{\n        'd-popover__header__close-button': type === 'header',\n        'd-popover__footer__close-button': type === 'footer',\n      }\"\n      importance=\"outlined\"\n      kind=\"muted\"\n      circle\n      :aria-label=\"closeButtonTitle\"\n      :title=\"closeButtonTitle\"\n      @click=\"$emit('close')\"\n    >\n      <template #icon>\n        <dt-icon-close\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n  </div>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue2';\nimport { DtLocalizationMixin } from '@/common/mixins';\n\nexport default {\n  name: 'PopoverHeaderFooter',\n  components: {\n    DtButton,\n    DtIconClose,\n  },\n\n  mixins: [DtLocalizationMixin],\n\n  props: {\n    // eslint-disable-next-line vue/require-default-prop\n    type: {\n      type: String,\n      validator: function (value) {\n        return ['header', 'footer'].includes(value);\n      },\n    },\n\n    /**\n     * Additional class name for the content wrapper element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Determines visibility for close button\n     * @values true, false\n     */\n    showCloseButton: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when popover is closed\n     *\n     * @event close\n     * @type { Boolean }\n     */\n    'close',\n  ],\n\n  computed: {\n    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n    },\n  },\n\n  methods: {\n    focusCloseButton () {\n      const closeButton = this.$refs['popover__close-button']?.$el;\n      closeButton?.focus();\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtIconClose","DtLocalizationMixin","value","closeButton","_a"],"mappings":"wSAgDAA,EAAA,CACA,KAAA,sBACA,WAAA,CACA,SAAAC,EAAA,QACA,YAAAC,EAAA,WACA,EAEA,OAAA,CAAAC,EAAAA,OAAA,EAEA,MAAA,CAEA,KAAA,CACA,KAAA,OACA,UAAA,SAAAC,EAAA,CACA,MAAA,CAAA,SAAA,QAAA,EAAA,SAAAA,CAAA,CACA,CACA,EAKA,aAAA,CACA,KAAA,CAAA,OAAA,MAAA,MAAA,EACA,QAAA,EACA,EAMA,gBAAA,CACA,KAAA,QACA,QAAA,EACA,CACA,EAEA,MAAA,CAOA,OACA,EAEA,SAAA,CACA,kBAAA,CACA,OAAA,KAAA,KAAA,GAAA,uBAAA,CACA,CACA,EAEA,QAAA,CACA,kBAAA,OACA,MAAAC,GAAAC,EAAA,KAAA,MAAA,uBAAA,IAAA,YAAAA,EAAA,IACAD,GAAA,MAAAA,EAAA,OACA,CACA,CACA"}