@dialpad/dialtone 9.27.1 → 9.29.0

package/dist/vue3/lib/settings-menu-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"settings-menu-button.js","sources":["../../recipes/header/settings_menu_button/settings_menu_button.vue"],"sourcesContent":["<template>\n  <dt-button\n    v-if=\"updateAvailable\"\n    importance=\"outlined\"\n    size=\"xs\"\n    icon-position=\"right\"\n    class=\"settings-menu-button-update\"\n    :aria-label=\"ariaLabel\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n    <template #icon>\n      <dt-icon\n        name=\"more-vertical\"\n        size=\"300\"\n      />\n    </template>\n  </dt-button>\n  <dt-button\n    v-else\n    importance=\"clear\"\n    kind=\"inverted\"\n    class=\"settings-menu-button\"\n    :aria-label=\"ariaLabel\"\n    v-bind=\"$attrs\"\n  >\n    <template #icon>\n      <dt-icon\n        name=\"more-vertical\"\n        size=\"300\"\n      />\n    </template>\n  </dt-button>\n</template>\n\n<script>\nimport DtButton from '@/components/button/button.vue';\nimport { DtIcon } from '@/components/icon';\n\nexport default {\n  name: 'DtRecipeSettingsMenuButton',\n\n  components: {\n    DtButton,\n    DtIcon,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Determines whether the button should display the update state\n     * default is false\n     * @values true, false\n     */\n    updateAvailable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Aria label\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n};\n</script>\n\n<style scoped lang=\"less\">\n.settings-menu-button {\n  padding: var(--dt-space-0);\n  border-radius: var(--dt-size-550);\n  height: var(--dt-size-600);\n  width: var(--dt-size-550);\n  color: var(--dt-theme-topbar-button-color-foreground);\n  background-color: var(--dt-theme-topbar-button-color-background);\n\n  &:hover {\n    background-color: var(--dt-theme-topbar-button-color-background-hover);\n    color: var(--dt-theme-topbar-button-color-foreground-hover);\n  }\n\n  &:active {\n    background-color: var(--dt-theme-topbar-button-color-background-active);\n  }\n}\n\n.settings-menu-button-update {\n  background-color: hsla(var(--dt-color-blue-200-hsl) / 25%);\n  color: var(--dt-color-blue-500);\n  border-color: hsla(var(--dt-color-blue-200-hsl) / 25%);\n  border-radius: var(--dt-size-radius-pill);\n  height: var(--dt-size-600);\n\n  &:hover {\n    background-color: hsla(var(--dt-color-blue-200-hsl) / 50%);\n    color: var(--dt-theme-topbar-button-color-foreground-hover);\n  }\n}\n</style>\n"],"names":["_sfc_main","DtButton","DtIcon","$props","_openBlock","_createBlock","_component_dt_button","_mergeProps","_ctx","_createVNode","_component_dt_icon","_renderSlot"],"mappings":";;;;;;;;;;;AAuCA,MAAKA,IAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,UAAAC;AAAA,IACA,QAAAC;AAAA,EACD;AAAA,EAED,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAML,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,EACF;AAEH;;;SAnEUC,EAAe,mBADvBC,KAAAC,EAgBYC,GAhBZC,EAgBY;AAAA;IAdV,YAAW;AAAA,IACX,MAAK;AAAA,IACL,iBAAc;AAAA,IACd,OAAM;AAAA,IACL,cAAYJ,EAAS;AAAA,KACdK,EAAM,MAAA,GAAA;AAAA,IAGH,QACT,MAGE;AAAA,MAHFC,EAGEC,GAAA;AAAA,QAFA,MAAK;AAAA,QACL,MAAK;AAAA;;eAJT,MAAQ;AAAA,MAARC,EAAQH,EAAA,QAAA,WAAA,CAAA,GAAA,QAAA,EAAA;AAAA;;6BAQVJ,KAAAC,EAcYC,GAdZC,EAcY;AAAA;IAZV,YAAW;AAAA,IACX,MAAK;AAAA,IACL,OAAM;AAAA,IACL,cAAYJ,EAAS;AAAA,KACdK,EAAM,MAAA,GAAA;AAAA,IAEH,QACT,MAGE;AAAA,MAHFC,EAGEC,GAAA;AAAA,QAFA,MAAK;AAAA,QACL,MAAK;AAAA;;;;;;"}
+{"version":3,"file":"settings-menu-button.js","sources":["../../recipes/header/settings_menu_button/settings_menu_button.vue"],"sourcesContent":["<template>\n  <dt-button\n    v-if=\"updateAvailable\"\n    importance=\"outlined\"\n    size=\"xs\"\n    icon-position=\"right\"\n    class=\"settings-menu-button-update\"\n    :aria-label=\"ariaLabel\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n    <template #icon>\n      <dt-icon\n        name=\"more-vertical\"\n        size=\"300\"\n      />\n    </template>\n  </dt-button>\n  <dt-button\n    v-else\n    importance=\"clear\"\n    kind=\"inverted\"\n    class=\"settings-menu-button\"\n    :aria-label=\"ariaLabel\"\n    v-bind=\"$attrs\"\n  >\n    <template #icon>\n      <dt-icon\n        name=\"more-vertical\"\n        size=\"300\"\n      />\n    </template>\n  </dt-button>\n</template>\n\n<script>\nimport DtButton from '@/components/button/button.vue';\nimport { DtIcon } from '@/components/icon';\n\nexport default {\n  name: 'DtRecipeSettingsMenuButton',\n\n  components: {\n    DtButton,\n    DtIcon,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Determines whether the button should display the update state\n     * default is false\n     * @values true, false\n     */\n    updateAvailable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Aria label\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n};\n</script>\n\n<style scoped lang=\"less\">\n.settings-menu-button {\n  padding: var(--dt-space-0);\n  border-radius: var(--dt-size-550);\n  height: var(--dt-size-600);\n  width: var(--dt-size-550);\n  color: var(--dt-theme-topbar-button-color-foreground);\n  background-color: var(--dt-theme-topbar-button-color-background);\n\n  &:hover {\n    background-color: var(--dt-theme-topbar-button-color-background-hover);\n    color: var(--dt-theme-topbar-button-color-foreground-hover);\n  }\n\n  &:active {\n    background-color: var(--dt-theme-topbar-button-color-background-active);\n  }\n}\n\n.settings-menu-button-update {\n  background-color: hsla(var(--dt-color-blue-200-hsl) / 25%);\n  color: var(--dt-color-blue-500);\n  border-color: hsla(var(--dt-color-blue-200-hsl) / 25%);\n  border-radius: var(--dt-size-radius-pill);\n  height: var(--dt-size-600);\n\n  &:hover {\n    background-color: hsla(var(--dt-color-blue-200-hsl) / 50%);\n    color: var(--dt-theme-topbar-button-color-foreground-hover);\n  }\n}\n</style>\n"],"names":["_sfc_main","DtButton","DtIcon","$props","_openBlock","_createBlock","_component_dt_button","_mergeProps","_ctx","_createVNode","_component_dt_icon","_renderSlot"],"mappings":";;;;;;;;;;AAuCA,MAAKA,IAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,UAAAC;AAAA,IACA,QAAAC;AAAA,EACD;AAAA,EAED,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAML,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,EACF;AAEH;;;SAnEUC,EAAe,mBADvBC,KAAAC,EAgBYC,GAhBZC,EAgBY;AAAA;IAdV,YAAW;AAAA,IACX,MAAK;AAAA,IACL,iBAAc;AAAA,IACd,OAAM;AAAA,IACL,cAAYJ,EAAS;AAAA,KACdK,EAAM,MAAA,GAAA;AAAA,IAGH,QACT,MAGE;AAAA,MAHFC,EAGEC,GAAA;AAAA,QAFA,MAAK;AAAA,QACL,MAAK;AAAA;;eAJT,MAAQ;AAAA,MAARC,EAAQH,EAAA,QAAA,WAAA,CAAA,GAAA,QAAA,EAAA;AAAA;;6BAQVJ,KAAAC,EAcYC,GAdZC,EAcY;AAAA;IAZV,YAAW;AAAA,IACX,MAAK;AAAA,IACL,OAAM;AAAA,IACL,cAAYJ,EAAS;AAAA,KACdK,EAAM,MAAA,GAAA;AAAA,IAEH,QACT,MAGE;AAAA,MAHFC,EAGEC,GAAA;AAAA,QAFA,MAAK;AAAA,QACL,MAAK;AAAA;;;;;;"}

package/dist/vue3/lib/skeleton.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),m=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js"),k=3e6,d={circle:"d-bar-circle",square:"d-bar2"},_=["body","heading"],S={sm:"24px",md:"32px",lg:"48px"},u={sm:"d-h16",md:"d-h24",lg:"d-h32"},y={computed:{skeletonOffset(){const n=this.$refs.skeleton;if(!n)return this.offset;const{top:a,height:t}=n.getBoundingClientRect();return a+t/2},skeletonStyle(){const n={};if(this.skeletonOffset===-1||!this.animate&&this.animationDuration===-1)return n;const a=this.skeletonOffset*k/1e3,t=this.animationDuration===-1?1e3:this.animationDuration;return n.animationDelay=`${a}ms`,n.animationDuration=`${t}ms`,n}}},D={name:"DtSkeletonShape",mixins:[y],props:{shape:{type:String,default:"circle",validator:n=>Object.keys(d).includes(n)},size:{type:String,default:"md"},animationDuration:{type:Number,default:-1},animate:{type:Boolean,default:!0},offset:{type:Number,default:1},contentClass:{type:[String,Object,Array],default:""}},data(){return{SKELETON_SHAPES:d}},computed:{shapeStyles(){const n=S[this.size]||this.size;return{...this.skeletonStyle,"min-width":n,"max-width":n,"min-height":n,"max-height":n}}}};function N(n,a,t,i,o,l){return e.openBlock(),e.createElementBlock("div",{ref:"skeleton","data-qa":"skeleton-shape",class:e.normalizeClass(["skeleton-placeholder",o.SKELETON_SHAPES[t.shape],{"skeleton-placeholder--animate":t.animate},t.contentClass]),style:e.normalizeStyle(l.shapeStyles)},null,6)}const h=m._(D,[["render",N]]),b={name:"DtSkeletonText",mixins:[y],props:{type:{type:String,default:"body",validator:n=>_.includes(n)},headingHeight:{type:String,default:"md",validator:n=>Object.keys(u).includes(n)},width:{type:String,default:"100%"},animationDuration:{type:Number,default:-1},animate:{type:Boolean,default:!1},offset:{type:Number,default:1},contentClass:{type:String,default:""}},data(){return{SKELETON_HEADING_HEIGHTS:u}}};function B(n,a,t,i,o,l){return t.type==="body"?(e.openBlock(),e.createElementBlock("div",{key:0,ref:"skeleton","data-qa":"skeleton-text-body",class:e.normalizeClass(["d-skeleton-text","skeleton-placeholder",{"skeleton-placeholder--animate":t.animate},t.contentClass]),style:e.normalizeStyle({width:t.width,...n.skeletonStyle})},null,6)):t.type==="heading"?(e.openBlock(),e.createElementBlock("div",{key:1,ref:"skeleton","data-qa":"skeleton-text-heading",class:e.normalizeClass([o.SKELETON_HEADING_HEIGHTS[t.headingHeight],"d-skeleton-text--heading","skeleton-placeholder",{"skeleton-placeholder--animate":t.animate},t.contentClass]),style:e.normalizeStyle({width:t.width,...n.skeletonStyle})},null,6)):e.createCommentVNode("",!0)}const f=m._(b,[["render",B]]),c=n=>n!==""&&!Number.isNaN(Number(n)),x={name:"DtSkeletonParagraph",components:{DtSkeletonText:f},props:{rows:{type:[Number,String],default:3,validator:c},animate:{type:Boolean,default:!0},minWidth:{type:[Number,String],default:30,validator:c},maxWidth:{type:[Number,String],default:100,validator:c},width:{type:[String,Array],default:null},randomWidth:{type:Boolean,default:!1},offset:{type:Number,default:1},animationDuration:{type:Number,default:-1},contentClass:{type:String,default:""},rowClass:{type:String,default:""}},computed:{integerRows(){return Number(this.rows)}},methods:{randomWidthPercentage(){const n=Math.min(this.minWidth,this.maxWidth),a=Math.max(this.minWidth,this.maxWidth);return`${Math.round(Math.random()*(a-n))+n}%`},getSizeParagraphRow(n){const a=this.width,t=Array.isArray(a),i=a==null?void 0:a[n-1],o=n===this.rows;return this.randomWidth?this.randomWidthPercentage():a&&!t?a:a&&t&&i?i:o?"38%":"100%"}}};function C(n,a,t,i,o,l){const r=e.resolveComponent("dt-skeleton-text");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["d-skeleton-paragraph",t.contentClass]),contentClass:"","data-qa":"skeleton-paragraph"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.integerRows,s=>(e.openBlock(),e.createBlock(r,{key:s,"data-qa":"skeleton-paragraph-row","content-class":t.rowClass,animate:t.animate,offset:t.offset,"animation-duration":t.animationDuration,width:l.getSizeParagraphRow(s)},null,8,["content-class","animate","offset","animation-duration","width"]))),128))],2)}const p=m._(x,[["render",C]]),T={name:"DtSkeletonListItem",components:{DtSkeletonShape:h,DtSkeletonParagraph:p},props:{shape:{type:String,default:"circle",validator:n=>Object.keys(d).includes(n)},shapeSize:{type:String,default:"md"},paragraphs:{type:Object,default:()=>({rows:3,randomWidth:!0})},animationDuration:{type:Number,default:-1},animate:{type:Boolean,default:!0},offset:{type:Number,default:1},shapeClass:{type:String,default:""},contentClass:{type:String,default:""}}},v={class:"d-skeleton-list-item__paragraph-container"};function P(n,a,t,i,o,l){const r=e.resolveComponent("dt-skeleton-shape"),s=e.resolveComponent("dt-skeleton-paragraph");return e.openBlock(),e.createElementBlock("div",{"data-qa":"skeleton-list-item",class:e.normalizeClass(["d-skeleton-list-item",{"d-skeleton-list-item--single":t.paragraphs.rows===1},t.contentClass])},[e.createVNode(r,{class:"d-skeleton-list-item__shape",size:t.shapeSize,shape:t.shape,"animation-duration":t.animationDuration,animate:t.animate,offset:t.offset,"content-class":t.shapeClass},null,8,["size","shape","animation-duration","animate","offset","content-class"]),e.createElementVNode("div",v,[e.createVNode(s,e.mergeProps(t.paragraphs,{"animation-duration":t.animationDuration,animate:t.animate,offset:t.offset}),null,16,["animation-duration","animate","offset"])])],2)}const g=m._(T,[["render",P]]),w={name:"DtSkeleton",components:{DtSkeletonText:f,DtSkeletonShape:h,DtSkeletonListItem:g,DtSkeletonParagraph:p},props:{paragraphOption:{type:[Object,Boolean],default:null},listItemOption:{type:[Object,Boolean],default:null},textOption:{type:Object,default:null},shapeOption:{type:[Object,Boolean],default:null},animationDuration:{type:Number,default:-1},ariaLabel:{type:String,default:""},animate:{type:Boolean,default:!0},offset:{type:Number,default:1}},computed:{validationOptions(){return{paragraphOption:this.paragraphOption,listItemOption:this.listItemOption,textOption:this.textOption,shapeOption:this.shapeOption}}},watch:{$props:{immediate:!0,handler:"validator"}},methods:{validator(){const n=Object.entries(this.validationOptions).filter(([a,t])=>t);if(n.length>=2){const a=`Use only one of ${n.map(([t])=>t).join(" | ")} options at the same time`;console.error(a)}}}},I=["aria-label"];function L(n,a,t,i,o,l){const r=e.resolveComponent("dt-skeleton-list-item"),s=e.resolveComponent("dt-skeleton-shape"),O=e.resolveComponent("dt-skeleton-paragraph"),E=e.resolveComponent("dt-skeleton-text");return e.openBlock(),e.createElementBlock("div",{"aria-busy":"true",role:"status","aria-label":t.ariaLabel},[t.listItemOption?(e.openBlock(),e.createBlock(r,e.mergeProps({key:0},t.listItemOption===!0?{}:t.listItemOption,{"animation-duration":t.animationDuration,animate:t.animate,offset:t.offset}),null,16,["animation-duration","animate","offset"])):t.shapeOption?(e.openBlock(),e.createBlock(s,e.mergeProps({key:1},t.shapeOption===!0?{}:t.shapeOption,{"animation-duration":t.animationDuration,animate:t.animate,offset:t.offset}),null,16,["animation-duration","animate","offset"])):t.paragraphOption?(e.openBlock(),e.createBlock(O,e.mergeProps({key:2},t.paragraphOption===!0?{}:t.paragraphOption,{"animation-duration":t.animationDuration,animate:t.animate,offset:t.offset}),null,16,["animation-duration","animate","offset"])):(e.openBlock(),e.createBlock(E,e.mergeProps({key:3},t.textOption||{},{"animation-duration":t.animationDuration,animate:t.animate,offset:t.offset}),null,16,["animation-duration","animate","offset"]))],8,I)}const z=m._(w,[["render",L]]);exports.DtSkeleton=z;exports.DtSkeletonListItem=g;exports.DtSkeletonParagraph=p;exports.DtSkeletonShape=h;exports.DtSkeletonText=f;exports.SKELETON_HEADING_HEIGHTS=u;exports.SKELETON_RIPPLE_DURATION=k;exports.SKELETON_SHAPES=d;exports.SKELETON_SHAPE_SIZES=S;exports.SKELETON_TEXT_TYPES=_;
+//# sourceMappingURL=skeleton.cjs.map

