ui5-wizard.
+ *
+ * @type {String}
+ * @defaultvalue undefined
+ * @private
+ */
+ ariaLabel: {
+ type: String,
+ defaultValue: undefined,
+ },
+
+ /**
+ * Defines the width of the ui5-wizard.
+ * @private
+ */
+ width: {
+ type: Float,
+ },
+ },
+ slots: /** @lends sap.ui.webcomponents.fiori.Wizard.prototype */ {
+ /**
+ * Defines the steps.
+ * ui5-wizard-step component.
+ *
+ * @type {HTMLElement[]}
+ * @public
+ * @slot
+ */
+ "default": {
+ propertyName: "steps",
+ type: HTMLElement,
+ "individualSlots": true,
+ listenFor: { include: ["*"] },
+ },
+ },
+ events: /** @lends sap.ui.webcomponents.fiori.Wizard.prototype */ {
+ /**
+ * Fired when the step selection is changed by user interaction - either with scrolling,
+ * or by clicking on the steps within the component header.
+ *
+ * @event sap.ui.webcomponents.fiori.Wizard#selection-change
+ * @param {HTMLElement} selectedStep the newly selected step
+ * @param {HTMLElement} previouslySelectedStep the previously selected step
+ * @public
+ */
+ "selection-change": {
+ detail: {
+ selectedStep: { type: HTMLElement },
+ previouslySelectedStep: { type: HTMLElement },
+ },
+ },
+ },
+};
+
+/**
+ * @class
+ *
+ * ui5-wizard helps users complete a complex task by dividing it into sections and guiding the user through it.
+ * It has two main areas - a navigation area at the top showing the step sequence and a content area below it.
+ *
+ * ui5-wizard is occupied by the navigation area.
+ * It shows the sequence of steps, where the recommended number of steps is between 3 and 8 steps.
+ * ui5-wizard-step as slotted element within the ui5-wizardui5-wizard-step as slotted element within the ui5-wizard.
+ *
+ * <ui5-dialog style="height: 80%">
+ * <ui5-wizard></ui5-wizard>
+ * </ui5-dialog>
+ *
+ * ui5-wizard-step 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 selected property (and remove the disabled one if set) to true.
+ * And, the ui5-wizard will automatically scroll to the content of the newly selected step.
+ * ui5-wizard-step,
+ * and show/hide it when certain fields are filled or user defined criteria is met.
+ *
+ * import @ui5/webcomponents-fiori/dist/Wizard.js"; (includes ItemNavigation.
+ * Note: the handler is bound in the template.
+ * @param {Event} event
+ * @private
+ */
+ onStepInHeaderFocused(event) {
+ this._itemNavigation.update(event.target);
+ }
+
+ /**
+ * Handles component resize to:
+ * (1) trigger scroll scrollOffset reCalculation and syncSelection
+ * (2) hide steps' separators and texts to free more space on small sizes
+ * @private
+ */
+ onResize() {
+ this.width = this.getBoundingClientRect().width;
+ }
+
+ /**
+ * Called upon onScroll.
+ * 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 "selection-change".
+ if (newlySelectedIndex >= 0 && newlySelectedIndex <= this.stepsCount - 1) {
+ const stepToSelect = this.slottedSteps[newlySelectedIndex];
+ this.switchSelectionFromOldToNewStep(this.selectedStep, stepToSelect, newlySelectedIndex);
+ this.selectionRequestedByScroll = true;
+ }
+ }
+
+ /**
+ * Called upon onSelectionChangeRequested.
+ * Selects the external step (ui5-wizard-step),
+ * based on the clicked step in the header (ui5-wizard-tab).
+ * @param {HTMLElement} stepInHeader the step equivalent in the header
+ * @private
+ */
+ changeSelectionByStepClick(stepInHeader) {
+ const stepRefId = stepInHeader.getAttribute("data-ui5-content-ref-id");
+ const selectedStep = this.selectedStep;
+ const stepToSelect = this.getStepByRefId(stepRefId);
+
+ // If the currently selected (active) step is clicked,
+ // just scroll to its starting point and stop.
+ if (selectedStep === stepToSelect) {
+ this.scrollToContentItem(this.selectedStepIndex);
+ return;
+ }
+
+ // Change selection and fire "selection-change".
+ const newlySelectedIndex = this.slottedSteps.indexOf(stepToSelect);
+ this.switchSelectionFromOldToNewStep(selectedStep, stepToSelect, newlySelectedIndex);
+ }
+
+ get _stepsInHeader() {
+ return this.getStepsInfo();
+ }
+
+ get _steps() {
+ const lastEnabledStepIndex = this.getLastEnabledStepIndex();
+
+ return this.steps.map((step, idx) => {
+ step.stretch = idx === lastEnabledStepIndex;
+ 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.filter(step => !step.disabled);
+ }
+
+ get phoneMode() {
+ if (isPhone()) {
+ return true;
+ }
+
+ return this.width <= Wizard.PHONE_BREAKPOINT;
+ }
+
+ get navAriaRoleDescription() {
+ return this.i18nBundle.getText(WIZARD_NAV_ARIA_ROLE_DESCRIPTION);
+ }
+
+ get navStepDefaultHeading() {
+ return this.i18nBundle.getText(WIZARD_NAV_STEP_DEFAULT_HEADING);
+ }
+
+ get ariaLabelText() {
+ return this.ariaLabel || this.i18nBundle.getText(WIZARD_NAV_ARIA_ROLE_DESCRIPTION);
+ }
+
+ /**
+ * Returns an array of data objects, based on the user defined steps
+ * to later build the steps (tabs) within the header.
+ * @returns {Array