@dialpad/dialtone-vue 3.150.0 → 3.150.1

package/dist/lib/notice.cjs

@@ -1,207 +1,14 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const notice_action = require("../chunks/notice_action-WTucGhvr.js");
-const notice_constants = require("../chunks/notice_constants-UXo9e3bS.js");
-const sr_only_close_button = require("../chunks/sr_only_close_button-xGrHFjwA.js");
-const vue = require("vue");
-const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
-require("../common/utils.cjs");
-require("../common/constants.cjs");
-require("./icon.cjs");
-require("@dialpad/dialtone-icons/vue3");
-require("../chunks/icon_constants-da57m7BZ.js");
-require("@dialpad/dialtone-icons/icons.js");
-require("./button.cjs");
-require("../chunks/link_constants-x8NwdqmA.js");
-const _sfc_main = {
-  name: "DtNotice",
-  components: {
-    DtNoticeIcon: notice_action.DtNoticeIcon,
-    DtNoticeContent: notice_action.DtNoticeContent,
-    DtNoticeAction: notice_action.DtNoticeAction
-  },
-  mixins: [sr_only_close_button.SrOnlyCloseButtonMixin],
-  props: {
-    /**
-     * Sets an ID on the title element of the component. Useful for aria-describedby
-     * or aria-labelledby or any other reason you may need an id to refer to the title.
-     */
-    titleId: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Sets an ID on the content element of the component. Useful for aria-describedby
-     * or aria-labelledby or any other reason you may need an id to refer to the content.
-     */
-    contentId: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Title header of the notice. This can be left blank to remove the title from the notice entirely.
-     */
-    title: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Provides a role for the notice. 'status' is used to communicate a message. 'alert' is used to communicate an
-     * important message that does not contain any interactive elements. 'alertdialog' is used to communicate an
-     * important message that does contain interactive elements.
-     * @values alert, alertdialog, status
-     */
-    role: {
-      type: String,
-      default: "status",
-      validate(role) {
-        return notice_constants.NOTICE_ROLES.includes(role);
-      }
-    },
-    /**
-     * Used in scenarios where the message needs to visually dominate the screen.
-     * This will also change the aria role from status to alert.
-     * @values true, false
-     */
-    important: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Severity level of the notice, sets the icon and background
-     * @values base, error, info, success, warning
-     */
-    kind: {
-      type: String,
-      default: "base",
-      validate(kind) {
-        return notice_constants.NOTICE_KINDS.includes(kind);
-      }
-    },
-    /**
-     * Props for the notice close button.
-     */
-    closeButtonProps: {
-      type: Object,
-      default: () => ({})
-    },
-    /**
-     * Hides the close button from the notice
-     * @values true, false
-     */
-    hideClose: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Hides the icon from the notice
-     * @values true, false
-     */
-    hideIcon: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Hides the action from the notice
-     * @values true, false
-     */
-    hideAction: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Truncates the content instead of wrapping.
-     * Used when the notice needs to have a fixed height.
-     * @values true, false
-     */
-    truncateText: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: [
-    /**
-     * Close button click event
-     *
-     * @event close
-     */
-    "close",
-    /**
-     * Native button click event
-     *
-     * @event click
-     * @type {PointerEvent | KeyboardEvent}
-     */
-    "click"
-  ],
-  computed: {
-    noticeClass() {
-      const noticeKinds = {
-        error: "d-notice--error",
-        info: "d-notice--info",
-        success: "d-notice--success",
-        warning: "d-notice--warning",
-        base: "d-notice--base"
-      };
-      return [
-        "d-notice",
-        noticeKinds[this.kind],
-        { "d-notice--important": this.important, "d-notice--truncate": this.truncateText }
-      ];
-    }
-  }
-};
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_notice_icon = vue.resolveComponent("dt-notice-icon");
-  const _component_dt_notice_content = vue.resolveComponent("dt-notice-content");
-  const _component_dt_notice_action = vue.resolveComponent("dt-notice-action");
-  return vue.openBlock(), vue.createElementBlock("aside", {
-    class: vue.normalizeClass($options.noticeClass),
-    "data-qa": "notice"
-  }, [
-    !$props.hideIcon ? (vue.openBlock(), vue.createBlock(_component_dt_notice_icon, {
-      key: 0,
-      kind: $props.kind
-    }, {
-      default: vue.withCtx(() => [
-        vue.renderSlot(_ctx.$slots, "icon")
-      ]),
-      _: 3
-    }, 8, ["kind"])) : vue.createCommentVNode("", true),
-    vue.createVNode(_component_dt_notice_content, {
-      "title-id": $props.titleId,
-      "content-id": $props.contentId,
-      title: $props.title,
-      role: $props.role
-    }, {
-      titleOverride: vue.withCtx(() => [
-        vue.renderSlot(_ctx.$slots, "titleOverride")
-      ]),
-      default: vue.withCtx(() => [
-        vue.renderSlot(_ctx.$slots, "default")
-      ]),
-      _: 3
-    }, 8, ["title-id", "content-id", "title", "role"]),
-    vue.createVNode(_component_dt_notice_action, {
-      "hide-action": $props.hideAction,
-      "hide-close": $props.hideClose,
-      "close-button-props": $props.closeButtonProps,
-      "visually-hidden-close": _ctx.visuallyHiddenClose,
-      "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
-      onClose: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close"))
-    }, {
-      default: vue.withCtx(() => [
-        vue.renderSlot(_ctx.$slots, "action")
-      ]),
-      _: 3
-    }, 8, ["hide-action", "hide-close", "close-button-props", "visually-hidden-close", "visually-hidden-close-label"])
-  ], 2);
-}
-const notice = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
-exports.DtNoticeAction = notice_action.DtNoticeAction;
-exports.DtNoticeContent = notice_action.DtNoticeContent;
-exports.DtNoticeIcon = notice_action.DtNoticeIcon;
+const notice = require("../components/notice/notice.vue.cjs");
+const notice_action = require("../components/notice/notice_action.vue.cjs");
+const notice_icon = require("../components/notice/notice_icon.vue.cjs");
+const notice_content = require("../components/notice/notice_content.vue.cjs");
+const notice_constants = require("../components/notice/notice_constants.cjs");
+exports.DtNotice = notice;
+exports.DtNoticeAction = notice_action;
+exports.DtNoticeIcon = notice_icon;
+exports.DtNoticeContent = notice_content;
 exports.NOTICE_KINDS = notice_constants.NOTICE_KINDS;
 exports.NOTICE_ROLES = notice_constants.NOTICE_ROLES;
