@aurodesignsystem/auro-formkit 3.0.0 → 3.1.0-beta.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/CHANGELOG.md +19 -0
- package/components/bibtemplate/dist/auro-bibtemplate.d.ts +1 -0
- package/components/bibtemplate/dist/index.js +2 -0
- package/components/bibtemplate/dist/registered.js +2 -0
- package/components/checkbox/README.md +1 -1
- package/components/checkbox/demo/readme.md +1 -1
- package/components/combobox/README.md +1 -1
- package/components/combobox/demo/api.md +5 -5
- package/components/combobox/demo/api.min.js +54 -18
- package/components/combobox/demo/index.min.js +54 -18
- package/components/combobox/demo/readme.md +1 -1
- package/components/combobox/dist/auro-combobox.d.ts +16 -7
- package/components/combobox/dist/index.js +54 -18
- package/components/combobox/dist/registered.js +54 -18
- package/components/counter/README.md +1 -1
- package/components/counter/demo/api.md +2 -2
- package/components/counter/demo/api.min.js +33 -6
- package/components/counter/demo/index.min.js +33 -6
- package/components/counter/demo/readme.md +1 -1
- package/components/counter/dist/auro-counter-group.d.ts +9 -3
- package/components/counter/dist/index.js +33 -6
- package/components/counter/dist/registered.js +33 -6
- package/components/datepicker/README.md +1 -1
- package/components/datepicker/demo/api.md +3 -2
- package/components/datepicker/demo/api.min.js +63 -14
- package/components/datepicker/demo/index.min.js +63 -14
- package/components/datepicker/demo/readme.md +1 -1
- package/components/datepicker/dist/auro-calendar-cell.d.ts +1 -0
- package/components/datepicker/dist/auro-calendar-month.d.ts +1 -0
- package/components/datepicker/dist/auro-calendar.d.ts +3 -2
- package/components/datepicker/dist/auro-datepicker.d.ts +16 -0
- package/components/datepicker/dist/index.js +63 -14
- package/components/datepicker/dist/registered.js +63 -14
- package/components/dropdown/README.md +1 -1
- package/components/dropdown/demo/api.md +1 -1
- package/components/dropdown/demo/api.min.js +21 -3
- package/components/dropdown/demo/index.md +83 -0
- package/components/dropdown/demo/index.min.js +21 -3
- package/components/dropdown/demo/readme.md +1 -1
- package/components/dropdown/dist/auro-dropdown.d.ts +12 -1
- package/components/dropdown/dist/index.js +21 -3
- package/components/dropdown/dist/registered.js +21 -3
- package/components/form/README.md +1 -1
- package/components/form/demo/autocomplete.html +15 -0
- package/components/form/demo/readme.md +1 -1
- package/components/input/README.md +1 -1
- package/components/input/demo/api.min.js +10 -5
- package/components/input/demo/index.min.js +10 -5
- package/components/input/demo/readme.md +1 -1
- package/components/input/dist/base-input.d.ts +5 -0
- package/components/input/dist/index.js +10 -5
- package/components/input/dist/registered.js +10 -5
- package/components/menu/README.md +1 -1
- package/components/menu/demo/readme.md +1 -1
- package/components/radio/README.md +1 -1
- package/components/radio/demo/readme.md +1 -1
- package/components/select/README.md +1 -1
- package/components/select/demo/api.md +1 -1
- package/components/select/demo/api.min.js +28 -5
- package/components/select/demo/index.md +46 -1
- package/components/select/demo/index.min.js +28 -5
- package/components/select/demo/readme.md +1 -1
- package/components/select/dist/auro-select.d.ts +5 -2
- package/components/select/dist/index.js +28 -5
- package/components/select/dist/registered.js +28 -5
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,24 @@
|
|
|
1
1
|
# Semantic Release Automated Changelog
|
|
2
2
|
|
|
3
|
+
# [3.1.0-beta.1](https://github.com/AlaskaAirlines/auro-formkit/compare/v3.0.1...v3.1.0-beta.1) (2025-04-30)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Bug Fixes
|
|
7
|
+
|
|
8
|
+
* pr feedback Apr 28, 2025 ([2dcd705](https://github.com/AlaskaAirlines/auro-formkit/commit/2dcd70543c206229286a69364b7e503c6e12fb5f))
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Features
|
|
12
|
+
|
|
13
|
+
* surface fullscreenBreakpoint with new `disabled` value ([4f00b48](https://github.com/AlaskaAirlines/auro-formkit/commit/4f00b4808254490419ca6ae387344e49834ca896))
|
|
14
|
+
|
|
15
|
+
## [3.0.1](https://github.com/AlaskaAirlines/auro-formkit/compare/v3.0.0...v3.0.1) (2025-04-29)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### Bug Fixes
|
|
19
|
+
|
|
20
|
+
* add `reflect: true` on boolean props ([05cc3db](https://github.com/AlaskaAirlines/auro-formkit/commit/05cc3db9a5069a172a835066d4b08a2082c318e3))
|
|
21
|
+
|
|
3
22
|
# [3.0.0](https://github.com/AlaskaAirlines/auro-formkit/compare/v2.2.1...v3.0.0) (2025-04-29)
|
|
4
23
|
|
|
5
24
|
|
|
@@ -665,6 +665,8 @@ class AuroBibtemplate extends LitElement {
|
|
|
665
665
|
constructor() {
|
|
666
666
|
super();
|
|
667
667
|
|
|
668
|
+
this.large = false;
|
|
669
|
+
|
|
668
670
|
AuroLibraryRuntimeUtils$1.prototype.handleComponentTagRename(this, 'auro-bibtemplate');
|
|
669
671
|
|
|
670
672
|
const versioning = new AuroDependencyVersioning();
|
|
@@ -665,6 +665,8 @@ class AuroBibtemplate extends LitElement {
|
|
|
665
665
|
constructor() {
|
|
666
666
|
super();
|
|
667
667
|
|
|
668
|
+
this.large = false;
|
|
669
|
+
|
|
668
670
|
AuroLibraryRuntimeUtils$1.prototype.handleComponentTagRename(this, 'auro-bibtemplate');
|
|
669
671
|
|
|
670
672
|
const versioning = new AuroDependencyVersioning();
|
|
@@ -106,7 +106,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
|
|
|
106
106
|
In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
|
|
107
107
|
|
|
108
108
|
```html
|
|
109
|
-
<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@
|
|
109
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.0.1/auro-checkbox/+esm"></script>
|
|
110
110
|
```
|
|
111
111
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
112
112
|
|
|
@@ -106,7 +106,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
|
|
|
106
106
|
In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
|
|
107
107
|
|
|
108
108
|
```html
|
|
109
|
-
<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@
|
|
109
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.0.1/auro-checkbox/+esm"></script>
|
|
110
110
|
```
|
|
111
111
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
112
112
|
|
|
@@ -111,7 +111,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
|
|
|
111
111
|
In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
|
|
112
112
|
|
|
113
113
|
```html
|
|
114
|
-
<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@
|
|
114
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.0.1/auro-combobox/+esm"></script>
|
|
115
115
|
```
|
|
116
116
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
117
117
|
|
|
@@ -12,14 +12,14 @@
|
|
|
12
12
|
| [checkmark](#checkmark) | `checkmark` | `boolean` | | When attribute is present auro-menu will apply checkmarks to selected options. |
|
|
13
13
|
| [disabled](#disabled) | `disabled` | `boolean` | | If set, disables the combobox. |
|
|
14
14
|
| [error](#error) | `error` | `string` | | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
|
|
15
|
-
| [fullscreenBreakpoint](#fullscreenBreakpoint) | `fullscreenBreakpoint` | `string` | "sm" | Defines the screen size breakpoint (`
|
|
15
|
+
| [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. |
|
|
16
16
|
| [largeFullscreenHeadline](#largeFullscreenHeadline) | `largeFullscreenHeadline` | `boolean` | | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600 |
|
|
17
|
-
| [noFilter](#noFilter) | `noFilter` | `boolean` |
|
|
17
|
+
| [noFilter](#noFilter) | `noFilter` | `boolean` | | If set, combobox will not filter menuoptions based in input. |
|
|
18
18
|
| [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`. |
|
|
19
19
|
| [noValidate](#noValidate) | `noValidate` | `boolean` | | If set, disables auto-validation on blur. |
|
|
20
20
|
| [offset](#offset) | `offset` | `number` | "0" | Gap between the trigger element and bib. |
|
|
21
21
|
| [onDark](#onDark) | `onDark` | `boolean` | | If declared, onDark styles will be applied to the trigger. |
|
|
22
|
-
| [optionSelected](#optionSelected) | `optionSelected` | `object` |
|
|
22
|
+
| [optionSelected](#optionSelected) | `optionSelected` | `object` | | Specifies the current selected option. |
|
|
23
23
|
| [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" |
|
|
24
24
|
| [required](#required) | `required` | `boolean` | | Populates the `required` attribute on the input. Used for client-side validation. |
|
|
25
25
|
| [setCustomValidity](#setCustomValidity) | `setCustomValidity` | `string` | | Sets a custom help text message to display for all validityStates. |
|
|
@@ -27,8 +27,8 @@
|
|
|
27
27
|
| [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` | `string` | | Custom help text message to display when validity = `valueMissing`. |
|
|
28
28
|
| [triggerIcon](#triggerIcon) | `triggerIcon` | `boolean` | | If set, the `icon` attribute will be applied to the trigger `auro-input` element. |
|
|
29
29
|
| [type](#type) | `type` | `string` | | Applies the defined value as the type attribute on auro-input. |
|
|
30
|
-
| [validity](#validity) | `validity` | `string` |
|
|
31
|
-
| [value](#value) | `value` | |
|
|
30
|
+
| [validity](#validity) | `validity` | `string` | | Specifies the `validityState` this element is in. |
|
|
31
|
+
| [value](#value) | `value` | | | Value selected for the dropdown menu. |
|
|
32
32
|
|
|
33
33
|
## Methods
|
|
34
34
|
|
|
@@ -3214,6 +3214,7 @@ var tokensCss$1$2 = i$5`:host{--ds-auro-dropdown-label-text-color: var(--ds-basi
|
|
|
3214
3214
|
|
|
3215
3215
|
const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';
|
|
3216
3216
|
const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [
|
|
3217
|
+
'xl',
|
|
3217
3218
|
'lg',
|
|
3218
3219
|
'md',
|
|
3219
3220
|
'sm',
|
|
@@ -3285,6 +3286,7 @@ class AuroDropdownBib extends r$1 {
|
|
|
3285
3286
|
|
|
3286
3287
|
set mobileFullscreenBreakpoint(value) {
|
|
3287
3288
|
// verify the defined breakpoint is valid and exit out if not
|
|
3289
|
+
// 'disabled' is a design token breakpoint so it acts as our "undefined" value
|
|
3288
3290
|
const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined;
|
|
3289
3291
|
if (!validatedValue) {
|
|
3290
3292
|
this._mobileBreakpointValue = undefined;
|
|
@@ -3797,7 +3799,12 @@ class AuroDropdown extends r$1 {
|
|
|
3797
3799
|
},
|
|
3798
3800
|
|
|
3799
3801
|
/**
|
|
3800
|
-
* Defines the screen size breakpoint (`
|
|
3802
|
+
* Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
|
|
3803
|
+
* at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
|
|
3804
|
+
*
|
|
3805
|
+
* When expanded, the dropdown will automatically display in fullscreen mode
|
|
3806
|
+
* if the screen size is equal to or smaller than the selected breakpoint.
|
|
3807
|
+
* @default sm
|
|
3801
3808
|
*/
|
|
3802
3809
|
fullscreenBreakpoint: {
|
|
3803
3810
|
type: String,
|
|
@@ -3920,6 +3927,15 @@ class AuroDropdown extends r$1 {
|
|
|
3920
3927
|
AuroLibraryRuntimeUtils$1$2.prototype.registerComponent(name, AuroDropdown);
|
|
3921
3928
|
}
|
|
3922
3929
|
|
|
3930
|
+
/**
|
|
3931
|
+
* Accessor for reusing the focusable entity query string.
|
|
3932
|
+
* @private
|
|
3933
|
+
* @returns {string}
|
|
3934
|
+
*/
|
|
3935
|
+
get focusableEntityQuery () {
|
|
3936
|
+
return 'auro-input, [auro-input], auro-button, [auro-button], button, input';
|
|
3937
|
+
}
|
|
3938
|
+
|
|
3923
3939
|
connectedCallback() {
|
|
3924
3940
|
super.connectedCallback();
|
|
3925
3941
|
}
|
|
@@ -3933,6 +3949,8 @@ class AuroDropdown extends r$1 {
|
|
|
3933
3949
|
updated(changedProperties) {
|
|
3934
3950
|
this.floater.handleUpdate(changedProperties);
|
|
3935
3951
|
|
|
3952
|
+
// Note: `disabled` is not a breakpoint (it is not a screen size),
|
|
3953
|
+
// so it looks like we never consume this - however, dropdownBib handles this in the setter as "undefined"
|
|
3936
3954
|
if (changedProperties.has('fullscreenBreakpoint')) {
|
|
3937
3955
|
this.bibContent.mobileFullscreenBreakpoint = this.fullscreenBreakpoint;
|
|
3938
3956
|
}
|
|
@@ -4068,7 +4086,7 @@ class AuroDropdown extends r$1 {
|
|
|
4068
4086
|
|
|
4069
4087
|
this.triggerContentSlot.forEach((node) => {
|
|
4070
4088
|
if (node.querySelectorAll) {
|
|
4071
|
-
const auroElements = node.querySelectorAll(
|
|
4089
|
+
const auroElements = node.querySelectorAll(this.focusableEntityQuery);
|
|
4072
4090
|
auroElements.forEach((auroEl) => {
|
|
4073
4091
|
auroEl.addEventListener('focus', this.bindFocusEventToTrigger);
|
|
4074
4092
|
auroEl.addEventListener('blur', this.bindFocusEventToTrigger);
|
|
@@ -4089,7 +4107,7 @@ class AuroDropdown extends r$1 {
|
|
|
4089
4107
|
|
|
4090
4108
|
this.triggerContentSlot.forEach((node) => {
|
|
4091
4109
|
if (node.querySelectorAll) {
|
|
4092
|
-
const auroElements = node.querySelectorAll(
|
|
4110
|
+
const auroElements = node.querySelectorAll(this.focusableEntityQuery);
|
|
4093
4111
|
auroElements.forEach((auroEl) => {
|
|
4094
4112
|
auroEl.removeEventListener('focus', this.bindFocusEventToTrigger);
|
|
4095
4113
|
auroEl.removeEventListener('blur', this.bindFocusEventToTrigger);
|
|
@@ -8764,7 +8782,8 @@ class BaseInput extends r$1 {
|
|
|
8764
8782
|
* If set, disables the input.
|
|
8765
8783
|
*/
|
|
8766
8784
|
disabled: {
|
|
8767
|
-
type: Boolean
|
|
8785
|
+
type: Boolean,
|
|
8786
|
+
reflect: true
|
|
8768
8787
|
},
|
|
8769
8788
|
|
|
8770
8789
|
/**
|
|
@@ -8794,7 +8813,8 @@ class BaseInput extends r$1 {
|
|
|
8794
8813
|
* If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format.
|
|
8795
8814
|
*/
|
|
8796
8815
|
icon: {
|
|
8797
|
-
type: Boolean
|
|
8816
|
+
type: Boolean,
|
|
8817
|
+
reflect: true
|
|
8798
8818
|
},
|
|
8799
8819
|
|
|
8800
8820
|
/**
|
|
@@ -8850,7 +8870,8 @@ class BaseInput extends r$1 {
|
|
|
8850
8870
|
* If set, disables auto-validation on blur.
|
|
8851
8871
|
*/
|
|
8852
8872
|
noValidate: {
|
|
8853
|
-
type: Boolean
|
|
8873
|
+
type: Boolean,
|
|
8874
|
+
reflect: true
|
|
8854
8875
|
},
|
|
8855
8876
|
|
|
8856
8877
|
/**
|
|
@@ -8880,14 +8901,16 @@ class BaseInput extends r$1 {
|
|
|
8880
8901
|
* Makes the input read-only, but can be set programmatically.
|
|
8881
8902
|
*/
|
|
8882
8903
|
readonly: {
|
|
8883
|
-
type: Boolean
|
|
8904
|
+
type: Boolean,
|
|
8905
|
+
reflect: true
|
|
8884
8906
|
},
|
|
8885
8907
|
|
|
8886
8908
|
/**
|
|
8887
8909
|
* Populates the `required` attribute on the input. Used for client-side validation.
|
|
8888
8910
|
*/
|
|
8889
8911
|
required: {
|
|
8890
|
-
type: Boolean
|
|
8912
|
+
type: Boolean,
|
|
8913
|
+
reflect: true
|
|
8891
8914
|
},
|
|
8892
8915
|
|
|
8893
8916
|
/**
|
|
@@ -11475,6 +11498,8 @@ class AuroBibtemplate extends r$1 {
|
|
|
11475
11498
|
constructor() {
|
|
11476
11499
|
super();
|
|
11477
11500
|
|
|
11501
|
+
this.large = false;
|
|
11502
|
+
|
|
11478
11503
|
AuroLibraryRuntimeUtils$1.prototype.handleComponentTagRename(this, 'auro-bibtemplate');
|
|
11479
11504
|
|
|
11480
11505
|
const versioning = new AuroDependencyVersioning();
|
|
@@ -11723,11 +11748,6 @@ class AuroCombobox extends r$1 {
|
|
|
11723
11748
|
constructor() {
|
|
11724
11749
|
super();
|
|
11725
11750
|
|
|
11726
|
-
this.noFilter = false;
|
|
11727
|
-
this.validity = undefined;
|
|
11728
|
-
this.value = undefined;
|
|
11729
|
-
this.optionSelected = undefined;
|
|
11730
|
-
|
|
11731
11751
|
this.privateDefaults();
|
|
11732
11752
|
}
|
|
11733
11753
|
|
|
@@ -11737,11 +11757,24 @@ class AuroCombobox extends r$1 {
|
|
|
11737
11757
|
*/
|
|
11738
11758
|
privateDefaults() {
|
|
11739
11759
|
this.onDark = false;
|
|
11760
|
+
|
|
11761
|
+
this.noFilter = false;
|
|
11762
|
+
this.validity = undefined;
|
|
11763
|
+
this.value = undefined;
|
|
11764
|
+
this.optionSelected = undefined;
|
|
11765
|
+
|
|
11766
|
+
this.checkmark = false;
|
|
11767
|
+
this.disabled = false;
|
|
11768
|
+
this.noValidate = false;
|
|
11769
|
+
this.required = false;
|
|
11770
|
+
this.triggerIcon = false;
|
|
11771
|
+
|
|
11740
11772
|
this.availableOptions = [];
|
|
11741
11773
|
this.optionActive = null;
|
|
11742
11774
|
this.msgSelectionMissing = 'Please select an option.';
|
|
11743
11775
|
|
|
11744
11776
|
this.fullscreenBreakpoint = 'sm';
|
|
11777
|
+
this.largeFullscreenHeadline = false;
|
|
11745
11778
|
|
|
11746
11779
|
this.validation = new AuroFormValidation$1();
|
|
11747
11780
|
|
|
@@ -11832,7 +11865,8 @@ class AuroCombobox extends r$1 {
|
|
|
11832
11865
|
* If set, disables auto-validation on blur.
|
|
11833
11866
|
*/
|
|
11834
11867
|
noValidate: {
|
|
11835
|
-
type: Boolean
|
|
11868
|
+
type: Boolean,
|
|
11869
|
+
reflect: true
|
|
11836
11870
|
},
|
|
11837
11871
|
|
|
11838
11872
|
/**
|
|
@@ -11946,8 +11980,11 @@ class AuroCombobox extends r$1 {
|
|
|
11946
11980
|
},
|
|
11947
11981
|
|
|
11948
11982
|
/**
|
|
11949
|
-
* Defines the screen size breakpoint (`
|
|
11950
|
-
*
|
|
11983
|
+
* Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
|
|
11984
|
+
* at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
|
|
11985
|
+
*
|
|
11986
|
+
* When expanded, the dropdown will automatically display in fullscreen mode
|
|
11987
|
+
* if the screen size is equal to or smaller than the selected breakpoint.
|
|
11951
11988
|
* @default sm
|
|
11952
11989
|
*/
|
|
11953
11990
|
fullscreenBreakpoint: {
|
|
@@ -11959,8 +11996,7 @@ class AuroCombobox extends r$1 {
|
|
|
11959
11996
|
* @private
|
|
11960
11997
|
*/
|
|
11961
11998
|
isDropdownFullscreen: {
|
|
11962
|
-
type: Boolean
|
|
11963
|
-
reflect: false
|
|
11999
|
+
type: Boolean
|
|
11964
12000
|
}
|
|
11965
12001
|
};
|
|
11966
12002
|
}
|
|
@@ -3072,6 +3072,7 @@ var tokensCss$1$2 = i$5`:host{--ds-auro-dropdown-label-text-color: var(--ds-basi
|
|
|
3072
3072
|
|
|
3073
3073
|
const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';
|
|
3074
3074
|
const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [
|
|
3075
|
+
'xl',
|
|
3075
3076
|
'lg',
|
|
3076
3077
|
'md',
|
|
3077
3078
|
'sm',
|
|
@@ -3143,6 +3144,7 @@ class AuroDropdownBib extends r$1 {
|
|
|
3143
3144
|
|
|
3144
3145
|
set mobileFullscreenBreakpoint(value) {
|
|
3145
3146
|
// verify the defined breakpoint is valid and exit out if not
|
|
3147
|
+
// 'disabled' is a design token breakpoint so it acts as our "undefined" value
|
|
3146
3148
|
const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined;
|
|
3147
3149
|
if (!validatedValue) {
|
|
3148
3150
|
this._mobileBreakpointValue = undefined;
|
|
@@ -3655,7 +3657,12 @@ class AuroDropdown extends r$1 {
|
|
|
3655
3657
|
},
|
|
3656
3658
|
|
|
3657
3659
|
/**
|
|
3658
|
-
* Defines the screen size breakpoint (`
|
|
3660
|
+
* Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
|
|
3661
|
+
* at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
|
|
3662
|
+
*
|
|
3663
|
+
* When expanded, the dropdown will automatically display in fullscreen mode
|
|
3664
|
+
* if the screen size is equal to or smaller than the selected breakpoint.
|
|
3665
|
+
* @default sm
|
|
3659
3666
|
*/
|
|
3660
3667
|
fullscreenBreakpoint: {
|
|
3661
3668
|
type: String,
|
|
@@ -3778,6 +3785,15 @@ class AuroDropdown extends r$1 {
|
|
|
3778
3785
|
AuroLibraryRuntimeUtils$1$2.prototype.registerComponent(name, AuroDropdown);
|
|
3779
3786
|
}
|
|
3780
3787
|
|
|
3788
|
+
/**
|
|
3789
|
+
* Accessor for reusing the focusable entity query string.
|
|
3790
|
+
* @private
|
|
3791
|
+
* @returns {string}
|
|
3792
|
+
*/
|
|
3793
|
+
get focusableEntityQuery () {
|
|
3794
|
+
return 'auro-input, [auro-input], auro-button, [auro-button], button, input';
|
|
3795
|
+
}
|
|
3796
|
+
|
|
3781
3797
|
connectedCallback() {
|
|
3782
3798
|
super.connectedCallback();
|
|
3783
3799
|
}
|
|
@@ -3791,6 +3807,8 @@ class AuroDropdown extends r$1 {
|
|
|
3791
3807
|
updated(changedProperties) {
|
|
3792
3808
|
this.floater.handleUpdate(changedProperties);
|
|
3793
3809
|
|
|
3810
|
+
// Note: `disabled` is not a breakpoint (it is not a screen size),
|
|
3811
|
+
// so it looks like we never consume this - however, dropdownBib handles this in the setter as "undefined"
|
|
3794
3812
|
if (changedProperties.has('fullscreenBreakpoint')) {
|
|
3795
3813
|
this.bibContent.mobileFullscreenBreakpoint = this.fullscreenBreakpoint;
|
|
3796
3814
|
}
|
|
@@ -3926,7 +3944,7 @@ class AuroDropdown extends r$1 {
|
|
|
3926
3944
|
|
|
3927
3945
|
this.triggerContentSlot.forEach((node) => {
|
|
3928
3946
|
if (node.querySelectorAll) {
|
|
3929
|
-
const auroElements = node.querySelectorAll(
|
|
3947
|
+
const auroElements = node.querySelectorAll(this.focusableEntityQuery);
|
|
3930
3948
|
auroElements.forEach((auroEl) => {
|
|
3931
3949
|
auroEl.addEventListener('focus', this.bindFocusEventToTrigger);
|
|
3932
3950
|
auroEl.addEventListener('blur', this.bindFocusEventToTrigger);
|
|
@@ -3947,7 +3965,7 @@ class AuroDropdown extends r$1 {
|
|
|
3947
3965
|
|
|
3948
3966
|
this.triggerContentSlot.forEach((node) => {
|
|
3949
3967
|
if (node.querySelectorAll) {
|
|
3950
|
-
const auroElements = node.querySelectorAll(
|
|
3968
|
+
const auroElements = node.querySelectorAll(this.focusableEntityQuery);
|
|
3951
3969
|
auroElements.forEach((auroEl) => {
|
|
3952
3970
|
auroEl.removeEventListener('focus', this.bindFocusEventToTrigger);
|
|
3953
3971
|
auroEl.removeEventListener('blur', this.bindFocusEventToTrigger);
|
|
@@ -8622,7 +8640,8 @@ class BaseInput extends r$1 {
|
|
|
8622
8640
|
* If set, disables the input.
|
|
8623
8641
|
*/
|
|
8624
8642
|
disabled: {
|
|
8625
|
-
type: Boolean
|
|
8643
|
+
type: Boolean,
|
|
8644
|
+
reflect: true
|
|
8626
8645
|
},
|
|
8627
8646
|
|
|
8628
8647
|
/**
|
|
@@ -8652,7 +8671,8 @@ class BaseInput extends r$1 {
|
|
|
8652
8671
|
* If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format.
|
|
8653
8672
|
*/
|
|
8654
8673
|
icon: {
|
|
8655
|
-
type: Boolean
|
|
8674
|
+
type: Boolean,
|
|
8675
|
+
reflect: true
|
|
8656
8676
|
},
|
|
8657
8677
|
|
|
8658
8678
|
/**
|
|
@@ -8708,7 +8728,8 @@ class BaseInput extends r$1 {
|
|
|
8708
8728
|
* If set, disables auto-validation on blur.
|
|
8709
8729
|
*/
|
|
8710
8730
|
noValidate: {
|
|
8711
|
-
type: Boolean
|
|
8731
|
+
type: Boolean,
|
|
8732
|
+
reflect: true
|
|
8712
8733
|
},
|
|
8713
8734
|
|
|
8714
8735
|
/**
|
|
@@ -8738,14 +8759,16 @@ class BaseInput extends r$1 {
|
|
|
8738
8759
|
* Makes the input read-only, but can be set programmatically.
|
|
8739
8760
|
*/
|
|
8740
8761
|
readonly: {
|
|
8741
|
-
type: Boolean
|
|
8762
|
+
type: Boolean,
|
|
8763
|
+
reflect: true
|
|
8742
8764
|
},
|
|
8743
8765
|
|
|
8744
8766
|
/**
|
|
8745
8767
|
* Populates the `required` attribute on the input. Used for client-side validation.
|
|
8746
8768
|
*/
|
|
8747
8769
|
required: {
|
|
8748
|
-
type: Boolean
|
|
8770
|
+
type: Boolean,
|
|
8771
|
+
reflect: true
|
|
8749
8772
|
},
|
|
8750
8773
|
|
|
8751
8774
|
/**
|
|
@@ -11333,6 +11356,8 @@ class AuroBibtemplate extends r$1 {
|
|
|
11333
11356
|
constructor() {
|
|
11334
11357
|
super();
|
|
11335
11358
|
|
|
11359
|
+
this.large = false;
|
|
11360
|
+
|
|
11336
11361
|
AuroLibraryRuntimeUtils$1.prototype.handleComponentTagRename(this, 'auro-bibtemplate');
|
|
11337
11362
|
|
|
11338
11363
|
const versioning = new AuroDependencyVersioning();
|
|
@@ -11581,11 +11606,6 @@ class AuroCombobox extends r$1 {
|
|
|
11581
11606
|
constructor() {
|
|
11582
11607
|
super();
|
|
11583
11608
|
|
|
11584
|
-
this.noFilter = false;
|
|
11585
|
-
this.validity = undefined;
|
|
11586
|
-
this.value = undefined;
|
|
11587
|
-
this.optionSelected = undefined;
|
|
11588
|
-
|
|
11589
11609
|
this.privateDefaults();
|
|
11590
11610
|
}
|
|
11591
11611
|
|
|
@@ -11595,11 +11615,24 @@ class AuroCombobox extends r$1 {
|
|
|
11595
11615
|
*/
|
|
11596
11616
|
privateDefaults() {
|
|
11597
11617
|
this.onDark = false;
|
|
11618
|
+
|
|
11619
|
+
this.noFilter = false;
|
|
11620
|
+
this.validity = undefined;
|
|
11621
|
+
this.value = undefined;
|
|
11622
|
+
this.optionSelected = undefined;
|
|
11623
|
+
|
|
11624
|
+
this.checkmark = false;
|
|
11625
|
+
this.disabled = false;
|
|
11626
|
+
this.noValidate = false;
|
|
11627
|
+
this.required = false;
|
|
11628
|
+
this.triggerIcon = false;
|
|
11629
|
+
|
|
11598
11630
|
this.availableOptions = [];
|
|
11599
11631
|
this.optionActive = null;
|
|
11600
11632
|
this.msgSelectionMissing = 'Please select an option.';
|
|
11601
11633
|
|
|
11602
11634
|
this.fullscreenBreakpoint = 'sm';
|
|
11635
|
+
this.largeFullscreenHeadline = false;
|
|
11603
11636
|
|
|
11604
11637
|
this.validation = new AuroFormValidation$1();
|
|
11605
11638
|
|
|
@@ -11690,7 +11723,8 @@ class AuroCombobox extends r$1 {
|
|
|
11690
11723
|
* If set, disables auto-validation on blur.
|
|
11691
11724
|
*/
|
|
11692
11725
|
noValidate: {
|
|
11693
|
-
type: Boolean
|
|
11726
|
+
type: Boolean,
|
|
11727
|
+
reflect: true
|
|
11694
11728
|
},
|
|
11695
11729
|
|
|
11696
11730
|
/**
|
|
@@ -11804,8 +11838,11 @@ class AuroCombobox extends r$1 {
|
|
|
11804
11838
|
},
|
|
11805
11839
|
|
|
11806
11840
|
/**
|
|
11807
|
-
* Defines the screen size breakpoint (`
|
|
11808
|
-
*
|
|
11841
|
+
* Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
|
|
11842
|
+
* at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
|
|
11843
|
+
*
|
|
11844
|
+
* When expanded, the dropdown will automatically display in fullscreen mode
|
|
11845
|
+
* if the screen size is equal to or smaller than the selected breakpoint.
|
|
11809
11846
|
* @default sm
|
|
11810
11847
|
*/
|
|
11811
11848
|
fullscreenBreakpoint: {
|
|
@@ -11817,8 +11854,7 @@ class AuroCombobox extends r$1 {
|
|
|
11817
11854
|
* @private
|
|
11818
11855
|
*/
|
|
11819
11856
|
isDropdownFullscreen: {
|
|
11820
|
-
type: Boolean
|
|
11821
|
-
reflect: false
|
|
11857
|
+
type: Boolean
|
|
11822
11858
|
}
|
|
11823
11859
|
};
|
|
11824
11860
|
}
|
|
@@ -111,7 +111,7 @@ The use of any Auro custom element has a dependency on the [Auro Design Tokens](
|
|
|
111
111
|
In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
|
|
112
112
|
|
|
113
113
|
```html
|
|
114
|
-
<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@
|
|
114
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.0.1/auro-combobox/+esm"></script>
|
|
115
115
|
```
|
|
116
116
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
117
117
|
|
|
@@ -65,6 +65,7 @@ export class AuroCombobox extends LitElement {
|
|
|
65
65
|
*/
|
|
66
66
|
noValidate: {
|
|
67
67
|
type: BooleanConstructor;
|
|
68
|
+
reflect: boolean;
|
|
68
69
|
};
|
|
69
70
|
/**
|
|
70
71
|
* Gap between the trigger element and bib.
|
|
@@ -164,8 +165,11 @@ export class AuroCombobox extends LitElement {
|
|
|
164
165
|
reflect: boolean;
|
|
165
166
|
};
|
|
166
167
|
/**
|
|
167
|
-
* Defines the screen size breakpoint (`
|
|
168
|
-
*
|
|
168
|
+
* Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
|
|
169
|
+
* at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
|
|
170
|
+
*
|
|
171
|
+
* When expanded, the dropdown will automatically display in fullscreen mode
|
|
172
|
+
* if the screen size is equal to or smaller than the selected breakpoint.
|
|
169
173
|
* @default sm
|
|
170
174
|
*/
|
|
171
175
|
fullscreenBreakpoint: {
|
|
@@ -177,7 +181,6 @@ export class AuroCombobox extends LitElement {
|
|
|
177
181
|
*/
|
|
178
182
|
isDropdownFullscreen: {
|
|
179
183
|
type: BooleanConstructor;
|
|
180
|
-
reflect: boolean;
|
|
181
184
|
};
|
|
182
185
|
};
|
|
183
186
|
static get styles(): import("lit").CSSResult[];
|
|
@@ -190,20 +193,26 @@ export class AuroCombobox extends LitElement {
|
|
|
190
193
|
*
|
|
191
194
|
*/
|
|
192
195
|
static register(name?: string): void;
|
|
193
|
-
noFilter: boolean;
|
|
194
|
-
validity: any;
|
|
195
|
-
value: any;
|
|
196
|
-
optionSelected: any[];
|
|
197
196
|
/**
|
|
198
197
|
* @private
|
|
199
198
|
* @returns {void} Internal defaults.
|
|
200
199
|
*/
|
|
201
200
|
private privateDefaults;
|
|
202
201
|
onDark: boolean;
|
|
202
|
+
noFilter: boolean;
|
|
203
|
+
validity: any;
|
|
204
|
+
value: any;
|
|
205
|
+
optionSelected: any[];
|
|
206
|
+
checkmark: boolean;
|
|
207
|
+
disabled: boolean;
|
|
208
|
+
noValidate: boolean;
|
|
209
|
+
required: boolean;
|
|
210
|
+
triggerIcon: boolean;
|
|
203
211
|
availableOptions: any[];
|
|
204
212
|
optionActive: any;
|
|
205
213
|
msgSelectionMissing: string;
|
|
206
214
|
fullscreenBreakpoint: string;
|
|
215
|
+
largeFullscreenHeadline: boolean;
|
|
207
216
|
validation: AuroFormValidation;
|
|
208
217
|
runtimeUtils: any;
|
|
209
218
|
isHiddenWhileLoading: boolean;
|