@dialpad/dialtone-vue 3.219.0 → 3.220.0-next.2

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

@@ -1 +1 @@
-{"version":3,"file":"notice-action.cjs","names":[],"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"],"mappings":"uVAqCA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,iBAEN,WAAY,CACV,oDAAA,YACA,SAAA,EAAA,QACA,kBAAA,EAAA,QACD,CAED,MAAO,CAKL,UAAW,CACT,KAAM,QACN,QAAS,GACV,CAMD,WAAY,CACV,KAAM,QACN,QAAS,GACV,CACF,CAED,MAAO,CAML,QACD,CAED,MAAQ,CACN,MAAO,CACL,KAAM,IAAI,EAAA,qBACX,EAGH,SAAU,CACR,kBAAoB,CAClB,OAAO,KAAK,KAAK,GAAG,wBAAwB,EAE/C,CAED,SAAW,CACJ,KAAK,YACR,KAAK,mBAAqB,SAAS,gBAIvC,eAAiB,CACf,KAAK,oBAAoB,OAAO,EAGlC,QAAS,CACP,OAAS,CACP,KAAK,MAAM,QAAQ,EAEtB,CACF,IArGG,MAAM,oBACN,UAAQ,wOAyBJ,MA3BN,EA2BM,CAtBS,EAAA,YAAc,EAAA,EAAA,oBAAA,GAAA,GAAA,EAAd,EAAA,EAAA,YAAc,EAAA,OAAA,UAAA,CAAA,IAAA,EAAA,CAAA,CAElB,EAAA,+CAmBP,EAAA,OADC,QAAO,EAAA,8BAlBD,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,aAeG,EAAA,OAdV,IAAI,cACH,OAAQ,GACT,UAAQ,gCACR,WAAW,QACX,KAAK,KACJ,aAAY,EAAA,iBACZ,MAAO,EAAA,iBACP,QAAO,EAAA,QAEG,MAAA,EAAA,EAAA,aAGP,EAAA,EAAA,EAAA,aAAA,EAAA,CADA,KAAK,MAAK,CAAA,CAAA,CAAA"}
+{"version":3,"file":"notice-action.cjs","names":[],"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=\"showAction\" />\n    <dt-button\n      v-if=\"showClose\"\n      ref=\"closeButton\"\n      data-qa=\"dt-notice-action-close-button\"\n      importance=\"clear\"\n      kind=\"muted\"\n      :size=\"200\"\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/vue';\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     * Shows the close button in the notice\n     * @values true, false\n     */\n    showClose: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Shows the action in the notice\n     * @values true, false\n     */\n    showAction: {\n      type: Boolean,\n      default: true,\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.showClose) {\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"],"mappings":"uVAqCA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,iBAEN,WAAY,CACV,mDAAA,YACA,SAAA,EAAA,QACA,kBAAA,EAAA,QACD,CAED,MAAO,CAKL,UAAW,CACT,KAAM,QACN,QAAS,GACV,CAMD,WAAY,CACV,KAAM,QACN,QAAS,GACV,CACF,CAED,MAAO,CAML,QACD,CAED,MAAQ,CACN,MAAO,CACL,KAAM,IAAI,EAAA,qBACX,EAGH,SAAU,CACR,kBAAoB,CAClB,OAAO,KAAK,KAAK,GAAG,wBAAwB,EAE/C,CAED,SAAW,CACL,KAAK,YACP,KAAK,mBAAqB,SAAS,gBAIvC,eAAiB,CACf,KAAK,oBAAoB,OAAO,EAGlC,QAAS,CACP,OAAS,CACP,KAAK,MAAM,QAAQ,EAEtB,CACF,IArGG,MAAM,oBACN,UAAQ,wOAyBJ,MA3BN,EA2BM,CAtBQ,EAAA,YAAA,EAAA,EAAA,YAAc,EAAA,OAAA,UAAA,CAAA,IAAA,EAAA,CAAA,EAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,CAElB,EAAA,YAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,aAeI,EAAA,OAdV,IAAI,cACJ,UAAQ,gCACR,WAAW,QACX,KAAK,QACJ,KAAM,IACN,aAAY,EAAA,iBACZ,MAAO,EAAA,iBACP,QAAO,EAAA,QAEG,WAAA,EAAA,EAAA,aAGP,EAAA,EAAA,EAAA,aAAA,EAAA,CADA,KAAK,MAAK,CAAA,CAAA,CAAA,gFAOd,EAAA,OADC,QAAO,EAAA"}

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

@@ -3,7 +3,7 @@ import { DialtoneLocalization as t } from "../../localization/index.js";
 import n from "../button/button.js";
 import r from "../../shared/sr_only_close_button.js";
 import { createBlock as i, createCommentVNode as a, createElementBlock as o, createVNode as s, openBlock as c, renderSlot as l, resolveComponent as u, withCtx as d } from "vue";
