@dialpad/dialtone-vue 2.8.0 → 2.8.1

package/dist/dialtone-vue.common.js

@@ -1001,6 +1001,7 @@ __webpack_require__.d(__webpack_exports__, {
   "BREADCRUMBS_INVERTED_MODIFIER": () => (/* reexport */ BREADCRUMBS_INVERTED_MODIFIER),
   "BREADCRUMB_ITEM_SELECTED_MODIFIER": () => (/* reexport */ BREADCRUMB_ITEM_SELECTED_MODIFIER),
   "BUTTON_GROUP_ALIGNMENT": () => (/* reexport */ BUTTON_GROUP_ALIGNMENT),
+  "CHIP_SIZE_MODIFIERS": () => (/* reexport */ CHIP_SIZE_MODIFIERS),
   "COLOR_CODES": () => (/* reexport */ COLOR_CODES),
   "DEFAULT_VALIDATION_MESSAGE_TYPE": () => (/* reexport */ DEFAULT_VALIDATION_MESSAGE_TYPE),
   "DESCRIPTION_SIZE_TYPES": () => (/* reexport */ DESCRIPTION_SIZE_TYPES),
@@ -1014,6 +1015,7 @@ __webpack_require__.d(__webpack_exports__, {
   "DtCheckableInputMixin": () => (/* reexport */ CheckableMixin),
   "DtCheckbox": () => (/* reexport */ checkbox_checkbox),
   "DtCheckboxGroup": () => (/* reexport */ checkbox_group),
+  "DtChip": () => (/* reexport */ chip),
   "DtCombobox": () => (/* reexport */ combobox),
   "DtDropdown": () => (/* reexport */ dropdown),
   "DtEmoji": () => (/* reexport */ emoji),
@@ -14260,6 +14262,230 @@ var checkbox_group_component = normalizeComponent(
 /* harmony default export */ const checkbox_group = (checkbox_group_component.exports);
 ;// CONCATENATED MODULE: ./components/checkbox_group/index.js
 
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/chip/chip.vue?vue&type=template&id=4d7bb584&
+var chipvue_type_template_id_4d7bb584_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',{class:_vm.chipClasses(),attrs:{"id":_vm.id,"data-qa":"dt-chip","tabindex":_vm.tabIndex,"aria-labelledby":_vm.ariaLabel ? undefined : (_vm.id + "-content"),"aria-label":_vm.ariaLabel},on:{"mousedown":_vm.onClick,"mouseup":_vm.onClick,"mouseleave":function($event){_vm.isActive = false},"focusout":function($event){_vm.isActive = false},"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onClick.apply(null, arguments)},"keyup":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onClick.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"delete",[8,46],$event.key,["Backspace","Delete","Del"])){ return null; }return _vm.onClose.apply(null, arguments)}]}},[(_vm.$slots.icon)?_c('span',{staticClass:"d-chip__icon",attrs:{"data-qa":"dt-chip-icon"}},[_vm._t("icon")],2):(_vm.$slots.avatar)?_c('span',{attrs:{"data-qa":"dt-chip-avatar"}},[_vm._t("avatar")],2):_vm._e(),(_vm.$slots.default)?_c('span',{class:['d-truncate', _vm.contentClass],attrs:{"id":(_vm.id + "-content"),"data-qa":"dt-chip-label"}},[_vm._t("default")],2):_vm._e(),(!_vm.hideClose)?_c('span',{staticClass:"d-chip-btn-holder"}):_vm._e(),_c('span',{ref:"closeBtnContainer",staticClass:"d-chip-btn-container"},[(!_vm.hideClose)?_c('dt-button',_vm._b({attrs:{"data-qa":"dt-chip-close","circle":"","importance":"clear","aria-label":_vm.closeButtonProps.ariaLabel},on:{"click":function($event){return _vm.$emit('close')}}},'dt-button',_vm.closeButtonProps,false),[_c('icon-close')],1):_vm._e()],1)])}
+var chipvue_type_template_id_4d7bb584_staticRenderFns = []
+
+
+;// CONCATENATED MODULE: ./components/chip/chip_constants.js
+const CHIP_SIZE_MODIFIERS = {
+  xs: 'd-chip--xs',
+  sm: 'd-chip--sm',
+  md: ''
+};
+/* harmony default export */ const chip_constants = ({
+  CHIP_SIZE_MODIFIERS
+});
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/chip/chip.vue?vue&type=script&lang=js&
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+
+
+
+/* harmony default export */ const chipvue_type_script_lang_js_ = ({
+  name: 'DtChip',
+  components: {
+    IconClose: IconClose,
+    DtButton: button_button
+  },
+  props: {
+    /**
+     * A set of props to be passed into the modal's close button. Requires an 'ariaLabel' property.
+     */
+    closeButtonProps: {
+      type: Object,
+      validator: props => {
+        return !!props.ariaLabel;
+      }
+    },
+
+    /**
+     * Hides the close button on the chip
+     */
+    hideClose: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * The size of the chip.
+     * @values xs, sm, md
+     * @see https://dialpad.design/components/chip
+     */
+    size: {
+      type: String,
+      default: 'md',
+      validator: s => Object.keys(CHIP_SIZE_MODIFIERS).includes(s)
+    },
+
+    /**
+     * The interactivity of the chip.
+     * Makes chip clickable, apply hover/focus/active style, emit keyboard events etc.
+     * @see https://dialpad.design/components/chip
+     */
+    interactive: {
+      type: Boolean,
+      default: true
+    },
+
+    /**
+     * Id to use for the dialog's aria-labelledby.
+     */
+    id: {
+      type: String,
+      default: function () {
+        return getUniqueString();
+      }
+    },
+
+    /**
+     * 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: ''
+    }
+  },
+  emits: ['click', 'close'],
+
+  data() {
+    return {
+      isActive: false
+    };
+  },
+
+  computed: {
+    tabIndex() {
+      return this.interactive ? 0 : -1;
+    }
+
+  },
+  methods: {
+    chipClasses() {
+      return ['d-chip', CHIP_SIZE_MODIFIERS[this.size], {
+        'd-chip--interactive': this.interactive,
+        'd-chip--active': this.isActive
+      }];
+    },
+
+    onClose() {
+      if (!this.hideClose) {
+        this.$emit('close');
+      }
+    },
+
+    onClick(event) {
+      // Clicking on the button should not update value of isActive.
+      if (!this.interactive || this.$refs.closeBtnContainer.contains(event.target)) {
+        return;
+      }
+
+      if (event.type === 'mousedown' || event.type === 'keydown') {
+        this.isActive = true;
+      } else {
+        this.isActive = false;
+        this.$emit('click');
+      }
+    }
+
+  }
+});
+;// CONCATENATED MODULE: ./components/chip/chip.vue?vue&type=script&lang=js&
+ /* harmony default export */ const chip_chipvue_type_script_lang_js_ = (chipvue_type_script_lang_js_); 
+;// CONCATENATED MODULE: ./components/chip/chip.vue
+
+
+
+
+
+/* normalize component */
+;
+var chip_component = normalizeComponent(
+  chip_chipvue_type_script_lang_js_,
+  chipvue_type_template_id_4d7bb584_render,
+  chipvue_type_template_id_4d7bb584_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ const chip = (chip_component.exports);
+;// CONCATENATED MODULE: ./components/chip/index.js
+
+
 ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/select_menu/select_menu.vue?vue&type=template&id=ea91f650&
 var select_menuvue_type_template_id_ea91f650_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('label',[(_vm.$slots.label || _vm.label)?_c('div',_vm._b({class:[
         'd-label',
@@ -16391,6 +16617,7 @@ var top_banner_info_component = normalizeComponent(
 
 
 
+
 
 
  /// Recipes

package/dist/dialtone-vue.umd.js

@@ -1019,6 +1019,7 @@ __webpack_require__.d(__webpack_exports__, {
   "BREADCRUMBS_INVERTED_MODIFIER": () => (/* reexport */ BREADCRUMBS_INVERTED_MODIFIER),
   "BREADCRUMB_ITEM_SELECTED_MODIFIER": () => (/* reexport */ BREADCRUMB_ITEM_SELECTED_MODIFIER),
   "BUTTON_GROUP_ALIGNMENT": () => (/* reexport */ BUTTON_GROUP_ALIGNMENT),
+  "CHIP_SIZE_MODIFIERS": () => (/* reexport */ CHIP_SIZE_MODIFIERS),
   "COLOR_CODES": () => (/* reexport */ COLOR_CODES),
   "DEFAULT_VALIDATION_MESSAGE_TYPE": () => (/* reexport */ DEFAULT_VALIDATION_MESSAGE_TYPE),
   "DESCRIPTION_SIZE_TYPES": () => (/* reexport */ DESCRIPTION_SIZE_TYPES),
@@ -1032,6 +1033,7 @@ __webpack_require__.d(__webpack_exports__, {
   "DtCheckableInputMixin": () => (/* reexport */ CheckableMixin),
   "DtCheckbox": () => (/* reexport */ checkbox_checkbox),
   "DtCheckboxGroup": () => (/* reexport */ checkbox_group),
+  "DtChip": () => (/* reexport */ chip),
   "DtCombobox": () => (/* reexport */ combobox),
   "DtDropdown": () => (/* reexport */ dropdown),
   "DtEmoji": () => (/* reexport */ emoji),
@@ -14278,6 +14280,230 @@ var checkbox_group_component = normalizeComponent(
 /* harmony default export */ const checkbox_group = (checkbox_group_component.exports);
 ;// CONCATENATED MODULE: ./components/checkbox_group/index.js
 
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/chip/chip.vue?vue&type=template&id=4d7bb584&
+var chipvue_type_template_id_4d7bb584_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',{class:_vm.chipClasses(),attrs:{"id":_vm.id,"data-qa":"dt-chip","tabindex":_vm.tabIndex,"aria-labelledby":_vm.ariaLabel ? undefined : (_vm.id + "-content"),"aria-label":_vm.ariaLabel},on:{"mousedown":_vm.onClick,"mouseup":_vm.onClick,"mouseleave":function($event){_vm.isActive = false},"focusout":function($event){_vm.isActive = false},"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onClick.apply(null, arguments)},"keyup":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onClick.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"delete",[8,46],$event.key,["Backspace","Delete","Del"])){ return null; }return _vm.onClose.apply(null, arguments)}]}},[(_vm.$slots.icon)?_c('span',{staticClass:"d-chip__icon",attrs:{"data-qa":"dt-chip-icon"}},[_vm._t("icon")],2):(_vm.$slots.avatar)?_c('span',{attrs:{"data-qa":"dt-chip-avatar"}},[_vm._t("avatar")],2):_vm._e(),(_vm.$slots.default)?_c('span',{class:['d-truncate', _vm.contentClass],attrs:{"id":(_vm.id + "-content"),"data-qa":"dt-chip-label"}},[_vm._t("default")],2):_vm._e(),(!_vm.hideClose)?_c('span',{staticClass:"d-chip-btn-holder"}):_vm._e(),_c('span',{ref:"closeBtnContainer",staticClass:"d-chip-btn-container"},[(!_vm.hideClose)?_c('dt-button',_vm._b({attrs:{"data-qa":"dt-chip-close","circle":"","importance":"clear","aria-label":_vm.closeButtonProps.ariaLabel},on:{"click":function($event){return _vm.$emit('close')}}},'dt-button',_vm.closeButtonProps,false),[_c('icon-close')],1):_vm._e()],1)])}
+var chipvue_type_template_id_4d7bb584_staticRenderFns = []
+
+
+;// CONCATENATED MODULE: ./components/chip/chip_constants.js
+const CHIP_SIZE_MODIFIERS = {
+  xs: 'd-chip--xs',
+  sm: 'd-chip--sm',
+  md: ''
+};
+/* harmony default export */ const chip_constants = ({
+  CHIP_SIZE_MODIFIERS
+});
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-80[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/chip/chip.vue?vue&type=script&lang=js&
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+
+
+
+/* harmony default export */ const chipvue_type_script_lang_js_ = ({
+  name: 'DtChip',
+  components: {
+    IconClose: IconClose,
+    DtButton: button_button
+  },
+  props: {
+    /**
+     * A set of props to be passed into the modal's close button. Requires an 'ariaLabel' property.
+     */
+    closeButtonProps: {
+      type: Object,
+      validator: props => {
+        return !!props.ariaLabel;
+      }
+    },
+
+    /**
+     * Hides the close button on the chip
+     */
+    hideClose: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * The size of the chip.
+     * @values xs, sm, md
+     * @see https://dialpad.design/components/chip
+     */
+    size: {
+      type: String,
+      default: 'md',
+      validator: s => Object.keys(CHIP_SIZE_MODIFIERS).includes(s)
+    },
+
+    /**
+     * The interactivity of the chip.
+     * Makes chip clickable, apply hover/focus/active style, emit keyboard events etc.
+     * @see https://dialpad.design/components/chip
+     */
+    interactive: {
+      type: Boolean,
+      default: true
+    },
+
+    /**
+     * Id to use for the dialog's aria-labelledby.
+     */
+    id: {
+      type: String,
+      default: function () {
+        return getUniqueString();
+      }
+    },
+
+    /**
+     * 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: ''
+    }
+  },
+  emits: ['click', 'close'],
+
+  data() {
+    return {
+      isActive: false
+    };
+  },
+
+  computed: {
+    tabIndex() {
+      return this.interactive ? 0 : -1;
+    }
+
+  },
+  methods: {
+    chipClasses() {
+      return ['d-chip', CHIP_SIZE_MODIFIERS[this.size], {
+        'd-chip--interactive': this.interactive,
+        'd-chip--active': this.isActive
+      }];
+    },
+
+    onClose() {
+      if (!this.hideClose) {
+        this.$emit('close');
+      }
+    },
+
+    onClick(event) {
+      // Clicking on the button should not update value of isActive.
+      if (!this.interactive || this.$refs.closeBtnContainer.contains(event.target)) {
+        return;
+      }
+
+      if (event.type === 'mousedown' || event.type === 'keydown') {
+        this.isActive = true;
+      } else {
+        this.isActive = false;
+        this.$emit('click');
+      }
+    }
+
+  }
+});
+;// CONCATENATED MODULE: ./components/chip/chip.vue?vue&type=script&lang=js&
+ /* harmony default export */ const chip_chipvue_type_script_lang_js_ = (chipvue_type_script_lang_js_); 
+;// CONCATENATED MODULE: ./components/chip/chip.vue
+
+
+
+
+
+/* normalize component */
+;
+var chip_component = normalizeComponent(
+  chip_chipvue_type_script_lang_js_,
+  chipvue_type_template_id_4d7bb584_render,
+  chipvue_type_template_id_4d7bb584_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ const chip = (chip_component.exports);
+;// CONCATENATED MODULE: ./components/chip/index.js
+
+
 ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/select_menu/select_menu.vue?vue&type=template&id=ea91f650&
 var select_menuvue_type_template_id_ea91f650_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('label',[(_vm.$slots.label || _vm.label)?_c('div',_vm._b({class:[
         'd-label',
@@ -16409,6 +16635,7 @@ var top_banner_info_component = normalizeComponent(
 
 
 
+
 
 
  /// Recipes