@dialpad/dialtone-vue 3.54.0 → 3.55.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [3.55.0](https://github.com/dialpad/dialtone-vue/compare/v3.54.0...v3.55.0) (2023-03-28)
+
+
+### Features
+
+* **Image Viewer:** create dtImageViewer ([#860](https://github.com/dialpad/dialtone-vue/issues/860)) ([20bfd61](https://github.com/dialpad/dialtone-vue/commit/20bfd619a1a9749b658ac35c7e5cd6fee8391875))
+
 # [3.54.0](https://github.com/dialpad/dialtone-vue/compare/v3.53.3...v3.54.0) (2023-03-27)
 
 

package/dist/dialtone-vue.common.js

@@ -1171,6 +1171,7 @@ __webpack_require__.d(__webpack_exports__, {
   "DtDropdownSeparator": () => (/* reexport */ dropdown_separator),
   "DtGroupableInputMixin": () => (/* reexport */ GroupableMixin),
   "DtIcon": () => (/* reexport */ icon),
+  "DtImageViewer": () => (/* reexport */ image_viewer),
   "DtInput": () => (/* reexport */ input_input),
   "DtInputGroup": () => (/* reexport */ input_group_input_group),
   "DtInputGroupMixin": () => (/* reexport */ InputGroupMixin),
@@ -12760,6 +12761,223 @@ const dropdown_separator_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)
 ;// CONCATENATED MODULE: ./components/dropdown/index.js
 
 
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/image_viewer/image_viewer.vue?vue&type=template&id=2229fad0
+
+const image_viewervue_type_template_id_2229fad0_hoisted_1 = ["src", "alt"];
+const image_viewervue_type_template_id_2229fad0_hoisted_2 = ["aria-hidden"];
+const image_viewervue_type_template_id_2229fad0_hoisted_3 = {
+  "data-qa": "dt-image-viewer-full",
+  class: "d-p0 d-bar0 d-wmx80p d-hmx80p",
+  role: "dialog",
+  "aria-modal": "true"
+};
+const image_viewervue_type_template_id_2229fad0_hoisted_4 = ["src", "alt"];
+function image_viewervue_type_template_id_2229fad0_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-button");
+
+  const _component_dt_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-icon");
+
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", null, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_button, {
+    "data-qa": "dt-image-viewer-preview",
+    "aria-label": $props.ariaLabel,
+    importance: "clear",
+    onClick: $options.open
+  }, {
+    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("img", {
+      class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($props.imageButtonClass),
+      src: $props.imageSrc,
+      alt: $props.imageAlt
+    }, null, 10, image_viewervue_type_template_id_2229fad0_hoisted_1)]),
+    _: 1
+  }, 8, ["aria-label", "onClick"]), $data.show ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Teleport, {
+    key: 0,
+    to: "body"
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+    "aria-hidden": $options.isOpen,
+    class: "d-modal",
+    "data-qa": "dt-modal"
+  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.modalListeners, true), {
+    onMouseover: _cache[0] || (_cache[0] = $event => $data.showCloseButton = true),
+    onMouseleave: _cache[1] || (_cache[1] = $event => $data.showCloseButton = false),
+    onFocusin: _cache[2] || (_cache[2] = $event => $data.showCloseButton = true),
+    onFocusout: _cache[3] || (_cache[3] = $event => $data.showCloseButton = false)
+  }), [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", image_viewervue_type_template_id_2229fad0_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("img", {
+    class: "d-wmx100p d-hmx100p",
+    src: $props.imageSrc,
+    alt: $props.imageAlt
+  }, null, 8, image_viewervue_type_template_id_2229fad0_hoisted_4)]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Transition, {
+    name: "fade"
+  }, {
+    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [$data.showCloseButton ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_button, {
+      key: 0,
+      ref: "closeImage",
+      "data-qa": "dt-image-viewer-close-btn",
+      class: "d-modal__close",
+      circle: "",
+      size: "lg",
+      importance: "clear",
+      kind: "inverted",
+      "aria-label": $props.closeAriaLabel,
+      onClick: $options.close
+    }, {
+      icon: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_icon, {
+        name: "close",
+        size: "400"
+      })]),
+      _: 1
+    }, 8, ["aria-label", "onClick"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]),
+    _: 1
+  })], 16, image_viewervue_type_template_id_2229fad0_hoisted_2)])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]);
+}
+;// CONCATENATED MODULE: ./components/image_viewer/image_viewer.vue?vue&type=template&id=2229fad0
+
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/image_viewer/image_viewer.vue?vue&type=script&lang=js
+
+
+
+
+/* harmony default export */ const image_viewervue_type_script_lang_js = ({
+  name: 'DtImageViewer',
+  components: {
+    DtButton: button_button,
+    DtIcon: icon
+  },
+  mixins: [modal],
+  props: {
+    /**
+     * URL of the image to be shown
+     */
+    imageSrc: {
+      type: String,
+      required: true
+    },
+
+    /**
+     * Alt text of image
+     */
+    imageAlt: {
+      type: String,
+      required: true
+    },
+
+    /**
+     * Image Class
+     */
+    imageButtonClass: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    /**
+     * Aria label
+     */
+    ariaLabel: {
+      type: String,
+      required: true
+    },
+
+    /**
+     * Aria label for close button
+     */
+    closeAriaLabel: {
+      type: String,
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      show: false,
+      showCloseButton: true
+    };
+  },
+
+  computed: {
+    isOpen() {
+      return `${!this.show}`;
+    },
+
+    modalListeners() {
+      return {
+        click: event => {
+          event.target === event.currentTarget && this.close();
+        },
+        keydown: event => {
+          switch (event.code) {
+            case EVENT_KEYNAMES.esc:
+            case EVENT_KEYNAMES.escape:
+              this.close();
+              break;
+
+            case EVENT_KEYNAMES.tab:
+              this.trapFocus(event);
+              break;
+          }
+        }
+      };
+    }
+
+  },
+  watch: {
+    show: {
+      immediate: true,
+
+      handler(isShowing) {
+        if (isShowing) {
+          // Set a reference to the previously-active element, to which we'll return focus on modal close.
+          this.previousActiveElement = document.activeElement;
+        } else {
+          var _this$previousActiveE;
+
+          // Modal is being hidden, so return focus to the previously active element before clearing the reference.
+          (_this$previousActiveE = this.previousActiveElement) === null || _this$previousActiveE === void 0 ? void 0 : _this$previousActiveE.focus();
+          this.previousActiveElement = null;
+        }
+      }
+
+    }
+  },
+  methods: {
+    open() {
+      this.show = true;
+      this.showCloseButton = true;
+      setTimeout(() => {
+        this.focusAfterOpen();
+      });
+    },
+
+    close() {
+      this.show = false;
+    },
+
+    focusAfterOpen() {
+      var _this$$refs$closeImag;
+
+      (_this$$refs$closeImag = this.$refs.closeImage) === null || _this$$refs$closeImag === void 0 ? void 0 : _this$$refs$closeImag.$el.focus();
+    },
+
+    trapFocus(e) {
+      if (this.show) {
+        this.focusTrappedTabPress(e);
+      }
+    }
+
+  }
+});
+;// CONCATENATED MODULE: ./components/image_viewer/image_viewer.vue?vue&type=script&lang=js
+ 
+;// CONCATENATED MODULE: ./components/image_viewer/image_viewer.vue
+
+
+
+
+;
+const image_viewer_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(image_viewervue_type_script_lang_js, [['render',image_viewervue_type_template_id_2229fad0_render]])
+
+/* harmony default export */ const image_viewer = (image_viewer_exports_);
+;// CONCATENATED MODULE: ./components/image_viewer/index.js
+
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/input/input.vue?vue&type=template&id=2ab65018
 
 const inputvue_type_template_id_2ab65018_hoisted_1 = {
@@ -23780,6 +23998,7 @@ const contact_row_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(contac
 
 
 
+
 
 
  /// Recipes

package/dist/dialtone-vue.umd.js

@@ -1181,6 +1181,7 @@ __webpack_require__.d(__webpack_exports__, {
   "DtDropdownSeparator": () => (/* reexport */ dropdown_separator),
   "DtGroupableInputMixin": () => (/* reexport */ GroupableMixin),
   "DtIcon": () => (/* reexport */ icon),
+  "DtImageViewer": () => (/* reexport */ image_viewer),
   "DtInput": () => (/* reexport */ input_input),
   "DtInputGroup": () => (/* reexport */ input_group_input_group),
   "DtInputGroupMixin": () => (/* reexport */ InputGroupMixin),
@@ -12770,6 +12771,223 @@ const dropdown_separator_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)
 ;// CONCATENATED MODULE: ./components/dropdown/index.js
 
 
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/image_viewer/image_viewer.vue?vue&type=template&id=2229fad0
+
+const image_viewervue_type_template_id_2229fad0_hoisted_1 = ["src", "alt"];
+const image_viewervue_type_template_id_2229fad0_hoisted_2 = ["aria-hidden"];
+const image_viewervue_type_template_id_2229fad0_hoisted_3 = {
+  "data-qa": "dt-image-viewer-full",
+  class: "d-p0 d-bar0 d-wmx80p d-hmx80p",
+  role: "dialog",
+  "aria-modal": "true"
+};
+const image_viewervue_type_template_id_2229fad0_hoisted_4 = ["src", "alt"];
+function image_viewervue_type_template_id_2229fad0_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-button");
+
+  const _component_dt_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-icon");
+
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", null, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_button, {
+    "data-qa": "dt-image-viewer-preview",
+    "aria-label": $props.ariaLabel,
+    importance: "clear",
+    onClick: $options.open
+  }, {
+    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("img", {
+      class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($props.imageButtonClass),
+      src: $props.imageSrc,
+      alt: $props.imageAlt
+    }, null, 10, image_viewervue_type_template_id_2229fad0_hoisted_1)]),
+    _: 1
+  }, 8, ["aria-label", "onClick"]), $data.show ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Teleport, {
+    key: 0,
+    to: "body"
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+    "aria-hidden": $options.isOpen,
+    class: "d-modal",
+    "data-qa": "dt-modal"
+  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.modalListeners, true), {
+    onMouseover: _cache[0] || (_cache[0] = $event => $data.showCloseButton = true),
+    onMouseleave: _cache[1] || (_cache[1] = $event => $data.showCloseButton = false),
+    onFocusin: _cache[2] || (_cache[2] = $event => $data.showCloseButton = true),
+    onFocusout: _cache[3] || (_cache[3] = $event => $data.showCloseButton = false)
+  }), [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", image_viewervue_type_template_id_2229fad0_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("img", {
+    class: "d-wmx100p d-hmx100p",
+    src: $props.imageSrc,
+    alt: $props.imageAlt
+  }, null, 8, image_viewervue_type_template_id_2229fad0_hoisted_4)]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Transition, {
+    name: "fade"
+  }, {
+    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [$data.showCloseButton ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_button, {
+      key: 0,
+      ref: "closeImage",
+      "data-qa": "dt-image-viewer-close-btn",
+      class: "d-modal__close",
+      circle: "",
+      size: "lg",
+      importance: "clear",
+      kind: "inverted",
+      "aria-label": $props.closeAriaLabel,
+      onClick: $options.close
+    }, {
+      icon: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_icon, {
+        name: "close",
+        size: "400"
+      })]),
+      _: 1
+    }, 8, ["aria-label", "onClick"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]),
+    _: 1
+  })], 16, image_viewervue_type_template_id_2229fad0_hoisted_2)])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]);
+}
+;// CONCATENATED MODULE: ./components/image_viewer/image_viewer.vue?vue&type=template&id=2229fad0
+
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/image_viewer/image_viewer.vue?vue&type=script&lang=js
+
+
+
+
+/* harmony default export */ const image_viewervue_type_script_lang_js = ({
+  name: 'DtImageViewer',
+  components: {
+    DtButton: button_button,
+    DtIcon: icon
+  },
+  mixins: [modal],
+  props: {
+    /**
+     * URL of the image to be shown
+     */
+    imageSrc: {
+      type: String,
+      required: true
+    },
+
+    /**
+     * Alt text of image
+     */
+    imageAlt: {
+      type: String,
+      required: true
+    },
+
+    /**
+     * Image Class
+     */
+    imageButtonClass: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    /**
+     * Aria label
+     */
+    ariaLabel: {
+      type: String,
+      required: true
+    },
+
+    /**
+     * Aria label for close button
+     */
+    closeAriaLabel: {
+      type: String,
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      show: false,
+      showCloseButton: true
+    };
+  },
+
+  computed: {
+    isOpen() {
+      return `${!this.show}`;
+    },
+
+    modalListeners() {
+      return {
+        click: event => {
+          event.target === event.currentTarget && this.close();
+        },
+        keydown: event => {
+          switch (event.code) {
+            case EVENT_KEYNAMES.esc:
+            case EVENT_KEYNAMES.escape:
+              this.close();
+              break;
+
+            case EVENT_KEYNAMES.tab:
+              this.trapFocus(event);
+              break;
+          }
+        }
+      };
+    }
+
+  },
+  watch: {
+    show: {
+      immediate: true,
+
+      handler(isShowing) {
+        if (isShowing) {
+          // Set a reference to the previously-active element, to which we'll return focus on modal close.
+          this.previousActiveElement = document.activeElement;
+        } else {
+          var _this$previousActiveE;
+
+          // Modal is being hidden, so return focus to the previously active element before clearing the reference.
+          (_this$previousActiveE = this.previousActiveElement) === null || _this$previousActiveE === void 0 ? void 0 : _this$previousActiveE.focus();
+          this.previousActiveElement = null;
+        }
+      }
+
+    }
+  },
+  methods: {
+    open() {
+      this.show = true;
+      this.showCloseButton = true;
+      setTimeout(() => {
+        this.focusAfterOpen();
+      });
+    },
+
+    close() {
+      this.show = false;
+    },
+
+    focusAfterOpen() {
+      var _this$$refs$closeImag;
+
+      (_this$$refs$closeImag = this.$refs.closeImage) === null || _this$$refs$closeImag === void 0 ? void 0 : _this$$refs$closeImag.$el.focus();
+    },
+
+    trapFocus(e) {
+      if (this.show) {
+        this.focusTrappedTabPress(e);
+      }
+    }
+
+  }
+});
+;// CONCATENATED MODULE: ./components/image_viewer/image_viewer.vue?vue&type=script&lang=js
+ 
+;// CONCATENATED MODULE: ./components/image_viewer/image_viewer.vue
+
+
+
+
+;
+const image_viewer_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(image_viewervue_type_script_lang_js, [['render',image_viewervue_type_template_id_2229fad0_render]])
+
+/* harmony default export */ const image_viewer = (image_viewer_exports_);
+;// CONCATENATED MODULE: ./components/image_viewer/index.js
+
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/input/input.vue?vue&type=template&id=2ab65018
 
 const inputvue_type_template_id_2ab65018_hoisted_1 = {
@@ -23790,6 +24008,7 @@ const contact_row_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(contac
 
 
 
+
 
 
  /// Recipes