@dialpad/dialtone-vue 3.150.0 → 3.150.1

package/dist/components/chip/chip.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.vue.js","sources":["../../../components/chip/chip.vue"],"sourcesContent":["<template>\n  <span class=\"d-chip\">\n    <component\n      :is=\"interactive ? 'button' : 'span'\"\n      :id=\"id\"\n      :type=\"interactive && 'button'\"\n      :class=\"chipClasses()\"\n      data-qa=\"dt-chip\"\n      :aria-labelledby=\"ariaLabel ? undefined : `${id}-content`\"\n      :aria-label=\"ariaLabel\"\n      v-on=\"chipListeners\"\n    >\n      <span\n        v-if=\"hasSlotContent($slots.icon)\"\n        data-qa=\"dt-chip-icon\"\n        class=\"d-chip__icon\"\n      >\n        <!-- @slot slot for Chip icon -->\n        <slot name=\"icon\" />\n      </span>\n      <span\n        v-else-if=\"hasSlotContent($slots.avatar)\"\n        data-qa=\"dt-chip-avatar\"\n      >\n        <!-- @slot slot for Chip avatar -->\n        <slot name=\"avatar\" />\n      </span>\n      <span\n        v-if=\"hasSlotContent($slots.default)\"\n        :id=\"`${id}-content`\"\n        data-qa=\"dt-chip-label\"\n        :class=\"['d-chip__text', contentClass]\"\n      >\n        <!-- @slot slot for Content within chip -->\n        <slot />\n      </span>\n    </component>\n    <dt-button\n      v-if=\"!hideClose\"\n      v-bind=\"closeButtonProps\"\n      :class=\"chipCloseButtonClasses()\"\n      data-qa=\"dt-chip-close\"\n      :aria-label=\"closeButtonProps.ariaLabel\"\n      @click=\"$emit('close')\"\n    >\n      <template #icon>\n        <dt-icon\n          name=\"close\"\n          :size=\"closeButtonIconSize\"\n        />\n      </template>\n    </dt-button>\n  </span>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\nimport {\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n} from './chip_constants';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\n\n/**\n * A chip is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word. It is important a button is identifiable, consistent, and\n * communicates its actions clearly, and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/chip.html\n */\nexport default {\n  name: 'DtChip',\n\n  components: {\n    DtButton,\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * A set of props to be passed into the modal's close button. Requires an 'ariaLabel' property.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: function () { return { ariaLabel: 'close' }; },\n      validator: (props) => {\n        return !!props.ariaLabel;\n      },\n    },\n\n    /**\n     * Hides the close button on the chip\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The size of the chip.\n     * @values xs, sm, md\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(CHIP_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * The interactivity of the chip.\n     * Makes chip clickable, apply hover/focus/active style, emit keyboard events etc.\n     * @values true, false\n     */\n    interactive: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    id: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Descriptive label for the chip content.\n     * If this prop is unset the content in the default slot will be used as an aria-label.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the chip element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the span element.\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native chip click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n\n    /**\n     * Native chip key up event\n     *\n     * @event keyup\n     * @type {KeyboardEvent}\n     */\n    'keyup',\n  ],\n\n  data () {\n    return {\n      isActive: false,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    chipListeners () {\n      return {\n        click: event => {\n          if (this.interactive) this.$emit('click', event);\n        },\n\n        keyup: event => {\n          if (event.code?.toLowerCase() === 'delete') {\n            this.onClose();\n          } else {\n            this.$emit('keyup', event);\n          }\n        },\n      };\n    },\n\n    closeButtonIconSize () {\n      return CHIP_ICON_SIZES[this.size];\n    },\n  },\n\n  methods: {\n    chipClasses () {\n      return [\n        this.$attrs['grouped-chip'] ? 'd-chip' : 'd-chip__label',\n        CHIP_SIZE_MODIFIERS[this.size],\n        this.labelClass,\n      ];\n    },\n\n    chipCloseButtonClasses () {\n      return [\n        'd-chip__close',\n        CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[this.size],\n      ];\n    },\n\n    onClose () {\n      if (!this.hideClose) {\n        this.$emit('close');\n      }\n    },\n  },\n};\n</script>\n"],"names":["_openBlock","_createElementBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_renderSlot","_createVNode"],"mappings":"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"}