package/dist/vue3/lib/skeleton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.cjs","sources":["../../components/skeleton/skeleton_constants.js","../../common/mixins/skeleton.js","../../components/skeleton/skeleton-shape.vue","../../components/skeleton/skeleton-text.vue","../../components/skeleton/skeleton-paragraph.vue","../../components/skeleton/skeleton-list-item.vue","../../components/skeleton/skeleton.vue"],"sourcesContent":["// NOTE: RippleDuration controls how long the delay is for the animation\n// of a skeleton 1000 pixels from the top of the page. Each skeleton\n// from the top down will have a delay duration from 0 to this offset.\n// The delay of each skeleton animation is based on how far down the page\n// the skeleton is rendered. This is a linear relationship. The unit\n// is miliseconds.\nexport const SKELETON_RIPPLE_DURATION = 3000000;\n\nexport const SKELETON_SHAPES = {\n  circle: 'd-bar-circle',\n  square: 'd-bar2',\n};\n\nexport const SKELETON_TEXT_TYPES = [\n  'body',\n  'heading',\n];\n\nexport const SKELETON_SHAPE_SIZES = {\n  sm: '24px',\n  md: '32px',\n  lg: '48px',\n};\n\nexport const SKELETON_HEADING_HEIGHTS = {\n  sm: 'd-h16',\n  md: 'd-h24',\n  lg: 'd-h32',\n};\n\nexport default {\n  SKELETON_RIPPLE_DURATION,\n  SKELETON_SHAPES,\n  SKELETON_TEXT_TYPES,\n  SKELETON_HEADING_HEIGHTS,\n};\n","import { SKELETON_RIPPLE_DURATION } from '@/components/skeleton/skeleton_constants';\n\n/**\n * @displayName Skeleton Animation Mixin\n */\nexport default {\n  computed: {\n    skeletonOffset () {\n      const skeletonText = this.$refs.skeleton;\n      if (!skeletonText) { return this.offset; }\n      const { top, height } = skeletonText.getBoundingClientRect();\n      return top + (height / 2);\n    },\n\n    skeletonStyle () {\n      const style = {};\n\n      if (this.skeletonOffset === -1 || (!this.animate && this.animationDuration === -1)) {\n        return style;\n      }\n      const animationDelay = this.skeletonOffset * SKELETON_RIPPLE_DURATION / 1000;\n      const animationDuration = this.animationDuration === -1 ? 1000 : this.animationDuration;\n      style.animationDelay = `${animationDelay}ms`;\n      style.animationDuration = `${animationDuration}ms`;\n      return style;\n    },\n  },\n};\n","<template>\n  <div\n    ref=\"skeleton\"\n    data-qa=\"skeleton-shape\"\n    :class=\"[\n      'skeleton-placeholder',\n      SKELETON_SHAPES[shape],\n      {\n        'skeleton-placeholder--animate': animate,\n      },\n      contentClass,\n    ]\"\n    :style=\"shapeStyles\"\n  />\n</template>\n\n<script>\nimport SkeletonAnimation from '@/common/mixins/skeleton';\nimport {\n  SKELETON_SHAPES,\n  SKELETON_SHAPE_SIZES,\n} from './skeleton_constants';\n\nexport default {\n  name: 'DtSkeletonShape',\n\n  mixins: [SkeletonAnimation],\n\n  props: {\n    /**\n     * Defines the shape of the skeleton, accepts circle or square.\n     * @values circle, square\n     */\n    shape: {\n      type: String,\n      default: 'circle',\n      validator: shape => Object.keys(SKELETON_SHAPES).includes(shape),\n    },\n\n    /**\n     * Size of the shape\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Additional class name for the content.\n     */\n    contentClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      SKELETON_SHAPES,\n    };\n  },\n\n  computed: {\n    shapeStyles () {\n      const size = SKELETON_SHAPE_SIZES[this.size] || this.size;\n      return {\n        ...this.skeletonStyle,\n        'min-width': size,\n        'max-width': size,\n        'min-height': size,\n        'max-height': size,\n      };\n    },\n  },\n};\n</script>\n","<template>\n  <div\n    v-if=\"type === 'body'\"\n    ref=\"skeleton\"\n    data-qa=\"skeleton-text-body\"\n    :class=\"[\n      'd-skeleton-text',\n      'skeleton-placeholder',\n      {\n        'skeleton-placeholder--animate': animate,\n      },\n      contentClass,\n    ]\"\n    :style=\"{\n      width,\n      ...skeletonStyle,\n    }\"\n  />\n  <div\n    v-else-if=\"type === 'heading'\"\n    ref=\"skeleton\"\n    data-qa=\"skeleton-text-heading\"\n    :class=\"[\n      SKELETON_HEADING_HEIGHTS[headingHeight],\n      'd-skeleton-text--heading',\n      'skeleton-placeholder',\n      {\n        'skeleton-placeholder--animate': animate,\n      },\n      contentClass,\n    ]\"\n    :style=\"{\n      width,\n      ...skeletonStyle,\n    }\"\n  />\n</template>\n\n<script>\nimport { SKELETON_HEADING_HEIGHTS, SKELETON_TEXT_TYPES } from './skeleton_constants';\nimport SkeletonAnimation from '@/common/mixins/skeleton';\n\nexport default {\n  name: 'DtSkeletonText',\n\n  mixins: [SkeletonAnimation],\n\n  props: {\n    /**\n     * Skeleton type\n     * @values body, heading\n     */\n    type: {\n      type: String,\n      default: 'body',\n      validator: type => SKELETON_TEXT_TYPES.includes(type),\n    },\n\n    /**\n     * Heading height\n     * @values sm, md, lg\n     */\n    headingHeight: {\n      type: String,\n      default: 'md',\n      validator: headingHeight => Object.keys(SKELETON_HEADING_HEIGHTS).includes(headingHeight),\n    },\n\n    /**\n     * Width of the skeleton\n     */\n    width: {\n      type: String,\n      default: '100%',\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Additional class name for the content.\n     */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      SKELETON_HEADING_HEIGHTS,\n    };\n  },\n};\n</script>\n","<template>\n  <div\n    :class=\"[\n      'd-skeleton-paragraph',\n      contentClass,\n    ]\"\n    contentClass\n    data-qa=\"skeleton-paragraph\"\n  >\n    <dt-skeleton-text\n      v-for=\"row in integerRows\"\n      :key=\"row\"\n      data-qa=\"skeleton-paragraph-row\"\n      :content-class=\"rowClass\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n      :animation-duration=\"animationDuration\"\n      :width=\"getSizeParagraphRow(row)\"\n    />\n  </div>\n</template>\n\n<script>\nimport DtSkeletonText from './skeleton-text.vue';\n\nconst validator = number => number !== '' && !Number.isNaN(Number(number));\nexport default {\n  name: 'DtSkeletonParagraph',\n  components: {\n    DtSkeletonText,\n  },\n\n  props: {\n    /**\n     * Quantity of rows to display\n     */\n    rows: {\n      type: [Number, String],\n      default: 3,\n      validator,\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Controls the min width of paragraphs\n     */\n    minWidth: {\n      type: [Number, String],\n      default: 30,\n      validator,\n    },\n\n    /**\n     * Controls the max width of paragraphs\n     */\n    maxWidth: {\n      type: [Number, String],\n      default: 100,\n      validator,\n    },\n\n    /**\n     * Controls the width of paragraphs\n     */\n    width: {\n      type: [String, Array],\n      default: null,\n    },\n\n    /**\n     * If true, row widths will be random\n     * @values true, false\n     */\n    randomWidth: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * Additional class name for the content.\n     */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the row.\n     */\n    rowClass: {\n      type: String,\n      default: '',\n    },\n  },\n\n  computed: {\n    integerRows () {\n      return Number(this.rows);\n    },\n  },\n\n  methods: {\n    randomWidthPercentage () {\n      const min = Math.min(this.minWidth, this.maxWidth);\n      const max = Math.max(this.minWidth, this.maxWidth);\n      return `${Math.round(Math.random() * (max - min)) + min}%`;\n    },\n\n    getSizeParagraphRow (row) {\n      const paragraphWidth = this.width;\n      const isArrayWidth = Array.isArray(paragraphWidth);\n      const currentWidth = paragraphWidth?.[row - 1];\n      const isLastRow = row === this.rows;\n\n      if (this.randomWidth) {\n        return this.randomWidthPercentage();\n      }\n\n      if (paragraphWidth && !isArrayWidth) {\n        return paragraphWidth;\n      }\n\n      if (paragraphWidth && isArrayWidth && currentWidth) {\n        return currentWidth;\n      }\n\n      return isLastRow ? '38%' : '100%';\n    },\n  },\n};\n</script>\n","<template>\n  <div\n    data-qa=\"skeleton-list-item\"\n    :class=\"[\n      'd-skeleton-list-item',\n      {\n        'd-skeleton-list-item--single': paragraphs.rows === 1,\n      },\n      contentClass,\n    ]\"\n  >\n    <dt-skeleton-shape\n      class=\"d-skeleton-list-item__shape\"\n      :size=\"shapeSize\"\n      :shape=\"shape\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n      :content-class=\"shapeClass\"\n    />\n    <div class=\"d-skeleton-list-item__paragraph-container\">\n      <dt-skeleton-paragraph\n        v-bind=\"paragraphs\"\n        :animation-duration=\"animationDuration\"\n        :animate=\"animate\"\n        :offset=\"offset\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { SKELETON_SHAPES } from './skeleton_constants';\nimport DtSkeletonShape from './skeleton-shape.vue';\nimport DtSkeletonParagraph from './skeleton-paragraph.vue';\n\nexport default {\n  name: 'DtSkeletonListItem',\n\n  components: {\n    DtSkeletonShape,\n    DtSkeletonParagraph,\n  },\n\n  props: {\n    /**\n     * Defines the shape of the skeleton, accepts circle or square.\n     * @values circle, square\n     */\n    shape: {\n      type: String,\n      default: 'circle',\n      validator: shape => Object.keys(SKELETON_SHAPES).includes(shape),\n    },\n\n    /**\n     * Size of the shape\n     * @values xs, sm, md, lg, xl\n     */\n    shapeSize: {\n      type: String,\n      default: 'md',\n    },\n\n    /**\n     * Object containing quantity of paragraphs to display\n     * and a randomWidth boolean.\n     */\n    paragraphs: {\n      type: Object,\n      default: () => ({ rows: 3, randomWidth: true }),\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Additional class name for the shape.\n     */\n    shapeClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the content.\n     */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n  },\n};\n</script>\n","<template>\n  <div\n    aria-busy=\"true\"\n    role=\"status\"\n    :aria-label=\"ariaLabel\"\n  >\n    <dt-skeleton-list-item\n      v-if=\"listItemOption\"\n      v-bind=\"listItemOption === true ? {} : listItemOption\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n    />\n    <dt-skeleton-shape\n      v-else-if=\"shapeOption\"\n      v-bind=\"shapeOption === true ? {} : shapeOption\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n    />\n    <dt-skeleton-paragraph\n      v-else-if=\"paragraphOption\"\n      v-bind=\"paragraphOption === true ? {} : paragraphOption\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n    />\n    <dt-skeleton-text\n      v-else\n      v-bind=\"textOption || {}\"\n      :animation-duration=\"animationDuration\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n    />\n  </div>\n</template>\n\n<script>\nimport DtSkeletonShape from './skeleton-shape.vue';\nimport DtSkeletonListItem from './skeleton-list-item.vue';\nimport DtSkeletonParagraph from './skeleton-paragraph.vue';\nimport DtSkeletonText from './skeleton-text.vue';\n\n/**\n * Skeleton loader is a non-interactive placeholder that displays a preview of the UI to visually communicate\n * that content is in the process of loading. Skeleton is used to provide a low fidelity\n * representation of the user interface (UI) before content appears on the page.\n * @see https://dialtone.dialpad.com/components/skeleton.html\n */\nexport default {\n  name: 'DtSkeleton',\n  components: {\n    DtSkeletonText,\n    DtSkeletonShape,\n    DtSkeletonListItem,\n    DtSkeletonParagraph,\n  },\n\n  props: {\n    /**\n     * Set this prop to have the skeleton render as multiple lines of text.\n     * Set only one option prop at a time.\n     */\n    paragraphOption: {\n      type: [Object, Boolean],\n      default: null,\n    },\n\n    /**\n     * Set this prop to have the skeleton render as a list item with an avatar and wrapping text.\n     * Set only one option prop at a time.\n     */\n    listItemOption: {\n      type: [Object, Boolean],\n      default: null,\n    },\n\n    /**\n     * Set this prop to have the skeleton render as a single line of text.\n     * Set only one option prop at a time.\n     */\n    textOption: {\n      type: Object,\n      default: null,\n    },\n\n    /**\n     * Set this prop to have the skeleton render as a specific shape.\n     * Set only one option prop at a time.\n     */\n    shapeOption: {\n      type: [Object, Boolean],\n      default: null,\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * Descriptive label for the content.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n  },\n\n  computed: {\n    validationOptions () {\n      return {\n        paragraphOption: this.paragraphOption,\n        listItemOption: this.listItemOption,\n        textOption: this.textOption,\n        shapeOption: this.shapeOption,\n      };\n    },\n  },\n\n  watch: {\n    $props: {\n      immediate: true,\n      handler: 'validator',\n    },\n  },\n\n  methods: {\n    validator () {\n      const filtered = Object.entries(this.validationOptions)\n        .filter(([_, option]) => option);\n      if (filtered.length >= 2) {\n        const errorMessage = `Use only one of ${filtered.map(([key]) => key).join(' | ')} options at the same time`;\n        console.error(errorMessage);\n      }\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n// The --placeholder-from-color and --placeholder-to-color\n// custom properties can be set on the parent class of the\n// placeholder to control the animation colors.\n.skeleton-placeholder {\n  display: flex;\n  stroke: none;\n  fill: var(--placeholder-from-color, var(--dt-color-black-300));\n  background: var(--placeholder-from-color, var(--dt-color-black-300));\n\n  &--animate {\n    animation-name: placeholder-throb;\n    animation-iteration-count: infinite;\n  }\n}\n\n// the animation is used by the skeleton component\n@keyframes placeholder-throb {\n  10% {\n    fill: var(--placeholder-from-color, var(--dt-color-black-300));\n    background: var(--placeholder-from-color, var(--dt-color-black-300));\n  }\n  50% {\n    fill: var(--placeholder-to-color, var(--dt-color-black-100));\n    background: var(--placeholder-to-color, var(--dt-color-black-100));\n  }\n  90% {\n    fill: var(--placeholder-from-color, var(--dt-color-black-300));\n    background: var(--placeholder-from-color, var(--dt-color-black-300));\n  }\n}\n</style>\n"],"names":["SKELETON_RIPPLE_DURATION","SKELETON_SHAPES","SKELETON_TEXT_TYPES","SKELETON_SHAPE_SIZES","SKELETON_HEADING_HEIGHTS","SkeletonAnimation","skeletonText","top","height","style","animationDelay","animationDuration","_sfc_main","shape","size","_createElementBlock","_normalizeClass","$data","$props","$options","type","headingHeight","_normalizeStyle","_ctx","validator","number","DtSkeletonText","min","max","row","paragraphWidth","isArrayWidth","currentWidth","isLastRow","_Fragment","_renderList","_createBlock","_component_dt_skeleton_text","DtSkeletonShape","DtSkeletonParagraph","_hoisted_1","_createVNode","_component_dt_skeleton_shape","_createElementVNode","_component_dt_skeleton_paragraph","_mergeProps","DtSkeletonListItem","filtered","_","option","errorMessage","key","_openBlock","_component_dt_skeleton_list_item"],"mappings":"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"}

package/dist/vue3/lib/stack.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../chunks/stack_constants-m9Ickqw0.js"),r=require("vue"),i=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js");function l(t){return t===e.D.default}function s(t){if(u(t)==="string")return l(t)?null:e.D[t];if(u(t)==="object"){const{default:n}=t;return l(n)?null:e.D[n]}else return null}function u(t){return typeof t}function o(t){return s(t)?`d-stack--${e.D[s(t)]}`:null}function f(t){return u(t)==="object"?[...e.a.map(n=>t[n]?`d-stack--${n}--${t[n]}`:null)]:null}function d(t){return e.b.includes(t)?`d-stack--gap-${t}`:null}function D(t){if(u(t)==="string")return Object.keys(e.D).includes(t);if(u(t)==="object"){const{default:n}=t;return Object.keys(e.D).includes(n)}else return null}function _(t){return e.b.includes(t)}const S={name:"DtStack",props:{direction:{type:[String,Object],default:"column",validator:t=>D(t)},as:{type:String,default:"div"},gap:{type:String,default:"0",validator:t=>_(t)}},data(){return{DT_STACK_DIRECTION:e.D,DT_STACK_GAP:e.b,DT_STACK_RESPONSIVE_BREAKPOINTS:e.a}},computed:{stackGap(){return d(this.gap)},defaultDirection(){return o(this.direction)},stackResponsive(){return f(this.direction)}}};function p(t,n,c,g,k,a){return r.openBlock(),r.createBlock(r.resolveDynamicComponent(c.as),{class:r.normalizeClass(["d-stack",a.defaultDirection,a.stackResponsive,a.stackGap])},{default:r.withCtx(()=>[r.renderSlot(t.$slots,"default")]),_:3},8,["class"])}const T=i._(S,[["render",p]]);exports.DT_STACK_DIRECTION=e.D;exports.DT_STACK_GAP=e.b;exports.DT_STACK_RESPONSIVE_BREAKPOINTS=e.a;exports.DtStack=T;
+//# sourceMappingURL=stack.cjs.map

package/dist/vue3/lib/stack.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.cjs","sources":["../../components/stack/utils.js","../../components/stack/validators.js","../../components/stack/stack.vue"],"sourcesContent":["import { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS } from '@/components/stack/stack_constants';\n\nfunction _isDefaultDirection (direction) {\n  return direction === DT_STACK_DIRECTION.default;\n}\n\nfunction _getValidDirection (direction) {\n  if (directionPropType(direction) === 'string') {\n    return !_isDefaultDirection(direction) ? DT_STACK_DIRECTION[direction] : null;\n  } else if (directionPropType(direction) === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return !_isDefaultDirection(defaultStyle) ? DT_STACK_DIRECTION[defaultStyle] : null;\n  } else { return null; }\n}\n\nexport function directionPropType (value) {\n  return typeof value;\n}\n\nexport function getDefaultDirectionClass (direction) {\n  return _getValidDirection(direction)\n    ? `d-stack--${DT_STACK_DIRECTION[_getValidDirection(direction)]}`\n    : null;\n}\n\nexport function getResponsiveClasses (direction) {\n  if (directionPropType(direction) === 'object') {\n    return [\n      ...DT_STACK_RESPONSIVE_BREAKPOINTS.map((breakpoint) => {\n        return direction[breakpoint]\n          ? `d-stack--${breakpoint}--${direction[breakpoint]}`\n          : null;\n      })];\n  } else { return null; }\n}\n\nexport function getGapClass (gap) {\n  return DT_STACK_GAP.includes(gap) ? `d-stack--gap-${gap}` : null;\n}\n","import { DT_STACK_DIRECTION, DT_STACK_GAP } from '@/components/stack/stack_constants';\nimport { directionPropType } from './utils';\n\nexport function directionValidator (direction) {\n  if (directionPropType(direction) === 'string') {\n    return Object.keys(DT_STACK_DIRECTION).includes(direction);\n  } else if (directionPropType(direction) === 'object') {\n    const { default: defaultStyle } = direction;\n\n    return Object.keys(DT_STACK_DIRECTION).includes(defaultStyle);\n  } else { return null; }\n}\n\nexport function gapValidator (gap) {\n  return DT_STACK_GAP.includes(gap);\n}\n","<template>\n  <component\n    :is=\"as\"\n    :class=\"[\n      'd-stack',\n      defaultDirection,\n      stackResponsive,\n      stackGap,\n    ]\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS } from './stack_constants';\nimport { directionValidator, gapValidator } from './validators';\nimport { getDefaultDirectionClass, getResponsiveClasses, getGapClass } from './utils';\n\nexport default {\n  name: 'DtStack',\n\n  props: {\n    /**\n     * Set this prop to the direction to stack the items.\n     * You can override the default direction with 'default' key.\n     * All the undefined breakpoints will have 'default' value.\n     * By default, for the column direction it will have `justify-content: flex-start`\n     * and for the row direction `align-items: center`. This can be overriden\n     * by utility classes.\n     */\n    direction: {\n      type: [String, Object],\n      default: 'column',\n      validator: (direction) => directionValidator(direction),\n    },\n\n    /**\n     * Set this prop to render stack as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * Set this prop to have the space between each stack item\n     * @values 0, 100, 200, 300, 400, 500, 600\n     */\n    gap: {\n      type: String,\n      default: '0',\n      validator: (gap) => gapValidator(gap),\n    },\n  },\n\n  data () {\n    return {\n      DT_STACK_DIRECTION,\n      DT_STACK_GAP,\n      DT_STACK_RESPONSIVE_BREAKPOINTS,\n    };\n  },\n\n  computed: {\n    stackGap () {\n      return getGapClass(this.gap);\n    },\n\n    defaultDirection () {\n      return getDefaultDirectionClass(this.direction);\n    },\n\n    stackResponsive () {\n      return getResponsiveClasses(this.direction);\n    },\n  },\n};\n</script>\n"],"names":["_isDefaultDirection","direction","DT_STACK_DIRECTION","_getValidDirection","directionPropType","defaultStyle","value","getDefaultDirectionClass","getResponsiveClasses","DT_STACK_RESPONSIVE_BREAKPOINTS","breakpoint","getGapClass","gap","DT_STACK_GAP","directionValidator","gapValidator","_sfc_main","_openBlock","_createBlock","_resolveDynamicComponent","$props","_normalizeClass","$options","_renderSlot","_ctx"],"mappings":"uNAEA,SAASA,EAAqBC,EAAW,CACvC,OAAOA,IAAcC,EAAkB,EAAC,OAC1C,CAEA,SAASC,EAAoBF,EAAW,CACtC,GAAIG,EAAkBH,CAAS,IAAM,SACnC,OAAQD,EAAoBC,CAAS,EAAoC,KAAhCC,EAAAA,EAAmBD,CAAS,EAChE,GAAIG,EAAkBH,CAAS,IAAM,SAAU,CACpD,KAAM,CAAE,QAASI,CAAc,EAAGJ,EAElC,OAAQD,EAAoBK,CAAY,EAAuC,KAAnCH,EAAAA,EAAmBG,CAAY,CAC/E,KAAW,QAAO,IAClB,CAEO,SAASD,EAAmBE,EAAO,CACxC,OAAO,OAAOA,CAChB,CAEO,SAASC,EAA0BN,EAAW,CACnD,OAAOE,EAAmBF,CAAS,EAC/B,YAAYC,EAAkB,EAACC,EAAmBF,CAAS,CAAC,CAAC,GAC7D,IACN,CAEO,SAASO,EAAsBP,EAAW,CAC/C,OAAIG,EAAkBH,CAAS,IAAM,SAC5B,CACL,GAAGQ,EAA+B,EAAC,IAAKC,GAC/BT,EAAUS,CAAU,EACvB,YAAYA,CAAU,KAAKT,EAAUS,CAAU,CAAC,GAChD,IACL,CAAC,EACU,IAClB,CAEO,SAASC,EAAaC,EAAK,CAChC,OAAOC,EAAY,EAAC,SAASD,CAAG,EAAI,gBAAgBA,CAAG,GAAK,IAC9D,CCpCO,SAASE,EAAoBb,EAAW,CAC7C,GAAIG,EAAkBH,CAAS,IAAM,SACnC,OAAO,OAAO,KAAKC,EAAAA,CAAkB,EAAE,SAASD,CAAS,EACpD,GAAIG,EAAkBH,CAAS,IAAM,SAAU,CACpD,KAAM,CAAE,QAASI,CAAc,EAAGJ,EAElC,OAAO,OAAO,KAAKC,EAAAA,CAAkB,EAAE,SAASG,CAAY,CAChE,KAAW,QAAO,IAClB,CAEO,SAASU,EAAcH,EAAK,CACjC,OAAOC,EAAY,EAAC,SAASD,CAAG,CAClC,CCKA,MAAKI,EAAU,CACb,KAAM,UAEN,MAAO,CASL,UAAW,CACT,KAAM,CAAC,OAAQ,MAAM,EACrB,QAAS,SACT,UAAYf,GAAca,EAAmBb,CAAS,CACvD,EAKD,GAAI,CACF,KAAM,OACN,QAAS,KACV,EAMD,IAAK,CACH,KAAM,OACN,QAAS,IACT,UAAYW,GAAQG,EAAaH,CAAG,CACrC,CACF,EAED,MAAQ,CACN,MAAO,CACL,mBAAAV,EAAkB,eAClBW,EAAY,EACZ,gCAAAJ,EAA+B,EAElC,EAED,SAAU,CACR,UAAY,CACV,OAAOE,EAAY,KAAK,GAAG,CAC5B,EAED,kBAAoB,CAClB,OAAOJ,EAAyB,KAAK,SAAS,CAC/C,EAED,iBAAmB,CACjB,OAAOC,EAAqB,KAAK,SAAS,CAC3C,CACF,CACH,0BA7EE,OAAAS,EAAAA,UAAA,EAAAC,EAAA,YAWYC,0BAVLC,EAAE,EAAA,EAAA,CACN,MAAKC,EAAAA,eAAA,WAA2BC,EAAgB,iBAAQA,EAAe,gBAAQA,EAAQ,+BAQxF,IAAQ,CAARC,aAAQC,EAAA,OAAA,SAAA"}

