@dialpad/dialtone-vue 2.183.2 → 2.184.1

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

@@ -0,0 +1,87 @@
+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 c from "../button/button.js";
+const a = {
+  name: "DtNoticeAction",
+  components: {
+    DtIconClose: s,
+    DtButton: c,
+    SrOnlyCloseButton: i
+  },
+  mixins: [n],
+  props: {
+    /**
+     * Props for the notice close button.
+     */
+    closeButtonProps: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * Hides the close button from the notice
+     * @values true, false
+     */
+    hideClose: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Hides the action from the notice
+     * @values true, false
+     */
+    hideAction: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [
+    /**
+     * Close button click event
+     *
+     * @event close
+     */
+    "close"
+  ],
+  computed: {
+    noticeActionListeners() {
+      return {
+        ...this.$listeners,
+        click: (e) => {
+          this.close(), this.$emit("click", e);
+        }
+      };
+    }
+  },
+  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);
+  },
+  beforeDestroy() {
+    var e;
+    (e = this.lastFocusedElement) == null || e.focus();
+  },
+  methods: {
+    close() {
+      this.$emit("close");
+    }
+  }
+};
+var r = 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("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,
+  r,
+  d
+);
+const b = u.exports;
+export {
+  b as default
+};
+//# sourceMappingURL=notice-action.js.map

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

@@ -0,0 +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;;;;;;;;;;;;"}

package/dist/lib/notice/notice-constants.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=["base","error","info","success","warning"],t=["alert","alertdialog","status"],s={NOTICE_KINDS:e,NOTICE_ROLES:t};exports.NOTICE_KINDS=e;exports.NOTICE_ROLES=t;exports.default=s;
+//# sourceMappingURL=notice-constants.cjs.map

package/dist/lib/notice/notice-constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"notice-constants.cjs","sources":["../../../components/notice/notice_constants.js"],"sourcesContent":["export const NOTICE_KINDS = ['base', 'error', 'info', 'success', 'warning'];\nexport const NOTICE_ROLES = ['alert', 'alertdialog', 'status'];\n\nexport default {\n  NOTICE_KINDS,\n  NOTICE_ROLES,\n};\n"],"names":["NOTICE_KINDS","NOTICE_ROLES","notice_constants"],"mappings":"4GAAY,MAACA,EAAe,CAAC,OAAQ,QAAS,OAAQ,UAAW,SAAS,EAC7DC,EAAe,CAAC,QAAS,cAAe,QAAQ,EAE9CC,EAAA,CACb,aAAAF,EACA,aAAAC,CACF"}

package/dist/lib/notice/notice-constants.js

@@ -0,0 +1,10 @@
+const s = ["base", "error", "info", "success", "warning"], t = ["alert", "alertdialog", "status"], a = {
+  NOTICE_KINDS: s,
+  NOTICE_ROLES: t
+};
+export {
+  s as NOTICE_KINDS,
+  t as NOTICE_ROLES,
+  a as default
+};
+//# sourceMappingURL=notice-constants.js.map

package/dist/lib/notice/notice-constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notice-constants.js","sources":["../../../components/notice/notice_constants.js"],"sourcesContent":["export const NOTICE_KINDS = ['base', 'error', 'info', 'success', 'warning'];\nexport const NOTICE_ROLES = ['alert', 'alertdialog', 'status'];\n\nexport default {\n  NOTICE_KINDS,\n  NOTICE_ROLES,\n};\n"],"names":["NOTICE_KINDS","NOTICE_ROLES","notice_constants"],"mappings":"AAAY,MAACA,IAAe,CAAC,QAAQ,SAAS,QAAQ,WAAW,SAAS,GAC7DC,IAAe,CAAC,SAAS,eAAe,QAAQ,GAE9CC,IAAA;AAAA,EACb,cAAAF;AAAA,EACA,cAAAC;AACF;"}

