q2-tecton-elements 1.9.5 → 1.10.0

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

@@ -19,7 +19,6 @@ export class Q2Select {
       lastPressedAt: new Date()
     };
     this.guid = createGuid();
-    this.dropdownId = `q2-select-dropdown-${this.guid}`;
     this.onMutationObserved = () => {
       const slotContainer = this.hostElement.querySelector('.custom-display-content');
       const displaySlot = this.hostElement.shadowRoot.querySelector('slot[name="q2-select-display"]');
@@ -170,7 +169,13 @@ export class Q2Select {
   }
   getDefaultActiveIndex() {
     const firstSelected = this.optionElements.findIndex(element => element.selected);
-    return firstSelected > -1 ? firstSelected : 0;
+    if (firstSelected > -1)
+      return firstSelected;
+    const firstEnabled = this.optionElements.findIndex(element => !element.hidden);
+    if (firstEnabled > -1)
+      return firstEnabled;
+    else
+      return 0;
   }
   setActiveOption() {
     if (!this.dropdownOpen) {
@@ -187,9 +192,9 @@ export class Q2Select {
     });
   }
   setFocusedOption() {
-    const ele = this.optionElements[this.activeIndex].shadowRoot.querySelector('div');
-    ele.dispatchEvent(new FocusEvent('focus'));
-    ele.focus();
+    const option = this.optionElements[this.activeIndex];
+    option.dispatchEvent(new FocusEvent('focus'));
+    option.focus();
   }
   calculateMultiSelectSelectedDisplay() {
     if (this.selectedOptions.length === 1) {
@@ -218,7 +223,7 @@ export class Q2Select {
   get minPopHeight() {
     const { minRows } = this;
     const firstOption = this.hostElement.querySelector('q2-option:not([hidden])');
-    const minHeight = window.getComputedStyle(firstOption.shadowRoot.querySelector('.q2-option-container')).minHeight;
+    const minHeight = window.getComputedStyle(firstOption).minHeight;
     return minRows * parseInt(minHeight);
   }
   get selectedDisplay() {
@@ -285,7 +290,7 @@ export class Q2Select {
   }
   scrollToActiveOption() {
     const activeOption = this.optionElements[this.activeIndex];
-    activeOption && activeOption.scrollIntoView({ block: 'nearest' });
+    activeOption === null || activeOption === void 0 ? void 0 : activeOption.scrollIntoView({ block: 'nearest' });
   }
   openDropdownWithoutActiveElement() {
     this.activeIndex = undefined;
@@ -334,17 +339,13 @@ export class Q2Select {
   adjustActiveOptionAndScroll(numToAdd) {
     this.activeIndex += numToAdd;
     this.setActiveOption();
-    if (!this.searchable) {
-      this.setFocusedOption();
-    }
+    this.setFocusedOption();
     this.scrollToActiveOption();
   }
   setDefaultActiveElement() {
     this.activeIndex = this.getDefaultActiveIndex();
     this.setActiveOption();
-    if (!this.searchable) {
-      this.setFocusedOption();
-    }
+    this.setFocusedOption();
   }
   focusInput() {
     const input = this.hostElement.shadowRoot.querySelector('q2-input');
@@ -421,19 +422,34 @@ export class Q2Select {
     if (this.searchable && event.target === this.hostElement && !this.hostElement.oninput) {
       const options = this.optionElements;
       const query = event.detail.query.trim().toLowerCase();
+      let matchedCount = 0;
       options.forEach(option => {
         if (query === '') {
           option.style.display = '';
         }
         else {
-          let { display = '', innerText = '' } = option;
-          let matched = display.toLowerCase().includes(query) ||
+          const { display = '', innerText = '' } = option;
+          const matched = display.toLowerCase().includes(query) ||
             innerText.toLowerCase().includes(query);
-          option.style.display = matched ? '' : 'none';
+          option.hidden = !matched;
+          if (matched)
+            matchedCount++;
         }
       });
+      let statusMessageLocString = query
+        ? 'tecton.element.select.searchable.results'
+        : 'tecton.element.select.allOptions';
+      const count = query ? matchedCount : options.length;
+      this.setStatusMessage(loc(statusMessageLocString, [count]));
     }
   }
+  setStatusMessage(message) {
+    clearTimeout(this.statusMessageTimer);
+    this.statusMessage = '';
+    this.statusMessageTimer = setTimeout(() => {
+      this.statusMessage = message;
+    }, 1000);
+  }
   clickHandler(event) {
     const target = event.target;
     if (target.localName !== 'q2-option' || target.disabled) {
@@ -442,86 +458,113 @@ export class Q2Select {
     this.selectOption(target.value);
   }
   keydownHandler(event) {
-    if (event.key === 'Enter' && this.dropdownOpen) {
-      event.preventDefault();
-      const newOption = this.hostElement.querySelector(`[option-id="${this.activeOptionId}"]`);
-      newOption && !newOption.disabled && this.selectOption(newOption.value);
-    }
-    else if (['ArrowUp', 'Up'].includes(event.key)) {
-      event.preventDefault();
-      if (this.dropdownOpen) {
-        if (this.activeIndex > 0) {
+    event.stopPropagation();
+    const { dropdownOpen, activeIndex, searchable, multiple, optionElements } = this;
+    const { key, shiftKey } = event;
+    switch (key) {
+      case 'Enter':
+        if (!dropdownOpen)
+          break;
+        event.preventDefault();
+        const newOption = this.hostElement.querySelector(`[option-id="${this.activeOptionId}"]`);
+        if (newOption === null || newOption === void 0 ? void 0 : newOption.disabled)
+          break;
+        this.selectOption(newOption.value);
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        if (!dropdownOpen) {
+          this.openDropdownWithActiveElement(this.getDefaultActiveIndex());
+          break;
+        }
+        if (activeIndex > 0) {
           const nextIndex = this.getNextVisibleIndex(-1);
           if (nextIndex > -1) {
-            this.adjustActiveOptionAndScroll(nextIndex - this.activeIndex);
+            this.adjustActiveOptionAndScroll(nextIndex - activeIndex);
           }
         }
-        else if (this.activeIndex !== 0) {
+        else if (activeIndex !== 0) {
           this.setDefaultActiveElement();
         }
-      }
-      else {
-        this.openDropdownWithActiveElement(this.getDefaultActiveIndex());
-      }
-    }
-    else if (['ArrowDown', 'Down'].includes(event.key)) {
-      event.preventDefault();
-      if (this.dropdownOpen) {
-        if (this.activeIndex < this.optionElements.length - 1) {
+        break;
+      case 'ArrowDown':
+        event.preventDefault();
+        if (!dropdownOpen) {
+          this.openDropdownWithActiveElement(this.getDefaultActiveIndex());
+          break;
+        }
+        if (activeIndex < optionElements.length - 1) {
           const nextIndex = this.getNextVisibleIndex(1);
           if (nextIndex > -1) {
             this.adjustActiveOptionAndScroll(nextIndex - this.activeIndex);
           }
         }
-        else if (!this.activeIndex) {
+        else if (!activeIndex) {
           this.setDefaultActiveElement();
         }
-      }
-      else {
-        this.openDropdownWithActiveElement(this.getDefaultActiveIndex());
-      }
-    }
-    else if (['Escape', 'Esc'].includes(event.key)) {
-      this.closeDropdown();
-      this.focusInput();
-    }
-    else if (event.key === 'Tab') {
-      if (this.dropdownOpen && this.searchable && event.shiftKey) {
+        break;
+      case 'Home':
+        if (!dropdownOpen)
+          break;
         event.preventDefault();
+        this.adjustActiveOptionAndScroll(0);
+        break;
+      case 'End':
+        if (!dropdownOpen)
+          break;
+        event.preventDefault();
+        this.adjustActiveOptionAndScroll(optionElements.length - 1);
+        break;
+      case 'Escape':
+        this.closeDropdown();
         this.focusInput();
-      }
-      else {
-        this.dropdownOpen && !this.multiple && event.preventDefault();
-      }
-    }
-    else if (!this.searchable && event.key.match(/^[a-zA-Z0-9]$/)) {
-      // search in non-searchable select: alpha-numeric only
-      this.searchAndFocus(event.key);
+        break;
+      case 'Tab':
+        if (!dropdownOpen)
+          break;
+        if ((searchable && shiftKey) || !multiple) {
+          event.preventDefault();
+        }
+        if (searchable && shiftKey) {
+          this.focusInput();
+        }
+        break;
+      default:
+        if (searchable)
+          break;
+        if (!key.match(/^[A-Za-z0-9]$/))
+          break;
+        // search in non-searchable select: alpha-numeric only
+        this.searchAndFocus(key);
+        break;
     }
   }
   render() {
     return (h("click-elsewhere", { class: this.wrapperClasses, onChange: this.clickedElsewhere },
+      h("div", { "aria-live": "polite", "aria-atomic": "true", role: "status", class: "sr" }, this.statusMessage),
       h("q2-input", { ref: el => (this.inputField = el), class: "q2-select-input", label: (this.label && loc(this.label)) || '', value: this.selectedDisplay, errors: (Array.isArray(this.errors) &&
           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: this.dropdownId, 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, 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()));
   }
   optionsDropdown() {
     const dropDirection = this.privatePopDirection === 'up' ? 'dropup' : '';
-    return (h("div", { class: `q2-select-dropdown q2-element-dropdown ${dropDirection}`, ref: el => (this.dropdownContainer = el), role: "menu" },
+    return (h("div", { class: `q2-select-dropdown q2-element-dropdown ${dropDirection}`, ref: el => (this.dropdownContainer = el) },
       this.multiple ? this.visibilityToggle() : '',
-      h("div", { class: "q2-select-options", id: this.dropdownId },
+      h("div", { class: "q2-select-options", id: "dropdown", role: "listbox" },
         h("slot", null))));
   }
   visibilityToggle() {
     return (h("div", { class: "multi-select-header" },
       loc('tecton.element.select.multiHeader.showing'),
-      h("q2-btn", { class: `option-toggle show-all-options${this.onlyShowingSelected ? '' : ' selected'}`, badge: true, "test-id": "allOptionsButton", onClick: this.showAllOptions, onKeyDown: this.showAllOptionTabKeyDown }, loc('tecton.element.select.multiHeader.all')),
-      h("q2-btn", { class: `option-toggle show-selected-options${this.onlyShowingSelected ? ' selected' : ''}`, disabled: this.selectedOptions.length === 0, badge: true, "test-id": "selectedOptionsButton", onClick: this.showSelectedOptions, onKeyDown: this.showSelectedOptionTabKeyDown }, loc('tecton.element.select.multiHeader.selected', [this.selectedOptionsCount]))));
+      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, onKeyDown: this.showAllOptionTabKeyDown, 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, onKeyDown: this.showSelectedOptionTabKeyDown, 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"; }
@@ -782,7 +825,8 @@ export class Q2Select {
     "activeOptionId": {},
     "searchText": {},
     "hasCustomDisplay": {},
-    "inputFocused": {}
+    "inputFocused": {},
+    "statusMessage": {}
   }; }
   static get events() { return [{
       "method": "change",

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

@@ -80,6 +80,24 @@ button {
   visibility: hidden;
   transition: opacity var(--app-tween-1);
   border-radius: var(--tct-dropdown-element-br, 0);
+  --comp-scrollbar-size: var(--tct-scrollbar-size, var(--app-scale-1x, 5px));
+  --comp-scrollbar-border-radius: var(--tct-scrollbar-border-radius, var(--app-border-radius-1, 3px));
+  --comp-scrollbar-color: var(--tct-scrollbar-color, var(--t-a11y-gray-color, #747474));
+  scrollbar-width: thin;
+  scrollbar-color: var(--comp-scrollbar-color) transparent;
+}
+.q2-element-dropdown::-webkit-scrollbar {
+  width: var(--comp-scrollbar-size);
+  height: var(--comp-scrollbar-size);
+  margin: 5px;
+}
+.q2-element-dropdown::-webkit-scrollbar-thumb {
+  background: var(--comp-scrollbar-color);
+  border-radius: var(--comp-scrollbar-border-radius);
+}
+.q2-element-dropdown::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: var(--comp-scrollbar-border-radius);
 }
 
 .q2-element-dropdown.sizable {

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

@@ -0,0 +1,283 @@
+import { Component, Prop, h, Element, State, Watch, Listen, Event, Fragment } from '@stencil/core';
+import { loc, addSmoothScrollPolyfill } from 'src/utils';
+addSmoothScrollPolyfill();
+export class Q2Stepper {
+  constructor() {
+    this.currentStep = 1;
+    this.scrollEnabled = false;
+    this.showScrollLeft = false;
+    this.showScrollRight = false;
+    this.scheduledAfterRender = [];
+    ////////// EVENT HANDLERS ////////
+    this.onSlotChange = () => {
+      this.checkForPanes();
+      this.checkScrollState();
+    };
+    this.onScrollBtnClick = (direction) => {
+      const scrollAmount = Math.floor(this.listElement.clientWidth / 2);
+      this.listElement.scrollBy({
+        left: direction === 'left' ? -scrollAmount : scrollAmount,
+        behavior: 'smooth'
+      });
+    };
+    this.onStepClick = (event, selectedStep) => {
+      event.stopPropagation();
+      const { currentStep, stepCount, lastEnabledStep } = this;
+      if (selectedStep > lastEnabledStep || selectedStep === currentStep)
+        return;
+      this.change.emit({
+        selectedStep,
+        lastEnabledStep,
+        currentStep,
+        stepCount
+      });
+    };
+    this.onStepKeyDown = (event, stepNumber) => {
+      const { lastEnabledStep, stepCount } = this;
+      const { key } = event;
+      let selectedStep;
+      switch (key) {
+        case 'ArrowLeft':
+          event.preventDefault();
+          selectedStep = Math.max(stepNumber - 1, 0);
+          break;
+        case 'ArrowRight':
+          event.preventDefault();
+          selectedStep = Math.min(stepNumber + 1, stepCount);
+          break;
+        case 'Home':
+          event.preventDefault();
+          selectedStep = 1;
+          break;
+        case 'End':
+          event.preventDefault();
+          selectedStep = lastEnabledStep;
+          break;
+      }
+      if (!selectedStep)
+        return;
+      this.focusStep(selectedStep, true);
+    };
+    this.checkForPanes = () => {
+      const { allPanes } = this;
+      if (!allPanes.length)
+        return;
+      this.stepCount = allPanes.length;
+    };
+    this.checkScrollState = () => {
+      const { scrollLeft, scrollWidth, clientWidth } = this.listElement;
+      this.scrollEnabled = scrollWidth > clientWidth;
+      this.showScrollLeft = !!scrollLeft;
+      this.showScrollRight = scrollWidth !== scrollLeft + clientWidth;
+    };
+  }
+  ////////// LIFECYCLE HOOKS ////////
+  componentWillLoad() {
+    if (!this.lastEnabledStep)
+      this.lastEnabledStep = this.currentStep || 1;
+    this.resizeObserver = new ResizeObserver(() => this.checkScrollState());
+    this.checkForPanes();
+  }
+  componentDidLoad() {
+    this.resizeObserver.observe(this.listElement);
+    this.checkScrollState();
+    setTimeout(() => this.showStep(this.currentStep || 1), 0);
+  }
+  componentDidRender() {
+    this.scheduledAfterRender.forEach(fn => fn());
+    this.scheduledAfterRender = [];
+  }
+  disconnectedCallback() {
+    this.resizeObserver.disconnect();
+  }
+  ////////// WATCHER METHODS ////////
+  currentStepChanged(stepNumber) {
+    this.showStep(stepNumber);
+  }
+  ////////// HOST EVENTS ////////
+  defaultChangeHandler(event) {
+    const { hostElement } = this;
+    if (event.target === hostElement &&
+      !hostElement.getAttribute('onchange') &&
+      !!event.detail) {
+      this.currentStep = event.detail.selectedStep;
+    }
+  }
+  ////////// GETTER METHODS ////////
+  get allPanes() {
+    return this.hostElement.querySelectorAll('q2-stepper-pane');
+  }
+  ////////// HELPER METHODS ////////
+  showStep(stepNumber) {
+    if (stepNumber > this.lastEnabledStep) {
+      const { currentStep, stepCount } = this;
+      this.lastEnabledStep = stepNumber;
+      this.change.emit({
+        selectedStep: null,
+        lastEnabledStep: stepNumber,
+        currentStep,
+        stepCount
+      });
+    }
+    this.scheduledAfterRender.push(this.resizeIframe);
+    this.showStepPane(stepNumber);
+    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();
+  }
+  showStepPane(stepNumber) {
+    this.allPanes.forEach((pane, index) => {
+      pane.isActive = stepNumber === index + 1;
+    });
+  }
+  focusStep(stepNumber, scrollIntoView) {
+    var _a;
+    const stepListItem = this.listElement.children[stepNumber - 1];
+    const isActive = document.activeElement === this.hostElement;
+    if (!stepListItem)
+      return;
+    if (isActive) {
+      (_a = stepListItem.firstElementChild) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    if (scrollIntoView) {
+      const left = stepListItem.offsetLeft - this.listElement.clientWidth / 2;
+      this.listElement.scrollTo({
+        left,
+        behavior: 'smooth'
+      });
+    }
+  }
+  ////////// RENDER METHODS ////////
+  renderStepBtn(stepIndex) {
+    var _a;
+    const { allPanes, stepCount, currentStep, lastEnabledStep } = this;
+    const { id, label, description } = (_a = allPanes === null || allPanes === void 0 ? void 0 : allPanes[stepIndex]) !== null && _a !== void 0 ? _a : {};
+    const stepNumber = stepIndex + 1;
+    const isCurrentStep = stepNumber === currentStep;
+    const labelId = label && `label-${id}`;
+    const descriptionId = label && description && `description-${id}`;
+    const btnLabel = !label && loc('tecton.element.stepper.number', [`${stepNumber}`, `${stepCount}`]);
+    return (h("li", { role: "presentation" },
+      h("button", { class: "step-btn", type: "button", "aria-labelledby": labelId, "aria-describedBy": descriptionId, "aria-label": btnLabel, "aria-selected": isCurrentStep, "aria-controls": id, "aria-disabled": stepNumber > lastEnabledStep ? 'true' : null, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => this.onStepKeyDown(ev, stepNumber), onClick: ev => this.onStepClick(ev, stepNumber) },
+        h("div", { class: "step-bubble" }, stepNumber),
+        label && (h(Fragment, null,
+          h("div", { class: "step-label", id: labelId }, loc(label)),
+          description && (h("div", { class: "step-description", id: descriptionId }, loc(description)))))),
+      stepIndex ? h("hr", null) : ''));
+  }
+  render() {
+    const { stepCount, scrollEnabled, showScrollLeft, showScrollRight } = this;
+    const containerClasses = ['step-container'];
+    if (scrollEnabled)
+      containerClasses.push('has-scroll');
+    return (h(Fragment, null,
+      h("div", { class: containerClasses.join(' ') },
+        scrollEnabled && (h(Fragment, null,
+          h("div", { class: "gradient-left", hidden: !showScrollLeft }),
+          h("div", { class: "gradient-right", hidden: !showScrollRight }),
+          h("q2-btn", { class: "btn-left", hidden: !this.showScrollLeft, onClick: () => this.onScrollBtnClick('left') },
+            h("q2-icon", { type: "chevron-left" })),
+          h("q2-btn", { class: "btn-right", hidden: !this.showScrollRight, onClick: () => this.onScrollBtnClick('right') },
+            h("q2-icon", { type: "chevron-right" })))),
+        h("ul", { onScroll: this.checkScrollState, ref: el => (this.listElement = el), role: "tablist" }, [...Array(stepCount).keys()].map(stepIndex => this.renderStepBtn(stepIndex)))),
+      h("div", null,
+        h("slot", { onSlotchange: () => this.onSlotChange() }))));
+  }
+  static get is() { return "q2-stepper"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "currentStep": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "current-step",
+      "reflect": true,
+      "defaultValue": "1"
+    },
+    "stepCount": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "step-count",
+      "reflect": false
+    },
+    "lastEnabledStep": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "last-enabled-step",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "scrollEnabled": {},
+    "showScrollLeft": {},
+    "showScrollRight": {}
+  }; }
+  static get events() { return [{
+      "method": "change",
+      "name": "change",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "hostElement"; }
+  static get watchers() { return [{
+      "propName": "currentStep",
+      "methodName": "currentStepChanged"
+    }]; }
+  static get listeners() { return [{
+      "name": "change",
+      "method": "defaultChangeHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}