feat: Telephone as a OOTB decorated component with type tel

blocks/form/form.js

@@ -99,11 +99,11 @@
   const optionNames = fd?.enumNames ?? options;
 
   if (options.length === 1
-    && options?.[0]?.startsWith('https://')) {
+      && options?.[0]?.startsWith('https://')) {
     const optionsUrl = new URL(options?.[0]);
     // using async to avoid rendering
     if (optionsUrl.hostname.endsWith('hlx.page')
-    || optionsUrl.hostname.endsWith('hlx.live')) {
+        || optionsUrl.hostname.endsWith('hlx.live')) {
       fetch(`${optionsUrl.pathname}${optionsUrl.search}`)
         .then(async (response) => {
           const json = await response.json();
@@ -304,6 +304,10 @@
       input.disabled = true;
     }
     const fieldType = getHTMLRenderType(field);
+    if (['tel', 'email'].includes(fieldType)) {
+      input.type = fieldType;
+      input.inputMode = fieldType;
+    }
     if (['number', 'date', 'text', 'email'].includes(fieldType) && (field.displayFormat || field.displayValueExpression)) {
       field.type = fieldType;
       input.setAttribute('edit-value', field.value ?? '');
@@ -534,7 +538,7 @@
         }
         return doc;
       } catch (e) {
         console.error('Unable to fetch form definition for path', pathname, path);
         return null;
       }
     });

blocks/form/models/form-components/_telephone-input.json

@@ -9,7 +9,7 @@
             "resourceType": "core/fd/components/form/telephoneinput/v1/telephoneinput",
             "template": {
               "jcr:title": "Telephone Input",
-              "fieldType": "text-input"
+              "fieldType": "tel"
             }
           }
         }

component-definition.json

@@ -433,7 +433,7 @@
                 "resourceType": "core/fd/components/form/telephoneinput/v1/telephoneinput",
                 "template": {
                   "jcr:title": "Telephone Input",
-                  "fieldType": "text-input"
+                  "fieldType": "tel"
                 }
               }
             }

test/unit/fixtures/components/accordion/accordion.html

@@ -2,7 +2,7 @@
         <legend for="panelcontainer-88e4f7e22c" class="field-label">Accordion</legend>
         <fieldset class="panel-wrapper field-panelcontainer1736402997568 field-wrapper" data-id="panelcontainer-c49bd83fb9" id="panelcontainer-c49bd83fb9" name="panelcontainer1736402997568" data-index="0">
             <legend for="panelcontainer-c49bd83fb9" class="field-label accordion-legend">Panel</legend>
-            <div class="email-wrapper field-emailinput1736403046407 field-wrapper" data-id="emailinput-8110743bb8" data-required="false"><label for="emailinput-8110743bb8" class="field-label">Email Input</label><input type="email" id="emailinput-8110743bb8" name="emailinput1736403046407" autocomplete="off" pattern="([A-Za-z0-9][._]?)+[A-Za-z0-9]@[A-Za-z0-9]+(.?[A-Za-z0-9]){2}.([A-Za-z0-9]{2,4})?"></div>
+            <div class="email-wrapper field-emailinput1736403046407 field-wrapper" data-id="emailinput-8110743bb8" data-required="false"><label for="emailinput-8110743bb8" class="field-label">Email Input</label><input type="email" inputMode="email" id="emailinput-8110743bb8" name="emailinput1736403046407" autocomplete="off" pattern="([A-Za-z0-9][._]?)+[A-Za-z0-9]@[A-Za-z0-9]+(.?[A-Za-z0-9]){2}.([A-Za-z0-9]{2,4})?"></div>
         </fieldset>
         <fieldset class="panel-wrapper field-panelcontainer-14903972251736403053452 field-wrapper accordion-collapse" data-id="panelcontainer-d5a2c8d340" id="panelcontainer-d5a2c8d340" name="panelcontainer_14903972251736403053452" data-index="1">
             <legend for="panelcontainer-d5a2c8d340" class="field-label accordion-legend">Panel</legend>

test/unit/fixtures/form/docBasedWizardForm.html

