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

@aurodesignsystem/auro-formkit 2.0.0-beta.9 → 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 (1005) hide show

package/components/counter/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-counter 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/counter/demo/readme.md ADDED Viewed

@@ -0,0 +1,146 @@
+<!--
+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`          |
+-->
+# Counter
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
+<!-- The below content is automatically added from ./docs/partials/description.md -->
+The `auro-counter` component is a ui element that enables a way to increment or decrement a single digit value. Common use case is inside the `auro-counter-group` to facilitate a collection of counters to add passenger types to a flight.
+<!-- 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 This file is to be used for any additional content that should be included in the README.md which is specific to this component. -->
+<!-- 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-counter> automatically
+import '@aurodesignsystem/auro-formkit/auro-counter';
+```
+#### Custom Registration
+To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our static `AuroCounter.register('custom-counter')` method on the component class and pass in a unique name.
+```javascript
+// Import the class only
+import { AuroCounter } from '@aurodesignsystem/auro-formkit/auro-counter/class';
+// Register with a custom name if desired
+AuroCounter.register('custom-counter');
+```
+#### 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-counter-group>
+  <auro-counter>
+    Short label
+  </auro-counter>
+  <auro-counter>
+    Another short label
+  </auro-counter>
+  <auro-counter>
+    This is an example of the wrapping behavior for a long label
+  </auro-counter>
+</auro-counter-group>
+```
+<!-- 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-counter/+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-counter 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-counter` element should be used in situations where users may:
+* Need to input a numeric value within a defined range
+* Need a user-friendly interface for quantity selection
+<!-- 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/counter/dist/auro-counter-button.d.ts CHANGED Viewed

@@ -10,4 +10,3 @@ export class AuroCounterButton {
      */
     static register(name?: string): void;
 }
-//# sourceMappingURL=auro-counter-button.d.ts.map

package/components/counter/dist/auro-counter-group.d.ts CHANGED Viewed

@@ -6,11 +6,22 @@
  *
  * @element auro-counter-group
  * @extends LitElement
