@openui5/sap.ui.webc.fiori 1.115.1 → 1.117.0

package/src/sap/ui/webc/fiori/thirdparty/Wizard.js

@@ -1,4 +1,4 @@
-sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/ui/webc/common/thirdparty/base/renderer/LitRenderer", "sap/ui/webc/common/thirdparty/base/i18nBundle", "sap/ui/webc/common/thirdparty/base/delegate/ItemNavigation", "sap/ui/webc/common/thirdparty/base/types/NavigationMode", "sap/ui/webc/common/thirdparty/base/types/Float", "sap/ui/webc/common/thirdparty/base/util/clamp", "sap/ui/webc/common/thirdparty/base/delegate/ResizeHandler", "sap/ui/webc/common/thirdparty/base/Device", "sap/ui/webc/common/thirdparty/base/util/debounce", "sap/ui/webc/common/thirdparty/base/util/FocusableElements", "sap/ui/webc/main/thirdparty/Button", "sap/ui/webc/main/thirdparty/ResponsivePopover", "./generated/i18n/i18n-defaults", "./WizardTab", "./WizardStep", "./generated/templates/WizardTemplate.lit", "./generated/templates/WizardPopoverTemplate.lit", "./generated/themes/Wizard.css", "./generated/themes/WizardPopover.css"], function (_exports, _UI5Element, _LitRenderer, _i18nBundle, _ItemNavigation, _NavigationMode, _Float, _clamp, _ResizeHandler, _Device, _debounce, _FocusableElements, _Button, _ResponsivePopover, _i18nDefaults, _WizardTab, _WizardStep, _WizardTemplate, _WizardPopoverTemplate, _Wizard, _WizardPopover) {
+sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/ui/webc/common/thirdparty/base/decorators/property", "sap/ui/webc/common/thirdparty/base/decorators/slot", "sap/ui/webc/common/thirdparty/base/decorators/event", "sap/ui/webc/common/thirdparty/base/decorators/customElement", "sap/ui/webc/common/thirdparty/base/renderer/LitRenderer", "sap/ui/webc/common/thirdparty/base/i18nBundle", "sap/ui/webc/common/thirdparty/base/delegate/ItemNavigation", "sap/ui/webc/common/thirdparty/base/types/NavigationMode", "sap/ui/webc/common/thirdparty/base/types/Float", "sap/ui/webc/common/thirdparty/base/util/clamp", "sap/ui/webc/common/thirdparty/base/delegate/ResizeHandler", "sap/ui/webc/common/thirdparty/base/Device", "sap/ui/webc/common/thirdparty/base/util/debounce", "sap/ui/webc/common/thirdparty/base/util/FocusableElements", "sap/ui/webc/main/thirdparty/Button", "sap/ui/webc/main/thirdparty/ResponsivePopover", "./types/WizardContentLayout", "./generated/i18n/i18n-defaults", "./WizardTab", "./WizardStep", "./generated/templates/WizardTemplate.lit", "./generated/templates/WizardPopoverTemplate.lit", "./generated/themes/Wizard.css", "./generated/themes/WizardPopover.css"], function (_exports, _UI5Element, _property, _slot, _event, _customElement, _LitRenderer, _i18nBundle, _ItemNavigation, _NavigationMode, _Float, _clamp, _ResizeHandler, _Device, _debounce, _FocusableElements, _Button, _ResponsivePopover, _WizardContentLayout, _i18nDefaults, _WizardTab, _WizardStep, _WizardTemplate, _WizardPopoverTemplate, _Wizard, _WizardPopover) {
   "use strict";
 
   Object.defineProperty(_exports, "__esModule", {
@@ -6,6 +6,10 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
   });
   _exports.default = void 0;
   _UI5Element = _interopRequireDefault(_UI5Element);
+  _property = _interopRequireDefault(_property);
+  _slot = _interopRequireDefault(_slot);
+  _event = _interopRequireDefault(_event);
+  _customElement = _interopRequireDefault(_customElement);
   _LitRenderer = _interopRequireDefault(_LitRenderer);
   _ItemNavigation = _interopRequireDefault(_ItemNavigation);
   _NavigationMode = _interopRequireDefault(_NavigationMode);
@@ -15,6 +19,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
   _debounce = _interopRequireDefault(_debounce);
   _Button = _interopRequireDefault(_Button);
   _ResponsivePopover = _interopRequireDefault(_ResponsivePopover);
+  _WizardContentLayout = _interopRequireDefault(_WizardContentLayout);
   _WizardTab = _interopRequireDefault(_WizardTab);
   _WizardStep = _interopRequireDefault(_WizardStep);
   _WizardTemplate = _interopRequireDefault(_WizardTemplate);
