@aurodesignsystem/auro-formkit 1.6.0-beta.9 → 2.0.0-beta.10

package/components/input/dist/styles/mixins-css.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=mixins-css.d.ts.map

package/components/input/dist/styles/mixins-css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mixins-css.d.ts","sourceRoot":"","sources":["../../src/styles/mixins-css.js"],"names":[],"mappings":""}

package/components/input/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@auro-formkit/auro-input",
+  "name": "@aurodesignsystem/auro-input",
   "version": "4.2.0",
   "description": "auro-input HTML custom element",
   "type": "module",
@@ -12,8 +12,8 @@
     "url": "https://github.com/AlaskaAirlines/auro-input"
   },
   "dependencies": {
-    "@aurodesignsystem/auro-button": "^8.1.3",
-    "@aurodesignsystem/auro-icon": "^6.0.2",
+    "@aurodesignsystem/auro-button": "^8.2.2",
+    "@aurodesignsystem/auro-icon": "^6.1.2",
     "chalk": "^5.3.0",
     "cleave.js": "^1.6.0",
     "lit": "^3.2.1"

package/components/input/src/auro-input.js

@@ -235,7 +235,6 @@ export class AuroInput extends BaseInput {
         <p class="inputElement-helpText" id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
           ${this.errorMessage}
         </p>`
-
       }
     `;
   }

package/components/input/src/base-input.js

@@ -21,45 +21,8 @@ import AuroFormValidation from '@auro-formkit/form-validation';
 /**
  * Auro-input provides users a way to enter data into a text field.
  *
- * @attr {Boolean} activeLabel - If set, the label will remain fixed in the active position.
- * @attr {String}  autocapitalize - An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user. [off/none, on/sentences, words, characters]
- * @attr {String}  autocomplete - An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported.
- * @attr {String}  autocorrect - When set to `off`, stops iOS from auto correcting words when typed into a text box.
  * @attr {Boolean} bordered - Applies bordered UI variant.
  * @attr {Boolean} borderless - Applies borderless UI variant.
- * @attr {Boolean} disabled - If set, disables the input.
- * @attr {String}  error - When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
- * @prop {String}  errorMessage - Contains the help text message for the current validity error.
- * @attr {String}  helpText - Deprecated, see `slot`.
- * @attr {Boolean} icon - If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format.
- * @attr {String}  id - Sets the unique ID of the element.
- * @attr {String}  isValid - (DEPRECATED - Please use validity) Can be accessed to determine if the input validity. Returns true when validity has not yet been checked or validity = 'valid', all other cases return false. Not intended to be set by the consumer.
- * @attr {String}  label - Deprecated, see `slot`.
- * @attr {String}  lang - defines the language of an element.
- * @attr {String}  max - The maximum value allowed. This only applies for inputs with a type of `numeric` and all date formats.
- * @attr {Number}  maxLength - The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher.
- * @attr {String}  min - The minimum value allowed. This only applies for inputs with a type of `numeric` and all date formats.
- * @attr {Number}  minLength - The minimum number of characters the user can enter into the text input. This must be an non-negative integer value smaller than or equal to the value specified by `maxlength`.
- * @attr {String}  name - Populates the `name` attribute on the input.
- * @attr {Boolean} noValidate - If set, disables auto-validation on blur.
- * @attr {Boolean} readonly - Makes the input read-only, but can be set programmatically.
- * @attr {Boolean} required - Populates the `required` attribute on the input. Used for client-side validation.
- * @attr {String}  pattern - Specifies a regular expression the form control's value should match.
- * @attr {String}  placeholder - Define custom placeholder text, only supported by date input formats.
- * @attr {String}  setCustomValidity - Sets a custom help text message to display for all validityStates.
- * @attr {String}  setCustomValidityCustomError - Custom help text message to display when validity = `customError`.
- * @attr {String}  setCustomValidityValueMissing - Custom help text message to display when validity = `valueMissing`.
- * @attr {String}  setCustomValidityBadInput - Custom help text message to display when validity = `badInput`.
- * @attr {String}  setCustomValidityTooShort - Custom help text message to display when validity = `tooShort`.
- * @attr {String}  setCustomValidityTooLong - Custom help text message to display when validity = `tooLong`.
- * @attr {String}  setCustomValidityForType - Custom help text message to display for the declared element `type` and type validity fails.
- * @attr {String}  setCustomValidityRangeOverflow - Custom help text message to display when validity = `rangeOverflow`.
- * @attr {String}  setCustomValidityRangeUnderflow - Custom help text message to display when validity = `rangeUnderflow`.
- * @attr {String}  spellcheck - An enumerated attribute defines whether the element may be checked for spelling errors. [true, false]. When set to `false` the attribute `autocorrect` is set to `off` and `autocapitalize` is set to `none`.
- * @attr {String}  type - Populates the `type` attribute on the input. Allowed values are `password`, `email`, `credit-card`, `month-day-year`, `month-year`, `year-month-day`  or `text`. If given value is not allowed or set, defaults to `text`.
- * @attr {Boolean} validateOnInput - Sets validation mode to re-eval with each input.
- * @attr {String}  validity - Specifies the `validityState` this element is in.
- * @attr {String}  value - Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input.
  *
  * @slot helptext - Sets the help text displayed below the input.
  * @slot label - Sets the label text for the input.
@@ -78,8 +41,6 @@ export default class BaseInput extends LitElement {
   constructor() {
     super();
 
-    this.isValid = false;
-
     this.icon = false;
     this.disabled = false;
     this.required = false;
@@ -88,9 +49,7 @@ export default class BaseInput extends LitElement {
     this.min = undefined;
     this.maxLength = undefined;
     this.minLength = undefined;
-    this.label = 'Input label is undefined';
     this.activeLabel = false;
-
     this.setCustomValidityForType = undefined;
   }
 
@@ -105,9 +64,11 @@ export default class BaseInput extends LitElement {
     this.showPassword = false;
     this.validationCCLength = undefined;
     this.hasValue = false;
+    this.label = 'Input label is undefined';
 
     this.allowedInputTypes = [
       "text",
+      "number",
       "email",
       "password",
       "credit-card",
@@ -153,77 +114,272 @@ export default class BaseInput extends LitElement {
       .substring(idSubstrStart, idSubstrEnd);
   }
 
-  // function to define props used within the scope of this component
+  // function to define props used within the scope of this componentstatic
   static get properties() {
     return {
-      id:                      { type: String },
-      label:                   { type: String },
-      name:                    { type: String },
-      type:                    { type: String,
-        reflect: true },
-      value:                   { type: String },
-      lang:                    { type: String },
-      pattern:                 {
-        type: String,
+
+      /**
+       * If set, the label will remain fixed in the active position.
+       */
+      activeLabel: {
+        type: Boolean,
         reflect: true
       },
-      icon:                    { type: Boolean },
-      disabled:                { type: Boolean },
-      required:                { type: Boolean },
-      noValidate:              { type: Boolean },
-      helpText:                { type: String },
-      spellcheck:              { type: String },
-      autocorrect:             { type: String },
-      autocapitalize:          { type: String },
-      autocomplete:            {
+
+      /**
+       * An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user. [off/none, on/sentences, words, characters]
+       */
+      autocapitalize: {
+        type: String
+      },
+
+      /**
+       * An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported.
+       */
+      autocomplete: {
         type: String,
         reflect: true
       },
-      placeholder:             { type: String },
-      activeLabel:             {
-        type: Boolean,
-        reflect: true
+
+      /**
+       * When set to `off`, stops iOS from auto-correcting words when typed into a text box.
+       */
+      autocorrect: {
+        type: String
       },
-      max:               { type: String },
-      min:               { type: String },
-      maxLength:               { type: Number },
-      minLength:               { type: Number },
 
       /**
-       * @ignore
+       * If set, disables the input.
        */
-      showPassword:            { state: true },
-      validateOnInput:         { type: Boolean },
-      readonly:                { type: Boolean },
-      error:                   {
+      disabled: {
+        type: Boolean
+      },
+
+      error: {
         type: String,
         reflect: true
       },
-      errorMessage:            { type: String },
-      isValid: {
+
+      /**
+       * Contains the help text message for the current validity error.
+       */
+      errorMessage: {
+        type: String
+      },
+
+      /**
+       * If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format.
+       */
+      icon: {
+        type: Boolean
+      },
+
+      /**
+       * Sets the unique ID of the element.
+       */
+      id: {
+        type: String
+      },
+
+      /**
+       * Defines the language of an element.
+       */
+      lang: {
+        type: String
+      },
+
+      /**
+       * The maximum value allowed. This only applies for inputs with a type of `number` and all date formats.
+       */
+      max: {
+        type: String
+      },
+
+      /**
+       * The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher.
+       */
+      maxLength: {
+        type: Number
+      },
+
+      /**
+       * The minimum value allowed. This only applies for inputs with a type of `number` and all date formats.
+       */
+      min: {
+        type: String
+      },
+
+      /**
+       * The minimum number of characters the user can enter into the text input. This must be a non-negative integer value smaller than or equal to the value specified by `maxlength`.
+       */
+      minLength: {
+        type: Number
+      },
+
+      /**
+       * Populates the `name` attribute on the input.
+       */
+      name: {
+        type: String
+      },
+
+      /**
+       * If set, disables auto-validation on blur.
+       */
+      noValidate: {
+        type: Boolean
+      },
+
+      /**
+       * Specifies a regular expression the form control's value should match.
+       */
+      pattern: {
         type: String,
         reflect: true
       },
-      validity:                {
+
+      /**
+       * Define custom placeholder text, only supported by date input formats.
+       */
+      placeholder: {
+        type: String
+      },
+
+      /**
+       * Makes the input read-only, but can be set programmatically.
+       */
+      readonly: {
+        type: Boolean
+      },
+
+      /**
+       * Populates the `required` attribute on the input. Used for client-side validation.
+       */
+      required: {
+        type: Boolean
+      },
+
+      /**
+       * @ignore
+       */
+      showPassword: {
+        state: true
+      },
+
+      /**
+       * Sets a custom help text message to display for all validityStates.
+       */
+      setCustomValidity: {
+        type: String
+      },
+
+      /**
+       * Custom help text message to display when validity = `badInput`.
+       */
+      setCustomValidityBadInput: {
+        type: String
+      },
+
+      /**
+       * Custom help text message to display when validity = `customError`.
+       */
+      setCustomValidityCustomError: {
+        type: String
+      },
+
+      /**
+       * Custom help text message to display for the declared element `type` and type validity fails.
+       */
+      setCustomValidityForType: {
+        type: String
+      },
+
+      /**
+       * Custom help text message to display when validity = `rangeOverflow`.
+       */
+      setCustomValidityRangeOverflow: {
+        type: String
+      },
+
+      /**
+       * Custom help text message to display when validity = `rangeUnderflow`.
+       */
+      setCustomValidityRangeUnderflow: {
+        type: String
+      },
+
+      /**
+       * Custom help text message to display when validity = `tooLong`.
+       */
+      setCustomValidityTooLong: {
+        type: String
+      },
+
+      /**
+       * Custom help text message to display when validity = `tooShort`.
+       */
+      setCustomValidityTooShort: {
+        type: String
+      },
+
+      /**
+       * Custom help text message to display when validity = `valueMissing`.
+       */
+      setCustomValidityValueMissing: {
+        type: String
+      },
+
+      /**
+       * Custom help text message for email type validity.
+       */
+      customValidityTypeEmail: {
+        type: String
+      },
+
+      /**
+       * An enumerated attribute defines whether the element may be checked for spelling errors. [true, false]. When set to `false` the attribute `autocorrect` is set to `off` and `autocapitalize` is set to `none`.
+       */
+      spellcheck: {
+        type: String
+      },
+
+      /**
+       * Populates the `type` attribute on the input. Allowed values are `password`, `email`, `credit-card`, `month-day-year`, `month-year`, `year-month-day` or `text`. If given value is not allowed or set, defaults to `text`.
+       */
+      type: {
         type: String,
         reflect: true
       },
-      setCustomValidity:               { type: String },
-      setCustomValidityCustomError:    { type: String },
-      setCustomValidityValueMissing:   { type: String },
-      setCustomValidityBadInput:       { type: String },
-      setCustomValidityTooShort:       { type: String },
-      setCustomValidityTooLong:        { type: String },
-      setCustomValidityRangeOverflow:  { type: String},
-      setCustomValidityRangeUnderflow: { type: String},
-      customValidityTypeEmail:         { type: String }
+
+      /**
+       * Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input.
+       */
+      value: {
+        type: String
+      },
+
+      /**
+       * Sets validation mode to re-eval with each input.
+       */
+      validateOnInput: {
+        type: Boolean
+      },
+
+      /**
+       * Specifies the `validityState` this element is in.
+       */
+      validity: {
+        type: String,
+        reflect: true
+      }
     };
   }
 
+
   static get styles() {
     return [
-      css`${styleCss}`,
       css`${colorCss}`,
+      css`${styleCss}`,
       css`${tokensCss}`
     ];
   }
@@ -608,7 +764,7 @@ export default class BaseInput extends LitElement {
    * @return {void}
    */
   handleInput() {
-    // Prevent non-numeric characters from being entered on credit card fields.
+    // Prevent non-number characters from being entered on credit card fields.
     if (this.type === 'credit-card') {
       this.inputElement.value = this.inputElement.value.replace(/[\D]/gu, '');
     }
@@ -694,6 +850,13 @@ export default class BaseInput extends LitElement {
     this.validation.validate(this);
   }
 
+  /**
+   * Resets component to initial state.
+   * @returns {void}
+   */
+  reset() {
+    this.validation.reset(this);
+  }
 
   /**
    * Sets configuration data used elsewhere based on the `type` attribute.
@@ -736,30 +899,28 @@ export default class BaseInput extends LitElement {
    */
   getHelpText(type) {
     if (type === 'password') {
-      this.helpText = i18n(this.lang, 'password');
+      return i18n(this.lang, 'password');
     } else if (type === 'email') {
-      this.helpText = i18n(this.lang, 'email');
+      return i18n(this.lang, 'email');
     } else if (type === 'credit-card') {
-      this.helpText = i18n(this.lang, 'creditcard');
+      return i18n(this.lang, 'creditcard');
     } else if (type === 'month-day-year') {
-      this.helpText = i18n(this.lang, 'dateMMDDYYYY');
+      return i18n(this.lang, 'dateMMDDYYYY');
     } else if (type === 'month-year') {
-      this.helpText = i18n(this.lang, 'dateMMYY');
+      return i18n(this.lang, 'dateMMYY');
     } else if (type === 'month-fullyear') {
-      this.helpText = i18n(this.lang, 'dateMMYYYY');
+      return i18n(this.lang, 'dateMMYYYY');
     } else if (type === 'year-month-day') {
-      this.helpText = i18n(this.lang, 'dateYYYYMMDD');
+      return i18n(this.lang, 'dateYYYYMMDD');
     } else if (type === 'month') {
-      this.helpText = i18n(this.lang, 'dateMM');
+      return i18n(this.lang, 'dateMM');
     } else if (type === 'year') {
-      this.helpText = i18n(this.lang, 'dateYY');
+      return i18n(this.lang, 'dateYY');
     } else if (type === 'fullYear') {
-      this.helpText = i18n(this.lang, 'dateYYYY');
-    } else {
-      this.helpText = '';
+      return i18n(this.lang, 'dateYYYY');
     }
 
-    return this.helpText;
+    return '';
   }
 
   /**
@@ -841,7 +1002,7 @@ export default class BaseInput extends LitElement {
     this.maxLength = card.formatLength;
     this.minLength = card.formatMinLength;
 
-    this.setCustomValidity = card.setCustomValidity;
+    this.errorMessage = card.errorMessage;
 
     if (this.icon) {
       this.inputIconName = card.cardIcon;
@@ -861,63 +1022,63 @@ export default class BaseInput extends LitElement {
         name: 'Airlines',
         regex: /^(?<num>1|2)\d{0}/u,
         formatMinLength: 17,
-        setCustomValidity: CreditCardValidationMessage,
+        errorMessage: CreditCardValidationMessage,
         cardIcon: 'credit-card'
       },
       {
         name: 'Commercial',
         regex: /^(?<num>2)\d{0}/u,
         formatMinLength: 8,
-        setCustomValidity: CreditCardValidationMessage,
+        errorMessage: CreditCardValidationMessage,
         cardIcon: 'credit-card'
       },
       {
         name: 'Alaska Commercial',
         regex: /^(?<num>27)\d{0}/u,
         formatMinLength: 8,
-        setCustomValidity: CreditCardValidationMessage,
+        errorMessage: CreditCardValidationMessage,
         cardIcon: 'cc-alaska'
       },
       {
         name: 'American Express',
         regex: /^(?<num>34|37)\d{0}/u,
         formatLength: 17,
-        setCustomValidity: CreditCardValidationMessage,
+        errorMessage: CreditCardValidationMessage,
         cardIcon: 'cc-amex'
       },
       {
         name: 'Diners club',
         regex: /^(?<num>36|38)\d{0}/u,
         formatLength: 16,
-        setCustomValidity: CreditCardValidationMessage,
+        errorMessage: CreditCardValidationMessage,
         cardIcon: 'credit-card'
       },
       {
         name: 'Visa',
         regex: /^(?<num>4)\d{0}/u,
         formatLength: 19,
-        setCustomValidity: CreditCardValidationMessage,
+        errorMessage: CreditCardValidationMessage,
         cardIcon: 'cc-visa'
       },
       {
         name: 'Alaska Airlines Visa',
         regex: /^(?<num>4147\s34|4888\s93|4800\s11|4313\s51|4313\s07)\d{0}/u,
         formatLength: 19,
-        setCustomValidity: CreditCardValidationMessage,
+        errorMessage: CreditCardValidationMessage,
         cardIcon: 'cc-alaska'
       },
       {
         name: 'Master Card',
         regex: /^(?<num>5)\d{0}/u,
         formatLength: 19,
-        setCustomValidity: CreditCardValidationMessage,
+        errorMessage: CreditCardValidationMessage,
         cardIcon: 'cc-mastercard'
       },
       {
         name: 'Discover Card',
         regex: /^(?<num>6)\d{0}/u,
         formatLength: 19,
-        setCustomValidity: CreditCardValidationMessage,
+        errorMessage: CreditCardValidationMessage,
         cardIcon: 'cc-discover'
       }
     ];
@@ -925,7 +1086,7 @@ export default class BaseInput extends LitElement {
     let type = {
       name: 'Default Card',
       formatLength: 19,
-      setCustomValidity: CreditCardValidationMessage,
+      errorMessage: CreditCardValidationMessage,
       cardIcon: 'credit-card'
     };
 

package/components/input/src/buttonVersion.js

@@ -1 +1 @@
-export default '8.2.0';
+export default '8.2.2';

package/components/input/src/iconVersion.js

@@ -1 +1 @@
-export default '6.1.1';
+export default '6.1.2';

package/components/input/src/styles/borders.scss

@@ -3,6 +3,8 @@
 @import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
 @import '@aurodesignsystem/webcorestylesheets/src/breakpoints';
 
+@import 'mixins';
+
 input {
   border: unset;
 }
@@ -26,30 +28,12 @@ input {
   }
 }
 
-// Handle highlighting the border during focus and invalid stat
-
-@mixin border-highlight {
-  &:before {
-    position: absolute;
-    display: block;
-
-    /* stylelint-disable declaration-block-no-redundant-longhand-properties */
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
-    /* stylelint-enable declaration-block-no-redundant-longhand-properties */
-
-    content: '';
-    inset: 0;
-    pointer-events: none;
-  }
-}
-
 // FOCUS STATE
 
 :host(:not([borderless])) {
   .wrapper {
     &:focus-within {
-      @include border-highlight;
+      @include border-highlight-style;
     }
   }
 }

package/components/input/src/styles/color.css

@@ -1,5 +1,4 @@
-/* stylelint-disable */
-/* stylelint-disable no-descending-specificity */
+/* stylelint-disable no-descending-specificity, selector-class-pattern */
 .wrapper {
   border-color: transparent;
 }

package/components/input/src/styles/color.scss

@@ -5,16 +5,9 @@
 // Support for fallback values
 @import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
 
-/* stylelint-disable */
+@import 'mixins';
 
-/* stylelint-disable no-descending-specificity */
-
-// Handle highlighting the border during focus and invalid state
-@mixin border-highlight {
-  &:before {
-    border-bottom-color: transparent;
-  }
-}
+/* stylelint-disable no-descending-specificity, selector-class-pattern */
 
 .wrapper {
   border-color: transparent;
@@ -72,7 +65,7 @@ label {
     &:focus-within {
       --ds-auro-input-border-color: var(--ds-color-border-ui-focus-default, #{$ds-color-border-ui-focus-default});
 
-      @include border-highlight;
+      @include border-highlight-color;
     }
   }
 }

package/components/input/src/styles/input-css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`input{position:relative;overflow:hidden;min-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));max-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));flex:1;padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);margin:0;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-size-200, 1rem);outline:none;text-overflow:ellipsis;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:nowrap}input::-ms-reveal,input::-ms-clear{display:none}input:disabled{background:none;pointer-events:none}`;
+export default css`input{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);position:relative;overflow:hidden;min-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));max-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));flex:1;padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);margin:0;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-size-200, 1rem);outline:none;text-overflow:ellipsis;white-space:nowrap}input::-ms-reveal,input::-ms-clear{display:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}input[type=number]{-moz-appearance:textfield;appearance:textfield}input:disabled{background:none;pointer-events:none}:host([bordered]) input{padding:var(--ds-size-400, 2rem) 0 var(--ds-size-100, 0.5rem)}`;