npm - @aurodesignsystem/auro-formkit - Versions diffs - 2.0.0-beta.8 → 2.0.0 - Mend

@aurodesignsystem/auro-formkit 2.0.0-beta.8 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (968) hide show

package/components/input/demo/readme.html ADDED Viewed

@@ -0,0 +1,49 @@
+<!--
+  Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+  See LICENSE in the project root for license information.
+  HTML in this document is standardized and NOT to be edited.
+  All demo code should be added/edited in ./demo/index.md
+  With the exception of adding custom elements if needed for the demo.
+  ----------------------- DO NOT EDIT -----------------------------
+-->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Auro Web Component Generator | auro-input custom element</title>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
+    />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/tokens/CSSCustomProperties.css">
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
+  </head>
+  <body class="auro-markdown">
+    <main></main>
+    <script type="module">
+      import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
+      import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
+      fetch('./readme.md')
+        .then((response) => response.text())
+        .then((text) => {
+          const rawHtml = marked.parse(text);
+          document.querySelector('main').innerHTML = rawHtml;
+          Prism.highlightAll();
+        })
+    </script>
+    <script type="module">
+      import { initExamples } from "./index.min.js";
+      initExamples();
+    </script>
+  </body>
+</html>

package/components/input/demo/readme.md ADDED Viewed

@@ -0,0 +1,135 @@
+<!--
+The README.md file is a compiled document. No edits should be made directly to this file.
+README.md is created by running `npm run build:docs`.
+This file is generated based on a template fetched from
+`../../docs/templates/componentReadmeTemplate.md`
+and copied to `./componentDocs/README.md` each time the docs are compiled.
+The following sections are editable by making changes to the following files:
+| SECTION                | DESCRIPTION                                       | FILE LOCATION                       |
+|------------------------|---------------------------------------------------|-------------------------------------|
+| Description            | Description of the component                      | `./docs/partials/description.md`    |
+| Use Cases              | Examples for when to use this component           | `./docs/partials/useCases.md`       |
+| Additional Information | For use to add any component specific information | `./docs/partials/readmeAddlInfo.md` |
+| Component Example Code | HTML sample code of the components use            | `./apiExamples/basic.html`          |
+-->
+# 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.
+<!-- 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 -->
+<!-- AURO-GENERATED-CONTENT:END -->
+## Getting Started
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentInstall.md) -->
+<!-- The below content is automatically added from ../../docs/templates/componentInstall.md -->
+#### NPM Installation
+```shell
+$ npm i @aurodesignsystem/auro-formkit
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/gettingStarted.md) -->
+<!-- The below content is automatically added from ../../docs/templates/gettingStarted.md -->
+### Import Options
+#### Automatic Registration
+For automatic registration, simply import the component:
+```javascript
+// Registers <auro-input> automatically
+import '@aurodesignsystem/auro-formkit/auro-input';
+```
+#### Custom Registration
+To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our static `AuroInput.register('custom-input')` method on the component class and pass in a unique name.
+```javascript
+// Import the class only
+import { AuroInput } from '@aurodesignsystem/auro-formkit/auro-input/class';
+// Register with a custom name if desired
+AuroInput.register('custom-input');
+```
+#### TypeScript Module Resolution
+When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
+```json
+{
+    "compilerOptions": {
+        "moduleResolution": "bundler"
+    }
+}
+```
+This configuration enables proper module resolution for the component's TypeScript files.
+<!-- AURO-GENERATED-CONTENT:END -->
+**Reference component in HTML**
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
+<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
+```html
+<auro-input bordered></auro-input>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+### Design Token CSS Custom Property dependency
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/designTokens.md) -->
+The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
+<!-- AURO-GENERATED-CONTENT:END -->
+## Install from CDN
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/bundleInstallDescription.md) -->
+<!-- The below content is automatically added from ../../docs/templates/bundleInstallDescription.md -->
+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@2.0.0-beta.54/auro-input/+esm"></script>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+## UI development browser support
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/browserSupport.md) -->
+For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
+<!-- AURO-GENERATED-CONTENT:END -->
+## auro-input use cases
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
+<!-- The below content is automatically added from ./docs/partials/useCases.md -->
+The `<auro-input>` element should be used in situations where users may:
+* needs to enter information
+* be filling out a form
+<!-- AURO-GENERATED-CONTENT:END -->
+## Formkit development
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/partials/developmentDescription.md) -->
+<!-- The below content is automatically added from ../../docs/partials/developmentDescription.md -->
+### Filtering
+Running the `dev` command will open a `localhost` development server for all components in the monorepo at once.
+To only develop a single component, use the `--filter` flag:
+```shell
+npx turbo dev --filter=@aurodesignsystem/auro-input
+```
+<!-- AURO-GENERATED-CONTENT:END -->

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

