Adding support for custom form container component

it/apps/src/main/content/jcr_root/apps/forms-core-components-it/clientlibs/custom-forms-components-runtime-all/.content.xml

@@ -5,4 +5,4 @@
     cssProcessor="[default:none,min:none]"
     jsProcessor="[default:none,min:none]"
     categories="[core.forms.components.it.runtime.all]"
-    embed="[core.forms.components.runtime.base,core.forms.components.container.v2.runtime,core.forms.components.datePicker.v1.runtime,core.forms.components.textinput.v1.runtime,core.forms.components.numberinput.v1.runtime,core.forms.components.panelcontainer.v1.runtime,core.forms.components.radiobutton.v1.runtime,core.forms.components.text.v1.runtime,core.forms.components.checkboxgroup.v1.runtime,core.forms.components.button.v1.runtime,core.forms.components.image.v1.runtime,core.forms.components.dropdown.v1.runtime,core.forms.components.fileinput.v2.runtime,core.forms.components.accordion.v1.runtime,core.forms.components.tabs.v1.runtime,core.forms.components.wizard.v1.runtime,core.forms.components.verticaltabs.v1.runtime,core.forms.components.recaptcha.v1.runtime,core.forms.components.checkbox.v1.runtime,core.forms.components.fragment.v1.runtime,core.forms.components.switch.v1.runtime,core.forms.components.termsandconditions.v1.runtime, core.forms.components.it.textinput.v1.runtime, core.forms.components.hcaptcha.v1.runtime]"/>
+    embed="[core.forms.components.runtime.base,core.forms.components.it.container.v1.runtime,core.forms.components.datePicker.v1.runtime,core.forms.components.textinput.v1.runtime,core.forms.components.numberinput.v1.runtime,core.forms.components.panelcontainer.v1.runtime,core.forms.components.radiobutton.v1.runtime,core.forms.components.text.v1.runtime,core.forms.components.checkboxgroup.v1.runtime,core.forms.components.button.v1.runtime,core.forms.components.image.v1.runtime,core.forms.components.dropdown.v1.runtime,core.forms.components.fileinput.v2.runtime,core.forms.components.accordion.v1.runtime,core.forms.components.tabs.v1.runtime,core.forms.components.wizard.v1.runtime,core.forms.components.verticaltabs.v1.runtime,core.forms.components.recaptcha.v1.runtime,core.forms.components.checkbox.v1.runtime,core.forms.components.fragment.v1.runtime,core.forms.components.switch.v1.runtime,core.forms.components.termsandconditions.v1.runtime, core.forms.components.it.textinput.v1.runtime, core.forms.components.hcaptcha.v1.runtime]"/>

it/apps/src/main/content/jcr_root/apps/forms-core-components-it/components/container/.content.xml

@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+    jcr:primaryType="sling:Folder"/>

it/apps/src/main/content/jcr_root/apps/forms-core-components-it/components/container/v1/.content.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+    jcr:primaryType="nt:unstructured">
+    <container/>
+</jcr:root>

it/apps/src/main/content/jcr_root/apps/forms-core-components-it/components/container/v1/container/.content.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+    cq:icon="form"
+    cq:isContainer="{Boolean}true"
+    jcr:description="Container allowing to construct adaptive forms"
+    jcr:primaryType="cq:Component"
+    jcr:title="Adaptive Form Container (loader)"
+    sling:resourceSuperType="core/fd/components/form/container/v2/container"
+    componentGroup=".core-wcm"/>

it/apps/src/main/content/jcr_root/apps/forms-core-components-it/components/container/v1/container/README.md

@@ -0,0 +1,19 @@
+<!--
+Copyright 2022 Adobe
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+Adaptive Form Container (loader)
+====
+Adaptive Form container extending OOTB form container 
+and additionally added support for loader icon during submit

it/apps/src/main/content/jcr_root/apps/forms-core-components-it/components/container/v1/container/_cq_template/.content.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:fd="http://www.adobe.com/aemfd/fd/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
+    jcr:primaryType="nt:unstructured"
+          jcr:title="Form Container"
+          fd:version="2.1"
+          fieldType="form">
+    <cq:responsive jcr:primaryType="nt:unstructured"/>
+</jcr:root>

it/apps/src/main/content/jcr_root/apps/forms-core-components-it/components/container/v1/container/clientlibs/.content.xml

@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+    jcr:primaryType="sling:Folder"/>

