@dialpad/dialtone 9.66.0 → 9.67.0

package/dist/vue3/lib/modal.js

@@ -1,7 +1,7 @@
-import { Modal } from "../chunks/modal-8X6poIZW.js";
+import { Modal } from "../chunks/modal-XOr4kiNZ.js";
 import { getUniqueString, hasSlotContent } from "../common/utils.js";
 import { EVENT_KEYNAMES } from "../common/constants.js";
-import { SrOnlyCloseButton, SrOnlyCloseButtonMixin } from "../chunks/sr_only_close_button-Ji3Zlts6.js";
+import { SrOnlyCloseButton, SrOnlyCloseButtonMixin } from "../chunks/sr_only_close_button-3EdsV-dH.js";
 import { resolveComponent, openBlock, createBlock, mergeProps, toHandlers, withCtx, createElementBlock, normalizeClass, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, Transition, withDirectives, createElementVNode, vShow } from "vue";
 import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
 import { DtLazyShow } from "./lazy-show.js";
@@ -10,7 +10,7 @@ import { DtIcon } from "./icon.js";
 import { NOTICE_KINDS } from "../chunks/notice_constants-7Qt2CQEY.js";
 import "../chunks/link_constants-AfTWrr-n.js";
 import "@dialpad/dialtone-icons/vue3";
