@dialpad/dialtone-vue 2.202.0-next.1 → 2.203.0

package/dist/dialtone-vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialtone-vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"dialtone-vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/hovercard/hovercard.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("../../common/utils/index.cjs"),i=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),o=require("../tooltip/tooltip-constants.cjs"),l=require("../popover/popover.cjs"),a=require("../popover/popover-constants.cjs"),u={name:"DtHovercard",components:{DtPopover:l.default},props:{open:{type:Boolean,default:null},transition:{type:Boolean,default:!1},fallbackPlacements:{type:Array,default:()=>["auto"]},placement:{type:String,default:"top-start",validator(t){return o.TOOLTIP_DIRECTIONS.includes(t)}},padding:{type:String,default:"large",validator:t=>Object.keys(a.POPOVER_PADDING_CLASSES).some(e=>e===t)},offset:{type:Array,default:()=>[0,16]},id:{type:String,default(){return s.getUniqueString()}},headerClass:{type:[String,Array,Object],default:""},footerClass:{type:[String,Array,Object],default:""},dialogClass:{type:[String,Array,Object],default:""},contentClass:{type:[String,Array,Object],default:""},appendTo:{type:[HTMLElement,String],default:"body",validator:t=>a.POPOVER_APPEND_TO_VALUES.includes(t)||t instanceof HTMLElement},enterDelay:{type:Number,default:o.TOOLTIP_DELAY_MS},leaveDelay:{type:Number,default:o.TOOLTIP_DELAY_MS}},emits:["opened"],data(){return{hovercardOpen:this.open,anchorEl:null,observer:null,inTimer:null,outTimer:null}},watch:{open:{handler:function(t){this.hovercardOpen=t},immediate:!0}},mounted(){this.$nextTick(()=>{var t,e,r;this.anchorEl=(r=(e=(t=this.$refs.popover)==null?void 0:t.$refs)==null?void 0:e.anchor)==null?void 0:r.firstElementChild,this.observer=new MutationObserver(()=>{this.anchorEl&&!this.anchorEl.isConnected&&(this.hovercardOpen=!1)}),this.observer.observe(document.body,{childList:!0,subtree:!0})})},beforeDestroy(){this.observer&&this.observer.disconnect(),clearTimeout(this.inTimer),clearTimeout(this.outTimer)},methods:{setInTimer(){this.inTimer=setTimeout(()=>{this.hovercardOpen=!0},this.enterDelay)},setOutTimer(){this.outTimer=setTimeout(()=>{this.hovercardOpen=!1},this.leaveDelay)},onMouseEnter(){this.open===null&&(clearTimeout(this.outTimer),this.setInTimer())},onMouseLeave(){this.open===null&&(clearTimeout(this.inTimer),this.setOutTimer())}}};var c=function(){var e=this,r=e._self._c;return r("dt-popover",{ref:"popover",attrs:{id:e.id,open:e.hovercardOpen,placement:e.placement,"content-class":e.contentClass,"dialog-class":e.dialogClass,"fallback-placements":e.fallbackPlacements,padding:e.padding,transition:e.transition?"fade":null,offset:e.offset,modal:!1,"initial-focus-element":"none","header-class":e.headerClass,"footer-class":e.footerClass,"append-to":e.appendTo,"data-qa":"dt-hovercard","enter-delay":e.enterDelay,"leave-delay":e.leaveDelay},on:{opened:n=>e.$emit("opened",n),"mouseenter-popover":e.onMouseEnter,"mouseleave-popover":e.onMouseLeave,"mouseenter-popover-anchor":e.onMouseEnter,"mouseleave-popover-anchor":e.onMouseLeave},scopedSlots:e._u([{key:"anchor",fn:function({attrs:n}){return[e._t("anchor",null,null,n)]}},{key:"content",fn:function(){return[e._t("content")]},proxy:!0},{key:"headerContent",fn:function(){return[e._t("headerContent")]},proxy:!0},{key:"footerContent",fn:function(){return[e._t("footerContent")]},proxy:!0}],null,!0)})},d=[],p=i.n(u,c,d);const f=p.exports;exports.default=f;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("../../common/utils/index.cjs"),i=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),r=require("../tooltip/tooltip-constants.cjs"),l=require("../popover/popover.cjs"),s=require("../popover/popover-constants.cjs"),u={name:"DtHovercard",components:{DtPopover:l.default},props:{open:{type:Boolean,default:null},transition:{type:Boolean,default:!1},fallbackPlacements:{type:Array,default:()=>["auto"]},placement:{type:String,default:"top-start",validator(t){return r.TOOLTIP_DIRECTIONS.includes(t)}},padding:{type:String,default:"large",validator:t=>Object.keys(s.POPOVER_PADDING_CLASSES).some(e=>e===t)},offset:{type:Array,default:()=>[0,16]},id:{type:String,default(){return a.getUniqueString()}},headerClass:{type:[String,Array,Object],default:""},footerClass:{type:[String,Array,Object],default:""},dialogClass:{type:[String,Array,Object],default:""},contentClass:{type:[String,Array,Object],default:""},appendTo:{type:[HTMLElement,String],default:"body",validator:t=>s.POPOVER_APPEND_TO_VALUES.includes(t)||t instanceof HTMLElement},enterDelay:{type:Number,default:r.TOOLTIP_DELAY_MS},leaveDelay:{type:Number,default:r.TOOLTIP_DELAY_MS}},emits:["opened"],data(){return{hovercardOpen:this.open,anchorEl:null,observer:null,inTimer:null,outTimer:null,contentFocused:!1,mouseOverHovercard:!1}},watch:{open:{handler:function(t){this.hovercardOpen=t},immediate:!0}},mounted(){this.$nextTick(()=>{var t,e,o;this.anchorEl=(o=(e=(t=this.$refs.popover)==null?void 0:t.$refs)==null?void 0:e.anchor)==null?void 0:o.firstElementChild,this.observer=new MutationObserver(()=>{this.anchorEl&&!this.anchorEl.isConnected&&(this.hovercardOpen=!1)}),this.observer.observe(document.body,{childList:!0,subtree:!0})})},beforeDestroy(){this.observer&&this.observer.disconnect(),clearTimeout(this.inTimer),clearTimeout(this.outTimer)},methods:{setInTimer(){this.open===null&&(clearTimeout(this.outTimer),this.inTimer=setTimeout(()=>{this.hovercardOpen=!0},this.enterDelay))},setOutTimer(){this.open===null&&(clearTimeout(this.inTimer),this.outTimer=setTimeout(()=>{this.hovercardOpen=!1},this.leaveDelay))},onMouseEnter(){this.mouseOverHovercard=!0,this.setInTimer()},onMouseLeave(){this.mouseOverHovercard=!1,!this.contentFocused&&this.open===null&&(clearTimeout(this.inTimer),this.setOutTimer())},onContentFocusIn(){this.contentFocused=!0,this.setInTimer()},onContentFocusOut(){this.contentFocused=!1,this.mouseOverHovercard||this.setOutTimer()}}};var c=function(){var e=this,o=e._self._c;return o("dt-popover",{ref:"popover",attrs:{id:e.id,open:e.hovercardOpen,placement:e.placement,"content-class":e.contentClass,"dialog-class":e.dialogClass,"fallback-placements":e.fallbackPlacements,padding:e.padding,transition:e.transition?"fade":null,offset:e.offset,modal:!1,"initial-focus-element":"none","header-class":e.headerClass,"footer-class":e.footerClass,"append-to":e.appendTo,"data-qa":"dt-hovercard","enter-delay":e.enterDelay,"leave-delay":e.leaveDelay},on:{opened:n=>e.$emit("opened",n),"mouseenter-popover":e.onMouseEnter,"mouseleave-popover":e.onMouseLeave,"mouseenter-popover-anchor":e.onMouseEnter,"mouseleave-popover-anchor":e.onMouseLeave},scopedSlots:e._u([{key:"anchor",fn:function({attrs:n}){return[e._t("anchor",null,null,n)]}},{key:"content",fn:function(){return[o("div",{on:{focusin:e.onContentFocusIn,focusout:e.onContentFocusOut}},[e._t("content")],2)]},proxy:!0},{key:"headerContent",fn:function(){return[e._t("headerContent")]},proxy:!0},{key:"footerContent",fn:function(){return[e._t("footerContent")]},proxy:!0}],null,!0)})},d=[],p=i.n(u,c,d);const f=p.exports;exports.default=f;
 //# sourceMappingURL=hovercard.cjs.map

