@dialpad/dialtone-vue 2.124.0 → 2.125.1-alpha.1

package/dist/lib/checkbox.js

@@ -0,0 +1,117 @@
+import { I as a, C as i, G as n, M as r } from "../chunks/input-1tm09l_-.js";
+import { n as l } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
+import { DtValidationMessages as o } from "./validation-messages.js";
+import "vue";
+import "./constants.js";
+import "./validators.js";
+import "./utils.js";
+const c = {
+  error: "d-checkbox--error",
+  warning: "d-checkbox--warning",
+  success: "d-checkbox--success"
+}, d = {
+  name: "DtCheckbox",
+  components: { DtValidationMessages: o },
+  mixins: [a, i, n, r],
+  inheritAttrs: !1,
+  emits: [
+    /**
+     * Native input event
+     *
+     * @event input
+     * @type {Boolean}
+     */
+    "input",
+    /**
+     * Native input focusin event
+     *
+     * @event focusin
+     * @type {FocusEvent}
+     */
+    "focusin",
+    /**
+     * Native input focusout event
+     *
+     * @event focusout
+     * @type {FocusEvent}
+     */
+    "focusout"
+  ],
+  computed: {
+    inputValidationClass() {
+      return c[this.internalValidationState];
+    },
+    checkboxGroupValueChecked() {
+      var t, e;
+      return ((e = (t = this.groupContext) == null ? void 0 : t.selectedValues) == null ? void 0 : e.includes(this.value)) ?? !1;
+    },
+    hasLabel() {
+      return !!(this.$slots.default || this.label);
+    },
+    hasDescription() {
+      return !!(this.$slots.description || this.description);
+    },
+    hasLabelOrDescription() {
+      return this.hasLabel || this.hasDescription;
+    },
+    inputListeners() {
+      return {
+        /* TODO
+            Check if any usages of this component leverage $listeners and either remove if unused or scope the removal
+            and migration prior to upgrading to Vue 3.x
+        */
+        ...this.$listeners,
+        /*
+         * Override input listener to as no-op. Prevents parent input listeners from being passed through
+         * onto the input element which will result in the handler being called twice
+         * (once on the input element and once by the emitted input event by the change listener).
+        */
+        input: () => {
+        },
+        change: (t) => this.emitValue(t.target)
+      };
+    }
+  },
+  watch: {
+    checkboxGroupValueChecked: {
+      immediate: !0,
+      handler(t) {
+        this.hasGroup && (this.internalChecked = t);
+      }
+    }
+  },
+  mounted() {
+    this.runValidations();
+  },
+  methods: {
+    emitValue(t) {
+      let { value: e, checked: s } = t;
+      this.internalIndeterminate && (s = !1, this.internalIndeterminate = !1, t.checked = !1), this.setGroupValue(e, s), this.$emit("input", s);
+    },
+    runValidations() {
+      this.validateInputLabels(this.hasLabel, this.$attrs["aria-label"]);
+    }
+  }
+};
+var h = function() {
+  var e = this, s = e._self._c;
+  return s("div", [s("label", [s("div", { class: ["d-checkbox-group", { "d-checkbox-group--disabled": e.internalDisabled }] }, [s("div", { staticClass: "d-checkbox__input" }, [s("input", e._g(e._b({ class: ["d-checkbox", e.inputValidationClass, e.inputClass], attrs: { type: "checkbox", name: e.internalName, disabled: e.internalDisabled }, domProps: { checked: e.internalChecked, value: e.value, indeterminate: e.internalIndeterminate } }, "input", e.$attrs, !1), e.inputListeners))]), e.hasLabelOrDescription ? s("div", { staticClass: "d-checkbox__copy d-checkbox__label", attrs: { "data-qa": "checkbox-label-description-container" } }, [e.hasLabel ? s("div", e._b({ class: e.labelClass, attrs: { "data-qa": "checkbox-label" } }, "div", e.labelChildProps, !1), [e._t("default", function() {
+    return [e._v(e._s(e.label))];
+  })], 2) : e._e(), e.hasDescription ? s("div", e._b({ class: ["d-description", e.descriptionClass], attrs: { "data-qa": "checkbox-description" } }, "div", e.descriptionChildProps, !1), [e._t("description", function() {
+    return [e._v(e._s(e.description))];
+  })], 2) : e._e(), s("dt-validation-messages", e._b({ class: e.messagesClass, attrs: { "validation-messages": e.formattedMessages, "show-messages": e.showMessages, "data-qa": "dt-checkbox-validation-messages" } }, "dt-validation-messages", e.messagesChildProps, !1))], 1) : e._e()])])]);
+}, u = [], p = /* @__PURE__ */ l(
+  d,
+  h,
+  u,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const C = p.exports;
+export {
+  C as DtCheckbox
+};
+//# sourceMappingURL=checkbox.js.map

package/dist/lib/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sources":["../../components/checkbox/checkbox_constants.js","../../components/checkbox/checkbox.vue"],"sourcesContent":["export const CHECKBOX_INPUT_VALIDATION_CLASSES = {\n  error: 'd-checkbox--error',\n  warning: 'd-checkbox--warning',\n  success: 'd-checkbox--success',\n};\n\nexport default {\n  CHECKBOX_INPUT_VALIDATION_CLASSES,\n};\n","<template>\n  <div>\n    <label>\n      <div :class=\"['d-checkbox-group', { 'd-checkbox-group--disabled': internalDisabled }]\">\n        <div class=\"d-checkbox__input\">\n          <input\n            type=\"checkbox\"\n            :checked=\"internalChecked\"\n            :name=\"internalName\"\n            :value=\"value\"\n            :disabled=\"internalDisabled\"\n            :class=\"['d-checkbox', inputValidationClass, inputClass]\"\n            v-bind=\"$attrs\"\n            :indeterminate.prop=\"internalIndeterminate\"\n            v-on=\"inputListeners\"\n          >\n        </div>\n        <div\n          v-if=\"hasLabelOrDescription\"\n          class=\"d-checkbox__copy d-checkbox__label\"\n          data-qa=\"checkbox-label-description-container\"\n        >\n          <div\n            v-if=\"hasLabel\"\n            :class=\"labelClass\"\n            v-bind=\"labelChildProps\"\n            data-qa=\"checkbox-label\"\n          >\n            <!-- @slot slot for Checkbox Label -->\n            <slot>{{ label }}</slot>\n          </div>\n          <div\n            v-if=\"hasDescription\"\n            :class=\"['d-description', descriptionClass]\"\n            v-bind=\"descriptionChildProps\"\n            data-qa=\"checkbox-description\"\n          >\n            <!-- @slot slot for Checkbox Description -->\n            <slot name=\"description\">{{ description }}</slot>\n          </div>\n          <dt-validation-messages\n            :validation-messages=\"formattedMessages\"\n            :show-messages=\"showMessages\"\n            :class=\"messagesClass\"\n            v-bind=\"messagesChildProps\"\n            data-qa=\"dt-checkbox-validation-messages\"\n          />\n        </div>\n      </div>\n    </label>\n  </div>\n</template>\n\n<script>\n// Imports\nimport {\n  InputMixin,\n  CheckableMixin,\n  GroupableMixin,\n  MessagesMixin,\n} from '@/common/mixins/input';\nimport { CHECKBOX_INPUT_VALIDATION_CLASSES } from './checkbox_constants';\nimport { DtValidationMessages } from '../validation_messages';\n\n/**\n * Checkboxes are control elements that allow the user to make a selection.They are typically used in a\n * Checkbox Group which allows the user to make one or more selections from a list of options.\n * @see https://dialtone.dialpad.com/components/checkbox.html\n */\nexport default {\n  name: 'DtCheckbox',\n\n  components: { DtValidationMessages },\n\n  mixins: [InputMixin, CheckableMixin, GroupableMixin, MessagesMixin],\n\n  inheritAttrs: false,\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {Boolean}\n     */\n    'input',\n\n    /**\n     * Native input focusin event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native input focusout event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  computed: {\n    inputValidationClass () {\n      return CHECKBOX_INPUT_VALIDATION_CLASSES[this.internalValidationState];\n    },\n\n    checkboxGroupValueChecked () {\n      return this.groupContext?.selectedValues?.includes(this.value) ?? false;\n    },\n\n    hasLabel () {\n      return !!(this.$slots.default || this.label);\n    },\n\n    hasDescription () {\n      return !!(this.$slots.description || this.description);\n    },\n\n    hasLabelOrDescription () {\n      return this.hasLabel || this.hasDescription;\n    },\n\n    inputListeners () {\n      return {\n        /* TODO\n            Check if any usages of this component leverage $listeners and either remove if unused or scope the removal\n            and migration prior to upgrading to Vue 3.x\n        */\n        ...this.$listeners,\n        /*\n         * Override input listener to as no-op. Prevents parent input listeners from being passed through\n         * onto the input element which will result in the handler being called twice\n         * (once on the input element and once by the emitted input event by the change listener).\n        */\n        input: () => {},\n        change: event => this.emitValue(event.target),\n      };\n    },\n  },\n\n  watch: {\n    checkboxGroupValueChecked: {\n      immediate: true,\n      handler (newCheckboxGroupValueChecked) {\n        if (this.hasGroup) {\n          // update internal value when the checkbox group value changes\n          this.internalChecked = newCheckboxGroupValueChecked;\n        }\n      },\n    },\n  },\n\n  mounted () {\n    this.runValidations();\n  },\n\n  methods: {\n    emitValue (target) {\n      let { value, checked } = target;\n      // Expected: Indeterminate -> unchecked. We need to manually set DOM property `checked` to false\n      // and update this.internalIndeterminate.\n      if (this.internalIndeterminate) {\n        checked = false;\n        this.internalIndeterminate = false;\n        target.checked = false;\n      }\n      // update provided value if injected\n      this.setGroupValue(value, checked);\n\n      // emit the state of the checkbox\n      this.$emit('input', checked);\n    },\n\n    runValidations () {\n      this.validateInputLabels(this.hasLabel, this.$attrs['aria-label']);\n    },\n  },\n};\n</script>\n"],"names":["CHECKBOX_INPUT_VALIDATION_CLASSES","_sfc_main","DtValidationMessages","InputMixin","CheckableMixin","GroupableMixin","MessagesMixin","_b","_a","event","newCheckboxGroupValueChecked","target","value","checked"],"mappings":";;;;;;;AAAO,MAAMA,IAAoC;AAAA,EAC/C,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AACX,GCiEAC,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAA,sBAAAC,EAAA;AAAA,EAEA,QAAA,CAAAC,GAAAC,GAAAC,GAAAC,CAAA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,uBAAA;AACA,aAAAN,EAAA,KAAA,uBAAA;AAAA,IACA;AAAA,IAEA,4BAAA;;AACA,eAAAO,KAAAC,IAAA,KAAA,iBAAA,gBAAAA,EAAA,mBAAA,gBAAAD,EAAA,SAAA,KAAA,WAAA;AAAA,IACA;AAAA,IAEA,WAAA;AACA,aAAA,CAAA,EAAA,KAAA,OAAA,WAAA,KAAA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,aAAA,CAAA,EAAA,KAAA,OAAA,eAAA,KAAA;AAAA,IACA;AAAA,IAEA,wBAAA;AACA,aAAA,KAAA,YAAA,KAAA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,aAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAKA,GAAA,KAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMA,OAAA,MAAA;AAAA,QAAA;AAAA,QACA,QAAA,CAAAE,MAAA,KAAA,UAAAA,EAAA,MAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,2BAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAAC,GAAA;AACA,QAAA,KAAA,aAEA,KAAA,kBAAAA;AAAA,MAEA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,eAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,UAAAC,GAAA;AACA,UAAA,EAAA,OAAAC,GAAA,SAAAC,EAAA,IAAAF;AAGA,MAAA,KAAA,0BACAE,IAAA,IACA,KAAA,wBAAA,IACAF,EAAA,UAAA,KAGA,KAAA,cAAAC,GAAAC,CAAA,GAGA,KAAA,MAAA,SAAAA,CAAA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,WAAA,oBAAA,KAAA,UAAA,KAAA,OAAA,YAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/chip.js