-exports.DtNotice = notice;
 //# sourceMappingURL=notice.cjs.map

package/dist/lib/notice.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"notice.cjs","sources":["../../components/notice/notice.vue"],"sourcesContent":["<template>\n  <aside\n    :class=\"noticeClass\"\n    data-qa=\"notice\"\n  >\n    <dt-notice-icon\n      v-if=\"!hideIcon\"\n      :kind=\"kind\"\n    >\n      <!-- @slot Slot for custom icon -->\n      <slot name=\"icon\" />\n    </dt-notice-icon>\n    <dt-notice-content\n      :title-id=\"titleId\"\n      :content-id=\"contentId\"\n      :title=\"title\"\n      :role=\"role\"\n    >\n      <template #titleOverride>\n        <!-- @slot Allows you to override the title, only use this if you need\n        to override with something other than text. Otherwise use the \"title\" prop. -->\n        <slot name=\"titleOverride\" />\n      </template>\n      <!-- @slot the main textual content of the notice -->\n      <slot />\n    </dt-notice-content>\n    <dt-notice-action\n      :hide-action=\"hideAction\"\n      :hide-close=\"hideClose\"\n      :close-button-props=\"closeButtonProps\"\n      :visually-hidden-close=\"visuallyHiddenClose\"\n      :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\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';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\n\n/**\n * A notice is an informational and assistive message that appears inline with content.\n * @see https://dialtone.dialpad.com/components/notice.html\n */\nexport default {\n  name: 'DtNotice',\n\n  components: {\n    DtNoticeIcon,\n    DtNoticeContent,\n    DtNoticeAction,\n  },\n\n  mixins: [SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * Sets an ID on the title element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the title.\n     */\n    titleId: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Sets an ID on the content element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the content.\n     */\n    contentId: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Title header of the notice. This can be left blank to remove the title from the notice entirely.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Provides a role for the notice. 'status' is used to communicate a message. 'alert' is used to communicate an\n     * important message that does not contain any interactive elements. 'alertdialog' is used to communicate an\n     * important message that does contain interactive elements.\n     * @values alert, alertdialog, status\n     */\n    role: {\n      type: String,\n      default: 'status',\n      validate (role) {\n        return NOTICE_ROLES.includes(role);\n      },\n    },\n\n    /**\n     * Used in scenarios where the message needs to visually dominate the screen.\n     * This will also change the aria role from status to alert.\n     * @values true, false\n     */\n    important: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Severity level of the notice, sets the icon and background\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Props for the notice close button.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Hides the close button from the notice\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the icon from the notice\n     * @values true, false\n     */\n    hideIcon: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Truncates the content instead of wrapping.\n     * Used when the notice needs to have a fixed height.\n     * @values true, false\n     */\n    truncateText: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n\n    /**\n     * Native button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  computed: {\n    noticeClass () {\n      const noticeKinds = {\n        error: 'd-notice--error',\n        info: 'd-notice--info',\n        success: 'd-notice--success',\n        warning: 'd-notice--warning',\n        base: 'd-notice--base',\n      };\n      return [\n        'd-notice',\n        noticeKinds[this.kind],\n        { 'd-notice--important': this.important, 'd-notice--truncate': this.truncateText },\n      ];\n    },\n  },\n};\n</script>\n"],"names":["DtNoticeIcon","DtNoticeContent","DtNoticeAction","SrOnlyCloseButtonMixin","NOTICE_ROLES","NOTICE_KINDS","_createElementBlock","_createBlock","_renderSlot","_createVNode"],"mappings":"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"}
+{"version":3,"file":"notice.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/dist/lib/notice.js

@@ -1,206 +1,13 @@
-import { DtNoticeIcon, DtNoticeContent, DtNoticeAction } from "../chunks/notice_action-p-ePanW_.js";
-import { NOTICE_ROLES, NOTICE_KINDS } from "../chunks/notice_constants-7Qt2CQEY.js";
-import { SrOnlyCloseButtonMixin } from "../chunks/sr_only_close_button-3EdsV-dH.js";
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createCommentVNode, createVNode } from "vue";
-import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
-import "../common/utils.js";
-import "../common/constants.js";
-import "./icon.js";
-import "@dialpad/dialtone-icons/vue3";
-import "../chunks/icon_constants-H9ahUVCG.js";
-import "@dialpad/dialtone-icons/icons.js";
-import "./button.js";
-import "../chunks/link_constants-AfTWrr-n.js";
-const _sfc_main = {
-  name: "DtNotice",
-  components: {
-    DtNoticeIcon,
-    DtNoticeContent,
-    DtNoticeAction
-  },
-  mixins: [SrOnlyCloseButtonMixin],
-  props: {
-    /**
-     * Sets an ID on the title element of the component. Useful for aria-describedby
-     * or aria-labelledby or any other reason you may need an id to refer to the title.
-     */
-    titleId: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Sets an ID on the content element of the component. Useful for aria-describedby
-     * or aria-labelledby or any other reason you may need an id to refer to the content.
-     */
-    contentId: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Title header of the notice. This can be left blank to remove the title from the notice entirely.
-     */
-    title: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Provides a role for the notice. 'status' is used to communicate a message. 'alert' is used to communicate an
-     * important message that does not contain any interactive elements. 'alertdialog' is used to communicate an
-     * important message that does contain interactive elements.
-     * @values alert, alertdialog, status
-     */
-    role: {
-      type: String,
-      default: "status",
-      validate(role) {
-        return NOTICE_ROLES.includes(role);
-      }
-    },
-    /**
-     * Used in scenarios where the message needs to visually dominate the screen.
-     * This will also change the aria role from status to alert.
-     * @values true, false
-     */
-    important: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Severity level of the notice, sets the icon and background
-     * @values base, error, info, success, warning
-     */
-    kind: {
-      type: String,
-      default: "base",
-      validate(kind) {
-        return NOTICE_KINDS.includes(kind);
-      }
-    },
-    /**
-     * Props for the notice close button.
-     */
-    closeButtonProps: {
-      type: Object,
-      default: () => ({})
-    },
-    /**
-     * Hides the close button from the notice
-     * @values true, false
-     */
-    hideClose: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Hides the icon from the notice
-     * @values true, false
-     */
-    hideIcon: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Hides the action from the notice
-     * @values true, false
-     */
-    hideAction: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Truncates the content instead of wrapping.
-     * Used when the notice needs to have a fixed height.
-     * @values true, false
-     */
-    truncateText: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: [
-    /**
-     * Close button click event
-     *
-     * @event close
-     */
-    "close",
-    /**
-     * Native button click event
-     *
-     * @event click
-     * @type {PointerEvent | KeyboardEvent}
-     */
-    "click"
-  ],
-  computed: {
-    noticeClass() {
-      const noticeKinds = {
-        error: "d-notice--error",
-        info: "d-notice--info",
-        success: "d-notice--success",
-        warning: "d-notice--warning",
-        base: "d-notice--base"
-      };
-      return [
-        "d-notice",
-        noticeKinds[this.kind],
-        { "d-notice--important": this.important, "d-notice--truncate": this.truncateText }
-      ];
-    }
-  }
-};
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_notice_icon = resolveComponent("dt-notice-icon");
-  const _component_dt_notice_content = resolveComponent("dt-notice-content");
-  const _component_dt_notice_action = resolveComponent("dt-notice-action");
-  return openBlock(), createElementBlock("aside", {
-    class: normalizeClass($options.noticeClass),
-    "data-qa": "notice"
-  }, [
-    !$props.hideIcon ? (openBlock(), createBlock(_component_dt_notice_icon, {
-      key: 0,
-      kind: $props.kind
-    }, {
-      default: withCtx(() => [
-        renderSlot(_ctx.$slots, "icon")
-      ]),
-      _: 3
-    }, 8, ["kind"])) : createCommentVNode("", true),
-    createVNode(_component_dt_notice_content, {
-      "title-id": $props.titleId,
-      "content-id": $props.contentId,
-      title: $props.title,
-      role: $props.role
-    }, {
-      titleOverride: withCtx(() => [
-        renderSlot(_ctx.$slots, "titleOverride")
-      ]),
-      default: withCtx(() => [
-        renderSlot(_ctx.$slots, "default")
-      ]),
-      _: 3
-    }, 8, ["title-id", "content-id", "title", "role"]),
-    createVNode(_component_dt_notice_action, {
-      "hide-action": $props.hideAction,
-      "hide-close": $props.hideClose,
-      "close-button-props": $props.closeButtonProps,
-      "visually-hidden-close": _ctx.visuallyHiddenClose,
-      "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
-      onClose: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close"))
-    }, {
-      default: withCtx(() => [
-        renderSlot(_ctx.$slots, "action")
-      ]),
-      _: 3
-    }, 8, ["hide-action", "hide-close", "close-button-props", "visually-hidden-close", "visually-hidden-close-label"])
-  ], 2);
-}
-const notice = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+import { default as default2 } from "../components/notice/notice.vue.js";
+import { default as default3 } from "../components/notice/notice_action.vue.js";
+import { default as default4 } from "../components/notice/notice_icon.vue.js";
+import { default as default5 } from "../components/notice/notice_content.vue.js";
+import { NOTICE_KINDS, NOTICE_ROLES } from "../components/notice/notice_constants.js";
 export {
-  notice as DtNotice,
-  DtNoticeAction,
-  DtNoticeContent,
-  DtNoticeIcon,
+  default2 as DtNotice,
+  default3 as DtNoticeAction,
+  default5 as DtNoticeContent,
+  default4 as DtNoticeIcon,
   NOTICE_KINDS,
   NOTICE_ROLES
 };

