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/datepicker/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-datepicker 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-datepicker</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-datepicker'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/datepicker/demo/readme.md CHANGED Viewed

@@ -83,7 +83,7 @@ This configuration enables proper module resolution for the component's TypeScri
 <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
 ```html
-<auro-datepicker>
+<auro-datepicker required="">
   <span slot="bib.fullscreen.headline">Datepicker Headline</span>
   <span slot="fromLabel">Choose a date</span>
   <span slot="bib.fullscreen.dateLabel">Choose a date</span>

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

@@ -70,6 +70,17 @@ export class AuroDatePicker extends AuroElement {
             type: StringConstructor;
             reflect: boolean;
         };
+        hasFocus: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        /**
+         * @private
+         */
+        hasValue: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
         /**
          * Specifies the date format. The default is `mm/dd/yyyy`.
          */
@@ -160,6 +171,22 @@ export class AuroDatePicker extends AuroElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        /**
+         * Placeholder text to display in the input(s) when no value is set.
+         */
+        placeholder: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        /**
+         * Optional placeholder text to display in the second input when using date range.
+         * By default, datepicker will use `placeholder` for both inputs if placeholder is
+         * specified, but placeholderendDate is not.
+         */
+        placeholderEndDate: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
         /**
          * Position where the bib should appear relative to the trigger.
          * Accepted values:
@@ -286,7 +313,6 @@ export class AuroDatePicker extends AuroElement {
     format: string;
     fullscreenBreakpoint: string;
     monthNames: string[];
-    monthFirst: boolean;
     placement: string;
     offset: number;
     noFlip: boolean;
@@ -312,10 +338,29 @@ export class AuroDatePicker extends AuroElement {
      * @private
      */
     private dropdownTag;
+    /**
+     * @private
+     */
+    private buttonTag;
+    /**
+     * @private
+     */
+    private iconTag;
     /**
      * @private
      */
     private inputTag;
+    /**
+     * @private
+     */
+    private helpTextTag;
+    /**
+     * Handles click events on the datepicker.
+     * @param {PointerEvent} event - The pointer event object.
+     * @private
+     * @returns {void}
+     */
+    private handleClick;
     layout: string;
     shape: string;
     size: string;
@@ -341,7 +386,8 @@ export class AuroDatePicker extends AuroElement {
      * @param {String} focusInput - Pass in `endDate` to focus on the return input. No parameter is needed to focus on the depart input.
      * @returns {void}
      */
-    focus(focusInput: string): void;
+    focus(focusInput?: string): void;
+    hasFocus: boolean;
     /**
      * Converts valid time number to format used by wc-date-range API.
      * @private
@@ -410,6 +456,16 @@ export class AuroDatePicker extends AuroElement {
      * @returns {void}
      */
     private configureDatepicker;
+    /**
+     * 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;
     /**
      * Sets the readonly attribute on the inputs based on the window width.
      * @private
@@ -437,17 +493,41 @@ export class AuroDatePicker extends AuroElement {
      * @returns {void}
      */
     private pushSlotContent;
+    /**
+     * Handle enter/space keydown on the reset button.
+     * @private
+     * @param {KeyboardEvent} event - The keydown event.
+     */
+    private handleKeydownReset;
+    /**
+     * Resets values without resetting validation.
+     */
+    resetValues(): void;
     /**
      * Resets component to initial state.
      * @returns {void}
      */
     reset(): void;
+    /**
+     * Clears the current value(s) of the datepicker.
+     * @returns {void}
+     */
+    clear(): void;
     /**
      * Validates value.
      * @param {boolean} [force=false] - Whether to force validation.
      */
     validate(force?: boolean): void;
+    /**
+     * Private method for interacting with the `hasValue` property.
+     * @private
+     */
+    private setHasValue;
+    hasValue: boolean;
+    get hasError(): boolean;
     updated(changedProperties: any): void;
+    monthFirst: boolean;
+    previousTabIndex: string;
     formattedFocusDate: boolean;
     formattedEndDate: boolean;
     formattedValue: boolean;
@@ -463,23 +543,82 @@ export class AuroDatePicker extends AuroElement {
      * @throws {Error} Throws an error if the slot cannot be found or injected.
      */
     private handleSlotToSlot;
+    /**
+     * Set up click handling for the datepicker.
+     * @private
+     * @returns {void}
+     */
+    private configureClickHandler;
     firstUpdated(): void;
     /**
-     * Base wrapper for the datepicker layout - every layout follows this same structure
-     * with minor variations in DOM structure.
-     * @param {import("lit").TemplateResult} content - The content to be rendered inside the base layout.
-     * @return {import("lit").TemplateResult}
+     * Renders the snowflake layout for the datepicker.
+     * @private
+     * @returns {import("lit").TemplateResult}
+     */
+    private renderSnowflakeLayout;
+    /**
+     * Renders the snowflake layout for the datepicker.
+     * @private
+     * @returns {import("lit").TemplateResult}
+     */
+    private renderClassicLayout;
+    /**
+     * Renders the layout based on the `layout` attribute.
+     * @private
+     * @returns {import('lit').TemplateResult}
+     */
+    private renderLayoutFromAttributes;
+    /**
+     * Simple formatter that ONLY WORKS FOR US DATES.
+     * Returns formatted date like Apr 21 or Dec 25.
+     * @private
+     * @param {string} date - Date format should be in a format Date constructor accepts, like '2023-04-21' or '2023/04/21'.
+     * @returns {string}
+     */
+    private formatShortDate;
+    /**
+     * Format and render the provided date value.
+     * @private
+     * @param {string} dateValue - The date value to format and render.
+     * @returns {import('lit').TemplateResult}
+     */
+    private renderDisplayTextDate;
+    /**
+     * Renders the HTML inputs for the datepicker.
+     * @private
+     * @returns {import('lit').TemplateResult}
+     */
+    private renderHtmlInputs;
+    /**
+     * Renders the clear action button.
+     * @private
+     * @returns {import('lit').TemplateResult}
+     */
+    private renderHtmlActionClear;
+    /**
+     * Renders the error icon.
+     * @private
+     * @returns {import('lit').TemplateResult}
+     */
+    private renderHtmlIconError;
+    /**
+     * Renders the calendar icon.
+     * @private
+     * @returns {import('lit').TemplateResult}
+     */
+    private renderHtmlIconCalendar;
+    /**
+     * Returns HTML for the help text and error message.
      * @private
+     * @returns {import('lit').TemplateResult} - Returns HTML for the help text and error message.
      */
-    private _renderBaseLayout;
+    private renderHtmlHelpText;
     /**
-     * Renders the emphasized layout for the datepicker.
+     * Separate method for rendering the calendar.
      * @private
-     * @return {import("lit").TemplateResult}
+     * @returns {import('lit').TemplateResult}
      */
-    private renderEmphasizedLayout;
-    renderLayoutFromAttributes(): import("lit-html").TemplateResult;
-    renderTempInputs(): import("lit-html").TemplateResult;
+    private renderCalendar;
     render(): import("lit-html").TemplateResult;
 }
 import { AuroElement } from "@aurodesignsystem/auro-layout-element";

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

@@ -1,2 +1,2 @@
-declare const _default: "9.0.0";
+declare const _default: "10.0.0";
 export default _default;

package/components/datepicker/dist/iconVersion.d.ts ADDED Viewed

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