package/dist/vue3/lib/tabs.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../chunks/tab-at7WWglk.js"),s=require("../chunks/modal-qEzlo0Sj.js"),i=require("vue"),d=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js");require("./button.cjs");require("./utils.cjs");require("./constants.cjs");require("../chunks/link_constants-Kn6kP4i1.js");const u={name:"DtTabPanel",mixins:[s.M],inject:["groupContext"],props:{id:{type:String,required:!0},tabId:{type:String,required:!0},hidden:{type:Boolean,default:!1},tabPanelClass:{type:[String,Array,Object],default:""}},data(){return{isFirstElementFocusable:!1}},computed:{hidePanel(){return this.groupContext.selected!==this.id||this.hidden}},async mounted(){const e=await this.getFirstFocusableElement(this.$el);e?this.isFirstElementFocusable=this.isFirstElementOfPanel(e):this.isFirstElementFocusable=!1},methods:{isFirstElementOfPanel(e){let t=e,a=!0;for(;t;){if(t.previousElementSibling!==null){a=!1;break}t=t.parentNode!==this.$el?t.parentNode:null}return a}}},o=["id","tabindex","aria-labelledby","aria-hidden"];function c(e,t,a,h,n,l){return i.withDirectives((i.openBlock(),i.createElementBlock("div",{id:`dt-panel-${a.id}`,role:"tabpanel",tabindex:n.isFirstElementFocusable?-1:0,"aria-labelledby":`dt-tab-${a.tabId}`,"aria-hidden":`${l.hidePanel}`,class:i.normalizeClass(a.tabPanelClass),"data-qa":"dt-tab-panel"},[i.renderSlot(e.$slots,"default")],10,o)),[[i.vShow,!l.hidePanel]])}const b=d._(u,[["render",c]]);exports.DtTab=r.a;exports.DtTabGroup=r.D;exports.TAB_IMPORTANCE_MODIFIERS=r.d;exports.TAB_LIST_IMPORTANCE_MODIFIERS=r.c;exports.TAB_LIST_KIND_MODIFIERS=r.T;exports.TAB_LIST_SIZES=r.b;exports.DtTabPanel=b;
+//# sourceMappingURL=tabs.cjs.map

package/dist/vue3/lib/tabs.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.cjs","sources":["../../components/tabs/tab_panel.vue"],"sourcesContent":["<template>\n  <div\n    v-show=\"!hidePanel\"\n    :id=\"`dt-panel-${id}`\"\n    role=\"tabpanel\"\n    :tabindex=\"isFirstElementFocusable ? -1 : 0\"\n    :aria-labelledby=\"`dt-tab-${tabId}`\"\n    :aria-hidden=\"`${hidePanel}`\"\n    :class=\"tabPanelClass\"\n    data-qa=\"dt-tab-panel\"\n  >\n    <!-- @slot Default slot for Tab Panel -->\n    <slot />\n  </div>\n</template>\n\n<script>\nimport Modal from '@/common/mixins/modal';\n\n/**\n * Tabs allow users to navigation between grouped content in different views while within the same page context.\n * @see https://dialtone.dialpad.com/components/tabs.html\n */\nexport default {\n  name: 'DtTabPanel',\n\n  mixins: [Modal],\n\n  inject: ['groupContext'],\n\n  props: {\n    /**\n     * Id of the panel\n     */\n    id: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Id of the associated tab\n     */\n    tabId: {\n      type: String,\n      required: true,\n    },\n\n    /**\n    * If true, hides the tab content\n     * @values true, false\n    */\n    hidden: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Used to customize the tab element\n     */\n    tabPanelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      isFirstElementFocusable: false,\n    };\n  },\n\n  computed: {\n    hidePanel () {\n      return this.groupContext.selected !== this.id || this.hidden;\n    },\n  },\n\n  async mounted () {\n    const firstFocusableElement = await this.getFirstFocusableElement(this.$el);\n\n    if (!firstFocusableElement) {\n      this.isFirstElementFocusable = false;\n    } else {\n      // If the first focusable element isn't the first element in the panel,\n      // then we need to set the panel tabindex to 0.\n      // See notes in https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/\n      this.isFirstElementFocusable = this.isFirstElementOfPanel(firstFocusableElement);\n    }\n  },\n\n  methods: {\n    isFirstElementOfPanel (element) {\n      let current = element;\n      let isFirstElement = true;\n\n      while (current) {\n        if (current.previousElementSibling !== null) {\n          isFirstElement = false;\n          break;\n        }\n        current = current.parentNode !== this.$el ? current.parentNode : null;\n      }\n\n      return isFirstElement;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","Modal","firstFocusableElement","element","current","isFirstElement","_createElementBlock","$props","$data","$options","_renderSlot","_ctx"],"mappings":"8WAuBA,MAAKA,EAAU,CACb,KAAM,aAEN,OAAQ,CAACC,EAAAA,CAAK,EAEd,OAAQ,CAAC,cAAc,EAEvB,MAAO,CAIL,GAAI,CACF,KAAM,OACN,SAAU,EACX,EAKD,MAAO,CACL,KAAM,OACN,SAAU,EACX,EAMD,OAAQ,CACN,KAAM,QACN,QAAS,EACV,EAKD,cAAe,CACb,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,EACV,CACF,EAED,MAAQ,CACN,MAAO,CACL,wBAAyB,GAE5B,EAED,SAAU,CACR,WAAa,CACX,OAAO,KAAK,aAAa,WAAa,KAAK,IAAM,KAAK,MACvD,CACF,EAED,MAAM,SAAW,CACf,MAAMC,EAAwB,MAAM,KAAK,yBAAyB,KAAK,GAAG,EAErEA,EAMH,KAAK,wBAA0B,KAAK,sBAAsBA,CAAqB,EAL/E,KAAK,wBAA0B,EAOlC,EAED,QAAS,CACP,sBAAuBC,EAAS,CAC9B,IAAIC,EAAUD,EACVE,EAAiB,GAErB,KAAOD,GAAS,CACd,GAAIA,EAAQ,yBAA2B,KAAM,CAC3CC,EAAiB,GACjB,KACF,CACAD,EAAUA,EAAQ,aAAe,KAAK,IAAMA,EAAQ,WAAa,IACnE,CAEA,OAAOC,CACR,CACF,CACH,qHAzGEC,EAAAA,mBAYM,MAAA,CAVH,eAAgBC,EAAE,EAAA,GACnB,KAAK,WACJ,SAAUC,EAAuB,wBAAA,GAAA,EACjC,4BAA2BD,EAAK,KAAA,GAChC,iBAAgBE,EAAS,SAAA,GACzB,uBAAOF,EAAa,aAAA,EACrB,UAAQ,iBAGRG,aAAQC,EAAA,OAAA,SAAA,qBAVCF,EAAS,SAAA"}

package/dist/vue3/lib/time-pill.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),a=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js"),n={name:"DtRecipeTimePill",props:{dateTimeDisplay:{type:String,required:!0},dateTime:{type:String,required:!0,validator:i=>{const e=new Date(i);return e instanceof Date&&!isNaN(e)}}}},l=["dateTime"];function c(i,e,r,s,d,u){return t.openBlock(),t.createElementBlock("time",{"data-qa":"dt-time-pill",dateTime:r.dateTime,class:"dt-time-pill"},t.toDisplayString(r.dateTimeDisplay),9,l)}const o=a._(n,[["render",c]]);exports.DtRecipeTimePill=o;
+//# sourceMappingURL=time-pill.cjs.map

package/dist/vue3/lib/time-pill.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-pill.cjs","sources":["../../recipes/conversation_view/time_pill/time_pill.vue"],"sourcesContent":["<template>\n  <time\n    data-qa=\"dt-time-pill\"\n    :dateTime=\"dateTime\"\n    class=\"dt-time-pill\"\n  >\n    {{ dateTimeDisplay }}\n  </time>\n</template>\n\n<script>\nimport {} from './time_pill_constants';\n\nexport default {\n  name: 'DtRecipeTimePill',\n\n  props: {\n    /**\n     * Date time display value\n     */\n    dateTimeDisplay: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Machine-readable attribute\n     * Accepts a string value of YYYY-MM-DD or YYYY-MM-DDThh:mm:ssTZD\n     */\n    dateTime: {\n      type: String,\n      required: true,\n      validator: (t) => {\n        // Since this will only ever be used in the context of a date, we're rejecting non date inputs\n        const x = new Date(t);\n        if (x instanceof Date && !isNaN(x)) {\n          return true;\n        }\n        return false;\n      },\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-time-pill {\n  border: var(--dt-size-100) solid;\n  border-radius: var(--dt-size-radius-pill);\n  border-width: var(--dt-size-100);\n  --bco: 100%;\n  border-color: var(--dt-color-black-300);\n  padding-left: var(--dt-space-500);\n  padding-right: var(--dt-space-500);\n  padding-top: var(--dt-space-300);\n  padding-bottom: var(--dt-space-300);\n  font-size: var(--dt-font-size-100);\n}\n</style>\n"],"names":["_sfc_main","t","x","_createElementBlock","$props","_hoisted_1"],"mappings":"oKAaKA,EAAU,CACb,KAAM,mBAEN,MAAO,CAIL,gBAAiB,CACf,KAAM,OACN,SAAU,EACX,EAMD,SAAU,CACR,KAAM,OACN,SAAU,GACV,UAAYC,GAAM,CAEhB,MAAMC,EAAI,IAAI,KAAKD,CAAC,EACpB,OAAIC,aAAa,MAAQ,CAAC,MAAMA,CAAC,CAIlC,CACF,CACF,CACH,8DAzCEC,EAMO,mBAAA,OAAA,CALL,UAAQ,eACP,SAAUC,EAAQ,SACnB,MAAM,kCAEHA,EAAe,eAAA,EAAA,EAAAC,CAAA"}

package/dist/vue3/lib/toast.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./utils.cjs"),h=require("../chunks/sr_only_close_button-iD7s1Pbj.js"),e=require("vue"),m=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js"),i=require("../chunks/notice_action-jO199emq.js"),f=require("../chunks/notice_constants-mC6al2Dm.js");require("./constants.cjs");require("./icon.cjs");require("@dialpad/dialtone-icons/vue3");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");require("./button.cjs");require("../chunks/link_constants-Kn6kP4i1.js");const d=["status","alert"],n=6e3,_={name:"DtToast",components:{DtNoticeIcon:i.a,DtNoticeContent:i.b,DtNoticeAction:i.D},mixins:[h.a],props:{titleId:{type:String,default(){return a.default.getUniqueString()}},contentId:{type:String,default(){return a.default.getUniqueString()}},title:{type:String,default:""},message:{type:String,default:""},role:{type:String,default:"status",validator:t=>d.includes(t)},kind:{type:String,default:"base",validator:t=>f.N.includes(t)},important:{type:Boolean,default:!1},show:{type:Boolean,default:!1},closeButtonProps:{type:Object,default:()=>({})},hideClose:{type:Boolean,default:!1},hideIcon:{type:Boolean,default:!1},hideAction:{type:Boolean,default:!1},duration:{type:Number,default:null,validator:t=>t>=n}},emits:["close","click","update:show"],data(){return{isShown:!1,minDuration:n}},computed:{kindClass(){return{error:"d-toast--error",info:"d-toast--info",success:"d-toast--success",warning:"d-toast--warning",base:"d-toast--base"}[this.kind]},shouldSetTimeout(){return!!this.duration&&this.duration>=this.minDuration}},watch:{show:{handler:function(t){this.isShown=t,t?this.setTimeout():clearTimeout(this.displayTimer)},immediate:!0}},unmounted(){clearTimeout(this.displayTimer)},methods:{closeToast(t){this.$emit("update:show",!1),this.$emit("close",t)},setTimeout(){this.shouldSetTimeout&&(this.displayTimer=setTimeout(()=>{this.isShown=!1,this.$emit("update:show",!1)},this.duration))}}},S=["aria-hidden"],y={class:"d-toast__dialog"};function T(t,C,o,g,s,l){const r=e.resolveComponent("dt-notice-icon"),c=e.resolveComponent("dt-notice-content"),u=e.resolveComponent("dt-notice-action");return s.isShown?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["d-toast",l.kindClass,{"d-toast--important":o.important}]),"data-qa":"dt-toast","aria-hidden":(!s.isShown).toString()},[e.createElementVNode("div",y,[o.hideIcon?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(r,{key:0,kind:o.kind},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"icon")]),_:3},8,["kind"])),e.createVNode(c,{"title-id":o.titleId,"content-id":o.contentId,title:o.title,role:o.role},{titleOverride:e.withCtx(()=>[e.renderSlot(t.$slots,"titleOverride")]),default:e.withCtx(()=>[e.renderSlot(t.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(o.message),1)])]),_:3},8,["title-id","content-id","title","role"]),e.createVNode(u,{"hide-action":o.hideAction,"hide-close":o.hideClose,"close-button-props":o.closeButtonProps,"visually-hidden-close":t.visuallyHiddenClose,"visually-hidden-close-label":t.visuallyHiddenCloseLabel,onClose:l.closeToast},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"action")]),_:3},8,["hide-action","hide-close","close-button-props","visually-hidden-close","visually-hidden-close-label","onClose"])])],10,S)):e.createCommentVNode("",!0)}const p=m._(_,[["render",T]]);exports.DtToast=p;exports.TOAST_MIN_DURATION=n;exports.TOAST_ROLES=d;
+//# sourceMappingURL=toast.cjs.map

package/dist/vue3/lib/toast.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.cjs","sources":["../../components/toast/toast_constants.js","../../components/toast/toast.vue"],"sourcesContent":["export const TOAST_ROLES = ['status', 'alert'];\nexport const TOAST_MIN_DURATION = 6000;\n\nexport default {\n  TOAST_ROLES,\n  TOAST_MIN_DURATION,\n};\n","<template>\n  <div\n    v-if=\"isShown\"\n    :class=\"[\n      'd-toast',\n      kindClass,\n      { 'd-toast--important': important },\n    ]\"\n    data-qa=\"dt-toast\"\n    :aria-hidden=\"(!isShown).toString()\"\n  >\n    <div class=\"d-toast__dialog\">\n      <dt-notice-icon\n        v-if=\"!hideIcon\"\n        :kind=\"kind\"\n      >\n        <!-- @slot Slot for custom icon -->\n        <slot name=\"icon\" />\n      </dt-notice-icon>\n      <dt-notice-content\n        :title-id=\"titleId\"\n        :content-id=\"contentId\"\n        :title=\"title\"\n        :role=\"role\"\n      >\n        <template #titleOverride>\n          <!-- @slot Allows you to override the title, only use this if you need to override\n          with something other than text. Otherwise use the \"title\" prop. -->\n          <slot name=\"titleOverride\" />\n        </template>\n        <!-- @slot the main textual content of the toast -->\n        <slot>\n          {{ message }}\n        </slot>\n      </dt-notice-content>\n      <dt-notice-action\n        :hide-action=\"hideAction\"\n        :hide-close=\"hideClose\"\n        :close-button-props=\"closeButtonProps\"\n        :visually-hidden-close=\"visuallyHiddenClose\"\n        :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n        @close=\"closeToast\"\n      >\n        <!-- @slot Enter a possible action for the user to take, such as a link to another page -->\n        <slot name=\"action\" />\n      </dt-notice-action>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { DtNoticeIcon, DtNoticeContent, DtNoticeAction, NOTICE_KINDS } from '@/components/notice';\nimport utils from '@/common/utils';\nimport { TOAST_ROLES, TOAST_MIN_DURATION } from './toast_constants.js';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\n\n/**\n * A toast notice, sometimes called a snackbar, is a time-based message that appears based on users' actions.\n * It contains at-a-glance information about outcomes and can be paired with actions.\n * @see https://dialtone.dialpad.com/components/toast.html\n */\nexport default {\n  name: 'DtToast',\n\n  components: {\n    DtNoticeIcon,\n    DtNoticeContent,\n    DtNoticeAction,\n  },\n\n  mixins: [SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * Sets an ID on the title element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the title.\n     */\n    titleId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Sets an ID on the content element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the content.\n     */\n    contentId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Title header of the toast. This can be left blank to remove the title from the toast entirely.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Message of the toast. Overridden by default slot.\n     */\n    message: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Provides a role for the toast. 'status' is used by default to communicate a message. 'alert' is used to\n     * communicate an important message like an error that does not contain any interactive elements.\n     * @values status, alert\n     */\n    role: {\n      type: String,\n      default: 'status',\n      validator: (role) => {\n        return TOAST_ROLES.includes(role);\n      },\n    },\n\n    /**\n     * Severity level of the toast, sets the icon and background\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validator: (kind) => {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Used in scenarios where the message needs to visually dominate the screen.\n     * @values true, false\n     */\n    important: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Controls whether the toast is shown. If a valid duration is provided, the toast will disappear\n     * after reaching the duration time, so it's convenient to use `v-model` with this prop to update\n     * the data in your component.\n     * Supports v-model\n     * @values true, false\n     */\n    show: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Props for the toast close button.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Hides the close button from the toast\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the icon from the notice\n     * @values true, false\n     */\n    hideIcon: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The duration in ms the toast will display before disappearing.\n     * The toast won't disappear if the duration is not provided.\n     * If it's provided, it should be equal to or greater than 6000.\n     */\n    duration: {\n      type: Number,\n      default: null,\n      validator: (duration) => {\n        return duration >= TOAST_MIN_DURATION;\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Sync show value\n     *\n     * @event update:show\n     */\n    'update:show',\n  ],\n\n  data () {\n    return {\n      isShown: false,\n      minDuration: TOAST_MIN_DURATION,\n    };\n  },\n\n  computed: {\n    kindClass () {\n      const kindClasses = {\n        error: 'd-toast--error',\n        info: 'd-toast--info',\n        success: 'd-toast--success',\n        warning: 'd-toast--warning',\n        base: 'd-toast--base',\n      };\n\n      return kindClasses[this.kind];\n    },\n\n    shouldSetTimeout () {\n      return !!this.duration && this.duration >= this.minDuration;\n    },\n  },\n\n  watch: {\n    show: {\n      handler: function (show) {\n        this.isShown = show;\n        if (show) {\n          this.setTimeout();\n        } else {\n          clearTimeout(this.displayTimer);\n        }\n      },\n\n      immediate: true,\n    },\n  },\n\n  unmounted () {\n    clearTimeout(this.displayTimer);\n  },\n\n  methods: {\n    closeToast (event) {\n      this.$emit('update:show', false);\n      this.$emit('close', event);\n    },\n\n    setTimeout () {\n      if (this.shouldSetTimeout) {\n        this.displayTimer = setTimeout(() => {\n          this.isShown = false;\n          this.$emit('update:show', false);\n        }, this.duration);\n      }\n    },\n  },\n};\n</script>\n"],"names":["TOAST_ROLES","TOAST_MIN_DURATION","_sfc_main","DtNoticeIcon","DtNoticeContent","DtNoticeAction","SrOnlyCloseButtonMixin","utils","role","kind","NOTICE_KINDS","duration","show","event","_hoisted_2","$data","_createElementBlock","_normalizeClass","$options","$props","_createElementVNode","_createBlock","_component_dt_notice_icon","_renderSlot","_ctx","_createVNode","_component_dt_notice_content","_component_dt_notice_action"],"mappings":"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"}

