FORMS-13470: Modal component css, js

it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/modal/.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:sling="http://sling.apache.org/jcr/sling/1.0"
+    jcr:primaryType="sling:Folder"
+    lcFolder="{Long}0"
+    type="lcFolder"/>

it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/modal/basic/.content.xml

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:dam="http://www.day.com/dam/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:xmp="http://ns.adobe.com/xap/1.0/" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:fd="http://www.adobe.com/aemfd/fd/1.0"
+    jcr:primaryType="dam:Asset">
+    <jcr:content
+        cq:conf="\0"
+        jcr:lastModified="{Date}2024-03-20T09:33:42.988+05:30"
+        jcr:primaryType="dam:AssetContent"
+        sling:resourceType="fd/fm/af/render"
+        guide="1"
+        type="guide">
+        <metadata
+            fd:version="2.1"
+            jcr:language="en"
+            jcr:primaryType="nt:unstructured"
+            xmp:CreatorTool="AEM Forms AF Wizard"
+            allowedRenderFormat="HTML"
+            author="admin"
+            availableInMobileApp="{Boolean}false"
+            dorTemplateChanged="Boolean"
+            dorType="none"
+            formmodel="none"
+            themeRef="/libs/fd/af/themes/canvas"
+            title="Adaptive Form V2 (IT)"/>
+    </jcr:content>
+</jcr:root>

it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/modal/basic/_jcr_content/renditions/cq5dam.thumbnail.140.100.png.dir/.content.xml

@@ -0,0 +1,7 @@
+<?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" xmlns:oak="http://jackrabbit.apache.org/oak/ns/1.0"
+    jcr:primaryType="nt:file">
+    <jcr:content
+        jcr:lastModifiedBy="admin"
+        jcr:primaryType="oak:Resource"/>
+</jcr:root>

it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/modal/basic/_jcr_content/renditions/cq5dam.thumbnail.319.319.png.dir/.content.xml

@@ -0,0 +1,7 @@
+<?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" xmlns:oak="http://jackrabbit.apache.org/oak/ns/1.0"
+    jcr:primaryType="nt:file">
+    <jcr:content
+        jcr:lastModifiedBy="admin"
+        jcr:primaryType="oak:Resource"/>
+</jcr:root>

it/content/src/main/content/jcr_root/content/dam/formsanddocuments/core-components-it/samples/modal/basic/_jcr_content/renditions/cq5dam.thumbnail.48.48.png.dir/.content.xml

@@ -0,0 +1,7 @@
+<?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" xmlns:oak="http://jackrabbit.apache.org/oak/ns/1.0"
+    jcr:primaryType="nt:file">
+    <jcr:content
+        jcr:lastModifiedBy="admin"
+        jcr:primaryType="oak:Resource"/>
+</jcr:root>

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

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

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

@@ -0,0 +1,72 @@
+<?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" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:fd="http://www.adobe.com/aemfd/fd/1.0"
+    jcr:primaryType="cq:Page">
+    <jcr:content
+        cq:deviceGroups="[/etc/mobile/groups/responsive]"
+        cq:lastModified="{Date}2024-03-20T09:33:42.990+05:30"
+        cq:lastModifiedBy="admin"
+        cq:template="/conf/core-components-examples/settings/wcm/templates/af-blank-v2"
+        jcr:language="en"
+        jcr:primaryType="cq:PageContent"
+        jcr:title="Adaptive Form V2 (IT)"
+        sling:configRef="/conf/forms/core-components-it/samples/modal/basic/"
+        sling:resourceType="forms-components-examples/components/page">
+        <guideContainer
+            fd:version="2.1"
+            jcr:primaryType="nt:unstructured"
+            sling:resourceType="forms-components-examples/components/form/container"
+            dorType="none"
+            fieldType="form"
+            schemaType="none"
+            thankYouOption="page"
+            themeRef="/libs/fd/af/themes/canvas"
+            title="basic">
+            <modal
+                jcr:created="{Date}2024-03-19T20:19:02.707+05:30"
+                jcr:createdBy="admin"
+                jcr:lastModified="{Date}2024-03-19T20:19:02.707+05:30"
+                jcr:lastModifiedBy="admin"
+                jcr:primaryType="nt:unstructured"
+                jcr:title="Modal"
+                sling:resourceType="forms-components-examples/components/form/modal"
+                fieldType="panel"
+                name="modal1710859742923">
+                <panelcontainer
+                    jcr:primaryType="nt:unstructured"
+                    jcr:title="Panel"
+                    sling:resourceType="core/fd/components/form/panelcontainer/v1/panelcontainer"
+                    fieldType="panel"
+                    name="panelcontainer">
+                    <fd:rules
+                        jcr:primaryType="nt:unstructured"
+                        validationStatus="valid"
+                        visible="false()"/>
+                    <fd:events jcr:primaryType="nt:unstructured"/>
+                    <datepicker
+                        jcr:created="{Date}2024-03-20T08:59:01.741+05:30"
+                        jcr:createdBy="admin"
+                        jcr:lastModified="{Date}2024-03-20T08:59:01.741+05:30"
+                        jcr:lastModifiedBy="admin"
+                        jcr:primaryType="nt:unstructured"
+                        jcr:title="Date Input"
+                        sling:resourceType="forms-components-examples/components/form/datepicker"
+                        fieldType="date-input"
+                        name="datepicker1710905342080"/>
+                </panelcontainer>
+                <button
+                    jcr:primaryType="nt:unstructured"
+                    jcr:title="Open Modal"
+                    sling:resourceType="core/fd/components/form/button/v1/button"
+                    fieldType="button"
+                    name="button1710859743025">
+                    <fd:rules
+                        jcr:primaryType="nt:unstructured"
+                        validationStatus="valid"/>
+                    <fd:events
+                        jcr:primaryType="nt:unstructured"
+                        click="dispatchEvent(panelcontainer, 'custom:setProperty', {visible : true()})"/>
+                </button>
+            </modal>
+        </guideContainer>
+    </jcr:content>
+</jcr:root>

