npm - @aurodesignsystem-dev/auro-formkit - Versions diffs - 0.0.0-pr624.8 → 0.0.0-pr624.80 - Mend

@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.8 → 0.0.0-pr624.80

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 (143) hide show

package/components/bibtemplate/dist/auro-bibtemplate.d.ts +12 -2
package/components/bibtemplate/dist/buttonVersion.d.ts +2 -0
package/components/bibtemplate/dist/iconVersion.d.ts +1 -1
package/components/bibtemplate/dist/index.js +1262 -81
package/components/bibtemplate/dist/registered.js +1262 -81
package/components/checkbox/README.md +1 -1
package/components/checkbox/demo/api.html +16 -10
package/components/checkbox/demo/api.md +49 -15
package/components/checkbox/demo/api.min.js +73 -43
package/components/checkbox/demo/index.html +16 -10
package/components/checkbox/demo/index.md +2 -2
package/components/checkbox/demo/index.min.js +73 -43
package/components/checkbox/demo/readme.html +16 -9
package/components/checkbox/demo/readme.md +1 -1
package/components/checkbox/dist/auro-checkbox-group.d.ts +1 -1
package/components/checkbox/dist/auro-checkbox.d.ts +3 -3
package/components/checkbox/dist/index.js +72 -42
package/components/checkbox/dist/registered.js +72 -42
package/components/combobox/demo/api.html +16 -10
package/components/combobox/demo/api.md +115 -8
package/components/combobox/demo/api.min.js +3102 -921
package/components/combobox/demo/index.html +16 -10
package/components/combobox/demo/index.md +6 -30
package/components/combobox/demo/index.min.js +3102 -921
package/components/combobox/demo/readme.html +16 -9
package/components/combobox/dist/auro-combobox.d.ts +44 -12
package/components/combobox/dist/index.js +3080 -995
package/components/combobox/dist/registered.js +3080 -995
package/components/counter/demo/api.html +17 -10
package/components/counter/demo/api.md +158 -21
package/components/counter/demo/api.min.js +3416 -728
package/components/counter/demo/index.html +17 -10
package/components/counter/demo/index.md +185 -34
package/components/counter/demo/index.min.js +3416 -728
package/components/counter/demo/readme.html +16 -9
package/components/counter/dist/auro-counter-button.d.ts +2 -0
package/components/counter/dist/auro-counter-group.d.ts +161 -11
package/components/counter/dist/auro-counter.d.ts +16 -0
package/components/counter/dist/helptextVersion.d.ts +2 -0
package/components/counter/dist/iconVersion.d.ts +1 -1
package/components/counter/dist/index.js +3416 -728
package/components/counter/dist/registered.js +3416 -728
package/components/datepicker/README.md +1 -1
package/components/datepicker/demo/api.html +16 -10
package/components/datepicker/demo/api.md +59 -28
package/components/datepicker/demo/api.min.js +8486 -4644
package/components/datepicker/demo/index.html +16 -10
package/components/datepicker/demo/index.md +75 -8
package/components/datepicker/demo/index.min.js +8486 -4644
package/components/datepicker/demo/readme.html +16 -9
package/components/datepicker/demo/readme.md +1 -1
package/components/datepicker/dist/auro-datepicker.d.ts +151 -12
package/components/datepicker/dist/buttonVersion.d.ts +1 -1
package/components/datepicker/dist/iconVersion.d.ts +2 -0
package/components/datepicker/dist/index.js +7033 -3191
package/components/datepicker/dist/popoverVersion.d.ts +1 -1
package/components/datepicker/dist/registered.js +7033 -3191
package/components/dropdown/demo/api.html +16 -10
package/components/dropdown/demo/api.md +82 -275
package/components/dropdown/demo/api.min.js +451 -260
package/components/dropdown/demo/index.html +16 -10
package/components/dropdown/demo/index.md +92 -362
package/components/dropdown/demo/index.min.js +451 -260
package/components/dropdown/demo/readme.html +16 -9
package/components/dropdown/dist/auro-dropdown.d.ts +43 -83
package/components/dropdown/dist/auro-dropdownBib.d.ts +14 -0
package/components/dropdown/dist/index.js +450 -259
package/components/dropdown/dist/registered.js +450 -259
package/components/form/demo/api.html +16 -9
package/components/form/demo/api.min.js +2 -2
package/components/form/demo/autocomplete.html +19 -3
package/components/form/demo/index.html +16 -9
package/components/form/demo/index.min.js +2 -2
package/components/form/demo/readme.html +16 -9
package/components/form/demo/working.html +19 -13
package/components/form/dist/index.js +1 -1
package/components/form/dist/registered.js +1 -1
package/components/helptext/dist/index.js +2 -2
package/components/helptext/dist/registered.js +2 -2
package/components/input/README.md +5 -2
package/components/input/demo/api.html +16 -10
package/components/input/demo/api.md +228 -130
package/components/input/demo/api.min.js +909 -247
package/components/input/demo/index.html +16 -10
package/components/input/demo/index.md +48 -32
package/components/input/demo/index.min.js +909 -247
package/components/input/demo/readme.html +16 -9
package/components/input/demo/readme.md +5 -2
package/components/input/dist/auro-input.d.ts +3 -3
package/components/input/dist/base-input.d.ts +38 -10
package/components/input/dist/buttonVersion.d.ts +1 -1
package/components/input/dist/iconVersion.d.ts +1 -1
package/components/input/dist/index.js +908 -246
package/components/input/dist/registered.js +908 -246
package/components/layoutElement/dist/index.js +13 -10
package/components/menu/demo/api.html +32 -10
package/components/menu/demo/api.md +69 -8
package/components/menu/demo/api.min.js +239 -48
package/components/menu/demo/index.html +16 -10
package/components/menu/demo/index.min.js +239 -48
package/components/menu/demo/readme.html +16 -9
package/components/menu/dist/auro-menu.d.ts +41 -7
package/components/menu/dist/auro-menuoption.d.ts +15 -3
package/components/menu/dist/iconVersion.d.ts +1 -1
package/components/menu/dist/index.js +238 -47
package/components/menu/dist/registered.js +238 -47
package/components/menu/dist/styles/default/color-menuoption-css.d.ts +2 -0
package/components/menu/dist/styles/default/style-menu-css.d.ts +2 -0
package/components/menu/dist/styles/default/style-menuoption-css.d.ts +2 -0
package/components/menu/dist/styles/default/tokens-css.d.ts +2 -0
package/components/radio/demo/api.html +16 -10
package/components/radio/demo/api.md +39 -9
package/components/radio/demo/api.min.js +91 -93
package/components/radio/demo/index.html +16 -10
package/components/radio/demo/index.min.js +91 -93
package/components/radio/demo/readme.html +16 -9
package/components/radio/dist/auro-radio-group.d.ts +1 -1
package/components/radio/dist/auro-radio.d.ts +9 -12
package/components/radio/dist/index.js +90 -92
package/components/radio/dist/registered.js +90 -92
package/components/select/demo/api.html +16 -10
package/components/select/demo/api.js +0 -2
package/components/select/demo/api.md +150 -121
package/components/select/demo/api.min.js +2184 -704
package/components/select/demo/index.html +17 -11
package/components/select/demo/index.md +1066 -259
package/components/select/demo/index.min.js +2186 -694
package/components/select/demo/readme.html +16 -9
package/components/select/dist/auro-select.d.ts +59 -21
package/components/select/dist/index.js +2107 -711
package/components/select/dist/registered.js +2107 -711
package/package.json +31 -28
/package/components/{datepicker/dist/styles/default/color-css.d.ts → counter/dist/styles/shapeSize-css.d.ts} +0 -0
/package/components/{dropdown/dist/styles/default → datepicker/dist/styles/classic}/color-css.d.ts +0 -0
/package/components/datepicker/dist/styles/{emphasized → classic}/style-css.d.ts +0 -0
/package/components/{dropdown/dist/styles/default/bibColors-css.d.ts → datepicker/dist/styles/snowflake/color-css.d.ts} +0 -0
/package/components/{dropdown/dist/styles/default → datepicker/dist/styles/snowflake}/style-css.d.ts +0 -0
/package/components/dropdown/dist/styles/{default/bibStyles-css.d.ts → classic/bibColors-css.d.ts} +0 -0
/package/components/{menu/dist/styles/color-menu-css.d.ts → dropdown/dist/styles/classic/bibStyles-css.d.ts} +0 -0
/package/components/{menu/dist/styles/color-menuoption-css.d.ts → dropdown/dist/styles/classic/color-css.d.ts} +0 -0
/package/components/{menu/dist/styles/style-menu-css.d.ts → dropdown/dist/styles/classic/style-css.d.ts} +0 -0
/package/components/{menu/dist/styles/style-menuoption-css.d.ts → dropdown/dist/styles/style-css.d.ts} +0 -0
/package/components/menu/dist/styles/{tokens-css.d.ts → default/color-menu-css.d.ts} +0 -0