- * @slot Default - Slot for counter elements.
+ * @slot default - Slot for counter elements.
+ * @slot bib.fullscreen.headline -  Defines the headline to display above menu-options. Only used when `isDropdown` is true. Required.
+ * @slot bib.fullscreen.footer -  Defines the footer to display at the bottom of fullscreen bib. Only used when `isDropdown` is true.
+ * @slot label - Dropdown label content. Only used when `isDropdown` is true.
+ * @slot valueText - Dropdown value text display. Only used when `isDropdown` is true.
+ * @slot helpText - Dropdown help text content. Only used when `isDropdown` is true.
  */
 export class AuroCounterGroup extends LitElement {
     static get styles(): import("lit").CSSResult[];
     static get properties(): {
+        /**
+         * Indicates if the counter group is displayed as a dropdown.
+         */
+        isDropdown: {
+            type: BooleanConstructor;
+        };
         /**
          * The maximum value allowed for the whole group of counters.
          */
@@ -33,11 +44,34 @@ export class AuroCounterGroup extends LitElement {
             reflect: boolean;
         };
         /**
-         * The current value.
+         * The total value of the counters.
          */
-        value: {
+        total: {
             type: NumberConstructor;
         };
+        /**
+         * The current individual values of the nested counters.
+         */
+        value: {
+            type: ObjectConstructor;
+        };
+        /**
+         * If declared, make bib.fullscreen.headline in HeadingDisplay.
+         * Otherwise, Heading 600
+         */
+        largeFullscreenHeadline: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        /**
+         * Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile.
+         * When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
+         * @default sm
+         */
+        fullscreenBreakpoint: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
     };
     /**
      * Registers the custom element with the browser.
@@ -46,14 +80,48 @@ export class AuroCounterGroup extends LitElement {
      * AuroCounterGroup.register("custom-counter-group") // registers <custom-counter-group/>
      */
     static register(name?: string): void;
+    isDropdown: boolean;
     max: any;
     min: any;
+    total: number;
     validity: any;
-    value: number;
+    value: {};
+    fullscreenBreakpoint: string;
+    /**
+     * @private
+     */
+    private counters;
+    /**
+     * @private
+     */
+    private dropdown;
+    /**
+     * @private
+     */
+    private bibtemplate;
     /**
      * @private
      */
     private validation;
+    /**
+     * Dynamically generated dropdown tag.
+     * @private
+     * @type {string}
+     */
+    private dropdownTag;
+    /**
+     * Dynamically generated bibtempalate tag.
+     * @private
+     * @type {string}
+     */
+    private bibtemplateTag;
+    /**
+     * Traps keyboard tab interactions within dropdown when open.
+     * @private
+     * @param {KeyboardEvent} event - The keyboard event.
+     * @param {NodeList} counters - The list of counter elements.
+     */
+    private trapKeyboard;
     /**
      * Dynamically disables increment/decrement buttons on a counter based on group value.
      * This method checks the total aggregated value against the group's min and max properties.
@@ -65,11 +133,31 @@ export class AuroCounterGroup extends LitElement {
     private manageDisabled;
     /**
      * Attaches input event listeners to all auro-counter elements within the component.
-     * This method selects all `auro-counter` and `[auto-counter]` elements and adds an `input` event listener to each.
+     * This method selects all `auro-counter` and `[auro-counter]` elements and adds an `input` event listener to each.
      * The listener calls `this.updateValue()` whenever the value of a counter changes.
      * @private
      */
     private configureCounters;
+    /**
+     * Configures the dropdown counters by selecting all `auro-counter` elements,
+     * appending them to the `auro-counter-wrapper` element within the shadow DOM,
+     * and setting up keyboard navigation and input event listeners.
+     * @private
+     */
+    private configureDropdownCounters;
+    keydownHandler: (keydownEvent: any) => void;
+    /**
+     * @private
+     * This sets up a close event listener and moves any slotted `bib.fullscreen.headline` and `bib.fullscreen.footer` content into the bibtemplate.
+     */
+    private configureBibtemplate;
+    /**
+     * Watch for slot changes and recalculate the menuoptions.
+     * @private
+     * @param {Event} event - `slotchange` event.
+     * @returns {void}
+     */
+    private handleSlotChange;
     /**
      * Safely converts a value to a number, returning 0 if invalid.
      * @private
@@ -84,8 +172,12 @@ export class AuroCounterGroup extends LitElement {
      * @private
      */
     private updateValue;
+    /**
+     * Validates value.
+     * @param {boolean} [force=false] - Whether to force validation.
+     */
+    validate(force?: boolean): void;
     updated(changedProperties: any): void;
     render(): import("lit-html").TemplateResult;
 }
 import { LitElement } from "lit";
-//# sourceMappingURL=auro-counter-group.d.ts.map

package/components/counter/dist/auro-counter-wrapper.d.ts ADDED Viewed

@@ -0,0 +1,22 @@
+/**
+ * Auro Counter Wrapper is a group of counter components.
+ *
+ * This web component provides a flexible interface for grouping multiple counters, supporting
+ * validation, custom validity messages, and disabled states based on the group's value.
+ *
+ * @element auro-counter-group
+ * @extends LitElement
+ * @slot Default - Slot for counter elements.
+ */
+export class AuroCounterWrapper extends LitElement {
+    static get styles(): import("lit").CSSResult[];
+    /**
+     * Registers the custom element with the browser.
+     * @param {string} [name="auro-counter-wrapper"] - Custom element name to register.
+     * @example
+     * AuroCounterWrapper.register("custom-counter-wrapper") // registers <custom-counter-wrapper/>
+     */
+    static register(name?: string): void;
+    render(): import("lit-html").TemplateResult;
+}
+import { LitElement } from "lit";

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

@@ -6,7 +6,7 @@
  *
  * @element auro-counter
  * @extends LitElement
- * @slot Default - Main label content for the counter.
+ * @slot default - Main label content for the counter.
  * @slot description - Descriptive content for the counter.
  */
 export class AuroCounter extends LitElement {
@@ -23,6 +23,7 @@ export class AuroCounter extends LitElement {
      */
     static register(name?: string): void;
     static get styles(): import("lit").CSSResult[];
+    defaultSlot: any;
     disabled: boolean;
     disableMax: boolean;
     disableMin: boolean;
@@ -69,16 +70,27 @@ export class AuroCounter extends LitElement {
      */
     private isIncrementDisabled;
     /**
-     * Moves the focus to the first enabled button within the shadow DOM.
-     * This method searches for the first `auro-counter-button` element that is not disabled
-     * and sets the focus on it.
+     * Validates value.
+     * @param {boolean} [force=false] - Whether to force validation.
+     */
+    validate(force?: boolean): void;
+    /**
+     * Handles the keydown event for the counter component.
+     * @param {KeyboardEvent} event - The keyboard event object.
+     * @returns {void}
      * @private
      */
-    private jumpFocusToEnabled;
-    handleSlotChange(): void;
+    private handleKeyDown;
     firstUpdated(): void;
+    /**
+     * Handles the change event for the default slot.
+     * Updates the defaultSlot property with the trimmed text content of the first assigned node.
+     *
+     * @param {Event} event - The event object representing the slot change event.
+     * @private
+     */
+    private onDefaultSlotChange;
     updated(changedProperties: any): void;
     render(): import("lit-html").TemplateResult;
 }
 import { LitElement } from "lit";
-//# sourceMappingURL=auro-counter.d.ts.map

package/components/counter/dist/bibtemplateVersion.d.ts ADDED Viewed

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

package/components/{select/dist/formkit/auro-dropdownVersion.d.ts → counter/dist/dropdownVersion.d.ts} RENAMED Viewed

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

package/components/counter/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/counter/dist/index.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
 import { AuroCounter } from './auro-counter.js';
 import { AuroCounterGroup } from './auro-counter-group.js';
 export { AuroCounter, AuroCounterGroup };
-//# sourceMappingURL=index.d.ts.map