@dialpad/dialtone-vue 3.146.0 → 3.147.0

package/dist/lib/codeblock.cjs

@@ -11,11 +11,13 @@ const _sfc_main = {
     }
   }
 };
-const _hoisted_1 = {
-  class: "d-codeblock"
-};
+const _hoisted_1 = { class: "d-codeblock" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return vue.openBlock(), vue.createElementBlock("pre", null, [vue.createTextVNode("    "), vue.createElementVNode("code", _hoisted_1, vue.toDisplayString($props.text), 1), vue.createTextVNode("\n  ")]);
+  return vue.openBlock(), vue.createElementBlock("pre", null, [
+    vue.createTextVNode("    "),
+    vue.createElementVNode("code", _hoisted_1, vue.toDisplayString($props.text), 1),
+    vue.createTextVNode("\n  ")
+  ]);
 }
 const codeblock = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
 exports.DtCodeblock = codeblock;

package/dist/lib/codeblock.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"codeblock.cjs","sources":["../../components/codeblock/codeblock.vue"],"sourcesContent":["<template>\n  <pre>\n    <code\n      class=\"d-codeblock\"\n    >{{ text }}</code>\n  </pre>\n</template>\n\n<script>\nexport default {\n  name: 'DtCodeblock',\n\n  props: {\n    text: {\n      type: String,\n      required: true,\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","name","props","text","type","String","required","_hoisted_1","class","_createElementBlock","_createElementVNode","_toDisplayString","$props"],"mappings":";;;;AASA,MAAKA,YAAU;AAAA,EACbC,MAAM;AAAA,EAENC,OAAO;AAAA,IACLC,MAAM;AAAA,MACJC,MAAMC;AAAAA,MACNC,UAAU;AAAA,IACZ;AAAA,EACF;AACF;AAfM,MAAAC,aAAA;AAAA,EAAAC,OAAM;AAAa;;0BAFvBC,IAAAA,mBAIM,OAAA,MAAA,qBAJD,MACH,GAAAC,uBAEkB,QAFlBH,YAEkBI,IAAA,gBAAdC,OAAIT,IAAA,GAAA,CAAA,uBAAU,MACpB,CAAA;;;;"}
+{"version":3,"file":"codeblock.cjs","sources":["../../components/codeblock/codeblock.vue"],"sourcesContent":["<template>\n  <pre>\n    <code\n      class=\"d-codeblock\"\n    >{{ text }}</code>\n  </pre>\n</template>\n\n<script>\nexport default {\n  name: 'DtCodeblock',\n\n  props: {\n    text: {\n      type: String,\n      required: true,\n    },\n  },\n};\n</script>\n"],"names":["_createElementBlock","_createElementVNode","_toDisplayString"],"mappings":";;;;AASA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA,IACL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,EACF;AACH;AAfM,MAAA,aAAA,EAAA,OAAM,cAAa;;0BAFvBA,uBAIM,OAAA,MAAA;AAAA,wBAJD,MACH;AAAA,IAAAC,IAEkB,mBAAA,QAFlB,YAEkBC,IAAAA,gBAAd,OAAI,IAAA,GAAA,CAAA;AAAA,wBAAU,MACpB;AAAA;;;;"}

package/dist/lib/codeblock.js

@@ -9,11 +9,13 @@ const _sfc_main = {
     }
   }
 };
-const _hoisted_1 = {
-  class: "d-codeblock"
-};
+const _hoisted_1 = { class: "d-codeblock" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("pre", null, [createTextVNode("    "), createElementVNode("code", _hoisted_1, toDisplayString($props.text), 1), createTextVNode("\n  ")]);
+  return openBlock(), createElementBlock("pre", null, [
+    createTextVNode("    "),
+    createElementVNode("code", _hoisted_1, toDisplayString($props.text), 1),
+    createTextVNode("\n  ")
+  ]);
 }
 const codeblock = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {

package/dist/lib/codeblock.js.map

@@ -1 +1 @@
-{"version":3,"file":"codeblock.js","sources":["../../components/codeblock/codeblock.vue"],"sourcesContent":["<template>\n  <pre>\n    <code\n      class=\"d-codeblock\"\n    >{{ text }}</code>\n  </pre>\n</template>\n\n<script>\nexport default {\n  name: 'DtCodeblock',\n\n  props: {\n    text: {\n      type: String,\n      required: true,\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","name","props","text","type","String","required","_hoisted_1","class","_createElementBlock","_createElementVNode","_toDisplayString","$props"],"mappings":";;AASA,MAAKA,YAAU;AAAA,EACbC,MAAM;AAAA,EAENC,OAAO;AAAA,IACLC,MAAM;AAAA,MACJC,MAAMC;AAAAA,MACNC,UAAU;AAAA,IACZ;AAAA,EACF;AACF;AAfM,MAAAC,aAAA;AAAA,EAAAC,OAAM;AAAa;;sBAFvBC,mBAIM,OAAA,MAAA,iBAJD,MACH,GAAAC,mBAEkB,QAFlBH,YAEkBI,gBAAdC,OAAIT,IAAA,GAAA,CAAA,mBAAU,MACpB,CAAA;;;"}
+{"version":3,"file":"codeblock.js","sources":["../../components/codeblock/codeblock.vue"],"sourcesContent":["<template>\n  <pre>\n    <code\n      class=\"d-codeblock\"\n    >{{ text }}</code>\n  </pre>\n</template>\n\n<script>\nexport default {\n  name: 'DtCodeblock',\n\n  props: {\n    text: {\n      type: String,\n      required: true,\n    },\n  },\n};\n</script>\n"],"names":["_createElementBlock","_createElementVNode","_toDisplayString"],"mappings":";;AASA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA,IACL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,EACF;AACH;AAfM,MAAA,aAAA,EAAA,OAAM,cAAa;;sBAFvBA,mBAIM,OAAA,MAAA;AAAA,oBAJD,MACH;AAAA,IAAAC,mBAEkB,QAFlB,YAEkBC,gBAAd,OAAI,IAAA,GAAA,CAAA;AAAA,oBAAU,MACpB;AAAA;;;"}

package/dist/lib/collapsible.cjs

@@ -9,7 +9,7 @@ const lib_icon = require("./icon.cjs");
 require("../common/constants.cjs");
 require("../chunks/link_constants-x8NwdqmA.js");
 require("@dialpad/dialtone-icons/vue3");
-require("../chunks/icon_constants-bvhFNOPu.js");
+require("../chunks/icon_constants-QYpmdE0R.js");
 require("@dialpad/dialtone-icons/icons.json");
 const _sfc_main$1 = {
   name: "DtCollapsibleLazyShow",
@@ -141,12 +141,16 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
     onLeave: $options.leave,
     onAfterLeave: $options.afterLeave
   }), {
-    default: vue.withCtx(() => [vue.withDirectives((vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.elementType), vue.normalizeProps(vue.guardReactiveProps(_ctx.$attrs)), {
-      default: vue.withCtx(() => [$data.initialized ? vue.renderSlot(_ctx.$slots, "default", {
-        key: 0
-      }) : vue.createCommentVNode("", true)]),
-      _: 3
-    }, 16)), [[vue.vShow, $props.show]])]),
+    default: vue.withCtx(() => [
+      vue.withDirectives((vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.elementType), vue.normalizeProps(vue.guardReactiveProps(_ctx.$attrs)), {
+        default: vue.withCtx(() => [
+          $data.initialized ? vue.renderSlot(_ctx.$slots, "default", { key: 0 }) : vue.createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 16)), [
+        [vue.vShow, $props.show]
+      ])
+    ]),
     _: 3
   }, 16, ["appear", "css", "onBeforeEnter", "onEnter", "onAfterEnter", "onBeforeLeave", "onLeave", "onAfterLeave"]);
 }