@@ -17,7 +17,7 @@
         <fieldset class="panel-wrapper field-panel-2 field-wrapper" data-fieldset="wizard" data-id="panel-2" id="panel-2" name="panel-2" data-index="1" style="--wizard-step-index: 1;">
             <div class="text-wrapper field-first-name field-wrapper" data-fieldset="panel-2" data-id="first-name" data-required-error-message="This field is required" data-pattern-error-message="Please enter a valid value" data-required="true"><label for="first-name" class="field-label">First Name</label><input type="text" maxlength="40" pattern="^[a-zA-Z]{1,30}$" id="first-name" name="first_name" autocomplete="off" required="required"></div>
             <div class="text-wrapper field-last-name field-wrapper" data-fieldset="panel-2" data-id="last-name" data-required-error-message="This field is required" data-pattern-error-message="Please enter a valid value" data-required="true"><label for="last-name" class="field-label">Last Name</label><input type="text" maxlength="40" pattern="^[a-zA-Z]{1,30}$" id="last-name" name="last_name" autocomplete="off" required="required"></div>
-            <div class="email-wrapper field-email field-wrapper" data-fieldset="panel-2" data-id="email" data-required-error-message="This field is required" data-pattern-error-message="Please enter a valid email address." data-required="true"><label for="email" class="field-label">Email</label><input type="email" maxlength="255" pattern="([A-Za-z0-9][._]?)+[A-Za-z0-9]@[A-Za-z0-9]+(.?[A-Za-z0-9]){2}.([A-Za-z0-9]{2,4})?" id="email" name="email" autocomplete="off" required="required"></div>
+            <div class="email-wrapper field-email field-wrapper" data-fieldset="panel-2" data-id="email" data-required-error-message="This field is required" data-pattern-error-message="Please enter a valid email address." data-required="true"><label for="email" class="field-label">Email</label><input type="email" inputmode="email" maxlength="255" pattern="([A-Za-z0-9][._]?)+[A-Za-z0-9]@[A-Za-z0-9]+(.?[A-Za-z0-9]){2}.([A-Za-z0-9]{2,4})?" id="email" name="email" autocomplete="off" required="required"></div>
         </fieldset>
         <fieldset class="panel-wrapper field-panel-3 field-wrapper" data-fieldset="wizard" data-id="panel-3" id="panel-3" name="panel-3" data-index="2" style="--wizard-step-index: 2;">
             <fieldset class="panel-wrapper field-quotetype field-wrapper" data-fieldset="panel-3" data-id="quotetype" id="quotetype" name="quoteType">

test/unit/fixtures/form/tripPlanner.html

@@ -28,7 +28,7 @@
         <div class="number-wrapper field-age field-wrapper col-6" data-fieldset="panel-1" data-id="age" data-required-error-message="Please fill in this field." data-required="false"><label for="age" class="field-label">Age</label><input type="number" id="age" name="age" autocomplete="off"></div>
     </fieldset>
     <div class="checkbox-wrapper field-subscribe field-wrapper" data-id="subscribe" data-required-error-message="Please fill in this field." data-required="false"><input type="checkbox" value="true" id="subscribe" name="subscribe" autocomplete="off"><label for="subscribe" class="field-label">Do you like subscribe for Magazine &amp; Activities?</label></div>
-    <div class="email-wrapper field-email field-wrapper" data-id="email" data-required-error-message="Please fill in this field." data-required="false"><label for="email" class="field-label">Email</label><input type="email" id="email" name="email" autocomplete="off" pattern="([A-Za-z0-9][._]?)+[A-Za-z0-9]@[A-Za-z0-9]+(.?[A-Za-z0-9]){2}.([A-Za-z0-9]{2,4})?"></div>
+    <div class="email-wrapper field-email field-wrapper" data-id="email" data-required-error-message="Please fill in this field." data-required="false"><label for="email" class="field-label">Email</label><input type="email" inputmode="email" id="email" name="email" autocomplete="off" pattern="([A-Za-z0-9][._]?)+[A-Za-z0-9]@[A-Za-z0-9]+(.?[A-Za-z0-9]){2}.([A-Za-z0-9]{2,4})?"></div>
     <div class="button-wrapper field-submit field-wrapper submit-wrapper" data-id="submit"><button type="submit" class="button" id="submit" name="submit">Submit</button></div>
     <div class="file-wrapper field-attach field-wrapper decorated" data-id="attach" data-required-error-message="Please fill in this field." data-required="false" data-component-status="loaded">
         <label for="attach" class="field-label">Attach</label>