@dialpad/dialtone-vue 2.125.1 → 2.127.0

package/dist/lib/modal.cjs

@@ -0,0 +1,3 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("../chunks/modal-qEzlo0Sj.js"),d=require("./utils.cjs"),s=require("./constants.cjs"),i=require("../chunks/sr_only_close_button-ErijKGYR.js"),c=require("../chunks/_plugin-vue2_normalizer-ZK80B3OL.js"),u=require("./lazy-show.cjs"),_=require("./button.cjs"),m=require("./icon.cjs"),f=require("../chunks/notice_constants-mC6al2Dm.js");require("vue");require("../chunks/link_constants-Kn6kP4i1.js");require("@dialpad/dialtone-icons/vue2");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");const l={default:"",danger:"d-modal--danger"},o={default:"",full:"d-modal--full"},r={error:"d-modal__banner--critical",info:"d-modal__banner--info",success:"d-modal__banner--success",warning:"d-modal__banner--warning",base:"d-modal__banner--general"},h={name:"DtModal",components:{DtLazyShow:u.DtLazyShow,DtButton:_.DtButton,DtIcon:m.DtIcon,SrOnlyCloseButton:i.S},mixins:[n.M,i.a],props:{closeButtonProps:{type:Object,required:!0,validator:t=>!!t.ariaLabel},copy:{type:String,default:""},describedById:{type:String,default:""},labelledById:{type:String,default:function(){return d.getUniqueString()}},show:{type:Boolean,default:!1},title:{type:String,default:""},bannerTitle:{type:String,default:""},kind:{type:String,default:"default",validator:t=>Object.keys(l).includes(t)},size:{type:String,default:"default",validator:t=>Object.keys(o).includes(t)},modalClass:{type:[String,Object,Array],default:""},dialogClass:{type:[String,Object,Array],default:""},contentClass:{type:[String,Object,Array],default:""},bannerKind:{type:String,default:"warning",validate(t){return f.N.includes(t)}},bannerClass:{type:[String,Object,Array],default:""},hideClose:{type:Boolean,default:!1},closeOnClick:{type:Boolean,default:!0},fixedHeaderFooter:{type:Boolean,default:!0},initialFocusElement:{type:[String,HTMLElement],default:"first",validator:t=>t==="first"||t instanceof HTMLElement||t.startsWith("#")}},emits:["update:show"],data(){return{MODAL_KIND_MODIFIERS:l,MODAL_SIZE_MODIFIERS:o,MODAL_BANNER_KINDS:r,EVENT_KEYNAMES:s.EVENT_KEYNAMES}},computed:{modalListeners(){return{...this.$listeners,click:t=>{this.closeOnClick&&(t.target===t.currentTarget&&this.close(),this.$emit("click",t))},keydown:t=>{switch(t.code){case s.EVENT_KEYNAMES.esc:case s.EVENT_KEYNAMES.escape:this.close();break;case s.EVENT_KEYNAMES.tab:this.trapFocus(t);break}this.$emit("keydown",t)},"after-enter":t=>{this.$emit("update:show",!0),t.target===t.currentTarget&&this.setFocusAfterTransition()}}},open(){return`${!this.show}`},hasFooterSlot(){return!!this.$slots.footer},bannerKindClass(){return r[this.bannerKind]}},watch:{show:{immediate:!0,handler(t){var e;t?this.previousActiveElement=document.activeElement:((e=this.previousActiveElement)==null||e.focus(),this.previousActiveElement=null)}},$props:{immediate:!0,deep:!0,handler(){this.validateProps()}}},methods:{close(){this.$emit("update:show",!1)},setFocusAfterTransition(){this.initialFocusElement==="first"?this.focusFirstElement():this.initialFocusElement.startsWith("#")?this.focusElementById(this.initialFocusElement):this.initialFocusElement instanceof HTMLElement&&this.initialFocusElement.focus()},trapFocus(t){this.show&&this.focusTrappedTabPress(t)},validateProps(){this.hideClose&&!this.visuallyHiddenClose&&console.error(`If hideClose prop is true, visuallyHiddenClose and visuallyHiddenCloseLabel props
+        need to be set so the component always includes a close button`)}}};var p=function(){var e=this,a=e._self._c;return a("dt-lazy-show",e._g({class:["d-modal",e.MODAL_KIND_MODIFIERS[e.kind],e.MODAL_SIZE_MODIFIERS[e.size],e.modalClass],attrs:{transition:"d-zoom",show:e.show,"data-qa":"dt-modal","aria-hidden":e.open}},e.modalListeners),[e.show&&(e.$slots.banner||e.bannerTitle)?a("div",{class:["d-modal__banner",e.bannerClass,e.bannerKindClass],attrs:{"data-qa":"dt-modal-banner"}},[e._t("banner",function(){return[e._v(" "+e._s(e.bannerTitle)+" ")]})],2):e._e(),a("transition",{attrs:{appear:"",name:"d-modal__dialog"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:e.show,expression:"show"}],class:["d-modal__dialog",{"d-modal__dialog--scrollable":e.fixedHeaderFooter},e.dialogClass],attrs:{role:"dialog","aria-modal":"true","aria-describedby":e.describedById,"aria-labelledby":e.labelledById}},[e.$slots.header?a("div",{staticClass:"d-modal__header",attrs:{id:e.labelledById,"data-qa":"dt-modal-title"}},[e._t("header")],2):a("h2",{staticClass:"d-modal__header",attrs:{id:e.labelledById,"data-qa":"dt-modal-title"}},[e._v(" "+e._s(e.title)+" ")]),e.$slots.default?a("div",{class:["d-modal__content",e.contentClass],attrs:{"data-qa":"dt-modal-copy"}},[e._t("default")],2):a("p",{class:["d-modal__content",e.contentClass],attrs:{"data-qa":"dt-modal-copy"}},[e._v(" "+e._s(e.copy)+" ")]),e.hasFooterSlot?a("footer",{staticClass:"d-modal__footer"},[e._t("footer")],2):e._e(),e.hideClose?e._e():a("dt-button",e._b({staticClass:"d-modal__close",attrs:{circle:"",size:"lg",importance:"clear","aria-label":e.closeButtonProps.ariaLabel},on:{click:e.close},scopedSlots:e._u([{key:"icon",fn:function(){return[a("dt-icon",{attrs:{name:"close",size:"400"}})]},proxy:!0}],null,!1,1709155279)},"dt-button",e.closeButtonProps,!1)),e.showVisuallyHiddenClose?a("sr-only-close-button",{attrs:{"visually-hidden-close-label":e.visuallyHiddenCloseLabel},on:{close:e.close}}):e._e()],1)])],1)},b=[],y=c.n(h,p,b,!1,null,null,null,null);const E=y.exports;exports.DtModal=E;exports.MODAL_BANNER_KINDS=r;exports.MODAL_KIND_MODIFIERS=l;exports.MODAL_SIZE_MODIFIERS=o;
+//# sourceMappingURL=modal.cjs.map

package/dist/lib/modal.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.cjs","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 && ($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=\"$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=\"$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 } 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     * 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    };\n  },\n\n  computed: {\n    modalListeners () {\n      return {\n        ...this.$listeners,\n\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","MODAL_SIZE_MODIFIERS","MODAL_BANNER_KINDS","_sfc_main","DtLazyShow","DtButton","DtIcon","SrOnlyCloseButton","Modal","SrOnlyCloseButtonMixin","props","getUniqueString","k","s","kind","NOTICE_KINDS","initialFocusElement","EVENT_KEYNAMES","event","isShowing","_a","e"],"mappings":"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"}

package/dist/lib/modal.js

@@ -12,11 +12,10 @@ import "../chunks/link_constants-vIUB92L4.js";
 import "@dialpad/dialtone-icons/vue2";
 import "../chunks/icon_constants-OpYAAKwF.js";
 import "@dialpad/dialtone-icons/icons.json";
-import "./skeleton.js";
-const o = {
+const l = {
   default: "",
   danger: "d-modal--danger"
-}, l = {
+}, o = {
   default: "",
   full: "d-modal--full"
 }, r = {
@@ -99,7 +98,7 @@ const o = {
     kind: {
       type: String,
       default: "default",
-      validator: (t) => Object.keys(o).includes(t)
+      validator: (t) => Object.keys(l).includes(t)
     },
     /**
      * The size of the modal. size - default or full,
@@ -108,7 +107,7 @@ const o = {
     size: {
       type: String,
       default: "default",
-      validator: (t) => Object.keys(l).includes(t)
+      validator: (t) => Object.keys(o).includes(t)
     },
     /**
      * Additional class name for the root modal element.
@@ -206,8 +205,8 @@ const o = {
   ],
   data() {
     return {
-      MODAL_KIND_MODIFIERS: o,
-      MODAL_SIZE_MODIFIERS: l,
+      MODAL_KIND_MODIFIERS: l,
+      MODAL_SIZE_MODIFIERS: o,
       MODAL_BANNER_KINDS: r,
       EVENT_KEYNAMES: s
     };
@@ -314,11 +313,11 @@ var b = function() {
   null,
   null
 );
-const N = g.exports;
+const T = g.exports;
 export {
-  N as DtModal,
+  T as DtModal,
   r as MODAL_BANNER_KINDS,
-  o as MODAL_KIND_MODIFIERS,
-  l as MODAL_SIZE_MODIFIERS
+  l as MODAL_KIND_MODIFIERS,
+  o as MODAL_SIZE_MODIFIERS
 };
 //# sourceMappingURL=modal.js.map

package/dist/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 && ($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=\"$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=\"$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 } 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     * 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    };\n  },\n\n  computed: {\n    modalListeners () {\n      return {\n        ...this.$listeners,\n\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","MODAL_SIZE_MODIFIERS","MODAL_BANNER_KINDS","_sfc_main","DtLazyShow","DtButton","DtIcon","SrOnlyCloseButton","Modal","SrOnlyCloseButtonMixin","props","getUniqueString","k","s","kind","NOTICE_KINDS","initialFocusElement","EVENT_KEYNAMES","event","isShowing","_a","e"],"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 && ($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=\"$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=\"$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 } 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     * 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    };\n  },\n\n  computed: {\n    modalListeners () {\n      return {\n        ...this.$listeners,\n\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","MODAL_SIZE_MODIFIERS","MODAL_BANNER_KINDS","_sfc_main","DtLazyShow","DtButton","DtIcon","SrOnlyCloseButton","Modal","SrOnlyCloseButtonMixin","props","getUniqueString","k","s","kind","NOTICE_KINDS","initialFocusElement","EVENT_KEYNAMES","event","isShowing","_a","e"],"mappings":"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"}

package/dist/lib/notice.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../chunks/notice_action-u3ZKIhit.js"),o=require("../chunks/notice_constants-mC6al2Dm.js"),r=require("../chunks/sr_only_close_button-ErijKGYR.js"),c=require("../chunks/_plugin-vue2_normalizer-ZK80B3OL.js");require("./icon.cjs");require("@dialpad/dialtone-icons/vue2");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");require("./button.cjs");require("vue");require("../chunks/link_constants-Kn6kP4i1.js");const s={name:"DtNotice",components:{DtNoticeIcon:t.a,DtNoticeContent:t.b,DtNoticeAction:t.D},mixins:[r.a],props:{titleId:{type:String,default:void 0},contentId:{type:String,default:void 0},title:{type:String,default:""},role:{type:String,default:"status",validate(n){return o.a.includes(n)}},important:{type:Boolean,default:!1},kind:{type:String,default:"base",validate(n){return o.N.includes(n)}},closeButtonProps:{type:Object,default:()=>({})},hideClose:{type:Boolean,default:!1},hideIcon:{type:Boolean,default:!1},hideAction:{type:Boolean,default:!1}},emits:["close"],computed:{noticeClass(){return["d-notice",{error:"d-notice--error",info:"d-notice--info",success:"d-notice--success",warning:"d-notice--warning",base:"d-notice--base"}[this.kind],{"d-notice--important":this.important}]}}};var l=function(){var e=this,i=e._self._c;return i("aside",{class:e.noticeClass,attrs:{"data-qa":"notice"}},[e.hideIcon?e._e():i("dt-notice-icon",{attrs:{kind:e.kind}},[e._t("icon")],2),i("dt-notice-content",e._g({attrs:{"title-id":e.titleId,"content-id":e.contentId,title:e.title,role:e.role},scopedSlots:e._u([{key:"titleOverride",fn:function(){return[e._t("titleOverride")]},proxy:!0}],null,!0)},e.$listeners),[e._t("default")],2),i("dt-notice-action",e._g({attrs:{"hide-action":e.hideAction,"hide-close":e.hideClose,"close-button-props":e.closeButtonProps,"visually-hidden-close":e.visuallyHiddenClose,"visually-hidden-close-label":e.visuallyHiddenCloseLabel}},e.$listeners),[e._t("action")],2)],1)},a=[],d=c.n(s,l,a,!1,null,null,null,null);const u=d.exports;exports.DtNoticeAction=t.D;exports.DtNoticeContent=t.b;exports.DtNoticeIcon=t.a;exports.NOTICE_KINDS=o.N;exports.NOTICE_ROLES=o.a;exports.DtNotice=u;
+//# sourceMappingURL=notice.cjs.map

package/dist/lib/notice.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"notice.cjs","sources":["../../components/notice/notice.vue"],"sourcesContent":["<template>\n  <aside\n    :class=\"noticeClass\"\n    data-qa=\"notice\"\n  >\n    <dt-notice-icon\n      v-if=\"!hideIcon\"\n      :kind=\"kind\"\n    >\n      <!-- @slot Slot for custom icon -->\n      <slot name=\"icon\" />\n    </dt-notice-icon>\n    <dt-notice-content\n      :title-id=\"titleId\"\n      :content-id=\"contentId\"\n      :title=\"title\"\n      :role=\"role\"\n      v-on=\"$listeners\"\n    >\n      <template #titleOverride>\n        <!-- @slot Allows you to override the title, only use this if you need\n        to override with something other than text. Otherwise use the \"title\" prop. -->\n        <slot name=\"titleOverride\" />\n      </template>\n      <!-- @slot the main textual content of the notice -->\n      <slot />\n    </dt-notice-content>\n    <dt-notice-action\n      :hide-action=\"hideAction\"\n      :hide-close=\"hideClose\"\n      :close-button-props=\"closeButtonProps\"\n      :visually-hidden-close=\"visuallyHiddenClose\"\n      :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n      v-on=\"$listeners\"\n    >\n      <!-- @slot Enter a possible action for the user to take, such as a link to another page -->\n      <slot name=\"action\" />\n    </dt-notice-action>\n  </aside>\n</template>\n\n<script>\nimport DtNoticeIcon from './notice_icon.vue';\nimport DtNoticeContent from './notice_content.vue';\nimport DtNoticeAction from './notice_action.vue';\nimport { NOTICE_KINDS, NOTICE_ROLES } from './notice_constants';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\n\n/**\n * A notice is an informational and assistive message that appears inline with content.\n * @see https://dialtone.dialpad.com/components/notice.html\n */\nexport default {\n  name: 'DtNotice',\n\n  components: {\n    DtNoticeIcon,\n    DtNoticeContent,\n    DtNoticeAction,\n  },\n\n  mixins: [SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * Sets an ID on the title element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the title.\n     */\n    titleId: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Sets an ID on the content element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the content.\n     */\n    contentId: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Title header of the notice. This can be left blank to remove the title from the notice entirely.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Provides a role for the notice. 'status' is used to communicate a message. 'alert' is used to communicate an\n     * important message that does not contain any interactive elements. 'alertdialog' is used to communicate an\n     * important message that does contain interactive elements.\n     * @values alert, alertdialog, status\n     */\n    role: {\n      type: String,\n      default: 'status',\n      validate (role) {\n        return NOTICE_ROLES.includes(role);\n      },\n    },\n\n    /**\n     * Used in scenarios where the message needs to visually dominate the screen.\n     * This will also change the aria role from status to alert.\n     * @values true, false\n     */\n    important: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Severity level of the notice, sets the icon and background\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Props for the notice close button.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Hides the close button from the notice\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the icon from the notice\n     * @values true, false\n     */\n    hideIcon: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n  ],\n\n  computed: {\n    noticeClass () {\n      const noticeKinds = {\n        error: 'd-notice--error',\n        info: 'd-notice--info',\n        success: 'd-notice--success',\n        warning: 'd-notice--warning',\n        base: 'd-notice--base',\n      };\n      return [\n        'd-notice',\n        noticeKinds[this.kind],\n        { 'd-notice--important': this.important },\n      ];\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtNoticeIcon","DtNoticeContent","DtNoticeAction","SrOnlyCloseButtonMixin","role","NOTICE_ROLES","kind","NOTICE_KINDS"],"mappings":"iiBAoDA,MAAAA,EAAA,CACA,KAAA,WAEA,WAAA,CACA,aAAAC,EAAA,EACA,gBAAAC,EAAA,EACA,eAAAC,EAAA,CACA,EAEA,OAAA,CAAAC,EAAAA,CAAA,EAEA,MAAA,CAKA,QAAA,CACA,KAAA,OACA,QAAA,MACA,EAMA,UAAA,CACA,KAAA,OACA,QAAA,MACA,EAKA,MAAA,CACA,KAAA,OACA,QAAA,EACA,EAQA,KAAA,CACA,KAAA,OACA,QAAA,SACA,SAAAC,EAAA,CACA,OAAAC,EAAA,EAAA,SAAAD,CAAA,CACA,CACA,EAOA,UAAA,CACA,KAAA,QACA,QAAA,EACA,EAMA,KAAA,CACA,KAAA,OACA,QAAA,OACA,SAAAE,EAAA,CACA,OAAAC,EAAA,EAAA,SAAAD,CAAA,CACA,CACA,EAKA,iBAAA,CACA,KAAA,OACA,QAAA,KAAA,CAAA,EACA,EAMA,UAAA,CACA,KAAA,QACA,QAAA,EACA,EAMA,SAAA,CACA,KAAA,QACA,QAAA,EACA,EAMA,WAAA,CACA,KAAA,QACA,QAAA,EACA,CACA,EAEA,MAAA,CAMA,OACA,EAEA,SAAA,CACA,aAAA,CAQA,MAAA,CACA,WARA,CACA,MAAA,kBACA,KAAA,iBACA,QAAA,oBACA,QAAA,oBACA,KAAA,gBACA,EAGA,KAAA,IAAA,EACA,CAAA,sBAAA,KAAA,SAAA,CACA,CACA,CACA,CACA"}

package/dist/lib/notice.js

@@ -6,7 +6,6 @@ import "./icon.js";
 import "@dialpad/dialtone-icons/vue2";
 import "../chunks/icon_constants-OpYAAKwF.js";
 import "@dialpad/dialtone-icons/icons.json";
-import "./skeleton.js";
 import "./button.js";
 import "vue";
 import "../chunks/link_constants-vIUB92L4.js";
@@ -146,9 +145,9 @@ var u = function() {
   null,
   null
 );
-const D = f.exports;
+const B = f.exports;
 export {
-  D as DtNotice,
+  B as DtNotice,
   s as DtNoticeAction,
   o as DtNoticeContent,
   i as DtNoticeIcon,

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      v-on=\"$listeners\"\n    >\n      <template #titleOverride>\n        <!-- @slot Allows you to override the title, only use this if you need\n        to override with something other than text. Otherwise use the \"title\" prop. -->\n        <slot name=\"titleOverride\" />\n      </template>\n      <!-- @slot the main textual content of the notice -->\n      <slot />\n    </dt-notice-content>\n    <dt-notice-action\n      :hide-action=\"hideAction\"\n      :hide-close=\"hideClose\"\n      :close-button-props=\"closeButtonProps\"\n      :visually-hidden-close=\"visuallyHiddenClose\"\n      :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n      v-on=\"$listeners\"\n    >\n      <!-- @slot Enter a possible action for the user to take, such as a link to another page -->\n      <slot name=\"action\" />\n    </dt-notice-action>\n  </aside>\n</template>\n\n<script>\nimport DtNoticeIcon from './notice_icon.vue';\nimport DtNoticeContent from './notice_content.vue';\nimport DtNoticeAction from './notice_action.vue';\nimport { NOTICE_KINDS, NOTICE_ROLES } from './notice_constants';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\n\n/**\n * A notice is an informational and assistive message that appears inline with content.\n * @see https://dialtone.dialpad.com/components/notice.html\n */\nexport default {\n  name: 'DtNotice',\n\n  components: {\n    DtNoticeIcon,\n    DtNoticeContent,\n    DtNoticeAction,\n  },\n\n  mixins: [SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * Sets an ID on the title element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the title.\n     */\n    titleId: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Sets an ID on the content element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the content.\n     */\n    contentId: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Title header of the notice. This can be left blank to remove the title from the notice entirely.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Provides a role for the notice. 'status' is used to communicate a message. 'alert' is used to communicate an\n     * important message that does not contain any interactive elements. 'alertdialog' is used to communicate an\n     * important message that does contain interactive elements.\n     * @values alert, alertdialog, status\n     */\n    role: {\n      type: String,\n      default: 'status',\n      validate (role) {\n        return NOTICE_ROLES.includes(role);\n      },\n    },\n\n    /**\n     * Used in scenarios where the message needs to visually dominate the screen.\n     * This will also change the aria role from status to alert.\n     * @values true, false\n     */\n    important: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Severity level of the notice, sets the icon and background\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Props for the notice close button.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Hides the close button from the notice\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the icon from the notice\n     * @values true, false\n     */\n    hideIcon: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n  ],\n\n  computed: {\n    noticeClass () {\n      const noticeKinds = {\n        error: 'd-notice--error',\n        info: 'd-notice--info',\n        success: 'd-notice--success',\n        warning: 'd-notice--warning',\n        base: 'd-notice--base',\n      };\n      return [\n        'd-notice',\n        noticeKinds[this.kind],\n        { 'd-notice--important': this.important },\n      ];\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtNoticeIcon","DtNoticeContent","DtNoticeAction","SrOnlyCloseButtonMixin","role","NOTICE_ROLES","kind","NOTICE_KINDS"],"mappings":";;;;;;;;;;;;AAoDA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,cAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,gBAAAC;AAAA,EACA;AAAA,EAEA,QAAA,CAAAC,CAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAAC,GAAA;AACA,eAAAC,EAAA,SAAAD,CAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAAE,GAAA;AACA,eAAAC,EAAA,SAAAD,CAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,cAAA;AAQA,aAAA;AAAA,QACA;AAAA,QARA;AAAA,UACA,OAAA;AAAA,UACA,MAAA;AAAA,UACA,SAAA;AAAA,UACA,SAAA;AAAA,UACA,MAAA;AAAA,QACA,EAGA,KAAA,IAAA;AAAA,QACA,EAAA,uBAAA,KAAA,UAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"notice.js","sources":["../../components/notice/notice.vue"],"sourcesContent":["<template>\n  <aside\n    :class=\"noticeClass\"\n    data-qa=\"notice\"\n  >\n    <dt-notice-icon\n      v-if=\"!hideIcon\"\n      :kind=\"kind\"\n    >\n      <!-- @slot Slot for custom icon -->\n      <slot name=\"icon\" />\n    </dt-notice-icon>\n    <dt-notice-content\n      :title-id=\"titleId\"\n      :content-id=\"contentId\"\n      :title=\"title\"\n      :role=\"role\"\n      v-on=\"$listeners\"\n    >\n      <template #titleOverride>\n        <!-- @slot Allows you to override the title, only use this if you need\n        to override with something other than text. Otherwise use the \"title\" prop. -->\n        <slot name=\"titleOverride\" />\n      </template>\n      <!-- @slot the main textual content of the notice -->\n      <slot />\n    </dt-notice-content>\n    <dt-notice-action\n      :hide-action=\"hideAction\"\n      :hide-close=\"hideClose\"\n      :close-button-props=\"closeButtonProps\"\n      :visually-hidden-close=\"visuallyHiddenClose\"\n      :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n      v-on=\"$listeners\"\n    >\n      <!-- @slot Enter a possible action for the user to take, such as a link to another page -->\n      <slot name=\"action\" />\n    </dt-notice-action>\n  </aside>\n</template>\n\n<script>\nimport DtNoticeIcon from './notice_icon.vue';\nimport DtNoticeContent from './notice_content.vue';\nimport DtNoticeAction from './notice_action.vue';\nimport { NOTICE_KINDS, NOTICE_ROLES } from './notice_constants';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\n\n/**\n * A notice is an informational and assistive message that appears inline with content.\n * @see https://dialtone.dialpad.com/components/notice.html\n */\nexport default {\n  name: 'DtNotice',\n\n  components: {\n    DtNoticeIcon,\n    DtNoticeContent,\n    DtNoticeAction,\n  },\n\n  mixins: [SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * Sets an ID on the title element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the title.\n     */\n    titleId: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Sets an ID on the content element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the content.\n     */\n    contentId: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Title header of the notice. This can be left blank to remove the title from the notice entirely.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Provides a role for the notice. 'status' is used to communicate a message. 'alert' is used to communicate an\n     * important message that does not contain any interactive elements. 'alertdialog' is used to communicate an\n     * important message that does contain interactive elements.\n     * @values alert, alertdialog, status\n     */\n    role: {\n      type: String,\n      default: 'status',\n      validate (role) {\n        return NOTICE_ROLES.includes(role);\n      },\n    },\n\n    /**\n     * Used in scenarios where the message needs to visually dominate the screen.\n     * This will also change the aria role from status to alert.\n     * @values true, false\n     */\n    important: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Severity level of the notice, sets the icon and background\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Props for the notice close button.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Hides the close button from the notice\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the icon from the notice\n     * @values true, false\n     */\n    hideIcon: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n  ],\n\n  computed: {\n    noticeClass () {\n      const noticeKinds = {\n        error: 'd-notice--error',\n        info: 'd-notice--info',\n        success: 'd-notice--success',\n        warning: 'd-notice--warning',\n        base: 'd-notice--base',\n      };\n      return [\n        'd-notice',\n        noticeKinds[this.kind],\n        { 'd-notice--important': this.important },\n      ];\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtNoticeIcon","DtNoticeContent","DtNoticeAction","SrOnlyCloseButtonMixin","role","NOTICE_ROLES","kind","NOTICE_KINDS"],"mappings":";;;;;;;;;;;AAoDA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,cAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,gBAAAC;AAAA,EACA;AAAA,EAEA,QAAA,CAAAC,CAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAAC,GAAA;AACA,eAAAC,EAAA,SAAAD,CAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAAE,GAAA;AACA,eAAAC,EAAA,SAAAD,CAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,cAAA;AAQA,aAAA;AAAA,QACA;AAAA,QARA;AAAA,UACA,OAAA;AAAA,UACA,MAAA;AAAA,UACA,SAAA;AAAA,UACA,SAAA;AAAA,UACA,MAAA;AAAA,QACA,EAGA,KAAA,IAAA;AAAA,QACA,EAAA,uBAAA,KAAA,UAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}

package/dist/lib/pagination.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../chunks/_plugin-vue2_normalizer-ZK80B3OL.js"),c=require("./button.cjs"),o=require("./icon.cjs");require("vue");require("../chunks/link_constants-Kn6kP4i1.js");require("@dialpad/dialtone-icons/vue2");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");const u={name:"DtPagination",components:{DtButton:c.DtButton,DtIcon:o.DtIcon},props:{ariaLabel:{type:String,required:!0},totalPages:{type:Number,required:!0},prevAriaLabel:{type:String,required:!0},nextAriaLabel:{type:String,required:!0},pageNumberAriaLabel:{type:Function,required:!0},activePage:{type:Number,default:1},maxVisible:{type:Number,default:5}},emits:["change"],data(){return{currentPage:this.activePage}},computed:{isFirstPage(){return this.currentPage===1},isLastPage(){return this.currentPage===this.totalPages},pages(){if(this.maxVisible===0)return[];if(this.totalPages<=this.maxVisible)return this.range(1,this.totalPages);const r=this.maxVisible-1,t=this.totalPages-r+1;if(this.currentPage<r)return[...this.range(1,r),"...",this.totalPages];if(this.currentPage>t)return[1,"...",...this.range(t,this.totalPages)];const a=this.maxVisible-(3-this.maxVisible%2),e=Math.floor(a/2),i=this.currentPage-e,n=this.currentPage+e;return[1,"...",...this.range(i,n),"...",this.totalPages]}},methods:{range(r,t){const a=[];r=r>0?r:1;for(let e=r;e<=t;e++)a.push(e);return a},changePage(r){this.currentPage=r,this.$emit("change",this.currentPage)}}};var l=function(){var t=this,a=t._self._c;return a("nav",{staticClass:"d-pagination",attrs:{"aria-label":t.ariaLabel}},[a("dt-button",{staticClass:"d-pagination__button",class:t.isFirstPage?"d-fc-black-300 d-bgc-transparent":"d-fc-tertiary",attrs:{"data-qa":"dt-pagination-prev","aria-label":t.prevAriaLabel,kind:t.isFirstPage?"default":"muted",importance:t.isFirstPage?"primary":"clear",disabled:t.isFirstPage},on:{click:function(e){return t.changePage(t.currentPage-1)}}},[a("template",{slot:"icon"},[a("dt-icon",{attrs:{name:"chevron-left",size:"300"}})],1)],2),t._l(t.pages,function(e,i){return a("div",{key:`page-${e}-${i}`,class:{"d-pagination__separator":isNaN(Number(e))}},[isNaN(Number(e))?a("div",{staticClass:"d-pagination__separator-icon",attrs:{"data-qa":"dt-pagination-separator"}},[a("dt-icon",{attrs:{name:"more-horizontal",size:"300"}})],1):a("dt-button",{attrs:{"aria-label":t.pageNumberAriaLabel(e),kind:t.currentPage===e?"default":"muted",importance:t.currentPage===e?"primary":"clear","label-class":""},on:{click:function(n){return t.changePage(e)}}},[t._v(" "+t._s(e)+" ")])],1)}),a("dt-button",{staticClass:"d-pagination__button",class:t.isLastPage?"d-fc-black-300 d-bgc-transparent":"d-fc-tertiary",attrs:{"data-qa":"dt-pagination-next","aria-label":t.nextAriaLabel,disabled:t.isLastPage,kind:"muted",importance:t.isLastPage?"primary":"clear"},on:{click:function(e){return t.changePage(t.currentPage+1)}}},[a("template",{slot:"icon"},[a("dt-icon",{attrs:{name:"chevron-right",size:"300"}})],1)],2)],2)},g=[],d=s.n(u,l,g,!1,null,null,null,null);const b=d.exports;exports.DtPagination=b;
+//# sourceMappingURL=pagination.cjs.map

package/dist/lib/pagination.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.cjs","sources":["../../components/pagination/pagination.vue"],"sourcesContent":["<template>\n  <nav\n    :aria-label=\"ariaLabel\"\n    class=\"d-pagination\"\n  >\n    <dt-button\n      class=\"d-pagination__button\"\n      data-qa=\"dt-pagination-prev\"\n      :aria-label=\"prevAriaLabel\"\n      :kind=\"isFirstPage ? 'default' : 'muted'\"\n      :importance=\"isFirstPage ? 'primary' : 'clear'\"\n      :disabled=\"isFirstPage\"\n      :class=\"isFirstPage ? 'd-fc-black-300 d-bgc-transparent' : 'd-fc-tertiary'\"\n      @click=\"changePage(currentPage - 1)\"\n    >\n      <template slot=\"icon\">\n        <dt-icon\n          name=\"chevron-left\"\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n    <div\n      v-for=\"(page, index) in pages\"\n      :key=\"`page-${page}-${index}`\"\n      :class=\"{ 'd-pagination__separator': isNaN(Number(page)) }\"\n    >\n      <!-- eslint-disable vue/no-bare-strings-in-template -->\n      <div\n        v-if=\"isNaN(Number(page))\"\n        class=\"d-pagination__separator-icon\"\n        data-qa=\"dt-pagination-separator\"\n      >\n        <dt-icon\n          name=\"more-horizontal\"\n          size=\"300\"\n        />\n        <!-- … -->\n      </div>\n      <!-- eslint-enable vue/no-bare-strings-in-template -->\n      <dt-button\n        v-else\n        :aria-label=\"pageNumberAriaLabel(page)\"\n        :kind=\"currentPage === page ? 'default' : 'muted'\"\n        :importance=\"currentPage === page ? 'primary' : 'clear'\"\n        label-class=\"\"\n        @click=\"changePage(page)\"\n      >\n        {{ page }}\n      </dt-button>\n    </div>\n    <dt-button\n      class=\"d-pagination__button\"\n      data-qa=\"dt-pagination-next\"\n      :aria-label=\"nextAriaLabel\"\n      :disabled=\"isLastPage\"\n      kind=\"muted\"\n      :importance=\"isLastPage ? 'primary' : 'clear'\"\n      :class=\"isLastPage ? 'd-fc-black-300 d-bgc-transparent' : 'd-fc-tertiary'\"\n      @click=\"changePage(currentPage + 1)\"\n    >\n      <template slot=\"icon\">\n        <dt-icon\n          name=\"chevron-right\"\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n  </nav>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\n\n/**\n * Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.\n * @see https://dialtone.dialpad.com/components/pagination.html\n */\nexport default {\n  name: 'DtPagination',\n\n  components: {\n    DtButton,\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * Descriptive label for the pagination content.\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * The total number of the pages\n     */\n    totalPages: {\n      type: Number,\n      required: true,\n    },\n\n    /**\n     * Descriptive label for the previous button.\n     */\n    prevAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Descriptive label for the next button.\n     */\n    nextAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * A method that will be called to get the aria label of each page.\n     */\n    pageNumberAriaLabel: {\n      type: Function,\n      required: true,\n    },\n\n    /**\n     * The active current page in the list of pages, defaults to the first page\n     */\n    activePage: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Determines the max pages to be shown in the list. Using an odd number is recommended.\n     * If an even number is given, then it will be rounded down to the nearest odd number to always\n     * keep current page in the middle when current page is in the mid-range.\n     */\n    maxVisible: {\n      type: Number,\n      default: 5,\n    },\n  },\n\n  emits: [\n    /**\n     * Page change event\n     *\n     * @event change\n     * @type {Number}\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      currentPage: this.activePage,\n    };\n  },\n\n  computed: {\n    isFirstPage () {\n      return this.currentPage === 1;\n    },\n\n    isLastPage () {\n      return this.currentPage === this.totalPages;\n    },\n\n    pages () {\n      if (this.maxVisible === 0) {\n        return [];\n      }\n      if (this.totalPages <= this.maxVisible) {\n        return this.range(1, this.totalPages);\n      }\n\n      const start = this.maxVisible - 1;\n      const end = this.totalPages - start + 1;\n\n      if (this.currentPage < start) {\n        return [...this.range(1, start), '...', this.totalPages];\n      }\n\n      if (this.currentPage > end) {\n        return [1, '...', ...this.range(end, this.totalPages)];\n      }\n\n      // rounding to the nearest odd according to the maxlength to always show the page number in the middle.\n      const total = this.maxVisible - (3 - this.maxVisible % 2);\n      const centerIndex = Math.floor(total / 2);\n      const left = this.currentPage - centerIndex;\n      const right = this.currentPage + centerIndex;\n      return [1, '...', ...this.range(left, right), '...', this.totalPages];\n    },\n  },\n\n  methods: {\n    range (from, to) {\n      const range = [];\n      from = from > 0 ? from : 1;\n      for (let i = from; i <= to; i++) {\n        range.push(i);\n      }\n      return range;\n    },\n\n    changePage (page) {\n      this.currentPage = page;\n      this.$emit('change', this.currentPage);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtIcon","start","end","total","centerIndex","left","right","from","to","range","i","page"],"mappings":"wYA+EA,MAAAA,EAAA,CACA,KAAA,eAEA,WAAA,CACA,SAAAC,EAAA,SACA,OAAAC,EAAA,MACA,EAEA,MAAA,CAIA,UAAA,CACA,KAAA,OACA,SAAA,EACA,EAKA,WAAA,CACA,KAAA,OACA,SAAA,EACA,EAKA,cAAA,CACA,KAAA,OACA,SAAA,EACA,EAKA,cAAA,CACA,KAAA,OACA,SAAA,EACA,EAKA,oBAAA,CACA,KAAA,SACA,SAAA,EACA,EAKA,WAAA,CACA,KAAA,OACA,QAAA,CACA,EAOA,WAAA,CACA,KAAA,OACA,QAAA,CACA,CACA,EAEA,MAAA,CAOA,QACA,EAEA,MAAA,CACA,MAAA,CACA,YAAA,KAAA,UACA,CACA,EAEA,SAAA,CACA,aAAA,CACA,OAAA,KAAA,cAAA,CACA,EAEA,YAAA,CACA,OAAA,KAAA,cAAA,KAAA,UACA,EAEA,OAAA,CACA,GAAA,KAAA,aAAA,EACA,MAAA,GAEA,GAAA,KAAA,YAAA,KAAA,WACA,OAAA,KAAA,MAAA,EAAA,KAAA,UAAA,EAGA,MAAAC,EAAA,KAAA,WAAA,EACAC,EAAA,KAAA,WAAAD,EAAA,EAEA,GAAA,KAAA,YAAAA,EACA,MAAA,CAAA,GAAA,KAAA,MAAA,EAAAA,CAAA,EAAA,MAAA,KAAA,UAAA,EAGA,GAAA,KAAA,YAAAC,EACA,MAAA,CAAA,EAAA,MAAA,GAAA,KAAA,MAAAA,EAAA,KAAA,UAAA,CAAA,EAIA,MAAAC,EAAA,KAAA,YAAA,EAAA,KAAA,WAAA,GACAC,EAAA,KAAA,MAAAD,EAAA,CAAA,EACAE,EAAA,KAAA,YAAAD,EACAE,EAAA,KAAA,YAAAF,EACA,MAAA,CAAA,EAAA,MAAA,GAAA,KAAA,MAAAC,EAAAC,CAAA,EAAA,MAAA,KAAA,UAAA,CACA,CACA,EAEA,QAAA,CACA,MAAAC,EAAAC,EAAA,CACA,MAAAC,EAAA,CAAA,EACAF,EAAAA,EAAA,EAAAA,EAAA,EACA,QAAAG,EAAAH,EAAAG,GAAAF,EAAAE,IACAD,EAAA,KAAAC,CAAA,EAEA,OAAAD,CACA,EAEA,WAAAE,EAAA,CACA,KAAA,YAAAA,EACA,KAAA,MAAA,SAAA,KAAA,WAAA,CACA,CACA,CACA"}

package/dist/lib/pagination.js

@@ -6,7 +6,6 @@ import "../chunks/link_constants-vIUB92L4.js";
 import "@dialpad/dialtone-icons/vue2";
 import "../chunks/icon_constants-OpYAAKwF.js";
 import "@dialpad/dialtone-icons/icons.json";
-import "./skeleton.js";
 const l = {
   name: "DtPagination",
   components: {
@@ -135,8 +134,8 @@ var u = function() {
   null,
   null
 );
-const x = d.exports;
+const y = d.exports;
 export {
-  x as DtPagination
+  y as DtPagination
 };
 //# sourceMappingURL=pagination.js.map

package/dist/lib/pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","sources":["../../components/pagination/pagination.vue"],"sourcesContent":["<template>\n  <nav\n    :aria-label=\"ariaLabel\"\n    class=\"d-pagination\"\n  >\n    <dt-button\n      class=\"d-pagination__button\"\n      data-qa=\"dt-pagination-prev\"\n      :aria-label=\"prevAriaLabel\"\n      :kind=\"isFirstPage ? 'default' : 'muted'\"\n      :importance=\"isFirstPage ? 'primary' : 'clear'\"\n      :disabled=\"isFirstPage\"\n      :class=\"isFirstPage ? 'd-fc-black-300 d-bgc-transparent' : 'd-fc-tertiary'\"\n      @click=\"changePage(currentPage - 1)\"\n    >\n      <template slot=\"icon\">\n        <dt-icon\n          name=\"chevron-left\"\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n    <div\n      v-for=\"(page, index) in pages\"\n      :key=\"`page-${page}-${index}`\"\n      :class=\"{ 'd-pagination__separator': isNaN(Number(page)) }\"\n    >\n      <!-- eslint-disable vue/no-bare-strings-in-template -->\n      <div\n        v-if=\"isNaN(Number(page))\"\n        class=\"d-pagination__separator-icon\"\n        data-qa=\"dt-pagination-separator\"\n      >\n        <dt-icon\n          name=\"more-horizontal\"\n          size=\"300\"\n        />\n        <!-- … -->\n      </div>\n      <!-- eslint-enable vue/no-bare-strings-in-template -->\n      <dt-button\n        v-else\n        :aria-label=\"pageNumberAriaLabel(page)\"\n        :kind=\"currentPage === page ? 'default' : 'muted'\"\n        :importance=\"currentPage === page ? 'primary' : 'clear'\"\n        label-class=\"\"\n        @click=\"changePage(page)\"\n      >\n        {{ page }}\n      </dt-button>\n    </div>\n    <dt-button\n      class=\"d-pagination__button\"\n      data-qa=\"dt-pagination-next\"\n      :aria-label=\"nextAriaLabel\"\n      :disabled=\"isLastPage\"\n      kind=\"muted\"\n      :importance=\"isLastPage ? 'primary' : 'clear'\"\n      :class=\"isLastPage ? 'd-fc-black-300 d-bgc-transparent' : 'd-fc-tertiary'\"\n      @click=\"changePage(currentPage + 1)\"\n    >\n      <template slot=\"icon\">\n        <dt-icon\n          name=\"chevron-right\"\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n  </nav>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\n\n/**\n * Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.\n * @see https://dialtone.dialpad.com/components/pagination.html\n */\nexport default {\n  name: 'DtPagination',\n\n  components: {\n    DtButton,\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * Descriptive label for the pagination content.\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * The total number of the pages\n     */\n    totalPages: {\n      type: Number,\n      required: true,\n    },\n\n    /**\n     * Descriptive label for the previous button.\n     */\n    prevAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Descriptive label for the next button.\n     */\n    nextAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * A method that will be called to get the aria label of each page.\n     */\n    pageNumberAriaLabel: {\n      type: Function,\n      required: true,\n    },\n\n    /**\n     * The active current page in the list of pages, defaults to the first page\n     */\n    activePage: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Determines the max pages to be shown in the list. Using an odd number is recommended.\n     * If an even number is given, then it will be rounded down to the nearest odd number to always\n     * keep current page in the middle when current page is in the mid-range.\n     */\n    maxVisible: {\n      type: Number,\n      default: 5,\n    },\n  },\n\n  emits: [\n    /**\n     * Page change event\n     *\n     * @event change\n     * @type {Number}\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      currentPage: this.activePage,\n    };\n  },\n\n  computed: {\n    isFirstPage () {\n      return this.currentPage === 1;\n    },\n\n    isLastPage () {\n      return this.currentPage === this.totalPages;\n    },\n\n    pages () {\n      if (this.maxVisible === 0) {\n        return [];\n      }\n      if (this.totalPages <= this.maxVisible) {\n        return this.range(1, this.totalPages);\n      }\n\n      const start = this.maxVisible - 1;\n      const end = this.totalPages - start + 1;\n\n      if (this.currentPage < start) {\n        return [...this.range(1, start), '...', this.totalPages];\n      }\n\n      if (this.currentPage > end) {\n        return [1, '...', ...this.range(end, this.totalPages)];\n      }\n\n      // rounding to the nearest odd according to the maxlength to always show the page number in the middle.\n      const total = this.maxVisible - (3 - this.maxVisible % 2);\n      const centerIndex = Math.floor(total / 2);\n      const left = this.currentPage - centerIndex;\n      const right = this.currentPage + centerIndex;\n      return [1, '...', ...this.range(left, right), '...', this.totalPages];\n    },\n  },\n\n  methods: {\n    range (from, to) {\n      const range = [];\n      from = from > 0 ? from : 1;\n      for (let i = from; i <= to; i++) {\n        range.push(i);\n      }\n      return range;\n    },\n\n    changePage (page) {\n      this.currentPage = page;\n      this.$emit('change', this.currentPage);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtIcon","start","end","total","centerIndex","left","right","from","to","range","i","page"],"mappings":";;;;;;;;;AA+EA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,aAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,cAAA;AACA,aAAA,KAAA,gBAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA,KAAA,gBAAA,KAAA;AAAA,IACA;AAAA,IAEA,QAAA;AACA,UAAA,KAAA,eAAA;AACA,eAAA;AAEA,UAAA,KAAA,cAAA,KAAA;AACA,eAAA,KAAA,MAAA,GAAA,KAAA,UAAA;AAGA,YAAAC,IAAA,KAAA,aAAA,GACAC,IAAA,KAAA,aAAAD,IAAA;AAEA,UAAA,KAAA,cAAAA;AACA,eAAA,CAAA,GAAA,KAAA,MAAA,GAAAA,CAAA,GAAA,OAAA,KAAA,UAAA;AAGA,UAAA,KAAA,cAAAC;AACA,eAAA,CAAA,GAAA,OAAA,GAAA,KAAA,MAAAA,GAAA,KAAA,UAAA,CAAA;AAIA,YAAAC,IAAA,KAAA,cAAA,IAAA,KAAA,aAAA,IACAC,IAAA,KAAA,MAAAD,IAAA,CAAA,GACAE,IAAA,KAAA,cAAAD,GACAE,IAAA,KAAA,cAAAF;AACA,aAAA,CAAA,GAAA,OAAA,GAAA,KAAA,MAAAC,GAAAC,CAAA,GAAA,OAAA,KAAA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,MAAAC,GAAAC,GAAA;AACA,YAAAC,IAAA,CAAA;AACA,MAAAF,IAAAA,IAAA,IAAAA,IAAA;AACA,eAAAG,IAAAH,GAAAG,KAAAF,GAAAE;AACA,QAAAD,EAAA,KAAAC,CAAA;AAEA,aAAAD;AAAA,IACA;AAAA,IAEA,WAAAE,GAAA;AACA,WAAA,cAAAA,GACA,KAAA,MAAA,UAAA,KAAA,WAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"pagination.js","sources":["../../components/pagination/pagination.vue"],"sourcesContent":["<template>\n  <nav\n    :aria-label=\"ariaLabel\"\n    class=\"d-pagination\"\n  >\n    <dt-button\n      class=\"d-pagination__button\"\n      data-qa=\"dt-pagination-prev\"\n      :aria-label=\"prevAriaLabel\"\n      :kind=\"isFirstPage ? 'default' : 'muted'\"\n      :importance=\"isFirstPage ? 'primary' : 'clear'\"\n      :disabled=\"isFirstPage\"\n      :class=\"isFirstPage ? 'd-fc-black-300 d-bgc-transparent' : 'd-fc-tertiary'\"\n      @click=\"changePage(currentPage - 1)\"\n    >\n      <template slot=\"icon\">\n        <dt-icon\n          name=\"chevron-left\"\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n    <div\n      v-for=\"(page, index) in pages\"\n      :key=\"`page-${page}-${index}`\"\n      :class=\"{ 'd-pagination__separator': isNaN(Number(page)) }\"\n    >\n      <!-- eslint-disable vue/no-bare-strings-in-template -->\n      <div\n        v-if=\"isNaN(Number(page))\"\n        class=\"d-pagination__separator-icon\"\n        data-qa=\"dt-pagination-separator\"\n      >\n        <dt-icon\n          name=\"more-horizontal\"\n          size=\"300\"\n        />\n        <!-- … -->\n      </div>\n      <!-- eslint-enable vue/no-bare-strings-in-template -->\n      <dt-button\n        v-else\n        :aria-label=\"pageNumberAriaLabel(page)\"\n        :kind=\"currentPage === page ? 'default' : 'muted'\"\n        :importance=\"currentPage === page ? 'primary' : 'clear'\"\n        label-class=\"\"\n        @click=\"changePage(page)\"\n      >\n        {{ page }}\n      </dt-button>\n    </div>\n    <dt-button\n      class=\"d-pagination__button\"\n      data-qa=\"dt-pagination-next\"\n      :aria-label=\"nextAriaLabel\"\n      :disabled=\"isLastPage\"\n      kind=\"muted\"\n      :importance=\"isLastPage ? 'primary' : 'clear'\"\n      :class=\"isLastPage ? 'd-fc-black-300 d-bgc-transparent' : 'd-fc-tertiary'\"\n      @click=\"changePage(currentPage + 1)\"\n    >\n      <template slot=\"icon\">\n        <dt-icon\n          name=\"chevron-right\"\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n  </nav>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\n\n/**\n * Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.\n * @see https://dialtone.dialpad.com/components/pagination.html\n */\nexport default {\n  name: 'DtPagination',\n\n  components: {\n    DtButton,\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * Descriptive label for the pagination content.\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * The total number of the pages\n     */\n    totalPages: {\n      type: Number,\n      required: true,\n    },\n\n    /**\n     * Descriptive label for the previous button.\n     */\n    prevAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Descriptive label for the next button.\n     */\n    nextAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * A method that will be called to get the aria label of each page.\n     */\n    pageNumberAriaLabel: {\n      type: Function,\n      required: true,\n    },\n\n    /**\n     * The active current page in the list of pages, defaults to the first page\n     */\n    activePage: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Determines the max pages to be shown in the list. Using an odd number is recommended.\n     * If an even number is given, then it will be rounded down to the nearest odd number to always\n     * keep current page in the middle when current page is in the mid-range.\n     */\n    maxVisible: {\n      type: Number,\n      default: 5,\n    },\n  },\n\n  emits: [\n    /**\n     * Page change event\n     *\n     * @event change\n     * @type {Number}\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      currentPage: this.activePage,\n    };\n  },\n\n  computed: {\n    isFirstPage () {\n      return this.currentPage === 1;\n    },\n\n    isLastPage () {\n      return this.currentPage === this.totalPages;\n    },\n\n    pages () {\n      if (this.maxVisible === 0) {\n        return [];\n      }\n      if (this.totalPages <= this.maxVisible) {\n        return this.range(1, this.totalPages);\n      }\n\n      const start = this.maxVisible - 1;\n      const end = this.totalPages - start + 1;\n\n      if (this.currentPage < start) {\n        return [...this.range(1, start), '...', this.totalPages];\n      }\n\n      if (this.currentPage > end) {\n        return [1, '...', ...this.range(end, this.totalPages)];\n      }\n\n      // rounding to the nearest odd according to the maxlength to always show the page number in the middle.\n      const total = this.maxVisible - (3 - this.maxVisible % 2);\n      const centerIndex = Math.floor(total / 2);\n      const left = this.currentPage - centerIndex;\n      const right = this.currentPage + centerIndex;\n      return [1, '...', ...this.range(left, right), '...', this.totalPages];\n    },\n  },\n\n  methods: {\n    range (from, to) {\n      const range = [];\n      from = from > 0 ? from : 1;\n      for (let i = from; i <= to; i++) {\n        range.push(i);\n      }\n      return range;\n    },\n\n    changePage (page) {\n      this.currentPage = page;\n      this.$emit('change', this.currentPage);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtIcon","start","end","total","centerIndex","left","right","from","to","range","i","page"],"mappings":";;;;;;;;AA+EA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,aAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,cAAA;AACA,aAAA,KAAA,gBAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA,KAAA,gBAAA,KAAA;AAAA,IACA;AAAA,IAEA,QAAA;AACA,UAAA,KAAA,eAAA;AACA,eAAA;AAEA,UAAA,KAAA,cAAA,KAAA;AACA,eAAA,KAAA,MAAA,GAAA,KAAA,UAAA;AAGA,YAAAC,IAAA,KAAA,aAAA,GACAC,IAAA,KAAA,aAAAD,IAAA;AAEA,UAAA,KAAA,cAAAA;AACA,eAAA,CAAA,GAAA,KAAA,MAAA,GAAAA,CAAA,GAAA,OAAA,KAAA,UAAA;AAGA,UAAA,KAAA,cAAAC;AACA,eAAA,CAAA,GAAA,OAAA,GAAA,KAAA,MAAAA,GAAA,KAAA,UAAA,CAAA;AAIA,YAAAC,IAAA,KAAA,cAAA,IAAA,KAAA,aAAA,IACAC,IAAA,KAAA,MAAAD,IAAA,CAAA,GACAE,IAAA,KAAA,cAAAD,GACAE,IAAA,KAAA,cAAAF;AACA,aAAA,CAAA,GAAA,OAAA,GAAA,KAAA,MAAAC,GAAAC,CAAA,GAAA,OAAA,KAAA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,MAAAC,GAAAC,GAAA;AACA,YAAAC,IAAA,CAAA;AACA,MAAAF,IAAAA,IAAA,IAAAA,IAAA;AACA,eAAAG,IAAAH,GAAAG,KAAAF,GAAAE;AACA,QAAAD,EAAA,KAAAC,CAAA;AAEA,aAAAD;AAAA,IACA;AAAA,IAEA,WAAAE,GAAA;AACA,WAAA,cAAAA,GACA,KAAA,MAAA,UAAA,KAAA,WAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/popover.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../chunks/popover_constants-hOEhklvr.js"),s=require("./utils.cjs"),a=require("@linusborg/vue-simple-portal"),p=require("../chunks/modal-qEzlo0Sj.js"),l=require("../chunks/_plugin-vue2_normalizer-ZK80B3OL.js"),c=require("./button.cjs"),d=require("./icon.cjs"),r=require("../chunks/sr_only_close_button-ErijKGYR.js"),h=require("./lazy-show.cjs");require("tippy.js");require("./constants.cjs");require("vue");require("../chunks/link_constants-Kn6kP4i1.js");require("@dialpad/dialtone-icons/vue2");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");const u={name:"PopoverHeaderFooter",components:{DtButton:c.DtButton,DtIcon:d.DtIcon},props:{type:{type:String,validator:function(t){return["header","footer"].includes(t)}},contentClass:{type:[String,Array,Object],default:""},showCloseButton:{type:Boolean,default:!1},closeButtonProps:{type:Object,default:()=>{}}},emits:["close"],methods:{focusCloseButton(){var e;const t=(e=this.$refs["popover__close-button"])==null?void 0:e.$el;t==null||t.focus()}}};var f=function(){var e=this,o=e._self._c;return o("div",{class:{"d-popover__header":e.type==="header","d-popover__footer":e.type==="footer"},attrs:{"data-qa":"dt-popover-header-footer"}},[e.$slots.content?o("div",{class:[{"d-popover__header__content":e.type==="header","d-popover__footer__content":e.type==="footer"},e.contentClass],attrs:{"data-qa":"dt-popover-header-footer-content"}},[e._t("content")],2):e._e(),e.showCloseButton?o("dt-button",e._b({ref:"popover__close-button",class:{"d-popover__header__close-button":e.type==="header","d-popover__footer__close-button":e.type==="footer"},attrs:{"data-qa":"dt-popover-close",importance:"outlined",kind:"muted",circle:""},on:{click:function(n){return e.$emit("close")}},scopedSlots:e._u([{key:"icon",fn:function(){return[o("dt-icon",{attrs:{name:"close",size:"300"}})]},proxy:!0}],null,!1,2538694920)},"dt-button",e.closeButtonProps,!1)):e._e()],1)},m=[],v=l.n(u,f,m,!1,null,null,null,null);const y=v.exports,_={name:"DtPopover",components:{SrOnlyCloseButton:r.S,DtLazyShow:h.DtLazyShow,PopoverHeaderFooter:y,Portal:a.Portal},mixins:[p.M,r.a],props:{open:{type:Boolean,default:null},openOnContext:{type:Boolean,default:!1},elementType:{type:String,default:"div"},transition:{type:String,default:"fade"},role:{type:String,default:"dialog",validator:t=>i.b.includes(t)},ariaLabelledby:{type:String,default:null},ariaLabel:{type:String,default:null},closeButtonProps:{type:Object,default:()=>({})},padding:{type:String,default:"large",validator:t=>Object.keys(i.P).some(e=>e===t)},contentClass:{type:[String,Array,Object],default:""},contentWidth:{type:String,default:"",validator:t=>i.c.includes(t)},contentTabindex:{type:Number||null,default:-1},externalAnchor:{type:String,default:""},id:{type:String,default(){return s.getUniqueString()}},offset:{type:Array,default:()=>[0,4]},hideOnClick:{type:Boolean,default:!0},modal:{type:Boolean,default:!0},fallbackPlacements:{type:Array,default:()=>["auto"]},placement:{type:String,default:"bottom-end"},tether:{type:Boolean,default:!0},sticky:{type:[Boolean,String],default:!1,validator:t=>i.f.includes(t)},maxHeight:{type:String,default:""},maxWidth:{type:String,default:""},showCloseButton:{type:Boolean,default:!1},headerClass:{type:[String,Array,Object],default:""},footerClass:{type:[String,Array,Object],default:""},dialogClass:{type:[String,Array,Object],default:""},initialFocusElement:{type:[String,HTMLElement],default:"first",validator:t=>i.d.includes(t)||t instanceof HTMLElement||t.startsWith("#")},openWithArrowKeys:{type:Boolean,default:!1},appendTo:{type:[HTMLElement,String],default:"body",validator:t=>i.e.includes(t)||t instanceof HTMLElement},hovercard:{type:Boolean,default:!1},timer:{type:[Object,null],default:null,validator:t=>t===null||t.enter&&t.leave&&Object.keys(t).includes("current")}},emits:["opened","update:open"],data(){return{POPOVER_PADDING_CLASSES:i.P,POPOVER_HEADER_FOOTER_PADDING_CLASSES:i.a,intersectionObserver:null,isOutsideViewport:!1,isOpen:!1,anchorEl:null,popoverContentEl:null,inTimer:null,outTimer:null}},computed:{popoverListeners(){return{...this.$listeners,keydown:t=>{this.onKeydown(t),this.$emit("keydown",t)},"after-leave":t=>{this.onLeaveTransitionComplete()},"after-enter":t=>{this.onEnterTransitionComplete()}}},calculatedMaxHeight(){return this.isOutsideViewport&&this.modal?"calc(100vh - var(--dt-space-300))":this.maxHeight},labelledBy(){return this.ariaLabelledby||!this.ariaLabel&&s.getUniqueString("DtPopover__anchor")},currentHovercard(){var t;return(t=this.timer)==null?void 0:t.current.value}},watch:{$props:{immediate:!0,deep:!0,handler(){this.validateProps()}},modal(t){var e;(e=this.tip)==null||e.setProps({zIndex:t?650:this.calculateAnchorZindex()})},offset(t){var e;(e=this.tip)==null||e.setProps({offset:t})},sticky(t){var e;(e=this.tip)==null||e.setProps({sticky:t})},fallbackPlacements(){var t;(t=this.tip)==null||t.setProps({popperOptions:this.popperOptions()})},tether(){var t;(t=this.tip)==null||t.setProps({popperOptions:this.popperOptions()})},placement(t){var e;(e=this.tip)==null||e.setProps({placement:t})},open:{handler:function(t){t!==null&&(this.isOpen=t)},immediate:!0},isOpen(t,e){t?(this.initTippyInstance(),this.tip.show()):!t&&e!==t&&(this.removeEventListeners(),this.tip.hide())},currentHovercard(){this.hovercard&&this.timer&&(this.currentHovercard===this.id?this.isOpen=!0:this.isOpen=!1)}},mounted(){var e;const t=this.externalAnchor?this.$refs.anchor.getRootNode().querySelector(`#${this.externalAnchor}`):null;this.anchorEl=t??this.$refs.anchor.children[0],this.popoverContentEl=(e=this.$refs.content)==null?void 0:e.$el,this.isOpen&&(this.initTippyInstance(),this.tip.show()),this.intersectionObserver=new IntersectionObserver(this.hasIntersectedViewport),this.intersectionObserver.observe(this.popoverContentEl)},beforeDestroy(){var t;(t=this.tip)==null||t.destroy(),this.intersectionObserver.disconnect(),this.removeReferences(),this.removeEventListeners()},methods:{hasIntersectedViewport(t){var n;const e=(n=t==null?void 0:t[0])==null?void 0:n.target;if(!e)return;const o=s.isOutOfViewPort(e);this.isOutsideViewport=o.bottom||o.top},popperOptions(){return i.l({fallbackPlacements:this.fallbackPlacements,tether:this.tether,hasHideModifierEnabled:!0})},validateProps(){this.modal&&this.initialFocusElement==="none"&&console.error('If the popover is modal you must set the initialFocusElement prop. Possible values: "dialog", "first", HTMLElement')},calculateAnchorZindex(){var t;return this.$el.getRootNode().querySelector('.d-modal[aria-hidden="false"], .d-modal--transparent[aria-hidden="false"]')||(t=this.anchorEl)!=null&&t.closest(".d-zi-drawer")?650:300},defaultToggleOpen(t){var e,o;this.hovercard||this.openOnContext||(this.open??((e=this.anchorEl)!=null&&e.contains(t.target)&&!((o=this.anchorEl)!=null&&o.disabled)&&this.toggleOpen()))},async onContext(t){this.openOnContext&&(t.preventDefault(),this.isOpen=!0,await this.$nextTick(),this.tip.setProps({placement:"right-start",getReferenceClientRect:()=>({width:0,height:0,top:t.clientY,bottom:t.clientY,left:t.clientX,right:t.clientX})}))},toggleOpen(){this.isOpen=!this.isOpen},onArrowKeyPress(t){var e;this.open===null&&this.openWithArrowKeys&&(e=this.anchorEl)!=null&&e.contains(t.target)&&(this.isOpen||(this.isOpen=!0))},addEventListeners(){window.addEventListener("dt-popover-close",this.closePopover),this.contentWidth==="anchor"&&window.addEventListener("resize",this.onResize)},removeEventListeners(){window.removeEventListener("dt-popover-close",this.closePopover),this.contentWidth==="anchor"&&window.removeEventListener("resize",this.onResize)},closePopover(){this.isOpen=!1},preventScrolling(){var t,e;if(this.modal){const o=(t=this.anchorEl)==null?void 0:t.closest("body, .tippy-box");if(!o)return;((e=o.tagName)==null?void 0:e.toLowerCase())==="body"?(o.classList.add("d-of-hidden"),this.tip.setProps({offset:this.offset})):o.classList.add("d-zi-popover")}},enableScrolling(){var e,o;const t=(e=this.anchorEl)==null?void 0:e.closest("body, .tippy-box");t&&(((o=t.tagName)==null?void 0:o.toLowerCase())==="body"?(t.classList.remove("d-of-hidden"),this.tip.setProps({offset:this.offset})):t.classList.remove("d-zi-popover"))},removeReferences(){this.anchorEl=null,this.popoverContentEl=null,this.tip=null},async onShow(){this.contentWidth==="anchor"&&await this.setPopoverContentAnchorWidth(),this.contentWidth===null&&(this.popoverContentEl.style.width="auto"),this.addEventListeners()},async onLeaveTransitionComplete(){var t;this.modal&&(await this.focusFirstElement(this.$refs.anchor),await this.$nextTick(),this.enableScrolling()),(t=this.tip)==null||t.unmount(),this.$emit("opened",!1),this.open!==null&&this.$emit("update:open",!1)},async onEnterTransitionComplete(){this.focusInitialElement(),await this.$nextTick(),this.preventScrolling(),this.$emit("opened",!0,this.$refs.popover__content),this.open!==null&&this.$emit("update:open",!0)},focusInitialElement(){var t,e;this.initialFocusElement==="dialog"&&((e=(t=this.$refs.content)==null?void 0:t.$el)==null||e.focus()),this.initialFocusElement.startsWith("#")&&this.focusInitialElementById(),this.initialFocusElement==="first"&&this.focusFirstElementIfNeeded(this.$refs.popover__content),this.initialFocusElement instanceof HTMLElement&&this.initialFocusElement.focus()},focusInitialElementById(){var e,o,n;const t=(o=(e=this.$refs.content)==null?void 0:e.$el)==null?void 0:o.querySelector(this.initialFocusElement);t?t.focus():console.warn('Could not find the element specified in dt-popover prop "initialFocusElement". Defaulting to focusing the dialog.'),t?t.focus():(n=this.$refs.content)==null||n.$el.focus()},onResize(){this.closePopover()},onClickOutside(){if(!this.hideOnClick)return;this.popoverContentEl.querySelector(".d-popover__anchor--opened")||this.closePopover()},onKeydown(t){t.key==="Tab"&&this.modal&&this.focusTrappedTabPress(t,this.popoverContentEl),t.key==="Escape"&&this.closePopover()},async setPopoverContentAnchorWidth(){var t;await this.$nextTick(),this.popoverContentEl.style.width=`${(t=this.anchorEl)==null?void 0:t.clientWidth}px`},focusFirstElementIfNeeded(t){var o,n;this._getFocusableElements(t,!0).length!==0?this.focusFirstElement(t):this.showCloseButton?(o=this.$refs.popover__header)==null||o.focusCloseButton():(n=this.$refs.content)==null||n.$el.focus()},initTippyInstance(){var t,e;this.tip=i.n(this.anchorEl,{popperOptions:this.popperOptions(),contentElement:this.popoverContentEl,placement:this.placement,offset:this.offset,sticky:this.sticky,appendTo:this.appendTo==="body"?(e=(t=this.anchorEl)==null?void 0:t.getRootNode())==null?void 0:e.querySelector("body"):this.appendTo,interactive:!0,trigger:"manual",hideOnClick:!1,zIndex:this.modal?650:this.calculateAnchorZindex(),onClickOutside:this.onClickOutside,onShow:this.onShow})},setInTimer(){this.inTimer=setTimeout(()=>{this.isOpen=!0},i.h)},setOutTimer(){this.outTimer=setTimeout(()=>{this.isOpen=!1},i.h)},onEnterAnchor(){this.hovercard&&(this.timer?this.timer.enter(this.id):(clearTimeout(this.outTimer),this.setInTimer()))},onLeaveAnchor(){this.hovercard&&(this.timer?this.timer.leave():(clearTimeout(this.inTimer),this.setOutTimer()))},onEnterContent(){this.hovercard&&(this.timer?this.timer.enter(this.id):clearTimeout(this.outTimer))},onLeaveContent(){this.hovercard&&(this.timer?this.timer.leave():this.setOutTimer())}}};var O=function(){var e=this,o=e._self._c;return o("div",[e.modal&&e.isOpen?o("portal",[o("div",{staticClass:"d-modal--transparent",attrs:{"aria-hidden":e.modal&&e.isOpen?"false":"true"},on:{click:function(n){n.preventDefault(),n.stopPropagation()}}})]):e._e(),o(e.elementType,e._g({ref:"popover",tag:"component",class:["d-popover",{"d-popover__anchor--opened":e.isOpen}],attrs:{"data-qa":"dt-popover-container"}},e.$listeners),[o("div",{ref:"anchor",attrs:{id:!e.ariaLabelledby&&e.labelledBy,"data-qa":e.$attrs["data-qa"]?`${e.$attrs["data-qa"]}-anchor`:"dt-popover-anchor",tabindex:e.openOnContext?0:void 0},on:{"!click":function(n){return e.defaultToggleOpen.apply(null,arguments)},contextmenu:e.onContext,keydown:[function(n){return!n.type.indexOf("key")&&e._k(n.keyCode,"up",38,n.key,["Up","ArrowUp"])?null:(n.preventDefault(),e.onArrowKeyPress.apply(null,arguments))},function(n){return!n.type.indexOf("key")&&e._k(n.keyCode,"down",40,n.key,["Down","ArrowDown"])?null:(n.preventDefault(),e.onArrowKeyPress.apply(null,arguments))}],"!keydown":function(n){return!n.type.indexOf("key")&&e._k(n.keyCode,"escape",void 0,n.key,void 0)?null:e.closePopover.apply(null,arguments)},mouseenter:e.onEnterAnchor,mouseleave:e.onLeaveAnchor}},[e._t("anchor",null,{attrs:{"aria-expanded":e.isOpen.toString(),"aria-controls":e.id,"aria-haspopup":e.role}})],2),o("dt-lazy-show",e._g({ref:"content",class:["d-popover__dialog",{"d-popover__dialog--modal":e.modal},e.dialogClass],style:{"max-height":e.calculatedMaxHeight,"max-width":e.maxWidth},attrs:{id:e.id,role:e.role,"data-qa":e.$attrs["data-qa"]?`${e.$attrs["data-qa"]}__dialog`:"dt-popover","aria-hidden":`${!e.isOpen}`,"aria-labelledby":e.labelledBy,"aria-label":e.ariaLabel,"aria-modal":`${!e.modal}`,transition:e.transition,show:e.isOpen,tabindex:e.contentTabindex,appear:""},on:{mouseenter:e.onEnterContent,mouseleave:e.onLeaveContent}},e.popoverListeners),[e.$slots.headerContent||e.showCloseButton?o("popover-header-footer",{ref:"popover__header",class:e.POPOVER_HEADER_FOOTER_PADDING_CLASSES[e.padding],attrs:{"content-class":e.headerClass,type:"header","show-close-button":e.showCloseButton,"close-button-props":e.closeButtonProps},on:{close:e.closePopover},scopedSlots:e._u([{key:"content",fn:function(){return[e._t("headerContent",null,{close:e.closePopover})]},proxy:!0}],null,!0)}):e._e(),o("div",{ref:"popover__content",class:["d-popover__content",e.POPOVER_PADDING_CLASSES[e.padding],e.contentClass],attrs:{"data-qa":e.$attrs["data-qa"]?`${e.$attrs["data-qa"]}-content`:"dt-popover-content"}},[e._t("content",null,{close:e.closePopover})],2),e.$slots.footerContent?o("popover-header-footer",{ref:"popover__footer",class:e.POPOVER_HEADER_FOOTER_PADDING_CLASSES[e.padding],attrs:{type:"footer","content-class":e.footerClass},scopedSlots:e._u([{key:"content",fn:function(){return[e._t("footerContent",null,{close:e.closePopover})]},proxy:!0}],null,!0)}):e._e(),e.showVisuallyHiddenClose?o("sr-only-close-button",{attrs:{"visually-hidden-close-label":e.visuallyHiddenCloseLabel},on:{close:e.closePopover}}):e._e()],1)],1)],1)},E=[],g=l.n(_,O,E,!1,null,null,null,null);const P=g.exports;exports.POPOVER_APPEND_TO_VALUES=i.e;exports.POPOVER_CONTENT_WIDTHS=i.c;exports.POPOVER_DIRECTIONS=i.g;exports.POPOVER_HEADER_FOOTER_PADDING_CLASSES=i.a;exports.POPOVER_INITIAL_FOCUS_STRINGS=i.d;exports.POPOVER_PADDING_CLASSES=i.P;exports.POPOVER_ROLES=i.b;exports.POPOVER_STICKY_VALUES=i.f;exports.DtPopover=P;
+//# sourceMappingURL=popover.cjs.map