-import "../chunks/icon_constants-gIQj4mf7.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
 const MODAL_KIND_MODIFIERS = {
   default: "",
@@ -332,66 +332,106 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(_component_dt_lazy_show, mergeProps({
     transition: "d-zoom",
     show: $props.show,
-    class: ["d-modal", $data.MODAL_KIND_MODIFIERS[$props.kind], $data.MODAL_SIZE_MODIFIERS[$props.size], $props.modalClass],
+    class: [
+      "d-modal",
+      $data.MODAL_KIND_MODIFIERS[$props.kind],
+      $data.MODAL_SIZE_MODIFIERS[$props.size],
+      $props.modalClass
+    ],
     "data-qa": "dt-modal",
     "aria-hidden": $options.open
   }, toHandlers($options.modalListeners)), {
-    default: withCtx(() => [$props.show && ($data.hasSlotContent(_ctx.$slots.banner) || $props.bannerTitle) ? (openBlock(), createElementBlock("div", {
-      key: 0,
-      "data-qa": "dt-modal-banner",
-      class: normalizeClass(["d-modal__banner", $props.bannerClass, $options.bannerKindClass])
-    }, [renderSlot(_ctx.$slots, "banner", {}, () => [createTextVNode(toDisplayString($props.bannerTitle), 1)])], 2)) : createCommentVNode("", true), createVNode(Transition, {
-      appear: "",
-      name: "d-modal__dialog"
-    }, {
-      default: withCtx(() => [withDirectives(createElementVNode("div", {
-        class: normalizeClass(["d-modal__dialog", {
-          "d-modal__dialog--scrollable": $props.fixedHeaderFooter
-        }, $props.dialogClass]),
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-describedby": $props.describedById,
-        "aria-labelledby": $props.labelledById
-      }, [$data.hasSlotContent(_ctx.$slots.header) ? (openBlock(), createElementBlock("div", {
+    default: withCtx(() => [
+      $props.show && ($data.hasSlotContent(_ctx.$slots.banner) || $props.bannerTitle) ? (openBlock(), createElementBlock("div", {
         key: 0,
-        id: $props.labelledById,
-        class: "d-modal__header",
-        "data-qa": "dt-modal-title"
-      }, [renderSlot(_ctx.$slots, "header")], 8, _hoisted_2)) : (openBlock(), createElementBlock("h2", {
-        key: 1,
-        id: $props.labelledById,
-        class: "d-modal__header",
-        "data-qa": "dt-modal-title"
-      }, toDisplayString($props.title), 9, _hoisted_3)), $data.hasSlotContent(_ctx.$slots.default) ? (openBlock(), createElementBlock("div", {
-        key: 2,
-        class: normalizeClass(["d-modal__content", $props.contentClass]),
-        "data-qa": "dt-modal-copy"
-      }, [renderSlot(_ctx.$slots, "default")], 2)) : (openBlock(), createElementBlock("p", {
-        key: 3,
-        class: normalizeClass(["d-modal__content", $props.contentClass]),
-        "data-qa": "dt-modal-copy"
-      }, toDisplayString($props.copy), 3)), $options.hasFooterSlot ? (openBlock(), createElementBlock("footer", _hoisted_4, [renderSlot(_ctx.$slots, "footer")])) : createCommentVNode("", true), !$props.hideClose ? (openBlock(), createBlock(_component_dt_button, mergeProps({
-        key: 5,
-        class: "d-modal__close",
-        circle: "",
-        size: "lg",
-        importance: "clear",
-        "aria-label": $props.closeButtonProps.ariaLabel
-      }, $props.closeButtonProps, {
-        onClick: $options.close
-      }), {
-        icon: withCtx(() => [createVNode(_component_dt_icon, {
-          name: "close",
-          size: "400"
-        })]),
-        _: 1
-      }, 16, ["aria-label", "onClick"])) : createCommentVNode("", true), _ctx.showVisuallyHiddenClose ? (openBlock(), createBlock(_component_sr_only_close_button, {
-        key: 6,
-        "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
-        onClose: $options.close
-      }, null, 8, ["visually-hidden-close-label", "onClose"])) : createCommentVNode("", true)], 10, _hoisted_1), [[vShow, $props.show]])]),
-      _: 3
-    })]),
+        "data-qa": "dt-modal-banner",
+        class: normalizeClass([
+          "d-modal__banner",
+          $props.bannerClass,
+          $options.bannerKindClass
+        ])
+      }, [
+        renderSlot(_ctx.$slots, "banner", {}, () => [
+          createTextVNode(toDisplayString($props.bannerTitle), 1)
+        ])
+      ], 2)) : createCommentVNode("", true),
+      createVNode(Transition, {
+        appear: "",
+        name: "d-modal__dialog"
+      }, {
+        default: withCtx(() => [
+          withDirectives(createElementVNode("div", {
+            class: normalizeClass([
+              "d-modal__dialog",
+              { "d-modal__dialog--scrollable": $props.fixedHeaderFooter },
+              $props.dialogClass
+            ]),
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-describedby": $props.describedById,
+            "aria-labelledby": $props.labelledById
+          }, [
+            $data.hasSlotContent(_ctx.$slots.header) ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              id: $props.labelledById,
+              class: "d-modal__header",
+              "data-qa": "dt-modal-title"
+            }, [
+              renderSlot(_ctx.$slots, "header")
+            ], 8, _hoisted_2)) : (openBlock(), createElementBlock("h2", {
+              key: 1,
+              id: $props.labelledById,
+              class: "d-modal__header",
+              "data-qa": "dt-modal-title"
+            }, toDisplayString($props.title), 9, _hoisted_3)),
+            $data.hasSlotContent(_ctx.$slots.default) ? (openBlock(), createElementBlock("div", {
+              key: 2,
+              class: normalizeClass([
+                "d-modal__content",
+                $props.contentClass
+              ]),
+              "data-qa": "dt-modal-copy"
+            }, [
+              renderSlot(_ctx.$slots, "default")
+            ], 2)) : (openBlock(), createElementBlock("p", {
+              key: 3,
+              class: normalizeClass([
+                "d-modal__content",
+                $props.contentClass
+              ]),
+              "data-qa": "dt-modal-copy"
+            }, toDisplayString($props.copy), 3)),
+            $options.hasFooterSlot ? (openBlock(), createElementBlock("footer", _hoisted_4, [
+              renderSlot(_ctx.$slots, "footer")
+            ])) : createCommentVNode("", true),
+            !$props.hideClose ? (openBlock(), createBlock(_component_dt_button, mergeProps({
+              key: 5,
+              class: "d-modal__close",
+              circle: "",
+              size: "lg",
+              importance: "clear",
+              "aria-label": $props.closeButtonProps.ariaLabel
+            }, $props.closeButtonProps, { onClick: $options.close }), {
+              icon: withCtx(() => [
+                createVNode(_component_dt_icon, {
+                  name: "close",
+                  size: "400"
+                })
+              ]),
+              _: 1
+            }, 16, ["aria-label", "onClick"])) : createCommentVNode("", true),
+            _ctx.showVisuallyHiddenClose ? (openBlock(), createBlock(_component_sr_only_close_button, {
+              key: 6,
+              "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
+              onClose: $options.close
+            }, null, 8, ["visually-hidden-close-label", "onClose"])) : createCommentVNode("", true)
+          ], 10, _hoisted_1), [
+            [vShow, $props.show]
+          ])
+        ]),
+        _: 3
+      })
+    ]),
     _: 3
   }, 16, ["show", "class", "aria-hidden"]);
 }

