@aurodesignsystem/auro-formkit 5.3.1 → 5.5.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 +7 -2
- package/components/combobox/demo/api.md +24 -6
- package/components/combobox/demo/api.min.js +12 -14
- package/components/combobox/demo/index.min.js +2 -12
- package/components/combobox/dist/index.js +1 -1
- package/components/combobox/dist/registered.js +1 -1
- package/components/datepicker/demo/api.md +42 -41
- package/components/datepicker/demo/api.min.js +137 -7
- package/components/datepicker/demo/index.md +3 -3
- package/components/datepicker/demo/index.min.js +137 -7
- package/components/datepicker/dist/auro-datepicker.d.ts +60 -2
- package/components/datepicker/dist/index.js +137 -7
- package/components/datepicker/dist/registered.js +137 -7
- package/components/menu/demo/api.min.js +1 -11
- package/components/menu/demo/index.min.js +1 -11
- package/components/menu/dist/auro-menu.d.ts +0 -1
- package/components/menu/dist/index.js +1 -11
- package/components/menu/dist/registered.js +1 -11
- package/components/select/demo/api.min.js +1 -11
- package/components/select/demo/index.min.js +1 -11
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,9 +1,14 @@
|
|
|
1
|
-
|
|
1
|
+
# [5.5.0](https://github.com/AlaskaAirlines/auro-formkit/compare/v5.4.0...v5.5.0) (2025-09-15)
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
### Bug Fixes
|
|
5
5
|
|
|
6
|
-
*
|
|
6
|
+
* prevent menu from overriding user input on keydown in combobox [#1129](https://github.com/AlaskaAirlines/auro-formkit/issues/1129) ([e7d86a1](https://github.com/AlaskaAirlines/auro-formkit/commit/e7d86a1a245241fdeb86e9aebad4cb99ce4a1496))
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* [#1132](https://github.com/AlaskaAirlines/auro-formkit/issues/1132) remove styles that hide the "clear" button for the input in the fullscreen bib for combobox ([4cabd8f](https://github.com/AlaskaAirlines/auro-formkit/commit/4cabd8f183ffbc2982448a7bfa100a50be148050))
|
|
7
12
|
|
|
8
13
|
### Changelog
|
|
9
14
|
|
|
@@ -187,7 +187,8 @@ The menu in this example was populated from data from a country/city API. To kee
|
|
|
187
187
|
due to the requirements of auro-dropdown and auro-input
|
|
188
188
|
-->
|
|
189
189
|
<auro-menu id="initMenu"></auro-menu>
|
|
190
|
-
</auro-combobox>
|
|
190
|
+
</auro-combobox>
|
|
191
|
+
<br>
|
|
191
192
|
<auro-combobox
|
|
192
193
|
id="dynamicMenuExampleTwo"
|
|
193
194
|
value="GER"
|
|
@@ -206,9 +207,13 @@ The menu in this example was populated from data from a country/city API. To kee
|
|
|
206
207
|
due to the requirements of auro-dropdown and auro-input
|
|
207
208
|
-->
|
|
208
209
|
<auro-menu id="initMenuTwo"></auro-menu>
|
|
209
|
-
</auro-combobox>
|
|
210
|
+
</auro-combobox>
|
|
211
|
+
<br>
|
|
210
212
|
<auro-button id="dynamicMenuSwapButton">
|
|
211
213
|
Swap Values
|
|
214
|
+
</auro-button>
|
|
215
|
+
<auro-button id="dynamicMenuPersistButton">
|
|
216
|
+
Toggle Persist Input
|
|
212
217
|
</auro-button>
|
|
213
218
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
214
219
|
</div>
|
|
@@ -238,7 +243,8 @@ The menu in this example was populated from data from a country/city API. To kee
|
|
|
238
243
|
due to the requirements of auro-dropdown and auro-input
|
|
239
244
|
-->
|
|
240
245
|
<auro-menu id="initMenu"></auro-menu>
|
|
241
|
-
</auro-combobox>
|
|
246
|
+
</auro-combobox>
|
|
247
|
+
<br>
|
|
242
248
|
<auro-combobox
|
|
243
249
|
id="dynamicMenuExampleTwo"
|
|
244
250
|
value="GER"
|
|
@@ -257,10 +263,14 @@ The menu in this example was populated from data from a country/city API. To kee
|
|
|
257
263
|
due to the requirements of auro-dropdown and auro-input
|
|
258
264
|
-->
|
|
259
265
|
<auro-menu id="initMenuTwo"></auro-menu>
|
|
260
|
-
</auro-combobox>
|
|
266
|
+
</auro-combobox>
|
|
267
|
+
<br>
|
|
261
268
|
<auro-button id="dynamicMenuSwapButton">
|
|
262
269
|
Swap Values
|
|
263
270
|
</auro-button>
|
|
271
|
+
<auro-button id="dynamicMenuPersistButton">
|
|
272
|
+
Toggle Persist Input
|
|
273
|
+
</auro-button>
|
|
264
274
|
```
|
|
265
275
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
266
276
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dynamicMenu.js) -->
|
|
@@ -305,6 +315,14 @@ export async function dynamicMenuExample() {
|
|
|
305
315
|
swapValues();
|
|
306
316
|
});
|
|
307
317
|
|
|
318
|
+
document.querySelector('#dynamicMenuPersistButton').addEventListener('click', () => {
|
|
319
|
+
const elOne = document.querySelector('#dynamicMenuExample');
|
|
320
|
+
const elTwo = document.querySelector('#dynamicMenuExampleTwo');
|
|
321
|
+
|
|
322
|
+
elOne.persistInput = !elOne.persistInput;
|
|
323
|
+
elTwo.persistInput = !elTwo.persistInput;
|
|
324
|
+
});
|
|
325
|
+
|
|
308
326
|
// Generates HTML for menu and submenus using country & city data from an external API
|
|
309
327
|
function generateHtml(data, selector) {
|
|
310
328
|
const initialMenu = document.querySelector(selector);
|
|
@@ -361,13 +379,13 @@ export async function dynamicMenuExample() {
|
|
|
361
379
|
|
|
362
380
|
// TODO: Need to refactor this to to not console a console error
|
|
363
381
|
const dynamicDataTwo = new DynamicData();
|
|
364
|
-
const dynamicMenuExampleElTwo = document.querySelector('#
|
|
382
|
+
const dynamicMenuExampleElTwo = document.querySelector('#dynamicMenuExampleTwo');
|
|
365
383
|
const dropdownElTwo = dynamicMenuExampleElTwo.shadowRoot.querySelector(dynamicMenuExampleElTwo.dropdownTag._$litStatic$);
|
|
366
384
|
const inputElTwo = dropdownElTwo.querySelector(dynamicMenuExampleElTwo.inputTag._$litStatic$);
|
|
367
385
|
|
|
368
386
|
inputElTwo.addEventListener('input', () => {
|
|
369
387
|
let data = dynamicDataTwo.getData();
|
|
370
|
-
data = dynamicDataTwo.filterData(data,
|
|
388
|
+
data = dynamicDataTwo.filterData(data, inputElTwo.value);
|
|
371
389
|
|
|
372
390
|
generateHtml(data, '#initMenuTwo');
|
|
373
391
|
});
|
|
@@ -67,6 +67,14 @@ async function dynamicMenuExample() {
|
|
|
67
67
|
swapValues();
|
|
68
68
|
});
|
|
69
69
|
|
|
70
|
+
document.querySelector('#dynamicMenuPersistButton').addEventListener('click', () => {
|
|
71
|
+
const elOne = document.querySelector('#dynamicMenuExample');
|
|
72
|
+
const elTwo = document.querySelector('#dynamicMenuExampleTwo');
|
|
73
|
+
|
|
74
|
+
elOne.persistInput = !elOne.persistInput;
|
|
75
|
+
elTwo.persistInput = !elTwo.persistInput;
|
|
76
|
+
});
|
|
77
|
+
|
|
70
78
|
// Generates HTML for menu and submenus using country & city data from an external API
|
|
71
79
|
function generateHtml(data, selector) {
|
|
72
80
|
const initialMenu = document.querySelector(selector);
|
|
@@ -123,13 +131,13 @@ async function dynamicMenuExample() {
|
|
|
123
131
|
|
|
124
132
|
// TODO: Need to refactor this to to not console a console error
|
|
125
133
|
const dynamicDataTwo = new DynamicData();
|
|
126
|
-
const dynamicMenuExampleElTwo = document.querySelector('#
|
|
134
|
+
const dynamicMenuExampleElTwo = document.querySelector('#dynamicMenuExampleTwo');
|
|
127
135
|
const dropdownElTwo = dynamicMenuExampleElTwo.shadowRoot.querySelector(dynamicMenuExampleElTwo.dropdownTag._$litStatic$);
|
|
128
136
|
const inputElTwo = dropdownElTwo.querySelector(dynamicMenuExampleElTwo.inputTag._$litStatic$);
|
|
129
137
|
|
|
130
138
|
inputElTwo.addEventListener('input', () => {
|
|
131
139
|
let data = dynamicDataTwo.getData();
|
|
132
|
-
data = dynamicDataTwo.filterData(data,
|
|
140
|
+
data = dynamicDataTwo.filterData(data, inputElTwo.value);
|
|
133
141
|
|
|
134
142
|
generateHtml(data, '#initMenuTwo');
|
|
135
143
|
});
|
|
@@ -15919,7 +15927,7 @@ class AuroBibtemplate extends i$2 {
|
|
|
15919
15927
|
|
|
15920
15928
|
var bibTemplateVersion = '1.0.0';
|
|
15921
15929
|
|
|
15922
|
-
var styleCss$4 = i$5`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host
|
|
15930
|
+
var styleCss$4 = i$5`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
|
|
15923
15931
|
|
|
15924
15932
|
var styleEmphasizedCss = i$5`:host([layout*=emphasized][shape*=pill]) [auro-input]{--ds-auro-input-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));--ds-auro-input-container-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));width:100%}:host([layout*=emphasized][shape*=pill]) [auro-input]:hover{--ds-auro-input-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));--ds-auro-input-container-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}:host([layout*=emphasized][shape*=pill]) [auro-input]::part(inputHelpText){display:none}:host([layout=emphasized]) [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}:host([layout=emphasized]) [auro-dropdown]:hover{--ds-auro-dropdown-trigger-hover-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}:host([layout=emphasized]) [auro-dropdown][layout*=emphasized]::part(wrapper){--ds-auro-dropdown-trigger-background-color: transparent}`;
|
|
15925
15933
|
|
|
@@ -18384,9 +18392,8 @@ class AuroMenu extends AuroElement$1 {
|
|
|
18384
18392
|
/**
|
|
18385
18393
|
* Handles slot change events.
|
|
18386
18394
|
* @private
|
|
18387
|
-
* @param {Event} evt - Event object from the browser.
|
|
18388
18395
|
*/
|
|
18389
|
-
handleSlotChange(
|
|
18396
|
+
handleSlotChange() {
|
|
18390
18397
|
if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
|
|
18391
18398
|
this.rootMenu = false;
|
|
18392
18399
|
}
|
|
@@ -18401,15 +18408,6 @@ class AuroMenu extends AuroElement$1 {
|
|
|
18401
18408
|
]
|
|
18402
18409
|
]));
|
|
18403
18410
|
}
|
|
18404
|
-
|
|
18405
|
-
if (this.value) {
|
|
18406
|
-
this.items.forEach((opt) => {
|
|
18407
|
-
if (opt.value === this.value || (this.multiSelect && this.formattedValue.includes(opt.value))) {
|
|
18408
|
-
this.handleSelectState(opt);
|
|
18409
|
-
this.notifySelectionChange(evt.type);
|
|
18410
|
-
}
|
|
18411
|
-
});
|
|
18412
|
-
}
|
|
18413
18411
|
}
|
|
18414
18412
|
|
|
18415
18413
|
/**
|
|
@@ -15799,7 +15799,7 @@ class AuroBibtemplate extends i$2 {
|
|
|
15799
15799
|
|
|
15800
15800
|
var bibTemplateVersion = '1.0.0';
|
|
15801
15801
|
|
|
15802
|
-
var styleCss$4 = i$5`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host
|
|
15802
|
+
var styleCss$4 = i$5`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
|
|
15803
15803
|
|
|
15804
15804
|
var styleEmphasizedCss = i$5`:host([layout*=emphasized][shape*=pill]) [auro-input]{--ds-auro-input-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));--ds-auro-input-container-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));width:100%}:host([layout*=emphasized][shape*=pill]) [auro-input]:hover{--ds-auro-input-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));--ds-auro-input-container-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}:host([layout*=emphasized][shape*=pill]) [auro-input]::part(inputHelpText){display:none}:host([layout=emphasized]) [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}:host([layout=emphasized]) [auro-dropdown]:hover{--ds-auro-dropdown-trigger-hover-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}:host([layout=emphasized]) [auro-dropdown][layout*=emphasized]::part(wrapper){--ds-auro-dropdown-trigger-background-color: transparent}`;
|
|
15805
15805
|
|
|
@@ -18168,9 +18168,8 @@ class AuroMenu extends AuroElement$1 {
|
|
|
18168
18168
|
/**
|
|
18169
18169
|
* Handles slot change events.
|
|
18170
18170
|
* @private
|
|
18171
|
-
* @param {Event} evt - Event object from the browser.
|
|
18172
18171
|
*/
|
|
18173
|
-
handleSlotChange(
|
|
18172
|
+
handleSlotChange() {
|
|
18174
18173
|
if (this.parentElement && this.parentElement.closest('auro-menu, [auro-menu]')) {
|
|
18175
18174
|
this.rootMenu = false;
|
|
18176
18175
|
}
|
|
@@ -18185,15 +18184,6 @@ class AuroMenu extends AuroElement$1 {
|
|
|
18185
18184
|
]
|
|
18186
18185
|
]));
|
|
18187
18186
|
}
|
|
18188
|
-
|
|
18189
|
-
if (this.value) {
|
|
18190
|
-
this.items.forEach((opt) => {
|
|
18191
|
-
if (opt.value === this.value || (this.multiSelect && this.formattedValue.includes(opt.value))) {
|
|
18192
|
-
this.handleSelectState(opt);
|
|
18193
|
-
this.notifySelectionChange(evt.type);
|
|
18194
|
-
}
|
|
18195
|
-
});
|
|
18196
|
-
}
|
|
18197
18187
|
}
|
|
18198
18188
|
|
|
18199
18189
|
/**
|
|
@@ -15706,7 +15706,7 @@ class AuroBibtemplate extends LitElement {
|
|
|
15706
15706
|
|
|
15707
15707
|
var bibTemplateVersion = '1.0.0';
|
|
15708
15708
|
|
|
15709
|
-
var styleCss$1 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host
|
|
15709
|
+
var styleCss$1 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
|
|
15710
15710
|
|
|
15711
15711
|
var styleEmphasizedCss = css`:host([layout*=emphasized][shape*=pill]) [auro-input]{--ds-auro-input-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));--ds-auro-input-container-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));width:100%}:host([layout*=emphasized][shape*=pill]) [auro-input]:hover{--ds-auro-input-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));--ds-auro-input-container-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}:host([layout*=emphasized][shape*=pill]) [auro-input]::part(inputHelpText){display:none}:host([layout=emphasized]) [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}:host([layout=emphasized]) [auro-dropdown]:hover{--ds-auro-dropdown-trigger-hover-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}:host([layout=emphasized]) [auro-dropdown][layout*=emphasized]::part(wrapper){--ds-auro-dropdown-trigger-background-color: transparent}`;
|
|
15712
15712
|
|
|
@@ -15706,7 +15706,7 @@ class AuroBibtemplate extends LitElement {
|
|
|
15706
15706
|
|
|
15707
15707
|
var bibTemplateVersion = '1.0.0';
|
|
15708
15708
|
|
|
15709
|
-
var styleCss$1 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host
|
|
15709
|
+
var styleCss$1 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
|
|
15710
15710
|
|
|
15711
15711
|
var styleEmphasizedCss = css`:host([layout*=emphasized][shape*=pill]) [auro-input]{--ds-auro-input-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));--ds-auro-input-container-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));width:100%}:host([layout*=emphasized][shape*=pill]) [auro-input]:hover{--ds-auro-input-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843));--ds-auro-input-container-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}:host([layout*=emphasized][shape*=pill]) [auro-input]::part(inputHelpText){display:none}:host([layout=emphasized]) [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}:host([layout=emphasized]) [auro-dropdown]:hover{--ds-auro-dropdown-trigger-hover-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}:host([layout=emphasized]) [auro-dropdown][layout*=emphasized]::part(wrapper){--ds-auro-dropdown-trigger-background-color: transparent}`;
|
|
15712
15712
|
|
|
@@ -5,47 +5,48 @@
|
|
|
5
5
|
|
|
6
6
|
## Properties
|
|
7
7
|
|
|
8
|
-
| Property
|
|
9
|
-
|
|
10
|
-
| [autoPlacement](#autoPlacement)
|
|
11
|
-
| [calendarEndDate](#calendarEndDate)
|
|
12
|
-
| [calendarFocusDate](#calendarFocusDate)
|
|
13
|
-
| [calendarStartDate](#calendarStartDate)
|
|
14
|
-
| [centralDate](#centralDate)
|
|
15
|
-
| [
|
|
16
|
-
| [
|
|
17
|
-
| [
|
|
18
|
-
| [
|
|
19
|
-
| [
|
|
20
|
-
| [
|
|
21
|
-
| [
|
|
22
|
-
| [
|
|
23
|
-
| [
|
|
24
|
-
| [
|
|
25
|
-
| [
|
|
26
|
-
| [
|
|
27
|
-
| [
|
|
28
|
-
| [
|
|
29
|
-
| [
|
|
30
|
-
| [
|
|
31
|
-
| [
|
|
32
|
-
| [
|
|
33
|
-
| [
|
|
34
|
-
| [
|
|
35
|
-
| [
|
|
36
|
-
| [
|
|
37
|
-
| [
|
|
38
|
-
| [
|
|
39
|
-
| [
|
|
40
|
-
| [
|
|
41
|
-
| [
|
|
42
|
-
| [
|
|
43
|
-
| [
|
|
44
|
-
| [
|
|
45
|
-
| [
|
|
46
|
-
| [
|
|
47
|
-
| [
|
|
48
|
-
| [
|
|
8
|
+
| Property | Attribute | Modifiers | Type | Default | Description |
|
|
9
|
+
|------------------------------------|-----------------------------------|-----------|--------------------------------------------------|--------------------------------------------------|--------------------------------------------------|
|
|
10
|
+
| [autoPlacement](#autoPlacement) | `autoPlacement` | | `boolean` | "false" | If declared, bib's position will be automatically calculated where to appear. |
|
|
11
|
+
| [calendarEndDate](#calendarEndDate) | `calendarEndDate` | | `string` | "undefined" | The last date that may be displayed in the calendar. |
|
|
12
|
+
| [calendarFocusDate](#calendarFocusDate) | `calendarFocusDate` | | `string` | "value" | The date that will first be visually rendered to the user in the calendar. |
|
|
13
|
+
| [calendarStartDate](#calendarStartDate) | `calendarStartDate` | | `string` | "undefined" | The first date that may be displayed in the calendar. |
|
|
14
|
+
| [centralDate](#centralDate) | `centralDate` | | `string` | | The date that determines the currently visible month. |
|
|
15
|
+
| [commonDisplayValueWrapperClasses](#commonDisplayValueWrapperClasses) | | readonly | `{ [x: string]: boolean; displayValueWrapper: boolean; util_displayHiddenVisually: boolean; }` | | |
|
|
16
|
+
| [disabled](#disabled) | `disabled` | | `boolean` | false | If set, disables the datepicker. |
|
|
17
|
+
| [dvInputOnly](#dvInputOnly) | `dvInputOnly` | | `boolean` | false | If defined, the display value slot content will only mask the HTML5 input element. The input's label will not be masked. |
|
|
18
|
+
| [error](#error) | `error` | | `string` | | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
|
|
19
|
+
| [format](#format) | `format` | | `string` | "mm/dd/yyyy" | Specifies the date format. The default is `mm/dd/yyyy`. |
|
|
20
|
+
| [fullscreenBreakpoint](#fullscreenBreakpoint) | `fullscreenBreakpoint` | | `string` | "sm" | Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)<br />at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
|
|
21
|
+
| [hasError](#hasError) | | readonly | `boolean` | | |
|
|
22
|
+
| [inputmode](#inputmode) | `inputmode` | | `string` | | Exposes inputmode attribute for input. |
|
|
23
|
+
| [largeFullscreenHeadline](#largeFullscreenHeadline) | `largeFullscreenHeadline` | | `boolean` | false | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600. |
|
|
24
|
+
| [layout](#layout) | | | `string` | "classic" | |
|
|
25
|
+
| [maxDate](#maxDate) | `maxDate` | | `string` | | Maximum date. All dates after will be disabled. |
|
|
26
|
+
| [minDate](#minDate) | `minDate` | | `string` | | Minimum date. All dates before will be disabled. |
|
|
27
|
+
| [monthNames](#monthNames) | `monthNames` | | `array` | ["January","February","March","April","May","June","July","August","September","October","November","December"] | Names of all 12 months to render in the calendar, used for localization of date string in mobile layout. |
|
|
28
|
+
| [noFlip](#noFlip) | `noFlip` | | `boolean` | "false" | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
|
|
29
|
+
| [noValidate](#noValidate) | `noValidate` | | `boolean` | false | If set, disables auto-validation on blur. |
|
|
30
|
+
| [offset](#offset) | `offset` | | `number` | "0" | Gap between the trigger element and bib. |
|
|
31
|
+
| [onDark](#onDark) | `onDark` | | `boolean` | false | If declared, onDark styles will be applied to the trigger. |
|
|
32
|
+
| [placeholder](#placeholder) | `placeholder` | | `string` | | Placeholder text to display in the input(s) when no value is set. |
|
|
33
|
+
| [placeholderEndDate](#placeholderEndDate) | `placeholderEndDate` | | `string` | | Optional placeholder text to display in the second input when using date range.<br />By default, datepicker will use `placeholder` for both inputs if placeholder is<br />specified, but placeholderendDate is not. |
|
|
34
|
+
| [placement](#placement) | `placement` | | `string` | "bottom-start" | Position where the bib should appear relative to the trigger.<br />Accepted values:<br />"top" \| "right" \| "bottom" \| "left" \|<br />"bottom-start" \| "top-start" \| "top-end" \|<br />"right-start" \| "right-end" \| "bottom-end" \|<br />"left-start" \| "left-end" |
|
|
35
|
+
| [range](#range) | `range` | | `boolean` | false | If set, turns on date range functionality in auro-calendar. |
|
|
36
|
+
| [required](#required) | `required` | | `boolean` | false | Populates the `required` attribute on the input. Used for client-side validation. |
|
|
37
|
+
| [setCustomValidity](#setCustomValidity) | `setCustomValidity` | | `string` | | Sets a custom help text message to display for all validityStates. |
|
|
38
|
+
| [setCustomValidityCustomError](#setCustomValidityCustomError) | `setCustomValidityCustomError` | | `string` | | Custom help text message to display when validity = `customError`. |
|
|
39
|
+
| [setCustomValidityRangeOverflow](#setCustomValidityRangeOverflow) | `setCustomValidityRangeOverflow` | | `string` | | Custom help text message to display when validity = `rangeOverflow`. |
|
|
40
|
+
| [setCustomValidityRangeUnderflow](#setCustomValidityRangeUnderflow) | `setCustomValidityRangeUnderflow` | | `string` | | Custom help text message to display when validity = `rangeUnderflow`. |
|
|
41
|
+
| [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` | | `string` | | Custom help text message to display when validity = `valueMissing`. |
|
|
42
|
+
| [shape](#shape) | | | `string` | "classic" | |
|
|
43
|
+
| [shift](#shift) | `shift` | | `boolean` | "false" | If declared, the dropdown will shift its position to avoid being cut off by the viewport. |
|
|
44
|
+
| [size](#size) | | | `string` | "lg" | |
|
|
45
|
+
| [stacked](#stacked) | `stacked` | | `boolean` | false | Set true to make datepicker stacked style. |
|
|
46
|
+
| [validity](#validity) | `validity` | | `string` | "undefined" | Specifies the `validityState` this element is in. |
|
|
47
|
+
| [value](#value) | `value` | | `string` | "undefined" | Value selected for the datepicker. |
|
|
48
|
+
| [valueEnd](#valueEnd) | `valueEnd` | | `string` | "undefined" | Value selected for the second datepicker when using date range. |
|
|
49
|
+
| [values](#values) | | readonly | `string[]` | | A convenience wrapper for `value` and `valueEnd`, uses the new Auro "array value pattern". |
|
|
49
50
|
|
|
50
51
|
## Methods
|
|
51
52
|
|
|
@@ -28282,6 +28282,7 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28282
28282
|
|
|
28283
28283
|
this.touched = false;
|
|
28284
28284
|
this.disabled = false;
|
|
28285
|
+
this.dvInputOnly = false;
|
|
28285
28286
|
this.required = false;
|
|
28286
28287
|
this.onDark = false;
|
|
28287
28288
|
this.range = false;
|
|
@@ -28324,6 +28325,26 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28324
28325
|
*/
|
|
28325
28326
|
this.dateSlotContent = [];
|
|
28326
28327
|
|
|
28328
|
+
/**
|
|
28329
|
+
* @private
|
|
28330
|
+
*/
|
|
28331
|
+
this.hasDisplayValueContent = true;
|
|
28332
|
+
|
|
28333
|
+
/**
|
|
28334
|
+
* @private
|
|
28335
|
+
*/
|
|
28336
|
+
this.hasFocus = false;
|
|
28337
|
+
|
|
28338
|
+
/**
|
|
28339
|
+
* @private
|
|
28340
|
+
*/
|
|
28341
|
+
this.hasValue = false;
|
|
28342
|
+
|
|
28343
|
+
/**
|
|
28344
|
+
* @private
|
|
28345
|
+
*/
|
|
28346
|
+
this.hasAllValues = false;
|
|
28347
|
+
|
|
28327
28348
|
/**
|
|
28328
28349
|
* @private
|
|
28329
28350
|
*/
|
|
@@ -28442,6 +28463,14 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28442
28463
|
reflect: true
|
|
28443
28464
|
},
|
|
28444
28465
|
|
|
28466
|
+
/**
|
|
28467
|
+
* If defined, the display value slot content will only mask the HTML5 input element. The input's label will not be masked.
|
|
28468
|
+
*/
|
|
28469
|
+
dvInputOnly: {
|
|
28470
|
+
type: Boolean,
|
|
28471
|
+
reflect: true
|
|
28472
|
+
},
|
|
28473
|
+
|
|
28445
28474
|
/**
|
|
28446
28475
|
* When defined, sets persistent validity to `customError` and sets the validation message to the attribute value.
|
|
28447
28476
|
*/
|
|
@@ -28463,6 +28492,14 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28463
28492
|
reflect: false,
|
|
28464
28493
|
},
|
|
28465
28494
|
|
|
28495
|
+
/**
|
|
28496
|
+
* @private
|
|
28497
|
+
*/
|
|
28498
|
+
hasAllValues: {
|
|
28499
|
+
type: Boolean,
|
|
28500
|
+
reflect: false
|
|
28501
|
+
},
|
|
28502
|
+
|
|
28466
28503
|
/**
|
|
28467
28504
|
* Specifies the date format. The default is `mm/dd/yyyy`.
|
|
28468
28505
|
*/
|
|
@@ -28752,6 +28789,88 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28752
28789
|
return [];
|
|
28753
28790
|
}
|
|
28754
28791
|
|
|
28792
|
+
/**
|
|
28793
|
+
* Whether the label is being hidden currently based on state.
|
|
28794
|
+
* @returns {boolean} - Returns true if the label is hidden.
|
|
28795
|
+
* @private
|
|
28796
|
+
*/
|
|
28797
|
+
get labelHidden() {
|
|
28798
|
+
return this.hasDisplayValueContent && this.dvInputOnly && !this.hasFocus && this.hasAllValues;
|
|
28799
|
+
}
|
|
28800
|
+
|
|
28801
|
+
/**
|
|
28802
|
+
* Whether the displayValue container is being hidden currently based on state.
|
|
28803
|
+
* @returns {boolean} - Returns true if the label is hidden.
|
|
28804
|
+
* @private
|
|
28805
|
+
*/
|
|
28806
|
+
get dvHidden() {
|
|
28807
|
+
return !this.hasDisplayValueContent || this.hasFocus || !this.hasAllValues;
|
|
28808
|
+
}
|
|
28809
|
+
|
|
28810
|
+
/**
|
|
28811
|
+
* Returns the input font class based on layout and visibility state.
|
|
28812
|
+
* @private
|
|
28813
|
+
* @returns {string} - The font class for the input.
|
|
28814
|
+
*/
|
|
28815
|
+
get displayValueFontClass() {
|
|
28816
|
+
if (this.layout.startsWith('emphasized')) {
|
|
28817
|
+
let typeSize = 'accent-xl';
|
|
28818
|
+
|
|
28819
|
+
if (this.hasDisplayValueContent) {
|
|
28820
|
+
if (!this.hasValue) {
|
|
28821
|
+
typeSize = 'body-sm';
|
|
28822
|
+
}
|
|
28823
|
+
} else if (this.noFocusOrValue) {
|
|
28824
|
+
typeSize = 'body-sm';
|
|
28825
|
+
}
|
|
28826
|
+
|
|
28827
|
+
return typeSize;
|
|
28828
|
+
}
|
|
28829
|
+
|
|
28830
|
+
if (this.layout === 'snowflake') {
|
|
28831
|
+
// same for both hidden and visible
|
|
28832
|
+
return 'body-lg';
|
|
28833
|
+
}
|
|
28834
|
+
|
|
28835
|
+
// edge case for enabling visual overrides in datepicker
|
|
28836
|
+
if (this.layout === 'classic' && this.shape === 'snowflake') {
|
|
28837
|
+
return 'body-lg';
|
|
28838
|
+
}
|
|
28839
|
+
|
|
28840
|
+
// classic layout (default) - same for both hidden and visible
|
|
28841
|
+
return 'body-default';
|
|
28842
|
+
}
|
|
28843
|
+
|
|
28844
|
+
get commonDisplayValueWrapperClasses() {
|
|
28845
|
+
return {
|
|
28846
|
+
'displayValueWrapper': true,
|
|
28847
|
+
'util_displayHiddenVisually': this.dvHidden,
|
|
28848
|
+
[this.displayValueFontClass]: true,
|
|
28849
|
+
};
|
|
28850
|
+
}
|
|
28851
|
+
|
|
28852
|
+
/**
|
|
28853
|
+
* Function to determine if there is any displayValue content to render.
|
|
28854
|
+
* @private
|
|
28855
|
+
* @returns {void}
|
|
28856
|
+
*/
|
|
28857
|
+
checkDisplayValueSlotChange() {
|
|
28858
|
+
let nodes = this.shadowRoot.querySelector('slot[name="displayValue"]').assignedNodes();
|
|
28859
|
+
|
|
28860
|
+
// Handle when DisplayValue is multi-level slot content (e.g. combobox passing displayValue to input)
|
|
28861
|
+
if (nodes && nodes[0] && nodes[0].tagName === 'SLOT') {
|
|
28862
|
+
nodes = nodes[0].assignedNodes();
|
|
28863
|
+
}
|
|
28864
|
+
|
|
28865
|
+
let hasContent = false;
|
|
28866
|
+
|
|
28867
|
+
if (nodes.length > 0) {
|
|
28868
|
+
hasContent = true;
|
|
28869
|
+
}
|
|
28870
|
+
|
|
28871
|
+
this.hasDisplayValueContent = hasContent;
|
|
28872
|
+
}
|
|
28873
|
+
|
|
28755
28874
|
/**
|
|
28756
28875
|
* Force the calendar view to the focus date when it changes.
|
|
28757
28876
|
* @private
|
|
@@ -29182,11 +29301,13 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
29182
29301
|
setHasValue() {
|
|
29183
29302
|
if (!this.range) {
|
|
29184
29303
|
this.hasValue = this.value && this.value.length > 0;
|
|
29304
|
+
this.hasAllValues = this.hasValue;
|
|
29185
29305
|
return;
|
|
29186
29306
|
}
|
|
29187
29307
|
|
|
29188
29308
|
// eslint-disable-next-line no-extra-parens
|
|
29189
29309
|
this.hasValue = (this.value && this.value.length > 0) || (this.valueEnd && this.valueEnd.length > 0);
|
|
29310
|
+
this.hasAllValues = (this.value && this.value.length > 0) && (this.valueEnd && this.valueEnd.length > 0); // eslint-disable-line no-extra-parens
|
|
29190
29311
|
}
|
|
29191
29312
|
|
|
29192
29313
|
get hasError() {
|
|
@@ -29492,21 +29613,23 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
29492
29613
|
*/
|
|
29493
29614
|
renderSnowflakeLayout() {
|
|
29494
29615
|
const accentsClassMap = {
|
|
29495
|
-
error: this.hasError
|
|
29616
|
+
'error': this.hasError
|
|
29496
29617
|
};
|
|
29497
29618
|
|
|
29498
29619
|
const inputSectionClassMap = {
|
|
29499
|
-
inputSection: true,
|
|
29620
|
+
'inputSection': true,
|
|
29500
29621
|
|
|
29501
|
-
hasValue: this.hasValue,
|
|
29502
|
-
hasFocus: this.hasFocus,
|
|
29622
|
+
'hasValue': this.hasValue,
|
|
29623
|
+
'hasFocus': this.hasFocus,
|
|
29624
|
+
'util_displayHiddenVisually': !this.dvHidden
|
|
29503
29625
|
};
|
|
29504
29626
|
|
|
29505
29627
|
const labelClassMap = {
|
|
29506
|
-
mainLabel: true,
|
|
29628
|
+
'mainLabel': true,
|
|
29507
29629
|
|
|
29508
|
-
hasValue: this.hasValue,
|
|
29509
|
-
hasFocus: this.hasFocus,
|
|
29630
|
+
'hasValue': this.hasValue,
|
|
29631
|
+
'hasFocus': this.hasFocus,
|
|
29632
|
+
'util_displayHiddenVisually': this.labelHidden,
|
|
29510
29633
|
[this.hasFocus || this.hasValue ? 'body-xs' : 'body-lg']: true,
|
|
29511
29634
|
};
|
|
29512
29635
|
|
|
@@ -29524,6 +29647,13 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
29524
29647
|
<div class="${e$3(inputSectionClassMap)}" part="inputSection">
|
|
29525
29648
|
${this.renderHtmlInputs()}
|
|
29526
29649
|
</div>
|
|
29650
|
+
<div class="${e$3(this.commonDisplayValueWrapperClasses)}">
|
|
29651
|
+
<slot name="displayValue" @slotchange=${this.checkDisplayValueSlotChange}>
|
|
29652
|
+
<span>
|
|
29653
|
+
${this.formatShortDate(this.value)}${this.range ? u$3`–${this.formatShortDate(this.valueEnd)}` : undefined}
|
|
29654
|
+
</span>
|
|
29655
|
+
</slot>
|
|
29656
|
+
</div>
|
|
29527
29657
|
</div>
|
|
29528
29658
|
<div class="accents right ${e$3(accentsClassMap)}">
|
|
29529
29659
|
${this.hasError
|
|
@@ -65,7 +65,7 @@ The `<auro-datepicker>` element should be used in situations where users may:
|
|
|
65
65
|
<div class="exampleWrapper--ondark" style="width: 306px">
|
|
66
66
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/ondark-range.html) -->
|
|
67
67
|
<!-- The below content is automatically added from ./../apiExamples/snowflake/ondark-range.html -->
|
|
68
|
-
<auro-datepicker range layout="snowflake" shape="snowflake" ondark placeholder="MM/DD/YYYY">
|
|
68
|
+
<auro-datepicker range layout="snowflake" shape="snowflake" ondark placeholder="MM/DD/YYYY" dvInputOnly>
|
|
69
69
|
<span slot="ariaLabel.bib.close">Close Calendar</span>
|
|
70
70
|
<span slot="label">Dates</span>
|
|
71
71
|
<span slot="bib.fullscreen.headline">Datepicker Headline</span>
|
|
@@ -77,7 +77,7 @@ The `<auro-datepicker>` element should be used in situations where users may:
|
|
|
77
77
|
<div class="exampleWrapper--ondark">
|
|
78
78
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/ondark-range.html) -->
|
|
79
79
|
<!-- The below content is automatically added from ./../apiExamples/snowflake/ondark-range.html -->
|
|
80
|
-
<auro-datepicker range layout="snowflake" shape="snowflake" ondark placeholder="MM/DD/YYYY">
|
|
80
|
+
<auro-datepicker range layout="snowflake" shape="snowflake" ondark placeholder="MM/DD/YYYY" dvInputOnly>
|
|
81
81
|
<span slot="ariaLabel.bib.close">Close Calendar</span>
|
|
82
82
|
<span slot="label">Dates</span>
|
|
83
83
|
<span slot="bib.fullscreen.headline">Datepicker Headline</span>
|
|
@@ -92,7 +92,7 @@ The `<auro-datepicker>` element should be used in situations where users may:
|
|
|
92
92
|
<!-- The below code snippet is automatically added from ./../apiExamples/snowflake/ondark-range.html -->
|
|
93
93
|
|
|
94
94
|
```html
|
|
95
|
-
<auro-datepicker range layout="snowflake" shape="snowflake" ondark placeholder="MM/DD/YYYY">
|
|
95
|
+
<auro-datepicker range layout="snowflake" shape="snowflake" ondark placeholder="MM/DD/YYYY" dvInputOnly>
|
|
96
96
|
<span slot="ariaLabel.bib.close">Close Calendar</span>
|
|
97
97
|
<span slot="label">Dates</span>
|
|
98
98
|
<span slot="bib.fullscreen.headline">Datepicker Headline</span>
|