@dialpad/dialtone-vue 2.72.5 → 2.73.0

package/dist/dialtone-vue.umd.js

@@ -2261,12 +2261,14 @@ __webpack_require__.d(__webpack_exports__, {
   "DtCheckbox": () => (/* reexport */ checkbox_checkbox),
   "DtCheckboxGroup": () => (/* reexport */ checkbox_group),
   "DtChip": () => (/* reexport */ chip),
+  "DtCodeblock": () => (/* reexport */ codeblock),
   "DtCollapsible": () => (/* reexport */ collapsible),
   "DtCombobox": () => (/* reexport */ combobox),
   "DtDropdown": () => (/* reexport */ dropdown),
   "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),
@@ -5417,6 +5419,54 @@ var card_component = normalizeComponent(
 /* harmony default export */ const card = (card_component.exports);
 ;// CONCATENATED MODULE: ./components/card/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/codeblock/codeblock.vue?vue&type=template&id=043e0ff6&
+var codeblockvue_type_template_id_043e0ff6_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('pre',[_vm._v("  "),_c('code',{staticClass:"d-d-block d-bgc-secondary d-ws-pre-wrap d-p8 d-ba d-bc-subtle d-bar8 d-fs-200 d-ff-mono d-lh-400 d-fc-secondary"},[_vm._v(_vm._s(_vm.text))]),_vm._v("\n")])}
+var codeblockvue_type_template_id_043e0ff6_staticRenderFns = []
+
+
+;// 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/codeblock/codeblock.vue?vue&type=script&lang=js&
+//
+//
+//
+//
+//
+//
+//
+//
+//
+/* harmony default export */ const codeblockvue_type_script_lang_js_ = ({
+  name: 'DtCodeblock',
+  props: {
+    text: {
+      type: String,
+      required: true
+    }
+  }
+});
+;// CONCATENATED MODULE: ./components/codeblock/codeblock.vue?vue&type=script&lang=js&
+ /* harmony default export */ const codeblock_codeblockvue_type_script_lang_js_ = (codeblockvue_type_script_lang_js_); 
+;// CONCATENATED MODULE: ./components/codeblock/codeblock.vue
+
+
+
+
+
+/* normalize component */
+;
+var codeblock_component = normalizeComponent(
+  codeblock_codeblockvue_type_script_lang_js_,
+  codeblockvue_type_template_id_043e0ff6_render,
+  codeblockvue_type_template_id_043e0ff6_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ const codeblock = (codeblock_component.exports);
+;// CONCATENATED MODULE: ./components/codeblock/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/combobox/combobox.vue?vue&type=template&id=5e29b120&
 var comboboxvue_type_template_id_5e29b120_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();return _vm.onKeyValidation($event, 'onEscapeKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey||$event.metaKey){ return null; }return _vm.onKeyValidation($event, 'onEnterKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onUpKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onDownKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onHomeKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onEndKey')}]}},[_c('div',{attrs:{"data-qa":"dt-combobox-input-wrapper"}},[_vm._t("input",null,{"inputProps":_vm.inputProps})],2),(_vm.showList)?_c('div',{ref:"listWrapper",attrs:{"data-qa":"dt-combobox-list-wrapper"},on:{"mouseleave":_vm.clearHighlightIndex,"focusout":_vm.clearHighlightIndex,"!mousemove":function($event){return _vm.onMouseHighlight.apply(null, arguments)}}},[(_vm.loading && !_vm.listRenderedOutside)?_c('combobox-loading-list',_vm._b({},'combobox-loading-list',_vm.listProps,false)):(_vm.emptyList && (_vm.emptyStateMessage || _vm.$slots.emptyListItem) && !_vm.listRenderedOutside)?_c('combobox-empty-list',_vm._b({attrs:{"message":_vm.emptyStateMessage,"item-class":_vm.emptyStateClass}},'combobox-empty-list',_vm.listProps,false),[_vm._t("emptyListItem")],2):_vm._t("list",null,{"listProps":_vm.listProps,"opened":_vm.onOpen,"clearHighlightIndex":_vm.clearHighlightIndex})],2):_vm._e()])}
 var comboboxvue_type_template_id_5e29b120_staticRenderFns = []
@@ -8291,13 +8341,13 @@ var collapsible_component = normalizeComponent(
 /* harmony default export */ const collapsible = (collapsible_component.exports);
 ;// CONCATENATED MODULE: ./components/collapsible/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/dropdown/dropdown.vue?vue&type=template&id=359f1c8b&
-var dropdownvue_type_template_id_359f1c8b_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-popover',_vm._g({ref:"popover",attrs:{"content-width":_vm.contentWidth,"open":_vm.open,"placement":_vm.placement,"initial-focus-element":_vm.openedWithKeyboard ? 'first' : 'dialog',"fallback-placements":_vm.fallbackPlacements,"padding":"none","role":"menu","append-to":_vm.appendTo,"modal":_vm.modal,"max-height":_vm.maxHeight,"max-width":_vm.maxWidth,"open-with-arrow-keys":_vm.shouldOpenWithArrowKeys,"open-on-context":_vm.openOnContext},scopedSlots:_vm._u([{key:"anchor",fn:function(ref){
+;// 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/dropdown/dropdown.vue?vue&type=template&id=b22f331a&
+var dropdownvue_type_template_id_b22f331a_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-popover',_vm._g({ref:"popover",attrs:{"content-width":_vm.contentWidth,"open":_vm.open,"placement":_vm.placement,"initial-focus-element":_vm.openedWithKeyboard ? 'first' : 'dialog',"fallback-placements":_vm.fallbackPlacements,"padding":"none","role":"menu","append-to":_vm.appendTo,"modal":_vm.modal,"max-height":_vm.maxHeight,"max-width":_vm.maxWidth,"open-with-arrow-keys":_vm.shouldOpenWithArrowKeys,"open-on-context":_vm.openOnContext,"tether":_vm.tether},scopedSlots:_vm._u([{key:"anchor",fn:function(ref){
 var attrs = ref.attrs;
 return [_vm._t("anchor",null,null,attrs)]}},{key:"content",fn:function(ref){
 var close = ref.close;
 return [_c('ul',{ref:"listWrapper",class:_vm.listClasses,attrs:{"id":_vm.listId,"data-qa":"dt-dropdown-list-wrapper"},on:{"mouseleave":_vm.clearHighlightIndex,"!mousemove":function($event){return _vm.onMouseHighlight.apply(null, arguments)}}},[_vm._t("list",null,{"close":close}),(_vm.showVisuallyHiddenClose)?_c('sr-only-close-button',{attrs:{"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel,"tabindex":_vm.isArrowKeyNav ? -1 : 0},on:{"close":close}}):_vm._e()],2)]}}],null,true)},_vm.dropdownListeners))}
-var dropdownvue_type_template_id_359f1c8b_staticRenderFns = []
+var dropdownvue_type_template_id_b22f331a_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/popover/popover.vue?vue&type=template&id=683dbc64&
@@ -14151,6 +14201,7 @@ const DROPDOWN_PADDING_CLASSES = {
 //
 //
 //
+//
 
 
 
@@ -14332,6 +14383,17 @@ const DROPDOWN_PADDING_CLASSES = {
       validator: appendTo => {
         return POPOVER_APPEND_TO_VALUES.includes(appendTo) || appendTo instanceof HTMLElement;
       }
+    },
+
+    /**
+     * If set to false the dialog will display over top of the anchor when there is insufficient space.
+     * If set to true it will never move from its position relative to the anchor and will clip instead.
+     * See <a href="https://popper.js.org/docs/v2/modifiers/prevent-overflow/#tether" target="_blank">Popper.js docs</a>
+     * @values true, false
+     */
+    tether: {
+      type: Boolean,
+      default: true
     }
   },
   emits: [
@@ -14568,8 +14630,8 @@ var dropdownvue_type_style_index_0_lang_less_ = __webpack_require__(774);
 
 var dropdown_component = normalizeComponent(
   dropdown_dropdownvue_type_script_lang_js_,
-  dropdownvue_type_template_id_359f1c8b_render,
-  dropdownvue_type_template_id_359f1c8b_staticRenderFns,
+  dropdownvue_type_template_id_b22f331a_render,
+  dropdownvue_type_template_id_b22f331a_staticRenderFns,
   false,
   null,
   null,
@@ -14624,8 +14686,236 @@ var dropdown_separator_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/dropdown/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/input/input.vue?vue&type=template&id=5be97b31&
-var inputvue_type_template_id_5be97b31_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"container",staticClass:"base-input",attrs:{"data-qa":"dt-input"}},[_c('label',{staticClass:"base-input__label",attrs:{"aria-details":_vm.$slots.description || _vm.description ? _vm.descriptionKey : undefined,"data-qa":"dt-input-label-wrapper"}},[_vm._t("labelSlot",function(){return [(_vm.labelVisible && _vm.label)?_c('div',{ref:"label",class:[
+;// 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/image_viewer/image_viewer.vue?vue&type=template&id=3214f60f&
+var image_viewervue_type_template_id_3214f60f_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('dt-button',{attrs:{"data-qa":"dt-image-viewer-preview","aria-label":_vm.ariaLabel,"importance":"clear"},on:{"click":_vm.open}},[_c('img',{class:_vm.imageButtonClass,attrs:{"src":_vm.imageSrc,"alt":_vm.imageAlt}})]),(_vm.show)?_c('portal',[_c('div',_vm._g({staticClass:"d-modal",attrs:{"aria-hidden":_vm.isOpen,"data-qa":"dt-modal"},on:{"mouseover":function($event){_vm.showCloseButton = true},"mouseleave":function($event){_vm.showCloseButton = false},"focusin":function($event){_vm.showCloseButton = true},"focusout":function($event){_vm.showCloseButton = false}}},_vm.modalListeners),[_c('div',{staticClass:"d-p0 d-bar0 d-wmx80p d-hmx80p",attrs:{"data-qa":"dt-image-viewer-full","role":"dialog","aria-modal":"true"}},[_c('img',{staticClass:"d-wmx100p d-hmx100p",attrs:{"src":_vm.imageSrc,"alt":_vm.imageAlt}})]),_c('transition',{attrs:{"name":"fade"}},[(_vm.showCloseButton)?_c('dt-button',{ref:"closeImage",staticClass:"d-modal__close",attrs:{"data-qa":"dt-image-viewer-close-btn","circle":"","size":"lg","importance":"clear","kind":"inverted","aria-label":_vm.closeAriaLabel},on:{"click":_vm.close},scopedSlots:_vm._u([{key:"icon",fn:function(){return [_c('dt-icon',{attrs:{"name":"close","size":"400"}})]},proxy:true}],null,false,1709155279)}):_vm._e()],1)],1)]):_vm._e()],1)}
+var image_viewervue_type_template_id_3214f60f_staticRenderFns = []
+
+
+;// 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/image_viewer/image_viewer.vue?vue&type=script&lang=js&
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+
+
+
+
+/* harmony default export */ const image_viewervue_type_script_lang_js_ = ({
+  name: 'DtImageViewer',
+  components: {
+    Portal: Portal,
+    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 { ...this.$listeners,
+        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&
+ /* harmony default export */ const image_viewer_image_viewervue_type_script_lang_js_ = (image_viewervue_type_script_lang_js_); 
+;// CONCATENATED MODULE: ./components/image_viewer/image_viewer.vue
+
+
+
+
+
+/* normalize component */
+;
+var image_viewer_component = normalizeComponent(
+  image_viewer_image_viewervue_type_script_lang_js_,
+  image_viewervue_type_template_id_3214f60f_render,
+  image_viewervue_type_template_id_3214f60f_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ const image_viewer = (image_viewer_component.exports);
+;// CONCATENATED MODULE: ./components/image_viewer/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/input/input.vue?vue&type=template&id=2c334438&
+var inputvue_type_template_id_2c334438_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"container",staticClass:"base-input",attrs:{"data-qa":"dt-input"}},[_c('label',{staticClass:"base-input__label",attrs:{"aria-details":_vm.$slots.description || _vm.description ? _vm.descriptionKey : undefined,"data-qa":"dt-input-label-wrapper"}},[_vm._t("labelSlot",function(){return [(_vm.labelVisible && _vm.label)?_c('div',{ref:"label",class:[
           'base-input__label-text',
           'd-label',
           _vm.labelSizeClasses[_vm.size] ],attrs:{"data-qa":"dt-input-label"}},[_vm._v(" "+_vm._s(_vm.label)+" ")]):_vm._e()]}),(_vm.$slots.description || _vm.description || _vm.shouldValidateLength)?_c('div',{ref:"description",class:[
@@ -14634,7 +14924,7 @@ var inputvue_type_template_id_5be97b31_render = function () {var _vm=this;var _h
         'd-fd-column',
         _vm.descriptionSizeClasses[_vm.size] ],attrs:{"id":_vm.descriptionKey,"data-qa":"dt-input-description"}},[(_vm.$slots.description || _vm.description)?_c('div',[_vm._t("description",function(){return [_vm._v(_vm._s(_vm.description))]})],2):_vm._e(),(_vm.shouldValidateLength)?_c('div',{class:[
           'd-mb2' ],attrs:{"data-qa":"dt-input-length-description"}},[_vm._v(" "+_vm._s(_vm.validationProps.length.description)+" ")]):_vm._e()]):_vm._e(),_c('div',{class:_vm.inputWrapperClasses(),attrs:{"read-only":_vm.disabled}},[(_vm.$slots.leftIcon)?_c('span',{class:_vm.inputIconClasses('left'),attrs:{"data-qa":"dt-input-left-icon-wrapper"},on:{"focusout":_vm.onBlur}},[_vm._t("leftIcon")],2):_vm._e(),(_vm.isTextarea)?_c('textarea',_vm._g(_vm._b({ref:"input",class:_vm.inputClasses(),attrs:{"name":_vm.name,"disabled":_vm.disabled,"maxlength":_vm.shouldLimitMaxLength ? _vm.validationProps.length.max : null,"data-qa":"dt-input-input"},domProps:{"value":_vm.value}},'textarea',_vm.$attrs,false),_vm.inputListeners)):_c('input',_vm._g(_vm._b({ref:"input",class:_vm.inputClasses(),attrs:{"name":_vm.name,"type":_vm.type,"disabled":_vm.disabled,"maxlength":_vm.shouldLimitMaxLength ? _vm.validationProps.length.max : null,"data-qa":"dt-input-input"},domProps:{"value":_vm.value}},'input',_vm.$attrs,false),_vm.inputListeners)),(_vm.$slots.rightIcon)?_c('span',{class:_vm.inputIconClasses('right'),attrs:{"data-qa":"dt-input-right-icon-wrapper"},on:{"focusout":_vm.onBlur}},[_vm._t("rightIcon")],2):_vm._e()])],2),_c('dt-validation-messages',_vm._b({class:_vm.messagesClass,attrs:{"validation-messages":_vm.validationMessages,"show-messages":_vm.showMessages,"data-qa":"dt-input-messages"}},'dt-validation-messages',_vm.messagesChildProps,false))],1)}
-var inputvue_type_template_id_5be97b31_staticRenderFns = []
+var inputvue_type_template_id_2c334438_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/input/input_constants.js
@@ -15431,6 +15721,14 @@ const MessagesMixin = {
       default: null
     },
 
+    /**
+     * Whether the input will continue to display a warning validation message even if the input has lost focus.
+     */
+    retainWarning: {
+      type: Boolean,
+      default: false
+    },
+
     /**
      * Validation for the input. Supports maximum length validation with the structure:
      * `{ "length": {"description": string, "max": number, "warn": number, "message": string,
@@ -15615,7 +15913,7 @@ const MessagesMixin = {
     inputLengthState() {
       if (this.inputLength < this.validationProps.length.warn) {
         return null;
-      } else if (this.inputLength < this.validationProps.length.max) {
+      } else if (this.inputLength <= this.validationProps.length.max) {
         return this.validationProps.length.warn ? VALIDATION_MESSAGE_TYPES.WARNING : null;
       } else {
         return VALIDATION_MESSAGE_TYPES.ERROR;
@@ -15630,8 +15928,9 @@ const MessagesMixin = {
       return this.shouldValidateLength && this.validationProps.length.limitMaxLength;
     },
 
+    // eslint-disable-next-line complexity
     showLengthLimitValidation() {
-      return this.shouldValidateLength && this.inputLengthState !== null && this.validationProps.length.message && (this.isInputFocused || this.isInvalid);
+      return this.shouldValidateLength && this.inputLengthState !== null && this.validationProps.length.message && (this.retainWarning || this.isInputFocused || this.isInvalid);
     },
 
     sizeModifierClass() {
@@ -15787,8 +16086,8 @@ const MessagesMixin = {
 ;
 var input_component = normalizeComponent(
   input_inputvue_type_script_lang_js_,
-  inputvue_type_template_id_5be97b31_render,
-  inputvue_type_template_id_5be97b31_staticRenderFns,
+  inputvue_type_template_id_2c334438_render,
+  inputvue_type_template_id_2c334438_staticRenderFns,
   false,
   null,
   null,
@@ -24554,9 +24853,9 @@ var general_row_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./recipes/leftbar/general_row/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!./recipes/leftbar/group_row/group_row.vue?vue&type=template&id=3222d6a1&
-var group_rowvue_type_template_id_3222d6a1_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-recipe-general-row',_vm._g(_vm._b({attrs:{"description":_vm.names,"aria-label":(_vm.groupCountText + " " + _vm.names),"unread-count":_vm.unreadCount,"has-unreads":_vm.hasUnreads,"unread-count-tooltip":_vm.unreadCountTooltip,"selected":_vm.selected,"is-typing":_vm.isTyping},scopedSlots:_vm._u([{key:"left",fn:function(){return [_c('dt-avatar',{attrs:{"initials":_vm.avatarInitials,"seed":_vm.avatarSeed,"group":_vm.groupCount}},[(_vm.avatarSrc)?_c('img',{attrs:{"data-qa":"dt-avatar-image","src":_vm.avatarSrc,"alt":""}}):[_vm._v(" "+_vm._s(_vm.avatarInitials)+" ")]],2)]},proxy:true}])},'dt-recipe-general-row',_vm.$attrs,false),_vm.$listeners))}
-var group_rowvue_type_template_id_3222d6a1_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!./recipes/leftbar/group_row/group_row.vue?vue&type=template&id=d27bba34&
+var group_rowvue_type_template_id_d27bba34_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-recipe-general-row',_vm._g(_vm._b({attrs:{"description":_vm.names,"aria-label":(_vm.groupCountText + " " + _vm.names),"unread-count":_vm.unreadCount,"has-unreads":_vm.hasUnreads,"unread-count-tooltip":_vm.unreadCountTooltip,"selected":_vm.selected,"is-typing":_vm.isTyping},scopedSlots:_vm._u([{key:"left",fn:function(){return [_c('dt-icon',{attrs:{"name":"users","size":"300"}})]},proxy:true}])},'dt-recipe-general-row',_vm.$attrs,false),_vm.$listeners))}
+var group_rowvue_type_template_id_d27bba34_staticRenderFns = []
 
 
 ;// 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!./recipes/leftbar/group_row/group_row.vue?vue&type=script&lang=js&
@@ -24581,65 +24880,16 @@ var group_rowvue_type_template_id_3222d6a1_staticRenderFns = []
 //
 //
 //
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
 
 
 /* harmony default export */ const group_rowvue_type_script_lang_js_ = ({
   name: 'DtRecipeGroupRow',
   components: {
-    DtAvatar: avatar,
+    DtIcon: icon,
     DtRecipeGeneralRow: general_row
   },
   inheritAttrs: false,
   props: {
-    /**
-     * Optional avatar image url.
-     * if provided, it's also required to provide a value in the `avatarInitials` prop to use
-     * in the alt attribute of the avatar.
-     */
-    avatarSrc: {
-      type: String,
-      default: ''
-    },
-
-    /**
-     * Initials to display on the avatar if avatarSrc is not provided or
-     * alt attr if avatarSrc is provided.
-     */
-    avatarInitials: {
-      type: String,
-      default: '',
-      required: true
-    },
-
-    /**
-     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.
-     */
-    avatarSeed: {
-      type: String,
-      default: null
-    },
-
-    /**
-     * Number displayed in avatar to count group members
-     */
-    groupCount: {
-      type: Number,
-      required: true
-    },
-
     /**
      * Screen reader will read out the number of users in the group using this text. Ex: "2 users"
      */
@@ -24718,8 +24968,8 @@ var group_rowvue_type_template_id_3222d6a1_staticRenderFns = []
 ;
 var group_row_component = normalizeComponent(
   group_row_group_rowvue_type_script_lang_js_,
-  group_rowvue_type_template_id_3222d6a1_render,
-  group_rowvue_type_template_id_3222d6a1_staticRenderFns,
+  group_rowvue_type_template_id_d27bba34_render,
+  group_rowvue_type_template_id_d27bba34_staticRenderFns,
   false,
   null,
   null,
@@ -25049,6 +25299,8 @@ var contact_row_component = normalizeComponent(
 
 
 
+
+