@@ -22,12 +27,14 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
   _Wizard = _interopRequireDefault(_Wizard);
   _WizardPopover = _interopRequireDefault(_WizardPopover);
   function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-  // Texts
-
-  // Step in header and content
-
-  // Template and Styles
-
+  var __decorate = void 0 && (void 0).__decorate || function (decorators, target, key, desc) {
+    var c = arguments.length,
+      r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+      d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+  };
+  var Wizard_1;
   const MIN_STEP_WIDTH_NO_TITLE = 64;
   const MIN_STEP_WIDTH_WITH_TITLE = 200;
   const EXPANDED_STEP = "data-ui5-wizard-expanded-tab";
@@ -39,99 +46,12 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     DEFAULT: 0.7,
     MAX: 1
   };
-
-  /**
-   * @public
-   */
-  const metadata = {
-    tag: "ui5-wizard",
-    managedSlots: true,
-    fastNavigation: true,
-    properties: /** @lends sap.ui.webcomponents.fiori.Wizard.prototype */{
-      /**
-       * Defines the width of the <code>ui5-wizard</code>.
-       * @private
-       */
-      width: {
-        type: _Float.default
-      },
-      /**
-       * Defines the threshold to switch between steps upon user scrolling.
-       * <br><br>
-       *
-       * <b>For Example:</b>
-       * <br>
-       * (1) To switch to the next step, when half of the step is scrolled out - set <code>step-switch-threshold="0.5"</code>.
-       * (2) To switch to the next step, when the entire current step is scrolled out - set <code>step-switch-threshold="1"</code>.
-       *
-       * <br><br>
-       * <b>Note:</b> Supported values are between 0.5 and 1
-       * and values out of the range will be normalized to 0.5 and 1 respectively.
-       * @private
-       * @type {Float}
-       * @defaultvalue 0.7
-       * @since 1.0.0-rc.13
-       */
-      stepSwitchThreshold: {
-        type: _Float.default,
-        defaultValue: STEP_SWITCH_THRESHOLDS.DEFAULT
-      },
-      /**
-       * Defines the height of the <code>ui5-wizard</code> content.
-       * @private
-       */
-      contentHeight: {
-        type: _Float.default
-      },
-      _groupedTabs: {
-        type: String,
-        multiple: true
-      }
-    },
-    slots: /** @lends sap.ui.webcomponents.fiori.Wizard.prototype */{
-      /**
-       * Defines the steps.
-       * <br><br>
-       * <b>Note:</b> Use the available <code>ui5-wizard-step</code> component.
-       *
-       * @type {sap.ui.webcomponents.fiori.IWizardStep[]}
-       * @public
-       * @slot steps
-       */
-      "default": {
-        propertyName: "steps",
-        type: HTMLElement,
-        "individualSlots": true,
-        invalidateOnChildChange: true
-      }
-    },
-    events: /** @lends sap.ui.webcomponents.fiori.Wizard.prototype */{
-      /**
-       * Fired when the step is changed by user interaction - either with scrolling,
-       * or by clicking on the steps within the component header.
-       *
-       * @event sap.ui.webcomponents.fiori.Wizard#step-change
-       * @param {HTMLElement} step The new step.
-       * @param {HTMLElement} previousStep The previous step.
-       * @param {boolean} changeWithClick The step change occurs due to user's click or 'Enter'/'Space' key press on step within the navigation.
-       * @public
-       */
-      "step-change": {
-        detail: {
-          step: {
-            type: HTMLElement
-          },
-          previousStep: {
-            type: HTMLElement
-          },
-          changeWithClick: {
-            Boolean
-          }
-        }
-      }
-    }
+  const RESPONSIVE_BREAKPOINTS = {
+    "0": "S",
+    "599": "M",
+    "1023": "L",
+    "1439": "XL"
   };
-
   /**
    * @class
    *
@@ -145,7 +65,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
    * The top most area of the <code>ui5-wizard</code> is occupied by the navigation area.
    * It shows the sequence of steps, where the recommended number of steps is between 3 and 8 steps.
    * <ul>
-   * <li> Steps can have different visual representations - numbers or icons.
+   * <li> Steps can have different visual representations - numbers or icons.</li>
    * <li> Steps might have labels for better readability - titleText and subTitleText.</li>
    * <li> Steps are defined by using the <code>ui5-wizard-step</code> as slotted element within the <code>ui5-wizard</code>.</li>
    * </ul>
@@ -154,6 +74,16 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
    * <br>
    * <b>Note:</b> If multiple selected steps are defined, the last step will be selected.
    *
+   * <h3>CSS Shadow Parts</h3>
+   *
+   * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
+   * <br>
+   * The <code>ui5-wizard</code> exposes the following CSS Shadow Parts:
+   * <ul>
+   * <li>navigator - Used to style the progress navigator of the <code>ui5-wizard</code>.</li>
+   * <li>step-content - Used to style a <code>ui5-wizard-step</code> container.</li>
+   * </ul>
+   *
    * <h3>Keyboard Handling</h3>
    * The user can navigate using the following keyboard shortcuts:
    * <br>
@@ -212,44 +142,36 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
    * Tapping on them will show a popover to select the step to navigate to. On mobile device, the grouped steps are presented within a dialog.
    *
    * <h3>ES6 Module Import</h3>
-   * <code>import "@ui5/webcomponents-fiori/dist/Wizard.js";</code> (includes <ui5-wizard-step>)
+   * <code>import "@ui5/webcomponents-fiori/dist/Wizard.js";</code> (includes &lt;ui5-wizard-step/&gt;)
    *
    * @constructor
    * @author SAP SE
-   * @alias sap.ui.webcomponents.fiori.Wizard
-   * @extends UI5Element
+   * @alias sap.ui.webc.fiori.Wizard
+   * @extends sap.ui.webc.base.UI5Element
    * @tagname ui5-wizard
    * @since 1.0.0-rc.10
-   * @appenddocs WizardStep
+   * @appenddocs sap.ui.webc.fiori.WizardStep
    * @public
    */
-  class Wizard extends _UI5Element.default {
+  let Wizard = Wizard_1 = class Wizard extends _UI5Element.default {
     constructor() {
       super();
-
       // Stores the scroll offsets of the steps,
       // e.g. the steps' starting point.
       this.stepScrollOffsets = [];
-
       // Stores references to the grouped steps.
       this._groupedTabs = [];
-
       // Keeps track of the currently selected step index.
       this.selectedStepIndex = 0;
-
       // Keeps track of the previously selected step index.
       this.previouslySelectedStepIndex = 0;
-
       // Indicates that selection will be changed
       // due to user click.
       this.selectionRequestedByClick = false;
-
       // Stores the previous width
       this._prevWidth = 0;
-
       // Stores the previous height
       this._prevContentHeight = 0;
-
       // Indicates that selection will be changed
       // due to user scroll.
       this.selectionRequestedByScroll = false;
@@ -259,12 +181,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       });
       this._onStepResize = this.onStepResize.bind(this);
     }
-    static get metadata() {
-      return metadata;
-    }
-    static get render() {
-      return _LitRenderer.default;
-    }
     get classes() {
       return {
         popover: {
@@ -274,30 +190,12 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         }
       };
     }
-    static get styles() {
-      return _Wizard.default;
-    }
-    static get staticAreaStyles() {
-      return _WizardPopover.default;
-    }
-    static get template() {
-      return _WizardTemplate.default;
-    }
-    static get dependencies() {
-      return [_WizardTab.default, _WizardStep.default, _ResponsivePopover.default, _Button.default];
-    }
     static async onDefine() {
-      Wizard.i18nBundle = await (0, _i18nBundle.getI18nBundle)("@ui5/webcomponents-fiori");
-    }
-    static get PHONE_BREAKPOINT() {
-      return 599;
+      Wizard_1.i18nBundle = await (0, _i18nBundle.getI18nBundle)("@ui5/webcomponents-fiori");
     }
     static get SCROLL_DEBOUNCE_RATE() {
       return 25;
     }
-    static get staticAreaTemplate() {
-      return _WizardPopoverTemplate.default;
-    }
     onExitDOM() {
       this.detachStepsResizeObserver();
     }
@@ -312,7 +210,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       this.attachStepsResizeObserver();
       this.previouslySelectedStepIndex = this.selectedStepIndex;
     }
