@aurodesignsystem-dev/auro-formkit 0.0.0-pr1594.2 → 0.0.0-pr1595.1

package/components/input/dist/base-input.d.ts

@@ -2,6 +2,7 @@
  * Base class for auro-input component that provides core input functionality.
  * @event input - Event fires when the value of an `auro-input` has been changed.
  * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` value has changed.
+ * @event auroInput-validityChange - Notifies that the `validity` state of the input has changed.
  */
 export default class BaseInput extends AuroElement {
     static get shadowRootOptions(): {
@@ -13,11 +14,30 @@ export default class BaseInput extends AuroElement {
         slotAssignment?: SlotAssignmentMode;
     };
     static get properties(): {
+        /**
+         * Sets the layout variant of the input.
+         * @type {'classic' | 'emphasized' | 'emphasized-left' | 'emphasized-right' | 'snowflake' | 'snowflake-left' | 'snowflake-right'}
+         * @default 'classic'
+         */
+        layout: "classic" | "emphasized" | "emphasized-left" | "emphasized-right" | "snowflake" | "snowflake-left" | "snowflake-right";
+        /**
+         * Sets the shape of the input.
+         * @type {'box' | 'classic' | 'pill' | 'pill-left' | 'pill-right' | 'rounded' | 'snowflake'}
+         * @default 'classic'
+         */
+        shape: "box" | "classic" | "pill" | "pill-left" | "pill-right" | "rounded" | "snowflake";
+        /**
+         * Sets the size of the input.
+         * @type {'xs' | 'sm' | 'md' | 'lg' | 'xl'}
+         * @default 'lg'
+         */
+        size: "xs" | "sm" | "md" | "lg" | "xl";
         /**
          * The value for the role attribute.
          */
         a11yRole: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -25,6 +45,7 @@ export default class BaseInput extends AuroElement {
          */
         a11yControls: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -32,6 +53,7 @@ export default class BaseInput extends AuroElement {
          */
         a11yExpanded: {
             type: BooleanConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -40,6 +62,7 @@ export default class BaseInput extends AuroElement {
          */
         a11yActivedescendant: {
             type: StringConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -49,6 +72,7 @@ export default class BaseInput extends AuroElement {
          */
         activeLabel: {
             type: BooleanConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -58,12 +82,10 @@ export default class BaseInput extends AuroElement {
          */
         appearance: "default" | "inverse";
         /**
-         * 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].
+         * An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user.
+         * @type {'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'}
          */
-        autocapitalize: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
+        autocapitalize: "off" | "none" | "on" | "sentences" | "words" | "characters";
         /**
          * An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported.
          */
@@ -73,16 +95,15 @@ export default class BaseInput extends AuroElement {
         };
         /**
          * When set to `off`, stops iOS from auto-correcting words when typed into a text box.
+         * @type {'on' | 'off'}
          */
-        autocorrect: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
+        autocorrect: "on" | "off";
         /**
          * Custom help text message for email type validity.
          */
         customValidityTypeEmail: {
             type: StringConstructor;
+            attribute: string;
         };
         /**
          * If set, disables the input.
@@ -96,6 +117,7 @@ export default class BaseInput extends AuroElement {
          */
         dvInputOnly: {
             type: BooleanConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -110,6 +132,7 @@ export default class BaseInput extends AuroElement {
          */
         errorMessage: {
             type: StringConstructor;
+            attribute: string;
         };
         /**
          * Specifies the input mask format.
@@ -141,6 +164,7 @@ export default class BaseInput extends AuroElement {
          */
         hideLabelVisually: {
             type: BooleanConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -198,6 +222,7 @@ export default class BaseInput extends AuroElement {
          */
         maxLength: {
             type: NumberConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -211,6 +236,7 @@ export default class BaseInput extends AuroElement {
          */
         minLength: {
             type: NumberConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -233,6 +259,7 @@ export default class BaseInput extends AuroElement {
          */
         noValidate: {
             type: BooleanConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -240,6 +267,7 @@ export default class BaseInput extends AuroElement {
          */
         onDark: {
             type: BooleanConstructor;
+            attribute: string;
             reflect: boolean;
         };
         /**
@@ -275,66 +303,77 @@ export default class BaseInput extends AuroElement {
          */
         setCustomValidity: {
             type: StringConstructor;
+            attribute: string;
         };
         /**
          * Custom help text message to display when validity = `badInput`.
          */
         setCustomValidityBadInput: {
             type: StringConstructor;
+            attribute: string;
         };
         /**
          * Custom help text message to display when validity = `customError`.
          */
         setCustomValidityCustomError: {
             type: StringConstructor;
+            attribute: string;
         };
         /**
          * Custom help text message to display for the declared element `type` and type validity fails.
          */
         setCustomValidityForType: {
             type: StringConstructor;
+            attribute: string;
         };
         /**
          * Custom help text message to display when validity = `patternMismatch`.
          */
         setCustomValidityPatternMismatch: {
             type: StringConstructor;
+            attribute: string;
         };
         /**
          * Custom help text message to display when validity = `rangeOverflow`.
          */
         setCustomValidityRangeOverflow: {
             type: StringConstructor;
+            attribute: string;
         };
         /**
          * Custom help text message to display when validity = `rangeUnderflow`.
          */
         setCustomValidityRangeUnderflow: {
             type: StringConstructor;
+            attribute: string;
         };
         /**
          * Custom help text message to display when validity = `tooLong`.
          */
         setCustomValidityTooLong: {
             type: StringConstructor;
+            attribute: string;
         };
         /**
          * Custom help text message to display when validity = `tooShort`.
          */
         setCustomValidityTooShort: {
             type: StringConstructor;
+            attribute: string;
         };
         /**
          * Custom help text message to display when validity = `valueMissing`.
          */
         setCustomValidityValueMissing: {
             type: StringConstructor;
+            attribute: string;
         };
         /**
          * @ignore
          */
         showPassword: {
             state: boolean;
+            attribute: boolean;
         };
         /**
          * Simple makes the input render without a border.
@@ -344,12 +383,10 @@ export default class BaseInput extends AuroElement {
             reflect: boolean;
         };
         /**
-         * 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`.
+         * An enumerated attribute defines whether the element may be checked for spelling errors. When set to `false` the attribute `autocorrect` is set to `off` and `autocapitalize` is set to `none`.
+         * @type {'true' | 'false'}
          */