package/dist/lib/notice/notice-content.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),i={name:"DtNoticeContent",props:{title:{type:String,default:""},titleId:{type:String,default:void 0},contentId:{type:String,default:void 0}}};var a=function(){var t=this,e=t._self._c;return e("div",{staticClass:"d-notice__content",attrs:{"data-qa":"notice-content"}},[t.title||t.$slots.titleOverride?e("p",{staticClass:"d-notice__title",attrs:{id:t.titleId,"data-qa":"notice-content-title"}},[t._t("titleOverride",function(){return[t._v(" "+t._s(t.title)+" ")]})],2):t._e(),e("p",{staticClass:"d-notice__message",attrs:{id:t.contentId,"data-qa":"notice-content-message"}},[t._t("default")],2)])},s=[],r=n.n(i,a,s);const o=r.exports;exports.default=o;
+//# sourceMappingURL=notice-content.cjs.map

package/dist/lib/notice/notice-content.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"notice-content.cjs","sources":["../../../components/notice/notice_content.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-notice__content\"\n    data-qa=\"notice-content\"\n  >\n    <p\n      v-if=\"title || $slots.titleOverride\"\n      :id=\"titleId\"\n      class=\"d-notice__title\"\n      data-qa=\"notice-content-title\"\n    >\n      <!-- @slot Slot for the title  -->\n      <slot name=\"titleOverride\">\n        {{ title }}\n      </slot>\n    </p>\n    <p\n      :id=\"contentId\"\n      class=\"d-notice__message\"\n      data-qa=\"notice-content-message\"\n    >\n      <!-- @slot Slot for main content -->\n      <slot />\n    </p>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'DtNoticeContent',\n\n  props: {\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     * ID for 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     * ID for 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</script>\n"],"names":["_sfc_main"],"mappings":"0KA4BAA,EAAA,CACA,KAAA,kBAEA,MAAA,CAIA,MAAA,CACA,KAAA,OACA,QAAA,EACA,EAMA,QAAA,CACA,KAAA,OACA,QAAA,MACA,EAMA,UAAA,CACA,KAAA,OACA,QAAA,MACA,CACA,CACA"}

package/dist/lib/notice/notice-content.js

@@ -0,0 +1,44 @@
+import { n } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
+const i = {
+  name: "DtNoticeContent",
+  props: {
+    /**
+     * Title header of the notice. This can be left blank to remove the title from the notice entirely.
+     */
+    title: {
+      type: String,
+      default: ""
+    },
+    /**
+     * ID for the title element of the component. Useful for aria-describedby
+     * or aria-labelledby or any other reason you may need an id to refer to the title.
+     */
+    titleId: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * ID for the content element of the component. Useful for aria-describedby
+     * or aria-labelledby or any other reason you may need an id to refer to the content.
+     */
+    contentId: {
+      type: String,
+      default: void 0
+    }
+  }
+};
+var a = function() {
+  var t = this, e = t._self._c;
+  return e("div", { staticClass: "d-notice__content", attrs: { "data-qa": "notice-content" } }, [t.title || t.$slots.titleOverride ? e("p", { staticClass: "d-notice__title", attrs: { id: t.titleId, "data-qa": "notice-content-title" } }, [t._t("titleOverride", function() {
+    return [t._v(" " + t._s(t.title) + " ")];
+  })], 2) : t._e(), e("p", { staticClass: "d-notice__message", attrs: { id: t.contentId, "data-qa": "notice-content-message" } }, [t._t("default")], 2)]);
+}, s = [], o = /* @__PURE__ */ n(
+  i,
+  a,
+  s
+);
+const d = o.exports;
+export {
+  d as default
+};
+//# sourceMappingURL=notice-content.js.map

