@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.3 → 0.0.0-pr624.31

package/components/input/demo/readme.md

@@ -20,7 +20,7 @@ The following sections are editable by making changes to the following files:
 # Input
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
 <!-- The below content is automatically added from ./docs/partials/description.md -->
-Use the `<auro-input>` custom element to create basic single-line text fields. Supports type `text`, `password`, and `email` with validation, required input, error states and a secondary `bordered` theme. Use the slots `label` and `helptext` for additional content support.
+Use the `<auro-input>` custom element to create basic single-line text fields. Supports type `text`, `password`, and `email` with validation, required input, error states and a secondary `bordered` theme. Use the slots `label` and `helpText` for additional content support.
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
 <!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->

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

@@ -1,4 +1,178 @@
 export class AuroInput extends BaseInput {
+    static get properties(): {
+        /**
+         * @type {boolean}
+         */
+        hideInputVisually: boolean;
+        a11yRole: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        a11yExpanded: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        a11yControls: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        activeLabel: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        autocapitalize: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        autocomplete: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        autocorrect: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        error: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        errorMessage: {
+            type: StringConstructor;
+        };
+        format: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        icon: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        inputmode: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        lang: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        max: {
+            type: StringConstructor;
+        };
+        maxLength: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+        min: {
+            type: StringConstructor;
+        };
+        minLength: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+        name: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        nested: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        noValidate: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        onDark: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        pattern: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        placeholder: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        readonly: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        required: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        showPassword: {
+            state: boolean;
+        };
+        setCustomValidity: {
+            type: StringConstructor;
+        };
+        setCustomValidityBadInput: {
+            type: StringConstructor;
+        };
+        setCustomValidityCustomError: {
+            type: StringConstructor;
+        };
+        setCustomValidityForType: {
+            type: StringConstructor;
+        };
+        setCustomValidityRangeOverflow: {
+            type: StringConstructor;
+        };
+        setCustomValidityRangeUnderflow: {
+            type: StringConstructor;
+        };
+        setCustomValidityTooLong: {
+            type: StringConstructor;
+        };
+        setCustomValidityTooShort: {
+            type: StringConstructor;
+        };
+        setCustomValidityValueMissing: {
+            type: StringConstructor;
+        };
+        simple: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        customValidityTypeEmail: {
+            type: StringConstructor;
+        };
+        spellcheck: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        type: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        validateOnInput: {
+            type: BooleanConstructor;
+        };
+        validity: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        touched: boolean;
+        inputId: {
+            type: StringConstructor;
+            reflect: boolean;
+            attribute: boolean;
+        };
+        layout: {
+            type: StringConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+    };
     static get styles(): import("lit").CSSResult[];
     /**
      * This will register this element with the browser.
@@ -34,25 +208,33 @@ export class AuroInput extends BaseInput {
     /**
      * Returns classmap configuration for html5 inputs in all layouts.
      * @private
-     * @returns {object} - Returns classmap configuration for html5 inputs in all layouts.
+     * @returns {object} - Returns classmap.
      */
     private get commonInputClasses();
     /**
-     * Returns classmap configuration for html5 inputs in all layouts.
+     * Returns classmap configuration for html5 inputs in each layout.
      * @private
-     * @return {object} - Returns classmap configuration for "classic" html5 inputs.
+     * @returns {object} - Returns classmap.
      */
     private get legacyInputClasses();
-    get commonWrapperClasses(): {
-        wrapper: boolean;
-        withValue: boolean;
-        hasFocus: boolean;
-    };
-    get helpTextClasses(): {
-        helpTextWrapper: boolean;
-        leftIndent: boolean;
-        rightIndent: boolean;
-    };
+    /**
+     * Returns classmap configuration for wrapper elements in each layout.
+     * @private
+     * @returns {object} - Returns classmap.
+     */
+    private get commonWrapperClasses();
+    /**
+     * Returns classmap configuration for accent elements in each layout.
+     * @private
+     * @returns {object} - Returns classmap.
+     */
+    private get commonAccentClasses();
+    /**
+     * Returns classmap configuration for helpText elements in each layout.
+     * @private
+     * @returns {object} - Returns classmap.
+     */
+    private get helpTextClasses();
     /**
      * Function to determine if the input is meant to render an icon visualizing the input type.
      * @private
@@ -103,9 +285,9 @@ export class AuroInput extends BaseInput {
      */
     private renderHtmlHelpText;
     /**
-     * Returns HTML for the default layout.
+     * Returns HTML for the classic layout.
      * @private
-     * @returns {import("lit").TemplateResult} - Returns HTML for the default layout.
+     * @returns {import("lit").TemplateResult} - Returns HTML for the classic layout.
      */
     private renderLayoutClassic;
     /**

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

@@ -4,14 +4,19 @@
  * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
  * @attr id
  *
- * @slot helptext - Sets the help text displayed below the input.
+ * @slot helpText - Sets the help text displayed below the input.
  * @slot label - Sets the label text for the input.
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
+ * @slot displayValue - Allows custom HTML content to display in place of the value when the input is not focused.
  *
  * @csspart wrapper - Use for customizing the style of the root element
  * @csspart label - Use for customizing the style of the label element
  * @csspart helpText - Use for customizing the style of the helpText element
+ * @csspart input - Use for customizing the style of the input element
  * @csspart accentIcon - Use for customizing the style of the accentIcon element (e.g. credit card icon, calendar icon)
  * @csspart iconContainer - Use for customizing the style of the iconContainer (e.g. X icon for clearing input value)
+ * @csspart accent-left - Use for customizing the style of the left accent element (e.g. padding, margin)
+ * @csspart accent-right - Use for customizing the style of the right accent element (e.g. padding, margin)
  * @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.
  */
@@ -22,7 +27,6 @@ export default class BaseInput extends AuroElement {
          */
         a11yRole: {
             type: StringConstructor;
-            attribute: boolean;
             reflect: boolean;
         };
         /**
@@ -30,7 +34,6 @@ export default class BaseInput extends AuroElement {
          */
         a11yExpanded: {
             type: BooleanConstructor;
-            attribute: boolean;
             reflect: boolean;
         };
         /**
@@ -38,7 +41,6 @@ export default class BaseInput extends AuroElement {
          */
         a11yControls: {
             type: StringConstructor;
-            attribute: boolean;
             reflect: boolean;
         };
         /**
@@ -53,6 +55,7 @@ export default class BaseInput extends AuroElement {
          */
         autocapitalize: {
             type: StringConstructor;
+            reflect: boolean;
         };
         /**
          * An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported.
@@ -66,6 +69,7 @@ export default class BaseInput extends AuroElement {
          */
         autocorrect: {
             type: StringConstructor;
+            reflect: boolean;
         };
         /**
          * If set, disables the input.
@@ -104,7 +108,6 @@ export default class BaseInput extends AuroElement {
         /** Exposes inputmode attribute for input.  */
         inputmode: {
             type: StringConstructor;
-            attribute: boolean;
             reflect: boolean;
         };
         /**
@@ -112,6 +115,7 @@ export default class BaseInput extends AuroElement {
          */
         lang: {
             type: StringConstructor;
+            reflect: boolean;
         };
         /**
          * The maximum value allowed. This only applies for inputs with a type of `number` and all date formats.
@@ -124,6 +128,7 @@ export default class BaseInput extends AuroElement {
          */
         maxLength: {
             type: NumberConstructor;
+            reflect: boolean;
         };
         /**
          * The minimum value allowed. This only applies for inputs with a type of `number` and all date formats.
@@ -136,12 +141,22 @@ export default class BaseInput extends AuroElement {
          */
         minLength: {
             type: NumberConstructor;
+            reflect: boolean;
         };
         /**
          * Populates the `name` attribute on the input.
          */
         name: {
             type: StringConstructor;
+            reflect: boolean;
+        };
+        /**
+         * Sets styles for nested operation - removes borders, hides help + error text, and
+         * hides accents.
+         */
+        nested: {
+            type: BooleanConstructor;
+            reflect: boolean;
         };
         /**
          * If set, disables auto-validation on blur.
@@ -169,6 +184,7 @@ export default class BaseInput extends AuroElement {
          */
         placeholder: {
             type: StringConstructor;
+            reflect: boolean;
         };
         /**
          * Makes the input read-only, but can be set programmatically.
@@ -244,6 +260,13 @@ export default class BaseInput extends AuroElement {
         setCustomValidityValueMissing: {
             type: StringConstructor;
         };
+        /**
+         * Simple makes the input render without a border.
+         */
+        simple: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
         /**
          * Custom help text message for email type validity.
          */
@@ -255,6 +278,7 @@ export default class BaseInput extends AuroElement {
          */
         spellcheck: {
             type: StringConstructor;
+            reflect: boolean;
         };
         /**
          * Populates the `type` attribute on the input. Allowed values are `password`, `email`, `credit-card`, `date`, `tel` or `text`. If given value is not allowed or set, defaults to `text`.
@@ -268,6 +292,7 @@ export default class BaseInput extends AuroElement {
          */
         value: {
             type: StringConstructor;
+            reflect: boolean;
         };
         /**
          * Sets validation mode to re-eval with each input.
@@ -290,8 +315,8 @@ export default class BaseInput extends AuroElement {
          */
         touched: boolean;
         /**
+         * The id for input node.
          * @private
-         * id for input node
          */
         inputId: {
             type: StringConstructor;
@@ -415,10 +440,9 @@ export default class BaseInput extends AuroElement {
     private handleClick;
     /**
      * Function to set element focus.
-     * @private
      * @return {void}
      */
-    private focus;
+    focus(): void;
     /**
      * Handles event of clearing input content by clicking the X icon.
      * @private

package/components/input/dist/buttonVersion.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "9.3.0";
+declare const _default: "11.0.0";
 export default _default;

package/components/input/dist/iconVersion.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "8.0.1";
+declare const _default: "8.0.4";
 export default _default;