@aurodesignsystem/auro-formkit 3.2.0-beta.1 → 3.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 +2 -7
- package/components/combobox/demo/api.md +1 -1
- package/components/combobox/demo/api.min.js +6 -26
- package/components/combobox/demo/index.min.js +6 -26
- package/components/combobox/dist/auro-combobox.d.ts +2 -5
- package/components/combobox/dist/index.js +5 -26
- package/components/combobox/dist/registered.js +5 -26
- package/components/counter/demo/api.md +1 -1
- package/components/counter/demo/api.min.js +5 -26
- package/components/counter/demo/index.min.js +5 -26
- package/components/counter/dist/auro-counter-group.d.ts +2 -5
- package/components/counter/dist/index.js +5 -26
- package/components/counter/dist/registered.js +5 -26
- package/components/datepicker/demo/api.md +0 -1
- package/components/datepicker/demo/api.min.js +4 -36
- package/components/datepicker/demo/index.min.js +4 -36
- package/components/datepicker/dist/auro-datepicker.d.ts +0 -13
- package/components/datepicker/dist/index.js +4 -36
- package/components/datepicker/dist/registered.js +4 -36
- package/components/dropdown/demo/api.md +1 -1
- package/components/dropdown/demo/api.min.js +3 -21
- package/components/dropdown/demo/index.md +0 -83
- package/components/dropdown/demo/index.min.js +3 -21
- package/components/dropdown/dist/auro-dropdown.d.ts +1 -12
- package/components/dropdown/dist/index.js +3 -21
- package/components/dropdown/dist/registered.js +3 -21
- package/components/menu/demo/api.min.js +1 -0
- package/components/menu/demo/index.min.js +1 -0
- package/components/menu/dist/index.js +1 -0
- package/components/menu/dist/registered.js +1 -0
- package/components/select/demo/api.md +6 -5
- package/components/select/demo/api.min.js +56 -26
- package/components/select/demo/index.md +1 -46
- package/components/select/demo/index.min.js +56 -26
- package/components/select/dist/auro-select.d.ts +5 -5
- package/components/select/dist/index.js +55 -26
- package/components/select/dist/registered.js +55 -26
- package/package.json +1 -1
- package/components/form/demo/autocomplete.html +0 -15
package/CHANGELOG.md
CHANGED
|
@@ -1,16 +1,11 @@
|
|
|
1
1
|
# Semantic Release Automated Changelog
|
|
2
2
|
|
|
3
|
-
# [3.2.0
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
### Bug Fixes
|
|
7
|
-
|
|
8
|
-
* pr feedback Apr 28, 2025 ([2dcd705](https://github.com/AlaskaAirlines/auro-formkit/commit/2dcd70543c206229286a69364b7e503c6e12fb5f))
|
|
3
|
+
# [3.2.0](https://github.com/AlaskaAirlines/auro-formkit/compare/v3.1.0...v3.2.0) (2025-04-30)
|
|
9
4
|
|
|
10
5
|
|
|
11
6
|
### Features
|
|
12
7
|
|
|
13
|
-
*
|
|
8
|
+
* added press-key-to-jump-to-selection functionality to auro-select component ([66fed78](https://github.com/AlaskaAirlines/auro-formkit/commit/66fed788ab07e431b42850da4167166eaa981473)), closes [#404](https://github.com/AlaskaAirlines/auro-formkit/issues/404)
|
|
14
9
|
|
|
15
10
|
# [3.1.0](https://github.com/AlaskaAirlines/auro-formkit/compare/v3.0.1...v3.1.0) (2025-04-30)
|
|
16
11
|
|
|
@@ -12,7 +12,7 @@
|
|
|
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 (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile.<br />When expanded, the dropdown will automatically display in fullscreen mode 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
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`. |
|
|
@@ -3657,7 +3657,6 @@ var tokensCss$1$2 = i$5`:host{--ds-auro-dropdown-label-text-color: var(--ds-basi
|
|
|
3657
3657
|
|
|
3658
3658
|
const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';
|
|
3659
3659
|
const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [
|
|
3660
|
-
'xl',
|
|
3661
3660
|
'lg',
|
|
3662
3661
|
'md',
|
|
3663
3662
|
'sm',
|
|
@@ -3729,7 +3728,6 @@ class AuroDropdownBib extends r$1 {
|
|
|
3729
3728
|
|
|
3730
3729
|
set mobileFullscreenBreakpoint(value) {
|
|
3731
3730
|
// verify the defined breakpoint is valid and exit out if not
|
|
3732
|
-
// 'disabled' is a design token breakpoint so it acts as our "undefined" value
|
|
3733
3731
|
const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined;
|
|
3734
3732
|
if (!validatedValue) {
|
|
3735
3733
|
this._mobileBreakpointValue = undefined;
|
|
@@ -4255,12 +4253,7 @@ class AuroDropdown extends r$1 {
|
|
|
4255
4253
|
},
|
|
4256
4254
|
|
|
4257
4255
|
/**
|
|
4258
|
-
* Defines the screen size breakpoint (`
|
|
4259
|
-
* at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
|
|
4260
|
-
*
|
|
4261
|
-
* When expanded, the dropdown will automatically display in fullscreen mode
|
|
4262
|
-
* if the screen size is equal to or smaller than the selected breakpoint.
|
|
4263
|
-
* @default sm
|
|
4256
|
+
* Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
|
|
4264
4257
|
*/
|
|
4265
4258
|
fullscreenBreakpoint: {
|
|
4266
4259
|
type: String,
|
|
@@ -4400,15 +4393,6 @@ class AuroDropdown extends r$1 {
|
|
|
4400
4393
|
AuroLibraryRuntimeUtils$1$2.prototype.registerComponent(name, AuroDropdown);
|
|
4401
4394
|
}
|
|
4402
4395
|
|
|
4403
|
-
/**
|
|
4404
|
-
* Accessor for reusing the focusable entity query string.
|
|
4405
|
-
* @private
|
|
4406
|
-
* @returns {string}
|
|
4407
|
-
*/
|
|
4408
|
-
get focusableEntityQuery () {
|
|
4409
|
-
return 'auro-input, [auro-input], auro-button, [auro-button], button, input';
|
|
4410
|
-
}
|
|
4411
|
-
|
|
4412
4396
|
connectedCallback() {
|
|
4413
4397
|
super.connectedCallback();
|
|
4414
4398
|
}
|
|
@@ -4422,8 +4406,6 @@ class AuroDropdown extends r$1 {
|
|
|
4422
4406
|
updated(changedProperties) {
|
|
4423
4407
|
this.floater.handleUpdate(changedProperties);
|
|
4424
4408
|
|
|
4425
|
-
// Note: `disabled` is not a breakpoint (it is not a screen size),
|
|
4426
|
-
// so it looks like we never consume this - however, dropdownBib handles this in the setter as "undefined"
|
|
4427
4409
|
if (changedProperties.has('fullscreenBreakpoint')) {
|
|
4428
4410
|
this.bibContent.mobileFullscreenBreakpoint = this.fullscreenBreakpoint;
|
|
4429
4411
|
}
|
|
@@ -4574,7 +4556,7 @@ class AuroDropdown extends r$1 {
|
|
|
4574
4556
|
|
|
4575
4557
|
this.triggerContentSlot.forEach((node) => {
|
|
4576
4558
|
if (node.querySelectorAll) {
|
|
4577
|
-
const auroElements = node.querySelectorAll(
|
|
4559
|
+
const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
|
|
4578
4560
|
auroElements.forEach((auroEl) => {
|
|
4579
4561
|
auroEl.addEventListener('focus', this.bindFocusEventToTrigger);
|
|
4580
4562
|
auroEl.addEventListener('blur', this.bindFocusEventToTrigger);
|
|
@@ -4595,7 +4577,7 @@ class AuroDropdown extends r$1 {
|
|
|
4595
4577
|
|
|
4596
4578
|
this.triggerContentSlot.forEach((node) => {
|
|
4597
4579
|
if (node.querySelectorAll) {
|
|
4598
|
-
const auroElements = node.querySelectorAll(
|
|
4580
|
+
const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
|
|
4599
4581
|
auroElements.forEach((auroEl) => {
|
|
4600
4582
|
auroEl.removeEventListener('focus', this.bindFocusEventToTrigger);
|
|
4601
4583
|
auroEl.removeEventListener('blur', this.bindFocusEventToTrigger);
|
|
@@ -13006,11 +12988,8 @@ class AuroCombobox extends r$1 {
|
|
|
13006
12988
|
},
|
|
13007
12989
|
|
|
13008
12990
|
/**
|
|
13009
|
-
* Defines the screen size breakpoint (`
|
|
13010
|
-
*
|
|
13011
|
-
*
|
|
13012
|
-
* When expanded, the dropdown will automatically display in fullscreen mode
|
|
13013
|
-
* if the screen size is equal to or smaller than the selected breakpoint.
|
|
12991
|
+
* Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile.
|
|
12992
|
+
* When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
|
|
13014
12993
|
* @default sm
|
|
13015
12994
|
*/
|
|
13016
12995
|
fullscreenBreakpoint: {
|
|
@@ -14544,6 +14523,7 @@ class AuroMenu extends r$1 {
|
|
|
14544
14523
|
this.items.forEach((item) => item.classList.remove('active'));
|
|
14545
14524
|
this.items[index].classList.add('active');
|
|
14546
14525
|
this.optionActive = this.items[index];
|
|
14526
|
+
this.index = index;
|
|
14547
14527
|
|
|
14548
14528
|
dispatchMenuEvent(this, 'auroMenu-activatedOption', this.items[index]);
|
|
14549
14529
|
}
|
|
@@ -3515,7 +3515,6 @@ var tokensCss$1$2 = i$5`:host{--ds-auro-dropdown-label-text-color: var(--ds-basi
|
|
|
3515
3515
|
|
|
3516
3516
|
const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';
|
|
3517
3517
|
const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [
|
|
3518
|
-
'xl',
|
|
3519
3518
|
'lg',
|
|
3520
3519
|
'md',
|
|
3521
3520
|
'sm',
|
|
@@ -3587,7 +3586,6 @@ class AuroDropdownBib extends r$1 {
|
|
|
3587
3586
|
|
|
3588
3587
|
set mobileFullscreenBreakpoint(value) {
|
|
3589
3588
|
// verify the defined breakpoint is valid and exit out if not
|
|
3590
|
-
// 'disabled' is a design token breakpoint so it acts as our "undefined" value
|
|
3591
3589
|
const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined;
|
|
3592
3590
|
if (!validatedValue) {
|
|
3593
3591
|
this._mobileBreakpointValue = undefined;
|
|
@@ -4113,12 +4111,7 @@ class AuroDropdown extends r$1 {
|
|
|
4113
4111
|
},
|
|
4114
4112
|
|
|
4115
4113
|
/**
|
|
4116
|
-
* Defines the screen size breakpoint (`
|
|
4117
|
-
* at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
|
|
4118
|
-
*
|
|
4119
|
-
* When expanded, the dropdown will automatically display in fullscreen mode
|
|
4120
|
-
* if the screen size is equal to or smaller than the selected breakpoint.
|
|
4121
|
-
* @default sm
|
|
4114
|
+
* Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
|
|
4122
4115
|
*/
|
|
4123
4116
|
fullscreenBreakpoint: {
|
|
4124
4117
|
type: String,
|
|
@@ -4258,15 +4251,6 @@ class AuroDropdown extends r$1 {
|
|
|
4258
4251
|
AuroLibraryRuntimeUtils$1$2.prototype.registerComponent(name, AuroDropdown);
|
|
4259
4252
|
}
|
|
4260
4253
|
|
|
4261
|
-
/**
|
|
4262
|
-
* Accessor for reusing the focusable entity query string.
|
|
4263
|
-
* @private
|
|
4264
|
-
* @returns {string}
|
|
4265
|
-
*/
|
|
4266
|
-
get focusableEntityQuery () {
|
|
4267
|
-
return 'auro-input, [auro-input], auro-button, [auro-button], button, input';
|
|
4268
|
-
}
|
|
4269
|
-
|
|
4270
4254
|
connectedCallback() {
|
|
4271
4255
|
super.connectedCallback();
|
|
4272
4256
|
}
|
|
@@ -4280,8 +4264,6 @@ class AuroDropdown extends r$1 {
|
|
|
4280
4264
|
updated(changedProperties) {
|
|
4281
4265
|
this.floater.handleUpdate(changedProperties);
|
|
4282
4266
|
|
|
4283
|
-
// Note: `disabled` is not a breakpoint (it is not a screen size),
|
|
4284
|
-
// so it looks like we never consume this - however, dropdownBib handles this in the setter as "undefined"
|
|
4285
4267
|
if (changedProperties.has('fullscreenBreakpoint')) {
|
|
4286
4268
|
this.bibContent.mobileFullscreenBreakpoint = this.fullscreenBreakpoint;
|
|
4287
4269
|
}
|
|
@@ -4432,7 +4414,7 @@ class AuroDropdown extends r$1 {
|
|
|
4432
4414
|
|
|
4433
4415
|
this.triggerContentSlot.forEach((node) => {
|
|
4434
4416
|
if (node.querySelectorAll) {
|
|
4435
|
-
const auroElements = node.querySelectorAll(
|
|
4417
|
+
const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
|
|
4436
4418
|
auroElements.forEach((auroEl) => {
|
|
4437
4419
|
auroEl.addEventListener('focus', this.bindFocusEventToTrigger);
|
|
4438
4420
|
auroEl.addEventListener('blur', this.bindFocusEventToTrigger);
|
|
@@ -4453,7 +4435,7 @@ class AuroDropdown extends r$1 {
|
|
|
4453
4435
|
|
|
4454
4436
|
this.triggerContentSlot.forEach((node) => {
|
|
4455
4437
|
if (node.querySelectorAll) {
|
|
4456
|
-
const auroElements = node.querySelectorAll(
|
|
4438
|
+
const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
|
|
4457
4439
|
auroElements.forEach((auroEl) => {
|
|
4458
4440
|
auroEl.removeEventListener('focus', this.bindFocusEventToTrigger);
|
|
4459
4441
|
auroEl.removeEventListener('blur', this.bindFocusEventToTrigger);
|
|
@@ -12864,11 +12846,8 @@ class AuroCombobox extends r$1 {
|
|
|
12864
12846
|
},
|
|
12865
12847
|
|
|
12866
12848
|
/**
|
|
12867
|
-
* Defines the screen size breakpoint (`
|
|
12868
|
-
*
|
|
12869
|
-
*
|
|
12870
|
-
* When expanded, the dropdown will automatically display in fullscreen mode
|
|
12871
|
-
* if the screen size is equal to or smaller than the selected breakpoint.
|
|
12849
|
+
* Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile.
|
|
12850
|
+
* When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
|
|
12872
12851
|
* @default sm
|
|
12873
12852
|
*/
|
|
12874
12853
|
fullscreenBreakpoint: {
|
|
@@ -14402,6 +14381,7 @@ class AuroMenu extends r$1 {
|
|
|
14402
14381
|
this.items.forEach((item) => item.classList.remove('active'));
|
|
14403
14382
|
this.items[index].classList.add('active');
|
|
14404
14383
|
this.optionActive = this.items[index];
|
|
14384
|
+
this.index = index;
|
|
14405
14385
|
|
|
14406
14386
|
dispatchMenuEvent(this, 'auroMenu-activatedOption', this.items[index]);
|
|
14407
14387
|
}
|
|
@@ -183,11 +183,8 @@ export class AuroCombobox extends LitElement {
|
|
|
183
183
|
reflect: boolean;
|
|
184
184
|
};
|
|
185
185
|
/**
|
|
186
|
-
* Defines the screen size breakpoint (`
|
|
187
|
-
*
|
|
188
|
-
*
|
|
189
|
-
* When expanded, the dropdown will automatically display in fullscreen mode
|
|
190
|
-
* if the screen size is equal to or smaller than the selected breakpoint.
|
|
186
|
+
* Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile.
|
|
187
|
+
* When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
|
|
191
188
|
* @default sm
|
|
192
189
|
*/
|
|
193
190
|
fullscreenBreakpoint: {
|
|
@@ -3446,7 +3446,6 @@ var tokensCss$1$1 = css`:host{--ds-auro-dropdown-label-text-color: var(--ds-basi
|
|
|
3446
3446
|
|
|
3447
3447
|
const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';
|
|
3448
3448
|
const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [
|
|
3449
|
-
'xl',
|
|
3450
3449
|
'lg',
|
|
3451
3450
|
'md',
|
|
3452
3451
|
'sm',
|
|
@@ -3518,7 +3517,6 @@ class AuroDropdownBib extends LitElement {
|
|
|
3518
3517
|
|
|
3519
3518
|
set mobileFullscreenBreakpoint(value) {
|
|
3520
3519
|
// verify the defined breakpoint is valid and exit out if not
|
|
3521
|
-
// 'disabled' is a design token breakpoint so it acts as our "undefined" value
|
|
3522
3520
|
const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined;
|
|
3523
3521
|
if (!validatedValue) {
|
|
3524
3522
|
this._mobileBreakpointValue = undefined;
|
|
@@ -4044,12 +4042,7 @@ class AuroDropdown extends LitElement {
|
|
|
4044
4042
|
},
|
|
4045
4043
|
|
|
4046
4044
|
/**
|
|
4047
|
-
* Defines the screen size breakpoint (`
|
|
4048
|
-
* at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
|
|
4049
|
-
*
|
|
4050
|
-
* When expanded, the dropdown will automatically display in fullscreen mode
|
|
4051
|
-
* if the screen size is equal to or smaller than the selected breakpoint.
|
|
4052
|
-
* @default sm
|
|
4045
|
+
* Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
|
|
4053
4046
|
*/
|
|
4054
4047
|
fullscreenBreakpoint: {
|
|
4055
4048
|
type: String,
|
|
@@ -4189,15 +4182,6 @@ class AuroDropdown extends LitElement {
|
|
|
4189
4182
|
AuroLibraryRuntimeUtils$1$2.prototype.registerComponent(name, AuroDropdown);
|
|
4190
4183
|
}
|
|
4191
4184
|
|
|
4192
|
-
/**
|
|
4193
|
-
* Accessor for reusing the focusable entity query string.
|
|
4194
|
-
* @private
|
|
4195
|
-
* @returns {string}
|
|
4196
|
-
*/
|
|
4197
|
-
get focusableEntityQuery () {
|
|
4198
|
-
return 'auro-input, [auro-input], auro-button, [auro-button], button, input';
|
|
4199
|
-
}
|
|
4200
|
-
|
|
4201
4185
|
connectedCallback() {
|
|
4202
4186
|
super.connectedCallback();
|
|
4203
4187
|
}
|
|
@@ -4211,8 +4195,6 @@ class AuroDropdown extends LitElement {
|
|
|
4211
4195
|
updated(changedProperties) {
|
|
4212
4196
|
this.floater.handleUpdate(changedProperties);
|
|
4213
4197
|
|
|
4214
|
-
// Note: `disabled` is not a breakpoint (it is not a screen size),
|
|
4215
|
-
// so it looks like we never consume this - however, dropdownBib handles this in the setter as "undefined"
|
|
4216
4198
|
if (changedProperties.has('fullscreenBreakpoint')) {
|
|
4217
4199
|
this.bibContent.mobileFullscreenBreakpoint = this.fullscreenBreakpoint;
|
|
4218
4200
|
}
|
|
@@ -4363,7 +4345,7 @@ class AuroDropdown extends LitElement {
|
|
|
4363
4345
|
|
|
4364
4346
|
this.triggerContentSlot.forEach((node) => {
|
|
4365
4347
|
if (node.querySelectorAll) {
|
|
4366
|
-
const auroElements = node.querySelectorAll(
|
|
4348
|
+
const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
|
|
4367
4349
|
auroElements.forEach((auroEl) => {
|
|
4368
4350
|
auroEl.addEventListener('focus', this.bindFocusEventToTrigger);
|
|
4369
4351
|
auroEl.addEventListener('blur', this.bindFocusEventToTrigger);
|
|
@@ -4384,7 +4366,7 @@ class AuroDropdown extends LitElement {
|
|
|
4384
4366
|
|
|
4385
4367
|
this.triggerContentSlot.forEach((node) => {
|
|
4386
4368
|
if (node.querySelectorAll) {
|
|
4387
|
-
const auroElements = node.querySelectorAll(
|
|
4369
|
+
const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
|
|
4388
4370
|
auroElements.forEach((auroEl) => {
|
|
4389
4371
|
auroEl.removeEventListener('focus', this.bindFocusEventToTrigger);
|
|
4390
4372
|
auroEl.removeEventListener('blur', this.bindFocusEventToTrigger);
|
|
@@ -12782,11 +12764,8 @@ class AuroCombobox extends LitElement {
|
|
|
12782
12764
|
},
|
|
12783
12765
|
|
|
12784
12766
|
/**
|
|
12785
|
-
* Defines the screen size breakpoint (`
|
|
12786
|
-
*
|
|
12787
|
-
*
|
|
12788
|
-
* When expanded, the dropdown will automatically display in fullscreen mode
|
|
12789
|
-
* if the screen size is equal to or smaller than the selected breakpoint.
|
|
12767
|
+
* Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile.
|
|
12768
|
+
* When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
|
|
12790
12769
|
* @default sm
|
|
12791
12770
|
*/
|
|
12792
12771
|
fullscreenBreakpoint: {
|
|
@@ -3446,7 +3446,6 @@ var tokensCss$1$1 = css`:host{--ds-auro-dropdown-label-text-color: var(--ds-basi
|
|
|
3446
3446
|
|
|
3447
3447
|
const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';
|
|
3448
3448
|
const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [
|
|
3449
|
-
'xl',
|
|
3450
3449
|
'lg',
|
|
3451
3450
|
'md',
|
|
3452
3451
|
'sm',
|
|
@@ -3518,7 +3517,6 @@ class AuroDropdownBib extends LitElement {
|
|
|
3518
3517
|
|
|
3519
3518
|
set mobileFullscreenBreakpoint(value) {
|
|
3520
3519
|
// verify the defined breakpoint is valid and exit out if not
|
|
3521
|
-
// 'disabled' is a design token breakpoint so it acts as our "undefined" value
|
|
3522
3520
|
const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined;
|
|
3523
3521
|
if (!validatedValue) {
|
|
3524
3522
|
this._mobileBreakpointValue = undefined;
|
|
@@ -4044,12 +4042,7 @@ class AuroDropdown extends LitElement {
|
|
|
4044
4042
|
},
|
|
4045
4043
|
|
|
4046
4044
|
/**
|
|
4047
|
-
* Defines the screen size breakpoint (`
|
|
4048
|
-
* at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
|
|
4049
|
-
*
|
|
4050
|
-
* When expanded, the dropdown will automatically display in fullscreen mode
|
|
4051
|
-
* if the screen size is equal to or smaller than the selected breakpoint.
|
|
4052
|
-
* @default sm
|
|
4045
|
+
* Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
|
|
4053
4046
|
*/
|
|
4054
4047
|
fullscreenBreakpoint: {
|
|
4055
4048
|
type: String,
|
|
@@ -4189,15 +4182,6 @@ class AuroDropdown extends LitElement {
|
|
|
4189
4182
|
AuroLibraryRuntimeUtils$1$2.prototype.registerComponent(name, AuroDropdown);
|
|
4190
4183
|
}
|
|
4191
4184
|
|
|
4192
|
-
/**
|
|
4193
|
-
* Accessor for reusing the focusable entity query string.
|
|
4194
|
-
* @private
|
|
4195
|
-
* @returns {string}
|
|
4196
|
-
*/
|
|
4197
|
-
get focusableEntityQuery () {
|
|
4198
|
-
return 'auro-input, [auro-input], auro-button, [auro-button], button, input';
|
|
4199
|
-
}
|
|
4200
|
-
|
|
4201
4185
|
connectedCallback() {
|
|
4202
4186
|
super.connectedCallback();
|
|
4203
4187
|
}
|
|
@@ -4211,8 +4195,6 @@ class AuroDropdown extends LitElement {
|
|
|
4211
4195
|
updated(changedProperties) {
|
|
4212
4196
|
this.floater.handleUpdate(changedProperties);
|
|
4213
4197
|
|
|
4214
|
-
// Note: `disabled` is not a breakpoint (it is not a screen size),
|
|
4215
|
-
// so it looks like we never consume this - however, dropdownBib handles this in the setter as "undefined"
|
|
4216
4198
|
if (changedProperties.has('fullscreenBreakpoint')) {
|
|
4217
4199
|
this.bibContent.mobileFullscreenBreakpoint = this.fullscreenBreakpoint;
|
|
4218
4200
|
}
|
|
@@ -4363,7 +4345,7 @@ class AuroDropdown extends LitElement {
|
|
|
4363
4345
|
|
|
4364
4346
|
this.triggerContentSlot.forEach((node) => {
|
|
4365
4347
|
if (node.querySelectorAll) {
|
|
4366
|
-
const auroElements = node.querySelectorAll(
|
|
4348
|
+
const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
|
|
4367
4349
|
auroElements.forEach((auroEl) => {
|
|
4368
4350
|
auroEl.addEventListener('focus', this.bindFocusEventToTrigger);
|
|
4369
4351
|
auroEl.addEventListener('blur', this.bindFocusEventToTrigger);
|
|
@@ -4384,7 +4366,7 @@ class AuroDropdown extends LitElement {
|
|
|
4384
4366
|
|
|
4385
4367
|
this.triggerContentSlot.forEach((node) => {
|
|
4386
4368
|
if (node.querySelectorAll) {
|
|
4387
|
-
const auroElements = node.querySelectorAll(
|
|
4369
|
+
const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
|
|
4388
4370
|
auroElements.forEach((auroEl) => {
|
|
4389
4371
|
auroEl.removeEventListener('focus', this.bindFocusEventToTrigger);
|
|
4390
4372
|
auroEl.removeEventListener('blur', this.bindFocusEventToTrigger);
|
|
@@ -12782,11 +12764,8 @@ class AuroCombobox extends LitElement {
|
|
|
12782
12764
|
},
|
|
12783
12765
|
|
|
12784
12766
|
/**
|
|
12785
|
-
* Defines the screen size breakpoint (`
|
|
12786
|
-
*
|
|
12787
|
-
*
|
|
12788
|
-
* When expanded, the dropdown will automatically display in fullscreen mode
|
|
12789
|
-
* if the screen size is equal to or smaller than the selected breakpoint.
|
|
12767
|
+
* Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile.
|
|
12768
|
+
* When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
|
|
12790
12769
|
* @default sm
|
|
12791
12770
|
*/
|
|
12792
12771
|
fullscreenBreakpoint: {
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
| Property | Attribute | Type | Default | Description |
|
|
43
43
|
|---------------------------|---------------------------|-----------|----------------|--------------------------------------------------|
|
|
44
44
|
| [autoPlacement](#autoPlacement) | `autoPlacement` | `boolean` | "false" | If declared, bib's position will be automatically calculated where to appear. |
|
|
45
|
-
| [fullscreenBreakpoint](#fullscreenBreakpoint) | `fullscreenBreakpoint` | `string` | "sm" | Defines the screen size breakpoint (`
|
|
45
|
+
| [fullscreenBreakpoint](#fullscreenBreakpoint) | `fullscreenBreakpoint` | `string` | "sm" | Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile.<br />When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint. |
|
|
46
46
|
| [isDropdown](#isDropdown) | `isDropdown` | `boolean` | false | Indicates if the counter group is displayed as a dropdown. |
|
|
47
47
|
| [largeFullscreenHeadline](#largeFullscreenHeadline) | `largeFullscreenHeadline` | `boolean` | false | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600. |
|
|
48
48
|
| [max](#max) | `max` | `number` | "undefined" | The maximum value allowed for the whole group of counters. |
|
|
@@ -4660,7 +4660,6 @@ var tokensCss$1 = i$5`:host{--ds-auro-dropdown-label-text-color: var(--ds-basic-
|
|
|
4660
4660
|
|
|
4661
4661
|
const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';
|
|
4662
4662
|
const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [
|
|
4663
|
-
'xl',
|
|
4664
4663
|
'lg',
|
|
4665
4664
|
'md',
|
|
4666
4665
|
'sm',
|
|
@@ -4732,7 +4731,6 @@ class AuroDropdownBib extends r {
|
|
|
4732
4731
|
|
|
4733
4732
|
set mobileFullscreenBreakpoint(value) {
|
|
4734
4733
|
// verify the defined breakpoint is valid and exit out if not
|
|
4735
|
-
// 'disabled' is a design token breakpoint so it acts as our "undefined" value
|
|
4736
4734
|
const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined;
|
|
4737
4735
|
if (!validatedValue) {
|
|
4738
4736
|
this._mobileBreakpointValue = undefined;
|
|
@@ -5258,12 +5256,7 @@ class AuroDropdown extends r {
|
|
|
5258
5256
|
},
|
|
5259
5257
|
|
|
5260
5258
|
/**
|
|
5261
|
-
* Defines the screen size breakpoint (`
|
|
5262
|
-
* at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
|
|
5263
|
-
*
|
|
5264
|
-
* When expanded, the dropdown will automatically display in fullscreen mode
|
|
5265
|
-
* if the screen size is equal to or smaller than the selected breakpoint.
|
|
5266
|
-
* @default sm
|
|
5259
|
+
* Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
|
|
5267
5260
|
*/
|
|
5268
5261
|
fullscreenBreakpoint: {
|
|
5269
5262
|
type: String,
|
|
@@ -5403,15 +5396,6 @@ class AuroDropdown extends r {
|
|
|
5403
5396
|
AuroLibraryRuntimeUtils$1$1.prototype.registerComponent(name, AuroDropdown);
|
|
5404
5397
|
}
|
|
5405
5398
|
|
|
5406
|
-
/**
|
|
5407
|
-
* Accessor for reusing the focusable entity query string.
|
|
5408
|
-
* @private
|
|
5409
|
-
* @returns {string}
|
|
5410
|
-
*/
|
|
5411
|
-
get focusableEntityQuery () {
|
|
5412
|
-
return 'auro-input, [auro-input], auro-button, [auro-button], button, input';
|
|
5413
|
-
}
|
|
5414
|
-
|
|
5415
5399
|
connectedCallback() {
|
|
5416
5400
|
super.connectedCallback();
|
|
5417
5401
|
}
|
|
@@ -5425,8 +5409,6 @@ class AuroDropdown extends r {
|
|
|
5425
5409
|
updated(changedProperties) {
|
|
5426
5410
|
this.floater.handleUpdate(changedProperties);
|
|
5427
5411
|
|
|
5428
|
-
// Note: `disabled` is not a breakpoint (it is not a screen size),
|
|
5429
|
-
// so it looks like we never consume this - however, dropdownBib handles this in the setter as "undefined"
|
|
5430
5412
|
if (changedProperties.has('fullscreenBreakpoint')) {
|
|
5431
5413
|
this.bibContent.mobileFullscreenBreakpoint = this.fullscreenBreakpoint;
|
|
5432
5414
|
}
|
|
@@ -5577,7 +5559,7 @@ class AuroDropdown extends r {
|
|
|
5577
5559
|
|
|
5578
5560
|
this.triggerContentSlot.forEach((node) => {
|
|
5579
5561
|
if (node.querySelectorAll) {
|
|
5580
|
-
const auroElements = node.querySelectorAll(
|
|
5562
|
+
const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
|
|
5581
5563
|
auroElements.forEach((auroEl) => {
|
|
5582
5564
|
auroEl.addEventListener('focus', this.bindFocusEventToTrigger);
|
|
5583
5565
|
auroEl.addEventListener('blur', this.bindFocusEventToTrigger);
|
|
@@ -5598,7 +5580,7 @@ class AuroDropdown extends r {
|
|
|
5598
5580
|
|
|
5599
5581
|
this.triggerContentSlot.forEach((node) => {
|
|
5600
5582
|
if (node.querySelectorAll) {
|
|
5601
|
-
const auroElements = node.querySelectorAll(
|
|
5583
|
+
const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
|
|
5602
5584
|
auroElements.forEach((auroEl) => {
|
|
5603
5585
|
auroEl.removeEventListener('focus', this.bindFocusEventToTrigger);
|
|
5604
5586
|
auroEl.removeEventListener('blur', this.bindFocusEventToTrigger);
|
|
@@ -6728,11 +6710,8 @@ class AuroCounterGroup extends r {
|
|
|
6728
6710
|
},
|
|
6729
6711
|
|
|
6730
6712
|
/**
|
|
6731
|
-
* Defines the screen size breakpoint (`
|
|
6732
|
-
*
|
|
6733
|
-
*
|
|
6734
|
-
* When expanded, the dropdown will automatically display in fullscreen mode
|
|
6735
|
-
* if the screen size is equal to or smaller than the selected breakpoint.
|
|
6713
|
+
* Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile.
|
|
6714
|
+
* When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
|
|
6736
6715
|
* @default sm
|
|
6737
6716
|
*/
|
|
6738
6717
|
fullscreenBreakpoint: {
|
|
@@ -4660,7 +4660,6 @@ var tokensCss$1 = i$5`:host{--ds-auro-dropdown-label-text-color: var(--ds-basic-
|
|
|
4660
4660
|
|
|
4661
4661
|
const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';
|
|
4662
4662
|
const DESIGN_TOKEN_BREAKPOINT_OPTIONS = [
|
|
4663
|
-
'xl',
|
|
4664
4663
|
'lg',
|
|
4665
4664
|
'md',
|
|
4666
4665
|
'sm',
|
|
@@ -4732,7 +4731,6 @@ class AuroDropdownBib extends r {
|
|
|
4732
4731
|
|
|
4733
4732
|
set mobileFullscreenBreakpoint(value) {
|
|
4734
4733
|
// verify the defined breakpoint is valid and exit out if not
|
|
4735
|
-
// 'disabled' is a design token breakpoint so it acts as our "undefined" value
|
|
4736
4734
|
const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value) ? value : undefined;
|
|
4737
4735
|
if (!validatedValue) {
|
|
4738
4736
|
this._mobileBreakpointValue = undefined;
|
|
@@ -5258,12 +5256,7 @@ class AuroDropdown extends r {
|
|
|
5258
5256
|
},
|
|
5259
5257
|
|
|
5260
5258
|
/**
|
|
5261
|
-
* Defines the screen size breakpoint (`
|
|
5262
|
-
* at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
|
|
5263
|
-
*
|
|
5264
|
-
* When expanded, the dropdown will automatically display in fullscreen mode
|
|
5265
|
-
* if the screen size is equal to or smaller than the selected breakpoint.
|
|
5266
|
-
* @default sm
|
|
5259
|
+
* Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
|
|
5267
5260
|
*/
|
|
5268
5261
|
fullscreenBreakpoint: {
|
|
5269
5262
|
type: String,
|
|
@@ -5403,15 +5396,6 @@ class AuroDropdown extends r {
|
|
|
5403
5396
|
AuroLibraryRuntimeUtils$1$1.prototype.registerComponent(name, AuroDropdown);
|
|
5404
5397
|
}
|
|
5405
5398
|
|
|
5406
|
-
/**
|
|
5407
|
-
* Accessor for reusing the focusable entity query string.
|
|
5408
|
-
* @private
|
|
5409
|
-
* @returns {string}
|
|
5410
|
-
*/
|
|
5411
|
-
get focusableEntityQuery () {
|
|
5412
|
-
return 'auro-input, [auro-input], auro-button, [auro-button], button, input';
|
|
5413
|
-
}
|
|
5414
|
-
|
|
5415
5399
|
connectedCallback() {
|
|
5416
5400
|
super.connectedCallback();
|
|
5417
5401
|
}
|
|
@@ -5425,8 +5409,6 @@ class AuroDropdown extends r {
|
|
|
5425
5409
|
updated(changedProperties) {
|
|
5426
5410
|
this.floater.handleUpdate(changedProperties);
|
|
5427
5411
|
|
|
5428
|
-
// Note: `disabled` is not a breakpoint (it is not a screen size),
|
|
5429
|
-
// so it looks like we never consume this - however, dropdownBib handles this in the setter as "undefined"
|
|
5430
5412
|
if (changedProperties.has('fullscreenBreakpoint')) {
|
|
5431
5413
|
this.bibContent.mobileFullscreenBreakpoint = this.fullscreenBreakpoint;
|
|
5432
5414
|
}
|
|
@@ -5577,7 +5559,7 @@ class AuroDropdown extends r {
|
|
|
5577
5559
|
|
|
5578
5560
|
this.triggerContentSlot.forEach((node) => {
|
|
5579
5561
|
if (node.querySelectorAll) {
|
|
5580
|
-
const auroElements = node.querySelectorAll(
|
|
5562
|
+
const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
|
|
5581
5563
|
auroElements.forEach((auroEl) => {
|
|
5582
5564
|
auroEl.addEventListener('focus', this.bindFocusEventToTrigger);
|
|
5583
5565
|
auroEl.addEventListener('blur', this.bindFocusEventToTrigger);
|
|
@@ -5598,7 +5580,7 @@ class AuroDropdown extends r {
|
|
|
5598
5580
|
|
|
5599
5581
|
this.triggerContentSlot.forEach((node) => {
|
|
5600
5582
|
if (node.querySelectorAll) {
|
|
5601
|
-
const auroElements = node.querySelectorAll(
|
|
5583
|
+
const auroElements = node.querySelectorAll('auro-input, [auro-input], auro-button, [auro-button], button, input');
|
|
5602
5584
|
auroElements.forEach((auroEl) => {
|
|
5603
5585
|
auroEl.removeEventListener('focus', this.bindFocusEventToTrigger);
|
|
5604
5586
|
auroEl.removeEventListener('blur', this.bindFocusEventToTrigger);
|
|
@@ -6728,11 +6710,8 @@ class AuroCounterGroup extends r {
|
|
|
6728
6710
|
},
|
|
6729
6711
|
|
|
6730
6712
|
/**
|
|
6731
|
-
* Defines the screen size breakpoint (`
|
|
6732
|
-
*
|
|
6733
|
-
*
|
|
6734
|
-
* When expanded, the dropdown will automatically display in fullscreen mode
|
|
6735
|
-
* if the screen size is equal to or smaller than the selected breakpoint.
|
|
6713
|
+
* Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile.
|
|
6714
|
+
* When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
|
|
6736
6715
|
* @default sm
|
|
6737
6716
|
*/
|
|
6738
6717
|
fullscreenBreakpoint: {
|
|
@@ -25,11 +25,8 @@ export class AuroCounterGroup extends LitElement {
|
|
|
25
25
|
reflect: boolean;
|
|
26
26
|
};
|
|
27
27
|
/**
|
|
28
|
-
* Defines the screen size breakpoint (`
|
|
29
|
-
*
|
|
30
|
-
*
|
|
31
|
-
* When expanded, the dropdown will automatically display in fullscreen mode
|
|
32
|
-
* if the screen size is equal to or smaller than the selected breakpoint.
|
|
28
|
+
* Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile.
|
|
29
|
+
* When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
|
|
33
30
|
* @default sm
|
|
34
31
|
*/
|
|
35
32
|
fullscreenBreakpoint: {
|