@dialpad/dialtone-vue 2.8.0 → 2.9.1

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),
@@ -12658,12 +12660,12 @@ var list_section_component = normalizeComponent(
 /* harmony default export */ const list_section = (list_section_component.exports);
 ;// CONCATENATED MODULE: ./components/list_section/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/list_item/list_item.vue?vue&type=template&id=3925f490&
-var list_itemvue_type_template_id_3925f490_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.elementType,{tag:"component",class:['dt-list-item d-ls-none focus-visible', {
+;// 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/list_item/list_item.vue?vue&type=template&id=78ac4fcc&
+var list_itemvue_type_template_id_78ac4fcc_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.elementType,_vm._g({tag:"component",class:['dt-list-item d-ls-none focus-visible', {
     'dt-list-item--focusable': _vm.isFocusable,
     'dt-list-item--highlighted': _vm.isHighlighted,
-  }],attrs:{"id":_vm.id,"tabindex":_vm.isFocusable ? 0 : -1,"role":_vm.role,"aria-selected":_vm.isHighlighted},on:{"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)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"space",32,$event.key,[" ","Spacebar"])){ return null; }return _vm.onClick.apply(null, arguments)}],"mousemove":_vm.onMouseHover,"mouseleave":_vm.onMouseLeave,"click":_vm.onClick}},[(_vm.listItemType)?_c(_vm.listItemType,{tag:"component",scopedSlots:_vm._u([_vm._l((_vm.$slots),function(_,slotName){return {key:slotName,fn:function(){return [_vm._t(slotName)]},proxy:true}})],null,true)}):_vm._t("default")],2)}
-var list_itemvue_type_template_id_3925f490_staticRenderFns = []
+  }],attrs:{"id":_vm.id,"tabindex":_vm.isFocusable ? 0 : -1,"role":_vm.role,"aria-selected":_vm.isHighlighted}},_vm.listItemListeners),[(_vm.listItemType)?_c(_vm.listItemType,{tag:"component",scopedSlots:_vm._u([_vm._l((_vm.$slots),function(_,slotName){return {key:slotName,fn:function(){return [_vm._t(slotName)]},proxy:true}})],null,true)}):_vm._t("default")],2)}
+var list_itemvue_type_template_id_78ac4fcc_staticRenderFns = []
 
 
 ;// 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/list_item/default_list_item.vue?vue&type=template&id=4c89d4ed&
@@ -12775,10 +12777,6 @@ var default_list_item_component = normalizeComponent(
 //
 //
 //
-//
-//
-//
-//
 
 
 
@@ -12846,7 +12844,7 @@ var default_list_item_component = normalizeComponent(
       validator: t => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t)
     }
   },
