@dialpad/dialtone-vue 3.210.0 → 3.211.0-next.2

package/dist/lib/mode-island/utils.js

@@ -0,0 +1,32 @@
+function n(t) {
+  return t === "light" ? "dark" : "light";
+}
+function o() {
+  return document.documentElement.getAttribute("data-dt-mode") || "light";
+}
+function r() {
+  return document.documentElement.getAttribute("data-dt-contrast") || "default";
+}
+function d(t) {
+  let e = t == null ? void 0 : t.parentElement;
+  for (; e && e !== document.documentElement; ) {
+    if (e.hasAttribute("data-dt-mode"))
+      return e.getAttribute("data-dt-mode");
+    e = e.parentElement;
+  }
+  return o();
+}
+const u = {
+  getOppositeMode: n,
+  getRootMode: o,
+  getRootContrast: r,
+  findParentMode: d
+};
+export {
+  u as default,
+  d as findParentMode,
+  n as getOppositeMode,
+  r as getRootContrast,
+  o as getRootMode
+};
+//# sourceMappingURL=utils.js.map

package/dist/lib/mode-island/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../components/mode_island/utils.js"],"sourcesContent":["/**\n * Get the opposite mode (light <-> dark)\n * @param {string} currentMode - The current mode\n * @returns {string} The opposite mode\n */\nexport function getOppositeMode (currentMode) {\n  return currentMode === 'light' ? 'dark' : 'light';\n}\n\n/**\n * Get the mode from the root HTML element\n * @returns {string} The root mode or 'light' as default\n */\nexport function getRootMode () {\n  const rootMode = document.documentElement.getAttribute('data-dt-mode');\n  return rootMode || 'light';\n}\n\n/**\n * Get the contrast from the root HTML element\n * @returns {string} The root contrast or 'default' as default\n */\nexport function getRootContrast () {\n  const rootContrast = document.documentElement.getAttribute('data-dt-contrast');\n  return rootContrast || 'default';\n}\n\n/**\n * Find the mode from the nearest parent element with data-dt-mode attribute\n * @param {HTMLElement} el - The starting element\n * @returns {string} The parent mode or root mode\n */\nexport function findParentMode (el) {\n  let parent = el?.parentElement;\n  while (parent && parent !== document.documentElement) {\n    if (parent.hasAttribute('data-dt-mode')) {\n      return parent.getAttribute('data-dt-mode');\n    }\n    parent = parent.parentElement;\n  }\n  return getRootMode();\n}\n\nexport default {\n  getOppositeMode,\n  getRootMode,\n  getRootContrast,\n  findParentMode,\n};"],"names":["getOppositeMode","currentMode","getRootMode","getRootContrast","findParentMode","el","parent","utils"],"mappings":"AAKO,SAASA,EAAiBC,GAAa;AAC5C,SAAOA,MAAgB,UAAU,SAAS;AAC5C;AAMO,SAASC,IAAe;AAE7B,SADiB,SAAS,gBAAgB,aAAa,cAAc,KAClD;AACrB;AAMO,SAASC,IAAmB;AAEjC,SADqB,SAAS,gBAAgB,aAAa,kBAAkB,KACtD;AACzB;AAOO,SAASC,EAAgBC,GAAI;AAClC,MAAIC,IAASD,KAAA,gBAAAA,EAAI;AACjB,SAAOC,KAAUA,MAAW,SAAS,mBAAiB;AACpD,QAAIA,EAAO,aAAa,cAAc;AACpC,aAAOA,EAAO,aAAa,cAAc;AAE3C,IAAAA,IAASA,EAAO;AAAA,EAClB;AACA,SAAOJ,EAAW;AACpB;AAEA,MAAAK,IAAe;AAAA,EACb,iBAAAP;AAAA,EACA,aAAAE;AAAA,EACA,iBAAAC;AAAA,EACA,gBAAAC;AACF;"}

package/dist/lib/mode-island/validators.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("./mode-island-constants.cjs");function e(t){return Object.values(o.DT_MODE_ISLAND_TYPES).includes(t)}const a={modeValidator:e};exports.default=a;exports.modeValidator=e;
+//# sourceMappingURL=validators.cjs.map

package/dist/lib/mode-island/validators.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"validators.cjs","sources":["../../../components/mode_island/validators.js"],"sourcesContent":["import { DT_MODE_ISLAND_TYPES } from './mode_island_constants';\n\nexport function modeValidator (mode) {\n  return Object.values(DT_MODE_ISLAND_TYPES).includes(mode);\n}\n\nexport default {\n  modeValidator,\n};"],"names":["modeValidator","mode","DT_MODE_ISLAND_TYPES","validators"],"mappings":"2JAEO,SAASA,EAAeC,EAAM,CACnC,OAAO,OAAO,OAAOC,EAAAA,oBAAoB,EAAE,SAASD,CAAI,CAC1D,CAEA,MAAAE,EAAe,CACb,cAAAH,CACF"}

package/dist/lib/mode-island/validators.js

@@ -0,0 +1,12 @@
+import { DT_MODE_ISLAND_TYPES as o } from "./mode-island-constants.js";
+function a(t) {
+  return Object.values(o).includes(t);
+}
+const r = {
+  modeValidator: a
+};
+export {
+  r as default,
+  a as modeValidator
+};
+//# sourceMappingURL=validators.js.map