it/apps/src/main/content/jcr_root/apps/forms-core-components-it/components/container/v1/container/clientlibs/site/.content.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+    jcr:primaryType="cq:ClientLibraryFolder"
+    allowProxy="{Boolean}true"
+    categories="[core.forms.components.it.container.v1.runtime]"
+    jsProcessor="[default:none,min:none]"
+    dependencies="[core.forms.components.runtime.base]"/>

it/apps/src/main/content/jcr_root/apps/forms-core-components-it/components/container/v1/container/clientlibs/site/css.txt

@@ -0,0 +1,18 @@
+###############################################################################
+# Copyright 2022 Adobe
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+###############################################################################
+
+#base=css
+formcontainerview.css

it/apps/src/main/content/jcr_root/apps/forms-core-components-it/components/container/v1/container/clientlibs/site/css/formcontainerview.css

@@ -0,0 +1,22 @@
+/*******************************************************************************
+ * Copyright 2022 Adobe
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ ******************************************************************************/
+
+form:not(.cmp-adaptiveform-container--edit) [data-cmp-visible="false"] {
+    display: none !important;
+}
+.cmp-adaptiveform-container--loading{
+
+}

it/apps/src/main/content/jcr_root/apps/forms-core-components-it/components/container/v1/container/clientlibs/site/js.txt

@@ -0,0 +1,18 @@
+###############################################################################
+# Copyright 2022 Adobe
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+###############################################################################
+
+#base=js
+formcontainerview.js

it/apps/src/main/content/jcr_root/apps/forms-core-components-it/components/container/v1/container/clientlibs/site/js/formcontainerview.js