package/dist/lib/notice/notice-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notice-content.js","sources":["../../../components/notice/notice_content.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-notice__content\"\n    data-qa=\"notice-content\"\n  >\n    <p\n      v-if=\"title || $slots.titleOverride\"\n      :id=\"titleId\"\n      class=\"d-notice__title\"\n      data-qa=\"notice-content-title\"\n    >\n      <!-- @slot Slot for the title  -->\n      <slot name=\"titleOverride\">\n        {{ title }}\n      </slot>\n    </p>\n    <p\n      :id=\"contentId\"\n      class=\"d-notice__message\"\n      data-qa=\"notice-content-message\"\n    >\n      <!-- @slot Slot for main content -->\n      <slot />\n    </p>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'DtNoticeContent',\n\n  props: {\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     * ID for 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     * ID for 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</script>\n"],"names":["_sfc_main"],"mappings":";AA4BA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,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,EACA;AACA;;;;;;;;;;;;"}

package/dist/lib/notice/notice-icon.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@dialpad/dialtone-icons/vue2"),o=require("./notice-constants.cjs"),r=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),i=new Map([["info",e.DtIconInfo],["success",e.DtIconCheckCircle],["warning",e.DtIconAlertTriangle],["error",e.DtIconAlertCircle],["base",e.DtIconBell]]),l={name:"DtNoticeIcon",components:{DtIconInfo:e.DtIconInfo,DtIconCheckCircle:e.DtIconCheckCircle,DtIconAlertTriangle:e.DtIconAlertTriangle,DtIconAlertCircle:e.DtIconAlertCircle,DtIconBell:e.DtIconBell},props:{kind:{type:String,default:"base",validate(n){return o.NOTICE_KINDS.includes(n)}}},computed:{defaultIcon(){return i.get(this.kind)}}};var s=function(){var t=this,c=t._self._c;return t.defaultIcon||t.$slots.default?c("div",{staticClass:"d-notice__icon",attrs:{"aria-hidden":"true"}},[t._t("default",function(){return[c(t.defaultIcon,{tag:"component",attrs:{size:"400"}})]})],2):t._e()},a=[],u=r.n(l,s,a);const I=u.exports;exports.default=I;
+//# sourceMappingURL=notice-icon.cjs.map

package/dist/lib/notice/notice-icon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"notice-icon.cjs","sources":["../../../components/notice/notice_icon.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"defaultIcon || $slots.default\"\n    aria-hidden=\"true\"\n    class=\"d-notice__icon\"\n  >\n    <!-- @slot Slot for the main content -->\n    <slot>\n      <component\n        :is=\"defaultIcon\"\n        size=\"400\"\n      />\n    </slot>\n  </div>\n</template>\n\n<script>\nimport {\n  DtIconInfo,\n  DtIconCheckCircle,\n  DtIconAlertTriangle,\n  DtIconAlertCircle,\n  DtIconBell,\n} from '@dialpad/dialtone-icons/vue2';\nimport { NOTICE_KINDS } from './notice_constants.js';\n\nconst kindToIcon = new Map([\n  ['info', DtIconInfo],\n  ['success', DtIconCheckCircle],\n  ['warning', DtIconAlertTriangle],\n  ['error', DtIconAlertCircle],\n  ['base', DtIconBell],\n]);\n\nexport default {\n  name: 'DtNoticeIcon',\n\n  components: {\n    DtIconInfo,\n    DtIconCheckCircle,\n    DtIconAlertTriangle,\n    DtIconAlertCircle,\n    DtIconBell,\n  },\n\n  props: {\n    /**\n     * Kind of icon\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  computed: {\n    defaultIcon () {\n      return kindToIcon.get(this.kind);\n    },\n  },\n};\n</script>\n"],"names":["kindToIcon","DtIconInfo","DtIconCheckCircle","DtIconAlertTriangle","DtIconAlertCircle","DtIconBell","_sfc_main","kind","NOTICE_KINDS"],"mappings":"wPA0BAA,EAAA,IAAA,IAAA,CACA,CAAA,OAAAC,EAAAA,UAAA,EACA,CAAA,UAAAC,EAAAA,iBAAA,EACA,CAAA,UAAAC,EAAAA,mBAAA,EACA,CAAA,QAAAC,EAAAA,iBAAA,EACA,CAAA,OAAAC,EAAAA,UAAA,CACA,CAAA,EAEAC,EAAA,CACA,KAAA,eAEA,WAAA,CACA,WAAAL,EAAA,WACA,kBAAAC,EAAA,kBACA,oBAAAC,EAAA,oBACA,kBAAAC,EAAA,kBACA,WAAAC,EAAA,UACA,EAEA,MAAA,CAKA,KAAA,CACA,KAAA,OACA,QAAA,OACA,SAAAE,EAAA,CACA,OAAAC,EAAA,aAAA,SAAAD,CAAA,CACA,CACA,CACA,EAEA,SAAA,CACA,aAAA,CACA,OAAAP,EAAA,IAAA,KAAA,IAAA,CACA,CACA,CACA"}