package/dist/lib/mode-island/validators.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validators.js","sources":["../../../components/mode_island/validators.js"],"sourcesContent":["import { DT_MODE_ISLAND_TYPES } from './mode_island_constants';\n\nexport function modeValidator (mode) {\n  return Object.values(DT_MODE_ISLAND_TYPES).includes(mode);\n}\n\nexport default {\n  modeValidator,\n};"],"names":["modeValidator","mode","DT_MODE_ISLAND_TYPES","validators"],"mappings":";AAEO,SAASA,EAAeC,GAAM;AACnC,SAAO,OAAO,OAAOC,CAAoB,EAAE,SAASD,CAAI;AAC1D;AAEA,MAAAE,IAAe;AAAA,EACb,eAAAH;AACF;"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("@dialpad/dialtone-icons/vue3"),a=require("../../shared/sr_only_close_button.cjs"),r=require("../../localization/index.cjs"),e=require("vue"),u=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),d=require("../button/button.cjs"),_={compatConfig:{MODE:3},name:"DtNoticeAction",components:{DtIconClose:i.DtIconClose,DtButton:d.default,SrOnlyCloseButton:a.default},props:{hideClose:{type:Boolean,default:!1},hideAction:{type:Boolean,default:!1}},emits:["close"],data(){return{i18n:new r.DialtoneLocalization}},computed:{closeButtonTitle(){return this.i18n.$t("DIALTONE_CLOSE_BUTTON")}},mounted(){this.hideClose||(this.lastFocusedElement=document.activeElement)},beforeUnmount(){var t;(t=this.lastFocusedElement)==null||t.focus()},methods:{close(){this.$emit("close")}}},m={class:"d-notice__actions","data-qa":"notice-content-actions"};function f(t,C,n,h,B,o){const c=e.resolveComponent("dt-icon-close"),l=e.resolveComponent("dt-button"),s=e.resolveComponent("sr-only-close-button");return e.openBlock(),e.createElementBlock("div",m,[n.hideAction?e.createCommentVNode("",!0):e.renderSlot(t.$slots,"default",{key:0}),n.hideClose?(e.openBlock(),e.createBlock(s,{key:2,onClose:o.close},null,8,["onClose"])):(e.openBlock(),e.createBlock(l,{key:1,ref:"closeButton",circle:!0,"data-qa":"dt-notice-action-close-button",importance:"clear",size:"sm","aria-label":o.closeButtonTitle,title:o.closeButtonTitle,onClick:o.close},{icon:e.withCtx(()=>[e.createVNode(c,{size:"200"})]),_:1},8,["aria-label","title","onClick"]))])}const p=u._(_,[["render",f]]);exports.default=p;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("@dialpad/dialtone-icons/vue3"),a=require("../../shared/sr_only_close_button.cjs"),r=require("../../localization/index.cjs"),e=require("vue"),u=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),d=require("../button/button.cjs"),_={compatConfig:{MODE:3},name:"DtNoticeAction",components:{DtIconClose:i.DtIconClose,DtButton:d.default,SrOnlyCloseButton:a.default},props:{hideClose:{type:Boolean,default:!1},hideAction:{type:Boolean,default:!1}},emits:["close"],data(){return{i18n:new r.DialtoneLocalization}},computed:{closeButtonTitle(){return this.i18n.$t("DIALTONE_CLOSE_BUTTON")}},mounted(){this.hideClose||(this.lastFocusedElement=document.activeElement)},beforeUnmount(){var t;(t=this.lastFocusedElement)==null||t.focus()},methods:{close(){this.$emit("close")}}},m={class:"d-notice__actions","data-qa":"notice-content-actions"};function f(t,C,n,h,B,o){const c=e.resolveComponent("dt-icon-close"),l=e.resolveComponent("dt-button"),s=e.resolveComponent("sr-only-close-button");return e.openBlock(),e.createElementBlock("div",m,[n.hideAction?e.createCommentVNode("",!0):e.renderSlot(t.$slots,"default",{key:0}),n.hideClose?(e.openBlock(),e.createBlock(s,{key:2,onClose:o.close},null,8,["onClose"])):(e.openBlock(),e.createBlock(l,{key:1,ref:"closeButton","data-qa":"dt-notice-action-close-button",importance:"clear",kind:"muted",size:"sm","aria-label":o.closeButtonTitle,title:o.closeButtonTitle,onClick:o.close},{startIcon:e.withCtx(()=>[e.createVNode(c,{size:"200"})]),_:1},8,["aria-label","title","onClick"]))])}const p=u._(_,[["render",f]]);exports.default=p;
 //# sourceMappingURL=notice-action.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"notice-action.cjs","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=\"true\"\n      data-qa=\"dt-notice-action-close-button\"\n      importance=\"clear\"\n      size=\"sm\"\n      :aria-label=\"closeButtonTitle\"\n      :title=\"closeButtonTitle\"\n      @click=\"close\"\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/vue3';\nimport { DtButton } from '@/components/button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtNoticeAction',\n\n  components: {\n    DtIconClose,\n    DtButton,\n    SrOnlyCloseButton,\n  },\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  data () {\n    return {\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\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  beforeUnmount () {\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","DialtoneLocalization","_a","_openBlock","_createElementBlock","_hoisted_1","$props","_renderSlot","_ctx","_createBlock","_component_sr_only_close_button","$options","_component_dt_button","_createVNode","_component_dt_icon_close"],"mappings":"sWAqCKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,iBAEN,WAAY,aACVC,EAAAA,YACA,SAAAC,EAAAA,QACA,kBAAAC,EAAAA,SAGF,MAAO,CAKL,UAAW,CACT,KAAM,QACN,QAAS,IAOX,WAAY,CACV,KAAM,QACN,QAAS,KAIb,MAAO,CAML,SAGF,MAAQ,CACN,MAAO,CACL,KAAM,IAAIC,EAAAA,qBAEd,EAEA,SAAU,CACR,kBAAoB,CAClB,OAAO,KAAK,KAAK,GAAG,uBAAuB,CAC7C,GAGF,SAAW,CACJ,KAAK,YACR,KAAK,mBAAqB,SAAS,cAEvC,EAEA,eAAiB,QACfC,EAAA,KAAK,qBAAL,MAAAA,EAAyB,OAC3B,EAEA,QAAS,CACP,OAAS,CACP,KAAK,MAAM,OAAO,CACpB,EAEJ,KArGI,MAAM,oBACN,UAAQ,6KAFV,OAAAC,YAAA,EAAAC,qBA2BM,MA3BNC,EA2BM,CAtBSC,EAAA,uCAAbC,EAAAA,WAA2BC,EAAA,OAAA,UAAA,CAAA,IAAA,CAAA,CAAA,EAElBF,EAAA,yBAgBTG,EAAAA,YAGEC,EAAA,OADC,QAAOC,EAAA,2CAnBVF,EAAAA,YAgBYG,EAAA,OAdV,IAAI,cACH,OAAQ,GACT,UAAQ,gCACR,WAAW,QACX,KAAK,KACJ,aAAYD,EAAA,iBACZ,MAAOA,EAAA,iBACP,QAAOA,EAAA,QAEG,eACT,IAEE,CAFFE,EAAAA,YAEEC,EAAA,CADA,KAAK,KAAK,CAAA"}
+{"version":3,"file":"notice-action.cjs","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      importance=\"clear\"\n      kind=\"muted\"\n      size=\"sm\"\n      :aria-label=\"closeButtonTitle\"\n      :title=\"closeButtonTitle\"\n      @click=\"close\"\n    >\n      <template #startIcon>\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/vue3';\nimport { DtButton } from '@/components/button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtNoticeAction',\n\n  components: {\n    DtIconClose,\n    DtButton,\n    SrOnlyCloseButton,\n  },\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  data () {\n    return {\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\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  beforeUnmount () {\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","DialtoneLocalization","_a","_openBlock","_createElementBlock","_hoisted_1","$props","_renderSlot","_ctx","_createBlock","_component_sr_only_close_button","$options","_component_dt_button","_createVNode","_component_dt_icon_close"],"mappings":"sWAqCKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,iBAEN,WAAY,aACVC,EAAAA,YACA,SAAAC,EAAAA,QACA,kBAAAC,EAAAA,SAGF,MAAO,CAKL,UAAW,CACT,KAAM,QACN,QAAS,IAOX,WAAY,CACV,KAAM,QACN,QAAS,KAIb,MAAO,CAML,SAGF,MAAQ,CACN,MAAO,CACL,KAAM,IAAIC,EAAAA,qBAEd,EAEA,SAAU,CACR,kBAAoB,CAClB,OAAO,KAAK,KAAK,GAAG,uBAAuB,CAC7C,GAGF,SAAW,CACJ,KAAK,YACR,KAAK,mBAAqB,SAAS,cAEvC,EAEA,eAAiB,QACfC,EAAA,KAAK,qBAAL,MAAAA,EAAyB,OAC3B,EAEA,QAAS,CACP,OAAS,CACP,KAAK,MAAM,OAAO,CACpB,EAEJ,KArGI,MAAM,oBACN,UAAQ,6KAFV,OAAAC,YAAA,EAAAC,qBA2BM,MA3BNC,EA2BM,CAtBSC,EAAA,uCAAbC,EAAAA,WAA2BC,EAAA,OAAA,UAAA,CAAA,IAAA,CAAA,CAAA,EAElBF,EAAA,yBAgBTG,EAAAA,YAGEC,EAAA,OADC,QAAOC,EAAA,2CAnBVF,EAAAA,YAgBYG,EAAA,OAdV,IAAI,cACJ,UAAQ,gCACR,WAAW,QACX,KAAK,QACL,KAAK,KACJ,aAAYD,EAAA,iBACZ,MAAOA,EAAA,iBACP,QAAOA,EAAA,QAEG,oBACT,IAEE,CAFFE,EAAAA,YAEEC,EAAA,CADA,KAAK,KAAK,CAAA"}

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

@@ -4,7 +4,7 @@ import { DialtoneLocalization as d } from "../../localization/index.js";
 import { resolveComponent as o, openBlock as n, createElementBlock as u, renderSlot as _, createCommentVNode as f, createBlock as l, withCtx as p, createVNode as h } from "vue";
 import { _ as C } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 import B from "../button/button.js";