package/dist/vue3/lib/toast.js

@@ -9,7 +9,6 @@ import "./icon.js";
 import "@dialpad/dialtone-icons/vue3";
 import "../chunks/icon_constants-OpYAAKwF.js";
 import "@dialpad/dialtone-icons/icons.json";
-import "./skeleton.js";
 import "./button.js";
 import "../chunks/link_constants-vIUB92L4.js";
 const B = ["status", "alert"], u = 6e3, D = {
@@ -252,9 +251,9 @@ function A(t, E, e, V, n, a) {
     ])
   ], 10, I)) : r("", !0);
 }
-const Q = /* @__PURE__ */ k(D, [["render", A]]);
+const J = /* @__PURE__ */ k(D, [["render", A]]);
 export {
-  Q as DtToast,
+  J as DtToast,
   u as TOAST_MIN_DURATION,
   B as TOAST_ROLES
 };

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

@@ -1 +1 @@
-{"version":3,"file":"toast.js","sources":["../../components/toast/toast_constants.js","../../components/toast/toast.vue"],"sourcesContent":["export const TOAST_ROLES = ['status', 'alert'];\nexport const TOAST_MIN_DURATION = 6000;\n\nexport default {\n  TOAST_ROLES,\n  TOAST_MIN_DURATION,\n};\n","<template>\n  <div\n    v-if=\"isShown\"\n    :class=\"[\n      'd-toast',\n      kindClass,\n      { 'd-toast--important': important },\n    ]\"\n    data-qa=\"dt-toast\"\n    :aria-hidden=\"(!isShown).toString()\"\n  >\n    <div class=\"d-toast__dialog\">\n      <dt-notice-icon\n        v-if=\"!hideIcon\"\n        :kind=\"kind\"\n      >\n        <!-- @slot Slot for custom icon -->\n        <slot name=\"icon\" />\n      </dt-notice-icon>\n      <dt-notice-content\n        :title-id=\"titleId\"\n        :content-id=\"contentId\"\n        :title=\"title\"\n        :role=\"role\"\n      >\n        <template #titleOverride>\n          <!-- @slot Allows you to override the title, only use this if you need to override\n          with something other than text. Otherwise use the \"title\" prop. -->\n          <slot name=\"titleOverride\" />\n        </template>\n        <!-- @slot the main textual content of the toast -->\n        <slot>\n          {{ message }}\n        </slot>\n      </dt-notice-content>\n      <dt-notice-action\n        :hide-action=\"hideAction\"\n        :hide-close=\"hideClose\"\n        :close-button-props=\"closeButtonProps\"\n        :visually-hidden-close=\"visuallyHiddenClose\"\n        :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n        @close=\"closeToast\"\n      >\n        <!-- @slot Enter a possible action for the user to take, such as a link to another page -->\n        <slot name=\"action\" />\n      </dt-notice-action>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { DtNoticeIcon, DtNoticeContent, DtNoticeAction, NOTICE_KINDS } from '@/components/notice';\nimport utils from '@/common/utils';\nimport { TOAST_ROLES, TOAST_MIN_DURATION } from './toast_constants.js';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\n\n/**\n * A toast notice, sometimes called a snackbar, is a time-based message that appears based on users' actions.\n * It contains at-a-glance information about outcomes and can be paired with actions.\n * @see https://dialtone.dialpad.com/components/toast.html\n */\nexport default {\n  name: 'DtToast',\n\n  components: {\n    DtNoticeIcon,\n    DtNoticeContent,\n    DtNoticeAction,\n  },\n\n  mixins: [SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * Sets an ID on the title element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the title.\n     */\n    titleId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Sets an ID on the content element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the content.\n     */\n    contentId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Title header of the toast. This can be left blank to remove the title from the toast entirely.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Message of the toast. Overridden by default slot.\n     */\n    message: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Provides a role for the toast. 'status' is used by default to communicate a message. 'alert' is used to\n     * communicate an important message like an error that does not contain any interactive elements.\n     * @values status, alert\n     */\n    role: {\n      type: String,\n      default: 'status',\n      validator: (role) => {\n        return TOAST_ROLES.includes(role);\n      },\n    },\n\n    /**\n     * Severity level of the toast, sets the icon and background\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validator: (kind) => {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Used in scenarios where the message needs to visually dominate the screen.\n     * @values true, false\n     */\n    important: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Controls whether the toast is shown. If a valid duration is provided, the toast will disappear\n     * after reaching the duration time, so it's convenient to use `v-model` with this prop to update\n     * the data in your component.\n     * Supports v-model\n     * @values true, false\n     */\n    show: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Props for the toast close button.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Hides the close button from the toast\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the icon from the notice\n     * @values true, false\n     */\n    hideIcon: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The duration in ms the toast will display before disappearing.\n     * The toast won't disappear if the duration is not provided.\n     * If it's provided, it should be equal to or greater than 6000.\n     */\n    duration: {\n      type: Number,\n      default: null,\n      validator: (duration) => {\n        return duration >= TOAST_MIN_DURATION;\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Sync show value\n     *\n     * @event update:show\n     */\n    'update:show',\n  ],\n\n  data () {\n    return {\n      isShown: false,\n      minDuration: TOAST_MIN_DURATION,\n    };\n  },\n\n  computed: {\n    kindClass () {\n      const kindClasses = {\n        error: 'd-toast--error',\n        info: 'd-toast--info',\n        success: 'd-toast--success',\n        warning: 'd-toast--warning',\n        base: 'd-toast--base',\n      };\n\n      return kindClasses[this.kind];\n    },\n\n    shouldSetTimeout () {\n      return !!this.duration && this.duration >= this.minDuration;\n    },\n  },\n\n  watch: {\n    show: {\n      handler: function (show) {\n        this.isShown = show;\n        if (show) {\n          this.setTimeout();\n        } else {\n          clearTimeout(this.displayTimer);\n        }\n      },\n\n      immediate: true,\n    },\n  },\n\n  unmounted () {\n    clearTimeout(this.displayTimer);\n  },\n\n  methods: {\n    closeToast (event) {\n      this.$emit('update:show', false);\n      this.$emit('close', event);\n    },\n\n    setTimeout () {\n      if (this.shouldSetTimeout) {\n        this.displayTimer = setTimeout(() => {\n          this.isShown = false;\n          this.$emit('update:show', false);\n        }, this.duration);\n      }\n    },\n  },\n};\n</script>\n"],"names":["TOAST_ROLES","TOAST_MIN_DURATION","_sfc_main","DtNoticeIcon","DtNoticeContent","DtNoticeAction","SrOnlyCloseButtonMixin","utils","role","kind","NOTICE_KINDS","duration","show","event","_hoisted_2","$data","_createElementBlock","_normalizeClass","$options","$props","_createElementVNode","_createBlock","_component_dt_notice_icon","_renderSlot","_ctx","_createVNode","_component_dt_notice_content","_component_dt_notice_action"],"mappings":"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"}
+{"version":3,"file":"toast.js","sources":["../../components/toast/toast_constants.js","../../components/toast/toast.vue"],"sourcesContent":["export const TOAST_ROLES = ['status', 'alert'];\nexport const TOAST_MIN_DURATION = 6000;\n\nexport default {\n  TOAST_ROLES,\n  TOAST_MIN_DURATION,\n};\n","<template>\n  <div\n    v-if=\"isShown\"\n    :class=\"[\n      'd-toast',\n      kindClass,\n      { 'd-toast--important': important },\n    ]\"\n    data-qa=\"dt-toast\"\n    :aria-hidden=\"(!isShown).toString()\"\n  >\n    <div class=\"d-toast__dialog\">\n      <dt-notice-icon\n        v-if=\"!hideIcon\"\n        :kind=\"kind\"\n      >\n        <!-- @slot Slot for custom icon -->\n        <slot name=\"icon\" />\n      </dt-notice-icon>\n      <dt-notice-content\n        :title-id=\"titleId\"\n        :content-id=\"contentId\"\n        :title=\"title\"\n        :role=\"role\"\n      >\n        <template #titleOverride>\n          <!-- @slot Allows you to override the title, only use this if you need to override\n          with something other than text. Otherwise use the \"title\" prop. -->\n          <slot name=\"titleOverride\" />\n        </template>\n        <!-- @slot the main textual content of the toast -->\n        <slot>\n          {{ message }}\n        </slot>\n      </dt-notice-content>\n      <dt-notice-action\n        :hide-action=\"hideAction\"\n        :hide-close=\"hideClose\"\n        :close-button-props=\"closeButtonProps\"\n        :visually-hidden-close=\"visuallyHiddenClose\"\n        :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n        @close=\"closeToast\"\n      >\n        <!-- @slot Enter a possible action for the user to take, such as a link to another page -->\n        <slot name=\"action\" />\n      </dt-notice-action>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { DtNoticeIcon, DtNoticeContent, DtNoticeAction, NOTICE_KINDS } from '@/components/notice';\nimport utils from '@/common/utils';\nimport { TOAST_ROLES, TOAST_MIN_DURATION } from './toast_constants.js';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\n\n/**\n * A toast notice, sometimes called a snackbar, is a time-based message that appears based on users' actions.\n * It contains at-a-glance information about outcomes and can be paired with actions.\n * @see https://dialtone.dialpad.com/components/toast.html\n */\nexport default {\n  name: 'DtToast',\n\n  components: {\n    DtNoticeIcon,\n    DtNoticeContent,\n    DtNoticeAction,\n  },\n\n  mixins: [SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * Sets an ID on the title element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the title.\n     */\n    titleId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Sets an ID on the content element of the component. Useful for aria-describedby\n     * or aria-labelledby or any other reason you may need an id to refer to the content.\n     */\n    contentId: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * Title header of the toast. This can be left blank to remove the title from the toast entirely.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Message of the toast. Overridden by default slot.\n     */\n    message: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Provides a role for the toast. 'status' is used by default to communicate a message. 'alert' is used to\n     * communicate an important message like an error that does not contain any interactive elements.\n     * @values status, alert\n     */\n    role: {\n      type: String,\n      default: 'status',\n      validator: (role) => {\n        return TOAST_ROLES.includes(role);\n      },\n    },\n\n    /**\n     * Severity level of the toast, sets the icon and background\n     * @values base, error, info, success, warning\n     */\n    kind: {\n      type: String,\n      default: 'base',\n      validator: (kind) => {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Used in scenarios where the message needs to visually dominate the screen.\n     * @values true, false\n     */\n    important: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Controls whether the toast is shown. If a valid duration is provided, the toast will disappear\n     * after reaching the duration time, so it's convenient to use `v-model` with this prop to update\n     * the data in your component.\n     * Supports v-model\n     * @values true, false\n     */\n    show: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Props for the toast close button.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Hides the close button from the toast\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the icon from the notice\n     * @values true, false\n     */\n    hideIcon: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Hides the action from the notice\n     * @values true, false\n     */\n    hideAction: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The duration in ms the toast will display before disappearing.\n     * The toast won't disappear if the duration is not provided.\n     * If it's provided, it should be equal to or greater than 6000.\n     */\n    duration: {\n      type: Number,\n      default: null,\n      validator: (duration) => {\n        return duration >= TOAST_MIN_DURATION;\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Sync show value\n     *\n     * @event update:show\n     */\n    'update:show',\n  ],\n\n  data () {\n    return {\n      isShown: false,\n      minDuration: TOAST_MIN_DURATION,\n    };\n  },\n\n  computed: {\n    kindClass () {\n      const kindClasses = {\n        error: 'd-toast--error',\n        info: 'd-toast--info',\n        success: 'd-toast--success',\n        warning: 'd-toast--warning',\n        base: 'd-toast--base',\n      };\n\n      return kindClasses[this.kind];\n    },\n\n    shouldSetTimeout () {\n      return !!this.duration && this.duration >= this.minDuration;\n    },\n  },\n\n  watch: {\n    show: {\n      handler: function (show) {\n        this.isShown = show;\n        if (show) {\n          this.setTimeout();\n        } else {\n          clearTimeout(this.displayTimer);\n        }\n      },\n\n      immediate: true,\n    },\n  },\n\n  unmounted () {\n    clearTimeout(this.displayTimer);\n  },\n\n  methods: {\n    closeToast (event) {\n      this.$emit('update:show', false);\n      this.$emit('close', event);\n    },\n\n    setTimeout () {\n      if (this.shouldSetTimeout) {\n        this.displayTimer = setTimeout(() => {\n          this.isShown = false;\n          this.$emit('update:show', false);\n        }, this.duration);\n      }\n    },\n  },\n};\n</script>\n"],"names":["TOAST_ROLES","TOAST_MIN_DURATION","_sfc_main","DtNoticeIcon","DtNoticeContent","DtNoticeAction","SrOnlyCloseButtonMixin","utils","role","kind","NOTICE_KINDS","duration","show","event","_hoisted_2","$data","_createElementBlock","_normalizeClass","$options","$props","_createElementVNode","_createBlock","_component_dt_notice_icon","_renderSlot","_ctx","_createVNode","_component_dt_notice_content","_component_dt_notice_action"],"mappings":"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"}

package/dist/vue3/lib/toggle.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),o=require("./utils.cjs"),d=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js");require("./constants.cjs");const i={sm:"d-toggle--small",md:""},r=[!1,!0,"mixed"],c={name:"DtToggle",inheritAttrs:!1,model:{prop:"checked",event:"change"},props:{id:{type:String,default(){return o.getUniqueString()}},disabled:{type:Boolean,default:!1},checked:{type:[Boolean,String],default:!1,validator:t=>r.includes(t)},toggleOnClick:{type:Boolean,default:!0},size:{type:String,default:"md",validator:t=>Object.keys(i).includes(t)},showIcon:{type:Boolean,default:!0},labelClass:{type:[String,Array,Object],default:""},labelChildProps:{type:Object,default:()=>({})}},emits:["change"],data(){return{internalChecked:this.checked,hasSlotContent:o.hasSlotContent}},computed:{inputListeners(){return{...this.$attrs,onClick:t=>this.toggleCheckedValue()}},isIndeterminate(){return this.internalChecked==="mixed"},toggleRole(){return this.isIndeterminate?"checkbox":"switch"},toggleClasses(){return["d-toggle",i[this.size],{"d-toggle--checked":this.internalChecked===!0,"d-toggle--disabled":this.disabled,"d-toggle--indeterminate":this.isIndeterminate}]}},watch:{checked(t){this.internalChecked=t}},mounted(){this.runValidations()},methods:{toggleCheckedValue(){this.$emit("change",!this.internalChecked),this.toggleOnClick&&(this.internalChecked=!this.internalChecked)},hasSlotLabel(){return!!this.$slots.default},runValidations(){this.validateInputLabels(this.hasSlotLabel(),this.$attrs["aria-label"])},validateInputLabels(t,s){!t&&!s&&e.warn("You must provide an aria-label when there is no label passed",this)}}},h={class:"d-toggle-wrapper"},u=["for"],g=["id","role","aria-checked","disabled","aria-disabled"],b={key:0,class:"d-toggle__inner"};function k(t,s,l,C,n,a){return e.openBlock(),e.createElementBlock("div",h,[n.hasSlotContent(t.$slots.default)?(e.openBlock(),e.createElementBlock("label",e.mergeProps({key:0,class:l.labelClass,for:l.id},l.labelChildProps,{"data-qa":"toggle-label"}),[e.renderSlot(t.$slots,"default")],16,u)):e.createCommentVNode("",!0),e.createElementVNode("button",e.mergeProps({id:l.id,role:a.toggleRole,type:"button","aria-checked":n.internalChecked.toString(),disabled:l.disabled,"aria-disabled":l.disabled.toString(),class:a.toggleClasses},a.inputListeners),[l.showIcon?(e.openBlock(),e.createElementBlock("span",b)):e.createCommentVNode("",!0)],16,g)])}const m=d._(c,[["render",k]]);exports.DtToggle=m;exports.TOGGLE_CHECKED_VALUES=r;exports.TOGGLE_SIZE_MODIFIERS=i;
+//# sourceMappingURL=toggle.cjs.map

