diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/accordion/v1/accordion/clientlibs/site/js/accordionview.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/accordion/v1/accordion/clientlibs/site/js/accordionview.js index a31e0146f8..a73d45d652 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/accordion/v1/accordion/clientlibs/site/js/accordionview.js +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/accordion/v1/accordion/clientlibs/site/js/accordionview.js @@ -15,443 +15,453 @@ ******************************************************************************/ (function () { - const AccordionMixin = window.Forms.CoreComponentsCommons.AccordionMixin; - - class Accordion extends AccordionMixin(FormView.FormPanel) { - - static NS = FormView.Constants.NS; - static DATA_ATTRIBUTE_VISIBLE = 'data-cmp-visible'; - _templateHTML = {}; - static selectors = { - self: "[data-" + this.NS + '-is="' + this.IS + '"]', - widget: `.${Accordion.bemBlock}__widget`, - description: `.${Accordion.bemBlock}__longdescription`, - qm: `.${Accordion.bemBlock}__questionmark`, - tooltipDiv: `.${Accordion.bemBlock}__shortdescription`, - label: `.${Accordion.bemBlock}__label`, - item: `.${Accordion.bemBlock}__item` - }; - - static keyCodes = { - ENTER: 13, - SPACE: 32, - END: 35, - HOME: 36, - ARROW_LEFT: 37, - ARROW_UP: 38, - ARROW_RIGHT: 39, - ARROW_DOWN: 40 - }; - - constructor(params) { - super(params); - const {element} = params; - this.cacheElements(element); - if (this.getCachedItems()) { - var expandedItems = this.getExpandedItems(); - // multiple expanded items annotated, display the last item open. - if (expandedItems.length > 1) { - var lastExpandedItem = expandedItems[expandedItems.length - 1] - this.expandItem(lastExpandedItem); - this.collapseAllOtherItems(lastExpandedItem.id); + function onAccordionMixinLoaded(event) { + const AccordionMixin = event.detail.AccordionMixin; + + class Accordion extends AccordionMixin(FormView.FormPanel) { + + static NS = FormView.Constants.NS; + static DATA_ATTRIBUTE_VISIBLE = 'data-cmp-visible'; + _templateHTML = {}; + static selectors = { + self: "[data-" + this.NS + '-is="' + this.IS + '"]', + widget: `.${Accordion.bemBlock}__widget`, + description: `.${Accordion.bemBlock}__longdescription`, + qm: `.${Accordion.bemBlock}__questionmark`, + tooltipDiv: `.${Accordion.bemBlock}__shortdescription`, + label: `.${Accordion.bemBlock}__label`, + item: `.${Accordion.bemBlock}__item` + }; + + static keyCodes = { + ENTER: 13, + SPACE: 32, + END: 35, + HOME: 36, + ARROW_LEFT: 37, + ARROW_UP: 38, + ARROW_RIGHT: 39, + ARROW_DOWN: 40 + }; + + constructor(params) { + super(params); + const {element} = params; + this.cacheElements(element); + if (this.getCachedItems()) { + var expandedItems = this.getExpandedItems(); + // multiple expanded items annotated, display the last item open. + if (expandedItems.length > 1) { + var lastExpandedItem = expandedItems[expandedItems.length - 1] + this.expandItem(lastExpandedItem); + this.collapseAllOtherItems(lastExpandedItem.id); + } + this.refreshItems(); + this.#bindEvents(); } - this.refreshItems(); - this.#bindEvents(); } - } - getClass() { - return Accordion.IS; - } + getClass() { + return Accordion.IS; + } - getWidget() { - return null; - } + getWidget() { + return null; + } - getDescription() { - return this.element.querySelector(Accordion.selectors.description); - } + getDescription() { + return this.element.querySelector(Accordion.selectors.description); + } - getLabel() { - return this.element.querySelector(Accordion.selectors.label); - } + getLabel() { + return this.element.querySelector(Accordion.selectors.label); + } - getErrorDiv() { - return null; - } + getErrorDiv() { + return null; + } - getTooltipDiv() { - return this.element.querySelector(Accordion.selectors.tooltipDiv); - } + getTooltipDiv() { + return this.element.querySelector(Accordion.selectors.tooltipDiv); + } - getQuestionMarkDiv() { - return this.element.querySelector(Accordion.selectors.qm); - } + getQuestionMarkDiv() { + return this.element.querySelector(Accordion.selectors.qm); + } - setFocus(id) { - super.setFocus(id); - this.setActive(); - this.#collapseAllItems(); - const item = this.getItemById(id + '-item'); - this.expandItem(item) - } + setFocus(id) { + super.setFocus(id); + this.setActive(); + this.#collapseAllItems(); + const item = this.getItemById(id + '-item'); + this.expandItem(item) + } - #collapseAllItems() { - var items = this.getCachedItems(); - if (items) { - for (var i = 0; i < items.length; i++) { - if (this.isItemExpanded(items[i])) { - this.collapseItem(items[i]) + #collapseAllItems() { + var items = this.getCachedItems(); + if (items) { + for (var i = 0; i < items.length; i++) { + if (this.isItemExpanded(items[i])) { + this.collapseItem(items[i]) + } } } } - } - /** - * Binds Accordion event handling. - * - * @private - */ - #bindEvents() { - var buttons = this.getCachedButtons(); - if (buttons) { - var _self = this; - for (var i = 0; i < buttons.length; i++) { - (function (index) { - buttons[index].addEventListener("click", function (event) { - var itemDivId = _self.#convertToItemDivId(buttons[index].id); - _self.toggle(itemDivId); - _self.collapseAllOtherItems(itemDivId); - _self.#focusButton(buttons[index].id); - }); - buttons[index].addEventListener("keydown", function (event) { - _self.#onButtonKeyDown(event, buttons[index].id); - }); - })(i); + /** + * Binds Accordion event handling. + * + * @private + */ + #bindEvents() { + var buttons = this.getCachedButtons(); + if (buttons) { + var _self = this; + for (var i = 0; i < buttons.length; i++) { + (function (index) { + buttons[index].addEventListener("click", function (event) { + var itemDivId = _self.#convertToItemDivId(buttons[index].id); + _self.toggle(itemDivId); + _self.collapseAllOtherItems(itemDivId); + _self.#focusButton(buttons[index].id); + }); + buttons[index].addEventListener("keydown", function (event) { + _self.#onButtonKeyDown(event, buttons[index].id); + }); + })(i); + } } } - } - /** - * Binds Accordion event handling. - * - * @private - */ - #bindEventsToAddedChild(addedChildId) { - var _self = this; - var buttonId = addedChildId + Accordion.idSuffixes.button; - var button = this.#getButtonById(buttonId); - button.addEventListener("click", function (event) { - var itemDivId = _self.#convertToItemDivId(buttonId); - _self.toggle(itemDivId); - _self.collapseAllOtherItems(itemDivId); - _self.#focusButton(buttonId); - }); - button.addEventListener("keydown", function (event) { - _self.#onButtonKeyDown(event, buttonId); - }); - } + /** + * Binds Accordion event handling. + * + * @private + */ + #bindEventsToAddedChild(addedChildId) { + var _self = this; + var buttonId = addedChildId + Accordion.idSuffixes.button; + var button = this.#getButtonById(buttonId); + button.addEventListener("click", function (event) { + var itemDivId = _self.#convertToItemDivId(buttonId); + _self.toggle(itemDivId); + _self.collapseAllOtherItems(itemDivId); + _self.#focusButton(buttonId); + }); + button.addEventListener("keydown", function (event) { + _self.#onButtonKeyDown(event, buttonId); + }); + } - /** - * Handles button keydown events. - * - * @private - * @param {Object} event The keydown event - * @param {Number} id The id of the button triggering the event - */ - #onButtonKeyDown(event, id) { - var buttons = this.getCachedButtons(); - var lastIndex = buttons.length - 1; - var index = this.#getButtonIndexById(id); - - switch (event.keyCode) { - case Accordion.keyCodes.ARROW_LEFT: - case Accordion.keyCodes.ARROW_UP: - event.preventDefault(); - if (index > 0) { - this.#focusButton(buttons[index - 1].id); - } - break; - case Accordion.keyCodes.ARROW_RIGHT: - case Accordion.keyCodes.ARROW_DOWN: - event.preventDefault(); - if (index < lastIndex) { - this.#focusButton(buttons[index + 1].id); - } - break; - case Accordion.keyCodes.HOME: - event.preventDefault(); - this.#focusButton(buttons[0].id); - break; - case Accordion.keyCodes.END: - event.preventDefault(); - this.#focusButton(buttons[lastIndex].id); - break; - case Accordion.keyCodes.ENTER: - case Accordion.keyCodes.SPACE: - event.preventDefault(); - var itemDivId = this.#convertToItemDivId(buttons[index].id); - this.toggle(itemDivId); - this.collapseAllOtherItems(itemDivId); - this.#focusButton(buttons[index].id); - break; - default: - return; + /** + * Handles button keydown events. + * + * @private + * @param {Object} event The keydown event + * @param {Number} id The id of the button triggering the event + */ + #onButtonKeyDown(event, id) { + var buttons = this.getCachedButtons(); + var lastIndex = buttons.length - 1; + var index = this.#getButtonIndexById(id); + + switch (event.keyCode) { + case Accordion.keyCodes.ARROW_LEFT: + case Accordion.keyCodes.ARROW_UP: + event.preventDefault(); + if (index > 0) { + this.#focusButton(buttons[index - 1].id); + } + break; + case Accordion.keyCodes.ARROW_RIGHT: + case Accordion.keyCodes.ARROW_DOWN: + event.preventDefault(); + if (index < lastIndex) { + this.#focusButton(buttons[index + 1].id); + } + break; + case Accordion.keyCodes.HOME: + event.preventDefault(); + this.#focusButton(buttons[0].id); + break; + case Accordion.keyCodes.END: + event.preventDefault(); + this.#focusButton(buttons[lastIndex].id); + break; + case Accordion.keyCodes.ENTER: + case Accordion.keyCodes.SPACE: + event.preventDefault(); + var itemDivId = this.#convertToItemDivId(buttons[index].id); + this.toggle(itemDivId); + this.collapseAllOtherItems(itemDivId); + this.#focusButton(buttons[index].id); + break; + default: + return; + } } - } - /** - * Focuses the button at the provided index. - * - * @private - * @param {Number} id The id of the button to focus - */ - #focusButton(id) { - var button = this.#getButtonById(id); - button.focus(); - } + /** + * Focuses the button at the provided index. + * + * @private + * @param {Number} id The id of the button to focus + */ + #focusButton(id) { + var button = this.#getButtonById(id); + button.focus(); + } - addChild(childView) { - super.addChild(childView); - this.#cacheTemplateHTML(childView); - if (this.getCountOfAllChildrenInModel() === this.children.length) { - this.cacheClosestFieldsInView(); - this.handleHiddenChildrenVisibility(); + addChild(childView) { + super.addChild(childView); + this.#cacheTemplateHTML(childView); + if (this.getCountOfAllChildrenInModel() === this.children.length) { + this.cacheClosestFieldsInView(); + this.handleHiddenChildrenVisibility(); + } } - } - /** - * Adds unique HTML for added instance corresponding to requirements of different types of repeatableParent - * @param instanceManager of the repeated component - * @param addedModel of the repeated component - * @param htmlElement of the repeated component - */ - addRepeatableMarkup(instanceManager, addedModel, htmlElement) { - var accordionItemDivToBeRepeated = this.#prepareAccordionMarkupToBeAdded(instanceManager, addedModel, htmlElement); - let result = this.#getBeforeViewElement(instanceManager, addedModel.index); - if (result.beforeViewElement != null) { - result.beforeViewElement.after(accordionItemDivToBeRepeated); - } else if (result.parentElement != null) { - var firstChildAccordionItem = result.parentElement.querySelector(Accordion.selectors.item); - if (firstChildAccordionItem != null) { - result.parentElement.insertBefore(accordionItemDivToBeRepeated, firstChildAccordionItem); - } else { - result.parentElement.append(accordionItemDivToBeRepeated); + /** + * Adds unique HTML for added instance corresponding to requirements of different types of repeatableParent + * @param instanceManager of the repeated component + * @param addedModel of the repeated component + * @param htmlElement of the repeated component + */ + addRepeatableMarkup(instanceManager, addedModel, htmlElement) { + var accordionItemDivToBeRepeated = this.#prepareAccordionMarkupToBeAdded(instanceManager, addedModel, htmlElement); + let result = this.#getBeforeViewElement(instanceManager, addedModel.index); + if (result.beforeViewElement != null) { + result.beforeViewElement.after(accordionItemDivToBeRepeated); + } else if (result.parentElement != null) { + var firstChildAccordionItem = result.parentElement.querySelector(Accordion.selectors.item); + if (firstChildAccordionItem != null) { + result.parentElement.insertBefore(accordionItemDivToBeRepeated, firstChildAccordionItem); + } else { + result.parentElement.append(accordionItemDivToBeRepeated); + } } + this.#showHideRepeatableButtons(instanceManager); + return accordionItemDivToBeRepeated; } - this.#showHideRepeatableButtons(instanceManager); - return accordionItemDivToBeRepeated; - } - handleChildAddition(childView) { - var itemDivToExpand; - this.cacheElements(this._elements.self); - this.#bindEventsToAddedChild(childView.id); - if (childView.getInstanceManager().getModel().minOccur != undefined && childView.getInstanceManager().children.length > childView.getInstanceManager().getModel().minOccur) { - itemDivToExpand = this.getItemById(childView.id + Accordion.idSuffixes.item); - } else { - //this will run at initial runtime loading when the repeatable panel is being added minOccur no of times. - // in this case we want the focus to stay at first tab - itemDivToExpand = this.findFirstVisibleChild(this.getCachedItems()); - } - this.expandItem(itemDivToExpand); - this.collapseAllOtherItems(itemDivToExpand.id); - this.#showHideRepeatableButtons(childView.getInstanceManager()); - } + handleChildAddition(childView) { + var itemDivToExpand; + this.cacheElements(this._elements.self); + this.#bindEventsToAddedChild(childView.id); + if (childView.getInstanceManager().getModel().minOccur != undefined && childView.getInstanceManager().children.length > childView.getInstanceManager().getModel().minOccur) { + itemDivToExpand = this.getItemById(childView.id + Accordion.idSuffixes.item); + } else { + //this will run at initial runtime loading when the repeatable panel is being added minOccur no of times. + // in this case we want the focus to stay at first tab + itemDivToExpand = this.findFirstVisibleChild(this.getCachedItems()); + } + this.expandItem(itemDivToExpand); + this.collapseAllOtherItems(itemDivToExpand.id); + this.#showHideRepeatableButtons(childView.getInstanceManager()); + } - handleChildRemoval(removedInstanceView) { - var removedAccordionItemDivId = removedInstanceView.element.id + Accordion.idSuffixes.item; - var removedAccordionItemDiv = this.getItemById(removedAccordionItemDivId); - removedAccordionItemDiv.remove(); - this.children.splice(this.children.indexOf(removedInstanceView), 1); - this.cacheElements(this._elements.self); - var cachedItems = this.getCachedItems(); - if (cachedItems && cachedItems.length > 0) { - var firstItem = cachedItems[0]; - this.expandItem(firstItem); - this.collapseAllOtherItems(firstItem.id); - } - this.#showHideRepeatableButtons(removedInstanceView.getInstanceManager()); - } + handleChildRemoval(removedInstanceView) { + var removedAccordionItemDivId = removedInstanceView.element.id + Accordion.idSuffixes.item; + var removedAccordionItemDiv = this.getItemById(removedAccordionItemDivId); + removedAccordionItemDiv.remove(); + this.children.splice(this.children.indexOf(removedInstanceView), 1); + this.cacheElements(this._elements.self); + var cachedItems = this.getCachedItems(); + if (cachedItems && cachedItems.length > 0) { + var firstItem = cachedItems[0]; + this.expandItem(firstItem); + this.collapseAllOtherItems(firstItem.id); + } + this.#showHideRepeatableButtons(removedInstanceView.getInstanceManager()); + } - #syncLabel() { - let labelElement = typeof this.getLabel === 'function' ? this.getLabel() : null; - if (labelElement) { - labelElement.setAttribute('for', this.getId()); - } - } + #syncLabel() { + let labelElement = typeof this.getLabel === 'function' ? this.getLabel() : null; + if (labelElement) { + labelElement.setAttribute('for', this.getId()); + } + } - syncMarkupWithModel() { - super.syncMarkupWithModel(); - this.#syncLabel(); - for (var itemDiv of this.getCachedItems()) { - this.#syncAccordionMarkup(itemDiv); + syncMarkupWithModel() { + super.syncMarkupWithModel(); + this.#syncLabel(); + for (var itemDiv of this.getCachedItems()) { + this.#syncAccordionMarkup(itemDiv); + } } - } - getChildViewByIndex(index) { - var accordionPanels = this.getCachedPanels(); - var fieldId = accordionPanels[index].id.substring(0, accordionPanels[index].id.lastIndexOf("-")); - return this.getChild(fieldId); - } + getChildViewByIndex(index) { + var accordionPanels = this.getCachedPanels(); + var fieldId = accordionPanels[index].id.substring(0, accordionPanels[index].id.lastIndexOf("-")); + return this.getChild(fieldId); + } - #getBeforeViewElement(instanceManager, instanceIndex) { - var result = {}; - var instanceManagerId = instanceManager.getId(); - if (instanceIndex == 0) { - var closestNonRepeatableFieldId = this._templateHTML[instanceManagerId]['closestNonRepeatableFieldId']; - var closestRepeatableFieldInstanceManagerIds = this._templateHTML[instanceManagerId]['closestRepeatableFieldInstanceManagerIds']; - var indexToInsert = this.getIndexToInsert(closestNonRepeatableFieldId, closestRepeatableFieldInstanceManagerIds); - if (indexToInsert > 0) { - result.beforeViewElement = this.getCachedItems()[indexToInsert - 1]; + #getBeforeViewElement(instanceManager, instanceIndex) { + var result = {}; + var instanceManagerId = instanceManager.getId(); + if (instanceIndex == 0) { + var closestNonRepeatableFieldId = this._templateHTML[instanceManagerId]['closestNonRepeatableFieldId']; + var closestRepeatableFieldInstanceManagerIds = this._templateHTML[instanceManagerId]['closestRepeatableFieldInstanceManagerIds']; + var indexToInsert = this.getIndexToInsert(closestNonRepeatableFieldId, closestRepeatableFieldInstanceManagerIds); + if (indexToInsert > 0) { + result.beforeViewElement = this.getCachedItems()[indexToInsert - 1]; + } else { + result.parentElement = this.element; + } } else { - result.parentElement = this.element; + let previousInstanceElement = this.#getRepeatableElementAt(instanceManager, instanceIndex - 1); + result.beforeViewElement = previousInstanceElement; } - } else { - let previousInstanceElement = this.#getRepeatableElementAt(instanceManager, instanceIndex - 1); - result.beforeViewElement = previousInstanceElement; + return result; } - return result; - } - #getRepeatableElementAt(instanceManager, index) { - let childId = instanceManager._model.items.find((model) => model.index === index)?.id; - return this.element.querySelector(`#${childId}${Accordion.idSuffixes.item}`); - } + #getRepeatableElementAt(instanceManager, index) { + let childId = instanceManager._model.items.find((model) => model.index === index)?.id; + return this.element.querySelector(`#${childId}${Accordion.idSuffixes.item}`); + } - #prepareAccordionMarkupToBeAdded(instanceManager, addedModel, htmlElement) { - var accordionItemDivToBeRepeated = this._templateHTML[instanceManager.getId()]['accordionItemDiv'].cloneNode(true); - var itemDivId = accordionItemDivToBeRepeated.id; - var accordionPanelId = this.#convertToPanelId(itemDivId); - var accordionPanelToBeRepeated = accordionItemDivToBeRepeated.querySelector('#' + accordionPanelId); - while (accordionPanelToBeRepeated.hasChildNodes()) { - accordionPanelToBeRepeated.removeChild(accordionPanelToBeRepeated.firstChild); - } - accordionPanelToBeRepeated.append(htmlElement); - this.#syncAccordionMarkup(accordionItemDivToBeRepeated); - return accordionItemDivToBeRepeated; - } + #prepareAccordionMarkupToBeAdded(instanceManager, addedModel, htmlElement) { + var accordionItemDivToBeRepeated = this._templateHTML[instanceManager.getId()]['accordionItemDiv'].cloneNode(true); + var itemDivId = accordionItemDivToBeRepeated.id; + var accordionPanelId = this.#convertToPanelId(itemDivId); + var accordionPanelToBeRepeated = accordionItemDivToBeRepeated.querySelector('#' + accordionPanelId); + while (accordionPanelToBeRepeated.hasChildNodes()) { + accordionPanelToBeRepeated.removeChild(accordionPanelToBeRepeated.firstChild); + } + accordionPanelToBeRepeated.append(htmlElement); + this.#syncAccordionMarkup(accordionItemDivToBeRepeated); + return accordionItemDivToBeRepeated; + } - #syncAccordionMarkup(accordionItemDiv) { - var accordionItemDivId = accordionItemDiv.id; - var accordionPanelId = this.#convertToPanelId(accordionItemDivId); - var accordionButtonId = this.#convertToButtonId(accordionItemDivId); - var accordionButton = accordionItemDiv.querySelector('#' + accordionButtonId); - var accordionPanelDiv = accordionItemDiv.querySelector('#' + accordionPanelId); - var childViewId = accordionItemDiv.querySelector("[data-cmp-is]").id; - accordionItemDiv.id = childViewId + Accordion.idSuffixes.item; - accordionButton.id = childViewId + Accordion.idSuffixes.button; - accordionPanelDiv.id = childViewId + Accordion.idSuffixes.panel; - accordionButton.setAttribute("aria-controls", childViewId + Accordion.idSuffixes.panel); - accordionPanelDiv.setAttribute("aria-labelledby", childViewId + Accordion.idSuffixes.button); - var accordionAdd = accordionItemDiv.querySelector(".cmp-accordion__add-button"); - if(accordionAdd){ - accordionAdd.setAttribute('data-cmp-hook-add-instance', childViewId); - } - var accordionRemove = accordionItemDiv.querySelector(".cmp-accordion__remove-button"); - if(accordionRemove){ - accordionRemove.setAttribute('data-cmp-hook-remove-instance', childViewId); + #syncAccordionMarkup(accordionItemDiv) { + var accordionItemDivId = accordionItemDiv.id; + var accordionPanelId = this.#convertToPanelId(accordionItemDivId); + var accordionButtonId = this.#convertToButtonId(accordionItemDivId); + var accordionButton = accordionItemDiv.querySelector('#' + accordionButtonId); + var accordionPanelDiv = accordionItemDiv.querySelector('#' + accordionPanelId); + var childViewId = accordionItemDiv.querySelector("[data-cmp-is]").id; + accordionItemDiv.id = childViewId + Accordion.idSuffixes.item; + accordionButton.id = childViewId + Accordion.idSuffixes.button; + accordionPanelDiv.id = childViewId + Accordion.idSuffixes.panel; + accordionButton.setAttribute("aria-controls", childViewId + Accordion.idSuffixes.panel); + accordionPanelDiv.setAttribute("aria-labelledby", childViewId + Accordion.idSuffixes.button); + var accordionAdd = accordionItemDiv.querySelector(".cmp-accordion__add-button"); + if (accordionAdd) { + accordionAdd.setAttribute('data-cmp-hook-add-instance', childViewId); + } + var accordionRemove = accordionItemDiv.querySelector(".cmp-accordion__remove-button"); + if (accordionRemove) { + accordionRemove.setAttribute('data-cmp-hook-remove-instance', childViewId); + } } - } - #cacheTemplateHTML(childView) { - if (childView.getInstanceManager() != null && (this._templateHTML == null || this._templateHTML[childView.getInstanceManager().getId()] == null)) { - var accordionItemDivId = childView.element.id + Accordion.idSuffixes.item; - var instanceManagerId = childView.getInstanceManager().getId(); - var accordionItemDiv = this.getItemById(accordionItemDivId); - this._templateHTML[instanceManagerId] = {}; - this._templateHTML[instanceManagerId]['accordionItemDiv'] = accordionItemDiv; + #cacheTemplateHTML(childView) { + if (childView.getInstanceManager() != null && (this._templateHTML == null || this._templateHTML[childView.getInstanceManager().getId()] == null)) { + var accordionItemDivId = childView.element.id + Accordion.idSuffixes.item; + var instanceManagerId = childView.getInstanceManager().getId(); + var accordionItemDiv = this.getItemById(accordionItemDivId); + this._templateHTML[instanceManagerId] = {}; + this._templateHTML[instanceManagerId]['accordionItemDiv'] = accordionItemDiv; + } } - } - #getButtonById(buttonId) { - var buttons = this.getCachedButtons(); - if (buttons) { - for (var i = 0; i < buttons.length; i++) { - if (buttons[i].id === buttonId) { - return buttons[i]; + #getButtonById(buttonId) { + var buttons = this.getCachedButtons(); + if (buttons) { + for (var i = 0; i < buttons.length; i++) { + if (buttons[i].id === buttonId) { + return buttons[i]; + } } } } - } - #getButtonIndexById(buttonId) { - var buttons = this.getCachedButtons(); - if (buttons) { - for (var i = 0; i < buttons.length; i++) { - if (buttons[i].id === buttonId) { - return i; + #getButtonIndexById(buttonId) { + var buttons = this.getCachedButtons(); + if (buttons) { + for (var i = 0; i < buttons.length; i++) { + if (buttons[i].id === buttonId) { + return i; + } } } + return -1; } - return -1; - } - /** - * Changes provided panel or buttonId to ItemId - * - * @private - * @param {Number} id The id of the panel/button to convert to corresponding item div - */ - #convertToItemDivId(idToConvert) { - return idToConvert.substring(0, idToConvert.lastIndexOf("-")) + Accordion.idSuffixes.item; - } + /** + * Changes provided panel or buttonId to ItemId + * + * @private + * @param {Number} id The id of the panel/button to convert to corresponding item div + */ + #convertToItemDivId(idToConvert) { + return idToConvert.substring(0, idToConvert.lastIndexOf("-")) + Accordion.idSuffixes.item; + } - /** - * Changes provided panel or item id to Button Id - * - * @private - * @param {Number} id The id of the panel/item to convert to corresponding button id - */ - #convertToButtonId(idToConvert) { - return idToConvert.substring(0, idToConvert.lastIndexOf("-")) + Accordion.idSuffixes.button; - } + /** + * Changes provided panel or item id to Button Id + * + * @private + * @param {Number} id The id of the panel/item to convert to corresponding button id + */ + #convertToButtonId(idToConvert) { + return idToConvert.substring(0, idToConvert.lastIndexOf("-")) + Accordion.idSuffixes.button; + } - /** - * Changes provided button or item id to Panel Id - * - * @private - * @param {Number} id The id of the button/item to convert to corresponding button id - */ - #convertToPanelId(idToConvert) { - return idToConvert.substring(0, idToConvert.lastIndexOf("-")) + Accordion.idSuffixes.panel; - } + /** + * Changes provided button or item id to Panel Id + * + * @private + * @param {Number} id The id of the button/item to convert to corresponding button id + */ + #convertToPanelId(idToConvert) { + return idToConvert.substring(0, idToConvert.lastIndexOf("-")) + Accordion.idSuffixes.panel; + } - updateChildVisibility(visible, state) { - this.updateVisibilityOfNavigationElement(this.getItemById(state.id + Accordion.idSuffixes.item), visible); - if (!visible) { - var expandedItems = this.getExpandedItems(); - for (let i = 0; i < expandedItems.length; i++) { - if (expandedItems[i].getAttribute(Accordion.DATA_ATTRIBUTE_VISIBLE) === 'false') { - this.collapseItem(expandedItems[i]); + updateChildVisibility(visible, state) { + this.updateVisibilityOfNavigationElement(this.getItemById(state.id + Accordion.idSuffixes.item), visible); + if (!visible) { + var expandedItems = this.getExpandedItems(); + for (let i = 0; i < expandedItems.length; i++) { + if (expandedItems[i].getAttribute(Accordion.DATA_ATTRIBUTE_VISIBLE) === 'false') { + this.collapseItem(expandedItems[i]); + } + } + let child = this.findFirstVisibleChild(this.getCachedItems()); + if (child) { + this.expandItem(child); } - } - let child = this.findFirstVisibleChild(this.getCachedItems()); - if (child) { - this.expandItem(child); } } + + getRepeatableRootElement(childView) { + return this.element.querySelector('#' + childView.id + '-item div[data-cmp-hook-adaptiveFormAccordion="repeatableButton"]') + } + + #showHideRepeatableButtons(instanceManager) { + const {_model: {minOccur, maxOccur, items = []} = {}, children} = instanceManager; + children.forEach(child => { + const addButtonElement = this.element.querySelector('#' + child.id + '-item')?.querySelector('[data-cmp-hook-add-instance]'); + const removeButtonElement = this.element.querySelector('#' + child.id + '-item')?.querySelector('[data-cmp-hook-remove-instance]'); + if (addButtonElement) { + addButtonElement.setAttribute(Accordion.DATA_ATTRIBUTE_VISIBLE, !(items.length === maxOccur && maxOccur != -1)) + } + if (removeButtonElement) { + removeButtonElement.setAttribute(Accordion.DATA_ATTRIBUTE_VISIBLE, items.length > minOccur && minOccur != -1) + } + }); + } } - getRepeatableRootElement(childView){ - return this.element.querySelector('#'+childView.id+'-item div[data-cmp-hook-adaptiveFormAccordion="repeatableButton"]') - } - #showHideRepeatableButtons(instanceManager){ - const {_model: {minOccur, maxOccur, items = [] } = {}, children} = instanceManager; - children.forEach(child=>{ - const addButtonElement = this.element.querySelector('#'+child.id+'-item')?.querySelector('[data-cmp-hook-add-instance]'); - const removeButtonElement = this.element.querySelector('#'+child.id+'-item')?.querySelector('[data-cmp-hook-remove-instance]'); - if(addButtonElement){ - addButtonElement.setAttribute(Accordion.DATA_ATTRIBUTE_VISIBLE, !(items.length === maxOccur && maxOccur != -1)) - } - if(removeButtonElement){ - removeButtonElement.setAttribute(Accordion.DATA_ATTRIBUTE_VISIBLE, items.length > minOccur && minOccur != -1) - } - }); - } + + FormView.Utils.setupField(({element, formContainer}) => { + return new Accordion({element, formContainer}) + }, Accordion.selectors.self); } - FormView.Utils.setupField(({element, formContainer}) => { - return new Accordion({element, formContainer}) - }, Accordion.selectors.self); + if (window.Forms && window.Forms.CoreComponentsCommons && window.Forms.CoreComponentsCommons.AccordionMixin) { + onAccordionMixinLoaded({ detail: { AccordionMixin: window.Forms.CoreComponentsCommons.AccordionMixin } }); + } else { + window.addEventListener('AccordionMixinLoaded', onAccordionMixinLoaded); + } })(); diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/clientlibs/commons/js/common.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/clientlibs/commons/js/common.js index 061e27e306..419285efb7 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/clientlibs/commons/js/common.js +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/clientlibs/commons/js/common.js @@ -146,4 +146,11 @@ window.Forms.CoreComponentsCommons = window.Forms.CoreComponentsCommons || {}; window.Forms.CoreComponentsCommons.WizardMixin = WizardMixin; + const event = new CustomEvent('WizardMixinLoaded', { + detail: { + WizardMixin: WizardMixin + } + }); + window.dispatchEvent(event); + }()); diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/clientlibs/contentframe/js/wizard.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/clientlibs/contentframe/js/wizard.js index bb8a2932ef..ac83081aba 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/clientlibs/contentframe/js/wizard.js +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/clientlibs/contentframe/js/wizard.js @@ -17,81 +17,91 @@ (function () { - const WizardMixin = window.Forms.CoreComponentsCommons.WizardMixin; + function onWizardMixinLoaded(event) { + const WizardMixin = event.detail.WizardMixin; - class Wizard extends WizardMixin(class {}) { + class Wizard extends WizardMixin(class { + }) { - constructor(params) { - super(params); - const {element} = params; - this.cacheElements(element); - this.setActive(this.getCachedTabs()) - this._active = this.getActiveIndex(this.getCachedTabs()); - this.refreshActive(); + constructor(params) { + super(params); + const {element} = params; + this.cacheElements(element); + this.setActive(this.getCachedTabs()) + this._active = this.getActiveIndex(this.getCachedTabs()); + this.refreshActive(); - element.removeAttribute("data-" + Wizard.NS + "-is"); + element.removeAttribute("data-" + Wizard.NS + "-is"); - if (window.Granite && window.Granite.author && window.Granite.author.MessageChannel) { - /* - * Editor message handling: - * - subscribe to "cmp.panelcontainer" message requests sent by the editor frame - * - check that the message data panel container type is correct and that the id (path) matches this specific Tabs component - * - if so, route the "navigate" operation to enact a navigation of the Tabs based on index data - */ - CQ.CoreComponents.MESSAGE_CHANNEL = CQ.CoreComponents.MESSAGE_CHANNEL || new window.Granite.author.MessageChannel("cqauthor", window); - const _self = this; - CQ.CoreComponents.MESSAGE_CHANNEL.subscribeRequestMessage("cmp.panelcontainer", function (message) { - if (message.data && message.data.type === "cmp-adaptiveform-wizard" && message.data.id === _self._elements.self.dataset["cmpPanelcontainerId"]) { - if (message.data.operation === "navigate") { - _self.navigate(message.data.index); + if (window.Granite && window.Granite.author && window.Granite.author.MessageChannel) { + /* + * Editor message handling: + * - subscribe to "cmp.panelcontainer" message requests sent by the editor frame + * - check that the message data panel container type is correct and that the id (path) matches this specific Tabs component + * - if so, route the "navigate" operation to enact a navigation of the Tabs based on index data + */ + CQ.CoreComponents.MESSAGE_CHANNEL = CQ.CoreComponents.MESSAGE_CHANNEL || new window.Granite.author.MessageChannel("cqauthor", window); + const _self = this; + CQ.CoreComponents.MESSAGE_CHANNEL.subscribeRequestMessage("cmp.panelcontainer", function (message) { + if (message.data && message.data.type === "cmp-adaptiveform-wizard" && message.data.id === _self._elements.self.dataset["cmpPanelcontainerId"]) { + if (message.data.operation === "navigate") { + _self.navigate(message.data.index); + } } - } - }); + }); + } } } - } - /** - * Document ready handler and DOM mutation observers. Initializes Tabs components as necessary. - * - * @private - */ - function onDocumentReady() { + /** + * Document ready handler and DOM mutation observers. Initializes Tabs components as necessary. + * + * @private + */ + function onDocumentReady() { - var elements = document.querySelectorAll(Wizard.selectors.self); - for (var i = 0; i < elements.length; i++) { - new Wizard({ element: elements[i] }); - } + var elements = document.querySelectorAll(Wizard.selectors.self); + for (var i = 0; i < elements.length; i++) { + new Wizard({element: elements[i]}); + } - var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; - var body = document.querySelector("body"); - var observer = new MutationObserver(function(mutations) { - mutations.forEach(function(mutation) { - // needed for IE - var nodesArray = [].slice.call(mutation.addedNodes); - if (nodesArray.length > 0) { - nodesArray.forEach(function(addedNode) { - if (addedNode.querySelectorAll) { - var elementsArray = [].slice.call(addedNode.querySelectorAll(Wizard.selectors.self)); - elementsArray.forEach(function(element) { - new Wizard({ element: element }); - }); - } - }); - } + var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; + var body = document.querySelector("body"); + var observer = new MutationObserver(function (mutations) { + mutations.forEach(function (mutation) { + // needed for IE + var nodesArray = [].slice.call(mutation.addedNodes); + if (nodesArray.length > 0) { + nodesArray.forEach(function (addedNode) { + if (addedNode.querySelectorAll) { + var elementsArray = [].slice.call(addedNode.querySelectorAll(Wizard.selectors.self)); + elementsArray.forEach(function (element) { + new Wizard({element: element}); + }); + } + }); + } + }); + }); + + observer.observe(body, { + subtree: true, + childList: true, + characterData: true }); - }); + } - observer.observe(body, { - subtree: true, - childList: true, - characterData: true - }); + if (document.readyState !== "loading") { + onDocumentReady(); + } else { + document.addEventListener("DOMContentLoaded", onDocumentReady); + } } - if (document.readyState !== "loading") { - onDocumentReady(); + if (window.Forms && window.Forms.CoreComponentsCommons && window.Forms.CoreComponentsCommons.WizardMixin) { + onWizardMixinLoaded({ detail: { WizardMixin: window.Forms.CoreComponentsCommons.WizardMixin } }); } else { - document.addEventListener("DOMContentLoaded", onDocumentReady); + window.addEventListener('WizardMixinLoaded', onWizardMixinLoaded); } + }()); diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/clientlibs/site/js/wizardview.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/clientlibs/site/js/wizardview.js index 903a16b793..71f22f814e 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/clientlibs/site/js/wizardview.js +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/wizard/v1/wizard/clientlibs/site/js/wizardview.js @@ -16,522 +16,528 @@ (function () { - const keyCodes = { - END: 35, - HOME: 36, - ARROW_LEFT: 37, - ARROW_UP: 38, - ARROW_RIGHT: 39, - ARROW_DOWN: 40 - }; - - const WizardMixin = window.Forms.CoreComponentsCommons.WizardMixin; - - class Wizard extends WizardMixin(FormView.FormPanel) { - - _templateHTML = {}; - - static NS = FormView.Constants.NS; - static #tabIdSuffix = "_wizard-item-nav"; - static #wizardPanelIdSuffix = "__wizardpanel"; - - static selectors = { - self: "[data-" + Wizard.NS + '-is="' + Wizard.IS + '"]', - active: { - tab: "cmp-adaptiveform-wizard__tab--active", - wizardpanel: "cmp-adaptiveform-wizard__wizardpanel--active" - }, - label: `.${Wizard.bemBlock}__label`, - description: `.${Wizard.bemBlock}__longdescription`, - qm: `.${Wizard.bemBlock}__questionmark`, - widget: `.${Wizard.bemBlock}__widget`, - tooltipDiv: `.${Wizard.bemBlock}__shortdescription`, - previousButton: `.${Wizard.bemBlock}__previousNav`, - previousButtonHidden: "cmp-adaptiveform-wizard__previousNav__hidden", - nextButton: `.${Wizard.bemBlock}__nextNav`, - previousButtonV2: `.${Wizard.bemBlock}__nav--previous`, - nextButtonV2: `.${Wizard.bemBlock}__nav--next`, - nextButtonHidden: "cmp-adaptiveform-wizard__nextNav__hidden", - olTabList: `.${Wizard.bemBlock}__tabList` + function onWizardMixinLoaded(event) { + const WizardMixin = event.detail.WizardMixin; + const keyCodes = { + END: 35, + HOME: 36, + ARROW_LEFT: 37, + ARROW_UP: 38, + ARROW_RIGHT: 39, + ARROW_DOWN: 40 }; - constructor(params) { - super(params); - const {element} = params; - this.cacheElements(element); - this.setActive(this.getCachedTabs()) - this._active = this.getActiveIndex(this.getCachedTabs()); - this.#setNavigationRange(); - this.#hideUnhideNavButtons(this._active); - this.refreshActive(); - - this.#bindEvents(); - } - - getClass() { - return Wizard.IS; - } - - setFocus(id) { - super.setFocus(id); - this.setActive(); - const index = this.#getTabIndexById(id + '_wizard-item-nav'); - this.navigate(index); - } - - getWidget() { - return this.element.querySelector(Wizard.selectors.widget); - } - - getDescription() { - return this.element.querySelector(Wizard.selectors.description); - } + class Wizard extends WizardMixin(FormView.FormPanel) { + + _templateHTML = {}; + + static NS = FormView.Constants.NS; + static #tabIdSuffix = "_wizard-item-nav"; + static #wizardPanelIdSuffix = "__wizardpanel"; + + static selectors = { + self: "[data-" + Wizard.NS + '-is="' + Wizard.IS + '"]', + active: { + tab: "cmp-adaptiveform-wizard__tab--active", + wizardpanel: "cmp-adaptiveform-wizard__wizardpanel--active" + }, + label: `.${Wizard.bemBlock}__label`, + description: `.${Wizard.bemBlock}__longdescription`, + qm: `.${Wizard.bemBlock}__questionmark`, + widget: `.${Wizard.bemBlock}__widget`, + tooltipDiv: `.${Wizard.bemBlock}__shortdescription`, + previousButton: `.${Wizard.bemBlock}__previousNav`, + previousButtonHidden: "cmp-adaptiveform-wizard__previousNav__hidden", + nextButton: `.${Wizard.bemBlock}__nextNav`, + previousButtonV2: `.${Wizard.bemBlock}__nav--previous`, + nextButtonV2: `.${Wizard.bemBlock}__nav--next`, + nextButtonHidden: "cmp-adaptiveform-wizard__nextNav__hidden", + olTabList: `.${Wizard.bemBlock}__tabList` + }; + + constructor(params) { + super(params); + const {element} = params; + this.cacheElements(element); + this.setActive(this.getCachedTabs()) + this._active = this.getActiveIndex(this.getCachedTabs()); + this.#setNavigationRange(); + this.#hideUnhideNavButtons(this._active); + this.refreshActive(); - getLabel() { - return this.element.querySelector(Wizard.selectors.label); - } + this.#bindEvents(); + } - getErrorDiv() { - return this.element.querySelector(Wizard.selectors.errorDiv); - } + getClass() { + return Wizard.IS; + } - getTooltipDiv() { - return this.element.querySelector(Wizard.selectors.tooltipDiv); - } + setFocus(id) { + super.setFocus(id); + this.setActive(); + const index = this.#getTabIndexById(id + '_wizard-item-nav'); + this.navigate(index); + } - getQuestionMarkDiv() { - return this.element.querySelector(Wizard.selectors.qm); - } + getWidget() { + return this.element.querySelector(Wizard.selectors.widget); + } - getPreviousButtonDiv() { - return (this.element.querySelector(Wizard.selectors.previousButton) || this.element.querySelector(Wizard.selectors.previousButtonV2)); - } + getDescription() { + return this.element.querySelector(Wizard.selectors.description); + } - getNextButtonDiv() { - return (this.element.querySelector(Wizard.selectors.nextButton) || this.element.querySelector(Wizard.selectors.nextButtonV2)); - } + getLabel() { + return this.element.querySelector(Wizard.selectors.label); + } - #getTabListElement() { - return this.element.querySelector(Wizard.selectors.olTabList) - } + getErrorDiv() { + return this.element.querySelector(Wizard.selectors.errorDiv); + } + getTooltipDiv() { + return this.element.querySelector(Wizard.selectors.tooltipDiv); + } - /** - * Binds navigation buttons event handling - * - * @private - */ - #bindEvents() { - const _self = this; - this.getNextButtonDiv().addEventListener("click", function (event) { - _self.#navigateToNextTab(); - }) - this.getPreviousButtonDiv().addEventListener("click", function (event) { - _self.#navigateToPreviousTab(); - }) + getQuestionMarkDiv() { + return this.element.querySelector(Wizard.selectors.qm); + } + getPreviousButtonDiv() { + return (this.element.querySelector(Wizard.selectors.previousButton) || this.element.querySelector(Wizard.selectors.previousButtonV2)); + } - } + getNextButtonDiv() { + return (this.element.querySelector(Wizard.selectors.nextButton) || this.element.querySelector(Wizard.selectors.nextButtonV2)); + } - /** - * Handles tab keydown events - * - * @private - * @param {Object} event The keydown event - */ - #onKeyDown(event) { - const index = this._active; - - const lastIndex = this.getCachedTabs().length - 1; - - switch (event.keyCode) { - case keyCodes.ARROW_LEFT: - case keyCodes.ARROW_UP: - event.preventDefault(); - if (index > 0) { - this.#navigateAndFocusTab(index - 1); - } - break; - case keyCodes.ARROW_RIGHT: - case keyCodes.ARROW_DOWN: - event.preventDefault(); - if (index < lastIndex) { - this.#navigateAndFocusTab(index + 1); - } - break; - case keyCodes.HOME: - event.preventDefault(); - this.#navigateAndFocusTab(0); - break; - case keyCodes.END: - event.preventDefault(); - this.#navigateAndFocusTab(lastIndex); - break; - default: - return; + #getTabListElement() { + return this.element.querySelector(Wizard.selectors.olTabList) } - } - /** - * Refreshes the tab markup based on the current {@code Tabs_active} index - * - * @private - */ - refreshActive() { - super.refreshActive(); - this.#hideUnhideNavButtons(this._active); - } - /** - * Focuses the element and prevents scrolling the element into view - * - * @param {HTMLElement} element Element to focus - */ - focusWithoutScroll(element) { - const x = window.scrollX || window.pageXOffset; - const y = window.scrollY || window.pageYOffset; - element.focus(); - window.scrollTo(x, y); - } + /** + * Binds navigation buttons event handling + * + * @private + */ + #bindEvents() { + const _self = this; + this.getNextButtonDiv().addEventListener("click", function (event) { + _self.#navigateToNextTab(); + }) + this.getPreviousButtonDiv().addEventListener("click", function (event) { + _self.#navigateToPreviousTab(); + }) - #navigateToNextTab() { - const activeIndex = this._active; - const activeTabElement = this.getCachedTabs()[activeIndex]; - const activeChildId = activeTabElement.id.substring(0, activeTabElement.id.lastIndexOf(Wizard.#tabIdSuffix)); - const activeChildView = this.getChild(activeChildId); - let activeChildModel; - if(activeChildView) { - activeChildModel = activeChildView.getModel(); - } - else { - activeChildModel = this.getModel().items.find(child => child.id === activeChildId); - } - let validationErrorList; - if (!this.#isAuthoring()) { - validationErrorList = activeChildModel.validate(); } - if (validationErrorList === undefined || validationErrorList.length == 0) { - let tabs = this.getCachedTabs(); - let nextVisibleIndex = this.#findNextVisibleChildIndex(activeIndex); - if (tabs && nextVisibleIndex >= 0) { - this.#navigateAndFocusTab(nextVisibleIndex); + + /** + * Handles tab keydown events + * + * @private + * @param {Object} event The keydown event + */ + #onKeyDown(event) { + const index = this._active; + + const lastIndex = this.getCachedTabs().length - 1; + + switch (event.keyCode) { + case keyCodes.ARROW_LEFT: + case keyCodes.ARROW_UP: + event.preventDefault(); + if (index > 0) { + this.#navigateAndFocusTab(index - 1); + } + break; + case keyCodes.ARROW_RIGHT: + case keyCodes.ARROW_DOWN: + event.preventDefault(); + if (index < lastIndex) { + this.#navigateAndFocusTab(index + 1); + } + break; + case keyCodes.HOME: + event.preventDefault(); + this.#navigateAndFocusTab(0); + break; + case keyCodes.END: + event.preventDefault(); + this.#navigateAndFocusTab(lastIndex); + break; + default: + return; } } - this.#hideUnhideNavButtons(this._active); - } - - #isAuthoring() { - return window.Granite && window.Granite.author; - } - #navigateToPreviousTab() { - const activeIndex = this._active; - const tabs = this.getCachedTabs(); - const lastVisibleIndex = this.#findLastVisibleChildIndex(activeIndex); - if (tabs && lastVisibleIndex >= 0) { - this.#navigateAndFocusTab(lastVisibleIndex); + /** + * Refreshes the tab markup based on the current {@code Tabs_active} index + * + * @private + */ + refreshActive() { + super.refreshActive(); + this.#hideUnhideNavButtons(this._active); } - this.#hideUnhideNavButtons(this._active); - } - /** - * Hides or shows, next and previous navigation buttons - * - * @private - * @param {Number} index The index of the tab to navigate to - * @param {Number} total number of tabs - */ - #hideUnhideNavButtons(activeTabIndex) { - const tabsLength = this.getCachedTabs() ? this.getCachedTabs().length : 0; + /** + * Focuses the element and prevents scrolling the element into view + * + * @param {HTMLElement} element Element to focus + */ + focusWithoutScroll(element) { + const x = window.scrollX || window.pageXOffset; + const y = window.scrollY || window.pageYOffset; + element.focus(); + window.scrollTo(x, y); + } - const nextVisible = this.#findNextVisibleChildIndex(activeTabIndex); - const previousVisible = this.#findLastVisibleChildIndex(activeTabIndex); - if(tabsLength === 0 || this.maxEnabledTab <= this.minEnabledTab) { - this.getPreviousButtonDiv().setAttribute(Wizard.DATA_ATTRIBUTE_VISIBLE,"false"); - this.getNextButtonDiv().setAttribute(Wizard.DATA_ATTRIBUTE_VISIBLE,"false"); + #navigateToNextTab() { + const activeIndex = this._active; + const activeTabElement = this.getCachedTabs()[activeIndex]; + const activeChildId = activeTabElement.id.substring(0, activeTabElement.id.lastIndexOf(Wizard.#tabIdSuffix)); + const activeChildView = this.getChild(activeChildId); + let activeChildModel; + if (activeChildView) { + activeChildModel = activeChildView.getModel(); + } else { + activeChildModel = this.getModel().items.find(child => child.id === activeChildId); + } + let validationErrorList; + if (!this.#isAuthoring()) { + validationErrorList = activeChildModel.validate(); + } + if (validationErrorList === undefined || validationErrorList.length == 0) { + let tabs = this.getCachedTabs(); + let nextVisibleIndex = this.#findNextVisibleChildIndex(activeIndex); + if (tabs && nextVisibleIndex >= 0) { + this.#navigateAndFocusTab(nextVisibleIndex); + } + } + this.#hideUnhideNavButtons(this._active); } - if(activeTabIndex <= this.minEnabledTab || previousVisible === -1) { - this.getPreviousButtonDiv().setAttribute(Wizard.DATA_ATTRIBUTE_VISIBLE,"false"); - } - if(activeTabIndex === this.maxEnabledTab || nextVisible === -1) { - this.getNextButtonDiv().setAttribute(Wizard.DATA_ATTRIBUTE_VISIBLE,"false"); + #isAuthoring() { + return window.Granite && window.Granite.author; } - if(tabsLength > 1 && activeTabIndex > this.minEnabledTab && previousVisible > -1) { - this.getPreviousButtonDiv().setAttribute(Wizard.DATA_ATTRIBUTE_VISIBLE,"true"); + #navigateToPreviousTab() { + const activeIndex = this._active; + const tabs = this.getCachedTabs(); + const lastVisibleIndex = this.#findLastVisibleChildIndex(activeIndex); + if (tabs && lastVisibleIndex >= 0) { + this.#navigateAndFocusTab(lastVisibleIndex); + } + this.#hideUnhideNavButtons(this._active); } - if(activeTabIndex < this.maxEnabledTab && nextVisible > -1) { - this.getNextButtonDiv().setAttribute(Wizard.DATA_ATTRIBUTE_VISIBLE,"true"); + /** + * Hides or shows, next and previous navigation buttons + * + * @private + * @param {Number} index The index of the tab to navigate to + * @param {Number} total number of tabs + */ + #hideUnhideNavButtons(activeTabIndex) { + const tabsLength = this.getCachedTabs() ? this.getCachedTabs().length : 0; + + const nextVisible = this.#findNextVisibleChildIndex(activeTabIndex); + const previousVisible = this.#findLastVisibleChildIndex(activeTabIndex); + + if (tabsLength === 0 || this.maxEnabledTab <= this.minEnabledTab) { + this.getPreviousButtonDiv().setAttribute(Wizard.DATA_ATTRIBUTE_VISIBLE, "false"); + this.getNextButtonDiv().setAttribute(Wizard.DATA_ATTRIBUTE_VISIBLE, "false"); + } + + if (activeTabIndex <= this.minEnabledTab || previousVisible === -1) { + this.getPreviousButtonDiv().setAttribute(Wizard.DATA_ATTRIBUTE_VISIBLE, "false"); + } + if (activeTabIndex === this.maxEnabledTab || nextVisible === -1) { + this.getNextButtonDiv().setAttribute(Wizard.DATA_ATTRIBUTE_VISIBLE, "false"); + } + + if (tabsLength > 1 && activeTabIndex > this.minEnabledTab && previousVisible > -1) { + this.getPreviousButtonDiv().setAttribute(Wizard.DATA_ATTRIBUTE_VISIBLE, "true"); + } + + if (activeTabIndex < this.maxEnabledTab && nextVisible > -1) { + this.getNextButtonDiv().setAttribute(Wizard.DATA_ATTRIBUTE_VISIBLE, "true"); + } } - } - #setNavigationRange() { - const wizardPanels = this.getCachedWizardPanels(); - if(wizardPanels) { - this.maxEnabledTab = wizardPanels.length-1; - this.minEnabledTab = 0; - for (let i = 0; i < wizardPanels.length; i++) { - if(!this.#childComponentVisible(this.getCachedWizardPanels()[i])) { - this.minEnabledTab = i+1; - } else { - break; + #setNavigationRange() { + const wizardPanels = this.getCachedWizardPanels(); + if (wizardPanels) { + this.maxEnabledTab = wizardPanels.length - 1; + this.minEnabledTab = 0; + for (let i = 0; i < wizardPanels.length; i++) { + if (!this.#childComponentVisible(this.getCachedWizardPanels()[i])) { + this.minEnabledTab = i + 1; + } else { + break; + } } - } - for (let i = wizardPanels.length - 1; i >= 0; i--) { - if(!this.#childComponentVisible(this.getCachedWizardPanels()[i])) { - this.maxEnabledTab = i; - } else { - break; + for (let i = wizardPanels.length - 1; i >= 0; i--) { + if (!this.#childComponentVisible(this.getCachedWizardPanels()[i])) { + this.maxEnabledTab = i; + } else { + break; + } } + this.minEnabledTab = Math.max(0, this.minEnabledTab); + this.maxEnabledTab = Math.min(this.getCachedTabs().length - 1, this.maxEnabledTab); } - this.minEnabledTab = Math.max(0, this.minEnabledTab); - this.maxEnabledTab = Math.min(this.getCachedTabs().length-1, this.maxEnabledTab); } - } - - #childComponentVisible(wizardTab) { - return wizardTab.children[0].getAttribute('data-cmp-visible') === 'true'; - } - #findNextVisibleChildIndex(currentIndex) { - const tabs = this.getCachedTabs(); - const tabsLength = tabs? tabs.length : 0; - for (let i = currentIndex + 1; i < tabsLength; i++) { - let isVisible = tabs[i].getAttribute(Wizard.DATA_ATTRIBUTE_VISIBLE); - if (isVisible === null || isVisible === 'true') { - return i; - } + #childComponentVisible(wizardTab) { + return wizardTab.children[0].getAttribute('data-cmp-visible') === 'true'; } - return -1; - } - #findLastVisibleChildIndex(currentIndex) { - const tabs = this.getCachedTabs(); - if(tabs) { - for (let i = currentIndex - 1; i >= 0; i--) { + #findNextVisibleChildIndex(currentIndex) { + const tabs = this.getCachedTabs(); + const tabsLength = tabs ? tabs.length : 0; + for (let i = currentIndex + 1; i < tabsLength; i++) { let isVisible = tabs[i].getAttribute(Wizard.DATA_ATTRIBUTE_VISIBLE); if (isVisible === null || isVisible === 'true') { return i; } } + return -1; } - return -1; - } - /** - * Navigates to the item at the provided index and ensures the active tab gains focus - * - * @private - * @param {Number} index The index of the item to navigate to - */ - #navigateAndFocusTab(index) { - this.navigate(index); - this.focusWithoutScroll(this.getCachedTabs()[index]); - } + #findLastVisibleChildIndex(currentIndex) { + const tabs = this.getCachedTabs(); + if (tabs) { + for (let i = currentIndex - 1; i >= 0; i--) { + let isVisible = tabs[i].getAttribute(Wizard.DATA_ATTRIBUTE_VISIBLE); + if (isVisible === null || isVisible === 'true') { + return i; + } + } + } + return -1; + } + + /** + * Navigates to the item at the provided index and ensures the active tab gains focus + * + * @private + * @param {Number} index The index of the item to navigate to + */ + #navigateAndFocusTab(index) { + this.navigate(index); + this.focusWithoutScroll(this.getCachedTabs()[index]); + } - #syncWizardNavLabels() { - const tabs = this.getCachedTabs(); - const wizardPanels = this.getCachedWizardPanels(); - if (tabs) { - for (let i = 0; i < tabs.length; i++) { - let id = wizardPanels[i].querySelectorAll("[data-cmp-is]")[0].id; - tabs[i].id = id + Wizard.#tabIdSuffix; - tabs[i].setAttribute("aria-controls", id + Wizard.#wizardPanelIdSuffix); + #syncWizardNavLabels() { + const tabs = this.getCachedTabs(); + const wizardPanels = this.getCachedWizardPanels(); + if (tabs) { + for (let i = 0; i < tabs.length; i++) { + let id = wizardPanels[i].querySelectorAll("[data-cmp-is]")[0].id; + tabs[i].id = id + Wizard.#tabIdSuffix; + tabs[i].setAttribute("aria-controls", id + Wizard.#wizardPanelIdSuffix); + } } } - } - #syncWizardPanels() { - const wizardPanels = this.getCachedWizardPanels(); - if (wizardPanels) { - for (let i = 0; i < wizardPanels.length; i++) { - let id = wizardPanels[i].querySelectorAll("[data-cmp-is]")[0].id; - wizardPanels[i].id = id + Wizard.#wizardPanelIdSuffix; - wizardPanels[i].setAttribute("aria-labelledby", id + Wizard.#tabIdSuffix); + #syncWizardPanels() { + const wizardPanels = this.getCachedWizardPanels(); + if (wizardPanels) { + for (let i = 0; i < wizardPanels.length; i++) { + let id = wizardPanels[i].querySelectorAll("[data-cmp-is]")[0].id; + wizardPanels[i].id = id + Wizard.#wizardPanelIdSuffix; + wizardPanels[i].setAttribute("aria-labelledby", id + Wizard.#tabIdSuffix); + } } } - } - syncMarkupWithModel() { - super.syncMarkupWithModel(); - this.#syncWizardNavLabels(); - this.#syncWizardPanels(); - } + syncMarkupWithModel() { + super.syncMarkupWithModel(); + this.#syncWizardNavLabels(); + this.#syncWizardPanels(); + } - handleChildAddition(childView) { - if (childView.getInstanceManager() != null && this._templateHTML[childView.getInstanceManager().getId()] != null) { - let navigationTabToBeRepeated = this._templateHTML[childView.getInstanceManager().getId()]['navigationTab'] - .cloneNode(true); - navigationTabToBeRepeated.id = childView.id + Wizard.#tabIdSuffix; - navigationTabToBeRepeated.setAttribute("aria-controls", childView.id + Wizard.#wizardPanelIdSuffix); - let instanceIndex = childView.getModel().index; - let instanceManagerId = childView.getInstanceManager().getId() - if (instanceIndex == 0) { - let closestNonRepeatableFieldId = this._templateHTML[instanceManagerId]['closestNonRepeatableFieldId']; - let closestRepeatableFieldInstanceManagerIds = this._templateHTML[instanceManagerId]['closestRepeatableFieldInstanceManagerIds']; - let indexToInsert = this.getIndexToInsert(closestNonRepeatableFieldId, closestRepeatableFieldInstanceManagerIds); - if (indexToInsert == 0) { - let tabListParentElement = this.#getTabListElement(); - tabListParentElement.insertBefore(navigationTabToBeRepeated, tabListParentElement.firstChild); + handleChildAddition(childView) { + if (childView.getInstanceManager() != null && this._templateHTML[childView.getInstanceManager().getId()] != null) { + let navigationTabToBeRepeated = this._templateHTML[childView.getInstanceManager().getId()]['navigationTab'] + .cloneNode(true); + navigationTabToBeRepeated.id = childView.id + Wizard.#tabIdSuffix; + navigationTabToBeRepeated.setAttribute("aria-controls", childView.id + Wizard.#wizardPanelIdSuffix); + let instanceIndex = childView.getModel().index; + let instanceManagerId = childView.getInstanceManager().getId() + if (instanceIndex == 0) { + let closestNonRepeatableFieldId = this._templateHTML[instanceManagerId]['closestNonRepeatableFieldId']; + let closestRepeatableFieldInstanceManagerIds = this._templateHTML[instanceManagerId]['closestRepeatableFieldInstanceManagerIds']; + let indexToInsert = this.getIndexToInsert(closestNonRepeatableFieldId, closestRepeatableFieldInstanceManagerIds); + if (indexToInsert == 0) { + let tabListParentElement = this.#getTabListElement(); + tabListParentElement.insertBefore(navigationTabToBeRepeated, tabListParentElement.firstChild); + } else { + let beforeElement = this.getCachedTabs()[indexToInsert - 1]; + beforeElement.after(navigationTabToBeRepeated); + } } else { - let beforeElement = this.getCachedTabs()[indexToInsert - 1]; + let beforeTabNavElementId = childView.getInstanceManager().children[instanceIndex - 1].element.id + Wizard.#tabIdSuffix + let beforeElement = this.#getTabNavElementById(beforeTabNavElementId); beforeElement.after(navigationTabToBeRepeated); } - } else { - let beforeTabNavElementId = childView.getInstanceManager().children[instanceIndex - 1].element.id + Wizard.#tabIdSuffix - let beforeElement = this.#getTabNavElementById(beforeTabNavElementId); - beforeElement.after(navigationTabToBeRepeated); + this.cacheElements(this._elements.self); + let repeatedWizardPanel = this.#getWizardPanelElementById(childView.id + Wizard.#wizardPanelIdSuffix); + repeatedWizardPanel.setAttribute("aria-labelledby", childView.id + Wizard.#tabIdSuffix); + this.refreshActive(); + this.#getTabIndexById(); + if (childView.getInstanceManager().getModel().minOccur != undefined && childView.getInstanceManager().children.length > childView.getInstanceManager().getModel().minOccur) { + this.#navigateAndFocusTab(this.#getTabIndexById(navigationTabToBeRepeated.id)); + } } + } + + handleChildRemoval(removedInstanceView) { + let removedTabPanelId = removedInstanceView.element.id + Wizard.#wizardPanelIdSuffix; + let removedTabNavId = removedTabPanelId.substring(0, removedTabPanelId.lastIndexOf("__")) + Wizard.#tabIdSuffix; + let wizardPanelElement = this.#getWizardPanelElementById(removedTabPanelId); + let tabNavElement = this.#getTabNavElementById(removedTabNavId); + tabNavElement.remove(); + wizardPanelElement.remove(); + this.children.splice(this.children.indexOf(removedInstanceView), 1); this.cacheElements(this._elements.self); - let repeatedWizardPanel = this.#getWizardPanelElementById(childView.id + Wizard.#wizardPanelIdSuffix); - repeatedWizardPanel.setAttribute("aria-labelledby", childView.id + Wizard.#tabIdSuffix); + this._active = this.getActiveIndex(this.getCachedTabs()); this.refreshActive(); - this.#getTabIndexById(); - if (childView.getInstanceManager().getModel().minOccur != undefined && childView.getInstanceManager().children.length > childView.getInstanceManager().getModel().minOccur) { - this.#navigateAndFocusTab(this.#getTabIndexById(navigationTabToBeRepeated.id)); - } } - } - handleChildRemoval(removedInstanceView) { - let removedTabPanelId = removedInstanceView.element.id + Wizard.#wizardPanelIdSuffix; - let removedTabNavId = removedTabPanelId.substring(0, removedTabPanelId.lastIndexOf("__")) + Wizard.#tabIdSuffix; - let wizardPanelElement = this.#getWizardPanelElementById(removedTabPanelId); - let tabNavElement = this.#getTabNavElementById(removedTabNavId); - tabNavElement.remove(); - wizardPanelElement.remove(); - this.children.splice(this.children.indexOf(removedInstanceView), 1); - this.cacheElements(this._elements.self); - this._active = this.getActiveIndex(this.getCachedTabs()); - this.refreshActive(); - } - - addChild(childView) { - super.addChild(childView); - this.#cacheTemplateHTML(childView); - //when all children are available in view - if (this.getCountOfAllChildrenInModel() === this.children.length) { - this.cacheClosestFieldsInView(); - this.handleHiddenChildrenVisibility(); + addChild(childView) { + super.addChild(childView); + this.#cacheTemplateHTML(childView); + //when all children are available in view + if (this.getCountOfAllChildrenInModel() === this.children.length) { + this.cacheClosestFieldsInView(); + this.handleHiddenChildrenVisibility(); + } + this.#setNavigationRange(); + this.#hideUnhideNavButtons(this._active); } - this.#setNavigationRange(); - this.#hideUnhideNavButtons(this._active); - } - getChildViewByIndex(index) { - let wizardPanels = this.getCachedWizardPanels(); - let fieldId = wizardPanels[index].id.substring(0, wizardPanels[index].id.lastIndexOf("__")); - return this.getChild(fieldId); - } + getChildViewByIndex(index) { + let wizardPanels = this.getCachedWizardPanels(); + let fieldId = wizardPanels[index].id.substring(0, wizardPanels[index].id.lastIndexOf("__")); + return this.getChild(fieldId); + } - /** - * Adds unique HTML for added instance corresponding to requirements of different types of repeatableParent - * @param instanceManager of the repeated component - * @param addedModel of the repeated component - * @param htmlElement of the repeated component - */ - addRepeatableMarkup(instanceManager, addedModel, htmlElement) { - let elementToEnclose = this._templateHTML[instanceManager.getId()]['targetWizardPanel'].cloneNode(false); - elementToEnclose.id = addedModel.id + Wizard.#wizardPanelIdSuffix; - let result = this.#getBeforeViewElement(instanceManager, addedModel.index); - let beforeViewElement = result.beforeViewElement; - beforeViewElement.after(elementToEnclose); - elementToEnclose.append(htmlElement.querySelector('#' + addedModel.id)); - return elementToEnclose; - } + /** + * Adds unique HTML for added instance corresponding to requirements of different types of repeatableParent + * @param instanceManager of the repeated component + * @param addedModel of the repeated component + * @param htmlElement of the repeated component + */ + addRepeatableMarkup(instanceManager, addedModel, htmlElement) { + let elementToEnclose = this._templateHTML[instanceManager.getId()]['targetWizardPanel'].cloneNode(false); + elementToEnclose.id = addedModel.id + Wizard.#wizardPanelIdSuffix; + let result = this.#getBeforeViewElement(instanceManager, addedModel.index); + let beforeViewElement = result.beforeViewElement; + beforeViewElement.after(elementToEnclose); + elementToEnclose.append(htmlElement.querySelector('#' + addedModel.id)); + return elementToEnclose; + } - #cacheTemplateHTML(childView) { - if (childView.getInstanceManager() != null && (this._templateHTML == null || this._templateHTML[childView.getInstanceManager().getId()] == null)) { - let tabId = childView.element.id + Wizard.#tabIdSuffix; - let wizardPanelId = childView.element.id + Wizard.#wizardPanelIdSuffix; - let instanceManagerId = childView.getInstanceManager().getId(); - let navigationTabToBeRepeated = this.#getTabNavElementById(tabId); - let wizardPanelToBeRepeated = this.#getWizardPanelElementById(wizardPanelId) - this._templateHTML[instanceManagerId] = {}; - this._templateHTML[instanceManagerId]['navigationTab'] = navigationTabToBeRepeated; - this._templateHTML[instanceManagerId]['targetWizardPanel'] = wizardPanelToBeRepeated; + #cacheTemplateHTML(childView) { + if (childView.getInstanceManager() != null && (this._templateHTML == null || this._templateHTML[childView.getInstanceManager().getId()] == null)) { + let tabId = childView.element.id + Wizard.#tabIdSuffix; + let wizardPanelId = childView.element.id + Wizard.#wizardPanelIdSuffix; + let instanceManagerId = childView.getInstanceManager().getId(); + let navigationTabToBeRepeated = this.#getTabNavElementById(tabId); + let wizardPanelToBeRepeated = this.#getWizardPanelElementById(wizardPanelId) + this._templateHTML[instanceManagerId] = {}; + this._templateHTML[instanceManagerId]['navigationTab'] = navigationTabToBeRepeated; + this._templateHTML[instanceManagerId]['targetWizardPanel'] = wizardPanelToBeRepeated; + } } - } - #getTabNavElementById(tabId) { - let tabs = this.getCachedTabs(); - if (tabs) { - for (let i = 0; i < tabs.length; i++) { - if (tabs[i].id === tabId) { - return tabs[i]; + #getTabNavElementById(tabId) { + let tabs = this.getCachedTabs(); + if (tabs) { + for (let i = 0; i < tabs.length; i++) { + if (tabs[i].id === tabId) { + return tabs[i]; + } } } } - } - #getWizardPanelElementById(wizardPanelId) { - let wizardPanels = this.getCachedWizardPanels(); - if (wizardPanels) { - for (let i = 0; i < wizardPanels.length; i++) { - if (wizardPanels[i].id === wizardPanelId) { - return wizardPanels[i]; + #getWizardPanelElementById(wizardPanelId) { + let wizardPanels = this.getCachedWizardPanels(); + if (wizardPanels) { + for (let i = 0; i < wizardPanels.length; i++) { + if (wizardPanels[i].id === wizardPanelId) { + return wizardPanels[i]; + } } } } - } - #getTabIndexById(tabId) { - let tabs = this.getCachedTabs(); - if (tabs) { - for (let i = 0; i < tabs.length; i++) { - if (tabs[i].id === tabId) { - return i; + #getTabIndexById(tabId) { + let tabs = this.getCachedTabs(); + if (tabs) { + for (let i = 0; i < tabs.length; i++) { + if (tabs[i].id === tabId) { + return i; + } } } + return -1; } - return -1; - } - #getBeforeViewElement(instanceManager, instanceIndex) { - let result = {}; - let instanceManagerId = instanceManager.getId(); - if (instanceIndex == 0) { - let closestNonRepeatableFieldId = this._templateHTML[instanceManagerId]['closestNonRepeatableFieldId']; - let closestRepeatableFieldInstanceManagerIds = this._templateHTML[instanceManagerId]['closestRepeatableFieldInstanceManagerIds']; - let indexToInsert = this.getIndexToInsert(closestNonRepeatableFieldId, closestRepeatableFieldInstanceManagerIds); - let wizardPanels = this.getCachedWizardPanels(); - if (indexToInsert > 0) { - result.beforeViewElement = this.#getWizardPanelElementById(wizardPanels[indexToInsert - 1].id); + #getBeforeViewElement(instanceManager, instanceIndex) { + let result = {}; + let instanceManagerId = instanceManager.getId(); + if (instanceIndex == 0) { + let closestNonRepeatableFieldId = this._templateHTML[instanceManagerId]['closestNonRepeatableFieldId']; + let closestRepeatableFieldInstanceManagerIds = this._templateHTML[instanceManagerId]['closestRepeatableFieldInstanceManagerIds']; + let indexToInsert = this.getIndexToInsert(closestNonRepeatableFieldId, closestRepeatableFieldInstanceManagerIds); + let wizardPanels = this.getCachedWizardPanels(); + if (indexToInsert > 0) { + result.beforeViewElement = this.#getWizardPanelElementById(wizardPanels[indexToInsert - 1].id); + } else { + result.beforeViewElement = this.getPreviousButtonDiv(); + } } else { - result.beforeViewElement = this.getPreviousButtonDiv(); + let previousInstanceElement = this.#getRepeatableElementAt(instanceManager, instanceIndex - 1) + result.beforeViewElement = previousInstanceElement; } - } else { - let previousInstanceElement = this.#getRepeatableElementAt(instanceManager, instanceIndex - 1) - result.beforeViewElement = previousInstanceElement; + return result; } - return result; - } - #getRepeatableElementAt(instanceManager, index) { - let childId = instanceManager._model.items.find((model) => model.index === index)?.id; - return this.element.querySelector(`#${childId}${Wizard.#wizardPanelIdSuffix}`); - } + #getRepeatableElementAt(instanceManager, index) { + let childId = instanceManager._model.items.find((model) => model.index === index)?.id; + return this.element.querySelector(`#${childId}${Wizard.#wizardPanelIdSuffix}`); + } - updateChildVisibility(visible, state) { - this.updateVisibilityOfNavigationElement(this.#getTabNavElementById(state.id + Wizard.#tabIdSuffix), visible); - let activeTabNavElement = this.getCachedTabs()[this._active]; - this.#setNavigationRange(); - this.#hideUnhideNavButtons(this._active); - if (!visible && activeTabNavElement.id === state.id + Wizard.#tabIdSuffix) { - let child = this.findFirstVisibleChild(this.getCachedTabs()); - if (child) { - this.#navigateAndFocusTab(this.#getTabIndexById(child.id)); + updateChildVisibility(visible, state) { + this.updateVisibilityOfNavigationElement(this.#getTabNavElementById(state.id + Wizard.#tabIdSuffix), visible); + let activeTabNavElement = this.getCachedTabs()[this._active]; + this.#setNavigationRange(); + this.#hideUnhideNavButtons(this._active); + if (!visible && activeTabNavElement.id === state.id + Wizard.#tabIdSuffix) { + let child = this.findFirstVisibleChild(this.getCachedTabs()); + if (child) { + this.#navigateAndFocusTab(this.#getTabIndexById(child.id)); + } } } } + + FormView.Utils.setupField(({element, formContainer}) => { + return new Wizard({element, formContainer}) + }, Wizard.selectors.self); } - FormView.Utils.setupField(({element, formContainer}) => { - return new Wizard({element, formContainer}) - }, Wizard.selectors.self); + if (window.Forms && window.Forms.CoreComponentsCommons && window.Forms.CoreComponentsCommons.WizardMixin) { + onWizardMixinLoaded({ detail: { WizardMixin: window.Forms.CoreComponentsCommons.WizardMixin } }); + } else { + window.addEventListener('WizardMixinLoaded', onWizardMixinLoaded); + } }());