@@ -322,61 +326,71 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_icon = vue.resolveComponent("dt-icon");
   const _component_dt_button = vue.resolveComponent("dt-button");
   const _component_dt_collapsible_lazy_show = vue.resolveComponent("dt-collapsible-lazy-show");
-  return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.elementType), vue.mergeProps({
-    ref: "collapsible"
-  }, vue.toHandlers($options.collapsibleListeners)), {
-    default: vue.withCtx(() => [vue.createElementVNode("div", {
-      id: !$props.ariaLabelledBy && $options.labelledBy,
-      ref: "anchor",
-      class: vue.normalizeClass($props.anchorClass)
-    }, [vue.renderSlot(_ctx.$slots, "anchor", {
-      attrs: {
-        "aria-controls": $props.id,
-        "aria-expanded": $data.isOpen.toString(),
-        "role": "button"
-      }
-    }, () => [vue.createVNode(_component_dt_button, {
-      importance: "clear",
-      kind: "muted",
-      "aria-controls": $props.id,
-      "aria-expanded": `${$data.isOpen}`,
-      style: vue.normalizeStyle({
-        "width": $props.maxWidth
-      }),
-      onClick: $options.defaultToggleOpen
-    }, {
-      default: vue.withCtx(() => [vue.createVNode(_component_dt_icon, {
-        name: $data.isOpen ? "chevron-down" : "chevron-right",
-        class: "d-collapsible__icon",
-        size: "300"
-      }, null, 8, ["name"]), vue.createElementVNode("span", {
-        class: "d-collapsible__anchor-text",
-        title: $props.anchorText
-      }, vue.toDisplayString($props.anchorText), 9, _hoisted_2)]),
-      _: 1
-    }, 8, ["aria-controls", "aria-expanded", "style", "onClick"])])], 10, _hoisted_1), vue.createVNode(_component_dt_collapsible_lazy_show, vue.mergeProps({
-      id: $props.id,
-      ref: "contentWrapper",
-      "aria-hidden": `${!$data.isOpen}`,
-      "aria-labelledby": $options.labelledBy,
-      "aria-label": $props.ariaLabel,
-      show: $data.isOpen,
-      "element-type": $props.contentElementType,
-      class: $props.contentClass,
-      style: {
-        "max-height": $props.maxHeight,
-        "max-width": $props.maxWidth
-      },
-      "data-qa": "dt-collapsible--content",
-      tabindex: "-1",
-      appear: ""
-    }, vue.toHandlers($options.collapsibleListeners), {
-      onAfterLeave: $options.onLeaveTransitionComplete,
-      onAfterEnter: $options.onEnterTransitionComplete
-    }), {
-      default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "content")]),
-      _: 3
-    }, 16, ["id", "aria-hidden", "aria-labelledby", "aria-label", "show", "element-type", "class", "style", "onAfterLeave", "onAfterEnter"])]),
+  return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.elementType), vue.mergeProps({ ref: "collapsible" }, vue.toHandlers($options.collapsibleListeners)), {
+    default: vue.withCtx(() => [
+      vue.createElementVNode("div", {
+        id: !$props.ariaLabelledBy && $options.labelledBy,
+        ref: "anchor",
+        class: vue.normalizeClass($props.anchorClass)
+      }, [
+        vue.renderSlot(_ctx.$slots, "anchor", {
+          attrs: {
+            "aria-controls": $props.id,
+            "aria-expanded": $data.isOpen.toString(),
+            "role": "button"
+          }
+        }, () => [
+          vue.createVNode(_component_dt_button, {
+            importance: "clear",
+            kind: "muted",
+            "aria-controls": $props.id,
+            "aria-expanded": `${$data.isOpen}`,
+            style: vue.normalizeStyle({
+              "width": $props.maxWidth
+            }),
+            onClick: $options.defaultToggleOpen
+          }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(_component_dt_icon, {
+                name: $data.isOpen ? "chevron-down" : "chevron-right",
+                class: "d-collapsible__icon",
+                size: "300"
+              }, null, 8, ["name"]),
+              vue.createElementVNode("span", {
+                class: "d-collapsible__anchor-text",
+                title: $props.anchorText
+              }, vue.toDisplayString($props.anchorText), 9, _hoisted_2)
+            ]),
+            _: 1
+          }, 8, ["aria-controls", "aria-expanded", "style", "onClick"])
+        ])
+      ], 10, _hoisted_1),
+      vue.createVNode(_component_dt_collapsible_lazy_show, vue.mergeProps({
+        id: $props.id,
+        ref: "contentWrapper",
+        "aria-hidden": `${!$data.isOpen}`,
+        "aria-labelledby": $options.labelledBy,
+        "aria-label": $props.ariaLabel,
+        show: $data.isOpen,
+        "element-type": $props.contentElementType,
+        class: $props.contentClass,
+        style: {
+          "max-height": $props.maxHeight,
+          "max-width": $props.maxWidth
+        },
+        "data-qa": "dt-collapsible--content",
+        tabindex: "-1",
+        appear: ""
+      }, vue.toHandlers($options.collapsibleListeners), {
+        onAfterLeave: $options.onLeaveTransitionComplete,
+        onAfterEnter: $options.onEnterTransitionComplete
+      }), {
+        default: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "content")
+        ]),
+        _: 3
+      }, 16, ["id", "aria-hidden", "aria-labelledby", "aria-label", "show", "element-type", "class", "style", "onAfterLeave", "onAfterEnter"])
+    ]),
     _: 3
   }, 16);
 }

