@aurodesignsystem-dev/auro-formkit 0.0.0-pr1422.0 → 0.0.0-pr1422.2

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

@@ -0,0 +1,390 @@
+/**
+ * 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

@@ -0,0 +1,17 @@
+/**
+ * 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";

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

@@ -0,0 +1,136 @@
+/**
+ * The `auro-counter` element provides a flexible counter interface with increment and decrement buttons, supporting optional sub-labels and disabled states.
+ * @customElement auro-counter
+ *
+ * @slot default - Main label content for the counter.
+ * @slot ariaLabel.minus - Accessible label for the decrement button.
+ * @slot ariaLabel.plus - Accessible label for the increment button.
+ * @slot helpText - Help text content for the counter.
+ * @slot description - Descriptive content for the counter.
+ */
+export class AuroCounter extends LitElement {
+    static get shadowRootOptions(): {
+        delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    /**
+     * Defines reactive properties for the component.
+     * @returns {Object} Property configuration.
+     */
+    static get properties(): any;
+    /**
+     * Registers the custom element with the browser.
+     * @param {string} [name="auro-counter"] - The name of the element that you want to register.
+     * @example
+     * AuroCounter.register("custom-counter") // registers <custom-counter/>
+     */
+    static register(name?: string): void;
+    static get styles(): import("lit").CSSResult[];
+    _initializeDefaults(): void;
+    appearance: string;
+    defaultSlot: any;
+    disabled: boolean;
+    disableMax: boolean;
+    disableMin: boolean;
+    max: number;
+    min: number;
+    onDark: boolean;
+    validity: any;
+    /**
+     * Sets the value of the counter. If the provided value is undefined, null, or cannot be converted to a number, the internal value will be set to undefined.
+     * @param {number|string|undefined|null} val - The value to set for the counter. Can be a number, a string that can be converted to a number, undefined, or null.
+     */
+    set value(val: number | string | undefined | null);
+    /**
+     * Gets the current value of the counter.
+     * @returns {number|undefined} The current value of the counter, or undefined if the value is not set or invalid.
+     */
+    get value(): number | undefined;
+    /**
+     * @private
+     */
+    private validation;
+    /**
+     * Dynamically generated icon tag for counter buttons.
+     * @private
+     * @type {string}
+     */
+    private iconTag;
+    /**
+     * @private
+     */
+    private helpTextTag;
+    /**
+     * @private
+     */
+    private runtimeUtils;
+    _value: number;
+    /**
+     * Increments the counter value by 1. If a value is provided, it increments by that amount.
+     * @method increment
+     * @param {number} [value] - The amount to increment by.
+     * @returns {void}
+     */
+    increment(value?: number): void;
+    /**
+     * Decrements the value of the counter by 1. If a value is provided, it decrements by that amount.
+     * @method decrement
+     * @param {number} [value] - The amount to decrement by.
+     * @returns {void}
+     */
+    decrement(value?: number): void;
+    /**
+     * Initializes the value of the counter.
+     * If the current value is undefined, it sets the value to the minimum value.
+     * @private
+     */
+    private initValue;
+    /**
+     * Determines if the increment button should be disabled based on the current value and extrema.
+     *
+     * @param {number} extrema - The extreme value (either min or max) to compare against the current value.
+     * @returns {boolean} - Returns true if the increment button should be disabled, otherwise false.
+     * @private
+     */
+    private isIncrementDisabled;
+    /**
+     * Validates value.
+     * @param {boolean} [force=false] - Whether to force validation.
+     */
+    validate(force?: boolean): void;
+    firstUpdated(): void;
+    /**
+     * Sets an attribute that matches the default tag name if the tag name is not the default.
+     * @param {string} tagName - The tag name to set as an attribute.
+     * @private
+     */
+    private setTagAttribute;
+    /**
+     * 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;
+    /**
+     * Sets ariaDescribedByElements on the spinbutton to the slotted description elements,
+     * bridging the shadow DOM boundary for screen readers.
+     * @param {Event} event - The slotchange event.
+     * @private
+     */
+    private onDescriptionSlotChange;
+    updated(changedProperties: any): void;
+    /**
+     * Returns HTML for the help text and error message.
+     * @private
+     * @returns {html} - Returns HTML for the help text and error message.
+     */
+    private renderHelpText;
+    render(): import("lit-html").TemplateResult;
+}
+import { LitElement } from "lit";

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

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

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

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

package/components/counter/dist/index.d.ts

@@ -0,0 +1,3 @@
+import { AuroCounter } from './auro-counter.js';
+import { AuroCounterGroup } from './auro-counter-group.js';
+export { AuroCounter, AuroCounterGroup };