package/dist/vue3/lib/toggle.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.cjs","sources":["../../components/toggle/toggle_constants.js","../../components/toggle/toggle.vue"],"sourcesContent":["export const TOGGLE_SIZE_MODIFIERS = {\n  sm: 'd-toggle--small',\n  md: '',\n};\n\nexport const TOGGLE_CHECKED_VALUES = [false, true, 'mixed'];\n\nexport default {\n  TOGGLE_SIZE_MODIFIERS,\n  TOGGLE_CHECKED_VALUES,\n};\n","<template>\n  <div class=\"d-toggle-wrapper\">\n    <label\n      v-if=\"hasSlotContent($slots.default)\"\n      :class=\"labelClass\"\n      :for=\"id\"\n      v-bind=\"labelChildProps\"\n      data-qa=\"toggle-label\"\n    >\n      <!-- @slot Slot for the main content -->\n      <slot />\n    </label>\n    <button\n      :id=\"id\"\n      :role=\"toggleRole\"\n      type=\"button\"\n      :aria-checked=\"internalChecked.toString()\"\n      :disabled=\"disabled\"\n      :aria-disabled=\"disabled.toString()\"\n      :class=\"toggleClasses\"\n      v-bind=\"inputListeners\"\n    >\n      <span\n        v-if=\"showIcon\"\n        class=\"d-toggle__inner\"\n      />\n    </button>\n  </div>\n</template>\n\n<script>\nimport { warn } from 'vue';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { TOGGLE_CHECKED_VALUES, TOGGLE_SIZE_MODIFIERS } from '@/components/toggle/toggle_constants';\n\n/**\n * A toggle (or \"switch\") is a button control element that allows the user to make a binary (on/off) selection.\n * @see https://dialtone.dialpad.com/components/toggle.html\n */\nexport default {\n\n  name: 'DtToggle',\n\n  inheritAttrs: false,\n\n  model: {\n    prop: 'checked',\n    event: 'change',\n  },\n\n  props: {\n\n    /**\n     * The id of the toggle\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * Disables the toggle interactions\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Value of the toggle\n     * @model checked\n     * @values true, false, 'mixed'\n     */\n    checked: {\n      type: [Boolean, String],\n      default: false,\n      validator: (v) => TOGGLE_CHECKED_VALUES.includes(v),\n    },\n\n    /**\n     * Whether the component toggles on click. If you set this to false it means you will handle the toggling manually\n     * via the checked prop or v-model. Change events will still be triggered.\n     * @values true, false\n     */\n    toggleOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The size of the toggle.\n     * @values sm, md\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(TOGGLE_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Shows the icon\n     * @values true, false\n     */\n    showIcon: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the label container\n     */\n    labelChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n  },\n\n  emits: [\n    /**\n     * Toggle change event\n     *\n     * @event change\n     * @type {Boolean}\n     * @model change\n     */\n    'change',\n  ],\n\n  data () {\n    return {\n      internalChecked: this.checked,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    inputListeners () {\n      return {\n        ...this.$attrs,\n        onClick: _ => this.toggleCheckedValue(),\n      };\n    },\n\n    isIndeterminate () {\n      return this.internalChecked === 'mixed';\n    },\n\n    toggleRole () {\n      return this.isIndeterminate ? 'checkbox' : 'switch';\n    },\n\n    toggleClasses () {\n      return [\n        'd-toggle',\n        TOGGLE_SIZE_MODIFIERS[this.size],\n        {\n          'd-toggle--checked': this.internalChecked === true,\n          'd-toggle--disabled': this.disabled,\n          'd-toggle--indeterminate': this.isIndeterminate,\n        },\n      ];\n    },\n  },\n\n  watch: {\n    checked (newChecked) {\n      this.internalChecked = newChecked;\n    },\n  },\n\n  mounted () {\n    this.runValidations();\n  },\n\n  methods: {\n    toggleCheckedValue () {\n      this.$emit('change', !this.internalChecked);\n\n      if (this.toggleOnClick) {\n        this.internalChecked = !this.internalChecked;\n      }\n    },\n\n    hasSlotLabel () {\n      return !!(this.$slots.default);\n    },\n\n    runValidations () {\n      this.validateInputLabels(this.hasSlotLabel(), this.$attrs['aria-label']);\n    },\n\n    validateInputLabels (hasLabel, ariaLabel) {\n      if (!hasLabel && !ariaLabel) {\n        warn(\n          'You must provide an aria-label when there is no label passed',\n          this,\n        );\n      }\n    },\n  },\n};\n</script>\n"],"names":["TOGGLE_SIZE_MODIFIERS","TOGGLE_CHECKED_VALUES","_sfc_main","getUniqueString","v","s","hasSlotContent","_","newChecked","hasLabel","ariaLabel","warn","_hoisted_1","_openBlock","_createElementBlock","$data","_ctx","_mergeProps","$props","_renderSlot","_createElementVNode","$options","_hoisted_4"],"mappings":"wNAAY,MAACA,EAAwB,CACnC,GAAI,kBACJ,GAAI,EACN,EAEaC,EAAwB,CAAC,GAAO,GAAM,OAAO,ECkCrDC,EAAU,CAEb,KAAM,WAEN,aAAc,GAEd,MAAO,CACL,KAAM,UACN,MAAO,QACR,EAED,MAAO,CAKL,GAAI,CACF,KAAM,OACN,SAAW,CAAE,OAAOC,EAAe,gBAAA,CAAK,CACzC,EAMD,SAAU,CACR,KAAM,QACN,QAAS,EACV,EAOD,QAAS,CACP,KAAM,CAAC,QAAS,MAAM,EACtB,QAAS,GACT,UAAYC,GAAMH,EAAsB,SAASG,CAAC,CACnD,EAOD,cAAe,CACb,KAAM,QACN,QAAS,EACV,EAMD,KAAM,CACJ,KAAM,OACN,QAAS,KACT,UAAYC,GAAM,OAAO,KAAKL,CAAqB,EAAE,SAASK,CAAC,CAChE,EAMD,SAAU,CACR,KAAM,QACN,QAAS,EACV,EAKD,WAAY,CACV,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,EACV,EAKD,gBAAiB,CACf,KAAM,OACN,QAAS,KAAO,CAAA,EACjB,CACF,EAED,MAAO,CAQL,QACD,EAED,MAAQ,CACN,MAAO,CACL,gBAAiB,KAAK,QACtB,eAAAC,EAAc,eAEjB,EAED,SAAU,CACR,gBAAkB,CAChB,MAAO,CACL,GAAG,KAAK,OACR,QAASC,GAAK,KAAK,mBAAoB,EAE1C,EAED,iBAAmB,CACjB,OAAO,KAAK,kBAAoB,OACjC,EAED,YAAc,CACZ,OAAO,KAAK,gBAAkB,WAAa,QAC5C,EAED,eAAiB,CACf,MAAO,CACL,WACAP,EAAsB,KAAK,IAAI,EAC/B,CACE,oBAAqB,KAAK,kBAAoB,GAC9C,qBAAsB,KAAK,SAC3B,0BAA2B,KAAK,eACjC,EAEJ,CACF,EAED,MAAO,CACL,QAASQ,EAAY,CACnB,KAAK,gBAAkBA,CACxB,CACF,EAED,SAAW,CACT,KAAK,eAAc,CACpB,EAED,QAAS,CACP,oBAAsB,CACpB,KAAK,MAAM,SAAU,CAAC,KAAK,eAAe,EAEtC,KAAK,gBACP,KAAK,gBAAkB,CAAC,KAAK,gBAEhC,EAED,cAAgB,CACd,MAAO,CAAC,CAAE,KAAK,OAAO,OACvB,EAED,gBAAkB,CAChB,KAAK,oBAAoB,KAAK,aAAY,EAAI,KAAK,OAAO,YAAY,CAAC,CACxE,EAED,oBAAqBC,EAAUC,EAAW,CACpC,CAACD,GAAY,CAACC,GAChBC,EAAI,KACF,+DACA,KAGL,CACF,CACH,EAhNOC,EAAA,CAAA,MAAM,kBAAkB,+EAuBvB,MAAM,2CAvBZ,OAAAC,YAAA,EAAAC,qBA0BM,MA1BNF,EA0BM,CAxBIG,EAAc,eAACC,EAAM,OAAC,OAAO,GADrCH,EAAAA,YAAAC,EAAAA,mBASQ,QATRG,aASQ,OAPL,MAAOC,EAAU,WACjB,IAAKA,EAAE,IACAA,EAAe,gBAAA,CACvB,UAAQ,cAAc,CAAA,EAAA,CAGtBC,aAAQH,EAAA,OAAA,SAAA,sCAEVI,EAAA,mBAcS,SAdTH,aAcS,CAbN,GAAIC,EAAE,GACN,KAAMG,EAAU,WACjB,KAAK,SACJ,eAAcN,EAAe,gBAAC,SAAQ,EACtC,SAAUG,EAAQ,SAClB,gBAAeA,EAAQ,SAAC,SAAQ,EAChC,MAAOG,EAAa,eACbA,EAAc,cAAA,EAAA,CAGdH,EAAQ,UADhBL,EAAAA,YAAAC,EAAAA,mBAGE,OAHFQ,CAGE"}

package/dist/vue3/lib/tooltip-directive.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("./utils.cjs"),r=require("vue"),d=require("./tooltip.cjs");require("./constants.cjs");require("../chunks/popover_constants-hOEhklvr.js");require("tippy.js");require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js");require("./lazy-show.cjs");const m={name:"dt-tooltip-directive",install(u){let p;const s=document.createElement("div");document.body.appendChild(s);const a="top";r.createApp({name:"DtTooltipDirectiveApp",components:{DtTooltip:d.DtTooltip},data(){return{tooltips:[]}},mounted(){p=r.getCurrentInstance()},methods:{addOrUpdateTooltip(t,e,o){const i=this.tooltips.findIndex(l=>l.id===t);i!==-1?(this.tooltips[i].message=e,this.tooltips[i].placement=o):this.tooltips.push({id:t,message:e,placement:o})},removeTooltip(t){this.tooltips=this.tooltips.filter(e=>e.id!==t)}},render(){return r.h("div",this.tooltips.map(({id:t,message:e,placement:o})=>r.h(d.DtTooltip,{key:t,message:e,placement:o,delay:process.env.NODE_ENV!=="test",externalAnchor:`[data-dt-tooltip-id="${t}"]`})))}}).mount(s),u.directive("dt-tooltip",{beforeMount(t,e){n(t,e)},updated(t,e){e.value!==e.oldValue&&n(t,e)},unmounted(t){p.ctx.removeTooltip(t.getAttribute("data-dt-tooltip-id"))}});function n(t,e){const o=t.getAttribute("data-dt-tooltip-id")||c.getUniqueString(),i=e.value,l=e.arg||a;t.setAttribute("data-dt-tooltip-id",o),p.ctx.addOrUpdateTooltip(o,i,l)}}};exports.DtTooltipDirective=m;
+//# sourceMappingURL=tooltip-directive.cjs.map

