@aurodesignsystem/auro-formkit 6.1.0 → 6.2.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.
- package/CHANGELOG.md +24 -16
- package/components/bibtemplate/dist/auro-bibtemplate.d.ts +11 -0
- package/components/bibtemplate/dist/index.js +17 -4
- package/components/bibtemplate/dist/registered.js +17 -4
- package/components/checkbox/demo/accessibility.md +15 -4
- package/components/checkbox/demo/api.md +20 -13
- package/components/checkbox/demo/customize.md +2 -1
- package/components/checkbox/demo/customize.min.js +129 -29
- package/components/checkbox/demo/getting-started.min.js +129 -29
- package/components/checkbox/demo/index.min.js +129 -29
- package/components/checkbox/demo/styles.min.css +1 -1
- package/components/checkbox/dist/auro-checkbox-group.d.ts +33 -0
- package/components/checkbox/dist/auro-checkbox.d.ts +7 -2
- package/components/checkbox/dist/index.js +129 -29
- package/components/checkbox/dist/registered.js +129 -29
- package/components/combobox/demo/api.md +27 -19
- package/components/combobox/demo/customize.min.js +676 -151
- package/components/combobox/demo/getting-started.md +49 -0
- package/components/combobox/demo/getting-started.min.js +695 -151
- package/components/combobox/demo/index.min.js +676 -151
- package/components/combobox/demo/styles.min.css +1 -1
- package/components/combobox/dist/auro-combobox.d.ts +72 -27
- package/components/combobox/dist/index.js +569 -133
- package/components/combobox/dist/registered.js +569 -133
- package/components/counter/demo/api.md +36 -16
- package/components/counter/demo/customize.min.js +692 -105
- package/components/counter/demo/getting-started.html +3 -1
- package/components/counter/demo/getting-started.md +49 -0
- package/components/counter/demo/getting-started.min.js +8808 -0
- package/components/counter/demo/index.min.js +692 -105
- package/components/counter/demo/styles.min.css +1 -1
- package/components/counter/dist/auro-counter-button.d.ts +4 -0
- package/components/counter/dist/auro-counter-group.d.ts +38 -6
- package/components/counter/dist/auro-counter.d.ts +33 -0
- package/components/counter/dist/counterGroupKeyboardStrategy.d.ts +1 -0
- package/components/counter/dist/index.js +691 -104
- package/components/counter/dist/registered.js +691 -104
- package/components/datepicker/demo/api.md +55 -49
- package/components/datepicker/demo/customize.min.js +659 -166
- package/components/datepicker/demo/getting-started.html +3 -1
- package/components/datepicker/demo/getting-started.md +39 -0
- package/components/datepicker/demo/getting-started.min.js +37669 -0
- package/components/datepicker/demo/index.min.js +659 -166
- package/components/datepicker/demo/styles.min.css +1 -1
- package/components/datepicker/dist/auro-calendar-cell.d.ts +58 -4
- package/components/datepicker/dist/auro-calendar-month.d.ts +10 -4
- package/components/datepicker/dist/auro-calendar.d.ts +25 -6
- package/components/datepicker/dist/auro-datepicker.d.ts +75 -24
- package/components/datepicker/dist/index.js +658 -165
- package/components/datepicker/dist/registered.js +658 -165
- package/components/dropdown/demo/api.md +25 -22
- package/components/dropdown/demo/customize.min.js +217 -43
- package/components/dropdown/demo/getting-started.min.js +364 -95
- package/components/dropdown/demo/index.min.js +217 -43
- package/components/dropdown/demo/styles.min.css +1 -1
- package/components/dropdown/dist/auro-dropdown.d.ts +35 -8
- package/components/dropdown/dist/auro-dropdownBib.d.ts +17 -5
- package/components/dropdown/dist/index.js +217 -43
- package/components/dropdown/dist/registered.js +217 -43
- package/components/form/demo/customize.min.js +2739 -628
- package/components/form/demo/getting-started.min.js +2739 -628
- package/components/form/demo/index.min.js +2739 -628
- package/components/form/demo/registerDemoDeps.min.js +2733 -627
- package/components/form/demo/styles.min.css +1 -1
- package/components/form/dist/index.js +6 -1
- package/components/form/dist/registered.js +6 -1
- package/components/helptext/dist/auro-helptext.d.ts +9 -7
- package/components/helptext/dist/index.js +9 -3
- package/components/helptext/dist/registered.js +9 -3
- package/components/input/demo/api.md +30 -30
- package/components/input/demo/customize.md +0 -37
- package/components/input/demo/customize.min.js +147 -61
- package/components/input/demo/getting-started.md +33 -0
- package/components/input/demo/getting-started.min.js +167 -52
- package/components/input/demo/index.min.js +147 -52
- package/components/input/demo/styles.min.css +1 -1
- package/components/input/dist/base-input.d.ts +80 -25
- package/components/input/dist/index.js +146 -51
- package/components/input/dist/registered.js +146 -51
- package/components/layoutElement/dist/auroElement.d.ts +10 -17
- package/components/layoutElement/dist/index.js +20 -20
- package/components/layoutElement/dist/registered.js +20 -20
- package/components/menu/demo/api.md +31 -27
- package/components/menu/demo/index.min.js +126 -37
- package/components/menu/demo/styles.min.css +1 -1
- package/components/menu/dist/auro-menu.d.ts +26 -21
- package/components/menu/dist/auro-menuoption.d.ts +27 -1
- package/components/menu/dist/index.js +126 -37
- package/components/menu/dist/registered.js +126 -37
- package/components/radio/demo/accessibility.md +15 -4
- package/components/radio/demo/api.md +10 -9
- package/components/radio/demo/customize.min.js +120 -27
- package/components/radio/demo/getting-started.min.js +120 -27
- package/components/radio/demo/index.min.js +120 -27
- package/components/radio/demo/styles.min.css +1 -1
- package/components/radio/dist/auro-radio-group.d.ts +31 -3
- package/components/radio/dist/auro-radio.d.ts +4 -2
- package/components/radio/dist/index.js +120 -27
- package/components/radio/dist/registered.js +120 -27
- package/components/select/demo/api.md +18 -15
- package/components/select/demo/customize.min.js +396 -94
- package/components/select/demo/getting-started.md +49 -0
- package/components/select/demo/getting-started.min.js +418 -95
- package/components/select/demo/index.min.js +396 -94
- package/components/select/demo/styles.min.css +1 -1
- package/components/select/dist/auro-select.d.ts +18 -0
- package/components/select/dist/index.js +289 -76
- package/components/select/dist/registered.js +289 -76
- package/custom-elements.json +1354 -1404
- package/package.json +11 -11
|
@@ -10,81 +10,83 @@ The `auro-datepicker` component provides users with a way to select a date or da
|
|
|
10
10
|
| Property | Attribute | Modifiers | Type | Default | Description |
|
|
11
11
|
|-----------------------------------|-----------------------------------|-----------|--------------------------------------------------|--------------------------------|--------------------------------------------------|
|
|
12
12
|
| `appearance` | `appearance` | | `'default' \| 'inverse'` | "'default'" | Defines whether the component will be on lighter or darker backgrounds. |
|
|
13
|
-
| `autoPlacement` | `
|
|
14
|
-
| `blackoutDates` | `
|
|
15
|
-
| `blackoutLabel` | `
|
|
16
|
-
| `calendarEndDate` | `
|
|
13
|
+
| `autoPlacement` | `autoplacement` | | `boolean` | "false" | If declared, bib's position will be automatically calculated where to appear. |
|
|
14
|
+
| `blackoutDates` | `blackoutdates` | | `string[]` | [] | Array of dates that cannot be selected. Dates should be in ISO format (YYYY-MM-DD).<br /><br />**Immutable update required.** The datepicker treats this array as<br />immutable and memoizes a lookup Set keyed on the array's reference<br />identity — matching Lit's own reactivity semantics for array<br />properties. In-place mutations (`blackoutDates.push(...)`,<br />`blackoutDates[i] = ...`, `blackoutDates.splice(...)`) will not<br />invalidate the cache and the new entries will be silently ignored.<br />To update, reassign the property: `el.blackoutDates = [...el.blackoutDates, '2024-12-25']`. |
|
|
15
|
+
| `blackoutLabel` | `blackoutlabel` | | `string` | "'unavailable'" | Label announced for blackout (disabled but in-range) date cells. |
|
|
16
|
+
| `calendarEndDate` | `calendarenddate` | | `string` | "undefined" | The last date that may be displayed in the calendar. |
|
|
17
17
|
| `calendarEndDateObject` | | readonly | `Date \| undefined` | | Read-only `Date` object derived from `calendarEndDate`. Returns `undefined` when `calendarEndDate` is empty or not a valid date. |
|
|
18
|
-
| `calendarFocusDate` | `
|
|
18
|
+
| `calendarFocusDate` | `calendarfocusdate` | | `string` | "value" | The date that will first be visually rendered to the user in the calendar. |
|
|
19
19
|
| `calendarFocusDateObject` | | readonly | `Date \| undefined` | | Read-only `Date` object derived from `calendarFocusDate`. Returns `undefined` when `calendarFocusDate` is empty or not a valid date. |
|
|
20
|
-
| `calendarGridLabel` | `
|
|
21
|
-
| `calendarStartDate` | `
|
|
20
|
+
| `calendarGridLabel` | `calendargridlabel` | | `string` | "'Calendar days of the month'" | Accessible label for the calendar grid containing the days of the month. |
|
|
21
|
+
| `calendarStartDate` | `calendarstartdate` | | `string` | "undefined" | The first date that may be displayed in the calendar. |
|
|
22
22
|
| `calendarStartDateObject` | | readonly | `Date \| undefined` | | Read-only `Date` object derived from `calendarStartDate`. Returns `undefined` when `calendarStartDate` is empty or not a valid date. |
|
|
23
|
-
| `centralDate` | `
|
|
23
|
+
| `centralDate` | `centraldate` | | `string` | | The date that determines the currently visible month. |
|
|
24
24
|
| `centralDateObject` | | readonly | `Date \| undefined` | | Read-only `Date` object derived from `centralDate`. Returns `undefined` when `centralDate` is empty or not a valid date. |
|
|
25
25
|
| `disabled` | `disabled` | | `boolean` | false | If set, disables the datepicker. |
|
|
26
|
-
| `dvInputOnly` | `
|
|
26
|
+
| `dvInputOnly` | `dvinputonly` | | `boolean` | false | If defined, the display value slot content will only mask the HTML5 input element. The input's label will not be masked. |
|
|
27
27
|
| `error` | `error` | | `string` | | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
|
|
28
28
|
| `format` | `format` | | `string` | | Specifies the date format. The default is `mm/dd/yyyy`. |
|
|
29
|
-
| `fullscreenBreakpoint` | `
|
|
29
|
+
| `fullscreenBreakpoint` | `fullscreenbreakpoint` | | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'disabled'` | "'sm'" | Defines the screen size breakpoint at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
|
|
30
30
|
| `hasError` | | readonly | `boolean` | | Returns `true` when the datepicker has an active validation error. |
|
|
31
|
-
| `inputmode` | `inputmode` | | `
|
|
32
|
-
| `largeFullscreenHeadline` | `
|
|
31
|
+
| `inputmode` | `inputmode` | | `'none' \| 'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url'` | | Sets the `inputmode` attribute on the underlying input, hinting at the virtual keyboard to display. |
|
|
32
|
+
| `largeFullscreenHeadline` | `largefullscreenheadline` | | `boolean` | false | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600. |
|
|
33
33
|
| `layout` | `layout` | | `'classic' \| 'snowflake'` | "'classic'" | Sets the layout of the datepicker. |
|
|
34
34
|
| `locale` | `locale` | | `string` | | Defines the locale of the element. Used to derive the date format when `format` is not explicitly set. |
|
|
35
|
-
| `maxDate` | `
|
|
35
|
+
| `maxDate` | `maxdate` | | `string` | | Maximum date. All dates after will be disabled. |
|
|
36
36
|
| `maxDateObject` | | readonly | `Date \| undefined` | | Read-only `Date` object derived from `maxDate`. Returns `undefined` when `maxDate` is empty or not a valid date. |
|
|
37
|
-
| `minDate` | `
|
|
37
|
+
| `minDate` | `mindate` | | `string` | | Minimum date. All dates before will be disabled. |
|
|
38
38
|
| `minDateObject` | | readonly | `Date \| undefined` | | Read-only `Date` object derived from `minDate`. Returns `undefined` when `minDate` is empty or not a valid date. |
|
|
39
|
-
| `
|
|
40
|
-
| `
|
|
41
|
-
| `
|
|
42
|
-
| `
|
|
43
|
-
| `
|
|
39
|
+
| `monthFirst` | `monthfirst` | | `boolean` | | When set, the calendar displays the month before the year in the header. |
|
|
40
|
+
| `monthNames` | `monthnames` | | `string[]` | | Names of all 12 months to render in the calendar.<br />When omitted, month names will be automatically populated from the active `locale` (falling back to `en-US`). |
|
|
41
|
+
| `navLabelNextMonth` | `navlabelnextmonth` | | `string` | "'Next month'" | Accessible label for the next month navigation button. |
|
|
42
|
+
| `navLabelPrevMonth` | `navlabelprevmonth` | | `string` | "'Previous month'" | Accessible label for the previous month navigation button. |
|
|
43
|
+
| `noFlip` | `noflip` | | `boolean` | false | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
|
|
44
|
+
| `noValidate` | `novalidate` | | `boolean` | false | If set, disables auto-validation on blur. |
|
|
44
45
|
| `offset` | `offset` | | `number` | "0" | Gap between the trigger element and bib. |
|
|
45
|
-
| `onDark` | `
|
|
46
|
+
| `onDark` | `ondark` | | `boolean` | false | DEPRECATED - use `appearance="inverse"` instead. |
|
|
46
47
|
| `placeholder` | `placeholder` | | `string` | | Placeholder text to display in the input(s) when no value is set. |
|
|
47
|
-
| `placeholderEndDate` | `
|
|
48
|
+
| `placeholderEndDate` | `placeholderenddate` | | `string` | | Optional placeholder text to display in the second input when using date range.<br />By default, datepicker will use `placeholder` for both inputs if placeholder is<br />specified, but placeholderEndDate is not. |
|
|
48
49
|
| `placement` | `placement` | | `'top' \| 'right' \| 'bottom' \| 'left' \| 'bottom-start' \| 'top-start' \| 'top-end' \| 'right-start' \| 'right-end' \| 'bottom-end' \| 'left-start' \| 'left-end'` | "'bottom-start'" | Position where the bib should appear relative to the trigger. |
|
|
49
50
|
| `range` | `range` | | `boolean` | false | If set, turns on date range functionality in auro-calendar. |
|
|
50
|
-
| `rangeLabelAfterRange` | `
|
|
51
|
-
| `rangeLabelBeforeRange` | `
|
|
52
|
-
| `rangeLabelEnd` | `
|
|
53
|
-
| `rangeLabelEndPreview` | `
|
|
54
|
-
| `rangeLabelInRange` | `
|
|
55
|
-
| `rangeLabelStart` | `
|
|
56
|
-
| `referenceDates` | `
|
|
51
|
+
| `rangeLabelAfterRange` | `rangelabelafterrange` | | `string` | "'after range'" | Label announced for cells after a fully selected range (both<br />`dateFrom` and `dateTo` are set). While a range is still being<br />picked (`dateFrom` set, `dateTo` unset), focused cells past the<br />start use `rangeLabelEndPreview` instead. |
|
|
52
|
+
| `rangeLabelBeforeRange` | `rangelabelbeforerange` | | `string` | "'before range'" | Label announced for cells before the range start. |
|
|
53
|
+
| `rangeLabelEnd` | `rangelabelend` | | `string` | "'range end'" | Label announced for the range end date cell. |
|
|
54
|
+
| `rangeLabelEndPreview` | `rangelabelendpreview` | | `string` | "'previewing range end'" | Label announced for the focused cell while previewing a range end<br />(dateFrom set, dateTo not yet selected). Tells AT users that<br />pressing Enter would commit this cell as the range end. |
|
|
55
|
+
| `rangeLabelInRange` | `rangelabelinrange` | | `string` | "'in range'" | Label announced for cells within the selected range. |
|
|
56
|
+
| `rangeLabelStart` | `rangelabelstart` | | `string` | "'range start'" | Label announced for the range start date cell. |
|
|
57
|
+
| `referenceDates` | `referencedates` | | `string[]` | | Dates that the user should have for reference as part of their decision-making when selecting a date.<br />This should be a JSON string array of ISO date strings (`YYYY-MM-DD`). |
|
|
57
58
|
| `required` | `required` | | `boolean` | false | Populates the `required` attribute on the input. Used for client-side validation. |
|
|
58
|
-
| `setCustomValidity` | `
|
|
59
|
-
| `setCustomValidityCustomError` | `
|
|
60
|
-
| `setCustomValidityRangeOverflow` | `
|
|
61
|
-
| `setCustomValidityRangeUnderflow` | `
|
|
62
|
-
| `setCustomValidityValueMissing` | `
|
|
63
|
-
| `shape` |
|
|
59
|
+
| `setCustomValidity` | `setcustomvalidity` | | `string` | | Sets a custom help text message to display for all validityStates. |
|
|
60
|
+
| `setCustomValidityCustomError` | `setcustomvaliditycustomerror` | | `string` | | Custom help text message to display when validity = `customError`.<br />Also used as the validation message when a blackout date is typed into the input. |
|
|
61
|
+
| `setCustomValidityRangeOverflow` | `setcustomvalidityrangeoverflow` | | `string` | | Custom help text message to display when validity = `rangeOverflow`. |
|
|
62
|
+
| `setCustomValidityRangeUnderflow` | `setcustomvalidityrangeunderflow` | | `string` | | Custom help text message to display when validity = `rangeUnderflow`. |
|
|
63
|
+
| `setCustomValidityValueMissing` | `setcustomvalidityvaluemissing` | | `string` | | Custom help text message to display when validity = `valueMissing`. |
|
|
64
|
+
| `shape` | `shape` | | `'box' \| 'classic' \| 'pill' \| 'pill-left' \| 'pill-right' \| 'rounded' \| 'snowflake'` | "'classic'" | Sets the shape of the datepicker. |
|
|
64
65
|
| `shift` | `shift` | | `boolean` | false | If declared, the dropdown will shift its position to avoid being cut off by the viewport. |
|
|
65
|
-
| `size` |
|
|
66
|
+
| `size` | `size` | | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | "'lg'" | Sets the size of the datepicker. |
|
|
66
67
|
| `stacked` | `stacked` | | `boolean` | false | Set true to make datepicker stacked style. |
|
|
67
68
|
| `validity` | `validity` | | `string` | "undefined" | Specifies the `validityState` this element is in. |
|
|
68
69
|
| `value` | `value` | | `string` | "undefined" | Value selected for the datepicker. |
|
|
69
|
-
| `valueEnd` | `
|
|
70
|
+
| `valueEnd` | `valueend` | | `string` | "undefined" | Value selected for the second datepicker when using date range. |
|
|
70
71
|
| `valueEndObject` | | readonly | `Date \| undefined` | | Read-only `Date` object derived from `valueEnd`. Returns `undefined` when `valueEnd` is empty or not a valid date. |
|
|
71
72
|
| `valueObject` | | readonly | `Date \| undefined` | | Read-only `Date` object derived from `value`. Returns `undefined` when `value` is empty or not a valid date. |
|
|
72
73
|
| `values` | | readonly | `string[]` | | A convenience wrapper for `value` and `valueEnd`, uses the new Auro "array value pattern". |
|
|
73
74
|
|
|
74
75
|
## Methods
|
|
75
76
|
|
|
76
|
-
| Method
|
|
77
|
-
|
|
78
|
-
| `clear`
|
|
79
|
-
| `focus`
|
|
80
|
-
| `hideBib`
|
|
81
|
-
| `
|
|
82
|
-
| `
|
|
83
|
-
| `
|
|
84
|
-
| `
|
|
85
|
-
| `
|
|
86
|
-
| `
|
|
87
|
-
| `
|
|
77
|
+
| Method | Type | Description |
|
|
78
|
+
|----------------------------------|----------------------------------------|--------------------------------------------------|
|
|
79
|
+
| `clear` | `(): void` | Clears the current value(s) of the datepicker. |
|
|
80
|
+
| `focus` | `(focusInput?: string): void` | Focuses the datepicker trigger input.<br /><br />**focusInput**: Pass in `endDate` to focus on the return input. No parameter is needed to focus on the depart input. |
|
|
81
|
+
| `hideBib` | `(): void` | Hides the dropdown bib if its open. |
|
|
82
|
+
| `initializeArchitectureDefaults` | `(): void` | |
|
|
83
|
+
| `reset` | `(): void` | Resets component to initial state. |
|
|
84
|
+
| `resetInputs` | `(): void` | Resets values without resetting validation. |
|
|
85
|
+
| `resetLayoutClasses` | `(): void` | |
|
|
86
|
+
| `resetShapeClasses` | `(): void` | |
|
|
87
|
+
| `showBib` | `(): void` | Shows the dropdown bib if there are options to show. |
|
|
88
|
+
| `updateComponentArchitecture` | `(): void` | |
|
|
89
|
+
| `validate` | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
|
|
88
90
|
|
|
89
91
|
## Events
|
|
90
92
|
|
|
@@ -94,7 +96,7 @@ The `auro-datepicker` component provides users with a way to select a date or da
|
|
|
94
96
|
| `auroDatePicker-newSlotContent` | `CustomEvent<any>` | Notifies that new slot content has been added to the datepicker. |
|
|
95
97
|
| `auroDatePicker-toggled` | `CustomEvent<{ expanded: any; }>` | Notifies that the calendar dropdown has been opened/closed. |
|
|
96
98
|
| `auroFormElement-validated` | `CustomEvent<{ validity: any; message: any; }>` | Notifies that the component value(s) have been validated. |
|
|
97
|
-
| `input` | `CustomEvent<any>` |
|
|
99
|
+
| `input` | `CustomEvent<any>` | Notifies that the datepicker's value has changed. |
|
|
98
100
|
|
|
99
101
|
## Slots
|
|
100
102
|
|
|
@@ -119,11 +121,15 @@ The `auro-datepicker` component provides users with a way to select a date or da
|
|
|
119
121
|
|
|
120
122
|
| Part | Description |
|
|
121
123
|
|-------------------|--------------------------------------------------|
|
|
124
|
+
| `accentIcon` | Use for customizing the style of the leading calendar accent icon. |
|
|
122
125
|
| `calendar` | Use for customizing the style of the calendar. |
|
|
123
126
|
| `calendarWrapper` | Use for customizing the style of the calendar container. |
|
|
124
127
|
| `dropdown` | Use for customizing the style of the dropdown. |
|
|
125
128
|
| `helpText` | Use for customizing the style of the datepicker help text. |
|
|
126
129
|
| `helpTextSpan` | Use for customizing the style of the datepicker help text span. |
|
|
127
130
|
| `input` | Use for customizing the style of the datepicker inputs. |
|
|
131
|
+
| `inputSection` | Use for customizing the style of the input section within the trigger. |
|
|
132
|
+
| `mainLabel` | Use for customizing the style of the main label in the snowflake layout. |
|
|
128
133
|
| `trigger` | Use for customizing the style of the datepicker trigger. |
|
|
134
|
+
| `wrapper` | Use for customizing the style of the trigger content wrapper. |
|
|
129
135
|
<!-- AURO-GENERATED-CONTENT:END -->
|