package/dist/components/chip/chip_constants.cjs

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const CHIP_SIZE_MODIFIERS = {
+  xs: "d-chip__label--xs",
+  sm: "d-chip__label--sm",
+  md: ""
+};
+const CHIP_CLOSE_BUTTON_SIZE_MODIFIERS = {
+  xs: "d-chip__close--xs",
+  sm: "d-chip__close--sm",
+  md: ""
+};
+const CHIP_ICON_SIZES = {
+  xs: "200",
+  sm: "200",
+  md: "200"
+};
+exports.CHIP_CLOSE_BUTTON_SIZE_MODIFIERS = CHIP_CLOSE_BUTTON_SIZE_MODIFIERS;
+exports.CHIP_ICON_SIZES = CHIP_ICON_SIZES;
+exports.CHIP_SIZE_MODIFIERS = CHIP_SIZE_MODIFIERS;
+//# sourceMappingURL=chip_constants.cjs.map

package/dist/components/chip/chip_constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip_constants.cjs","sources":["../../../components/chip/chip_constants.js"],"sourcesContent":["export const CHIP_SIZE_MODIFIERS = {\n  xs: 'd-chip__label--xs',\n  sm: 'd-chip__label--sm',\n  md: '',\n};\n\nexport const CHIP_CLOSE_BUTTON_SIZE_MODIFIERS = {\n  xs: 'd-chip__close--xs',\n  sm: 'd-chip__close--sm',\n  md: '',\n};\n\nexport const CHIP_ICON_SIZES = {\n  xs: '200',\n  sm: '200',\n  md: '200',\n};\n\nexport default {\n  CHIP_SIZE_MODIFIERS,\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n};\n"],"names":[],"mappings":";;AAAY,MAAC,sBAAsB;AAAA,EACjC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEY,MAAC,mCAAmC;AAAA,EAC9C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEY,MAAC,kBAAkB;AAAA,EAC7B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;;;;"}

package/dist/components/chip/chip_constants.js

@@ -0,0 +1,21 @@
+const CHIP_SIZE_MODIFIERS = {
+  xs: "d-chip__label--xs",
+  sm: "d-chip__label--sm",
+  md: ""
+};
+const CHIP_CLOSE_BUTTON_SIZE_MODIFIERS = {
+  xs: "d-chip__close--xs",
+  sm: "d-chip__close--sm",
+  md: ""
+};
+const CHIP_ICON_SIZES = {
+  xs: "200",
+  sm: "200",
+  md: "200"
+};
+export {
+  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,
+  CHIP_ICON_SIZES,
+  CHIP_SIZE_MODIFIERS
+};
+//# sourceMappingURL=chip_constants.js.map

package/dist/components/chip/chip_constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip_constants.js","sources":["../../../components/chip/chip_constants.js"],"sourcesContent":["export const CHIP_SIZE_MODIFIERS = {\n  xs: 'd-chip__label--xs',\n  sm: 'd-chip__label--sm',\n  md: '',\n};\n\nexport const CHIP_CLOSE_BUTTON_SIZE_MODIFIERS = {\n  xs: 'd-chip__close--xs',\n  sm: 'd-chip__close--sm',\n  md: '',\n};\n\nexport const CHIP_ICON_SIZES = {\n  xs: '200',\n  sm: '200',\n  md: '200',\n};\n\nexport default {\n  CHIP_SIZE_MODIFIERS,\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n};\n"],"names":[],"mappings":"AAAY,MAAC,sBAAsB;AAAA,EACjC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEY,MAAC,mCAAmC;AAAA,EAC9C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEY,MAAC,kBAAkB;AAAA,EAC7B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;"}

package/dist/components/codeblock/codeblock.vue.cjs

@@ -0,0 +1,23 @@
+"use strict";
+const vue = require("vue");
+const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
+const _sfc_main = {
+  name: "DtCodeblock",
+  props: {
+    text: {
+      type: String,
+      required: true
+    }
+  }
+};
+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  ")
+  ]);
+}
+const codeblock = /* @__PURE__ */ _pluginVue_exportHelper(_sfc_main, [["render", _sfc_render]]);
+module.exports = codeblock;
+//# sourceMappingURL=codeblock.vue.cjs.map

package/dist/components/codeblock/codeblock.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"codeblock.vue.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/components/codeblock/codeblock.vue.js