ui.af.apps/src/main/content/jcr_root/apps/core/fd/af-clientlibs/core-forms-components-runtime-all/.content.xml

@@ -5,4 +5,4 @@
     cssProcessor="[default:none,min:none]"
     jsProcessor="[default:none,min:none]"
     categories="[core.forms.components.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]"/>
+    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.modal.v1.runtime]"/>

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/README.md

@@ -0,0 +1,71 @@
+<!--
+Copyright 2024 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 Modal (v1)
+====
+
+## Introduction
+
+The Modal component is a part of the Adobe Forms Core Components library. It provides a dialog box or popup window that is displayed on top of the current page.
+
+## Features
+
+- Display content in a layer above the current page
+- Close the modal when the Escape key is pressed
+- Make the background inactive when the modal is open
+
+### Edit Dialog Properties
+The following properties are written to JCR for this Form Panel component and are expected to be available as `Resource` properties:
+
+1. `./jcr:title` - defines the label to use for this field
+2. `./hideTitle` - if set to `true`, the label of this field will be hidden
+3. `./name` - defines the name of the field, which will be submitted with the form data
+4. `./description` - defines a help message that can be rendered in the field as a hint for the user
+5. `./readOnly` - if set to `true`, the filed will be read only
+
+
+## Client Libraries
+The component provides a `core.forms.components.termsandconditions.v1.runtime` client library category that contains the Javascript runtime for the component.
+It should be added to a relevant site client library using the `embed` property.
+
+
+## BEM Description
+```
+BLOCK cmp-adaptiveform-modal
+    ELEMENT cmp-adaptiveform-modal__dialog
+    ELEMENT cmp-adaptiveform-modal__panel-container
+    MODIFIER cmp-adaptiveform-modal__panel-container--hidden
+    ELEMENT cmp-adaptiveform-modal__overlay
+    ELEMENT cmp-adaptiveform-modal__label-container
+    ELEMENT cmp-adaptiveform-modal__label
+    ELEMENT cmp-adaptiveform-modal__questionmark
+    ELEMENT cmp-adaptiveform-modal__shortdescription
+    ELEMENT cmp-adaptiveform-modal__longdescription
+```
+
+## JavaScript Data Attribute Bindings
+
+The following attributes must be added for the initialization of the text-input component in the form view:
+1. `data-cmp-is="adaptiveFormModal"`
+2. `data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}"`
+
+
+The following are optional attributes that can be added to the component in the form view:
+1. `data-cmp-valid` having a boolean value to indicate whether the field is currently valid or not
+2. `data-cmp-required` having a boolean value to indicate whether the field is currently required or not
+3. `data-cmp-readonly` having a boolean value to indicate whether the field is currently readonly or not
+4. `data-cmp-active` having a boolean value to indicate whether the field is currently active or not
+5. `data-cmp-visible` having a boolean value to indicate whether the field is currently visible or not
+6. `data-cmp-enabled` having a boolean value to indicate whether the field is currently enabled or not

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/modal/v1/modal/_cq_design_dialog/.content.xml

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/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="Adaptive Form Container"
+  sling:resourceType="cq/gui/components/authoring/dialog"
+  trackingFeature="core-components:design-dialog:adaptiveform-modal:v1">
+    <content
+      jcr:primaryType="nt:unstructured"
+      sling:resourceType="granite/ui/components/coral/foundation/container">
+        <items jcr:primaryType="nt:unstructured">
+            <tabs
+              jcr:primaryType="nt:unstructured"
+              sling:resourceType="granite/ui/components/coral/foundation/tabs">
+                <items jcr:primaryType="nt:unstructured">
+                    <assetmapping
+                      jcr:primaryType="nt:unstructured"
+                      jcr:title="Default Components"
+                      sling:resourceType="granite/ui/components/coral/foundation/container"
+                      margin="{Boolean}true"
+                      granite:hide="{Boolean}true" />
+                    <responsivesettings
+                      jcr:primaryType="nt:unstructured"
+                      jcr:title="Responsive Settings"
+                      sling:resourceType="granite/ui/components/coral/foundation/container"
+                      margin="{Boolean}true"
+                      granite:hide="{Boolean}true" />
+                    <styletab
+                      jcr:primaryType="nt:unstructured"
+                      sling:resourceType="granite/ui/components/coral/foundation/include"
+                      path="/mnt/overlay/cq/gui/components/authoring/dialog/style/tab_design/styletab"/>
+                    <customProperties
+                      jcr:primaryType="nt:unstructured"
+                      sling:resourceType="granite/ui/components/coral/foundation/include"
+                      path="core/fd/components/form/base/v1/base/cq:design_dialog/content/items/tabs/items/customProperties"/>
+                </items>
+            </tabs>
+        </items>
+    </content>
+</jcr:root>