-import { DtIconClose as f } from "@dialpad/dialtone-icons/vue3";
+import { DtIconClose as f } from "@dialpad/dialtone-icons/vue";
 //#region components/notice/notice_action.vue
 var p = {
 	compatConfig: { MODE: 3 },
@@ -14,13 +14,13 @@ var p = {
 		SrOnlyCloseButton: r
 	},
 	props: {
-		hideClose: {
+		showClose: {
 			type: Boolean,
-			default: !1
+			default: !0
 		},
-		hideAction: {
+		showAction: {
 			type: Boolean,
-			default: !1
+			default: !0
 		}
 	},
 	emits: ["close"],
@@ -31,7 +31,7 @@ var p = {
 		return this.i18n.$t("DIALTONE_CLOSE_BUTTON");
 	} },
 	mounted() {
-		this.hideClose || (this.lastFocusedElement = document.activeElement);
+		this.showClose && (this.lastFocusedElement = document.activeElement);
 	},
 	beforeUnmount() {
 		this.lastFocusedElement?.focus();
@@ -45,27 +45,27 @@ var p = {
 };
 function h(e, t, n, r, f, p) {
 	let h = u("dt-icon-close"), g = u("dt-button"), _ = u("sr-only-close-button");
-	return c(), o("div", m, [n.hideAction ? a("", !0) : l(e.$slots, "default", { key: 0 }), n.hideClose ? (c(), i(_, {
-		key: 2,
-		onClose: p.close
-	}, null, 8, ["onClose"])) : (c(), i(g, {
+	return c(), o("div", m, [n.showAction ? l(e.$slots, "default", { key: 0 }) : a("", !0), n.showClose ? (c(), i(g, {
 		key: 1,
 		ref: "closeButton",
-		circle: !0,
 		"data-qa": "dt-notice-action-close-button",
 		importance: "clear",
-		size: "sm",
+		kind: "muted",
+		size: 200,
 		"aria-label": p.closeButtonTitle,
 		title: p.closeButtonTitle,
 		onClick: p.close
 	}, {
-		icon: d(() => [s(h, { size: "200" })]),
+		startIcon: d(() => [s(h, { size: "200" })]),
 		_: 1
 	}, 8, [
 		"aria-label",
 		"title",
 		"onClick"
-	]))]);
+	])) : (c(), i(_, {
+		key: 2,
+		onClose: p.close
+	}, null, 8, ["onClose"]))]);
 }
 var g = /* @__PURE__ */ e(p, [["render", h]]);
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"notice-action.js","names":[],"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"],"mappings":";;;;;;;AAqCA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,YAAY;EACV;EACA,UAAA;EACA,mBAAA;EACD;CAED,OAAO;EAKL,WAAW;GACT,MAAM;GACN,SAAS;GACV;EAMD,YAAY;GACV,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAO,CAML,QACD;CAED,OAAQ;AACN,SAAO,EACL,MAAM,IAAI,GAAsB,EACjC;;CAGH,UAAU,EACR,mBAAoB;AAClB,SAAO,KAAK,KAAK,GAAG,wBAAwB;IAE/C;CAED,UAAW;AACT,EAAK,KAAK,cACR,KAAK,qBAAqB,SAAS;;CAIvC,gBAAiB;AACf,OAAK,oBAAoB,OAAO;;CAGlC,SAAS,EACP,QAAS;AACP,OAAK,MAAM,QAAQ;IAEtB;CACF;CArGG,OAAM;CACN,WAAQ;;;;aAFV,EA2BM,OA3BN,GA2BM,CAtBS,EAAA,aAAc,EAAA,IAAA,GAAA,GAA3B,EAA2B,EAAA,QAAA,WAAA,EAAA,KAAA,GAAA,CAAA,EAElB,EAAA,kBAgBT,EAGE,GAAA;;EADC,SAAO,EAAA;8BAlBD,GAAA,EADT,EAgBY,GAAA;;EAdV,KAAI;EACH,QAAQ;EACT,WAAQ;EACR,YAAW;EACX,MAAK;EACJ,cAAY,EAAA;EACZ,OAAO,EAAA;EACP,SAAO,EAAA;;EAEG,MAAI,QAGX,CAFF,EAEE,GAAA,EADA,MAAK,OAAK,CAAA,CAAA,CAAA"}
+{"version":3,"file":"notice-action.js","names":[],"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=\"showAction\" />\n    <dt-button\n      v-if=\"showClose\"\n      ref=\"closeButton\"\n      data-qa=\"dt-notice-action-close-button\"\n      importance=\"clear\"\n      kind=\"muted\"\n      :size=\"200\"\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/vue';\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     * Shows the close button in the notice\n     * @values true, false\n     */\n    showClose: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Shows the action in the notice\n     * @values true, false\n     */\n    showAction: {\n      type: Boolean,\n      default: true,\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.showClose) {\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"],"mappings":";;;;;;;AAqCA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,YAAY;EACV;EACA,UAAA;EACA,mBAAA;EACD;CAED,OAAO;EAKL,WAAW;GACT,MAAM;GACN,SAAS;GACV;EAMD,YAAY;GACV,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAO,CAML,QACD;CAED,OAAQ;AACN,SAAO,EACL,MAAM,IAAI,GAAsB,EACjC;;CAGH,UAAU,EACR,mBAAoB;AAClB,SAAO,KAAK,KAAK,GAAG,wBAAwB;IAE/C;CAED,UAAW;AACT,EAAI,KAAK,cACP,KAAK,qBAAqB,SAAS;;CAIvC,gBAAiB;AACf,OAAK,oBAAoB,OAAO;;CAGlC,SAAS,EACP,QAAS;AACP,OAAK,MAAM,QAAQ;IAEtB;CACF;CArGG,OAAM;CACN,WAAQ;;;;aAFV,EA2BM,OA3BN,GA2BM,CAtBQ,EAAA,aAAZ,EAA0B,EAAA,QAAA,WAAA,EAAA,KAAA,GAAA,CAAA,GAAA,EAAA,IAAA,GAAA,EAElB,EAAA,aAAA,GAAA,EADR,EAgBY,GAAA;;EAdV,KAAI;EACJ,WAAQ;EACR,YAAW;EACX,MAAK;EACJ,MAAM;EACN,cAAY,EAAA;EACZ,OAAO,EAAA;EACP,SAAO,EAAA;;EAEG,WAAS,QAGhB,CAFF,EAEE,GAAA,EADA,MAAK,OAAK,CAAA,CAAA,CAAA;;;;;;aAIhB,EAGE,GAAA;;EADC,SAAO,EAAA"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"notice-constants.cjs","names":[],"sources":["../../../components/notice/notice_constants.js"],"sourcesContent":["export const NOTICE_KINDS = ['base', 'error', 'info', 'success', 'warning'];\nexport const NOTICE_ROLES = ['alert', 'alertdialog', 'status'];\n\nexport default {\n  NOTICE_KINDS,\n  NOTICE_ROLES,\n};\n"],"mappings":"+FAAA,IAAa,EAAe,CAAC,OAAQ,QAAS,OAAQ,UAAW,UAAU,CAC9D,EAAe,CAAC,QAAS,cAAe,SAAS,CAE9D,EAAe,CACb,eACA,eACD"}
+{"version":3,"file":"notice-constants.cjs","names":[],"sources":["../../../components/notice/notice_constants.js"],"sourcesContent":["export const NOTICE_KINDS = ['base', 'critical', 'info', 'positive', 'warning'];\nexport const NOTICE_ROLES = ['alert', 'alertdialog', 'status'];\n\nexport default {\n  NOTICE_KINDS,\n  NOTICE_ROLES,\n};\n"],"mappings":"+FAAA,IAAa,EAAe,CAAC,OAAQ,WAAY,OAAQ,WAAY,UAAU,CAClE,EAAe,CAAC,QAAS,cAAe,SAAS,CAE9D,EAAe,CACb,eACA,eACD"}

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

@@ -1,9 +1,9 @@
 //#region components/notice/notice_constants.js
 var e = [
 	"base",
-	"error",
+	"critical",
 	"info",
-	"success",
+	"positive",
 	"warning"
 ], t = [
 	"alert",

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

@@ -1 +1 @@
-{"version":3,"file":"notice-constants.js","names":[],"sources":["../../../components/notice/notice_constants.js"],"sourcesContent":["export const NOTICE_KINDS = ['base', 'error', 'info', 'success', 'warning'];\nexport const NOTICE_ROLES = ['alert', 'alertdialog', 'status'];\n\nexport default {\n  NOTICE_KINDS,\n  NOTICE_ROLES,\n};\n"],"mappings":";AAAA,IAAa,IAAe;CAAC;CAAQ;CAAS;CAAQ;CAAW;CAAU,EAC9D,IAAe;CAAC;CAAS;CAAe;CAAS,EAE9D,IAAe;CACb;CACA;CACD"}
+{"version":3,"file":"notice-constants.js","names":[],"sources":["../../../components/notice/notice_constants.js"],"sourcesContent":["export const NOTICE_KINDS = ['base', 'critical', 'info', 'positive', 'warning'];\nexport const NOTICE_ROLES = ['alert', 'alertdialog', 'status'];\n\nexport default {\n  NOTICE_KINDS,\n  NOTICE_ROLES,\n};\n"],"mappings":";AAAA,IAAa,IAAe;CAAC;CAAQ;CAAY;CAAQ;CAAY;CAAU,EAClE,IAAe;CAAC;CAAS;CAAe;CAAS,EAE9D,IAAe;CACb;CACA;CACD"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"notice-content.cjs","names":[],"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"],"mappings":"kQA8BA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,kBAEN,MAAO,CAIL,MAAO,CACL,KAAM,OACN,QAAS,GACV,CAMD,QAAS,CACP,KAAM,OACN,QAAS,IAAA,GACV,CAMD,UAAW,CACT,KAAM,OACN,QAAS,IAAA,GACV,CACF,CAED,MAAQ,CACN,MAAO,CACL,eAAA,EAAA,eACD,EAEJ,IAjEG,MAAM,oBACN,UAAQ,6GAqBJ,MAvBN,EAuBM,CAlBI,EAAA,OAAS,EAAA,eAAe,EAAA,OAAO,cAAa,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAShD,IAAA,OARD,GAAI,EAAA,QACL,MAAM,kBACN,UAAQ,0CAKD,EAAA,OAAA,gBAAA,EAAA,KAAA,EAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBADF,EAAA,MAAK,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,EAAA,EAAA,EAAA,oBAUR,IAAA,CAND,GAAI,EAAA,UACL,MAAM,oBACN,UAAQ,4CAGA,EAAA,OAAA,UAAA,CAAA,CAAA,EAAA,EAAA,CAAA,CAAA"}
+{"version":3,"file":"notice-content.cjs","names":[],"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.title)\"\n      :id=\"titleId\"\n      kind=\"headline\"\n      :size=\"300\"\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=\"title\">\n        {{ title }}\n      </slot>\n    </dt-text>\n    <dt-text\n      :id=\"contentId\"\n      kind=\"body\"\n      :size=\"200\"\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     * Can also be overridden with a slot of the same name.\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"],"mappings":"gSAuCA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,kBAEN,WAAY,CAAE,OAAA,EAAA,QAAQ,CAEtB,MAAO,CAKL,MAAO,CACL,KAAM,OACN,QAAS,GACV,CAMD,QAAS,CACP,KAAM,OACN,QAAS,IAAA,GACV,CAMD,UAAW,CACT,KAAM,OACN,QAAS,IAAA,GACV,CACF,CAED,MAAQ,CACN,MAAO,CACL,eAAA,EAAA,eACD,EAEJ,IA7EG,MAAM,oBACN,UAAQ,mIA6BJ,MA/BN,EA+BM,CA1BI,EAAA,OAAS,EAAA,eAAe,EAAA,OAAO,MAAK,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,aAalC,EAAA,OAZP,GAAI,EAAA,QACL,KAAK,WACJ,KAAM,IACP,QAAQ,MACR,GAAG,IACH,MAAM,kBACN,UAAQ,mDAKD,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,QAAA,EAAA,KAAA,EAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBADF,EAAA,MAAK,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,mEAcF,EAAA,CAVP,GAAI,EAAA,UACL,KAAK,OACJ,KAAM,IACP,KAAK,SACL,GAAG,IACH,MAAM,oBACN,UAAQ,qDAGA,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,UAAA,CAAA,CAAA"}

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