@@ -0,0 +1,167 @@
+/*******************************************************************************
+ * Copyright 2022 Adobe
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ ******************************************************************************/
+
+(function() {
+
+    "use strict";
+    class FormContainerV2 extends FormView.FormContainer {
+        static NS = FormView.Constants.NS;
+        static IS = "adaptiveFormContainer";
+        static bemBlock = 'cmp-adaptiveform-container';
+        static selectors  = {
+            self: "[data-" + this.NS + '-is="' + this.IS + '"]',
+        };
+        static loadingClass = `${FormContainerV2.bemBlock}--loading`;
+        constructor(params) {
+            super(params);
+            let self = this;
+            // Function to add the loading class
+            const addLoadingClass = (formId) => {
+                const formContainer = document.querySelector(`[data-cmp-adaptiveform-container-loader='${formId}']`);
+                if (formContainer) {
+                    formContainer.classList.add('cmp-adaptiveform-container--loading');
+                }
+            };
+            // Function to remove the loading class
+            const removeLoadingClass = (formId) => {
+                const formContainer = document.querySelector(`[data-cmp-adaptiveform-container-loader='${formId}']`);
+                if (formContainer) {
+                    formContainer.classList.remove('cmp-adaptiveform-container--loading');
+                }
+            };
+            this._model.subscribe((action) => {
+                addLoadingClass(action.target.id);
+            }, "submit");
+            this._model.subscribe((action) => {
+                removeLoadingClass(self.getModel().id);
+                let state = action.target.getState();
+                // execute the handler only if there are no rules configured on submitSuccess event.
+                if (!state.events.submitSuccess || state.events.submitSuccess.length === 0) {
+                    const globals = {
+                        form: self.getModel().getRuleNode(),
+                        event: {
+                            type: action.type,
+                            payload: action.payload,
+                        }
+                    };
+                    FormView.customFunctions.defaultSubmitSuccessHandler(globals);
+                }
+            }, "submitSuccess");
+            this._model.subscribe((action) => {
+                removeLoadingClass(self.getModel().id);
+                let state = action.target.getState();
+                // execute the handler only if there are no rules configured on submitError event.
+                if (!state.events.submitError || state.events.submitError.length === 0) {
+                    let defaultSubmissionError = FormView.LanguageUtils.getTranslatedString(self.getLang(), "InternalFormSubmissionError");
+                    const globals = {
+                        form: self.getModel().getRuleNode(),
+                        event: {
+                            type: action.type,
+                            payload: action.payload,
+                        }
+                    };
+                    FormView.customFunctions.defaultSubmitErrorHandler(defaultSubmissionError, globals);
+                }
+            }, "submitError");
+            this._model.subscribe((action) => {
+                let state = action.target.getState();
+                // execute the handler only if there are no rules configured on custom:saveSuccess event.
+                if (!state.events['custom:saveSuccess'] || state.events['custom:saveSuccess'].length === 0) {
+                    console.log("Draft id = " + action?.payload?.body?.draftId);
+                    window.alert("Draft has been saved successfully");
+                }
+            }, "saveSuccess");
+            this._model.subscribe((action) => {
+                let state = action.target.getState();
+                // execute the handler only if there are no rules configured on custom:saveError event.
+                if (!state.events['custom:saveError'] || state.events['custom:saveError'].length === 0) {
+                    window.alert("Issue while saving draft");
+                }
+            }, "saveError");
+            this.#setupAutoSave(self.getModel());
+        }
+
+        /**
+         * Register time based auto save
+         * @param formModel.
+         */
+         #setupAutoSave(formModel) {
+            const autoSaveProperties = formModel?.properties?.['fd:autoSave'];
+            const enableAutoSave = autoSaveProperties?.['fd:enableAutoSave'];
+            if (enableAutoSave) {
+                const autoSaveStrategyType = autoSaveProperties['fd:autoSaveStrategyType'];
+                const autoSaveInterval = autoSaveProperties['fd:autoSaveInterval'];
+                const saveEndPoint = FormView.Utils.getContextPath() + '/adobe/forms/af/save/' + formModel.id;
+                if (autoSaveStrategyType === 'time' && autoSaveInterval) {
+                    console.log("Registering time based auto save");
+                    setInterval(() => {
+                        formModel.dispatch(new FormView.Actions.Save({
+                            'action': saveEndPoint
+                        }));
+                    }, parseInt(autoSaveInterval) * 1000);
+                }
+            }
+        }
+    }
+
+    async function onDocumentReady() {
+        const startTime = new Date().getTime();
+        let elements = document.querySelectorAll(FormContainerV2.selectors.self);
+        for (let i = 0; i < elements.length; i++) {
+            let loaderToAdd = document.querySelector("[data-cmp-adaptiveform-container-loader='"+ elements[i].id + "']");
+            if(loaderToAdd){
+                loaderToAdd.classList.add(FormContainerV2.loadingClass);
+            }
+            console.debug("Form loading started", elements[i].id);
+        }
+        function onInit(e) {
+            let formContainer =  e.detail;
+            let formEl = formContainer.getFormElement();
+            setTimeout(() => {
+                let loaderToRemove = document.querySelector("[data-cmp-adaptiveform-container-loader='"+ formEl.id + "']");
+                if(loaderToRemove){
+                    loaderToRemove.classList.remove(FormContainerV2.loadingClass);
+                }
+                const timeTaken = new Date().getTime() - startTime;
+                console.debug("Form loading complete", formEl.id, timeTaken);
+                }, 10);
+        }
+        document.addEventListener(FormView.Constants.FORM_CONTAINER_INITIALISED, onInit);
+        await FormView.Utils.setupFormContainer(async ({
+            _formJson, _prefillData, _path, _element
+        }) => {
+            let formContainer = new FormContainerV2({_formJson, _prefillData, _path, _element});
+            // before initializing the form container load all the locale specific json resources
+            // for runtime
+            const formLanguage = formContainer.getLang();
+            const aemLangUrl = `/etc.clientlibs/core/fd/af-clientlibs/core-forms-components-runtime-all/resources/i18n/${formLanguage}.json`;
+            await FormView.LanguageUtils.loadLang(formLanguage, aemLangUrl, true);
+            formContainer.subscribe();
+            return formContainer;
+        }, FormContainerV2.selectors.self, FormContainerV2.IS);
+    }
+
+    // This is to ensure that the there is no WCM Mode cookie when Form Container is rendered.
+    // max-age=0 ensures that the cookie is deleted.
+    document.cookie="wcmmode=disabled; max-age=0; path=/";
+
+    if (document.readyState !== "loading") {
+        onDocumentReady();
+    } else {
+        document.addEventListener("DOMContentLoaded", onDocumentReady);
+    }
+
+})();

it/apps/src/main/content/jcr_root/apps/forms-core-components-it/components/textinput/v1/textinput/clientlibs/site/.content.xml

@@ -3,4 +3,4 @@
     jcr:primaryType="cq:ClientLibraryFolder"
     allowProxy="{Boolean}true"
     categories="[core.forms.components.it.textinput.v1.runtime]"
-    dependencies="[core.forms.components.runtime.base, core.forms.components.container.v2.runtime, core.forms.components.textinput.v1.runtime]"/>
+    dependencies="[core.forms.components.runtime.base, core.forms.components.textinput.v1.runtime]"/>

it/content/src/main/content/jcr_root/content/forms/af/core-components-it/samples/container/.content.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:rep="internal" xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
+    jcr:mixinTypes="[rep:AccessControllable]"
+    jcr:primaryType="sling:Folder"
+    hidden="true"/>