-
     /**
      * Normalizes the step selection as follows:
      * (1) If there is no selected step - the first step is going to be selected.
@@ -324,28 +221,23 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       if (this.stepsCount === 0) {
         return;
       }
-
       // If no selected steps -> select the first step.
       if (this.selectedStepsCount === 0) {
         this.selectFirstStep();
         console.warn("Selecting the first step: no selected step is defined."); // eslint-disable-line
       }
-
       // If there are multiple selected steps -> keep the last selected one.
       if (this.selectedStepsCount > 1) {
         this.selectLastSelectedStep();
         console.warn(`Selecting the last step defined as selected: multiple selected steps are defined.`); // eslint-disable-line
       }
-
       // If the selected step is defined as disabled - log warning.
       if (this.selectedStep && this.selectedStep.disabled) {
         console.warn("The selected step is disabled: you need to enable it in order to interact with the step."); // eslint-disable-line
       }
-
       // Place for improvement: If the selected step is not the first, enable all the prior steps
       this.selectedStepIndex = this.getSelectedStepIndex();
     }
-
     /**
      * Selects the first step.
      * @private
@@ -355,7 +247,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       this.slottedSteps[0].selected = true;
       this.slottedSteps[0].disabled = false;
     }
-
     /**
      * Selects the last step from multiple selected ones.
      * @private
@@ -368,7 +259,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         lastSelectedStep.disabled = false;
       }
     }
-
     /**
      * Deselects all steps.
      * @private
@@ -378,7 +268,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         step.selected = false;
       });
     }
-
     /**
      * Stores the scroll offsets of the steps,
      * e.g. the steps' starting point.
@@ -392,42 +281,38 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         return contentItem.offsetTop + contentItem.offsetHeight;
       });
     }
-
     /**
      * Handles user click on steps' tabs within the header.
      * <b>Note:</b> the handler is bound in the template.
-     * @param {Event} event
+     * @param {MouseEvent} e
      * @private
      */
