@aurodesignsystem/auro-formkit 5.3.1 → 5.4.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 +4 -3
- 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/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
# [5.4.0](https://github.com/AlaskaAirlines/auro-formkit/compare/v5.3.1...v5.4.0) (2025-08-21)
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
###
|
|
4
|
+
### Features
|
|
5
5
|
|
|
6
|
-
*
|
|
6
|
+
* add host level displayValue slot [#1117](https://github.com/AlaskaAirlines/auro-formkit/issues/1117) ([6f65df4](https://github.com/AlaskaAirlines/auro-formkit/commit/6f65df4b88fe50327996997ac87b661212ae41c9))
|
|
7
|
+
* auto supply datepicker displayValue slot content [#1117](https://github.com/AlaskaAirlines/auro-formkit/issues/1117) ([aba4fa0](https://github.com/AlaskaAirlines/auro-formkit/commit/aba4fa0c67fd6b6fc084d0878b06de3d6ccfafe1))
|
|
7
8
|
|
|
8
9
|
### Changelog
|
|
9
10
|
|
|
@@ -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>
|
|
@@ -28023,6 +28023,7 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28023
28023
|
|
|
28024
28024
|
this.touched = false;
|
|
28025
28025
|
this.disabled = false;
|
|
28026
|
+
this.dvInputOnly = false;
|
|
28026
28027
|
this.required = false;
|
|
28027
28028
|
this.onDark = false;
|
|
28028
28029
|
this.range = false;
|
|
@@ -28065,6 +28066,26 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28065
28066
|
*/
|
|
28066
28067
|
this.dateSlotContent = [];
|
|
28067
28068
|
|
|
28069
|
+
/**
|
|
28070
|
+
* @private
|
|
28071
|
+
*/
|
|
28072
|
+
this.hasDisplayValueContent = true;
|
|
28073
|
+
|
|
28074
|
+
/**
|
|
28075
|
+
* @private
|
|
28076
|
+
*/
|
|
28077
|
+
this.hasFocus = false;
|
|
28078
|
+
|
|
28079
|
+
/**
|
|
28080
|
+
* @private
|
|
28081
|
+
*/
|
|
28082
|
+
this.hasValue = false;
|
|
28083
|
+
|
|
28084
|
+
/**
|
|
28085
|
+
* @private
|
|
28086
|
+
*/
|
|
28087
|
+
this.hasAllValues = false;
|
|
28088
|
+
|
|
28068
28089
|
/**
|
|
28069
28090
|
* @private
|
|
28070
28091
|
*/
|
|
@@ -28183,6 +28204,14 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28183
28204
|
reflect: true
|
|
28184
28205
|
},
|
|
28185
28206
|
|
|
28207
|
+
/**
|
|
28208
|
+
* If defined, the display value slot content will only mask the HTML5 input element. The input's label will not be masked.
|
|
28209
|
+
*/
|
|
28210
|
+
dvInputOnly: {
|
|
28211
|
+
type: Boolean,
|
|
28212
|
+
reflect: true
|
|
28213
|
+
},
|
|
28214
|
+
|
|
28186
28215
|
/**
|
|
28187
28216
|
* When defined, sets persistent validity to `customError` and sets the validation message to the attribute value.
|
|
28188
28217
|
*/
|
|
@@ -28204,6 +28233,14 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28204
28233
|
reflect: false,
|
|
28205
28234
|
},
|
|
28206
28235
|
|
|
28236
|
+
/**
|
|
28237
|
+
* @private
|
|
28238
|
+
*/
|
|
28239
|
+
hasAllValues: {
|
|
28240
|
+
type: Boolean,
|
|
28241
|
+
reflect: false
|
|
28242
|
+
},
|
|
28243
|
+
|
|
28207
28244
|
/**
|
|
28208
28245
|
* Specifies the date format. The default is `mm/dd/yyyy`.
|
|
28209
28246
|
*/
|
|
@@ -28493,6 +28530,88 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28493
28530
|
return [];
|
|
28494
28531
|
}
|
|
28495
28532
|
|
|
28533
|
+
/**
|
|
28534
|
+
* Whether the label is being hidden currently based on state.
|
|
28535
|
+
* @returns {boolean} - Returns true if the label is hidden.
|
|
28536
|
+
* @private
|
|
28537
|
+
*/
|
|
28538
|
+
get labelHidden() {
|
|
28539
|
+
return this.hasDisplayValueContent && this.dvInputOnly && !this.hasFocus && this.hasAllValues;
|
|
28540
|
+
}
|
|
28541
|
+
|
|
28542
|
+
/**
|
|
28543
|
+
* Whether the displayValue container is being hidden currently based on state.
|
|
28544
|
+
* @returns {boolean} - Returns true if the label is hidden.
|
|
28545
|
+
* @private
|
|
28546
|
+
*/
|
|
28547
|
+
get dvHidden() {
|
|
28548
|
+
return !this.hasDisplayValueContent || this.hasFocus || !this.hasAllValues;
|
|
28549
|
+
}
|
|
28550
|
+
|
|
28551
|
+
/**
|
|
28552
|
+
* Returns the input font class based on layout and visibility state.
|
|
28553
|
+
* @private
|
|
28554
|
+
* @returns {string} - The font class for the input.
|
|
28555
|
+
*/
|
|
28556
|
+
get displayValueFontClass() {
|
|
28557
|
+
if (this.layout.startsWith('emphasized')) {
|
|
28558
|
+
let typeSize = 'accent-xl';
|
|
28559
|
+
|
|
28560
|
+
if (this.hasDisplayValueContent) {
|
|
28561
|
+
if (!this.hasValue) {
|
|
28562
|
+
typeSize = 'body-sm';
|
|
28563
|
+
}
|
|
28564
|
+
} else if (this.noFocusOrValue) {
|
|
28565
|
+
typeSize = 'body-sm';
|
|
28566
|
+
}
|
|
28567
|
+
|
|
28568
|
+
return typeSize;
|
|
28569
|
+
}
|
|
28570
|
+
|
|
28571
|
+
if (this.layout === 'snowflake') {
|
|
28572
|
+
// same for both hidden and visible
|
|
28573
|
+
return 'body-lg';
|
|
28574
|
+
}
|
|
28575
|
+
|
|
28576
|
+
// edge case for enabling visual overrides in datepicker
|
|
28577
|
+
if (this.layout === 'classic' && this.shape === 'snowflake') {
|
|
28578
|
+
return 'body-lg';
|
|
28579
|
+
}
|
|
28580
|
+
|
|
28581
|
+
// classic layout (default) - same for both hidden and visible
|
|
28582
|
+
return 'body-default';
|
|
28583
|
+
}
|
|
28584
|
+
|
|
28585
|
+
get commonDisplayValueWrapperClasses() {
|
|
28586
|
+
return {
|
|
28587
|
+
'displayValueWrapper': true,
|
|
28588
|
+
'util_displayHiddenVisually': this.dvHidden,
|
|
28589
|
+
[this.displayValueFontClass]: true,
|
|
28590
|
+
};
|
|
28591
|
+
}
|
|
28592
|
+
|
|
28593
|
+
/**
|
|
28594
|
+
* Function to determine if there is any displayValue content to render.
|
|
28595
|
+
* @private
|
|
28596
|
+
* @returns {void}
|
|
28597
|
+
*/
|
|
28598
|
+
checkDisplayValueSlotChange() {
|
|
28599
|
+
let nodes = this.shadowRoot.querySelector('slot[name="displayValue"]').assignedNodes();
|
|
28600
|
+
|
|
28601
|
+
// Handle when DisplayValue is multi-level slot content (e.g. combobox passing displayValue to input)
|
|
28602
|
+
if (nodes && nodes[0] && nodes[0].tagName === 'SLOT') {
|
|
28603
|
+
nodes = nodes[0].assignedNodes();
|
|
28604
|
+
}
|
|
28605
|
+
|
|
28606
|
+
let hasContent = false;
|
|
28607
|
+
|
|
28608
|
+
if (nodes.length > 0) {
|
|
28609
|
+
hasContent = true;
|
|
28610
|
+
}
|
|
28611
|
+
|
|
28612
|
+
this.hasDisplayValueContent = hasContent;
|
|
28613
|
+
}
|
|
28614
|
+
|
|
28496
28615
|
/**
|
|
28497
28616
|
* Force the calendar view to the focus date when it changes.
|
|
28498
28617
|
* @private
|
|
@@ -28923,11 +29042,13 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28923
29042
|
setHasValue() {
|
|
28924
29043
|
if (!this.range) {
|
|
28925
29044
|
this.hasValue = this.value && this.value.length > 0;
|
|
29045
|
+
this.hasAllValues = this.hasValue;
|
|
28926
29046
|
return;
|
|
28927
29047
|
}
|
|
28928
29048
|
|
|
28929
29049
|
// eslint-disable-next-line no-extra-parens
|
|
28930
29050
|
this.hasValue = (this.value && this.value.length > 0) || (this.valueEnd && this.valueEnd.length > 0);
|
|
29051
|
+
this.hasAllValues = (this.value && this.value.length > 0) && (this.valueEnd && this.valueEnd.length > 0); // eslint-disable-line no-extra-parens
|
|
28931
29052
|
}
|
|
28932
29053
|
|
|
28933
29054
|
get hasError() {
|
|
@@ -29233,21 +29354,23 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
29233
29354
|
*/
|
|
29234
29355
|
renderSnowflakeLayout() {
|
|
29235
29356
|
const accentsClassMap = {
|
|
29236
|
-
error: this.hasError
|
|
29357
|
+
'error': this.hasError
|
|
29237
29358
|
};
|
|
29238
29359
|
|
|
29239
29360
|
const inputSectionClassMap = {
|
|
29240
|
-
inputSection: true,
|
|
29361
|
+
'inputSection': true,
|
|
29241
29362
|
|
|
29242
|
-
hasValue: this.hasValue,
|
|
29243
|
-
hasFocus: this.hasFocus,
|
|
29363
|
+
'hasValue': this.hasValue,
|
|
29364
|
+
'hasFocus': this.hasFocus,
|
|
29365
|
+
'util_displayHiddenVisually': !this.dvHidden
|
|
29244
29366
|
};
|
|
29245
29367
|
|
|
29246
29368
|
const labelClassMap = {
|
|
29247
|
-
mainLabel: true,
|
|
29369
|
+
'mainLabel': true,
|
|
29248
29370
|
|
|
29249
|
-
hasValue: this.hasValue,
|
|
29250
|
-
hasFocus: this.hasFocus,
|
|
29371
|
+
'hasValue': this.hasValue,
|
|
29372
|
+
'hasFocus': this.hasFocus,
|
|
29373
|
+
'util_displayHiddenVisually': this.labelHidden,
|
|
29251
29374
|
[this.hasFocus || this.hasValue ? 'body-xs' : 'body-lg']: true,
|
|
29252
29375
|
};
|
|
29253
29376
|
|
|
@@ -29265,6 +29388,13 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
29265
29388
|
<div class="${e$3(inputSectionClassMap)}" part="inputSection">
|
|
29266
29389
|
${this.renderHtmlInputs()}
|
|
29267
29390
|
</div>
|
|
29391
|
+
<div class="${e$3(this.commonDisplayValueWrapperClasses)}">
|
|
29392
|
+
<slot name="displayValue" @slotchange=${this.checkDisplayValueSlotChange}>
|
|
29393
|
+
<span>
|
|
29394
|
+
${this.formatShortDate(this.value)}${this.range ? u$3`–${this.formatShortDate(this.valueEnd)}` : undefined}
|
|
29395
|
+
</span>
|
|
29396
|
+
</slot>
|
|
29397
|
+
</div>
|
|
29268
29398
|
</div>
|
|
29269
29399
|
<div class="accents right ${e$3(accentsClassMap)}">
|
|
29270
29400
|
${this.hasError
|
|
@@ -64,6 +64,13 @@ export class AuroDatePicker extends AuroElement {
|
|
|
64
64
|
type: BooleanConstructor;
|
|
65
65
|
reflect: boolean;
|
|
66
66
|
};
|
|
67
|
+
/**
|
|
68
|
+
* If defined, the display value slot content will only mask the HTML5 input element. The input's label will not be masked.
|
|
69
|
+
*/
|
|
70
|
+
dvInputOnly: {
|
|
71
|
+
type: BooleanConstructor;
|
|
72
|
+
reflect: boolean;
|
|
73
|
+
};
|
|
67
74
|
/**
|
|
68
75
|
* When defined, sets persistent validity to `customError` and sets the validation message to the attribute value.
|
|
69
76
|
*/
|
|
@@ -82,6 +89,13 @@ export class AuroDatePicker extends AuroElement {
|
|
|
82
89
|
type: BooleanConstructor;
|
|
83
90
|
reflect: boolean;
|
|
84
91
|
};
|
|
92
|
+
/**
|
|
93
|
+
* @private
|
|
94
|
+
*/
|
|
95
|
+
hasAllValues: {
|
|
96
|
+
type: BooleanConstructor;
|
|
97
|
+
reflect: boolean;
|
|
98
|
+
};
|
|
85
99
|
/**
|
|
86
100
|
* Specifies the date format. The default is `mm/dd/yyyy`.
|
|
87
101
|
*/
|
|
@@ -308,6 +322,7 @@ export class AuroDatePicker extends AuroElement {
|
|
|
308
322
|
formattedStartDate: boolean;
|
|
309
323
|
touched: boolean;
|
|
310
324
|
disabled: boolean;
|
|
325
|
+
dvInputOnly: boolean;
|
|
311
326
|
required: boolean;
|
|
312
327
|
onDark: boolean;
|
|
313
328
|
range: boolean;
|
|
@@ -332,6 +347,22 @@ export class AuroDatePicker extends AuroElement {
|
|
|
332
347
|
* @private
|
|
333
348
|
*/
|
|
334
349
|
private dateSlotContent;
|
|
350
|
+
/**
|
|
351
|
+
* @private
|
|
352
|
+
*/
|
|
353
|
+
private hasDisplayValueContent;
|
|
354
|
+
/**
|
|
355
|
+
* @private
|
|
356
|
+
*/
|
|
357
|
+
private hasFocus;
|
|
358
|
+
/**
|
|
359
|
+
* @private
|
|
360
|
+
*/
|
|
361
|
+
private hasValue;
|
|
362
|
+
/**
|
|
363
|
+
* @private
|
|
364
|
+
*/
|
|
365
|
+
private hasAllValues;
|
|
335
366
|
/**
|
|
336
367
|
* @private
|
|
337
368
|
*/
|
|
@@ -379,6 +410,35 @@ export class AuroDatePicker extends AuroElement {
|
|
|
379
410
|
* @returns {string[]}
|
|
380
411
|
*/
|
|
381
412
|
get values(): string[];
|
|
413
|
+
/**
|
|
414
|
+
* Whether the label is being hidden currently based on state.
|
|
415
|
+
* @returns {boolean} - Returns true if the label is hidden.
|
|
416
|
+
* @private
|
|
417
|
+
*/
|
|
418
|
+
private get labelHidden();
|
|
419
|
+
/**
|
|
420
|
+
* Whether the displayValue container is being hidden currently based on state.
|
|
421
|
+
* @returns {boolean} - Returns true if the label is hidden.
|
|
422
|
+
* @private
|
|
423
|
+
*/
|
|
424
|
+
private get dvHidden();
|
|
425
|
+
/**
|
|
426
|
+
* Returns the input font class based on layout and visibility state.
|
|
427
|
+
* @private
|
|
428
|
+
* @returns {string} - The font class for the input.
|
|
429
|
+
*/
|
|
430
|
+
private get displayValueFontClass();
|
|
431
|
+
get commonDisplayValueWrapperClasses(): {
|
|
432
|
+
[x: string]: boolean;
|
|
433
|
+
displayValueWrapper: boolean;
|
|
434
|
+
util_displayHiddenVisually: boolean;
|
|
435
|
+
};
|
|
436
|
+
/**
|
|
437
|
+
* Function to determine if there is any displayValue content to render.
|
|
438
|
+
* @private
|
|
439
|
+
* @returns {void}
|
|
440
|
+
*/
|
|
441
|
+
private checkDisplayValueSlotChange;
|
|
382
442
|
/**
|
|
383
443
|
* Force the calendar view to the focus date when it changes.
|
|
384
444
|
* @private
|
|
@@ -397,7 +457,6 @@ export class AuroDatePicker extends AuroElement {
|
|
|
397
457
|
* @returns {void}
|
|
398
458
|
*/
|
|
399
459
|
focus(focusInput?: string): void;
|
|
400
|
-
hasFocus: boolean;
|
|
401
460
|
/**
|
|
402
461
|
* Converts valid time number to format used by wc-date-range API.
|
|
403
462
|
* @private
|
|
@@ -533,7 +592,6 @@ export class AuroDatePicker extends AuroElement {
|
|
|
533
592
|
* @private
|
|
534
593
|
*/
|
|
535
594
|
private setHasValue;
|
|
536
|
-
hasValue: boolean;
|
|
537
595
|
get hasError(): boolean;
|
|
538
596
|
updated(changedProperties: any): void;
|
|
539
597
|
monthFirst: boolean;
|
|
@@ -27948,6 +27948,7 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
27948
27948
|
|
|
27949
27949
|
this.touched = false;
|
|
27950
27950
|
this.disabled = false;
|
|
27951
|
+
this.dvInputOnly = false;
|
|
27951
27952
|
this.required = false;
|
|
27952
27953
|
this.onDark = false;
|
|
27953
27954
|
this.range = false;
|
|
@@ -27990,6 +27991,26 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
27990
27991
|
*/
|
|
27991
27992
|
this.dateSlotContent = [];
|
|
27992
27993
|
|
|
27994
|
+
/**
|
|
27995
|
+
* @private
|
|
27996
|
+
*/
|
|
27997
|
+
this.hasDisplayValueContent = true;
|
|
27998
|
+
|
|
27999
|
+
/**
|
|
28000
|
+
* @private
|
|
28001
|
+
*/
|
|
28002
|
+
this.hasFocus = false;
|
|
28003
|
+
|
|
28004
|
+
/**
|
|
28005
|
+
* @private
|
|
28006
|
+
*/
|
|
28007
|
+
this.hasValue = false;
|
|
28008
|
+
|
|
28009
|
+
/**
|
|
28010
|
+
* @private
|
|
28011
|
+
*/
|
|
28012
|
+
this.hasAllValues = false;
|
|
28013
|
+
|
|
27993
28014
|
/**
|
|
27994
28015
|
* @private
|
|
27995
28016
|
*/
|
|
@@ -28108,6 +28129,14 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28108
28129
|
reflect: true
|
|
28109
28130
|
},
|
|
28110
28131
|
|
|
28132
|
+
/**
|
|
28133
|
+
* If defined, the display value slot content will only mask the HTML5 input element. The input's label will not be masked.
|
|
28134
|
+
*/
|
|
28135
|
+
dvInputOnly: {
|
|
28136
|
+
type: Boolean,
|
|
28137
|
+
reflect: true
|
|
28138
|
+
},
|
|
28139
|
+
|
|
28111
28140
|
/**
|
|
28112
28141
|
* When defined, sets persistent validity to `customError` and sets the validation message to the attribute value.
|
|
28113
28142
|
*/
|
|
@@ -28129,6 +28158,14 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28129
28158
|
reflect: false,
|
|
28130
28159
|
},
|
|
28131
28160
|
|
|
28161
|
+
/**
|
|
28162
|
+
* @private
|
|
28163
|
+
*/
|
|
28164
|
+
hasAllValues: {
|
|
28165
|
+
type: Boolean,
|
|
28166
|
+
reflect: false
|
|
28167
|
+
},
|
|
28168
|
+
|
|
28132
28169
|
/**
|
|
28133
28170
|
* Specifies the date format. The default is `mm/dd/yyyy`.
|
|
28134
28171
|
*/
|
|
@@ -28418,6 +28455,88 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28418
28455
|
return [];
|
|
28419
28456
|
}
|
|
28420
28457
|
|
|
28458
|
+
/**
|
|
28459
|
+
* Whether the label is being hidden currently based on state.
|
|
28460
|
+
* @returns {boolean} - Returns true if the label is hidden.
|
|
28461
|
+
* @private
|
|
28462
|
+
*/
|
|
28463
|
+
get labelHidden() {
|
|
28464
|
+
return this.hasDisplayValueContent && this.dvInputOnly && !this.hasFocus && this.hasAllValues;
|
|
28465
|
+
}
|
|
28466
|
+
|
|
28467
|
+
/**
|
|
28468
|
+
* Whether the displayValue container is being hidden currently based on state.
|
|
28469
|
+
* @returns {boolean} - Returns true if the label is hidden.
|
|
28470
|
+
* @private
|
|
28471
|
+
*/
|
|
28472
|
+
get dvHidden() {
|
|
28473
|
+
return !this.hasDisplayValueContent || this.hasFocus || !this.hasAllValues;
|
|
28474
|
+
}
|
|
28475
|
+
|
|
28476
|
+
/**
|
|
28477
|
+
* Returns the input font class based on layout and visibility state.
|
|
28478
|
+
* @private
|
|
28479
|
+
* @returns {string} - The font class for the input.
|
|
28480
|
+
*/
|
|
28481
|
+
get displayValueFontClass() {
|
|
28482
|
+
if (this.layout.startsWith('emphasized')) {
|
|
28483
|
+
let typeSize = 'accent-xl';
|
|
28484
|
+
|
|
28485
|
+
if (this.hasDisplayValueContent) {
|
|
28486
|
+
if (!this.hasValue) {
|
|
28487
|
+
typeSize = 'body-sm';
|
|
28488
|
+
}
|
|
28489
|
+
} else if (this.noFocusOrValue) {
|
|
28490
|
+
typeSize = 'body-sm';
|
|
28491
|
+
}
|
|
28492
|
+
|
|
28493
|
+
return typeSize;
|
|
28494
|
+
}
|
|
28495
|
+
|
|
28496
|
+
if (this.layout === 'snowflake') {
|
|
28497
|
+
// same for both hidden and visible
|
|
28498
|
+
return 'body-lg';
|
|
28499
|
+
}
|
|
28500
|
+
|
|
28501
|
+
// edge case for enabling visual overrides in datepicker
|
|
28502
|
+
if (this.layout === 'classic' && this.shape === 'snowflake') {
|
|
28503
|
+
return 'body-lg';
|
|
28504
|
+
}
|
|
28505
|
+
|
|
28506
|
+
// classic layout (default) - same for both hidden and visible
|
|
28507
|
+
return 'body-default';
|
|
28508
|
+
}
|
|
28509
|
+
|
|
28510
|
+
get commonDisplayValueWrapperClasses() {
|
|
28511
|
+
return {
|
|
28512
|
+
'displayValueWrapper': true,
|
|
28513
|
+
'util_displayHiddenVisually': this.dvHidden,
|
|
28514
|
+
[this.displayValueFontClass]: true,
|
|
28515
|
+
};
|
|
28516
|
+
}
|
|
28517
|
+
|
|
28518
|
+
/**
|
|
28519
|
+
* Function to determine if there is any displayValue content to render.
|
|
28520
|
+
* @private
|
|
28521
|
+
* @returns {void}
|
|
28522
|
+
*/
|
|
28523
|
+
checkDisplayValueSlotChange() {
|
|
28524
|
+
let nodes = this.shadowRoot.querySelector('slot[name="displayValue"]').assignedNodes();
|
|
28525
|
+
|
|
28526
|
+
// Handle when DisplayValue is multi-level slot content (e.g. combobox passing displayValue to input)
|
|
28527
|
+
if (nodes && nodes[0] && nodes[0].tagName === 'SLOT') {
|
|
28528
|
+
nodes = nodes[0].assignedNodes();
|
|
28529
|
+
}
|
|
28530
|
+
|
|
28531
|
+
let hasContent = false;
|
|
28532
|
+
|
|
28533
|
+
if (nodes.length > 0) {
|
|
28534
|
+
hasContent = true;
|
|
28535
|
+
}
|
|
28536
|
+
|
|
28537
|
+
this.hasDisplayValueContent = hasContent;
|
|
28538
|
+
}
|
|
28539
|
+
|
|
28421
28540
|
/**
|
|
28422
28541
|
* Force the calendar view to the focus date when it changes.
|
|
28423
28542
|
* @private
|
|
@@ -28848,11 +28967,13 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28848
28967
|
setHasValue() {
|
|
28849
28968
|
if (!this.range) {
|
|
28850
28969
|
this.hasValue = this.value && this.value.length > 0;
|
|
28970
|
+
this.hasAllValues = this.hasValue;
|
|
28851
28971
|
return;
|
|
28852
28972
|
}
|
|
28853
28973
|
|
|
28854
28974
|
// eslint-disable-next-line no-extra-parens
|
|
28855
28975
|
this.hasValue = (this.value && this.value.length > 0) || (this.valueEnd && this.valueEnd.length > 0);
|
|
28976
|
+
this.hasAllValues = (this.value && this.value.length > 0) && (this.valueEnd && this.valueEnd.length > 0); // eslint-disable-line no-extra-parens
|
|
28856
28977
|
}
|
|
28857
28978
|
|
|
28858
28979
|
get hasError() {
|
|
@@ -29158,21 +29279,23 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
29158
29279
|
*/
|
|
29159
29280
|
renderSnowflakeLayout() {
|
|
29160
29281
|
const accentsClassMap = {
|
|
29161
|
-
error: this.hasError
|
|
29282
|
+
'error': this.hasError
|
|
29162
29283
|
};
|
|
29163
29284
|
|
|
29164
29285
|
const inputSectionClassMap = {
|
|
29165
|
-
inputSection: true,
|
|
29286
|
+
'inputSection': true,
|
|
29166
29287
|
|
|
29167
|
-
hasValue: this.hasValue,
|
|
29168
|
-
hasFocus: this.hasFocus,
|
|
29288
|
+
'hasValue': this.hasValue,
|
|
29289
|
+
'hasFocus': this.hasFocus,
|
|
29290
|
+
'util_displayHiddenVisually': !this.dvHidden
|
|
29169
29291
|
};
|
|
29170
29292
|
|
|
29171
29293
|
const labelClassMap = {
|
|
29172
|
-
mainLabel: true,
|
|
29294
|
+
'mainLabel': true,
|
|
29173
29295
|
|
|
29174
|
-
hasValue: this.hasValue,
|
|
29175
|
-
hasFocus: this.hasFocus,
|
|
29296
|
+
'hasValue': this.hasValue,
|
|
29297
|
+
'hasFocus': this.hasFocus,
|
|
29298
|
+
'util_displayHiddenVisually': this.labelHidden,
|
|
29176
29299
|
[this.hasFocus || this.hasValue ? 'body-xs' : 'body-lg']: true,
|
|
29177
29300
|
};
|
|
29178
29301
|
|
|
@@ -29190,6 +29313,13 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
29190
29313
|
<div class="${classMap(inputSectionClassMap)}" part="inputSection">
|
|
29191
29314
|
${this.renderHtmlInputs()}
|
|
29192
29315
|
</div>
|
|
29316
|
+
<div class="${classMap(this.commonDisplayValueWrapperClasses)}">
|
|
29317
|
+
<slot name="displayValue" @slotchange=${this.checkDisplayValueSlotChange}>
|
|
29318
|
+
<span>
|
|
29319
|
+
${this.formatShortDate(this.value)}${this.range ? html$1`–${this.formatShortDate(this.valueEnd)}` : undefined}
|
|
29320
|
+
</span>
|
|
29321
|
+
</slot>
|
|
29322
|
+
</div>
|
|
29193
29323
|
</div>
|
|
29194
29324
|
<div class="accents right ${classMap(accentsClassMap)}">
|
|
29195
29325
|
${this.hasError
|
|
@@ -27948,6 +27948,7 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
27948
27948
|
|
|
27949
27949
|
this.touched = false;
|
|
27950
27950
|
this.disabled = false;
|
|
27951
|
+
this.dvInputOnly = false;
|
|
27951
27952
|
this.required = false;
|
|
27952
27953
|
this.onDark = false;
|
|
27953
27954
|
this.range = false;
|
|
@@ -27990,6 +27991,26 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
27990
27991
|
*/
|
|
27991
27992
|
this.dateSlotContent = [];
|
|
27992
27993
|
|
|
27994
|
+
/**
|
|
27995
|
+
* @private
|
|
27996
|
+
*/
|
|
27997
|
+
this.hasDisplayValueContent = true;
|
|
27998
|
+
|
|
27999
|
+
/**
|
|
28000
|
+
* @private
|
|
28001
|
+
*/
|
|
28002
|
+
this.hasFocus = false;
|
|
28003
|
+
|
|
28004
|
+
/**
|
|
28005
|
+
* @private
|
|
28006
|
+
*/
|
|
28007
|
+
this.hasValue = false;
|
|
28008
|
+
|
|
28009
|
+
/**
|
|
28010
|
+
* @private
|
|
28011
|
+
*/
|
|
28012
|
+
this.hasAllValues = false;
|
|
28013
|
+
|
|
27993
28014
|
/**
|
|
27994
28015
|
* @private
|
|
27995
28016
|
*/
|
|
@@ -28108,6 +28129,14 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28108
28129
|
reflect: true
|
|
28109
28130
|
},
|
|
28110
28131
|
|
|
28132
|
+
/**
|
|
28133
|
+
* If defined, the display value slot content will only mask the HTML5 input element. The input's label will not be masked.
|
|
28134
|
+
*/
|
|
28135
|
+
dvInputOnly: {
|
|
28136
|
+
type: Boolean,
|
|
28137
|
+
reflect: true
|
|
28138
|
+
},
|
|
28139
|
+
|
|
28111
28140
|
/**
|
|
28112
28141
|
* When defined, sets persistent validity to `customError` and sets the validation message to the attribute value.
|
|
28113
28142
|
*/
|
|
@@ -28129,6 +28158,14 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28129
28158
|
reflect: false,
|
|
28130
28159
|
},
|
|
28131
28160
|
|
|
28161
|
+
/**
|
|
28162
|
+
* @private
|
|
28163
|
+
*/
|
|
28164
|
+
hasAllValues: {
|
|
28165
|
+
type: Boolean,
|
|
28166
|
+
reflect: false
|
|
28167
|
+
},
|
|
28168
|
+
|
|
28132
28169
|
/**
|
|
28133
28170
|
* Specifies the date format. The default is `mm/dd/yyyy`.
|
|
28134
28171
|
*/
|
|
@@ -28418,6 +28455,88 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28418
28455
|
return [];
|
|
28419
28456
|
}
|
|
28420
28457
|
|
|
28458
|
+
/**
|
|
28459
|
+
* Whether the label is being hidden currently based on state.
|
|
28460
|
+
* @returns {boolean} - Returns true if the label is hidden.
|
|
28461
|
+
* @private
|
|
28462
|
+
*/
|
|
28463
|
+
get labelHidden() {
|
|
28464
|
+
return this.hasDisplayValueContent && this.dvInputOnly && !this.hasFocus && this.hasAllValues;
|
|
28465
|
+
}
|
|
28466
|
+
|
|
28467
|
+
/**
|
|
28468
|
+
* Whether the displayValue container is being hidden currently based on state.
|
|
28469
|
+
* @returns {boolean} - Returns true if the label is hidden.
|
|
28470
|
+
* @private
|
|
28471
|
+
*/
|
|
28472
|
+
get dvHidden() {
|
|
28473
|
+
return !this.hasDisplayValueContent || this.hasFocus || !this.hasAllValues;
|
|
28474
|
+
}
|
|
28475
|
+
|
|
28476
|
+
/**
|
|
28477
|
+
* Returns the input font class based on layout and visibility state.
|
|
28478
|
+
* @private
|
|
28479
|
+
* @returns {string} - The font class for the input.
|
|
28480
|
+
*/
|
|
28481
|
+
get displayValueFontClass() {
|
|
28482
|
+
if (this.layout.startsWith('emphasized')) {
|
|
28483
|
+
let typeSize = 'accent-xl';
|
|
28484
|
+
|
|
28485
|
+
if (this.hasDisplayValueContent) {
|
|
28486
|
+
if (!this.hasValue) {
|
|
28487
|
+
typeSize = 'body-sm';
|
|
28488
|
+
}
|
|
28489
|
+
} else if (this.noFocusOrValue) {
|
|
28490
|
+
typeSize = 'body-sm';
|
|
28491
|
+
}
|
|
28492
|
+
|
|
28493
|
+
return typeSize;
|
|
28494
|
+
}
|
|
28495
|
+
|
|
28496
|
+
if (this.layout === 'snowflake') {
|
|
28497
|
+
// same for both hidden and visible
|
|
28498
|
+
return 'body-lg';
|
|
28499
|
+
}
|
|
28500
|
+
|
|
28501
|
+
// edge case for enabling visual overrides in datepicker
|
|
28502
|
+
if (this.layout === 'classic' && this.shape === 'snowflake') {
|
|
28503
|
+
return 'body-lg';
|
|
28504
|
+
}
|
|
28505
|
+
|
|
28506
|
+
// classic layout (default) - same for both hidden and visible
|
|
28507
|
+
return 'body-default';
|
|
28508
|
+
}
|
|
28509
|
+
|
|
28510
|
+
get commonDisplayValueWrapperClasses() {
|
|
28511
|
+
return {
|
|
28512
|
+
'displayValueWrapper': true,
|
|
28513
|
+
'util_displayHiddenVisually': this.dvHidden,
|
|
28514
|
+
[this.displayValueFontClass]: true,
|
|
28515
|
+
};
|
|
28516
|
+
}
|
|
28517
|
+
|
|
28518
|
+
/**
|
|
28519
|
+
* Function to determine if there is any displayValue content to render.
|
|
28520
|
+
* @private
|
|
28521
|
+
* @returns {void}
|
|
28522
|
+
*/
|
|
28523
|
+
checkDisplayValueSlotChange() {
|
|
28524
|
+
let nodes = this.shadowRoot.querySelector('slot[name="displayValue"]').assignedNodes();
|
|
28525
|
+
|
|
28526
|
+
// Handle when DisplayValue is multi-level slot content (e.g. combobox passing displayValue to input)
|
|
28527
|
+
if (nodes && nodes[0] && nodes[0].tagName === 'SLOT') {
|
|
28528
|
+
nodes = nodes[0].assignedNodes();
|
|
28529
|
+
}
|
|
28530
|
+
|
|
28531
|
+
let hasContent = false;
|
|
28532
|
+
|
|
28533
|
+
if (nodes.length > 0) {
|
|
28534
|
+
hasContent = true;
|
|
28535
|
+
}
|
|
28536
|
+
|
|
28537
|
+
this.hasDisplayValueContent = hasContent;
|
|
28538
|
+
}
|
|
28539
|
+
|
|
28421
28540
|
/**
|
|
28422
28541
|
* Force the calendar view to the focus date when it changes.
|
|
28423
28542
|
* @private
|
|
@@ -28848,11 +28967,13 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28848
28967
|
setHasValue() {
|
|
28849
28968
|
if (!this.range) {
|
|
28850
28969
|
this.hasValue = this.value && this.value.length > 0;
|
|
28970
|
+
this.hasAllValues = this.hasValue;
|
|
28851
28971
|
return;
|
|
28852
28972
|
}
|
|
28853
28973
|
|
|
28854
28974
|
// eslint-disable-next-line no-extra-parens
|
|
28855
28975
|
this.hasValue = (this.value && this.value.length > 0) || (this.valueEnd && this.valueEnd.length > 0);
|
|
28976
|
+
this.hasAllValues = (this.value && this.value.length > 0) && (this.valueEnd && this.valueEnd.length > 0); // eslint-disable-line no-extra-parens
|
|
28856
28977
|
}
|
|
28857
28978
|
|
|
28858
28979
|
get hasError() {
|
|
@@ -29158,21 +29279,23 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
29158
29279
|
*/
|
|
29159
29280
|
renderSnowflakeLayout() {
|
|
29160
29281
|
const accentsClassMap = {
|
|
29161
|
-
error: this.hasError
|
|
29282
|
+
'error': this.hasError
|
|
29162
29283
|
};
|
|
29163
29284
|
|
|
29164
29285
|
const inputSectionClassMap = {
|
|
29165
|
-
inputSection: true,
|
|
29286
|
+
'inputSection': true,
|
|
29166
29287
|
|
|
29167
|
-
hasValue: this.hasValue,
|
|
29168
|
-
hasFocus: this.hasFocus,
|
|
29288
|
+
'hasValue': this.hasValue,
|
|
29289
|
+
'hasFocus': this.hasFocus,
|
|
29290
|
+
'util_displayHiddenVisually': !this.dvHidden
|
|
29169
29291
|
};
|
|
29170
29292
|
|
|
29171
29293
|
const labelClassMap = {
|
|
29172
|
-
mainLabel: true,
|
|
29294
|
+
'mainLabel': true,
|
|
29173
29295
|
|
|
29174
|
-
hasValue: this.hasValue,
|
|
29175
|
-
hasFocus: this.hasFocus,
|
|
29296
|
+
'hasValue': this.hasValue,
|
|
29297
|
+
'hasFocus': this.hasFocus,
|
|
29298
|
+
'util_displayHiddenVisually': this.labelHidden,
|
|
29176
29299
|
[this.hasFocus || this.hasValue ? 'body-xs' : 'body-lg']: true,
|
|
29177
29300
|
};
|
|
29178
29301
|
|
|
@@ -29190,6 +29313,13 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
29190
29313
|
<div class="${classMap(inputSectionClassMap)}" part="inputSection">
|
|
29191
29314
|
${this.renderHtmlInputs()}
|
|
29192
29315
|
</div>
|
|
29316
|
+
<div class="${classMap(this.commonDisplayValueWrapperClasses)}">
|
|
29317
|
+
<slot name="displayValue" @slotchange=${this.checkDisplayValueSlotChange}>
|
|
29318
|
+
<span>
|
|
29319
|
+
${this.formatShortDate(this.value)}${this.range ? html$1`–${this.formatShortDate(this.valueEnd)}` : undefined}
|
|
29320
|
+
</span>
|
|
29321
|
+
</slot>
|
|
29322
|
+
</div>
|
|
29193
29323
|
</div>
|
|
29194
29324
|
<div class="accents right ${classMap(accentsClassMap)}">
|
|
29195
29325
|
${this.hasError
|
package/package.json
CHANGED