@aurodesignsystem-dev/auro-formkit 0.0.0-pr1112.0 → 0.0.0-pr1118.1
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/components/bibtemplate/dist/buttonVersion.d.ts +1 -1
- package/components/bibtemplate/dist/index.js +44 -88
- package/components/bibtemplate/dist/registered.js +44 -88
- package/components/combobox/demo/api.md +29 -1
- package/components/combobox/demo/api.min.js +221 -198
- package/components/combobox/demo/index.min.js +221 -198
- package/components/combobox/dist/auro-combobox.d.ts +9 -0
- package/components/combobox/dist/index.js +217 -194
- package/components/combobox/dist/registered.js +217 -194
- package/components/counter/demo/api.md +29 -1
- package/components/counter/demo/api.min.js +205 -182
- package/components/counter/demo/index.min.js +205 -182
- package/components/counter/dist/auro-counter-group.d.ts +9 -0
- package/components/counter/dist/index.js +205 -182
- package/components/counter/dist/registered.js +205 -182
- package/components/datepicker/demo/api.md +64 -41
- package/components/datepicker/demo/api.min.js +398 -293
- package/components/datepicker/demo/index.md +9 -6
- package/components/datepicker/demo/index.min.js +398 -293
- package/components/datepicker/dist/auro-datepicker.d.ts +69 -2
- package/components/datepicker/dist/buttonVersion.d.ts +1 -1
- package/components/datepicker/dist/index.js +398 -293
- package/components/datepicker/dist/registered.js +398 -293
- package/components/dropdown/demo/api.md +46 -2
- package/components/dropdown/demo/api.min.js +101 -1
- package/components/dropdown/demo/index.min.js +101 -1
- package/components/dropdown/dist/auro-dropdown.d.ts +10 -0
- package/components/dropdown/dist/index.js +101 -1
- package/components/dropdown/dist/registered.js +101 -1
- package/components/input/demo/api.min.js +48 -92
- package/components/input/demo/index.min.js +48 -92
- package/components/input/dist/buttonVersion.d.ts +1 -1
- package/components/input/dist/index.js +48 -92
- package/components/input/dist/registered.js +48 -92
- package/components/select/demo/api.md +29 -1
- package/components/select/demo/api.min.js +171 -104
- package/components/select/demo/index.min.js +171 -104
- package/components/select/dist/auro-select.d.ts +9 -0
- package/components/select/dist/index.js +167 -100
- package/components/select/dist/registered.js +167 -100
- package/package.json +5 -5
|
@@ -5,46 +5,48 @@
|
|
|
5
5
|
|
|
6
6
|
## Properties
|
|
7
7
|
|
|
8
|
-
| Property
|
|
9
|
-
|
|
10
|
-
| [autoPlacement](#autoPlacement)
|
|
11
|
-
| [calendarEndDate](#calendarEndDate)
|
|
12
|
-
| [calendarFocusDate](#calendarFocusDate)
|
|
13
|
-
| [calendarStartDate](#calendarStartDate)
|
|
14
|
-
| [centralDate](#centralDate)
|
|
15
|
-
| [
|
|
16
|
-
| [
|
|
17
|
-
| [
|
|
18
|
-
| [
|
|
19
|
-
| [
|
|
20
|
-
| [
|
|
21
|
-
| [
|
|
22
|
-
| [
|
|
23
|
-
| [
|
|
24
|
-
| [
|
|
25
|
-
| [
|
|
26
|
-
| [
|
|
27
|
-
| [
|
|
28
|
-
| [
|
|
29
|
-
| [
|
|
30
|
-
| [
|
|
31
|
-
| [
|
|
32
|
-
| [
|
|
33
|
-
| [
|
|
34
|
-
| [
|
|
35
|
-
| [
|
|
36
|
-
| [
|
|
37
|
-
| [
|
|
38
|
-
| [
|
|
39
|
-
| [
|
|
40
|
-
| [
|
|
41
|
-
| [
|
|
42
|
-
| [
|
|
43
|
-
| [
|
|
44
|
-
| [
|
|
45
|
-
| [
|
|
46
|
-
| [
|
|
47
|
-
| [
|
|
8
|
+
| Property | Attribute | Modifiers | Type | Default | Description |
|
|
9
|
+
|------------------------------------|-----------------------------------|-----------|--------------------------------------------------|--------------------------------------------------|--------------------------------------------------|
|
|
10
|
+
| [autoPlacement](#autoPlacement) | `autoPlacement` | | `boolean` | "false" | If declared, bib's position will be automatically calculated where to appear. |
|
|
11
|
+
| [calendarEndDate](#calendarEndDate) | `calendarEndDate` | | `string` | "undefined" | The last date that may be displayed in the calendar. |
|
|
12
|
+
| [calendarFocusDate](#calendarFocusDate) | `calendarFocusDate` | | `string` | "value" | The date that will first be visually rendered to the user in the calendar. |
|
|
13
|
+
| [calendarStartDate](#calendarStartDate) | `calendarStartDate` | | `string` | "undefined" | The first date that may be displayed in the calendar. |
|
|
14
|
+
| [centralDate](#centralDate) | `centralDate` | | `string` | | The date that determines the currently visible month. |
|
|
15
|
+
| [commonDisplayValueWrapperClasses](#commonDisplayValueWrapperClasses) | | readonly | `{ [x: string]: boolean; displayValueWrapper: boolean; util_displayHiddenVisually: boolean; }` | | |
|
|
16
|
+
| [disabled](#disabled) | `disabled` | | `boolean` | false | If set, disables the datepicker. |
|
|
17
|
+
| [dvInputOnly](#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. |
|
|
18
|
+
| [error](#error) | `error` | | `string` | | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
|
|
19
|
+
| [format](#format) | `format` | | `string` | "mm/dd/yyyy" | Specifies the date format. The default is `mm/dd/yyyy`. |
|
|
20
|
+
| [fullscreenBreakpoint](#fullscreenBreakpoint) | `fullscreenBreakpoint` | | `string` | "sm" | Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)<br />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. |
|
|
21
|
+
| [hasError](#hasError) | | readonly | `boolean` | | |
|
|
22
|
+
| [inputmode](#inputmode) | `inputmode` | | `string` | | Exposes inputmode attribute for input. |
|
|
23
|
+
| [largeFullscreenHeadline](#largeFullscreenHeadline) | `largeFullscreenHeadline` | | `boolean` | false | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600. |
|
|
24
|
+
| [layout](#layout) | | | `string` | "classic" | |
|
|
25
|
+
| [maxDate](#maxDate) | `maxDate` | | `string` | | Maximum date. All dates after will be disabled. |
|
|
26
|
+
| [minDate](#minDate) | `minDate` | | `string` | | Minimum date. All dates before will be disabled. |
|
|
27
|
+
| [monthNames](#monthNames) | `monthNames` | | `array` | ["January","February","March","April","May","June","July","August","September","October","November","December"] | Names of all 12 months to render in the calendar, used for localization of date string in mobile layout. |
|
|
28
|
+
| [noFlip](#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`. |
|
|
29
|
+
| [noValidate](#noValidate) | `noValidate` | | `boolean` | false | If set, disables auto-validation on blur. |
|
|
30
|
+
| [offset](#offset) | `offset` | | `number` | "0" | Gap between the trigger element and bib. |
|
|
31
|
+
| [onDark](#onDark) | `onDark` | | `boolean` | false | If declared, onDark styles will be applied to the trigger. |
|
|
32
|
+
| [placeholder](#placeholder) | `placeholder` | | `string` | | Placeholder text to display in the input(s) when no value is set. |
|
|
33
|
+
| [placeholderEndDate](#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. |
|
|
34
|
+
| [placement](#placement) | `placement` | | `string` | "bottom-start" | Position where the bib should appear relative to the trigger.<br />Accepted values:<br />"top" \| "right" \| "bottom" \| "left" \|<br />"bottom-start" \| "top-start" \| "top-end" \|<br />"right-start" \| "right-end" \| "bottom-end" \|<br />"left-start" \| "left-end" |
|
|
35
|
+
| [range](#range) | `range` | | `boolean` | false | If set, turns on date range functionality in auro-calendar. |
|
|
36
|
+
| [required](#required) | `required` | | `boolean` | false | Populates the `required` attribute on the input. Used for client-side validation. |
|
|
37
|
+
| [setCustomValidity](#setCustomValidity) | `setCustomValidity` | | `string` | | Sets a custom help text message to display for all validityStates. |
|
|
38
|
+
| [setCustomValidityCustomError](#setCustomValidityCustomError) | `setCustomValidityCustomError` | | `string` | | Custom help text message to display when validity = `customError`. |
|
|
39
|
+
| [setCustomValidityRangeOverflow](#setCustomValidityRangeOverflow) | `setCustomValidityRangeOverflow` | | `string` | | Custom help text message to display when validity = `rangeOverflow`. |
|
|
40
|
+
| [setCustomValidityRangeUnderflow](#setCustomValidityRangeUnderflow) | `setCustomValidityRangeUnderflow` | | `string` | | Custom help text message to display when validity = `rangeUnderflow`. |
|
|
41
|
+
| [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` | | `string` | | Custom help text message to display when validity = `valueMissing`. |
|
|
42
|
+
| [shape](#shape) | | | `string` | "classic" | |
|
|
43
|
+
| [shift](#shift) | `shift` | | `boolean` | "false" | If declared, the dropdown will shift its position to avoid being cut off by the viewport. |
|
|
44
|
+
| [size](#size) | | | `string` | "lg" | |
|
|
45
|
+
| [stacked](#stacked) | `stacked` | | `boolean` | false | Set true to make datepicker stacked style. |
|
|
46
|
+
| [validity](#validity) | `validity` | | `string` | "undefined" | Specifies the `validityState` this element is in. |
|
|
47
|
+
| [value](#value) | `value` | | `string` | "undefined" | Value selected for the datepicker. |
|
|
48
|
+
| [valueEnd](#valueEnd) | `valueEnd` | | `string` | "undefined" | Value selected for the second datepicker when using date range. |
|
|
49
|
+
| [values](#values) | | readonly | `string[]` | | A convenience wrapper for `value` and `valueEnd`, uses the new Auro "array value pattern". |
|
|
48
50
|
|
|
49
51
|
## Methods
|
|
50
52
|
|
|
@@ -659,12 +661,13 @@ Set stacked attribute to make range datepicker stacked style.
|
|
|
659
661
|
</auro-accordion>
|
|
660
662
|
|
|
661
663
|
### Customized bib position
|
|
662
|
-
The bib position can be customized with `placement`, `offset`, `flip`, `autoPlacement` attributes.
|
|
664
|
+
The bib position can be customized with `placement`, `offset`, `flip`, `autoPlacement`, and `shift` attributes.
|
|
663
665
|
|
|
664
666
|
- `placement` specifies the preferred position where the bib should appear relative to the trigger.
|
|
665
667
|
- `offset` sets the distance between the trigger and the bib.
|
|
666
668
|
- When `autoPlacement` is enabled, smart positioning logic is applied to determine the best placement for the bib. If all sides have sufficient space, the bib will appear in the position specified by `placement`.
|
|
667
669
|
- Unless `noFlip` is enabled, if there isn't enough space for the preferred `placement`, the bib will automatically flip to an alternative position.
|
|
670
|
+
- `shift` when enabled, adjusts the bib position when it would overflow the viewport boundaries, ensuring it remains visible.
|
|
668
671
|
|
|
669
672
|
<div class="exampleWrapper">
|
|
670
673
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/floaterConfig.html) -->
|
|
@@ -685,6 +688,16 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
|
|
|
685
688
|
<span slot="fromLabel">right with 20px offset, noFlip and autoPlacement</span>
|
|
686
689
|
<span slot="bib.fullscreen.dateLabel">Choose a date</span>
|
|
687
690
|
</auro-datepicker>
|
|
691
|
+
</div>
|
|
692
|
+
<div style="width: 600px; padding-top: 1em;">
|
|
693
|
+
<p>Range bottom-start with 20px offset, noFlip and shift enabled</p>
|
|
694
|
+
<auro-datepicker range offset="20" placement="bottom-start" shift noFlip minDate="07/08/2025">
|
|
695
|
+
<span slot="ariaLabel.bib.close">Close Calendar</span>
|
|
696
|
+
<span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
|
|
697
|
+
<span slot="fromLabel">Departure</span>
|
|
698
|
+
<span slot="toLabel">Return</span>
|
|
699
|
+
<span slot="bib.fullscreen.dateLabel">Roundtrip</span>
|
|
700
|
+
</auro-datepicker>
|
|
688
701
|
</div>
|
|
689
702
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
690
703
|
</div>
|
|
@@ -711,6 +724,16 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
|
|
|
711
724
|
<span slot="bib.fullscreen.dateLabel">Choose a date</span>
|
|
712
725
|
</auro-datepicker>
|
|
713
726
|
</div>
|
|
727
|
+
<div style="width: 600px; padding-top: 1em;">
|
|
728
|
+
<p>Range bottom-start with 20px offset, noFlip and shift enabled</p>
|
|
729
|
+
<auro-datepicker range offset="20" placement="bottom-start" shift noFlip minDate="07/08/2025">
|
|
730
|
+
<span slot="ariaLabel.bib.close">Close Calendar</span>
|
|
731
|
+
<span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
|
|
732
|
+
<span slot="fromLabel">Departure</span>
|
|
733
|
+
<span slot="toLabel">Return</span>
|
|
734
|
+
<span slot="bib.fullscreen.dateLabel">Roundtrip</span>
|
|
735
|
+
</auro-datepicker>
|
|
736
|
+
</div>
|
|
714
737
|
```
|
|
715
738
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
716
739
|
</auro-accordion>
|