@aurodesignsystem-dev/auro-formkit 0.0.0-pr622.1 → 0.0.0-pr624.1

package/components/input/demo/readme.md

@@ -82,7 +82,7 @@ This configuration enables proper module resolution for the component's TypeScri
 <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
 
 ```html
-<auro-input bordered></auro-input>
+<auro-input bordered shape="rounded" size="lg"></auro-input>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 
@@ -99,7 +99,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@0.0.0/auro-input/+esm"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-input/+esm"></script>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 

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

@@ -1,4 +1,5 @@
 export class AuroInput extends BaseInput {
+    static get styles(): import("lit").CSSResult[];
     /**
      * This will register this element with the browser.
      * @param {string} [name="auro-input"] - The name of element that you want to register to.
@@ -11,21 +12,114 @@ export class AuroInput extends BaseInput {
     /**
      * @private
      */
-    private iconTag;
+    private buttonTag;
     /**
      * @private
      */
-    private buttonTag;
+    private hasDisplayValueContent;
     /**
      * @private
      */
     private helpTextTag;
+    /**
+     * @private
+     */
+    private iconTag;
+    /**
+     * Returns classmap configuration for html5 input labels in all layouts.
+     * @private
+     * @returns {void}
+     */
+    private get commonLabelClasses();
+    /**
+     * Returns classmap configuration for html5 inputs in all layouts.
+     * @private
+     * @returns {void}
+     */
+    private get commonInputClasses();
+    get commonWrapperClasses(): {
+        wrapper: boolean;
+        withValue: boolean;
+        hasFocus: boolean;
+    };
+    get helpTextClasses(): {
+        helpTextWrapper: boolean;
+        leftIndent: boolean;
+        rightIndent: boolean;
+    };
     /**
      * Function to determine if the input is meant to render an icon visualizing the input type.
      * @private
      * @returns {boolean} - Returns true if the input type is meant to render an icon.
      */
     private hasTypeIcon;
-    render(): import("lit-html").TemplateResult;
+    /**
+     * Function to determine if there is any displayValue content to render.
+     * @private
+     * @returns {void}
+     */
+    private checkDisplayValueSlotChange;
+    /**
+     * Returns HTML for the validation error icon.
+     * @private
+     * @returns {html} - Returns HTML for the validation error icon.
+     */
+    private renderValidationErrorIconHtml;
+    /**
+     * Returns HTML for the HTML5 input element.
+     * @private
+     * @param {boolean} [hideInputWhenBlurred=false] - If true, the input will be visually hidden when not focused and has no value.
+     * @returns {html} - Returns HTML for the HTML5 input element.
+     */
+    private renderHtmlInput;
+    /**
+     * Returns HTML for the clear action button.
+     * @private
+     * @returns {html} - Returns HTML for the clear action button.
+     */
+    private renderHtmlActionClear;
+    /**
+     * Returns HTML for the show password button.
+     * @private
+     * @returns {html} - Returns HTML for the show password button.
+     */
+    private renderHtmlNotificationPassword;
+    /**
+     * Returns HTML for the input type icon.
+     * @private
+     * @returns {html} - Returns HTML for the input type icon.
+     */
+    private renderHtmlTypeIcon;
+    /**
+     * Returns HTML for the help text and error message.
+     * @private
+     * @returns {html} - Returns HTML for the help text and error message.
+     */
+    private renderHtmlHelpText;
+    /**
+     * Returns HTML for the default layout.
+     * @private
+     * @returns {import("lit").TemplateResult} - Returns HTML for the default layout.
+     */
+    private renderLayoutClassic;
+    /**
+     * Returns HTML for the emphasized layout. Does not support type="*".
+     * @private
+     * @returns {html} - Returns HTML for the emphasized layout.
+     */
+    private renderLayoutEmphasized;
+    /**
+     * Returns HTML for the emphasized layout. Does not support type="*".
+     * @private
+     * @returns {html} - Returns HTML for the emphasized layout.
+     */
+    private renderLayoutSnowflake;
+    /**
+     * Logic to determine the layout of the component.
+     * @private
+     * @param {string} [ForcedLayout] - Used to force a specific layout, pass in the layout name to use.
+     * @returns {void}
+     */
+    private renderLayout;
 }
 import BaseInput from './base-input.js';

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

@@ -1,9 +1,6 @@
 /**
  * Auro-input provides users a way to enter data into a text field.
  *
- * @attr {Boolean} bordered - Applies bordered UI variant.
- * @attr {Boolean} borderless - Applies borderless UI variant.
- *
  * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
  * @attr id
  *
@@ -18,7 +15,7 @@
  * @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.
  */
-export default class BaseInput extends LitElement {
+export default class BaseInput extends AuroElement {
     static get properties(): {
         /**
          * The value for the role attribute.
@@ -301,19 +298,25 @@ export default class BaseInput extends LitElement {
             reflect: boolean;
             attribute: boolean;
         };
+        layout: {
+            type: StringConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
     };
-    static get styles(): import("lit").CSSResult[];
+    activeLabel: boolean;
     icon: boolean;
     disabled: boolean;
-    required: boolean;
-    noValidate: boolean;
     max: any;
-    min: any;
     maxLength: any;
+    min: any;
     minLength: any;
+    noValidate: boolean;
     onDark: boolean;
-    activeLabel: boolean;
+    required: boolean;
     setCustomValidityForType: string;
+    shape: string;
+    size: string;
     /**
      * Internal Defaults.
      * @private
@@ -328,6 +331,7 @@ export default class BaseInput extends LitElement {
     validationCCLength: number;
     hasValue: boolean;
     label: string;
+    placeholderStr: any;
     allowedInputTypes: string[];
     /**
      * Credit Card is not included as this caused cursor placement issues.
@@ -352,9 +356,10 @@ export default class BaseInput extends LitElement {
     };
     uniqueId: string;
     firstUpdated(): void;
-    inputId: string;
+    wrapperElement: Element;
     inputElement: HTMLInputElement;
     labelElement: HTMLLabelElement;
+    inputId: string;
     format: any;
     ValidityMessageOverride: any;
     /**
@@ -389,12 +394,6 @@ export default class BaseInput extends LitElement {
      * @returns {string}
      */
     private definePattern;
-    /**
-     * Function to set element focus.
-     * @private
-     * @return {void}
-     */
-    private focus;
     /**
      * Required to convert SVG icons from data to HTML string.
      * @private
@@ -408,6 +407,18 @@ export default class BaseInput extends LitElement {
      * @returns {void}
      */
     private notifyValueChanged;
+    /**
+     * Handles clicking on the auro-input anywhere outside of the HTML5 input and still moving focus in.
+     * @private
+     * @return {void}
+     */
+    private handleClick;
+    /**
+     * Function to set element focus.
+     * @private
+     * @return {void}
+     */
+    private focus;
     /**
      * Handles event of clearing input content by clicking the X icon.
      * @private
@@ -425,6 +436,13 @@ export default class BaseInput extends LitElement {
      * @return {void}
      */
     private handleFocusin;
+    hasFocus: boolean;
+    /**
+     * Function to support @focusout event.
+     * @private
+     * @return {void}
+     */
+    private handleFocusout;
     /**
      * Function to support @blur event.
      * @private
@@ -478,7 +496,7 @@ export default class BaseInput extends LitElement {
     /**
      * Support placeholder text.
      * @private
-     * @returns {string}
+     * @returns {void}
      */
     private getPlaceholder;
     /**
@@ -507,6 +525,6 @@ export default class BaseInput extends LitElement {
      */
     private matchInputValueToCreditCard;
 }
-import { LitElement } from "lit";
+import { AuroElement } from '../../layoutElement/src/auroElement.js';
 import { AuroInputUtilities } from "./utilities.js";
 import AuroFormValidation from '@auro-formkit/form-validation';