package/dist/vue3/lib/tooltip-directive.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-directive.cjs","sources":["../../directives/tooltip/tooltip.js"],"sourcesContent":["import { DtTooltip } from '@/components/tooltip';\nimport { getUniqueString } from '@/common/utils';\nimport { createApp, getCurrentInstance, h } from 'vue';\n\nexport const DtTooltipDirective = {\n  name: 'dt-tooltip-directive',\n  install (app) {\n    let tooltipInstance;\n    const mountPoint = document.createElement('div');\n    document.body.appendChild(mountPoint);\n\n    const DEFAULT_PLACEMENT = 'top';\n    const DtTooltipDirectiveApp = createApp({\n      name: 'DtTooltipDirectiveApp',\n      components: { DtTooltip },\n      data () {\n        return {\n          tooltips: [],\n        };\n      },\n\n      mounted () {\n        tooltipInstance = getCurrentInstance();\n      },\n\n      methods: {\n        addOrUpdateTooltip (id, message, placement) {\n          const index = this.tooltips.findIndex(tooltip => tooltip.id === id);\n          if (index !== -1) {\n            // Update existing tooltip\n            this.tooltips[index].message = message;\n            this.tooltips[index].placement = placement;\n          } else {\n            // Add new tooltip\n            this.tooltips.push({ id, message, placement });\n          }\n        },\n\n        removeTooltip (id) {\n          this.tooltips = this.tooltips.filter(tooltip => tooltip.id !== id);\n        },\n      },\n\n      render () {\n        return h('div',\n          this.tooltips.map(({ id, message, placement }) => {\n            return h(DtTooltip, {\n              key: id,\n              message,\n              placement,\n              /**\n               * Set the delay to false when running tests only.\n               */\n              delay: process.env.NODE_ENV !== 'test',\n              externalAnchor: `[data-dt-tooltip-id=\"${id}\"]`,\n            });\n          }),\n        );\n      },\n    });\n\n    DtTooltipDirectiveApp.mount(mountPoint);\n\n    app.directive('dt-tooltip', {\n      beforeMount (anchor, binding) {\n        // Initial tooltip setup\n        setupTooltip(anchor, binding);\n      },\n      updated (anchor, binding) {\n        // Update tooltip on binding value change\n        if (binding.value !== binding.oldValue) {\n          setupTooltip(anchor, binding);\n        }\n      },\n      unmounted (anchor) {\n        tooltipInstance.ctx.removeTooltip(anchor.getAttribute('data-dt-tooltip-id'));\n      },\n    });\n\n    function setupTooltip (anchor, binding) {\n      const tooltipId = anchor.getAttribute('data-dt-tooltip-id') || getUniqueString();\n      const message = binding.value;\n      const placement = binding.arg || DEFAULT_PLACEMENT;\n\n      anchor.setAttribute('data-dt-tooltip-id', tooltipId);\n\n      tooltipInstance.ctx.addOrUpdateTooltip(tooltipId, message, placement);\n    }\n  },\n};\n\nexport default DtTooltipDirective;\n"],"names":["DtTooltipDirective","app","tooltipInstance","mountPoint","DEFAULT_PLACEMENT","createApp","DtTooltip","getCurrentInstance","id","message","placement","index","tooltip","h","anchor","binding","setupTooltip","tooltipId","getUniqueString"],"mappings":"mVAIY,MAACA,EAAqB,CAChC,KAAM,uBACN,QAASC,EAAK,CACZ,IAAIC,EACJ,MAAMC,EAAa,SAAS,cAAc,KAAK,EAC/C,SAAS,KAAK,YAAYA,CAAU,EAEpC,MAAMC,EAAoB,MACIC,EAAAA,UAAU,CACtC,KAAM,wBACN,WAAY,CAAEC,UAAAA,EAAAA,SAAW,EACzB,MAAQ,CACN,MAAO,CACL,SAAU,CAAE,CACtB,CACO,EAED,SAAW,CACTJ,EAAkBK,EAAkB,mBAAA,CACrC,EAED,QAAS,CACP,mBAAoBC,EAAIC,EAASC,EAAW,CAC1C,MAAMC,EAAQ,KAAK,SAAS,UAAUC,GAAWA,EAAQ,KAAOJ,CAAE,EAC9DG,IAAU,IAEZ,KAAK,SAASA,CAAK,EAAE,QAAUF,EAC/B,KAAK,SAASE,CAAK,EAAE,UAAYD,GAGjC,KAAK,SAAS,KAAK,CAAE,GAAAF,EAAI,QAAAC,EAAS,UAAAC,CAAS,CAAE,CAEhD,EAED,cAAeF,EAAI,CACjB,KAAK,SAAW,KAAK,SAAS,OAAOI,GAAWA,EAAQ,KAAOJ,CAAE,CAClE,CACF,EAED,QAAU,CACR,OAAOK,EAAC,EAAC,MACP,KAAK,SAAS,IAAI,CAAC,CAAE,GAAAL,EAAI,QAAAC,EAAS,UAAAC,KACzBG,EAAAA,EAAEP,EAAAA,UAAW,CAClB,IAAKE,EACL,QAAAC,EACA,UAAAC,EAIA,MAAO,QAAQ,IAAI,WAAa,OAChC,eAAgB,wBAAwBF,CAAE,IACxD,CAAa,CACF,CACX,CACO,CACP,CAAK,EAEqB,MAAML,CAAU,EAEtCF,EAAI,UAAU,aAAc,CAC1B,YAAaa,EAAQC,EAAS,CAE5BC,EAAaF,EAAQC,CAAO,CAC7B,EACD,QAASD,EAAQC,EAAS,CAEpBA,EAAQ,QAAUA,EAAQ,UAC5BC,EAAaF,EAAQC,CAAO,CAE/B,EACD,UAAWD,EAAQ,CACjBZ,EAAgB,IAAI,cAAcY,EAAO,aAAa,oBAAoB,CAAC,CAC5E,CACP,CAAK,EAED,SAASE,EAAcF,EAAQC,EAAS,CACtC,MAAME,EAAYH,EAAO,aAAa,oBAAoB,GAAKI,EAAe,gBAAA,EACxET,EAAUM,EAAQ,MAClBL,EAAYK,EAAQ,KAAOX,EAEjCU,EAAO,aAAa,qBAAsBG,CAAS,EAEnDf,EAAgB,IAAI,mBAAmBe,EAAWR,EAASC,CAAS,CACrE,CACF,CACH"}

package/dist/vue3/lib/tooltip.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../chunks/popover_constants-hOEhklvr.js"),l=require("./utils.cjs"),o=require("vue"),u=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js"),d=require("./lazy-show.cjs");require("tippy.js");require("./constants.cjs");const p={name:"DtTooltip",components:{DtLazyShow:d.DtLazyShow},props:{id:{type:String,default(){return l.getUniqueString()}},fallbackPlacements:{type:Array,default:()=>["auto"]},inverted:{type:Boolean,default:!1},offset:{type:Array,default:()=>[0,-4]},placement:{type:String,default:"top",validator(e){return i.T.includes(e)}},sticky:{type:[Boolean,String],default:!1,validator:e=>i.j.includes(e)},appendTo:{type:[HTMLElement,String],default:"body",validator:e=>i.e.includes(e)||e instanceof HTMLElement},contentClass:{type:[String,Object,Array],default:""},message:{type:String,default:""},enabled:{type:Boolean,default:!0},show:{type:Boolean,default:null},transition:{type:String,default:"fade"},contentAppear:{type:Boolean,default:!1},delay:{type:Boolean,default:!0},externalAnchor:{type:String,default:null}},emits:["shown","update:show"],data(){return{TOOLTIP_KIND_MODIFIERS:i.i,hasSlotContent:l.hasSlotContent,tip:null,inTimer:null,isShown:!1,currentPlacement:this.placement,isTouchDevice:!1}},computed:{isVisible(){var a,n;const e=!!((a=this.message)!=null&&a.trim()),t=!!((n=this.$slots)!=null&&n.default),r=!this.isTouchDevice;return this.isShown&&this.enabled&&(e||t)&&r},tooltipListeners(){return{"after-leave":()=>{this.onLeaveTransitionComplete()},"after-enter":()=>{this.onEnterTransitionComplete()}}},tippyProps(){return{offset:this.offset,interactive:!1,trigger:"manual",placement:this.placement,sticky:this.sticky,popperOptions:i.l({fallbackPlacements:this.fallbackPlacements,hasHideModifierEnabled:!0,onChangePlacement:this.onChangePlacement})}},anchor(){return this.externalAnchor?document.body.querySelector(this.externalAnchor):i.m(this.$refs.anchor)}},watch:{tippyProps:{handler:"setProps",deep:!0},show:{handler:function(e){e!==null&&(this.isShown=e)},immediate:!0},isShown(e){e?(this.setProps(),this.tip.show()):this.tip.hide()},sticky(e){this.tip.setProps({sticky:e})}},mounted(){!this.enabled&&this.show!=null&&(console.warn("Tooltip: You cannot use both the enabled and show props at the same time."),console.warn("The show prop will be ignored.")),this.externalAnchor&&this.addExternalAnchorEventListeners(),this.tip=i.n(this.anchor,this.initOptions()),this.isShown&&this.tip.show()},beforeUnmount(){var e;this.externalAnchor&&this.removeExternalAnchorEventListeners(),this.tip&&((e=this.tip)==null||e.destroy())},methods:{calculateAnchorZindex(){return this.$el.getRootNode().querySelector('.d-modal[aria-hidden="false"], .d-modal--transparent[aria-hidden="false"]')||this.$el.closest(".d-zi-drawer")?651:400},hasVisibleFocus(){return this.anchor.matches(":focus-visible")},onEnterAnchor(e){this.isTouchDevice&&!e.relatedTarget||(this.delay?this.inTimer=setTimeout((function(t){this.triggerShow(t)}).bind(this,e),i.h):this.triggerShow(e),this.isTouchDevice=!1)},triggerShow(e){e.type==="focusin"?this.show===null&&this.hasVisibleFocus()&&(this.isShown=!0):this.show===null&&(this.isShown=!0)},onLeaveAnchor(e){e.type==="keydown"&&e.code!=="Escape"||(clearTimeout(this.inTimer),this.triggerHide())},triggerHide(){this.show===null&&(this.isShown=!1)},onChangePlacement(e){this.currentPlacement=e},onLeaveTransitionComplete(){var e;(e=this.tip)==null||e.unmount(),this.$emit("shown",!1),this.show!==null&&this.$emit("update:show",!1)},onEnterTransitionComplete(){this.$emit("shown",!0),this.show!==null&&this.$emit("update:show",!0)},setProps(){var e,t;this.tip&&this.tip.setProps&&this.tip.setProps({...this.tippyProps,zIndex:this.calculateAnchorZindex(),appendTo:this.appendTo==="body"?(t=(e=this.anchor)==null?void 0:e.getRootNode())==null?void 0:t.querySelector("body"):this.appendTo})},onMount(){this.setProps()},initOptions(){return{contentElement:this.$refs.content.$el,allowHTML:!0,zIndex:this.calculateAnchorZindex(),onMount:this.onMount,...this.tippyProps}},addExternalAnchorEventListeners(){["focusin","mouseenter"].forEach(e=>{this.anchor.addEventListener(e,t=>this.onEnterAnchor(t))}),["focusout","mouseleave","keydown"].forEach(e=>{this.anchor.addEventListener(e,t=>this.onLeaveAnchor(t))})},removeExternalAnchorEventListeners(){["focusin","mouseenter"].forEach(e=>{this.anchor.removeEventListener(e,t=>this.onEnterAnchor(t))}),["focusout","mouseleave","keydown"].forEach(e=>{this.anchor.removeEventListener(e,t=>this.onLeaveAnchor(t))})},onTouchStart(){this.isTouchDevice=!0}}},f={"data-qa":"dt-tooltip-container"};function m(e,t,r,h,a,n){const c=o.resolveComponent("dt-lazy-show");return o.openBlock(),o.createElementBlock("div",f,[r.externalAnchor?o.createCommentVNode("",!0):(o.openBlock(),o.createElementBlock("span",{key:0,ref:"anchor","data-qa":"dt-tooltip-anchor",onFocusin:t[0]||(t[0]=(...s)=>n.onEnterAnchor&&n.onEnterAnchor(...s)),onFocusout:t[1]||(t[1]=(...s)=>n.onLeaveAnchor&&n.onLeaveAnchor(...s)),onMouseenter:t[2]||(t[2]=(...s)=>n.onEnterAnchor&&n.onEnterAnchor(...s)),onMouseleave:t[3]||(t[3]=(...s)=>n.onLeaveAnchor&&n.onLeaveAnchor(...s)),onKeydown:t[4]||(t[4]=o.withKeys((...s)=>n.onLeaveAnchor&&n.onLeaveAnchor(...s),["esc"])),onTouchstart:t[5]||(t[5]=(...s)=>n.onTouchStart&&n.onTouchStart(...s))},[o.renderSlot(e.$slots,"anchor")],544)),o.createVNode(c,o.mergeProps({id:r.id,ref:"content",show:n.isVisible,role:"tooltip","aria-hidden":"false","data-qa":"dt-tooltip",appear:r.contentAppear,transition:r.transition,class:["d-tooltip",`d-tooltip__arrow-tippy--${a.currentPlacement}`,{[a.TOOLTIP_KIND_MODIFIERS.inverted]:r.inverted},r.contentClass]},o.toHandlers(n.tooltipListeners)),{default:o.withCtx(()=>[o.renderSlot(e.$slots,"default",{},()=>[o.createTextVNode(o.toDisplayString(r.message),1)])]),_:3},16,["id","show","appear","transition","class"])])}const y=u._(p,[["render",m]]);exports.TOOLTIP_DELAY_MS=i.h;exports.TOOLTIP_DIRECTIONS=i.T;exports.TOOLTIP_HIDE_ON_CLICK_VARIANTS=i.k;exports.TOOLTIP_KIND_MODIFIERS=i.i;exports.TOOLTIP_STICKY_VALUES=i.j;exports.DtTooltip=y;
+//# sourceMappingURL=tooltip.cjs.map

package/dist/vue3/lib/tooltip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.cjs","sources":["../../components/tooltip/tooltip.vue"],"sourcesContent":["<template>\n  <div data-qa=\"dt-tooltip-container\">\n    <!-- disabling as the below events are for capturing events from interactive\n         elements within the span rather than on the span itself -->\n    <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n    <span\n      v-if=\"!externalAnchor\"\n      ref=\"anchor\"\n      data-qa=\"dt-tooltip-anchor\"\n      @focusin=\"onEnterAnchor\"\n      @focusout=\"onLeaveAnchor\"\n      @mouseenter=\"onEnterAnchor\"\n      @mouseleave=\"onLeaveAnchor\"\n      @keydown.esc=\"onLeaveAnchor\"\n      @touchstart=\"onTouchStart\"\n    >\n      <!-- @slot Slot for the anchor element -->\n      <slot\n        name=\"anchor\"\n      />\n    </span>\n    <dt-lazy-show\n      :id=\"id\"\n      ref=\"content\"\n      :show=\"isVisible\"\n      role=\"tooltip\"\n      aria-hidden=\"false\"\n      data-qa=\"dt-tooltip\"\n      :appear=\"contentAppear\"\n      :transition=\"transition\"\n      :class=\"[\n        'd-tooltip',\n        `d-tooltip__arrow-tippy--${currentPlacement}`,\n        {\n          [ TOOLTIP_KIND_MODIFIERS.inverted ]: inverted,\n        },\n        contentClass,\n      ]\"\n      v-on=\"tooltipListeners\"\n    >\n      <!-- In case when transitionend event doesn't work correct (for ex. tooltip component with custom trigger) -->\n      <!-- after-leave event can be used instead of transitionend -->\n      <!-- @slot Slot for the content, defaults to message prop -->\n      <slot>\n        {{ message }}\n      </slot>\n    </dt-lazy-show>\n  </div>\n</template>\n\n<script>\nimport {\n  TOOLTIP_KIND_MODIFIERS,\n  TOOLTIP_DIRECTIONS,\n  TOOLTIP_STICKY_VALUES,\n  TOOLTIP_DELAY_MS,\n} from './tooltip_constants.js';\nimport {\n  POPOVER_APPEND_TO_VALUES,\n} from '../popover/popover_constants';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport {\n  createTippy,\n  getAnchor,\n  getPopperOptions,\n} from '@/components/popover/tippy_utils';\n\n/**\n * A tooltip is a floating label that briefly explains an action, function, or an element.\n * Its content is exclusively text and shouldn't be vital information for users.\n * If richer media is desired, consider using a popover instead.\n * @see https://dialtone.dialpad.com/components/tooltip.html\n */\nexport default {\n  name: 'DtTooltip',\n  components: {\n    DtLazyShow,\n  },\n\n  props: {\n    /**\n     * The id of the tooltip\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\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     * if defined, otherwise it will automatically position to a new location\n     * as it sees best fit. See\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements\"\n     *   target=\"_blank\"\n     * >\n     *   Popper.js docs\n     * </a>\n     * */\n    fallbackPlacements: {\n      type: Array,\n      default: () => ['auto'],\n    },\n\n    /**\n     * If true, applies inverted styles to the tooltip\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     *  Displaces the tooltip from its reference element\n     *  by the specified number of pixels. See\n     *  <a\n     *    class=\"d-link\"\n     *    href=\"https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n     *    target=\"_blank\"\n     *  >\n     *    Tippy.js docs\n     *  </a>\n     */\n    offset: {\n      type: Array,\n      default: () => [0, -4],\n    },\n\n    /**\n     * The direction the popover displays relative to the anchor. See\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://atomiks.github.io/tippyjs/v6/all-props/#placement\"\n     *   target=\"_blank\"\n     * >\n     *   Tippy.js docs\n     * </a>\n     * @values top, top-start, top-end,\n     * right, right-start, right-end,\n     * left, left-start, left-end,\n     * bottom, bottom-start, bottom-end,\n     * auto, auto-start, auto-end\n     */\n    placement: {\n      type: String,\n      default: 'top',\n      validator (placement) {\n        return TOOLTIP_DIRECTIONS.includes(placement);\n      },\n    },\n\n    /**\n     * If the tooltip sticks to the anchor. This is usually not needed, but can be needed\n     * if the reference element's position is animating, or to automatically update the popover\n     * position in those cases the DOM layout changes the reference element's position.\n     * `true` enables it, `reference` only checks the \"reference\" rect for changes and `popper` only\n     * checks the \"popper\" rect for changes. See\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://atomiks.github.io/tippyjs/v6/all-props/#sticky\"\n     *   target=\"_blank\"\n     * >\n     *   Tippy.js docs\n     * </a>\n     * @values true, false, reference, popper\n     */\n    sticky: {\n      type: [Boolean, String],\n      default: false,\n      validator: (sticky) => {\n        return TOOLTIP_STICKY_VALUES.includes(sticky);\n      },\n    },\n\n    /**\n     * Sets the element to which the tooltip is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * This prop is not reactive, must be set on initial render.\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     * Additional css classes for the tooltip content element.\n     * Can accept all of String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    contentClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * A provided message for the tooltip content\n     */\n    message: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Controls whether hover/focus causes the tooltip to appear.\n     * Cannot be combined with the show prop. show value will be ignored.\n     * by default this is true, if you override with false, the tooltip will never show up.\n     */\n    enabled: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Controls whether the tooltip is shown. Leaving this null will have the tooltip trigger on mouseover by default.\n     * If you set this value, the default mouseover behavior will be disabled and you can control it as you need.\n     * Supports .sync modifier\n     * @values null, true, false\n     */\n    show: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Named transition when the content display is toggled.\n     * @see DtLazyShow\n     */\n    transition: {\n      type: String,\n      default: 'fade',\n    },\n\n    /**\n     * Whether to apply transition on initial render in the content lazy show component.\n     * @values true, false\n     */\n    contentAppear: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Whether the tooltip will have a delay when being focused or moused over.\n     * @values true, false\n     */\n    delay: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * External anchor id to use in those cases the anchor can't be provided via the slot.\n     * For instance, using the combobox's input as the anchor for the popover.\n     */\n    externalAnchor: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when tooltip is shown or hidden\n     *\n     * @event shown\n     * @type {Boolean}\n     */\n    'shown',\n\n    /**\n     * Sync show value\n     *\n     * @event update:show\n     */\n    'update:show',\n  ],\n\n  data () {\n    return {\n      TOOLTIP_KIND_MODIFIERS,\n      hasSlotContent,\n      tip: null,\n\n      inTimer: null,\n\n      // Internal state for whether the tooltip is shown. Changing the prop\n      // will update this.\n      isShown: false,\n\n      // this is where the placement currently is, this can be different than\n      // the placement prop when there is not enough available room for the tip\n      // to display and it uses a fallback placement.\n      currentPlacement: this.placement,\n\n      // flag check touch based device\n      isTouchDevice: false,\n    };\n  },\n\n  computed: {\n    // whether the tooltip is visible or not.\n    isVisible () {\n      const hasMessage = !!this.message?.trim();\n      const hasDefaultSlot = !!this.$slots?.default;\n      const isDeviceCompatible = !this.isTouchDevice;\n\n      const shouldBeVisible = this.isShown && this.enabled && (hasMessage || hasDefaultSlot);\n\n      return shouldBeVisible && isDeviceCompatible;\n    },\n\n    tooltipListeners () {\n      return {\n        'after-leave': () => {\n          this.onLeaveTransitionComplete();\n        },\n\n        'after-enter': () => {\n          this.onEnterTransitionComplete();\n        },\n      };\n    },\n\n    tippyProps () {\n      return {\n        offset: this.offset,\n        interactive: false,\n        trigger: 'manual',\n        placement: this.placement,\n        sticky: this.sticky,\n        popperOptions: getPopperOptions({\n          fallbackPlacements: this.fallbackPlacements,\n          hasHideModifierEnabled: true,\n          onChangePlacement: this.onChangePlacement,\n        }),\n      };\n    },\n\n    anchor () {\n      return this.externalAnchor ? document.body.querySelector(this.externalAnchor) : getAnchor(this.$refs.anchor);\n    },\n  },\n\n  watch: {\n\n    tippyProps: {\n      handler: 'setProps',\n      deep: true,\n    },\n\n    show: {\n      handler: function (show) {\n        if (show !== null) {\n          this.isShown = show;\n        }\n      },\n\n      immediate: true,\n    },\n\n    isShown (isShown) {\n      if (isShown) {\n        this.setProps();\n        this.tip.show();\n      } else {\n        this.tip.hide();\n      }\n    },\n\n    sticky (sticky) {\n      this.tip.setProps({\n        sticky,\n      });\n    },\n  },\n\n  mounted () {\n    if (!this.enabled && this.show != null) {\n      console.warn('Tooltip: You cannot use both the enabled and show props at the same time.');\n      console.warn('The show prop will be ignored.');\n    }\n\n    this.externalAnchor && this.addExternalAnchorEventListeners();\n    this.tip = createTippy(this.anchor, this.initOptions());\n\n    // immediate watcher fires before mounted, so have this here in case\n    // show prop was initially set to true.\n    if (this.isShown) {\n      this.tip.show();\n    }\n  },\n\n  beforeUnmount () {\n    this.externalAnchor && this.removeExternalAnchorEventListeners();\n\n    if (this.tip) {\n      this.tip?.destroy();\n    }\n  },\n\n  methods: {\n    calculateAnchorZindex () {\n      // if a modal is currently active render at modal-element z-index, otherwise at tooltip z-index\n      if (this.$el.getRootNode()\n        .querySelector('.d-modal[aria-hidden=\"false\"], .d-modal--transparent[aria-hidden=\"false\"]') ||\n        // Special case because we don't have any dialtone drawer component yet. Render at 651 when\n        // anchor of popover is within a drawer.\n        this.$el.closest('.d-zi-drawer')) {\n        return 651;\n      } else {\n        return 400;\n      }\n    },\n\n    hasVisibleFocus () {\n      return this.anchor.matches(':focus-visible');\n    },\n\n    onEnterAnchor (e) {\n      // Note: This is to stop the call of mouseenter event when touchstart event is triggered,\n      //       as when triggered by click or touch, the relatedTarget property of MouseEvent is null\n      if (this.isTouchDevice && !e.relatedTarget) return;\n\n      if (this.delay) {\n        this.inTimer = setTimeout(function (event) {\n          this.triggerShow(event);\n        }.bind(this, e), TOOLTIP_DELAY_MS);\n      } else {\n        this.triggerShow(e);\n      }\n\n      // since this method will be trigger by mouse event, updating the flag is non-touch device\n      this.isTouchDevice = false;\n    },\n\n    triggerShow (e) {\n      if (e.type === 'focusin') {\n        // only show tooltips on visible focus when triggered via focus.\n        // when the user is using the mouse they only want tooltips to display\n        // on mouseover.\n        //\n        // Example: anchor of a popover is a button with tooltip.\n        // closing it with the mouse would trigger the tooltip to display as\n        // the anchor is focused on close. Not what we want.\n        if (this.show === null && this.hasVisibleFocus()) {\n          this.isShown = true;\n        }\n      } else {\n        if (this.show === null) this.isShown = true;\n      }\n    },\n\n    onLeaveAnchor (e) {\n      if (e.type === 'keydown' && e.code !== 'Escape') return;\n\n      clearTimeout(this.inTimer);\n      this.triggerHide();\n    },\n\n    triggerHide () {\n      if (this.show === null) this.isShown = false;\n    },\n\n    onChangePlacement (placement) {\n      this.currentPlacement = placement;\n    },\n\n    onLeaveTransitionComplete () {\n      this.tip?.unmount();\n      this.$emit('shown', false);\n      if (this.show !== null) {\n        this.$emit('update:show', false);\n      }\n    },\n\n    onEnterTransitionComplete () {\n      this.$emit('shown', true);\n      if (this.show !== null) {\n        this.$emit('update:show', true);\n      }\n    },\n\n    setProps () {\n      if (this.tip && this.tip.setProps) {\n        this.tip.setProps({\n          ...this.tippyProps,\n          zIndex: this.calculateAnchorZindex(),\n          appendTo: this.appendTo === 'body' ? this.anchor?.getRootNode()?.querySelector('body') : this.appendTo,\n        });\n      }\n    },\n\n    onMount () {\n      this.setProps();\n    },\n\n    initOptions () {\n      return {\n        contentElement: this.$refs.content.$el,\n        allowHTML: true,\n        zIndex: this.calculateAnchorZindex(),\n        onMount: this.onMount,\n        ...this.tippyProps,\n      };\n    },\n\n    addExternalAnchorEventListeners () {\n      ['focusin', 'mouseenter'].forEach(listener => {\n        this.anchor.addEventListener(listener, (event) => this.onEnterAnchor(event));\n      });\n      ['focusout', 'mouseleave', 'keydown'].forEach(listener => {\n        this.anchor.addEventListener(listener, (event) => this.onLeaveAnchor(event));\n      });\n    },\n\n    removeExternalAnchorEventListeners () {\n      ['focusin', 'mouseenter'].forEach(listener => {\n        this.anchor.removeEventListener(listener, (event) => this.onEnterAnchor(event));\n      });\n      ['focusout', 'mouseleave', 'keydown'].forEach(listener => {\n        this.anchor.removeEventListener(listener, (event) => this.onLeaveAnchor(event));\n      });\n    },\n\n    onTouchStart () {\n      this.isTouchDevice = true;\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.tippy-box[data-popper-reference-hidden] {\n  .d-tooltip {\n    visibility: hidden;\n    pointer-events: none;\n  }\n}\n</style>\n"],"names":["_sfc_main","DtLazyShow","getUniqueString","placement","TOOLTIP_DIRECTIONS","sticky","TOOLTIP_STICKY_VALUES","appendTo","POPOVER_APPEND_TO_VALUES","TOOLTIP_KIND_MODIFIERS","hasSlotContent","hasMessage","_a","hasDefaultSlot","_b","isDeviceCompatible","getPopperOptions","getAnchor","show","isShown","createTippy","event","TOOLTIP_DELAY_MS","listener","_hoisted_1","_openBlock","_createElementBlock","$props","$options","args","_renderSlot","_ctx","_createVNode","_component_dt_lazy_show","_mergeProps","$data","_toHandlers"],"mappings":"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"}

package/dist/vue3/lib/top-banner-info.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),t=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js"),o=["green300","green100","red200","red100","gold100","gold200","black100","white"],d={name:"DtRecipeTopBannerInfo",props:{colorCode:{type:String,default:"green300",validator:function(n){return o.includes(n)}}},computed:{bannerInfoClass(){return[{green300:"d-bgc-success",green100:"d-bgc-success",red200:"d-bgc-critical",red100:"d-bgc-critical",gold200:"d-bgc-warning",gold100:"d-bgc-warning",black100:"d-bgc-info",white:"d-bgc-primary"}[this.colorCode]]}}},c={class:"dt-top-banner-info__left"},s={class:"dt-top-banner-info__middle","data-qa":"banner-info--middle"},a={class:"dt-top-banner-info__right"};function l(n,g,b,p,_,r){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["dt-top-banner-info",r.bannerInfoClass]),"data-qa":"banner-info"},[e.createElementVNode("div",c,[e.renderSlot(n.$slots,"left")]),e.createElementVNode("div",s,[e.renderSlot(n.$slots,"default")]),e.createElementVNode("div",a,[e.renderSlot(n.$slots,"right")])],2)}const i=t._(d,[["render",l]]);exports.COLOR_CODES=o;exports.DtRecipeTopBannerInfo=i;
+//# sourceMappingURL=top-banner-info.cjs.map

package/dist/vue3/lib/top-banner-info.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"top-banner-info.cjs","sources":["../../recipes/notices/top_banner_info/top_banner_info_constants.js","../../recipes/notices/top_banner_info/top_banner_info.vue"],"sourcesContent":["export const COLOR_CODES = ['green300', 'green100', 'red200', 'red100', 'gold100',\n  'gold200', 'black100', 'white'];\n\nexport default {\n  COLOR_CODES,\n};\n","<template>\n  <div\n    class=\"dt-top-banner-info\"\n    :class=\"bannerInfoClass\"\n    data-qa=\"banner-info\"\n  >\n    <div class=\"dt-top-banner-info__left\">\n      <slot name=\"left\" />\n    </div>\n\n    <div\n      class=\"dt-top-banner-info__middle\"\n      data-qa=\"banner-info--middle\"\n    >\n      <slot />\n    </div>\n\n    <div class=\"dt-top-banner-info__right\">\n      <slot name=\"right\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { COLOR_CODES } from './top_banner_info_constants';\n\nexport default {\n  name: 'DtRecipeTopBannerInfo',\n\n  props: {\n    /**\n     * color of the banner background\n     */\n    colorCode: {\n      type: String,\n      default: 'green300',\n      validator: function (kind) {\n        return COLOR_CODES.includes(kind);\n      },\n    },\n  },\n\n  computed: {\n    bannerInfoClass () {\n      const bgColors = {\n        // these are too specific, so for now I'm at least updating the resultant semantic value\n        // TODO: breaking change: update to be more abstract\n        green300: 'd-bgc-success',\n        green100: 'd-bgc-success',\n        red200: 'd-bgc-critical',\n        red100: 'd-bgc-critical',\n        gold200: 'd-bgc-warning',\n        gold100: 'd-bgc-warning',\n        black100: 'd-bgc-info',\n        white: 'd-bgc-primary',\n      };\n      return [bgColors[this.colorCode]];\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-top-banner-info {\n  font-size: var(--dt-font-size-100);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  color: var(--dt-color-foreground-primary);\n\n   &__left {\n     margin: var(--dt-space-300) 0 var(--dt-space-300) var(--dt-space-400);\n     min-width: 20%;\n  }\n  &__middle {\n     display: flex;\n     align-items: center;\n     gap: var(--dt-size-300);\n     margin-top: var(--dt-space-300);\n    margin-bottom: var(--dt-space-300);\n  }\n  &__right {\n     display: flex;\n     align-items: baseline;\n     justify-content: flex-end;\n     gap: var(--dt-size-300);\n     margin: var(--dt-space-300) var(--dt-space-500) var(--dt-space-300) 0;\n     min-width: 20%;\n     text-align: right;\n  }\n}\n</style>\n"],"names":["COLOR_CODES","_sfc_main","kind","_hoisted_1","_hoisted_3","_createElementBlock","_normalizeClass","$options","_createElementVNode","_renderSlot","_ctx","_hoisted_2"],"mappings":"oKAAaA,EAAc,CAAC,WAAY,WAAY,SAAU,SAAU,UACtE,UAAW,WAAY,OAAO,ECyB3BC,EAAU,CACb,KAAM,wBAEN,MAAO,CAIL,UAAW,CACT,KAAM,OACN,QAAS,WACT,UAAW,SAAUC,EAAM,CACzB,OAAOF,EAAY,SAASE,CAAI,CACjC,CACF,CACF,EAED,SAAU,CACR,iBAAmB,CAajB,MAAO,CAZU,CAGf,SAAU,gBACV,SAAU,gBACV,OAAQ,iBACR,OAAQ,iBACR,QAAS,gBACT,QAAS,gBACT,SAAU,aACV,MAAO,iBAEQ,KAAK,SAAS,CAAC,CACjC,CACF,CACH,EArDSC,EAAA,CAAA,MAAM,0BAA0B,KAKnC,MAAM,6BACN,UAAQ,uBAKLC,EAAA,CAAA,MAAM,2BAA2B,+CAhBxCC,EAmBM,mBAAA,MAAA,CAlBJ,MAAKC,EAAAA,eAAA,CAAC,qBACEC,EAAe,eAAA,CAAA,EACvB,UAAQ,gBAERC,EAAA,mBAEM,MAFNL,EAEM,CADJM,aAAoBC,EAAA,OAAA,MAAA,IAGtBF,EAAA,mBAKM,MALNG,EAKM,CADJF,aAAQC,EAAA,OAAA,SAAA,IAGVF,EAAA,mBAEM,MAFNJ,EAEM,CADJK,aAAqBC,EAAA,OAAA,OAAA"}

package/dist/vue3/lib/unread-pill.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),a=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js"),c=require("./icon.cjs");require("@dialpad/dialtone-icons/vue3");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");const n=["up","down"],i=["mentions","messages"],d={name:"DtRecipeUnreadPill",components:{DtIcon:c.DtIcon},props:{kind:{type:String,required:!0,validator:t=>i.includes(t)},direction:{type:String,required:!0,validator:t=>n.includes(t)}},emits:["click"],computed:{unreadChipListeners(){return{click:t=>this.$emit("click",t)}}}},s={"data-qa":"dt-leftbar-unread-pill__label"};function u(t,_,r,m,D,o){const l=e.resolveComponent("dt-icon");return e.openBlock(),e.createElementBlock("button",e.mergeProps({class:["dt-leftbar-unread-pill",`dt-leftbar-unread-pill--${r.kind}`],type:"button","data-qa":"dt-leftbar-unread-pill"},e.toHandlers(o.unreadChipListeners,!0)),[e.createVNode(l,{name:`arrow-${r.direction}`,size:"300"},null,8,["name"]),e.createElementVNode("span",s,[e.renderSlot(t.$slots,"default")])],16)}const p=a._(d,[["render",u]]);exports.DtRecipeUnreadPill=p;exports.UNREAD_PILL_DIRECTIONS=n;exports.UNREAD_PILL_KINDS=i;
+//# sourceMappingURL=unread-pill.cjs.map

