perf: upgrade input to 4.2.0

AlaskaAirlines · Nov 25, 2024 · cbb6530 · cbb6530
1 parent 9fd61ab
commit cbb6530
Show file tree

Hide file tree

Showing 10 changed files with 324 additions and 22 deletions.
diff --git a/components/input/apiExamples/fullYear.html b/components/input/apiExamples/fullYear.html
@@ -0,0 +1,3 @@
+<auro-input type="fullYear">
+  <slot slot="label">Full Year</slot>
+</auro-input>
diff --git a/components/input/apiExamples/month.html b/components/input/apiExamples/month.html
@@ -0,0 +1,3 @@
+<auro-input type="month">
+  <slot slot="label">Month</slot>
+</auro-input>
diff --git a/components/input/apiExamples/year.html b/components/input/apiExamples/year.html
@@ -0,0 +1,3 @@
+<auro-input type="year">
+  <slot slot="label">Year</slot>
+</auro-input>
diff --git a/components/input/demo/api.min.js b/components/input/demo/api.min.js
@@ -163,7 +163,10 @@ const stringsES = {
   'dateMMDDYYYY': 'Ingrese una fecha completa en el formato MM/DD/AAAA',
   'dateMMYY': 'Ingrese una fecha completa en el formato MM/AA',
   'dateMMYYYY': 'Ingrese una fecha completa en el formato MM/AAAA',
-  'dateYYYYMMDD': 'Ingrese una fecha completa en el formato AAAA/MM/DD'
+  'dateYYYYMMDD': 'Ingrese una fecha completa en el formato AAAA/MM/DD',
+  'dateYY': 'Ingrese una fecha completa en el formato AA',
+  'dateYYYY': 'Ingrese una fecha completa en el formato AAAA',
+  'dateMM': 'Ingrese una fecha completa en el formato MM',
 };
 
 const stringsEN = {
@@ -175,7 +178,10 @@ const stringsEN = {
   'dateMMDDYYYY': 'Please enter a complete date in the format MM/DD/YYYY',
   'dateMMYY': 'Please enter a complete date in the format MM/YY',
   'dateMMYYYY': 'Please enter a complete date in the format MM/YYYY',
-  'dateYYYYMMDD': 'Please enter a complete date in the format YYYY/MM/DD'
+  'dateYYYYMMDD': 'Please enter a complete date in the format YYYY/MM/DD',
+  'dateYYY': 'Please enter a complete date in the format YY',
+  'dateYYYYY': 'Please enter a complete date in the format YYYY',
+  'dateMM': 'Please enter a complete date in the format MM'
 };
 
 /**
@@ -2207,7 +2213,10 @@ class BaseInput extends r {
       "month-day-year",
       "year-month-day",
       "month-year",
-      "month-fullYear"
+      "month-fullYear",
+      "month",
+      "year",
+      "fullYear"
     ];
 
     this.autoFormattingTypes = [
@@ -2400,6 +2409,36 @@ class BaseInput extends r {
           this.inputMode = 'numeric';
 
           break;
+
+        case 'fullYear':
+          config = {
+            date: true,
+            datePattern: ['Y']
+          };
+
+          this.inputMode = 'numeric';
+
+          break;
+
+        case 'year':
+          config = {
+            date: true,
+            datePattern: ['y']
+          };
+
+          this.inputMode = 'numeric';
+
+          break;
+
+        case 'month':
+          config = {
+            date: true,
+            datePattern: ['m']
+          };
+
+          this.inputMode = 'numeric';
+
+          break;
           // Do nothing
       }
 
@@ -2446,6 +2485,12 @@ class BaseInput extends r {
         this.setCustomValidityForType = i18n(this.lang, 'dateMMYYYY');
       } else if (this.type === 'year-month-day') {
         this.setCustomValidityForType = i18n(this.lang, 'dateYYYYMMDD');
+      } else if (this.type === 'year') {
+        this.setCustomValidityForType = i18n(this.lang, 'dateYY');
+      } else if (this.type === 'fullYear') {
+        this.setCustomValidityForType = i18n(this.lang, 'dateYYYY');
+      } else if (this.type === 'month') {
+        this.setCustomValidityForType = i18n(this.lang, 'dateMM');
       }
     }
 
@@ -2770,6 +2815,10 @@ class BaseInput extends r {
       this.dateStrLength = 5;
     } else if (this.type === 'month-fullYear') {
       this.dateStrLength = 7;
+    } else if (this.type === 'month' || this.type === 'year') {
+      this.dateStrLength = 2;
+    } else if (this.type === 'fullYear') {
+      this.dateStrLength = 4;
     }
   }
 
@@ -2808,6 +2857,12 @@ class BaseInput extends r {
       this.helpText = i18n(this.lang, 'dateMMYYYY');
     } else if (type === 'year-month-day') {
       this.helpText = i18n(this.lang, 'dateYYYYMMDD');
+    } else if (type === 'month') {
+      this.helpText = i18n(this.lang, 'dateMM');
+    } else if (type === 'year') {
+      this.helpText = i18n(this.lang, 'dateYY');
+    } else if (type === 'fullYear') {
+      this.helpText = i18n(this.lang, 'dateYYYY');
     } else {
       this.helpText = '';
     }
@@ -2839,6 +2894,12 @@ class BaseInput extends r {
       return !this.placeholder ? 'MM/YYYY' : this.placeholder;
     } else if (this.type === 'year-month-day') {
       return !this.placeholder ? 'YYYY/MM/DD' : this.placeholder;
+    } else if (this.type === 'year') {
+      return !this.placeholder ? 'YY' : this.placeholder;
+    } else if (this.type === 'fullYear') {
+      return !this.placeholder ? 'YYYY' : this.placeholder;
+    } else if (this.type === 'month') {
+      return !this.placeholder ? 'MM' : this.placeholder;
     }
 
     return o$2(this.placeholder);
@@ -4068,7 +4129,10 @@ class AuroInput extends BaseInput {
       'month-day-year',
       'month-year',
       'year-month-day',
-      'month-fullYear'
+      'month-fullYear',
+      'month',
+      'year',
+      'fullYear'
     ];
 
     if (this.icon || typesWithIcons.includes(this.type)) {
@@ -4078,6 +4142,24 @@ class AuroInput extends BaseInput {
     return false;
   }
 
+  isDateType() {
+    let isDateType = false;
+
+    switch (this.type) {
+      case 'month-day-year':
+      case 'month-year':
+      case 'year-month-day':
+      case 'month-fullYear':
+      case 'month':
+      case 'year':
+      case 'fullYear':
+        isDateType = true;
+        break;
+    }
+
+    return isDateType;
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     // is-disabled class - THIS IS ONLY HERE TO MAKE A TEST PASS AS FAR AS I CAN TELL
@@ -4107,7 +4189,7 @@ class AuroInput extends BaseInput {
             `) : undefined
             }
 
-            ${this.type === 'month-day-year' || this.type === 'month-year' || this.type === 'year-month-day' || this.type === 'month-fullYear'
+            ${this.isDateType()
             ? u$3`
               <${this.iconTag}
                 class="accentIcon"

diff --git a/components/input/demo/index.min.js b/components/input/demo/index.min.js
@@ -109,7 +109,10 @@ const stringsES = {
   'dateMMDDYYYY': 'Ingrese una fecha completa en el formato MM/DD/AAAA',
   'dateMMYY': 'Ingrese una fecha completa en el formato MM/AA',
   'dateMMYYYY': 'Ingrese una fecha completa en el formato MM/AAAA',
-  'dateYYYYMMDD': 'Ingrese una fecha completa en el formato AAAA/MM/DD'
+  'dateYYYYMMDD': 'Ingrese una fecha completa en el formato AAAA/MM/DD',
+  'dateYY': 'Ingrese una fecha completa en el formato AA',
+  'dateYYYY': 'Ingrese una fecha completa en el formato AAAA',
+  'dateMM': 'Ingrese una fecha completa en el formato MM',
 };
 
 const stringsEN = {
@@ -121,7 +124,10 @@ const stringsEN = {
   'dateMMDDYYYY': 'Please enter a complete date in the format MM/DD/YYYY',
   'dateMMYY': 'Please enter a complete date in the format MM/YY',
   'dateMMYYYY': 'Please enter a complete date in the format MM/YYYY',
-  'dateYYYYMMDD': 'Please enter a complete date in the format YYYY/MM/DD'
+  'dateYYYYMMDD': 'Please enter a complete date in the format YYYY/MM/DD',
+  'dateYYY': 'Please enter a complete date in the format YY',
+  'dateYYYYY': 'Please enter a complete date in the format YYYY',
+  'dateMM': 'Please enter a complete date in the format MM'
 };
 
 /**
@@ -2153,7 +2159,10 @@ class BaseInput extends r {
       "month-day-year",
       "year-month-day",
       "month-year",
-      "month-fullYear"
+      "month-fullYear",
+      "month",
+      "year",
+      "fullYear"
     ];
 
     this.autoFormattingTypes = [
@@ -2346,6 +2355,36 @@ class BaseInput extends r {
           this.inputMode = 'numeric';
 
           break;
+
+        case 'fullYear':
+          config = {
+            date: true,
+            datePattern: ['Y']
+          };
+
+          this.inputMode = 'numeric';
+
+          break;
+
+        case 'year':
+          config = {
+            date: true,
+            datePattern: ['y']
+          };
+
+          this.inputMode = 'numeric';
+
+          break;
+
+        case 'month':
+          config = {
+            date: true,
+            datePattern: ['m']
+          };
+
+          this.inputMode = 'numeric';
+
+          break;
           // Do nothing
       }
 
@@ -2392,6 +2431,12 @@ class BaseInput extends r {
         this.setCustomValidityForType = i18n(this.lang, 'dateMMYYYY');
       } else if (this.type === 'year-month-day') {
         this.setCustomValidityForType = i18n(this.lang, 'dateYYYYMMDD');
+      } else if (this.type === 'year') {
+        this.setCustomValidityForType = i18n(this.lang, 'dateYY');
+      } else if (this.type === 'fullYear') {
+        this.setCustomValidityForType = i18n(this.lang, 'dateYYYY');
+      } else if (this.type === 'month') {
+        this.setCustomValidityForType = i18n(this.lang, 'dateMM');
       }
     }
 
@@ -2716,6 +2761,10 @@ class BaseInput extends r {
       this.dateStrLength = 5;
     } else if (this.type === 'month-fullYear') {
       this.dateStrLength = 7;
+    } else if (this.type === 'month' || this.type === 'year') {
+      this.dateStrLength = 2;
+    } else if (this.type === 'fullYear') {
+      this.dateStrLength = 4;
     }
   }
 
@@ -2754,6 +2803,12 @@ class BaseInput extends r {
       this.helpText = i18n(this.lang, 'dateMMYYYY');
     } else if (type === 'year-month-day') {
       this.helpText = i18n(this.lang, 'dateYYYYMMDD');
+    } else if (type === 'month') {
+      this.helpText = i18n(this.lang, 'dateMM');
+    } else if (type === 'year') {
+      this.helpText = i18n(this.lang, 'dateYY');
+    } else if (type === 'fullYear') {
+      this.helpText = i18n(this.lang, 'dateYYYY');
     } else {
       this.helpText = '';
     }
@@ -2785,6 +2840,12 @@ class BaseInput extends r {
       return !this.placeholder ? 'MM/YYYY' : this.placeholder;
     } else if (this.type === 'year-month-day') {
       return !this.placeholder ? 'YYYY/MM/DD' : this.placeholder;
+    } else if (this.type === 'year') {
+      return !this.placeholder ? 'YY' : this.placeholder;
+    } else if (this.type === 'fullYear') {
+      return !this.placeholder ? 'YYYY' : this.placeholder;
+    } else if (this.type === 'month') {
+      return !this.placeholder ? 'MM' : this.placeholder;
     }
 
     return o$2(this.placeholder);
@@ -4014,7 +4075,10 @@ class AuroInput extends BaseInput {
       'month-day-year',
       'month-year',
       'year-month-day',
-      'month-fullYear'
+      'month-fullYear',
+      'month',
+      'year',
+      'fullYear'
     ];
 
     if (this.icon || typesWithIcons.includes(this.type)) {
@@ -4024,6 +4088,24 @@ class AuroInput extends BaseInput {
     return false;
   }
 
+  isDateType() {
+    let isDateType = false;
+
+    switch (this.type) {
+      case 'month-day-year':
+      case 'month-year':
+      case 'year-month-day':
+      case 'month-fullYear':
+      case 'month':
+      case 'year':
+      case 'fullYear':
+        isDateType = true;
+        break;
+    }
+
+    return isDateType;
+  }
+
   // function that renders the HTML and CSS into  the scope of the component
   render() {
     // is-disabled class - THIS IS ONLY HERE TO MAKE A TEST PASS AS FAR AS I CAN TELL
@@ -4053,7 +4135,7 @@ class AuroInput extends BaseInput {
             `) : undefined
             }
 
-            ${this.type === 'month-day-year' || this.type === 'month-year' || this.type === 'year-month-day' || this.type === 'month-fullYear'
+            ${this.isDateType()
             ? u$3`
               <${this.iconTag}
                 class="accentIcon"