[Do not merge] Custom core component sample

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]"/>
+    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.it.addresslookup.v1.runtime]"/>

it/apps/src/main/content/jcr_root/apps/forms-core-components-it/components/addresslookup/.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/addresslookup/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">
+    <addresslookup/>
+</jcr:root>

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

@@ -0,0 +1,8 @@
+<?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="abc"
+    jcr:description="Add a field to capture text strings."
+    jcr:primaryType="cq:Component"
+    jcr:title="Core Components IT - Address look up"
+    sling:resourceSuperType="core/fd/components/form/textinput/v1/textinput"
+    componentGroup="Core Components Examples - Adaptive Form"/>

it/apps/src/main/content/jcr_root/apps/forms-core-components-it/components/addresslookup/v1/addresslookup/_cq_template.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" xmlns:cq="http://www.day.com/jcr/cq/1.0"
+    jcr:primaryType="nt:unstructured"
+    jcr:title="Address lookup"
+    fieldType="text-input"/>

it/apps/src/main/content/jcr_root/apps/forms-core-components-it/components/addresslookup/v1/addresslookup/addresslookup.html

@@ -0,0 +1,73 @@
+<!--/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+  ~ Copyright 2021 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.
+  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/-->
+
+<sly data-sly-use.text="com.adobe.cq.forms.core.components.models.form.TextInput"
+     data-sly-use.renderer="${'textinput.js'}"
+     data-sly-use.clientlib="${'/libs/granite/sightly/templates/clientlib.html'}"
+     data-sly-use.label="${renderer.labelPath}"
+     data-sly-use.shortDescription="${renderer.shortDescriptionPath}"
+     data-sly-use.longDescription="${renderer.longDescriptionPath}"
+     data-sly-use.errorMessage="${renderer.errorMessagePath}"
+     data-sly-use.questionMark="${renderer.questionMarkPath}"></sly>
+<div data-sly-use.formstructparser="com.adobe.cq.forms.core.components.models.form.FormStructureParser"
+     class="cmp-adaptiveform-esriaddresslookup"
+     data-cmp-is="adaptiveFormEsriInput"
+     data-cmp-visible="${text.visible ? 'true' : 'false'}"
+     data-cmp-enabled="${text.enabled ? 'true' : 'false'}"
+     data-cmp-required="${text.required ? 'true': 'false'}"
+     data-cmp-readonly="${text.readOnly ? 'true' : 'false'}"
+     id="${text.id}"
+     data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}"
+     data-sly-test.widgetId="${'{0}-{1}' @ format=[text.id, 'widget']}">
+    <div class="cmp-adaptiveform-esriaddresslookup__label-container">
+      <div data-sly-call="${label.label @componentId=widgetId, labelValue=text.label.value, labelVisible=text.label.visible, labelRichText=text.label.richText, bemBlock='cmp-adaptiveform-esriaddresslookup'}" data-sly-unwrap></div>
+      <div data-sly-call="${questionMark.questionMark @componentId=text.id, longDescription=text.description, bemBlock='cmp-adaptiveform-esriaddresslookup'}" data-sly-unwrap></div>
+    </div>
+    <textarea data-sly-test.useTextarea="${text.multiLine}"
+              title="${text.tooltipVisible ? '' : text.tooltipText}"
+              id="${widgetId}"
+              class="cmp-adaptiveform-esriaddresslookup__widget"
+              name="${text.name}"
+              data-cmp-data-layer="${text.data.json}"
+              disabled="${!text.enabled}"
+              readonly="${text.readOnly}"
+              required="${text.required}"
+              placeholder="${text.placeHolder}"
+              autocomplete="${text.autoComplete}"
+              minlength="${text.minLength}"
+              aria-describedby="${text.id}__errormessage ${text.id}__longdescription ${text.id}__shortdescription"
+              maxlength="${text.maxLength}"></textarea>
+    <input data-sly-test="${!useTextarea}"
+           title="${text.tooltipVisible ? '' : text.tooltipText}"
+           class="cmp-adaptiveform-esriaddresslookup__widget"
+           id="${widgetId}"
+           type="text"
+           name="${text.name}"
+           data-cmp-data-layer="${text.data.json}"
+           value="${text.default}"
+           disabled="${!text.enabled}"
+           readonly="${text.readOnly}"
+           required="${text.required}"
+           placeholder="${text.placeHolder}"
+           autocomplete="${text.autoComplete}"
+           minlength="${text.minLength}"
+           maxlength="${text.maxLength}"
+           dir="auto"/>
+    <div data-sly-call="${shortDescription.shortDescription @componentId=text.id, shortDescriptionVisible=text.tooltipVisible, shortDescription=text.tooltip, bemBlock='cmp-adaptiveform-esriaddresslookup'}" data-sly-unwrap>
+    </div>
+    <div data-sly-call="${longDescription.longDescription @componentId=text.id, longDescription=text.description, bemBlock='cmp-adaptiveform-esriaddresslookup'}" data-sly-unwrap></div>
+    <div data-sly-call="${errorMessage.errorMessage @componentId=text.id, bemBlock='cmp-adaptiveform-esriaddresslookup'}" data-sly-unwrap></div>
+</div>