-    onSelectionChangeRequested(event) {
+    onSelectionChangeRequested(e) {
       this.selectionRequestedByClick = true;
-      this.changeSelectionByStepAction(event.target);
+      this.changeSelectionByStepAction(e.target);
     }
-
     /**
      * Handles user scrolling with debouncing.
      * <b>Note:</b> the handler is bound in the template.
-     * @param {Event} event
+     * @param {MouseEvent} e
      * @private
      */
-    onScroll(event) {
+    onScroll(e) {
       if (this.selectionRequestedByClick) {
         this.selectionRequestedByClick = false;
         return;
       }
-      (0, _debounce.default)(this.changeSelectionByScroll.bind(this, event.target.scrollTop), Wizard.SCROLL_DEBOUNCE_RATE);
+      (0, _debounce.default)(this.changeSelectionByScroll.bind(this, e.target.scrollTop), Wizard_1.SCROLL_DEBOUNCE_RATE);
     }
-
     /**
      * Handles when a step in the header is focused in order to update the <code>ItemNavigation</code>.
      * <b>Note:</b> the handler is bound in the template.
-     * @param {Event} event
+     * @param {FocusEvent} e
      * @private
      */
-    onStepInHeaderFocused(event) {
-      this._itemNavigation.setCurrentItem(event.target);
+    onStepInHeaderFocused(e) {
+      this._itemNavigation.setCurrentItem(e.target);
     }
-
     /**
      * Handles resize in order to:
      * (1) sync steps' scroll offset and selection
@@ -442,6 +327,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       }
       this._prevWidth = this.width;
       this._prevContentHeight = this.contentHeight;
+      this._calcCurrentBreakpoint();
     }
     attachStepsResizeObserver() {
       this.stepsDOM.forEach(stepDOM => {
@@ -454,7 +340,11 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         _ResizeHandler.default.deregister(stepDOM, this._onStepResize);
       });
     }
-
+    _calcCurrentBreakpoint() {
+      const breakpointDimensions = Object.keys(RESPONSIVE_BREAKPOINTS).reverse();
+      const breakpoint = breakpointDimensions.find(size => Number(size) < this.width);
+      this._breakpoint = breakpoint ? RESPONSIVE_BREAKPOINTS[breakpoint] : RESPONSIVE_BREAKPOINTS["0"];
+    }
     /**
      * Updates the expanded attribute for each ui5-wizard-tab based on the ui5-wizard width
      * @private
@@ -462,31 +352,28 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     _adjustHeaderOverflow() {
       let counter = 0;
       let isForward = true;
-      const iWidth = this.width;
-      const iCurrStep = this.getSelectedStepIndex();
-      const iStepsToShow = this.steps.length ? Math.floor(iWidth / MIN_STEP_WIDTH_WITH_TITLE) : Math.floor(iWidth / MIN_STEP_WIDTH_NO_TITLE);
-      const tabs = this.shadowRoot.querySelectorAll("[ui5-wizard-tab]");
+      const tabs = this.stepsInHeaderDOM;
       if (!tabs.length) {
         return;
       }
-      [].forEach.call(tabs, (step, index) => {
-        step.setAttribute(EXPANDED_STEP, false);
-        step.setAttribute(BEFORE_EXPANDED_STEP, false);
-        step.setAttribute(AFTER_EXPANDED_STEP, false);
-
+      const iWidth = this.progressNavigatorListDOM.getBoundingClientRect().width;
+      const iCurrStep = this.getSelectedStepIndex();
+      const iStepsToShow = this.steps.length ? Math.floor(iWidth / MIN_STEP_WIDTH_WITH_TITLE) : Math.floor(iWidth / MIN_STEP_WIDTH_NO_TITLE);
+      [...tabs].forEach((step, index) => {
+        step.setAttribute(EXPANDED_STEP, "false");
+        step.setAttribute(BEFORE_EXPANDED_STEP, "false");
+        step.setAttribute(AFTER_EXPANDED_STEP, "false");
         // Add "data-ui5-wizard-after-current-tab" to all tabs after the current one
         if (index > iCurrStep) {
-          tabs[index].setAttribute(AFTER_CURRENT_STEP, true);
+          tabs[index].setAttribute(AFTER_CURRENT_STEP, "true");
         } else {
           tabs[index].removeAttribute(AFTER_CURRENT_STEP);
         }
       });
-
       // Add "data-ui5-wizard-expanded-tab" to the current step
       if (tabs[iCurrStep]) {
-        tabs[iCurrStep].setAttribute(EXPANDED_STEP, true);
+        tabs[iCurrStep].setAttribute(EXPANDED_STEP, "true");
       }
-
       // Set the "data-ui5-wizard-expanded-tab" to the steps that are expanded
       // The algorithm is as follows:
       // 1. A step towards the end is expanded
@@ -498,30 +385,29 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
           counter += 1;
         }
         if (isForward && tabs[iCurrStep + counter]) {
-          tabs[iCurrStep + counter].setAttribute(EXPANDED_STEP, true);
+          tabs[iCurrStep + counter].setAttribute(EXPANDED_STEP, "true");
           isForward = !isForward;
         } else if (!isForward && tabs[iCurrStep - counter]) {
-          tabs[iCurrStep - counter].setAttribute(EXPANDED_STEP, true);
+          tabs[iCurrStep - counter].setAttribute(EXPANDED_STEP, "true");
           isForward = !isForward;
         } else if (tabs[iCurrStep + counter + 1]) {
           counter += 1;
-          tabs[iCurrStep + counter].setAttribute(EXPANDED_STEP, true);
+          tabs[iCurrStep + counter].setAttribute(EXPANDED_STEP, "true");
           isForward = true;
         } else if (tabs[iCurrStep - counter]) {
-          tabs[iCurrStep - counter].setAttribute(EXPANDED_STEP, true);
+          tabs[iCurrStep - counter].setAttribute(EXPANDED_STEP, "true");
           counter += 1;
           isForward = false;
         }
       }
-
       // mark the topmost steps of both groups (in the beginning and the end),
       // using the "data-ui5-wizard-after-current-tab" and "data-ui5-wizard-expanded-tab-prev" attributes
       for (let i = 0; i < tabs.length; i++) {
         if (tabs[i].getAttribute(EXPANDED_STEP) === "true" && tabs[i - 1] && tabs[i - 1].getAttribute(EXPANDED_STEP) === "false") {
-          tabs[i - 1].setAttribute(BEFORE_EXPANDED_STEP, true);
+          tabs[i - 1].setAttribute(BEFORE_EXPANDED_STEP, "true");
         }
         if (tabs[i].getAttribute(EXPANDED_STEP) === "false" && tabs[i - 1] && tabs[i - 1].getAttribute(EXPANDED_STEP) === "true") {
-          tabs[i].setAttribute(AFTER_EXPANDED_STEP, true);
+          tabs[i].setAttribute(AFTER_EXPANDED_STEP, "true");
           break;
         }
       }
@@ -534,29 +420,31 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       const iStepNumber = this.stepsInHeaderDOM.indexOf(selectedStep);
       return selectedStep.getAttribute(EXPANDED_STEP) === "false" && selectedStep.getAttribute(AFTER_EXPANDED_STEP) === "true" && iStepNumber + 1 < this.steps.length;
     }
-    async _showPopover(oDomTarget, bAtStart) {
-      const tabs = Array.from(this.shadowRoot.querySelectorAll("[ui5-wizard-tab]"));
+    async _showPopover(oDomTarget, isAtStart) {
+      const tabs = Array.from(this.stepsInHeaderDOM);
       this._groupedTabs = [];
-      const iFromStep = bAtStart ? 0 : this.stepsInHeaderDOM.indexOf(oDomTarget);
-      const iToStep = bAtStart ? this.stepsInHeaderDOM.indexOf(oDomTarget) : tabs.length - 1;
+      const iFromStep = isAtStart ? 0 : this.stepsInHeaderDOM.indexOf(oDomTarget);
+      const iToStep = isAtStart ? this.stepsInHeaderDOM.indexOf(oDomTarget) : tabs.length - 1;
       for (let i = iFromStep; i <= iToStep; i++) {
         this._groupedTabs.push(tabs[i]);
       }
       const responsivePopover = await this._respPopover();
       responsivePopover.showAt(oDomTarget);
     }
-    async _onGroupedTabClick(event) {
-      if (this._isGroupAtStart(event.target)) {
-        return this._showPopover(event.target, true);
+    async _onGroupedTabClick(e) {
+      const eTarget = e.target;
+      if (this._isGroupAtStart(eTarget)) {
+        return this._showPopover(eTarget, true);
       }
-      if (this._isGroupAtEnd(event.target)) {
-        return this._showPopover(event.target, false);
+      if (this._isGroupAtEnd(eTarget)) {
+        return this._showPopover(eTarget, false);
       }
     }
-    _onOverflowStepButtonClick(event) {
-      const tabs = Array.from(this.shadowRoot.querySelectorAll("[ui5-wizard-tab]"));
-      const stepRefId = event.target.getAttribute("data-ui5-header-tab-ref-id");
-      const stepToSelect = this.slottedSteps[stepRefId - 1];
+    _onOverflowStepButtonClick(e) {
+      const tabs = Array.from(this.stepsInHeaderDOM);
+      const eTarget = e.target;
+      const stepRefId = eTarget.getAttribute("data-ui5-header-tab-ref-id");
+      const stepToSelect = this.slottedSteps[Number(stepRefId) - 1];
       const selectedStep = this.selectedStep;
       const newlySelectedIndex = this.slottedSteps.indexOf(stepToSelect);
       this.switchSelectionFromOldToNewStep(selectedStep, stepToSelect, newlySelectedIndex, true);
@@ -571,7 +459,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       const staticAreaItem = await this.getStaticAreaItemDomRef();
       return staticAreaItem.querySelector(`.ui5-wizard-responsive-popover`);
     }
-
     /**
      * Called upon <code>onScroll</code>.
      * Selects the closest step, based on the user scroll position.
@@ -580,26 +467,23 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
      */
     changeSelectionByScroll(scrollPos) {
       const newlySelectedIndex = this.getClosestStepIndexByScrollPos(scrollPos);
-
+      const stepToSelect = this.slottedSteps[newlySelectedIndex];
       // Skip if already selected - stop.
       if (this.selectedStepIndex === newlySelectedIndex) {
         return;
       }
-
       // If the calculated index is in range,
       // change selection and fire "step-change".
-      if (newlySelectedIndex >= 0 && newlySelectedIndex <= this.stepsCount - 1) {
-        const stepToSelect = this.slottedSteps[newlySelectedIndex];
+      if (!stepToSelect.disabled && newlySelectedIndex >= 0 && newlySelectedIndex <= this.stepsCount - 1) {
         this.switchSelectionFromOldToNewStep(this.selectedStep, stepToSelect, newlySelectedIndex, false);
         this.selectionRequestedByScroll = true;
       }
     }
-
     /**
      * Called upon <code>onSelectionChangeRequested</code>.
      * Selects the external step (ui5-wizard-step),
      * based on the clicked or activated via keyboard step in the header (ui5-wizard-tab).
-     * @param {HTMLElement} stepInHeader the step equivalent in the header
+     * @param {WizardTab} stepInHeader the step equivalent in the header
      * @private
      */
     async changeSelectionByStepAction(stepInHeader) {
@@ -608,12 +492,12 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       const stepToSelect = this.getStepByRefId(stepRefId);
       const bExpanded = stepInHeader.getAttribute(EXPANDED_STEP) === "true";
       const newlySelectedIndex = this.slottedSteps.indexOf(stepToSelect);
-      const firstFocusableElement = await (0, _FocusableElements.getFirstFocusableElement)(stepToSelect.firstElementChild);
+      const firstElementChild = stepToSelect.firstElementChild;
+      const firstFocusableElement = await (0, _FocusableElements.getFirstFocusableElement)(firstElementChild);
       if (firstFocusableElement) {
         // Focus the first focusable element within the step content corresponding to the currently focused tab
         firstFocusableElement.focus();
       }
-
       // If the currently selected (active) step is clicked,
       // just scroll to its starting point and stop.
       if (selectedStep === stepToSelect) {
@@ -633,11 +517,14 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       return contentHeight;
     }
     getStepAriaLabelText(step, ariaLabel) {
-      return Wizard.i18nBundle.getText(_i18nDefaults.WIZARD_STEP_ARIA_LABEL, ariaLabel);
+      return Wizard_1.i18nBundle.getText(_i18nDefaults.WIZARD_STEP_ARIA_LABEL, ariaLabel);
     }
     get stepsDOM() {
       return Array.from(this.shadowRoot.querySelectorAll(".ui5-wiz-content-item"));
     }
+    get progressNavigatorListDOM() {
+      return this.shadowRoot.querySelector(".ui5-wiz-nav-list");
+    }
     get _stepsInHeader() {
       return this.getStepsInfo();
     }
@@ -686,50 +573,43 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     get enabledStepsInHeaderDOM() {
       return this.stepsInHeaderDOM;
     }
-    get phoneMode() {
-      if ((0, _Device.isPhone)()) {
-        return true;
-      }
-      return this.width <= Wizard.PHONE_BREAKPOINT;
-    }
     get navAriaRoleDescription() {
-      return Wizard.i18nBundle.getText(_i18nDefaults.WIZARD_NAV_ARIA_ROLE_DESCRIPTION);
+      return Wizard_1.i18nBundle.getText(_i18nDefaults.WIZARD_NAV_ARIA_ROLE_DESCRIPTION);
     }
     get navAriaLabelText() {
-      return Wizard.i18nBundle.getText(_i18nDefaults.WIZARD_NAV_ARIA_LABEL);
+      return Wizard_1.i18nBundle.getText(_i18nDefaults.WIZARD_NAV_ARIA_LABEL);
     }
     get navAriaDescribedbyText() {
-      return Wizard.i18nBundle.getText(_i18nDefaults.WIZARD_LIST_ARIA_DESCRIBEDBY);
+      return Wizard_1.i18nBundle.getText(_i18nDefaults.WIZARD_LIST_ARIA_DESCRIBEDBY);
     }
     get listAriaLabelText() {
-      return Wizard.i18nBundle.getText(_i18nDefaults.WIZARD_LIST_ARIA_LABEL);
+      return Wizard_1.i18nBundle.getText(_i18nDefaults.WIZARD_LIST_ARIA_LABEL);
     }
     get actionSheetStepsText() {
-      return Wizard.i18nBundle.getText(_i18nDefaults.WIZARD_ACTIONSHEET_STEPS_ARIA_LABEL);
+      return Wizard_1.i18nBundle.getText(_i18nDefaults.WIZARD_ACTIONSHEET_STEPS_ARIA_LABEL);
     }
     get navStepDefaultHeading() {
-      return Wizard.i18nBundle.getText(_i18nDefaults.WIZARD_NAV_STEP_DEFAULT_HEADING);
+      return Wizard_1.i18nBundle.getText(_i18nDefaults.WIZARD_NAV_STEP_DEFAULT_HEADING);
     }
     get optionalStepText() {
-      return Wizard.i18nBundle.getText(_i18nDefaults.WIZARD_OPTIONAL_STEP_ARIA_LABEL);
+      return Wizard_1.i18nBundle.getText(_i18nDefaults.WIZARD_OPTIONAL_STEP_ARIA_LABEL);
     }
     get activeStepText() {
-      return Wizard.i18nBundle.getText(_i18nDefaults.WIZARD_STEP_ACTIVE);
+      return Wizard_1.i18nBundle.getText(_i18nDefaults.WIZARD_STEP_ACTIVE);
     }
     get inactiveStepText() {
-      return Wizard.i18nBundle.getText(_i18nDefaults.WIZARD_STEP_INACTIVE);
+      return Wizard_1.i18nBundle.getText(_i18nDefaults.WIZARD_STEP_INACTIVE);
     }
     get ariaLabelText() {
-      return Wizard.i18nBundle.getText(_i18nDefaults.WIZARD_NAV_ARIA_ROLE_DESCRIPTION);
+      return Wizard_1.i18nBundle.getText(_i18nDefaults.WIZARD_NAV_ARIA_ROLE_DESCRIPTION);
     }
     get effectiveStepSwitchThreshold() {
       return (0, _clamp.default)(this.stepSwitchThreshold, STEP_SWITCH_THRESHOLDS.MIN, STEP_SWITCH_THRESHOLDS.MAX);
     }
-
     /**
      * Returns an array of data objects, based on the user defined steps
      * to later build the steps (tabs) within the header.
-     * @returns {Array<Object>}
+     * @returns {Array<StepInfo>}
      * @private
      */
     getStepsInfo() {
@@ -741,7 +621,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       this._adjustHeaderOverflow();
       return this.steps.map((step, idx) => {
         const pos = idx + 1;
-
         // Hide separator if it's the last step and it's not a branching one
         const hideSeparator = idx === stepsCount - 1 && !step.branching;
         const isOptional = step.subtitleText ? this.optionalStepText : "";
@@ -753,7 +632,7 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
           "ariaPosinset": pos,
           "ariaLabel": this.getStepAriaLabelText(step, ariaLabel)
         };
-        return {
+        const stepInfo = {
           icon: step.icon,
           titleText: step.titleText,
           subtitleText: step.subtitleText,
@@ -771,9 +650,9 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
             zIndex: isAfterCurrent ? --inintialZIndex : 1
           }
         };
+        return stepInfo;
       });
     }
-
     /**
      * Returns the index of the selected step.
      * @returns {Integer}
@@ -785,7 +664,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       }
       return 0;
     }
-
     /**
      * Returns the index of the last enabled step.
      * @returns {Integer}
@@ -809,7 +687,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     getStepWrapperByIdx(idx) {
       return this.getStepWrapperByRefId(this.steps[idx]._id);
     }
-
     /**
      * Scrolls to the content of the selected step, used in <code>onAfterRendering</cod>.
      * @private
@@ -820,7 +697,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       }
       this.selectionRequestedByScroll = false;
     }
-
     /**
      * Scrolls to the content item within the <code>ui5-wizard</code> shadowDOM
      * by given step index.
@@ -831,7 +707,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
     scrollToContentItem(stepIndex) {
       this.contentDOM.scrollTop = this.getClosestScrollPosByStepIndex(stepIndex);
     }
-
     /**
      * Returns to closest scroll position for the given step index.
      *
@@ -842,7 +717,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       if (stepIndex === 0) {
         return 0;
       }
-
       // It's possible to have [enabled - 0, disabled - 1, enabled - 2, disabled - 3] step definition and similar.
       // Consider selection of the third step at index 2, the wizard should scroll where the previous step ends,
       // but in this case the 2nd step is disabled, so we have to fallback to the first possible step.
@@ -853,7 +727,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       }
       return 0;
     }
-
     /**
      * Returns the closest step index by given scroll position.
      * @private
@@ -873,12 +746,11 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       }
       return this.selectedStepIndex;
     }
-
     /**
      * Switches the selection from the old step to the newly selected step.
      *
-     * @param {HTMLElement} selectedStep the old step
-     * @param {HTMLElement} stepToSelect the step to be selected
+     * @param {WizardStep} selectedStep the old step
+     * @param {WizardStep} stepToSelect the step to be selected
      * @param {Integer} stepToSelectIndex the index of the newly selected step
      * @param {boolean} changeWithClick the selection changed due to user click in the step navigation
      * @private
@@ -898,7 +770,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
         this.selectedStepIndex = stepToSelectIndex;
       }
     }
-
     /**
      * Sorter method for sorting an array in ascending order.
      * @private
@@ -912,7 +783,65 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/UI5Element", "sap/
       }
       return 0;
     }
-  }
+  };
+  __decorate([(0, _property.default)({
+    validator: String,
+    defaultValue: _WizardContentLayout.default.MultipleSteps
+  })], Wizard.prototype, "contentLayout", void 0);
+  __decorate([(0, _property.default)({
+    validator: _Float.default
+  })], Wizard.prototype, "width", void 0);
+  __decorate([(0, _property.default)({
+    validator: _Float.default,
+    defaultValue: STEP_SWITCH_THRESHOLDS.DEFAULT
+  })], Wizard.prototype, "stepSwitchThreshold", void 0);
+  __decorate([(0, _property.default)({
+    validator: _Float.default
+  })], Wizard.prototype, "contentHeight", void 0);
+  __decorate([(0, _property.default)({
+    type: Object,
+    multiple: true
+  })], Wizard.prototype, "_groupedTabs", void 0);
+  __decorate([(0, _property.default)()], Wizard.prototype, "_breakpoint", void 0);
+  __decorate([(0, _slot.default)({
+    "default": true,
+    type: HTMLElement,
+    "individualSlots": true,
+    invalidateOnChildChange: true
+  })], Wizard.prototype, "steps", void 0);
+  Wizard = Wizard_1 = __decorate([(0, _customElement.default)({
+    tag: "ui5-wizard",
+    languageAware: true,
+    fastNavigation: true,
+    renderer: _LitRenderer.default,
+    styles: _Wizard.default,
+    staticAreaStyles: _WizardPopover.default,
+    template: _WizardTemplate.default,
+    staticAreaTemplate: _WizardPopoverTemplate.default,
+    dependencies: [_WizardTab.default, _WizardStep.default, _ResponsivePopover.default, _Button.default]
+  })
+  /**
+   * Fired when the step is changed by user interaction - either with scrolling,
+   * or by clicking on the steps within the component header.
+   *
+   * @event sap.ui.webc.fiori.Wizard#step-change
+   * @param {sap.ui.webc.fiori.IWizardStep} step The new step.
+   * @param {sap.ui.webc.fiori.IWizardStep} previousStep The previous step.
+   * @param {boolean} changeWithClick The step change occurs due to user's click or 'Enter'/'Space' key press on step within the navigation.
+   * @public
+   */, (0, _event.default)("step-change", {
+    detail: {
+      step: {
+        type: HTMLElement
+      },
+      previousStep: {
+        type: HTMLElement
+      },
+      changeWithClick: {
+        Boolean
+      }
+    }
+  })], Wizard);
   Wizard.define();
   var _default = Wizard;
   _exports.default = _default;