-        spellcheck: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
+        spellcheck: "true" | "false";
         /**
          * Indicates whether the input is in a dirty state (has been interacted with).
          * @private
@@ -370,6 +407,7 @@ export default class BaseInput extends AuroElement {
          */
         validateOnInput: {
             type: BooleanConstructor;
+            attribute: string;
         };
         /**
          * Specifies the `validityState` this element is in.
@@ -385,17 +423,19 @@ export default class BaseInput extends AuroElement {
         value: {
             type: StringConstructor;
         };
-        layout: {
-            type: StringConstructor;
-            attribute: string;
-            reflect: boolean;
-        };
     };
     activeLabel: boolean;
-    /** @private */
+    /**
+     * @private
+     * @type {string[]}
+     */
     private allowedInputTypes;
-    appearance: string;
-    /** @private */
+    /** @type {'default' | 'inverse'} */
+    appearance: "default" | "inverse";
+    /**
+     * @private
+     * @type {Record<string, string>}
+     */
     private dateFormatMap;
     disabled: boolean;
     /** @private */
@@ -420,12 +460,13 @@ export default class BaseInput extends AuroElement {
     onDark: boolean;
     required: boolean;
     setCustomValidityForType: string | undefined;
-    /** @private */
+    /**
+     * @private
+     * @type {string[]}
+     */
     private setSelectionInputTypes;
-    shape: string;
     /** @private */
     private showPassword;
-    size: string;
     touched: boolean;
     /** @private */
     private uniqueId;
@@ -436,6 +477,19 @@ export default class BaseInput extends AuroElement {
     /** @private */
     private validationCCLength;
     value: string | undefined;
+    /**
+     * Sets the default `layout`, `shape`, and `size` values.
+     *
+     * These are assigned in a helper method rather than the constructor body so
+     * the CEM analyzer keeps their `@type` string-literal unions (a literal
+     * assignment in the constructor would make the analyzer infer `string` and
+     * override the union — see AlaskaAirlines/discussions#653, gotcha 1).
+     * @private
+     * @returns {void}
+     */
+    private initializeArchitectureDefaults;
+    shape: string | undefined;
+    size: string | undefined;
     /**
      * Read-only Date object representation of `value` for full date formats.
      * @returns {Date|undefined}