@@ -0,0 +1,186 @@
+import { getUniqueString as i } from "./utils.js";
+import { n as o } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
+import { DtButton as n } from "./button.js";
+import { DtIcon as l } from "./icon.js";
+import "./constants.js";
+import "vue";
+import "../chunks/link_constants-vIUB92L4.js";
+import "@dialpad/dialtone-icons/vue2";
+import "../chunks/icon_constants-OpYAAKwF.js";
+import "@dialpad/dialtone-icons/icons.json";
+import "./skeleton.js";
+const a = {
+  xs: "d-chip__label--xs",
+  sm: "d-chip__label--sm",
+  md: ""
+}, r = {
+  xs: "d-chip__close--xs",
+  sm: "d-chip__close--sm",
+  md: ""
+}, c = {
+  xs: "200",
+  sm: "200",
+  md: "200"
+}, p = {
+  name: "DtChip",
+  components: {
+    DtButton: n,
+    DtIcon: l
+  },
+  props: {
+    /**
+     * A set of props to be passed into the modal's close button. Requires an 'ariaLabel' property.
+     */
+    closeButtonProps: {
+      type: Object,
+      default: function() {
+        return { ariaLabel: "close" };
+      },
+      validator: (e) => !!e.ariaLabel
+    },
+    /**
+     * Hides the close button on the chip
+     * @values true, false
+     */
+    hideClose: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * The size of the chip.
+     * @values xs, sm, md
+     */
+    size: {
+      type: String,
+      default: "md",
+      validator: (e) => Object.keys(a).includes(e)
+    },
+    /**
+     * The interactivity of the chip.
+     * Makes chip clickable, apply hover/focus/active style, emit keyboard events etc.
+     * @values true, false
+     */
+    interactive: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Id to use for the dialog's aria-labelledby.
+     */
+    id: {
+      type: String,
+      default: function() {
+        return i();
+      }
+    },
+    /**
+     * Descriptive label for the chip content.
+     * If this prop is unset the content in the default slot will be used as an aria-label.
+     */
+    ariaLabel: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Additional class name for the chip element.
+     */
+    contentClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Additional class name for the span element.
+     */
+    labelClass: {
+      type: [String, Array, Object],
+      default: ""
+    }
+  },
+  emits: [
+    /**
+     * Native chip click event
+     *
+     * @event click
+     * @type {PointerEvent | KeyboardEvent}
+     */
+    "click",
+    /**
+     * Close button click event
+     *
+     * @event close
+     */
+    "close",
+    /**
+     * Native chip key up event
+     *
+     * @event keyup
+     * @type {KeyboardEvent}
+     */
+    "keyup"
+  ],
+  data() {
+    return {
+      isActive: !1
+    };
+  },
+  computed: {
+    chipListeners() {
+      return {
+        ...this.$listeners,
+        click: (e) => {
+          this.interactive && this.$emit("click", e);
+        },
+        keyup: (e) => {
+          var t;
+          ((t = e.code) == null ? void 0 : t.toLowerCase()) === "delete" ? this.onClose() : this.$emit("keyup", e);
+        }
+      };
+    },
+    closeButtonIconSize() {
+      return c[this.size];
+    }
+  },
+  methods: {
+    chipClasses() {
+      return [
+        this.$attrs["grouped-chip"] ? "d-chip" : "d-chip__label",
+        a[this.size],
+        this.labelClass
+      ];
+    },
+    chipCloseButtonClasses() {
+      return [
+        "d-chip__close",
+        r[this.size]
+      ];
+    },
+    onClose() {
+      this.hideClose || this.$emit("close");
+    }
+  }
+};
+var d = function() {
+  var t = this, s = t._self._c;
+  return s("span", { staticClass: "d-chip" }, [s(t.interactive ? "button" : "span", t._g({ tag: "component", class: t.chipClasses(), attrs: { id: t.id, type: t.interactive && "button", "data-qa": "dt-chip", "aria-labelledby": t.ariaLabel ? void 0 : `${t.id}-content`, "aria-label": t.ariaLabel } }, t.chipListeners), [t.$slots.icon ? s("span", { staticClass: "d-chip__icon", attrs: { "data-qa": "dt-chip-icon" } }, [t._t("icon")], 2) : t.$slots.avatar ? s("span", { attrs: { "data-qa": "dt-chip-avatar" } }, [t._t("avatar")], 2) : t._e(), t.$slots.default ? s("span", { class: ["d-chip__text", t.contentClass], attrs: { id: `${t.id}-content`, "data-qa": "dt-chip-label" } }, [t._t("default")], 2) : t._e()]), t.hideClose ? t._e() : s("dt-button", t._b({ class: t.chipCloseButtonClasses(), attrs: { "data-qa": "dt-chip-close", "aria-label": t.closeButtonProps.ariaLabel }, on: { click: function(h) {
+    return t.$emit("close");
+  } }, scopedSlots: t._u([{ key: "icon", fn: function() {
+    return [s("dt-icon", { attrs: { name: "close", size: t.closeButtonIconSize } })];
+  }, proxy: !0 }], null, !1, 1192647893) }, "dt-button", t.closeButtonProps, !1))], 1);
+}, u = [], _ = /* @__PURE__ */ o(
+  p,
+  d,
+  u,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const L = _.exports;
+export {
+  r as CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,
+  c as CHIP_ICON_SIZES,
+  a as CHIP_SIZE_MODIFIERS,
+  L as DtChip
+};
+//# sourceMappingURL=chip.js.map

package/dist/lib/chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.js","sources":["../../components/chip/chip_constants.js","../../components/chip/chip.vue"],"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","<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=\"$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=\"$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=\"$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 } 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    };\n  },\n\n  computed: {\n    chipListeners () {\n      return {\n        ...this.$listeners,\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":["CHIP_SIZE_MODIFIERS","CHIP_CLOSE_BUTTON_SIZE_MODIFIERS","CHIP_ICON_SIZES","_sfc_main","DtButton","DtIcon","props","s","getUniqueString","event","_a"],"mappings":";;;;;;;;;;;AAAY,MAACA,IAAsB;AAAA,EACjC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEaC,IAAmC;AAAA,EAC9C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEaC,IAAkB;AAAA,EAC7B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GCuDAC,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,WAAA;AAAA,eAAA,EAAA,WAAA,QAAA;AAAA,MAAA;AAAA,MACA,WAAA,CAAAC,MACA,CAAA,CAAAA,EAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA,OAAA,KAAAP,CAAA,EAAA,SAAAO,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,WAAA;AAAA,eAAAC,EAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,gBAAA;AACA,aAAA;AAAA,QACA,GAAA,KAAA;AAAA,QACA,OAAA,CAAAC,MAAA;AACA,UAAA,KAAA,eAAA,KAAA,MAAA,SAAAA,CAAA;AAAA,QACA;AAAA,QAEA,OAAA,CAAAA,MAAA;;AACA,YAAAC,IAAAD,EAAA,SAAA,gBAAAC,EAAA,mBAAA,WACA,KAAA,QAAA,IAEA,KAAA,MAAA,SAAAD,CAAA;AAAA,QAEA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,sBAAA;AACA,aAAAP,EAAA,KAAA,IAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,cAAA;AACA,aAAA;AAAA,QACA,KAAA,OAAA,cAAA,IAAA,WAAA;AAAA,QACAF,EAAA,KAAA,IAAA;AAAA,QACA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,yBAAA;AACA,aAAA;AAAA,QACA;AAAA,QACAC,EAAA,KAAA,IAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,UAAA;AACA,MAAA,KAAA,aACA,KAAA,MAAA,OAAA;AAAA,IAEA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/codeblock.js

@@ -0,0 +1,29 @@
+import { n as t } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
+const o = {
+  name: "DtCodeblock",
+  props: {
+    text: {
+      type: String,
+      required: !0
+    }
+  }
+};
+var r = function() {
+  var e = this, n = e._self._c;
+  return n("pre", [e._v("  "), n("code", { staticClass: "d-codeblock" }, [e._v(e._s(e.text))]), e._v(`
+`)]);
+}, c = [], s = /* @__PURE__ */ t(
+  o,
+  r,
+  c,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const a = s.exports;
+export {
+  a as DtCodeblock
+};
+//# sourceMappingURL=codeblock.js.map

package/dist/lib/codeblock.js.map

@@ -0,0 +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"],"mappings":";AASA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;"}

package/dist/lib/collapsible.js

@@ -0,0 +1,313 @@
+import { getUniqueString as a } from "./utils.js";
+import { n as i } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
+import { DtButton as r } from "./button.js";
+import { DtLazyShow as l } from "./lazy-show.js";
+import { DtIcon as o } from "./icon.js";
+import "./constants.js";
+import "vue";
+import "../chunks/link_constants-vIUB92L4.js";
+import "@dialpad/dialtone-icons/vue2";
+import "../chunks/icon_constants-OpYAAKwF.js";
+import "@dialpad/dialtone-icons/icons.json";
+import "./skeleton.js";
+const s = {
+  name: "DtCollapsibleLazyShow",
+  /******************
+   *     PROPS      *
+   ******************/
+  props: {
+    /**
+     * Whether the child slot is shown.
+     */
+    show: {
+      type: Boolean,
+      default: null
+    },
+    /**
+     * Enable/Disable transition animation
+     */
+    appear: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * 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(t) {
+      !t || this.initialized || (this.initialized = !0);
+    }
+  },
+  methods: {
+    /**
+     * @param {HTMLElement} element
+     */
+    beforeEnter(t) {
+      requestAnimationFrame(() => {
+        t.style.height || (t.style.height = "0px");
+      });
+    },
+    /**
+     * @param {HTMLElement} element
+     */
+    enter(t) {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          t.style.height = `${t.scrollHeight}px`;
+        });
+      });
+    },
+    /**
+     * @param {HTMLElement} element
+     */
+    afterEnter(t) {
+      t.style.height = null;
+    },
+    /**
+     * @param {HTMLElement} element
+     */
+    beforeLeave(t) {
+      requestAnimationFrame(() => {
+        t.style.height || (t.style.height = `${t.offsetHeight}px`);
+      });
+    },
+    /**
+     * @param {HTMLElement} element
+     */
+    leave(t) {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          t.style.height = "0px";
+        });
+      });
+    },
+    /**
+     * @param {HTMLElement} element
+     */
+    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 = [], d = /* @__PURE__ */ i(
+  s,
+  p,
+  c,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const h = d.exports, u = {
+  name: "DtCollapsible",
+  components: {
+    DtButton: r,
+    DtCollapsibleLazyShow: h,
+    DtLazyShow: l,
+    DtIcon: o
+  },
+  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 a();
+      }
+    },
+    /**
+     * 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: !0
+    };
+  },
+  computed: {
+    labelledBy() {
+      return this.ariaLabelledBy || !this.ariaLabel && a("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 m = 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);
+}, f = [], y = /* @__PURE__ */ i(
+  u,
+  m,
+  f,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const E = y.exports;
+export {
+  E as DtCollapsible
+};
+//# sourceMappingURL=collapsible.js.map