q2-tecton-elements 1.13.0-alpha.0 → 1.13.2

package/dist/collection/components/q2-radio-group/index.js

@@ -1,4 +1,4 @@
-import { Component, Prop, Element, h, Listen, Event, Watch } from '@stencil/core';
+import { Component, Prop, Element, h, Listen, Event, Watch, Fragment, } from '@stencil/core';
 import { createGuid, isEventFromElement, loc, overrideFocus } from 'src/utils';
 export class Q2RadioGroup {
   constructor() {
@@ -7,13 +7,16 @@ export class Q2RadioGroup {
     this.hasError = false;
     this.id = `radio-group-${createGuid()}`;
     this.onMutationObserved = () => {
-      this.valueUpdated();
+      this.valueUpdated(this.value);
       this.nameUpdated();
       this.disabledUpdated();
+      this.readonlyUpdated();
       this.tileLayoutUpdated();
     };
     this.onInnerRadioChange = (event) => {
       event.stopImmediatePropagation();
+      if (this.readonly)
+        return;
       this.change.emit({ value: event.detail.value });
     };
   }
@@ -21,17 +24,19 @@ export class Q2RadioGroup {
     return Array.from(this.hostElement.querySelectorAll('q2-radio'));
   }
   /////// LIFECYCLE HOOK ///////
+  componentWillLoad() {
+    this.onMutationObserved();
+  }
   componentDidLoad() {
     const observer = new MutationObserver(this.onMutationObserved);
     observer.observe(this.hostElement, { childList: true });
     this.mutationObserver = observer;
-    this.onMutationObserved();
     overrideFocus(this.hostElement);
   }
   /////// OBSERVERS ///////
-  valueUpdated() {
+  valueUpdated(newVal) {
     this.radioElements.forEach(radio => {
-      radio.checked = this.value === radio.value;
+      radio.checked = newVal === radio.value;
     });
   }
   nameUpdated() {
@@ -44,6 +49,10 @@ export class Q2RadioGroup {
       radio.groupDisabled = this.disabled;
     });
   }
+  readonlyUpdated() {
+    const readonly = this.readonly;
+    this.radioElements.forEach(radio => (radio.groupReadonly = readonly));
+  }
   tileLayoutUpdated() {
     this.radioElements.forEach(radio => {
       radio.groupTileLayout = this.tilelayout;
@@ -59,19 +68,22 @@ export class Q2RadioGroup {
   delegateFocus(event) {
     if (!isEventFromElement(event, this.hostElement))
       return;
-    const radio = this.hostElement.querySelector('q2-radio[checked]') ||
-      this.hostElement.querySelector('q2-radio');
+    const radio = this.hostElement.querySelector('q2-radio[checked]') || this.hostElement.querySelector('q2-radio');
     radio === null || radio === void 0 ? void 0 : radio.dispatchEvent(new FocusEvent('focus'));
   }
   keydownHandler(event) {
     const currentValue = event.target.getAttribute('value') || this.value;
     let index = this.radioElements.findIndex(el => el === event.target || el.getAttribute('value') === currentValue);
     let sign = 0;
-    if (['ArrowLeft', 'Left', 'ArrowUp', 'Up'].includes(event.key)) {
-      sign = -1;
-    }
-    else if (['ArrowRight', 'Right', 'ArrowDown', 'Down'].includes(event.key)) {
-      sign = 1;
+    switch (event.key) {
+      case 'ArrowLeft':
+      case 'ArrowUp':
+        sign = -1;
+        break;
+      case 'ArrowRight':
+      case 'ArrowDown':
+        sign = 1;
+        break;
     }
     if (index === -1 || sign === 0) {
       return;
@@ -79,28 +91,38 @@ export class Q2RadioGroup {
     index += sign;
     index = sign < 0 ? Math.max(0, index) : Math.min(this.radioElements.length - 1, index);
     event.preventDefault();
-    this.value = this.radioElements[index].value;
+    if (!this.readonly) {
+      this.value = this.radioElements[index].value;
+    }
     this.radioElements[index].dispatchEvent(new FocusEvent('focus'));
   }
+  labelDOM() {
+    const { label, optional, readonly } = this;
+    let helpText = '';
+    if (readonly) {
+      helpText = h("span", { class: "optional-tag" }, loc('tecton.element.input.readonly'));
+    }
+    else if (optional) {
+      helpText = h("span", { class: "optional-tag" }, loc('tecton.element.input.optional'));
+    }
+    return (h(Fragment, null,
+      label && loc(label),
+      !!helpText && h("span", { class: "optional-tag" }, helpText)));
+  }
   render() {
+    const showLabel = this.label || this.optional || this.readonly;
     return (h("div", null,
-      this.label || this.optional ? (h("div", { class: "group-legend" },
-        this.label && loc(this.label),
-        this.optional ? (h("span", { class: "optional-tag" }, loc('tecton.element.input.optional'))) : (''))) : (''),
-      h("fieldset", { class: `q2-radio-fieldset ${this.hasError ? 'has-error' : ''}`, onChange: this.onInnerRadioChange, "aria-required": `${!this.optional}` },
-        this.label || this.optional ? (h("legend", { class: "sr-only" },
-          this.label && loc(this.label),
-          this.optional ? (h("span", { class: "optional-tag" }, loc('tecton.element.input.optional'))) : (''))) : (''),
-        this.hasError ? (h("div", { class: `error-icon-container ${this.label || this.optional ? '' : 'no-label'}` },
+      showLabel && h("div", { class: "group-legend" }, this.labelDOM()),
+      h("fieldset", { class: `q2-radio-fieldset ${this.hasError ? 'has-error' : ''}`, onChange: this.onInnerRadioChange, "aria-required": `${!this.optional}`, "aria-readonly": `${this.readonly}` },
+        showLabel && h("legend", { class: "sr-only" }, this.labelDOM()),
+        this.hasError ? (h("div", { class: `error-icon-container ${!showLabel && 'no-label'}` },
           h("q2-icon", { class: "h(4) w(4) mrg-b(2)", type: "error" }))) : (''),
         this.inputDom())));
   }
   inputDom() {
     if (this.tilelayout) {
       const { tileAlignment } = this;
-      const alignment = ['left', 'center', 'right'].includes(tileAlignment)
-        ? tileAlignment
-        : 'center';
+      const alignment = ['left', 'center', 'right'].includes(tileAlignment) ? tileAlignment : 'center';
       return (h("div", { class: `flexed ${alignment}` },
         h("slot", null)));
     }
@@ -203,6 +225,23 @@ export class Q2RadioGroup {
       "attribute": "optional",
       "reflect": true
     },
+    "readonly": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "readonly",
+      "reflect": true
+    },
     "tilelayout": {
       "type": "boolean",
       "mutable": false,
@@ -283,6 +322,9 @@ export class Q2RadioGroup {
     }, {
       "propName": "disabled",
       "methodName": "disabledUpdated"
+    }, {
+      "propName": "readonly",
+      "methodName": "readonlyUpdated"
     }, {
       "propName": "tilelayout",
       "methodName": "tileLayoutUpdated"

package/dist/collection/components/q2-section/index.js

@@ -1,4 +1,4 @@
-import { Component, Prop, Element, Listen, State, Watch, h, Event } from '@stencil/core';
+import { Component, Prop, Element, Listen, State, Watch, h, Event, } from '@stencil/core';
 import { createGuid, isEventFromElement, loc, overrideFocus } from 'src/utils';
 export class Q2Section {
   constructor() {
@@ -11,7 +11,7 @@ export class Q2Section {
     this.onHeaderClick = () => {
       this.collapsible &&
         this.change.emit({
-          expanded: !this.expanded
+          expanded: !this.expanded,
         });
     };
     this.onAnimationStart = () => {
@@ -79,9 +79,7 @@ export class Q2Section {
     };
   }
   resizeIframe() {
-    return (window.TectonElements &&
-      window.TectonElements.resizeIframe &&
-      window.TectonElements.resizeIframe());
+    return window.TectonElements && window.TectonElements.resizeIframe && window.TectonElements.resizeIframe();
   }
   componentWillLoad() {
     this.onHeaderSlotChange();
@@ -155,10 +153,10 @@ export class Q2Section {
     return (h("section", { class: this.wrapperClasses },
       h("div", { class: "q2-section-header" },
         h("div", { class: "q2-section-header-content", id: this.titleId, onClick: this.onHeaderClick },
-          !this.hasYieldedHeader && !!this.label ? (h("h2", { class: "title" }, loc(this.label))) : (''),
+          !this.hasYieldedHeader && !!this.label ? h("h2", { class: "title" }, loc(this.label)) : '',
           h("div", { class: "q2-section-header-slot-wrapper" },
             h("slot", { name: "q2-section-header" }))),
-        this.collapsible && !this.noCollapseIcon ? (h("q2-btn", { class: `q2-section-content-toggle ${this.expanded ? 'expanded' : 'collapsed'}`, label: this.label, ariaExpanded: !!this.expanded, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick },
+        this.collapsible && !this.noCollapseIcon ? (h("q2-btn", { class: `q2-section-content-toggle ${this.expanded ? 'expanded' : 'collapsed'}`, label: this.label, ariaExpanded: `${!!this.expanded}`, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick },
           h("q2-icon", { type: "chevron-up", class: "toggle-icon" }))) : ('')),
       h("div", { class: "q2-section-content-wrapper", id: this.contentId, "aria-labelledby": this.titleId, role: "region", onAnimationStart: this.onAnimationStart, onAnimationEnd: this.onAnimationEnd },
         h("div", { class: "q2-section-content", tabindex: "-1" },

package/dist/collection/components/q2-select/index.js

@@ -1,9 +1,10 @@
-import { Component, Prop, Element, h, Listen, State, Event, Watch } from '@stencil/core';
+import { Component, Prop, Element, h, Listen, State, Event, Watch, } from '@stencil/core';
 import { createGuid, handleAriaLabel, isEventFromElement, loc, overrideFocus, setPopProperties } from 'src/utils';
 export class Q2Select {
   constructor() {
     this.selectedOptions = [];
     this.disabled = false;
+    this.readonly = false;
     this.multiple = false;
     this.minRows = 3;
     this.searchable = false;
@@ -11,12 +12,13 @@ export class Q2Select {
     this.optional = false;
     this.dropdownOpen = false;
     this.onlyShowingSelected = false;
+    this.searchText = '';
     this.hasCustomDisplay = false;
     this.inputFocused = false;
     this.scheduledAfterRender = [];
     this.keyStore = {
       queue: [],
-      lastPressedAt: new Date()
+      lastPressedAt: new Date(),
     };
     this.guid = createGuid();
     this.onMutationObserved = () => {
@@ -61,9 +63,7 @@ export class Q2Select {
         return list.find(v => {
           return (!v.element.disabled &&
             v.element.display &&
-            v.element.display
-              .replace(/\s/g, '')
-              .match(new RegExp(`^${this.keyStore.queue.join('')}`, 'i')));
+            v.element.display.replace(/\s/g, '').match(new RegExp(`^${this.keyStore.queue.join('')}`, 'i')));
         });
       };
       const setFocus = ({ element, index }) => {
@@ -93,13 +93,13 @@ export class Q2Select {
         return;
       this.closeDropdown();
     };
+    /* tslint:disable:cyclomatic-complexity */
     this.dropdownKeydownHandler = (event) => {
       event.stopPropagation();
       const { activeIndex, searchable, optionElements, multiSelectHeader } = this;
       const { key, shiftKey } = event;
-      if (multiSelectHeader &&
-        multiSelectHeader.contains(event.target) &&
-        [' ', 'Enter'].includes(key))
+      if (this.readonly ||
+        (multiSelectHeader && multiSelectHeader.contains(event.target) && [' ', 'Enter'].includes(key)))
         return;
       switch (key) {
         case ' ':
@@ -230,10 +230,17 @@ export class Q2Select {
     };
     this.inputInputHandler = (event) => {
       event.stopPropagation();
+      const inputValue = this.inputField.value;
+      const eventValue = event.detail.value;
+      const didChangeText = inputValue !== eventValue;
+      const shouldClearValue = !!this.value && didChangeText;
+      if (shouldClearValue) {
+        this.selectOption('');
+      }
       if (!this.dropdownOpen)
         this.openDropdownWithoutActiveElement();
-      this.searchText = event.detail.value;
-      this.input.emit({ query: event.detail.value });
+      this.searchText = eventValue;
+      this.input.emit({ query: eventValue });
     };
     this.inputFocusHandler = () => {
       this.inputFocused = true;
@@ -274,9 +281,7 @@ export class Q2Select {
     };
   }
   resizeIframe() {
-    return (window.TectonElements &&
-      window.TectonElements.resizeIframe &&
-      window.TectonElements.resizeIframe());
+    return window.TectonElements && window.TectonElements.resizeIframe && window.TectonElements.resizeIframe();
   }
   getDefaultActiveIndex() {
     const firstSelected = this.optionElements.findIndex(element => element.selected);
@@ -337,9 +342,7 @@ export class Q2Select {
     const selectedOption = this.optionElements.find(option => {
       return this.value === option.value;
     });
-    return ((selectedOption && selectedOption.display && loc(selectedOption.display)) ||
-      this.value ||
-      '');
+    return (selectedOption && selectedOption.display && loc(selectedOption.display)) || this.value || '';
   }
   get minPopHeight() {
     const { minRows } = this;
@@ -356,9 +359,7 @@ export class Q2Select {
       // when closed they display the same as non searchable select (what is selected)
       return this.searchText || '';
     }
-    return this.multiple
-      ? this.calculateMultiSelectSelectedDisplay()
-      : this.calculateSingleSelectSelectedDisplay();
+    return this.multiple ? this.calculateMultiSelectSelectedDisplay() : this.calculateSingleSelectSelectedDisplay();
   }
   get selectedOptionsCount() {
     return this.selectedOptions.length;
@@ -396,7 +397,7 @@ export class Q2Select {
       const isSelected = this.selectedOptions.includes(value);
       if (isSelected) {
         this.change.emit({
-          selectedOptions: this.selectedOptions.filter(selectedValue => selectedValue !== value)
+          selectedOptions: this.selectedOptions.filter(selectedValue => selectedValue !== value),
         });
       }
       else {
@@ -415,12 +416,16 @@ export class Q2Select {
     activeOption === null || activeOption === void 0 ? void 0 : activeOption.scrollIntoView({ block: 'nearest' });
   }
   openDropdownWithoutActiveElement() {
+    if (this.readonly)
+      return;
     this.activeIndex = undefined;
     this.setActiveOption();
     this.dropdownOpen = true;
     this.scheduledAfterRender.push(this.resizeIframe);
   }
   openDropdownWithActiveElement(activeIndex) {
+    if (this.readonly)
+      return;
     this.activeIndex = activeIndex;
     this.dropdownOpen = true;
     this.setActiveOption();
@@ -530,6 +535,8 @@ export class Q2Select {
     });
   }
   onHostElementChange(event) {
+    if (this.readonly)
+      return;
     if (event.target === this.hostElement && !this.hostElement.onchange) {
       if (this.multiple) {
         this.selectedOptions = event.detail.selectedOptions;
@@ -550,14 +557,13 @@ export class Q2Select {
         }
         else {
           const { display = '', innerText = '' } = option;
-          const matched = display.toLowerCase().includes(query) ||
-            innerText.toLowerCase().includes(query);
+          const matched = display.toLowerCase().includes(query) || innerText.toLowerCase().includes(query);
           option.hidden = !matched;
           if (matched)
             matchedCount++;
         }
       });
-      let statusMessageLocString = query
+      const statusMessageLocString = query
         ? 'tecton.element.select.searchable.results'
         : 'tecton.element.select.allOptions';
       const count = query ? matchedCount : options.length;
@@ -577,12 +583,13 @@ export class Q2Select {
     }, 1000);
   }
   clickHandler(event) {
-    const target = event.target;
-    if (target.localName !== 'q2-option' || target.disabled) {
+    const selected = event.target.closest('q2-option');
+    if (!selected || (selected.hasAttribute('disabled') && selected.getAttribute('disabled') !== 'false')) {
       return;
     }
-    this.selectOption(target.value, true);
+    this.selectOption(selected.getAttribute('value'), true);
   }
+  /* tslint:enable:cyclomatic-complexity */
   keydownHandler(event) {
     this.inputKeydownHandler(event);
   }
@@ -593,7 +600,7 @@ export class Q2Select {
           this.errors.length > 0 &&
           this.errors.map(error => loc(error))) ||
           (this.invalid && ['tecton.element.select.invalid']) ||
-          [], disabled: this.disabled, optional: this.optional, hideLabel: this.hideLabel, ariaExpanded: this.dropdownOpen, ariaOwns: "dropdown", ariaHaspopup: "listbox", role: this.searchable ? 'combobox' : null, pseudo: !this.searchable, "test-id": "toggleDropdown", "hide-messages": true, iconRight: "chevron-down", onClick: this.inputClickHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeydownHandler, onFocus: this.inputFocusHandler, onBlur: this.inputBlurHandler, onChange: this.inputChangeHandler }),
+          [], disabled: this.disabled, optional: this.optional, readonly: this.readonly, hideLabel: this.hideLabel, ariaExpanded: `${!!this.dropdownOpen}`, ariaOwns: "dropdown", ariaHaspopup: "listbox", role: this.searchable ? 'combobox' : null, pseudo: !this.searchable, "test-id": "toggleDropdown", "hide-messages": true, iconRight: "chevron-down", onClick: this.inputClickHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeydownHandler, onFocus: this.inputFocusHandler, onBlur: this.inputBlurHandler, onChange: this.inputChangeHandler }),
       h("div", { class: "custom-display-content", hidden: !this.hasCustomDisplay || !!this.searchText, onClick: this.onCustomDisplayClick },
         h("slot", { name: "q2-select-display" })),
       this.optionsDropdown()));
@@ -609,9 +616,7 @@ export class Q2Select {
     return (h("div", { class: "multi-select-header", ref: el => (this.multiSelectHeader = el) },
       loc('tecton.element.select.multiHeader.showing'),
       h("q2-btn", { class: `option-toggle show-all-options${this.onlyShowingSelected ? '' : ' selected'}`, badge: true, "aria-selected": !this.onlyShowingSelected || undefined, "test-id": "allOptionsButton", onClick: this.showAllOptions, label: loc('tecton.element.select.multiHeader.allAriaLabel'), "hide-label": true }, loc('tecton.element.select.multiHeader.all')),
-      h("q2-btn", { class: `option-toggle show-selected-options${this.onlyShowingSelected ? ' selected' : ''}`, "aria-selected": this.onlyShowingSelected || undefined, disabled: this.selectedOptions.length === 0, badge: true, "test-id": "selectedOptionsButton", onClick: this.showSelectedOptions, label: loc('tecton.element.select.multiHeader.selectedAriaLabel', [
-          this.selectedOptionsCount
-        ]), "hide-label": true }, loc('tecton.element.select.multiHeader.selected', [this.selectedOptionsCount]))));
+      h("q2-btn", { class: `option-toggle show-selected-options${this.onlyShowingSelected ? ' selected' : ''}`, "aria-selected": this.onlyShowingSelected || undefined, disabled: this.selectedOptions.length === 0, badge: true, "test-id": "selectedOptionsButton", onClick: this.showSelectedOptions, label: loc('tecton.element.select.multiHeader.selectedAriaLabel', [this.selectedOptionsCount]), "hide-label": true }, loc('tecton.element.select.multiHeader.selected', [this.selectedOptionsCount]))));
   }
   static get is() { return "q2-select"; }
   static get encapsulation() { return "shadow"; }
@@ -726,6 +731,24 @@ export class Q2Select {
       "reflect": true,
       "defaultValue": "false"
     },
+    "readonly": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "readonly",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "invalid": {
       "type": "boolean",
       "mutable": false,

package/dist/collection/components/q2-stepper/index.js

@@ -1,4 +1,4 @@
-import { Component, Prop, h, Element, State, Watch, Listen, Event, Fragment } from '@stencil/core';
+import { Component, Prop, h, Element, State, Watch, Listen, Event, Fragment, } from '@stencil/core';
 import { loc, addSmoothScrollPolyfill, overrideFocus, isEventFromElement } from 'src/utils';
 addSmoothScrollPolyfill();
 export class Q2Stepper {
@@ -17,7 +17,7 @@ export class Q2Stepper {
       const scrollAmount = Math.floor(this.listElement.clientWidth / 2);
       this.listElement.scrollBy({
         left: direction === 'left' ? -scrollAmount : scrollAmount,
-        behavior: 'smooth'
+        behavior: 'smooth',
       });
     };
     this.onStepClick = (event, selectedStep) => {
@@ -29,7 +29,7 @@ export class Q2Stepper {
         selectedStep,
         lastEnabledStep,
         currentStep,
-        stepCount
+        stepCount,
       });
     };
     this.onStepKeyDown = (event, stepNumber) => {
@@ -100,9 +100,7 @@ export class Q2Stepper {
   ////////// HOST EVENTS ////////
   defaultChangeHandler(event) {
     const { hostElement } = this;
-    if (event.target === hostElement &&
-      !hostElement.getAttribute('onchange') &&
-      !!event.detail) {
+    if (event.target === hostElement && !hostElement.getAttribute('onchange') && !!event.detail) {
       this.currentStep = event.detail.selectedStep;
     }
   }
@@ -124,7 +122,7 @@ export class Q2Stepper {
         selectedStep: null,
         lastEnabledStep: stepNumber,
         currentStep,
-        stepCount
+        stepCount,
       });
     }
     this.scheduledAfterRender.push(this.resizeIframe);
@@ -132,8 +130,8 @@ export class Q2Stepper {
     this.focusStep(stepNumber, this.scrollEnabled);
   }
   resizeIframe() {
-    var _a;
-    return (_a = window === null || window === void 0 ? void 0 : window.TectonElements) === null || _a === void 0 ? void 0 : _a.resizeIframe();
+    var _a, _b;
+    return (_b = (_a = window === null || window === void 0 ? void 0 : window.TectonElements) === null || _a === void 0 ? void 0 : _a.resizeIframe) === null || _b === void 0 ? void 0 : _b.call(_a);
   }
   showStepPane(stepNumber) {
     this.allPanes.forEach((pane, index) => {
@@ -153,7 +151,7 @@ export class Q2Stepper {
       const left = stepListItem.offsetLeft - this.listElement.clientWidth / 2;
       this.listElement.scrollTo({
         left,
-        behavior: 'smooth'
+        behavior: 'smooth',
       });
     }
   }

package/dist/collection/components/q2-stepper/styles.css

@@ -141,7 +141,7 @@ li {
 }
 .step-btn[aria-disabled], .step-btn[aria-disabled] + hr {
   --comp-bullet-font-color: var(--tct-stepper-bullet-inactive-font-color, var(--t-stepper-bullet-inactive-font-color, var(--t-text, #4d4d4d)));
-  --comp-bullet-bg: var(--tct-stepper-bullet-inactive-bg, var(--t-stepper-bullet-inactive-bg, var(--t-gray12, #d9d9d9)));
+  --comp-bullet-bg: var(--tct-stepper-bullet-inactive-bg, var(--t-stepper-bullet-inactive-bg, var(--t-gray-12, #d9d9d9)));
 }
 
 .step-bubble {
@@ -190,11 +190,11 @@ hr {
   color: var(--tct-stepper-title-color, var(--t-stepper-title-color, var(--t-text, #4d4d4d)));
   font-size: var(--tct-stepper-title-font-size, var(--t-stepper-title-font-size, var(--app-font-size-small, 12px)));
   height: 1.5em;
+  text-overflow: ellipsis;
+  overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 [aria-selected] .step-label {
   font-weight: var(--tct-stepper-active-font-weight, var(--t-stepper-active-font-weight, 600));
@@ -206,11 +206,11 @@ hr {
 .step-description {
   color: var(--tct-stepper-description-color, var(--t-stepper-description-color, var(--t-textA, rgba(77, 77, 77, 0.77))));
   font-size: var(--tct-stepper-description-font-size, var(--t-stepper-description-font-size, var(--app-font-size-small, 12px)));
+  text-overflow: ellipsis;
+  overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 4;
   -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
   padding-bottom: 0.2em;
 }