-const b = {
+const k = {
   compatConfig: { MODE: 3 },
   name: "DtNoticeAction",
   components: {
@@ -60,13 +60,13 @@ const b = {
       this.$emit("close");
     }
   }
-}, k = {
+}, b = {
   class: "d-notice__actions",
   "data-qa": "notice-content-actions"
 };
 function y(t, D, c, E, N, e) {
   const s = o("dt-icon-close"), i = o("dt-button"), a = o("sr-only-close-button");
-  return n(), u("div", k, [
+  return n(), u("div", b, [
     c.hideAction ? f("", !0) : _(t.$slots, "default", { key: 0 }),
     c.hideClose ? (n(), l(a, {
       key: 2,
@@ -74,23 +74,23 @@ function y(t, D, c, E, N, e) {
     }, null, 8, ["onClose"])) : (n(), l(i, {
       key: 1,
       ref: "closeButton",
-      circle: !0,
       "data-qa": "dt-notice-action-close-button",
       importance: "clear",
+      kind: "muted",
       size: "sm",
       "aria-label": e.closeButtonTitle,
       title: e.closeButtonTitle,
       onClick: e.close
     }, {
-      icon: p(() => [
+      startIcon: p(() => [
         h(s, { size: "200" })
       ]),
       _: 1
     }, 8, ["aria-label", "title", "onClick"]))
   ]);
 }
-const L = /* @__PURE__ */ C(b, [["render", y]]);
+const I = /* @__PURE__ */ C(k, [["render", y]]);
 export {
-  L as default
+  I as default
 };
 //# sourceMappingURL=notice-action.js.map

package/dist/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      :circle=\"true\"\n      data-qa=\"dt-notice-action-close-button\"\n      importance=\"clear\"\n      size=\"sm\"\n      :aria-label=\"closeButtonTitle\"\n      :title=\"closeButtonTitle\"\n      @click=\"close\"\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/vue3';\nimport { DtButton } from '@/components/button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtNoticeAction',\n\n  components: {\n    DtIconClose,\n    DtButton,\n    SrOnlyCloseButton,\n  },\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  data () {\n    return {\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\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  beforeUnmount () {\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","DialtoneLocalization","_a","_openBlock","_createElementBlock","_hoisted_1","$props","_renderSlot","_ctx","_createBlock","_component_sr_only_close_button","$options","_component_dt_button","_createVNode","_component_dt_icon_close"],"mappings":";;;;;;AAqCA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,mBAAAC;AAAA;EAGF,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA;;EAIb,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAML;AAAA;EAGF,OAAQ;AACN,WAAO;AAAA,MACL,MAAM,IAAIC,EAAoB;AAAA;EAElC;AAAA,EAEA,UAAU;AAAA,IACR,mBAAoB;AAClB,aAAO,KAAK,KAAK,GAAG,uBAAuB;AAAA,IAC7C;AAAA;EAGF,UAAW;AACT,IAAK,KAAK,cACR,KAAK,qBAAqB,SAAS;AAAA,EAEvC;AAAA,EAEA,gBAAiB;;AACf,KAAAC,IAAA,KAAK,uBAAL,QAAAA,EAAyB;AAAA,EAC3B;AAAA,EAEA,SAAS;AAAA,IACP,QAAS;AACP,WAAK,MAAM,OAAO;AAAA,IACpB;AAAA;AAEJ;EArGI,OAAM;AAAA,EACN,WAAQ;;;;AAFV,SAAAC,EAAA,GAAAC,EA2BM,OA3BNC,GA2BM;AAAA,IAtBSC,EAAA,yBAAbC,EAA2BC,EAAA,QAAA,WAAA,EAAA,KAAA,EAAA,CAAA;AAAA,IAElBF,EAAA,kBAgBTG,EAGEC,GAAA;AAAA;MADC,SAAOC,EAAA;AAAA,sCAnBVF,EAgBYG,GAAA;AAAA;MAdV,KAAI;AAAA,MACH,QAAQ;AAAA,MACT,WAAQ;AAAA,MACR,YAAW;AAAA,MACX,MAAK;AAAA,MACJ,cAAYD,EAAA;AAAA,MACZ,OAAOA,EAAA;AAAA,MACP,SAAOA,EAAA;AAAA;MAEG,QACT,MAEE;AAAA,QAFFE,EAEEC,GAAA,EADA,MAAK,MAAK,CAAA;AAAA;;;;;;"}
+{"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      importance=\"clear\"\n      kind=\"muted\"\n      size=\"sm\"\n      :aria-label=\"closeButtonTitle\"\n      :title=\"closeButtonTitle\"\n      @click=\"close\"\n    >\n      <template #startIcon>\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/vue3';\nimport { DtButton } from '@/components/button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtNoticeAction',\n\n  components: {\n    DtIconClose,\n    DtButton,\n    SrOnlyCloseButton,\n  },\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  data () {\n    return {\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\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  beforeUnmount () {\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","DialtoneLocalization","_a","_openBlock","_createElementBlock","_hoisted_1","$props","_renderSlot","_ctx","_createBlock","_component_sr_only_close_button","$options","_component_dt_button","_createVNode","_component_dt_icon_close"],"mappings":";;;;;;AAqCA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,mBAAAC;AAAA;EAGF,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA;;EAIb,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAML;AAAA;EAGF,OAAQ;AACN,WAAO;AAAA,MACL,MAAM,IAAIC,EAAoB;AAAA;EAElC;AAAA,EAEA,UAAU;AAAA,IACR,mBAAoB;AAClB,aAAO,KAAK,KAAK,GAAG,uBAAuB;AAAA,IAC7C;AAAA;EAGF,UAAW;AACT,IAAK,KAAK,cACR,KAAK,qBAAqB,SAAS;AAAA,EAEvC;AAAA,EAEA,gBAAiB;;AACf,KAAAC,IAAA,KAAK,uBAAL,QAAAA,EAAyB;AAAA,EAC3B;AAAA,EAEA,SAAS;AAAA,IACP,QAAS;AACP,WAAK,MAAM,OAAO;AAAA,IACpB;AAAA;AAEJ;EArGI,OAAM;AAAA,EACN,WAAQ;;;;AAFV,SAAAC,EAAA,GAAAC,EA2BM,OA3BNC,GA2BM;AAAA,IAtBSC,EAAA,yBAAbC,EAA2BC,EAAA,QAAA,WAAA,EAAA,KAAA,EAAA,CAAA;AAAA,IAElBF,EAAA,kBAgBTG,EAGEC,GAAA;AAAA;MADC,SAAOC,EAAA;AAAA,sCAnBVF,EAgBYG,GAAA;AAAA;MAdV,KAAI;AAAA,MACJ,WAAQ;AAAA,MACR,YAAW;AAAA,MACX,MAAK;AAAA,MACL,MAAK;AAAA,MACJ,cAAYD,EAAA;AAAA,MACZ,OAAOA,EAAA;AAAA,MACP,SAAOA,EAAA;AAAA;MAEG,aACT,MAEE;AAAA,QAFFE,EAEEC,GAAA,EADA,MAAK,MAAK,CAAA;AAAA;;;;;;"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("../../common/utils/index.cjs"),e=require("vue"),c=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),d={compatConfig:{MODE:3},name:"DtNoticeContent",props:{title:{type:String,default:""},titleId:{type:String,default:void 0},contentId:{type:String,default:void 0}},data(){return{hasSlotContent:i.hasSlotContent}}},l={class:"d-notice__content","data-qa":"notice-content"},s=["id"],a=["id"];function r(n,_,t,m,o,f){return e.openBlock(),e.createElementBlock("div",l,[t.title||o.hasSlotContent(n.$slots.titleOverride)?(e.openBlock(),e.createElementBlock("p",{key:0,id:t.titleId,class:"d-notice__title","data-qa":"notice-content-title"},[e.renderSlot(n.$slots,"titleOverride",{},()=>[e.createTextVNode(e.toDisplayString(t.title),1)])],8,s)):e.createCommentVNode("",!0),e.createElementVNode("p",{id:t.contentId,class:"d-notice__message","data-qa":"notice-content-message"},[e.renderSlot(n.$slots,"default")],8,a)])}const u=c._(d,[["render",r]]);exports.default=u;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("../../common/utils/index.cjs"),t=require("vue"),l=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),a=require("../text/text.cjs"),s={compatConfig:{MODE:3},name:"DtNoticeContent",components:{DtText:a.default},props:{title:{type:String,default:""},titleId:{type:String,default:void 0},contentId:{type:String,default:void 0}},data(){return{hasSlotContent:d.hasSlotContent}}},c={class:"d-notice__content","data-qa":"notice-content"};function r(n,_,e,m,i,p){const o=t.resolveComponent("dt-text");return t.openBlock(),t.createElementBlock("div",c,[e.title||i.hasSlotContent(n.$slots.titleOverride)?(t.openBlock(),t.createBlock(o,{key:0,id:e.titleId,kind:"headline",size:"md",density:"200",as:"p",class:"d-notice__title","data-qa":"notice-content-title"},{default:t.withCtx(()=>[t.renderSlot(n.$slots,"titleOverride",{},()=>[t.createTextVNode(t.toDisplayString(e.title),1)])]),_:3},8,["id"])):t.createCommentVNode("",!0),t.createVNode(o,{id:e.contentId,kind:"body",size:"sm",wrap:"pretty",as:"p",class:"d-notice__message","data-qa":"notice-content-message"},{default:t.withCtx(()=>[t.renderSlot(n.$slots,"default")]),_:3},8,["id"])])}const u=l._(s,[["render",r]]);exports.default=u;
 //# sourceMappingURL=notice-content.cjs.map

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

@@ -1 +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 || hasSlotContent($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>\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\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  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n};\n</script>\n"],"names":["_sfc_main","hasSlotContent","_openBlock","_createElementBlock","_hoisted_1","$props","$data","_ctx","_renderSlot","_createElementVNode"],"mappings":"uOA8BKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,kBAEN,MAAO,CAIL,MAAO,CACL,KAAM,OACN,QAAS,IAOX,QAAS,CACP,KAAM,OACN,QAAS,QAOX,UAAW,CACT,KAAM,OACN,QAAS,SAIb,MAAQ,CACN,MAAO,CACL,eAAAC,EAAAA,eAEJ,CACF,KAjEI,MAAM,oBACN,UAAQ,4DAFV,OAAAC,YAAA,EAAAC,qBAuBM,MAvBNC,EAuBM,CAlBIC,EAAA,OAASC,EAAA,eAAeC,EAAA,OAAO,aAAa,iBADpDJ,EAAAA,mBAUI,IAAA,OARD,GAAIE,EAAA,QACL,MAAM,kBACN,UAAQ,yBAGRG,EAAAA,WAEOD,4BAFP,IAEO,qCADFF,EAAA,KAAK,EAAA,CAAA,uCAGZI,EAAAA,mBAOI,IAAA,CAND,GAAIJ,EAAA,UACL,MAAM,oBACN,UAAQ,2BAGRG,aAAQD,EAAA,OAAA,SAAA"}
+{"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    <dt-text\n      v-if=\"title || hasSlotContent($slots.titleOverride)\"\n      :id=\"titleId\"\n      kind=\"headline\"\n      size=\"md\"\n      density=\"200\"\n      as=\"p\"\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    </dt-text>\n    <dt-text\n      :id=\"contentId\"\n      kind=\"body\"\n      size=\"sm\"\n      wrap=\"pretty\"\n      as=\"p\"\n      class=\"d-notice__message\"\n      data-qa=\"notice-content-message\"\n    >\n      <!-- @slot Slot for main content -->\n      <slot />\n    </dt-text>\n  </div>\n</template>\n\n<script>\nimport { hasSlotContent } from '@/common/utils';\nimport { DtText } from '@/components/text';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtNoticeContent',\n\n  components: { DtText },\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  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n};\n</script>\n"],"names":["_sfc_main","DtText","hasSlotContent","_openBlock","_createElementBlock","_hoisted_1","$props","$data","_ctx","_createBlock","_component_dt_text","_renderSlot","_createVNode"],"mappings":"qQAuCKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,kBAEN,WAAY,CAAA,OAAEC,EAAAA,SAEd,MAAO,CAIL,MAAO,CACL,KAAM,OACN,QAAS,IAOX,QAAS,CACP,KAAM,OACN,QAAS,QAOX,UAAW,CACT,KAAM,OACN,QAAS,SAIb,MAAQ,CACN,MAAO,CACL,eAAAC,EAAAA,eAEJ,CACF,KA5EI,MAAM,oBACN,UAAQ,gFAFV,OAAAC,YAAA,EAAAC,qBA+BM,MA/BNC,EA+BM,CA1BIC,EAAA,OAASC,EAAA,eAAeC,EAAA,OAAO,aAAa,iBADpDC,EAAAA,YAcUC,EAAA,OAZP,GAAIJ,EAAA,QACL,KAAK,WACL,KAAK,KACL,QAAQ,MACR,GAAG,IACH,MAAM,kBACN,UAAQ,2CAGR,IAEO,CAFPK,EAAAA,WAEOH,4BAFP,IAEO,qCADFF,EAAA,KAAK,EAAA,CAAA,kDAGZM,EAAAA,YAWUF,EAAA,CAVP,GAAIJ,EAAA,UACL,KAAK,OACL,KAAK,KACL,KAAK,SACL,GAAG,IACH,MAAM,oBACN,UAAQ,6CAGR,IAAQ,CAARK,aAAQH,EAAA,OAAA,SAAA"}

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

@@ -1,9 +1,11 @@
-import { hasSlotContent as a } from "../../common/utils/index.js";
-import { openBlock as n, createElementBlock as o, renderSlot as i, createTextVNode as c, toDisplayString as s, createCommentVNode as r, createElementVNode as l } from "vue";
-import { _ } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-const f = {
+import { hasSlotContent as s } from "../../common/utils/index.js";
+import { resolveComponent as c, openBlock as o, createElementBlock as r, createBlock as l, withCtx as i, renderSlot as d, createTextVNode as m, toDisplayString as _, createCommentVNode as f, createVNode as p } from "vue";
+import { _ as u } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import y from "../text/text.js";
+const C = {
   compatConfig: { MODE: 3 },
   name: "DtNoticeContent",
+  components: { DtText: y },
   props: {
     /**
      * Title header of the notice. This can be left blank to remove the title from the notice entirely.
@@ -31,36 +33,51 @@ const f = {
   },
   data() {
     return {
-      hasSlotContent: a
+      hasSlotContent: s
     };
   }
-}, m = {
+}, g = {
   class: "d-notice__content",
   "data-qa": "notice-content"
-}, u = ["id"], p = ["id"];
-function g(e, S, t, h, d, C) {
-  return n(), o("div", m, [
-    t.title || d.hasSlotContent(e.$slots.titleOverride) ? (n(), o("p", {
+};
+function S(e, h, t, k, a, x) {
+  const n = c("dt-text");
+  return o(), r("div", g, [
+    t.title || a.hasSlotContent(e.$slots.titleOverride) ? (o(), l(n, {
       key: 0,
       id: t.titleId,
+      kind: "headline",
+      size: "md",
+      density: "200",
+      as: "p",
       class: "d-notice__title",
       "data-qa": "notice-content-title"
-    }, [
-      i(e.$slots, "titleOverride", {}, () => [
-        c(s(t.title), 1)
-      ])
-    ], 8, u)) : r("", !0),
-    l("p", {
+    }, {
+      default: i(() => [
+        d(e.$slots, "titleOverride", {}, () => [
+          m(_(t.title), 1)
+        ])
+      ]),
+      _: 3
+    }, 8, ["id"])) : f("", !0),
+    p(n, {
       id: t.contentId,
+      kind: "body",
+      size: "sm",
+      wrap: "pretty",
+      as: "p",
       class: "d-notice__message",
       "data-qa": "notice-content-message"
-    }, [
-      i(e.$slots, "default")
-    ], 8, p)
+    }, {
+      default: i(() => [
+        d(e.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["id"])
   ]);
 }
-const I = /* @__PURE__ */ _(f, [["render", g]]);
+const q = /* @__PURE__ */ u(C, [["render", S]]);
 export {
-  I as default
+  q as default
 };
 //# sourceMappingURL=notice-content.js.map

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

@@ -1 +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 || hasSlotContent($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>\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\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  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n};\n</script>\n"],"names":["_sfc_main","hasSlotContent","_openBlock","_createElementBlock","_hoisted_1","$props","$data","_ctx","_renderSlot","_createElementVNode"],"mappings":";;;AA8BA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;EAIb,OAAQ;AACN,WAAO;AAAA,MACL,gBAAAC;AAAA;EAEJ;AACF;EAjEI,OAAM;AAAA,EACN,WAAQ;;;AAFV,SAAAC,EAAA,GAAAC,EAuBM,OAvBNC,GAuBM;AAAA,IAlBIC,EAAA,SAASC,EAAA,eAAeC,EAAA,OAAO,aAAa,UADpDJ,EAUI,KAAA;AAAA;MARD,IAAIE,EAAA;AAAA,MACL,OAAM;AAAA,MACN,WAAQ;AAAA;MAGRG,EAEOD,+BAFP,MAEO;AAAA,YADFF,EAAA,KAAK,GAAA,CAAA;AAAA;;IAGZI,EAOI,KAAA;AAAA,MAND,IAAIJ,EAAA;AAAA,MACL,OAAM;AAAA,MACN,WAAQ;AAAA;MAGRG,EAAQD,EAAA,QAAA,SAAA;AAAA;;;;"}
+{"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    <dt-text\n      v-if=\"title || hasSlotContent($slots.titleOverride)\"\n      :id=\"titleId\"\n      kind=\"headline\"\n      size=\"md\"\n      density=\"200\"\n      as=\"p\"\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    </dt-text>\n    <dt-text\n      :id=\"contentId\"\n      kind=\"body\"\n      size=\"sm\"\n      wrap=\"pretty\"\n      as=\"p\"\n      class=\"d-notice__message\"\n      data-qa=\"notice-content-message\"\n    >\n      <!-- @slot Slot for main content -->\n      <slot />\n    </dt-text>\n  </div>\n</template>\n\n<script>\nimport { hasSlotContent } from '@/common/utils';\nimport { DtText } from '@/components/text';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtNoticeContent',\n\n  components: { DtText },\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  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n};\n</script>\n"],"names":["_sfc_main","DtText","hasSlotContent","_openBlock","_createElementBlock","_hoisted_1","$props","$data","_ctx","_createBlock","_component_dt_text","_renderSlot","_createVNode"],"mappings":";;;;AAuCA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EAEN,YAAY,EAAE,QAAAC;EAEd,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;EAIb,OAAQ;AACN,WAAO;AAAA,MACL,gBAAAC;AAAA;EAEJ;AACF;EA5EI,OAAM;AAAA,EACN,WAAQ;;;;AAFV,SAAAC,EAAA,GAAAC,EA+BM,OA/BNC,GA+BM;AAAA,IA1BIC,EAAA,SAASC,EAAA,eAAeC,EAAA,OAAO,aAAa,UADpDC,EAcUC,GAAA;AAAA;MAZP,IAAIJ,EAAA;AAAA,MACL,MAAK;AAAA,MACL,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,IAAG;AAAA,MACH,OAAM;AAAA,MACN,WAAQ;AAAA;iBAGR,MAEO;AAAA,QAFPK,EAEOH,+BAFP,MAEO;AAAA,cADFF,EAAA,KAAK,GAAA,CAAA;AAAA;;;;IAGZM,EAWUF,GAAA;AAAA,MAVP,IAAIJ,EAAA;AAAA,MACL,MAAK;AAAA,MACL,MAAK;AAAA,MACL,MAAK;AAAA,MACL,IAAG;AAAA,MACH,OAAM;AAAA,MACN,WAAQ;AAAA;iBAGR,MAAQ;AAAA,QAARK,EAAQH,EAAA,QAAA,SAAA;AAAA;;;;;;"}

package/dist/lib/notice/notice.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("./notice-icon.cjs"),s=require("./notice-content.cjs"),u=require("./notice-action.cjs"),i=require("./notice-constants.cjs"),e=require("vue"),f=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),_={compatConfig:{MODE:3},name:"DtNotice",components:{DtNoticeIcon:r.default,DtNoticeContent:s.default,DtNoticeAction:u.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)}},hideClose:{type:Boolean,default:!1},hideIcon:{type:Boolean,default:!1},hideAction:{type:Boolean,default:!1},truncateText:{type:Boolean,default:!1}},emits:["close","click"],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}]}}};function m(t,o,n,p,h,c){const l=e.resolveComponent("dt-notice-icon"),d=e.resolveComponent("dt-notice-content"),a=e.resolveComponent("dt-notice-action");return e.openBlock(),e.createElementBlock("aside",{class:e.normalizeClass(c.noticeClass),"data-qa":"notice"},[n.hideIcon?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(l,{key:0,kind:n.kind},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"icon")]),_:3},8,["kind"])),e.createVNode(d,{"title-id":n.titleId,"content-id":n.contentId,title:n.title,role:n.role},{titleOverride:e.withCtx(()=>[e.renderSlot(t.$slots,"titleOverride")]),default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},8,["title-id","content-id","title","role"]),e.createVNode(a,{"hide-action":n.hideAction,"hide-close":n.hideClose,onClose:o[0]||(o[0]=S=>t.$emit("close"))},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"action")]),_:3},8,["hide-action","hide-close"])],2)}const C=f._(_,[["render",m]]);exports.default=C;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("./notice-icon.cjs"),r=require("./notice-content.cjs"),u=require("./notice-action.cjs"),i=require("./notice-constants.cjs"),e=require("vue"),f=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),_={compatConfig:{MODE:3},name:"DtNotice",components:{DtNoticeIcon:s.default,DtNoticeContent:r.default,DtNoticeAction:u.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)}},hideClose:{type:Boolean,default:!1},hideIcon:{type:Boolean,default:!1},hideAction:{type:Boolean,default:!1},truncateText:{type:Boolean,default:!1}},emits:["close","click"],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}]}}};function m(t,o,n,h,p,c){const l=e.resolveComponent("dt-notice-icon"),d=e.resolveComponent("dt-notice-content"),a=e.resolveComponent("dt-notice-action");return e.openBlock(),e.createElementBlock("aside",{class:e.normalizeClass(c.noticeClass),"data-qa":"notice"},[n.hideIcon?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(l,{key:0,kind:n.kind,class:e.normalizeClass({"d-notice__icon--has-title":n.title||t.$slots.titleOverride})},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"icon")]),_:3},8,["kind","class"])),e.createVNode(d,{"title-id":n.titleId,"content-id":n.contentId,title:n.title,role:n.role},{titleOverride:e.withCtx(()=>[e.renderSlot(t.$slots,"titleOverride")]),default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},8,["title-id","content-id","title","role"]),e.createVNode(a,{"hide-action":n.hideAction,"hide-close":n.hideClose,onClose:o[0]||(o[0]=S=>t.$emit("close"))},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"action")]),_:3},8,["hide-action","hide-close"])],2)}const C=f._(_,[["render",m]]);exports.default=C;
 //# sourceMappingURL=notice.cjs.map

