@openui5/sap.ui.webc.fiori 1.103.1 → 1.106.0

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

@@ -1,567 +1,1022 @@
-sap.ui.define(['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 (UI5Element, litRender, i18nBundle, ItemNavigation, NavigationMode, Float, clamp, ResizeHandler, Device, debounce, FocusableElements, Button, ResponsivePopover, i18nDefaults, WizardTab, WizardStep, WizardTemplate_lit, WizardPopoverTemplate_lit, Wizard_css, WizardPopover_css) { 'use strict';
-
-	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
-
-	var UI5Element__default = /*#__PURE__*/_interopDefaultLegacy(UI5Element);
-	var litRender__default = /*#__PURE__*/_interopDefaultLegacy(litRender);
-	var ItemNavigation__default = /*#__PURE__*/_interopDefaultLegacy(ItemNavigation);
-	var NavigationMode__default = /*#__PURE__*/_interopDefaultLegacy(NavigationMode);
-	var Float__default = /*#__PURE__*/_interopDefaultLegacy(Float);
-	var clamp__default = /*#__PURE__*/_interopDefaultLegacy(clamp);
-	var ResizeHandler__default = /*#__PURE__*/_interopDefaultLegacy(ResizeHandler);
-	var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
-	var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
-	var ResponsivePopover__default = /*#__PURE__*/_interopDefaultLegacy(ResponsivePopover);
-
-	const MIN_STEP_WIDTH_NO_TITLE = 64;
-	const MIN_STEP_WIDTH_WITH_TITLE = 200;
-	const EXPANDED_STEP = "data-ui5-wizard-expanded-tab";
-	const AFTER_EXPANDED_STEP = "data-ui5-wizard-expanded-tab-next";
-	const AFTER_CURRENT_STEP = "data-ui5-wizard-after-current-tab";
-	const BEFORE_EXPANDED_STEP = "data-ui5-wizard-expanded-tab-prev";
-	const STEP_SWITCH_THRESHOLDS = {
-		MIN: 0.5,
-		DEFAULT: 0.7,
-		MAX: 1,
-	};
-	const metadata = {
-		tag: "ui5-wizard",
-		managedSlots: true,
-		fastNavigation: true,
-		properties:  {
-			width: {
-				type: Float__default,
-			},
-			stepSwitchThreshold: {
-				type: Float__default,
-				defaultValue: STEP_SWITCH_THRESHOLDS.DEFAULT,
-			},
-			contentHeight: {
-				type: Float__default,
-			},
-			_groupedTabs: {
-				type: String,
-				multiple: true,
-			},
-		},
-		slots:  {
-			"default": {
-				propertyName: "steps",
-				type: HTMLElement,
-				"individualSlots": true,
-				invalidateOnChildChange: true,
-			},
-		},
-		events:  {
-			"step-change": {
-				detail: {
-					step: { type: HTMLElement },
-					previousStep: { type: HTMLElement },
-					changeWithClick: { Boolean },
-				},
-			},
-		},
-	};
-	class Wizard extends UI5Element__default {
-		constructor() {
-			super();
-			this.stepScrollOffsets = [];
-			this._groupedTabs = [];
-			this.selectedStepIndex = 0;
-			this.previouslySelectedStepIndex = 0;
-			this.selectionRequestedByClick = false;
-			this._prevWidth = 0;
-			this._prevContentHeight = 0;
-			this.selectionRequestedByScroll = false;
-			this._itemNavigation = new ItemNavigation__default(this, {
-				navigationMode: NavigationMode__default.Auto,
-				getItemsCallback: () => this.enabledStepsInHeaderDOM,
-			});
-			this._onStepResize = this.onStepResize.bind(this);
-		}
-		static get metadata() {
-			return metadata;
-		}
-		static get render() {
-			return litRender__default;
-		}
-		get classes() {
-			return {
-				popover: {
-					"ui5-wizard-responsive-popover": true,
-					"ui5-wizard-popover": !Device.isPhone(),
-					"ui5-wizard-dialog": Device.isPhone(),
-				},
-			};
-		}
-		static get styles() {
-			return Wizard_css;
-		}
-		static get staticAreaStyles() {
-			return WizardPopover_css;
-		}
-		static get template() {
-			return WizardTemplate_lit;
-		}
-		static get dependencies() {
-			return [
-				WizardTab,
-				WizardStep,
-				ResponsivePopover__default,
-				Button__default,
-			];
-		}
-		static async onDefine() {
-			Wizard.i18nBundle = await i18nBundle.getI18nBundle("@ui5/webcomponents-fiori");
-		}
-		static get PHONE_BREAKPOINT() {
-			return 599;
-		}
-		static get SCROLL_DEBOUNCE_RATE() {
-			return 25;
-		}
-		static get staticAreaTemplate() {
-			return WizardPopoverTemplate_lit;
-		}
-		onExitDOM() {
-			this.detachStepsResizeObserver();
-		}
-		onBeforeRendering() {
-			this.syncSelection();
-		}
-		onAfterRendering() {
-			this.storeStepScrollOffsets();
-			if (this.previouslySelectedStepIndex !== this.selectedStepIndex) {
-				this.scrollToSelectedStep();
-			}
-			this.attachStepsResizeObserver();
-			this.previouslySelectedStepIndex = this.selectedStepIndex;
-		}
-		syncSelection() {
-			if (this.stepsCount === 0) {
-				return;
-			}
-			if (this.selectedStepsCount === 0) {
-				this.selectFirstStep();
-				console.warn("Selecting the first step: no selected step is defined.");
-			}
-			if (this.selectedStepsCount > 1) {
-				this.selectLastSelectedStep();
-				console.warn(`Selecting the last step defined as selected: multiple selected steps are defined.`);
-			}
-			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.");
-			}
-			this.selectedStepIndex = this.getSelectedStepIndex();
-		}
-		selectFirstStep() {
-			this.deselectAll();
-			this.slottedSteps[0].selected = true;
-			this.slottedSteps[0].disabled = false;
-		}
-		selectLastSelectedStep() {
-			const lastSelectedStep = this.lastSelectedStep;
-			if (lastSelectedStep) {
-				this.deselectAll();
-				lastSelectedStep.selected = true;
-				lastSelectedStep.disabled = false;
-			}
-		}
-		deselectAll() {
-			this.slottedSteps.forEach(step => {
-				step.selected = false;
-			});
-		}
-		storeStepScrollOffsets() {
-			this.stepScrollOffsets = this.slottedSteps.map(step => {
-				const contentItem = this.getStepWrapperByRefId(step._id);
-				return contentItem.offsetTop + contentItem.offsetHeight;
-			});
-		}
-		onSelectionChangeRequested(event) {
-			this.selectionRequestedByClick = true;
-			this.changeSelectionByStepAction(event.target);
-		}
-		onScroll(event) {
-			if (this.selectionRequestedByClick) {
-				this.selectionRequestedByClick = false;
-				return;
-			}
-			debounce__default(this.changeSelectionByScroll.bind(this, event.target.scrollTop), Wizard.SCROLL_DEBOUNCE_RATE);
-		}
-		onStepInHeaderFocused(event) {
-			this._itemNavigation.setCurrentItem(event.target);
-		}
-		onStepResize() {
-			this.width = this.getBoundingClientRect().width;
-			this.contentHeight = this.getContentHeight();
-			if (this._prevWidth !== this.width || this.contentHeight !== this._prevContentHeight) {
-				this._closeRespPopover();
-			}
-			this._prevWidth = this.width;
-			this._prevContentHeight = this.contentHeight;
-		}
-		attachStepsResizeObserver() {
-			this.stepsDOM.forEach(stepDOM => {
-				ResizeHandler__default.deregister(stepDOM, this._onStepResize);
-				ResizeHandler__default.register(stepDOM, this._onStepResize);
-			});
-		}
-		detachStepsResizeObserver() {
-			this.stepsDOM.forEach(stepDOM => {
-				ResizeHandler__default.deregister(stepDOM, this._onStepResize);
-			});
-		}
-		_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]");
-			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);
-				if (index > iCurrStep) {
-					tabs[index].setAttribute(AFTER_CURRENT_STEP, true);
-				} else {
-					tabs[index].removeAttribute(AFTER_CURRENT_STEP);
-				}
-			});
-			if (tabs[iCurrStep]) {
-				tabs[iCurrStep].setAttribute(EXPANDED_STEP, true);
-			}
-			for (let i = 1; i < iStepsToShow; i++) {
-				if (isForward) {
-					counter += 1;
-				}
-				if (isForward && tabs[iCurrStep + counter]) {
-					tabs[iCurrStep + counter].setAttribute(EXPANDED_STEP, true);
-					isForward = !isForward;
-				} else if (!isForward && tabs[iCurrStep - counter]) {
-					tabs[iCurrStep - counter].setAttribute(EXPANDED_STEP, true);
-					isForward = !isForward;
-				} else if (tabs[iCurrStep + counter + 1]) {
-					counter += 1;
-					tabs[iCurrStep + counter].setAttribute(EXPANDED_STEP, true);
-					isForward = true;
-				} else if (tabs[iCurrStep - counter]) {
-					tabs[iCurrStep - counter].setAttribute(EXPANDED_STEP, true);
-					counter += 1;
-					isForward = false;
-				}
-			}
-			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);
-				}
-				if (tabs[i].getAttribute(EXPANDED_STEP) === "false" && tabs[i - 1] && tabs[i - 1].getAttribute(EXPANDED_STEP) === "true") {
-					tabs[i].setAttribute(AFTER_EXPANDED_STEP, true);
-					break;
-				}
-			}
-		}
-		_isGroupAtStart(selectedStep) {
-			const iStepNumber = this.stepsInHeaderDOM.indexOf(selectedStep);
-			return selectedStep.getAttribute(EXPANDED_STEP) === "false" && selectedStep.getAttribute(BEFORE_EXPANDED_STEP) === "true" && iStepNumber > 0;
-		}
-		_isGroupAtEnd(selectedStep) {
-			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]"));
-			this._groupedTabs = [];
-			const iFromStep = bAtStart ? 0 : this.stepsInHeaderDOM.indexOf(oDomTarget);
-			const iToStep = bAtStart ? 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);
-			}
-			if (this._isGroupAtEnd(event.target)) {
-				return this._showPopover(event.target, 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];
-			const selectedStep = this.selectedStep;
-			const newlySelectedIndex = this.slottedSteps.indexOf(stepToSelect);
-			this.switchSelectionFromOldToNewStep(selectedStep, stepToSelect, newlySelectedIndex, true);
-			this._closeRespPopover();
-			tabs[newlySelectedIndex].focus();
-		}
-		async _closeRespPopover() {
-			const responsivePopover = await this._respPopover();
-			responsivePopover && responsivePopover.close();
-		}
-		async _respPopover() {
-			const staticAreaItem = await this.getStaticAreaItemDomRef();
-			return staticAreaItem.querySelector(`.ui5-wizard-responsive-popover`);
-		}
-		changeSelectionByScroll(scrollPos) {
-			const newlySelectedIndex = this.getClosestStepIndexByScrollPos(scrollPos);
-			if (this.selectedStepIndex === newlySelectedIndex) {
-				return;
-			}
-			if (newlySelectedIndex >= 0 && newlySelectedIndex <= this.stepsCount - 1) {
-				const stepToSelect = this.slottedSteps[newlySelectedIndex];
-				this.switchSelectionFromOldToNewStep(this.selectedStep, stepToSelect, newlySelectedIndex, false);
-				this.selectionRequestedByScroll = true;
-			}
-		}
-		async changeSelectionByStepAction(stepInHeader) {
-			const stepRefId = stepInHeader.getAttribute("data-ui5-content-ref-id");
-			const selectedStep = this.selectedStep;
-			const stepToSelect = this.getStepByRefId(stepRefId);
-			const bExpanded = stepInHeader.getAttribute(EXPANDED_STEP) === "true";
-			const newlySelectedIndex = this.slottedSteps.indexOf(stepToSelect);
-			const firstFocusableElement = await FocusableElements.getFirstFocusableElement(stepToSelect.firstElementChild);
-			if (firstFocusableElement) {
-				firstFocusableElement.focus();
-			}
-			if (selectedStep === stepToSelect) {
-				this.scrollToContentItem(this.selectedStepIndex);
-				return;
-			}
-			if (bExpanded || (!bExpanded && (newlySelectedIndex === 0 || newlySelectedIndex === this.steps.length - 1))) {
-				this.switchSelectionFromOldToNewStep(selectedStep, stepToSelect, newlySelectedIndex, true);
-			}
-		}
-		getContentHeight() {
-			let contentHeight = 0;
-			this.stepsDOM.forEach(step => {
-				contentHeight += step.getBoundingClientRect().height;
-			});
-			return contentHeight;
-		}
-		getStepAriaLabelText(step, ariaLabel) {
-			return Wizard.i18nBundle.getText(i18nDefaults.WIZARD_STEP_ARIA_LABEL, ariaLabel);
-		}
-		get stepsDOM() {
-			return Array.from(this.shadowRoot.querySelectorAll(".ui5-wiz-content-item"));
-		}
-		get _stepsInHeader() {
-			return this.getStepsInfo();
-		}
-		get _steps() {
-			const lastEnabledStepIndex = this.getLastEnabledStepIndex();
-			const stepsInfo = this.getStepsInfo();
-			return this.steps.map((step, idx) => {
-				step.stretch = idx === lastEnabledStepIndex;
-				step.stepContentAriaLabel = `${this.navStepDefaultHeading} ${stepsInfo[idx].number} ${stepsInfo[idx].titleText}`;
-				return step;
-			});
-		}
-		get stepsCount() {
-			return this.slottedSteps.length;
-		}
-		get selectedStep() {
-			if (this.selectedStepsCount) {
-				return this.selectedSteps[0];
-			}
-			return null;
-		}
-		get lastSelectedStep() {
-			if (this.selectedStepsCount) {
-				return this.selectedSteps[this.selectedStepsCount - 1];
-			}
-			return null;
-		}
-		get selectedSteps() {
-			return this.slottedSteps.filter(step => step.selected);
-		}
-		get enabledSteps() {
-			return this.slottedSteps.filter(step => !step.disabled);
-		}
-		get selectedStepsCount() {
-			return this.selectedSteps.length;
-		}
-		get slottedSteps() {
-			return this.getSlottedNodes("steps");
-		}
-		get contentDOM() {
-			return this.shadowRoot.querySelector(`.ui5-wiz-content`);
-		}
-		get stepsInHeaderDOM() {
-			return Array.from(this.shadowRoot.querySelectorAll("[ui5-wizard-tab]"));
-		}
-		get enabledStepsInHeaderDOM() {
-			return this.stepsInHeaderDOM;
-		}
-		get phoneMode() {
-			if (Device.isPhone()) {
-				return true;
-			}
-			return this.width <= Wizard.PHONE_BREAKPOINT;
-		}
-		get navAriaRoleDescription() {
-			return Wizard.i18nBundle.getText(i18nDefaults.WIZARD_NAV_ARIA_ROLE_DESCRIPTION);
-		}
-		get navAriaLabelText() {
-			return Wizard.i18nBundle.getText(i18nDefaults.WIZARD_NAV_ARIA_LABEL);
-		}
-		get navAriaDescribedbyText() {
-			return Wizard.i18nBundle.getText(i18nDefaults.WIZARD_LIST_ARIA_DESCRIBEDBY);
-		}
-		get listAriaLabelText() {
-			return Wizard.i18nBundle.getText(i18nDefaults.WIZARD_LIST_ARIA_LABEL);
-		}
-		get actionSheetStepsText() {
-			return Wizard.i18nBundle.getText(i18nDefaults.WIZARD_ACTIONSHEET_STEPS_ARIA_LABEL);
-		}
-		get navStepDefaultHeading() {
-			return Wizard.i18nBundle.getText(i18nDefaults.WIZARD_NAV_STEP_DEFAULT_HEADING);
-		}
-		get optionalStepText() {
-			return Wizard.i18nBundle.getText(i18nDefaults.WIZARD_OPTIONAL_STEP_ARIA_LABEL);
-		}
-		get activeStepText() {
-			return Wizard.i18nBundle.getText(i18nDefaults.WIZARD_STEP_ACTIVE);
-		}
-		get inactiveStepText() {
-			return Wizard.i18nBundle.getText(i18nDefaults.WIZARD_STEP_INACTIVE);
-		}
-		get ariaLabelText() {
-			return Wizard.i18nBundle.getText(i18nDefaults.WIZARD_NAV_ARIA_ROLE_DESCRIPTION);
-		}
-		get effectiveStepSwitchThreshold() {
-			return clamp__default(this.stepSwitchThreshold, STEP_SWITCH_THRESHOLDS.MIN, STEP_SWITCH_THRESHOLDS.MAX);
-		}
-		getStepsInfo() {
-			const lastEnabledStepIndex = this.getLastEnabledStepIndex();
-			const stepsCount = this.stepsCount;
-			const selectedStepIndex = this.getSelectedStepIndex();
-			let inintialZIndex = this.steps.length + 10;
-			let accInfo;
-			this._adjustHeaderOverflow();
-			return this.steps.map((step, idx) => {
-				const pos = idx + 1;
-				const hideSeparator = (idx === stepsCount - 1) && !step.branching;
-				const isOptional = step.subtitleText ? this.optionalStepText : "";
-				const stepStateText = step.disabled ? this.inactiveStepText : this.activeStepText;
-				const ariaLabel = (step.titleText ? `${pos} ${step.titleText} ${stepStateText} ${isOptional}` : `${this.navStepDefaultHeading} ${pos} ${stepStateText} ${isOptional}`).trim();
-				const isAfterCurrent = (idx > selectedStepIndex);
-				accInfo = {
-					"ariaSetsize": stepsCount,
-					"ariaPosinset": pos,
-					"ariaLabel": this.getStepAriaLabelText(step, ariaLabel),
-				};
-				return {
-					icon: step.icon,
-					titleText: step.titleText,
-					subtitleText: step.subtitleText,
-					number: pos,
-					selected: step.selected,
-					disabled: step.disabled,
-					hideSeparator,
-					activeSeparator: (idx < lastEnabledStepIndex) && !step.disabled,
-					branchingSeparator: step.branching,
-					pos,
-					accInfo,
-					refStepId: step._id,
-					tabIndex: this.selectedStepIndex === idx ? "0" : "-1",
-					styles: {
-						zIndex: isAfterCurrent ? --inintialZIndex : 1,
-					},
-				};
-			});
-		}
-		getSelectedStepIndex() {
-			if (this.selectedStep) {
-				return this.slottedSteps.indexOf(this.selectedStep);
-			}
-			return 0;
-		}
-		getLastEnabledStepIndex() {
-			let lastEnabledStepIndex = 0;
-			this.slottedSteps.forEach((step, idx) => {
-				if (!step.disabled) {
-					lastEnabledStepIndex = idx;
-				}
-			});
-			return lastEnabledStepIndex;
-		}
-		getStepByRefId(refId) {
-			return this.slottedSteps.find(step => step._id === refId);
-		}
-		getStepWrapperByRefId(refId) {
-			return this.shadowRoot.querySelector(`[data-ui5-content-item-ref-id=${refId}]`);
-		}
-		getStepWrapperByIdx(idx) {
-			return this.getStepWrapperByRefId(this.steps[idx]._id);
-		}
-		scrollToSelectedStep() {
-			if (!this.selectionRequestedByScroll) {
-				this.scrollToContentItem(this.selectedStepIndex);
-			}
-			this.selectionRequestedByScroll = false;
-		}
-		scrollToContentItem(stepIndex) {
-			this.contentDOM.scrollTop = this.getClosestScrollPosByStepIndex(stepIndex);
-		}
-		getClosestScrollPosByStepIndex(stepIndex) {
-			if (stepIndex === 0) {
-				return 0;
-			}
-			for (let closestStepIndex = stepIndex - 1; closestStepIndex >= 0; closestStepIndex--) {
-				if (this.stepScrollOffsets[closestStepIndex] > 0) {
-					return this.stepScrollOffsets[closestStepIndex];
-				}
-			}
-			return 0;
-		}
-		getClosestStepIndexByScrollPos(scrollPos) {
-			for (let closestStepIndex = 0; closestStepIndex <= this.stepScrollOffsets.length - 1; closestStepIndex++) {
-				const stepScrollOffset = this.stepScrollOffsets[closestStepIndex];
-				const step = this.getStepWrapperByIdx(closestStepIndex);
-				const switchStepBoundary = step.offsetTop + (step.offsetHeight * this.effectiveStepSwitchThreshold);
-				if (stepScrollOffset > 0 && scrollPos < stepScrollOffset) {
-					if (scrollPos > switchStepBoundary) {
-						return closestStepIndex + 1;
-					}
-					return closestStepIndex;
-				}
-			}
-			return this.selectedStepIndex;
-		}
-		switchSelectionFromOldToNewStep(selectedStep, stepToSelect, stepToSelectIndex, changeWithClick) {
-			if (selectedStep && stepToSelect) {
-				if (!stepToSelect.disabled) {
-					selectedStep.selected = false;
-					stepToSelect.selected = true;
-				}
-				this.fireEvent("step-change", {
-					step: stepToSelect,
-					previousStep: selectedStep,
-					changeWithClick,
-				});
-				this.selectedStepIndex = stepToSelectIndex;
-			}
-		}
-		sortAscending(a, b) {
-			if (a < b) {
-				return -1;
-			}
-			if (a > b) {
-				return 1;
-			}
-			return 0;
-		}
-	}
-	Wizard.define();
-
-	return Wizard;
-
-});
+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) {
+  "use strict";
+
+  Object.defineProperty(_exports, "__esModule", {
+    value: true
+  });
+  _exports.default = void 0;
+  _UI5Element = _interopRequireDefault(_UI5Element);
+  _LitRenderer = _interopRequireDefault(_LitRenderer);
+  _ItemNavigation = _interopRequireDefault(_ItemNavigation);
+  _NavigationMode = _interopRequireDefault(_NavigationMode);
+  _Float = _interopRequireDefault(_Float);
+  _clamp = _interopRequireDefault(_clamp);
+  _ResizeHandler = _interopRequireDefault(_ResizeHandler);
+  _debounce = _interopRequireDefault(_debounce);
+  _Button = _interopRequireDefault(_Button);
+  _ResponsivePopover = _interopRequireDefault(_ResponsivePopover);
+  _WizardTab = _interopRequireDefault(_WizardTab);
+  _WizardStep = _interopRequireDefault(_WizardStep);
+  _WizardTemplate = _interopRequireDefault(_WizardTemplate);
+  _WizardPopoverTemplate = _interopRequireDefault(_WizardPopoverTemplate);
+  _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
+  const MIN_STEP_WIDTH_NO_TITLE = 64;
+  const MIN_STEP_WIDTH_WITH_TITLE = 200;
+  const EXPANDED_STEP = "data-ui5-wizard-expanded-tab";
+  const AFTER_EXPANDED_STEP = "data-ui5-wizard-expanded-tab-next";
+  const AFTER_CURRENT_STEP = "data-ui5-wizard-after-current-tab";
+  const BEFORE_EXPANDED_STEP = "data-ui5-wizard-expanded-tab-prev";
+  const STEP_SWITCH_THRESHOLDS = {
+    MIN: 0.5,
+    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
+          }
+        }
+      }
+    }
+  };
+  /**
+   * @class
+   *
+   * <h3 class="comment-api-title">Overview</h3>
+   *
+   * The <code>ui5-wizard</code> helps users to complete a complex task by dividing it into sections and guiding them through it.
+   * It has two main areas - a navigation area at the top showing the step sequence and a content area below it.
+   *
+   * <h3>Structure</h3>
+   * <h4>Navigation area</h4>
+   * 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 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>
+   *
+   * <b>Note:</b> If no selected step is defined, the first step will be auto selected.
+   * <br>
+   * <b>Note:</b> If multiple selected steps are defined, the last step will be selected.
+   *
+   * <h3>Keyboard Handling</h3>
+   * The user can navigate using the following keyboard shortcuts:
+   * <br>
+   *
+   * <h4>Wizard Progress Navigation</h4>
+   * <ul>
+   * 	<li>[LEFT], [DOWN] - Focus moves backward to the WizardProgressNavAnchors.</li>
+   * 	<li>[UP], [RIGHT] - Focus moves forward to the WizardProgressNavAnchor.</li>
+   * 	<li>[SPACE] or [ENTER], [RETURN] - Selects an active step</li>
+   * 	<li>[HOME] or [PAGE UP] - Focus goes to the first step</li>
+   * 	<li>[END] or [PAGE DOWN] - Focus goes to the last step</li>
+   * </ul>
+   *
+   * <h4>Fast Navigation</h4>
+   * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up</code>.
+   * In order to use this functionality, you need to import the following module:
+   * <code>import "@ui5/webcomponents-base/dist/features/F6Navigation.js"</code>
+   *
+   * <h4>Content</h4>
+   * The content occupies the main part of the page. It can hold any type of HTML elements.
+   * It's defined by using the <code>ui5-wizard-step</code> as slotted element within the <code>ui5-wizard</code>.
+   *
+   * <h3>Scrolling</h3>
+   * The component handles user scrolling by selecting the closest step, based on the current scroll position
+   * and scrolls to particular place, when the user clicks on the step within the navigation area.
+   * <br><br>
+   *
+   * <b>Important:</b> In order the component's scrolling behaviour to work, it has to be limited from the outside parent element in terms of height.
+   * The component or its parent has to be given percentage or absolute height. Otherwise, the component will be scrolled out with the entire page.
+   * <br><br>
+   * <b>For example:</b>
+   * <br><br>
+   * <code>&lt;ui5-dialog style="height: 80%"&gt;<br></code>
+   * <code>&#9;&lt;ui5-wizard&gt;&lt;/ui5-wizard&gt;<br></code>
+   * <code>&lt;/ui5-dialog&gt;</code>
+   *
+   * <h4>Moving to next step</h4>
+   * The <code>ui5-wizard-step</code> provides the necessary API and it's up to the user of the component to use it to move to the next step.
+   * You have to set its <code>selected</code> property (and remove the <code>disabled</code> one if set) to <code>true</code>.
+   * The <code>ui5-wizard</code> will automatically scroll to the content of the newly selected step.
+   * <br><br>
+   *
+   * The Fiori 3 guidelines recommends having a "nextStep" button in the content area.
+   * You can place a button, or any other type of element to trigger step change, inside the <code>ui5-wizard-step</code>,
+   * and show/hide it when certain fields are filled or user defined criteria is met.
+   *
+   * <h3>Usage</h3>
+   * <h4>When to use:</h4>
+   * When the user has to accomplish a long or unfamiliar task.
+   *
+   * <h4>When not to use:</h4>
+   * When the task has less than 3 steps.
+   *
+   * <h3>Responsive Behavior</h3>
+   * On small widths the step's titleText, subtitleText and separators in the navigation area shrink and from particular point the steps are grouped together and overlap.
+   * 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>)
+   *
+   * @constructor
+   * @author SAP SE
+   * @alias sap.ui.webcomponents.fiori.Wizard
+   * @extends UI5Element
+   * @tagname ui5-wizard
+   * @since 1.0.0-rc.10
+   * @appenddocs WizardStep
+   * @public
+   */
+
+  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;
+      this._itemNavigation = new _ItemNavigation.default(this, {
+        navigationMode: _NavigationMode.default.Auto,
+        getItemsCallback: () => this.enabledStepsInHeaderDOM
+      });
+      this._onStepResize = this.onStepResize.bind(this);
+    }
+
+    static get metadata() {
+      return metadata;
+    }
+
+    static get render() {
+      return _LitRenderer.default;
+    }
+
+    get classes() {
+      return {
+        popover: {
+          "ui5-wizard-responsive-popover": true,
+          "ui5-wizard-popover": !(0, _Device.isPhone)(),
+          "ui5-wizard-dialog": (0, _Device.isPhone)()
+        }
+      };
+    }
+
+    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;
+    }
+
+    static get SCROLL_DEBOUNCE_RATE() {
+      return 25;
+    }
+
+    static get staticAreaTemplate() {
+      return _WizardPopoverTemplate.default;
+    }
+
+    onExitDOM() {
+      this.detachStepsResizeObserver();
+    }
+
+    onBeforeRendering() {
+      this.syncSelection();
+    }
+
+    onAfterRendering() {
+      this.storeStepScrollOffsets();
+
+      if (this.previouslySelectedStepIndex !== this.selectedStepIndex) {
+        this.scrollToSelectedStep();
+      }
+
+      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.
+     * (2) If the selected steps are more than one - the last step is going to be selected.
+     * (3) If the selected step is also disabled - log a warning.
+     * @private
+     */
+
+
+    syncSelection() {
+      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
+     */
+
+
+    selectFirstStep() {
+      this.deselectAll();
+      this.slottedSteps[0].selected = true;
+      this.slottedSteps[0].disabled = false;
+    }
+    /**
+     * Selects the last step from multiple selected ones.
+     * @private
+     */
+
+
+    selectLastSelectedStep() {
+      const lastSelectedStep = this.lastSelectedStep;
+
+      if (lastSelectedStep) {
+        this.deselectAll();
+        lastSelectedStep.selected = true;
+        lastSelectedStep.disabled = false;
+      }
+    }
+    /**
+     * Deselects all steps.
+     * @private
+     */
+
+
+    deselectAll() {
+      this.slottedSteps.forEach(step => {
+        step.selected = false;
+      });
+    }
+    /**
+     * Stores the scroll offsets of the steps,
+     * e.g. the steps' starting point.
+     *
+     * <b>Note:</b> the disabled ones has negative offsets.
+     * @private
+     */
+
+
+    storeStepScrollOffsets() {
+      this.stepScrollOffsets = this.slottedSteps.map(step => {
+        const contentItem = this.getStepWrapperByRefId(step._id);
+        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
+     * @private
+     */
+
+
+    onSelectionChangeRequested(event) {
+      this.selectionRequestedByClick = true;
+      this.changeSelectionByStepAction(event.target);
+    }
+    /**
+     * Handles user scrolling with debouncing.
+     * <b>Note:</b> the handler is bound in the template.
+     * @param {Event} event
+     * @private
+     */
+
+
+    onScroll(event) {
+      if (this.selectionRequestedByClick) {
+        this.selectionRequestedByClick = false;
+        return;
+      }
+
+      (0, _debounce.default)(this.changeSelectionByScroll.bind(this, event.target.scrollTop), Wizard.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
+     * @private
+     */
+
+
+    onStepInHeaderFocused(event) {
+      this._itemNavigation.setCurrentItem(event.target);
+    }
+    /**
+     * Handles resize in order to:
+     * (1) sync steps' scroll offset and selection
+     * (2) adapt navition step header
+     * @private
+     */
+
+
+    onStepResize() {
+      this.width = this.getBoundingClientRect().width;
+      this.contentHeight = this.getContentHeight();
+
+      if (this._prevWidth !== this.width || this.contentHeight !== this._prevContentHeight) {
+        this._closeRespPopover();
+      }
+
+      this._prevWidth = this.width;
+      this._prevContentHeight = this.contentHeight;
+    }
+
+    attachStepsResizeObserver() {
+      this.stepsDOM.forEach(stepDOM => {
+        _ResizeHandler.default.deregister(stepDOM, this._onStepResize);
+
+        _ResizeHandler.default.register(stepDOM, this._onStepResize);
+      });
+    }
+
+    detachStepsResizeObserver() {
+      this.stepsDOM.forEach(stepDOM => {
+        _ResizeHandler.default.deregister(stepDOM, this._onStepResize);
+      });
+    }
+    /**
+     * Updates the expanded attribute for each ui5-wizard-tab based on the ui5-wizard width
+     * @private
+     */
+
+
+    _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]");
+
+      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); // Add "data-ui5-wizard-after-current-tab" to all tabs after the current one
+
+        if (index > iCurrStep) {
+          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);
+      } // 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
+      // 	1.2. If there are no available steps towards the end a step towards the beginning is expanded
+      // 2. A step towards the beginning is expanded
+      // 	2.2. If there are no available steps towards the beginning a step towards the end is expanded
+
+
+      for (let i = 1; i < iStepsToShow; i++) {
+        if (isForward) {
+          counter += 1;
+        }
+
+        if (isForward && tabs[iCurrStep + counter]) {
+          tabs[iCurrStep + counter].setAttribute(EXPANDED_STEP, true);
+          isForward = !isForward;
+        } else if (!isForward && tabs[iCurrStep - counter]) {
+          tabs[iCurrStep - counter].setAttribute(EXPANDED_STEP, true);
+          isForward = !isForward;
+        } else if (tabs[iCurrStep + counter + 1]) {
+          counter += 1;
+          tabs[iCurrStep + counter].setAttribute(EXPANDED_STEP, true);
+          isForward = true;
+        } else if (tabs[iCurrStep - counter]) {
+          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);
+        }
+
+        if (tabs[i].getAttribute(EXPANDED_STEP) === "false" && tabs[i - 1] && tabs[i - 1].getAttribute(EXPANDED_STEP) === "true") {
+          tabs[i].setAttribute(AFTER_EXPANDED_STEP, true);
+          break;
+        }
+      }
+    }
+
+    _isGroupAtStart(selectedStep) {
+      const iStepNumber = this.stepsInHeaderDOM.indexOf(selectedStep);
+      return selectedStep.getAttribute(EXPANDED_STEP) === "false" && selectedStep.getAttribute(BEFORE_EXPANDED_STEP) === "true" && iStepNumber > 0;
+    }
+
+    _isGroupAtEnd(selectedStep) {
+      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]"));
+      this._groupedTabs = [];
+      const iFromStep = bAtStart ? 0 : this.stepsInHeaderDOM.indexOf(oDomTarget);
+      const iToStep = bAtStart ? 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);
+      }
+
+      if (this._isGroupAtEnd(event.target)) {
+        return this._showPopover(event.target, 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];
+      const selectedStep = this.selectedStep;
+      const newlySelectedIndex = this.slottedSteps.indexOf(stepToSelect);
+      this.switchSelectionFromOldToNewStep(selectedStep, stepToSelect, newlySelectedIndex, true);
+
+      this._closeRespPopover();
+
+      tabs[newlySelectedIndex].focus();
+    }
+
+    async _closeRespPopover() {
+      const responsivePopover = await this._respPopover();
+      responsivePopover && responsivePopover.close();
+    }
+
+    async _respPopover() {
+      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.
+     * @param {Integer} scrollPos the current scroll position
+     * @private
+     */
+
+
+    changeSelectionByScroll(scrollPos) {
+      const newlySelectedIndex = this.getClosestStepIndexByScrollPos(scrollPos); // 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];
+        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
+     * @private
+     */
+
+
+    async changeSelectionByStepAction(stepInHeader) {
+      const stepRefId = stepInHeader.getAttribute("data-ui5-content-ref-id");
+      const selectedStep = this.selectedStep;
+      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);
+
+      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) {
+        this.scrollToContentItem(this.selectedStepIndex);
+        return;
+      }
+
+      if (bExpanded || !bExpanded && (newlySelectedIndex === 0 || newlySelectedIndex === this.steps.length - 1)) {
+        // Change selection and fire "step-change".
+        this.switchSelectionFromOldToNewStep(selectedStep, stepToSelect, newlySelectedIndex, true);
+      }
+    }
+
+    getContentHeight() {
+      let contentHeight = 0;
+      this.stepsDOM.forEach(step => {
+        contentHeight += step.getBoundingClientRect().height;
+      });
+      return contentHeight;
+    }
+
+    getStepAriaLabelText(step, ariaLabel) {
+      return Wizard.i18nBundle.getText(_i18nDefaults.WIZARD_STEP_ARIA_LABEL, ariaLabel);
+    }
+
+    get stepsDOM() {
+      return Array.from(this.shadowRoot.querySelectorAll(".ui5-wiz-content-item"));
+    }
+
+    get _stepsInHeader() {
+      return this.getStepsInfo();
+    }
+
+    get _steps() {
+      const lastEnabledStepIndex = this.getLastEnabledStepIndex();
+      const stepsInfo = this.getStepsInfo();
+      return this.steps.map((step, idx) => {
+        step.stretch = idx === lastEnabledStepIndex;
+        step.stepContentAriaLabel = `${this.navStepDefaultHeading} ${stepsInfo[idx].number} ${stepsInfo[idx].titleText}`;
+        return step;
+      });
+    }
+
+    get stepsCount() {
+      return this.slottedSteps.length;
+    }
+
+    get selectedStep() {
+      if (this.selectedStepsCount) {
+        return this.selectedSteps[0];
+      }
+
+      return null;
+    }
+
+    get lastSelectedStep() {
+      if (this.selectedStepsCount) {
+        return this.selectedSteps[this.selectedStepsCount - 1];
+      }
+
+      return null;
+    }
+
+    get selectedSteps() {
+      return this.slottedSteps.filter(step => step.selected);
+    }
+
+    get enabledSteps() {
+      return this.slottedSteps.filter(step => !step.disabled);
+    }
+
+    get selectedStepsCount() {
+      return this.selectedSteps.length;
+    }
+
+    get slottedSteps() {
+      return this.getSlottedNodes("steps");
+    }
+
+    get contentDOM() {
+      return this.shadowRoot.querySelector(`.ui5-wiz-content`);
+    }
+
+    get stepsInHeaderDOM() {
+      return Array.from(this.shadowRoot.querySelectorAll("[ui5-wizard-tab]"));
+    }
+
+    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);
+    }
+
+    get navAriaLabelText() {
+      return Wizard.i18nBundle.getText(_i18nDefaults.WIZARD_NAV_ARIA_LABEL);
+    }
+
+    get navAriaDescribedbyText() {
+      return Wizard.i18nBundle.getText(_i18nDefaults.WIZARD_LIST_ARIA_DESCRIBEDBY);
+    }
+
+    get listAriaLabelText() {
+      return Wizard.i18nBundle.getText(_i18nDefaults.WIZARD_LIST_ARIA_LABEL);
+    }
+
+    get actionSheetStepsText() {
+      return Wizard.i18nBundle.getText(_i18nDefaults.WIZARD_ACTIONSHEET_STEPS_ARIA_LABEL);
+    }
+
+    get navStepDefaultHeading() {
+      return Wizard.i18nBundle.getText(_i18nDefaults.WIZARD_NAV_STEP_DEFAULT_HEADING);
+    }
+
+    get optionalStepText() {
+      return Wizard.i18nBundle.getText(_i18nDefaults.WIZARD_OPTIONAL_STEP_ARIA_LABEL);
+    }
+
+    get activeStepText() {
+      return Wizard.i18nBundle.getText(_i18nDefaults.WIZARD_STEP_ACTIVE);
+    }
+
+    get inactiveStepText() {
+      return Wizard.i18nBundle.getText(_i18nDefaults.WIZARD_STEP_INACTIVE);
+    }
+
+    get ariaLabelText() {
+      return Wizard.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>}
+     * @private
+     */
+
+
+    getStepsInfo() {
+      const lastEnabledStepIndex = this.getLastEnabledStepIndex();
+      const stepsCount = this.stepsCount;
+      const selectedStepIndex = this.getSelectedStepIndex();
+      let inintialZIndex = this.steps.length + 10;
+      let accInfo;
+
+      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 : "";
+        const stepStateText = step.disabled ? this.inactiveStepText : this.activeStepText;
+        const ariaLabel = (step.titleText ? `${pos} ${step.titleText} ${stepStateText} ${isOptional}` : `${this.navStepDefaultHeading} ${pos} ${stepStateText} ${isOptional}`).trim();
+        const isAfterCurrent = idx > selectedStepIndex;
+        accInfo = {
+          "ariaSetsize": stepsCount,
+          "ariaPosinset": pos,
+          "ariaLabel": this.getStepAriaLabelText(step, ariaLabel)
+        };
+        return {
+          icon: step.icon,
+          titleText: step.titleText,
+          subtitleText: step.subtitleText,
+          number: pos,
+          selected: step.selected,
+          disabled: step.disabled,
+          hideSeparator,
+          activeSeparator: idx < lastEnabledStepIndex && !step.disabled,
+          branchingSeparator: step.branching,
+          pos,
+          accInfo,
+          refStepId: step._id,
+          tabIndex: this.selectedStepIndex === idx ? "0" : "-1",
+          styles: {
+            zIndex: isAfterCurrent ? --inintialZIndex : 1
+          }
+        };
+      });
+    }
+    /**
+     * Returns the index of the selected step.
+     * @returns {Integer}
+     * @private
+     */
+
+
+    getSelectedStepIndex() {
+      if (this.selectedStep) {
+        return this.slottedSteps.indexOf(this.selectedStep);
+      }
+
+      return 0;
+    }
+    /**
+     * Returns the index of the last enabled step.
+     * @returns {Integer}
+     * @private
+     */
+
+
+    getLastEnabledStepIndex() {
+      let lastEnabledStepIndex = 0;
+      this.slottedSteps.forEach((step, idx) => {
+        if (!step.disabled) {
+          lastEnabledStepIndex = idx;
+        }
+      });
+      return lastEnabledStepIndex;
+    }
+
+    getStepByRefId(refId) {
+      return this.slottedSteps.find(step => step._id === refId);
+    }
+
+    getStepWrapperByRefId(refId) {
+      return this.shadowRoot.querySelector(`[data-ui5-content-item-ref-id=${refId}]`);
+    }
+
+    getStepWrapperByIdx(idx) {
+      return this.getStepWrapperByRefId(this.steps[idx]._id);
+    }
+    /**
+     * Scrolls to the content of the selected step, used in <code>onAfterRendering</cod>.
+     * @private
+     */
+
+
+    scrollToSelectedStep() {
+      if (!this.selectionRequestedByScroll) {
+        this.scrollToContentItem(this.selectedStepIndex);
+      }
+
+      this.selectionRequestedByScroll = false;
+    }
+    /**
+     * Scrolls to the content item within the <code>ui5-wizard</code> shadowDOM
+     * by given step index.
+     *
+     * @private
+     * @param {Integer} stepIndex the index of a step
+     */
+
+
+    scrollToContentItem(stepIndex) {
+      this.contentDOM.scrollTop = this.getClosestScrollPosByStepIndex(stepIndex);
+    }
+    /**
+     * Returns to closest scroll position for the given step index.
+     *
+     * @private
+     * @param {Integer} stepIndex the index of a step
+     */
+
+
+    getClosestScrollPosByStepIndex(stepIndex) {
+      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.
+
+
+      for (let closestStepIndex = stepIndex - 1; closestStepIndex >= 0; closestStepIndex--) {
+        if (this.stepScrollOffsets[closestStepIndex] > 0) {
+          return this.stepScrollOffsets[closestStepIndex];
+        }
+      }
+
+      return 0;
+    }
+    /**
+     * Returns the closest step index by given scroll position.
+     * @private
+     * @param {Integer} scrollPos the scroll position
+     */
+
+
+    getClosestStepIndexByScrollPos(scrollPos) {
+      for (let closestStepIndex = 0; closestStepIndex <= this.stepScrollOffsets.length - 1; closestStepIndex++) {
+        const stepScrollOffset = this.stepScrollOffsets[closestStepIndex];
+        const step = this.getStepWrapperByIdx(closestStepIndex);
+        const switchStepBoundary = step.offsetTop + step.offsetHeight * this.effectiveStepSwitchThreshold;
+
+        if (stepScrollOffset > 0 && scrollPos < stepScrollOffset) {
+          if (scrollPos > switchStepBoundary) {
+            return closestStepIndex + 1;
+          }
+
+          return closestStepIndex;
+        }
+      }
+
+      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 {Integer} stepToSelectIndex the index of the newly selected step
+     * @param {boolean} changeWithClick the selection changed due to user click in the step navigation
+     * @private
+     */
+
+
+    switchSelectionFromOldToNewStep(selectedStep, stepToSelect, stepToSelectIndex, changeWithClick) {
+      if (selectedStep && stepToSelect) {
+        // keep the selection if next step is disabled
+        if (!stepToSelect.disabled) {
+          selectedStep.selected = false;
+          stepToSelect.selected = true;
+        }
+
+        this.fireEvent("step-change", {
+          step: stepToSelect,
+          previousStep: selectedStep,
+          changeWithClick
+        });
+        this.selectedStepIndex = stepToSelectIndex;
+      }
+    }
+    /**
+     * Sorter method for sorting an array in ascending order.
+     * @private
+     */
+
+
+    sortAscending(a, b) {
+      if (a < b) {
+        return -1;
+      }
+
+      if (a > b) {
+        return 1;
+      }
+
+      return 0;
+    }
+
+  }
+
+  Wizard.define();
+  var _default = Wizard;
+  _exports.default = _default;
+});