@aurodesignsystem-dev/auro-formkit 0.0.0-pr1379.0 → 0.0.0-pr1379.10

package/components/counter/demo/readme.md

@@ -1,161 +0,0 @@
-<!--
-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 -->
-
-## 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 -->
-
-## 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 -->
-
-### 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 -->
-
-## 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@latest/auro-counter/+esm"></script>
-```
-<!-- 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 -->
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
-<!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
-
-## Custom Component Registration for Version Management
-
-There are two key parts to every Auro component: the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element definition. The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.
-
-When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you.
-
-However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), you can manually register the class under a custom element name to avoid conflicts.
-
-You can do this by importing only the component class and using the `register(name)` method with a unique name:
-
-```js
-// Import the class only
-import { AuroCounter, AuroCounterGroup } from '@aurodesignsystem/auro-formkit/auro-counter/class';
-
-// Register with a custom name if desired
-AuroCounter.register('custom-counter');
-AuroCounterGroup.register('custom-counter-group');
-```
-
-This will create a new custom element `<custom-counter>` and `<custom-counter-group>` that behaves exactly like `<auro-counter>` and `<auro-counter-group>`, allowing both to coexist on the same page without interfering with each other.
-
-<div class="exampleWrapper exampleWrapper--flex">
-  <custom-counter-group>
-    <div slot="bib.fullscreen.headline">Passengers</div>
-    <div slot="label">Passengers</div>
-    <custom-counter>
-      Adults
-      <span slot="description">18 years or older</span>
-    </custom-counter>
-    <custom-counter>
-      Children
-      <span slot="description">2-17 years</span>
-    </custom-counter>
-  </custom-counter-group>
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-
-```html
-  <custom-counter-group>
-    <div slot="bib.fullscreen.headline">Passengers</div>
-    <div slot="label">Passengers</div>
-    <custom-counter>
-      Adults
-      <span slot="description">18 years or older</span>
-    </custom-counter>
-    <custom-counter>
-      Children
-      <span slot="description">2-17 years</span>
-    </custom-counter>
-  </custom-counter-group>
-
-```html
-  <custom-checkbox-group>
-    <span slot="legend">Form label goes here</span>
-    <custom-checkbox value="value1" name="custom" id="checkbox-custom1">Custom checkbox option</custom-checkbox>
-    <custom-checkbox value="value2" name="custom" id="checkbox-custom2" checked>Custom checkbox option</custom-checkbox>
-    <custom-checkbox value="value3" name="custom" id="checkbox-custom3">Custom checkbox option</custom-checkbox>
-    <custom-checkbox value="value4" name="custom" id="checkbox-custom4">Custom checkbox option</custom-checkbox>
-  </custom-checkbox-group>
-```
-</auro-accordion>
-<!-- AURO-GENERATED-CONTENT:END -->

package/components/counter/dist/auro-counter-button.d.ts

@@ -1,14 +0,0 @@
-export class AuroCounterButton {
-    static get styles(): import("lit").CSSResult[];
-    /**
-     * This will register this element with the browser.
-     * @param {string} [name="auro-counter-button"] - The name of element that you want to register to.
-     *
-     * @example
-     * AuroCounterButton.register("custom-counter-button") // this will register this element to <custom-counter-button/>
-     *
-     */
-    static register(name?: string): void;
-    size: string;
-    shape: string;
-}

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