package/dist/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    >\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=\"$emit('close')\"\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  compatConfig: { MODE: 3 },\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     * Native button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\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","_createElementBlock","$options","$props","_createBlock","_component_dt_notice_icon","_renderSlot","_ctx","_createVNode","_component_dt_notice_content","_component_dt_notice_action"],"mappings":"mUA+CKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,WAEN,WAAY,cACVC,EAAAA,QACA,gBAAAC,EAAAA,QACA,eAAAC,EAAAA,SAGF,MAAO,CAKL,QAAS,CACP,KAAM,OACN,QAAS,QAOX,UAAW,CACT,KAAM,OACN,QAAS,QAMX,MAAO,CACL,KAAM,OACN,QAAS,IASX,KAAM,CACJ,KAAM,OACN,QAAS,SACT,SAAUC,EAAM,CACd,OAAOC,EAAAA,aAAa,SAASD,CAAI,CACnC,GAQF,UAAW,CACT,KAAM,QACN,QAAS,IAOX,KAAM,CACJ,KAAM,OACN,QAAS,OACT,SAAUE,EAAM,CACd,OAAOC,EAAAA,aAAa,SAASD,CAAI,CACnC,GAOF,UAAW,CACT,KAAM,QACN,QAAS,IAOX,SAAU,CACR,KAAM,QACN,QAAS,IAOX,WAAY,CACV,KAAM,QACN,QAAS,IAQX,aAAc,CACZ,KAAM,QACN,QAAS,KAIb,MAAO,CAML,QAQA,SAGF,SAAU,CACR,aAAe,CAQb,MAAO,CACL,WARkB,CAClB,MAAO,kBACP,KAAM,iBACN,QAAS,oBACT,QAAS,oBACT,KAAM,kBAIM,KAAK,IAAI,EACrB,CAAE,sBAAuB,KAAK,UAAW,qBAAsB,KAAK,cAExE,EAEJ,+KA9LEE,EAAAA,mBAiCQ,QAAA,CAhCL,uBAAOC,EAAA,WAAW,EACnB,UAAQ,WAGCC,EAAA,oDADTC,EAAAA,YAMiBC,EAAA,OAJd,KAAMF,EAAA,yBAGP,IAAoB,CAApBG,aAAoBC,EAAA,OAAA,MAAA,sBAEtBC,EAAAA,YAaoBC,EAAA,CAZjB,WAAUN,EAAA,QACV,aAAYA,EAAA,UACZ,MAAOA,EAAA,MACP,KAAMA,EAAA,OAEI,wBAGT,IAA6B,CAA7BG,aAA6BC,EAAA,OAAA,eAAA,sBAG/B,IAAQ,CAARD,aAAQC,EAAA,OAAA,SAAA,qDAEVC,EAAAA,YAOmBE,EAAA,CANhB,cAAaP,EAAA,WACb,aAAYA,EAAA,UACZ,uBAAOI,EAAA,MAAK,OAAA,uBAGb,IAAsB,CAAtBD,aAAsBC,EAAA,OAAA,QAAA"}
+{"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      :class=\"{ 'd-notice__icon--has-title': title || $slots.titleOverride }\"\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    >\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=\"$emit('close')\"\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  compatConfig: { MODE: 3 },\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     * Native button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\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","_createElementBlock","$options","$props","_createBlock","_component_dt_notice_icon","_normalizeClass","_ctx","_renderSlot","_createVNode","_component_dt_notice_content","_component_dt_notice_action"],"mappings":"mUAgDKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,WAEN,WAAY,cACVC,EAAAA,QACA,gBAAAC,EAAAA,QACA,eAAAC,EAAAA,SAGF,MAAO,CAKL,QAAS,CACP,KAAM,OACN,QAAS,QAOX,UAAW,CACT,KAAM,OACN,QAAS,QAMX,MAAO,CACL,KAAM,OACN,QAAS,IASX,KAAM,CACJ,KAAM,OACN,QAAS,SACT,SAAUC,EAAM,CACd,OAAOC,EAAAA,aAAa,SAASD,CAAI,CACnC,GAQF,UAAW,CACT,KAAM,QACN,QAAS,IAOX,KAAM,CACJ,KAAM,OACN,QAAS,OACT,SAAUE,EAAM,CACd,OAAOC,EAAAA,aAAa,SAASD,CAAI,CACnC,GAOF,UAAW,CACT,KAAM,QACN,QAAS,IAOX,SAAU,CACR,KAAM,QACN,QAAS,IAOX,WAAY,CACV,KAAM,QACN,QAAS,IAQX,aAAc,CACZ,KAAM,QACN,QAAS,KAIb,MAAO,CAML,QAQA,SAGF,SAAU,CACR,aAAe,CAQb,MAAO,CACL,WARkB,CAClB,MAAO,kBACP,KAAM,iBACN,QAAS,oBACT,QAAS,oBACT,KAAM,kBAIM,KAAK,IAAI,EACrB,CAAE,sBAAuB,KAAK,UAAW,qBAAsB,KAAK,cAExE,EAEJ,+KA/LEE,EAAAA,mBAkCQ,QAAA,CAjCL,uBAAOC,EAAA,WAAW,EACnB,UAAQ,WAGCC,EAAA,oDADTC,EAAAA,YAOiBC,EAAA,OALd,KAAMF,EAAA,KACN,MAAKG,EAAAA,eAAA,CAAA,4BAAiCH,EAAA,OAASI,EAAA,OAAO,aAAa,CAAA,sBAGpE,IAAoB,CAApBC,aAAoBD,EAAA,OAAA,MAAA,8BAEtBE,EAAAA,YAaoBC,EAAA,CAZjB,WAAUP,EAAA,QACV,aAAYA,EAAA,UACZ,MAAOA,EAAA,MACP,KAAMA,EAAA,OAEI,wBAGT,IAA6B,CAA7BK,aAA6BD,EAAA,OAAA,eAAA,sBAG/B,IAAQ,CAARC,aAAQD,EAAA,OAAA,SAAA,qDAEVE,EAAAA,YAOmBE,EAAA,CANhB,cAAaR,EAAA,WACb,aAAYA,EAAA,UACZ,uBAAOI,EAAA,MAAK,OAAA,uBAGb,IAAsB,CAAtBC,aAAsBD,EAAA,OAAA,QAAA"}

