@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
|
@@ -730,13 +730,24 @@ let AuroFormValidation$1 = class AuroFormValidation {
|
|
|
730
730
|
this.getInputElements(elem);
|
|
731
731
|
this.getAuroInputs(elem);
|
|
732
732
|
|
|
733
|
-
//
|
|
733
|
+
// Check if validation should run
|
|
734
734
|
let validationShouldRun =
|
|
735
|
+
|
|
736
|
+
// If the validation was forced
|
|
735
737
|
force ||
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
738
|
+
|
|
739
|
+
// If the validation should run on input
|
|
740
|
+
elem.validateOnInput ||
|
|
741
|
+
|
|
742
|
+
// State-based checks
|
|
743
|
+
(
|
|
744
|
+
// Element is not currently focused
|
|
745
|
+
!elem.contains(document.activeElement) && // native input is not focused directly
|
|
746
|
+
!document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
|
|
747
|
+
|
|
748
|
+
// And element has been touched or is untouched but has a value
|
|
749
|
+
( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
|
|
750
|
+
);
|
|
740
751
|
|
|
741
752
|
if (elem.hasAttribute('error')) {
|
|
742
753
|
elem.validity = 'customError';
|
|
@@ -1286,19 +1297,21 @@ class UtilitiesCalendarRender {
|
|
|
1286
1297
|
}
|
|
1287
1298
|
}
|
|
1288
1299
|
|
|
1289
|
-
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}:
|
|
1300
|
+
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}}`;
|
|
1290
1301
|
|
|
1291
|
-
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([
|
|
1302
|
+
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)}`;
|
|
1292
1303
|
|
|
1293
|
-
var tokensCss$b = i$2`:host{--ds-auro-datepicker-
|
|
1304
|
+
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)}`;
|
|
1294
1305
|
|
|
1295
1306
|
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}`;
|
|
1296
1307
|
|
|
1308
|
+
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}`;
|
|
1309
|
+
|
|
1297
1310
|
var classicLayoutColor = i$2``;
|
|
1298
1311
|
|
|
1299
|
-
var snowflakeStyle = i$2
|
|
1312
|
+
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}`;
|
|
1300
1313
|
|
|
1301
|
-
var snowflakeColors = i$2`:host([layout=snowflake])
|
|
1314
|
+
var snowflakeColors = i$2`:host([layout=snowflake]) [auro-dropdown]:not(:is([error],.hasFocus)){--ds-auro-dropdown-trigger-border-color: transparent}`;
|
|
1302
1315
|
|
|
1303
1316
|
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:""}`;
|
|
1304
1317
|
|
|
@@ -12688,7 +12701,7 @@ class AuroBibtemplate extends i {
|
|
|
12688
12701
|
/**
|
|
12689
12702
|
* @private
|
|
12690
12703
|
*/
|
|
12691
|
-
this.buttonTag = versioning.generateTag('auro-formkit-
|
|
12704
|
+
this.buttonTag = versioning.generateTag('auro-formkit-bibtemplate-button', buttonVersion$2, AuroButton$2);
|
|
12692
12705
|
}
|
|
12693
12706
|
|
|
12694
12707
|
static get styles() {
|
|
@@ -18575,23 +18588,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
|
|
|
18575
18588
|
|
|
18576
18589
|
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}`;
|
|
18577
18590
|
|
|
18578
|
-
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}`;
|
|
18591
|
+
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}`;
|
|
18579
18592
|
|
|
18580
18593
|
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}`;
|
|
18581
18594
|
|
|
18582
|
-
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)}
|
|
18595
|
+
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)}`;
|
|
18583
18596
|
|
|
18584
18597
|
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}`;
|
|
18585
18598
|
|
|
18586
|
-
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-
|
|
18599
|
+
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}`;
|
|
18587
18600
|
|
|
18588
18601
|
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)}`;
|
|
18589
18602
|
|
|
18590
|
-
var emphasizedStyleCss = i$2`:host([layout*=emphasized][shape*=pill]:not([layout*=right])) .leftIndent{margin-left:var(--ds-size-
|
|
18603
|
+
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)}`;
|
|
18591
18604
|
|
|
18592
18605
|
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)}`;
|
|
18593
18606
|
|
|
18594
|
-
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}`;
|
|
18607
|
+
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}`;
|
|
18595
18608
|
|
|
18596
18609
|
const watchedItems$1 = new Set();
|
|
18597
18610
|
|
|
@@ -23265,13 +23278,24 @@ class AuroFormValidation {
|
|
|
23265
23278
|
this.getInputElements(elem);
|
|
23266
23279
|
this.getAuroInputs(elem);
|
|
23267
23280
|
|
|
23268
|
-
//
|
|
23281
|
+
// Check if validation should run
|
|
23269
23282
|
let validationShouldRun =
|
|
23283
|
+
|
|
23284
|
+
// If the validation was forced
|
|
23270
23285
|
force ||
|
|
23271
|
-
|
|
23272
|
-
|
|
23273
|
-
|
|
23274
|
-
|
|
23286
|
+
|
|
23287
|
+
// If the validation should run on input
|
|
23288
|
+
elem.validateOnInput ||
|
|
23289
|
+
|
|
23290
|
+
// State-based checks
|
|
23291
|
+
(
|
|
23292
|
+
// Element is not currently focused
|
|
23293
|
+
!elem.contains(document.activeElement) && // native input is not focused directly
|
|
23294
|
+
!document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
|
|
23295
|
+
|
|
23296
|
+
// And element has been touched or is untouched but has a value
|
|
23297
|
+
( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
|
|
23298
|
+
);
|
|
23275
23299
|
|
|
23276
23300
|
if (elem.hasAttribute('error')) {
|
|
23277
23301
|
elem.validity = 'customError';
|
|
@@ -24222,9 +24246,9 @@ class BaseInput extends AuroElement$2 {
|
|
|
24222
24246
|
this.inputElement.value = "";
|
|
24223
24247
|
this.value = "";
|
|
24224
24248
|
this.labelElement.classList.remove('inputElement-label--sticky');
|
|
24249
|
+
this.notifyValueChanged();
|
|
24225
24250
|
this.focus();
|
|
24226
24251
|
this.validation.validate(this);
|
|
24227
|
-
this.notifyValueChanged();
|
|
24228
24252
|
}
|
|
24229
24253
|
|
|
24230
24254
|
/**
|
|
@@ -24319,13 +24343,20 @@ class BaseInput extends AuroElement$2 {
|
|
|
24319
24343
|
}
|
|
24320
24344
|
|
|
24321
24345
|
/**
|
|
24322
|
-
* Resets component to initial state.
|
|
24346
|
+
* Resets component to initial state, including resetting the touched state and validity.
|
|
24323
24347
|
* @returns {void}
|
|
24324
24348
|
*/
|
|
24325
24349
|
reset() {
|
|
24326
24350
|
this.validation.reset(this);
|
|
24327
24351
|
}
|
|
24328
24352
|
|
|
24353
|
+
/**
|
|
24354
|
+
* Clears the input value.
|
|
24355
|
+
*/
|
|
24356
|
+
clear() {
|
|
24357
|
+
this.value = undefined;
|
|
24358
|
+
}
|
|
24359
|
+
|
|
24329
24360
|
/**
|
|
24330
24361
|
* Sets configuration data used elsewhere based on the `type` attribute.
|
|
24331
24362
|
* @private
|
|
@@ -26364,17 +26395,6 @@ class AuroInput extends BaseInput {
|
|
|
26364
26395
|
};
|
|
26365
26396
|
}
|
|
26366
26397
|
|
|
26367
|
-
/**
|
|
26368
|
-
* Returns classmap configuration for accent elements in each layout.
|
|
26369
|
-
* @private
|
|
26370
|
-
* @returns {object} - Returns classmap.
|
|
26371
|
-
*/
|
|
26372
|
-
get commonAccentClasses() {
|
|
26373
|
-
return {
|
|
26374
|
-
'util_displayHidden': false
|
|
26375
|
-
};
|
|
26376
|
-
}
|
|
26377
|
-
|
|
26378
26398
|
/**
|
|
26379
26399
|
* Returns classmap configuration for helpText elements in each layout.
|
|
26380
26400
|
* @private
|
|
@@ -26662,13 +26682,13 @@ class AuroInput extends BaseInput {
|
|
|
26662
26682
|
@click="${this.handleClick}"
|
|
26663
26683
|
class="${e$2(classicClassMap)}"
|
|
26664
26684
|
part="wrapper">
|
|
26665
|
-
<div part="accent-left" class="accents left
|
|
26685
|
+
<div part="accent-left" class="accents left">
|
|
26666
26686
|
${this.renderHtmlTypeIcon()}
|
|
26667
26687
|
</div>
|
|
26668
26688
|
<div class="mainContent">
|
|
26669
26689
|
${this.renderHtmlInput(true)}
|
|
26670
26690
|
</div>
|
|
26671
|
-
<div part="accent-right" class="accents right
|
|
26691
|
+
<div part="accent-right" class="accents right">
|
|
26672
26692
|
${this.renderValidationErrorIconHtml()}
|
|
26673
26693
|
${this.hasValue && this.type === 'password' ? this.renderHtmlNotificationPassword() : undefined}
|
|
26674
26694
|
${this.hasValue ? u$3`
|
|
@@ -26695,7 +26715,7 @@ class AuroInput extends BaseInput {
|
|
|
26695
26715
|
@click="${this.handleClick}"
|
|
26696
26716
|
class="${e$2(this.commonWrapperClasses)}"
|
|
26697
26717
|
part="wrapper">
|
|
26698
|
-
<div class="accents left
|
|
26718
|
+
<div class="accents left">
|
|
26699
26719
|
${this.layout.includes('left') ? u$3`
|
|
26700
26720
|
${this.renderValidationErrorIconHtml()}
|
|
26701
26721
|
` : undefined}
|
|
@@ -26703,7 +26723,7 @@ class AuroInput extends BaseInput {
|
|
|
26703
26723
|
<div class="mainContent">
|
|
26704
26724
|
${this.renderHtmlInput()}
|
|
26705
26725
|
</div>
|
|
26706
|
-
<div class="accents right
|
|
26726
|
+
<div class="accents right">
|
|
26707
26727
|
${this.layout.includes('right') || this.layout === "emphasized" ? u$3`
|
|
26708
26728
|
${this.renderValidationErrorIconHtml()}
|
|
26709
26729
|
` : undefined}
|
|
@@ -28057,6 +28077,7 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28057
28077
|
shapeSizeCss$2,
|
|
28058
28078
|
|
|
28059
28079
|
// layouts
|
|
28080
|
+
classicLayoutStyle,
|
|
28060
28081
|
classicLayoutColor,
|
|
28061
28082
|
snowflakeStyle,
|
|
28062
28083
|
snowflakeColors
|
|
@@ -28124,11 +28145,7 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28124
28145
|
* @param {String} focusInput - Pass in `endDate` to focus on the return input. No parameter is needed to focus on the depart input.
|
|
28125
28146
|
* @returns {void}
|
|
28126
28147
|
*/
|
|
28127
|
-
focus(focusInput) {
|
|
28128
|
-
if (this.disabled) {
|
|
28129
|
-
return;
|
|
28130
|
-
}
|
|
28131
|
-
|
|
28148
|
+
focus(focusInput = '') {
|
|
28132
28149
|
this.range && focusInput === 'endDate' ? this.inputList[1].focus() : this.inputList[0].focus();
|
|
28133
28150
|
}
|
|
28134
28151
|
|
|
@@ -28331,9 +28348,11 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28331
28348
|
configureDatepicker() {
|
|
28332
28349
|
this.addEventListener('focusin', () => {
|
|
28333
28350
|
this.touched = true;
|
|
28351
|
+
this.hasFocus = true;
|
|
28334
28352
|
});
|
|
28335
28353
|
|
|
28336
28354
|
this.addEventListener('focusout', (evt) => {
|
|
28355
|
+
this.hasFocus = false;
|
|
28337
28356
|
if (!this.noValidate && !evt.detail.expanded && this.touched) {
|
|
28338
28357
|
if (!this.contains(document.activeElement)) {
|
|
28339
28358
|
this.validation.validate(this.inputList[0]);
|
|
@@ -28399,9 +28418,6 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28399
28418
|
const convertedDate = this.convertWcTimeToDate(time);
|
|
28400
28419
|
const newDate = this.util.toCustomFormat(convertedDate, this.format);
|
|
28401
28420
|
|
|
28402
|
-
console.log(newDate);
|
|
28403
|
-
console.log(this.util.validDateStr(newDate, this.format));
|
|
28404
|
-
|
|
28405
28421
|
if (this.util.validDateStr(newDate, this.format)) {
|
|
28406
28422
|
if (this.inputList.length > 1) {
|
|
28407
28423
|
if (!this.value || !this.util.validDateStr(this.value, this.format)) {
|
|
@@ -28440,7 +28456,7 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28440
28456
|
handleKeydownReset(event) {
|
|
28441
28457
|
if (event.key === 'Enter' || event.key === ' ') {
|
|
28442
28458
|
this.resetValues();
|
|
28443
|
-
this.
|
|
28459
|
+
this.focus();
|
|
28444
28460
|
}
|
|
28445
28461
|
}
|
|
28446
28462
|
|
|
@@ -28449,7 +28465,7 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28449
28465
|
*/
|
|
28450
28466
|
resetValues() {
|
|
28451
28467
|
this.inputList.forEach((input) => {
|
|
28452
|
-
input.
|
|
28468
|
+
input.clear();
|
|
28453
28469
|
});
|
|
28454
28470
|
}
|
|
28455
28471
|
|
|
@@ -28459,10 +28475,17 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28459
28475
|
*/
|
|
28460
28476
|
reset() {
|
|
28461
28477
|
this.resetValues();
|
|
28462
|
-
|
|
28463
28478
|
this.validation.reset(this);
|
|
28464
28479
|
}
|
|
28465
28480
|
|
|
28481
|
+
/**
|
|
28482
|
+
* Clears the current value(s) of the datepicker.
|
|
28483
|
+
* @returns {void}
|
|
28484
|
+
*/
|
|
28485
|
+
clear() {
|
|
28486
|
+
this.resetValues();
|
|
28487
|
+
}
|
|
28488
|
+
|
|
28466
28489
|
/**
|
|
28467
28490
|
* Validates value.
|
|
28468
28491
|
* @param {boolean} [force=false] - Whether to force validation.
|
|
@@ -28471,22 +28494,10 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28471
28494
|
this.validation.validate(this, force);
|
|
28472
28495
|
}
|
|
28473
28496
|
|
|
28474
|
-
|
|
28475
|
-
|
|
28476
|
-
|
|
28477
|
-
|
|
28478
|
-
|
|
28479
|
-
this.hasFocus = true;
|
|
28480
|
-
this.dropdown.show();
|
|
28481
|
-
|
|
28482
|
-
// shadowroot active element is null if we focus the datepicker itself
|
|
28483
|
-
if (this.shadowRoot.activeElement === null) {
|
|
28484
|
-
// If the shadowRoot.activeElement is null, we can assume that the datepicker itself has focus
|
|
28485
|
-
// and we should focus the first input in the inputList
|
|
28486
|
-
this.inputList[0].focus();
|
|
28487
|
-
}
|
|
28488
|
-
}
|
|
28489
|
-
|
|
28497
|
+
/**
|
|
28498
|
+
* Private method for interacting with the `hasValue` property.
|
|
28499
|
+
* @private
|
|
28500
|
+
*/
|
|
28490
28501
|
setHasValue() {
|
|
28491
28502
|
if (!this.range) {
|
|
28492
28503
|
this.hasValue = this.value && this.value.length > 0;
|
|
@@ -28506,6 +28517,17 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28506
28517
|
this.monthFirst = this.format.indexOf('mm') < this.format.indexOf('yyyy');
|
|
28507
28518
|
}
|
|
28508
28519
|
|
|
28520
|
+
if (changedProperties.has('disabled')) {
|
|
28521
|
+
if (this.disabled) {
|
|
28522
|
+
this.previousTabIndex = this.getAttribute('tabindex');
|
|
28523
|
+
this.setAttribute('tabindex', '-1');
|
|
28524
|
+
} else if (!this.disabled && this.previousTabIndex > -1) {
|
|
28525
|
+
this.tabIndex = this.previousTabIndex;
|
|
28526
|
+
} else {
|
|
28527
|
+
this.removeAttribute('tabindex');
|
|
28528
|
+
}
|
|
28529
|
+
}
|
|
28530
|
+
|
|
28509
28531
|
if (changedProperties.has('calendarFocusDate')) {
|
|
28510
28532
|
this.formattedFocusDate = this.util.toNorthAmericanFormat(this.calendarFocusDate, this.format);
|
|
28511
28533
|
|
|
@@ -28671,6 +28693,8 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28671
28693
|
this.calendarFocusDate = this.minDate;
|
|
28672
28694
|
}
|
|
28673
28695
|
}
|
|
28696
|
+
|
|
28697
|
+
this.calendar.requestUpdate();
|
|
28674
28698
|
}
|
|
28675
28699
|
|
|
28676
28700
|
// This resets the datepicker when the maxDate is set to a new value that is
|
|
@@ -28702,6 +28726,8 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28702
28726
|
}
|
|
28703
28727
|
}
|
|
28704
28728
|
}
|
|
28729
|
+
|
|
28730
|
+
this.calendar.requestUpdate();
|
|
28705
28731
|
}
|
|
28706
28732
|
|
|
28707
28733
|
if (changedProperties.has('centralDate')) {
|
|
@@ -28743,11 +28769,7 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28743
28769
|
|
|
28744
28770
|
// setup focus/blur event listeners
|
|
28745
28771
|
this.addEventListener('focus', () => {
|
|
28746
|
-
this.
|
|
28747
|
-
}, true);
|
|
28748
|
-
|
|
28749
|
-
this.addEventListener('blur', () => {
|
|
28750
|
-
this.hasFocus = false;
|
|
28772
|
+
this.focus();
|
|
28751
28773
|
}, true);
|
|
28752
28774
|
}
|
|
28753
28775
|
|
|
@@ -28802,17 +28824,63 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28802
28824
|
}
|
|
28803
28825
|
|
|
28804
28826
|
/**
|
|
28827
|
+
* Renders the snowflake layout for the datepicker.
|
|
28828
|
+
* @private
|
|
28829
|
+
* @returns {import("lit").TemplateResult}
|
|
28830
|
+
*/
|
|
28831
|
+
renderClassicLayout() {
|
|
28832
|
+
const accentsClassMap = {
|
|
28833
|
+
error: this.hasError
|
|
28834
|
+
};
|
|
28835
|
+
|
|
28836
|
+
const inputSectionClassMap = {
|
|
28837
|
+
inputSection: true,
|
|
28838
|
+
|
|
28839
|
+
hasValue: this.hasValue,
|
|
28840
|
+
hasFocus: this.hasFocus,
|
|
28841
|
+
};
|
|
28842
|
+
|
|
28843
|
+
const labelClassMap = {
|
|
28844
|
+
hasValue: this.hasValue,
|
|
28845
|
+
hasFocus: this.hasFocus,
|
|
28846
|
+
};
|
|
28847
|
+
|
|
28848
|
+
return u$3`
|
|
28849
|
+
<div
|
|
28850
|
+
class="wrapper trigger"
|
|
28851
|
+
part="wrapper">
|
|
28852
|
+
<div class="accents left">
|
|
28853
|
+
${this.renderHtmlIconCalendar()}
|
|
28854
|
+
</div>
|
|
28855
|
+
<div class="mainContent">
|
|
28856
|
+
<label class="${e$2(labelClassMap)}" part="mainLabel">
|
|
28857
|
+
<slot name="label"></slot>
|
|
28858
|
+
</label>
|
|
28859
|
+
<div class="${e$2(inputSectionClassMap)}" part="inputSection">
|
|
28860
|
+
${this.renderHtmlInputs()}
|
|
28861
|
+
</div>
|
|
28862
|
+
</div>
|
|
28863
|
+
<div class="accents right ${e$2(accentsClassMap)}">
|
|
28864
|
+
${this.hasError
|
|
28865
|
+
? this.renderHtmlIconError()
|
|
28866
|
+
: this.renderHtmlActionClear()
|
|
28867
|
+
}
|
|
28868
|
+
</div>
|
|
28869
|
+
</div>
|
|
28870
|
+
`;
|
|
28871
|
+
}
|
|
28872
|
+
|
|
28873
|
+
/**
|
|
28874
|
+
* Renders the layout based on the `layout` attribute.
|
|
28805
28875
|
* @private
|
|
28876
|
+
* @returns {import('lit').TemplateResult}
|
|
28806
28877
|
*/
|
|
28807
28878
|
renderLayoutFromAttributes() {
|
|
28808
28879
|
switch (this.layout) {
|
|
28809
28880
|
case 'snowflake':
|
|
28810
28881
|
return this.renderSnowflakeLayout();
|
|
28811
28882
|
default:
|
|
28812
|
-
|
|
28813
|
-
return u$3`
|
|
28814
|
-
<p>Please implement layout "${this.layout}" for datepicker</p>
|
|
28815
|
-
`;
|
|
28883
|
+
return this.renderClassicLayout();
|
|
28816
28884
|
}
|
|
28817
28885
|
}
|
|
28818
28886
|
|
|
@@ -28823,7 +28891,7 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28823
28891
|
* Returns formatted date like Apr 21 or Dec 25.
|
|
28824
28892
|
* @private
|
|
28825
28893
|
* @param {string} date - Date format should be in a format Date constructor accepts, like '2023-04-21' or '2023/04/21'.
|
|
28826
|
-
* @
|
|
28894
|
+
* @returns {string}
|
|
28827
28895
|
*/
|
|
28828
28896
|
formatShortDate(date) {
|
|
28829
28897
|
// should render like Apr 21
|
|
@@ -28838,8 +28906,8 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28838
28906
|
/**
|
|
28839
28907
|
* Format and render the provided date value.
|
|
28840
28908
|
* @private
|
|
28841
|
-
* @param dateValue
|
|
28842
|
-
* @
|
|
28909
|
+
* @param {string} dateValue - The date value to format and render.
|
|
28910
|
+
* @returns {import('lit').TemplateResult}
|
|
28843
28911
|
*/
|
|
28844
28912
|
renderDisplayTextDate(dateValue) {
|
|
28845
28913
|
return u$3`
|
|
@@ -28854,9 +28922,15 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28854
28922
|
`;
|
|
28855
28923
|
}
|
|
28856
28924
|
|
|
28925
|
+
/**
|
|
28926
|
+
* Renders the HTML inputs for the datepicker.
|
|
28927
|
+
* @private
|
|
28928
|
+
* @returns {import('lit').TemplateResult}
|
|
28929
|
+
*/
|
|
28857
28930
|
renderHtmlInputs() {
|
|
28858
28931
|
const inputClasses = {
|
|
28859
|
-
"util_displayHiddenVisually": !this.hasValue && !this.hasFocus
|
|
28932
|
+
"util_displayHiddenVisually": !this.hasValue && !this.hasFocus && this.layout !== "classic",
|
|
28933
|
+
"parentBorder": this.layout === "classic"
|
|
28860
28934
|
};
|
|
28861
28935
|
|
|
28862
28936
|
return u$3`
|
|
@@ -28870,14 +28944,12 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28870
28944
|
.min="${this.minDate}"
|
|
28871
28945
|
id="${this.generateRandomString(12)}"
|
|
28872
28946
|
.placeholder="${this.placeholder}"
|
|
28873
|
-
|
|
28874
|
-
|
|
28947
|
+
.size="${this.size}"
|
|
28948
|
+
.shape="${this.shape}"
|
|
28875
28949
|
noValidate
|
|
28876
28950
|
class="dateFrom ${e$2(inputClasses)}"
|
|
28877
28951
|
type="date"
|
|
28878
28952
|
part="input"
|
|
28879
|
-
shape="box"
|
|
28880
|
-
size="xl"
|
|
28881
28953
|
setCustomValidity="${this.setCustomValidity}"
|
|
28882
28954
|
setCustomValidityCustomError="${this.setCustomValidityCustomError}"
|
|
28883
28955
|
setCustomValidityValueMissing="${this.setCustomValidityValueMissing}"
|
|
@@ -28885,9 +28957,14 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28885
28957
|
setCustomValidityRangeUnderflow="${this.setCustomValidityRangeUnderflow}"
|
|
28886
28958
|
inputmode="${o(this.inputmode)}"
|
|
28887
28959
|
>
|
|
28888
|
-
|
|
28889
|
-
$
|
|
28890
|
-
|
|
28960
|
+
${this.layout !== "classic"
|
|
28961
|
+
? u$3`
|
|
28962
|
+
<span slot="displayValue">
|
|
28963
|
+
${this.renderDisplayTextDate(this.value)}
|
|
28964
|
+
</span>
|
|
28965
|
+
`
|
|
28966
|
+
: undefined
|
|
28967
|
+
}
|
|
28891
28968
|
<span slot="label"><slot name="fromLabel"></slot></span>
|
|
28892
28969
|
</${this.inputTag}>
|
|
28893
28970
|
</div>
|
|
@@ -28907,7 +28984,6 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28907
28984
|
.min="${this.minDate}"
|
|
28908
28985
|
.placeholder="${this.placeholderEndDate || this.placeholder}"
|
|
28909
28986
|
id="${this.generateRandomString(12)}"
|
|
28910
|
-
bordered
|
|
28911
28987
|
class="dateTo ${e$2(inputClasses)}"
|
|
28912
28988
|
noValidate
|
|
28913
28989
|
type="date"
|
|
@@ -28918,9 +28994,14 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28918
28994
|
setCustomValidityRangeUnderflow="${this.setCustomValidityRangeUnderflow}"
|
|
28919
28995
|
?disabled="${this.disabled}"
|
|
28920
28996
|
part="input">
|
|
28921
|
-
|
|
28922
|
-
$
|
|
28923
|
-
|
|
28997
|
+
${this.layout !== "classic"
|
|
28998
|
+
? u$3`
|
|
28999
|
+
<span slot="displayValue">
|
|
29000
|
+
${this.renderDisplayTextDate(this.valueEnd)}
|
|
29001
|
+
</span>
|
|
29002
|
+
`
|
|
29003
|
+
: undefined
|
|
29004
|
+
}
|
|
28924
29005
|
<span slot="label"><slot name="toLabel"></slot></span>
|
|
28925
29006
|
</${this.inputTag}>
|
|
28926
29007
|
</div>
|
|
@@ -28934,6 +29015,11 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28934
29015
|
// icons/actions
|
|
28935
29016
|
// ------------------------------------
|
|
28936
29017
|
|
|
29018
|
+
/**
|
|
29019
|
+
* Renders the clear action button.
|
|
29020
|
+
* @private
|
|
29021
|
+
* @returns {import('lit').TemplateResult}
|
|
29022
|
+
*/
|
|
28937
29023
|
renderHtmlActionClear() {
|
|
28938
29024
|
const clearActionClassMap = {
|
|
28939
29025
|
'notification': true,
|
|
@@ -28963,6 +29049,11 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28963
29049
|
`;
|
|
28964
29050
|
}
|
|
28965
29051
|
|
|
29052
|
+
/**
|
|
29053
|
+
* Renders the error icon.
|
|
29054
|
+
* @private
|
|
29055
|
+
* @returns {import('lit').TemplateResult}
|
|
29056
|
+
*/
|
|
28966
29057
|
renderHtmlIconError() {
|
|
28967
29058
|
const clearActionClassMap = {
|
|
28968
29059
|
'notification': true,
|
|
@@ -28982,6 +29073,11 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28982
29073
|
`;
|
|
28983
29074
|
}
|
|
28984
29075
|
|
|
29076
|
+
/**
|
|
29077
|
+
* Renders the calendar icon.
|
|
29078
|
+
* @private
|
|
29079
|
+
* @returns {import('lit').TemplateResult}
|
|
29080
|
+
*/
|
|
28985
29081
|
renderHtmlIconCalendar() {
|
|
28986
29082
|
return u$3`
|
|
28987
29083
|
<${this.iconTag}
|
|
@@ -28997,7 +29093,7 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28997
29093
|
/**
|
|
28998
29094
|
* Returns HTML for the help text and error message.
|
|
28999
29095
|
* @private
|
|
29000
|
-
* @returns {
|
|
29096
|
+
* @returns {import('lit').TemplateResult} - Returns HTML for the help text and error message.
|
|
29001
29097
|
*/
|
|
29002
29098
|
renderHtmlHelpText() {
|
|
29003
29099
|
return u$3`
|
|
@@ -29020,6 +29116,33 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
29020
29116
|
`;
|
|
29021
29117
|
}
|
|
29022
29118
|
|
|
29119
|
+
/**
|
|
29120
|
+
* Separate method for rendering the calendar.
|
|
29121
|
+
* @private
|
|
29122
|
+
* @returns {import('lit').TemplateResult}
|
|
29123
|
+
*/
|
|
29124
|
+
renderCalendar() {
|
|
29125
|
+
return u$3`
|
|
29126
|
+
<auro-formkit-calendar
|
|
29127
|
+
?largeFullscreenHeadline="${this.largeFullscreenHeadline}"
|
|
29128
|
+
?noRange="${!this.range}"
|
|
29129
|
+
.format="${this.format}"
|
|
29130
|
+
.monthFirst="${this.monthFirst}"
|
|
29131
|
+
.min="${this.convertToWcValidTime(new Date(this.formattedMinDate))}"
|
|
29132
|
+
.max="${this.convertToWcValidTime(new Date(this.formattedMaxDate))}"
|
|
29133
|
+
.maxDate="${this.maxDate}"
|
|
29134
|
+
.minDate="${this.minDate}"
|
|
29135
|
+
.monthNames="${this.monthNames}"
|
|
29136
|
+
part="calendar"
|
|
29137
|
+
>
|
|
29138
|
+
<slot slot="bib.fullscreen.headline" name="bib.fullscreen.headline" @slotchange="${this.handleSlotToSlot}"></slot>
|
|
29139
|
+
<slot slot="bib.fullscreen.dateLabel" name="bib.fullscreen.dateLabel" @slotchange="${this.handleSlotToSlot}"></slot>
|
|
29140
|
+
<span slot="bib.fullscreen.fromStr">${this.value || u$3`<span class="placeholderDate">${this.format.toUpperCase()}</span>`}</span>
|
|
29141
|
+
${this.range ? u$3`<span slot="mobileDateToStr">${this.valueEnd || u$3`<span class="placeholderDate">${this.format.toUpperCase()}</span>`}</span>` : undefined}
|
|
29142
|
+
</auro-formkit-calendar>
|
|
29143
|
+
`;
|
|
29144
|
+
}
|
|
29145
|
+
|
|
29023
29146
|
// function that renders the HTML and CSS into the scope of the component
|
|
29024
29147
|
render() {
|
|
29025
29148
|
const dropdownElementClassMap = {
|
|
@@ -29041,37 +29164,18 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
29041
29164
|
.placement="${this.placement}"
|
|
29042
29165
|
.shape="${this.shape}"
|
|
29043
29166
|
.size="${this.size}"
|
|
29044
|
-
bordered
|
|
29045
29167
|
class="${e$2(dropdownElementClassMap)}"
|
|
29046
29168
|
disableEventShow
|
|
29047
29169
|
disableFocusTrap
|
|
29048
|
-
fluid
|
|
29049
29170
|
for="dropdownMenu"
|
|
29050
29171
|
part="dropdown"
|
|
29051
|
-
rounded
|
|
29052
29172
|
>
|
|
29053
29173
|
<div slot="trigger" class="dpTriggerContent" part="trigger">
|
|
29054
29174
|
${this.renderLayoutFromAttributes()}
|
|
29055
29175
|
</div>
|
|
29056
29176
|
|
|
29057
29177
|
<div class="calendarWrapper" part="calendarWrapper">
|
|
29058
|
-
|
|
29059
|
-
?largeFullscreenHeadline="${this.largeFullscreenHeadline}"
|
|
29060
|
-
?noRange="${!this.range}"
|
|
29061
|
-
.format="${this.format}"
|
|
29062
|
-
.monthFirst="${this.monthFirst}"
|
|
29063
|
-
.min="${this.convertToWcValidTime(new Date(this.formattedMinDate))}"
|
|
29064
|
-
.max="${this.convertToWcValidTime(new Date(this.formattedMaxDate))}"
|
|
29065
|
-
.maxDate="${this.maxDate}"
|
|
29066
|
-
.minDate="${this.minDate}"
|
|
29067
|
-
.monthNames="${this.monthNames}"
|
|
29068
|
-
part="calendar"
|
|
29069
|
-
>
|
|
29070
|
-
<slot slot="bib.fullscreen.headline" name="bib.fullscreen.headline" @slotchange="${this.handleSlotToSlot}"></slot>
|
|
29071
|
-
<slot slot="bib.fullscreen.dateLabel" name="bib.fullscreen.dateLabel" @slotchange="${this.handleSlotToSlot}"></slot>
|
|
29072
|
-
<span slot="bib.fullscreen.fromStr">${this.value || u$3`<span class="placeholderDate">${this.format.toUpperCase()}</span>`}</span>
|
|
29073
|
-
${this.range ? u$3`<span slot="mobileDateToStr">${this.valueEnd || u$3`<span class="placeholderDate">${this.format.toUpperCase()}</span>`}</span>` : undefined}
|
|
29074
|
-
</auro-formkit-calendar>
|
|
29178
|
+
${this.renderCalendar()}
|
|
29075
29179
|
</div>
|
|
29076
29180
|
<div slot="helpText" part="helpTextSpan">
|
|
29077
29181
|
${this.renderHtmlHelpText()}
|