@@ -1,10 +1,12 @@
 import { hasSlotContent as e } from "../../common/utils/index.js";
 import { t } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
-import { createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, openBlock as o, renderSlot as s, toDisplayString as c } from "vue";
+import n from "../text/text.js";
+import { createBlock as r, createCommentVNode as i, createElementBlock as a, createTextVNode as o, createVNode as s, openBlock as c, renderSlot as l, resolveComponent as u, toDisplayString as d, withCtx as f } from "vue";
 //#region components/notice/notice_content.vue
-var l = {
+var p = {
 	compatConfig: { MODE: 3 },
 	name: "DtNoticeContent",
+	components: { DtText: n },
 	props: {
 		title: {
 			type: String,
@@ -22,24 +24,39 @@ var l = {
 	data() {
 		return { hasSlotContent: e };
 	}
-}, u = {
+}, m = {
 	class: "d-notice__content",
 	"data-qa": "notice-content"
-}, d = ["id"], f = ["id"];
-function p(e, t, l, p, m, h) {
-	return o(), r("div", u, [l.title || m.hasSlotContent(e.$slots.titleOverride) ? (o(), r("p", {
+};
+function h(e, t, n, p, h, g) {
+	let _ = u("dt-text");
+	return c(), a("div", m, [n.title || h.hasSlotContent(e.$slots.title) ? (c(), r(_, {
 		key: 0,
-		id: l.titleId,
+		id: n.titleId,
+		kind: "headline",
+		size: 300,
+		density: "200",
+		as: "p",
 		class: "d-notice__title",
 		"data-qa": "notice-content-title"
-	}, [s(e.$slots, "titleOverride", {}, () => [a(c(l.title), 1)])], 8, d)) : n("", !0), i("p", {
-		id: l.contentId,
+	}, {
+		default: f(() => [l(e.$slots, "title", {}, () => [o(d(n.title), 1)])]),
+		_: 3
+	}, 8, ["id"])) : i("", !0), s(_, {
+		id: n.contentId,
+		kind: "body",
+		size: 200,
+		wrap: "pretty",
+		as: "p",
 		class: "d-notice__message",
 		"data-qa": "notice-content-message"
-	}, [s(e.$slots, "default")], 8, f)]);
+	}, {
+		default: f(() => [l(e.$slots, "default")]),
+		_: 3
+	}, 8, ["id"])]);
 }
-var m = /* @__PURE__ */ t(l, [["render", p]]);
+var g = /* @__PURE__ */ t(p, [["render", h]]);
 //#endregion
-export { m as default };
+export { g as default };
 
 //# sourceMappingURL=notice-content.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"notice-content.js","names":[],"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"],"mappings":";;;;AA8BA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,OAAO;EAIL,OAAO;GACL,MAAM;GACN,SAAS;GACV;EAMD,SAAS;GACP,MAAM;GACN,SAAS,KAAA;GACV;EAMD,WAAW;GACT,MAAM;GACN,SAAS,KAAA;GACV;EACF;CAED,OAAQ;AACN,SAAO,EACL,mBACD;;CAEJ;CAjEG,OAAM;CACN,WAAQ;;;aAFV,EAuBM,OAvBN,GAuBM,CAlBI,EAAA,SAAS,EAAA,eAAe,EAAA,OAAO,cAAa,IAAA,GAAA,EADpD,EAUI,KAAA;;EARD,IAAI,EAAA;EACL,OAAM;EACN,WAAQ;KAGR,EAEO,EAAA,QAAA,iBAAA,EAAA,QAAA,CAAA,EAAA,EADF,EAAA,MAAK,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,GAAA,EAAA,IAAA,EAAA,IAAA,GAAA,EAGZ,EAOI,KAAA;EAND,IAAI,EAAA;EACL,OAAM;EACN,WAAQ;KAGR,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,GAAA,EAAA,CAAA,CAAA"}
+{"version":3,"file":"notice-content.js","names":[],"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.title)\"\n      :id=\"titleId\"\n      kind=\"headline\"\n      :size=\"300\"\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=\"title\">\n        {{ title }}\n      </slot>\n    </dt-text>\n    <dt-text\n      :id=\"contentId\"\n      kind=\"body\"\n      :size=\"200\"\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     * Can also be overridden with a slot of the same name.\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"],"mappings":";;;;;AAuCA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,YAAY,EAAE,QAAA,GAAQ;CAEtB,OAAO;EAKL,OAAO;GACL,MAAM;GACN,SAAS;GACV;EAMD,SAAS;GACP,MAAM;GACN,SAAS,KAAA;GACV;EAMD,WAAW;GACT,MAAM;GACN,SAAS,KAAA;GACV;EACF;CAED,OAAQ;AACN,SAAO,EACL,mBACD;;CAEJ;CA7EG,OAAM;CACN,WAAQ;;;;aAFV,EA+BM,OA/BN,GA+BM,CA1BI,EAAA,SAAS,EAAA,eAAe,EAAA,OAAO,MAAK,IAAA,GAAA,EAD5C,EAcU,GAAA;;EAZP,IAAI,EAAA;EACL,MAAK;EACJ,MAAM;EACP,SAAQ;EACR,IAAG;EACH,OAAM;EACN,WAAQ;;mBAKD,CAFP,EAEO,EAAA,QAAA,SAAA,EAAA,QAAA,CAAA,EAAA,EADF,EAAA,MAAK,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA;;6BAGZ,EAWU,GAAA;EAVP,IAAI,EAAA;EACL,MAAK;EACJ,MAAM;EACP,MAAK;EACL,IAAG;EACH,OAAM;EACN,WAAQ;;mBAGA,CAAR,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA"}

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

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`./notice-constants.cjs`);let r=require(`vue`),i=require(`@dialpad/dialtone-icons/vue3`);var a=new Map([[`info`,i.DtIconInfo],[`success`,i.DtIconCheckCircle],[`warning`,i.DtIconAlertTriangle],[`error`,i.DtIconAlertCircle],[`base`,i.DtIconBell]]),o={compatConfig:{MODE:3},name:`DtNoticeIcon`,components:{DtIconInfo:i.DtIconInfo,DtIconCheckCircle:i.DtIconCheckCircle,DtIconAlertTriangle:i.DtIconAlertTriangle,DtIconAlertCircle:i.DtIconAlertCircle,DtIconBell:i.DtIconBell},props:{kind:{type:String,default:`base`,validate(e){return n.NOTICE_KINDS.includes(e)}}},data(){return{hasSlotContent:e.hasSlotContent}},computed:{defaultIcon(){return a.get(this.kind)}}},s={key:0,"aria-hidden":`true`,class:`d-notice__icon`};function c(e,t,n,i,a,o){return o.defaultIcon||a.hasSlotContent(e.$slots.default)?((0,r.openBlock)(),(0,r.createElementBlock)(`div`,s,[(0,r.renderSlot)(e.$slots,`default`,{},()=>[((0,r.openBlock)(),(0,r.createBlock)((0,r.resolveDynamicComponent)(o.defaultIcon),{size:`400`}))])])):(0,r.createCommentVNode)(``,!0)}var l=t.t(o,[[`render`,c]]);exports.default=l;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`./notice-constants.cjs`);let r=require(`vue`),i=require(`@dialpad/dialtone-icons/vue`);var a=new Map([[`info`,i.DtIconInfo],[`positive`,i.DtIconCheckCircle],[`warning`,i.DtIconAlertTriangle],[`critical`,i.DtIconAlertCircle],[`base`,i.DtIconBell]]),o={compatConfig:{MODE:3},name:`DtNoticeIcon`,components:{DtIconInfo:i.DtIconInfo,DtIconCheckCircle:i.DtIconCheckCircle,DtIconAlertTriangle:i.DtIconAlertTriangle,DtIconAlertCircle:i.DtIconAlertCircle,DtIconBell:i.DtIconBell},props:{kind:{type:String,default:`base`,validator(e){return n.NOTICE_KINDS.includes(e)}}},data(){return{hasSlotContent:e.hasSlotContent}},computed:{defaultIcon(){return a.get(this.kind)}}},s={key:0,"aria-hidden":`true`,class:`d-notice__icon`};function c(e,t,n,i,a,o){return o.defaultIcon||a.hasSlotContent(e.$slots.default)?((0,r.openBlock)(),(0,r.createElementBlock)(`div`,s,[(0,r.renderSlot)(e.$slots,`default`,{},()=>[((0,r.openBlock)(),(0,r.createBlock)((0,r.resolveDynamicComponent)(o.defaultIcon),{size:`400`}))])])):(0,r.createCommentVNode)(``,!0)}var l=t.t(o,[[`render`,c]]);exports.default=l;
 //# sourceMappingURL=notice-icon.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"notice-icon.cjs","names":[],"sources":["../../../components/notice/notice_icon.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"defaultIcon || hasSlotContent($slots.default)\"\n    aria-hidden=\"true\"\n    class=\"d-notice__icon\"\n  >\n    <!-- @slot Slot for the main content -->\n    <slot>\n      <component\n        :is=\"defaultIcon\"\n        size=\"400\"\n      />\n    </slot>\n  </div>\n</template>\n\n<script>\nimport {\n  DtIconInfo,\n  DtIconCheckCircle,\n  DtIconAlertTriangle,\n  DtIconAlertCircle,\n  DtIconBell,\n} from '@dialpad/dialtone-icons/vue3';\nimport { NOTICE_KINDS } from './notice_constants.js';\nimport { hasSlotContent } from '@/common/utils';\n\nconst kindToIcon = new Map([\n  ['info', DtIconInfo],\n  ['success', DtIconCheckCircle],\n  ['warning', DtIconAlertTriangle],\n  ['error', DtIconAlertCircle],\n  ['base', DtIconBell],\n]);\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtNoticeIcon',\n\n  components: {\n    DtIconInfo,\n    DtIconCheckCircle,\n    DtIconAlertTriangle,\n    DtIconAlertCircle,\n    DtIconBell,\n  },\n\n  props: {\n    /**\n     * Kind of icon\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n  },\n\n  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    defaultIcon () {\n      return kindToIcon.get(this.kind);\n    },\n  },\n};\n</script>\n"],"mappings":"gVA2BA,IAAM,EAAa,IAAI,IAAI,CACzB,CAAC,OAAQ,EAAA,WAAW,CACpB,CAAC,UAAW,EAAA,kBAAkB,CAC9B,CAAC,UAAW,EAAA,oBAAoB,CAChC,CAAC,QAAS,EAAA,kBAAkB,CAC5B,CAAC,OAAQ,EAAA,WAAW,CACrB,CAAC,CAEG,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,eAEN,WAAY,CACV,WAAA,EAAA,WACA,kBAAA,EAAA,kBACA,oBAAA,EAAA,oBACA,kBAAA,EAAA,kBACA,WAAA,EAAA,WACD,CAED,MAAO,CAKL,KAAM,CACJ,KAAM,OACN,QAAS,OACT,SAAU,EAAM,CACd,OAAO,EAAA,aAAa,SAAS,EAAK,EAErC,CACF,CAED,MAAQ,CACN,MAAO,CACL,eAAA,EAAA,eACD,EAGH,SAAU,CACR,aAAe,CACb,OAAO,EAAW,IAAI,KAAK,KAAK,EAEnC,CACF,UArEG,cAAY,OACZ,MAAM,iDAFA,EAAA,aAAe,EAAA,eAAe,EAAA,OAAO,QAAO,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAW9C,MAZN,EAYM,EAAA,EAAA,EAAA,YADG,EAAA,OAAA,UAAA,EAAA,KAAA,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,yBAHE,EAAA,YAAW,CAAA,CAChB,KAAK,MAAK,CAAA,EAAA,CAAA,CAAA,CAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA"}
+{"version":3,"file":"notice-icon.cjs","names":[],"sources":["../../../components/notice/notice_icon.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"defaultIcon || hasSlotContent($slots.default)\"\n    aria-hidden=\"true\"\n    class=\"d-notice__icon\"\n  >\n    <!-- @slot Slot for the main content -->\n    <slot>\n      <component\n        :is=\"defaultIcon\"\n        size=\"400\"\n      />\n    </slot>\n  </div>\n</template>\n\n<script>\nimport {\n  DtIconInfo,\n  DtIconCheckCircle,\n  DtIconAlertTriangle,\n  DtIconAlertCircle,\n  DtIconBell,\n} from '@dialpad/dialtone-icons/vue';\nimport { NOTICE_KINDS } from './notice_constants.js';\nimport { hasSlotContent } from '@/common/utils';\n\nconst kindToIcon = new Map([\n  ['info', DtIconInfo],\n  ['positive', DtIconCheckCircle],\n  ['warning', DtIconAlertTriangle],\n  ['critical', DtIconAlertCircle],\n  ['base', DtIconBell],\n]);\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtNoticeIcon',\n\n  components: {\n    DtIconInfo,\n    DtIconCheckCircle,\n    DtIconAlertTriangle,\n    DtIconAlertCircle,\n    DtIconBell,\n  },\n\n  props: {\n    /**\n     * Kind of icon\n     * @values base, critical, info, positive, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validator (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n  },\n\n  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    defaultIcon () {\n      return kindToIcon.get(this.kind);\n    },\n  },\n};\n</script>\n"],"mappings":"+UA2BA,IAAM,EAAa,IAAI,IAAI,CACzB,CAAC,OAAQ,EAAA,WAAW,CACpB,CAAC,WAAY,EAAA,kBAAkB,CAC/B,CAAC,UAAW,EAAA,oBAAoB,CAChC,CAAC,WAAY,EAAA,kBAAkB,CAC/B,CAAC,OAAQ,EAAA,WAAW,CACrB,CAAC,CAEG,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,eAEN,WAAY,CACV,WAAA,EAAA,WACA,kBAAA,EAAA,kBACA,oBAAA,EAAA,oBACA,kBAAA,EAAA,kBACA,WAAA,EAAA,WACD,CAED,MAAO,CAKL,KAAM,CACJ,KAAM,OACN,QAAS,OACT,UAAW,EAAM,CACf,OAAO,EAAA,aAAa,SAAS,EAAK,EAErC,CACF,CAED,MAAQ,CACN,MAAO,CACL,eAAA,EAAA,eACD,EAGH,SAAU,CACR,aAAe,CACb,OAAO,EAAW,IAAI,KAAK,KAAK,EAEnC,CACF,UArEG,cAAY,OACZ,MAAM,iDAFA,EAAA,aAAe,EAAA,eAAe,EAAA,OAAO,QAAO,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAW9C,MAZN,EAYM,EAAA,EAAA,EAAA,YADG,EAAA,OAAA,UAAA,EAAA,KAAA,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,yBAHE,EAAA,YAAW,CAAA,CAChB,KAAK,MAAK,CAAA,EAAA,CAAA,CAAA,CAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA"}

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

@@ -2,13 +2,13 @@ import { hasSlotContent as e } from "../../common/utils/index.js";
 import { t } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
 import { NOTICE_KINDS as n } from "./notice-constants.js";
 import { createBlock as r, createCommentVNode as i, createElementBlock as a, openBlock as o, renderSlot as s, resolveDynamicComponent as c } from "vue";
-import { DtIconAlertCircle as l, DtIconAlertTriangle as u, DtIconBell as d, DtIconCheckCircle as f, DtIconInfo as p } from "@dialpad/dialtone-icons/vue3";
+import { DtIconAlertCircle as l, DtIconAlertTriangle as u, DtIconBell as d, DtIconCheckCircle as f, DtIconInfo as p } from "@dialpad/dialtone-icons/vue";
 //#region components/notice/notice_icon.vue
 var m = new Map([
 	["info", p],
-	["success", f],
+	["positive", f],
 	["warning", u],
-	["error", l],
+	["critical", l],
 	["base", d]
 ]), h = {
 	compatConfig: { MODE: 3 },
@@ -23,7 +23,7 @@ var m = new Map([
 	props: { kind: {
 		type: String,
 		default: "base",
-		validate(e) {
+		validator(e) {
 			return n.includes(e);
 		}
 	} },

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

@@ -1 +1 @@
-{"version":3,"file":"notice-icon.js","names":[],"sources":["../../../components/notice/notice_icon.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"defaultIcon || hasSlotContent($slots.default)\"\n    aria-hidden=\"true\"\n    class=\"d-notice__icon\"\n  >\n    <!-- @slot Slot for the main content -->\n    <slot>\n      <component\n        :is=\"defaultIcon\"\n        size=\"400\"\n      />\n    </slot>\n  </div>\n</template>\n\n<script>\nimport {\n  DtIconInfo,\n  DtIconCheckCircle,\n  DtIconAlertTriangle,\n  DtIconAlertCircle,\n  DtIconBell,\n} from '@dialpad/dialtone-icons/vue3';\nimport { NOTICE_KINDS } from './notice_constants.js';\nimport { hasSlotContent } from '@/common/utils';\n\nconst kindToIcon = new Map([\n  ['info', DtIconInfo],\n  ['success', DtIconCheckCircle],\n  ['warning', DtIconAlertTriangle],\n  ['error', DtIconAlertCircle],\n  ['base', DtIconBell],\n]);\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtNoticeIcon',\n\n  components: {\n    DtIconInfo,\n    DtIconCheckCircle,\n    DtIconAlertTriangle,\n    DtIconAlertCircle,\n    DtIconBell,\n  },\n\n  props: {\n    /**\n     * Kind of icon\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n  },\n\n  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    defaultIcon () {\n      return kindToIcon.get(this.kind);\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;;AA2BA,IAAM,IAAa,IAAI,IAAI;CACzB,CAAC,QAAQ,EAAW;CACpB,CAAC,WAAW,EAAkB;CAC9B,CAAC,WAAW,EAAoB;CAChC,CAAC,SAAS,EAAkB;CAC5B,CAAC,QAAQ,EAAW;CACrB,CAAC,EAEG,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,YAAY;EACV;EACA;EACA;EACA;EACA;EACD;CAED,OAAO,EAKL,MAAM;EACJ,MAAM;EACN,SAAS;EACT,SAAU,GAAM;AACd,UAAO,EAAa,SAAS,EAAK;;EAErC,EACF;CAED,OAAQ;AACN,SAAO,EACL,mBACD;;CAGH,UAAU,EACR,cAAe;AACb,SAAO,EAAW,IAAI,KAAK,KAAK;IAEnC;CACF;;CArEG,eAAY;CACZ,OAAM;;;QAFA,EAAA,eAAe,EAAA,eAAe,EAAA,OAAO,QAAO,IAAA,GAAA,EADpD,EAYM,OAZN,GAYM,CANJ,EAKO,EAAA,QAAA,WAAA,EAAA,QAAA,EAAA,GAAA,EAJL,EAGE,EAFK,EAAA,YAAW,EAAA,EAChB,MAAK,OAAK,CAAA,EAAA,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA"}
+{"version":3,"file":"notice-icon.js","names":[],"sources":["../../../components/notice/notice_icon.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"defaultIcon || hasSlotContent($slots.default)\"\n    aria-hidden=\"true\"\n    class=\"d-notice__icon\"\n  >\n    <!-- @slot Slot for the main content -->\n    <slot>\n      <component\n        :is=\"defaultIcon\"\n        size=\"400\"\n      />\n    </slot>\n  </div>\n</template>\n\n<script>\nimport {\n  DtIconInfo,\n  DtIconCheckCircle,\n  DtIconAlertTriangle,\n  DtIconAlertCircle,\n  DtIconBell,\n} from '@dialpad/dialtone-icons/vue';\nimport { NOTICE_KINDS } from './notice_constants.js';\nimport { hasSlotContent } from '@/common/utils';\n\nconst kindToIcon = new Map([\n  ['info', DtIconInfo],\n  ['positive', DtIconCheckCircle],\n  ['warning', DtIconAlertTriangle],\n  ['critical', DtIconAlertCircle],\n  ['base', DtIconBell],\n]);\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtNoticeIcon',\n\n  components: {\n    DtIconInfo,\n    DtIconCheckCircle,\n    DtIconAlertTriangle,\n    DtIconAlertCircle,\n    DtIconBell,\n  },\n\n  props: {\n    /**\n     * Kind of icon\n     * @values base, critical, info, positive, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validator (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n  },\n\n  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    defaultIcon () {\n      return kindToIcon.get(this.kind);\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;;AA2BA,IAAM,IAAa,IAAI,IAAI;CACzB,CAAC,QAAQ,EAAW;CACpB,CAAC,YAAY,EAAkB;CAC/B,CAAC,WAAW,EAAoB;CAChC,CAAC,YAAY,EAAkB;CAC/B,CAAC,QAAQ,EAAW;CACrB,CAAC,EAEG,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,YAAY;EACV;EACA;EACA;EACA;EACA;EACD;CAED,OAAO,EAKL,MAAM;EACJ,MAAM;EACN,SAAS;EACT,UAAW,GAAM;AACf,UAAO,EAAa,SAAS,EAAK;;EAErC,EACF;CAED,OAAQ;AACN,SAAO,EACL,mBACD;;CAGH,UAAU,EACR,cAAe;AACb,SAAO,EAAW,IAAI,KAAK,KAAK;IAEnC;CACF;;CArEG,eAAY;CACZ,OAAM;;;QAFA,EAAA,eAAe,EAAA,eAAe,EAAA,OAAO,QAAO,IAAA,GAAA,EADpD,EAYM,OAZN,GAYM,CANJ,EAKO,EAAA,QAAA,WAAA,EAAA,QAAA,EAAA,GAAA,EAJL,EAGE,EAFK,EAAA,YAAW,EAAA,EAChB,MAAK,OAAK,CAAA,EAAA,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA"}

package/dist/lib/notice/notice.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`./notice-constants.cjs`),n=require(`./notice-icon.cjs`),r=require(`./notice-content.cjs`),i=require(`./notice-action.cjs`);let a=require(`vue`);var o={compatConfig:{MODE:3},name:`DtNotice`,components:{DtNoticeIcon:n.default,DtNoticeContent:r.default,DtNoticeAction:i.default},props:{titleId:{type:String,default:void 0},contentId:{type:String,default:void 0},title:{type:String,default:``},role:{type:String,default:`status`,validate(e){return t.NOTICE_ROLES.includes(e)}},important:{type:Boolean,default:!1},kind:{type:String,default:`base`,validate(e){return t.NOTICE_KINDS.includes(e)}},hideClose:{type:Boolean,default:!1},hideIcon:{type:Boolean,default:!1},hideAction:{type:Boolean,default:!1},truncateText:{type:Boolean,default:!1}},emits:[`close`,`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 s(e,t,n,r,i,o){let s=(0,a.resolveComponent)(`dt-notice-icon`),c=(0,a.resolveComponent)(`dt-notice-content`),l=(0,a.resolveComponent)(`dt-notice-action`);return(0,a.openBlock)(),(0,a.createElementBlock)(`aside`,{class:(0,a.normalizeClass)(o.noticeClass),"data-qa":`notice`},[n.hideIcon?(0,a.createCommentVNode)(``,!0):((0,a.openBlock)(),(0,a.createBlock)(s,{key:0,kind:n.kind},{default:(0,a.withCtx)(()=>[(0,a.renderSlot)(e.$slots,`icon`)]),_:3},8,[`kind`])),(0,a.createVNode)(c,{"title-id":n.titleId,"content-id":n.contentId,title:n.title,role:n.role},{titleOverride:(0,a.withCtx)(()=>[(0,a.renderSlot)(e.$slots,`titleOverride`)]),default:(0,a.withCtx)(()=>[(0,a.renderSlot)(e.$slots,`default`)]),_:3},8,[`title-id`,`content-id`,`title`,`role`]),(0,a.createVNode)(l,{"hide-action":n.hideAction,"hide-close":n.hideClose,onClose:t[0]||(t[0]=t=>e.$emit(`close`))},{default:(0,a.withCtx)(()=>[(0,a.renderSlot)(e.$slots,`action`)]),_:3},8,[`hide-action`,`hide-close`])],2)}var c=e.t(o,[[`render`,s]]);exports.default=c;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`./notice-constants.cjs`),n=require(`./notice-icon.cjs`),r=require(`./notice-content.cjs`),i=require(`./notice-action.cjs`);let a=require(`vue`);var o={compatConfig:{MODE:3},name:`DtNotice`,components:{DtNoticeIcon:n.default,DtNoticeContent:r.default,DtNoticeAction:i.default},props:{titleId:{type:String,default:void 0},contentId:{type:String,default:void 0},title:{type:String,default:``},role:{type:String,default:`status`,validate(e){return t.NOTICE_ROLES.includes(e)}},important:{type:Boolean,default:!1},kind:{type:String,default:`base`,validator(e){return t.NOTICE_KINDS.includes(e)}},showClose:{type:Boolean,default:!0},showIcon:{type:Boolean,default:!0},showAction:{type:Boolean,default:!0},truncateText:{type:Boolean,default:!1}},emits:[`close`,`click`],computed:{noticeClass(){return[`d-notice`,{critical:`d-notice--critical`,info:`d-notice--info`,positive:`d-notice--positive`,warning:`d-notice--warning`,base:`d-notice--base`}[this.kind],{"d-notice--important":this.important,"d-notice--truncate":this.truncateText}]}}};function s(e,t,n,r,i,o){let s=(0,a.resolveComponent)(`dt-notice-icon`),c=(0,a.resolveComponent)(`dt-notice-content`),l=(0,a.resolveComponent)(`dt-notice-action`);return(0,a.openBlock)(),(0,a.createElementBlock)(`aside`,{class:(0,a.normalizeClass)(o.noticeClass),"data-qa":`notice`},[n.showIcon?((0,a.openBlock)(),(0,a.createBlock)(s,{key:0,kind:n.kind,class:(0,a.normalizeClass)({"d-notice__icon--has-title":n.title||e.$slots.title})},{default:(0,a.withCtx)(()=>[(0,a.renderSlot)(e.$slots,`icon`)]),_:3},8,[`kind`,`class`])):(0,a.createCommentVNode)(``,!0),(0,a.createVNode)(c,{"title-id":n.titleId,"content-id":n.contentId,title:n.title,role:n.role},{title:(0,a.withCtx)(()=>[(0,a.renderSlot)(e.$slots,`title`)]),default:(0,a.withCtx)(()=>[(0,a.renderSlot)(e.$slots,`default`)]),_:3},8,[`title-id`,`content-id`,`title`,`role`]),(0,a.createVNode)(l,{"show-action":n.showAction,"show-close":n.showClose,onClose:t[0]||(t[0]=t=>e.$emit(`close`))},{default:(0,a.withCtx)(()=>[(0,a.renderSlot)(e.$slots,`action`)]),_:3},8,[`show-action`,`show-close`])],2)}var c=e.t(o,[[`render`,s]]);exports.default=c;
 //# sourceMappingURL=notice.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"notice.cjs","names":[],"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"],"mappings":"8VA+CA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,WAEN,WAAY,CACV,aAAA,EAAA,QACA,gBAAA,EAAA,QACA,eAAA,EAAA,QACD,CAED,MAAO,CAKL,QAAS,CACP,KAAM,OACN,QAAS,IAAA,GACV,CAMD,UAAW,CACT,KAAM,OACN,QAAS,IAAA,GACV,CAKD,MAAO,CACL,KAAM,OACN,QAAS,GACV,CAQD,KAAM,CACJ,KAAM,OACN,QAAS,SACT,SAAU,EAAM,CACd,OAAO,EAAA,aAAa,SAAS,EAAK,EAErC,CAOD,UAAW,CACT,KAAM,QACN,QAAS,GACV,CAMD,KAAM,CACJ,KAAM,OACN,QAAS,OACT,SAAU,EAAM,CACd,OAAO,EAAA,aAAa,SAAS,EAAK,EAErC,CAMD,UAAW,CACT,KAAM,QACN,QAAS,GACV,CAMD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAMD,WAAY,CACV,KAAM,QACN,QAAS,GACV,CAOD,aAAc,CACZ,KAAM,QACN,QAAS,GACV,CACF,CAED,MAAO,CAML,QAQA,QACD,CAED,SAAU,CACR,aAAe,CAQb,MAAO,CACL,WARkB,CAClB,MAAO,kBACP,KAAM,iBACN,QAAS,oBACT,QAAS,oBACT,KAAM,iBACP,CAGa,KAAK,MACjB,CAAE,sBAAuB,KAAK,UAAW,qBAAsB,KAAK,aAAc,CACnF,EAEJ,CACF,oNA7JS,QAAA,CAhCL,OAAA,EAAA,EAAA,gBAAO,EAAA,YAAW,CACnB,UAAQ,WAGC,EAAA,2CAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,aAKQ,EAAA,OAJd,KAAM,EAAA,iCAGa,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,OAAA,CAAA,CAAA,qCAeF,EAAA,CAZjB,WAAU,EAAA,QACV,aAAY,EAAA,UACZ,MAAO,EAAA,MACP,KAAM,EAAA,OAEI,eAAA,EAAA,EAAA,aAGoB,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,gBAAA,CAAA,CAAA,2BAGvB,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,UAAA,CAAA,CAAA,oEASS,EAAA,CANhB,cAAa,EAAA,WACb,aAAY,EAAA,UACZ,QAAK,EAAA,KAAA,EAAA,GAAA,GAAE,EAAA,MAAK,QAAA,8BAGS,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,SAAA,CAAA,CAAA"}
+{"version":3,"file":"notice.cjs","names":[],"sources":["../../../components/notice/notice.vue"],"sourcesContent":["<template>\n  <aside\n    :class=\"noticeClass\"\n    data-qa=\"notice\"\n  >\n    <dt-notice-icon\n      v-if=\"showIcon\"\n      :kind=\"kind\"\n      :class=\"{ 'd-notice__icon--has-title': title || $slots.title }\"\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 #title>\n        <!-- @slot Slot for the title -->\n        <slot name=\"title\" />\n      </template>\n      <!-- @slot the main textual content of the notice -->\n      <slot />\n    </dt-notice-content>\n    <dt-notice-action\n      :show-action=\"showAction\"\n      :show-close=\"showClose\"\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, critical, info, positive, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validator (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Shows the close button in the notice\n     * @values true, false\n     */\n    showClose: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Shows the icon in the notice\n     * @values true, false\n     */\n    showIcon: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Shows the action in the notice\n     * @values true, false\n     */\n    showAction: {\n      type: Boolean,\n      default: true,\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        critical: 'd-notice--critical',\n        info: 'd-notice--info',\n        positive: 'd-notice--positive',\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"],"mappings":"8VA+CA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,WAEN,WAAY,CACV,aAAA,EAAA,QACA,gBAAA,EAAA,QACA,eAAA,EAAA,QACD,CAED,MAAO,CAKL,QAAS,CACP,KAAM,OACN,QAAS,IAAA,GACV,CAMD,UAAW,CACT,KAAM,OACN,QAAS,IAAA,GACV,CAKD,MAAO,CACL,KAAM,OACN,QAAS,GACV,CAQD,KAAM,CACJ,KAAM,OACN,QAAS,SACT,SAAU,EAAM,CACd,OAAO,EAAA,aAAa,SAAS,EAAK,EAErC,CAOD,UAAW,CACT,KAAM,QACN,QAAS,GACV,CAMD,KAAM,CACJ,KAAM,OACN,QAAS,OACT,UAAW,EAAM,CACf,OAAO,EAAA,aAAa,SAAS,EAAK,EAErC,CAMD,UAAW,CACT,KAAM,QACN,QAAS,GACV,CAMD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAMD,WAAY,CACV,KAAM,QACN,QAAS,GACV,CAOD,aAAc,CACZ,KAAM,QACN,QAAS,GACV,CACF,CAED,MAAO,CAML,QAQA,QACD,CAED,SAAU,CACR,aAAe,CAQb,MAAO,CACL,WARkB,CAClB,SAAU,qBACV,KAAM,iBACN,SAAU,qBACV,QAAS,oBACT,KAAM,iBACP,CAGa,KAAK,MACjB,CAAE,sBAAuB,KAAK,UAAW,qBAAsB,KAAK,aAAc,CACnF,EAEJ,CACF,oNA7JS,QAAA,CAhCL,OAAA,EAAA,EAAA,gBAAO,EAAA,YAAW,CACnB,UAAQ,WAGA,EAAA,WAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,aAMS,EAAA,OALd,KAAM,EAAA,KACN,OAAA,EAAA,EAAA,gBAAK,CAAA,4BAAiC,EAAA,OAAS,EAAA,OAAO,MAAK,CAAA,6BAGxC,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,OAAA,CAAA,CAAA,6EAcF,EAAA,CAXjB,WAAU,EAAA,QACV,aAAY,EAAA,UACZ,MAAO,EAAA,MACP,KAAM,EAAA,OAEI,OAAA,EAAA,EAAA,aAEY,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,QAAA,CAAA,CAAA,2BAGf,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,UAAA,CAAA,CAAA,oEASS,EAAA,CANhB,cAAa,EAAA,WACb,aAAY,EAAA,UACZ,QAAK,EAAA,KAAA,EAAA,GAAA,GAAE,EAAA,MAAK,QAAA,8BAGS,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,SAAA,CAAA,CAAA"}

package/dist/lib/notice/notice.js

@@ -40,21 +40,21 @@ var h = {
 		kind: {
 			type: String,
 			default: "base",
-			validate(e) {
+			validator(e) {
 				return t.includes(e);
 			}
 		},
-		hideClose: {
+		showClose: {
 			type: Boolean,
-			default: !1
+			default: !0
 		},
-		hideIcon: {
+		showIcon: {
 			type: Boolean,
-			default: !1
+			default: !0
 		},
-		hideAction: {
+		showAction: {
 			type: Boolean,
-			default: !1
+			default: !0
 		},
 		truncateText: {
 			type: Boolean,
@@ -66,9 +66,9 @@ var h = {
 		return [
 			"d-notice",
 			{
-				error: "d-notice--error",
+				critical: "d-notice--critical",
 				info: "d-notice--info",
-				success: "d-notice--success",
+				positive: "d-notice--positive",
 				warning: "d-notice--warning",
 				base: "d-notice--base"
 			}[this.kind],
@@ -85,20 +85,21 @@ function g(e, t, n, r, i, a) {
 		class: u(a.noticeClass),
 		"data-qa": "notice"
 	}, [
-		n.hideIcon ? s("", !0) : (d(), o(h, {
+		n.showIcon ? (d(), o(h, {
 			key: 0,
-			kind: n.kind
+			kind: n.kind,
+			class: u({ "d-notice__icon--has-title": n.title || e.$slots.title })
 		}, {
 			default: m(() => [f(e.$slots, "icon")]),
 			_: 3
-		}, 8, ["kind"])),
+		}, 8, ["kind", "class"])) : s("", !0),
 		l(g, {
 			"title-id": n.titleId,
 			"content-id": n.contentId,
 			title: n.title,
 			role: n.role
 		}, {
-			titleOverride: m(() => [f(e.$slots, "titleOverride")]),
+			title: m(() => [f(e.$slots, "title")]),
 			default: m(() => [f(e.$slots, "default")]),
 			_: 3
 		}, 8, [
@@ -108,13 +109,13 @@ function g(e, t, n, r, i, a) {
 			"role"
 		]),
 		l(_, {
-			"hide-action": n.hideAction,
-			"hide-close": n.hideClose,
+			"show-action": n.showAction,
+			"show-close": n.showClose,
 			onClose: t[0] || (t[0] = (t) => e.$emit("close"))
 		}, {
 			default: m(() => [f(e.$slots, "action")]),
 			_: 3
-		}, 8, ["hide-action", "hide-close"])
+		}, 8, ["show-action", "show-close"])
 	], 2);
 }
 var _ = /* @__PURE__ */ e(h, [["render", g]]);

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

@@ -1 +1 @@
-{"version":3,"file":"notice.js","names":[],"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"],"mappings":";;;;;;;AA+CA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,YAAY;EACV,cAAA;EACA,iBAAA;EACA,gBAAA;EACD;CAED,OAAO;EAKL,SAAS;GACP,MAAM;GACN,SAAS,KAAA;GACV;EAMD,WAAW;GACT,MAAM;GACN,SAAS,KAAA;GACV;EAKD,OAAO;GACL,MAAM;GACN,SAAS;GACV;EAQD,MAAM;GACJ,MAAM;GACN,SAAS;GACT,SAAU,GAAM;AACd,WAAO,EAAa,SAAS,EAAK;;GAErC;EAOD,WAAW;GACT,MAAM;GACN,SAAS;GACV;EAMD,MAAM;GACJ,MAAM;GACN,SAAS;GACT,SAAU,GAAM;AACd,WAAO,EAAa,SAAS,EAAK;;GAErC;EAMD,WAAW;GACT,MAAM;GACN,SAAS;GACV;EAMD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAMD,YAAY;GACV,MAAM;GACN,SAAS;GACV;EAOD,cAAc;GACZ,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAO,CAML,SAQA,QACD;CAED,UAAU,EACR,cAAe;AAQb,SAAO;GACL;GARkB;IAClB,OAAO;IACP,MAAM;IACN,SAAS;IACT,SAAS;IACT,MAAM;IACP,CAGa,KAAK;GACjB;IAAE,uBAAuB,KAAK;IAAW,sBAAsB,KAAK;IAAc;GACnF;IAEJ;CACF;;;aA9LC,EAiCQ,SAAA;EAhCL,OAAK,EAAE,EAAA,YAAW;EACnB,WAAQ;;EAGC,EAAA,wBAAA,GAAA,EADT,EAMiB,GAAA;;GAJd,MAAM,EAAA;;oBAGa,CAApB,EAAoB,EAAA,QAAA,OAAA,CAAA,CAAA;;;EAEtB,EAaoB,GAAA;GAZjB,YAAU,EAAA;GACV,cAAY,EAAA;GACZ,OAAO,EAAA;GACP,MAAM,EAAA;;GAEI,eAAa,QAGO,CAA7B,EAA6B,EAAA,QAAA,gBAAA,CAAA,CAAA;oBAGvB,CAAR,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA;;;;;;;;EAEV,EAOmB,GAAA;GANhB,eAAa,EAAA;GACb,cAAY,EAAA;GACZ,SAAK,EAAA,OAAA,EAAA,MAAA,MAAE,EAAA,MAAK,QAAA;;oBAGS,CAAtB,EAAsB,EAAA,QAAA,SAAA,CAAA,CAAA"}
+{"version":3,"file":"notice.js","names":[],"sources":["../../../components/notice/notice.vue"],"sourcesContent":["<template>\n  <aside\n    :class=\"noticeClass\"\n    data-qa=\"notice\"\n  >\n    <dt-notice-icon\n      v-if=\"showIcon\"\n      :kind=\"kind\"\n      :class=\"{ 'd-notice__icon--has-title': title || $slots.title }\"\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 #title>\n        <!-- @slot Slot for the title -->\n        <slot name=\"title\" />\n      </template>\n      <!-- @slot the main textual content of the notice -->\n      <slot />\n    </dt-notice-content>\n    <dt-notice-action\n      :show-action=\"showAction\"\n      :show-close=\"showClose\"\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, critical, info, positive, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validator (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Shows the close button in the notice\n     * @values true, false\n     */\n    showClose: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Shows the icon in the notice\n     * @values true, false\n     */\n    showIcon: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Shows the action in the notice\n     * @values true, false\n     */\n    showAction: {\n      type: Boolean,\n      default: true,\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        critical: 'd-notice--critical',\n        info: 'd-notice--info',\n        positive: 'd-notice--positive',\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"],"mappings":";;;;;;;AA+CA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,YAAY;EACV,cAAA;EACA,iBAAA;EACA,gBAAA;EACD;CAED,OAAO;EAKL,SAAS;GACP,MAAM;GACN,SAAS,KAAA;GACV;EAMD,WAAW;GACT,MAAM;GACN,SAAS,KAAA;GACV;EAKD,OAAO;GACL,MAAM;GACN,SAAS;GACV;EAQD,MAAM;GACJ,MAAM;GACN,SAAS;GACT,SAAU,GAAM;AACd,WAAO,EAAa,SAAS,EAAK;;GAErC;EAOD,WAAW;GACT,MAAM;GACN,SAAS;GACV;EAMD,MAAM;GACJ,MAAM;GACN,SAAS;GACT,UAAW,GAAM;AACf,WAAO,EAAa,SAAS,EAAK;;GAErC;EAMD,WAAW;GACT,MAAM;GACN,SAAS;GACV;EAMD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAMD,YAAY;GACV,MAAM;GACN,SAAS;GACV;EAOD,cAAc;GACZ,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAO,CAML,SAQA,QACD;CAED,UAAU,EACR,cAAe;AAQb,SAAO;GACL;GARkB;IAClB,UAAU;IACV,MAAM;IACN,UAAU;IACV,SAAS;IACT,MAAM;IACP,CAGa,KAAK;GACjB;IAAE,uBAAuB,KAAK;IAAW,sBAAsB,KAAK;IAAc;GACnF;IAEJ;CACF;;;aA9LC,EAiCQ,SAAA;EAhCL,OAAK,EAAE,EAAA,YAAW;EACnB,WAAQ;;EAGA,EAAA,YAAA,GAAA,EADR,EAOiB,GAAA;;GALd,MAAM,EAAA;GACN,OAAK,EAAA,EAAA,6BAAiC,EAAA,SAAS,EAAA,OAAO,OAAK,CAAA;;oBAGxC,CAApB,EAAoB,EAAA,QAAA,OAAA,CAAA,CAAA;;;EAEtB,EAYoB,GAAA;GAXjB,YAAU,EAAA;GACV,cAAY,EAAA;GACZ,OAAO,EAAA;GACP,MAAM,EAAA;;GAEI,OAAK,QAEO,CAArB,EAAqB,EAAA,QAAA,QAAA,CAAA,CAAA;oBAGf,CAAR,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA;;;;;;;;EAEV,EAOmB,GAAA;GANhB,eAAa,EAAA;GACb,cAAY,EAAA;GACZ,SAAK,EAAA,OAAA,EAAA,MAAA,MAAE,EAAA,MAAK,QAAA;;oBAGS,CAAtB,EAAsB,EAAA,QAAA,SAAA,CAAA,CAAA"}

package/dist/lib/pagination/pagination.cjs

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

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

@@ -1 +1 @@
-{"version":3,"file":"pagination.cjs","names":[],"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"],"mappings":"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"}
+{"version":3,"file":"pagination.cjs","names":[],"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/vue';\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     * Shows the first and last page buttons when not near the edges.\n     * Set to false when your backend does not support offset and you can only use cursor based pagination.\n     */\n    showEdges: {\n      type: Boolean,\n      default: true,\n    },\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 showEdges is false, modify the start and\n      // end to account for the hidden edge pages\n      if (!this.showEdges) {\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.showEdges) {\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.showEdges) {\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 showEdges is false, modify the left and right to account for the hidden edge pages\n      if (!this.showEdges) {\n        left = left - 1;\n        right = right + 1;\n      }\n\n      const pages = ['...', ...this.range(left, right), '...'];\n      if (this.showEdges) {\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"],"mappings":"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"}