package/dist/lib/notice/notice.js

@@ -1,16 +1,16 @@
-import u from "./notice-icon.js";
-import m from "./notice-content.js";
-import _ from "./notice-action.js";
-import { NOTICE_KINDS as p, NOTICE_ROLES as h } from "./notice-constants.js";
-import { resolveComponent as i, openBlock as d, createElementBlock as C, normalizeClass as y, createBlock as k, withCtx as n, renderSlot as o, createCommentVNode as I, createVNode as l } from "vue";
+import m from "./notice-icon.js";
+import _ from "./notice-content.js";
+import p from "./notice-action.js";
+import { NOTICE_KINDS as h, NOTICE_ROLES as C } from "./notice-constants.js";
+import { resolveComponent as i, openBlock as d, createElementBlock as y, normalizeClass as l, createBlock as k, withCtx as n, renderSlot as o, createCommentVNode as I, createVNode as a } from "vue";
 import { _ as N } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 const g = {
   compatConfig: { MODE: 3 },
   name: "DtNotice",
   components: {
-    DtNoticeIcon: u,
-    DtNoticeContent: m,
-    DtNoticeAction: _
+    DtNoticeIcon: m,
+    DtNoticeContent: _,
+    DtNoticeAction: p
   },
   props: {
     /**
@@ -46,7 +46,7 @@ const g = {
       type: String,
       default: "status",
       validate(t) {
-        return h.includes(t);
+        return C.includes(t);
       }
     },
     /**
@@ -66,7 +66,7 @@ const g = {
       type: String,
       default: "base",
       validate(t) {
-        return p.includes(t);
+        return h.includes(t);
       }
     },
     /**
@@ -134,22 +134,23 @@ const g = {
     }
   }
 };
-function B(t, c, e, S, v, a) {
-  const r = i("dt-notice-icon"), s = i("dt-notice-content"), f = i("dt-notice-action");
-  return d(), C("aside", {
-    class: y(a.noticeClass),
+function B(t, c, e, S, v, s) {
+  const r = i("dt-notice-icon"), f = i("dt-notice-content"), u = i("dt-notice-action");
+  return d(), y("aside", {
+    class: l(s.noticeClass),
     "data-qa": "notice"
   }, [
     e.hideIcon ? I("", !0) : (d(), k(r, {
       key: 0,
-      kind: e.kind
+      kind: e.kind,
+      class: l({ "d-notice__icon--has-title": e.title || t.$slots.titleOverride })
     }, {
       default: n(() => [
         o(t.$slots, "icon")
       ]),
       _: 3
-    }, 8, ["kind"])),
-    l(s, {
+    }, 8, ["kind", "class"])),
+    a(f, {
       "title-id": e.titleId,
       "content-id": e.contentId,
       title: e.title,
@@ -163,10 +164,10 @@ function B(t, c, e, S, v, a) {
       ]),
       _: 3
     }, 8, ["title-id", "content-id", "title", "role"]),
-    l(f, {
+    a(u, {
       "hide-action": e.hideAction,
       "hide-close": e.hideClose,
-      onClose: c[0] || (c[0] = (D) => t.$emit("close"))
+      onClose: c[0] || (c[0] = (O) => t.$emit("close"))
     }, {
       default: n(() => [
         o(t.$slots, "action")

package/dist/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    >\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=\"$emit('close')\"\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  compatConfig: { MODE: 3 },\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     * Native button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\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","_createElementBlock","$options","$props","_createBlock","_component_dt_notice_icon","_renderSlot","_ctx","_createVNode","_component_dt_notice_content","_component_dt_notice_action"],"mappings":";;;;;;AA+CA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,cAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,gBAAAC;AAAA;EAGF,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA;;;;;;;IASX,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,SAAUC,GAAM;AACd,eAAOC,EAAa,SAASD,CAAI;AAAA,MACnC;AAAA;;;;;;IAQF,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,SAAUE,GAAM;AACd,eAAOC,EAAa,SAASD,CAAI;AAAA,MACnC;AAAA;;;;;IAOF,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA;;;;;;IAQX,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA;;EAIb,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAML;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;EAGF,UAAU;AAAA,IACR,cAAe;AAQb,aAAO;AAAA,QACL;AAAA,QARkB;AAAA,UAClB,OAAO;AAAA,UACP,MAAM;AAAA,UACN,SAAS;AAAA,UACT,SAAS;AAAA,UACT,MAAM;AAAA,UAIM,KAAK,IAAI;AAAA,QACrB,EAAE,uBAAuB,KAAK,WAAW,sBAAsB,KAAK;;IAExE;AAAA;AAEJ;;;cA9LEE,EAiCQ,SAAA;AAAA,IAhCL,SAAOC,EAAA,WAAW;AAAA,IACnB,WAAQ;AAAA;IAGCC,EAAA,6BADTC,EAMiBC,GAAA;AAAA;MAJd,MAAMF,EAAA;AAAA;iBAGP,MAAoB;AAAA,QAApBG,EAAoBC,EAAA,QAAA,MAAA;AAAA;;;IAEtBC,EAaoBC,GAAA;AAAA,MAZjB,YAAUN,EAAA;AAAA,MACV,cAAYA,EAAA;AAAA,MACZ,OAAOA,EAAA;AAAA,MACP,MAAMA,EAAA;AAAA;MAEI,iBAGT,MAA6B;AAAA,QAA7BG,EAA6BC,EAAA,QAAA,eAAA;AAAA;iBAG/B,MAAQ;AAAA,QAARD,EAAQC,EAAA,QAAA,SAAA;AAAA;;;IAEVC,EAOmBE,GAAA;AAAA,MANhB,eAAaP,EAAA;AAAA,MACb,cAAYA,EAAA;AAAA,MACZ,gCAAOI,EAAA,MAAK,OAAA;AAAA;iBAGb,MAAsB;AAAA,QAAtBD,EAAsBC,EAAA,QAAA,QAAA;AAAA;;;;;;"}
+{"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      :class=\"{ 'd-notice__icon--has-title': title || $slots.titleOverride }\"\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    >\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=\"$emit('close')\"\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  compatConfig: { MODE: 3 },\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     * Native button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\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","_createElementBlock","$options","$props","_createBlock","_component_dt_notice_icon","_normalizeClass","_ctx","_renderSlot","_createVNode","_component_dt_notice_content","_component_dt_notice_action"],"mappings":";;;;;;AAgDA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,cAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,gBAAAC;AAAA;EAGF,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA;;;;;;;IASX,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,SAAUC,GAAM;AACd,eAAOC,EAAa,SAASD,CAAI;AAAA,MACnC;AAAA;;;;;;IAQF,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,SAAUE,GAAM;AACd,eAAOC,EAAa,SAASD,CAAI;AAAA,MACnC;AAAA;;;;;IAOF,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA;;;;;;IAQX,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA;;EAIb,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAML;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;EAGF,UAAU;AAAA,IACR,cAAe;AAQb,aAAO;AAAA,QACL;AAAA,QARkB;AAAA,UAClB,OAAO;AAAA,UACP,MAAM;AAAA,UACN,SAAS;AAAA,UACT,SAAS;AAAA,UACT,MAAM;AAAA,UAIM,KAAK,IAAI;AAAA,QACrB,EAAE,uBAAuB,KAAK,WAAW,sBAAsB,KAAK;;IAExE;AAAA;AAEJ;;;cA/LEE,EAkCQ,SAAA;AAAA,IAjCL,SAAOC,EAAA,WAAW;AAAA,IACnB,WAAQ;AAAA;IAGCC,EAAA,6BADTC,EAOiBC,GAAA;AAAA;MALd,MAAMF,EAAA;AAAA,MACN,OAAKG,EAAA,EAAA,6BAAiCH,EAAA,SAASI,EAAA,OAAO,cAAa,CAAA;AAAA;iBAGpE,MAAoB;AAAA,QAApBC,EAAoBD,EAAA,QAAA,MAAA;AAAA;;;IAEtBE,EAaoBC,GAAA;AAAA,MAZjB,YAAUP,EAAA;AAAA,MACV,cAAYA,EAAA;AAAA,MACZ,OAAOA,EAAA;AAAA,MACP,MAAMA,EAAA;AAAA;MAEI,iBAGT,MAA6B;AAAA,QAA7BK,EAA6BD,EAAA,QAAA,eAAA;AAAA;iBAG/B,MAAQ;AAAA,QAARC,EAAQD,EAAA,QAAA,SAAA;AAAA;;;IAEVE,EAOmBE,GAAA;AAAA,MANhB,eAAaR,EAAA;AAAA,MACb,cAAYA,EAAA;AAAA,MACZ,gCAAOI,EAAA,MAAK,OAAA;AAAA;iBAGb,MAAsB;AAAA,QAAtBC,EAAsBD,EAAA,QAAA,QAAA;AAAA;;;;;;"}

package/dist/lib/pagination/pagination.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("@dialpad/dialtone-icons/vue3"),_=require("../../localization/index.cjs"),e=require("vue"),P=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),b=require("../button/button.cjs"),m={compatConfig:{MODE:3},name:"DtPagination",components:{DtButton:b.default,DtIconChevronLeft:u.DtIconChevronLeft,DtIconChevronRight:u.DtIconChevronRight,DtIconMoreHorizontal:u.DtIconMoreHorizontal},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,i18n:new _.DialtoneLocalization}},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 t=this.maxVisible-1,i=this.totalPages-t+1;if(this.hideEdges&&(t=t+1,i=i-1),this.currentPage<t){const r=[...this.range(1,t),"..."];return this.hideEdges||r.push(this.totalPages),r}if(this.currentPage>i){const r=["...",...this.range(i,this.totalPages)];return this.hideEdges||r.unshift(1),r}const o=this.maxVisible-(3-this.maxVisible%2),l=Math.floor(o/2);let s=this.currentPage-l,a=this.currentPage+l;this.hideEdges&&(s=s-1,a=a+1);const c=["...",...this.range(s,a),"..."];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 t=>t===this.totalPages?`${this.i18n.$t("DIALTONE_PAGINATION_LAST_PAGE")} ${t}`:`${this.i18n.$t("DIALTONE_PAGINATION_PAGE_NUMBER",{page:t})}`}},watch:{activePage(){this.currentPage=this.activePage},totalPages(t){(this.currentPage>t||this.currentPage<=0)&&(this.currentPage=t)}},methods:{range(t,i){const o=[];t=t>0?t:1;for(let l=t;l<=i;l++)o.push(l);return o},changePage(t){this.currentPage=t,this.$emit("change",this.currentPage)}}},p=["aria-label"],N={key:0,class:"d-pagination__separator-icon","data-qa":"dt-pagination-separator"};function A(t,i,o,l,s,a){const c=e.resolveComponent("dt-icon-chevron-left"),r=e.resolveComponent("dt-button"),h=e.resolveComponent("dt-icon-more-horizontal"),g=e.resolveComponent("dt-icon-chevron-right");return e.withDirectives((e.openBlock(),e.createElementBlock("nav",{"aria-label":o.ariaLabel,class:"d-pagination"},[e.createVNode(r,{class:"d-pagination__button","data-qa":"dt-pagination-prev","aria-label":a.prevAriaLabel,kind:"muted",importance:"clear",disabled:a.isFirstPage,onClick:i[0]||(i[0]=n=>a.changePage(s.currentPage-1))},{icon:e.withCtx(()=>[e.createVNode(c,{size:"300"})]),_:1},8,["aria-label","disabled"]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.pages,(n,d)=>(e.openBlock(),e.createElementBlock("div",{key:`page-${n}-${d}`,class:e.normalizeClass({"d-pagination__separator":isNaN(Number(n))})},[isNaN(Number(n))?(e.openBlock(),e.createElementBlock("div",N,[e.createVNode(h,{size:"300"})])):(e.openBlock(),e.createBlock(r,{key:1,"aria-label":a.pageNumberAriaLabel(n),kind:s.currentPage===n?"default":"muted",importance:s.currentPage===n?"primary":"clear","label-class":"",onClick:f=>a.changePage(n)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(n),1)]),_:2},1032,["aria-label","kind","importance","onClick"]))],2))),128)),e.createVNode(r,{class:"d-pagination__button","data-qa":"dt-pagination-next","aria-label":a.nextAriaLabel,disabled:a.isLastPage,kind:"muted",importance:"clear",onClick:i[1]||(i[1]=n=>a.changePage(s.currentPage+1))},{icon:e.withCtx(()=>[e.createVNode(g,{size:"300"})]),_:1},8,["aria-label","disabled"])],8,p)),[[e.vShow,o.totalPages>0]])}const v=P._(m,[["render",A]]);exports.default=v;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("@dialpad/dialtone-icons/vue3"),_=require("../../localization/index.cjs"),e=require("vue"),P=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),m=require("../button/button.cjs"),b={compatConfig:{MODE:3},name:"DtPagination",components:{DtButton:m.default,DtIconChevronLeft:u.DtIconChevronLeft,DtIconChevronRight:u.DtIconChevronRight,DtIconMoreHorizontal:u.DtIconMoreHorizontal},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,i18n:new _.DialtoneLocalization}},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 t=this.maxVisible-1,i=this.totalPages-t+1;if(this.hideEdges&&(t=t+1,i=i-1),this.currentPage<t){const r=[...this.range(1,t),"..."];return this.hideEdges||r.push(this.totalPages),r}if(this.currentPage>i){const r=["...",...this.range(i,this.totalPages)];return this.hideEdges||r.unshift(1),r}const o=this.maxVisible-(3-this.maxVisible%2),l=Math.floor(o/2);let s=this.currentPage-l,a=this.currentPage+l;this.hideEdges&&(s=s-1,a=a+1);const c=["...",...this.range(s,a),"..."];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 t=>t===this.totalPages?`${this.i18n.$t("DIALTONE_PAGINATION_LAST_PAGE")} ${t}`:`${this.i18n.$t("DIALTONE_PAGINATION_PAGE_NUMBER",{page:t})}`}},watch:{activePage(){this.currentPage=this.activePage},totalPages(t){(this.currentPage>t||this.currentPage<=0)&&(this.currentPage=t)}},methods:{range(t,i){const o=[];t=t>0?t:1;for(let l=t;l<=i;l++)o.push(l);return o},changePage(t){this.currentPage=t,this.$emit("change",this.currentPage)}}},p=["aria-label"],N={key:0,class:"d-pagination__separator-icon","data-qa":"dt-pagination-separator"};function A(t,i,o,l,s,a){const c=e.resolveComponent("dt-icon-chevron-left"),r=e.resolveComponent("dt-button"),g=e.resolveComponent("dt-icon-more-horizontal"),h=e.resolveComponent("dt-icon-chevron-right");return e.withDirectives((e.openBlock(),e.createElementBlock("nav",{"aria-label":o.ariaLabel,class:"d-pagination"},[e.createVNode(r,{class:"d-pagination__button","data-qa":"dt-pagination-prev","aria-label":a.prevAriaLabel,kind:"muted",importance:"clear",disabled:a.isFirstPage,onClick:i[0]||(i[0]=n=>a.changePage(s.currentPage-1))},{startIcon:e.withCtx(()=>[e.createVNode(c,{size:"300"})]),_:1},8,["aria-label","disabled"]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.pages,(n,d)=>(e.openBlock(),e.createElementBlock("div",{key:`page-${n}-${d}`,class:e.normalizeClass({"d-pagination__separator":isNaN(Number(n))})},[isNaN(Number(n))?(e.openBlock(),e.createElementBlock("div",N,[e.createVNode(g,{size:"300"})])):(e.openBlock(),e.createBlock(r,{key:1,class:"d-pagination__item","aria-label":a.pageNumberAriaLabel(n),kind:s.currentPage===n?"default":"muted",importance:s.currentPage===n?"primary":"clear","label-class":"d-pagination__item-label",onClick:I=>a.changePage(n)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(n),1)]),_:2},1032,["aria-label","kind","importance","onClick"]))],2))),128)),e.createVNode(r,{class:"d-pagination__button","data-qa":"dt-pagination-next","aria-label":a.nextAriaLabel,disabled:a.isLastPage,kind:"muted",importance:"clear",onClick:i[1]||(i[1]=n=>a.changePage(s.currentPage+1))},{startIcon:e.withCtx(()=>[e.createVNode(h,{size:"300"})]),_:1},8,["aria-label","disabled"])],8,p)),[[e.vShow,o.totalPages>0]])}const v=P._(b,[["render",A]]);exports.default=v;
 //# sourceMappingURL=pagination.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"pagination.cjs","sources":["../../../components/pagination/pagination.vue"],"sourcesContent":["<template>\n  <nav\n    v-show=\"totalPages > 0\"\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/vue3';\nimport { DialtoneLocalization } from '@/localization';\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  compatConfig: { MODE: 3 },\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     * 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      i18n: new DialtoneLocalization(),\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    totalPages (pages) {\n      if (this.currentPage > pages || this.currentPage <= 0){\n        this.currentPage = pages;\n      }\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","DialtoneLocalization","start","end","pages","total","centerIndex","left","right","page","from","to","range","i","_createElementBlock","$props","_createVNode","_component_dt_button","$options","_cache","$event","$data","_component_dt_icon_chevron_left","_openBlock","_Fragment","_renderList","index","_normalizeClass","_hoisted_2","_component_dt_icon_more_horizontal","_createBlock","_component_dt_icon_chevron_right"],"mappings":"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"}
+{"version":3,"file":"pagination.cjs","sources":["../../../components/pagination/pagination.vue"],"sourcesContent":["<template>\n  <nav\n    v-show=\"totalPages > 0\"\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 #startIcon>\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        class=\"d-pagination__item\"\n        :aria-label=\"pageNumberAriaLabel(page)\"\n        :kind=\"currentPage === page ? 'default' : 'muted'\"\n        :importance=\"currentPage === page ? 'primary' : 'clear'\"\n        label-class=\"d-pagination__item-label\"\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 #startIcon>\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/vue3';\nimport { DialtoneLocalization } from '@/localization';\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  compatConfig: { MODE: 3 },\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     * 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      i18n: new DialtoneLocalization(),\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    totalPages (pages) {\n      if (this.currentPage > pages || this.currentPage <= 0){\n        this.currentPage = pages;\n      }\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","DialtoneLocalization","start","end","pages","total","centerIndex","left","right","page","from","to","range","i","_createElementBlock","$props","_createVNode","_component_dt_button","$options","_cache","$event","$data","_component_dt_icon_chevron_left","_openBlock","_Fragment","_renderList","index","_normalizeClass","_hoisted_2","_component_dt_icon_more_horizontal","_createBlock","_component_dt_icon_chevron_right"],"mappings":"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"}