@dialpad/dialtone-vue 2.127.0 → 2.127.1

package/dist/lib/collapsible.cjs

@@ -1,2 +1,335 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./utils.cjs"),i=require("../chunks/_plugin-vue2_normalizer-ZK80B3OL.js"),l=require("./button.cjs"),r=require("./lazy-show.cjs"),o=require("./icon.cjs");require("./constants.cjs");require("vue");require("../chunks/link_constants-Kn6kP4i1.js");require("@dialpad/dialtone-icons/vue2");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");const s={name:"DtCollapsibleLazyShow",props:{show:{type:Boolean,default:null},appear:{type:Boolean,default:!1},elementType:{type:String,default:"div"}},data(){return{initialized:!!this.show}},computed:{isCSSEnabled(){return process.env.NODE_ENV!=="test"}},watch:{show:function(t){!t||this.initialized||(this.initialized=!0)}},methods:{beforeEnter(t){requestAnimationFrame(()=>{t.style.height||(t.style.height="0px")})},enter(t){requestAnimationFrame(()=>{requestAnimationFrame(()=>{t.style.height=`${t.scrollHeight}px`})})},afterEnter(t){t.style.height=null},beforeLeave(t){requestAnimationFrame(()=>{t.style.height||(t.style.height=`${t.offsetHeight}px`)})},leave(t){requestAnimationFrame(()=>{requestAnimationFrame(()=>{t.style.height="0px"})})},afterLeave(t){t.style.height=null}}};var p=function(){var e=this,n=e._self._c;return n("transition",e._g({attrs:{appear:e.appear,"enter-active-class":"enter-active","leave-active-class":"leave-active",css:e.isCSSEnabled},on:{"before-enter":e.beforeEnter,enter:e.enter,"after-enter":e.afterEnter,"before-leave":e.beforeLeave,leave:e.leave,"after-leave":e.afterLeave}},e.$listeners),[n(e.elementType,e._g({directives:[{name:"show",rawName:"v-show",value:e.show,expression:"show"}],tag:"component"},e.$listeners),[e.initialized?e._t("default"):e._e()],2)],1)},c=[],u=i.n(s,p,c,!1,null,null,null,null);const d=u.exports,h={name:"DtCollapsible",components:{DtButton:l.DtButton,DtCollapsibleLazyShow:d,DtLazyShow:r.DtLazyShow,DtIcon:o.DtIcon},props:{anchorText:{type:String,default:null},open:{type:Boolean,default:null},id:{type:String,default(){return a.getUniqueString()}},elementType:{type:String,default:"div"},contentElementType:{type:String,default:"div"},anchorClass:{type:[String,Array,Object],default:null},contentClass:{type:[String,Array,Object],default:null},maxWidth:{type:String,default:null},maxHeight:{type:String,default:null},ariaLabel:{type:String,default:null},ariaLabelledBy:{type:String,default:null}},emits:["update:open","opened"],data(){return{isOpen:!0}},computed:{labelledBy(){return this.ariaLabelledBy||!this.ariaLabel&&a.getUniqueString("DtCollapsible__anchor")}},watch:{open:{handler:function(t){t!==null&&(this.isOpen=t)},immediate:!0}},mounted(){this.validateProperAnchor()},methods:{onLeaveTransitionComplete(){this.$emit("opened",!1),this.open!==null&&this.$emit("update:open",!1)},onEnterTransitionComplete(){this.$emit("opened",!0,this.$refs.content),this.open!==null&&this.$emit("update:open",!0)},defaultToggleOpen(){this.open===null&&this.toggleOpen()},toggleOpen(){this.isOpen=!this.isOpen},validateProperAnchor(){!this.anchorText&&!this.$scopedSlots.anchor&&console.error("anchor text and anchor slot content cannot both be falsy")}}};var f=function(){var e=this,n=e._self._c;return n(e.elementType,e._g({ref:"collapsible",tag:"component"},e.$listeners),[n("div",{ref:"anchor",class:e.anchorClass,attrs:{id:!e.ariaLabelledBy&&e.labelledBy}},[e._t("anchor",function(){return[n("dt-button",{style:{width:e.maxWidth},attrs:{importance:"clear",kind:"muted","aria-controls":e.id,"aria-expanded":`${e.isOpen}`},on:{click:e.defaultToggleOpen}},[n("dt-icon",{staticClass:"d-collapsible__icon",attrs:{name:e.isOpen?"chevron-down":"chevron-right",size:"300"}}),n("span",{staticClass:"d-collapsible__anchor-text",attrs:{title:e.anchorText}},[e._v(" "+e._s(e.anchorText)+" ")])],1)]},{attrs:{"aria-controls":e.id,"aria-expanded":e.isOpen.toString(),role:"button"}})],2),n("dt-collapsible-lazy-show",e._g({ref:"contentWrapper",class:e.contentClass,style:{"max-height":e.maxHeight,"max-width":e.maxWidth},attrs:{id:e.id,"aria-hidden":`${!e.isOpen}`,"aria-labelledby":e.labelledBy,"aria-label":e.ariaLabel,show:e.isOpen,"element-type":e.contentElementType,"data-qa":"dt-collapsible--content",tabindex:"-1",appear:""},on:{"after-leave":e.onLeaveTransitionComplete,"after-enter":e.onEnterTransitionComplete}},e.$listeners),[e._t("content")],2)],1)},m=[],_=i.n(h,f,m,!1,null,null,null,null);const y=_.exports;exports.DtCollapsible=y;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const common_utils = require("../common/utils.cjs");
+const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
+const lib_button = require("./button.cjs");
+const lib_lazyShow = require("./lazy-show.cjs");
+const lib_icon = require("./icon.cjs");
+require("../common/constants.cjs");
+require("vue");
+require("../chunks/link_constants-Huj7D_hm.js");
+require("@dialpad/dialtone-icons/vue2");
+require("../chunks/icon_constants-QYpmdE0R.js");
+require("@dialpad/dialtone-icons/icons.json");
+const _sfc_main$1 = {
+  name: "DtCollapsibleLazyShow",
+  /******************
+   *     PROPS      *
+   ******************/
+  props: {
+    /**
+     * Whether the child slot is shown.
+     */
+    show: {
+      type: Boolean,
+      default: null
+    },
+    /**
+     * Enable/Disable transition animation
+     */
+    appear: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * HTML element type (tag name) of the content wrapper element.
+     */
+    elementType: {
+      type: String,
+      default: "div"
+    }
+  },
+  /******************
+   *      DATA      *
+   ******************/
+  data() {
+    return {
+      initialized: !!this.show
+    };
+  },
+  /******************
+   *    COMPUTED    *
+   ******************/
+  computed: {
+    /**
+     * Set the css property to false when running tests only.
+     * Refer to: https://vuejs.org/guide/built-ins/transition.html#javascript-hooks for details about
+     * transition `css` property
+     * @returns {boolean}
+     */
+    isCSSEnabled() {
+      return process.env.NODE_ENV !== "test";
+    }
+  },
+  /******************
+   *      WATCH     *
+   ******************/
+  watch: {
+    show: function(newValue) {
+      if (!newValue || this.initialized)
+        return;
+      this.initialized = true;
+    }
+  },
+  methods: {
+    /**
+     * @param {HTMLElement} element
+     */
+    beforeEnter(element) {
+      requestAnimationFrame(() => {
+        if (!element.style.height) {
+          element.style.height = "0px";
+        }
+      });
+    },
+    /**
+     * @param {HTMLElement} element
+     */
+    enter(element) {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          element.style.height = `${element.scrollHeight}px`;
+        });
+      });
+    },
+    /**
+     * @param {HTMLElement} element
+     */
+    afterEnter(element) {
+      element.style.height = null;
+    },
+    /**
+     * @param {HTMLElement} element
+     */
+    beforeLeave(element) {
+      requestAnimationFrame(() => {
+        if (!element.style.height) {
+          element.style.height = `${element.offsetHeight}px`;
+        }
+      });
+    },
+    /**
+     * @param {HTMLElement} element
+     */
+    leave(element) {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          element.style.height = "0px";
+        });
+      });
+    },
+    /**
+     * @param {HTMLElement} element
+     */
+    afterLeave(element) {
+      element.style.height = null;
+    }
+  }
+};
+var _sfc_render$1 = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("transition", _vm._g({ attrs: { "appear": _vm.appear, "enter-active-class": "enter-active", "leave-active-class": "leave-active", "css": _vm.isCSSEnabled }, on: { "before-enter": _vm.beforeEnter, "enter": _vm.enter, "after-enter": _vm.afterEnter, "before-leave": _vm.beforeLeave, "leave": _vm.leave, "after-leave": _vm.afterLeave } }, _vm.$listeners), [_c(_vm.elementType, _vm._g({ directives: [{ name: "show", rawName: "v-show", value: _vm.show, expression: "show" }], tag: "component" }, _vm.$listeners), [_vm.initialized ? _vm._t("default") : _vm._e()], 2)], 1);
+};
+var _sfc_staticRenderFns$1 = [];
+var __component__$1 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main$1,
+  _sfc_render$1,
+  _sfc_staticRenderFns$1,
+  false,
+  null,
+  null,
+  null,
+  null
+);
+const DtCollapsibleLazyShow = __component__$1.exports;
+const _sfc_main = {
+  name: "DtCollapsible",
+  components: {
+    DtButton: lib_button.DtButton,
+    DtCollapsibleLazyShow,
+    DtLazyShow: lib_lazyShow.DtLazyShow,
+    DtIcon: lib_icon.DtIcon
+  },
+  props: {
+    /**
+     * Text that is displayed on the anchor if nothing is passed in the slot.
+     * Ignored if the anchor slot is used.
+     */
+    anchorText: {
+      type: String,
+      default: null
+    },
+    /**
+     * Controls whether the collapsible is shown. Leaving this null will have the collapsible start
+     * expanded and trigger on click by default. If you set this value, the default trigger
+     * behavior will be disabled, and you can control it as you need.
+     * Supports .sync modifier
+     * @values null, true, false
+     */
+    open: {
+      type: Boolean,
+      default: null
+    },
+    /**
+     * The id of the content wrapper.
+     */
+    id: {
+      type: String,
+      default() {
+        return common_utils.getUniqueString();
+      }
+    },
+    /**
+     * HTML element type (tag name) of the root element of the component.
+     */
+    elementType: {
+      type: String,
+      default: "div"
+    },
+    /**
+     * HTML element type (tag name) of the content wrapper element.
+     */
+    contentElementType: {
+      type: String,
+      default: "div"
+    },
+    /**
+     * Additional class name for the anchor wrapper element.
+     */
+    anchorClass: {
+      type: [String, Array, Object],
+      default: null
+    },
+    /**
+     * Additional class name for the content wrapper element.
+     */
+    contentClass: {
+      type: [String, Array, Object],
+      default: null
+    },
+    /**
+     * The maximum width of the anchor and collapsible element.
+     * Possible units rem|px|%|em
+     */
+    maxWidth: {
+      type: String,
+      default: null
+    },
+    /**
+     * The maximum height of the collapsible element.
+     * Possible units rem|px|%|em
+     */
+    maxHeight: {
+      type: String,
+      default: null
+    },
+    /**
+     * Label on the collapsible content. Should provide this or ariaLabelledBy but not both.
+     */
+    ariaLabel: {
+      type: String,
+      default: null
+    },
+    /**
+     * Id of the element that labels the collapsible content. Defaults to the anchor element.
+     * Should provide this or ariaLabel but not both.
+     */
+    ariaLabelledBy: {
+      type: String,
+      default: null
+    }
+  },
+  emits: [
+    /**
+     * Event fired to sync the open prop with the parent component
+     * @event update:open
+     */
+    "update:open",
+    /**
+     * Event fired when the content is shown or hidden
+     *
+     * @event opened
+     * @type {Boolean}
+     */
+    "opened"
+  ],
+  data() {
+    return {
+      isOpen: true
+    };
+  },
+  computed: {
+    labelledBy() {
+      return this.ariaLabelledBy || !this.ariaLabel && common_utils.getUniqueString("DtCollapsible__anchor");
+    }
+  },
+  watch: {
+    open: {
+      handler: function(open) {
+        if (open !== null) {
+          this.isOpen = open;
+        }
+      },
+      immediate: true
+    }
+  },
+  mounted() {
+    this.validateProperAnchor();
+  },
+  methods: {
+    onLeaveTransitionComplete() {
+      this.$emit("opened", false);
+      if (this.open !== null) {
+        this.$emit("update:open", false);
+      }
+    },
+    onEnterTransitionComplete() {
+      this.$emit("opened", true, this.$refs.content);
+      if (this.open !== null) {
+        this.$emit("update:open", true);
+      }
+    },
+    defaultToggleOpen() {
+      if (this.open === null) {
+        this.toggleOpen();
+      }
+    },
+    toggleOpen() {
+      this.isOpen = !this.isOpen;
+    },
+    validateProperAnchor() {
+      if (!this.anchorText && !this.$scopedSlots.anchor) {
+        console.error("anchor text and anchor slot content cannot both be falsy");
+      }
+    }
+  }
+};
+var _sfc_render = function render2() {
+  var _vm = this, _c = _vm._self._c;
+  return _c(_vm.elementType, _vm._g({ ref: "collapsible", tag: "component" }, _vm.$listeners), [_c("div", { ref: "anchor", class: _vm.anchorClass, attrs: { "id": !_vm.ariaLabelledBy && _vm.labelledBy } }, [_vm._t("anchor", function() {
+    return [_c("dt-button", { style: {
+      "width": _vm.maxWidth
+    }, attrs: { "importance": "clear", "kind": "muted", "aria-controls": _vm.id, "aria-expanded": `${_vm.isOpen}` }, on: { "click": _vm.defaultToggleOpen } }, [_c("dt-icon", { staticClass: "d-collapsible__icon", attrs: { "name": _vm.isOpen ? "chevron-down" : "chevron-right", "size": "300" } }), _c("span", { staticClass: "d-collapsible__anchor-text", attrs: { "title": _vm.anchorText } }, [_vm._v(" " + _vm._s(_vm.anchorText) + " ")])], 1)];
+  }, { "attrs": {
+    "aria-controls": _vm.id,
+    "aria-expanded": _vm.isOpen.toString(),
+    "role": "button"
+  } })], 2), _c("dt-collapsible-lazy-show", _vm._g({ ref: "contentWrapper", class: _vm.contentClass, style: {
+    "max-height": _vm.maxHeight,
+    "max-width": _vm.maxWidth
+  }, attrs: { "id": _vm.id, "aria-hidden": `${!_vm.isOpen}`, "aria-labelledby": _vm.labelledBy, "aria-label": _vm.ariaLabel, "show": _vm.isOpen, "element-type": _vm.contentElementType, "data-qa": "dt-collapsible--content", "tabindex": "-1", "appear": "" }, on: { "after-leave": _vm.onLeaveTransitionComplete, "after-enter": _vm.onEnterTransitionComplete } }, _vm.$listeners), [_vm._t("content")], 2)], 1);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null,
+  null,
+  null
+);
+const DtCollapsible = __component__.exports;
+exports.DtCollapsible = DtCollapsible;
 //# sourceMappingURL=collapsible.cjs.map

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    :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    v-on=\"$listeners\"\n  >\n    <component\n      :is=\"elementType\"\n      v-show=\"show\"\n      v-on=\"$listeners\"\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  /******************\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=\"$listeners\"\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=\"$listeners\"\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 { getUniqueString } 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\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  mounted () {\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 && !this.$scopedSlots.anchor) {\n        console.error('anchor text and anchor slot content cannot both be falsy');\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","newValue","element","DtButton","DtCollapsibleLazyShow","DtLazyShow","DtIcon","getUniqueString","open"],"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    :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    v-on=\"$listeners\"\n  >\n    <component\n      :is=\"elementType\"\n      v-show=\"show\"\n      v-on=\"$listeners\"\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  /******************\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=\"$listeners\"\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=\"$listeners\"\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 { getUniqueString } 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\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  mounted () {\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 && !this.$scopedSlots.anchor) {\n        console.error('anchor text and anchor slot content cannot both be falsy');\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtLazyShow","DtIcon","getUniqueString"],"mappings":"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"}