package/dist/lib/collapsible.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"collapsible.cjs","sources":["../../components/collapsible/collapsible_lazy_show.vue","../../components/collapsible/collapsible.vue"],"sourcesContent":["<template>\n  <!-- applies the transition on initial render -->\n  <transition\n    :appear=\"appear\"\n    enter-active-class=\"enter-active\"\n    leave-active-class=\"leave-active\"\n    v-bind=\"$attrs\"\n    :css=\"isCSSEnabled\"\n    @before-enter=\"beforeEnter\"\n    @enter=\"enter\"\n    @after-enter=\"afterEnter\"\n    @before-leave=\"beforeLeave\"\n    @leave=\"leave\"\n    @after-leave=\"afterLeave\"\n  >\n    <component\n      :is=\"elementType\"\n      v-show=\"show\"\n      v-bind=\"$attrs\"\n    >\n      <!-- @slot slot for Content within collapsible -->\n      <slot v-if=\"initialized\" />\n    </component>\n  </transition>\n</template>\n\n<script>\nexport default {\n  name: 'DtCollapsibleLazyShow',\n\n  inheritAttrs: false,\n\n  /******************\n   *     PROPS      *\n   ******************/\n  props: {\n    /**\n     * Whether the child slot is shown.\n     */\n    show: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Enable/Disable transition animation\n     */\n    appear: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n  },\n\n  /******************\n   *      DATA      *\n   ******************/\n  data () {\n    return {\n      initialized: !!this.show,\n    };\n  },\n\n  /******************\n   *    COMPUTED    *\n   ******************/\n  computed: {\n    /**\n     * Set the css property to false when running tests only.\n     * Refer to: https://vuejs.org/guide/built-ins/transition.html#javascript-hooks for details about\n     * transition `css` property\n     * @returns {boolean}\n     */\n    isCSSEnabled () {\n      return process.env.NODE_ENV !== 'test';\n    },\n  },\n\n  /******************\n   *      WATCH     *\n   ******************/\n  watch: {\n    show: function (newValue) {\n      if (!newValue || this.initialized) return;\n\n      this.initialized = true;\n    },\n  },\n\n  methods: {\n    /**\n     * @param {HTMLElement} element\n     */\n    beforeEnter (element) {\n      requestAnimationFrame(() => {\n        if (!element.style.height) {\n          element.style.height = '0px';\n        }\n      });\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    enter (element) {\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          element.style.height = `${element.scrollHeight}px`;\n        });\n      });\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    afterEnter (element) {\n      element.style.height = null;\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    beforeLeave (element) {\n      requestAnimationFrame(() => {\n        if (!element.style.height) {\n          element.style.height = `${element.offsetHeight}px`;\n        }\n      });\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    leave (element) {\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          element.style.height = '0px';\n        });\n      });\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    afterLeave (element) {\n      element.style.height = null;\n    },\n  },\n};\n</script>\n\n<style>\n  .enter-active,\n  .leave-active {\n    overflow: hidden;\n    transition: height var(--td300) var(--ttf-out-quint);\n  }\n</style>\n","<template>\n  <component\n    :is=\"elementType\"\n    ref=\"collapsible\"\n    v-on=\"collapsibleListeners\"\n  >\n    <!-- Element for capturing keypress events -->\n    <div\n      :id=\"!ariaLabelledBy && labelledBy\"\n      ref=\"anchor\"\n      :class=\"anchorClass\"\n    >\n      <!-- @slot Slot for the anchor element that toggles the collapsible content -->\n      <slot\n        name=\"anchor\"\n        :attrs=\"{\n          'aria-controls': id,\n          'aria-expanded': isOpen.toString(),\n          'role': 'button',\n        }\"\n      >\n        <dt-button\n          importance=\"clear\"\n          kind=\"muted\"\n          :aria-controls=\"id\"\n          :aria-expanded=\"`${isOpen}`\"\n          :style=\"{\n            'width': maxWidth,\n          }\"\n          @click=\"defaultToggleOpen\"\n        >\n          <dt-icon\n            :name=\" isOpen ? 'chevron-down' : 'chevron-right'\"\n            class=\"d-collapsible__icon\"\n            size=\"300\"\n          />\n          <span\n            class=\"d-collapsible__anchor-text\"\n            :title=\"anchorText\"\n          >\n            {{ anchorText }}\n          </span>\n        </dt-button>\n      </slot>\n    </div>\n    <dt-collapsible-lazy-show\n      :id=\"id\"\n      ref=\"contentWrapper\"\n      :aria-hidden=\"`${!isOpen}`\"\n      :aria-labelledby=\"labelledBy\"\n      :aria-label=\"ariaLabel\"\n      :show=\"isOpen\"\n      :element-type=\"contentElementType\"\n      :class=\"contentClass\"\n      :style=\"{\n        'max-height': maxHeight,\n        'max-width': maxWidth,\n      }\"\n      data-qa=\"dt-collapsible--content\"\n      tabindex=\"-1\"\n      appear\n      v-on=\"collapsibleListeners\"\n      @after-leave=\"onLeaveTransitionComplete\"\n      @after-enter=\"onEnterTransitionComplete\"\n    >\n      <!-- @slot Slot for the collapsible element that is expanded by the anchor -->\n      <slot\n        name=\"content\"\n      />\n    </dt-collapsible-lazy-show>\n  </component>\n</template>\n\n<script>\nimport { extractVueListeners, getUniqueString, hasSlotContent } from '@/common/utils';\nimport DtCollapsibleLazyShow from './collapsible_lazy_show.vue';\nimport { DtButton } from '@/components/button';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { DtIcon } from '@/components/icon';\n\n/**\n * A collapsible is a component consisting of an interactive anchor that toggled the expandable/collapsible element.\n * @see https://dialtone.dialpad.com/components/collapsible.html\n */\nexport default {\n  name: 'DtCollapsible',\n\n  components: {\n    DtButton,\n    DtCollapsibleLazyShow,\n    DtLazyShow,\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * Text that is displayed on the anchor if nothing is passed in the slot.\n     * Ignored if the anchor slot is used.\n     */\n    anchorText: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Controls whether the collapsible is shown. Leaving this null will have the collapsible start\n     * expanded and trigger on click by default. If you set this value, the default trigger\n     * behavior will be disabled, and you can control it as you need.\n     * Supports .sync modifier\n     * @values null, true, false\n     */\n    open: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * The id of the content wrapper.\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * HTML element type (tag name) of the root element of the component.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    contentElementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * Additional class name for the anchor wrapper element.\n     */\n    anchorClass: {\n      type: [String, Array, Object],\n      default: null,\n    },\n\n    /**\n     * Additional class name for the content wrapper element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: null,\n    },\n\n    /**\n     * The maximum width of the anchor and collapsible element.\n     * Possible units rem|px|%|em\n     */\n    maxWidth: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The maximum height of the collapsible element.\n     * Possible units rem|px|%|em\n     */\n    maxHeight: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Label on the collapsible content. Should provide this or ariaLabelledBy but not both.\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Id of the element that labels the collapsible content. Defaults to the anchor element.\n     * Should provide this or ariaLabel but not both.\n     */\n    ariaLabelledBy: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired to sync the open prop with the parent component\n     * @event update:open\n     */\n    'update:open',\n\n    /**\n     * Event fired when the content is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean}\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      isOpen: true,\n    };\n  },\n\n  computed: {\n    labelledBy () {\n      // aria-labelledby should be set only if aria-labelledby is passed as a prop, or if\n      // there is no aria-label and the labelledby should point to the anchor\n      return this.ariaLabelledBy || (!this.ariaLabel && getUniqueString('DtCollapsible__anchor'));\n    },\n\n    collapsibleListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n  },\n\n  watch: {\n    open: {\n      handler: function (open) {\n        if (open !== null) {\n          this.isOpen = open;\n        }\n      },\n\n      immediate: true,\n    },\n  },\n\n  created () {\n    this.validateProperAnchor();\n  },\n\n  methods: {\n    onLeaveTransitionComplete () {\n      this.$emit('opened', false);\n      if (this.open !== null) {\n        this.$emit('update:open', false);\n      }\n    },\n\n    onEnterTransitionComplete () {\n      this.$emit('opened', true, this.$refs.content);\n      if (this.open !== null) {\n        this.$emit('update:open', true);\n      }\n    },\n\n    defaultToggleOpen () {\n      if (this.open === null) {\n        this.toggleOpen();\n      }\n    },\n\n    toggleOpen () {\n      this.isOpen = !this.isOpen;\n    },\n\n    validateProperAnchor () {\n      if (!this.anchorText && !hasSlotContent(this.$slots.anchor)) {\n        console.error('anchor text and anchor slot content cannot both be falsy');\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","name","inheritAttrs","props","show","type","Boolean","default","appear","elementType","String","data","initialized","computed","isCSSEnabled","process","env","NODE_ENV","watch","newValue","methods","beforeEnter","element","requestAnimationFrame","style","height","enter","scrollHeight","afterEnter","beforeLeave","offsetHeight","leave","afterLeave","_openBlock","_createBlock","_Transition","_mergeProps","$props","_ctx","$attrs","css","$options","onBeforeEnter","onEnter","onAfterEnter","onBeforeLeave","onLeave","onAfterLeave","_resolveDynamicComponent","_normalizeProps","_guardReactiveProps","$data","_renderSlot","$slots","key","components","DtButton","DtCollapsibleLazyShow","DtLazyShow","DtIcon","anchorText","open","id","getUniqueString","contentElementType","anchorClass","Array","Object","contentClass","maxWidth","maxHeight","ariaLabel","ariaLabelledBy","emits","isOpen","labelledBy","collapsibleListeners","extractVueListeners","handler","immediate","created","validateProperAnchor","onLeaveTransitionComplete","$emit","onEnterTransitionComplete","$refs","content","defaultToggleOpen","toggleOpen","hasSlotContent","anchor","console","error","ref","_toHandlers","_createElementVNode","class","attrs","toString","_createVNode","_component_dt_button","importance","kind","_normalizeStyle","onClick","_component_dt_icon","size","title","_hoisted_2","_component_dt_collapsible_lazy_show","tabindex"],"mappings":"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"}
+{"version":3,"file":"collapsible.cjs","sources":["../../components/collapsible/collapsible_lazy_show.vue","../../components/collapsible/collapsible.vue"],"sourcesContent":["<template>\n  <!-- applies the transition on initial render -->\n  <transition\n    :appear=\"appear\"\n    enter-active-class=\"enter-active\"\n    leave-active-class=\"leave-active\"\n    v-bind=\"$attrs\"\n    :css=\"isCSSEnabled\"\n    @before-enter=\"beforeEnter\"\n    @enter=\"enter\"\n    @after-enter=\"afterEnter\"\n    @before-leave=\"beforeLeave\"\n    @leave=\"leave\"\n    @after-leave=\"afterLeave\"\n  >\n    <component\n      :is=\"elementType\"\n      v-show=\"show\"\n      v-bind=\"$attrs\"\n    >\n      <!-- @slot slot for Content within collapsible -->\n      <slot v-if=\"initialized\" />\n    </component>\n  </transition>\n</template>\n\n<script>\nexport default {\n  name: 'DtCollapsibleLazyShow',\n\n  inheritAttrs: false,\n\n  /******************\n   *     PROPS      *\n   ******************/\n  props: {\n    /**\n     * Whether the child slot is shown.\n     */\n    show: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Enable/Disable transition animation\n     */\n    appear: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n  },\n\n  /******************\n   *      DATA      *\n   ******************/\n  data () {\n    return {\n      initialized: !!this.show,\n    };\n  },\n\n  /******************\n   *    COMPUTED    *\n   ******************/\n  computed: {\n    /**\n     * Set the css property to false when running tests only.\n     * Refer to: https://vuejs.org/guide/built-ins/transition.html#javascript-hooks for details about\n     * transition `css` property\n     * @returns {boolean}\n     */\n    isCSSEnabled () {\n      return process.env.NODE_ENV !== 'test';\n    },\n  },\n\n  /******************\n   *      WATCH     *\n   ******************/\n  watch: {\n    show: function (newValue) {\n      if (!newValue || this.initialized) return;\n\n      this.initialized = true;\n    },\n  },\n\n  methods: {\n    /**\n     * @param {HTMLElement} element\n     */\n    beforeEnter (element) {\n      requestAnimationFrame(() => {\n        if (!element.style.height) {\n          element.style.height = '0px';\n        }\n      });\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    enter (element) {\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          element.style.height = `${element.scrollHeight}px`;\n        });\n      });\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    afterEnter (element) {\n      element.style.height = null;\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    beforeLeave (element) {\n      requestAnimationFrame(() => {\n        if (!element.style.height) {\n          element.style.height = `${element.offsetHeight}px`;\n        }\n      });\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    leave (element) {\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          element.style.height = '0px';\n        });\n      });\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    afterLeave (element) {\n      element.style.height = null;\n    },\n  },\n};\n</script>\n\n<style>\n  .enter-active,\n  .leave-active {\n    overflow: hidden;\n    transition: height var(--td300) var(--ttf-out-quint);\n  }\n</style>\n","<template>\n  <component\n    :is=\"elementType\"\n    ref=\"collapsible\"\n    v-on=\"collapsibleListeners\"\n  >\n    <!-- Element for capturing keypress events -->\n    <div\n      :id=\"!ariaLabelledBy && labelledBy\"\n      ref=\"anchor\"\n      :class=\"anchorClass\"\n    >\n      <!-- @slot Slot for the anchor element that toggles the collapsible content -->\n      <slot\n        name=\"anchor\"\n        :attrs=\"{\n          'aria-controls': id,\n          'aria-expanded': isOpen.toString(),\n          'role': 'button',\n        }\"\n      >\n        <dt-button\n          importance=\"clear\"\n          kind=\"muted\"\n          :aria-controls=\"id\"\n          :aria-expanded=\"`${isOpen}`\"\n          :style=\"{\n            'width': maxWidth,\n          }\"\n          @click=\"defaultToggleOpen\"\n        >\n          <dt-icon\n            :name=\" isOpen ? 'chevron-down' : 'chevron-right'\"\n            class=\"d-collapsible__icon\"\n            size=\"300\"\n          />\n          <span\n            class=\"d-collapsible__anchor-text\"\n            :title=\"anchorText\"\n          >\n            {{ anchorText }}\n          </span>\n        </dt-button>\n      </slot>\n    </div>\n    <dt-collapsible-lazy-show\n      :id=\"id\"\n      ref=\"contentWrapper\"\n      :aria-hidden=\"`${!isOpen}`\"\n      :aria-labelledby=\"labelledBy\"\n      :aria-label=\"ariaLabel\"\n      :show=\"isOpen\"\n      :element-type=\"contentElementType\"\n      :class=\"contentClass\"\n      :style=\"{\n        'max-height': maxHeight,\n        'max-width': maxWidth,\n      }\"\n      data-qa=\"dt-collapsible--content\"\n      tabindex=\"-1\"\n      appear\n      v-on=\"collapsibleListeners\"\n      @after-leave=\"onLeaveTransitionComplete\"\n      @after-enter=\"onEnterTransitionComplete\"\n    >\n      <!-- @slot Slot for the collapsible element that is expanded by the anchor -->\n      <slot\n        name=\"content\"\n      />\n    </dt-collapsible-lazy-show>\n  </component>\n</template>\n\n<script>\nimport { extractVueListeners, getUniqueString, hasSlotContent } from '@/common/utils';\nimport DtCollapsibleLazyShow from './collapsible_lazy_show.vue';\nimport { DtButton } from '@/components/button';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { DtIcon } from '@/components/icon';\n\n/**\n * A collapsible is a component consisting of an interactive anchor that toggled the expandable/collapsible element.\n * @see https://dialtone.dialpad.com/components/collapsible.html\n */\nexport default {\n  name: 'DtCollapsible',\n\n  components: {\n    DtButton,\n    DtCollapsibleLazyShow,\n    DtLazyShow,\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * Text that is displayed on the anchor if nothing is passed in the slot.\n     * Ignored if the anchor slot is used.\n     */\n    anchorText: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Controls whether the collapsible is shown. Leaving this null will have the collapsible start\n     * expanded and trigger on click by default. If you set this value, the default trigger\n     * behavior will be disabled, and you can control it as you need.\n     * Supports .sync modifier\n     * @values null, true, false\n     */\n    open: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * The id of the content wrapper.\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * HTML element type (tag name) of the root element of the component.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    contentElementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * Additional class name for the anchor wrapper element.\n     */\n    anchorClass: {\n      type: [String, Array, Object],\n      default: null,\n    },\n\n    /**\n     * Additional class name for the content wrapper element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: null,\n    },\n\n    /**\n     * The maximum width of the anchor and collapsible element.\n     * Possible units rem|px|%|em\n     */\n    maxWidth: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The maximum height of the collapsible element.\n     * Possible units rem|px|%|em\n     */\n    maxHeight: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Label on the collapsible content. Should provide this or ariaLabelledBy but not both.\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Id of the element that labels the collapsible content. Defaults to the anchor element.\n     * Should provide this or ariaLabel but not both.\n     */\n    ariaLabelledBy: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired to sync the open prop with the parent component\n     * @event update:open\n     */\n    'update:open',\n\n    /**\n     * Event fired when the content is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean}\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      isOpen: true,\n    };\n  },\n\n  computed: {\n    labelledBy () {\n      // aria-labelledby should be set only if aria-labelledby is passed as a prop, or if\n      // there is no aria-label and the labelledby should point to the anchor\n      return this.ariaLabelledBy || (!this.ariaLabel && getUniqueString('DtCollapsible__anchor'));\n    },\n\n    collapsibleListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n  },\n\n  watch: {\n    open: {\n      handler: function (open) {\n        if (open !== null) {\n          this.isOpen = open;\n        }\n      },\n\n      immediate: true,\n    },\n  },\n\n  created () {\n    this.validateProperAnchor();\n  },\n\n  methods: {\n    onLeaveTransitionComplete () {\n      this.$emit('opened', false);\n      if (this.open !== null) {\n        this.$emit('update:open', false);\n      }\n    },\n\n    onEnterTransitionComplete () {\n      this.$emit('opened', true, this.$refs.content);\n      if (this.open !== null) {\n        this.$emit('update:open', true);\n      }\n    },\n\n    defaultToggleOpen () {\n      if (this.open === null) {\n        this.toggleOpen();\n      }\n    },\n\n    toggleOpen () {\n      this.isOpen = !this.isOpen;\n    },\n\n    validateProperAnchor () {\n      if (!this.anchorText && !hasSlotContent(this.$slots.anchor)) {\n        console.error('anchor text and anchor slot content cannot both be falsy');\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","_openBlock","_createBlock","_Transition","_mergeProps","_resolveDynamicComponent","_normalizeProps","_guardReactiveProps","_renderSlot","DtButton","DtLazyShow","DtIcon","getUniqueString","extractVueListeners","hasSlotContent","_toHandlers","_createElementVNode","_createVNode","_normalizeStyle"],"mappings":"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"}