@@ -16,14 +16,16 @@ export class AuroInput extends BaseInput {
      * @private
      */
     private buttonTag;
+    /**
+     * @private
+     */
+    private helpTextTag;
     /**
      * 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;
-    isDateType(): boolean;
     render(): import("lit-html").TemplateResult;
 }
 import BaseInput from './base-input.js';
-//# sourceMappingURL=auro-input.d.ts.map

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

@@ -25,7 +25,7 @@ export default class BaseInput extends LitElement {
             reflect: boolean;
         };
         /**
-         * 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. [off/none, on/sentences, words, characters].
          */
         autocapitalize: {
             type: StringConstructor;
@@ -49,6 +49,9 @@ export default class BaseInput extends LitElement {
         disabled: {
             type: BooleanConstructor;
         };
+        /**
+         * When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
+         */
         error: {
             type: StringConstructor;
             reflect: boolean;
@@ -59,6 +62,13 @@ export default class BaseInput extends LitElement {
         errorMessage: {
             type: StringConstructor;
         };
+        /**
+         * Specifies the input mask format.
+         */
+        format: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
         /**
          * 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.
          */
@@ -211,7 +221,7 @@ export default class BaseInput extends LitElement {
             type: StringConstructor;
         };
         /**
-         * 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`.
+         * 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`.
          */
         type: {
             type: StringConstructor;
@@ -254,6 +264,7 @@ export default class BaseInput extends LitElement {
      * @returns {void}
      */
     private privateDefaults;
+    util: AuroInputUtilities;
     validation: AuroFormValidation;
     inputIconName: any;
     showPassword: any;
@@ -261,19 +272,38 @@ export default class BaseInput extends LitElement {
     hasValue: boolean;
     label: string;
     allowedInputTypes: string[];
-    dateInputTypes: string[];
-    autoFormattingTypes: string[];
     /**
      * Credit Card is not included as this caused cursor placement issues.
      * The Safari issue.
      */
     setSelectionInputTypes: string[];
+    dateFormatMap: {
+        'mm/dd/yyyy': string;
+        'dd/mm/yyyy': string;
+        'yyyy/mm/dd': string;
+        'yyyy/dd/mm': string;
+        'mm/yy': string;
+        'yy/mm': string;
+        'mm/yyyy': string;
+        'yyyy/mm': string;
+        yy: string;
+        yyyy: string;
+        mm: string;
+        dd: string;
+        'dd/mm': string;
+        'mm/dd': string;
+    };
     uniqueId: string;
     firstUpdated(): void;
     inputElement: HTMLInputElement;
     labelElement: HTMLLabelElement;
+    format: any;
     ValidityMessageOverride: any;
-    cursorPosition: number;
+    /**
+     * @private
+     * @returns {void} Sets the default help text for the input.
+     */
+    private setCustomHelpTextMessage;
     /**
      * LitElement lifecycle method. Called after the DOM has been updated.
      * @param {Map<string, any>} changedProperties - Keys are the names of changed properties, values are the corresponding previous values.
@@ -283,14 +313,19 @@ export default class BaseInput extends LitElement {
     autocorrect: any;
     /**
      * @private
-     * @returns {void} Handles cursor position when input auto-formats.
+     * @returns {void} Notify validity state changed via event.
      */
-    private autoFormatHandling;
+    private notifyValidityChange;
     /**
+     * Sets up IMasks and logic based on auto-formatting requirements.
      * @private
-     * @returns {void} Notify validity state changed via event.
+     * @returns {void}
      */
-    private notifyValidityChange;
+    private configureAutoFormatting;
+    maskInstance: import("imask").InputMask<import("imask").FactoryArg>;
+    value: string;
+    formattedDate: any;
+    comparisonDate: any;
     /**
      * @private
      * @returns {string}
@@ -321,7 +356,6 @@ export default class BaseInput extends LitElement {
      * @return {void}
      */
     private handleClickClear;
-    value: string;
     /**
      * @private
      * @return {void}
@@ -347,10 +381,10 @@ export default class BaseInput extends LitElement {
      */
     private getActiveElement;
     /**
-     * Public method force validation of input.
-     * @returns {void}
+     * Validates value.
+     * @param {boolean} [force=false] - Whether to force validation.
      */
-    validate(): void;
+    validate(force?: boolean): void;
     /**
      * Resets component to initial state.
      * @returns {void}
@@ -362,7 +396,7 @@ export default class BaseInput extends LitElement {
      * @returns {void}
      */
     private configureDataForType;
-    dateStrLength: number;
+    lengthForType: any;
     /**
      * Validates against list of supported this.allowedInputTypes; return type=text if invalid request.
      * @private
@@ -373,7 +407,6 @@ export default class BaseInput extends LitElement {
     /**
      * Determines default help text string.
      * @private
-     * @param {string} type Value entered into component prop.
      * @returns {string} Evaluates pre-determined help text.
      */
     private getHelpText;
@@ -416,5 +449,5 @@ export default class BaseInput extends LitElement {
     private matchInputValueToCreditCard;
 }
 import { LitElement } from "lit";
+import { AuroInputUtilities } from "./utilities.js";
 import AuroFormValidation from '@auro-formkit/form-validation';
-//# sourceMappingURL=base-input.d.ts.map

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

@@ -1,3 +1,2 @@
 declare const _default: "8.2.2";
 export default _default;
-//# sourceMappingURL=buttonVersion.d.ts.map

package/components/input/dist/helptextVersion.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ declare const _default: "1.0.0";
2	+ export default _default;

package/components/input/dist/i18n.d.ts CHANGED Viewed

@@ -16,4 +16,3 @@ export function notifyOnLangChange(element: object): void;
  * @param {object} element - Pass in the scope of the element in use.
  */
 export function stopNotifyingOnLangChange(element: object): void;
-//# sourceMappingURL=i18n.d.ts.map

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

@@ -1,3 +1,2 @@
 declare const _default: "6.1.2";
 export default _default;
-//# sourceMappingURL=iconVersion.d.ts.map

package/components/input/dist/index.d.ts CHANGED Viewed

@@ -1,3 +1,2 @@
 export { AuroInput };
 import { AuroInput } from './auro-input.js';
-//# sourceMappingURL=index.d.ts.map