@aurodesignsystem-dev/auro-formkit 0.0.0-pr785.0 → 0.0.0-pr785.2
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 +27 -15
- package/components/combobox/demo/index.html +16 -10
- package/components/combobox/demo/index.min.js +27 -15
- package/components/combobox/demo/readme.html +16 -9
- package/components/combobox/dist/index.js +27 -15
- package/components/combobox/dist/registered.js +27 -15
- package/components/counter/demo/api.html +16 -10
- package/components/counter/demo/api.min.js +25 -13
- package/components/counter/demo/index.html +16 -10
- package/components/counter/demo/index.min.js +25 -13
- package/components/counter/demo/readme.html +16 -9
- package/components/counter/dist/index.js +25 -13
- package/components/counter/dist/registered.js +25 -13
- package/components/datepicker/demo/api.html +16 -10
- package/components/datepicker/demo/api.min.js +37 -15
- package/components/datepicker/demo/index.html +16 -10
- package/components/datepicker/demo/index.min.js +37 -15
- package/components/datepicker/demo/readme.html +16 -9
- package/components/datepicker/dist/index.js +37 -15
- package/components/datepicker/dist/registered.js +37 -15
- package/components/dropdown/demo/api.html +16 -10
- package/components/dropdown/demo/api.md +7 -6
- package/components/dropdown/demo/api.min.js +25 -13
- package/components/dropdown/demo/index.html +16 -10
- package/components/dropdown/demo/index.min.js +25 -13
- package/components/dropdown/demo/readme.html +16 -9
- package/components/dropdown/dist/auro-dropdown.d.ts +1 -0
- package/components/dropdown/dist/index.js +25 -13
- package/components/dropdown/dist/registered.js +25 -13
- 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 +25 -13
- package/components/select/demo/index.html +16 -11
- package/components/select/demo/index.min.js +25 -13
- package/components/select/demo/readme.html +16 -9
- package/components/select/dist/index.js +25 -13
- package/components/select/dist/registered.js +25 -13
- package/package.json +4 -3
|
@@ -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-dropdown</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-dropdown'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
|
|
|
@@ -1948,7 +1948,7 @@ class AuroFloatingUI {
|
|
|
1948
1948
|
return;
|
|
1949
1949
|
}
|
|
1950
1950
|
|
|
1951
|
-
this.hideBib();
|
|
1951
|
+
this.hideBib("keydown");
|
|
1952
1952
|
}
|
|
1953
1953
|
|
|
1954
1954
|
setupHideHandlers() {
|
|
@@ -1973,7 +1973,7 @@ class AuroFloatingUI {
|
|
|
1973
1973
|
document.expandedAuroFormkitDropdown = null;
|
|
1974
1974
|
document.expandedAuroFloater = this;
|
|
1975
1975
|
} else {
|
|
1976
|
-
this.hideBib();
|
|
1976
|
+
this.hideBib("click");
|
|
1977
1977
|
}
|
|
1978
1978
|
}
|
|
1979
1979
|
};
|
|
@@ -1986,7 +1986,7 @@ class AuroFloatingUI {
|
|
|
1986
1986
|
// if something else is open, let it handle itself
|
|
1987
1987
|
return;
|
|
1988
1988
|
}
|
|
1989
|
-
this.hideBib();
|
|
1989
|
+
this.hideBib("keydown");
|
|
1990
1990
|
}
|
|
1991
1991
|
};
|
|
1992
1992
|
|
|
@@ -2069,7 +2069,11 @@ class AuroFloatingUI {
|
|
|
2069
2069
|
}
|
|
2070
2070
|
}
|
|
2071
2071
|
|
|
2072
|
-
|
|
2072
|
+
/**
|
|
2073
|
+
* Hides the floating UI element.
|
|
2074
|
+
* @param {String} eventType - The event type that triggered the hiding action.
|
|
2075
|
+
*/
|
|
2076
|
+
hideBib(eventType = "unknown") {
|
|
2073
2077
|
if (!this.element.disabled && !this.element.noToggle) {
|
|
2074
2078
|
this.lockScroll(false);
|
|
2075
2079
|
this.element.triggerChevron?.removeAttribute('data-expanded');
|
|
@@ -2080,7 +2084,7 @@ class AuroFloatingUI {
|
|
|
2080
2084
|
if (this.showing) {
|
|
2081
2085
|
this.cleanupHideHandlers();
|
|
2082
2086
|
this.showing = false;
|
|
2083
|
-
this.dispatchEventDropdownToggle();
|
|
2087
|
+
this.dispatchEventDropdownToggle(eventType);
|
|
2084
2088
|
}
|
|
2085
2089
|
}
|
|
2086
2090
|
document.expandedAuroFloater = null;
|
|
@@ -2089,11 +2093,13 @@ class AuroFloatingUI {
|
|
|
2089
2093
|
/**
|
|
2090
2094
|
* @private
|
|
2091
2095
|
* @returns {void} Dispatches event with an object showing the state of the dropdown.
|
|
2096
|
+
* @param {String} eventType - The event type that triggered the toggle action.
|
|
2092
2097
|
*/
|
|
2093
|
-
dispatchEventDropdownToggle() {
|
|
2098
|
+
dispatchEventDropdownToggle(eventType) {
|
|
2094
2099
|
const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
|
|
2095
2100
|
detail: {
|
|
2096
2101
|
expanded: this.showing,
|
|
2102
|
+
eventType: eventType || "unknown",
|
|
2097
2103
|
},
|
|
2098
2104
|
composed: true
|
|
2099
2105
|
});
|
|
@@ -2103,7 +2109,7 @@ class AuroFloatingUI {
|
|
|
2103
2109
|
|
|
2104
2110
|
handleClick() {
|
|
2105
2111
|
if (this.element.isPopoverVisible) {
|
|
2106
|
-
this.hideBib();
|
|
2112
|
+
this.hideBib("click");
|
|
2107
2113
|
} else {
|
|
2108
2114
|
this.showBib();
|
|
2109
2115
|
}
|
|
@@ -2139,7 +2145,7 @@ class AuroFloatingUI {
|
|
|
2139
2145
|
break;
|
|
2140
2146
|
case 'mouseleave':
|
|
2141
2147
|
if (this.element.hoverToggle) {
|
|
2142
|
-
this.hideBib();
|
|
2148
|
+
this.hideBib("mouseleave");
|
|
2143
2149
|
}
|
|
2144
2150
|
break;
|
|
2145
2151
|
case 'focus':
|
|
@@ -3533,6 +3539,9 @@ class AuroDropdown extends AuroElement {
|
|
|
3533
3539
|
|
|
3534
3540
|
this.parentBorder = false;
|
|
3535
3541
|
|
|
3542
|
+
/** @private */
|
|
3543
|
+
this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
|
|
3544
|
+
|
|
3536
3545
|
this.privateDefaults();
|
|
3537
3546
|
}
|
|
3538
3547
|
|
|
@@ -3966,12 +3975,14 @@ class AuroDropdown extends AuroElement {
|
|
|
3966
3975
|
if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
|
|
3967
3976
|
this.handleTriggerContentSlotChange();
|
|
3968
3977
|
}
|
|
3978
|
+
}
|
|
3969
3979
|
|
|
3970
|
-
|
|
3971
|
-
|
|
3972
|
-
|
|
3973
|
-
|
|
3974
|
-
|
|
3980
|
+
handleDropdownToggle(event) {
|
|
3981
|
+
this.updateFocusTrap();
|
|
3982
|
+
this.isPopoverVisible = event.detail.expanded;
|
|
3983
|
+
const eventType = event.detail.eventType || "unknown";
|
|
3984
|
+
if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
|
|
3985
|
+
this.trigger.focus();
|
|
3975
3986
|
}
|
|
3976
3987
|
}
|
|
3977
3988
|
|
|
@@ -3979,6 +3990,7 @@ class AuroDropdown extends AuroElement {
|
|
|
3979
3990
|
|
|
3980
3991
|
// Configure the floater to, this will generate the ID for the bib
|
|
3981
3992
|
this.floater.configure(this, 'auroDropdown');
|
|
3993
|
+
this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
|
|
3982
3994
|
|
|
3983
3995
|
/**
|
|
3984
3996
|
* @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-dropdown</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-dropdown'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
|
|
|
@@ -1907,7 +1907,7 @@ class AuroFloatingUI {
|
|
|
1907
1907
|
return;
|
|
1908
1908
|
}
|
|
1909
1909
|
|
|
1910
|
-
this.hideBib();
|
|
1910
|
+
this.hideBib("keydown");
|
|
1911
1911
|
}
|
|
1912
1912
|
|
|
1913
1913
|
setupHideHandlers() {
|
|
@@ -1932,7 +1932,7 @@ class AuroFloatingUI {
|
|
|
1932
1932
|
document.expandedAuroFormkitDropdown = null;
|
|
1933
1933
|
document.expandedAuroFloater = this;
|
|
1934
1934
|
} else {
|
|
1935
|
-
this.hideBib();
|
|
1935
|
+
this.hideBib("click");
|
|
1936
1936
|
}
|
|
1937
1937
|
}
|
|
1938
1938
|
};
|
|
@@ -1945,7 +1945,7 @@ class AuroFloatingUI {
|
|
|
1945
1945
|
// if something else is open, let it handle itself
|
|
1946
1946
|
return;
|
|
1947
1947
|
}
|
|
1948
|
-
this.hideBib();
|
|
1948
|
+
this.hideBib("keydown");
|
|
1949
1949
|
}
|
|
1950
1950
|
};
|
|
1951
1951
|
|
|
@@ -2028,7 +2028,11 @@ class AuroFloatingUI {
|
|
|
2028
2028
|
}
|
|
2029
2029
|
}
|
|
2030
2030
|
|
|
2031
|
-
|
|
2031
|
+
/**
|
|
2032
|
+
* Hides the floating UI element.
|
|
2033
|
+
* @param {String} eventType - The event type that triggered the hiding action.
|
|
2034
|
+
*/
|
|
2035
|
+
hideBib(eventType = "unknown") {
|
|
2032
2036
|
if (!this.element.disabled && !this.element.noToggle) {
|
|
2033
2037
|
this.lockScroll(false);
|
|
2034
2038
|
this.element.triggerChevron?.removeAttribute('data-expanded');
|
|
@@ -2039,7 +2043,7 @@ class AuroFloatingUI {
|
|
|
2039
2043
|
if (this.showing) {
|
|
2040
2044
|
this.cleanupHideHandlers();
|
|
2041
2045
|
this.showing = false;
|
|
2042
|
-
this.dispatchEventDropdownToggle();
|
|
2046
|
+
this.dispatchEventDropdownToggle(eventType);
|
|
2043
2047
|
}
|
|
2044
2048
|
}
|
|
2045
2049
|
document.expandedAuroFloater = null;
|
|
@@ -2048,11 +2052,13 @@ class AuroFloatingUI {
|
|
|
2048
2052
|
/**
|
|
2049
2053
|
* @private
|
|
2050
2054
|
* @returns {void} Dispatches event with an object showing the state of the dropdown.
|
|
2055
|
+
* @param {String} eventType - The event type that triggered the toggle action.
|
|
2051
2056
|
*/
|
|
2052
|
-
dispatchEventDropdownToggle() {
|
|
2057
|
+
dispatchEventDropdownToggle(eventType) {
|
|
2053
2058
|
const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
|
|
2054
2059
|
detail: {
|
|
2055
2060
|
expanded: this.showing,
|
|
2061
|
+
eventType: eventType || "unknown",
|
|
2056
2062
|
},
|
|
2057
2063
|
composed: true
|
|
2058
2064
|
});
|
|
@@ -2062,7 +2068,7 @@ class AuroFloatingUI {
|
|
|
2062
2068
|
|
|
2063
2069
|
handleClick() {
|
|
2064
2070
|
if (this.element.isPopoverVisible) {
|
|
2065
|
-
this.hideBib();
|
|
2071
|
+
this.hideBib("click");
|
|
2066
2072
|
} else {
|
|
2067
2073
|
this.showBib();
|
|
2068
2074
|
}
|
|
@@ -2098,7 +2104,7 @@ class AuroFloatingUI {
|
|
|
2098
2104
|
break;
|
|
2099
2105
|
case 'mouseleave':
|
|
2100
2106
|
if (this.element.hoverToggle) {
|
|
2101
|
-
this.hideBib();
|
|
2107
|
+
this.hideBib("mouseleave");
|
|
2102
2108
|
}
|
|
2103
2109
|
break;
|
|
2104
2110
|
case 'focus':
|
|
@@ -3486,6 +3492,9 @@ class AuroDropdown extends AuroElement {
|
|
|
3486
3492
|
|
|
3487
3493
|
this.parentBorder = false;
|
|
3488
3494
|
|
|
3495
|
+
/** @private */
|
|
3496
|
+
this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
|
|
3497
|
+
|
|
3489
3498
|
this.privateDefaults();
|
|
3490
3499
|
}
|
|
3491
3500
|
|
|
@@ -3919,12 +3928,14 @@ class AuroDropdown extends AuroElement {
|
|
|
3919
3928
|
if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
|
|
3920
3929
|
this.handleTriggerContentSlotChange();
|
|
3921
3930
|
}
|
|
3931
|
+
}
|
|
3922
3932
|
|
|
3923
|
-
|
|
3924
|
-
|
|
3925
|
-
|
|
3926
|
-
|
|
3927
|
-
|
|
3933
|
+
handleDropdownToggle(event) {
|
|
3934
|
+
this.updateFocusTrap();
|
|
3935
|
+
this.isPopoverVisible = event.detail.expanded;
|
|
3936
|
+
const eventType = event.detail.eventType || "unknown";
|
|
3937
|
+
if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
|
|
3938
|
+
this.trigger.focus();
|
|
3928
3939
|
}
|
|
3929
3940
|
}
|
|
3930
3941
|
|
|
@@ -3932,6 +3943,7 @@ class AuroDropdown extends AuroElement {
|
|
|
3932
3943
|
|
|
3933
3944
|
// Configure the floater to, this will generate the ID for the bib
|
|
3934
3945
|
this.floater.configure(this, 'auroDropdown');
|
|
3946
|
+
this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
|
|
3935
3947
|
|
|
3936
3948
|
/**
|
|
3937
3949
|
* @description Let subscribers know that the dropdown ID ha been generated and added.
|
|
@@ -1907,7 +1907,7 @@ class AuroFloatingUI {
|
|
|
1907
1907
|
return;
|
|
1908
1908
|
}
|
|
1909
1909
|
|
|
1910
|
-
this.hideBib();
|
|
1910
|
+
this.hideBib("keydown");
|
|
1911
1911
|
}
|
|
1912
1912
|
|
|
1913
1913
|
setupHideHandlers() {
|
|
@@ -1932,7 +1932,7 @@ class AuroFloatingUI {
|
|
|
1932
1932
|
document.expandedAuroFormkitDropdown = null;
|
|
1933
1933
|
document.expandedAuroFloater = this;
|
|
1934
1934
|
} else {
|
|
1935
|
-
this.hideBib();
|
|
1935
|
+
this.hideBib("click");
|
|
1936
1936
|
}
|
|
1937
1937
|
}
|
|
1938
1938
|
};
|
|
@@ -1945,7 +1945,7 @@ class AuroFloatingUI {
|
|
|
1945
1945
|
// if something else is open, let it handle itself
|
|
1946
1946
|
return;
|
|
1947
1947
|
}
|
|
1948
|
-
this.hideBib();
|
|
1948
|
+
this.hideBib("keydown");
|
|
1949
1949
|
}
|
|
1950
1950
|
};
|
|
1951
1951
|
|
|
@@ -2028,7 +2028,11 @@ class AuroFloatingUI {
|
|
|
2028
2028
|
}
|
|
2029
2029
|
}
|
|
2030
2030
|
|
|
2031
|
-
|
|
2031
|
+
/**
|
|
2032
|
+
* Hides the floating UI element.
|
|
2033
|
+
* @param {String} eventType - The event type that triggered the hiding action.
|
|
2034
|
+
*/
|
|
2035
|
+
hideBib(eventType = "unknown") {
|
|
2032
2036
|
if (!this.element.disabled && !this.element.noToggle) {
|
|
2033
2037
|
this.lockScroll(false);
|
|
2034
2038
|
this.element.triggerChevron?.removeAttribute('data-expanded');
|
|
@@ -2039,7 +2043,7 @@ class AuroFloatingUI {
|
|
|
2039
2043
|
if (this.showing) {
|
|
2040
2044
|
this.cleanupHideHandlers();
|
|
2041
2045
|
this.showing = false;
|
|
2042
|
-
this.dispatchEventDropdownToggle();
|
|
2046
|
+
this.dispatchEventDropdownToggle(eventType);
|
|
2043
2047
|
}
|
|
2044
2048
|
}
|
|
2045
2049
|
document.expandedAuroFloater = null;
|
|
@@ -2048,11 +2052,13 @@ class AuroFloatingUI {
|
|
|
2048
2052
|
/**
|
|
2049
2053
|
* @private
|
|
2050
2054
|
* @returns {void} Dispatches event with an object showing the state of the dropdown.
|
|
2055
|
+
* @param {String} eventType - The event type that triggered the toggle action.
|
|
2051
2056
|
*/
|
|
2052
|
-
dispatchEventDropdownToggle() {
|
|
2057
|
+
dispatchEventDropdownToggle(eventType) {
|
|
2053
2058
|
const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
|
|
2054
2059
|
detail: {
|
|
2055
2060
|
expanded: this.showing,
|
|
2061
|
+
eventType: eventType || "unknown",
|
|
2056
2062
|
},
|
|
2057
2063
|
composed: true
|
|
2058
2064
|
});
|
|
@@ -2062,7 +2068,7 @@ class AuroFloatingUI {
|
|
|
2062
2068
|
|
|
2063
2069
|
handleClick() {
|
|
2064
2070
|
if (this.element.isPopoverVisible) {
|
|
2065
|
-
this.hideBib();
|
|
2071
|
+
this.hideBib("click");
|
|
2066
2072
|
} else {
|
|
2067
2073
|
this.showBib();
|
|
2068
2074
|
}
|
|
@@ -2098,7 +2104,7 @@ class AuroFloatingUI {
|
|
|
2098
2104
|
break;
|
|
2099
2105
|
case 'mouseleave':
|
|
2100
2106
|
if (this.element.hoverToggle) {
|
|
2101
|
-
this.hideBib();
|
|
2107
|
+
this.hideBib("mouseleave");
|
|
2102
2108
|
}
|
|
2103
2109
|
break;
|
|
2104
2110
|
case 'focus':
|
|
@@ -3486,6 +3492,9 @@ class AuroDropdown extends AuroElement {
|
|
|
3486
3492
|
|
|
3487
3493
|
this.parentBorder = false;
|
|
3488
3494
|
|
|
3495
|
+
/** @private */
|
|
3496
|
+
this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
|
|
3497
|
+
|
|
3489
3498
|
this.privateDefaults();
|
|
3490
3499
|
}
|
|
3491
3500
|
|
|
@@ -3919,12 +3928,14 @@ class AuroDropdown extends AuroElement {
|
|
|
3919
3928
|
if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
|
|
3920
3929
|
this.handleTriggerContentSlotChange();
|
|
3921
3930
|
}
|
|
3931
|
+
}
|
|
3922
3932
|
|
|
3923
|
-
|
|
3924
|
-
|
|
3925
|
-
|
|
3926
|
-
|
|
3927
|
-
|
|
3933
|
+
handleDropdownToggle(event) {
|
|
3934
|
+
this.updateFocusTrap();
|
|
3935
|
+
this.isPopoverVisible = event.detail.expanded;
|
|
3936
|
+
const eventType = event.detail.eventType || "unknown";
|
|
3937
|
+
if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
|
|
3938
|
+
this.trigger.focus();
|
|
3928
3939
|
}
|
|
3929
3940
|
}
|
|
3930
3941
|
|
|
@@ -3932,6 +3943,7 @@ class AuroDropdown extends AuroElement {
|
|
|
3932
3943
|
|
|
3933
3944
|
// Configure the floater to, this will generate the ID for the bib
|
|
3934
3945
|
this.floater.configure(this, 'auroDropdown');
|
|
3946
|
+
this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
|
|
3935
3947
|
|
|
3936
3948
|
/**
|
|
3937
3949
|
* @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-form</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-form'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
|
|
|
@@ -1,9 +1,25 @@
|
|
|
1
1
|
<!doctype html>
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>Auro Web Component Demo | auro-form</title>
|
|
7
|
+
|
|
8
|
+
<!-- Prism.js Stylesheet -->
|
|
9
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
|
|
10
|
+
|
|
11
|
+
<!-- Legacy reference is still needed to support auro-form's use of legacy token values at this time -->
|
|
12
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
|
|
13
|
+
|
|
14
|
+
<!-- Design Token Alaska Theme -->
|
|
15
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
|
|
16
|
+
|
|
17
|
+
<!-- Webcore Stylesheet Alaska Theme -->
|
|
18
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
|
|
19
|
+
|
|
20
|
+
<!-- Demo Specific Styles -->
|
|
21
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
22
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
7
23
|
</head>
|
|
8
24
|
<body>
|
|
9
25
|
<!-- EVERY AUTOCOMPLETE OPTION, auro inputs -->
|
|
@@ -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-form</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-form'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
|
|
|
@@ -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-form</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-form'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
|
|
|
@@ -14,19 +14,25 @@
|
|
|
14
14
|
<!DOCTYPE html>
|
|
15
15
|
<html lang="en">
|
|
16
16
|
<head>
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
type="text/css"
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
17
|
+
<meta charset="UTF-8" />
|
|
18
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
19
|
+
<title>Auro Web Component Demo | auro-form</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-form'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 -->
|
|
34
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
35
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
30
36
|
</head>
|
|
31
37
|
<body class="auro-markdown">
|
|
32
38
|
<main>
|
|
@@ -3,18 +3,24 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
-
<title>Auro Web Component
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css"
|
|
13
|
-
|
|
6
|
+
<title>Auro Web Component Demo | auro-input</title>
|
|
7
|
+
|
|
8
|
+
<!-- Prism.js Stylesheet -->
|
|
9
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
|
|
10
|
+
|
|
11
|
+
<!-- Legacy reference is still needed to support auro-input's use of legacy token values at this time -->
|
|
12
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
|
|
13
|
+
|
|
14
|
+
<!-- Design Token Alaska Theme -->
|
|
15
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
|
|
16
|
+
|
|
17
|
+
<!-- Webcore Stylesheet Alaska Theme -->
|
|
18
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
|
|
19
|
+
|
|
20
|
+
<!-- Demo Specific Styles -->
|
|
14
21
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
15
22
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
16
|
-
|
|
17
|
-
</head>
|
|
23
|
+
</head>
|
|
18
24
|
<body class="auro-markdown">
|
|
19
25
|
<main></main>
|
|
20
26
|
|