-  emits: ['click'],
+  emits: ['click', 'keydown', 'mousemove', 'mouseleave'],
 
   data() {
     return {
@@ -12866,6 +12864,26 @@ var default_list_item_component = normalizeComponent(
       }
     },
 
+    listItemListeners() {
+      return { ...this.$listeners,
+        keydown: event => {
+          if (['enter', 'space'].includes(event.code.toLowerCase())) {
+            this.onClick(event);
+          }
+
+          this.$emit('keydown', event);
+        },
+        mousemove: event => {
+          this.onMouseHover(event);
+          this.$emit('mousemove', event);
+        },
+        mouseleave: event => {
+          this.onMouseLeave(event);
+          this.$emit('mouseleave', event);
+        }
+      };
+    },
+
     /**
      * For keyboard navigation, whether or not this item is currently highlighted.
      * An injected highlightId will override the default mouseover highlight.
@@ -12892,8 +12910,8 @@ var default_list_item_component = normalizeComponent(
 
   },
   methods: {
-    onClick() {
-      this.$emit('click');
+    onClick(e) {
+      this.$emit('click', e);
     },
 
     onMouseHover() {
@@ -12923,8 +12941,8 @@ var list_itemvue_type_style_index_0_lang_less_ = __webpack_require__(285);
 
 var list_item_component = normalizeComponent(
   list_item_list_itemvue_type_script_lang_js_,
-  list_itemvue_type_template_id_3925f490_render,
-  list_itemvue_type_template_id_3925f490_staticRenderFns,
+  list_itemvue_type_template_id_78ac4fcc_render,
+  list_itemvue_type_template_id_78ac4fcc_staticRenderFns,
   false,
   null,
   null,
@@ -14278,6 +14296,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',
@@ -14653,12 +14895,12 @@ var select_menu_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/select_menu/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/toast/toast.vue?vue&type=template&id=a5474c4e&
-var toastvue_type_template_id_a5474c4e_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('aside',{staticClass:"d-toast-wrapper"},[(!_vm.hidden)?_c('div',{class:[
-      'd-toast',
-      _vm.kindClass,
-      { 'd-toast--important': _vm.important } ],attrs:{"data-qa":"dt-toast","aria-hidden":_vm.hidden.toString()}},[_c('div',{staticClass:"d-toast__dialog"},[_c('dt-notice-icon',_vm._g({attrs:{"kind":_vm.kind}},_vm.$listeners),[_vm._t("icon")],2),_c('dt-notice-content',_vm._g({attrs:{"title-id":_vm.titleId,"content-id":_vm.contentId,"title":_vm.title,"role":_vm.role},scopedSlots:_vm._u([{key:"titleOverride",fn:function(){return [_vm._t("titleOverride")]},proxy:true}],null,true)},_vm.$listeners),[_vm._t("default",function(){return [_vm._v(" "+_vm._s(_vm.message)+" ")]})],2),_c('dt-notice-action',_vm._g({attrs:{"hide-close":_vm.hideClose,"close-button-props":_vm.closeButtonProps}},_vm.$listeners),[_vm._t("action")],2)],1)]):_vm._e()])}
-var toastvue_type_template_id_a5474c4e_staticRenderFns = []
+;// 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/toast/toast.vue?vue&type=template&id=6db045bb&
+var toastvue_type_template_id_6db045bb_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (!_vm.hidden)?_c('div',{class:[
+    'd-toast',
+    _vm.kindClass,
+    { 'd-toast--important': _vm.important } ],attrs:{"data-qa":"dt-toast","aria-hidden":_vm.hidden.toString()}},[_c('div',{staticClass:"d-toast__dialog"},[_c('dt-notice-icon',_vm._g({attrs:{"kind":_vm.kind}},_vm.$listeners),[_vm._t("icon")],2),_c('dt-notice-content',_vm._g({attrs:{"title-id":_vm.titleId,"content-id":_vm.contentId,"title":_vm.title,"role":_vm.role},scopedSlots:_vm._u([{key:"titleOverride",fn:function(){return [_vm._t("titleOverride")]},proxy:true}],null,true)},_vm.$listeners),[_vm._t("default",function(){return [_vm._v(" "+_vm._s(_vm.message)+" ")]})],2),_c('dt-notice-action',_vm._g({attrs:{"hide-close":_vm.hideClose,"close-button-props":_vm.closeButtonProps}},_vm.$listeners),[_vm._t("action")],2)],1)]):_vm._e()}
+var toastvue_type_template_id_6db045bb_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/toast/toast_constants.js
@@ -14715,8 +14957,6 @@ const TOAST_ROLES = ['status', 'alert'];
 //
 //
 //
-//
-//
 
 
 
@@ -14889,8 +15129,8 @@ const TOAST_ROLES = ['status', 'alert'];
 ;
 var toast_component = normalizeComponent(
   toast_toastvue_type_script_lang_js_,
-  toastvue_type_template_id_a5474c4e_render,
-  toastvue_type_template_id_a5474c4e_staticRenderFns,
+  toastvue_type_template_id_6db045bb_render,
+  toastvue_type_template_id_6db045bb_staticRenderFns,
   false,
   null,
   null,
@@ -16409,6 +16649,7 @@ var top_banner_info_component = normalizeComponent(
 
 
 
+
 
 
  /// Recipes