package/dist/vue3/lib/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../components/modal/modal_constants.js","../../components/modal/modal.vue"],"sourcesContent":["// Modal style modifiers\nexport const MODAL_KIND_MODIFIERS = {\n  default: '',\n  danger: 'd-modal--danger',\n};\n\n// Modal size modifiers\nexport const MODAL_SIZE_MODIFIERS = {\n  default: '',\n  full: 'd-modal--full',\n};\n\nexport const MODAL_BANNER_KINDS = {\n  error: 'd-modal__banner--critical',\n  info: 'd-modal__banner--info',\n  success: 'd-modal__banner--success',\n  warning: 'd-modal__banner--warning',\n  base: 'd-modal__banner--general',\n};\n","<template>\n  <dt-lazy-show\n    transition=\"d-zoom\"\n    :show=\"show\"\n    :class=\"[\n      'd-modal',\n      MODAL_KIND_MODIFIERS[kind],\n      MODAL_SIZE_MODIFIERS[size],\n      modalClass,\n    ]\"\n    data-qa=\"dt-modal\"\n    :aria-hidden=\"open\"\n    v-on=\"modalListeners\"\n  >\n    <div\n      v-if=\"show && (hasSlotContent($slots.banner) || bannerTitle)\"\n      data-qa=\"dt-modal-banner\"\n      :class=\"[\n        'd-modal__banner',\n        bannerClass,\n        bannerKindClass,\n      ]\"\n    >\n      <!-- @slot Slot for the banner, defaults to bannerTitle prop -->\n      <slot name=\"banner\">\n        {{ bannerTitle }}\n      </slot>\n    </div>\n    <transition\n      appear\n      name=\"d-modal__dialog\"\n    >\n      <div\n        v-show=\"show\"\n        :class=\"[\n          'd-modal__dialog',\n          { 'd-modal__dialog--scrollable': fixedHeaderFooter },\n          dialogClass,\n        ]\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        :aria-describedby=\"describedById\"\n        :aria-labelledby=\"labelledById\"\n      >\n        <div\n          v-if=\"hasSlotContent($slots.header)\"\n          :id=\"labelledById\"\n          class=\"d-modal__header\"\n          data-qa=\"dt-modal-title\"\n        >\n          <!-- @slot Slot for dialog header section, taking the place of any \"title\" text prop -->\n          <slot name=\"header\" />\n        </div>\n        <h2\n          v-else\n          :id=\"labelledById\"\n          class=\"d-modal__header\"\n          data-qa=\"dt-modal-title\"\n        >\n          {{ title }}\n        </h2>\n        <div\n          v-if=\"hasSlotContent($slots.default)\"\n          :class=\"[\n            'd-modal__content',\n            contentClass,\n          ]\"\n          data-qa=\"dt-modal-copy\"\n        >\n          <!-- @slot Default slot for dialog body section, taking the place of any \"copy\" text prop -->\n          <slot />\n        </div>\n        <p\n          v-else\n          :class=\"[\n            'd-modal__content',\n            contentClass,\n          ]\"\n          data-qa=\"dt-modal-copy\"\n        >\n          {{ copy }}\n        </p>\n        <footer\n          v-if=\"hasFooterSlot\"\n          class=\"d-modal__footer\"\n        >\n          <!-- @slot Slot for dialog footer content, often containing cancel and confirm buttons. -->\n          <slot name=\"footer\" />\n        </footer>\n        <dt-button\n          v-if=\"!hideClose\"\n          class=\"d-modal__close\"\n          circle\n          size=\"lg\"\n          importance=\"clear\"\n          :aria-label=\"closeButtonProps.ariaLabel\"\n          v-bind=\"closeButtonProps\"\n          @click=\"close\"\n        >\n          <template #icon>\n            <dt-icon\n              name=\"close\"\n              size=\"400\"\n            />\n          </template>\n        </dt-button>\n        <sr-only-close-button\n          v-if=\"showVisuallyHiddenClose\"\n          :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n          @close=\"close\"\n        />\n      </div>\n    </transition>\n  </dt-lazy-show>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\nimport Modal from '@/common/mixins/modal';\nimport {\n  MODAL_BANNER_KINDS,\n  MODAL_KIND_MODIFIERS,\n  MODAL_SIZE_MODIFIERS,\n} from './modal_constants';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\nimport { NOTICE_KINDS } from '@/components/notice';\n\n/**\n * Modals focus the user’s attention exclusively on one task or piece of information\n * via a window that sits on top of the page content.\n * @see https://dialtone.dialpad.com/components/modal.html\n */\nexport default {\n  name: 'DtModal',\n\n  components: {\n    DtLazyShow,\n    DtButton,\n    DtIcon,\n    SrOnlyCloseButton,\n  },\n\n  mixins: [Modal, SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * A set of props to be passed into the modal's close button.\n     * Requires an 'ariaLabel' property.\n     */\n    closeButtonProps: {\n      type: Object,\n      required: true,\n      validator: (props) => {\n        return !!props.ariaLabel;\n      },\n    },\n\n    /**\n     * Body text to display as the modal's main content.\n     */\n    copy: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Id to use for the dialog's aria-describedby.\n     * Recommended only if the dialog content itself isn't enough to give full context,\n     * as screen readers should recite the dialog contents by default before any aria-description.\n     */\n    describedById: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    labelledById: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Whether the modal should be shown.\n     * Parent component can sync on this value to control the modal's visibility.\n     * @values true, false\n     */\n    show: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Title text to display in the modal header.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Title text to display in the modal banner.\n     */\n    bannerTitle: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The theme of the modal. kind - default or danger,\n     * @values default, danger\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(MODAL_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * The size of the modal. size - default or full,\n     * @values default, full\n     */\n    size: {\n      type: String,\n      default: 'default',\n      validator: (s) => Object.keys(MODAL_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Additional class name for the root modal element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    modalClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the dialog element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    dialogClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the content element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    contentClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Sets the color of the banner.\n     * @values base, error, info, success, warning\n     */\n    bannerKind: {\n      type: String,\n      default: 'warning',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Additional class name for the banner element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    bannerClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Hides the close button on the modal\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Whether the modal will close when you click outside of the dialog on the overlay.\n     * @values true, false\n     */\n    closeOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Scrollable modal that allows scroll the modal content keeping the header and footer fixed\n     * @values true, false\n     */\n    fixedHeaderFooter: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The element that is focused when the modal is opened. This can be an\n     * HTMLElement within the modal, a string starting with '#' which will\n     * find the element by ID. 'first' which will automatically focus\n     * the first element, or 'dialog' which will focus the dialog window itself.\n     * If the dialog is modal this prop cannot be 'none'.\n     */\n    initialFocusElement: {\n      type: [String, HTMLElement],\n      default: 'first',\n      validator: initialFocusElement => {\n        return initialFocusElement === 'first' ||\n          (initialFocusElement instanceof HTMLElement) ||\n          initialFocusElement.startsWith('#');\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * Native button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Native keydown event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * The modal will emit a \"false\" boolean value for this event when the user performs a modal-closing action.\n     * Parent components can sync on this value to create a 2-way binding to control modal visibility.\n     *\n     * @event update:show\n     * @type {Boolean}\n     */\n    'update:show',\n  ],\n\n  data () {\n    return {\n      MODAL_KIND_MODIFIERS,\n      MODAL_SIZE_MODIFIERS,\n      MODAL_BANNER_KINDS,\n      EVENT_KEYNAMES,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    modalListeners () {\n      return {\n        click: event => {\n          if (!this.closeOnClick) return;\n          (event.target === event.currentTarget) && this.close();\n          this.$emit('click', event);\n        },\n\n        keydown: event => {\n          switch (event.code) {\n            case EVENT_KEYNAMES.esc:\n            case EVENT_KEYNAMES.escape:\n              this.close();\n              break;\n            case EVENT_KEYNAMES.tab:\n              this.trapFocus(event);\n              break;\n          }\n          this.$emit('keydown', event);\n        },\n\n        'after-enter': event => {\n          this.$emit('update:show', true);\n          (event.target === event.currentTarget) && this.setFocusAfterTransition();\n        },\n      };\n    },\n\n    open () {\n      return `${!this.show}`;\n    },\n\n    hasFooterSlot () {\n      return !!this.$slots.footer;\n    },\n\n    bannerKindClass () {\n      return MODAL_BANNER_KINDS[this.bannerKind];\n    },\n  },\n\n  watch: {\n    show: {\n      immediate: true,\n      handler (isShowing) {\n        if (isShowing) {\n          // Set a reference to the previously-active element, to which we'll return focus on modal close.\n          this.previousActiveElement = document.activeElement;\n        } else {\n          // Modal is being hidden, so return focus to the previously active element before clearing the reference.\n          this.previousActiveElement?.focus();\n          this.previousActiveElement = null;\n        }\n      },\n    },\n\n    $props: {\n      immediate: true,\n      deep: true,\n      handler () {\n        this.validateProps();\n      },\n    },\n  },\n\n  methods: {\n    close () {\n      this.$emit('update:show', false);\n    },\n\n    setFocusAfterTransition () {\n      if (this.initialFocusElement === 'first') {\n        this.focusFirstElement();\n      } else if (this.initialFocusElement.startsWith('#')) {\n        this.focusElementById(this.initialFocusElement);\n      } else if (this.initialFocusElement instanceof HTMLElement) {\n        this.initialFocusElement.focus();\n      }\n    },\n\n    trapFocus (e) {\n      if (this.show) {\n        this.focusTrappedTabPress(e);\n      }\n    },\n\n    validateProps () {\n      if (this.hideClose && !this.visuallyHiddenClose) {\n        console.error(`If hideClose prop is true, visuallyHiddenClose and visuallyHiddenCloseLabel props\n        need to be set so the component always includes a close button`);\n      }\n    },\n  },\n};\n</script>\n"],"names":["MODAL_KIND_MODIFIERS","default","danger","MODAL_SIZE_MODIFIERS","full","MODAL_BANNER_KINDS","error","info","success","warning","base","_sfc_main","name","components","DtLazyShow","DtButton","DtIcon","SrOnlyCloseButton","mixins","Modal","SrOnlyCloseButtonMixin","props","closeButtonProps","type","Object","required","validator","ariaLabel","copy","String","describedById","labelledById","getUniqueString","show","Boolean","title","bannerTitle","kind","k","keys","includes","size","s","modalClass","Array","dialogClass","contentClass","bannerKind","validate","NOTICE_KINDS","bannerClass","hideClose","closeOnClick","fixedHeaderFooter","initialFocusElement","HTMLElement","startsWith","emits","data","EVENT_KEYNAMES","hasSlotContent","computed","modalListeners","click","event","target","currentTarget","close","$emit","keydown","code","esc","escape","tab","trapFocus","setFocusAfterTransition","open","hasFooterSlot","$slots","footer","bannerKindClass","watch","immediate","handler","isShowing","previousActiveElement","document","activeElement","focus","$props","deep","validateProps","methods","focusFirstElement","focusElementById","e","focusTrappedTabPress","visuallyHiddenClose","console","class","_openBlock","_createBlock","_component_dt_lazy_show","_mergeProps","transition","$data","$options","_toHandlers","_ctx","banner","_createElementBlock","_normalizeClass","_renderSlot","_createVNode","_Transition","appear","_createElementVNode","role","header","id","_hoisted_3","_hoisted_4","_component_dt_button","circle","importance","onClick","icon","_component_dt_icon","showVisuallyHiddenClose","_component_sr_only_close_button","visuallyHiddenCloseLabel","onClose"],"mappings":"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"}
+{"version":3,"file":"modal.js","sources":["../../components/modal/modal_constants.js","../../components/modal/modal.vue"],"sourcesContent":["// Modal style modifiers\nexport const MODAL_KIND_MODIFIERS = {\n  default: '',\n  danger: 'd-modal--danger',\n};\n\n// Modal size modifiers\nexport const MODAL_SIZE_MODIFIERS = {\n  default: '',\n  full: 'd-modal--full',\n};\n\nexport const MODAL_BANNER_KINDS = {\n  error: 'd-modal__banner--critical',\n  info: 'd-modal__banner--info',\n  success: 'd-modal__banner--success',\n  warning: 'd-modal__banner--warning',\n  base: 'd-modal__banner--general',\n};\n","<template>\n  <dt-lazy-show\n    transition=\"d-zoom\"\n    :show=\"show\"\n    :class=\"[\n      'd-modal',\n      MODAL_KIND_MODIFIERS[kind],\n      MODAL_SIZE_MODIFIERS[size],\n      modalClass,\n    ]\"\n    data-qa=\"dt-modal\"\n    :aria-hidden=\"open\"\n    v-on=\"modalListeners\"\n  >\n    <div\n      v-if=\"show && (hasSlotContent($slots.banner) || bannerTitle)\"\n      data-qa=\"dt-modal-banner\"\n      :class=\"[\n        'd-modal__banner',\n        bannerClass,\n        bannerKindClass,\n      ]\"\n    >\n      <!-- @slot Slot for the banner, defaults to bannerTitle prop -->\n      <slot name=\"banner\">\n        {{ bannerTitle }}\n      </slot>\n    </div>\n    <transition\n      appear\n      name=\"d-modal__dialog\"\n    >\n      <div\n        v-show=\"show\"\n        :class=\"[\n          'd-modal__dialog',\n          { 'd-modal__dialog--scrollable': fixedHeaderFooter },\n          dialogClass,\n        ]\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        :aria-describedby=\"describedById\"\n        :aria-labelledby=\"labelledById\"\n      >\n        <div\n          v-if=\"hasSlotContent($slots.header)\"\n          :id=\"labelledById\"\n          class=\"d-modal__header\"\n          data-qa=\"dt-modal-title\"\n        >\n          <!-- @slot Slot for dialog header section, taking the place of any \"title\" text prop -->\n          <slot name=\"header\" />\n        </div>\n        <h2\n          v-else\n          :id=\"labelledById\"\n          class=\"d-modal__header\"\n          data-qa=\"dt-modal-title\"\n        >\n          {{ title }}\n        </h2>\n        <div\n          v-if=\"hasSlotContent($slots.default)\"\n          :class=\"[\n            'd-modal__content',\n            contentClass,\n          ]\"\n          data-qa=\"dt-modal-copy\"\n        >\n          <!-- @slot Default slot for dialog body section, taking the place of any \"copy\" text prop -->\n          <slot />\n        </div>\n        <p\n          v-else\n          :class=\"[\n            'd-modal__content',\n            contentClass,\n          ]\"\n          data-qa=\"dt-modal-copy\"\n        >\n          {{ copy }}\n        </p>\n        <footer\n          v-if=\"hasFooterSlot\"\n          class=\"d-modal__footer\"\n        >\n          <!-- @slot Slot for dialog footer content, often containing cancel and confirm buttons. -->\n          <slot name=\"footer\" />\n        </footer>\n        <dt-button\n          v-if=\"!hideClose\"\n          class=\"d-modal__close\"\n          circle\n          size=\"lg\"\n          importance=\"clear\"\n          :aria-label=\"closeButtonProps.ariaLabel\"\n          v-bind=\"closeButtonProps\"\n          @click=\"close\"\n        >\n          <template #icon>\n            <dt-icon\n              name=\"close\"\n              size=\"400\"\n            />\n          </template>\n        </dt-button>\n        <sr-only-close-button\n          v-if=\"showVisuallyHiddenClose\"\n          :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n          @close=\"close\"\n        />\n      </div>\n    </transition>\n  </dt-lazy-show>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\nimport Modal from '@/common/mixins/modal';\nimport {\n  MODAL_BANNER_KINDS,\n  MODAL_KIND_MODIFIERS,\n  MODAL_SIZE_MODIFIERS,\n} from './modal_constants';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\nimport { NOTICE_KINDS } from '@/components/notice';\n\n/**\n * Modals focus the user’s attention exclusively on one task or piece of information\n * via a window that sits on top of the page content.\n * @see https://dialtone.dialpad.com/components/modal.html\n */\nexport default {\n  name: 'DtModal',\n\n  components: {\n    DtLazyShow,\n    DtButton,\n    DtIcon,\n    SrOnlyCloseButton,\n  },\n\n  mixins: [Modal, SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * A set of props to be passed into the modal's close button.\n     * Requires an 'ariaLabel' property.\n     */\n    closeButtonProps: {\n      type: Object,\n      required: true,\n      validator: (props) => {\n        return !!props.ariaLabel;\n      },\n    },\n\n    /**\n     * Body text to display as the modal's main content.\n     */\n    copy: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Id to use for the dialog's aria-describedby.\n     * Recommended only if the dialog content itself isn't enough to give full context,\n     * as screen readers should recite the dialog contents by default before any aria-description.\n     */\n    describedById: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    labelledById: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Whether the modal should be shown.\n     * Parent component can sync on this value to control the modal's visibility.\n     * @values true, false\n     */\n    show: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Title text to display in the modal header.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Title text to display in the modal banner.\n     */\n    bannerTitle: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The theme of the modal. kind - default or danger,\n     * @values default, danger\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(MODAL_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * The size of the modal. size - default or full,\n     * @values default, full\n     */\n    size: {\n      type: String,\n      default: 'default',\n      validator: (s) => Object.keys(MODAL_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Additional class name for the root modal element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    modalClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the dialog element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    dialogClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the content element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    contentClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Sets the color of the banner.\n     * @values base, error, info, success, warning\n     */\n    bannerKind: {\n      type: String,\n      default: 'warning',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Additional class name for the banner element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    bannerClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Hides the close button on the modal\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Whether the modal will close when you click outside of the dialog on the overlay.\n     * @values true, false\n     */\n    closeOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Scrollable modal that allows scroll the modal content keeping the header and footer fixed\n     * @values true, false\n     */\n    fixedHeaderFooter: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The element that is focused when the modal is opened. This can be an\n     * HTMLElement within the modal, a string starting with '#' which will\n     * find the element by ID. 'first' which will automatically focus\n     * the first element, or 'dialog' which will focus the dialog window itself.\n     * If the dialog is modal this prop cannot be 'none'.\n     */\n    initialFocusElement: {\n      type: [String, HTMLElement],\n      default: 'first',\n      validator: initialFocusElement => {\n        return initialFocusElement === 'first' ||\n          (initialFocusElement instanceof HTMLElement) ||\n          initialFocusElement.startsWith('#');\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * Native button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Native keydown event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * The modal will emit a \"false\" boolean value for this event when the user performs a modal-closing action.\n     * Parent components can sync on this value to create a 2-way binding to control modal visibility.\n     *\n     * @event update:show\n     * @type {Boolean}\n     */\n    'update:show',\n  ],\n\n  data () {\n    return {\n      MODAL_KIND_MODIFIERS,\n      MODAL_SIZE_MODIFIERS,\n      MODAL_BANNER_KINDS,\n      EVENT_KEYNAMES,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    modalListeners () {\n      return {\n        click: event => {\n          if (!this.closeOnClick) return;\n          (event.target === event.currentTarget) && this.close();\n          this.$emit('click', event);\n        },\n\n        keydown: event => {\n          switch (event.code) {\n            case EVENT_KEYNAMES.esc:\n            case EVENT_KEYNAMES.escape:\n              this.close();\n              break;\n            case EVENT_KEYNAMES.tab:\n              this.trapFocus(event);\n              break;\n          }\n          this.$emit('keydown', event);\n        },\n\n        'after-enter': event => {\n          this.$emit('update:show', true);\n          (event.target === event.currentTarget) && this.setFocusAfterTransition();\n        },\n      };\n    },\n\n    open () {\n      return `${!this.show}`;\n    },\n\n    hasFooterSlot () {\n      return !!this.$slots.footer;\n    },\n\n    bannerKindClass () {\n      return MODAL_BANNER_KINDS[this.bannerKind];\n    },\n  },\n\n  watch: {\n    show: {\n      immediate: true,\n      handler (isShowing) {\n        if (isShowing) {\n          // Set a reference to the previously-active element, to which we'll return focus on modal close.\n          this.previousActiveElement = document.activeElement;\n        } else {\n          // Modal is being hidden, so return focus to the previously active element before clearing the reference.\n          this.previousActiveElement?.focus();\n          this.previousActiveElement = null;\n        }\n      },\n    },\n\n    $props: {\n      immediate: true,\n      deep: true,\n      handler () {\n        this.validateProps();\n      },\n    },\n  },\n\n  methods: {\n    close () {\n      this.$emit('update:show', false);\n    },\n\n    setFocusAfterTransition () {\n      if (this.initialFocusElement === 'first') {\n        this.focusFirstElement();\n      } else if (this.initialFocusElement.startsWith('#')) {\n        this.focusElementById(this.initialFocusElement);\n      } else if (this.initialFocusElement instanceof HTMLElement) {\n        this.initialFocusElement.focus();\n      }\n    },\n\n    trapFocus (e) {\n      if (this.show) {\n        this.focusTrappedTabPress(e);\n      }\n    },\n\n    validateProps () {\n      if (this.hideClose && !this.visuallyHiddenClose) {\n        console.error(`If hideClose prop is true, visuallyHiddenClose and visuallyHiddenCloseLabel props\n        need to be set so the component always includes a close button`);\n      }\n    },\n  },\n};\n</script>\n"],"names":["_openBlock","_createBlock","_mergeProps","_toHandlers","_createElementBlock","_normalizeClass","_renderSlot","_createVNode","_Transition","_createElementVNode"],"mappings":"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"}