package/dist/lib/popover.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.cjs","sources":["../../components/popover/popover_header_footer.vue","../../components/popover/popover.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"dt-popover-header-footer\"\n    :class=\"{\n      'd-popover__header': type === 'header',\n      'd-popover__footer': type === 'footer',\n    }\"\n  >\n    <div\n      v-if=\"$slots.content\"\n      data-qa=\"dt-popover-header-footer-content\"\n      :class=\"[{\n        'd-popover__header__content': type === 'header',\n        'd-popover__footer__content': type === 'footer',\n      }, contentClass]\"\n    >\n      <!-- @slot Slot for main content -->\n      <slot name=\"content\" />\n    </div>\n    <dt-button\n      v-if=\"showCloseButton\"\n      ref=\"popover__close-button\"\n      data-qa=\"dt-popover-close\"\n      :class=\"{\n        'd-popover__header__close-button': type === 'header',\n        'd-popover__footer__close-button': type === 'footer',\n      }\"\n      importance=\"outlined\"\n      kind=\"muted\"\n      circle\n      v-bind=\"closeButtonProps\"\n      @click=\"$emit('close')\"\n    >\n      <template #icon>\n        <dt-icon\n          name=\"close\"\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n  </div>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\n\nexport default {\n  name: 'PopoverHeaderFooter',\n  components: {\n    DtButton,\n    DtIcon,\n  },\n\n  props: {\n    // eslint-disable-next-line vue/require-default-prop\n    type: {\n      type: String,\n      validator: function (value) {\n        return ['header', 'footer'].includes(value);\n      },\n    },\n\n    /**\n     * Additional class name for the content wrapper element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Determines visibility for close button\n     * @values true, false\n     */\n    showCloseButton: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * A set of props to be passed into the popover's header close button.\n     * Requires an 'ariaLabel' property.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: () => {},\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when popover is closed\n     *\n     * @event close\n     * @type { Boolean }\n     */\n    'close',\n  ],\n\n  methods: {\n    focusCloseButton () {\n      const closeButton = this.$refs['popover__close-button']?.$el;\n      closeButton?.focus();\n    },\n  },\n};\n</script>\n","<!-- eslint-disable vuejs-accessibility/mouse-events-have-key-events -->\n<template>\n  <div>\n    <portal v-if=\"modal && isOpen\">\n      <div\n        class=\"d-modal--transparent\"\n        :aria-hidden=\"modal && isOpen ? 'false' : 'true'\"\n        @click.prevent.stop\n      />\n    </portal>\n    <component\n      :is=\"elementType\"\n      ref=\"popover\"\n      :class=\"['d-popover', { 'd-popover__anchor--opened': isOpen }]\"\n      data-qa=\"dt-popover-container\"\n      v-on=\"$listeners\"\n    >\n      <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n      <div\n        :id=\"!ariaLabelledby && labelledBy\"\n        ref=\"anchor\"\n        :data-qa=\"$attrs['data-qa'] ? `${$attrs['data-qa']}-anchor` : 'dt-popover-anchor'\"\n        :tabindex=\"openOnContext ? 0 : undefined\"\n        @click.capture=\"defaultToggleOpen\"\n        @contextmenu=\"onContext\"\n        @keydown.up.prevent=\"onArrowKeyPress\"\n        @keydown.down.prevent=\"onArrowKeyPress\"\n        @keydown.escape.capture=\"closePopover\"\n        @mouseenter=\"onEnterAnchor\"\n        @mouseleave=\"onLeaveAnchor\"\n      >\n        <!-- @slot Anchor element that activates the popover. Usually a button. -->\n        <slot\n          name=\"anchor\"\n          :attrs=\"{\n            'aria-expanded': isOpen.toString(),\n            'aria-controls': id,\n            'aria-haspopup': role,\n          }\"\n        />\n      </div>\n      <dt-lazy-show\n        :id=\"id\"\n        ref=\"content\"\n        :role=\"role\"\n        :data-qa=\"$attrs['data-qa'] ? `${$attrs['data-qa']}__dialog` : 'dt-popover'\"\n        :aria-hidden=\"`${!isOpen}`\"\n        :aria-labelledby=\"labelledBy\"\n        :aria-label=\"ariaLabel\"\n        :aria-modal=\"`${!modal}`\"\n        :transition=\"transition\"\n        :show=\"isOpen\"\n        :class=\"['d-popover__dialog', { 'd-popover__dialog--modal': modal }, dialogClass]\"\n        :style=\"{\n          'max-height': calculatedMaxHeight,\n          'max-width': maxWidth,\n        }\"\n        :tabindex=\"contentTabindex\"\n        appear\n        v-on=\"popoverListeners\"\n        @mouseenter=\"onEnterContent\"\n        @mouseleave=\"onLeaveContent\"\n      >\n        <popover-header-footer\n          v-if=\"$slots.headerContent || showCloseButton\"\n          ref=\"popover__header\"\n          :class=\"POPOVER_HEADER_FOOTER_PADDING_CLASSES[padding]\"\n          :content-class=\"headerClass\"\n          type=\"header\"\n          :show-close-button=\"showCloseButton\"\n          :close-button-props=\"closeButtonProps\"\n          @close=\"closePopover\"\n        >\n          <template #content>\n            <!-- @slot Slot for popover header content -->\n            <slot\n              name=\"headerContent\"\n              :close=\"closePopover\"\n            />\n          </template>\n        </popover-header-footer>\n        <div\n          ref=\"popover__content\"\n          :data-qa=\"$attrs['data-qa'] ? `${$attrs['data-qa']}-content` : 'dt-popover-content'\"\n          :class=\"[\n            'd-popover__content',\n            POPOVER_PADDING_CLASSES[padding],\n            contentClass,\n          ]\"\n        >\n          <!-- @slot Slot for the content that is displayed in the popover when it is open. -->\n          <slot\n            name=\"content\"\n            :close=\"closePopover\"\n          />\n        </div>\n        <popover-header-footer\n          v-if=\"$slots.footerContent\"\n          ref=\"popover__footer\"\n          type=\"footer\"\n          :class=\"POPOVER_HEADER_FOOTER_PADDING_CLASSES[padding]\"\n          :content-class=\"footerClass\"\n        >\n          <template #content>\n            <!-- @slot Slot for the footer content. -->\n            <slot\n              name=\"footerContent\"\n              :close=\"closePopover\"\n            />\n          </template>\n        </popover-header-footer>\n        <sr-only-close-button\n          v-if=\"showVisuallyHiddenClose\"\n          :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n          @close=\"closePopover\"\n        />\n      </dt-lazy-show>\n    </component>\n  </div>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport {\n  POPOVER_APPEND_TO_VALUES,\n  POPOVER_CONTENT_WIDTHS,\n  POPOVER_HEADER_FOOTER_PADDING_CLASSES,\n  POPOVER_INITIAL_FOCUS_STRINGS,\n  POPOVER_PADDING_CLASSES,\n  POPOVER_ROLES,\n  POPOVER_STICKY_VALUES,\n} from './popover_constants';\nimport { getUniqueString, isOutOfViewPort } from '@/common/utils';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { Portal } from '@linusborg/vue-simple-portal';\nimport ModalMixin from '@/common/mixins/modal';\nimport { createTippy, getPopperOptions } from './tippy_utils';\nimport PopoverHeaderFooter from './popover_header_footer.vue';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\nimport { TOOLTIP_DELAY_MS } from '@/components/tooltip/index.js';\n\n/**\n * A Popover displays a content overlay when its anchor element is activated.\n * @see https://dialtone.dialpad.com/components/popover.html\n */\nexport default {\n  name: 'DtPopover',\n\n  /********************\n   * CHILD COMPONENTS *\n   ********************/\n  components: {\n    SrOnlyCloseButton,\n    DtLazyShow,\n    PopoverHeaderFooter,\n    Portal,\n  },\n\n  mixins: [ModalMixin, SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * Controls whether the popover is shown. Leaving this null will have the popover trigger on click by default.\n     * If you set this value, the default trigger behavior will be disabled, and you can control it as you need.\n     * Supports .sync modifier\n     * @values null, true, false\n     */\n    open: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Opens the popover on right click (context menu). If you set this value to `true`,\n     * the default trigger behavior will be disabled.\n     * @values true, false\n     */\n    openOnContext: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Element type (tag name) of the root element of the component.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * Named transition when the content display is toggled.\n     * @see DtLazyShow\n     */\n    transition: {\n      type: String,\n      default: 'fade',\n    },\n\n    /**\n     * ARIA role for the content of the popover. Defaults to \"dialog\".\n     * <a class=\"d-link\" href=\"https://www.w3.org/TR/wai-aria/#aria-haspopup\" target=\"_blank\">aria-haspopup</a>\n     */\n    role: {\n      type: String,\n      default: 'dialog',\n      validator: (role) => {\n        return POPOVER_ROLES.includes(role);\n      },\n    },\n\n    /**\n     * ID of the element that serves as the label for the popover content.\n     * Defaults to the \"anchor\" element; this exists to provide a different\n     * ID of the label element if, for example, the anchor slot contains\n     * other items that do not serve as a label. You should provide this\n     * or ariaLabel, but not both.\n     */\n    ariaLabelledby: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Descriptive label for the popover content. You should provide this\n     * or ariaLabelledby, but not both.\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * A set of props to be passed into the popover's header close button.\n     * Requires an 'ariaLabel' property, when the header popover is visible\n     */\n    closeButtonProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Padding size class for the popover content.\n     * @values none, small, medium, large\n     */\n    padding: {\n      type: String,\n      default: 'large',\n      validator: (padding) => {\n        return Object.keys(POPOVER_PADDING_CLASSES).some((item) => item === padding);\n      },\n    },\n\n    /**\n     * Additional class name for the content wrapper element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Width configuration for the popover content. When its value is 'anchor',\n     * the popover content will have the same width as the anchor.\n     * @values null, anchor\n     */\n    contentWidth: {\n      type: String,\n      default: '',\n      validator: contentWidth => POPOVER_CONTENT_WIDTHS.includes(contentWidth),\n    },\n\n    /**\n     * Tabindex value for the content. Passing null, no tabindex attribute will be set.\n     */\n    contentTabindex: {\n      type: Number || null,\n      default: -1,\n    },\n\n    /**\n     * External anchor id to use in those cases the anchor can't be provided via the slot.\n     * For instance, using the combobox's input as the anchor for the popover.\n     */\n    externalAnchor: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The id of the tooltip\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     *  Displaces the content box from its anchor element\n     *  by the specified number of pixels.\n     *  <a\n     *    class=\"d-link\"\n     *    href=\"https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n     *    target=\"_blank\"\n     *  >\n     *    Tippy.js docs\n     *  </a>\n     */\n    offset: {\n      type: Array,\n      default: () => [0, 4],\n    },\n\n    /**\n     * Determines if the popover hides upon clicking the\n     * anchor or outside the content box.\n     * @values true, false\n     */\n    hideOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Determines modal state. If enabled popover has a modal overlay\n     * preventing interaction with elements below it, but it is invisible.\n     * @values true, false\n     */\n    modal: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * If the popover does not fit in the direction described by \"placement\",\n     * it will attempt to change its direction to the \"fallbackPlacements\".\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements\"\n     *   target=\"_blank\"\n     * >\n     *   Popper.js docs\n     * </a>\n     * */\n    fallbackPlacements: {\n      type: Array,\n      default: () => {\n        return ['auto'];\n      },\n    },\n\n    /**\n     * The direction the popover displays relative to the anchor.\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://atomiks.github.io/tippyjs/v6/all-props/#placement\"\n     *   target=\"_blank\"\n     * >\n     *   Tippy.js docs\n     * </a>\n     * @values top, top-start, top-end,\n     * right, right-start, right-end,\n     * left, left-start, left-end,\n     * bottom, bottom-start, bottom-end,\n     * auto, auto-start, auto-end\n     */\n    placement: {\n      type: String,\n      default: 'bottom-end',\n    },\n\n    /**\n     * If set to false the dialog will display over top of the anchor when there is insufficient space.\n     * If set to true it will never move from its position relative to the anchor and will clip instead.\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://popper.js.org/docs/v2/modifiers/prevent-overflow/#tether\"\n     *   target=\"_blank\"\n     * >\n     *   Popper.js docs\n     * </a>\n     * @values true, false\n     */\n    tether: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * If the popover sticks to the anchor. This is usually not needed, but can be needed\n     * if the reference element's position is animating, or to automatically update the popover\n     * position in those cases the DOM layout changes the reference element's position.\n     * `true` enables it, `reference` only checks the \"reference\" rect for changes and `popper` only\n     * checks the \"popper\" rect for changes.\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://atomiks.github.io/tippyjs/v6/all-props/#sticky\"\n     *   target=\"_blank\"\n     * >\n     *   Tippy.js docs\n     * </a>\n     * @values true, false, reference, popper\n     */\n    sticky: {\n      type: [Boolean, String],\n      default: false,\n      validator: (sticky) => {\n        return POPOVER_STICKY_VALUES.includes(sticky);\n      },\n    },\n\n    /**\n     * Determines maximum height for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    maxHeight: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines maximum width for the popover before overflow.\n     * Possible units rem|px|%|em\n     */\n    maxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines visibility for close button\n     * @values true, false\n     */\n    showCloseButton: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Additional class name for the header content wrapper element.\n     */\n    headerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the footer content wrapper element.\n     */\n    footerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the dialog element.\n     */\n    dialogClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * The element that is focused when the popover is opened. This can be an\n     * HTMLElement within the popover, 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     * @values none, dialog, first\n     */\n    initialFocusElement: {\n      type: [String, HTMLElement],\n      default: 'first',\n      validator: initialFocusElement => {\n        return POPOVER_INITIAL_FOCUS_STRINGS.includes(initialFocusElement) ||\n          (initialFocusElement instanceof HTMLElement) ||\n          initialFocusElement.startsWith('#');\n      },\n    },\n\n    /**\n     * If the popover should open pressing up or down arrow key on the anchor element.\n     * This can be set when not passing open prop.\n     * @values true, false\n     */\n    openWithArrowKeys: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Sets the element to which the popover is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * @values 'body', 'parent', HTMLElement,\n     */\n    appendTo: {\n      type: [HTMLElement, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * Set this prop to true and popover component will support hovercard behaviour\n     * It will open on mouseenter and close on mouseleave with timer delay of 300ms\n     */\n    hovercard: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The timer is used only when the hovercard prop is true.\n     * It defines the delays when opening several hovercards.\n     * It must have the keys: enter, leave and current.\n     * If null, the default delay of 300ms will be used.\n     */\n    timer: {\n      type: [Object, null],\n      default: null,\n      validator: timer => {\n        return timer === null || (timer.enter && timer.leave && Object.keys(timer).includes('current'));\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when popover is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean | Array}\n     */\n    'opened',\n\n    /**\n     * Emitted to sync value with parent\n     *\n     * @event update:opened\n     * @type {Boolean | Array}\n     */\n    'update:open',\n  ],\n\n  data () {\n    return {\n      POPOVER_PADDING_CLASSES,\n      POPOVER_HEADER_FOOTER_PADDING_CLASSES,\n      intersectionObserver: null,\n      isOutsideViewport: false,\n      isOpen: false,\n      anchorEl: null,\n      popoverContentEl: null,\n      inTimer: null,\n      outTimer: null,\n    };\n  },\n\n  computed: {\n    popoverListeners () {\n      return {\n        ...this.$listeners,\n\n        keydown: event => {\n          this.onKeydown(event);\n          this.$emit('keydown', event);\n        },\n\n        'after-leave': event => {\n          this.onLeaveTransitionComplete();\n        },\n\n        'after-enter': event => {\n          this.onEnterTransitionComplete();\n        },\n      };\n    },\n\n    calculatedMaxHeight () {\n      if (this.isOutsideViewport && this.modal) {\n        return `calc(100vh - var(--dt-space-300))`;\n      }\n      return this.maxHeight;\n    },\n\n    labelledBy () {\n      // aria-labelledby should be set only if aria-labelledby is passed as a prop, or if\n      // there is no aria-label and the labelledby should point to the anchor.\n      return this.ariaLabelledby || (!this.ariaLabel && getUniqueString('DtPopover__anchor'));\n    },\n\n    currentHovercard () {\n      return this.timer?.current.value;\n    },\n  },\n\n  watch: {\n    $props: {\n      immediate: true,\n      deep: true,\n      handler () {\n        this.validateProps();\n      },\n    },\n\n    modal (modal) {\n      this.tip?.setProps({\n        zIndex: modal ? 650 : this.calculateAnchorZindex(),\n      });\n    },\n\n    offset (offset) {\n      this.tip?.setProps({\n        offset,\n      });\n    },\n\n    sticky (sticky) {\n      this.tip?.setProps({\n        sticky,\n      });\n    },\n\n    fallbackPlacements () {\n      this.tip?.setProps({\n        popperOptions: this.popperOptions(),\n      });\n    },\n\n    tether () {\n      this.tip?.setProps({\n        popperOptions: this.popperOptions(),\n      });\n    },\n\n    placement (placement) {\n      this.tip?.setProps({\n        placement,\n      });\n    },\n\n    open: {\n      handler: function (open) {\n        if (open !== null) {\n          this.isOpen = open;\n        }\n      },\n\n      immediate: true,\n    },\n\n    isOpen (isOpen, isPrev) {\n      if (isOpen) {\n        this.initTippyInstance();\n        this.tip.show();\n      } else if (!isOpen && isPrev !== isOpen) {\n        this.removeEventListeners();\n        this.tip.hide();\n      }\n    },\n\n    currentHovercard () {\n      if (this.hovercard && this.timer) {\n        if (this.currentHovercard === this.id) {\n          this.isOpen = true;\n        } else {\n          this.isOpen = false;\n        }\n      }\n    },\n  },\n\n  mounted () {\n    const externalAnchorEl = this.externalAnchor\n      ? this.$refs.anchor.getRootNode().querySelector(`#${this.externalAnchor}`)\n      : null;\n    this.anchorEl = externalAnchorEl ?? this.$refs.anchor.children[0];\n    this.popoverContentEl = this.$refs.content?.$el;\n\n    if (this.isOpen) {\n      this.initTippyInstance();\n      this.tip.show();\n    }\n\n    // rootMargin here must be greater than the margin of the height we are setting in calculatedMaxHeight which\n    // currently is var(--dt-space-300) (4px). If not the intersectionObserver will continually trigger in an infinite\n    // loop.\n    // threshold 1.0 makes this trigger every time the dialog \"touches\" the edge of the viewport.\n    this.intersectionObserver = new IntersectionObserver(this.hasIntersectedViewport);\n    this.intersectionObserver.observe(this.popoverContentEl);\n  },\n\n  beforeDestroy () {\n    this.tip?.destroy();\n    this.intersectionObserver.disconnect();\n    this.removeReferences();\n    this.removeEventListeners();\n  },\n\n  /******************\n   *     METHODS    *\n   ******************/\n  methods: {\n\n    hasIntersectedViewport (entries) {\n      const dialog = entries?.[0]?.target;\n      if (!dialog) return;\n      const isOut = isOutOfViewPort(dialog);\n      this.isOutsideViewport = isOut.bottom || isOut.top;\n    },\n\n    popperOptions () {\n      return getPopperOptions({\n        fallbackPlacements: this.fallbackPlacements,\n        tether: this.tether,\n        hasHideModifierEnabled: true,\n      });\n    },\n\n    validateProps () {\n      if (this.modal && this.initialFocusElement === 'none') {\n        console.error('If the popover is modal you must set the ' +\n        'initialFocusElement prop. Possible values: \"dialog\", \"first\", HTMLElement');\n      }\n    },\n\n    calculateAnchorZindex () {\n      // if a modal is currently active render at modal-element z-index, otherwise at popover z-index\n      if (this.$el.getRootNode()\n        .querySelector('.d-modal[aria-hidden=\"false\"], .d-modal--transparent[aria-hidden=\"false\"]') ||\n        // Special case because we don't have any dialtone drawer component yet. Render at 650 when\n        // anchor of popover is within a drawer.\n        this.anchorEl?.closest('.d-zi-drawer')) {\n        return 650;\n      } else {\n        return 300;\n      }\n    },\n\n    defaultToggleOpen (e) {\n      if (this.hovercard) { return; }\n      if (this.openOnContext) { return; }\n\n      // Only use default toggle behaviour if the user has not set the open prop.\n      // Check that the anchor element specifically was clicked.\n      this.open ?? (this.anchorEl?.contains(e.target) && !this.anchorEl?.disabled && this.toggleOpen());\n    },\n\n    async onContext (event) {\n      if (!this.openOnContext) { return; }\n\n      event.preventDefault();\n\n      this.isOpen = true;\n      await this.$nextTick();\n      this.tip.setProps({\n        placement: 'right-start',\n        getReferenceClientRect: () => ({\n          width: 0,\n          height: 0,\n          top: event.clientY,\n          bottom: event.clientY,\n          left: event.clientX,\n          right: event.clientX,\n        }),\n      });\n    },\n\n    toggleOpen () {\n      this.isOpen = !this.isOpen;\n    },\n\n    onArrowKeyPress (e) {\n      if (this.open !== null) { return; }\n\n      if (this.openWithArrowKeys && this.anchorEl?.contains(e.target)) {\n        if (!this.isOpen) {\n          this.isOpen = true;\n        }\n      }\n    },\n\n    addEventListeners () {\n      window.addEventListener('dt-popover-close', this.closePopover);\n      // align popover content width when contentWidth is 'anchor'\n      if (this.contentWidth === 'anchor') {\n        window.addEventListener('resize', this.onResize);\n      }\n    },\n\n    removeEventListeners () {\n      window.removeEventListener('dt-popover-close', this.closePopover);\n      if (this.contentWidth === 'anchor') {\n        window.removeEventListener('resize', this.onResize);\n      }\n    },\n\n    closePopover () {\n      this.isOpen = false;\n    },\n\n    /*\n    * Prevents scrolling outside of the currently opened modal popover by:\n    *   - when anchor is not within another popover: setting the body to overflow: hidden\n    *   - when anchor is within another popover: set the popover dialog container to it's non-modal z-index\n    *     since it is no longer the active modal. This puts it underneath the overlay and prevents scrolling.\n    **/\n    preventScrolling () {\n      if (this.modal) {\n        const element = this.anchorEl?.closest('body, .tippy-box');\n        if (!element) return;\n        if (element.tagName?.toLowerCase() === 'body') {\n          element.classList.add('d-of-hidden');\n          this.tip.setProps({ offset: this.offset });\n        } else {\n          element.classList.add('d-zi-popover');\n        }\n      }\n    },\n\n    /*\n    * Resets the prevent scrolling properties set in preventScrolling() back to normal.\n    **/\n    enableScrolling () {\n      const element = this.anchorEl?.closest('body, .tippy-box');\n      if (!element) return;\n      if (element.tagName?.toLowerCase() === 'body') {\n        element.classList.remove('d-of-hidden');\n        this.tip.setProps({ offset: this.offset });\n      } else {\n        element.classList.remove('d-zi-popover');\n      }\n    },\n\n    removeReferences () {\n      this.anchorEl = null;\n      this.popoverContentEl = null;\n      this.tip = null;\n    },\n\n    async onShow () {\n      if (this.contentWidth === 'anchor') {\n        await this.setPopoverContentAnchorWidth();\n      }\n\n      if (this.contentWidth === null) {\n        this.popoverContentEl.style.width = 'auto';\n      }\n\n      this.addEventListeners();\n    },\n\n    async onLeaveTransitionComplete () {\n      if (this.modal) {\n        await this.focusFirstElement(this.$refs.anchor);\n        // await next tick in case the user wants to change focus themselves.\n        await this.$nextTick();\n        this.enableScrolling();\n      }\n      this.tip?.unmount();\n      this.$emit('opened', false);\n      if (this.open !== null) {\n        this.$emit('update:open', false);\n      }\n    },\n\n    async onEnterTransitionComplete () {\n      this.focusInitialElement();\n      // await next tick in case the user wants to change focus themselves.\n      await this.$nextTick();\n      this.preventScrolling();\n      this.$emit('opened', true, this.$refs.popover__content);\n      if (this.open !== null) {\n        this.$emit('update:open', true);\n      }\n    },\n\n    focusInitialElement () {\n      if (this.initialFocusElement === 'dialog') {\n        this.$refs.content?.$el?.focus();\n      }\n      // find by ID\n      if (this.initialFocusElement.startsWith('#')) {\n        this.focusInitialElementById();\n      }\n      if (this.initialFocusElement === 'first') {\n        this.focusFirstElementIfNeeded(this.$refs.popover__content);\n      }\n      if (this.initialFocusElement instanceof HTMLElement) {\n        this.initialFocusElement.focus();\n      }\n    },\n\n    focusInitialElementById () {\n      const result = this.$refs.content?.$el?.querySelector(this.initialFocusElement);\n      if (result) {\n        result.focus();\n      } else {\n        console.warn('Could not find the element specified in dt-popover prop \"initialFocusElement\". ' +\n          'Defaulting to focusing the dialog.');\n      }\n      result ? result.focus() : this.$refs.content?.$el.focus();\n    },\n\n    onResize () {\n      this.closePopover();\n    },\n\n    onClickOutside () {\n      if (!this.hideOnClick) return;\n      // If a popover is opened inside of this one, do not hide on click out\n      const innerModals = this.popoverContentEl.querySelector('.d-popover__anchor--opened');\n      if (!innerModals) {\n        this.closePopover();\n      }\n    },\n\n    onKeydown (e) {\n      if (e.key === 'Tab') {\n        if (this.modal) {\n          this.focusTrappedTabPress(e, this.popoverContentEl);\n        }\n      }\n      if (e.key === 'Escape') {\n        this.closePopover();\n      }\n    },\n\n    async setPopoverContentAnchorWidth () {\n      await this.$nextTick();\n      this.popoverContentEl.style.width = `${this.anchorEl?.clientWidth}px`;\n    },\n\n    focusFirstElementIfNeeded (domEl) {\n      const focusableElements = this._getFocusableElements(domEl, true);\n      if (focusableElements.length !== 0) {\n        this.focusFirstElement(domEl);\n      } else if (this.showCloseButton) {\n        this.$refs.popover__header?.focusCloseButton();\n      } else {\n        // if there are no focusable elements at all focus the dialog itself\n        this.$refs.content?.$el.focus();\n      }\n    },\n\n    initTippyInstance () {\n      this.tip = createTippy(this.anchorEl, {\n        popperOptions: this.popperOptions(),\n        contentElement: this.popoverContentEl,\n        placement: this.placement,\n        offset: this.offset,\n        sticky: this.sticky,\n        appendTo: this.appendTo === 'body' ? this.anchorEl?.getRootNode()?.querySelector('body') : this.appendTo,\n        interactive: true,\n        trigger: 'manual',\n        // We have to manage hideOnClick functionality manually to handle\n        // popover within popover situations.\n        hideOnClick: false,\n        zIndex: this.modal ? 650 : this.calculateAnchorZindex(),\n        onClickOutside: this.onClickOutside,\n        onShow: this.onShow,\n      });\n    },\n\n    //  ============================================================================\n    //  $ HOVERCARD\n    //  ----------------------------------------------------------------------------\n\n    setInTimer () {\n      this.inTimer = setTimeout(() => {\n        this.isOpen = true;\n      }, TOOLTIP_DELAY_MS);\n    },\n\n    setOutTimer () {\n      this.outTimer = setTimeout(() => {\n        this.isOpen = false;\n      }, TOOLTIP_DELAY_MS);\n    },\n\n    onEnterAnchor () {\n      if (!this.hovercard) return;\n      if (this.timer) this.timer.enter(this.id);\n      else {\n        clearTimeout(this.outTimer);\n        this.setInTimer();\n      }\n    },\n\n    onLeaveAnchor () {\n      if (!this.hovercard) return;\n      if (this.timer) this.timer.leave();\n      else {\n        clearTimeout(this.inTimer);\n        this.setOutTimer();\n      }\n    },\n\n    onEnterContent () {\n      if (!this.hovercard) return;\n      if (this.timer) this.timer.enter(this.id);\n      else clearTimeout(this.outTimer);\n    },\n\n    onLeaveContent () {\n      if (!this.hovercard) return;\n      if (this.timer) this.timer.leave();\n      else this.setOutTimer();\n    },\n\n    //  ============================================================================\n    //  $ HOVERCARD\n    //  ----------------------------------------------------------------------------\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtIcon","value","closeButton","_a","SrOnlyCloseButton","DtLazyShow","PopoverHeaderFooter","Portal","ModalMixin","SrOnlyCloseButtonMixin","role","POPOVER_ROLES","padding","POPOVER_PADDING_CLASSES","item","contentWidth","POPOVER_CONTENT_WIDTHS","getUniqueString","sticky","POPOVER_STICKY_VALUES","initialFocusElement","POPOVER_INITIAL_FOCUS_STRINGS","appendTo","POPOVER_APPEND_TO_VALUES","timer","POPOVER_HEADER_FOOTER_PADDING_CLASSES","event","modal","offset","placement","open","isOpen","isPrev","externalAnchorEl","entries","dialog","isOut","isOutOfViewPort","getPopperOptions","e","_b","element","result","_c","domEl","createTippy","TOOLTIP_DELAY_MS"],"mappings":"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"}