@@ -0,0 +1,24 @@
+import { openBlock, createElementBlock, createTextVNode, createElementVNode, toDisplayString } from "vue";
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  name: "DtCodeblock",
+  props: {
+    text: {
+      type: String,
+      required: true
+    }
+  }
+};
+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  ")
+  ]);
+}
+const codeblock = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  codeblock as default
+};
+//# sourceMappingURL=codeblock.vue.js.map

package/dist/components/codeblock/codeblock.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"codeblock.vue.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/components/collapsible/collapsible.vue.cjs

@@ -0,0 +1,250 @@
+"use strict";
+const common_utils = require("../../common/utils.cjs");
+const collapsible_lazy_show = require("./collapsible_lazy_show.vue.cjs");
+const vue = require("vue");
+const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
+const button = require("../button/button.vue.cjs");
+const lazy_show = require("../lazy_show/lazy_show.vue.cjs");
+const icon = require("../icon/icon.vue.cjs");
+const _sfc_main = {
+  name: "DtCollapsible",
+  components: {
+    DtButton: button,
+    DtCollapsibleLazyShow: collapsible_lazy_show,
+    DtLazyShow: lazy_show,
+    DtIcon: icon
+  },
+  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");
+    },
+    collapsibleListeners() {
+      return common_utils.extractVueListeners(this.$attrs);
+    }
+  },
+  watch: {
+    open: {
+      handler: function(open) {
+        if (open !== null) {
+          this.isOpen = open;
+        }
+      },
+      immediate: true
+    }
+  },
+  created() {
+    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 && !common_utils.hasSlotContent(this.$slots.anchor)) {
+        console.error("anchor text and anchor slot content cannot both be falsy");
+      }
+    }
+  }
+};
+const _hoisted_1 = ["id"];
+const _hoisted_2 = ["title"];
+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"])
+    ]),
+    _: 3
+  }, 16);
+}
+const DtCollapsible = /* @__PURE__ */ _pluginVue_exportHelper(_sfc_main, [["render", _sfc_render]]);
+module.exports = DtCollapsible;
+//# sourceMappingURL=collapsible.vue.cjs.map

package/dist/components/collapsible/collapsible.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.vue.cjs","sources":["../../../components/collapsible/collapsible.vue"],"sourcesContent":["<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":["DtButton","DtCollapsibleLazyShow","DtLazyShow","DtIcon","getUniqueString","extractVueListeners","hasSlotContent","_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_createElementVNode","_renderSlot","_createVNode","_normalizeStyle"],"mappings":"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"}

package/dist/components/collapsible/collapsible.vue.js

@@ -0,0 +1,251 @@
+import { getUniqueString, extractVueListeners, hasSlotContent } from "../../common/utils.js";
+import DtCollapsibleLazyShow from "./collapsible_lazy_show.vue.js";
+import { resolveComponent, openBlock, createBlock, resolveDynamicComponent, mergeProps, toHandlers, withCtx, createElementVNode, normalizeClass, renderSlot, createVNode, normalizeStyle, toDisplayString } from "vue";
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
+import DtButton from "../button/button.vue.js";
+import DtLazyShow from "../lazy_show/lazy_show.vue.js";
+import DtIcon from "../icon/icon.vue.js";
+const _sfc_main = {
+  name: "DtCollapsible",
+  components: {
+    DtButton,
+    DtCollapsibleLazyShow,
+    DtLazyShow,
+    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 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 && getUniqueString("DtCollapsible__anchor");
+    },
+    collapsibleListeners() {
+      return extractVueListeners(this.$attrs);
+    }
+  },
+  watch: {
+    open: {
+      handler: function(open) {
+        if (open !== null) {
+          this.isOpen = open;
+        }
+      },
+      immediate: true
+    }
+  },
+  created() {
+    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 && !hasSlotContent(this.$slots.anchor)) {
+        console.error("anchor text and anchor slot content cannot both be falsy");
+      }
+    }
+  }
+};
+const _hoisted_1 = ["id"];
+const _hoisted_2 = ["title"];
+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"])
+    ]),
+    _: 3
+  }, 16);
+}
+const DtCollapsible = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  DtCollapsible as default
+};
+//# sourceMappingURL=collapsible.vue.js.map