@aurodesignsystem-dev/auro-formkit 0.0.0-pr785.3 → 0.0.0-pr792.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/components/bibtemplate/dist/index.js +1 -1
- package/components/bibtemplate/dist/registered.js +1 -1
- package/components/checkbox/demo/api.min.js +16 -5
- package/components/checkbox/demo/index.min.js +16 -5
- package/components/checkbox/dist/index.js +16 -5
- package/components/checkbox/dist/registered.js +16 -5
- package/components/combobox/demo/api.md +1 -0
- package/components/combobox/demo/api.min.js +63 -38
- package/components/combobox/demo/index.min.js +63 -38
- package/components/combobox/dist/auro-combobox.d.ts +5 -0
- package/components/combobox/dist/index.js +62 -37
- package/components/combobox/dist/registered.js +62 -37
- package/components/counter/demo/api.min.js +29 -17
- package/components/counter/demo/index.min.js +29 -17
- package/components/counter/dist/index.js +24 -12
- package/components/counter/dist/registered.js +24 -12
- package/components/datepicker/README.md +1 -1
- package/components/datepicker/demo/api.md +40 -19
- package/components/datepicker/demo/api.min.js +214 -110
- package/components/datepicker/demo/index.md +4 -4
- package/components/datepicker/demo/index.min.js +214 -110
- package/components/datepicker/demo/readme.md +1 -1
- package/components/datepicker/dist/auro-datepicker.d.ts +55 -12
- package/components/datepicker/dist/index.js +214 -110
- package/components/datepicker/dist/registered.js +214 -110
- package/components/datepicker/dist/styles/classic/style-css.d.ts +2 -0
- package/components/input/demo/api.md +2 -1
- package/components/input/demo/api.min.js +34 -27
- package/components/input/demo/index.min.js +34 -27
- package/components/input/dist/auro-input.d.ts +0 -6
- package/components/input/dist/base-input.d.ts +5 -1
- package/components/input/dist/index.js +34 -27
- package/components/input/dist/registered.js +34 -27
- package/components/menu/demo/api.min.js +1 -1
- package/components/menu/demo/index.min.js +1 -1
- package/components/menu/dist/index.js +1 -1
- package/components/menu/dist/registered.js +1 -1
- package/components/radio/demo/api.min.js +16 -5
- package/components/radio/demo/index.min.js +16 -5
- package/components/radio/dist/index.js +16 -5
- package/components/radio/dist/registered.js +16 -5
- package/components/select/demo/api.min.js +19 -8
- package/components/select/demo/index.html +1 -0
- package/components/select/demo/index.min.js +19 -8
- package/components/select/dist/index.js +18 -7
- package/components/select/dist/registered.js +18 -7
- package/package.json +5 -5
- /package/components/datepicker/dist/styles/{default → classic}/color-css.d.ts +0 -0
|
@@ -989,13 +989,24 @@ let AuroFormValidation$1 = class AuroFormValidation {
|
|
|
989
989
|
this.getInputElements(elem);
|
|
990
990
|
this.getAuroInputs(elem);
|
|
991
991
|
|
|
992
|
-
//
|
|
992
|
+
// Check if validation should run
|
|
993
993
|
let validationShouldRun =
|
|
994
|
+
|
|
995
|
+
// If the validation was forced
|
|
994
996
|
force ||
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
997
|
+
|
|
998
|
+
// If the validation should run on input
|
|
999
|
+
elem.validateOnInput ||
|
|
1000
|
+
|
|
1001
|
+
// State-based checks
|
|
1002
|
+
(
|
|
1003
|
+
// Element is not currently focused
|
|
1004
|
+
!elem.contains(document.activeElement) && // native input is not focused directly
|
|
1005
|
+
!document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
|
|
1006
|
+
|
|
1007
|
+
// And element has been touched or is untouched but has a value
|
|
1008
|
+
( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
|
|
1009
|
+
);
|
|
999
1010
|
|
|
1000
1011
|
if (elem.hasAttribute('error')) {
|
|
1001
1012
|
elem.validity = 'customError';
|
|
@@ -1545,19 +1556,21 @@ class UtilitiesCalendarRender {
|
|
|
1545
1556
|
}
|
|
1546
1557
|
}
|
|
1547
1558
|
|
|
1548
|
-
var styleCss$e = i$2`.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}:
|
|
1559
|
+
var styleCss$e = i$2`.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}.accents{flex-grow:0;flex-shrink:0;display:flex;align-items:center;justify-content:center}.accents.left{padding-right:var(--ds-size-100, 0.5rem)}.accents.right{width:var(--ds-size-400, 2rem)}.mainContent{height:100%;max-height:100%;flex-grow:1;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden}.inputSection{display:flex;flex-direction:row;align-items:center;width:100%;margin:0 auto}.inputContainer{display:flex;flex-direction:row;align-items:center;width:100%}.inputContainer:first-of-type{justify-content:flex-end}.inputContainer:last-of-type{justify-content:flex-start}.dpTriggerContent{width:100%}@media screen and (max-width: 576px){::part(popover){position:fixed !important;top:0 !important;left:0 !important;width:100vw !important;height:100vh !important;margin-bottom:var(--ds-size-200, 1rem);transform:unset !important}.calendarWrapper{display:flex;height:100dvh;flex-direction:row;justify-content:center}}`;
|
|
1549
1560
|
|
|
1550
|
-
var colorCss$d = i$2`.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}[auro-input]::part(wrapper){--ds-auro-input-border-color: transparent;--ds-auro-input-container-color: transparent}.dpTriggerContent [auro-input]:nth-child(2):before{background-color:var(--ds-auro-datepicker-range-input-divider-color)}:host([
|
|
1561
|
+
var colorCss$d = i$2`.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 label{color:var(--ds-auro-datepicker-label-text-color)}:host .inputDivider{background-color:var(--ds-auro-datepicker-range-input-divider-color)}:host .error{color:var(--ds-auro-datepicker-error-icon-color)}[auro-input]::part(wrapper){--ds-auro-input-border-color: transparent;--ds-auro-input-container-color: transparent}.dpTriggerContent [auro-input]:nth-child(2):before{background-color:var(--ds-auro-datepicker-range-input-divider-color)}:host(:not([ondark])[disabled]){--ds-auro-datepicker-border-color: var(--ds-basic-color-border-subtle, #dddddd);--ds-auro-datepicker-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-datepicker-placeholder-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([ondark][disabled]){--ds-auro-datepicker-border-color: var(--ds-advanced-color-button-primary-border-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-datepicker-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-datepicker-placeholder-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
|
|
1551
1562
|
|
|
1552
|
-
var tokensCss$b = i$2`:host{--ds-auro-datepicker-
|
|
1563
|
+
var tokensCss$b = i$2`:host(:not([ondark])){--ds-auro-datepicker-range-input-divider-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-datepicker-error-icon-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-datepicker-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-calendar-mobile-header-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-calendar-mobile-header-divider-color: var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15));--ds-auro-calendar-mobile-header-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-calendar-nav-btn-border-color: transparent;--ds-auro-calendar-nav-btn-chevron-color: var(--ds-basic-color-brand-primary, #01426a);--ds-auro-calendar-nav-btn-container-color: transparent;--ds-auro-calendar-month-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-calendar-month-divider-color: var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15));--ds-auro-calendar-month-header-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-calendar-cell-border-color: transparent;--ds-auro-calendar-cell-container-color: transparent;--ds-auro-calendar-cell-in-range-color: var(--ds-advanced-color-shared-background-muted, #f7f7f7);--ds-auro-calendar-cell-price-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-calendar-cell-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]){--ds-auro-datepicker-range-input-divider-color: var(--ds-basic-color-texticon-inverse-muted, v.$ds-basic-color-texticon-inverse-muted);--ds-auro-datepicker-error-icon-color: var(--ds-basic-color-status-error-subtle, v.$ds-basic-color-status-error-subtle);--ds-auro-datepicker-label-text-color: var(--ds-basic-color-texticon-inverse-muted, v.$ds-basic-color-texticon-inverse-muted);--ds-auro-calendar-mobile-header-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-calendar-mobile-header-divider-color: var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15));--ds-auro-calendar-mobile-header-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-calendar-nav-btn-border-color: transparent;--ds-auro-calendar-nav-btn-chevron-color: var(--ds-basic-color-brand-primary, #01426a);--ds-auro-calendar-nav-btn-container-color: transparent;--ds-auro-calendar-month-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-calendar-month-divider-color: var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15));--ds-auro-calendar-month-header-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-calendar-cell-border-color: transparent;--ds-auro-calendar-cell-container-color: transparent;--ds-auro-calendar-cell-in-range-color: var(--ds-advanced-color-shared-background-muted, #f7f7f7);--ds-auro-calendar-cell-price-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-calendar-cell-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}`;
|
|
1553
1564
|
|
|
1554
1565
|
var shapeSizeCss$2 = i$2`.wrapper{overflow:hidden}.shape-classic-xl,.shape-classic-lg,.shape-classic-md,.shape-classic-sm,.shape-classic-xs{min-height:58px;max-height:58px;border-style:solid;border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}.shape-classic-xl.simple,.shape-classic-lg.simple,.shape-classic-md.simple,.shape-classic-sm.simple,.shape-classic-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset;box-shadow:none}.shape-classic-xl.thin,.shape-classic-lg.thin,.shape-classic-md.thin,.shape-classic-sm.thin,.shape-classic-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-classic-xl.parentBorder,.shape-classic-lg.parentBorder,.shape-classic-md.parentBorder,.shape-classic-sm.parentBorder,.shape-classic-xs.parentBorder{border:0;box-shadow:unset;min-height:56px;max-height:56px}.shape-snowflake-xl,.shape-snowflake-lg,.shape-snowflake-md,.shape-snowflake-sm,.shape-snowflake-xs{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:30px}.shape-snowflake-xl.simple,.shape-snowflake-lg.simple,.shape-snowflake-md.simple,.shape-snowflake-sm.simple,.shape-snowflake-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset;box-shadow:none}.shape-snowflake-xl.thin,.shape-snowflake-lg.thin,.shape-snowflake-md.thin,.shape-snowflake-sm.thin,.shape-snowflake-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-snowflake-xl.parentBorder,.shape-snowflake-lg.parentBorder,.shape-snowflake-md.parentBorder,.shape-snowflake-sm.parentBorder,.shape-snowflake-xs.parentBorder{border:0;box-shadow:unset;min-height:56px;max-height:56px}.shape-box-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-box-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-box-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-rounded-lg{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:6px}.shape-rounded-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-rounded-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-rounded-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-left-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-left-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-left-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-right-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-right-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-right-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-left-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-left-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-left-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-right-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-right-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-right-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}`;
|
|
1555
1566
|
|
|
1567
|
+
var classicLayoutStyle = i$2`.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([layout*=classic]) .accents{display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) [auro-input]::part(wrapper){border-width:0;box-shadow:none}:host([layout*=classic]) [auro-input].dateTo{margin-left:var(--ds-size-150, 0.75rem)}:host([layout*=classic]) [auro-input].dateTo::part(accent-left){display:none}:host([layout*=classic]) .inputDivider{width:1px;height:2rem}`;
|
|
1568
|
+
|
|
1556
1569
|
var classicLayoutColor = i$2``;
|
|
1557
1570
|
|
|
1558
|
-
var snowflakeStyle = i$2
|
|
1571
|
+
var snowflakeStyle = i$2`:host([layout*=snowflake]) [auro-input]{flex:1;text-align:center}:host([layout*=snowflake]) [auro-input]::part(label),:host([layout*=snowflake]) [auro-input]::part(accent-left),:host([layout*=snowflake]) [auro-input]::part(accent-right){display:none}:host([layout*=snowflake]) [auro-input]::part(input){padding-bottom:unset;text-align:center;font-size:var(--ds-text-body-size-lg, 1.125rem);line-height:var(--ds-text-body-height-lg, 1.625rem);transition:unset}:host([layout*=snowflake]) [auro-input]::part(wrapper){min-height:unset;max-height:unset;box-shadow:unset}:host([layout*=snowflake]) [auro-input]::part(wrapper) .mainContent{padding-bottom:unset}:host([layout*=snowflake]) [auro-input]::part(inputHelpText){display:none}:host([layout*=snowflake]) [auro-input]::part(displayValue){justify-content:center;font-size:var(--ds-text-body-size-lg, 1.125rem);line-height:var(--ds-text-body-height-lg, 1.625rem)}:host([layout*=snowflake]) [auro-dropdown]::part(trigger){width:100%}:host([layout*=snowflake]) .dpTriggerContent{width:100%}:host([layout*=snowflake]) .wrapper{height:60px;width:calc(100% - 48px);display:flex;flex-direction:row;justify-content:space-between;padding-left:24px;padding-right:24px}:host([layout*=snowflake]) label{font-size:var(--ds-text-body-size-lg, 1.125rem);line-height:var(--ds-text-body-height-lg, 1.625rem);font-weight:450;letter-spacing:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host([layout*=snowflake]) label.hasFocus,:host([layout*=snowflake]) label.hasValue{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-height-xs, 1rem)}:host([layout*=snowflake]) .inputDivider{height:18px;margin:4px 12px;width:2px}:host([layout*=snowflake]) .inputSection:not(:is(.disabled,.hasFocus,.hasValue)) .inputDivider{display:none}:host([layout*=snowflake][disabled]){pointer-events:none}`;
|
|
1559
1572
|
|
|
1560
|
-
var snowflakeColors = i$2`:host([layout=snowflake])
|
|
1573
|
+
var snowflakeColors = i$2`:host([layout=snowflake]) [auro-dropdown]:not(:is([error],.hasFocus)){--ds-auro-dropdown-trigger-border-color: transparent}`;
|
|
1561
1574
|
|
|
1562
1575
|
var styleCss$d = i$2`:host{--calendar-width: 336px;--mobile-footer-height: 150px;--mobile-header-height: 68px;height:100vh;height:100dvh}.calendars{display:flex;flex-direction:row}.calendarNavButtons{position:absolute;top:var(--ds-size-200, 1rem);right:var(--ds-size-50, 0.25rem);left:var(--ds-size-50, 0.25rem)}.calendarNavBtn{display:flex;width:var(--ds-size-500, 2.5rem);height:var(--ds-size-500, 2.5rem);align-items:center;justify-content:center;border-width:1px;border-style:solid;border-radius:50%;cursor:pointer}.prevMonth,.nextMonth{position:absolute;top:0}.prevMonth{left:0}.nextMonth{right:0}.headerActions{padding:0 var(--ds-size-200, 1rem)}.mobileHeader{width:100%;height:var(--mobile-header-height);z-index:1;align-items:center;flex-direction:row}.headerDateFrom{display:flex;height:var(--mobile-header-height);flex:1;flex-direction:column;justify-content:center;padding:0 var(--ds-size-150, 0.75rem) 0 var(--ds-size-200, 1rem)}.mobileDateLabel{font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}.headerDateTo{height:calc(var(--mobile-header-height) - var(--ds-size-300, 1.5rem));padding:var(--ds-size-300, 1.5rem) var(--ds-size-100, 0.5rem) 0 var(--ds-size-200, 1rem)}:host(:not([noRange])) .headerDateTo{position:relative;display:flex;flex:1;flex-direction:column;justify-content:center}:host(:not([noRange])) .headerDateTo:after{position:absolute;top:calc(50% + 10px);left:0;display:block;width:1px;height:var(--ds-size-300, 1.5rem);content:"";transform:translateY(-50%)}.mobileFooter{display:none;width:100%;align-items:flex-end;flex-direction:column;justify-content:flex-end}.mobileFooterActions{position:relative;bottom:0;left:50%;display:none;width:calc(100% - var(--ds-size-200, 1rem)*2);align-items:flex-end;flex-direction:column;justify-content:flex-end;padding:var(--ds-size-150) calc(var(--ds-size-200, 1rem));transform:translateX(-50%)}.mobileFooterActions auro-button{width:100%}:host([isfullscreen]){width:100%;max-height:100dvh;overflow:hidden}:host([isfullscreen]) .prevMonth,:host([isfullscreen]) .nextMonth{display:none}:host([isfullscreen]) .mobileHeader,:host([isfullscreen]) .mobileFooter,:host([isfullscreen]) .mobileFooterActions{display:flex}:host([isfullscreen]) .calendarWrapper{display:flex;flex-direction:column}:host([isfullscreen]) .calendars{display:flex;flex-direction:column;flex:1;align-items:center;width:100%;overscroll-behavior:contain}:host([isfullscreen]) .calendars:after{display:block;width:100%;height:var(--mobile-footer-height);content:""}`;
|
|
1563
1576
|
|
|
@@ -12947,7 +12960,7 @@ class AuroBibtemplate extends i {
|
|
|
12947
12960
|
/**
|
|
12948
12961
|
* @private
|
|
12949
12962
|
*/
|
|
12950
|
-
this.buttonTag = versioning.generateTag('auro-formkit-
|
|
12963
|
+
this.buttonTag = versioning.generateTag('auro-formkit-bibtemplate-button', buttonVersion$2, AuroButton$2);
|
|
12951
12964
|
}
|
|
12952
12965
|
|
|
12953
12966
|
static get styles() {
|
|
@@ -18834,23 +18847,23 @@ const u=(e,s,t)=>{const r=new Map;for(let l=s;l<=t;l++)r.set(e[l],l);return r},c
|
|
|
18834
18847
|
|
|
18835
18848
|
var shapeSizeCss = i$2`.wrapper{overflow:hidden}.shape-classic-xl,.shape-classic-lg,.shape-classic-md,.shape-classic-sm,.shape-classic-xs{min-height:58px;max-height:58px;border-style:solid;border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}.shape-classic-xl.simple,.shape-classic-lg.simple,.shape-classic-md.simple,.shape-classic-sm.simple,.shape-classic-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset;box-shadow:none}.shape-classic-xl.thin,.shape-classic-lg.thin,.shape-classic-md.thin,.shape-classic-sm.thin,.shape-classic-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-classic-xl.parentBorder,.shape-classic-lg.parentBorder,.shape-classic-md.parentBorder,.shape-classic-sm.parentBorder,.shape-classic-xs.parentBorder{border:0;box-shadow:unset;min-height:56px;max-height:56px}.shape-snowflake-xl,.shape-snowflake-lg,.shape-snowflake-md,.shape-snowflake-sm,.shape-snowflake-xs{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:30px}.shape-snowflake-xl.simple,.shape-snowflake-lg.simple,.shape-snowflake-md.simple,.shape-snowflake-sm.simple,.shape-snowflake-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset;box-shadow:none}.shape-snowflake-xl.thin,.shape-snowflake-lg.thin,.shape-snowflake-md.thin,.shape-snowflake-sm.thin,.shape-snowflake-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-snowflake-xl.parentBorder,.shape-snowflake-lg.parentBorder,.shape-snowflake-md.parentBorder,.shape-snowflake-sm.parentBorder,.shape-snowflake-xs.parentBorder{border:0;box-shadow:unset;min-height:56px;max-height:56px}.shape-box-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-box-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-box-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-rounded-lg{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:6px}.shape-rounded-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-rounded-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-rounded-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-left-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-left-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-left-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-right-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-right-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-right-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-left-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-left-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-left-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-right-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-right-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-right-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}`;
|
|
18836
18849
|
|
|
18837
|
-
var styleCss$4 = i$2`.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}.wrapper{cursor:text}.helpTextClasses{cursor:default}input{overflow:clip !important;width:100%;padding:0;border:0;background:unset;outline:none;overflow-clip-margin:0 !important;text-overflow:ellipsis}.displayValue{display:none}.displayValue.hasContent:is(.withValue):not(.hasFocus){display:flex;align-items:center}.accents:not(.util_displayHidden){display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px}`;
|
|
18850
|
+
var styleCss$4 = i$2`.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}.wrapper{cursor:text}.helpTextClasses{cursor:default}input{overflow:clip !important;width:100%;padding:0;border:0;background:unset;outline:none;overflow-clip-margin:0 !important;text-overflow:ellipsis}input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.displayValue{display:none}.displayValue.hasContent:is(.withValue):not(.hasFocus){display:flex;align-items:center}.accents:not(.util_displayHidden){display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px}`;
|
|
18838
18851
|
|
|
18839
18852
|
var styleDefaultCss = i$2`.layoutDefault .typeIcon,:host(:not([layout])) .typeIcon{display:flex;flex-direction:row;align-items:center}.layoutDefault .typeIcon [auro-icon],:host(:not([layout])) .typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.layoutDefault .notificationIcons,:host(:not([layout])) .notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .typeIcon,:host(:not([layout])[bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .notificationIcons,:host(:not([layout])[bordered]) .notificationIcons{align-items:center}:host([class=layoutDefault][bordered]) .notification:not(:first-of-type),:host(:not([layout])[bordered]) .notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .alertNotification,:host(:not([layout])[bordered]) .alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}:host([class=layoutDefault][bordered]) .passwordBtn,:host(:not([layout])[bordered]) .passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}:host([class=layoutDefault][bordered]) .notificationBtn,:host(:not([layout])[bordered]) .notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}:host([class=layoutDefault][bordered]) .notificationBtn [auro-icon],:host(:not([layout])[bordered]) .notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([class=layoutDefault][bordered]) .notificationBtn [auro-icon][hidden],:host(:not([layout])[bordered]) .notificationBtn [auro-icon][hidden]{display:none}:host([class=layoutDefault]:not([bordered])) .typeIcon,:host([class=layoutDefault]:not([bordered])) .notificationIcons,:host(:not([layout]):not([bordered])) .typeIcon,:host(:not([layout]):not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}:host([class=layoutDefault]:not([bordered])) .clearBtn,:host(:not([layout]):not([bordered])) .clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}.layoutDefault .wrapper:hover .clearBtn,.layoutDefault .wrapper:focus-within .clearBtn,:host(:not([layout])) .wrapper:hover .clearBtn,:host(:not([layout])) .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host([class=layoutDefault]:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification,:host(:not([layout]):focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}.layoutDefault input,:host(:not([layout])) input{border:unset}.layoutDefault .wrapper,:host(:not([layout])) .wrapper{position:relative;overflow:hidden;border-style:solid}:host([class=layoutDefault]:not([bordered],[borderless])) .wrapper,:host(:not([layout]):not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([class=layoutDefault][bordered]) .wrapper,:host(:not([layout])[bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host([class=layoutDefault]:not([borderless])) .wrapper:focus-within:before,:host(:not([layout]):not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([class=layoutDefault][validity]:not([validity=valid])) .wrapper:before,:host(:not([layout])[validity]:not([validity=valid])) .wrapper:before{border-bottom:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.layoutDefault :host,:host(:not([layout])) :host{position:relative;display:block}.layoutDefault .wrapper,:host(:not([layout])) .wrapper{display:flex;flex-direction:row}.layoutDefault .main,:host(:not([layout])) .main{display:flex;flex-direction:row;position:relative;flex:1}`;
|
|
18840
18853
|
|
|
18841
|
-
var colorBaseCss = i$2`.wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-background-color);color:var(--ds-auro-input-text-color)}.wrapper label{color:var(--ds-auro-input-label-text-color)}.wrapper input{caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}.wrapper input::placeholder{color:var(--ds-auro-input-placeholder-text-color)}.wrapper input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}
|
|
18854
|
+
var colorBaseCss = i$2`.wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-background-color);color:var(--ds-auro-input-text-color)}.wrapper label{color:var(--ds-auro-input-label-text-color)}.wrapper input{caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}.wrapper input::placeholder{color:var(--ds-auro-input-placeholder-text-color)}.wrapper input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}:host(:not([ondark])) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a)}:host([ondark]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff)}:host(:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([ondark]:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([ondark])[disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-subtle, #dddddd);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([ondark][disabled]){--ds-auro-input-border-color: var(--ds-advanced-color-button-primary-border-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
|
|
18842
18855
|
|
|
18843
18856
|
var tokensCss$4 = i$2`:host(:not([ondark])){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-error-icon-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-input-outline-color: transparent}:host([ondark]){--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-error-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-input-outline-color: transparent}`;
|
|
18844
18857
|
|
|
18845
|
-
var classicStyleCss = i$2`.layout-classic{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-input-outline-color)}.layout-classic .mainContent{position:relative;display:flex;flex:1;flex-direction:column;justify-content:center;cursor:text}.layout-classic .mainContent label{cursor:text;font-size:var(--ds-text-body-size-xs);line-height:20px;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}.layout-classic .mainContent input{height:auto;font-size:var(--ds-basic-text-body-default-font-size, 16px);line-height:var(--ds-basic-text-body-default-line-height, 24px);transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}.layout-classic .mainContent:has(input.util_displayHiddenVisually) label{padding-top:0;font-size:var(--ds-text-body-size-default, 1rem);justify-self:flex-start;line-height:var(--ds-text-body-size-default)}.layout-classic .mainContent:has(input.util_displayHiddenVisually) input{height:0;padding-bottom:0;line-height:0}.layout-classic .accents .typeIcon>*{margin-left:var(--ds-size-
|
|
18858
|
+
var classicStyleCss = i$2`.layout-classic{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-input-outline-color)}.layout-classic .mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;justify-content:center;cursor:text}.layout-classic .mainContent label{overflow:hidden;cursor:text;font-size:var(--ds-text-body-size-xs);line-height:20px;text-overflow:ellipsis;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:nowrap}.layout-classic .mainContent input{height:auto;font-size:var(--ds-basic-text-body-default-font-size, 16px);line-height:var(--ds-basic-text-body-default-line-height, 24px);transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}.layout-classic .mainContent:has(input.util_displayHiddenVisually) label{padding-top:0;font-size:var(--ds-text-body-size-default, 1rem);justify-self:flex-start;line-height:var(--ds-text-body-size-default)}.layout-classic .mainContent:has(input.util_displayHiddenVisually) input{height:0;padding-bottom:0;line-height:0}.layout-classic .accents .typeIcon>*{margin-left:var(--ds-size-100, 0.5rem)}.layout-classic .accents.left{padding-right:var(--ds-size-100, 0.5rem)}.layout-classic .accents.right{padding-left:var(--ds-size-100, 0.5rem)}.layout-classic .accents.right .notification{margin-right:var(--ds-size-100, 0.5rem)}.layout-classic.withValue{justify-content:flex-start}.layout-classic:focus-within{justify-content:flex-start}.layout-classic:focus-within .alertNotification{display:none}`;
|
|
18846
18859
|
|
|
18847
18860
|
var classicColorCss = i$2`.layout-classic label{color:var(--ds-auro-input-label-text-color)}.layout-classic:focus-within{--ds-auro-input-outline-color: var(--ds-auro-input-border-color)}:host(:not([ondark])) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a);--ds-auro-input-outline-color: var(--ds-basic-color-border-brand, #00274a)}:host([ondark]) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-outline-color: var(--ds-basic-color-border-inverse, #ffffff)}:host([layout*=classic]:not([ondark]):is([validity]:not([validity=valid]))){--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-input-outline-color: var(--ds-basic-color-status-error, #e31f26)}:host([layout*=classic]:not([ondark]):is([validity]:not([validity=valid]))) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-input-outline-color: var(--ds-basic-color-status-error, #e31f26)}:host([layout*=classic][ondark]:is([validity]:not([validity=valid]))){--ds-auro-input-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-input-outline-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host([layout*=classic][ondark]:is([validity]:not([validity=valid]))) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-input-outline-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}`;
|
|
18848
18861
|
|
|
18849
|
-
var emphasizedStyleCss = i$2`:host([layout*=emphasized][shape*=pill]:not([layout*=right])) .leftIndent{margin-left:var(--ds-size-
|
|
18862
|
+
var emphasizedStyleCss = i$2`:host([layout*=emphasized][shape*=pill]:not([layout*=right])) .leftIndent{margin-left:var(--ds-size-300, 1.5rem);width:calc(100% - var(--ds-size-300, 1.5rem))}:host([layout*=emphasized][shape*=pill]:not([layout*=left])) .rightIndent{margin-right:var(--ds-size-300, 1.5rem);width:calc(100% - var(--ds-size-300, 1.5rem))}:host([layout*=emphasized][shape*=pill]:not([layout*=left]):not([layout*=right])) .rightIndent{margin-right:var(--ds-size-300, 1.5rem);width:calc(100% - var(--ds-size-300, 1.5rem))}.layout-emphasized,.layout-emphasized-left,.layout-emphasized-right{display:flex;flex-direction:row;align-items:center;justify-content:center}.layout-emphasized label,.layout-emphasized-left label,.layout-emphasized-right label{text-transform:uppercase;font-size:32px;line-height:38px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.layout-emphasized input,.layout-emphasized-left input,.layout-emphasized-right input{text-align:center;font-size:14px;line-height:20px}.layout-emphasized .mainContent,.layout-emphasized-left .mainContent,.layout-emphasized-right .mainContent{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1;overflow:hidden}.layout-emphasized .displayValue,.layout-emphasized-left .displayValue,.layout-emphasized-right .displayValue{display:none;width:100%}.layout-emphasized .displayValue.hasContent:is(.withValue):not(.hasFocus),.layout-emphasized-left .displayValue.hasContent:is(.withValue):not(.hasFocus),.layout-emphasized-right .displayValue.hasContent:is(.withValue):not(.hasFocus){display:block}.layout-emphasized.withValue,.layout-emphasized-left.withValue,.layout-emphasized-right.withValue{justify-content:flex-start}.layout-emphasized.withValue label,.layout-emphasized-left.withValue label,.layout-emphasized-right.withValue label{display:block;text-transform:unset;font-size:10px;line-height:14px;width:100%;text-align:left}.layout-emphasized.withValue input,.layout-emphasized-left.withValue input,.layout-emphasized-right.withValue input{text-transform:uppercase;font-size:32px;line-height:38px;text-align:left;width:100%}.layout-emphasized:not(:focus-within):not(:is([validity]:not([validity=valid]))),.layout-emphasized-left:not(:focus-within):not(:is([validity]:not([validity=valid]))),.layout-emphasized-right:not(:focus-within):not(:is([validity]:not([validity=valid]))){--ds-auro-input-border-color: transparent}.layout-emphasized:focus-within,.layout-emphasized-left:focus-within,.layout-emphasized-right:focus-within{justify-content:flex-start}.layout-emphasized:focus-within label,.layout-emphasized-left:focus-within label,.layout-emphasized-right:focus-within label{display:block;text-transform:unset;font-size:10px;line-height:14px;width:100%;text-align:left}.layout-emphasized:focus-within input,.layout-emphasized-left:focus-within input,.layout-emphasized-right:focus-within input{text-transform:uppercase;font-size:32px;line-height:38px;text-align:left;width:100%}.layout-emphasized:focus-within .alertNotification,.layout-emphasized-left:focus-within .alertNotification,.layout-emphasized-right:focus-within .alertNotification{display:none}.layout-emphasized .accents.left,.layout-emphasized-left .accents.left,.layout-emphasized-right .accents.left{padding-left:var(--ds-size-300, 1.5rem)}.layout-emphasized .accents.right,.layout-emphasized-left .accents.right,.layout-emphasized-right .accents.right{padding-right:var(--ds-size-300, 1.5rem)}.layout-emphasized-left .alertNotification{margin-right:var(--ds-size-100, 0.5rem)}.layout-emphasized-left .clear{margin-left:var(--ds-size-100, 0.5rem)}.layout-emphasized .alertNotification,.layout-emphasized-right .alertNotification{margin-left:var(--ds-size-100, 0.5rem)}.layout-emphasized .clear,.layout-emphasized-right .clear{margin-right:var(--ds-size-100, 0.5rem)}`;
|
|
18850
18863
|
|
|
18851
18864
|
var emphasizedColorCss = i$2`.layout-emphasized:focus-within,.layout-emphasized.withValue,.layout-emphasized-left:focus-within,.layout-emphasized-left.withValue,.layout-emphasized-right:focus-within,.layout-emphasized-right.withValue{--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}.layout-emphasized:focus-within,.layout-emphasized-left:focus-within,.layout-emphasized-right:focus-within{--auro-input-border-color: var(--ds-auro-input-border-color)}`;
|
|
18852
18865
|
|
|
18853
|
-
var snowflakeStyleCss = i$2`:root{--ds-advanced-color-button-flat-text: #676767;--ds-advanced-color-button-flat-text-disabled: #d0d0d0;--ds-advanced-color-button-flat-text-hover: #525252;--ds-advanced-color-button-flat-text-inverse: #ffffff;--ds-advanced-color-button-flat-text-inverse-disabled: #7e8894;--ds-advanced-color-button-flat-text-inverse-hover: #adadad;--ds-advanced-color-button-ghost-background-hover: rgba(0, 0, 0, 0.05);--ds-advanced-color-button-ghost-background-inverse-hover: rgba(255, 255, 255, 0.05);--ds-advanced-color-button-ghost-text: #01426a;--ds-advanced-color-button-ghost-text-disabled: #d0d0d0;--ds-advanced-color-button-ghost-text-inverse: #ffffff;--ds-advanced-color-button-ghost-text-inverse-disabled: #7e8894;--ds-advanced-color-button-primary-background: #01426a;--ds-advanced-color-button-primary-background-disabled: #acc9e2;--ds-advanced-color-button-primary-background-hover: #00274a;--ds-advanced-color-button-primary-background-inactive: #cfe0ef;--ds-advanced-color-button-primary-background-inactive-hover: #89b2d4;--ds-advanced-color-button-primary-background-inverse: #ffffff;--ds-advanced-color-button-primary-background-inverse-disabled: rgba(255, 255, 255, 0.75);--ds-advanced-color-button-primary-background-inverse-hover: #ebf3f9;--ds-advanced-color-button-primary-border: #01426a;--ds-advanced-color-button-primary-border-disabled: #acc9e2;--ds-advanced-color-button-primary-border-hover: #00274a;--ds-advanced-color-button-primary-border-inverse: #ffffff;--ds-advanced-color-button-primary-border-inverse-disabled: rgba(255, 255, 255, 0.75);--ds-advanced-color-button-primary-border-inverse-hover: #ebf3f9;--ds-advanced-color-button-primary-text: #ffffff;--ds-advanced-color-button-primary-text-disabled: #ffffff;--ds-advanced-color-button-primary-text-inverse: #01426a;--ds-advanced-color-button-secondary-background: #ffffff;--ds-advanced-color-button-secondary-background-disabled: #f7f7f7;--ds-advanced-color-button-secondary-background-hover: #f2f2f2;--ds-advanced-color-button-secondary-background-inverse-hover: rgba(255, 255, 255, 0.1);--ds-advanced-color-button-secondary-border: #01426a;--ds-advanced-color-button-secondary-border-hover: #00274a;--ds-advanced-color-button-secondary-border-disabled: #cfe0ef;--ds-advanced-color-button-secondary-border-inverse: #ffffff;--ds-advanced-color-button-secondary-border-inverse-disabled: #dddddd;--ds-advanced-color-button-secondary-text: #01426a;--ds-advanced-color-button-secondary-text-hover: #00274a;--ds-advanced-color-button-secondary-text-inverse: #ffffff;--ds-advanced-color-button-tertiary-background: rgba(0, 0, 0, 0.05);--ds-advanced-color-button-tertiary-background-hover: rgba(0, 0, 0, 0.1);--ds-advanced-color-button-tertiary-background-inverse: rgba(255, 255, 255, 0.05);--ds-advanced-color-button-tertiary-background-inverse-hover: rgba(255, 255, 255, 0.1);--ds-advanced-color-button-tertiary-text: #01426a;--ds-advanced-color-button-tertiary-text-hover: #00274a;--ds-advanced-color-button-tertiary-text-inverse: #ffffff;--ds-advanced-color-accents-accent1: #b2d583;--ds-advanced-color-accents-accent1-bold: #92c450;--ds-advanced-color-accents-accent1-muted: #deedca;--ds-advanced-color-accents-accent2: #fad362;--ds-advanced-color-accents-accent2-bold: #f2ba14;--ds-advanced-color-accents-accent2-muted: #fde398;--ds-advanced-color-accents-accent3: #63beff;--ds-advanced-color-accents-accent3-bold: #0074ca;--ds-advanced-color-accents-accent3-muted: #aedeff;--ds-advanced-color-accents-accent4: #feb17a;--ds-advanced-color-accents-accent4-bold: #fb7f24;--ds-advanced-color-accents-accent4-muted: #ffe2cf;--ds-advanced-color-accents-transparency: rgba(0, 0, 0, 0.1);--ds-advanced-color-accents-transparency-inverse: rgba(255, 255, 255, 0.2);--ds-advanced-color-avatar-gradient-bottom: #cfe0ef;--ds-advanced-color-avatar-gradient-top: #6899c6;--ds-advanced-color-boolean-disabled-inverse: #7e8894;--ds-advanced-color-boolean-error: #e31f26;--ds-advanced-color-boolean-error-hover: #b1161c;--ds-advanced-color-boolean-error-inverse: #f9a4a8;--ds-advanced-color-boolean-error-inverse-hover: #f15f65;--ds-advanced-color-boolean-indicator: #ffffff;--ds-advanced-color-boolean-indicator-inverse: #00274a;--ds-advanced-color-boolean-isfalse: #ffffff;--ds-advanced-color-boolean-isfalse-border: #585e67;--ds-advanced-color-boolean-isfalse-border-inverse: #ffffff;--ds-advanced-color-boolean-isfalse-hover: #f2f2f2;--ds-advanced-color-boolean-isfalse-inverse: rgba(255, 255, 255, 0.15);--ds-advanced-color-boolean-isfalse-inverse-hover: rgba(255, 255, 255, 0.2);--ds-advanced-color-boolean-istrue: #01426a;--ds-advanced-color-boolean-istrue-hover: #00274a;--ds-advanced-color-boolean-istrue-inverse: #ffffff;--ds-advanced-color-boolean-istrue-inverse-hover: rgba(255, 255, 255, 0.7);--ds-advanced-color-flightline-indicator: #00274a;--ds-advanced-color-flightline-line: #00274a;--ds-advanced-color-hyperlink-text: #2875b5;--ds-advanced-color-hyperlink-text-hover: #01426a;--ds-advanced-color-hyperlink-text-inverse: #ffffff;--ds-advanced-color-hyperlink-text-inverse-hover: #ebf3f9;--ds-advanced-color-shared-background: #ffffff;--ds-advanced-color-shared-background-inverse: rgba(255, 255, 255, 0.15);--ds-advanced-color-shared-background-inverse-disabled: rgba(255, 255, 255, 0.1);--ds-advanced-color-shared-background-inverse-hover: rgba(255, 255, 255, 0.2);--ds-advanced-color-shared-background-muted: #f7f7f7;--ds-advanced-color-shared-background-strong: #7e7e7e;--ds-advanced-color-shared-scrim: rgba(0, 0, 0, 0.5);--ds-advanced-color-shared-text-accent: #2875b5;--ds-advanced-color-skeleton-background: #f7f8fa;--ds-advanced-color-skeleton-wave: #e4e8ec;--ds-advanced-color-state-background-disabled: #dddddd;--ds-advanced-color-state-background-hover: #f2f2f2;--ds-advanced-color-state-background-inverse-disabled: #7e8894;--ds-advanced-color-state-error-inverse: #f9a4a8;--ds-advanced-color-state-focused: #01426a;--ds-advanced-color-state-focused-inverse: #ffffff;--ds-advanced-color-state-selected: #01426a;--ds-advanced-color-state-selected-hover: #00274a;--ds-basic-color-border-bold: #585e67;--ds-basic-color-border-brand: #00274a;--ds-basic-color-border-default: #959595;--ds-basic-color-border-divider: rgba(0, 0, 0, 0.15);--ds-basic-color-border-divider-inverse: rgba(255, 255, 255, 0.4);--ds-basic-color-border-inverse: #ffffff;--ds-basic-color-border-subtle: #dddddd;--ds-basic-color-brand-primary: #01426a;--ds-basic-color-brand-primary-bold: #00274a;--ds-basic-color-brand-primary-muted: #ebf3f9;--ds-basic-color-brand-primary-subtle: #2875b5;--ds-basic-color-brand-secondary: #5de3f7;--ds-basic-color-brand-secondary-bold: #18c3dd;--ds-basic-color-brand-secondary-muted: #ebfafd;--ds-basic-color-brand-secondary-subtle: #b4eff9;--ds-basic-color-brand-tertiary: #a3cd6a;--ds-basic-color-brand-tertiary-bold: #7daf3b;--ds-basic-color-brand-tertiary-muted: #eaf3dd;--ds-basic-color-brand-tertiary-subtle: #c9e1a7;--ds-basic-color-fare-basiceconomy: #97eaf8;--ds-basic-color-fare-business: #01426a;--ds-basic-color-fare-economy: #0074ca;--ds-basic-color-fare-first: #00274a;--ds-basic-color-fare-premiumeconomy: #005154;--ds-basic-color-page-background-default: #ebfafd;--ds-basic-color-page-background-utility: #ffffff;--ds-basic-color-status-default: #afb9c6;--ds-basic-color-status-error: #e31f26;--ds-basic-color-status-error-subtle: #fbc6c6;--ds-basic-color-status-info: #01426a;--ds-basic-color-status-info-subtle: #ebf3f9;--ds-basic-color-status-success: #447a1f;--ds-basic-color-status-success-subtle: #d6eac7;--ds-basic-color-status-warning: #fac200;--ds-basic-color-status-warning-subtle: #fff0b2;--ds-basic-color-surface-accent1: #5de3f7;--ds-basic-color-surface-accent1-muted: #ebfafd;--ds-basic-color-surface-accent1-subtle: #b4eff9;--ds-basic-color-surface-accent2: #a3cd6a;--ds-basic-color-surface-accent2-muted: #eaf3dd;--ds-basic-color-surface-default: #ffffff;--ds-basic-color-surface-inverse: #00274a;--ds-basic-color-surface-inverse-subtle: #2875b5;--ds-basic-color-surface-neutral-medium: #c5c5c5;--ds-basic-color-surface-neutral-subtle: #f7f7f7;--ds-basic-color-texticon-accent1: #265688;--ds-basic-color-texticon-default: #2a2a2a;--ds-basic-color-texticon-disabled: #d0d0d0;--ds-basic-color-texticon-inverse: #ffffff;--ds-basic-color-texticon-inverse-disabled: #7e8894;--ds-basic-color-texticon-inverse-muted: #ccd2db;--ds-basic-color-texticon-muted: #676767;--ds-basic-color-tier-program-loungetier-lounge: #01426a;--ds-basic-color-tier-program-loungetier-loungeplus: #53b390;--ds-basic-color-tier-program-loyaltytier-bronze: #d99f6d;--ds-basic-color-tier-program-loyaltytier-bronze-muted: #eed4be;--ds-basic-color-tier-program-loyaltytier-cobalt: #030772;--ds-basic-color-tier-program-loyaltytier-cobalt-muted: #a9b6d6;--ds-basic-color-tier-program-loyaltytier-copper: #cb7457;--ds-basic-color-tier-program-loyaltytier-copper-muted: #e7bfb1;--ds-basic-color-tier-program-loyaltytier-gold: #fbdc7a;--ds-basic-color-tier-program-loyaltytier-gold-muted: #fdefc4;--ds-basic-color-tier-program-loyaltytier-nickel: #abaab1;--ds-basic-color-tier-program-loyaltytier-nickel-muted: #e5e4e7;--ds-basic-color-tier-program-loyaltytier-platinum: #bcb8a4;--ds-basic-color-tier-program-loyaltytier-platinum-muted: #dad8cd;--ds-basic-color-tier-program-loyaltytier-silver: #e4e9ec;--ds-basic-color-tier-program-loyaltytier-silver-muted: #f9fafb;--ds-basic-color-tier-program-loyaltytier-titanium: #282828;--ds-basic-color-tier-program-loyaltytier-titanium-muted: #545454;--ds-basic-color-tier-program-oneworld-emerald: #139142;--ds-basic-color-tier-program-oneworld-ruby: #a41d4a;--ds-basic-color-tier-program-oneworld-sapphire: #015daa;--ds-basic-type-brand-family-primary: "AS Circular";--ds-basic-type-brand-family-secondary: "Good OT";--ds-basic-type-brand-line-height-primary: 1.3;--ds-basic-type-brand-line-height-secondary: 1;--ds-basic-type-brand-letter-spacing-primary: 0;--ds-basic-type-brand-letter-spacing-secondary: 0.05em;--ds-basic-type-brand-letter-spacing-tertiary: 0.10em;--ds-basic-type-family-accent: "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-family-body: "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-family-display: "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-family-heading: "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-letter-spacing-accent: 0.05em;--ds-basic-type-letter-spacing-accent2: 0.10em;--ds-basic-type-letter-spacing-body: 0;--ds-basic-type-letter-spacing-display: 0;--ds-basic-type-letter-spacing-heading: 0;--ds-basic-type-line-height-accent: 1.3;--ds-basic-type-line-height-accent2: 1;--ds-basic-type-line-height-body: 1.63;--ds-basic-type-line-height-body2: 1.5;--ds-basic-type-line-height-body3: 1.25;--ds-basic-type-line-height-body4: 1;--ds-basic-type-line-height-body5: 0.88;--ds-basic-type-line-height-display: 1.3;--ds-basic-type-line-height-heading: 1.3;--ds-basic-type-weight-accent: 450;--ds-basic-type-weight-accent2: 500;--ds-basic-type-weight-body: 450;--ds-basic-type-weight-display: 300;--ds-basic-type-weight-heading: 300;--ds-basic-type-weight-heading2: 450}:host([layout*=snowflake]) .leftIndent{margin-left:var(--ds-size-150, 0.75rem);width:calc(100% - var(--ds-size-300, 1.5rem))}:host([layout*=snowflake]) .rightIndent{margin-right:var(--ds-size-150, 0.75rem);width:calc(100% - var(--ds-size-300, 1.5rem))}.layout-snowflake{display:flex;flex-direction:row;align-items:center;justify-content:center}.layout-snowflake label{font-size:var(--ds-text-body-size-xs);line-height:20px}.layout-snowflake input{text-align:center;font-size:18px;line-height:26px}.layout-snowflake .mainContent{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1}.layout-snowflake .displayValue{position:absolute;top:0;right:0;bottom:0;left:0;display:none}.layout-snowflake .displayValue.hasContent:is(.withValue):not(.hasFocus){display:block}.layout-snowflake .displayValueWrapper{transform:translateY(-50%)}.layout-snowflake.withValue{justify-content:flex-start}.layout-snowflake:not(:focus-within):not(:is([validity]:not([validity=valid]))){--ds-auro-input-border-color: transparent}.layout-snowflake:focus-within{justify-content:flex-start}.layout-snowflake:focus-within .alertNotification{display:none}.layout-snowflake .accents{width:var(--ds-size-150, 0.75rem)}.layout-snowflake .accents.left{padding-left:var(--ds-size-150, 0.75rem)}.layout-snowflake .accents.right{padding-right:var(--ds-size-150, 0.75rem)}:host([layout*=snowflake]) .helpTextWrapper{text-align:center}`;
|
|
18866
|
+
var snowflakeStyleCss = i$2`:root{--ds-advanced-color-button-flat-text: #676767;--ds-advanced-color-button-flat-text-disabled: #d0d0d0;--ds-advanced-color-button-flat-text-hover: #525252;--ds-advanced-color-button-flat-text-inverse: #ffffff;--ds-advanced-color-button-flat-text-inverse-disabled: #7e8894;--ds-advanced-color-button-flat-text-inverse-hover: #adadad;--ds-advanced-color-button-ghost-background-hover: rgba(0, 0, 0, 0.05);--ds-advanced-color-button-ghost-background-inverse-hover: rgba(255, 255, 255, 0.05);--ds-advanced-color-button-ghost-text: #01426a;--ds-advanced-color-button-ghost-text-disabled: #d0d0d0;--ds-advanced-color-button-ghost-text-inverse: #ffffff;--ds-advanced-color-button-ghost-text-inverse-disabled: #7e8894;--ds-advanced-color-button-primary-background: #01426a;--ds-advanced-color-button-primary-background-disabled: #acc9e2;--ds-advanced-color-button-primary-background-hover: #00274a;--ds-advanced-color-button-primary-background-inactive: #cfe0ef;--ds-advanced-color-button-primary-background-inactive-hover: #89b2d4;--ds-advanced-color-button-primary-background-inverse: #ffffff;--ds-advanced-color-button-primary-background-inverse-disabled: rgba(255, 255, 255, 0.75);--ds-advanced-color-button-primary-background-inverse-hover: #ebf3f9;--ds-advanced-color-button-primary-border: #01426a;--ds-advanced-color-button-primary-border-disabled: #acc9e2;--ds-advanced-color-button-primary-border-hover: #00274a;--ds-advanced-color-button-primary-border-inverse: #ffffff;--ds-advanced-color-button-primary-border-inverse-disabled: rgba(255, 255, 255, 0.75);--ds-advanced-color-button-primary-border-inverse-hover: #ebf3f9;--ds-advanced-color-button-primary-text: #ffffff;--ds-advanced-color-button-primary-text-disabled: #ffffff;--ds-advanced-color-button-primary-text-inverse: #01426a;--ds-advanced-color-button-secondary-background: #ffffff;--ds-advanced-color-button-secondary-background-disabled: #f7f7f7;--ds-advanced-color-button-secondary-background-hover: #f2f2f2;--ds-advanced-color-button-secondary-background-inverse-hover: rgba(255, 255, 255, 0.1);--ds-advanced-color-button-secondary-border: #01426a;--ds-advanced-color-button-secondary-border-hover: #00274a;--ds-advanced-color-button-secondary-border-disabled: #cfe0ef;--ds-advanced-color-button-secondary-border-inverse: #ffffff;--ds-advanced-color-button-secondary-border-inverse-disabled: #dddddd;--ds-advanced-color-button-secondary-text: #01426a;--ds-advanced-color-button-secondary-text-hover: #00274a;--ds-advanced-color-button-secondary-text-inverse: #ffffff;--ds-advanced-color-button-tertiary-background: rgba(0, 0, 0, 0.05);--ds-advanced-color-button-tertiary-background-hover: rgba(0, 0, 0, 0.1);--ds-advanced-color-button-tertiary-background-inverse: rgba(255, 255, 255, 0.05);--ds-advanced-color-button-tertiary-background-inverse-hover: rgba(255, 255, 255, 0.1);--ds-advanced-color-button-tertiary-text: #01426a;--ds-advanced-color-button-tertiary-text-hover: #00274a;--ds-advanced-color-button-tertiary-text-inverse: #ffffff;--ds-advanced-color-accents-accent1: #b2d583;--ds-advanced-color-accents-accent1-bold: #92c450;--ds-advanced-color-accents-accent1-muted: #deedca;--ds-advanced-color-accents-accent2: #fad362;--ds-advanced-color-accents-accent2-bold: #f2ba14;--ds-advanced-color-accents-accent2-muted: #fde398;--ds-advanced-color-accents-accent3: #63beff;--ds-advanced-color-accents-accent3-bold: #0074ca;--ds-advanced-color-accents-accent3-muted: #aedeff;--ds-advanced-color-accents-accent4: #feb17a;--ds-advanced-color-accents-accent4-bold: #fb7f24;--ds-advanced-color-accents-accent4-muted: #ffe2cf;--ds-advanced-color-accents-transparency: rgba(0, 0, 0, 0.1);--ds-advanced-color-accents-transparency-inverse: rgba(255, 255, 255, 0.2);--ds-advanced-color-avatar-gradient-bottom: #cfe0ef;--ds-advanced-color-avatar-gradient-top: #6899c6;--ds-advanced-color-boolean-disabled-inverse: #7e8894;--ds-advanced-color-boolean-error: #e31f26;--ds-advanced-color-boolean-error-hover: #b1161c;--ds-advanced-color-boolean-error-inverse: #f9a4a8;--ds-advanced-color-boolean-error-inverse-hover: #f15f65;--ds-advanced-color-boolean-indicator: #ffffff;--ds-advanced-color-boolean-indicator-inverse: #00274a;--ds-advanced-color-boolean-isfalse: #ffffff;--ds-advanced-color-boolean-isfalse-border: #585e67;--ds-advanced-color-boolean-isfalse-border-inverse: #ffffff;--ds-advanced-color-boolean-isfalse-hover: #f2f2f2;--ds-advanced-color-boolean-isfalse-inverse: rgba(255, 255, 255, 0.15);--ds-advanced-color-boolean-isfalse-inverse-hover: rgba(255, 255, 255, 0.2);--ds-advanced-color-boolean-istrue: #01426a;--ds-advanced-color-boolean-istrue-hover: #00274a;--ds-advanced-color-boolean-istrue-inverse: #ffffff;--ds-advanced-color-boolean-istrue-inverse-hover: rgba(255, 255, 255, 0.7);--ds-advanced-color-flightline-indicator: #00274a;--ds-advanced-color-flightline-line: #00274a;--ds-advanced-color-hyperlink-text: #2875b5;--ds-advanced-color-hyperlink-text-hover: #01426a;--ds-advanced-color-hyperlink-text-inverse: #ffffff;--ds-advanced-color-hyperlink-text-inverse-hover: #ebf3f9;--ds-advanced-color-shared-background: #ffffff;--ds-advanced-color-shared-background-inverse: rgba(255, 255, 255, 0.15);--ds-advanced-color-shared-background-inverse-disabled: rgba(255, 255, 255, 0.1);--ds-advanced-color-shared-background-inverse-hover: rgba(255, 255, 255, 0.2);--ds-advanced-color-shared-background-muted: #f7f7f7;--ds-advanced-color-shared-background-strong: #7e7e7e;--ds-advanced-color-shared-scrim: rgba(0, 0, 0, 0.5);--ds-advanced-color-shared-text-accent: #2875b5;--ds-advanced-color-skeleton-background: #f7f8fa;--ds-advanced-color-skeleton-wave: #e4e8ec;--ds-advanced-color-state-background-disabled: #dddddd;--ds-advanced-color-state-background-hover: #f2f2f2;--ds-advanced-color-state-background-inverse-disabled: #7e8894;--ds-advanced-color-state-error-inverse: #f9a4a8;--ds-advanced-color-state-focused: #01426a;--ds-advanced-color-state-focused-inverse: #ffffff;--ds-advanced-color-state-selected: #01426a;--ds-advanced-color-state-selected-hover: #00274a;--ds-basic-color-border-bold: #585e67;--ds-basic-color-border-brand: #00274a;--ds-basic-color-border-default: #959595;--ds-basic-color-border-divider: rgba(0, 0, 0, 0.15);--ds-basic-color-border-divider-inverse: rgba(255, 255, 255, 0.4);--ds-basic-color-border-inverse: #ffffff;--ds-basic-color-border-subtle: #dddddd;--ds-basic-color-brand-primary: #01426a;--ds-basic-color-brand-primary-bold: #00274a;--ds-basic-color-brand-primary-muted: #ebf3f9;--ds-basic-color-brand-primary-subtle: #2875b5;--ds-basic-color-brand-secondary: #5de3f7;--ds-basic-color-brand-secondary-bold: #18c3dd;--ds-basic-color-brand-secondary-muted: #ebfafd;--ds-basic-color-brand-secondary-subtle: #b4eff9;--ds-basic-color-brand-tertiary: #a3cd6a;--ds-basic-color-brand-tertiary-bold: #7daf3b;--ds-basic-color-brand-tertiary-muted: #eaf3dd;--ds-basic-color-brand-tertiary-subtle: #c9e1a7;--ds-basic-color-fare-basiceconomy: #97eaf8;--ds-basic-color-fare-business: #01426a;--ds-basic-color-fare-economy: #0074ca;--ds-basic-color-fare-first: #00274a;--ds-basic-color-fare-premiumeconomy: #005154;--ds-basic-color-page-background-default: #ebfafd;--ds-basic-color-page-background-utility: #ffffff;--ds-basic-color-status-default: #afb9c6;--ds-basic-color-status-error: #e31f26;--ds-basic-color-status-error-subtle: #fbc6c6;--ds-basic-color-status-info: #01426a;--ds-basic-color-status-info-subtle: #ebf3f9;--ds-basic-color-status-success: #447a1f;--ds-basic-color-status-success-subtle: #d6eac7;--ds-basic-color-status-warning: #fac200;--ds-basic-color-status-warning-subtle: #fff0b2;--ds-basic-color-surface-accent1: #5de3f7;--ds-basic-color-surface-accent1-muted: #ebfafd;--ds-basic-color-surface-accent1-subtle: #b4eff9;--ds-basic-color-surface-accent2: #a3cd6a;--ds-basic-color-surface-accent2-muted: #eaf3dd;--ds-basic-color-surface-default: #ffffff;--ds-basic-color-surface-inverse: #00274a;--ds-basic-color-surface-inverse-subtle: #2875b5;--ds-basic-color-surface-neutral-medium: #c5c5c5;--ds-basic-color-surface-neutral-subtle: #f7f7f7;--ds-basic-color-texticon-accent1: #265688;--ds-basic-color-texticon-default: #2a2a2a;--ds-basic-color-texticon-disabled: #d0d0d0;--ds-basic-color-texticon-inverse: #ffffff;--ds-basic-color-texticon-inverse-disabled: #7e8894;--ds-basic-color-texticon-inverse-muted: #ccd2db;--ds-basic-color-texticon-muted: #676767;--ds-basic-color-tier-program-loungetier-lounge: #01426a;--ds-basic-color-tier-program-loungetier-loungeplus: #53b390;--ds-basic-color-tier-program-loyaltytier-bronze: #d99f6d;--ds-basic-color-tier-program-loyaltytier-bronze-muted: #eed4be;--ds-basic-color-tier-program-loyaltytier-cobalt: #030772;--ds-basic-color-tier-program-loyaltytier-cobalt-muted: #a9b6d6;--ds-basic-color-tier-program-loyaltytier-copper: #cb7457;--ds-basic-color-tier-program-loyaltytier-copper-muted: #e7bfb1;--ds-basic-color-tier-program-loyaltytier-gold: #fbdc7a;--ds-basic-color-tier-program-loyaltytier-gold-muted: #fdefc4;--ds-basic-color-tier-program-loyaltytier-nickel: #abaab1;--ds-basic-color-tier-program-loyaltytier-nickel-muted: #e5e4e7;--ds-basic-color-tier-program-loyaltytier-platinum: #bcb8a4;--ds-basic-color-tier-program-loyaltytier-platinum-muted: #dad8cd;--ds-basic-color-tier-program-loyaltytier-silver: #e4e9ec;--ds-basic-color-tier-program-loyaltytier-silver-muted: #f9fafb;--ds-basic-color-tier-program-loyaltytier-titanium: #282828;--ds-basic-color-tier-program-loyaltytier-titanium-muted: #545454;--ds-basic-color-tier-program-oneworld-emerald: #139142;--ds-basic-color-tier-program-oneworld-ruby: #a41d4a;--ds-basic-color-tier-program-oneworld-sapphire: #015daa;--ds-basic-type-brand-family-primary: "AS Circular";--ds-basic-type-brand-family-secondary: "Good OT";--ds-basic-type-brand-line-height-primary: 1.3;--ds-basic-type-brand-line-height-secondary: 1;--ds-basic-type-brand-letter-spacing-primary: 0;--ds-basic-type-brand-letter-spacing-secondary: 0.05em;--ds-basic-type-brand-letter-spacing-tertiary: 0.10em;--ds-basic-type-family-accent: "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-family-body: "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-family-display: "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-family-heading: "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-letter-spacing-accent: 0.05em;--ds-basic-type-letter-spacing-accent2: 0.10em;--ds-basic-type-letter-spacing-body: 0;--ds-basic-type-letter-spacing-display: 0;--ds-basic-type-letter-spacing-heading: 0;--ds-basic-type-line-height-accent: 1.3;--ds-basic-type-line-height-accent2: 1;--ds-basic-type-line-height-body: 1.63;--ds-basic-type-line-height-body2: 1.5;--ds-basic-type-line-height-body3: 1.25;--ds-basic-type-line-height-body4: 1;--ds-basic-type-line-height-body5: 0.88;--ds-basic-type-line-height-display: 1.3;--ds-basic-type-line-height-heading: 1.3;--ds-basic-type-weight-accent: 450;--ds-basic-type-weight-accent2: 500;--ds-basic-type-weight-body: 450;--ds-basic-type-weight-display: 300;--ds-basic-type-weight-heading: 300;--ds-basic-type-weight-heading2: 450}:host([layout*=snowflake]) .leftIndent{margin-left:var(--ds-size-300, 1.5rem);width:calc(100% - var(--ds-size-300, 1.5rem))}:host([layout*=snowflake]) .rightIndent{margin-right:var(--ds-size-300, 1.5rem);width:calc(100% - var(--ds-size-300, 1.5rem))}.layout-snowflake{display:flex;flex-direction:row;align-items:center;justify-content:center}.layout-snowflake label{font-size:var(--ds-text-body-size-xs);line-height:20px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.layout-snowflake input{text-align:center;font-size:18px;line-height:26px}.layout-snowflake .mainContent{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1;overflow:hidden}.layout-snowflake .displayValue{display:none;width:100%}.layout-snowflake .displayValue.hasContent:is(.withValue):not(.hasFocus){display:block}.layout-snowflake .displayValueWrapper{transform:translateY(-50%)}.layout-snowflake.withValue{justify-content:flex-start}.layout-snowflake:not(:focus-within):not(:is([validity]:not([validity=valid]))){--ds-auro-input-border-color: transparent}.layout-snowflake:focus-within{justify-content:flex-start}.layout-snowflake:focus-within .alertNotification{display:none}.layout-snowflake .accents{width:var(--ds-size-300, 1.5rem)}.layout-snowflake .accents.left{padding-left:var(--ds-size-300, 1.5rem)}.layout-snowflake .accents.right{padding-right:var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .helpTextWrapper{text-align:center}`;
|
|
18854
18867
|
|
|
18855
18868
|
const watchedItems$1 = new Set();
|
|
18856
18869
|
|
|
@@ -23524,13 +23537,24 @@ class AuroFormValidation {
|
|
|
23524
23537
|
this.getInputElements(elem);
|
|
23525
23538
|
this.getAuroInputs(elem);
|
|
23526
23539
|
|
|
23527
|
-
//
|
|
23540
|
+
// Check if validation should run
|
|
23528
23541
|
let validationShouldRun =
|
|
23542
|
+
|
|
23543
|
+
// If the validation was forced
|
|
23529
23544
|
force ||
|
|
23530
|
-
|
|
23531
|
-
|
|
23532
|
-
|
|
23533
|
-
|
|
23545
|
+
|
|
23546
|
+
// If the validation should run on input
|
|
23547
|
+
elem.validateOnInput ||
|
|
23548
|
+
|
|
23549
|
+
// State-based checks
|
|
23550
|
+
(
|
|
23551
|
+
// Element is not currently focused
|
|
23552
|
+
!elem.contains(document.activeElement) && // native input is not focused directly
|
|
23553
|
+
!document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
|
|
23554
|
+
|
|
23555
|
+
// And element has been touched or is untouched but has a value
|
|
23556
|
+
( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
|
|
23557
|
+
);
|
|
23534
23558
|
|
|
23535
23559
|
if (elem.hasAttribute('error')) {
|
|
23536
23560
|
elem.validity = 'customError';
|
|
@@ -24481,9 +24505,9 @@ class BaseInput extends AuroElement$2 {
|
|
|
24481
24505
|
this.inputElement.value = "";
|
|
24482
24506
|
this.value = "";
|
|
24483
24507
|
this.labelElement.classList.remove('inputElement-label--sticky');
|
|
24508
|
+
this.notifyValueChanged();
|
|
24484
24509
|
this.focus();
|
|
24485
24510
|
this.validation.validate(this);
|
|
24486
|
-
this.notifyValueChanged();
|
|
24487
24511
|
}
|
|
24488
24512
|
|
|
24489
24513
|
/**
|
|
@@ -24578,13 +24602,20 @@ class BaseInput extends AuroElement$2 {
|
|
|
24578
24602
|
}
|
|
24579
24603
|
|
|
24580
24604
|
/**
|
|
24581
|
-
* Resets component to initial state.
|
|
24605
|
+
* Resets component to initial state, including resetting the touched state and validity.
|
|
24582
24606
|
* @returns {void}
|
|
24583
24607
|
*/
|
|
24584
24608
|
reset() {
|
|
24585
24609
|
this.validation.reset(this);
|
|
24586
24610
|
}
|
|
24587
24611
|
|
|
24612
|
+
/**
|
|
24613
|
+
* Clears the input value.
|
|
24614
|
+
*/
|
|
24615
|
+
clear() {
|
|
24616
|
+
this.value = undefined;
|
|
24617
|
+
}
|
|
24618
|
+
|
|
24588
24619
|
/**
|
|
24589
24620
|
* Sets configuration data used elsewhere based on the `type` attribute.
|
|
24590
24621
|
* @private
|
|
@@ -26623,17 +26654,6 @@ class AuroInput extends BaseInput {
|
|
|
26623
26654
|
};
|
|
26624
26655
|
}
|
|
26625
26656
|
|
|
26626
|
-
/**
|
|
26627
|
-
* Returns classmap configuration for accent elements in each layout.
|
|
26628
|
-
* @private
|
|
26629
|
-
* @returns {object} - Returns classmap.
|
|
26630
|
-
*/
|
|
26631
|
-
get commonAccentClasses() {
|
|
26632
|
-
return {
|
|
26633
|
-
'util_displayHidden': false
|
|
26634
|
-
};
|
|
26635
|
-
}
|
|
26636
|
-
|
|
26637
26657
|
/**
|
|
26638
26658
|
* Returns classmap configuration for helpText elements in each layout.
|
|
26639
26659
|
* @private
|
|
@@ -26921,13 +26941,13 @@ class AuroInput extends BaseInput {
|
|
|
26921
26941
|
@click="${this.handleClick}"
|
|
26922
26942
|
class="${e$2(classicClassMap)}"
|
|
26923
26943
|
part="wrapper">
|
|
26924
|
-
<div part="accent-left" class="accents left
|
|
26944
|
+
<div part="accent-left" class="accents left">
|
|
26925
26945
|
${this.renderHtmlTypeIcon()}
|
|
26926
26946
|
</div>
|
|
26927
26947
|
<div class="mainContent">
|
|
26928
26948
|
${this.renderHtmlInput(true)}
|
|
26929
26949
|
</div>
|
|
26930
|
-
<div part="accent-right" class="accents right
|
|
26950
|
+
<div part="accent-right" class="accents right">
|
|
26931
26951
|
${this.renderValidationErrorIconHtml()}
|
|
26932
26952
|
${this.hasValue && this.type === 'password' ? this.renderHtmlNotificationPassword() : undefined}
|
|
26933
26953
|
${this.hasValue ? u$3`
|
|
@@ -26954,7 +26974,7 @@ class AuroInput extends BaseInput {
|
|
|
26954
26974
|
@click="${this.handleClick}"
|
|
26955
26975
|
class="${e$2(this.commonWrapperClasses)}"
|
|
26956
26976
|
part="wrapper">
|
|
26957
|
-
<div class="accents left
|
|
26977
|
+
<div class="accents left">
|
|
26958
26978
|
${this.layout.includes('left') ? u$3`
|
|
26959
26979
|
${this.renderValidationErrorIconHtml()}
|
|
26960
26980
|
` : undefined}
|
|
@@ -26962,7 +26982,7 @@ class AuroInput extends BaseInput {
|
|
|
26962
26982
|
<div class="mainContent">
|
|
26963
26983
|
${this.renderHtmlInput()}
|
|
26964
26984
|
</div>
|
|
26965
|
-
<div class="accents right
|
|
26985
|
+
<div class="accents right">
|
|
26966
26986
|
${this.layout.includes('right') || this.layout === "emphasized" ? u$3`
|
|
26967
26987
|
${this.renderValidationErrorIconHtml()}
|
|
26968
26988
|
` : undefined}
|
|
@@ -28316,6 +28336,7 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28316
28336
|
shapeSizeCss$2,
|
|
28317
28337
|
|
|
28318
28338
|
// layouts
|
|
28339
|
+
classicLayoutStyle,
|
|
28319
28340
|
classicLayoutColor,
|
|
28320
28341
|
snowflakeStyle,
|
|
28321
28342
|
snowflakeColors
|
|
@@ -28383,11 +28404,7 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28383
28404
|
* @param {String} focusInput - Pass in `endDate` to focus on the return input. No parameter is needed to focus on the depart input.
|
|
28384
28405
|
* @returns {void}
|
|
28385
28406
|
*/
|
|
28386
|
-
focus(focusInput) {
|
|
28387
|
-
if (this.disabled) {
|
|
28388
|
-
return;
|
|
28389
|
-
}
|
|
28390
|
-
|
|
28407
|
+
focus(focusInput = '') {
|
|
28391
28408
|
this.range && focusInput === 'endDate' ? this.inputList[1].focus() : this.inputList[0].focus();
|
|
28392
28409
|
}
|
|
28393
28410
|
|
|
@@ -28590,9 +28607,11 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28590
28607
|
configureDatepicker() {
|
|
28591
28608
|
this.addEventListener('focusin', () => {
|
|
28592
28609
|
this.touched = true;
|
|
28610
|
+
this.hasFocus = true;
|
|
28593
28611
|
});
|
|
28594
28612
|
|
|
28595
28613
|
this.addEventListener('focusout', (evt) => {
|
|
28614
|
+
this.hasFocus = false;
|
|
28596
28615
|
if (!this.noValidate && !evt.detail.expanded && this.touched) {
|
|
28597
28616
|
if (!this.contains(document.activeElement)) {
|
|
28598
28617
|
this.validation.validate(this.inputList[0]);
|
|
@@ -28658,9 +28677,6 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28658
28677
|
const convertedDate = this.convertWcTimeToDate(time);
|
|
28659
28678
|
const newDate = this.util.toCustomFormat(convertedDate, this.format);
|
|
28660
28679
|
|
|
28661
|
-
console.log(newDate);
|
|
28662
|
-
console.log(this.util.validDateStr(newDate, this.format));
|
|
28663
|
-
|
|
28664
28680
|
if (this.util.validDateStr(newDate, this.format)) {
|
|
28665
28681
|
if (this.inputList.length > 1) {
|
|
28666
28682
|
if (!this.value || !this.util.validDateStr(this.value, this.format)) {
|
|
@@ -28699,7 +28715,7 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28699
28715
|
handleKeydownReset(event) {
|
|
28700
28716
|
if (event.key === 'Enter' || event.key === ' ') {
|
|
28701
28717
|
this.resetValues();
|
|
28702
|
-
this.
|
|
28718
|
+
this.focus();
|
|
28703
28719
|
}
|
|
28704
28720
|
}
|
|
28705
28721
|
|
|
@@ -28708,7 +28724,7 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28708
28724
|
*/
|
|
28709
28725
|
resetValues() {
|
|
28710
28726
|
this.inputList.forEach((input) => {
|
|
28711
|
-
input.
|
|
28727
|
+
input.clear();
|
|
28712
28728
|
});
|
|
28713
28729
|
}
|
|
28714
28730
|
|
|
@@ -28718,10 +28734,17 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28718
28734
|
*/
|
|
28719
28735
|
reset() {
|
|
28720
28736
|
this.resetValues();
|
|
28721
|
-
|
|
28722
28737
|
this.validation.reset(this);
|
|
28723
28738
|
}
|
|
28724
28739
|
|
|
28740
|
+
/**
|
|
28741
|
+
* Clears the current value(s) of the datepicker.
|
|
28742
|
+
* @returns {void}
|
|
28743
|
+
*/
|
|
28744
|
+
clear() {
|
|
28745
|
+
this.resetValues();
|
|
28746
|
+
}
|
|
28747
|
+
|
|
28725
28748
|
/**
|
|
28726
28749
|
* Validates value.
|
|
28727
28750
|
* @param {boolean} [force=false] - Whether to force validation.
|
|
@@ -28730,22 +28753,10 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28730
28753
|
this.validation.validate(this, force);
|
|
28731
28754
|
}
|
|
28732
28755
|
|
|
28733
|
-
|
|
28734
|
-
|
|
28735
|
-
|
|
28736
|
-
|
|
28737
|
-
|
|
28738
|
-
this.hasFocus = true;
|
|
28739
|
-
this.dropdown.show();
|
|
28740
|
-
|
|
28741
|
-
// shadowroot active element is null if we focus the datepicker itself
|
|
28742
|
-
if (this.shadowRoot.activeElement === null) {
|
|
28743
|
-
// If the shadowRoot.activeElement is null, we can assume that the datepicker itself has focus
|
|
28744
|
-
// and we should focus the first input in the inputList
|
|
28745
|
-
this.inputList[0].focus();
|
|
28746
|
-
}
|
|
28747
|
-
}
|
|
28748
|
-
|
|
28756
|
+
/**
|
|
28757
|
+
* Private method for interacting with the `hasValue` property.
|
|
28758
|
+
* @private
|
|
28759
|
+
*/
|
|
28749
28760
|
setHasValue() {
|
|
28750
28761
|
if (!this.range) {
|
|
28751
28762
|
this.hasValue = this.value && this.value.length > 0;
|
|
@@ -28765,6 +28776,17 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28765
28776
|
this.monthFirst = this.format.indexOf('mm') < this.format.indexOf('yyyy');
|
|
28766
28777
|
}
|
|
28767
28778
|
|
|
28779
|
+
if (changedProperties.has('disabled')) {
|
|
28780
|
+
if (this.disabled) {
|
|
28781
|
+
this.previousTabIndex = this.getAttribute('tabindex');
|
|
28782
|
+
this.setAttribute('tabindex', '-1');
|
|
28783
|
+
} else if (!this.disabled && this.previousTabIndex > -1) {
|
|
28784
|
+
this.tabIndex = this.previousTabIndex;
|
|
28785
|
+
} else {
|
|
28786
|
+
this.removeAttribute('tabindex');
|
|
28787
|
+
}
|
|
28788
|
+
}
|
|
28789
|
+
|
|
28768
28790
|
if (changedProperties.has('calendarFocusDate')) {
|
|
28769
28791
|
this.formattedFocusDate = this.util.toNorthAmericanFormat(this.calendarFocusDate, this.format);
|
|
28770
28792
|
|
|
@@ -28930,6 +28952,8 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28930
28952
|
this.calendarFocusDate = this.minDate;
|
|
28931
28953
|
}
|
|
28932
28954
|
}
|
|
28955
|
+
|
|
28956
|
+
this.calendar.requestUpdate();
|
|
28933
28957
|
}
|
|
28934
28958
|
|
|
28935
28959
|
// This resets the datepicker when the maxDate is set to a new value that is
|
|
@@ -28961,6 +28985,8 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28961
28985
|
}
|
|
28962
28986
|
}
|
|
28963
28987
|
}
|
|
28988
|
+
|
|
28989
|
+
this.calendar.requestUpdate();
|
|
28964
28990
|
}
|
|
28965
28991
|
|
|
28966
28992
|
if (changedProperties.has('centralDate')) {
|
|
@@ -29002,11 +29028,7 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
29002
29028
|
|
|
29003
29029
|
// setup focus/blur event listeners
|
|
29004
29030
|
this.addEventListener('focus', () => {
|
|
29005
|
-
this.
|
|
29006
|
-
}, true);
|
|
29007
|
-
|
|
29008
|
-
this.addEventListener('blur', () => {
|
|
29009
|
-
this.hasFocus = false;
|
|
29031
|
+
this.focus();
|
|
29010
29032
|
}, true);
|
|
29011
29033
|
}
|
|
29012
29034
|
|
|
@@ -29061,17 +29083,63 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
29061
29083
|
}
|
|
29062
29084
|
|
|
29063
29085
|
/**
|
|
29086
|
+
* Renders the snowflake layout for the datepicker.
|
|
29087
|
+
* @private
|
|
29088
|
+
* @returns {import("lit").TemplateResult}
|
|
29089
|
+
*/
|
|
29090
|
+
renderClassicLayout() {
|
|
29091
|
+
const accentsClassMap = {
|
|
29092
|
+
error: this.hasError
|
|
29093
|
+
};
|
|
29094
|
+
|
|
29095
|
+
const inputSectionClassMap = {
|
|
29096
|
+
inputSection: true,
|
|
29097
|
+
|
|
29098
|
+
hasValue: this.hasValue,
|
|
29099
|
+
hasFocus: this.hasFocus,
|
|
29100
|
+
};
|
|
29101
|
+
|
|
29102
|
+
const labelClassMap = {
|
|
29103
|
+
hasValue: this.hasValue,
|
|
29104
|
+
hasFocus: this.hasFocus,
|
|
29105
|
+
};
|
|
29106
|
+
|
|
29107
|
+
return u$3`
|
|
29108
|
+
<div
|
|
29109
|
+
class="wrapper trigger"
|
|
29110
|
+
part="wrapper">
|
|
29111
|
+
<div class="accents left">
|
|
29112
|
+
${this.renderHtmlIconCalendar()}
|
|
29113
|
+
</div>
|
|
29114
|
+
<div class="mainContent">
|
|
29115
|
+
<label class="${e$2(labelClassMap)}" part="mainLabel">
|
|
29116
|
+
<slot name="label"></slot>
|
|
29117
|
+
</label>
|
|
29118
|
+
<div class="${e$2(inputSectionClassMap)}" part="inputSection">
|
|
29119
|
+
${this.renderHtmlInputs()}
|
|
29120
|
+
</div>
|
|
29121
|
+
</div>
|
|
29122
|
+
<div class="accents right ${e$2(accentsClassMap)}">
|
|
29123
|
+
${this.hasError
|
|
29124
|
+
? this.renderHtmlIconError()
|
|
29125
|
+
: this.renderHtmlActionClear()
|
|
29126
|
+
}
|
|
29127
|
+
</div>
|
|
29128
|
+
</div>
|
|
29129
|
+
`;
|
|
29130
|
+
}
|
|
29131
|
+
|
|
29132
|
+
/**
|
|
29133
|
+
* Renders the layout based on the `layout` attribute.
|
|
29064
29134
|
* @private
|
|
29135
|
+
* @returns {import('lit').TemplateResult}
|
|
29065
29136
|
*/
|
|
29066
29137
|
renderLayoutFromAttributes() {
|
|
29067
29138
|
switch (this.layout) {
|
|
29068
29139
|
case 'snowflake':
|
|
29069
29140
|
return this.renderSnowflakeLayout();
|
|
29070
29141
|
default:
|
|
29071
|
-
|
|
29072
|
-
return u$3`
|
|
29073
|
-
<p>Please implement layout "${this.layout}" for datepicker</p>
|
|
29074
|
-
`;
|
|
29142
|
+
return this.renderClassicLayout();
|
|
29075
29143
|
}
|
|
29076
29144
|
}
|
|
29077
29145
|
|
|
@@ -29082,7 +29150,7 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
29082
29150
|
* Returns formatted date like Apr 21 or Dec 25.
|
|
29083
29151
|
* @private
|
|
29084
29152
|
* @param {string} date - Date format should be in a format Date constructor accepts, like '2023-04-21' or '2023/04/21'.
|
|
29085
|
-
* @
|
|
29153
|
+
* @returns {string}
|
|
29086
29154
|
*/
|
|
29087
29155
|
formatShortDate(date) {
|
|
29088
29156
|
// should render like Apr 21
|
|
@@ -29097,8 +29165,8 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
29097
29165
|
/**
|
|
29098
29166
|
* Format and render the provided date value.
|
|
29099
29167
|
* @private
|
|
29100
|
-
* @param dateValue
|
|
29101
|
-
* @
|
|
29168
|
+
* @param {string} dateValue - The date value to format and render.
|
|
29169
|
+
* @returns {import('lit').TemplateResult}
|
|
29102
29170
|
*/
|
|
29103
29171
|
renderDisplayTextDate(dateValue) {
|
|
29104
29172
|
return u$3`
|
|
@@ -29113,9 +29181,15 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
29113
29181
|
`;
|
|
29114
29182
|
}
|
|
29115
29183
|
|
|
29184
|
+
/**
|
|
29185
|
+
* Renders the HTML inputs for the datepicker.
|
|
29186
|
+
* @private
|
|
29187
|
+
* @returns {import('lit').TemplateResult}
|
|
29188
|
+
*/
|
|
29116
29189
|
renderHtmlInputs() {
|
|
29117
29190
|
const inputClasses = {
|
|
29118
|
-
"util_displayHiddenVisually": !this.hasValue && !this.hasFocus
|
|
29191
|
+
"util_displayHiddenVisually": !this.hasValue && !this.hasFocus && this.layout !== "classic",
|
|
29192
|
+
"parentBorder": this.layout === "classic"
|
|
29119
29193
|
};
|
|
29120
29194
|
|
|
29121
29195
|
return u$3`
|
|
@@ -29129,14 +29203,12 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
29129
29203
|
.min="${this.minDate}"
|
|
29130
29204
|
id="${this.generateRandomString(12)}"
|
|
29131
29205
|
.placeholder="${this.placeholder}"
|
|
29132
|
-
|
|
29133
|
-
|
|
29206
|
+
.size="${this.size}"
|
|
29207
|
+
.shape="${this.shape}"
|
|
29134
29208
|
noValidate
|
|
29135
29209
|
class="dateFrom ${e$2(inputClasses)}"
|
|
29136
29210
|
type="date"
|
|
29137
29211
|
part="input"
|
|
29138
|
-
shape="box"
|
|
29139
|
-
size="xl"
|
|
29140
29212
|
setCustomValidity="${this.setCustomValidity}"
|
|
29141
29213
|
setCustomValidityCustomError="${this.setCustomValidityCustomError}"
|
|
29142
29214
|
setCustomValidityValueMissing="${this.setCustomValidityValueMissing}"
|
|
@@ -29144,9 +29216,14 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
29144
29216
|
setCustomValidityRangeUnderflow="${this.setCustomValidityRangeUnderflow}"
|
|
29145
29217
|
inputmode="${o(this.inputmode)}"
|
|
29146
29218
|
>
|
|
29147
|
-
|
|
29148
|
-
$
|
|
29149
|
-
|
|
29219
|
+
${this.layout !== "classic"
|
|
29220
|
+
? u$3`
|
|
29221
|
+
<span slot="displayValue">
|
|
29222
|
+
${this.renderDisplayTextDate(this.value)}
|
|
29223
|
+
</span>
|
|
29224
|
+
`
|
|
29225
|
+
: undefined
|
|
29226
|
+
}
|
|
29150
29227
|
<span slot="label"><slot name="fromLabel"></slot></span>
|
|
29151
29228
|
</${this.inputTag}>
|
|
29152
29229
|
</div>
|
|
@@ -29166,7 +29243,6 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
29166
29243
|
.min="${this.minDate}"
|
|
29167
29244
|
.placeholder="${this.placeholderEndDate || this.placeholder}"
|
|
29168
29245
|
id="${this.generateRandomString(12)}"
|
|
29169
|
-
bordered
|
|
29170
29246
|
class="dateTo ${e$2(inputClasses)}"
|
|
29171
29247
|
noValidate
|
|
29172
29248
|
type="date"
|
|
@@ -29177,9 +29253,14 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
29177
29253
|
setCustomValidityRangeUnderflow="${this.setCustomValidityRangeUnderflow}"
|
|
29178
29254
|
?disabled="${this.disabled}"
|
|
29179
29255
|
part="input">
|
|
29180
|
-
|
|
29181
|
-
$
|
|
29182
|
-
|
|
29256
|
+
${this.layout !== "classic"
|
|
29257
|
+
? u$3`
|
|
29258
|
+
<span slot="displayValue">
|
|
29259
|
+
${this.renderDisplayTextDate(this.valueEnd)}
|
|
29260
|
+
</span>
|
|
29261
|
+
`
|
|
29262
|
+
: undefined
|
|
29263
|
+
}
|
|
29183
29264
|
<span slot="label"><slot name="toLabel"></slot></span>
|
|
29184
29265
|
</${this.inputTag}>
|
|
29185
29266
|
</div>
|
|
@@ -29193,6 +29274,11 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
29193
29274
|
// icons/actions
|
|
29194
29275
|
// ------------------------------------
|
|
29195
29276
|
|
|
29277
|
+
/**
|
|
29278
|
+
* Renders the clear action button.
|
|
29279
|
+
* @private
|
|
29280
|
+
* @returns {import('lit').TemplateResult}
|
|
29281
|
+
*/
|
|
29196
29282
|
renderHtmlActionClear() {
|
|
29197
29283
|
const clearActionClassMap = {
|
|
29198
29284
|
'notification': true,
|
|
@@ -29222,6 +29308,11 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
29222
29308
|
`;
|
|
29223
29309
|
}
|
|
29224
29310
|
|
|
29311
|
+
/**
|
|
29312
|
+
* Renders the error icon.
|
|
29313
|
+
* @private
|
|
29314
|
+
* @returns {import('lit').TemplateResult}
|
|
29315
|
+
*/
|
|
29225
29316
|
renderHtmlIconError() {
|
|
29226
29317
|
const clearActionClassMap = {
|
|
29227
29318
|
'notification': true,
|
|
@@ -29241,6 +29332,11 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
29241
29332
|
`;
|
|
29242
29333
|
}
|
|
29243
29334
|
|
|
29335
|
+
/**
|
|
29336
|
+
* Renders the calendar icon.
|
|
29337
|
+
* @private
|
|
29338
|
+
* @returns {import('lit').TemplateResult}
|
|
29339
|
+
*/
|
|
29244
29340
|
renderHtmlIconCalendar() {
|
|
29245
29341
|
return u$3`
|
|
29246
29342
|
<${this.iconTag}
|
|
@@ -29256,7 +29352,7 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
29256
29352
|
/**
|
|
29257
29353
|
* Returns HTML for the help text and error message.
|
|
29258
29354
|
* @private
|
|
29259
|
-
* @returns {
|
|
29355
|
+
* @returns {import('lit').TemplateResult} - Returns HTML for the help text and error message.
|
|
29260
29356
|
*/
|
|
29261
29357
|
renderHtmlHelpText() {
|
|
29262
29358
|
return u$3`
|
|
@@ -29279,6 +29375,33 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
29279
29375
|
`;
|
|
29280
29376
|
}
|
|
29281
29377
|
|
|
29378
|
+
/**
|
|
29379
|
+
* Separate method for rendering the calendar.
|
|
29380
|
+
* @private
|
|
29381
|
+
* @returns {import('lit').TemplateResult}
|
|
29382
|
+
*/
|
|
29383
|
+
renderCalendar() {
|
|
29384
|
+
return u$3`
|
|
29385
|
+
<auro-formkit-calendar
|
|
29386
|
+
?largeFullscreenHeadline="${this.largeFullscreenHeadline}"
|
|
29387
|
+
?noRange="${!this.range}"
|
|
29388
|
+
.format="${this.format}"
|
|
29389
|
+
.monthFirst="${this.monthFirst}"
|
|
29390
|
+
.min="${this.convertToWcValidTime(new Date(this.formattedMinDate))}"
|
|
29391
|
+
.max="${this.convertToWcValidTime(new Date(this.formattedMaxDate))}"
|
|
29392
|
+
.maxDate="${this.maxDate}"
|
|
29393
|
+
.minDate="${this.minDate}"
|
|
29394
|
+
.monthNames="${this.monthNames}"
|
|
29395
|
+
part="calendar"
|
|
29396
|
+
>
|
|
29397
|
+
<slot slot="bib.fullscreen.headline" name="bib.fullscreen.headline" @slotchange="${this.handleSlotToSlot}"></slot>
|
|
29398
|
+
<slot slot="bib.fullscreen.dateLabel" name="bib.fullscreen.dateLabel" @slotchange="${this.handleSlotToSlot}"></slot>
|
|
29399
|
+
<span slot="bib.fullscreen.fromStr">${this.value || u$3`<span class="placeholderDate">${this.format.toUpperCase()}</span>`}</span>
|
|
29400
|
+
${this.range ? u$3`<span slot="mobileDateToStr">${this.valueEnd || u$3`<span class="placeholderDate">${this.format.toUpperCase()}</span>`}</span>` : undefined}
|
|
29401
|
+
</auro-formkit-calendar>
|
|
29402
|
+
`;
|
|
29403
|
+
}
|
|
29404
|
+
|
|
29282
29405
|
// function that renders the HTML and CSS into the scope of the component
|
|
29283
29406
|
render() {
|
|
29284
29407
|
const dropdownElementClassMap = {
|
|
@@ -29300,37 +29423,18 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
29300
29423
|
.placement="${this.placement}"
|
|
29301
29424
|
.shape="${this.shape}"
|
|
29302
29425
|
.size="${this.size}"
|
|
29303
|
-
bordered
|
|
29304
29426
|
class="${e$2(dropdownElementClassMap)}"
|
|
29305
29427
|
disableEventShow
|
|
29306
29428
|
disableFocusTrap
|
|
29307
|
-
fluid
|
|
29308
29429
|
for="dropdownMenu"
|
|
29309
29430
|
part="dropdown"
|
|
29310
|
-
rounded
|
|
29311
29431
|
>
|
|
29312
29432
|
<div slot="trigger" class="dpTriggerContent" part="trigger">
|
|
29313
29433
|
${this.renderLayoutFromAttributes()}
|
|
29314
29434
|
</div>
|
|
29315
29435
|
|
|
29316
29436
|
<div class="calendarWrapper" part="calendarWrapper">
|
|
29317
|
-
|
|
29318
|
-
?largeFullscreenHeadline="${this.largeFullscreenHeadline}"
|
|
29319
|
-
?noRange="${!this.range}"
|
|
29320
|
-
.format="${this.format}"
|
|
29321
|
-
.monthFirst="${this.monthFirst}"
|
|
29322
|
-
.min="${this.convertToWcValidTime(new Date(this.formattedMinDate))}"
|
|
29323
|
-
.max="${this.convertToWcValidTime(new Date(this.formattedMaxDate))}"
|
|
29324
|
-
.maxDate="${this.maxDate}"
|
|
29325
|
-
.minDate="${this.minDate}"
|
|
29326
|
-
.monthNames="${this.monthNames}"
|
|
29327
|
-
part="calendar"
|
|
29328
|
-
>
|
|
29329
|
-
<slot slot="bib.fullscreen.headline" name="bib.fullscreen.headline" @slotchange="${this.handleSlotToSlot}"></slot>
|
|
29330
|
-
<slot slot="bib.fullscreen.dateLabel" name="bib.fullscreen.dateLabel" @slotchange="${this.handleSlotToSlot}"></slot>
|
|
29331
|
-
<span slot="bib.fullscreen.fromStr">${this.value || u$3`<span class="placeholderDate">${this.format.toUpperCase()}</span>`}</span>
|
|
29332
|
-
${this.range ? u$3`<span slot="mobileDateToStr">${this.valueEnd || u$3`<span class="placeholderDate">${this.format.toUpperCase()}</span>`}</span>` : undefined}
|
|
29333
|
-
</auro-formkit-calendar>
|
|
29437
|
+
${this.renderCalendar()}
|
|
29334
29438
|
</div>
|
|
29335
29439
|
<div slot="helpText" part="helpTextSpan">
|
|
29336
29440
|
${this.renderHtmlHelpText()}
|