@aurodesignsystem-dev/auro-formkit 0.0.0-pr785.0 → 0.0.0-pr785.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/checkbox/demo/api.html +16 -10
- package/components/checkbox/demo/api.min.js +2 -2
- package/components/checkbox/demo/index.html +16 -10
- package/components/checkbox/demo/index.min.js +2 -2
- package/components/checkbox/demo/readme.html +16 -9
- package/components/checkbox/dist/index.js +2 -2
- package/components/checkbox/dist/registered.js +2 -2
- package/components/combobox/demo/api.html +16 -10
- package/components/combobox/demo/api.min.js +13 -7
- package/components/combobox/demo/index.html +16 -10
- package/components/combobox/demo/index.min.js +13 -7
- package/components/combobox/demo/readme.html +16 -9
- package/components/combobox/dist/index.js +13 -7
- package/components/combobox/dist/registered.js +13 -7
- package/components/counter/demo/api.html +16 -10
- package/components/counter/demo/api.min.js +11 -5
- package/components/counter/demo/index.html +16 -10
- package/components/counter/demo/index.min.js +11 -5
- package/components/counter/demo/readme.html +16 -9
- package/components/counter/dist/index.js +11 -5
- package/components/counter/dist/registered.js +11 -5
- package/components/datepicker/demo/api.html +16 -10
- package/components/datepicker/demo/api.min.js +23 -7
- package/components/datepicker/demo/index.html +16 -10
- package/components/datepicker/demo/index.min.js +23 -7
- package/components/datepicker/demo/readme.html +16 -9
- package/components/datepicker/dist/index.js +23 -7
- package/components/datepicker/dist/registered.js +23 -7
- package/components/dropdown/demo/api.html +16 -10
- package/components/dropdown/demo/api.md +7 -6
- package/components/dropdown/demo/api.min.js +11 -5
- package/components/dropdown/demo/index.html +16 -10
- package/components/dropdown/demo/index.min.js +11 -5
- package/components/dropdown/demo/readme.html +16 -9
- package/components/dropdown/dist/auro-dropdown.d.ts +1 -0
- package/components/dropdown/dist/index.js +11 -5
- package/components/dropdown/dist/registered.js +11 -5
- package/components/form/demo/api.html +16 -9
- package/components/form/demo/autocomplete.html +19 -3
- package/components/form/demo/index.html +16 -9
- package/components/form/demo/readme.html +16 -9
- package/components/form/demo/working.html +19 -13
- package/components/input/demo/api.html +16 -10
- package/components/input/demo/api.min.js +2 -2
- package/components/input/demo/index.html +16 -10
- package/components/input/demo/index.min.js +2 -2
- package/components/input/demo/readme.html +16 -9
- package/components/input/dist/index.js +2 -2
- package/components/input/dist/registered.js +2 -2
- package/components/menu/demo/api.html +16 -32
- package/components/menu/demo/index.html +16 -10
- package/components/menu/demo/readme.html +16 -9
- package/components/radio/demo/api.html +16 -10
- package/components/radio/demo/index.html +16 -10
- package/components/radio/demo/readme.html +16 -9
- package/components/select/demo/api.html +16 -10
- package/components/select/demo/api.min.js +11 -5
- package/components/select/demo/index.html +16 -11
- package/components/select/demo/index.min.js +11 -5
- package/components/select/demo/readme.html +16 -9
- package/components/select/dist/index.js +11 -5
- package/components/select/dist/registered.js +11 -5
- package/package.json +3 -2
|
@@ -4374,6 +4374,9 @@ class AuroDropdown extends AuroElement$4 {
|
|
|
4374
4374
|
|
|
4375
4375
|
this.parentBorder = false;
|
|
4376
4376
|
|
|
4377
|
+
/** @private */
|
|
4378
|
+
this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
|
|
4379
|
+
|
|
4377
4380
|
this.privateDefaults();
|
|
4378
4381
|
}
|
|
4379
4382
|
|
|
@@ -4807,12 +4810,14 @@ class AuroDropdown extends AuroElement$4 {
|
|
|
4807
4810
|
if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
|
|
4808
4811
|
this.handleTriggerContentSlotChange();
|
|
4809
4812
|
}
|
|
4813
|
+
}
|
|
4810
4814
|
|
|
4811
|
-
|
|
4812
|
-
|
|
4813
|
-
|
|
4814
|
-
|
|
4815
|
-
|
|
4815
|
+
handleDropdownToggle(event) {
|
|
4816
|
+
this.updateFocusTrap();
|
|
4817
|
+
this.isPopoverVisible = event.detail.expanded;
|
|
4818
|
+
const eventType = event.detail.eventType || "unknown";
|
|
4819
|
+
if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
|
|
4820
|
+
this.trigger.focus();
|
|
4816
4821
|
}
|
|
4817
4822
|
}
|
|
4818
4823
|
|
|
@@ -4820,6 +4825,7 @@ class AuroDropdown extends AuroElement$4 {
|
|
|
4820
4825
|
|
|
4821
4826
|
// Configure the floater to, this will generate the ID for the bib
|
|
4822
4827
|
this.floater.configure(this, 'auroDropdown');
|
|
4828
|
+
this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
|
|
4823
4829
|
|
|
4824
4830
|
/**
|
|
4825
4831
|
* @description Let subscribers know that the dropdown ID ha been generated and added.
|
|
@@ -10796,9 +10802,9 @@ class BaseInput extends AuroElement$2$1 {
|
|
|
10796
10802
|
if (!this.shadowRoot.contains(this.getActiveElement())) {
|
|
10797
10803
|
this.validation.validate(this);
|
|
10798
10804
|
}
|
|
10799
|
-
|
|
10800
|
-
this.notifyValueChanged();
|
|
10801
10805
|
}
|
|
10806
|
+
|
|
10807
|
+
this.notifyValueChanged();
|
|
10802
10808
|
}
|
|
10803
10809
|
|
|
10804
10810
|
if (changedProperties.has('error')) {
|
|
@@ -16,18 +16,24 @@
|
|
|
16
16
|
<head>
|
|
17
17
|
<meta charset="UTF-8" />
|
|
18
18
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
19
|
-
<title>Auro Web Component
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css"
|
|
26
|
-
|
|
19
|
+
<title>Auro Web Component Demo | auro-counter</title>
|
|
20
|
+
|
|
21
|
+
<!-- Prism.js Stylesheet -->
|
|
22
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
|
|
23
|
+
|
|
24
|
+
<!-- Legacy reference is still needed to support auro-counter's use of legacy token values at this time -->
|
|
25
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
|
|
26
|
+
|
|
27
|
+
<!-- Design Token Alaska Theme -->
|
|
28
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
|
|
29
|
+
|
|
30
|
+
<!-- Webcore Stylesheet Alaska Theme -->
|
|
31
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
|
|
32
|
+
|
|
33
|
+
<!-- Demo Specific Styles -->
|
|
27
34
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
28
35
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
29
|
-
|
|
30
|
-
</head>
|
|
36
|
+
</head>
|
|
31
37
|
<body class="auro-markdown">
|
|
32
38
|
<main></main>
|
|
33
39
|
|
|
@@ -6545,6 +6545,9 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
6545
6545
|
|
|
6546
6546
|
this.parentBorder = false;
|
|
6547
6547
|
|
|
6548
|
+
/** @private */
|
|
6549
|
+
this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
|
|
6550
|
+
|
|
6548
6551
|
this.privateDefaults();
|
|
6549
6552
|
}
|
|
6550
6553
|
|
|
@@ -6978,12 +6981,14 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
6978
6981
|
if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
|
|
6979
6982
|
this.handleTriggerContentSlotChange();
|
|
6980
6983
|
}
|
|
6984
|
+
}
|
|
6981
6985
|
|
|
6982
|
-
|
|
6983
|
-
|
|
6984
|
-
|
|
6985
|
-
|
|
6986
|
-
|
|
6986
|
+
handleDropdownToggle(event) {
|
|
6987
|
+
this.updateFocusTrap();
|
|
6988
|
+
this.isPopoverVisible = event.detail.expanded;
|
|
6989
|
+
const eventType = event.detail.eventType || "unknown";
|
|
6990
|
+
if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
|
|
6991
|
+
this.trigger.focus();
|
|
6987
6992
|
}
|
|
6988
6993
|
}
|
|
6989
6994
|
|
|
@@ -6991,6 +6996,7 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
6991
6996
|
|
|
6992
6997
|
// Configure the floater to, this will generate the ID for the bib
|
|
6993
6998
|
this.floater.configure(this, 'auroDropdown');
|
|
6999
|
+
this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
|
|
6994
7000
|
|
|
6995
7001
|
/**
|
|
6996
7002
|
* @description Let subscribers know that the dropdown ID ha been generated and added.
|
|
@@ -16,18 +16,24 @@
|
|
|
16
16
|
<head>
|
|
17
17
|
<meta charset="UTF-8" />
|
|
18
18
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
19
|
-
<title>Auro Web Component
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css"
|
|
26
|
-
|
|
19
|
+
<title>Auro Web Component Demo | auro-counter</title>
|
|
20
|
+
|
|
21
|
+
<!-- Prism.js Stylesheet -->
|
|
22
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
|
|
23
|
+
|
|
24
|
+
<!-- Legacy reference is still needed to support auro-counter's use of legacy token values at this time -->
|
|
25
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
|
|
26
|
+
|
|
27
|
+
<!-- Design Token Alaska Theme -->
|
|
28
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
|
|
29
|
+
|
|
30
|
+
<!-- Webcore Stylesheet Alaska Theme -->
|
|
31
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
|
|
32
|
+
|
|
33
|
+
<!-- Demo Specific Styles -->
|
|
27
34
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
28
35
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
29
|
-
|
|
30
|
-
</head>
|
|
36
|
+
</head>
|
|
31
37
|
<body class="auro-markdown">
|
|
32
38
|
<main></main>
|
|
33
39
|
|
|
@@ -6545,6 +6545,9 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
6545
6545
|
|
|
6546
6546
|
this.parentBorder = false;
|
|
6547
6547
|
|
|
6548
|
+
/** @private */
|
|
6549
|
+
this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
|
|
6550
|
+
|
|
6548
6551
|
this.privateDefaults();
|
|
6549
6552
|
}
|
|
6550
6553
|
|
|
@@ -6978,12 +6981,14 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
6978
6981
|
if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
|
|
6979
6982
|
this.handleTriggerContentSlotChange();
|
|
6980
6983
|
}
|
|
6984
|
+
}
|
|
6981
6985
|
|
|
6982
|
-
|
|
6983
|
-
|
|
6984
|
-
|
|
6985
|
-
|
|
6986
|
-
|
|
6986
|
+
handleDropdownToggle(event) {
|
|
6987
|
+
this.updateFocusTrap();
|
|
6988
|
+
this.isPopoverVisible = event.detail.expanded;
|
|
6989
|
+
const eventType = event.detail.eventType || "unknown";
|
|
6990
|
+
if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
|
|
6991
|
+
this.trigger.focus();
|
|
6987
6992
|
}
|
|
6988
6993
|
}
|
|
6989
6994
|
|
|
@@ -6991,6 +6996,7 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
6991
6996
|
|
|
6992
6997
|
// Configure the floater to, this will generate the ID for the bib
|
|
6993
6998
|
this.floater.configure(this, 'auroDropdown');
|
|
6999
|
+
this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
|
|
6994
7000
|
|
|
6995
7001
|
/**
|
|
6996
7002
|
* @description Let subscribers know that the dropdown ID ha been generated and added.
|
|
@@ -16,17 +16,24 @@
|
|
|
16
16
|
<head>
|
|
17
17
|
<meta charset="UTF-8" />
|
|
18
18
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
19
|
-
<title>Auro Web Component
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css"
|
|
26
|
-
|
|
19
|
+
<title>Auro Web Component Demo | auro-counter</title>
|
|
20
|
+
|
|
21
|
+
<!-- Prism.js Stylesheet -->
|
|
22
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
|
|
23
|
+
|
|
24
|
+
<!-- Legacy reference is still needed to support auro-counter's use of legacy token values at this time -->
|
|
25
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
|
|
26
|
+
|
|
27
|
+
<!-- Design Token Alaska Theme -->
|
|
28
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
|
|
29
|
+
|
|
30
|
+
<!-- Webcore Stylesheet Alaska Theme -->
|
|
31
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
|
|
32
|
+
|
|
33
|
+
<!-- Demo Specific Styles -->
|
|
27
34
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
28
35
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
29
|
-
|
|
36
|
+
</head>
|
|
30
37
|
<body class="auro-markdown">
|
|
31
38
|
<main></main>
|
|
32
39
|
|
|
@@ -6498,6 +6498,9 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
6498
6498
|
|
|
6499
6499
|
this.parentBorder = false;
|
|
6500
6500
|
|
|
6501
|
+
/** @private */
|
|
6502
|
+
this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
|
|
6503
|
+
|
|
6501
6504
|
this.privateDefaults();
|
|
6502
6505
|
}
|
|
6503
6506
|
|
|
@@ -6931,12 +6934,14 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
6931
6934
|
if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
|
|
6932
6935
|
this.handleTriggerContentSlotChange();
|
|
6933
6936
|
}
|
|
6937
|
+
}
|
|
6934
6938
|
|
|
6935
|
-
|
|
6936
|
-
|
|
6937
|
-
|
|
6938
|
-
|
|
6939
|
-
|
|
6939
|
+
handleDropdownToggle(event) {
|
|
6940
|
+
this.updateFocusTrap();
|
|
6941
|
+
this.isPopoverVisible = event.detail.expanded;
|
|
6942
|
+
const eventType = event.detail.eventType || "unknown";
|
|
6943
|
+
if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
|
|
6944
|
+
this.trigger.focus();
|
|
6940
6945
|
}
|
|
6941
6946
|
}
|
|
6942
6947
|
|
|
@@ -6944,6 +6949,7 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
6944
6949
|
|
|
6945
6950
|
// Configure the floater to, this will generate the ID for the bib
|
|
6946
6951
|
this.floater.configure(this, 'auroDropdown');
|
|
6952
|
+
this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
|
|
6947
6953
|
|
|
6948
6954
|
/**
|
|
6949
6955
|
* @description Let subscribers know that the dropdown ID ha been generated and added.
|
|
@@ -6498,6 +6498,9 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
6498
6498
|
|
|
6499
6499
|
this.parentBorder = false;
|
|
6500
6500
|
|
|
6501
|
+
/** @private */
|
|
6502
|
+
this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
|
|
6503
|
+
|
|
6501
6504
|
this.privateDefaults();
|
|
6502
6505
|
}
|
|
6503
6506
|
|
|
@@ -6931,12 +6934,14 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
6931
6934
|
if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
|
|
6932
6935
|
this.handleTriggerContentSlotChange();
|
|
6933
6936
|
}
|
|
6937
|
+
}
|
|
6934
6938
|
|
|
6935
|
-
|
|
6936
|
-
|
|
6937
|
-
|
|
6938
|
-
|
|
6939
|
-
|
|
6939
|
+
handleDropdownToggle(event) {
|
|
6940
|
+
this.updateFocusTrap();
|
|
6941
|
+
this.isPopoverVisible = event.detail.expanded;
|
|
6942
|
+
const eventType = event.detail.eventType || "unknown";
|
|
6943
|
+
if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
|
|
6944
|
+
this.trigger.focus();
|
|
6940
6945
|
}
|
|
6941
6946
|
}
|
|
6942
6947
|
|
|
@@ -6944,6 +6949,7 @@ class AuroDropdown extends AuroElement$3 {
|
|
|
6944
6949
|
|
|
6945
6950
|
// Configure the floater to, this will generate the ID for the bib
|
|
6946
6951
|
this.floater.configure(this, 'auroDropdown');
|
|
6952
|
+
this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
|
|
6947
6953
|
|
|
6948
6954
|
/**
|
|
6949
6955
|
* @description Let subscribers know that the dropdown ID ha been generated and added.
|
|
@@ -16,18 +16,24 @@
|
|
|
16
16
|
<head>
|
|
17
17
|
<meta charset="UTF-8" />
|
|
18
18
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
19
|
-
<title>Auro Web Component
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css"
|
|
26
|
-
|
|
19
|
+
<title>Auro Web Component Demo | auro-datepicker</title>
|
|
20
|
+
|
|
21
|
+
<!-- Prism.js Stylesheet -->
|
|
22
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
|
|
23
|
+
|
|
24
|
+
<!-- Legacy reference is still needed to support auro-datepicker's use of legacy token values at this time -->
|
|
25
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
|
|
26
|
+
|
|
27
|
+
<!-- Design Token Alaska Theme -->
|
|
28
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
|
|
29
|
+
|
|
30
|
+
<!-- Webcore Stylesheet Alaska Theme -->
|
|
31
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
|
|
32
|
+
|
|
33
|
+
<!-- Demo Specific Styles -->
|
|
27
34
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
28
35
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
29
|
-
|
|
30
|
-
</head>
|
|
36
|
+
</head>
|
|
31
37
|
<body class="auro-markdown">
|
|
32
38
|
<main></main>
|
|
33
39
|
|
|
@@ -17902,6 +17902,9 @@ class AuroDropdown extends AuroElement$4 {
|
|
|
17902
17902
|
|
|
17903
17903
|
this.parentBorder = false;
|
|
17904
17904
|
|
|
17905
|
+
/** @private */
|
|
17906
|
+
this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
|
|
17907
|
+
|
|
17905
17908
|
this.privateDefaults();
|
|
17906
17909
|
}
|
|
17907
17910
|
|
|
@@ -18335,12 +18338,14 @@ class AuroDropdown extends AuroElement$4 {
|
|
|
18335
18338
|
if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
|
|
18336
18339
|
this.handleTriggerContentSlotChange();
|
|
18337
18340
|
}
|
|
18341
|
+
}
|
|
18338
18342
|
|
|
18339
|
-
|
|
18340
|
-
|
|
18341
|
-
|
|
18342
|
-
|
|
18343
|
-
|
|
18343
|
+
handleDropdownToggle(event) {
|
|
18344
|
+
this.updateFocusTrap();
|
|
18345
|
+
this.isPopoverVisible = event.detail.expanded;
|
|
18346
|
+
const eventType = event.detail.eventType || "unknown";
|
|
18347
|
+
if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
|
|
18348
|
+
this.trigger.focus();
|
|
18344
18349
|
}
|
|
18345
18350
|
}
|
|
18346
18351
|
|
|
@@ -18348,6 +18353,7 @@ class AuroDropdown extends AuroElement$4 {
|
|
|
18348
18353
|
|
|
18349
18354
|
// Configure the floater to, this will generate the ID for the bib
|
|
18350
18355
|
this.floater.configure(this, 'auroDropdown');
|
|
18356
|
+
this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
|
|
18351
18357
|
|
|
18352
18358
|
/**
|
|
18353
18359
|
* @description Let subscribers know that the dropdown ID ha been generated and added.
|
|
@@ -24337,9 +24343,9 @@ class BaseInput extends AuroElement$2 {
|
|
|
24337
24343
|
if (!this.shadowRoot.contains(this.getActiveElement())) {
|
|
24338
24344
|
this.validation.validate(this);
|
|
24339
24345
|
}
|
|
24340
|
-
|
|
24341
|
-
this.notifyValueChanged();
|
|
24342
24346
|
}
|
|
24347
|
+
|
|
24348
|
+
this.notifyValueChanged();
|
|
24343
24349
|
}
|
|
24344
24350
|
|
|
24345
24351
|
if (changedProperties.has('error')) {
|
|
@@ -27973,6 +27979,15 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
27973
27979
|
this.layout = 'classic';
|
|
27974
27980
|
this.shape = 'classic';
|
|
27975
27981
|
this.size = 'lg';
|
|
27982
|
+
|
|
27983
|
+
/**
|
|
27984
|
+
* @private
|
|
27985
|
+
* @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
|
|
27986
|
+
*/
|
|
27987
|
+
this.constructor.shadowRootOptions = {
|
|
27988
|
+
...i.shadowRootOptions,
|
|
27989
|
+
delegatesFocus: true,
|
|
27990
|
+
};
|
|
27976
27991
|
}
|
|
27977
27992
|
|
|
27978
27993
|
// This function is to define props used within the scope of this component
|
|
@@ -28710,6 +28725,7 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28710
28725
|
}
|
|
28711
28726
|
|
|
28712
28727
|
this.hasFocus = true;
|
|
28728
|
+
this.dropdown.show();
|
|
28713
28729
|
|
|
28714
28730
|
// shadowroot active element is null if we focus the datepicker itself
|
|
28715
28731
|
if (this.shadowRoot.activeElement === null) {
|
|
@@ -16,18 +16,24 @@
|
|
|
16
16
|
<head>
|
|
17
17
|
<meta charset="UTF-8" />
|
|
18
18
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
19
|
-
<title>Auro Web Component
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css"
|
|
26
|
-
|
|
19
|
+
<title>Auro Web Component Demo | auro-datepicker</title>
|
|
20
|
+
|
|
21
|
+
<!-- Prism.js Stylesheet -->
|
|
22
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
|
|
23
|
+
|
|
24
|
+
<!-- Legacy reference is still needed to support auro-datepicker's use of legacy token values at this time -->
|
|
25
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
|
|
26
|
+
|
|
27
|
+
<!-- Design Token Alaska Theme -->
|
|
28
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
|
|
29
|
+
|
|
30
|
+
<!-- Webcore Stylesheet Alaska Theme -->
|
|
31
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
|
|
32
|
+
|
|
33
|
+
<!-- Demo Specific Styles -->
|
|
27
34
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
28
35
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
29
|
-
|
|
30
|
-
</head>
|
|
36
|
+
</head>
|
|
31
37
|
<body class="auro-markdown">
|
|
32
38
|
<main></main>
|
|
33
39
|
|
|
@@ -17643,6 +17643,9 @@ class AuroDropdown extends AuroElement$4 {
|
|
|
17643
17643
|
|
|
17644
17644
|
this.parentBorder = false;
|
|
17645
17645
|
|
|
17646
|
+
/** @private */
|
|
17647
|
+
this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
|
|
17648
|
+
|
|
17646
17649
|
this.privateDefaults();
|
|
17647
17650
|
}
|
|
17648
17651
|
|
|
@@ -18076,12 +18079,14 @@ class AuroDropdown extends AuroElement$4 {
|
|
|
18076
18079
|
if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
|
|
18077
18080
|
this.handleTriggerContentSlotChange();
|
|
18078
18081
|
}
|
|
18082
|
+
}
|
|
18079
18083
|
|
|
18080
|
-
|
|
18081
|
-
|
|
18082
|
-
|
|
18083
|
-
|
|
18084
|
-
|
|
18084
|
+
handleDropdownToggle(event) {
|
|
18085
|
+
this.updateFocusTrap();
|
|
18086
|
+
this.isPopoverVisible = event.detail.expanded;
|
|
18087
|
+
const eventType = event.detail.eventType || "unknown";
|
|
18088
|
+
if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
|
|
18089
|
+
this.trigger.focus();
|
|
18085
18090
|
}
|
|
18086
18091
|
}
|
|
18087
18092
|
|
|
@@ -18089,6 +18094,7 @@ class AuroDropdown extends AuroElement$4 {
|
|
|
18089
18094
|
|
|
18090
18095
|
// Configure the floater to, this will generate the ID for the bib
|
|
18091
18096
|
this.floater.configure(this, 'auroDropdown');
|
|
18097
|
+
this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
|
|
18092
18098
|
|
|
18093
18099
|
/**
|
|
18094
18100
|
* @description Let subscribers know that the dropdown ID ha been generated and added.
|
|
@@ -24078,9 +24084,9 @@ class BaseInput extends AuroElement$2 {
|
|
|
24078
24084
|
if (!this.shadowRoot.contains(this.getActiveElement())) {
|
|
24079
24085
|
this.validation.validate(this);
|
|
24080
24086
|
}
|
|
24081
|
-
|
|
24082
|
-
this.notifyValueChanged();
|
|
24083
24087
|
}
|
|
24088
|
+
|
|
24089
|
+
this.notifyValueChanged();
|
|
24084
24090
|
}
|
|
24085
24091
|
|
|
24086
24092
|
if (changedProperties.has('error')) {
|
|
@@ -27714,6 +27720,15 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
27714
27720
|
this.layout = 'classic';
|
|
27715
27721
|
this.shape = 'classic';
|
|
27716
27722
|
this.size = 'lg';
|
|
27723
|
+
|
|
27724
|
+
/**
|
|
27725
|
+
* @private
|
|
27726
|
+
* @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
|
|
27727
|
+
*/
|
|
27728
|
+
this.constructor.shadowRootOptions = {
|
|
27729
|
+
...i.shadowRootOptions,
|
|
27730
|
+
delegatesFocus: true,
|
|
27731
|
+
};
|
|
27717
27732
|
}
|
|
27718
27733
|
|
|
27719
27734
|
// This function is to define props used within the scope of this component
|
|
@@ -28451,6 +28466,7 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28451
28466
|
}
|
|
28452
28467
|
|
|
28453
28468
|
this.hasFocus = true;
|
|
28469
|
+
this.dropdown.show();
|
|
28454
28470
|
|
|
28455
28471
|
// shadowroot active element is null if we focus the datepicker itself
|
|
28456
28472
|
if (this.shadowRoot.activeElement === null) {
|
|
@@ -16,17 +16,24 @@
|
|
|
16
16
|
<head>
|
|
17
17
|
<meta charset="UTF-8" />
|
|
18
18
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
19
|
-
<title>Auro Web Component
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css"
|
|
26
|
-
|
|
19
|
+
<title>Auro Web Component Demo | auro-datepicker</title>
|
|
20
|
+
|
|
21
|
+
<!-- Prism.js Stylesheet -->
|
|
22
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
|
|
23
|
+
|
|
24
|
+
<!-- Legacy reference is still needed to support auro-datepicker's use of legacy token values at this time -->
|
|
25
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
|
|
26
|
+
|
|
27
|
+
<!-- Design Token Alaska Theme -->
|
|
28
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
|
|
29
|
+
|
|
30
|
+
<!-- Webcore Stylesheet Alaska Theme -->
|
|
31
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
|
|
32
|
+
|
|
33
|
+
<!-- Demo Specific Styles -->
|
|
27
34
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
28
35
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
29
|
-
|
|
36
|
+
</head>
|
|
30
37
|
<body class="auro-markdown">
|
|
31
38
|
<main></main>
|
|
32
39
|
|
|
@@ -17592,6 +17592,9 @@ class AuroDropdown extends AuroElement$4 {
|
|
|
17592
17592
|
|
|
17593
17593
|
this.parentBorder = false;
|
|
17594
17594
|
|
|
17595
|
+
/** @private */
|
|
17596
|
+
this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
|
|
17597
|
+
|
|
17595
17598
|
this.privateDefaults();
|
|
17596
17599
|
}
|
|
17597
17600
|
|
|
@@ -18025,12 +18028,14 @@ class AuroDropdown extends AuroElement$4 {
|
|
|
18025
18028
|
if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
|
|
18026
18029
|
this.handleTriggerContentSlotChange();
|
|
18027
18030
|
}
|
|
18031
|
+
}
|
|
18028
18032
|
|
|
18029
|
-
|
|
18030
|
-
|
|
18031
|
-
|
|
18032
|
-
|
|
18033
|
-
|
|
18033
|
+
handleDropdownToggle(event) {
|
|
18034
|
+
this.updateFocusTrap();
|
|
18035
|
+
this.isPopoverVisible = event.detail.expanded;
|
|
18036
|
+
const eventType = event.detail.eventType || "unknown";
|
|
18037
|
+
if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
|
|
18038
|
+
this.trigger.focus();
|
|
18034
18039
|
}
|
|
18035
18040
|
}
|
|
18036
18041
|
|
|
@@ -18038,6 +18043,7 @@ class AuroDropdown extends AuroElement$4 {
|
|
|
18038
18043
|
|
|
18039
18044
|
// Configure the floater to, this will generate the ID for the bib
|
|
18040
18045
|
this.floater.configure(this, 'auroDropdown');
|
|
18046
|
+
this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
|
|
18041
18047
|
|
|
18042
18048
|
/**
|
|
18043
18049
|
* @description Let subscribers know that the dropdown ID ha been generated and added.
|
|
@@ -24014,9 +24020,9 @@ class BaseInput extends AuroElement$2 {
|
|
|
24014
24020
|
if (!this.shadowRoot.contains(this.getActiveElement())) {
|
|
24015
24021
|
this.validation.validate(this);
|
|
24016
24022
|
}
|
|
24017
|
-
|
|
24018
|
-
this.notifyValueChanged();
|
|
24019
24023
|
}
|
|
24024
|
+
|
|
24025
|
+
this.notifyValueChanged();
|
|
24020
24026
|
}
|
|
24021
24027
|
|
|
24022
24028
|
if (changedProperties.has('error')) {
|
|
@@ -27650,6 +27656,15 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
27650
27656
|
this.layout = 'classic';
|
|
27651
27657
|
this.shape = 'classic';
|
|
27652
27658
|
this.size = 'lg';
|
|
27659
|
+
|
|
27660
|
+
/**
|
|
27661
|
+
* @private
|
|
27662
|
+
* @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
|
|
27663
|
+
*/
|
|
27664
|
+
this.constructor.shadowRootOptions = {
|
|
27665
|
+
...LitElement.shadowRootOptions,
|
|
27666
|
+
delegatesFocus: true,
|
|
27667
|
+
};
|
|
27653
27668
|
}
|
|
27654
27669
|
|
|
27655
27670
|
// This function is to define props used within the scope of this component
|
|
@@ -28387,6 +28402,7 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28387
28402
|
}
|
|
28388
28403
|
|
|
28389
28404
|
this.hasFocus = true;
|
|
28405
|
+
this.dropdown.show();
|
|
28390
28406
|
|
|
28391
28407
|
// shadowroot active element is null if we focus the datepicker itself
|
|
28392
28408
|
if (this.shadowRoot.activeElement === null) {
|