it/apps/src/main/content/jcr_root/apps/forms-core-components-it/components/addresslookup/v1/addresslookup/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/addresslookup/v1/addresslookup/clientlibs/site/.content.xml

@@ -0,0 +1,6 @@
+<?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.addresslookup.v1.runtime]"
+    dependencies="[core.forms.components.runtime.base, core.forms.components.container.v2.runtime, core.forms.components.textinput.v1.runtime]"/>

it/apps/src/main/content/jcr_root/apps/forms-core-components-it/components/addresslookup/v1/addresslookup/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
+addresslookupview.css

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

@@ -0,0 +1,43 @@
+/*******************************************************************************
+ * 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.
+ ******************************************************************************/
+
+.cmp-adaptiveform-textinput {
+
+}
+
+.cmp-adaptiveform-textinput__widget {
+
+}
+textarea.cmp-adaptiveform-textinput__widget{
+
+}
+
+.cmp-adaptiveform-textinput__label {
+
+}
+.cmp-adaptiveform-textinput__label-container{
+
+}
+
+.cmp-adaptiveform-textinput__longdescription {
+}
+
+.cmp-adaptiveform-textinput__shortdescription {
+}
+
+.cmp-adaptiveform-textinput__questionmark {
+
+}

it/apps/src/main/content/jcr_root/apps/forms-core-components-it/components/addresslookup/v1/addresslookup/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
+addresslookupview.js

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

@@ -0,0 +1,90 @@
+/*******************************************************************************
+ * 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 EsriInput extends FormView.FormFieldBase {
+
+        static NS = FormView.Constants.NS;
+        /**
+         * Each FormField has a data attribute class that is prefixed along with the global namespace to
+         * distinguish between them. If a component wants to put a data-attribute X, the attribute in HTML would be
+         * data-{NS}-{IS}-x=""
+         * @type {string}
+         */
+        static IS = "adaptiveFormEsriInput";
+        static bemBlock = 'cmp-adaptiveform-esriaddresslookup'
+        static selectors  = {
+            self: "[data-" + this.NS + '-is="' + this.IS + '"]',
+            widget: `.${EsriInput.bemBlock}__widget`,
+            label: `.${EsriInput.bemBlock}__label`,
+            description: `.${EsriInput.bemBlock}__longdescription`,
+            qm: `.${EsriInput.bemBlock}__questionmark`,
+            errorDiv: `.${EsriInput.bemBlock}__errormessage`,
+            tooltipDiv: `.${EsriInput.bemBlock}__shortdescription`
+        };
+
+        constructor(params) {
+            super(params);
+        }
+
+        getWidget() {
+            return this.element.querySelector(EsriInput.selectors.widget);
+        }
+
+        getDescription() {
+            return this.element.querySelector(EsriInput.selectors.description);
+        }
+
+        getLabel() {
+            return this.element.querySelector(EsriInput.selectors.label);
+        }
+
+        getErrorDiv() {
+            return this.element.querySelector(EsriInput.selectors.errorDiv);
+        }
+
+        getTooltipDiv() {
+            return this.element.querySelector(EsriInput.selectors.tooltipDiv);
+        }
+
+        getQuestionMarkDiv() {
+            return this.element.querySelector(EsriInput.selectors.qm);
+        }
+
+        setModel(model) {
+            super.setModel(model);
+            if (this.widget.value !== '') {
+                this._model.value = this.widget.value;
+            }
+            this.widget.addEventListener('blur', (e) => {
+                this._model.value = e.target.value;
+            this.setWidgetValueToDisplayValue();
+            this.setInactive();
+        });
+            this.widget.addEventListener('focus', (e) => {
+                this.setActive();
+            this.setWidgetValueToModelValue();
+        });
+        }
+    }
+
+
+    FormView.Utils.setupField(({element, formContainer}) => {
+        return new EsriInput({element, formContainer})
+    }, EsriInput.selectors.self);
+
+})();