package/dist/lib/notice/notice-icon.js

@@ -0,0 +1,52 @@
+import { DtIconInfo as o, DtIconCheckCircle as r, DtIconAlertTriangle as c, DtIconAlertCircle as a, DtIconBell as i } from "@dialpad/dialtone-icons/vue2";
+import { NOTICE_KINDS as s } from "./notice-constants.js";
+import { n as d } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
+const l = /* @__PURE__ */ new Map([
+  ["info", o],
+  ["success", r],
+  ["warning", c],
+  ["error", a],
+  ["base", i]
+]), _ = {
+  name: "DtNoticeIcon",
+  components: {
+    DtIconInfo: o,
+    DtIconCheckCircle: r,
+    DtIconAlertTriangle: c,
+    DtIconAlertCircle: a,
+    DtIconBell: i
+  },
+  props: {
+    /**
+     * Kind of icon
+     * @values base, error, info, success, warning
+     */
+    kind: {
+      type: String,
+      default: "base",
+      validate(n) {
+        return s.includes(n);
+      }
+    }
+  },
+  computed: {
+    defaultIcon() {
+      return l.get(this.kind);
+    }
+  }
+};
+var f = function() {
+  var t = this, e = t._self._c;
+  return t.defaultIcon || t.$slots.default ? e("div", { staticClass: "d-notice__icon", attrs: { "aria-hidden": "true" } }, [t._t("default", function() {
+    return [e(t.defaultIcon, { tag: "component", attrs: { size: "400" } })];
+  })], 2) : t._e();
+}, u = [], m = /* @__PURE__ */ d(
+  _,
+  f,
+  u
+);
+const v = m.exports;
+export {
+  v as default
+};
+//# sourceMappingURL=notice-icon.js.map

package/dist/lib/notice/notice-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notice-icon.js","sources":["../../../components/notice/notice_icon.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"defaultIcon || $slots.default\"\n    aria-hidden=\"true\"\n    class=\"d-notice__icon\"\n  >\n    <!-- @slot Slot for the main content -->\n    <slot>\n      <component\n        :is=\"defaultIcon\"\n        size=\"400\"\n      />\n    </slot>\n  </div>\n</template>\n\n<script>\nimport {\n  DtIconInfo,\n  DtIconCheckCircle,\n  DtIconAlertTriangle,\n  DtIconAlertCircle,\n  DtIconBell,\n} from '@dialpad/dialtone-icons/vue2';\nimport { NOTICE_KINDS } from './notice_constants.js';\n\nconst kindToIcon = new Map([\n  ['info', DtIconInfo],\n  ['success', DtIconCheckCircle],\n  ['warning', DtIconAlertTriangle],\n  ['error', DtIconAlertCircle],\n  ['base', DtIconBell],\n]);\n\nexport default {\n  name: 'DtNoticeIcon',\n\n  components: {\n    DtIconInfo,\n    DtIconCheckCircle,\n    DtIconAlertTriangle,\n    DtIconAlertCircle,\n    DtIconBell,\n  },\n\n  props: {\n    /**\n     * Kind of icon\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  computed: {\n    defaultIcon () {\n      return kindToIcon.get(this.kind);\n    },\n  },\n};\n</script>\n"],"names":["kindToIcon","DtIconInfo","DtIconCheckCircle","DtIconAlertTriangle","DtIconAlertCircle","DtIconBell","_sfc_main","kind","NOTICE_KINDS"],"mappings":";;;AA0BA,MAAAA,IAAA,oBAAA,IAAA;AAAA,EACA,CAAA,QAAAC,CAAA;AAAA,EACA,CAAA,WAAAC,CAAA;AAAA,EACA,CAAA,WAAAC,CAAA;AAAA,EACA,CAAA,SAAAC,CAAA;AAAA,EACA,CAAA,QAAAC,CAAA;AACA,CAAA,GAEAC,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,YAAAL;AAAA,IACA,mBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,YAAAC;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAAE,GAAA;AACA,eAAAC,EAAA,SAAAD,CAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,cAAA;AACA,aAAAP,EAAA,IAAA,KAAA,IAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;"}