package/dist/vue3/lib/unread-pill.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"unread-pill.cjs","sources":["../../recipes/leftbar/unread_pill/unread_pill_constants.js","../../recipes/leftbar/unread_pill/unread_pill.vue"],"sourcesContent":["export const UNREAD_PILL_DIRECTIONS = ['up', 'down'];\nexport const UNREAD_PILL_KINDS = ['mentions', 'messages'];\n\nexport default {\n  UNREAD_PILL_DIRECTIONS,\n  UNREAD_PILL_KINDS,\n};\n","<template>\n  <button\n    :class=\"['dt-leftbar-unread-pill', `dt-leftbar-unread-pill--${kind}`]\"\n    type=\"button\"\n    data-qa=\"dt-leftbar-unread-pill\"\n    v-on=\"unreadChipListeners\"\n  >\n    <dt-icon\n      :name=\"`arrow-${direction}`\"\n      size=\"300\"\n    />\n    <span data-qa=\"dt-leftbar-unread-pill__label\">\n      <slot />\n    </span>\n  </button>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { UNREAD_PILL_DIRECTIONS, UNREAD_PILL_KINDS } from './unread_pill_constants';\nexport default {\n  name: 'DtRecipeUnreadPill',\n\n  components: {\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * The kind of unread pill which determines the styling\n     * @values 'mentions', 'messages'\n     **/\n    kind: {\n      type: String,\n      required: true,\n      validator: (kind) => UNREAD_PILL_KINDS.includes(kind),\n    },\n\n    /**\n     * The direction of the arrow icon\n     * @values 'up', 'down'\n     **/\n    direction: {\n      type: String,\n      required: true,\n      validator: (dir) => UNREAD_PILL_DIRECTIONS.includes(dir),\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  computed: {\n    unreadChipListeners () {\n      return {\n        click: event => this.$emit('click', event),\n      };\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-leftbar-unread-pill {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--dt-space-200) var(--dt-space-500) var(--dt-space-200) var(--dt-space-400);\n  gap: var(--dt-space-300);\n  font-size: var(--dt-font-size-100);\n  box-shadow: var(--dt-shadow-medium);\n  border-radius: var(--dt-size-radius-pill);\n  border: none;\n  line-height: var(--dt-font-line-height-600);\n  cursor: pointer;\n\n  &--mentions {\n    font-weight: var(--dt-font-weight-bold);\n    background-color: var(--dt-theme-mention-color-background);\n    color: var(--dt-theme-mention-color-foreground);\n  }\n\n  &--messages {\n    background-color: var(--dt-color-surface-contrast);\n    color: var(--dt-color-foreground-secondary-inverted);\n  }\n}\n</style>\n"],"names":["UNREAD_PILL_DIRECTIONS","UNREAD_PILL_KINDS","_sfc_main","DtIcon","kind","dir","event","_hoisted_1","_openBlock","_createElementBlock","_mergeProps","$props","_toHandlers","$options","_createVNode","_component_dt_icon","_createElementVNode","_renderSlot","_ctx"],"mappings":"kUAAY,MAACA,EAAyB,CAAC,KAAM,MAAM,EACtCC,EAAoB,CAAC,WAAY,UAAU,ECmBnDC,EAAU,CACb,KAAM,qBAEN,WAAY,CACV,OAAAC,EAAM,MACP,EAED,MAAO,CAKL,KAAM,CACJ,KAAM,OACN,SAAU,GACV,UAAYC,GAASH,EAAkB,SAASG,CAAI,CACrD,EAMD,UAAW,CACT,KAAM,OACN,SAAU,GACV,UAAYC,GAAQL,EAAuB,SAASK,CAAG,CACxD,CACF,EAED,MAAO,CAOL,OACD,EAED,SAAU,CACR,qBAAuB,CACrB,MAAO,CACL,MAAOC,GAAS,KAAK,MAAM,QAASA,CAAK,EAE5C,CACF,CACH,EAvDUC,EAAA,CAAA,UAAQ,+BAA+B,gEAV/C,OAAAC,YAAA,EAAAC,qBAaS,SAbTC,EAAAA,WAaS,CAZN,2DAA6DC,EAAI,IAAA,EAAA,EAClE,KAAK,SACL,UAAQ,wBACR,EAAAC,EAAA,WAAMC,EAAmB,oBAAA,EAAA,CAAA,EAAA,CAEzBC,EAAAA,YAGEC,EAAA,CAFC,cAAeJ,EAAS,SAAA,GACzB,KAAK,wBAEPK,EAAA,mBAEO,OAFPT,EAEO,CADLU,aAAQC,EAAA,OAAA,SAAA"}

package/dist/vue3/lib/unread-pill.js

@@ -4,7 +4,6 @@ import { DtIcon as u } from "./icon.js";
 import "@dialpad/dialtone-icons/vue3";
 import "../chunks/icon_constants-OpYAAKwF.js";
 import "@dialpad/dialtone-icons/icons.json";
-import "./skeleton.js";
 const _ = ["up", "down"], f = ["mentions", "messages"], b = {
   name: "DtRecipeUnreadPill",
   components: {
@@ -63,9 +62,9 @@ function D(e, I, t, L, N, r) {
     ])
   ], 16);
 }
-const q = /* @__PURE__ */ m(b, [["render", D]]);
+const g = /* @__PURE__ */ m(b, [["render", D]]);
 export {
-  q as DtRecipeUnreadPill,
+  g as DtRecipeUnreadPill,
   _ as UNREAD_PILL_DIRECTIONS,
   f as UNREAD_PILL_KINDS
 };

package/dist/vue3/lib/unread-pill.js.map

@@ -1 +1 @@
-{"version":3,"file":"unread-pill.js","sources":["../../recipes/leftbar/unread_pill/unread_pill_constants.js","../../recipes/leftbar/unread_pill/unread_pill.vue"],"sourcesContent":["export const UNREAD_PILL_DIRECTIONS = ['up', 'down'];\nexport const UNREAD_PILL_KINDS = ['mentions', 'messages'];\n\nexport default {\n  UNREAD_PILL_DIRECTIONS,\n  UNREAD_PILL_KINDS,\n};\n","<template>\n  <button\n    :class=\"['dt-leftbar-unread-pill', `dt-leftbar-unread-pill--${kind}`]\"\n    type=\"button\"\n    data-qa=\"dt-leftbar-unread-pill\"\n    v-on=\"unreadChipListeners\"\n  >\n    <dt-icon\n      :name=\"`arrow-${direction}`\"\n      size=\"300\"\n    />\n    <span data-qa=\"dt-leftbar-unread-pill__label\">\n      <slot />\n    </span>\n  </button>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { UNREAD_PILL_DIRECTIONS, UNREAD_PILL_KINDS } from './unread_pill_constants';\nexport default {\n  name: 'DtRecipeUnreadPill',\n\n  components: {\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * The kind of unread pill which determines the styling\n     * @values 'mentions', 'messages'\n     **/\n    kind: {\n      type: String,\n      required: true,\n      validator: (kind) => UNREAD_PILL_KINDS.includes(kind),\n    },\n\n    /**\n     * The direction of the arrow icon\n     * @values 'up', 'down'\n     **/\n    direction: {\n      type: String,\n      required: true,\n      validator: (dir) => UNREAD_PILL_DIRECTIONS.includes(dir),\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  computed: {\n    unreadChipListeners () {\n      return {\n        click: event => this.$emit('click', event),\n      };\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-leftbar-unread-pill {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--dt-space-200) var(--dt-space-500) var(--dt-space-200) var(--dt-space-400);\n  gap: var(--dt-space-300);\n  font-size: var(--dt-font-size-100);\n  box-shadow: var(--dt-shadow-medium);\n  border-radius: var(--dt-size-radius-pill);\n  border: none;\n  line-height: var(--dt-font-line-height-600);\n  cursor: pointer;\n\n  &--mentions {\n    font-weight: var(--dt-font-weight-bold);\n    background-color: var(--dt-theme-mention-color-background);\n    color: var(--dt-theme-mention-color-foreground);\n  }\n\n  &--messages {\n    background-color: var(--dt-color-surface-contrast);\n    color: var(--dt-color-foreground-secondary-inverted);\n  }\n}\n</style>\n"],"names":["UNREAD_PILL_DIRECTIONS","UNREAD_PILL_KINDS","_sfc_main","DtIcon","kind","dir","event","_hoisted_1","_openBlock","_createElementBlock","_mergeProps","$props","_toHandlers","$options","_createVNode","_component_dt_icon","_createElementVNode","_renderSlot","_ctx"],"mappings":";;;;;;;AAAY,MAACA,IAAyB,CAAC,MAAM,MAAM,GACtCC,IAAoB,CAAC,YAAY,UAAU,GCmBnDC,IAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,QAAAC;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA,MACV,WAAW,CAACC,MAASH,EAAkB,SAASG,CAAI;AAAA,IACrD;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA,MACV,WAAW,CAACC,MAAQL,EAAuB,SAASK,CAAG;AAAA,IACxD;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA,EACD;AAAA,EAED,UAAU;AAAA,IACR,sBAAuB;AACrB,aAAO;AAAA,QACL,OAAO,CAAAC,MAAS,KAAK,MAAM,SAASA,CAAK;AAAA;IAE5C;AAAA,EACF;AACH,GAvDUC,IAAA,EAAA,WAAQ,gCAA+B;;;AAV/C,SAAAC,EAAA,GAAAC,EAaS,UAbTC,EAaS;AAAA,IAZN,6DAA6DC,EAAI,IAAA,EAAA;AAAA,IAClE,MAAK;AAAA,IACL,WAAQ;AAAA,EACR,GAAAC,EAAMC,EAAmB,qBAAA,EAAA,CAAA,GAAA;AAAA,IAEzBC,EAGEC,GAAA;AAAA,MAFC,eAAeJ,EAAS,SAAA;AAAA,MACzB,MAAK;AAAA;IAEPK,EAEO,QAFPT,GAEO;AAAA,MADLU,EAAQC,EAAA,QAAA,SAAA;AAAA;;;;"}
+{"version":3,"file":"unread-pill.js","sources":["../../recipes/leftbar/unread_pill/unread_pill_constants.js","../../recipes/leftbar/unread_pill/unread_pill.vue"],"sourcesContent":["export const UNREAD_PILL_DIRECTIONS = ['up', 'down'];\nexport const UNREAD_PILL_KINDS = ['mentions', 'messages'];\n\nexport default {\n  UNREAD_PILL_DIRECTIONS,\n  UNREAD_PILL_KINDS,\n};\n","<template>\n  <button\n    :class=\"['dt-leftbar-unread-pill', `dt-leftbar-unread-pill--${kind}`]\"\n    type=\"button\"\n    data-qa=\"dt-leftbar-unread-pill\"\n    v-on=\"unreadChipListeners\"\n  >\n    <dt-icon\n      :name=\"`arrow-${direction}`\"\n      size=\"300\"\n    />\n    <span data-qa=\"dt-leftbar-unread-pill__label\">\n      <slot />\n    </span>\n  </button>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { UNREAD_PILL_DIRECTIONS, UNREAD_PILL_KINDS } from './unread_pill_constants';\nexport default {\n  name: 'DtRecipeUnreadPill',\n\n  components: {\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * The kind of unread pill which determines the styling\n     * @values 'mentions', 'messages'\n     **/\n    kind: {\n      type: String,\n      required: true,\n      validator: (kind) => UNREAD_PILL_KINDS.includes(kind),\n    },\n\n    /**\n     * The direction of the arrow icon\n     * @values 'up', 'down'\n     **/\n    direction: {\n      type: String,\n      required: true,\n      validator: (dir) => UNREAD_PILL_DIRECTIONS.includes(dir),\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  computed: {\n    unreadChipListeners () {\n      return {\n        click: event => this.$emit('click', event),\n      };\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-leftbar-unread-pill {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--dt-space-200) var(--dt-space-500) var(--dt-space-200) var(--dt-space-400);\n  gap: var(--dt-space-300);\n  font-size: var(--dt-font-size-100);\n  box-shadow: var(--dt-shadow-medium);\n  border-radius: var(--dt-size-radius-pill);\n  border: none;\n  line-height: var(--dt-font-line-height-600);\n  cursor: pointer;\n\n  &--mentions {\n    font-weight: var(--dt-font-weight-bold);\n    background-color: var(--dt-theme-mention-color-background);\n    color: var(--dt-theme-mention-color-foreground);\n  }\n\n  &--messages {\n    background-color: var(--dt-color-surface-contrast);\n    color: var(--dt-color-foreground-secondary-inverted);\n  }\n}\n</style>\n"],"names":["UNREAD_PILL_DIRECTIONS","UNREAD_PILL_KINDS","_sfc_main","DtIcon","kind","dir","event","_hoisted_1","_openBlock","_createElementBlock","_mergeProps","$props","_toHandlers","$options","_createVNode","_component_dt_icon","_createElementVNode","_renderSlot","_ctx"],"mappings":";;;;;;AAAY,MAACA,IAAyB,CAAC,MAAM,MAAM,GACtCC,IAAoB,CAAC,YAAY,UAAU,GCmBnDC,IAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,QAAAC;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA,MACV,WAAW,CAACC,MAASH,EAAkB,SAASG,CAAI;AAAA,IACrD;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA,MACV,WAAW,CAACC,MAAQL,EAAuB,SAASK,CAAG;AAAA,IACxD;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA,EACD;AAAA,EAED,UAAU;AAAA,IACR,sBAAuB;AACrB,aAAO;AAAA,QACL,OAAO,CAAAC,MAAS,KAAK,MAAM,SAASA,CAAK;AAAA;IAE5C;AAAA,EACF;AACH,GAvDUC,IAAA,EAAA,WAAQ,gCAA+B;;;AAV/C,SAAAC,EAAA,GAAAC,EAaS,UAbTC,EAaS;AAAA,IAZN,6DAA6DC,EAAI,IAAA,EAAA;AAAA,IAClE,MAAK;AAAA,IACL,WAAQ;AAAA,EACR,GAAAC,EAAMC,EAAmB,qBAAA,EAAA,CAAA,GAAA;AAAA,IAEzBC,EAGEC,GAAA;AAAA,MAFC,eAAeJ,EAAS,SAAA;AAAA,MACzB,MAAK;AAAA;IAEPK,EAEO,QAFPT,GAEO;AAAA,MADLU,EAAQC,EAAA,QAAA,SAAA;AAAA;;;;"}