package/dist/lib/notice.js.map

@@ -1 +1 @@
-{"version":3,"file":"notice.js","sources":["../../components/notice/notice.vue"],"sourcesContent":["<template>\n  <aside\n    :class=\"noticeClass\"\n    data-qa=\"notice\"\n  >\n    <dt-notice-icon\n      v-if=\"!hideIcon\"\n      :kind=\"kind\"\n    >\n      <!-- @slot Slot for custom icon -->\n      <slot name=\"icon\" />\n    </dt-notice-icon>\n    <dt-notice-content\n      :title-id=\"titleId\"\n      :content-id=\"contentId\"\n      :title=\"title\"\n      :role=\"role\"\n    >\n      <template #titleOverride>\n        <!-- @slot Allows you to override the title, only use this if you need\n        to override with something other than text. Otherwise use the \"title\" prop. -->\n        <slot name=\"titleOverride\" />\n      </template>\n      <!-- @slot the main textual content of the notice -->\n      <slot />\n    </dt-notice-content>\n    <dt-notice-action\n      :hide-action=\"hideAction\"\n      :hide-close=\"hideClose\"\n      :close-button-props=\"closeButtonProps\"\n      :visually-hidden-close=\"visuallyHiddenClose\"\n      :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\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';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\n\n/**\n * A notice is an informational and assistive message that appears inline with content.\n * @see https://dialtone.dialpad.com/components/notice.html\n */\nexport default {\n  name: 'DtNotice',\n\n  components: {\n    DtNoticeIcon,\n    DtNoticeContent,\n    DtNoticeAction,\n  },\n\n  mixins: [SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * Sets an ID on the title element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the title.\n     */\n    titleId: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Sets an ID on the content element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the content.\n     */\n    contentId: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Title header of the notice. This can be left blank to remove the title from the notice entirely.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Provides a role for the notice. 'status' is used to communicate a message. 'alert' is used to communicate an\n     * important message that does not contain any interactive elements. 'alertdialog' is used to communicate an\n     * important message that does contain interactive elements.\n     * @values alert, alertdialog, status\n     */\n    role: {\n      type: String,\n      default: 'status',\n      validate (role) {\n        return NOTICE_ROLES.includes(role);\n      },\n    },\n\n    /**\n     * Used in scenarios where the message needs to visually dominate the screen.\n     * This will also change the aria role from status to alert.\n     * @values true, false\n     */\n    important: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Severity level of the notice, sets the icon and background\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Props for the notice close button.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Hides the close button from the notice\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the icon from the notice\n     * @values true, false\n     */\n    hideIcon: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Truncates the content instead of wrapping.\n     * Used when the notice needs to have a fixed height.\n     * @values true, false\n     */\n    truncateText: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n\n    /**\n     * Native button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  computed: {\n    noticeClass () {\n      const noticeKinds = {\n        error: 'd-notice--error',\n        info: 'd-notice--info',\n        success: 'd-notice--success',\n        warning: 'd-notice--warning',\n        base: 'd-notice--base',\n      };\n      return [\n        'd-notice',\n        noticeKinds[this.kind],\n        { 'd-notice--important': this.important, 'd-notice--truncate': this.truncateText },\n      ];\n    },\n  },\n};\n</script>\n"],"names":["_createElementBlock","_createBlock","_renderSlot","_createVNode"],"mappings":"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"}
+{"version":3,"file":"notice.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/lib/pagination.cjs

@@ -1,206 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const vue = require("vue");
-const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
-const lib_button = require("./button.cjs");
-const lib_icon = require("./icon.cjs");
-require("../common/utils.cjs");
-require("../common/constants.cjs");
-require("../chunks/link_constants-x8NwdqmA.js");
-require("@dialpad/dialtone-icons/vue3");
-require("../chunks/icon_constants-da57m7BZ.js");
-require("@dialpad/dialtone-icons/icons.js");
-const _sfc_main = {
-  name: "DtPagination",
-  components: {
-    DtButton: lib_button.DtButton,
-    DtIcon: lib_icon.DtIcon
-  },
-  props: {
-    /**
-     * Descriptive label for the pagination content.
-     */
-    ariaLabel: {
-      type: String,
-      required: true
-    },
-    /**
-     * The total number of the pages
-     */
-    totalPages: {
-      type: Number,
-      required: true
-    },
-    /**
-     * Descriptive label for the previous button.
-     */
-    prevAriaLabel: {
-      type: String,
-      required: true
-    },
-    /**
-     * Descriptive label for the next button.
-     */
-    nextAriaLabel: {
-      type: String,
-      required: true
-    },
-    /**
-     * A method that will be called to get the aria label of each page.
-     */
-    pageNumberAriaLabel: {
-      type: Function,
-      required: true
-    },
-    /**
-     * The active current page in the list of pages, defaults to the first page
-     */
-    activePage: {
-      type: Number,
-      default: 1
-    },
-    /**
-     * Determines the max pages to be shown in the list. Using an odd number is recommended.
-     * If an even number is given, then it will be rounded down to the nearest odd number to always
-     * keep current page in the middle when current page is in the mid-range.
-     */
-    maxVisible: {
-      type: Number,
-      default: 5
-    }
-  },
-  emits: [
-    /**
-     * Page change event
-     *
-     * @event change
-     * @type {Number}
-     */
-    "change"
-  ],
-  data() {
-    return {
-      currentPage: this.activePage
-    };
-  },
-  computed: {
-    isFirstPage() {
-      return this.currentPage === 1;
-    },
-    isLastPage() {
-      return this.currentPage === this.totalPages;
-    },
-    pages() {
-      if (this.maxVisible === 0) {
-        return [];
-      }
-      if (this.totalPages <= this.maxVisible) {
-        return this.range(1, this.totalPages);
-      }
-      const start = this.maxVisible - 1;
-      const end = this.totalPages - start + 1;
-      if (this.currentPage < start) {
-        return [...this.range(1, start), "...", this.totalPages];
-      }
-      if (this.currentPage > end) {
-        return [1, "...", ...this.range(end, this.totalPages)];
-      }
-      const total = this.maxVisible - (3 - this.maxVisible % 2);
-      const centerIndex = Math.floor(total / 2);
-      const left = this.currentPage - centerIndex;
-      const right = this.currentPage + centerIndex;
-      return [1, "...", ...this.range(left, right), "...", this.totalPages];
-    }
-  },
-  methods: {
-    range(from, to) {
-      const range = [];
-      from = from > 0 ? from : 1;
-      for (let i = from; i <= to; i++) {
-        range.push(i);
-      }
-      return range;
-    },
-    changePage(page) {
-      this.currentPage = page;
-      this.$emit("change", this.currentPage);
-    }
-  }
-};
-const _hoisted_1 = ["aria-label"];
-const _hoisted_2 = {
-  key: 0,
-  class: "d-pagination__separator-icon",
-  "data-qa": "dt-pagination-separator"
-};
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_icon = vue.resolveComponent("dt-icon");
-  const _component_dt_button = vue.resolveComponent("dt-button");
-  return vue.openBlock(), vue.createElementBlock("nav", {
-    "aria-label": $props.ariaLabel,
-    class: "d-pagination"
-  }, [
-    vue.createVNode(_component_dt_button, {
-      class: vue.normalizeClass(["d-pagination__button", $options.isFirstPage ? "d-fc-black-300 d-bgc-transparent" : "d-fc-tertiary"]),
-      "data-qa": "dt-pagination-prev",
-      "aria-label": $props.prevAriaLabel,
-      kind: $options.isFirstPage ? "default" : "muted",
-      importance: $options.isFirstPage ? "primary" : "clear",
-      disabled: $options.isFirstPage,
-      onClick: _cache[0] || (_cache[0] = ($event) => $options.changePage($data.currentPage - 1))
-    }, {
-      icon: vue.withCtx(() => [
-        vue.createVNode(_component_dt_icon, {
-          name: "chevron-left",
-          size: "300"
-        })
-      ]),
-      _: 1
-    }, 8, ["aria-label", "kind", "importance", "disabled", "class"]),
-    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.pages, (page, index) => {
-      return vue.openBlock(), vue.createElementBlock("div", {
-        key: `page-${page}-${index}`,
-        class: vue.normalizeClass({ "d-pagination__separator": isNaN(Number(page)) })
-      }, [
-        isNaN(Number(page)) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
-          vue.createVNode(_component_dt_icon, {
-            name: "more-horizontal",
-            size: "300"
-          })
-        ])) : (vue.openBlock(), vue.createBlock(_component_dt_button, {
-          key: 1,
-          "aria-label": $props.pageNumberAriaLabel(page),
-          kind: $data.currentPage === page ? "default" : "muted",
-          importance: $data.currentPage === page ? "primary" : "clear",
-          "label-class": "",
-          onClick: ($event) => $options.changePage(page)
-        }, {
-          default: vue.withCtx(() => [
-            vue.createTextVNode(vue.toDisplayString(page), 1)
-          ]),
-          _: 2
-        }, 1032, ["aria-label", "kind", "importance", "onClick"]))
-      ], 2);
-    }), 128)),
-    vue.createVNode(_component_dt_button, {
-      class: vue.normalizeClass(["d-pagination__button", $options.isLastPage ? "d-fc-black-300 d-bgc-transparent" : "d-fc-tertiary"]),
-      "data-qa": "dt-pagination-next",
-      "aria-label": $props.nextAriaLabel,
-      disabled: $options.isLastPage,
-      kind: "muted",
-      importance: $options.isLastPage ? "primary" : "clear",
-      onClick: _cache[1] || (_cache[1] = ($event) => $options.changePage($data.currentPage + 1))
-    }, {
-      icon: vue.withCtx(() => [
-        vue.createVNode(_component_dt_icon, {
-          name: "chevron-right",
-          size: "300"
-        })
-      ]),
-      _: 1
-    }, 8, ["aria-label", "disabled", "importance", "class"])
-  ], 8, _hoisted_1);
-}
-const pagination = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
+const pagination = require("../components/pagination/pagination.vue.cjs");
 exports.DtPagination = pagination;
 //# sourceMappingURL=pagination.cjs.map