package/dist/lib/collapsible.js

@@ -7,7 +7,7 @@ import { DtIcon } from "./icon.js";
 import "../common/constants.js";
 import "../chunks/link_constants-AfTWrr-n.js";
 import "@dialpad/dialtone-icons/vue3";
-import "../chunks/icon_constants-gIQj4mf7.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
 const _sfc_main$1 = {
   name: "DtCollapsibleLazyShow",
@@ -139,12 +139,16 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
     onLeave: $options.leave,
     onAfterLeave: $options.afterLeave
   }), {
-    default: withCtx(() => [withDirectives((openBlock(), createBlock(resolveDynamicComponent($props.elementType), normalizeProps(guardReactiveProps(_ctx.$attrs)), {
-      default: withCtx(() => [$data.initialized ? renderSlot(_ctx.$slots, "default", {
-        key: 0
-      }) : createCommentVNode("", true)]),
-      _: 3
-    }, 16)), [[vShow, $props.show]])]),
+    default: withCtx(() => [
+      withDirectives((openBlock(), createBlock(resolveDynamicComponent($props.elementType), normalizeProps(guardReactiveProps(_ctx.$attrs)), {
+        default: withCtx(() => [
+          $data.initialized ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 16)), [
+        [vShow, $props.show]
+      ])
+    ]),
     _: 3
   }, 16, ["appear", "css", "onBeforeEnter", "onEnter", "onAfterEnter", "onBeforeLeave", "onLeave", "onAfterLeave"]);
 }
@@ -320,61 +324,71 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_icon = resolveComponent("dt-icon");
   const _component_dt_button = resolveComponent("dt-button");
   const _component_dt_collapsible_lazy_show = resolveComponent("dt-collapsible-lazy-show");
-  return openBlock(), createBlock(resolveDynamicComponent($props.elementType), mergeProps({
-    ref: "collapsible"
-  }, toHandlers($options.collapsibleListeners)), {
-    default: withCtx(() => [createElementVNode("div", {
-      id: !$props.ariaLabelledBy && $options.labelledBy,
-      ref: "anchor",
-      class: normalizeClass($props.anchorClass)
-    }, [renderSlot(_ctx.$slots, "anchor", {
-      attrs: {
-        "aria-controls": $props.id,
-        "aria-expanded": $data.isOpen.toString(),
-        "role": "button"
-      }
-    }, () => [createVNode(_component_dt_button, {
-      importance: "clear",
-      kind: "muted",
-      "aria-controls": $props.id,
-      "aria-expanded": `${$data.isOpen}`,
-      style: normalizeStyle({
-        "width": $props.maxWidth
-      }),
-      onClick: $options.defaultToggleOpen
-    }, {
-      default: withCtx(() => [createVNode(_component_dt_icon, {
-        name: $data.isOpen ? "chevron-down" : "chevron-right",
-        class: "d-collapsible__icon",
-        size: "300"
-      }, null, 8, ["name"]), createElementVNode("span", {
-        class: "d-collapsible__anchor-text",
-        title: $props.anchorText
-      }, toDisplayString($props.anchorText), 9, _hoisted_2)]),
-      _: 1
-    }, 8, ["aria-controls", "aria-expanded", "style", "onClick"])])], 10, _hoisted_1), createVNode(_component_dt_collapsible_lazy_show, mergeProps({
-      id: $props.id,
-      ref: "contentWrapper",
-      "aria-hidden": `${!$data.isOpen}`,
-      "aria-labelledby": $options.labelledBy,
-      "aria-label": $props.ariaLabel,
-      show: $data.isOpen,
-      "element-type": $props.contentElementType,
-      class: $props.contentClass,
-      style: {
-        "max-height": $props.maxHeight,
-        "max-width": $props.maxWidth
-      },
-      "data-qa": "dt-collapsible--content",
-      tabindex: "-1",
-      appear: ""
-    }, toHandlers($options.collapsibleListeners), {
-      onAfterLeave: $options.onLeaveTransitionComplete,
-      onAfterEnter: $options.onEnterTransitionComplete
-    }), {
-      default: withCtx(() => [renderSlot(_ctx.$slots, "content")]),
-      _: 3
-    }, 16, ["id", "aria-hidden", "aria-labelledby", "aria-label", "show", "element-type", "class", "style", "onAfterLeave", "onAfterEnter"])]),
+  return openBlock(), createBlock(resolveDynamicComponent($props.elementType), mergeProps({ ref: "collapsible" }, toHandlers($options.collapsibleListeners)), {
+    default: withCtx(() => [
+      createElementVNode("div", {
+        id: !$props.ariaLabelledBy && $options.labelledBy,
+        ref: "anchor",
+        class: normalizeClass($props.anchorClass)
+      }, [
+        renderSlot(_ctx.$slots, "anchor", {
+          attrs: {
+            "aria-controls": $props.id,
+            "aria-expanded": $data.isOpen.toString(),
+            "role": "button"
+          }
+        }, () => [
+          createVNode(_component_dt_button, {
+            importance: "clear",
+            kind: "muted",
+            "aria-controls": $props.id,
+            "aria-expanded": `${$data.isOpen}`,
+            style: normalizeStyle({
+              "width": $props.maxWidth
+            }),
+            onClick: $options.defaultToggleOpen
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_dt_icon, {
+                name: $data.isOpen ? "chevron-down" : "chevron-right",
+                class: "d-collapsible__icon",
+                size: "300"
+              }, null, 8, ["name"]),
+              createElementVNode("span", {
+                class: "d-collapsible__anchor-text",
+                title: $props.anchorText
+              }, toDisplayString($props.anchorText), 9, _hoisted_2)
+            ]),
+            _: 1
+          }, 8, ["aria-controls", "aria-expanded", "style", "onClick"])
+        ])
+      ], 10, _hoisted_1),
+      createVNode(_component_dt_collapsible_lazy_show, mergeProps({
+        id: $props.id,
+        ref: "contentWrapper",
+        "aria-hidden": `${!$data.isOpen}`,
+        "aria-labelledby": $options.labelledBy,
+        "aria-label": $props.ariaLabel,
+        show: $data.isOpen,
+        "element-type": $props.contentElementType,
+        class: $props.contentClass,
+        style: {
+          "max-height": $props.maxHeight,
+          "max-width": $props.maxWidth
+        },
+        "data-qa": "dt-collapsible--content",
+        tabindex: "-1",
+        appear: ""
+      }, toHandlers($options.collapsibleListeners), {
+        onAfterLeave: $options.onLeaveTransitionComplete,
+        onAfterEnter: $options.onEnterTransitionComplete
+      }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "content")
+        ]),
+        _: 3
+      }, 16, ["id", "aria-hidden", "aria-labelledby", "aria-label", "show", "element-type", "class", "style", "onAfterLeave", "onAfterEnter"])
+    ]),
     _: 3
   }, 16);
 }