package/dist/lib/hovercard/hovercard.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"hovercard.cjs","sources":["../../../components/hovercard/hovercard.vue"],"sourcesContent":["<template>\n  <dt-popover\n    :id=\"id\"\n    ref=\"popover\"\n    :open=\"hovercardOpen\"\n    :placement=\"placement\"\n    :content-class=\"contentClass\"\n    :dialog-class=\"dialogClass\"\n    :fallback-placements=\"fallbackPlacements\"\n    :padding=\"padding\"\n    :transition=\"transition ? 'fade' : null\"\n    :offset=\"offset\"\n    :modal=\"false\"\n    initial-focus-element=\"none\"\n    :header-class=\"headerClass\"\n    :footer-class=\"footerClass\"\n    :append-to=\"appendTo\"\n    data-qa=\"dt-hovercard\"\n    :enter-delay=\"enterDelay\"\n    :leave-delay=\"leaveDelay\"\n    @opened=\"(e) => ($emit('opened', e))\"\n    @mouseenter-popover=\"onMouseEnter\"\n    @mouseleave-popover=\"onMouseLeave\"\n    @mouseenter-popover-anchor=\"onMouseEnter\"\n    @mouseleave-popover-anchor=\"onMouseLeave\"\n  >\n    <template #anchor=\"{ attrs }\">\n      <slot\n        name=\"anchor\"\n        v-bind=\"attrs\"\n      />\n    </template>\n    <template #content>\n      <slot name=\"content\" />\n    </template>\n    <template #headerContent>\n      <slot name=\"headerContent\" />\n    </template>\n\n    <template #footerContent>\n      <slot name=\"footerContent\" />\n    </template>\n  </dt-popover>\n</template>\n\n<script>\nimport { POPOVER_APPEND_TO_VALUES, POPOVER_PADDING_CLASSES, DtPopover } from '@/components/popover/index.js';\nimport { TOOLTIP_DIRECTIONS, TOOLTIP_DELAY_MS } from '@/components/tooltip/index.js';\nimport { getUniqueString } from '@/common/utils';\n\nexport default {\n  name: 'DtHovercard',\n\n  components: {\n    DtPopover,\n  },\n\n  props: {\n  /**\n     * Controls whether the hovercard is shown. Leaving this null will have the hovercard trigger on hover 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   * Fade transition when the content display is toggled.\n   * @type boolean\n   * @values true, false\n   */\n    transition: {\n      type: Boolean,\n      default: false,\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     * @see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements\"\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   * @see https://atomiks.github.io/tippyjs/v6/all-props/#placement\"\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: 'top-start',\n      validator (placement) {\n        return TOOLTIP_DIRECTIONS.includes(placement);\n      },\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     * Displaces the content box from its anchor element\n     * by the specified number of pixels.\n     * @see https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n     */\n    offset: {\n      type: Array,\n      default: () => [0, 16],\n    },\n\n    /**\n   * The id of the tooltip\n   */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\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     * Additional class name for the content wrapper element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\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     * The enter delay in milliseconds before the hovercard is shown.\n     * @type number\n     */\n    enterDelay: {\n      type: Number,\n      default: TOOLTIP_DELAY_MS,\n    },\n\n    /**\n     * The leave delay in milliseconds before the hovercard is hidden.\n     * @type number\n     */\n    leaveDelay: {\n      type: Number,\n      default: TOOLTIP_DELAY_MS,\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  data () {\n    return {\n      hovercardOpen: this.open,\n      anchorEl: null,\n      observer: null,\n      inTimer: null,\n      outTimer: null,\n    };\n  },\n\n  watch: {\n    open: {\n      handler: function (open) {\n        this.hovercardOpen = open;\n      },\n\n      immediate: true,\n    },\n  },\n\n  mounted () {\n    this.$nextTick(() => {\n      this.anchorEl = this.$refs.popover?.$refs?.anchor?.firstElementChild;\n\n      this.observer = new MutationObserver(() => {\n        if (this.anchorEl && !this.anchorEl.isConnected) {\n          // If the anchor element is removed from the DOM, close the hovercard\n          this.hovercardOpen = false;\n        }\n      });\n\n      this.observer.observe(document.body, {\n        childList: true,\n        subtree: true,\n      });\n    });\n  },\n\n  beforeDestroy () {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n\n    clearTimeout(this.inTimer);\n    clearTimeout(this.outTimer);\n  },\n\n  methods: {\n    setInTimer () {\n      this.inTimer = setTimeout(() => {\n        this.hovercardOpen = true;\n      }, this.enterDelay);\n    },\n\n    setOutTimer () {\n      this.outTimer = setTimeout(() => {\n        this.hovercardOpen = false;\n      }, this.leaveDelay);\n    },\n\n    onMouseEnter () {\n      if (this.open === null) {\n        clearTimeout(this.outTimer);\n        this.setInTimer();\n      }\n    },\n\n    onMouseLeave () {\n      if (this.open === null) {\n        clearTimeout(this.inTimer);\n        this.setOutTimer();\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtPopover","placement","TOOLTIP_DIRECTIONS","padding","POPOVER_PADDING_CLASSES","item","getUniqueString","appendTo","POPOVER_APPEND_TO_VALUES","TOOLTIP_DELAY_MS","open","_c","_b","_a"],"mappings":"oVAkDAA,EAAA,CACA,KAAA,cAEA,WAAA,CACA,UAAAC,EAAAA,OACA,EAEA,MAAA,CAOA,KAAA,CACA,KAAA,QACA,QAAA,IACA,EAOA,WAAA,CACA,KAAA,QACA,QAAA,EACA,EAOA,mBAAA,CACA,KAAA,MACA,QAAA,IACA,CAAA,MAAA,CAEA,EAWA,UAAA,CACA,KAAA,OACA,QAAA,YACA,UAAAC,EAAA,CACA,OAAAC,EAAAA,mBAAA,SAAAD,CAAA,CACA,CACA,EAMA,QAAA,CACA,KAAA,OACA,QAAA,QACA,UAAAE,GACA,OAAA,KAAAC,yBAAA,EAAA,KAAAC,GAAAA,IAAAF,CAAA,CAEA,EAOA,OAAA,CACA,KAAA,MACA,QAAA,IAAA,CAAA,EAAA,EAAA,CACA,EAKA,GAAA,CACA,KAAA,OACA,SAAA,CAAA,OAAAG,EAAAA,gBAAA,CAAA,CACA,EAKA,YAAA,CACA,KAAA,CAAA,OAAA,MAAA,MAAA,EACA,QAAA,EACA,EAKA,YAAA,CACA,KAAA,CAAA,OAAA,MAAA,MAAA,EACA,QAAA,EACA,EAKA,YAAA,CACA,KAAA,CAAA,OAAA,MAAA,MAAA,EACA,QAAA,EACA,EAKA,aAAA,CACA,KAAA,CAAA,OAAA,MAAA,MAAA,EACA,QAAA,EACA,EAOA,SAAA,CACA,KAAA,CAAA,YAAA,MAAA,EACA,QAAA,OACA,UAAAC,GACAC,EAAAA,yBAAA,SAAAD,CAAA,GACAA,aAAA,WAEA,EAMA,WAAA,CACA,KAAA,OACA,QAAAE,EAAAA,gBACA,EAMA,WAAA,CACA,KAAA,OACA,QAAAA,EAAAA,gBACA,CACA,EAEA,MAAA,CAOA,QACA,EAEA,MAAA,CACA,MAAA,CACA,cAAA,KAAA,KACA,SAAA,KACA,SAAA,KACA,QAAA,KACA,SAAA,IACA,CACA,EAEA,MAAA,CACA,KAAA,CACA,QAAA,SAAAC,EAAA,CACA,KAAA,cAAAA,CACA,EAEA,UAAA,EACA,CACA,EAEA,SAAA,CACA,KAAA,UAAA,IAAA,WACA,KAAA,UAAAC,GAAAC,GAAAC,EAAA,KAAA,MAAA,UAAA,YAAAA,EAAA,QAAA,YAAAD,EAAA,SAAA,YAAAD,EAAA,kBAEA,KAAA,SAAA,IAAA,iBAAA,IAAA,CACA,KAAA,UAAA,CAAA,KAAA,SAAA,cAEA,KAAA,cAAA,GAEA,CAAA,EAEA,KAAA,SAAA,QAAA,SAAA,KAAA,CACA,UAAA,GACA,QAAA,EACA,CAAA,CACA,CAAA,CACA,EAEA,eAAA,CACA,KAAA,UACA,KAAA,SAAA,WAAA,EAGA,aAAA,KAAA,OAAA,EACA,aAAA,KAAA,QAAA,CACA,EAEA,QAAA,CACA,YAAA,CACA,KAAA,QAAA,WAAA,IAAA,CACA,KAAA,cAAA,EACA,EAAA,KAAA,UAAA,CACA,EAEA,aAAA,CACA,KAAA,SAAA,WAAA,IAAA,CACA,KAAA,cAAA,EACA,EAAA,KAAA,UAAA,CACA,EAEA,cAAA,CACA,KAAA,OAAA,OACA,aAAA,KAAA,QAAA,EACA,KAAA,WAAA,EAEA,EAEA,cAAA,CACA,KAAA,OAAA,OACA,aAAA,KAAA,OAAA,EACA,KAAA,YAAA,EAEA,CACA,CACA"}
+{"version":3,"file":"hovercard.cjs","sources":["../../../components/hovercard/hovercard.vue"],"sourcesContent":["<template>\n  <dt-popover\n    :id=\"id\"\n    ref=\"popover\"\n    :open=\"hovercardOpen\"\n    :placement=\"placement\"\n    :content-class=\"contentClass\"\n    :dialog-class=\"dialogClass\"\n    :fallback-placements=\"fallbackPlacements\"\n    :padding=\"padding\"\n    :transition=\"transition ? 'fade' : null\"\n    :offset=\"offset\"\n    :modal=\"false\"\n    initial-focus-element=\"none\"\n    :header-class=\"headerClass\"\n    :footer-class=\"footerClass\"\n    :append-to=\"appendTo\"\n    data-qa=\"dt-hovercard\"\n    :enter-delay=\"enterDelay\"\n    :leave-delay=\"leaveDelay\"\n    @opened=\"(e) => ($emit('opened', e))\"\n    @mouseenter-popover=\"onMouseEnter\"\n    @mouseleave-popover=\"onMouseLeave\"\n    @mouseenter-popover-anchor=\"onMouseEnter\"\n    @mouseleave-popover-anchor=\"onMouseLeave\"\n  >\n    <template #anchor=\"{ attrs }\">\n      <slot\n        name=\"anchor\"\n        v-bind=\"attrs\"\n      />\n    </template>\n    <template #content>\n      <div\n        @focusin=\"onContentFocusIn\"\n        @focusout=\"onContentFocusOut\"\n      >\n        <!-- @slot Slot for the content that is displayed in the hovercard. -->\n        <slot name=\"content\" />\n      </div>\n    </template>\n    <template #headerContent>\n      <slot name=\"headerContent\" />\n    </template>\n\n    <template #footerContent>\n      <slot name=\"footerContent\" />\n    </template>\n  </dt-popover>\n</template>\n\n<script>\nimport { POPOVER_APPEND_TO_VALUES, POPOVER_PADDING_CLASSES, DtPopover } from '@/components/popover/index.js';\nimport { TOOLTIP_DIRECTIONS, TOOLTIP_DELAY_MS } from '@/components/tooltip/index.js';\nimport { getUniqueString } from '@/common/utils';\n\nexport default {\n  name: 'DtHovercard',\n\n  components: {\n    DtPopover,\n  },\n\n  props: {\n  /**\n     * Controls whether the hovercard is shown. Leaving this null will have the hovercard trigger on hover 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   * Fade transition when the content display is toggled.\n   * @type boolean\n   * @values true, false\n   */\n    transition: {\n      type: Boolean,\n      default: false,\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     * @see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements\"\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   * @see https://atomiks.github.io/tippyjs/v6/all-props/#placement\"\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: 'top-start',\n      validator (placement) {\n        return TOOLTIP_DIRECTIONS.includes(placement);\n      },\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     * Displaces the content box from its anchor element\n     * by the specified number of pixels.\n     * @see https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n     */\n    offset: {\n      type: Array,\n      default: () => [0, 16],\n    },\n\n    /**\n   * The id of the tooltip\n   */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\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     * Additional class name for the content wrapper element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\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     * The enter delay in milliseconds before the hovercard is shown.\n     * @type number\n     */\n    enterDelay: {\n      type: Number,\n      default: TOOLTIP_DELAY_MS,\n    },\n\n    /**\n     * The leave delay in milliseconds before the hovercard is hidden.\n     * @type number\n     */\n    leaveDelay: {\n      type: Number,\n      default: TOOLTIP_DELAY_MS,\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  data () {\n    return {\n      hovercardOpen: this.open,\n      anchorEl: null,\n      observer: null,\n      inTimer: null,\n      outTimer: null,\n      contentFocused: false,\n      mouseOverHovercard: false,\n    };\n  },\n\n  watch: {\n    open: {\n      handler: function (open) {\n        this.hovercardOpen = open;\n      },\n\n      immediate: true,\n    },\n  },\n\n  mounted () {\n    this.$nextTick(() => {\n      this.anchorEl = this.$refs.popover?.$refs?.anchor?.firstElementChild;\n\n      this.observer = new MutationObserver(() => {\n        if (this.anchorEl && !this.anchorEl.isConnected) {\n          // If the anchor element is removed from the DOM, close the hovercard\n          this.hovercardOpen = false;\n        }\n      });\n\n      this.observer.observe(document.body, {\n        childList: true,\n        subtree: true,\n      });\n    });\n  },\n\n  beforeDestroy () {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n\n    clearTimeout(this.inTimer);\n    clearTimeout(this.outTimer);\n  },\n\n  methods: {\n    setInTimer () {\n      if (this.open === null) {\n        clearTimeout(this.outTimer);\n        this.inTimer = setTimeout(() => {\n          this.hovercardOpen = true;\n        }, this.enterDelay);\n      }\n    },\n\n    setOutTimer () {\n      if (this.open === null) {\n        clearTimeout(this.inTimer);\n        this.outTimer = setTimeout(() => {\n          this.hovercardOpen = false;\n        }, this.leaveDelay);\n      }\n    },\n\n    onMouseEnter () {\n      this.mouseOverHovercard = true;\n      this.setInTimer();\n    },\n\n    onMouseLeave () {\n      this.mouseOverHovercard = false;\n      if (this.contentFocused) {\n        return;\n      }\n      if (this.open === null) {\n        clearTimeout(this.inTimer);\n        this.setOutTimer();\n      }\n    },\n\n    onContentFocusIn () {\n      this.contentFocused = true;\n      this.setInTimer();\n    },\n\n    onContentFocusOut () {\n      this.contentFocused = false;\n\n      // If mouse is not over the hovercard, close it\n      if (!this.mouseOverHovercard) {\n        this.setOutTimer();\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtPopover","placement","TOOLTIP_DIRECTIONS","padding","POPOVER_PADDING_CLASSES","item","getUniqueString","appendTo","POPOVER_APPEND_TO_VALUES","TOOLTIP_DELAY_MS","open","_c","_b","_a"],"mappings":"oVAwDAA,EAAA,CACA,KAAA,cAEA,WAAA,CACA,UAAAC,EAAAA,OACA,EAEA,MAAA,CAOA,KAAA,CACA,KAAA,QACA,QAAA,IACA,EAOA,WAAA,CACA,KAAA,QACA,QAAA,EACA,EAOA,mBAAA,CACA,KAAA,MACA,QAAA,IACA,CAAA,MAAA,CAEA,EAWA,UAAA,CACA,KAAA,OACA,QAAA,YACA,UAAAC,EAAA,CACA,OAAAC,EAAAA,mBAAA,SAAAD,CAAA,CACA,CACA,EAMA,QAAA,CACA,KAAA,OACA,QAAA,QACA,UAAAE,GACA,OAAA,KAAAC,yBAAA,EAAA,KAAAC,GAAAA,IAAAF,CAAA,CAEA,EAOA,OAAA,CACA,KAAA,MACA,QAAA,IAAA,CAAA,EAAA,EAAA,CACA,EAKA,GAAA,CACA,KAAA,OACA,SAAA,CAAA,OAAAG,EAAAA,gBAAA,CAAA,CACA,EAKA,YAAA,CACA,KAAA,CAAA,OAAA,MAAA,MAAA,EACA,QAAA,EACA,EAKA,YAAA,CACA,KAAA,CAAA,OAAA,MAAA,MAAA,EACA,QAAA,EACA,EAKA,YAAA,CACA,KAAA,CAAA,OAAA,MAAA,MAAA,EACA,QAAA,EACA,EAKA,aAAA,CACA,KAAA,CAAA,OAAA,MAAA,MAAA,EACA,QAAA,EACA,EAOA,SAAA,CACA,KAAA,CAAA,YAAA,MAAA,EACA,QAAA,OACA,UAAAC,GACAC,EAAAA,yBAAA,SAAAD,CAAA,GACAA,aAAA,WAEA,EAMA,WAAA,CACA,KAAA,OACA,QAAAE,EAAAA,gBACA,EAMA,WAAA,CACA,KAAA,OACA,QAAAA,EAAAA,gBACA,CACA,EAEA,MAAA,CAOA,QACA,EAEA,MAAA,CACA,MAAA,CACA,cAAA,KAAA,KACA,SAAA,KACA,SAAA,KACA,QAAA,KACA,SAAA,KACA,eAAA,GACA,mBAAA,EACA,CACA,EAEA,MAAA,CACA,KAAA,CACA,QAAA,SAAAC,EAAA,CACA,KAAA,cAAAA,CACA,EAEA,UAAA,EACA,CACA,EAEA,SAAA,CACA,KAAA,UAAA,IAAA,WACA,KAAA,UAAAC,GAAAC,GAAAC,EAAA,KAAA,MAAA,UAAA,YAAAA,EAAA,QAAA,YAAAD,EAAA,SAAA,YAAAD,EAAA,kBAEA,KAAA,SAAA,IAAA,iBAAA,IAAA,CACA,KAAA,UAAA,CAAA,KAAA,SAAA,cAEA,KAAA,cAAA,GAEA,CAAA,EAEA,KAAA,SAAA,QAAA,SAAA,KAAA,CACA,UAAA,GACA,QAAA,EACA,CAAA,CACA,CAAA,CACA,EAEA,eAAA,CACA,KAAA,UACA,KAAA,SAAA,WAAA,EAGA,aAAA,KAAA,OAAA,EACA,aAAA,KAAA,QAAA,CACA,EAEA,QAAA,CACA,YAAA,CACA,KAAA,OAAA,OACA,aAAA,KAAA,QAAA,EACA,KAAA,QAAA,WAAA,IAAA,CACA,KAAA,cAAA,EACA,EAAA,KAAA,UAAA,EAEA,EAEA,aAAA,CACA,KAAA,OAAA,OACA,aAAA,KAAA,OAAA,EACA,KAAA,SAAA,WAAA,IAAA,CACA,KAAA,cAAA,EACA,EAAA,KAAA,UAAA,EAEA,EAEA,cAAA,CACA,KAAA,mBAAA,GACA,KAAA,WAAA,CACA,EAEA,cAAA,CACA,KAAA,mBAAA,GACA,MAAA,gBAGA,KAAA,OAAA,OACA,aAAA,KAAA,OAAA,EACA,KAAA,YAAA,EAEA,EAEA,kBAAA,CACA,KAAA,eAAA,GACA,KAAA,WAAA,CACA,EAEA,mBAAA,CACA,KAAA,eAAA,GAGA,KAAA,oBACA,KAAA,YAAA,CAEA,CACA,CACA"}

package/dist/lib/hovercard/hovercard.js

@@ -1,9 +1,9 @@
-import { getUniqueString as a } from "../../common/utils/index.js";
-import { n as s } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
+import { getUniqueString as s } from "../../common/utils/index.js";
+import { n as a } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
 import { TOOLTIP_DELAY_MS as o, TOOLTIP_DIRECTIONS as i } from "../tooltip/tooltip-constants.js";
 import l from "../popover/popover.js";