@@ -1,390 +0,0 @@
-/**
- * The `auro-counter-group` element provides a flexible interface for grouping multiple counters, supporting validation, custom validity messages, and disabled states based on the group's value.
- * @customElement auro-counter-group
- *
- * @slot default - Slot for counter elements.
- * @slot ariaLabel.bib.close - Sets aria-label on close button in fullscreen bib
- * @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 AuroElement {
-    static get styles(): import("lit").CSSResult[];
-    static get properties(): {
-        /**
-         * Defines whether the component will be on lighter or darker backgrounds.
-         * @type {'default' | 'inverse'}
-         * @default 'default'
-         */
-        appearance: "default" | "inverse";
-        /**
-         * If declared, bib's position will be automatically calculated where to appear.
-         * @default false
-         */
-        autoPlacement: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * The current error message to display when the component is invalid.
-         */
-        error: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        /**
-         * The current error message to display when the component is invalid.
-         * This is set by validation and is not available to consumers.
-         * @private
-         */
-        errorMessage: {
-            type: StringConstructor;
-            reflect: boolean;
-            attribute: boolean;
-        };
-        /**
-         * Defines the screen size breakpoint at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
-         *
-         * When expanded, the dropdown will automatically display in fullscreen mode
-         * if the screen size is equal to or smaller than the selected breakpoint.
-         * @type {'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'disabled'}
-         * @default 'sm'
-         */
-        fullscreenBreakpoint: "xs" | "sm" | "md" | "lg" | "xl" | "disabled";
-        /**
-         * If true, the counter group is displayed as a dropdown.
-         */
-        isDropdown: {
-            type: BooleanConstructor;
-        };
-        /**
-         * Determines the layout style of the counter group when it is a dropdown.
-         * @type {'classic' | 'snowflake'}
-         * @default 'classic'
-         */
-        layout: "classic" | "snowflake";
-        /**
-         * If declared, the dropdown will expand to the width of its parent container.
-         * Otherwise, the dropdown width will be determined by its content.
-         */
-        matchWidth: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * The maximum value allowed for the whole group of counters.
-         */
-        max: {
-            type: NumberConstructor;
-            reflect: boolean;
-        };
-        /**
-         * The minimum value allowed for the whole group of counters.
-         */
-        min: {
-            type: NumberConstructor;
-            reflect: boolean;
-        };
-        /**
-         * If declared, make bib.fullscreen.headline in HeadingDisplay.
-         * Otherwise, Heading 600.
-         */
-        largeFullscreenHeadline: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * If declared, the bib will NOT flip to an alternate position
-         * when there isn't enough space in the specified `placement`.
-         */
-        noFlip: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * If declared, the dropdown will shift its position to avoid being cut off by the viewport.
-         */
-        shift: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * Gap between the trigger element and bib.
-         * @default 0
-         */
-        offset: {
-            type: NumberConstructor;
-            reflect: boolean;
-        };
-        /**
-         * DEPRECATED - use `appearance` instead.
-         */
-        onDark: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * Position where the bib should appear relative to the trigger.
-         * @type {'top' | 'right' | 'bottom' | 'left' | 'bottom-start' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-end' | 'left-start' | 'left-end'}
-         * @default 'bottom-start'
-         */
-        placement: "top" | "right" | "bottom" | "left" | "bottom-start" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-end" | "left-start" | "left-end";
-        /**
-         * The total value of the counters.
-         */
-        total: {
-            type: NumberConstructor;
-        };
-        /**
-         * Reflects the validity state.
-         */
-        validity: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        /**
-         * The current individual values of the nested counters.
-         */
-        value: {
-            type: ObjectConstructor;
-        };
-        /**
-         * The current text in the valueText slot.
-         * @private
-         */
-        valueText: {
-            type: StringConstructor;
-            reflect: boolean;
-            attribute: boolean;
-        };
-    };
-    /**
-     * Registers the custom element with the browser.
-     * @param {string} [name="auro-counter-group"] - The name of the element that you want to register.
-     * @example
-     * AuroCounterGroup.register("custom-counter-group") // registers <custom-counter-group/>
-     */
-    static register(name?: string): void;
-    appearance: string;
-    max: any;
-    min: any;
-    onDark: boolean;
-    total: number;
-    validity: any;
-    value: {};
-    matchWidth: boolean;
-    isDropdown: boolean;
-    fullscreenBreakpoint: string;
-    largeFullscreenHeadline: boolean;
-    autoPlacement: boolean;
-    noFlip: boolean;
-    shift: boolean;
-    placement: string;
-    /**
-     * @private
-     */
-    private counters;
-    /**
-     * @private
-     */
-    private dropdown;
-    /**
-     * @private
-     */
-    private bibtemplate;
-    /**
-     * @private
-     */
-    private validation;
-    /**
-     * Updates the aggregate value based on the values of contained auro-counter components.
-     * This method queries for all `auro-counter` elements, sums their values, and updates the component's `value` property.
-     * Additionally, it iterates through each counter and calls `manageDisabled()` on it.
-     * @private
-     */
-    private updateValue;
-    /**
-     * Updates the validity of the counter group based on the validity of its counters.
-     * This method checks all counters within the group, determines if any are invalid, and updates the group's validity state and error message accordingly.
-     * If any counter is invalid, it generates a combined error message from all invalid counters.
-     * @returns {void}
-     * @private
-     */
-    private updateValidity;
-    /**
-     * Dynamically generated dropdown tag.
-     * @private
-     * @type {string}
-     */
-    private dropdownTag;
-    /**
-     * Dynamically generated bibtempalate tag.
-     * @private
-     * @type {string}
-     */
-    private bibtemplateTag;
-    /**
-     * Dynamically generated helpText tag.
-     * @private
-     * @type {string}
-     */
-    private helpTextTag;
-    /**
-     * @private
-     */
-    private iconTag;
-    /**
-     * 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.
-     * If the total value is at or below the minimum, the counter's decrement button is disabled; if at or above the maximum, the increment button is disabled.
-     *
-     * @param {HTMLElement} counter - The counter element to potentially disable.
-     * @private
-     */
-    private manageDisabled;
-    /**
-     * Attaches input event listeners to all auro-counter elements within the component.
-     * 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;
-    /**
-     * Renders help text error messages.
-     * @param {Array<string>} messages - The error messages to render.
-     * @returns {TemplateResult[]} - The rendered error messages rendered in a TemplateResult.
-     * @private
-     */
-    private renderHelpTextErrors;
-    /**
-     * Gets and returns an array of counters in an invalid state.
-     * @returns {Array<HTMLElement>} - Returns an array of invalid counters.
-     * @param {NodeList} counters - The NodeList of counter elements to check.
-     * @private
-     */
-    private getInvalidCounters;
-    /**
-     * Gets all valid error messages from errored counters.
-     * @param {NodeList} invalidCounters - The NodeList of counter elements to check.
-     * @returns {Array<string>} - Returns an array of error messages from invalid counters.
-     * @private
-     */
-    private getErrorMessages;
-    errorMessage: any;
-    /**
-     * Hides the dropdown bib if its open.
-     * @returns {void}
-     */
-    hideBib(): void;
-    /**
-     * Shows the dropdown bib if there are options to show.
-     * @returns {void}
-     */
-    showBib(): void;
-    /**
-     * 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;
-    /**
-     * This sets up a close event listener and moves any slotted `bib.fullscreen.headline` and `bib.fullscreen.footer` content into the bibtemplate.
-     * @private
-     */
-    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
-     * @param {*} value - The value to convert.
-     * @returns {number} The converted number or 0 if invalid.
-     */
-    private safeNumberConversion;
-    /**
-     * Updates the value text in the dropdown trigger based on the counters in the counter group.
-     * @private
-     */
-    private updateValueText;
-    valueText: any;
-    /**
-     * Validates value.
-     * @param {boolean} [force=false] - Whether to force validation.
-     */
-    validate(force?: boolean): void;
-    updated(changedProperties: any): void;
-    firstUpdated(): void;
-    /**
-     * Returns HTML for the help text and error message.
-     * @private
-     * @returns {html} - Returns HTML for the help text and error message.
-     */
-    private renderHelpText;
-    /**
-     * Returns HTML for the validation error icon.
-     * @private
-     * @returns {html} - Returns HTML for the validation error icon.
-     */
-    private renderValidationErrorIcon;
-    /**
-     * Render the dropdown structure for the counter group.
-     * @returns {TemplateResult} The dropdown template.
-     * @private
-     */
-    private renderCounterDropdown;
-    /**
-     * Render the dropdown trigger for the dropdown.
-     * @returns {TemplateResult} The dropdown trigger template.
-     * @private
-     */
-    private renderDropdownTrigger;
-    /**
-     * Render the dropdown bib template for the dropdown.
-     * @returns {TemplateResult} The bib template.
-     * @private
-     */
-    private renderBibTemplate;
-    /**
-     * Render the fullscreen bib slots for the dropdown.
-     * @returns {TemplateResult} The fullscreen slots template.
-     * @private
-     */
-    private renderFullscreenSlots;
-    /**
-     * Render the counter group container.
-     * @param {boolean} isInDropdown - Whether the counter group is inside a dropdown.
-     * @returns {TemplateResult} The counter group template.
-     * @private
-     */
-    private renderCounterGroup;
-    /**
-     * Render the classic layout.
-     * @returns {TemplateResult} The classic layout template.
-     * @private
-     */
-    private renderLayoutClassic;
-    shape: any;
-    size: any;
-    /**
-     * Render the snowflake layout.
-     * @returns {TemplateResult} The snowflake layout template.
-     * @private
-     */
-    private renderLayoutSnowflake;
-    /**
-     * Renders the component by layout type.
-     * @param {string} [ForcedLayout] - Optionally force a specific layout for rendering.
-     * @returns {TemplateResult} The layout template.
-     * @private
-     */
-    private renderLayout;
-}
-import { AuroElement } from "../../layoutElement/src/auroElement.js";

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

@@ -1,17 +0,0 @@
-/**
- * Wrapper element for auro-counter elements in an application to provide layout structure for multiple counters.
- *
- * @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";