From ad77317b8c201440d349e46e0facc52f50fbefb4 Mon Sep 17 00:00:00 2001 From: Shivangi Mittal Date: Sun, 3 Mar 2024 17:15:42 +0530 Subject: [PATCH 1/4] Added telephone drop down core component --- .../models/v1/form/TelephoneDropdownImpl.java | 51 ++++++ .../models/form/TelephoneDropdown.java | 36 ++++ .../form/telephonedropdown/.content.xml | 8 + .../form/telephonedropdown/_cq_template.xml | 7 + .../form/telephonedropdown/.content.xml | 3 + .../form/telephonedropdown/v1/.content.xml | 5 + .../v1/telephonedropdown/.content.xml | 8 + .../telephonedropdown/_cq_dialog/.content.xml | 172 ++++++++++++++++++ .../v1/telephonedropdown/_cq_template.xml | 6 + .../telephonedropdown/clientlibs/.content.xml | 3 + .../clientlibs/editor/.content.xml | 5 + .../clientlibs/editor/js.txt | 18 ++ .../clientlibs/editor/js/editDialog.js | 34 ++++ .../clientlibs/site/.content.xml | 5 + .../telephonedropdown/clientlibs/site/css.txt | 18 ++ .../site/css/telephonedropdownview.css | 49 +++++ .../telephonedropdown/clientlibs/site/js.txt | 18 ++ .../site/js/telephonedropdownview.js | 95 ++++++++++ .../v1/telephonedropdown/telephoneDropdown.js | 33 ++++ .../telephonedropdown/telephonedropdown.html | 81 +++++++++ 20 files changed, 655 insertions(+) create mode 100644 bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/internal/models/v1/form/TelephoneDropdownImpl.java create mode 100644 bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/models/form/TelephoneDropdown.java create mode 100644 examples/ui.apps/src/main/content/jcr_root/apps/forms-components-examples/components/form/telephonedropdown/.content.xml create mode 100644 examples/ui.apps/src/main/content/jcr_root/apps/forms-components-examples/components/form/telephonedropdown/_cq_template.xml create mode 100644 ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/.content.xml create mode 100644 ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/.content.xml create mode 100644 ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/.content.xml create mode 100644 ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/_cq_dialog/.content.xml create mode 100644 ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/_cq_template.xml create mode 100644 ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/.content.xml create mode 100644 ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/editor/.content.xml create mode 100644 ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/editor/js.txt create mode 100644 ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/editor/js/editDialog.js create mode 100644 ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/site/.content.xml create mode 100644 ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/site/css.txt create mode 100644 ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/site/css/telephonedropdownview.css create mode 100644 ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/site/js.txt create mode 100644 ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/site/js/telephonedropdownview.js create mode 100644 ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/telephoneDropdown.js create mode 100644 ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/telephonedropdown.html diff --git a/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/internal/models/v1/form/TelephoneDropdownImpl.java b/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/internal/models/v1/form/TelephoneDropdownImpl.java new file mode 100644 index 0000000000..4ac3e0b3d8 --- /dev/null +++ b/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/internal/models/v1/form/TelephoneDropdownImpl.java @@ -0,0 +1,51 @@ +/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + ~ 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. + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ + +package com.adobe.cq.forms.core.components.internal.models.v1.form; + +import java.util.Arrays; + +import org.apache.sling.api.SlingHttpServletRequest; +import org.apache.sling.api.resource.Resource; +import org.apache.sling.models.annotations.Default; +import org.apache.sling.models.annotations.Exporter; +import org.apache.sling.models.annotations.Model; +import org.apache.sling.models.annotations.injectorspecific.InjectionStrategy; +import org.apache.sling.models.annotations.injectorspecific.ValueMapValue; + +import com.adobe.cq.export.json.ComponentExporter; +import com.adobe.cq.export.json.ExporterConstants; +import com.adobe.cq.forms.core.components.models.form.TelephoneDropdown; + +@Model( + adaptables = { SlingHttpServletRequest.class, Resource.class }, + adapters = { TelephoneDropdown.class, ComponentExporter.class }, + resourceType = "core/fd/components/form/telephonedropdown/v1/telephonedropdown") +@Exporter( + name = ExporterConstants.SLING_MODEL_EXPORTER_NAME, + extensions = ExporterConstants.SLING_MODEL_EXTENSION) +public class TelephoneDropdownImpl extends TextInputImpl implements TelephoneDropdown { + + @ValueMapValue(injectionStrategy = InjectionStrategy.REQUIRED, name = "allowedCountryCodes") + @Default(values = { "+0 CountryName" }) + private String[] allowedCountryCodes; + + @Override + public String[] getAllowedCountryCodes() { + return Arrays.copyOf(allowedCountryCodes, allowedCountryCodes.length); + } + +} diff --git a/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/models/form/TelephoneDropdown.java b/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/models/form/TelephoneDropdown.java new file mode 100644 index 0000000000..b4c92f4e85 --- /dev/null +++ b/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/models/form/TelephoneDropdown.java @@ -0,0 +1,36 @@ +/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + ~ 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. + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ + +package com.adobe.cq.forms.core.components.models.form; + +import org.osgi.annotation.versioning.ConsumerType; + +/** + * Defines the form TelephoneDropdown field Sling Model used for the telephone input component with dropdown. + * + * @since com.adobe.cq.forms.core.components.models.form 0.0.1 + */ +@ConsumerType +public interface TelephoneDropdown extends TextInput { + + /** + * Returns the default country code for the telephone field. + * + * @return the default country code + * @since com.adobe.cq.forms.core.components.models.form 0.0.1 + */ + String[] getAllowedCountryCodes(); +} diff --git a/examples/ui.apps/src/main/content/jcr_root/apps/forms-components-examples/components/form/telephonedropdown/.content.xml b/examples/ui.apps/src/main/content/jcr_root/apps/forms-components-examples/components/form/telephonedropdown/.content.xml new file mode 100644 index 0000000000..37fc7c1870 --- /dev/null +++ b/examples/ui.apps/src/main/content/jcr_root/apps/forms-components-examples/components/form/telephonedropdown/.content.xml @@ -0,0 +1,8 @@ + + + diff --git a/examples/ui.apps/src/main/content/jcr_root/apps/forms-components-examples/components/form/telephonedropdown/_cq_template.xml b/examples/ui.apps/src/main/content/jcr_root/apps/forms-components-examples/components/form/telephonedropdown/_cq_template.xml new file mode 100644 index 0000000000..89865d192f --- /dev/null +++ b/examples/ui.apps/src/main/content/jcr_root/apps/forms-components-examples/components/form/telephonedropdown/_cq_template.xml @@ -0,0 +1,7 @@ + + \ No newline at end of file diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/.content.xml b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/.content.xml new file mode 100644 index 0000000000..564d04a5c1 --- /dev/null +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/.content.xml @@ -0,0 +1,3 @@ + + diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/.content.xml b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/.content.xml new file mode 100644 index 0000000000..1fd4c47586 --- /dev/null +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/.content.xml @@ -0,0 +1,5 @@ + + + + diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/.content.xml b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/.content.xml new file mode 100644 index 0000000000..3f6bd0bc6d --- /dev/null +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/.content.xml @@ -0,0 +1,8 @@ + + diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/_cq_dialog/.content.xml b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/_cq_dialog/.content.xml new file mode 100644 index 0000000000..cb80cb3e2e --- /dev/null +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/_cq_dialog/.content.xml @@ -0,0 +1,172 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/_cq_template.xml b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/_cq_template.xml new file mode 100644 index 0000000000..49bd664b36 --- /dev/null +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/_cq_template.xml @@ -0,0 +1,6 @@ + + \ No newline at end of file diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/.content.xml b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/.content.xml new file mode 100644 index 0000000000..564d04a5c1 --- /dev/null +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/.content.xml @@ -0,0 +1,3 @@ + + diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/editor/.content.xml b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/editor/.content.xml new file mode 100644 index 0000000000..9a5c10bd2d --- /dev/null +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/editor/.content.xml @@ -0,0 +1,5 @@ + + diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/editor/js.txt b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/editor/js.txt new file mode 100644 index 0000000000..dd642eaed7 --- /dev/null +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/editor/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 +editDialog.js \ No newline at end of file diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/editor/js/editDialog.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/editor/js/editDialog.js new file mode 100644 index 0000000000..15e643735c --- /dev/null +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/editor/js/editDialog.js @@ -0,0 +1,34 @@ +/******************************************************************************* + * Copyright 2023 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"; + + var EDIT_DIALOG = ".cmp-adaptiveform-telephonedropdown__editdialog", + TELEPHONEDROPDOWN_VALIDATIONPATTERN = EDIT_DIALOG + " .cmp-adaptiveform-telephonedropdown__validationpattern", + TELEPHONEDROPDOWN_VALIDATIONFORMAT = EDIT_DIALOG + " .cmp-adaptiveform-telephonedropdown__validationformat", + Utils = window.CQ.FormsCoreComponents.Utils.v1; + + function handleValidationPatternDropDown(dialog) { + Utils.handlePatternDropDown(dialog,TELEPHONEDROPDOWN_VALIDATIONPATTERN,TELEPHONEDROPDOWN_VALIDATIONFORMAT); + } + + function handleValidationFormat(dialog){ + Utils.handlePatternFormat(dialog,TELEPHONEDROPDOWN_VALIDATIONPATTERN,TELEPHONEDROPDOWN_VALIDATIONFORMAT); + } + + + Utils.initializeEditDialog(EDIT_DIALOG)(handleValidationPatternDropDown,handleValidationFormat); +})(jQuery); diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/site/.content.xml b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/site/.content.xml new file mode 100644 index 0000000000..1b7f1f943d --- /dev/null +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/site/.content.xml @@ -0,0 +1,5 @@ + + diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/site/css.txt b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/site/css.txt new file mode 100644 index 0000000000..1c21867636 --- /dev/null +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/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 +telephonedropdownview.css diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/site/css/telephonedropdownview.css b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/site/css/telephonedropdownview.css new file mode 100644 index 0000000000..462483a707 --- /dev/null +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/site/css/telephonedropdownview.css @@ -0,0 +1,49 @@ +.cmp-adaptiveform-telephonedropdown { + /* Styles for the main container of the telephone dropdown component */ +} + +.cmp-adaptiveform-telephonedropdown__widget-container { + /* Styles for the container that holds the telephone input and country code dropdown */ + display: flex; + align-items: center; +} + +.cmp-adaptiveform-telephonedropdown__countrycode { + /* Styles for the country code dropdown */ + margin-right: 10px; /* Add space between the dropdown and the telephone input */ +} + +.cmp-adaptiveform-telephonedropdown__widget { + /* Styles for the telephone input field */ + flex-grow: 1; /* Allow the input field to take up the remaining space */ +} + +.cmp-adaptiveform-telephonedropdown__label { + /* Styles for the label of the telephone dropdown component */ +} + +.cmp-adaptiveform-telephonedropdown__label-container { + /* Styles for the container of the label and question mark icon */ + display: flex; + align-items: center; + /*margin-bottom: 5px; !* Add space below the label container *!*/ +} + +.cmp-adaptiveform-telephonedropdown__longdescription { + /* Styles for the long description of the telephone dropdown component */ +} + +.cmp-adaptiveform-telephonedropdown__shortdescription { + /* Styles for the short description (tooltip) of the telephone dropdown component */ +} + +.cmp-adaptiveform-telephonedropdown__questionmark { + /* Styles for the question mark icon */ + margin-left: 5px; /* Add space to the left of the question mark icon */ +} + +.cmp-adaptiveform-telephonedropdown__errormessage { + /* Styles for the error message */ + color: #d32f2f; /* Example error color */ + margin-top: 5px; /* Add space above the error message */ +} \ No newline at end of file diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/site/js.txt b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/site/js.txt new file mode 100644 index 0000000000..6fd3222673 --- /dev/null +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/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 +telephonedropdownview.js diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/site/js/telephonedropdownview.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/site/js/telephonedropdownview.js new file mode 100644 index 0000000000..ec62255857 --- /dev/null +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/site/js/telephonedropdownview.js @@ -0,0 +1,95 @@ +/******************************************************************************* + * 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 TelephoneDropdown 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 = "adaptiveFormTelephoneDropdown"; + static bemBlock = 'cmp-adaptiveform-telephonedropdown' + static selectors = { + self: "[data-" + this.NS + '-is="' + this.IS + '"]', + widget: `.${TelephoneDropdown.bemBlock}__widget`, + label: `.${TelephoneDropdown.bemBlock}__label`, + description: `.${TelephoneDropdown.bemBlock}__longdescription`, + qm: `.${TelephoneDropdown.bemBlock}__questionmark`, + errorDiv: `.${TelephoneDropdown.bemBlock}__errormessage`, + tooltipDiv: `.${TelephoneDropdown.bemBlock}__shortdescription`, + countryCode: `.${TelephoneDropdown.bemBlock}__countrycode` + }; + + constructor(params) { + super(params); + } + + getWidget() { + return this.element.querySelector(TelephoneDropdown.selectors.widget); + } + + getDescription() { + return this.element.querySelector(TelephoneDropdown.selectors.description); + } + + getLabel() { + return this.element.querySelector(TelephoneDropdown.selectors.label); + } + + getErrorDiv() { + return this.element.querySelector(TelephoneDropdown.selectors.errorDiv); + } + + getTooltipDiv() { + return this.element.querySelector(TelephoneDropdown.selectors.tooltipDiv); + } + + getQuestionMarkDiv() { + return this.element.querySelector(TelephoneDropdown.selectors.qm); + } + + getCountryCodeSelect() { + return this.element.querySelector(TelephoneDropdown.selectors.countryCode); + } + + 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.setInactive(); + }); + this.widget.addEventListener('focus', (e) => { + this.setActive(); + }); + this.getCountryCodeSelect().addEventListener('change', (e) => { + this._model.defaultCountryCode = e.target.value; + }); + } + } + + FormView.Utils.setupField(({element, formContainer}) => { + return new TelephoneDropdown({element, formContainer}) + }, TelephoneDropdown.selectors.self); + +})(); \ No newline at end of file diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/telephoneDropdown.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/telephoneDropdown.js new file mode 100644 index 0000000000..43127821a5 --- /dev/null +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/telephoneDropdown.js @@ -0,0 +1,33 @@ +/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + ~ 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. + ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ + +use(function() { + + var clientlibsArr = [ 'core.forms.components.base.v1.editor' ]; + var labelPath = 'core/fd/components/af-commons/v1/fieldTemplates/label.html'; + var shortDescriptionPath = "core/fd/components/af-commons/v1/fieldTemplates/shortDescription.html"; + var longDescriptionPath = "core/fd/components/af-commons/v1/fieldTemplates/longDescription.html"; + var questionMarkPath = "core/fd/components/af-commons/v1/fieldTemplates/questionMark.html" + var errorMessagePath = "core/fd/components/af-commons/v1/fieldTemplates/errorMessage.html"; + return { + labelPath : labelPath, + shortDescriptionPath : shortDescriptionPath, + longDescriptionPath : longDescriptionPath, + questionMarkPath : questionMarkPath, + errorMessagePath : errorMessagePath, + clientlibs : clientlibsArr + } +}); \ No newline at end of file diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/telephonedropdown.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/telephonedropdown.html new file mode 100644 index 0000000000..be6f40475b --- /dev/null +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/telephonedropdown.html @@ -0,0 +1,81 @@ + + + + + +
+
+
+
+
+
+ + +
+
+
+
+
+
\ No newline at end of file From 87194cd3e45e4591137ab4ddc88adf99ffbaf426 Mon Sep 17 00:00:00 2001 From: Shivangi Mittal Date: Sun, 10 Mar 2024 00:51:01 +0530 Subject: [PATCH 2/4] Updated telephoen dropdown component --- .../models/v1/form/TelephoneDropdownImpl.java | 40 ++++- .../models/form/TelephoneDropdown.java | 7 +- .../library/.content.xml | 22 +++ .../library/adaptive-form/.content.xml | 1 + .../telephonedropdown/.content.xml | 141 ++++++++++++++++++ .../telephonedropdown.svg/.content.xml | 20 +++ .../renditions/cq5dam.thumbnail.140.100.png | Bin 0 -> 768 bytes .../.content.xml | 7 + .../renditions/cq5dam.thumbnail.319.319.png | Bin 0 -> 1315 bytes .../.content.xml | 7 + .../renditions/cq5dam.thumbnail.48.48.png | Bin 0 -> 367 bytes .../.content.xml | 7 + .../renditions/cq5dam.web.1280.1280.jpeg | Bin 0 -> 2585 bytes .../.content.xml | 7 + .../_jcr_content/renditions/original | 25 ++++ .../renditions/original.dir/.content.xml | 8 + .../v1/telephonedropdown/.content.xml | 2 +- .../telephonedropdown/_cq_dialog/.content.xml | 88 +++++++++-- .../clientlibs/editor/js/editDialog.js | 105 ++++++++++++- .../site/js/telephonedropdownview.js | 24 ++- .../telephonedropdown/telephonedropdown.html | 9 +- .../libs/commons/formsConstants.js | 1 + .../telephonedropdown.authoring.spec.js | 112 ++++++++++++++ .../telephonedropdown.runtime.spec.js | 0 .../telephoneinput.authoring.spec.js | 2 +- 25 files changed, 619 insertions(+), 16 deletions(-) create mode 100644 examples/ui.content/src/main/content/jcr_root/content/core-components-examples/library/adaptive-form/telephonedropdown/.content.xml create mode 100644 examples/ui.content/src/main/content/jcr_root/content/dam/core-components-examples/library/forms-components/telephonedropdown.svg/.content.xml create mode 100644 examples/ui.content/src/main/content/jcr_root/content/dam/core-components-examples/library/forms-components/telephonedropdown.svg/_jcr_content/renditions/cq5dam.thumbnail.140.100.png create mode 100644 examples/ui.content/src/main/content/jcr_root/content/dam/core-components-examples/library/forms-components/telephonedropdown.svg/_jcr_content/renditions/cq5dam.thumbnail.140.100.png.dir/.content.xml create mode 100644 examples/ui.content/src/main/content/jcr_root/content/dam/core-components-examples/library/forms-components/telephonedropdown.svg/_jcr_content/renditions/cq5dam.thumbnail.319.319.png create mode 100644 examples/ui.content/src/main/content/jcr_root/content/dam/core-components-examples/library/forms-components/telephonedropdown.svg/_jcr_content/renditions/cq5dam.thumbnail.319.319.png.dir/.content.xml create mode 100644 examples/ui.content/src/main/content/jcr_root/content/dam/core-components-examples/library/forms-components/telephonedropdown.svg/_jcr_content/renditions/cq5dam.thumbnail.48.48.png create mode 100644 examples/ui.content/src/main/content/jcr_root/content/dam/core-components-examples/library/forms-components/telephonedropdown.svg/_jcr_content/renditions/cq5dam.thumbnail.48.48.png.dir/.content.xml create mode 100644 examples/ui.content/src/main/content/jcr_root/content/dam/core-components-examples/library/forms-components/telephonedropdown.svg/_jcr_content/renditions/cq5dam.web.1280.1280.jpeg create mode 100644 examples/ui.content/src/main/content/jcr_root/content/dam/core-components-examples/library/forms-components/telephonedropdown.svg/_jcr_content/renditions/cq5dam.web.1280.1280.jpeg.dir/.content.xml create mode 100644 examples/ui.content/src/main/content/jcr_root/content/dam/core-components-examples/library/forms-components/telephonedropdown.svg/_jcr_content/renditions/original create mode 100644 examples/ui.content/src/main/content/jcr_root/content/dam/core-components-examples/library/forms-components/telephonedropdown.svg/_jcr_content/renditions/original.dir/.content.xml create mode 100644 ui.tests/test-module/specs/telephonedropdown/telephonedropdown.authoring.spec.js create mode 100644 ui.tests/test-module/specs/telephonedropdown/telephonedropdown.runtime.spec.js diff --git a/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/internal/models/v1/form/TelephoneDropdownImpl.java b/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/internal/models/v1/form/TelephoneDropdownImpl.java index 4ac3e0b3d8..87621b87c8 100644 --- a/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/internal/models/v1/form/TelephoneDropdownImpl.java +++ b/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/internal/models/v1/form/TelephoneDropdownImpl.java @@ -18,6 +18,8 @@ import java.util.Arrays; +import javax.annotation.Nullable; + import org.apache.sling.api.SlingHttpServletRequest; import org.apache.sling.api.resource.Resource; import org.apache.sling.models.annotations.Default; @@ -37,15 +39,51 @@ @Exporter( name = ExporterConstants.SLING_MODEL_EXPORTER_NAME, extensions = ExporterConstants.SLING_MODEL_EXTENSION) -public class TelephoneDropdownImpl extends TextInputImpl implements TelephoneDropdown { +public class TelephoneDropdownImpl extends DropDownImpl implements TelephoneDropdown { @ValueMapValue(injectionStrategy = InjectionStrategy.REQUIRED, name = "allowedCountryCodes") @Default(values = { "+0 CountryName" }) private String[] allowedCountryCodes; + @ValueMapValue(injectionStrategy = InjectionStrategy.OPTIONAL, name = "pattern") + @Nullable + protected String pattern; + @ValueMapValue(injectionStrategy = InjectionStrategy.OPTIONAL) + @Default(booleanValues = false) + private boolean enforceEnum; + + @ValueMapValue(injectionStrategy = InjectionStrategy.OPTIONAL, name = "multiSelect") + @Default(booleanValues = false) + protected boolean multiSelect; + + @Override + public Integer getMinItems() { + return minItems; + } + + @Override + public boolean isEnforceEnum() { + return enforceEnum; + } + + @Override + public Integer getMaxItems() { + return maxItems; + } + + @Override + public Boolean isMultiSelect() { + return multiSelect; + } + @Override public String[] getAllowedCountryCodes() { return Arrays.copyOf(allowedCountryCodes, allowedCountryCodes.length); } + @Nullable + public String getPattern() { + return pattern; + } + } diff --git a/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/models/form/TelephoneDropdown.java b/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/models/form/TelephoneDropdown.java index b4c92f4e85..976f6159dc 100644 --- a/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/models/form/TelephoneDropdown.java +++ b/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/models/form/TelephoneDropdown.java @@ -18,13 +18,15 @@ import org.osgi.annotation.versioning.ConsumerType; +import com.fasterxml.jackson.annotation.JsonIgnore; + /** * Defines the form TelephoneDropdown field Sling Model used for the telephone input component with dropdown. * * @since com.adobe.cq.forms.core.components.models.form 0.0.1 */ @ConsumerType -public interface TelephoneDropdown extends TextInput { +public interface TelephoneDropdown extends Field, OptionsConstraint, ContainerConstraint { /** * Returns the default country code for the telephone field. @@ -33,4 +35,7 @@ public interface TelephoneDropdown extends TextInput { * @since com.adobe.cq.forms.core.components.models.form 0.0.1 */ String[] getAllowedCountryCodes(); + + @JsonIgnore + Boolean isMultiSelect(); } diff --git a/examples/ui.content/src/main/content/jcr_root/content/core-components-examples/library/.content.xml b/examples/ui.content/src/main/content/jcr_root/content/core-components-examples/library/.content.xml index 128a7a978f..83a19c7195 100644 --- a/examples/ui.content/src/main/content/jcr_root/content/core-components-examples/library/.content.xml +++ b/examples/ui.content/src/main/content/jcr_root/content/core-components-examples/library/.content.xml @@ -514,6 +514,28 @@ width="12"/> + + + + + + + + diff --git a/examples/ui.content/src/main/content/jcr_root/content/core-components-examples/library/adaptive-form/telephonedropdown/.content.xml b/examples/ui.content/src/main/content/jcr_root/content/core-components-examples/library/adaptive-form/telephonedropdown/.content.xml new file mode 100644 index 0000000000..5b6f871799 --- /dev/null +++ b/examples/ui.content/src/main/content/jcr_root/content/core-components-examples/library/adaptive-form/telephonedropdown/.content.xml @@ -0,0 +1,141 @@ +<?xml version="1.0" encoding="UTF-8"?> +<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:fd="http://www.adobe.com/aemfd/fd/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="cq:Page"> + <jcr:content + cq:lastModified="{Date}2020-07-15T13:25:39.732+02:00" + cq:lastModifiedBy="admin" + cq:tags="[]" + cq:template="/conf/core-components-examples/settings/wcm/templates/content-page" + jcr:description="Radio Button" + jcr:primaryType="cq:PageContent" + jcr:title="Telephone Input" + sling:resourceType="forms-components-examples/components/page"> + <root + jcr:primaryType="nt:unstructured" + sling:resourceType="wcm/foundation/components/responsivegrid"> + <responsivegrid + jcr:primaryType="nt:unstructured" + sling:resourceType="wcm/foundation/components/responsivegrid"> + <text_1740702241 + cq:styleIds="[1644862132301]" + jcr:created="{Date}2019-02-15T19:05:53.032+01:00" + jcr:createdBy="admin" + jcr:lastModified="{Date}2019-02-15T19:09:39.787+01:00" + jcr:lastModifiedBy="admin" + jcr:primaryType="nt:unstructured" + sling:resourceType="core/wcm/components/text/v2/text" + text="<h1>Telephone Input<sub>v1</sub></h1>" + textIsRich="true"/> + <text + cq:styleIds="[1544762734201]" + jcr:created="{Date}2018-12-06T19:11:23.947+01:00" + jcr:createdBy="admin" + jcr:lastModified="{Date}2020-07-15T13:25:39.729+02:00" + jcr:lastModifiedBy="admin" + jcr:primaryType="nt:unstructured" + sling:resourceType="core/wcm/components/text/v2/text" + text="<p>The Adaptive Form telephone input Core Component allows users to input a telephone number. It can be customized with additional attributes such as "pattern" and "placeholder" to specify the format and description of the telephone number.</p><p>The telephone input field is commonly used in contact forms, registration forms, and other forms where a telephone number is required as a means of contact. The telephone input field can also be used to ensure that the user inputs a valid telephone number, as the browser can enforce certain constraints, such as the length and format of the telephone number, based on the "pattern" attribute.</p>" + textIsRich="true"/> + <teaser + cq:styleIds="[1550165685463]" + jcr:created="{Date}2019-02-14T16:41:54.952+01:00" + jcr:createdBy="admin" + jcr:description="<p>GitHub</p> " + jcr:lastModified="{Date}2019-02-14T16:49:57.290+01:00" + jcr:lastModifiedBy="admin" + jcr:primaryType="nt:unstructured" + jcr:title="Technical Documentation" + sling:resourceType="core-components-examples/components/teaser" + actionsEnabled="false" + descriptionFromPage="false" + fileReference="/content/dam/core-components-examples/library/github-logo.svg" + linkURL="https://github.com/adobe/aem-core-forms-components/tree/master/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown" + textIsRich="true" + titleFromPage="false"/> + <title_865328580 + cq:styleIds="[1544759664489]" + jcr:created="{Date}2018-12-06T19:22:23.729+01:00" + jcr:createdBy="admin" + jcr:lastModified="{Date}2018-12-06T19:23:25.116+01:00" + jcr:lastModifiedBy="admin" + jcr:primaryType="nt:unstructured" + jcr:title="Examples" + sling:resourceType="core/wcm/components/title/v2/title" + type="h2"/> + <title_290384408 + cq:styleIds="[1544759676459]" + jcr:created="{Date}2018-12-06T19:22:48.620+01:00" + jcr:createdBy="admin" + jcr:lastModified="{Date}2019-05-22T11:01:40.926+03:00" + jcr:lastModifiedBy="admin" + jcr:primaryType="nt:unstructured" + jcr:title="Standard" + sling:resourceType="core/wcm/components/title/v2/title" + type="h3"/> + <text_1337506761 + jcr:created="{Date}2018-12-06T19:23:41.968+01:00" + jcr:createdBy="admin" + jcr:lastModified="{Date}2019-05-22T11:26:32.604+03:00" + jcr:lastModifiedBy="admin" + jcr:primaryType="nt:unstructured" + sling:resourceType="core/wcm/components/text/v2/text" + text="<p>Simple Telephone Input component.</p>" + textIsRich="true"/> + <demo + jcr:created="{Date}2018-12-07T12:55:03.496+01:00" + jcr:createdBy="admin" + jcr:lastModified="{Date}2018-12-07T12:55:03.496+01:00" + jcr:lastModifiedBy="admin" + jcr:primaryType="nt:unstructured" + sling:resourceType="forms-components-examples/components/demo"> + <component + jcr:primaryType="nt:unstructured" + sling:resourceType="forms-components-examples/components/demo/component"> + <guideContainer + fd:version="2.1" + fieldType="form" + jcr:primaryType="nt:unstructured" + sling:resourceType="forms-components-examples/components/form/container"> + <container + jcr:primaryType="nt:unstructured" + sling:resourceType="forms-components-examples/components/demo/component"> + <telephonedropdown_demo + jcr:title="Telephone Input" + fieldType="text-input" + name="telephonedropdown" + jcr:created="{Date}2019-03-06T14:11:01.819+01:00" + jcr:createdBy="admin" + jcr:lastModified="{Date}2019-05-21T18:59:35.605+03:00" + jcr:lastModifiedBy="admin" + jcr:primaryType="nt:unstructured" + description="<p>This is a long description.</p>" + tooltip="<p>This is a short description.</p>" + tooltipVisible="true" + sling:resourceType="forms-components-examples/components/form/telephonedropdown"/> + </container> + </guideContainer> + </component> + <info + jcr:primaryType="nt:unstructured" + sling:resourceType="core-components-examples/components/tabs"> + <properties + cq:panelTitle="Properties" + jcr:primaryType="nt:unstructured" + sling:resourceType="core-components-examples/components/demo/properties" + reference="../../component"/> + <markup + cq:panelTitle="Markup" + jcr:primaryType="nt:unstructured" + sling:resourceType="core-components-examples/components/demo/markup" + reference="../../component"/> + <json + cq:panelTitle="JSON" + jcr:primaryType="nt:unstructured" + sling:resourceType="core-components-examples/components/demo/json" + reference="../../component"/> + </info> + </demo> + </responsivegrid> + </root> + </jcr:content> +</jcr:root> diff --git a/examples/ui.content/src/main/content/jcr_root/content/dam/core-components-examples/library/forms-components/telephonedropdown.svg/.content.xml b/examples/ui.content/src/main/content/jcr_root/content/dam/core-components-examples/library/forms-components/telephonedropdown.svg/.content.xml new file mode 100644 index 0000000000..01238f7c58 --- /dev/null +++ b/examples/ui.content/src/main/content/jcr_root/content/dam/core-components-examples/library/forms-components/telephonedropdown.svg/.content.xml @@ -0,0 +1,20 @@ +<?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:mix="http://www.jcp.org/jcr/mix/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:dc="http://purl.org/dc/elements/1.1/" + jcr:mixinTypes="[mix:referenceable]" + jcr:primaryType="dam:Asset" + jcr:uuid="f87b4e36-8d0a-42dd-827b-5bda0647f319"> + <jcr:content + dam:assetState="processed" + jcr:lastModified="{Date}2023-01-16T20:17:41.519+05:30" + jcr:lastModifiedBy="admin" + jcr:primaryType="dam:AssetContent"> + <metadata + dam:extracted="{Date}2023-01-16T20:17:41.268+05:30" + dam:sha1="743d94c96f7f5979aeb631ced5e11e09dee09e5e" + dam:size="{Long}2461" + dc:format="image/svg+xml" + jcr:mixinTypes="[cq:Taggable]" + jcr:primaryType="nt:unstructured"/> + <related jcr:primaryType="nt:unstructured"/> + </jcr:content> +</jcr:root> diff --git a/examples/ui.content/src/main/content/jcr_root/content/dam/core-components-examples/library/forms-components/telephonedropdown.svg/_jcr_content/renditions/cq5dam.thumbnail.140.100.png b/examples/ui.content/src/main/content/jcr_root/content/dam/core-components-examples/library/forms-components/telephonedropdown.svg/_jcr_content/renditions/cq5dam.thumbnail.140.100.png new file mode 100644 index 0000000000000000000000000000000000000000..0cf457e9da713dc1efff6c7b7efda8dada05e47f GIT binary patch literal 768 zcmeAS@N?(olHy`uVBq!ia0vp^DIm<j1|$m}O$}jSU^?#U;uum9_x7e^#^nH+;~!Ua ztmv?~a_!dimoh#q{=pxfcz#$R?s}xTsUnQuYTGj2rmm`6M<%lix;jpboE@W9HR&$P z$3@L6A2<}|Ua~3=a{se`U7q2Ct=^a3v&;E@`lRruUPb?<F%Qr}Y~WT(O-)Vd(jduo z7U#l$t}QK@z5d{ab)H-Nav$${r?_*1!!7nqVcB~nyiA-=3xJ}^jdQMuEAGFU5&wT? z!cwg&_Ql69uZq!2pVheI-O7yk+kf;Y?0Nb=Y?}RQu6_AY`;u=Q{8Ugcb<|8i*6rRZ z|MKX2FZcZ2>)lkjROh{CMGQz{r!t$*>VHXv`!DJ*{Bvgh?5JHQ*YPGvcid4_S83Q@ zWu1OLC*<famwTV`^!vP)-(Z`h9rF8$-b}-ugqbbH{)Z|h<R*u0<aJ?RxaQZ4El$_I zm3b=kzL_dNTkQ8`&0~!cZCa+^JOuV{zj--wrvE!Hi>C$quh~Z26|$X{vXSqIh0vM_ z0`t5j`a@UFnq2v0>mH{5Jo!0iU*v6m5r18H@0N>O_6Qxfo*<_AL;a`4o+;ax?+UqC zul0NXGx_v?&#!GiB|S4g?pq(r>P5+u)dU;A#I9a9d6B>8NA0Tp&ll~Fi`*JLJG$KK z+`mn3ziLB2_5ZatsuU9JF#BKl!gkW3>q}y<De8QQy!yB(M=$+)nVyXFjCWIazgV1U zUiD>P-IbF+tgCKs*|Yf4y_w<C(*Neki+6G^@qEU)Ily|sf47MYuYw*JYJOq<%eJiT z)$ha0S8-pRGw1m$ai+cbVz$xG7HzJoem!CPd7U5Mjm?|3J~S+xu*ShD<l$|;oy_OF zCCs0G+-iPnen=;;%32PUv`0c7#f_&5?|SZ>@O|zbnd38a*fve!4yoGtY3AdekcdOM odJkVk>AV!u!<L2^7#2MK!^km_SCZ@7fdY^UPgg&ebxsLQ0IYaqdjJ3c literal 0 HcmV?d00001 diff --git a/examples/ui.content/src/main/content/jcr_root/content/dam/core-components-examples/library/forms-components/telephonedropdown.svg/_jcr_content/renditions/cq5dam.thumbnail.140.100.png.dir/.content.xml b/examples/ui.content/src/main/content/jcr_root/content/dam/core-components-examples/library/forms-components/telephonedropdown.svg/_jcr_content/renditions/cq5dam.thumbnail.140.100.png.dir/.content.xml new file mode 100644 index 0000000000..636a3c9d86 --- /dev/null +++ b/examples/ui.content/src/main/content/jcr_root/content/dam/core-components-examples/library/forms-components/telephonedropdown.svg/_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="workflow-process-service" + jcr:primaryType="oak:Resource"/> +</jcr:root> diff --git a/examples/ui.content/src/main/content/jcr_root/content/dam/core-components-examples/library/forms-components/telephonedropdown.svg/_jcr_content/renditions/cq5dam.thumbnail.319.319.png b/examples/ui.content/src/main/content/jcr_root/content/dam/core-components-examples/library/forms-components/telephonedropdown.svg/_jcr_content/renditions/cq5dam.thumbnail.319.319.png new file mode 100644 index 0000000000000000000000000000000000000000..8a9202d1d1ad808b99c3e0ac59b327ad0f96ba8c GIT binary patch literal 1315 zcmb7E`!^E`9Cspj6kC?-Voh@5_VDOZY96~5M>96>g=XnKl$kMByEHqVx30^&T#0Nf zq+~+P<C<1RU1BV?W-Ellnx@PcVY|BjLEm$}pU*kp&*yVKzkRO;qy0^ct&H{b^h}Va zd_%YR;g<y%ZlTwZ;SYLx1`4FFPdGJJ`4)L6CIa%!<hSM_y+#T18OUfZ`uI7Y5T7*L z?7jQMM!j*<1IAMbVhOK$3V}Pm*K|i;9zvA8++7-sJ9q`x(QJApJN*1am*!$}W7}e7 zSq7d&!uxyl&a6*jic`^MPMR`7e-PO<-gK+`D@SJy27^%u4y5YFX$vQMcuv@wH_kEv zN#O%)o7t}~yB%q9Or&B>lKN;64TYiuRxU0s9(`4a)sK$DV>P<RM%J(h>0}+d39BE0 zLa|v53%V@uF*2&<$vy0S7G8NjS{1D6NcZUCiqJ`oD<b-ox8wG76qh~;IaN(y4%NSw z^;;}QN|h0<2Mu|!BCYL621sy*P)AtWOSf<;@s!vYQ*>tXC^wcQO)7M$$5(ML3pVnY zL0AAq2bM?mKE5tE^YEjUVn(T=$${H&Ey-&$<+jZpR-7~xEs^|lyEgVtd*6|GIExjk zoRgc$|L|kp-I4B^yh7wUH?%*nP>p$%kG_Y-{4X|uUVy|w>^5gAd7ekc9vGBaDb?4> zHk&@x@uKs;*vvdo>$?(_wPCrPVqwxDlX?a~eYhuZ<1BO>6ECfJU)I7A2iQ0<>iApt zS;{e%+vaT--r~JNVk|_~vplzSjUToLqXWsk08eO+hQ}LA@kQ<aunTr?w1-~8m(l4d z6wj?LO|>Y%slt>5SQJLVeuGuj!7t_3z>U<gZWZruc2iPUGI`z9D9vi~?lpTniXXBE zf9yr2C;ZROTB-2e{*jCnp+xM8pt?Wfrgbyln9Eea$jmC%-JAU}U37zSrghnYwLs`R z?!nq$b|dQ`M#9XK4dTNR98`wrAPwX|W&G%lef@OHT|Je<3U;PR=}MEsz1+|Lg5;YZ zeajrnp3Tu)!l&C?h;gZk9u*dKa>BQ}{E<6&)_jao!}-vfObflkfMksW?U;CUWBcf^ zs#zOMNb<h)k6mViBoMlT80Obp;9{Y9yZ@!_Cs*J=obAZ^g%Af1?)ZSW@MPBkgALX# zQi{WgPSF7LDnTKNBvaNhL!gSpbbA|=GiN1L4p3)x)MNy5N_pXfPv3p6Sha6~H8zL? zNv6}fo!p<&5>>nex?AhMyYAAl&A#H>*Z8Lw3jBixl%sGHLfxg0!%IMLmNy`-`!Wfz zl<z5#O^4nR1>ENp6$HdBh^74nue6Abi};Uz#Z7OywArpPq*7Fcxp9G1KRm0XTRiLE zCC@QVbMs1V8=X^hV}J$j`SXgQ#t1?X&YVHb)tiXTJz?-^SrSRBWG%c&e<Um-c|P}g zm#0E%SLwZThou4~wqULhRiUEgm;b2quVL0kk{mF3XF1N>+G3PP2feuFVc7hX;c$T^ zoXnU|TNC5m|CVLI!Ox|Ik>vPJn#4%WHe*oLMHs%BV%>9ao-mX+_NZr&Z8x%Wch;}f z05^TVYRm5h-<@|LKt5QtmK=pK7e2josYJgv8veZ|e>Qh6WTPv4wSD`vw)ouS!HIgo hQrYgWd>~tP{V6=ses*VUlcWEaFwzh0+k`lq{U04NZWI6j literal 0 HcmV?d00001 diff --git a/examples/ui.content/src/main/content/jcr_root/content/dam/core-components-examples/library/forms-components/telephonedropdown.svg/_jcr_content/renditions/cq5dam.thumbnail.319.319.png.dir/.content.xml b/examples/ui.content/src/main/content/jcr_root/content/dam/core-components-examples/library/forms-components/telephonedropdown.svg/_jcr_content/renditions/cq5dam.thumbnail.319.319.png.dir/.content.xml new file mode 100644 index 0000000000..636a3c9d86 --- /dev/null +++ b/examples/ui.content/src/main/content/jcr_root/content/dam/core-components-examples/library/forms-components/telephonedropdown.svg/_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="workflow-process-service" + jcr:primaryType="oak:Resource"/> +</jcr:root> diff --git a/examples/ui.content/src/main/content/jcr_root/content/dam/core-components-examples/library/forms-components/telephonedropdown.svg/_jcr_content/renditions/cq5dam.thumbnail.48.48.png b/examples/ui.content/src/main/content/jcr_root/content/dam/core-components-examples/library/forms-components/telephonedropdown.svg/_jcr_content/renditions/cq5dam.thumbnail.48.48.png new file mode 100644 index 0000000000000000000000000000000000000000..8f77ce48cfb0a54b9a64c5dd1ea26b373035165a GIT binary patch literal 367 zcmV-#0g(QQP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm0003tNkl<ZcwX(* zze>a~90%}-%OQ>mqD|U59Ejk2;2StNdAPZVv!h_!7*L!<Hw6_RqRl;l58>z{BE_V> zLGABQ(1389sfY0WK%jyA`F%-983O<S00000@GsBvUZM4q9t_G!G}@bLaO)abv%s0w zx?dE<%*N?McjdS|pzptG!@Zjt+`2~g5nyvMF<fNTO_Z3P$X<8cac!Z!y#!cNCg8F< zrx0QK61(Ht;w=Du3u&(dX?7P>6;VG@b?4jQ7I+On*NA8Kic5Rh1lem&<W{6+-<{)= z*8oIhW|beA3ogy}yeemTYVPPHmX#H8QiURY+hYBCT4Z+p>pJ7|9^eyQrKb4%;Lxs7 zpTb1yu@j$EA!GGaS3S?UbH?E-!0;KJMEmtK`tN^a000000000#dk44&-r~U#+A#nC N002ovPDHLkV1n3(rDFg9 literal 0 HcmV?d00001 diff --git a/examples/ui.content/src/main/content/jcr_root/content/dam/core-components-examples/library/forms-components/telephonedropdown.svg/_jcr_content/renditions/cq5dam.thumbnail.48.48.png.dir/.content.xml b/examples/ui.content/src/main/content/jcr_root/content/dam/core-components-examples/library/forms-components/telephonedropdown.svg/_jcr_content/renditions/cq5dam.thumbnail.48.48.png.dir/.content.xml new file mode 100644 index 0000000000..636a3c9d86 --- /dev/null +++ b/examples/ui.content/src/main/content/jcr_root/content/dam/core-components-examples/library/forms-components/telephonedropdown.svg/_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="workflow-process-service" + jcr:primaryType="oak:Resource"/> +</jcr:root> diff --git a/examples/ui.content/src/main/content/jcr_root/content/dam/core-components-examples/library/forms-components/telephonedropdown.svg/_jcr_content/renditions/cq5dam.web.1280.1280.jpeg b/examples/ui.content/src/main/content/jcr_root/content/dam/core-components-examples/library/forms-components/telephonedropdown.svg/_jcr_content/renditions/cq5dam.web.1280.1280.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..42d4b3c91d0897dda1031c32c7036dbb0a36fe22 GIT binary patch literal 2585 zcmd^<dsGv57RP_dBqR`CAqgM{WJRJ;5XwVb)DQ_JN~mJUw!m7UQUSpQ${SKJ6>51@ zKtx0Vd5Pcy$)bP?sFYU#IR$}$p}M@4fRFGFlw@{jyWNBTth;~gIeYfb?>lqu%$<Ag zXMT4s{0trjnrxO63!u;dppXN=KLG~-q0ws#F$}V>cq|r!!K&bJN_bTjRaJrtfuN?Y zrKzS)R3{KLwKa((GKE4>)zHz^ChKaEDde>zC<u86gH^_2mC0%ZHS)i0a04LXK^3Ti zP(}bvL_tIp+zbqnI<cr<4E$y&G*Y7y4zH|2Kmw{Y0U8BCXbiMgH4+_%JO>yeR%?@m zy%LFY3}+NVwmh9tgx}1p{DI>7RBCMH9U8B!qOGI5L65p+D{b3$>zy{c{%E_~;bTYE z{sT^I?w>yW%+1~7&tD$*@%2059}pHE5g8R7!%O(~%y)@N$tmYEFJxWJzH~XK_-e_u z(z5F}Zr-_DRb6xM{)5`arskGbVOx7gPj8>7f8d#TaAb6BeB$M+Ny*gA?A-jq;*xB6 zWsM63pkJ|&^RHm<aS;(NGzJ4<aBEyBbQB_ph{0~MP|~vJ;Esimj4V&%$;^zR${&<B zTe(Up-l0!bw2iGts55J5zmR<xSp0uP_B+@=xdwqMghDnCA_4}GbBj}G;D29pjI*I# zVKF1AR5PD@)qQ52Vao^OS>v4L;JtA)sFx-%oY86ItIAv)>qHBDO;2}8f70=sn4|kR zFo>OX8b-Anqdqrp3LAcxG}t6D2^lrOaibkyT&WP~F_&tDC6y7+Ke9>}=IKXr8@)|j zvv^+xS-e<O)GkhixsX^_4)o-mzfj{fFyB>rUGNbM&JeD_pxf;*3?5~|Ao;3-Y?ciJ z`=btu6&J;p`#)y(PX6n#Z|HU@a~iV4wO(>;gvQSjhAf9M!j$mmDSeE0B`_F00sWWL zNW1i-4eazho&^kgmhlF>PPz*(je$Vl*SIC#*8>l_QI6!pzsu8a=1T=j0PzQAkZ&;} z_(WhOtAxR3x6_ZOWiXihs#}Ti#@Po3<SpstUBQblte69)3kJ;2iiv!&`_)_KA#(|7 zdHVgkQW95pxD0AE@r<f#E|*1n<6|9yc?r9Ar&Q{?=T_M^1jPt@H;&zs*yJo`#gq;; z+_P~Du_iUj4Rkdd6iSb{qF4rhn9gNMTdT`q(7303GPF_}eD<x5Tzl&ILS=1G0+bdl zJY@0sjU_KbuwT42;2d{ix}>MhS+FCAx9f@7@q%r$;yfx_P!%A}OqF{tK6V~Dm?g?x zO0S>^l(Ri$Eo0)qDtvg-UdZ$h?fg;e@cQ^KaBVv-EIf~~ZRZTpd4dGKRs@6Md|P(1 zx#sB+SzXil{py8_B|9HB-rr(-E-m*P;~TAXoc&0D$JEnn+v{ht&2F=ts&en}{C$76 z5s7+g=>hI55dqs{@3@Jpj}N+?JQ|c8;pgZ3n&(5&>mq&9ovhhWXvNYE0`tbFlyb~> z3~r#3TD{NyHA>y4V)yu>kT+}E#h%PbarB8$EwRivXWwRY@mymHtq}d2G^}LHFfghp zfPvQ&7!=ZZJ~0Ktu4PI%3|16ga@2G$O_SqDR;3lEfHj$PDopupqT%2b1!F~jrzERW zHq;=E?imz$zC2=b%gxe0M2G6s8a>t>Wq<|YqTEqKb^lYQJ*B-na|v<m#$$>19-Q4> z;Lyd~Lu`BVxz6e~IaiTLcTg<z6}J1=d7o}zYq@@Z_v4Q3POWUorLo1Y`&KRW%+aw9 z{j1x)5F3gI@U>^^*}SBSOqICMgHa4MyA2WsVV+bbdF0d5{MPSbpV^`5@7vQojDucf zp8jcWYd-RiGH&v_UtQ-9nZrOxd(SuN7F_nOw3c7-ctM|cstfGwslWYF+~N!+7TNJa z?j8wv{g4#tWt?`^MHW`<pKmAH>x0p%sJn55db_#Qm&S=4Q_h2Cw@$nb%Pd_bN=q|` zQ^Oh~`!h>Z%MVgp`g|vzWXC<&l-$-T687ee_Xn@TT@UYG9z+e~$nyoSR~a&mL#+aW z{X6VH*<A3_!rLgt#_sY}^CJHhyZlsx)Nhpo(R;KvQT82n8kd?d>zfp0#SIuZ<QE}R z?lBDXkwLWnMumsdkB3~N{xX@uVOxB5V1C7<lQH5lRWNTmWw?a2!A!?{?)h|=;t$AM zsPSQ8xYbw~WVpG&Krn$!iH#2}>pKkN-_bkOZbqjqajTP?zx&(1ectpZ`lpUg_nuhS Nfd6R3|A#9q{yW~UbesSH literal 0 HcmV?d00001 diff --git a/examples/ui.content/src/main/content/jcr_root/content/dam/core-components-examples/library/forms-components/telephonedropdown.svg/_jcr_content/renditions/cq5dam.web.1280.1280.jpeg.dir/.content.xml b/examples/ui.content/src/main/content/jcr_root/content/dam/core-components-examples/library/forms-components/telephonedropdown.svg/_jcr_content/renditions/cq5dam.web.1280.1280.jpeg.dir/.content.xml new file mode 100644 index 0000000000..636a3c9d86 --- /dev/null +++ b/examples/ui.content/src/main/content/jcr_root/content/dam/core-components-examples/library/forms-components/telephonedropdown.svg/_jcr_content/renditions/cq5dam.web.1280.1280.jpeg.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="workflow-process-service" + jcr:primaryType="oak:Resource"/> +</jcr:root> diff --git a/examples/ui.content/src/main/content/jcr_root/content/dam/core-components-examples/library/forms-components/telephonedropdown.svg/_jcr_content/renditions/original b/examples/ui.content/src/main/content/jcr_root/content/dam/core-components-examples/library/forms-components/telephonedropdown.svg/_jcr_content/renditions/original new file mode 100644 index 0000000000..ff2813705f --- /dev/null +++ b/examples/ui.content/src/main/content/jcr_root/content/dam/core-components-examples/library/forms-components/telephonedropdown.svg/_jcr_content/renditions/original @@ -0,0 +1,25 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg id="live_path" data-name="live path" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180"> + <defs> + <style> + .cls-1 { + fill: #b3b4b4; + } + + .cls-2 { + fill: #1d7dee; + } + </style> + </defs> + <g id="list_lg" data-name="list lg"> + <path class="cls-1" d="m148.62,107.84H31.38c-1.83,0-3.33-1.49-3.33-3.33v-29.02c0-1.83,1.49-3.33,3.33-3.33h117.24c1.83,0,3.33,1.49,3.33,3.33v29.02c0,1.83-1.49,3.33-3.33,3.33ZM31.38,75.2c-.16,0-.29.13-.29.29v29.02c0,.16.13.29.29.29h117.24c.16,0,.29-.13.29-.29v-29.02c0-.16-.13-.29-.29-.29H31.38Z"/> + </g> + <g> + <path class="cls-2" d="m59.63,93.43l-3.08-3.08c-.83-.83-2.18-.83-3.01,0l-.76.76s0,0,0,0l-1.52,1.52c-.92-.36-2.87-1.28-4.32-2.73s-2.36-3.39-2.72-4.32l1.52-1.52s0,0,0,0l.76-.76c.83-.83.83-2.18,0-3.01l-3.08-3.08c-.8-.81-2.21-.8-3.01,0l-.76.76s0,0,0,0l-1.87,1.87c-.82.82-1.16,1.99-.89,3.12.73,3.16,2.34,7.65,5.85,11.16s8.01,5.12,11.16,5.85c.25.06.51.09.76.09.88,0,1.72-.34,2.36-.98l1.87-1.87.76-.76c.83-.83.83-2.18,0-3.01Zm-4.04,4.23c-.33.33-.8.46-1.26.36-2.38-.55-6.86-1.97-10.2-5.31-3.34-3.34-4.76-7.83-5.31-10.2-.1-.46.03-.93.36-1.26l1.87-1.87s0,0,0,0l.76-.76s.14-.04.18,0l3.08,3.08c.05.05.05.13,0,.18l-.76.76s0,0,0,0l-1.96,1.96c-1.03,1.04,1.98,5.52,3.17,6.7,1.02,1.02,4.46,3.38,6.07,3.38.27,0,.49-.07.64-.21l1.96-1.96s0,0,0,0l.76-.76c.05-.05.14-.05.19,0l3.08,3.08c.05.05.05.13,0,.19l-.76.76-1.87,1.87Z"/> + <g> + <path class="cls-2" d="m67.47,98.57c-.09,0-.19,0-.29-.03-.09-.01-.19-.04-.28-.08s-.18-.08-.26-.14c-.08-.05-.16-.12-.23-.18-.07-.07-.13-.15-.18-.23-.06-.08-.1-.17-.14-.26s-.07-.19-.09-.28c-.02-.1-.02-.2-.02-.3,0-.39.15-.78.43-1.06.07-.07.15-.13.23-.18.08-.06.17-.1.26-.14s.19-.07.28-.09c.2-.04.4-.04.59,0,.09.02.19.05.28.09s.18.08.26.14c.08.05.16.11.23.18.28.28.44.67.44,1.06,0,.1-.01.2-.03.3-.02.09-.05.19-.09.28s-.08.18-.14.26c-.05.08-.11.16-.18.23-.07.06-.15.13-.23.18-.08.06-.17.1-.26.14s-.19.07-.28.08c-.1.02-.2.03-.3.03Z"/> + <path class="cls-2" d="m72.14,97.07c0-.83.67-1.5,1.5-1.5h0c.83,0,1.5.67,1.5,1.5h0c0,.83-.67,1.5-1.5,1.5h0c-.83,0-1.5-.67-1.5-1.5Z"/> + <path class="cls-2" d="m79.8,98.57c-.1,0-.2,0-.29-.02-.1-.02-.19-.05-.28-.09-.09-.04-.18-.08-.26-.14-.08-.05-.16-.12-.23-.18-.28-.29-.44-.67-.44-1.07s.16-.78.44-1.06c.07-.07.15-.13.23-.18.08-.06.17-.1.26-.14.09-.04.18-.07.28-.09.48-.1,1,.07,1.35.41.28.28.44.67.44,1.06s-.16.79-.44,1.07c-.28.27-.66.43-1.06.43Z"/> + </g> + </g> +</svg> \ No newline at end of file diff --git a/examples/ui.content/src/main/content/jcr_root/content/dam/core-components-examples/library/forms-components/telephonedropdown.svg/_jcr_content/renditions/original.dir/.content.xml b/examples/ui.content/src/main/content/jcr_root/content/dam/core-components-examples/library/forms-components/telephonedropdown.svg/_jcr_content/renditions/original.dir/.content.xml new file mode 100644 index 0000000000..996e51d415 --- /dev/null +++ b/examples/ui.content/src/main/content/jcr_root/content/dam/core-components-examples/library/forms-components/telephonedropdown.svg/_jcr_content/renditions/original.dir/.content.xml @@ -0,0 +1,8 @@ +<?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:mimeType="image/svg+xml" + jcr:primaryType="oak:Resource"/> +</jcr:root> diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/.content.xml b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/.content.xml index 3f6bd0bc6d..73e5148ee2 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/.content.xml +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/.content.xml @@ -4,5 +4,5 @@ jcr:description="Add a field to capture telephone numbers." jcr:primaryType="cq:Component" jcr:title="Adaptive Form DropDown Telephone Input" - sling:resourceSuperType="core/fd/components/form/textinput/v1/textinput" + sling:resourceSuperType="core/fd/components/form/telephoneinput/v1/telephoneinput" componentGroup=".core-adaptiveform"/> diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/_cq_dialog/.content.xml b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/_cq_dialog/.content.xml index cb80cb3e2e..cd013c2800 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/_cq_dialog/.content.xml +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/_cq_dialog/.content.xml @@ -95,20 +95,89 @@ </autocomplete-tel> </items> </column> +<!-- <column--> +<!-- jcr:primaryType="nt:unstructured"--> +<!-- sling:resourceType="granite/ui/components/coral/foundation/container">--> +<!-- <items jcr:primaryType="nt:unstructured">--> +<!-- <countryCodes--> +<!-- jcr:primaryType="nt:unstructured"--> +<!-- sling:resourceType="granite/ui/components/coral/foundation/form/multifield"--> +<!-- fieldLabel="Allowed Country Codes"--> +<!-- name="./allowedCountryCodes">--> +<!-- <field--> +<!-- jcr:primaryType="nt:unstructured"--> +<!-- sling:resourceType="granite/ui/components/coral/foundation/form/textfield"--> +<!-- name="./allowedCountryCodes"/>--> +<!-- </countryCodes>--> +<!-- </items>--> +<!-- </column>--> <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container"> <items jcr:primaryType="nt:unstructured"> - <countryCodes + <saveValueType + granite:class="cmp-adaptiveform-telephonedropdown__savevaluetype" jcr:primaryType="nt:unstructured" - sling:resourceType="granite/ui/components/coral/foundation/form/multifield" - fieldLabel="Allowed Country Codes" - name="./allowedCountryCodes"> - <field - jcr:primaryType="nt:unstructured" - sling:resourceType="granite/ui/components/coral/foundation/form/textfield" - name="./allowedCountryCodes"/> - </countryCodes> + sling:orderBefore="placeholder" + sling:resourceType="granite/ui/components/coral/foundation/form/select" + fieldLabel="Save value as" + typeHint="String" + name="./typeIndex"> + <items jcr:primaryType="nt:unstructured"> + <String jcr:primaryType="nt:unstructured" + text="String" + value="0"/> + <Number jcr:primaryType="nt:unstructured" + text="Number" + value="1"/> + <Boolean jcr:primaryType="nt:unstructured" + text="Boolean" + value="2"/> + </items> + </saveValueType> + <type jcr:primaryType="nt:unstructured" + sling:resourceType="granite/ui/components/coral/foundation/form/hidden" + name="./type"/> + <enums jcr:primaryType="nt:unstructured" + sling:resourceType="granite/ui/components/coral/foundation/include" + path="core/fd/components/form/base/v1/base/cq:dialog/content/items/tabs/items/basic/items/columns/items/column/items/enums" + sling:orderBefore="placeholder" + sling:hideResource="{Boolean}false"/> +<!-- <multiSelect--> +<!-- granite:class="cmp-adaptiveform-telephonedropdown__allowmultiselect"--> +<!-- jcr:primaryType="nt:unstructured"--> +<!-- sling:orderBefore="saveValueType"--> +<!-- sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"--> +<!-- name="./multiSelect"--> +<!-- text="Allow multiple selection"--> +<!-- value="true"/>--> +<!-- <multiSelect-typehint--> +<!-- jcr:primaryType="nt:unstructured"--> +<!-- sling:resourceType="granite/ui/components/coral/foundation/form/hidden"--> +<!-- name="./multiSelect@TypeHint"--> +<!-- value="Boolean"/>--> +<!-- <defaultValueSS--> +<!-- wrapperClass="cmp-adaptiveform-telephonedropdown__defaultvalue"--> +<!-- jcr:primaryType="nt:unstructured"--> +<!-- sling:orderBefore="placeholder"--> +<!-- sling:resourceType="granite/ui/components/coral/foundation/form/textfield"--> +<!-- fieldDescription="Specified default option is preselected on form load."--> +<!-- fieldLabel="Default option"--> +<!-- name="./default"/>--> +<!-- <defaultValueMS--> +<!-- wrapperClass="cmp-adaptiveform-telephonedropdown__defaultvaluemultiselect"--> +<!-- jcr:primaryType="nt:unstructured"--> +<!-- sling:orderBefore="placeholder"--> +<!-- sling:resourceType="granite/ui/components/coral/foundation/form/multifield"--> +<!-- typeHint="String[]"--> +<!-- fieldDescription="Specified default options are preselected on form load."--> +<!-- fieldLabel="Default options">--> +<!-- <field--> +<!-- jcr:primaryType="nt:unstructured"--> +<!-- sling:resourceType="granite/ui/components/coral/foundation/form/textfield"--> +<!-- name="./default"--> +<!-- required="{Boolean}false"/>--> +<!-- </defaultValueMS>--> </items> </column> </items> @@ -138,6 +207,7 @@ jcr:primaryType="nt:unstructured" granite:class="cmp-adaptiveform-telephonedropdown__validationpattern" sling:resourceType="granite/ui/components/coral/foundation/form/select" + fieldLabel="Type" name="./validationPatternType"> <datasource jcr:primaryType="nt:unstructured" diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/editor/js/editDialog.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/editor/js/editDialog.js index 15e643735c..3977025869 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/editor/js/editDialog.js +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/editor/js/editDialog.js @@ -19,6 +19,15 @@ var EDIT_DIALOG = ".cmp-adaptiveform-telephonedropdown__editdialog", TELEPHONEDROPDOWN_VALIDATIONPATTERN = EDIT_DIALOG + " .cmp-adaptiveform-telephonedropdown__validationpattern", TELEPHONEDROPDOWN_VALIDATIONFORMAT = EDIT_DIALOG + " .cmp-adaptiveform-telephonedropdown__validationformat", + + DROPDOWN_ALLOWMULTISELECT = EDIT_DIALOG + " .cmp-adaptiveform-telephonedropdown__allowmultiselect", + DROPDOWN_DEFAULTVALUE = EDIT_DIALOG + " .cmp-adaptiveform-telephonedropdown__defaultvalue", + DROPDOWN_DEFAULTVALUEMULTISELCET = EDIT_DIALOG + " .cmp-adaptiveform-telephonedropdown__defaultvaluemultiselect", + DROPDOWN_SAVEVALUE = EDIT_DIALOG + " .cmp-adaptiveform-telephonedropdown__savevaluetype", + DROPDOWN_ENUM = EDIT_DIALOG + " .cmp-adaptiveform-base__enum", + TYPE = EDIT_DIALOG + " input[name='./type']", + DEFAULTINPUT = DROPDOWN_DEFAULTVALUE + " input", + DEFAULTMUTIINPUT = DROPDOWN_DEFAULTVALUEMULTISELCET + " input[type='text']", Utils = window.CQ.FormsCoreComponents.Utils.v1; function handleValidationPatternDropDown(dialog) { @@ -30,5 +39,99 @@ } - Utils.initializeEditDialog(EDIT_DIALOG)(handleValidationPatternDropDown,handleValidationFormat); + // function handleSaveValueDropDown(dialog) { + // var multiSelect = dialog.find(DROPDOWN_ALLOWMULTISELECT)[0], + // saveValueDropdown = dialog.find(DROPDOWN_SAVEVALUE), + // type = dialog.find(TYPE), + // saveTypes = ['string', 'number', 'boolean']; + // + // var updateSaveValueType = function() { + // var index = parseInt(saveValueDropdown.val()); + // if(multiSelect.checked) { + // type.val(saveTypes[index] + '[]'); + // } else { + // type.val(saveTypes[index]); + // } + // } + // // triggered when dialog is launched + // updateSaveValueType(); + // saveValueDropdown.on("change", function() { + // updateSaveValueType(); + // }); + // multiSelect.on("change", function() { + // updateSaveValueType(); + // }); + // } + + /** + * Handles the default value field in the dialog appropriately when multi-select is toggled. + * @param {HTMLElement} dialog The dialog on which the operation is to be performed. + */ + // function handleDefaultValue(dialog) { + // var multiSelect = dialog.find(DROPDOWN_ALLOWMULTISELECT)[0], + // defaultValue = dialog.find(DROPDOWN_DEFAULTVALUE), + // defaultValueMS = dialog.find(DROPDOWN_DEFAULTVALUEMULTISELCET), + // defaultInput = dialog.find(DEFAULTINPUT), + // defaultMultiInput = dialog.find(DEFAULTMUTIINPUT); + // + // var isMultiSelect = function () { + // return multiSelect.checked; + // } + // + // var isNotMultiSelect = function () { + // return !isMultiSelect(); + // } + // + // var changeNameForMultiSelect = function (newName) { + // [...defaultMultiInput].forEach((input) => { + // input.name = newName; + // }) + // } + // + // var hideAndShowElements = function () { + // Utils.checkAndDisplay(defaultValueMS)(isMultiSelect); + // Utils.checkAndDisplay(defaultValue)(isNotMultiSelect); + // + // // making sure that ./default of the rendered component is only persisted in jcr + // if(isMultiSelect()) { + // defaultInput.attr("name","./default@Delete"); + // changeNameForMultiSelect("./default"); + // } else { + // defaultInput.attr("name","./default"); + // changeNameForMultiSelect("./default@Delete"); + // } + // } + // hideAndShowElements(); + // multiSelect.on("change", function() { + // hideAndShowElements(); + // }); + // } + + var registerDialogValidator = Utils.registerDialogDataTypeValidators( + DROPDOWN_DEFAULTVALUE + " input", + DROPDOWN_ENUM, + function (dialog) { + var selectedValue = ''; + var dropdownSaveValue = dialog.find(DROPDOWN_SAVEVALUE); + if (dropdownSaveValue && dropdownSaveValue.length > 0) { + selectedValue = dropdownSaveValue[0].selectedItem ? dropdownSaveValue[0].selectedItem.value : ''; + } + var dataType = ''; + switch (selectedValue) { + case '0': + dataType = 'string'; + break; + case '1': + dataType = 'number'; + break; + case '2': + dataType = 'boolean'; + break; + } + return dataType; + } + ); + + + Utils.initializeEditDialog(EDIT_DIALOG)(handleValidationPatternDropDown, handleValidationFormat, registerDialogValidator); })(jQuery); diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/site/js/telephonedropdownview.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/site/js/telephonedropdownview.js index ec62255857..6c25f0b767 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/site/js/telephonedropdownview.js +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/site/js/telephonedropdownview.js @@ -70,6 +70,10 @@ return this.element.querySelector(TelephoneDropdown.selectors.countryCode); } + getPhoneNumber() { + return this.element.querySelector(TelephoneDropdown.selectors.widget) + } + setModel(model) { super.setModel(model); if (this.widget.value !== '') { @@ -82,9 +86,27 @@ this.widget.addEventListener('focus', (e) => { this.setActive(); }); + + this.getPhoneNumber().addEventListener('change', (e) => { + let countryCode = this.getCountryCodeSelect().value; + this._model.value = countryCode + e.target.value; + }); + this.getCountryCodeSelect().addEventListener('change', (e) => { - this._model.defaultCountryCode = e.target.value; + let phoneNumber = this.getPhoneNumber().value; + this._model.value = e.target.value + phoneNumber; }); + + // this.getPhoneNumber().addEventListener('change', (e) => { + // let countryCode = this.getCountryCodeSelect().value; + // this._model.value = countryCode + e.target.value; + // }); + // + // this.getCountryCodeSelect().addEventListener('change', (e) => { + // local = e.target.value; + // // let phoneNumber = this.getPhoneNumber().value; + // // this._model.value = e.target.value + phoneNumber; + // }); } } diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/telephonedropdown.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/telephonedropdown.html index be6f40475b..446585d7f8 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/telephonedropdown.html +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/telephonedropdown.html @@ -55,7 +55,14 @@ </div> <div class="cmp-adaptiveform-telephonedropdown__widget-container"> <select class="cmp-adaptiveform-telephonedropdown__countrycode" id="${widgetId}-countrycode"> - <option data-sly-repeat.countryCode="${telephoneDropdown.allowedCountryCodes}" value="${countryCode}">${countryCode}</option> + <option data-sly-test="${isPlaceHolderSet}" value="" disabled selected>${telephoneDropdown.placeHolder}</option> + <div data-sly-list.enumName="${telephoneDropdown.enumNames}" data-sly-unwrap> + <div data-sly-test="${enumName != null && telephoneDropdown.enums[enumNameList.index] != null}" data-sly-unwrap> + <option value="${telephoneDropdown.enums[enumNameList.index].toString}" + class="cmp-adaptiveform-telephonedropdown__option" + data-sly-attribute.selected="${telephoneDropdown.enums[enumNameList.index] in telephoneDropdown.default ? 'selected' : ''}">${enumName}</option> + </div> + </div> </select> <input title="${telText.tooltipVisible ? '' : telText.tooltipText}" class="cmp-adaptiveform-telephonedropdown__widget" diff --git a/ui.tests/test-module/libs/commons/formsConstants.js b/ui.tests/test-module/libs/commons/formsConstants.js index b12316f0ef..7a4583b912 100644 --- a/ui.tests/test-module/libs/commons/formsConstants.js +++ b/ui.tests/test-module/libs/commons/formsConstants.js @@ -25,6 +25,7 @@ var formsConstants = { "fpdnscomponent" : "/apps/forms-components-examples/components/draftsandsubmissions", "formtextinput": "/apps/forms-components-examples/components/form/textinput", "formtelephoneinput": "/apps/forms-components-examples/components/form/telephoneinput", + "formtelephonedropdown": "/apps/forms-components-examples/components/form/telephonedropdown", "formemailinput": "/apps/forms-components-examples/components/form/emailinput", "formnumberinput": "/apps/forms-components-examples/components/form/numberinput", "panelcontainer": "/apps/forms-components-examples/components/form/panelcontainer", diff --git a/ui.tests/test-module/specs/telephonedropdown/telephonedropdown.authoring.spec.js b/ui.tests/test-module/specs/telephonedropdown/telephonedropdown.authoring.spec.js new file mode 100644 index 0000000000..7cc5fb4a0b --- /dev/null +++ b/ui.tests/test-module/specs/telephonedropdown/telephonedropdown.authoring.spec.js @@ -0,0 +1,112 @@ +/* + * Copyright 2024 Adobe Systems Incorporated + * + * 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. + */ + +const sitesSelectors = require('../../libs/commons/sitesSelectors'), + afConstants = require('../../libs/commons/formsConstants'); + +describe('Page - Authoring', function () { + const dropTelephoneDropdownInContainer = function () { + const dataPath = "/content/forms/af/core-components-it/blank/jcr:content/guideContainer/*", + responsiveGridDropZoneSelector = sitesSelectors.overlays.overlay.component + "[data-path='" + dataPath + "']"; + cy.selectLayer("Edit"); + cy.insertComponent(responsiveGridDropZoneSelector, "Adaptive Form Telephone Drop-down List", afConstants.components.forms.resourceType.formtelephonedropdown); + cy.get('body').click(0, 0); + } + const dropTelephoneDropdownInSites = function () { + const dataPath = "/content/core-components-examples/library/adaptive-form/telephonedropdown/jcr:content/root/responsivegrid/demo/component/guideContainer/*", + responsiveGridDropZoneSelector = sitesSelectors.overlays.overlay.component + "[data-path='" + dataPath + "']"; + cy.selectLayer("Edit"); + cy.insertComponent(responsiveGridDropZoneSelector, "Adaptive Form Telephone Input", afConstants.components.forms.resourceType.formtelephoneinput); + cy.get('body').click(0, 0); + } + + const testTelephoneInputBehaviour = function(telephoneInputEditPathSelector, telephoneInputDrop, isSites) { + const bemEditDialog = '.cmp-adaptiveform-telephonedropdown__editdialog' + if (isSites) { + dropTelephoneDropdownInSites(); + } else { + dropTelephoneDropdownInContainer(); + } + cy.openEditableToolbar(sitesSelectors.overlays.overlay.component + telephoneInputEditPathSelector); + cy.invokeEditableAction("[data-action='CONFIGURE']"); // this line is causing frame busting which is causing cypress to fail + cy.get("[name='./autocomplete']") + .should("exist"); + cy.get(bemEditDialog).contains('Validation').click({force:true}); + cy.get('.cq-dialog-cancel').click(); + cy.deleteComponentByPath(telephoneInputDrop); + } + + context('Open Forms Editor', function() { + const pagePath = "/content/forms/af/core-components-it/blank", + telephoneInputEditPath = pagePath + afConstants.FORM_EDITOR_FORM_CONTAINER_SUFFIX + "/telephonedropdown", + telephoneInputEditPathSelector = "[data-path='" + telephoneInputEditPath + "']", + telephoneInputDrop = pagePath + afConstants.FORM_EDITOR_FORM_CONTAINER_SUFFIX + "/" + afConstants.components.forms.resourceType.formtelephonedropdown.split("/").pop(); + beforeEach(function () { + // this is done since cypress session results in 403 sometimes + cy.openAuthoring(pagePath); + }); + + it('insert TelephoneDropdown in form container', function () { + dropTelephoneDropdownInContainer(); + cy.deleteComponentByPath(telephoneInputDrop); + }); + + it ('open edit dialog of TelephoneDropdown', { retries: 3 }, function(){ + cy.cleanTest(telephoneInputDrop).then(function() { + testTelephoneInputBehaviour(telephoneInputEditPathSelector, telephoneInputDrop); + }); + }) + + it.only ('change validation pattern type of TelephoneDropdown', function () { + const bemEditDialog = '.cmp-adaptiveform-telephonedropdown__editdialog'; + dropTelephoneDropdownInContainer(); + cy.openEditableToolbar(sitesSelectors.overlays.overlay.component + telephoneInputEditPathSelector); + cy.invokeEditableAction("[data-action='CONFIGURE']"); + cy.get(bemEditDialog).contains('Validation').click({force: true}).then(() => { + cy.get('.cmp-adaptiveform-telephonedropdown__validationformat').should('have.value', ''); + // cy.get('.cmp-adaptiveform-telephonedropdown__validationformat').type('^[+]1[0-9]{0,10}$'); + // cy.get('.cmp-adaptiveform-telephonedropdown__validationpattern select').type('^[+]1[0-9]{0,10}$'); + // cy.get('.cmp-adaptiveform-telephonedropdown__validationformat').should('have.value', '^[+]1[0-9]{0,10}$'); + cy.get('.cq-dialog-cancel').click(); + cy.deleteComponentByPath(telephoneInputDrop); + }); + }); + + context('Open Sites Editor', function () { + const pagePath = "/content/core-components-examples/library/adaptive-form/telephonedropdwon", + telephoneInputEditPath = pagePath + afConstants.RESPONSIVE_GRID_DEMO_SUFFIX + "/guideContainer/telephonedropdown", + telephoneInputEditPathSelector = "[data-path='" + telephoneInputEditPath + "']", + telephoneInputDrop = pagePath + afConstants.RESPONSIVE_GRID_DEMO_SUFFIX + '/guideContainer/' + afConstants.components.forms.resourceType.formtelephonedropdown.split("/").pop(); + + beforeEach(function () { + // this is done since cypress session results in 403 sometimes + cy.openAuthoring(pagePath); + }); + + it('insert aem forms TelephoneInput', function () { + dropTelephoneDropdownInSites(); + cy.deleteComponentByPath(telephoneInputDrop); + }); + + it('open edit dialog of aem forms TelephoneInput', { retries: 3 }, function() { + cy.cleanTest(telephoneInputDrop).then(function(){ + testTelephoneInputBehaviour(telephoneInputEditPathSelector, telephoneInputDrop, true); + }); + }); + + }); + }); +}); diff --git a/ui.tests/test-module/specs/telephonedropdown/telephonedropdown.runtime.spec.js b/ui.tests/test-module/specs/telephonedropdown/telephonedropdown.runtime.spec.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/ui.tests/test-module/specs/telephoneinput/telephoneinput.authoring.spec.js b/ui.tests/test-module/specs/telephoneinput/telephoneinput.authoring.spec.js index 347b04d5a5..79093668a9 100644 --- a/ui.tests/test-module/specs/telephoneinput/telephoneinput.authoring.spec.js +++ b/ui.tests/test-module/specs/telephoneinput/telephoneinput.authoring.spec.js @@ -84,7 +84,7 @@ describe('Page - Authoring', function () { cy.invokeEditableAction("[data-action='CONFIGURE']"); cy.get(bemEditDialog).contains('Validation').click({force: true}).then(() => { cy.get('.cmp-adaptiveform-telephoneinput__validationformat').should('have.value', '^[+][0-9]{0,14}$'); - cy.get('.cmp-adaptiveform-telephoneinput__validationpattern select').select('US Phone Number', {force: true}); + cy.get('.cmp-adaptiveform-telephoneinput__validationformat').get('.cmp-adaptiveform-telephoneinput__validationpattern').type('^[+]1[0-9]{0,10}$', {force: true}); cy.get('.cmp-adaptiveform-telephoneinput__validationformat').should('have.value', '^[+]1[0-9]{0,10}$'); cy.get('.cq-dialog-cancel').click(); cy.deleteComponentByPath(telephoneInputDrop); From 5d1051cad3ece9858c718d4b43207eec6ac6f4c7 Mon Sep 17 00:00:00 2001 From: Shivangi Mittal <shivangim@Shivangis-MacBook-Pro.local> Date: Tue, 12 Mar 2024 00:14:19 +0530 Subject: [PATCH 3/4] Added set model parser for phoennumbera nd countrycode --- .../site/js/telephonedropdownview.js | 62 +++++++++++++++---- 1 file changed, 50 insertions(+), 12 deletions(-) diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/site/js/telephonedropdownview.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/site/js/telephonedropdownview.js index 6c25f0b767..9e77cb48ab 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/site/js/telephonedropdownview.js +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/site/js/telephonedropdownview.js @@ -74,39 +74,77 @@ return this.element.querySelector(TelephoneDropdown.selectors.widget) } + updateValue(value) { + if (this.widgetObject == null && (this._model._jsonModel.editFormat || this._model._jsonModel.displayFormat || FormView.Utils.isUserAgent('safari'))) { + this.initializeWidget(); + } + if (this.widgetObject) { + this.widgetObject.setValue(value); + super.updateEmptyStatus(); + } else { + super.updateValue(value); + } + } + setModel(model) { super.setModel(model); if (this.widget.value !== '') { - this._model.value = this.widget.value; + this._model.value = this.getCountryCodeSelect().value + this.widget.value; } this.widget.addEventListener('blur', (e) => { - this._model.value = e.target.value; this.setInactive(); }); this.widget.addEventListener('focus', (e) => { this.setActive(); }); + var countryCodes = []; + + function populateCountryCodes() { + var selectElement = document.querySelector(TelephoneDropdown.selectors.countryCode); + var optionElements = selectElement.querySelectorAll('option'); + for (var i = 0; i < optionElements.length; i++) { + var countryCode = optionElements[i].value; + countryCodes.push(countryCode); + } + } + + if (document.readyState === 'loading') { // Loading hasn't finished yet + document.addEventListener('DOMContentLoaded', populateCountryCodes); + } else { // `DOMContentLoaded` has already fired + populateCountryCodes(); + } + + function parsePhoneNumber(phoneNumber) { + // Find the country code and the rest of the phone number + let countryCode = ''; + let number = phoneNumber; + for(var i = 0; i < countryCodes.length; i++){ + let code = countryCodes[i]; + if (phoneNumber.startsWith(code)) { + countryCode = code; + number = phoneNumber.slice(code.length); + break; + } + } + return {countryCode, number }; + } + this.getPhoneNumber().addEventListener('change', (e) => { let countryCode = this.getCountryCodeSelect().value; this._model.value = countryCode + e.target.value; + e.target.value = parsePhoneNumber(e.target.value).number; + this.getCountryCodeSelect().value = countryCode; }); this.getCountryCodeSelect().addEventListener('change', (e) => { let phoneNumber = this.getPhoneNumber().value; this._model.value = e.target.value + phoneNumber; + this.getPhoneNumber().value = parsePhoneNumber(this._model.value).number; + e.target.value = parsePhoneNumber(this._model.value).countryCode; }); - // this.getPhoneNumber().addEventListener('change', (e) => { - // let countryCode = this.getCountryCodeSelect().value; - // this._model.value = countryCode + e.target.value; - // }); - // - // this.getCountryCodeSelect().addEventListener('change', (e) => { - // local = e.target.value; - // // let phoneNumber = this.getPhoneNumber().value; - // // this._model.value = e.target.value + phoneNumber; - // }); + } } From 92196e7774aefcc156d59ca392fe70f4b131a89a Mon Sep 17 00:00:00 2001 From: Shivangi Mittal <shivangim@Shivangis-MacBook-Pro.local> Date: Mon, 18 Mar 2024 17:58:27 +0530 Subject: [PATCH 4/4] Updated telephone dropdown component with update value --- .../models/v1/form/TelephoneDropdownImpl.java | 124 ++++++++++++++---- .../models/form/TelephoneDropdown.java | 16 ++- .../telephonedropdown/_cq_dialog/.content.xml | 105 ++++----------- .../clientlibs/editor/js/editDialog.js | 117 +++-------------- .../site/css/telephonedropdownview.css | 6 + .../site/js/telephonedropdownview.js | 106 +++++++-------- .../telephonedropdown/telephonedropdown.html | 35 +++-- 7 files changed, 232 insertions(+), 277 deletions(-) diff --git a/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/internal/models/v1/form/TelephoneDropdownImpl.java b/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/internal/models/v1/form/TelephoneDropdownImpl.java index 87621b87c8..dc8bf3e119 100644 --- a/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/internal/models/v1/form/TelephoneDropdownImpl.java +++ b/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/internal/models/v1/form/TelephoneDropdownImpl.java @@ -16,9 +16,11 @@ package com.adobe.cq.forms.core.components.internal.models.v1.form; -import java.util.Arrays; +import java.util.*; +import java.util.stream.IntStream; import javax.annotation.Nullable; +import javax.swing.*; import org.apache.sling.api.SlingHttpServletRequest; import org.apache.sling.api.resource.Resource; @@ -27,10 +29,14 @@ import org.apache.sling.models.annotations.Model; import org.apache.sling.models.annotations.injectorspecific.InjectionStrategy; import org.apache.sling.models.annotations.injectorspecific.ValueMapValue; +import org.slf4j.Logger; +import org.slf4j.LoggerFactory; import com.adobe.cq.export.json.ComponentExporter; import com.adobe.cq.export.json.ExporterConstants; import com.adobe.cq.forms.core.components.models.form.TelephoneDropdown; +import com.adobe.cq.forms.core.components.util.ComponentUtils; +import com.fasterxml.jackson.annotation.JsonProperty; @Model( adaptables = { SlingHttpServletRequest.class, Resource.class }, @@ -39,11 +45,9 @@ @Exporter( name = ExporterConstants.SLING_MODEL_EXPORTER_NAME, extensions = ExporterConstants.SLING_MODEL_EXTENSION) -public class TelephoneDropdownImpl extends DropDownImpl implements TelephoneDropdown { +public class TelephoneDropdownImpl extends TextInputImpl implements TelephoneDropdown { - @ValueMapValue(injectionStrategy = InjectionStrategy.REQUIRED, name = "allowedCountryCodes") - @Default(values = { "+0 CountryName" }) - private String[] allowedCountryCodes; + private final Logger logger = LoggerFactory.getLogger(getClass()); @ValueMapValue(injectionStrategy = InjectionStrategy.OPTIONAL, name = "pattern") @Nullable @@ -52,33 +56,109 @@ public class TelephoneDropdownImpl extends DropDownImpl implements TelephoneDrop @Default(booleanValues = false) private boolean enforceEnum; - @ValueMapValue(injectionStrategy = InjectionStrategy.OPTIONAL, name = "multiSelect") - @Default(booleanValues = false) - protected boolean multiSelect; + @ValueMapValue(injectionStrategy = InjectionStrategy.OPTIONAL, name = "AllCountryCodes") + @Default(booleanValues = true) + private boolean countryCodes; + private static final String PN_PLACEHOLDER_ = "placeholdercode"; - @Override - public Integer getMinItems() { - return minItems; - } + @ValueMapValue(injectionStrategy = InjectionStrategy.OPTIONAL, name = PN_PLACEHOLDER_) + @Nullable + protected String placeholdercode; + + @ValueMapValue(injectionStrategy = InjectionStrategy.OPTIONAL, name = "enum") + @Nullable + protected String[] enums; // todo: this needs to be thought through ? + + @ValueMapValue(injectionStrategy = InjectionStrategy.OPTIONAL, name = "enumNames") + @Nullable + protected String[] enumNames; - @Override public boolean isEnforceEnum() { return enforceEnum; } - @Override - public Integer getMaxItems() { - return maxItems; + public boolean isChecked() { + return countryCodes; } - @Override - public Boolean isMultiSelect() { - return multiSelect; + @Nullable + @JsonProperty("placeholdercode") + public String getPlaceHoldercode() { + return placeholdercode; + } + + private Map<Object, String> removeDuplicates() { + + Object[] enumArray = this.enums; + String[] enumNamesArray = this.enumNames; + + LinkedHashMap<Object, String> map = new LinkedHashMap<>(); + + if (enumArray != null && enumNamesArray != null && enumArray.length == enumNamesArray.length) { + map = IntStream.range(0, enumArray.length).collect(LinkedHashMap::new, (m, i) -> m.put(enumArray[i], enumNamesArray[i]), + LinkedHashMap::putAll); + } + + return map; + + } + + public Object[] getEnums() { + if (enums == null) { + return null; + } else { + // todo: we can only typecast to number or boolean if type is present in JCR, for array types, we need to store the type of each + // array element in JCR + // todo: and compute based on it (hence using typeJcr below) + // may expose internal representation of mutable object, hence cloning + Map<Object, String> map = removeDuplicates(); + String[] enumValue = map.keySet().toArray(new String[0]); + return ComponentUtils.coerce(type, enumValue); + } + } + + public String[] getEnumNames() { + if (enumNames != null) { + Map<Object, String> map = removeDuplicates(); + String[] enumName = map.values().toArray(new String[0]); + return Arrays.stream(enumName) + .map(p -> { + return this.translate("enumNames", p); + }) + .toArray(String[]::new); + } + return null; + } + + public Object[] getDefault() { + Object[] typedDefaultValue = null; + try { + if (defaultValue != null) { + typedDefaultValue = ComponentUtils.coerce(type, defaultValue); + } + } catch (Exception exception) { + logger.error("Error while type casting default value to value type. Exception: ", exception); + } + return typedDefaultValue; + } + + private Map<String, String> countryDropdown; + private List<Map.Entry<String, String>> countryDropdownEntries; + + public void countryCode() { + countryDropdown = new HashMap<>(); + // Add country codes here + countryDropdown.put("EN", "+567"); + countryDropdown.put("VN", "+91"); + // Add more as needed + + // Convert the Map to a List of entries + countryDropdownEntries = new ArrayList<>(countryDropdown.entrySet()); } - @Override - public String[] getAllowedCountryCodes() { - return Arrays.copyOf(allowedCountryCodes, allowedCountryCodes.length); + public List<Map.Entry<String, String>> getCountryDropdown() { + countryCode(); + return countryDropdownEntries; } @Nullable diff --git a/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/models/form/TelephoneDropdown.java b/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/models/form/TelephoneDropdown.java index 976f6159dc..3cf6aed29e 100644 --- a/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/models/form/TelephoneDropdown.java +++ b/bundles/af-core/src/main/java/com/adobe/cq/forms/core/components/models/form/TelephoneDropdown.java @@ -18,7 +18,8 @@ import org.osgi.annotation.versioning.ConsumerType; -import com.fasterxml.jackson.annotation.JsonIgnore; +import java.util.List; +import java.util.Map; /** * Defines the form TelephoneDropdown field Sling Model used for the telephone input component with dropdown. @@ -26,7 +27,7 @@ * @since com.adobe.cq.forms.core.components.models.form 0.0.1 */ @ConsumerType -public interface TelephoneDropdown extends Field, OptionsConstraint, ContainerConstraint { +public interface TelephoneDropdown extends TextInput { /** * Returns the default country code for the telephone field. @@ -34,8 +35,13 @@ public interface TelephoneDropdown extends Field, OptionsConstraint, ContainerCo * @return the default country code * @since com.adobe.cq.forms.core.components.models.form 0.0.1 */ - String[] getAllowedCountryCodes(); + // String[] getAllowedCountryCodes(); + String getPlaceHoldercode(); + + boolean isChecked(); + + void countryCode(); + + List<Map.Entry<String, String>> getCountryDropdown(); - @JsonIgnore - Boolean isMultiSelect(); } diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/_cq_dialog/.content.xml b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/_cq_dialog/.content.xml index cd013c2800..10335d62f7 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/_cq_dialog/.content.xml +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/_cq_dialog/.content.xml @@ -1,6 +1,6 @@ <?xml version="1.0" encoding="UTF-8"?> <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ - ~ Copyright 2022 Adobe + ~ 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. @@ -95,89 +95,38 @@ </autocomplete-tel> </items> </column> -<!-- <column--> -<!-- jcr:primaryType="nt:unstructured"--> -<!-- sling:resourceType="granite/ui/components/coral/foundation/container">--> -<!-- <items jcr:primaryType="nt:unstructured">--> -<!-- <countryCodes--> -<!-- jcr:primaryType="nt:unstructured"--> -<!-- sling:resourceType="granite/ui/components/coral/foundation/form/multifield"--> -<!-- fieldLabel="Allowed Country Codes"--> -<!-- name="./allowedCountryCodes">--> -<!-- <field--> -<!-- jcr:primaryType="nt:unstructured"--> -<!-- sling:resourceType="granite/ui/components/coral/foundation/form/textfield"--> -<!-- name="./allowedCountryCodes"/>--> -<!-- </countryCodes>--> -<!-- </items>--> -<!-- </column>--> <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container"> <items jcr:primaryType="nt:unstructured"> - <saveValueType - granite:class="cmp-adaptiveform-telephonedropdown__savevaluetype" + <placeholder jcr:primaryType="nt:unstructured" - sling:orderBefore="placeholder" - sling:resourceType="granite/ui/components/coral/foundation/form/select" - fieldLabel="Save value as" - typeHint="String" - name="./typeIndex"> - <items jcr:primaryType="nt:unstructured"> - <String jcr:primaryType="nt:unstructured" - text="String" - value="0"/> - <Number jcr:primaryType="nt:unstructured" - text="Number" - value="1"/> - <Boolean jcr:primaryType="nt:unstructured" - text="Boolean" - value="2"/> - </items> - </saveValueType> - <type jcr:primaryType="nt:unstructured" - sling:resourceType="granite/ui/components/coral/foundation/form/hidden" - name="./type"/> + granite:class="cmp-adaptiveform-base__placeholder" + sling:resourceType="granite/ui/components/coral/foundation/form/textfield" + fieldLabel="Placeholder for Input" + name="./placeholder"/> + <placeholdercode + jcr:primaryType="nt:unstructured" + granite:class="cmp-adaptiveform-base__placeholder" + sling:resourceType="granite/ui/components/coral/foundation/form/textfield" + fieldLabel="Placeholder for DropDown" + name="./placeholdercode"/> + <AllCountryCodes + jcr:primaryType="nt:unstructured" + sling:resourceType="granite/ui/components/coral/foundation/form/checkbox" + granite:class="cmp-adaptiveform-telephonedropdown__countrycodes" + name="./AllCountryCodes" + text="All Country Codes" + uncheckedValue="false" + value="true" + checked="true"/> <enums jcr:primaryType="nt:unstructured" - sling:resourceType="granite/ui/components/coral/foundation/include" - path="core/fd/components/form/base/v1/base/cq:dialog/content/items/tabs/items/basic/items/columns/items/column/items/enums" - sling:orderBefore="placeholder" - sling:hideResource="{Boolean}false"/> -<!-- <multiSelect--> -<!-- granite:class="cmp-adaptiveform-telephonedropdown__allowmultiselect"--> -<!-- jcr:primaryType="nt:unstructured"--> -<!-- sling:orderBefore="saveValueType"--> -<!-- sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"--> -<!-- name="./multiSelect"--> -<!-- text="Allow multiple selection"--> -<!-- value="true"/>--> -<!-- <multiSelect-typehint--> -<!-- jcr:primaryType="nt:unstructured"--> -<!-- sling:resourceType="granite/ui/components/coral/foundation/form/hidden"--> -<!-- name="./multiSelect@TypeHint"--> -<!-- value="Boolean"/>--> -<!-- <defaultValueSS--> -<!-- wrapperClass="cmp-adaptiveform-telephonedropdown__defaultvalue"--> -<!-- jcr:primaryType="nt:unstructured"--> -<!-- sling:orderBefore="placeholder"--> -<!-- sling:resourceType="granite/ui/components/coral/foundation/form/textfield"--> -<!-- fieldDescription="Specified default option is preselected on form load."--> -<!-- fieldLabel="Default option"--> -<!-- name="./default"/>--> -<!-- <defaultValueMS--> -<!-- wrapperClass="cmp-adaptiveform-telephonedropdown__defaultvaluemultiselect"--> -<!-- jcr:primaryType="nt:unstructured"--> -<!-- sling:orderBefore="placeholder"--> -<!-- sling:resourceType="granite/ui/components/coral/foundation/form/multifield"--> -<!-- typeHint="String[]"--> -<!-- fieldDescription="Specified default options are preselected on form load."--> -<!-- fieldLabel="Default options">--> -<!-- <field--> -<!-- jcr:primaryType="nt:unstructured"--> -<!-- sling:resourceType="granite/ui/components/coral/foundation/form/textfield"--> -<!-- name="./default"--> -<!-- required="{Boolean}false"/>--> -<!-- </defaultValueMS>--> + sling:resourceType="granite/ui/components/coral/foundation/container" + granite:class="cmp-adaptiveform-telephonedropdown__enums" + sling:hideResource="{Boolean}false"> + <items jcr:primaryType="nt:unstructured" + path="core/fd/components/form/base/v1/base/cq:dialog/content/items/tabs/items/basic/items/columns/items/column/items/enums/items"/> + </enums> </items> </column> </items> diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/editor/js/editDialog.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/editor/js/editDialog.js index 3977025869..25906e9c37 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/editor/js/editDialog.js +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/editor/js/editDialog.js @@ -1,5 +1,5 @@ /******************************************************************************* - * Copyright 2023 Adobe + * 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. @@ -28,8 +28,27 @@ TYPE = EDIT_DIALOG + " input[name='./type']", DEFAULTINPUT = DROPDOWN_DEFAULTVALUE + " input", DEFAULTMUTIINPUT = DROPDOWN_DEFAULTVALUEMULTISELCET + " input[type='text']", + DEFAULTENUM = ".cmp-adaptiveform-telephonedropdown__enums", + DEFAULTCOUNTRYCODES = ".cmp-adaptiveform-telephonedropdown__countrycodes", Utils = window.CQ.FormsCoreComponents.Utils.v1; + function handlecheckbox() { + var enumsInclude = document.querySelector(DEFAULTENUM); + var checkbox = document.querySelector(DEFAULTCOUNTRYCODES); + var isChecked = checkbox.checked; + + if(isChecked){ + enumsInclude.style.display = 'none'; + } + else { + enumsInclude.style.display = 'block'; + } + + if(checkbox){ + checkbox.addEventListener('change', handlecheckbox); + } + } + function handleValidationPatternDropDown(dialog) { Utils.handlePatternDropDown(dialog,TELEPHONEDROPDOWN_VALIDATIONPATTERN,TELEPHONEDROPDOWN_VALIDATIONFORMAT); } @@ -39,99 +58,5 @@ } - // function handleSaveValueDropDown(dialog) { - // var multiSelect = dialog.find(DROPDOWN_ALLOWMULTISELECT)[0], - // saveValueDropdown = dialog.find(DROPDOWN_SAVEVALUE), - // type = dialog.find(TYPE), - // saveTypes = ['string', 'number', 'boolean']; - // - // var updateSaveValueType = function() { - // var index = parseInt(saveValueDropdown.val()); - // if(multiSelect.checked) { - // type.val(saveTypes[index] + '[]'); - // } else { - // type.val(saveTypes[index]); - // } - // } - // // triggered when dialog is launched - // updateSaveValueType(); - // saveValueDropdown.on("change", function() { - // updateSaveValueType(); - // }); - // multiSelect.on("change", function() { - // updateSaveValueType(); - // }); - // } - - /** - * Handles the default value field in the dialog appropriately when multi-select is toggled. - * @param {HTMLElement} dialog The dialog on which the operation is to be performed. - */ - // function handleDefaultValue(dialog) { - // var multiSelect = dialog.find(DROPDOWN_ALLOWMULTISELECT)[0], - // defaultValue = dialog.find(DROPDOWN_DEFAULTVALUE), - // defaultValueMS = dialog.find(DROPDOWN_DEFAULTVALUEMULTISELCET), - // defaultInput = dialog.find(DEFAULTINPUT), - // defaultMultiInput = dialog.find(DEFAULTMUTIINPUT); - // - // var isMultiSelect = function () { - // return multiSelect.checked; - // } - // - // var isNotMultiSelect = function () { - // return !isMultiSelect(); - // } - // - // var changeNameForMultiSelect = function (newName) { - // [...defaultMultiInput].forEach((input) => { - // input.name = newName; - // }) - // } - // - // var hideAndShowElements = function () { - // Utils.checkAndDisplay(defaultValueMS)(isMultiSelect); - // Utils.checkAndDisplay(defaultValue)(isNotMultiSelect); - // - // // making sure that ./default of the rendered component is only persisted in jcr - // if(isMultiSelect()) { - // defaultInput.attr("name","./default@Delete"); - // changeNameForMultiSelect("./default"); - // } else { - // defaultInput.attr("name","./default"); - // changeNameForMultiSelect("./default@Delete"); - // } - // } - // hideAndShowElements(); - // multiSelect.on("change", function() { - // hideAndShowElements(); - // }); - // } - - var registerDialogValidator = Utils.registerDialogDataTypeValidators( - DROPDOWN_DEFAULTVALUE + " input", - DROPDOWN_ENUM, - function (dialog) { - var selectedValue = ''; - var dropdownSaveValue = dialog.find(DROPDOWN_SAVEVALUE); - if (dropdownSaveValue && dropdownSaveValue.length > 0) { - selectedValue = dropdownSaveValue[0].selectedItem ? dropdownSaveValue[0].selectedItem.value : ''; - } - var dataType = ''; - switch (selectedValue) { - case '0': - dataType = 'string'; - break; - case '1': - dataType = 'number'; - break; - case '2': - dataType = 'boolean'; - break; - } - return dataType; - } - ); - - - Utils.initializeEditDialog(EDIT_DIALOG)(handleValidationPatternDropDown, handleValidationFormat, registerDialogValidator); + Utils.initializeEditDialog(EDIT_DIALOG)(handleValidationPatternDropDown, handleValidationFormat, handlecheckbox); })(jQuery); diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/site/css/telephonedropdownview.css b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/site/css/telephonedropdownview.css index 462483a707..22c62d3525 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/site/css/telephonedropdownview.css +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/site/css/telephonedropdownview.css @@ -46,4 +46,10 @@ /* Styles for the error message */ color: #d32f2f; /* Example error color */ margin-top: 5px; /* Add space above the error message */ +} + +.errormessage { + color: red; + font-size: 16px; + font-weight: bold; } \ No newline at end of file diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/site/js/telephonedropdownview.js b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/site/js/telephonedropdownview.js index 9e77cb48ab..5c0b04d6c9 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/site/js/telephonedropdownview.js +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/clientlibs/site/js/telephonedropdownview.js @@ -1,5 +1,5 @@ /******************************************************************************* - * Copyright 2022 Adobe + * 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. @@ -17,7 +17,6 @@ "use strict"; class TelephoneDropdown extends FormView.FormFieldBase { - static NS = FormView.Constants.NS; /** * Each FormField has a data attribute class that is prefixed along with the global namespace to @@ -74,15 +73,47 @@ return this.element.querySelector(TelephoneDropdown.selectors.widget) } - updateValue(value) { - if (this.widgetObject == null && (this._model._jsonModel.editFormat || this._model._jsonModel.displayFormat || FormView.Utils.isUserAgent('safari'))) { - this.initializeWidget(); + #parsePhoneNumber(value) { + // Find the country code and the rest of the phone number + var countryCodes = ['+567', '+91']; + let countryCode = ''; + let number = value; + + if (!number.startsWith('+')) { + number = '+' + number; + } + + for (var i = 0; i < countryCodes.length; i++) { + let code = countryCodes[i]; + if (number.startsWith(code)) { + countryCode = code; + number = number.slice(code.length); + break; + } } - if (this.widgetObject) { - this.widgetObject.setValue(value); - super.updateEmptyStatus(); - } else { - super.updateValue(value); + if (countryCode === '') { + throw new Error('Country code not found'); + } + return {countryCode, number}; + } + updateValue(value) { + let parsedPhoneNumber; + let form = document.getElementsByClassName('cmp-adaptiveform-telephonedropdown')[0]; + let oldErrorMessage = form.querySelector('.errormessage'); + + if (oldErrorMessage) + form.removeChild(oldErrorMessage); + + try { + parsedPhoneNumber = this.#parsePhoneNumber(value); + this.getPhoneNumber().value = parsedPhoneNumber.number; + this.getCountryCodeSelect().value = parsedPhoneNumber.countryCode; + } catch (error) { + console.error('An error occurred:', error); + let errorMessage = document.createElement('div'); + errorMessage.textContent = 'Please enter a valid country code in rules'; + errorMessage.className = 'errormessage'; + form.appendChild(errorMessage); } } @@ -92,59 +123,20 @@ this._model.value = this.getCountryCodeSelect().value + this.widget.value; } this.widget.addEventListener('blur', (e) => { + this._model.value = this.getCountryCodeSelect().value + this.widget.value; this.setInactive(); }); - this.widget.addEventListener('focus', (e) => { - this.setActive(); + this.getCountryCodeSelect().addEventListener('blur', (e) => { + this._model.value = this.getCountryCodeSelect().value + this.widget.value; + this.setInactive(); }); - - var countryCodes = []; - - function populateCountryCodes() { - var selectElement = document.querySelector(TelephoneDropdown.selectors.countryCode); - var optionElements = selectElement.querySelectorAll('option'); - for (var i = 0; i < optionElements.length; i++) { - var countryCode = optionElements[i].value; - countryCodes.push(countryCode); - } - } - - if (document.readyState === 'loading') { // Loading hasn't finished yet - document.addEventListener('DOMContentLoaded', populateCountryCodes); - } else { // `DOMContentLoaded` has already fired - populateCountryCodes(); - } - - function parsePhoneNumber(phoneNumber) { - // Find the country code and the rest of the phone number - let countryCode = ''; - let number = phoneNumber; - for(var i = 0; i < countryCodes.length; i++){ - let code = countryCodes[i]; - if (phoneNumber.startsWith(code)) { - countryCode = code; - number = phoneNumber.slice(code.length); - break; - } - } - return {countryCode, number }; - } - - this.getPhoneNumber().addEventListener('change', (e) => { - let countryCode = this.getCountryCodeSelect().value; - this._model.value = countryCode + e.target.value; - e.target.value = parsePhoneNumber(e.target.value).number; - this.getCountryCodeSelect().value = countryCode; + this.getCountryCodeSelect().addEventListener('focus', (e) => { + this.setActive(); }); - this.getCountryCodeSelect().addEventListener('change', (e) => { - let phoneNumber = this.getPhoneNumber().value; - this._model.value = e.target.value + phoneNumber; - this.getPhoneNumber().value = parsePhoneNumber(this._model.value).number; - e.target.value = parsePhoneNumber(this._model.value).countryCode; + this.widget.addEventListener('focus', (e) => { + this.setActive(); }); - - } } diff --git a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/telephonedropdown.html b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/telephonedropdown.html index 446585d7f8..845b5453ac 100644 --- a/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/telephonedropdown.html +++ b/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/telephonedropdown/v1/telephonedropdown/telephonedropdown.html @@ -14,22 +14,6 @@ ~ limitations under the License. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/--> -<!--/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ - ~ Copyright 2023 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.telephoneDropdown="com.adobe.cq.forms.core.components.models.form.TelephoneDropdown" data-sly-use.telText="com.adobe.cq.forms.core.components.models.form.TextInput" data-sly-use.renderer="${'telephoneDropdown.js'}" @@ -49,19 +33,32 @@ id="${telText.id}" data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}" data-sly-test.widgetId="${'{0}-{1}' @ format=[telText.id, 'widget']}"> - <div class=""> + <div class="cmp-adaptiveform-telephonedropdown__label-container"> <div data-sly-call="${label.label @componentId=widgetId, labelValue=telText.label.value, labelVisible=telText.label.visible, bemBlock='cmp-adaptiveform-telephonedropdown'}" data-sly-unwrap></div> <div data-sly-call="${questionMark.questionMark @componentId=telText.id, longDescription=telText.description, bemBlock='cmp-adaptiveform-telephonedropdown'}" data-sly-unwrap></div> </div> <div class="cmp-adaptiveform-telephonedropdown__widget-container"> <select class="cmp-adaptiveform-telephonedropdown__countrycode" id="${widgetId}-countrycode"> - <option data-sly-test="${isPlaceHolderSet}" value="" disabled selected>${telephoneDropdown.placeHolder}</option> - <div data-sly-list.enumName="${telephoneDropdown.enumNames}" data-sly-unwrap> + <div data-sly-test.isPlaceHolderSet="${telephoneDropdown.getPlaceHoldercode != null}" data-sly-unwrap></div> + <option data-sly-test="${!isPlaceHolderSet}" role="none" style="display: none;"></option> + <option data-sly-test="${isPlaceHolderSet}" value="" disabled selected>${telephoneDropdown.getPlaceHoldercode}</option> + + <div data-sly-test="${properties.AllCountryCodes}" data-sly-list.option="${telephoneDropdown.getCountryDropdown}" data-sly-unwrap> + <option value="${option.value}" + class="cmp-adaptiveform-telephonedropdown__option" + data-sly-attribute.selected="${option.value in telephoneDropdown.default ? 'selected' : ''}"> + ${option.key} (${option.value}) + </option> + </div> + + <div data-sly-test = "${!telephoneDropdown.isChecked}"> + <div data-sly-list.enumName="${telephoneDropdown.enumNames}" data-sly-unwrap> <div data-sly-test="${enumName != null && telephoneDropdown.enums[enumNameList.index] != null}" data-sly-unwrap> <option value="${telephoneDropdown.enums[enumNameList.index].toString}" class="cmp-adaptiveform-telephonedropdown__option" data-sly-attribute.selected="${telephoneDropdown.enums[enumNameList.index] in telephoneDropdown.default ? 'selected' : ''}">${enumName}</option> </div> + </div> </div> </select> <input title="${telText.tooltipVisible ? '' : telText.tooltipText}"