-import { POPOVER_APPEND_TO_VALUES as u, POPOVER_PADDING_CLASSES as d } from "../popover/popover-constants.js";
-const c = {
+import { POPOVER_APPEND_TO_VALUES as u, POPOVER_PADDING_CLASSES as c } from "../popover/popover-constants.js";
+const d = {
   name: "DtHovercard",
   components: {
     DtPopover: l
@@ -60,7 +60,7 @@ const c = {
     padding: {
       type: String,
       default: "large",
-      validator: (t) => Object.keys(d).some((e) => e === t)
+      validator: (t) => Object.keys(c).some((e) => e === t)
     },
     /**
      * Displaces the content box from its anchor element
@@ -77,7 +77,7 @@ const c = {
     id: {
       type: String,
       default() {
-        return a();
+        return s();
       }
     },
     /**
@@ -150,7 +150,9 @@ const c = {
       anchorEl: null,
       observer: null,
       inTimer: null,
-      outTimer: null
+      outTimer: null,
+      contentFocused: !1,
+      mouseOverHovercard: !1
     };
   },
   watch: {
@@ -177,41 +179,47 @@ const c = {
   },
   methods: {
     setInTimer() {
-      this.inTimer = setTimeout(() => {
+      this.open === null && (clearTimeout(this.outTimer), this.inTimer = setTimeout(() => {
         this.hovercardOpen = !0;
-      }, this.enterDelay);
+      }, this.enterDelay));
     },
     setOutTimer() {
-      this.outTimer = setTimeout(() => {
+      this.open === null && (clearTimeout(this.inTimer), this.outTimer = setTimeout(() => {
         this.hovercardOpen = !1;
-      }, this.leaveDelay);
+      }, this.leaveDelay));
     },
     onMouseEnter() {
-      this.open === null && (clearTimeout(this.outTimer), this.setInTimer());
+      this.mouseOverHovercard = !0, this.setInTimer();
     },
     onMouseLeave() {
-      this.open === null && (clearTimeout(this.inTimer), this.setOutTimer());
+      this.mouseOverHovercard = !1, !this.contentFocused && this.open === null && (clearTimeout(this.inTimer), this.setOutTimer());
+    },
+    onContentFocusIn() {
+      this.contentFocused = !0, this.setInTimer();
+    },
+    onContentFocusOut() {
+      this.contentFocused = !1, this.mouseOverHovercard || this.setOutTimer();
     }
   }
 };
-var p = function() {
+var f = function() {
   var e = this, r = e._self._c;
   return r("dt-popover", { ref: "popover", attrs: { id: e.id, open: e.hovercardOpen, placement: e.placement, "content-class": e.contentClass, "dialog-class": e.dialogClass, "fallback-placements": e.fallbackPlacements, padding: e.padding, transition: e.transition ? "fade" : null, offset: e.offset, modal: !1, "initial-focus-element": "none", "header-class": e.headerClass, "footer-class": e.footerClass, "append-to": e.appendTo, "data-qa": "dt-hovercard", "enter-delay": e.enterDelay, "leave-delay": e.leaveDelay }, on: { opened: (n) => e.$emit("opened", n), "mouseenter-popover": e.onMouseEnter, "mouseleave-popover": e.onMouseLeave, "mouseenter-popover-anchor": e.onMouseEnter, "mouseleave-popover-anchor": e.onMouseLeave }, scopedSlots: e._u([{ key: "anchor", fn: function({ attrs: n }) {
     return [e._t("anchor", null, null, n)];
   } }, { key: "content", fn: function() {
-    return [e._t("content")];
+    return [r("div", { on: { focusin: e.onContentFocusIn, focusout: e.onContentFocusOut } }, [e._t("content")], 2)];
   }, proxy: !0 }, { key: "headerContent", fn: function() {
     return [e._t("headerContent")];
   }, proxy: !0 }, { key: "footerContent", fn: function() {
     return [e._t("footerContent")];
   }, proxy: !0 }], null, !0) });
-}, f = [], m = /* @__PURE__ */ s(
-  c,
-  p,
-  f
+}, p = [], m = /* @__PURE__ */ a(
+  d,
+  f,
+  p
 );
-const O = m.exports;
+const _ = m.exports;
 export {
-  O as default
+  _ as default
 };
 //# sourceMappingURL=hovercard.js.map

package/dist/lib/hovercard/hovercard.js.map

@@ -1 +1 @@
-{"version":3,"file":"hovercard.js","sources":["../../../components/hovercard/hovercard.vue"],"sourcesContent":["<template>\n  <dt-popover\n    :id=\"id\"\n    ref=\"popover\"\n    :open=\"hovercardOpen\"\n    :placement=\"placement\"\n    :content-class=\"contentClass\"\n    :dialog-class=\"dialogClass\"\n    :fallback-placements=\"fallbackPlacements\"\n    :padding=\"padding\"\n    :transition=\"transition ? 'fade' : null\"\n    :offset=\"offset\"\n    :modal=\"false\"\n    initial-focus-element=\"none\"\n    :header-class=\"headerClass\"\n    :footer-class=\"footerClass\"\n    :append-to=\"appendTo\"\n    data-qa=\"dt-hovercard\"\n    :enter-delay=\"enterDelay\"\n    :leave-delay=\"leaveDelay\"\n    @opened=\"(e) => ($emit('opened', e))\"\n    @mouseenter-popover=\"onMouseEnter\"\n    @mouseleave-popover=\"onMouseLeave\"\n    @mouseenter-popover-anchor=\"onMouseEnter\"\n    @mouseleave-popover-anchor=\"onMouseLeave\"\n  >\n    <template #anchor=\"{ attrs }\">\n      <slot\n        name=\"anchor\"\n        v-bind=\"attrs\"\n      />\n    </template>\n    <template #content>\n      <slot name=\"content\" />\n    </template>\n    <template #headerContent>\n      <slot name=\"headerContent\" />\n    </template>\n\n    <template #footerContent>\n      <slot name=\"footerContent\" />\n    </template>\n  </dt-popover>\n</template>\n\n<script>\nimport { POPOVER_APPEND_TO_VALUES, POPOVER_PADDING_CLASSES, DtPopover } from '@/components/popover/index.js';\nimport { TOOLTIP_DIRECTIONS, TOOLTIP_DELAY_MS } from '@/components/tooltip/index.js';\nimport { getUniqueString } from '@/common/utils';\n\nexport default {\n  name: 'DtHovercard',\n\n  components: {\n    DtPopover,\n  },\n\n  props: {\n  /**\n     * Controls whether the hovercard is shown. Leaving this null will have the hovercard trigger on hover 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   * Fade transition when the content display is toggled.\n   * @type boolean\n   * @values true, false\n   */\n    transition: {\n      type: Boolean,\n      default: false,\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     * @see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements\"\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   * @see https://atomiks.github.io/tippyjs/v6/all-props/#placement\"\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: 'top-start',\n      validator (placement) {\n        return TOOLTIP_DIRECTIONS.includes(placement);\n      },\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     * Displaces the content box from its anchor element\n     * by the specified number of pixels.\n     * @see https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n     */\n    offset: {\n      type: Array,\n      default: () => [0, 16],\n    },\n\n    /**\n   * The id of the tooltip\n   */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\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     * Additional class name for the content wrapper element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\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     * The enter delay in milliseconds before the hovercard is shown.\n     * @type number\n     */\n    enterDelay: {\n      type: Number,\n      default: TOOLTIP_DELAY_MS,\n    },\n\n    /**\n     * The leave delay in milliseconds before the hovercard is hidden.\n     * @type number\n     */\n    leaveDelay: {\n      type: Number,\n      default: TOOLTIP_DELAY_MS,\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  data () {\n    return {\n      hovercardOpen: this.open,\n      anchorEl: null,\n      observer: null,\n      inTimer: null,\n      outTimer: null,\n    };\n  },\n\n  watch: {\n    open: {\n      handler: function (open) {\n        this.hovercardOpen = open;\n      },\n\n      immediate: true,\n    },\n  },\n\n  mounted () {\n    this.$nextTick(() => {\n      this.anchorEl = this.$refs.popover?.$refs?.anchor?.firstElementChild;\n\n      this.observer = new MutationObserver(() => {\n        if (this.anchorEl && !this.anchorEl.isConnected) {\n          // If the anchor element is removed from the DOM, close the hovercard\n          this.hovercardOpen = false;\n        }\n      });\n\n      this.observer.observe(document.body, {\n        childList: true,\n        subtree: true,\n      });\n    });\n  },\n\n  beforeDestroy () {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n\n    clearTimeout(this.inTimer);\n    clearTimeout(this.outTimer);\n  },\n\n  methods: {\n    setInTimer () {\n      this.inTimer = setTimeout(() => {\n        this.hovercardOpen = true;\n      }, this.enterDelay);\n    },\n\n    setOutTimer () {\n      this.outTimer = setTimeout(() => {\n        this.hovercardOpen = false;\n      }, this.leaveDelay);\n    },\n\n    onMouseEnter () {\n      if (this.open === null) {\n        clearTimeout(this.outTimer);\n        this.setInTimer();\n      }\n    },\n\n    onMouseLeave () {\n      if (this.open === null) {\n        clearTimeout(this.inTimer);\n        this.setOutTimer();\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtPopover","placement","TOOLTIP_DIRECTIONS","padding","POPOVER_PADDING_CLASSES","item","getUniqueString","appendTo","POPOVER_APPEND_TO_VALUES","TOOLTIP_DELAY_MS","open","_c","_b","_a"],"mappings":"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"}
+{"version":3,"file":"hovercard.js","sources":["../../../components/hovercard/hovercard.vue"],"sourcesContent":["<template>\n  <dt-popover\n    :id=\"id\"\n    ref=\"popover\"\n    :open=\"hovercardOpen\"\n    :placement=\"placement\"\n    :content-class=\"contentClass\"\n    :dialog-class=\"dialogClass\"\n    :fallback-placements=\"fallbackPlacements\"\n    :padding=\"padding\"\n    :transition=\"transition ? 'fade' : null\"\n    :offset=\"offset\"\n    :modal=\"false\"\n    initial-focus-element=\"none\"\n    :header-class=\"headerClass\"\n    :footer-class=\"footerClass\"\n    :append-to=\"appendTo\"\n    data-qa=\"dt-hovercard\"\n    :enter-delay=\"enterDelay\"\n    :leave-delay=\"leaveDelay\"\n    @opened=\"(e) => ($emit('opened', e))\"\n    @mouseenter-popover=\"onMouseEnter\"\n    @mouseleave-popover=\"onMouseLeave\"\n    @mouseenter-popover-anchor=\"onMouseEnter\"\n    @mouseleave-popover-anchor=\"onMouseLeave\"\n  >\n    <template #anchor=\"{ attrs }\">\n      <slot\n        name=\"anchor\"\n        v-bind=\"attrs\"\n      />\n    </template>\n    <template #content>\n      <div\n        @focusin=\"onContentFocusIn\"\n        @focusout=\"onContentFocusOut\"\n      >\n        <!-- @slot Slot for the content that is displayed in the hovercard. -->\n        <slot name=\"content\" />\n      </div>\n    </template>\n    <template #headerContent>\n      <slot name=\"headerContent\" />\n    </template>\n\n    <template #footerContent>\n      <slot name=\"footerContent\" />\n    </template>\n  </dt-popover>\n</template>\n\n<script>\nimport { POPOVER_APPEND_TO_VALUES, POPOVER_PADDING_CLASSES, DtPopover } from '@/components/popover/index.js';\nimport { TOOLTIP_DIRECTIONS, TOOLTIP_DELAY_MS } from '@/components/tooltip/index.js';\nimport { getUniqueString } from '@/common/utils';\n\nexport default {\n  name: 'DtHovercard',\n\n  components: {\n    DtPopover,\n  },\n\n  props: {\n  /**\n     * Controls whether the hovercard is shown. Leaving this null will have the hovercard trigger on hover 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   * Fade transition when the content display is toggled.\n   * @type boolean\n   * @values true, false\n   */\n    transition: {\n      type: Boolean,\n      default: false,\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     * @see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements\"\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   * @see https://atomiks.github.io/tippyjs/v6/all-props/#placement\"\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: 'top-start',\n      validator (placement) {\n        return TOOLTIP_DIRECTIONS.includes(placement);\n      },\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     * Displaces the content box from its anchor element\n     * by the specified number of pixels.\n     * @see https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n     */\n    offset: {\n      type: Array,\n      default: () => [0, 16],\n    },\n\n    /**\n   * The id of the tooltip\n   */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\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     * Additional class name for the content wrapper element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\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     * The enter delay in milliseconds before the hovercard is shown.\n     * @type number\n     */\n    enterDelay: {\n      type: Number,\n      default: TOOLTIP_DELAY_MS,\n    },\n\n    /**\n     * The leave delay in milliseconds before the hovercard is hidden.\n     * @type number\n     */\n    leaveDelay: {\n      type: Number,\n      default: TOOLTIP_DELAY_MS,\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  data () {\n    return {\n      hovercardOpen: this.open,\n      anchorEl: null,\n      observer: null,\n      inTimer: null,\n      outTimer: null,\n      contentFocused: false,\n      mouseOverHovercard: false,\n    };\n  },\n\n  watch: {\n    open: {\n      handler: function (open) {\n        this.hovercardOpen = open;\n      },\n\n      immediate: true,\n    },\n  },\n\n  mounted () {\n    this.$nextTick(() => {\n      this.anchorEl = this.$refs.popover?.$refs?.anchor?.firstElementChild;\n\n      this.observer = new MutationObserver(() => {\n        if (this.anchorEl && !this.anchorEl.isConnected) {\n          // If the anchor element is removed from the DOM, close the hovercard\n          this.hovercardOpen = false;\n        }\n      });\n\n      this.observer.observe(document.body, {\n        childList: true,\n        subtree: true,\n      });\n    });\n  },\n\n  beforeDestroy () {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n\n    clearTimeout(this.inTimer);\n    clearTimeout(this.outTimer);\n  },\n\n  methods: {\n    setInTimer () {\n      if (this.open === null) {\n        clearTimeout(this.outTimer);\n        this.inTimer = setTimeout(() => {\n          this.hovercardOpen = true;\n        }, this.enterDelay);\n      }\n    },\n\n    setOutTimer () {\n      if (this.open === null) {\n        clearTimeout(this.inTimer);\n        this.outTimer = setTimeout(() => {\n          this.hovercardOpen = false;\n        }, this.leaveDelay);\n      }\n    },\n\n    onMouseEnter () {\n      this.mouseOverHovercard = true;\n      this.setInTimer();\n    },\n\n    onMouseLeave () {\n      this.mouseOverHovercard = false;\n      if (this.contentFocused) {\n        return;\n      }\n      if (this.open === null) {\n        clearTimeout(this.inTimer);\n        this.setOutTimer();\n      }\n    },\n\n    onContentFocusIn () {\n      this.contentFocused = true;\n      this.setInTimer();\n    },\n\n    onContentFocusOut () {\n      this.contentFocused = false;\n\n      // If mouse is not over the hovercard, close it\n      if (!this.mouseOverHovercard) {\n        this.setOutTimer();\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtPopover","placement","TOOLTIP_DIRECTIONS","padding","POPOVER_PADDING_CLASSES","item","getUniqueString","appendTo","POPOVER_APPEND_TO_VALUES","TOOLTIP_DELAY_MS","open","_c","_b","_a"],"mappings":"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"}

package/dist/lib/keyboard-shortcut/keyboard-shortcut-constants.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=["{win}","{arrow-right}","{arrow-left}","{arrow-up}","{arrow-down}","{cmd}"];exports.SHORTCUTS_ALIASES_LIST=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=["{win}","{arrow-right}","{arrow-left}","{arrow-up}","{arrow-down}","{cmd}","{opt}"];exports.SHORTCUTS_ALIASES_LIST=r;
 //# sourceMappingURL=keyboard-shortcut-constants.cjs.map

package/dist/lib/keyboard-shortcut/keyboard-shortcut-constants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard-shortcut-constants.cjs","sources":["../../../components/keyboard_shortcut/keyboard_shortcut_constants.js"],"sourcesContent":["export const SHORTCUTS_ALIASES_LIST = [\n  '{win}',\n  '{arrow-right}',\n  '{arrow-left}',\n  '{arrow-up}',\n  '{arrow-down}',\n  '{cmd}',\n];\n"],"names":["SHORTCUTS_ALIASES_LIST"],"mappings":"gFAAY,MAACA,EAAyB,CACpC,QACA,gBACA,eACA,aACA,eACA,OACF"}
+{"version":3,"file":"keyboard-shortcut-constants.cjs","sources":["../../../components/keyboard_shortcut/keyboard_shortcut_constants.js"],"sourcesContent":["export const SHORTCUTS_ALIASES_LIST = [\n  '{win}',\n  '{arrow-right}',\n  '{arrow-left}',\n  '{arrow-up}',\n  '{arrow-down}',\n  '{cmd}',\n  '{opt}',\n];\n"],"names":["SHORTCUTS_ALIASES_LIST"],"mappings":"gFAAY,MAACA,EAAyB,CACpC,QACA,gBACA,eACA,aACA,eACA,QACA,OACF"}

package/dist/lib/keyboard-shortcut/keyboard-shortcut-constants.js

@@ -4,7 +4,8 @@ const r = [
   "{arrow-left}",
   "{arrow-up}",
   "{arrow-down}",
-  "{cmd}"
+  "{cmd}",
+  "{opt}"
 ];
 export {
   r as SHORTCUTS_ALIASES_LIST

package/dist/lib/keyboard-shortcut/keyboard-shortcut-constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard-shortcut-constants.js","sources":["../../../components/keyboard_shortcut/keyboard_shortcut_constants.js"],"sourcesContent":["export const SHORTCUTS_ALIASES_LIST = [\n  '{win}',\n  '{arrow-right}',\n  '{arrow-left}',\n  '{arrow-up}',\n  '{arrow-down}',\n  '{cmd}',\n];\n"],"names":["SHORTCUTS_ALIASES_LIST"],"mappings":"AAAY,MAACA,IAAyB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;"}
+{"version":3,"file":"keyboard-shortcut-constants.js","sources":["../../../components/keyboard_shortcut/keyboard_shortcut_constants.js"],"sourcesContent":["export const SHORTCUTS_ALIASES_LIST = [\n  '{win}',\n  '{arrow-right}',\n  '{arrow-left}',\n  '{arrow-up}',\n  '{arrow-down}',\n  '{cmd}',\n  '{opt}',\n];\n"],"names":["SHORTCUTS_ALIASES_LIST"],"mappings":"AAAY,MAACA,IAAyB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;"}

package/dist/lib/keyboard-shortcut/keyboard-shortcut.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("@dialpad/dialtone-icons/vue2"),a=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),c={"{win}":r.DtIconLayoutGrid,"{arrow-right}":r.DtIconArrowRight,"{arrow-left}":r.DtIconArrowLeft,"{arrow-up}":r.DtIconArrowUp,"{arrow-down}":r.DtIconArrowDown,"{cmd}":r.DtIconCommand},i={name:"DtKeyboardShortcut",components:{DtIconLayoutGrid:r.DtIconLayoutGrid,DtIconArrowRight:r.DtIconArrowRight,DtIconArrowLeft:r.DtIconArrowLeft,DtIconArrowUp:r.DtIconArrowUp,DtIconArrowDown:r.DtIconArrowDown,DtIconCommand:r.DtIconCommand,DtIconPlus:r.DtIconPlus},props:{inverted:{type:Boolean,default:!1},shortcut:{type:String,required:!0},screenReaderText:{type:String,default:null}},data(){return{separator:/\+/gi}},computed:{icons(){return{...c,"{plus}":r.DtIconPlus}},shortcutWithSeparator(){return this.shortcut.replace(this.separator,"{plus}")},formattedShortcut(){return Object.keys(c).reduce((o,t)=>o.replace(new RegExp("{"+t+"}","gi"),c[t]),this.shortcutWithSeparator)},formattedShortcutSplit(){const o=Object.keys(this.icons).join("|"),t=new RegExp(`(${o})`,"gi");return this.formattedShortcut.split(t).filter(Boolean)}}};var d=function(){var t=this,n=t._self._c;return n("kbd",{class:["d-keyboard-shortcut",{"d-keyboard-shortcut--inverted":t.inverted}]},[t.screenReaderText?n("span",{staticClass:"d-keyboard-shortcut--sr-only"},[t._v(" "+t._s(t.screenReaderText)+" ")]):t._e(),t._l(t.formattedShortcutSplit,function(e,s){return[t.icons[e]?n(t.icons[e],{key:`${s}-${e}`,tag:"component",class:["d-keyboard-shortcut__icon",{"d-keyboard-shortcut__icon--inverted":t.inverted}],attrs:{size:"100","aria-hidden":"true"}}):n("span",{key:`${s}-${e}`,class:["d-keyboard-shortcut__item",{"d-keyboard-shortcut__item--inverted":t.inverted}],attrs:{"aria-hidden":"true"},domProps:{innerHTML:t._s(e)}})]})],2)},u=[],l=a.n(i,d,u);const _=l.exports;exports.default=_;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("@dialpad/dialtone-icons/vue2"),d=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),c={"{win}":r.DtIconLayoutGrid,"{arrow-right}":r.DtIconArrowRight,"{arrow-left}":r.DtIconArrowLeft,"{arrow-up}":r.DtIconArrowUp,"{arrow-down}":r.DtIconArrowDown,"{cmd}":r.DtIconCommand,"{opt}":r.DtIconOption},a={"{cmd}":"Command","{opt}":"Option","{win}":"Windows","{arrow-right}":"Right Arrow","{arrow-left}":"Left Arrow","{arrow-up}":"Up Arrow","{arrow-down}":"Down Arrow","{plus}":"plus"},i={ctrl:"Control",alt:"Alt",esc:"Escape",del:"Delete",ins:"Insert",pgup:"Page Up",pgdn:"Page Down",num:"Number",caps:"Caps Lock"},u={name:"DtKeyboardShortcut",components:{DtIconLayoutGrid:r.DtIconLayoutGrid,DtIconArrowRight:r.DtIconArrowRight,DtIconArrowLeft:r.DtIconArrowLeft,DtIconArrowUp:r.DtIconArrowUp,DtIconArrowDown:r.DtIconArrowDown,DtIconCommand:r.DtIconCommand,DtIconOption:r.DtIconOption,DtIconPlus:r.DtIconPlus},props:{inverted:{type:Boolean,default:!1},shortcut:{type:String,required:!0},screenReaderText:{type:String,default:null}},data(){return{separator:/\+/gi}},computed:{icons(){return{...c,"{plus}":r.DtIconPlus}},shortcutWithSeparator(){return this.shortcut.replace(this.separator,"{plus}")},formattedShortcut(){return Object.keys(c).reduce((e,t)=>e.replace(new RegExp("{"+t+"}","gi"),c[t]),this.shortcutWithSeparator)},formattedShortcutSplit(){const e=Object.keys(this.icons).join("|"),t=new RegExp(`(${e})`,"gi");return this.formattedShortcut.split(t).filter(Boolean)},generatedScreenReaderText(){return this.formattedShortcutSplit.map(e=>{const t=e.trim();if(a[t])return a[t];const o=t.toLowerCase();return i[o]?i[o]:t}).filter(e=>e).join(" ")}}};var p=function(){var t=this,o=t._self._c;return o("kbd",{class:["d-keyboard-shortcut",{"d-keyboard-shortcut--inverted":t.inverted}]},[o("span",{staticClass:"d-keyboard-shortcut--sr-only"},[t._v(" "+t._s(t.screenReaderText||t.generatedScreenReaderText)+" ")]),t._l(t.formattedShortcutSplit,function(n,s){return[t.icons[n]?o(t.icons[n],{key:`icon-${s}-${n}`,tag:"component",class:["d-keyboard-shortcut__icon",{"d-keyboard-shortcut__icon--inverted":t.inverted}],attrs:{size:"100","aria-hidden":"true"}}):n.trim()?o("span",{key:`text-${s}-${n}`,class:["d-keyboard-shortcut__item",{"d-keyboard-shortcut__item--inverted":t.inverted}],attrs:{"aria-hidden":"true"},domProps:{innerHTML:t._s(n)}}):t._e()]})],2)},l=[],w=d.n(u,p,l);const _=w.exports;exports.default=_;
 //# sourceMappingURL=keyboard-shortcut.cjs.map

package/dist/lib/keyboard-shortcut/keyboard-shortcut.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard-shortcut.cjs","sources":["../../../components/keyboard_shortcut/keyboard_shortcut.vue"],"sourcesContent":["<!-- eslint-disable vue/no-v-html -->\n<template>\n  <kbd\n    :class=\"[\n      'd-keyboard-shortcut',\n      { 'd-keyboard-shortcut--inverted': inverted },\n    ]\"\n  >\n    <span\n      v-if=\"screenReaderText\"\n      class=\"d-keyboard-shortcut--sr-only\"\n    >\n      {{ screenReaderText }}\n    </span>\n    <template\n      v-for=\"(item, i) in formattedShortcutSplit\"\n    >\n      <component\n        :is=\"icons[item]\"\n        v-if=\"icons[item]\"\n        :key=\"`${i}-${item}`\"\n        size=\"100\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__icon',\n          { 'd-keyboard-shortcut__icon--inverted': inverted },\n        ]\"\n      />\n      <span\n        v-else\n        :key=\"`${i}-${item}`\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__item',\n          { 'd-keyboard-shortcut__item--inverted': inverted },\n        ]\"\n        v-html=\"item\"\n      />\n    </template>\n  </kbd>\n</template>\n\n<script>\nimport {\n  DtIconLayoutGrid,\n  DtIconArrowRight,\n  DtIconArrowLeft,\n  DtIconArrowUp,\n  DtIconArrowDown,\n  DtIconCommand,\n  DtIconPlus,\n} from '@dialpad/dialtone-icons/vue2';\n\nconst SHORTCUTS_ICON_ALIASES = {\n  '{win}': DtIconLayoutGrid,\n  '{arrow-right}': DtIconArrowRight,\n  '{arrow-left}': DtIconArrowLeft,\n  '{arrow-up}': DtIconArrowUp,\n  '{arrow-down}': DtIconArrowDown,\n  '{cmd}': DtIconCommand,\n};\n\n/**\n * This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n */\nexport default {\n  name: 'DtKeyboardShortcut',\n\n  components: {\n    DtIconLayoutGrid,\n    DtIconArrowRight,\n    DtIconArrowLeft,\n    DtIconArrowUp,\n    DtIconArrowDown,\n    DtIconCommand,\n    DtIconPlus,\n  },\n\n  props: {\n    /**\n     * If true, applies inverted styles.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Include any of these tokens in your string to render the corresponding symbol:\n     * {cmd} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n     */\n    shortcut: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Text entered here will be read by assistive technology. If null this component will be ignored by AT.\n     */\n    screenReaderText: {\n      type: String,\n      default: null,\n    },\n  },\n\n  data () {\n    return {\n      separator: /\\+/gi,\n    };\n  },\n\n  computed: {\n    icons () {\n      return {\n        ...SHORTCUTS_ICON_ALIASES,\n        '{plus}': DtIconPlus,\n      };\n    },\n\n    shortcutWithSeparator () {\n      return this.shortcut.replace(this.separator, '{plus}');\n    },\n\n    formattedShortcut () {\n      return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n        return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n      }, this.shortcutWithSeparator);\n    },\n\n    // Splits any icon based aliases into their own array items.\n    formattedShortcutSplit () {\n      const iconAliasString = Object.keys(this.icons).join('|');\n\n      /*\n         The regexp splits a given string with icon alias and is filtered by empty strings after:\n         if {win} is our delimiter AKA shortcut icon alias\n         '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n      */\n      const regex = new RegExp(`(${iconAliasString})`, 'gi');\n      return this.formattedShortcut.split(regex).filter(Boolean);\n    },\n  },\n};\n</script>\n"],"names":["SHORTCUTS_ICON_ALIASES","DtIconLayoutGrid","DtIconArrowRight","DtIconArrowLeft","DtIconArrowUp","DtIconArrowDown","DtIconCommand","_sfc_main","DtIconPlus","result","key","iconAliasString","regex"],"mappings":"oNAqDAA,EAAA,CACA,QAAAC,EAAAA,iBACA,gBAAAC,EAAAA,iBACA,eAAAC,EAAAA,gBACA,aAAAC,EAAAA,cACA,eAAAC,EAAAA,gBACA,QAAAC,EAAAA,aACA,EAMAC,EAAA,CACA,KAAA,qBAEA,WAAA,CACA,iBAAAN,EAAAA,iBACA,iBAAAC,EAAAA,iBACA,gBAAAC,EAAAA,gBACA,cAAAC,EAAAA,cACA,gBAAAC,EAAAA,gBACA,cAAAC,EAAAA,cACA,WAAAE,EAAAA,UACA,EAEA,MAAA,CAKA,SAAA,CACA,KAAA,QACA,QAAA,EACA,EAMA,SAAA,CACA,KAAA,OACA,SAAA,EACA,EAKA,iBAAA,CACA,KAAA,OACA,QAAA,IACA,CACA,EAEA,MAAA,CACA,MAAA,CACA,UAAA,MACA,CACA,EAEA,SAAA,CACA,OAAA,CACA,MAAA,CACA,GAAAR,EACA,SAAAQ,EAAAA,UACA,CACA,EAEA,uBAAA,CACA,OAAA,KAAA,SAAA,QAAA,KAAA,UAAA,QAAA,CACA,EAEA,mBAAA,CACA,OAAA,OAAA,KAAAR,CAAA,EAAA,OAAA,CAAAS,EAAAC,IACAD,EAAA,QAAA,IAAA,OAAA,IAAAC,EAAA,IAAA,IAAA,EAAAV,EAAAU,CAAA,CAAA,EACA,KAAA,qBAAA,CACA,EAGA,wBAAA,CACA,MAAAC,EAAA,OAAA,KAAA,KAAA,KAAA,EAAA,KAAA,GAAA,EAOAC,EAAA,IAAA,OAAA,IAAAD,CAAA,IAAA,IAAA,EACA,OAAA,KAAA,kBAAA,MAAAC,CAAA,EAAA,OAAA,OAAA,CACA,CACA,CACA"}
+{"version":3,"file":"keyboard-shortcut.cjs","sources":["../../../components/keyboard_shortcut/keyboard_shortcut.vue"],"sourcesContent":["<!-- eslint-disable vue/no-v-html -->\n<template>\n  <kbd\n    :class=\"[\n      'd-keyboard-shortcut',\n      { 'd-keyboard-shortcut--inverted': inverted },\n    ]\"\n  >\n    <span class=\"d-keyboard-shortcut--sr-only\">\n      {{ screenReaderText || generatedScreenReaderText }}\n    </span>\n    <template\n      v-for=\"(item, i) in formattedShortcutSplit\"\n    >\n      <component\n        :is=\"icons[item]\"\n        v-if=\"icons[item]\"\n        :key=\"`icon-${i}-${item}`\"\n        size=\"100\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__icon',\n          { 'd-keyboard-shortcut__icon--inverted': inverted },\n        ]\"\n      />\n      <span\n        v-else-if=\"item.trim()\"\n        :key=\"`text-${i}-${item}`\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__item',\n          { 'd-keyboard-shortcut__item--inverted': inverted },\n        ]\"\n        v-html=\"item\"\n      />\n    </template>\n  </kbd>\n</template>\n\n<script>\nimport {\n  DtIconLayoutGrid,\n  DtIconArrowRight,\n  DtIconArrowLeft,\n  DtIconArrowUp,\n  DtIconArrowDown,\n  DtIconCommand,\n  DtIconOption,\n  DtIconPlus,\n} from '@dialpad/dialtone-icons/vue2';\n\nconst SHORTCUTS_ICON_ALIASES = {\n  '{win}': DtIconLayoutGrid,\n  '{arrow-right}': DtIconArrowRight,\n  '{arrow-left}': DtIconArrowLeft,\n  '{arrow-up}': DtIconArrowUp,\n  '{arrow-down}': DtIconArrowDown,\n  '{cmd}': DtIconCommand,\n  '{opt}': DtIconOption,\n};\n\n// Mapping of icon aliases to readable text for accessibility\nconst ICON_ALIAS_TO_TEXT = {\n  '{cmd}': 'Command',\n  '{opt}': 'Option',\n  '{win}': 'Windows',\n  '{arrow-right}': 'Right Arrow',\n  '{arrow-left}': 'Left Arrow',\n  '{arrow-up}': 'Up Arrow',\n  '{arrow-down}': 'Down Arrow',\n  '{plus}': 'plus',\n};\n\n// Mapping of common key abbreviations to full names for accessibility\nconst KEY_ABBREVIATIONS = {\n  'ctrl': 'Control',\n  'alt': 'Alt',\n  'esc': 'Escape',\n  'del': 'Delete',\n  'ins': 'Insert',\n  'pgup': 'Page Up',\n  'pgdn': 'Page Down',\n  'num': 'Number',\n  'caps': 'Caps Lock',\n};\n\n/**\n * This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n */\nexport default {\n  name: 'DtKeyboardShortcut',\n\n  components: {\n    DtIconLayoutGrid,\n    DtIconArrowRight,\n    DtIconArrowLeft,\n    DtIconArrowUp,\n    DtIconArrowDown,\n    DtIconCommand,\n    DtIconOption,\n    DtIconPlus,\n  },\n\n  props: {\n    /**\n     * If true, applies inverted styles.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Include any of these tokens in your string to render the corresponding symbol:\n     * {cmd} {opt} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n     */\n    shortcut: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Optional text to override the auto-generated accessible text for assistive technology.\n     * If not provided, accessible text will be automatically generated from the shortcut.\n     */\n    screenReaderText: {\n      type: String,\n      default: null,\n    },\n  },\n\n  data () {\n    return {\n      separator: /\\+/gi,\n    };\n  },\n\n  computed: {\n    icons () {\n      return {\n        ...SHORTCUTS_ICON_ALIASES,\n        '{plus}': DtIconPlus,\n      };\n    },\n\n    shortcutWithSeparator () {\n      return this.shortcut.replace(this.separator, '{plus}');\n    },\n\n    formattedShortcut () {\n      return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n        return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n      }, this.shortcutWithSeparator);\n    },\n\n    // Splits any icon based aliases into their own array items.\n    formattedShortcutSplit () {\n      const iconAliasString = Object.keys(this.icons).join('|');\n\n      /*\n         The regexp splits a given string with icon alias and is filtered by empty strings after:\n         if {win} is our delimiter AKA shortcut icon alias\n         '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n      */\n      const regex = new RegExp(`(${iconAliasString})`, 'gi');\n      return this.formattedShortcut.split(regex).filter(Boolean);\n    },\n\n    // Generates accessible text for the keyboard shortcut\n    generatedScreenReaderText () {\n      return this.formattedShortcutSplit\n        .map(item => {\n          const trimmedItem = item.trim();\n\n          // Convert icon aliases to readable text\n          if (ICON_ALIAS_TO_TEXT[trimmedItem]) {\n            return ICON_ALIAS_TO_TEXT[trimmedItem];\n          }\n\n          // Convert key abbreviations to full names (case-insensitive)\n          const lowerItem = trimmedItem.toLowerCase();\n          if (KEY_ABBREVIATIONS[lowerItem]) {\n            return KEY_ABBREVIATIONS[lowerItem];\n          }\n\n          // Return the key as-is if it's not an alias or abbreviation\n          return trimmedItem;\n        })\n        .filter(item => item) // Remove empty strings\n        .join(' ');\n    },\n  },\n};\n</script>\n"],"names":["SHORTCUTS_ICON_ALIASES","DtIconLayoutGrid","DtIconArrowRight","DtIconArrowLeft","DtIconArrowUp","DtIconArrowDown","DtIconCommand","DtIconOption","ICON_ALIAS_TO_TEXT","KEY_ABBREVIATIONS","_sfc_main","DtIconPlus","result","key","iconAliasString","regex","item","trimmedItem","lowerItem"],"mappings":"oNAmDAA,EAAA,CACA,QAAAC,EAAAA,iBACA,gBAAAC,EAAAA,iBACA,eAAAC,EAAAA,gBACA,aAAAC,EAAAA,cACA,eAAAC,EAAAA,gBACA,QAAAC,EAAAA,cACA,QAAAC,EAAAA,YACA,EAGAC,EAAA,CACA,QAAA,UACA,QAAA,SACA,QAAA,UACA,gBAAA,cACA,eAAA,aACA,aAAA,WACA,eAAA,aACA,SAAA,MACA,EAGAC,EAAA,CACA,KAAA,UACA,IAAA,MACA,IAAA,SACA,IAAA,SACA,IAAA,SACA,KAAA,UACA,KAAA,YACA,IAAA,SACA,KAAA,WACA,EAMAC,EAAA,CACA,KAAA,qBAEA,WAAA,CACA,iBAAAT,EAAAA,iBACA,iBAAAC,EAAAA,iBACA,gBAAAC,EAAAA,gBACA,cAAAC,EAAAA,cACA,gBAAAC,EAAAA,gBACA,cAAAC,EAAAA,cACA,aAAAC,EAAAA,aACA,WAAAI,EAAAA,UACA,EAEA,MAAA,CAKA,SAAA,CACA,KAAA,QACA,QAAA,EACA,EAMA,SAAA,CACA,KAAA,OACA,SAAA,EACA,EAMA,iBAAA,CACA,KAAA,OACA,QAAA,IACA,CACA,EAEA,MAAA,CACA,MAAA,CACA,UAAA,MACA,CACA,EAEA,SAAA,CACA,OAAA,CACA,MAAA,CACA,GAAAX,EACA,SAAAW,EAAAA,UACA,CACA,EAEA,uBAAA,CACA,OAAA,KAAA,SAAA,QAAA,KAAA,UAAA,QAAA,CACA,EAEA,mBAAA,CACA,OAAA,OAAA,KAAAX,CAAA,EAAA,OAAA,CAAAY,EAAAC,IACAD,EAAA,QAAA,IAAA,OAAA,IAAAC,EAAA,IAAA,IAAA,EAAAb,EAAAa,CAAA,CAAA,EACA,KAAA,qBAAA,CACA,EAGA,wBAAA,CACA,MAAAC,EAAA,OAAA,KAAA,KAAA,KAAA,EAAA,KAAA,GAAA,EAOAC,EAAA,IAAA,OAAA,IAAAD,CAAA,IAAA,IAAA,EACA,OAAA,KAAA,kBAAA,MAAAC,CAAA,EAAA,OAAA,OAAA,CACA,EAGA,2BAAA,CACA,OAAA,KAAA,uBACA,IAAAC,GAAA,CACA,MAAAC,EAAAD,EAAA,KAAA,EAGA,GAAAR,EAAAS,CAAA,EACA,OAAAT,EAAAS,CAAA,EAIA,MAAAC,EAAAD,EAAA,YAAA,EACA,OAAAR,EAAAS,CAAA,EACAT,EAAAS,CAAA,EAIAD,CACA,CAAA,EACA,OAAAD,GAAAA,CAAA,EACA,KAAA,GAAA,CACA,CACA,CACA"}

package/dist/lib/keyboard-shortcut/keyboard-shortcut.js

@@ -1,22 +1,43 @@
-import { DtIconPlus as a, DtIconCommand as c, DtIconArrowDown as d, DtIconArrowUp as i, DtIconArrowLeft as u, DtIconArrowRight as p, DtIconLayoutGrid as h } from "@dialpad/dialtone-icons/vue2";
-import { n as _ } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
+import { DtIconPlus as s, DtIconOption as d, DtIconCommand as u, DtIconArrowDown as p, DtIconArrowUp as l, DtIconArrowLeft as h, DtIconArrowRight as _, DtIconLayoutGrid as m } from "@dialpad/dialtone-icons/vue2";
+import { n as w } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
 const n = {
-  "{win}": h,
-  "{arrow-right}": p,
-  "{arrow-left}": u,
-  "{arrow-up}": i,
-  "{arrow-down}": d,
-  "{cmd}": c
-}, l = {
+  "{win}": m,
+  "{arrow-right}": _,
+  "{arrow-left}": h,
+  "{arrow-up}": l,
+  "{arrow-down}": p,
+  "{cmd}": u,
+  "{opt}": d
+}, c = {
+  "{cmd}": "Command",
+  "{opt}": "Option",
+  "{win}": "Windows",
+  "{arrow-right}": "Right Arrow",
+  "{arrow-left}": "Left Arrow",
+  "{arrow-up}": "Up Arrow",
+  "{arrow-down}": "Down Arrow",
+  "{plus}": "plus"
+}, i = {
+  ctrl: "Control",
+  alt: "Alt",
+  esc: "Escape",
+  del: "Delete",
+  ins: "Insert",
+  pgup: "Page Up",
+  pgdn: "Page Down",
+  num: "Number",
+  caps: "Caps Lock"
+}, f = {
   name: "DtKeyboardShortcut",
   components: {
-    DtIconLayoutGrid: h,
-    DtIconArrowRight: p,
-    DtIconArrowLeft: u,
-    DtIconArrowUp: i,
-    DtIconArrowDown: d,
-    DtIconCommand: c,
-    DtIconPlus: a
+    DtIconLayoutGrid: m,
+    DtIconArrowRight: _,
+    DtIconArrowLeft: h,
+    DtIconArrowUp: l,
+    DtIconArrowDown: p,
+    DtIconCommand: u,
+    DtIconOption: d,
+    DtIconPlus: s
   },
   props: {
     /**
@@ -29,14 +50,15 @@ const n = {
     },
     /**
      * Include any of these tokens in your string to render the corresponding symbol:
-     * {cmd} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}
+     * {cmd} {opt} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}
      */
     shortcut: {
       type: String,
       required: !0
     },
     /**
-     * Text entered here will be read by assistive technology. If null this component will be ignored by AT.
+     * Optional text to override the auto-generated accessible text for assistive technology.
+     * If not provided, accessible text will be automatically generated from the shortcut.
      */
     screenReaderText: {
       type: String,
@@ -52,43 +74,53 @@ const n = {
     icons() {
       return {
         ...n,
-        "{plus}": a
+        "{plus}": s
       };
     },
     shortcutWithSeparator() {
       return this.shortcut.replace(this.separator, "{plus}");
     },
     formattedShortcut() {
-      return Object.keys(n).reduce((e, t) => e.replace(new RegExp("{" + t + "}", "gi"), n[t]), this.shortcutWithSeparator);
+      return Object.keys(n).reduce((r, t) => r.replace(new RegExp("{" + t + "}", "gi"), n[t]), this.shortcutWithSeparator);
     },
     // Splits any icon based aliases into their own array items.
     formattedShortcutSplit() {
-      const e = Object.keys(this.icons).join("|"), t = new RegExp(`(${e})`, "gi");
+      const r = Object.keys(this.icons).join("|"), t = new RegExp(`(${r})`, "gi");
       return this.formattedShortcut.split(t).filter(Boolean);
+    },
+    // Generates accessible text for the keyboard shortcut
+    generatedScreenReaderText() {
+      return this.formattedShortcutSplit.map((r) => {
+        const t = r.trim();
+        if (c[t])
+          return c[t];
+        const e = t.toLowerCase();
+        return i[e] ? i[e] : t;
+      }).filter((r) => r).join(" ");
     }
   }
 };
-var f = function() {
-  var t = this, o = t._self._c;
-  return o("kbd", { class: [
+var S = function() {
+  var t = this, e = t._self._c;
+  return e("kbd", { class: [
     "d-keyboard-shortcut",
     { "d-keyboard-shortcut--inverted": t.inverted }
-  ] }, [t.screenReaderText ? o("span", { staticClass: "d-keyboard-shortcut--sr-only" }, [t._v(" " + t._s(t.screenReaderText) + " ")]) : t._e(), t._l(t.formattedShortcutSplit, function(r, s) {
-    return [t.icons[r] ? o(t.icons[r], { key: `${s}-${r}`, tag: "component", class: [
+  ] }, [e("span", { staticClass: "d-keyboard-shortcut--sr-only" }, [t._v(" " + t._s(t.screenReaderText || t.generatedScreenReaderText) + " ")]), t._l(t.formattedShortcutSplit, function(o, a) {
+    return [t.icons[o] ? e(t.icons[o], { key: `icon-${a}-${o}`, tag: "component", class: [
       "d-keyboard-shortcut__icon",
       { "d-keyboard-shortcut__icon--inverted": t.inverted }
-    ], attrs: { size: "100", "aria-hidden": "true" } }) : o("span", { key: `${s}-${r}`, class: [
+    ], attrs: { size: "100", "aria-hidden": "true" } }) : o.trim() ? e("span", { key: `text-${a}-${o}`, class: [
       "d-keyboard-shortcut__item",
       { "d-keyboard-shortcut__item--inverted": t.inverted }
-    ], attrs: { "aria-hidden": "true" }, domProps: { innerHTML: t._s(r) } })];
+    ], attrs: { "aria-hidden": "true" }, domProps: { innerHTML: t._s(o) } }) : t._e()];
   })], 2);
-}, m = [], y = /* @__PURE__ */ _(
-  l,
+}, g = [], y = /* @__PURE__ */ w(
   f,
-  m
+  S,
+  g
 );
-const w = y.exports;
+const D = y.exports;
 export {
-  w as default
+  D as default
 };
 //# sourceMappingURL=keyboard-shortcut.js.map

package/dist/lib/keyboard-shortcut/keyboard-shortcut.js.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard-shortcut.js","sources":["../../../components/keyboard_shortcut/keyboard_shortcut.vue"],"sourcesContent":["<!-- eslint-disable vue/no-v-html -->\n<template>\n  <kbd\n    :class=\"[\n      'd-keyboard-shortcut',\n      { 'd-keyboard-shortcut--inverted': inverted },\n    ]\"\n  >\n    <span\n      v-if=\"screenReaderText\"\n      class=\"d-keyboard-shortcut--sr-only\"\n    >\n      {{ screenReaderText }}\n    </span>\n    <template\n      v-for=\"(item, i) in formattedShortcutSplit\"\n    >\n      <component\n        :is=\"icons[item]\"\n        v-if=\"icons[item]\"\n        :key=\"`${i}-${item}`\"\n        size=\"100\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__icon',\n          { 'd-keyboard-shortcut__icon--inverted': inverted },\n        ]\"\n      />\n      <span\n        v-else\n        :key=\"`${i}-${item}`\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__item',\n          { 'd-keyboard-shortcut__item--inverted': inverted },\n        ]\"\n        v-html=\"item\"\n      />\n    </template>\n  </kbd>\n</template>\n\n<script>\nimport {\n  DtIconLayoutGrid,\n  DtIconArrowRight,\n  DtIconArrowLeft,\n  DtIconArrowUp,\n  DtIconArrowDown,\n  DtIconCommand,\n  DtIconPlus,\n} from '@dialpad/dialtone-icons/vue2';\n\nconst SHORTCUTS_ICON_ALIASES = {\n  '{win}': DtIconLayoutGrid,\n  '{arrow-right}': DtIconArrowRight,\n  '{arrow-left}': DtIconArrowLeft,\n  '{arrow-up}': DtIconArrowUp,\n  '{arrow-down}': DtIconArrowDown,\n  '{cmd}': DtIconCommand,\n};\n\n/**\n * This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n */\nexport default {\n  name: 'DtKeyboardShortcut',\n\n  components: {\n    DtIconLayoutGrid,\n    DtIconArrowRight,\n    DtIconArrowLeft,\n    DtIconArrowUp,\n    DtIconArrowDown,\n    DtIconCommand,\n    DtIconPlus,\n  },\n\n  props: {\n    /**\n     * If true, applies inverted styles.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Include any of these tokens in your string to render the corresponding symbol:\n     * {cmd} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n     */\n    shortcut: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Text entered here will be read by assistive technology. If null this component will be ignored by AT.\n     */\n    screenReaderText: {\n      type: String,\n      default: null,\n    },\n  },\n\n  data () {\n    return {\n      separator: /\\+/gi,\n    };\n  },\n\n  computed: {\n    icons () {\n      return {\n        ...SHORTCUTS_ICON_ALIASES,\n        '{plus}': DtIconPlus,\n      };\n    },\n\n    shortcutWithSeparator () {\n      return this.shortcut.replace(this.separator, '{plus}');\n    },\n\n    formattedShortcut () {\n      return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n        return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n      }, this.shortcutWithSeparator);\n    },\n\n    // Splits any icon based aliases into their own array items.\n    formattedShortcutSplit () {\n      const iconAliasString = Object.keys(this.icons).join('|');\n\n      /*\n         The regexp splits a given string with icon alias and is filtered by empty strings after:\n         if {win} is our delimiter AKA shortcut icon alias\n         '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n      */\n      const regex = new RegExp(`(${iconAliasString})`, 'gi');\n      return this.formattedShortcut.split(regex).filter(Boolean);\n    },\n  },\n};\n</script>\n"],"names":["SHORTCUTS_ICON_ALIASES","DtIconLayoutGrid","DtIconArrowRight","DtIconArrowLeft","DtIconArrowUp","DtIconArrowDown","DtIconCommand","_sfc_main","DtIconPlus","result","key","iconAliasString","regex"],"mappings":";;AAqDA,MAAAA,IAAA;AAAA,EACA,SAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,SAAAC;AACA,GAMAC,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,kBAAAN;AAAA,IACA,kBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAE;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,QAAA;AACA,aAAA;AAAA,QACA,GAAAR;AAAA,QACA,UAAAQ;AAAA,MACA;AAAA,IACA;AAAA,IAEA,wBAAA;AACA,aAAA,KAAA,SAAA,QAAA,KAAA,WAAA,QAAA;AAAA,IACA;AAAA,IAEA,oBAAA;AACA,aAAA,OAAA,KAAAR,CAAA,EAAA,OAAA,CAAAS,GAAAC,MACAD,EAAA,QAAA,IAAA,OAAA,MAAAC,IAAA,KAAA,IAAA,GAAAV,EAAAU,CAAA,CAAA,GACA,KAAA,qBAAA;AAAA,IACA;AAAA;AAAA,IAGA,yBAAA;AACA,YAAAC,IAAA,OAAA,KAAA,KAAA,KAAA,EAAA,KAAA,GAAA,GAOAC,IAAA,IAAA,OAAA,IAAAD,CAAA,KAAA,IAAA;AACA,aAAA,KAAA,kBAAA,MAAAC,CAAA,EAAA,OAAA,OAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"keyboard-shortcut.js","sources":["../../../components/keyboard_shortcut/keyboard_shortcut.vue"],"sourcesContent":["<!-- eslint-disable vue/no-v-html -->\n<template>\n  <kbd\n    :class=\"[\n      'd-keyboard-shortcut',\n      { 'd-keyboard-shortcut--inverted': inverted },\n    ]\"\n  >\n    <span class=\"d-keyboard-shortcut--sr-only\">\n      {{ screenReaderText || generatedScreenReaderText }}\n    </span>\n    <template\n      v-for=\"(item, i) in formattedShortcutSplit\"\n    >\n      <component\n        :is=\"icons[item]\"\n        v-if=\"icons[item]\"\n        :key=\"`icon-${i}-${item}`\"\n        size=\"100\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__icon',\n          { 'd-keyboard-shortcut__icon--inverted': inverted },\n        ]\"\n      />\n      <span\n        v-else-if=\"item.trim()\"\n        :key=\"`text-${i}-${item}`\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__item',\n          { 'd-keyboard-shortcut__item--inverted': inverted },\n        ]\"\n        v-html=\"item\"\n      />\n    </template>\n  </kbd>\n</template>\n\n<script>\nimport {\n  DtIconLayoutGrid,\n  DtIconArrowRight,\n  DtIconArrowLeft,\n  DtIconArrowUp,\n  DtIconArrowDown,\n  DtIconCommand,\n  DtIconOption,\n  DtIconPlus,\n} from '@dialpad/dialtone-icons/vue2';\n\nconst SHORTCUTS_ICON_ALIASES = {\n  '{win}': DtIconLayoutGrid,\n  '{arrow-right}': DtIconArrowRight,\n  '{arrow-left}': DtIconArrowLeft,\n  '{arrow-up}': DtIconArrowUp,\n  '{arrow-down}': DtIconArrowDown,\n  '{cmd}': DtIconCommand,\n  '{opt}': DtIconOption,\n};\n\n// Mapping of icon aliases to readable text for accessibility\nconst ICON_ALIAS_TO_TEXT = {\n  '{cmd}': 'Command',\n  '{opt}': 'Option',\n  '{win}': 'Windows',\n  '{arrow-right}': 'Right Arrow',\n  '{arrow-left}': 'Left Arrow',\n  '{arrow-up}': 'Up Arrow',\n  '{arrow-down}': 'Down Arrow',\n  '{plus}': 'plus',\n};\n\n// Mapping of common key abbreviations to full names for accessibility\nconst KEY_ABBREVIATIONS = {\n  'ctrl': 'Control',\n  'alt': 'Alt',\n  'esc': 'Escape',\n  'del': 'Delete',\n  'ins': 'Insert',\n  'pgup': 'Page Up',\n  'pgdn': 'Page Down',\n  'num': 'Number',\n  'caps': 'Caps Lock',\n};\n\n/**\n * This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n */\nexport default {\n  name: 'DtKeyboardShortcut',\n\n  components: {\n    DtIconLayoutGrid,\n    DtIconArrowRight,\n    DtIconArrowLeft,\n    DtIconArrowUp,\n    DtIconArrowDown,\n    DtIconCommand,\n    DtIconOption,\n    DtIconPlus,\n  },\n\n  props: {\n    /**\n     * If true, applies inverted styles.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Include any of these tokens in your string to render the corresponding symbol:\n     * {cmd} {opt} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n     */\n    shortcut: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Optional text to override the auto-generated accessible text for assistive technology.\n     * If not provided, accessible text will be automatically generated from the shortcut.\n     */\n    screenReaderText: {\n      type: String,\n      default: null,\n    },\n  },\n\n  data () {\n    return {\n      separator: /\\+/gi,\n    };\n  },\n\n  computed: {\n    icons () {\n      return {\n        ...SHORTCUTS_ICON_ALIASES,\n        '{plus}': DtIconPlus,\n      };\n    },\n\n    shortcutWithSeparator () {\n      return this.shortcut.replace(this.separator, '{plus}');\n    },\n\n    formattedShortcut () {\n      return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n        return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n      }, this.shortcutWithSeparator);\n    },\n\n    // Splits any icon based aliases into their own array items.\n    formattedShortcutSplit () {\n      const iconAliasString = Object.keys(this.icons).join('|');\n\n      /*\n         The regexp splits a given string with icon alias and is filtered by empty strings after:\n         if {win} is our delimiter AKA shortcut icon alias\n         '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n      */\n      const regex = new RegExp(`(${iconAliasString})`, 'gi');\n      return this.formattedShortcut.split(regex).filter(Boolean);\n    },\n\n    // Generates accessible text for the keyboard shortcut\n    generatedScreenReaderText () {\n      return this.formattedShortcutSplit\n        .map(item => {\n          const trimmedItem = item.trim();\n\n          // Convert icon aliases to readable text\n          if (ICON_ALIAS_TO_TEXT[trimmedItem]) {\n            return ICON_ALIAS_TO_TEXT[trimmedItem];\n          }\n\n          // Convert key abbreviations to full names (case-insensitive)\n          const lowerItem = trimmedItem.toLowerCase();\n          if (KEY_ABBREVIATIONS[lowerItem]) {\n            return KEY_ABBREVIATIONS[lowerItem];\n          }\n\n          // Return the key as-is if it's not an alias or abbreviation\n          return trimmedItem;\n        })\n        .filter(item => item) // Remove empty strings\n        .join(' ');\n    },\n  },\n};\n</script>\n"],"names":["SHORTCUTS_ICON_ALIASES","DtIconLayoutGrid","DtIconArrowRight","DtIconArrowLeft","DtIconArrowUp","DtIconArrowDown","DtIconCommand","DtIconOption","ICON_ALIAS_TO_TEXT","KEY_ABBREVIATIONS","_sfc_main","DtIconPlus","result","key","iconAliasString","regex","item","trimmedItem","lowerItem"],"mappings":";;AAmDA,MAAAA,IAAA;AAAA,EACA,SAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AACA,GAGAC,IAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,cAAA;AAAA,EACA,gBAAA;AAAA,EACA,UAAA;AACA,GAGAC,IAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AACA,GAMAC,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,kBAAAT;AAAA,IACA,kBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,cAAAC;AAAA,IACA,YAAAI;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,QAAA;AACA,aAAA;AAAA,QACA,GAAAX;AAAA,QACA,UAAAW;AAAA,MACA;AAAA,IACA;AAAA,IAEA,wBAAA;AACA,aAAA,KAAA,SAAA,QAAA,KAAA,WAAA,QAAA;AAAA,IACA;AAAA,IAEA,oBAAA;AACA,aAAA,OAAA,KAAAX,CAAA,EAAA,OAAA,CAAAY,GAAAC,MACAD,EAAA,QAAA,IAAA,OAAA,MAAAC,IAAA,KAAA,IAAA,GAAAb,EAAAa,CAAA,CAAA,GACA,KAAA,qBAAA;AAAA,IACA;AAAA;AAAA,IAGA,yBAAA;AACA,YAAAC,IAAA,OAAA,KAAA,KAAA,KAAA,EAAA,KAAA,GAAA,GAOAC,IAAA,IAAA,OAAA,IAAAD,CAAA,KAAA,IAAA;AACA,aAAA,KAAA,kBAAA,MAAAC,CAAA,EAAA,OAAA,OAAA;AAAA,IACA;AAAA;AAAA,IAGA,4BAAA;AACA,aAAA,KAAA,uBACA,IAAA,CAAAC,MAAA;AACA,cAAAC,IAAAD,EAAA,KAAA;AAGA,YAAAR,EAAAS,CAAA;AACA,iBAAAT,EAAAS,CAAA;AAIA,cAAAC,IAAAD,EAAA,YAAA;AACA,eAAAR,EAAAS,CAAA,IACAT,EAAAS,CAAA,IAIAD;AAAA,MACA,CAAA,EACA,OAAA,CAAAD,MAAAA,CAAA,EACA,KAAA,GAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/pagination/pagination.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("@dialpad/dialtone-icons/vue2"),u=require("../../localization/index.cjs"),l=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),g=require("../button/button.cjs"),h={name:"DtPagination",components:{DtButton:g.default,DtIconChevronLeft:o.DtIconChevronLeft,DtIconChevronRight:o.DtIconChevronRight,DtIconMoreHorizontal:o.DtIconMoreHorizontal},props:{ariaLabel:{type:String,required:!0},totalPages:{type:Number,required:!0},activePage:{type:Number,default:1},maxVisible:{type:Number,default:5},hideEdges:{type:Boolean,default:!1}},emits:["change"],data(){return{currentPage:this.activePage,i18n:new u.DialtoneLocalization}},computed:{isFirstPage(){return this.currentPage===1},isLastPage(){return this.currentPage===this.totalPages},pages(){if(this.maxVisible===0)return[];if(this.totalPages<=this.maxVisible)return this.range(1,this.totalPages);let e=this.maxVisible-1,t=this.totalPages-e+1;if(this.hideEdges&&(e=e+1,t=t-1),this.currentPage<e){const n=[...this.range(1,e),"..."];return this.hideEdges||n.push(this.totalPages),n}if(this.currentPage>t){const n=["...",...this.range(t,this.totalPages)];return this.hideEdges||n.unshift(1),n}const i=this.maxVisible-(3-this.maxVisible%2),a=Math.floor(i/2);let r=this.currentPage-a,s=this.currentPage+a;this.hideEdges&&(r=r-1,s=s+1);const c=["...",...this.range(r,s),"..."];return this.hideEdges?c:[1,...c,this.totalPages]},prevAriaLabel(){return this.isFirstPage?this.i18n.$t("DIALTONE_PAGINATION_FIRST_PAGE"):this.i18n.$t("DIALTONE_PAGINATION_PREVIOUS_PAGE")},nextAriaLabel(){return this.isLastPage?this.i18n.$t("DIALTONE_PAGINATION_LAST_PAGE"):this.i18n.$t("DIALTONE_PAGINATION_NEXT_PAGE")},pageNumberAriaLabel(){return e=>e===this.totalPages?`${this.i18n.$t("DIALTONE_PAGINATION_LAST_PAGE")} ${e}`:`${this.i18n.$t("DIALTONE_PAGINATION_PAGE_NUMBER",{page:e})}`}},watch:{activePage(){this.currentPage=this.activePage},totalPages(e){(this.currentPage>e||this.currentPage<=0)&&(this.currentPage=e)}},methods:{range(e,t){const i=[];e=e>0?e:1;for(let a=e;a<=t;a++)i.push(a);return i},changePage(e){this.currentPage=e,this.$emit("change",this.currentPage)}}};var d=function(){var t=this,i=t._self._c;return i("nav",{directives:[{name:"show",rawName:"v-show",value:t.totalPages>0,expression:"totalPages > 0"}],staticClass:"d-pagination",attrs:{"aria-label":t.ariaLabel}},[i("dt-button",{staticClass:"d-pagination__button",attrs:{"data-qa":"dt-pagination-prev","aria-label":t.prevAriaLabel,kind:"muted",importance:"clear",disabled:t.isFirstPage},on:{click:function(a){return t.changePage(t.currentPage-1)}},scopedSlots:t._u([{key:"icon",fn:function(){return[i("dt-icon-chevron-left",{attrs:{size:"300"}})]},proxy:!0}])}),t._l(t.pages,function(a,r){return i("div",{key:`page-${a}-${r}`,class:{"d-pagination__separator":isNaN(Number(a))}},[isNaN(Number(a))?i("div",{staticClass:"d-pagination__separator-icon",attrs:{"data-qa":"dt-pagination-separator"}},[i("dt-icon-more-horizontal",{attrs:{size:"300"}})],1):i("dt-button",{staticClass:"d-pagination__item",attrs:{"aria-label":t.pageNumberAriaLabel(a),kind:t.currentPage===a?"default":"muted",importance:t.currentPage===a?"primary":"clear","label-class":"d-pagination__item-label"},on:{click:function(s){return t.changePage(a)}}},[t._v(" "+t._s(a)+" ")])],1)}),i("dt-button",{staticClass:"d-pagination__button",attrs:{"data-qa":"dt-pagination-next","aria-label":t.nextAriaLabel,disabled:t.isLastPage,kind:"muted",importance:"clear"},on:{click:function(a){return t.changePage(t.currentPage+1)}},scopedSlots:t._u([{key:"icon",fn:function(){return[i("dt-icon-chevron-right",{attrs:{size:"300"}})]},proxy:!0}])})],2)},P=[],_=l.n(h,d,P);const b=_.exports;exports.default=b;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("@dialpad/dialtone-icons/vue2"),u=require("../../localization/index.cjs"),l=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),g=require("../button/button.cjs"),h={name:"DtPagination",components:{DtButton:g.default,DtIconChevronLeft:o.DtIconChevronLeft,DtIconChevronRight:o.DtIconChevronRight,DtIconMoreHorizontal:o.DtIconMoreHorizontal},props:{ariaLabel:{type:String,required:!0},totalPages:{type:Number,required:!0},activePage:{type:Number,default:1},maxVisible:{type:Number,default:5},hideEdges:{type:Boolean,default:!1}},emits:["change"],data(){return{currentPage:this.activePage,i18n:new u.DialtoneLocalization}},computed:{isFirstPage(){return this.currentPage===1},isLastPage(){return this.currentPage===this.totalPages},pages(){if(this.maxVisible===0)return[];if(this.totalPages<=this.maxVisible)return this.range(1,this.totalPages);let e=this.maxVisible-1,t=this.totalPages-e+1;if(this.hideEdges&&(e=e+1,t=t-1),this.currentPage<e){const n=[...this.range(1,e),"..."];return this.hideEdges||n.push(this.totalPages),n}if(this.currentPage>t){const n=["...",...this.range(t,this.totalPages)];return this.hideEdges||n.unshift(1),n}const i=this.maxVisible-(3-this.maxVisible%2),a=Math.floor(i/2);let r=this.currentPage-a,s=this.currentPage+a;this.hideEdges&&(r=r-1,s=s+1);const c=["...",...this.range(r,s),"..."];return this.hideEdges?c:[1,...c,this.totalPages]},prevAriaLabel(){return this.isFirstPage?this.i18n.$t("DIALTONE_PAGINATION_FIRST_PAGE"):this.i18n.$t("DIALTONE_PAGINATION_PREVIOUS_PAGE")},nextAriaLabel(){return this.isLastPage?this.i18n.$t("DIALTONE_PAGINATION_LAST_PAGE"):this.i18n.$t("DIALTONE_PAGINATION_NEXT_PAGE")},pageNumberAriaLabel(){return e=>e===this.totalPages?`${this.i18n.$t("DIALTONE_PAGINATION_LAST_PAGE")} ${e}`:`${this.i18n.$t("DIALTONE_PAGINATION_PAGE_NUMBER",{page:e})}`}},watch:{activePage(){this.currentPage=this.activePage},totalPages(e){(this.currentPage>e||this.currentPage<=0)&&(this.currentPage=e)}},methods:{range(e,t){const i=[];e=e>0?e:1;for(let a=e;a<=t;a++)i.push(a);return i},changePage(e){this.currentPage=e,this.$emit("change",this.currentPage)}}};var d=function(){var t=this,i=t._self._c;return i("nav",{directives:[{name:"show",rawName:"v-show",value:t.totalPages>0,expression:"totalPages > 0"}],staticClass:"d-pagination",attrs:{"aria-label":t.ariaLabel}},[i("dt-button",{staticClass:"d-pagination__button",attrs:{"data-qa":"dt-pagination-prev","aria-label":t.prevAriaLabel,kind:"muted",importance:"clear",disabled:t.isFirstPage},on:{click:function(a){return t.changePage(t.currentPage-1)}},scopedSlots:t._u([{key:"icon",fn:function(){return[i("dt-icon-chevron-left",{attrs:{size:"300"}})]},proxy:!0}])}),t._l(t.pages,function(a,r){return i("div",{key:`page-${a}-${r}`,class:{"d-pagination__separator":isNaN(Number(a))}},[isNaN(Number(a))?i("div",{staticClass:"d-pagination__separator-icon",attrs:{"data-qa":"dt-pagination-separator"}},[i("dt-icon-more-horizontal",{attrs:{size:"300"}})],1):i("dt-button",{attrs:{"aria-label":t.pageNumberAriaLabel(a),kind:t.currentPage===a?"default":"muted",importance:t.currentPage===a?"primary":"clear","label-class":""},on:{click:function(s){return t.changePage(a)}}},[t._v(" "+t._s(a)+" ")])],1)}),i("dt-button",{staticClass:"d-pagination__button",attrs:{"data-qa":"dt-pagination-next","aria-label":t.nextAriaLabel,disabled:t.isLastPage,kind:"muted",importance:"clear"},on:{click:function(a){return t.changePage(t.currentPage+1)}},scopedSlots:t._u([{key:"icon",fn:function(){return[i("dt-icon-chevron-right",{attrs:{size:"300"}})]},proxy:!0}])})],2)},P=[],_=l.n(h,d,P);const b=_.exports;exports.default=b;
 //# sourceMappingURL=pagination.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"pagination.cjs","sources":["../../../components/pagination/pagination.vue"],"sourcesContent":["<template>\n  <nav\n    v-show=\"totalPages > 0\"\n    :aria-label=\"ariaLabel\"\n    class=\"d-pagination\"\n  >\n    <dt-button\n      class=\"d-pagination__button\"\n      data-qa=\"dt-pagination-prev\"\n      :aria-label=\"prevAriaLabel\"\n      kind=\"muted\"\n      importance=\"clear\"\n      :disabled=\"isFirstPage\"\n      @click=\"changePage(currentPage - 1)\"\n    >\n      <template #icon>\n        <dt-icon-chevron-left\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n    <div\n      v-for=\"(page, index) in pages\"\n      :key=\"`page-${page}-${index}`\"\n      :class=\"{ 'd-pagination__separator': isNaN(Number(page)) }\"\n    >\n      <!-- eslint-disable vue/no-bare-strings-in-template -->\n      <div\n        v-if=\"isNaN(Number(page))\"\n        class=\"d-pagination__separator-icon\"\n        data-qa=\"dt-pagination-separator\"\n      >\n        <dt-icon-more-horizontal\n          size=\"300\"\n        />\n        <!-- … -->\n      </div>\n      <dt-button\n        v-else\n        class=\"d-pagination__item\"\n        :aria-label=\"pageNumberAriaLabel(page)\"\n        :kind=\"currentPage === page ? 'default' : 'muted'\"\n        :importance=\"currentPage === page ? 'primary' : 'clear'\"\n        label-class=\"d-pagination__item-label\"\n        @click=\"changePage(page)\"\n      >\n        {{ page }}\n      </dt-button>\n    </div>\n    <dt-button\n      class=\"d-pagination__button\"\n      data-qa=\"dt-pagination-next\"\n      :aria-label=\"nextAriaLabel\"\n      :disabled=\"isLastPage\"\n      kind=\"muted\"\n      importance=\"clear\"\n      @click=\"changePage(currentPage + 1)\"\n    >\n      <template #icon>\n        <dt-icon-chevron-right\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n  </nav>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIconChevronLeft, DtIconChevronRight, DtIconMoreHorizontal } from '@dialpad/dialtone-icons/vue2';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.\n * @see https://dialtone.dialpad.com/components/pagination.html\n */\nexport default {\n  name: 'DtPagination',\n\n  components: {\n    DtButton,\n    DtIconChevronLeft,\n    DtIconChevronRight,\n    DtIconMoreHorizontal,\n  },\n\n  props: {\n    /**\n     * Descriptive label for the pagination content.\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * The total number of the pages\n     */\n    totalPages: {\n      type: Number,\n      required: true,\n    },\n\n    /**\n     * The active current page in the list of pages, defaults to the first page\n     */\n    activePage: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Determines the max pages to be shown in the list. Using an odd number is recommended.\n     * If an even number is given, then it will be rounded down to the nearest odd number to always\n     * keep current page in the middle when current page is in the mid-range.\n     */\n    maxVisible: {\n      type: Number,\n      default: 5,\n    },\n\n    /**\n     * Sometimes you may need to hide start and end page number buttons when moving in between.\n     * This prop will be used to hide the first and last page buttons when not near the edges.\n     * This is useful when your backend does not support offset and you can only use cursor based pagination.\n     */\n    hideEdges: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Page change event\n     *\n     * @event change\n     * @type {Number}\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      currentPage: this.activePage,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    isFirstPage () {\n      return this.currentPage === 1;\n    },\n\n    isLastPage () {\n      return this.currentPage === this.totalPages;\n    },\n\n    // eslint-disable-next-line complexity\n    pages () {\n      if (this.maxVisible === 0) {\n        return [];\n      }\n      if (this.totalPages <= this.maxVisible) {\n        return this.range(1, this.totalPages);\n      }\n\n      let start = this.maxVisible - 1;\n      let end = this.totalPages - start + 1;\n\n      // if hideEdges is true, modify the start and\n      // end to account for the hidden pages\n      if (this.hideEdges) {\n        start = start + 1;\n        end = end - 1;\n      }\n\n      if (this.currentPage < start) {\n        const pages = [...this.range(1, start), '...'];\n        if (!this.hideEdges) {\n          // add last page to the end\n          pages.push(this.totalPages);\n        }\n        return pages;\n      }\n\n      if (this.currentPage > end) {\n        const pages = ['...', ...this.range(end, this.totalPages)];\n        if (!this.hideEdges) {\n          // add first page to the beginning\n          pages.unshift(1);\n        }\n        return pages;\n      }\n\n      // rounding to the nearest odd according to the maxlength to always show the page number in the middle.\n      const total = this.maxVisible - (3 - this.maxVisible % 2);\n      const centerIndex = Math.floor(total / 2);\n      let left = this.currentPage - centerIndex;\n      let right = this.currentPage + centerIndex;\n\n      // if hideEdge is true, modify the left and right to account for the hidden pages\n      if (this.hideEdges) {\n        left = left - 1;\n        right = right + 1;\n      }\n\n      const pages = ['...', ...this.range(left, right), '...'];\n      if (!this.hideEdges) {\n        return [1, ...pages, this.totalPages];\n      }\n      return pages;\n    },\n\n    prevAriaLabel () {\n      return this.isFirstPage ? this.i18n.$t('DIALTONE_PAGINATION_FIRST_PAGE') : this.i18n.$t('DIALTONE_PAGINATION_PREVIOUS_PAGE');\n    },\n\n    nextAriaLabel () {\n      return this.isLastPage ? this.i18n.$t('DIALTONE_PAGINATION_LAST_PAGE') : this.i18n.$t('DIALTONE_PAGINATION_NEXT_PAGE');\n    },\n\n    pageNumberAriaLabel () {\n      return (page) => {\n        return page === this.totalPages ? `${this.i18n.$t('DIALTONE_PAGINATION_LAST_PAGE')} ${page}` : `${this.i18n.$t('DIALTONE_PAGINATION_PAGE_NUMBER', { page })}`;\n      };\n    },\n  },\n\n  watch: {\n    activePage () {\n      this.currentPage = this.activePage;\n    },\n\n    totalPages (pages) {\n      if (this.currentPage > pages || this.currentPage <= 0){\n        this.currentPage = pages;\n      }\n    },\n  },\n\n  methods: {\n    range (from, to) {\n      const range = [];\n      from = from > 0 ? from : 1;\n      for (let i = from; i <= to; i++) {\n        range.push(i);\n      }\n      return range;\n    },\n\n    changePage (page) {\n      this.currentPage = page;\n      this.$emit('change', this.currentPage);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtIconChevronLeft","DtIconChevronRight","DtIconMoreHorizontal","DialtoneLocalization","start","end","pages","total","centerIndex","left","right","page","from","to","range","i"],"mappings":"gSA4EAA,EAAA,CACA,KAAA,eAEA,WAAA,CACA,SAAAC,EAAAA,QACA,kBAAAC,EAAAA,kBACA,mBAAAC,EAAAA,mBACA,qBAAAC,EAAAA,oBACA,EAEA,MAAA,CAIA,UAAA,CACA,KAAA,OACA,SAAA,EACA,EAKA,WAAA,CACA,KAAA,OACA,SAAA,EACA,EAKA,WAAA,CACA,KAAA,OACA,QAAA,CACA,EAOA,WAAA,CACA,KAAA,OACA,QAAA,CACA,EAOA,UAAA,CACA,KAAA,QACA,QAAA,EACA,CACA,EAEA,MAAA,CAOA,QACA,EAEA,MAAA,CACA,MAAA,CACA,YAAA,KAAA,WACA,KAAA,IAAAC,EAAAA,oBACA,CACA,EAEA,SAAA,CACA,aAAA,CACA,OAAA,KAAA,cAAA,CACA,EAEA,YAAA,CACA,OAAA,KAAA,cAAA,KAAA,UACA,EAGA,OAAA,CACA,GAAA,KAAA,aAAA,EACA,MAAA,CAAA,EAEA,GAAA,KAAA,YAAA,KAAA,WACA,OAAA,KAAA,MAAA,EAAA,KAAA,UAAA,EAGA,IAAAC,EAAA,KAAA,WAAA,EACAC,EAAA,KAAA,WAAAD,EAAA,EASA,GALA,KAAA,YACAA,EAAAA,EAAA,EACAC,EAAAA,EAAA,GAGA,KAAA,YAAAD,EAAA,CACA,MAAAE,EAAA,CAAA,GAAA,KAAA,MAAA,EAAAF,CAAA,EAAA,KAAA,EACA,OAAA,KAAA,WAEAE,EAAA,KAAA,KAAA,UAAA,EAEAA,CACA,CAEA,GAAA,KAAA,YAAAD,EAAA,CACA,MAAAC,EAAA,CAAA,MAAA,GAAA,KAAA,MAAAD,EAAA,KAAA,UAAA,CAAA,EACA,OAAA,KAAA,WAEAC,EAAA,QAAA,CAAA,EAEAA,CACA,CAGA,MAAAC,EAAA,KAAA,YAAA,EAAA,KAAA,WAAA,GACAC,EAAA,KAAA,MAAAD,EAAA,CAAA,EACA,IAAAE,EAAA,KAAA,YAAAD,EACAE,EAAA,KAAA,YAAAF,EAGA,KAAA,YACAC,EAAAA,EAAA,EACAC,EAAAA,EAAA,GAGA,MAAAJ,EAAA,CAAA,MAAA,GAAA,KAAA,MAAAG,EAAAC,CAAA,EAAA,KAAA,EACA,OAAA,KAAA,UAGAJ,EAFA,CAAA,EAAA,GAAAA,EAAA,KAAA,UAAA,CAGA,EAEA,eAAA,CACA,OAAA,KAAA,YAAA,KAAA,KAAA,GAAA,gCAAA,EAAA,KAAA,KAAA,GAAA,mCAAA,CACA,EAEA,eAAA,CACA,OAAA,KAAA,WAAA,KAAA,KAAA,GAAA,+BAAA,EAAA,KAAA,KAAA,GAAA,+BAAA,CACA,EAEA,qBAAA,CACA,OAAAK,GACAA,IAAA,KAAA,WAAA,GAAA,KAAA,KAAA,GAAA,+BAAA,CAAA,IAAAA,CAAA,GAAA,GAAA,KAAA,KAAA,GAAA,kCAAA,CAAA,KAAAA,CAAA,CAAA,CAAA,EAEA,CACA,EAEA,MAAA,CACA,YAAA,CACA,KAAA,YAAA,KAAA,UACA,EAEA,WAAAL,EAAA,EACA,KAAA,YAAAA,GAAA,KAAA,aAAA,KACA,KAAA,YAAAA,EAEA,CACA,EAEA,QAAA,CACA,MAAAM,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,WAAAH,EAAA,CACA,KAAA,YAAAA,EACA,KAAA,MAAA,SAAA,KAAA,WAAA,CACA,CACA,CACA"}
+{"version":3,"file":"pagination.cjs","sources":["../../../components/pagination/pagination.vue"],"sourcesContent":["<template>\n  <nav\n    v-show=\"totalPages > 0\"\n    :aria-label=\"ariaLabel\"\n    class=\"d-pagination\"\n  >\n    <dt-button\n      class=\"d-pagination__button\"\n      data-qa=\"dt-pagination-prev\"\n      :aria-label=\"prevAriaLabel\"\n      kind=\"muted\"\n      importance=\"clear\"\n      :disabled=\"isFirstPage\"\n      @click=\"changePage(currentPage - 1)\"\n    >\n      <template #icon>\n        <dt-icon-chevron-left\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n    <div\n      v-for=\"(page, index) in pages\"\n      :key=\"`page-${page}-${index}`\"\n      :class=\"{ 'd-pagination__separator': isNaN(Number(page)) }\"\n    >\n      <!-- eslint-disable vue/no-bare-strings-in-template -->\n      <div\n        v-if=\"isNaN(Number(page))\"\n        class=\"d-pagination__separator-icon\"\n        data-qa=\"dt-pagination-separator\"\n      >\n        <dt-icon-more-horizontal\n          size=\"300\"\n        />\n        <!-- … -->\n      </div>\n      <dt-button\n        v-else\n        :aria-label=\"pageNumberAriaLabel(page)\"\n        :kind=\"currentPage === page ? 'default' : 'muted'\"\n        :importance=\"currentPage === page ? 'primary' : 'clear'\"\n        label-class=\"\"\n        @click=\"changePage(page)\"\n      >\n        {{ page }}\n      </dt-button>\n    </div>\n    <dt-button\n      class=\"d-pagination__button\"\n      data-qa=\"dt-pagination-next\"\n      :aria-label=\"nextAriaLabel\"\n      :disabled=\"isLastPage\"\n      kind=\"muted\"\n      importance=\"clear\"\n      @click=\"changePage(currentPage + 1)\"\n    >\n      <template #icon>\n        <dt-icon-chevron-right\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n  </nav>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIconChevronLeft, DtIconChevronRight, DtIconMoreHorizontal } from '@dialpad/dialtone-icons/vue2';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.\n * @see https://dialtone.dialpad.com/components/pagination.html\n */\nexport default {\n  name: 'DtPagination',\n\n  components: {\n    DtButton,\n    DtIconChevronLeft,\n    DtIconChevronRight,\n    DtIconMoreHorizontal,\n  },\n\n  props: {\n    /**\n     * Descriptive label for the pagination content.\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * The total number of the pages\n     */\n    totalPages: {\n      type: Number,\n      required: true,\n    },\n\n    /**\n     * The active current page in the list of pages, defaults to the first page\n     */\n    activePage: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Determines the max pages to be shown in the list. Using an odd number is recommended.\n     * If an even number is given, then it will be rounded down to the nearest odd number to always\n     * keep current page in the middle when current page is in the mid-range.\n     */\n    maxVisible: {\n      type: Number,\n      default: 5,\n    },\n\n    /**\n     * Sometimes you may need to hide start and end page number buttons when moving in between.\n     * This prop will be used to hide the first and last page buttons when not near the edges.\n     * This is useful when your backend does not support offset and you can only use cursor based pagination.\n     */\n    hideEdges: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Page change event\n     *\n     * @event change\n     * @type {Number}\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      currentPage: this.activePage,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    isFirstPage () {\n      return this.currentPage === 1;\n    },\n\n    isLastPage () {\n      return this.currentPage === this.totalPages;\n    },\n\n    // eslint-disable-next-line complexity\n    pages () {\n      if (this.maxVisible === 0) {\n        return [];\n      }\n      if (this.totalPages <= this.maxVisible) {\n        return this.range(1, this.totalPages);\n      }\n\n      let start = this.maxVisible - 1;\n      let end = this.totalPages - start + 1;\n\n      // if hideEdges is true, modify the start and\n      // end to account for the hidden pages\n      if (this.hideEdges) {\n        start = start + 1;\n        end = end - 1;\n      }\n\n      if (this.currentPage < start) {\n        const pages = [...this.range(1, start), '...'];\n        if (!this.hideEdges) {\n          // add last page to the end\n          pages.push(this.totalPages);\n        }\n        return pages;\n      }\n\n      if (this.currentPage > end) {\n        const pages = ['...', ...this.range(end, this.totalPages)];\n        if (!this.hideEdges) {\n          // add first page to the beginning\n          pages.unshift(1);\n        }\n        return pages;\n      }\n\n      // rounding to the nearest odd according to the maxlength to always show the page number in the middle.\n      const total = this.maxVisible - (3 - this.maxVisible % 2);\n      const centerIndex = Math.floor(total / 2);\n      let left = this.currentPage - centerIndex;\n      let right = this.currentPage + centerIndex;\n\n      // if hideEdge is true, modify the left and right to account for the hidden pages\n      if (this.hideEdges) {\n        left = left - 1;\n        right = right + 1;\n      }\n\n      const pages = ['...', ...this.range(left, right), '...'];\n      if (!this.hideEdges) {\n        return [1, ...pages, this.totalPages];\n      }\n      return pages;\n    },\n\n    prevAriaLabel () {\n      return this.isFirstPage ? this.i18n.$t('DIALTONE_PAGINATION_FIRST_PAGE') : this.i18n.$t('DIALTONE_PAGINATION_PREVIOUS_PAGE');\n    },\n\n    nextAriaLabel () {\n      return this.isLastPage ? this.i18n.$t('DIALTONE_PAGINATION_LAST_PAGE') : this.i18n.$t('DIALTONE_PAGINATION_NEXT_PAGE');\n    },\n\n    pageNumberAriaLabel () {\n      return (page) => {\n        return page === this.totalPages ? `${this.i18n.$t('DIALTONE_PAGINATION_LAST_PAGE')} ${page}` : `${this.i18n.$t('DIALTONE_PAGINATION_PAGE_NUMBER', { page })}`;\n      };\n    },\n  },\n\n  watch: {\n    activePage () {\n      this.currentPage = this.activePage;\n    },\n\n    totalPages (pages) {\n      if (this.currentPage > pages || this.currentPage <= 0){\n        this.currentPage = pages;\n      }\n    },\n  },\n\n  methods: {\n    range (from, to) {\n      const range = [];\n      from = from > 0 ? from : 1;\n      for (let i = from; i <= to; i++) {\n        range.push(i);\n      }\n      return range;\n    },\n\n    changePage (page) {\n      this.currentPage = page;\n      this.$emit('change', this.currentPage);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtIconChevronLeft","DtIconChevronRight","DtIconMoreHorizontal","DialtoneLocalization","start","end","pages","total","centerIndex","left","right","page","from","to","range","i"],"mappings":"gSA2EAA,EAAA,CACA,KAAA,eAEA,WAAA,CACA,SAAAC,EAAAA,QACA,kBAAAC,EAAAA,kBACA,mBAAAC,EAAAA,mBACA,qBAAAC,EAAAA,oBACA,EAEA,MAAA,CAIA,UAAA,CACA,KAAA,OACA,SAAA,EACA,EAKA,WAAA,CACA,KAAA,OACA,SAAA,EACA,EAKA,WAAA,CACA,KAAA,OACA,QAAA,CACA,EAOA,WAAA,CACA,KAAA,OACA,QAAA,CACA,EAOA,UAAA,CACA,KAAA,QACA,QAAA,EACA,CACA,EAEA,MAAA,CAOA,QACA,EAEA,MAAA,CACA,MAAA,CACA,YAAA,KAAA,WACA,KAAA,IAAAC,EAAAA,oBACA,CACA,EAEA,SAAA,CACA,aAAA,CACA,OAAA,KAAA,cAAA,CACA,EAEA,YAAA,CACA,OAAA,KAAA,cAAA,KAAA,UACA,EAGA,OAAA,CACA,GAAA,KAAA,aAAA,EACA,MAAA,CAAA,EAEA,GAAA,KAAA,YAAA,KAAA,WACA,OAAA,KAAA,MAAA,EAAA,KAAA,UAAA,EAGA,IAAAC,EAAA,KAAA,WAAA,EACAC,EAAA,KAAA,WAAAD,EAAA,EASA,GALA,KAAA,YACAA,EAAAA,EAAA,EACAC,EAAAA,EAAA,GAGA,KAAA,YAAAD,EAAA,CACA,MAAAE,EAAA,CAAA,GAAA,KAAA,MAAA,EAAAF,CAAA,EAAA,KAAA,EACA,OAAA,KAAA,WAEAE,EAAA,KAAA,KAAA,UAAA,EAEAA,CACA,CAEA,GAAA,KAAA,YAAAD,EAAA,CACA,MAAAC,EAAA,CAAA,MAAA,GAAA,KAAA,MAAAD,EAAA,KAAA,UAAA,CAAA,EACA,OAAA,KAAA,WAEAC,EAAA,QAAA,CAAA,EAEAA,CACA,CAGA,MAAAC,EAAA,KAAA,YAAA,EAAA,KAAA,WAAA,GACAC,EAAA,KAAA,MAAAD,EAAA,CAAA,EACA,IAAAE,EAAA,KAAA,YAAAD,EACAE,EAAA,KAAA,YAAAF,EAGA,KAAA,YACAC,EAAAA,EAAA,EACAC,EAAAA,EAAA,GAGA,MAAAJ,EAAA,CAAA,MAAA,GAAA,KAAA,MAAAG,EAAAC,CAAA,EAAA,KAAA,EACA,OAAA,KAAA,UAGAJ,EAFA,CAAA,EAAA,GAAAA,EAAA,KAAA,UAAA,CAGA,EAEA,eAAA,CACA,OAAA,KAAA,YAAA,KAAA,KAAA,GAAA,gCAAA,EAAA,KAAA,KAAA,GAAA,mCAAA,CACA,EAEA,eAAA,CACA,OAAA,KAAA,WAAA,KAAA,KAAA,GAAA,+BAAA,EAAA,KAAA,KAAA,GAAA,+BAAA,CACA,EAEA,qBAAA,CACA,OAAAK,GACAA,IAAA,KAAA,WAAA,GAAA,KAAA,KAAA,GAAA,+BAAA,CAAA,IAAAA,CAAA,GAAA,GAAA,KAAA,KAAA,GAAA,kCAAA,CAAA,KAAAA,CAAA,CAAA,CAAA,EAEA,CACA,EAEA,MAAA,CACA,YAAA,CACA,KAAA,YAAA,KAAA,UACA,EAEA,WAAAL,EAAA,EACA,KAAA,YAAAA,GAAA,KAAA,aAAA,KACA,KAAA,YAAAA,EAEA,CACA,EAEA,QAAA,CACA,MAAAM,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,WAAAH,EAAA,CACA,KAAA,YAAAA,EACA,KAAA,MAAA,SAAA,KAAA,WAAA,CACA,CACA,CACA"}