package/dist/vue3/lib/notice.cjs

@@ -1,15 +1,15 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const notice_action = require("../chunks/notice_action-3ed0uIMN.js");
+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-gKr0Vlbz.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-bvhFNOPu.js");
+require("../chunks/icon_constants-QYpmdE0R.js");
 require("@dialpad/dialtone-icons/icons.json");
 require("./button.cjs");
 require("../chunks/link_constants-x8NwdqmA.js");
@@ -143,10 +143,11 @@ const _sfc_main = {
         warning: "d-notice--warning",
         base: "d-notice--base"
       };
-      return ["d-notice", noticeKinds[this.kind], {
-        "d-notice--important": this.important,
-        "d-notice--truncate": this.truncateText
-      }];
+      return [
+        "d-notice",
+        noticeKinds[this.kind],
+        { "d-notice--important": this.important, "d-notice--truncate": this.truncateText }
+      ];
     }
   }
 };
@@ -157,32 +158,44 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   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);
+  }, [
+    !$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;

package/dist/vue3/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":["_sfc_main","name","components","DtNoticeIcon","DtNoticeContent","DtNoticeAction","mixins","SrOnlyCloseButtonMixin","props","titleId","type","String","default","undefined","contentId","title","role","validate","NOTICE_ROLES","includes","important","Boolean","kind","NOTICE_KINDS","closeButtonProps","Object","hideClose","hideIcon","hideAction","truncateText","emits","computed","noticeClass","noticeKinds","error","info","success","warning","base","_createElementBlock","class","$options","$props","_createBlock","_component_dt_notice_icon","_renderSlot","_ctx","$slots","_createVNode","_component_dt_notice_content","titleOverride","_component_dt_notice_action","visuallyHiddenClose","visuallyHiddenCloseLabel","onClose","$emit"],"mappings":"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"}
+{"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":";;;;;;;;;;;;;;;AAmDA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,kBACVA,cAAY;AAAA,IACZ,iBAAAC,cAAe;AAAA,IACf,gBAAAC,cAAc;AAAA,EACf;AAAA,EAED,QAAQ,CAACC,qBAAAA,sBAAsB;AAAA,EAE/B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,SAAU,MAAM;AACd,eAAOC,iBAAY,aAAC,SAAS,IAAI;AAAA,MAClC;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,SAAU,MAAM;AACd,eAAOC,iBAAY,aAAC,SAAS,IAAI;AAAA,MAClC;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKD,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS,OAAO,CAAA;AAAA,IACjB;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAML;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACD;AAAA,EAED,UAAU;AAAA,IACR,cAAe;AACb,YAAM,cAAc;AAAA,QAClB,OAAO;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,QACT,SAAS;AAAA,QACT,MAAM;AAAA;AAER,aAAO;AAAA,QACL;AAAA,QACA,YAAY,KAAK,IAAI;AAAA,QACrB,EAAE,uBAAuB,KAAK,WAAW,sBAAsB,KAAK,aAAc;AAAA;IAErF;AAAA,EACF;AACH;;;;;0BA3MEC,IAoCQ,mBAAA,SAAA;AAAA,IAnCL,0BAAO,SAAW,WAAA;AAAA,IACnB,WAAQ;AAAA;KAGC,OAAQ,6BADjBC,IAMiB,YAAA,2BAAA;AAAA;MAJd,MAAM,OAAI;AAAA;2BAGX,MAAoB;AAAA,QAApBC,eAAoB,KAAA,QAAA,MAAA;AAAA;;;IAEtBC,IAAAA,YAaoB,8BAAA;AAAA,MAZjB,YAAU,OAAO;AAAA,MACjB,cAAY,OAAS;AAAA,MACrB,OAAO,OAAK;AAAA,MACZ,MAAM,OAAI;AAAA;MAEA,2BAGT,MAA6B;AAAA,QAA7BD,eAA6B,KAAA,QAAA,eAAA;AAAA;2BAG/B,MAAQ;AAAA,QAARA,eAAQ,KAAA,QAAA,SAAA;AAAA;;;IAEVC,IAAAA,YAUmB,6BAAA;AAAA,MAThB,eAAa,OAAU;AAAA,MACvB,cAAY,OAAS;AAAA,MACrB,sBAAoB,OAAgB;AAAA,MACpC,yBAAuB,KAAmB;AAAA,MAC1C,+BAA6B,KAAwB;AAAA,MACrD,+CAAO,KAAK,MAAA,OAAA;AAAA;2BAGb,MAAsB;AAAA,QAAtBD,eAAsB,KAAA,QAAA,QAAA;AAAA;;;;;;;;;;;;"}

package/dist/vue3/lib/notice.js

@@ -1,13 +1,13 @@
-import { DtNoticeIcon, DtNoticeContent, DtNoticeAction } from "../chunks/notice_action-e08Lw5W6.js";
+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-Ji3Zlts6.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-gIQj4mf7.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
 import "./button.js";
 import "../chunks/link_constants-AfTWrr-n.js";
@@ -141,10 +141,11 @@ const _sfc_main = {
         warning: "d-notice--warning",
         base: "d-notice--base"
       };
-      return ["d-notice", noticeKinds[this.kind], {
-        "d-notice--important": this.important,
-        "d-notice--truncate": this.truncateText
-      }];
+      return [
+        "d-notice",
+        noticeKinds[this.kind],
+        { "d-notice--important": this.important, "d-notice--truncate": this.truncateText }
+      ];
     }
   }
 };
@@ -155,32 +156,44 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   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);
+  }, [
+    !$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]]);
 export {

package/dist/vue3/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":["_sfc_main","name","components","DtNoticeIcon","DtNoticeContent","DtNoticeAction","mixins","SrOnlyCloseButtonMixin","props","titleId","type","String","default","undefined","contentId","title","role","validate","NOTICE_ROLES","includes","important","Boolean","kind","NOTICE_KINDS","closeButtonProps","Object","hideClose","hideIcon","hideAction","truncateText","emits","computed","noticeClass","noticeKinds","error","info","success","warning","base","_createElementBlock","class","$options","$props","_createBlock","_component_dt_notice_icon","_renderSlot","_ctx","$slots","_createVNode","_component_dt_notice_content","titleOverride","_component_dt_notice_action","visuallyHiddenClose","visuallyHiddenCloseLabel","onClose","$emit"],"mappings":"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"}
+{"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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"}