package/components/counter/demo/readme.html CHANGED Viewed

@@ -16,17 +16,24 @@
   <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/auro-classic/CSSCustomProperties.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
+    <title>Auro Web Component Demo | auro-counter</title>
+    <!-- Prism.js Stylesheet -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
+    <!-- Legacy reference is still needed to support auro-counter's use of legacy token values at this time -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
+    <!-- Design Token Alaska Theme -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
+    <!-- Webcore Stylesheet Alaska Theme -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
+    <!-- Demo Specific Styles -->
     <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>
+</head>
   <body class="auro-markdown">
     <main></main>

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

@@ -9,4 +9,6 @@ export class AuroCounterButton {
      *
      */
     static register(name?: string): void;
+    size: string;
+    shape: string;
 }

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

@@ -12,6 +12,7 @@
  * @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.
+ * @property {'classic'|'snowflake'} layout - Determines the layout style of the counter group when it is a dropdown. Options are 'classic' or 'snowflake'. Default is 'classic'.
  */
 export class AuroCounterGroup extends LitElement {
     static get styles(): import("lit").CSSResult[];
@@ -24,6 +25,23 @@ export class AuroCounterGroup extends LitElement {
             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 (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
          * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
@@ -42,6 +60,14 @@ export class AuroCounterGroup extends LitElement {
         isDropdown: {
             type: BooleanConstructor;
         };
+        /**
+         * 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.
          */
@@ -94,7 +120,7 @@ export class AuroCounterGroup extends LitElement {
          * "top" | "right" | "bottom" | "left" |
          * "bottom-start" | "top-start" | "top-end" |
          * "right-start" | "right-end" | "bottom-end" |
-         * "left-start" | "left-end"
+         * "left-start" | "left-end".
          * @default bottom-start
          */
         placement: {
@@ -120,6 +146,15 @@ export class AuroCounterGroup extends LitElement {
         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.
@@ -134,11 +169,13 @@ export class AuroCounterGroup extends LitElement {
     total: number;
     validity: any;
     value: {};
+    matchWidth: boolean;
     isDropdown: boolean;
     fullscreenBreakpoint: string;
     largeFullscreenHeadline: boolean;
     autoPlacement: boolean;
     noFlip: boolean;
+    placement: string;
     /**
      * @private
      */
@@ -155,6 +192,21 @@ export class AuroCounterGroup extends LitElement {
      * @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
@@ -168,12 +220,15 @@ export class AuroCounterGroup extends LitElement {
      */
     private bibtemplateTag;
     /**
-     * Traps keyboard tab interactions within dropdown when open.
+     * Dynamically generated helpText tag.
      * @private
-     * @param {KeyboardEvent} event - The keyboard event.
-     * @param {NodeList} counters - The list of counter elements.
+     * @type {string}
      */
-    private trapKeyboard;
+    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.
@@ -190,6 +245,38 @@ export class AuroCounterGroup extends LitElement {
      * @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,
@@ -197,7 +284,6 @@ export class AuroCounterGroup extends LitElement {
      * @private
      */
     private configureDropdownCounters;
-    keydownHandler: (keydownEvent: any) => void;
     /**
      * This sets up a close event listener and moves any slotted `bib.fullscreen.headline` and `bib.fullscreen.footer` content into the bibtemplate.
      * @private
@@ -218,18 +304,82 @@ export class AuroCounterGroup extends LitElement {
      */
     private safeNumberConversion;
     /**
-     * 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.
+     * Updates the value text in the dropdown trigger based on the counters in the counter group.
      * @private
      */
-    private updateValue;
+    private updateValueText;
+    valueText: any;
     /**
      * Validates value.
      * @param {boolean} [force=false] - Whether to force validation.
      */
     validate(force?: boolean): void;
     updated(changedProperties: any): void;
-    render(): import("lit-html").TemplateResult;
+    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;
+    layout: 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 { LitElement } from "lit";

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

@@ -42,6 +42,10 @@ export class AuroCounter extends LitElement {
      * @type {string}
      */
     private iconTag;
+    /**
+     * @private
+     */
+    private helpTextTag;
     /**
      * Increments the counter value by 1. If a value is provided, it increments by that amount.
      * @method increment
@@ -83,6 +87,12 @@ export class AuroCounter extends LitElement {
      */
     private handleKeyDown;
     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.
@@ -92,6 +102,12 @@ export class AuroCounter extends LitElement {
      */
     private onDefaultSlotChange;
     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/helptextVersion.d.ts ADDED Viewed

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

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

@@ -1,2 +1,2 @@
-declare const _default: "8.0.3";
+declare const _default: "8.0.4";
 export default _default;