package/dist/lib/notice/notice.cjs

@@ -0,0 +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;
+//# sourceMappingURL=notice.cjs.map

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

@@ -0,0 +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"}

package/dist/lib/notice/notice.js

@@ -0,0 +1,151 @@
+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 = {
+  name: "DtNotice",
+  components: {
+    DtNoticeIcon: o,
+    DtNoticeContent: i,
+    DtNoticeAction: s
+  },
+  mixins: [a],
+  props: {
+    /**
+     * Sets an ID on the title element of the component. Useful for aria-describedby
+     * or aria-labelledby or any other reason you may need an id to refer to the title.
+     */
+    titleId: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Sets an ID on the content element of the component. Useful for aria-describedby
+     * or aria-labelledby or any other reason you may need an id to refer to the content.
+     */
+    contentId: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Title header of the notice. This can be left blank to remove the title from the notice entirely.
+     */
+    title: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Provides a role for the notice. 'status' is used to communicate a message. 'alert' is used to communicate an
+     * important message that does not contain any interactive elements. 'alertdialog' is used to communicate an
+     * important message that does contain interactive elements.
+     * @values alert, alertdialog, status
+     */
+    role: {
+      type: String,
+      default: "status",
+      validate(e) {
+        return r.includes(e);
+      }
+    },
+    /**
+     * Used in scenarios where the message needs to visually dominate the screen.
+     * This will also change the aria role from status to alert.
+     * @values true, false
+     */
+    important: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Severity level of the notice, sets the icon and background
+     * @values base, error, info, success, warning
+     */
+    kind: {
+      type: String,
+      default: "base",
+      validate(e) {
+        return l.includes(e);
+      }
+    },
+    /**
+     * Props for the notice close button.
+     */
+    closeButtonProps: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * Hides the close button from the notice
+     * @values true, false
+     */
+    hideClose: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Hides the icon from the notice
+     * @values true, false
+     */
+    hideIcon: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Hides the action from the notice
+     * @values true, false
+     */
+    hideAction: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Truncates the content instead of wrapping.
+     * Used when the notice needs to have a fixed height.
+     * @values true, false
+     */
+    truncateText: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [
+    /**
+     * Close button click event
+     *
+     * @event close
+     */
+    "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 u = 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
+);
+const I = p.exports;
+export {
+  I as default
+};
+//# sourceMappingURL=notice.js.map

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

@@ -0,0 +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;;;;;;;;;;;;"}

package/dist/lib/pagination/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./pagination.cjs");exports.DtPagination=t.default;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/lib/pagination/index.js

@@ -0,0 +1,5 @@
+import { default as o } from "./pagination.js";
+export {
+  o as DtPagination
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/lib/pagination/pagination.cjs

@@ -0,0 +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;
+//# sourceMappingURL=pagination.cjs.map

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

@@ -0,0 +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"}