package/dist/lib/collapsible.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapsible.js","sources":["../../components/collapsible/collapsible_lazy_show.vue","../../components/collapsible/collapsible.vue"],"sourcesContent":["<template>\n  <!-- applies the transition on initial render -->\n  <transition\n    :appear=\"appear\"\n    enter-active-class=\"enter-active\"\n    leave-active-class=\"leave-active\"\n    v-bind=\"$attrs\"\n    :css=\"isCSSEnabled\"\n    @before-enter=\"beforeEnter\"\n    @enter=\"enter\"\n    @after-enter=\"afterEnter\"\n    @before-leave=\"beforeLeave\"\n    @leave=\"leave\"\n    @after-leave=\"afterLeave\"\n  >\n    <component\n      :is=\"elementType\"\n      v-show=\"show\"\n      v-bind=\"$attrs\"\n    >\n      <!-- @slot slot for Content within collapsible -->\n      <slot v-if=\"initialized\" />\n    </component>\n  </transition>\n</template>\n\n<script>\nexport default {\n  name: 'DtCollapsibleLazyShow',\n\n  inheritAttrs: false,\n\n  /******************\n   *     PROPS      *\n   ******************/\n  props: {\n    /**\n     * Whether the child slot is shown.\n     */\n    show: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Enable/Disable transition animation\n     */\n    appear: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n  },\n\n  /******************\n   *      DATA      *\n   ******************/\n  data () {\n    return {\n      initialized: !!this.show,\n    };\n  },\n\n  /******************\n   *    COMPUTED    *\n   ******************/\n  computed: {\n    /**\n     * Set the css property to false when running tests only.\n     * Refer to: https://vuejs.org/guide/built-ins/transition.html#javascript-hooks for details about\n     * transition `css` property\n     * @returns {boolean}\n     */\n    isCSSEnabled () {\n      return process.env.NODE_ENV !== 'test';\n    },\n  },\n\n  /******************\n   *      WATCH     *\n   ******************/\n  watch: {\n    show: function (newValue) {\n      if (!newValue || this.initialized) return;\n\n      this.initialized = true;\n    },\n  },\n\n  methods: {\n    /**\n     * @param {HTMLElement} element\n     */\n    beforeEnter (element) {\n      requestAnimationFrame(() => {\n        if (!element.style.height) {\n          element.style.height = '0px';\n        }\n      });\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    enter (element) {\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          element.style.height = `${element.scrollHeight}px`;\n        });\n      });\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    afterEnter (element) {\n      element.style.height = null;\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    beforeLeave (element) {\n      requestAnimationFrame(() => {\n        if (!element.style.height) {\n          element.style.height = `${element.offsetHeight}px`;\n        }\n      });\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    leave (element) {\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          element.style.height = '0px';\n        });\n      });\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    afterLeave (element) {\n      element.style.height = null;\n    },\n  },\n};\n</script>\n\n<style>\n  .enter-active,\n  .leave-active {\n    overflow: hidden;\n    transition: height var(--td300) var(--ttf-out-quint);\n  }\n</style>\n","<template>\n  <component\n    :is=\"elementType\"\n    ref=\"collapsible\"\n    v-on=\"collapsibleListeners\"\n  >\n    <!-- Element for capturing keypress events -->\n    <div\n      :id=\"!ariaLabelledBy && labelledBy\"\n      ref=\"anchor\"\n      :class=\"anchorClass\"\n    >\n      <!-- @slot Slot for the anchor element that toggles the collapsible content -->\n      <slot\n        name=\"anchor\"\n        :attrs=\"{\n          'aria-controls': id,\n          'aria-expanded': isOpen.toString(),\n          'role': 'button',\n        }\"\n      >\n        <dt-button\n          importance=\"clear\"\n          kind=\"muted\"\n          :aria-controls=\"id\"\n          :aria-expanded=\"`${isOpen}`\"\n          :style=\"{\n            'width': maxWidth,\n          }\"\n          @click=\"defaultToggleOpen\"\n        >\n          <dt-icon\n            :name=\" isOpen ? 'chevron-down' : 'chevron-right'\"\n            class=\"d-collapsible__icon\"\n            size=\"300\"\n          />\n          <span\n            class=\"d-collapsible__anchor-text\"\n            :title=\"anchorText\"\n          >\n            {{ anchorText }}\n          </span>\n        </dt-button>\n      </slot>\n    </div>\n    <dt-collapsible-lazy-show\n      :id=\"id\"\n      ref=\"contentWrapper\"\n      :aria-hidden=\"`${!isOpen}`\"\n      :aria-labelledby=\"labelledBy\"\n      :aria-label=\"ariaLabel\"\n      :show=\"isOpen\"\n      :element-type=\"contentElementType\"\n      :class=\"contentClass\"\n      :style=\"{\n        'max-height': maxHeight,\n        'max-width': maxWidth,\n      }\"\n      data-qa=\"dt-collapsible--content\"\n      tabindex=\"-1\"\n      appear\n      v-on=\"collapsibleListeners\"\n      @after-leave=\"onLeaveTransitionComplete\"\n      @after-enter=\"onEnterTransitionComplete\"\n    >\n      <!-- @slot Slot for the collapsible element that is expanded by the anchor -->\n      <slot\n        name=\"content\"\n      />\n    </dt-collapsible-lazy-show>\n  </component>\n</template>\n\n<script>\nimport { extractVueListeners, getUniqueString, hasSlotContent } from '@/common/utils';\nimport DtCollapsibleLazyShow from './collapsible_lazy_show.vue';\nimport { DtButton } from '@/components/button';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { DtIcon } from '@/components/icon';\n\n/**\n * A collapsible is a component consisting of an interactive anchor that toggled the expandable/collapsible element.\n * @see https://dialtone.dialpad.com/components/collapsible.html\n */\nexport default {\n  name: 'DtCollapsible',\n\n  components: {\n    DtButton,\n    DtCollapsibleLazyShow,\n    DtLazyShow,\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * Text that is displayed on the anchor if nothing is passed in the slot.\n     * Ignored if the anchor slot is used.\n     */\n    anchorText: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Controls whether the collapsible is shown. Leaving this null will have the collapsible start\n     * expanded and trigger on click by default. If you set this value, the default trigger\n     * behavior will be disabled, and you can control it as you need.\n     * Supports .sync modifier\n     * @values null, true, false\n     */\n    open: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * The id of the content wrapper.\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * HTML element type (tag name) of the root element of the component.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    contentElementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * Additional class name for the anchor wrapper element.\n     */\n    anchorClass: {\n      type: [String, Array, Object],\n      default: null,\n    },\n\n    /**\n     * Additional class name for the content wrapper element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: null,\n    },\n\n    /**\n     * The maximum width of the anchor and collapsible element.\n     * Possible units rem|px|%|em\n     */\n    maxWidth: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The maximum height of the collapsible element.\n     * Possible units rem|px|%|em\n     */\n    maxHeight: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Label on the collapsible content. Should provide this or ariaLabelledBy but not both.\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Id of the element that labels the collapsible content. Defaults to the anchor element.\n     * Should provide this or ariaLabel but not both.\n     */\n    ariaLabelledBy: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired to sync the open prop with the parent component\n     * @event update:open\n     */\n    'update:open',\n\n    /**\n     * Event fired when the content is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean}\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      isOpen: true,\n    };\n  },\n\n  computed: {\n    labelledBy () {\n      // aria-labelledby should be set only if aria-labelledby is passed as a prop, or if\n      // there is no aria-label and the labelledby should point to the anchor\n      return this.ariaLabelledBy || (!this.ariaLabel && getUniqueString('DtCollapsible__anchor'));\n    },\n\n    collapsibleListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n  },\n\n  watch: {\n    open: {\n      handler: function (open) {\n        if (open !== null) {\n          this.isOpen = open;\n        }\n      },\n\n      immediate: true,\n    },\n  },\n\n  created () {\n    this.validateProperAnchor();\n  },\n\n  methods: {\n    onLeaveTransitionComplete () {\n      this.$emit('opened', false);\n      if (this.open !== null) {\n        this.$emit('update:open', false);\n      }\n    },\n\n    onEnterTransitionComplete () {\n      this.$emit('opened', true, this.$refs.content);\n      if (this.open !== null) {\n        this.$emit('update:open', true);\n      }\n    },\n\n    defaultToggleOpen () {\n      if (this.open === null) {\n        this.toggleOpen();\n      }\n    },\n\n    toggleOpen () {\n      this.isOpen = !this.isOpen;\n    },\n\n    validateProperAnchor () {\n      if (!this.anchorText && !hasSlotContent(this.$slots.anchor)) {\n        console.error('anchor text and anchor slot content cannot both be falsy');\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","name","inheritAttrs","props","show","type","Boolean","default","appear","elementType","String","data","initialized","computed","isCSSEnabled","process","env","NODE_ENV","watch","newValue","methods","beforeEnter","element","requestAnimationFrame","style","height","enter","scrollHeight","afterEnter","beforeLeave","offsetHeight","leave","afterLeave","_openBlock","_createBlock","_Transition","_mergeProps","$props","_ctx","$attrs","css","$options","onBeforeEnter","onEnter","onAfterEnter","onBeforeLeave","onLeave","onAfterLeave","_resolveDynamicComponent","_normalizeProps","_guardReactiveProps","$data","_renderSlot","$slots","key","components","DtButton","DtCollapsibleLazyShow","DtLazyShow","DtIcon","anchorText","open","id","getUniqueString","contentElementType","anchorClass","Array","Object","contentClass","maxWidth","maxHeight","ariaLabel","ariaLabelledBy","emits","isOpen","labelledBy","collapsibleListeners","extractVueListeners","handler","immediate","created","validateProperAnchor","onLeaveTransitionComplete","$emit","onEnterTransitionComplete","$refs","content","defaultToggleOpen","toggleOpen","hasSlotContent","anchor","console","error","ref","_toHandlers","_createElementVNode","class","attrs","toString","_createVNode","_component_dt_button","importance","kind","_normalizeStyle","onClick","_component_dt_icon","size","title","_hoisted_2","_component_dt_collapsible_lazy_show","tabindex"],"mappings":"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"}
+{"version":3,"file":"collapsible.js","sources":["../../components/collapsible/collapsible_lazy_show.vue","../../components/collapsible/collapsible.vue"],"sourcesContent":["<template>\n  <!-- applies the transition on initial render -->\n  <transition\n    :appear=\"appear\"\n    enter-active-class=\"enter-active\"\n    leave-active-class=\"leave-active\"\n    v-bind=\"$attrs\"\n    :css=\"isCSSEnabled\"\n    @before-enter=\"beforeEnter\"\n    @enter=\"enter\"\n    @after-enter=\"afterEnter\"\n    @before-leave=\"beforeLeave\"\n    @leave=\"leave\"\n    @after-leave=\"afterLeave\"\n  >\n    <component\n      :is=\"elementType\"\n      v-show=\"show\"\n      v-bind=\"$attrs\"\n    >\n      <!-- @slot slot for Content within collapsible -->\n      <slot v-if=\"initialized\" />\n    </component>\n  </transition>\n</template>\n\n<script>\nexport default {\n  name: 'DtCollapsibleLazyShow',\n\n  inheritAttrs: false,\n\n  /******************\n   *     PROPS      *\n   ******************/\n  props: {\n    /**\n     * Whether the child slot is shown.\n     */\n    show: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Enable/Disable transition animation\n     */\n    appear: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n  },\n\n  /******************\n   *      DATA      *\n   ******************/\n  data () {\n    return {\n      initialized: !!this.show,\n    };\n  },\n\n  /******************\n   *    COMPUTED    *\n   ******************/\n  computed: {\n    /**\n     * Set the css property to false when running tests only.\n     * Refer to: https://vuejs.org/guide/built-ins/transition.html#javascript-hooks for details about\n     * transition `css` property\n     * @returns {boolean}\n     */\n    isCSSEnabled () {\n      return process.env.NODE_ENV !== 'test';\n    },\n  },\n\n  /******************\n   *      WATCH     *\n   ******************/\n  watch: {\n    show: function (newValue) {\n      if (!newValue || this.initialized) return;\n\n      this.initialized = true;\n    },\n  },\n\n  methods: {\n    /**\n     * @param {HTMLElement} element\n     */\n    beforeEnter (element) {\n      requestAnimationFrame(() => {\n        if (!element.style.height) {\n          element.style.height = '0px';\n        }\n      });\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    enter (element) {\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          element.style.height = `${element.scrollHeight}px`;\n        });\n      });\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    afterEnter (element) {\n      element.style.height = null;\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    beforeLeave (element) {\n      requestAnimationFrame(() => {\n        if (!element.style.height) {\n          element.style.height = `${element.offsetHeight}px`;\n        }\n      });\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    leave (element) {\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          element.style.height = '0px';\n        });\n      });\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    afterLeave (element) {\n      element.style.height = null;\n    },\n  },\n};\n</script>\n\n<style>\n  .enter-active,\n  .leave-active {\n    overflow: hidden;\n    transition: height var(--td300) var(--ttf-out-quint);\n  }\n</style>\n","<template>\n  <component\n    :is=\"elementType\"\n    ref=\"collapsible\"\n    v-on=\"collapsibleListeners\"\n  >\n    <!-- Element for capturing keypress events -->\n    <div\n      :id=\"!ariaLabelledBy && labelledBy\"\n      ref=\"anchor\"\n      :class=\"anchorClass\"\n    >\n      <!-- @slot Slot for the anchor element that toggles the collapsible content -->\n      <slot\n        name=\"anchor\"\n        :attrs=\"{\n          'aria-controls': id,\n          'aria-expanded': isOpen.toString(),\n          'role': 'button',\n        }\"\n      >\n        <dt-button\n          importance=\"clear\"\n          kind=\"muted\"\n          :aria-controls=\"id\"\n          :aria-expanded=\"`${isOpen}`\"\n          :style=\"{\n            'width': maxWidth,\n          }\"\n          @click=\"defaultToggleOpen\"\n        >\n          <dt-icon\n            :name=\" isOpen ? 'chevron-down' : 'chevron-right'\"\n            class=\"d-collapsible__icon\"\n            size=\"300\"\n          />\n          <span\n            class=\"d-collapsible__anchor-text\"\n            :title=\"anchorText\"\n          >\n            {{ anchorText }}\n          </span>\n        </dt-button>\n      </slot>\n    </div>\n    <dt-collapsible-lazy-show\n      :id=\"id\"\n      ref=\"contentWrapper\"\n      :aria-hidden=\"`${!isOpen}`\"\n      :aria-labelledby=\"labelledBy\"\n      :aria-label=\"ariaLabel\"\n      :show=\"isOpen\"\n      :element-type=\"contentElementType\"\n      :class=\"contentClass\"\n      :style=\"{\n        'max-height': maxHeight,\n        'max-width': maxWidth,\n      }\"\n      data-qa=\"dt-collapsible--content\"\n      tabindex=\"-1\"\n      appear\n      v-on=\"collapsibleListeners\"\n      @after-leave=\"onLeaveTransitionComplete\"\n      @after-enter=\"onEnterTransitionComplete\"\n    >\n      <!-- @slot Slot for the collapsible element that is expanded by the anchor -->\n      <slot\n        name=\"content\"\n      />\n    </dt-collapsible-lazy-show>\n  </component>\n</template>\n\n<script>\nimport { extractVueListeners, getUniqueString, hasSlotContent } from '@/common/utils';\nimport DtCollapsibleLazyShow from './collapsible_lazy_show.vue';\nimport { DtButton } from '@/components/button';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { DtIcon } from '@/components/icon';\n\n/**\n * A collapsible is a component consisting of an interactive anchor that toggled the expandable/collapsible element.\n * @see https://dialtone.dialpad.com/components/collapsible.html\n */\nexport default {\n  name: 'DtCollapsible',\n\n  components: {\n    DtButton,\n    DtCollapsibleLazyShow,\n    DtLazyShow,\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * Text that is displayed on the anchor if nothing is passed in the slot.\n     * Ignored if the anchor slot is used.\n     */\n    anchorText: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Controls whether the collapsible is shown. Leaving this null will have the collapsible start\n     * expanded and trigger on click by default. If you set this value, the default trigger\n     * behavior will be disabled, and you can control it as you need.\n     * Supports .sync modifier\n     * @values null, true, false\n     */\n    open: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * The id of the content wrapper.\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * HTML element type (tag name) of the root element of the component.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    contentElementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * Additional class name for the anchor wrapper element.\n     */\n    anchorClass: {\n      type: [String, Array, Object],\n      default: null,\n    },\n\n    /**\n     * Additional class name for the content wrapper element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: null,\n    },\n\n    /**\n     * The maximum width of the anchor and collapsible element.\n     * Possible units rem|px|%|em\n     */\n    maxWidth: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The maximum height of the collapsible element.\n     * Possible units rem|px|%|em\n     */\n    maxHeight: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Label on the collapsible content. Should provide this or ariaLabelledBy but not both.\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Id of the element that labels the collapsible content. Defaults to the anchor element.\n     * Should provide this or ariaLabel but not both.\n     */\n    ariaLabelledBy: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired to sync the open prop with the parent component\n     * @event update:open\n     */\n    'update:open',\n\n    /**\n     * Event fired when the content is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean}\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      isOpen: true,\n    };\n  },\n\n  computed: {\n    labelledBy () {\n      // aria-labelledby should be set only if aria-labelledby is passed as a prop, or if\n      // there is no aria-label and the labelledby should point to the anchor\n      return this.ariaLabelledBy || (!this.ariaLabel && getUniqueString('DtCollapsible__anchor'));\n    },\n\n    collapsibleListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n  },\n\n  watch: {\n    open: {\n      handler: function (open) {\n        if (open !== null) {\n          this.isOpen = open;\n        }\n      },\n\n      immediate: true,\n    },\n  },\n\n  created () {\n    this.validateProperAnchor();\n  },\n\n  methods: {\n    onLeaveTransitionComplete () {\n      this.$emit('opened', false);\n      if (this.open !== null) {\n        this.$emit('update:open', false);\n      }\n    },\n\n    onEnterTransitionComplete () {\n      this.$emit('opened', true, this.$refs.content);\n      if (this.open !== null) {\n        this.$emit('update:open', true);\n      }\n    },\n\n    defaultToggleOpen () {\n      if (this.open === null) {\n        this.toggleOpen();\n      }\n    },\n\n    toggleOpen () {\n      this.isOpen = !this.isOpen;\n    },\n\n    validateProperAnchor () {\n      if (!this.anchorText && !hasSlotContent(this.$slots.anchor)) {\n        console.error('anchor text and anchor slot content cannot both be falsy');\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","_openBlock","_createBlock","_Transition","_mergeProps","_resolveDynamicComponent","_normalizeProps","_guardReactiveProps","_renderSlot","_toHandlers","_createElementVNode","_createVNode","_normalizeStyle"],"mappings":"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"}