package/dist/vue3/lib/utils.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("./constants.cjs"),s=require("vue");let U=0,l;const D="input:not([type=hidden]):not(:disabled)",j="select:not(:disabled),textarea:not(:disabled),button:not(:disabled)",M=`${D},${j}`,V=`a,frame,iframe,${M},*[tabindex]`,$=typeof setImmediate=="function"?setImmediate:setTimeout;function f(e=r.DEFAULT_PREFIX){return`${e}${U++}`}function d(e,t){if(t){const n=E(t);return e[Math.abs(n)%e.length]}else return e[u(e.length)]}function E(e){let t;for(let n=0;n<e.length;n++)t=Math.imul(31,t)+e.charCodeAt(n)|0;return t}function u(e){return Math.floor(Math.random()*e)}function h(e){return e?e.map(t=>typeof t=="string"?{message:t,type:r.DEFAULT_VALIDATION_MESSAGE_TYPE}:t):[]}function g(e){const t=c(e);return!e||!t?[]:e.filter(n=>!!n.message&&n.type===t)}function c(e){return e?o(e,r.VALIDATION_MESSAGE_TYPES.ERROR)?r.VALIDATION_MESSAGE_TYPES.ERROR:o(e,r.VALIDATION_MESSAGE_TYPES.WARNING)?r.VALIDATION_MESSAGE_TYPES.WARNING:o(e,r.VALIDATION_MESSAGE_TYPES.SUCCESS)?r.VALIDATION_MESSAGE_TYPES.SUCCESS:null:null}function o(e,t){return!e||!t?!1:e.some(n=>(n==null?void 0:n.type)===t)}function z(e){return e==null?void 0:e.querySelector(V)}const S=e=>s.h("div",{innerHTML:e.html}),m=()=>new Promise(e=>{$(e)});function k(e,t={}){return e?e(t).some(n=>n.type===s.Comment||Array.isArray(n.children)&&!n.children.length?!1:n.type!==s.Text||typeof n.children=="string"&&n.children.trim()!==""):!1}const b=e=>e==null?void 0:e.toLowerCase().split("-").map(t=>t.charAt(0).toUpperCase()+t.slice(1)).join(""),W=e=>e.replace(/\.?([A-Z0-9]+)/g,(t,n)=>"-"+n.toLowerCase()).replace(/^-/,""),R=e=>{const t=Object.entries(e).filter(([n])=>n.startsWith("on"));return Object.fromEntries(t)};function A(e,t=300){clearTimeout(l),l=setTimeout(e,t)}function p(e){const t=e.getBoundingClientRect(),n={top:t.top<0,left:t.left<0,bottom:t.bottom>(window.innerHeight||document.documentElement.clientHeight),right:t.right>(window.innerWidth||document.documentElement.clientWidth)};return n.any=Object.values(n).some(i=>i),n.all=Object.values(n).every(i=>i),n}const v=/(?:(?:[^\s!@#$%^&*()_=+[\]{}\\|;:'",.<>/?]+)\.)/,G=new RegExp("(?:com|ru|org|net|de|jp|uk|br|it|pl|fr|in|au|ir|info|nl|cn|es|cz|kr|ca|eu|ua|co|gr|za|ro|biz|ch|se|tw|mx|vn|hu|be|tr|at|dk|tv|me|ar|sk|no|us|fi|id|cl|xyz|io|pt|by|il|ie|nz|kz|hk|lt|cc|my|sg|club|bg|edu|рф|pk|su|top|th|hr|rs|pe|pro|si|az|lv|pw|ae|ph|online|ng|ee|ws|ve|cat)"),B=new RegExp("(?:(?:[0-9]|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])\\.){3}(?:[0-9]|[1-9]\\d|1\\d{2}|2[0-4]\\d|25[0-5])"),T=new RegExp("(?:"+[[v.source,G.source].join("+"),B.source].join("|")+")"),H=/(?:(?:[;/][^#?<>\s]*)?)/,C=/(?:(?:\?[^#<>\s]+)?(?:#[^<>\s]+)?)/,O=new RegExp("\\b"+[T.source,H.source,C.source,"(?!\\w)"].join("+")),_=/\b[a-z\d.-]+:\/\/[^<>\s]+/,x=new RegExp("(?:mailto:)?[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@"+[T.source,C.source].join("+")+"(?!\\w)");function a(e=7,t=15){return new RegExp(`(?:^|(?<=\\W))(?![\\s\\-])\\+?(?:[0-9()\\- \\t]{${e},${t}})(?=\\b)(?=\\W(?=\\W|$)|\\s|$)`)}const I=a(),L=new RegExp([O.source,_.source,x.source,I.source].join("|"),"gi");function N(e){var t;return!e||!["string","number"].includes(typeof e)?!1:(e=e.toString(),((t=I.exec(e))==null?void 0:t[0])===e)}function P(e){var t,n;return!e||typeof e!="string"?!1:((t=O.exec(e))==null?void 0:t[0])===e||((n=_.exec(e))==null?void 0:n[0])===e}function w(e){var t;return!e||typeof e!="string"?!1:((t=x.exec(e))==null?void 0:t[0])===e}function y(e){return e.filter(t=>!!t).join(" ")}function F(e,t="en-US"){return e.replace(new RegExp("^\\p{CWU}","u"),n=>n.toLocaleUpperCase(t))}const Y={getUniqueString:f,getRandomElement:d,getRandomInt:u,formatMessages:h,filterFormattedMessages:g,hasFormattedMessageOfType:o,getValidationState:c,htmlFragment:S,flushPromises:m,kebabCaseToPascalCase:b,extractVueListeners:R,debounce:A,isOutOfViewPort:p,getPhoneNumberRegex:a,linkRegex:L,isEmailAddress:w,isPhoneNumber:N,isURL:P,safeConcatStrings:y,capitalizeFirstLetter:F};exports.capitalizeFirstLetter=F;exports.debounce=A;exports.default=Y;exports.extractVueListeners=R;exports.filterFormattedMessages=g;exports.findFirstFocusableNode=z;exports.flushPromises=m;exports.formatMessages=h;exports.getPhoneNumberRegex=a;exports.getRandomElement=d;exports.getRandomInt=u;exports.getUniqueString=f;exports.getValidationState=c;exports.hasFormattedMessageOfType=o;exports.hasSlotContent=k;exports.htmlFragment=S;exports.isEmailAddress=w;exports.isOutOfViewPort=p;exports.isPhoneNumber=N;exports.isURL=P;exports.javaHashCode=E;exports.kebabCaseToPascalCase=b;exports.linkRegex=L;exports.pascalCaseToKebabCase=W;exports.safeConcatStrings=y;
+//# sourceMappingURL=utils.cjs.map

package/dist/vue3/lib/utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.cjs","sources":["../../common/utils/index.js"],"sourcesContent":["import {\n  DEFAULT_PREFIX,\n  DEFAULT_VALIDATION_MESSAGE_TYPE,\n  VALIDATION_MESSAGE_TYPES,\n} from '../constants';\nimport {\n  h,\n  Comment,\n  Text,\n} from 'vue';\n\nlet UNIQUE_ID_COUNTER = 0;\nlet TIMER;\n\n// selector to find focusable not hidden inputs\nconst FOCUSABLE_SELECTOR_NOT_HIDDEN = 'input:not([type=hidden]):not(:disabled)';\n// selector to find focusable not disables elements\nconst FOCUSABLE_SELECTOR_NOT_DISABLED = 'select:not(:disabled),textarea:not(:disabled),button:not(:disabled)';\n// // selector to find focusable not hidden and disabled elements\nconst FOCUSABLE_SELECTOR_NOT_HIDDEN_DISABLED = `${FOCUSABLE_SELECTOR_NOT_HIDDEN},${FOCUSABLE_SELECTOR_NOT_DISABLED}`;\n// selector to find focusable elements\nconst FOCUSABLE_SELECTOR = `a,frame,iframe,${FOCUSABLE_SELECTOR_NOT_HIDDEN_DISABLED},*[tabindex]`;\n\nconst scheduler = typeof setImmediate === 'function' ? setImmediate : setTimeout;\n\nexport function getUniqueString (prefix = DEFAULT_PREFIX) {\n  return `${prefix}${UNIQUE_ID_COUNTER++}`;\n}\n\n/**\n * Returns a random element from array\n * @param array - the array to return a random element from\n * @param {string} seed - use a string to seed the randomization, so it returns the same element each time\n * based on that string.\n * @returns {*} - the random element\n */\nexport function getRandomElement (array, seed) {\n  if (seed) {\n    const hash = javaHashCode(seed);\n    return array[Math.abs(hash) % array.length];\n  } else {\n    return array[getRandomInt(array.length)];\n  }\n}\n\n/**\n * Returns a hash code for a string.\n * (Compatible to Java's String.hashCode())\n * We use this algo to be in sync with android.\n *\n * The hash code for a string object is computed as\n *     s[0]*31^(n-1) + s[1]*31^(n-2) + ... + s[n-1]\n * using number arithmetic, where s[i] is the i th character\n * of the given string, n is the length of the string,\n * and ^ indicates exponentiation.\n * (The hash value of the empty string is zero.)\n *\n * @param {string} str a string\n * @return {number} a hash code value for the given string.\n */\nexport function javaHashCode (str) {\n  let h;\n  for (let i = 0; i < str.length; i++) {\n    h = Math.imul(31, h) + str.charCodeAt(i) | 0;\n  }\n\n  return h;\n}\n\n/**\n * Generate a random integer\n * @param {number} max - max range of integer to generate\n * @returns {number} randomly generated integer between 0 and max\n */\nexport function getRandomInt (max) {\n  return Math.floor(Math.random() * max);\n}\n\nexport function formatMessages (messages) {\n  if (!messages) {\n    return [];\n  }\n\n  return messages.map(message => {\n    if (typeof message === 'string') {\n      return {\n        message,\n        type: DEFAULT_VALIDATION_MESSAGE_TYPE,\n      };\n    }\n\n    return message;\n  });\n}\n\nexport function filterFormattedMessages (formattedMessages) {\n  const validationState = getValidationState(formattedMessages);\n\n  if (!formattedMessages || !validationState) {\n    return [];\n  }\n\n  return formattedMessages.filter(message => !!message.message && message.type === validationState);\n}\n\n/*\n * The priority order of message types is as flows: 'error' > 'warning' > 'success'.\n * If any message of type 'error' is present in messages, the input state is considered\n * to be 'error', then 'warning' and lastly 'success'.\n */\nexport function getValidationState (formattedMessages) {\n  if (!formattedMessages) {\n    return null;\n  }\n\n  if (hasFormattedMessageOfType(formattedMessages, VALIDATION_MESSAGE_TYPES.ERROR)) {\n    return VALIDATION_MESSAGE_TYPES.ERROR;\n  }\n  if (hasFormattedMessageOfType(formattedMessages, VALIDATION_MESSAGE_TYPES.WARNING)) {\n    return VALIDATION_MESSAGE_TYPES.WARNING;\n  }\n  if (hasFormattedMessageOfType(formattedMessages, VALIDATION_MESSAGE_TYPES.SUCCESS)) {\n    return VALIDATION_MESSAGE_TYPES.SUCCESS;\n  }\n\n  return null;\n}\n\nexport function hasFormattedMessageOfType (formattedMessages, messageType) {\n  if (!formattedMessages || !messageType) {\n    return false;\n  }\n\n  return formattedMessages.some(message => message?.type === messageType);\n}\n\nexport function findFirstFocusableNode (element) {\n  return element?.querySelector(FOCUSABLE_SELECTOR);\n}\n\n/* html-fragment component:\n * To render html without wrapping in another element as when using v-html.\n * props: html\n */\nexport const htmlFragment = (props) => {\n  return h('div', { innerHTML: props.html });\n};\n\nexport const flushPromises = () => {\n  return new Promise((resolve) => {\n    scheduler(resolve);\n  });\n};\n\n/*\n  It is very cumbersome to check if a slot is empty in vue 3. Copied this method from the following thread\n  https://github.com/vuejs/core/issues/4733. There is an RFC to fix this but not yet being worked on.\n  https://github.com/vuejs/rfcs/discussions/453\n*/\nexport function hasSlotContent (slot, slotProps = {}) {\n  if (!slot) return false;\n\n  // eslint-disable-next-line complexity\n  return slot(slotProps).some((vnode) => {\n    if (vnode.type === Comment) return false;\n\n    if (Array.isArray(vnode.children) && !vnode.children.length) return false;\n\n    return (\n      vnode.type !== Text ||\n      (typeof vnode.children === 'string' && vnode.children.trim() !== '')\n    );\n  });\n}\n\n/**\n * Transform a string from kebab-case to PascalCase\n * @param string\n * @returns {string}\n */\nexport const kebabCaseToPascalCase = (string) => {\n  return string?.toLowerCase()\n    .split('-')\n    .map(word => word.charAt(0).toUpperCase() + word.slice(1))\n    .join('');\n};\n\n/**\n * Transform a string from PascalCase to kebab-case\n * @param string\n * @returns {string}\n */\nexport const pascalCaseToKebabCase = (string) => {\n  return string\n    .replace(/\\.?([A-Z0-9]+)/g, (x, y) => '-' + y.toLowerCase())\n    .replace(/^-/, '');\n};\n\nexport const extractVueListeners = (attrs) => {\n  const listeners = Object.entries(attrs)\n    .filter(([key]) => key.startsWith('on'));\n  return Object.fromEntries(listeners);\n};\n\n/*\n* Set's a global timer to debounce the execution of a function.\n* @param { object } func - the function that is going to be called after timeout\n* @param { number } [timeout=300] timeout\n* */\nexport function debounce (func, timeout = 300) {\n  clearTimeout(TIMER);\n  TIMER = setTimeout(func, timeout);\n}\n\n/**\n * Checks if the element is out of the viewport\n * https://gomakethings.com/how-to-check-if-any-part-of-an-element-is-out-of-the-viewport-with-vanilla-js/\n * @param  {HTMLElement} element The element to check\n * @return {Object} A set of booleans for each side of the element\n */\n\nexport function isOutOfViewPort (element) {\n  const bounding = element.getBoundingClientRect();\n\n  const isOut = {\n    top: bounding.top < 0,\n    left: bounding.left < 0,\n    bottom: bounding.bottom > (window.innerHeight || document.documentElement.clientHeight),\n    right: bounding.right > (window.innerWidth || document.documentElement.clientWidth),\n  };\n  isOut.any = Object.values(isOut).some(val => val);\n  isOut.all = Object.values(isOut).every(val => val);\n  return isOut;\n}\n\n// match valid characters for a domain name followed by a dot, e.g. \"dialpad.\"\nconst domainNameRegex = /(?:(?:[^\\s!@#$%^&*()_=+[\\]{}\\\\|;:'\",.<>/?]+)\\.)/;\n\n// match valid TLDs for a hostname (outdated list from ~2017)\nconst tldRegerx = new RegExp(\n  '(?:' +\n  'com|ru|org|net|de|jp|uk|br|it|pl|fr|in|au|ir|info|nl|cn|es|cz|kr|ca|eu|ua|co|gr|' +\n  'za|ro|biz|ch|se|tw|mx|vn|hu|be|tr|at|dk|tv|me|ar|sk|no|us|fi|id|cl|xyz|io|pt|by|' +\n  'il|ie|nz|kz|hk|lt|cc|my|sg|club|bg|edu|рф|pk|su|top|th|hr|rs|pe|pro|si|az|lv|pw|' +\n  'ae|ph|online|ng|ee|ws|ve|cat' +\n  ')',\n);\n\n// match valid IPv4 addresses, e.g. \"192.158.1.38\"\nconst ipv4Regex = new RegExp(\n  '(?:(?:[0-9]|[1-9]\\\\d|1\\\\d{2}|2[0-4]\\\\d|25[0-5])\\\\.){3}' +\n  '(?:[0-9]|[1-9]\\\\d|1\\\\d{2}|2[0-4]\\\\d|25[0-5])',\n);\n\n// match hostnames OR IPv4 addresses, e.g. \"dialpad.com\" or \"192.158.1.38\"\nconst hostnameOrIpRegex = new RegExp(\n  '(?:' +\n  [\n    [\n      domainNameRegex.source,\n      tldRegerx.source,\n    ].join('+'),\n    ipv4Regex.source,\n  ].join('|') +\n  ')',\n);\n\n// match URL paths, e.g. \"/news\"\nconst urlPathRegex = /(?:(?:[;/][^#?<>\\s]*)?)/;\n\n// match URL queries and fragments, e.g. \"?cache=1&new=true\" or \"#heading1\"\nconst urlQueryOrFragmentRegex = /(?:(?:\\?[^#<>\\s]+)?(?:#[^<>\\s]+)?)/;\n\n// match complete hostnames or IPv4 addresses without a protocol and with optional\n// URL paths, queries and fragments e.g. \"dialpad.com/news?cache=1#heading1\"\nconst urlWithoutProtocolRegex = new RegExp(\n  '\\\\b' +\n  [\n    hostnameOrIpRegex.source,\n    urlPathRegex.source,\n    urlQueryOrFragmentRegex.source,\n    '(?!\\\\w)',\n  ].join('+'),\n);\n\n// match complete hostnames with protocols and optional URL paths, queries and fragments,\n// e.g. \"ws://localhost:9011\" or \"https://dialpad.com/news?cache=1#heading1\"\nconst urlWithProtocolRegex = /\\b[a-z\\d.-]+:\\/\\/[^<>\\s]+/;\n\n// match email addresses with an optional \"mailto:\" prefix and URL queries, e.g.\n// \"hey@dialpad.com\" or \"mailto:hey@dialpad.com?subject=Hi&body=Hey%20there\"\nconst emailAddressRegex = new RegExp(\n  '(?:mailto:)?' +\n  '[a-z0-9!#$%&\\'*+/=?^_`{|}~-]+(?:\\\\.[a-z0-9!#$%&\\'*+/=?^_`{|}~-]+)*@' +\n  [\n    hostnameOrIpRegex.source,\n    urlQueryOrFragmentRegex.source,\n  ].join('+') +\n  '(?!\\\\w)',\n);\n\n/**\n * Match phone numbers, e.g. \"765-8813\", \"(778) 765-8813\" or \"+17787658813\".\n * @param {number} minLength\n * @param {number} maxLength\n * @returns {RegExp}\n */\nexport function getPhoneNumberRegex (minLength = 7, maxLength = 15) {\n  // Some older browser versions don't support lookbehind, so provide a RegExp\n  // version without it. It fails just one test case, so IMO it's still good\n  // enough to use. https://caniuse.com/js-regexp-lookbehind\n  let canUseLookBehind = true;\n  try {\n    // eslint-disable-next-line prefer-regex-literals\n    RegExp('(?<=\\\\W)');\n  } catch (e) {\n    canUseLookBehind = false;\n  }\n  return new RegExp(\n    `${canUseLookBehind ? '(?:^|(?<=\\\\W))' : ''}` +\n    '(?![\\\\s\\\\-])\\\\+?(?:[0-9()\\\\- \\\\t]' +\n    `{${minLength},${maxLength}}` +\n    ')(?=\\\\b)(?=\\\\W(?=\\\\W|$)|\\\\s|$)',\n  );\n}\n\nconst phoneNumberRegex = getPhoneNumberRegex();\n\n// match all link types\nexport const linkRegex = new RegExp(\n  [\n    urlWithoutProtocolRegex.source,\n    urlWithProtocolRegex.source,\n    emailAddressRegex.source,\n    phoneNumberRegex.source,\n  ].join('|'),\n  'gi',\n);\n\n/**\n * Check if a string is a phone number. Validates only exact matches.\n * @param {string|number} input\n * @returns {boolean}\n */\nexport function isPhoneNumber (input) {\n  if (!input || (!['string', 'number'].includes(typeof input))) return false;\n  input = input.toString();\n  return phoneNumberRegex.exec(input)?.[0] === input;\n}\n\n/**\n * Check if a string is an URL. Validates only exact matches.\n * @param {string} input\n * @returns {boolean}\n */\nexport function isURL (input) {\n  if (!input || typeof input !== 'string') return false;\n  return urlWithoutProtocolRegex.exec(input)?.[0] === input ||\n    urlWithProtocolRegex.exec(input)?.[0] === input;\n}\n\n/**\n * Check if a string is an email address. Validates only exact matches.\n * @param {string} input\n * @returns {boolean}\n */\nexport function isEmailAddress (input) {\n  if (!input || typeof input !== 'string') return false;\n  return emailAddressRegex.exec(input)?.[0] === input;\n}\n\n/**\n * Concatenate a string removing null or undefined elements\n * avoiding parsing them as string with template strings\n * @param {Array} elements\n * @returns {String}\n */\nexport function safeConcatStrings (elements) {\n  return elements.filter(str => !!str).join(' ');\n}\n\n/**\n * Locale safe function to capitalize the first letter of a string.\n * @param {string} str the string to capitalize the first letter of\n * @param {string} locale a string representing the locale to be used. Defaults to 'en-US'\n * @returns The passed in string with the first letter capitalized\n */\nexport function capitalizeFirstLetter (str, locale = 'en-US') {\n  return str.replace(/^\\p{CWU}/u, char => char.toLocaleUpperCase(locale));\n}\n\nexport default {\n  getUniqueString,\n  getRandomElement,\n  getRandomInt,\n  formatMessages,\n  filterFormattedMessages,\n  hasFormattedMessageOfType,\n  getValidationState,\n  htmlFragment,\n  flushPromises,\n  kebabCaseToPascalCase,\n  extractVueListeners,\n  debounce,\n  isOutOfViewPort,\n  getPhoneNumberRegex,\n  linkRegex,\n  isEmailAddress,\n  isPhoneNumber,\n  isURL,\n  safeConcatStrings,\n  capitalizeFirstLetter,\n};\n"],"names":["UNIQUE_ID_COUNTER","TIMER","FOCUSABLE_SELECTOR_NOT_HIDDEN","FOCUSABLE_SELECTOR_NOT_DISABLED","FOCUSABLE_SELECTOR_NOT_HIDDEN_DISABLED","FOCUSABLE_SELECTOR","scheduler","getUniqueString","prefix","DEFAULT_PREFIX","getRandomElement","array","seed","hash","javaHashCode","getRandomInt","str","h","i","max","formatMessages","messages","message","DEFAULT_VALIDATION_MESSAGE_TYPE","filterFormattedMessages","formattedMessages","validationState","getValidationState","hasFormattedMessageOfType","VALIDATION_MESSAGE_TYPES","messageType","findFirstFocusableNode","element","htmlFragment","props","flushPromises","resolve","hasSlotContent","slot","slotProps","vnode","Comment","Text","kebabCaseToPascalCase","string","word","pascalCaseToKebabCase","x","y","extractVueListeners","attrs","listeners","key","debounce","func","timeout","isOutOfViewPort","bounding","isOut","val","domainNameRegex","tldRegerx","ipv4Regex","hostnameOrIpRegex","urlPathRegex","urlQueryOrFragmentRegex","urlWithoutProtocolRegex","urlWithProtocolRegex","emailAddressRegex","getPhoneNumberRegex","minLength","maxLength","phoneNumberRegex","linkRegex","isPhoneNumber","input","_a","isURL","_b","isEmailAddress","safeConcatStrings","elements","capitalizeFirstLetter","locale","char","utils"],"mappings":"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"}