package/dist/lib/popover.js

@@ -1,5 +1,5 @@
 import { b as l, P as s, c as p, f as d, d as c, e as h, a as u, l as f, n as m, h as i } from "../chunks/popover_constants-qjlEkroB.js";
-import { g as Q } from "../chunks/popover_constants-qjlEkroB.js";
+import { g as J } from "../chunks/popover_constants-qjlEkroB.js";
 import { getUniqueString as r, isOutOfViewPort as v } from "./utils.js";
 import { Portal as y } from "@linusborg/vue-simple-portal";
 import { M as _ } from "../chunks/modal-VuMFkZFH.js";
@@ -15,7 +15,6 @@ import "../chunks/link_constants-vIUB92L4.js";
 import "@dialpad/dialtone-icons/vue2";
 import "../chunks/icon_constants-OpYAAKwF.js";
 import "@dialpad/dialtone-icons/icons.json";
-import "./skeleton.js";
 const C = {
   name: "PopoverHeaderFooter",
   components: {
@@ -764,12 +763,12 @@ var k = function() {
   null,
   null
 );
-const Z = $.exports;
+const Y = $.exports;
 export {
-  Z as DtPopover,
+  Y as DtPopover,
   h as POPOVER_APPEND_TO_VALUES,
   p as POPOVER_CONTENT_WIDTHS,
-  Q as POPOVER_DIRECTIONS,
+  J as POPOVER_DIRECTIONS,
   u as POPOVER_HEADER_FOOTER_PADDING_CLASSES,
   c as POPOVER_INITIAL_FOCUS_STRINGS,
   s as POPOVER_PADDING_CLASSES,