@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
|
@@ -710,13 +710,24 @@ let AuroFormValidation$1 = class AuroFormValidation {
|
|
|
710
710
|
this.getInputElements(elem);
|
|
711
711
|
this.getAuroInputs(elem);
|
|
712
712
|
|
|
713
|
-
//
|
|
713
|
+
// Check if validation should run
|
|
714
714
|
let validationShouldRun =
|
|
715
|
+
|
|
716
|
+
// If the validation was forced
|
|
715
717
|
force ||
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
718
|
+
|
|
719
|
+
// If the validation should run on input
|
|
720
|
+
elem.validateOnInput ||
|
|
721
|
+
|
|
722
|
+
// State-based checks
|
|
723
|
+
(
|
|
724
|
+
// Element is not currently focused
|
|
725
|
+
!elem.contains(document.activeElement) && // native input is not focused directly
|
|
726
|
+
!document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
|
|
727
|
+
|
|
728
|
+
// And element has been touched or is untouched but has a value
|
|
729
|
+
( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
|
|
730
|
+
);
|
|
720
731
|
|
|
721
732
|
if (elem.hasAttribute('error')) {
|
|
722
733
|
elem.validity = 'customError';
|
|
@@ -1247,19 +1258,21 @@ class UtilitiesCalendarRender {
|
|
|
1247
1258
|
}
|
|
1248
1259
|
}
|
|
1249
1260
|
|
|
1250
|
-
var styleCss$e = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:
|
|
1261
|
+
var styleCss$e = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.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}}`;
|
|
1251
1262
|
|
|
1252
|
-
var colorCss$d = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[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([
|
|
1263
|
+
var colorCss$d = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host 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)}`;
|
|
1253
1264
|
|
|
1254
|
-
var tokensCss$b = css`:host{--ds-auro-datepicker-
|
|
1265
|
+
var tokensCss$b = css`: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)}`;
|
|
1255
1266
|
|
|
1256
1267
|
var shapeSizeCss$2 = css`.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}`;
|
|
1257
1268
|
|
|
1269
|
+
var classicLayoutStyle = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host([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}`;
|
|
1270
|
+
|
|
1258
1271
|
var classicLayoutColor = css``;
|
|
1259
1272
|
|
|
1260
|
-
var snowflakeStyle = css
|
|
1273
|
+
var snowflakeStyle = css`: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}`;
|
|
1261
1274
|
|
|
1262
|
-
var snowflakeColors = css`:host([layout=snowflake])
|
|
1275
|
+
var snowflakeColors = css`:host([layout=snowflake]) [auro-dropdown]:not(:is([error],.hasFocus)){--ds-auro-dropdown-trigger-border-color: transparent}`;
|
|
1263
1276
|
|
|
1264
1277
|
var styleCss$d = css`: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:""}`;
|
|
1265
1278
|
|
|
@@ -12637,7 +12650,7 @@ class AuroBibtemplate extends LitElement {
|
|
|
12637
12650
|
/**
|
|
12638
12651
|
* @private
|
|
12639
12652
|
*/
|
|
12640
|
-
this.buttonTag = versioning.generateTag('auro-formkit-
|
|
12653
|
+
this.buttonTag = versioning.generateTag('auro-formkit-bibtemplate-button', buttonVersion$2, AuroButton$2);
|
|
12641
12654
|
}
|
|
12642
12655
|
|
|
12643
12656
|
static get styles() {
|
|
@@ -18511,23 +18524,23 @@ var dropdownVersion = '3.0.0';
|
|
|
18511
18524
|
|
|
18512
18525
|
var shapeSizeCss = css`.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}`;
|
|
18513
18526
|
|
|
18514
|
-
var styleCss$4 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block}.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}`;
|
|
18527
|
+
var styleCss$4 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block}.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}`;
|
|
18515
18528
|
|
|
18516
18529
|
var styleDefaultCss = css`.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}`;
|
|
18517
18530
|
|
|
18518
|
-
var colorBaseCss = css`.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)}
|
|
18531
|
+
var colorBaseCss = css`.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)}`;
|
|
18519
18532
|
|
|
18520
18533
|
var tokensCss$4 = css`: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}`;
|
|
18521
18534
|
|
|
18522
|
-
var classicStyleCss = css`.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-
|
|
18535
|
+
var classicStyleCss = css`.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}`;
|
|
18523
18536
|
|
|
18524
18537
|
var classicColorCss = css`.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)}`;
|
|
18525
18538
|
|
|
18526
|
-
var emphasizedStyleCss = css`:host([layout*=emphasized][shape*=pill]:not([layout*=right])) .leftIndent{margin-left:var(--ds-size-
|
|
18539
|
+
var emphasizedStyleCss = css`: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)}`;
|
|
18527
18540
|
|
|
18528
18541
|
var emphasizedColorCss = css`.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)}`;
|
|
18529
18542
|
|
|
18530
|
-
var snowflakeStyleCss = css`: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}`;
|
|
18543
|
+
var snowflakeStyleCss = css`: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}`;
|
|
18531
18544
|
|
|
18532
18545
|
const watchedItems$1 = new Set();
|
|
18533
18546
|
|
|
@@ -23201,13 +23214,24 @@ class AuroFormValidation {
|
|
|
23201
23214
|
this.getInputElements(elem);
|
|
23202
23215
|
this.getAuroInputs(elem);
|
|
23203
23216
|
|
|
23204
|
-
//
|
|
23217
|
+
// Check if validation should run
|
|
23205
23218
|
let validationShouldRun =
|
|
23219
|
+
|
|
23220
|
+
// If the validation was forced
|
|
23206
23221
|
force ||
|
|
23207
|
-
|
|
23208
|
-
|
|
23209
|
-
|
|
23210
|
-
|
|
23222
|
+
|
|
23223
|
+
// If the validation should run on input
|
|
23224
|
+
elem.validateOnInput ||
|
|
23225
|
+
|
|
23226
|
+
// State-based checks
|
|
23227
|
+
(
|
|
23228
|
+
// Element is not currently focused
|
|
23229
|
+
!elem.contains(document.activeElement) && // native input is not focused directly
|
|
23230
|
+
!document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
|
|
23231
|
+
|
|
23232
|
+
// And element has been touched or is untouched but has a value
|
|
23233
|
+
( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
|
|
23234
|
+
);
|
|
23211
23235
|
|
|
23212
23236
|
if (elem.hasAttribute('error')) {
|
|
23213
23237
|
elem.validity = 'customError';
|
|
@@ -24158,9 +24182,9 @@ class BaseInput extends AuroElement$2 {
|
|
|
24158
24182
|
this.inputElement.value = "";
|
|
24159
24183
|
this.value = "";
|
|
24160
24184
|
this.labelElement.classList.remove('inputElement-label--sticky');
|
|
24185
|
+
this.notifyValueChanged();
|
|
24161
24186
|
this.focus();
|
|
24162
24187
|
this.validation.validate(this);
|
|
24163
|
-
this.notifyValueChanged();
|
|
24164
24188
|
}
|
|
24165
24189
|
|
|
24166
24190
|
/**
|
|
@@ -24255,13 +24279,20 @@ class BaseInput extends AuroElement$2 {
|
|
|
24255
24279
|
}
|
|
24256
24280
|
|
|
24257
24281
|
/**
|
|
24258
|
-
* Resets component to initial state.
|
|
24282
|
+
* Resets component to initial state, including resetting the touched state and validity.
|
|
24259
24283
|
* @returns {void}
|
|
24260
24284
|
*/
|
|
24261
24285
|
reset() {
|
|
24262
24286
|
this.validation.reset(this);
|
|
24263
24287
|
}
|
|
24264
24288
|
|
|
24289
|
+
/**
|
|
24290
|
+
* Clears the input value.
|
|
24291
|
+
*/
|
|
24292
|
+
clear() {
|
|
24293
|
+
this.value = undefined;
|
|
24294
|
+
}
|
|
24295
|
+
|
|
24265
24296
|
/**
|
|
24266
24297
|
* Sets configuration data used elsewhere based on the `type` attribute.
|
|
24267
24298
|
* @private
|
|
@@ -26300,17 +26331,6 @@ class AuroInput extends BaseInput {
|
|
|
26300
26331
|
};
|
|
26301
26332
|
}
|
|
26302
26333
|
|
|
26303
|
-
/**
|
|
26304
|
-
* Returns classmap configuration for accent elements in each layout.
|
|
26305
|
-
* @private
|
|
26306
|
-
* @returns {object} - Returns classmap.
|
|
26307
|
-
*/
|
|
26308
|
-
get commonAccentClasses() {
|
|
26309
|
-
return {
|
|
26310
|
-
'util_displayHidden': false
|
|
26311
|
-
};
|
|
26312
|
-
}
|
|
26313
|
-
|
|
26314
26334
|
/**
|
|
26315
26335
|
* Returns classmap configuration for helpText elements in each layout.
|
|
26316
26336
|
* @private
|
|
@@ -26598,13 +26618,13 @@ class AuroInput extends BaseInput {
|
|
|
26598
26618
|
@click="${this.handleClick}"
|
|
26599
26619
|
class="${classMap(classicClassMap)}"
|
|
26600
26620
|
part="wrapper">
|
|
26601
|
-
<div part="accent-left" class="accents left
|
|
26621
|
+
<div part="accent-left" class="accents left">
|
|
26602
26622
|
${this.renderHtmlTypeIcon()}
|
|
26603
26623
|
</div>
|
|
26604
26624
|
<div class="mainContent">
|
|
26605
26625
|
${this.renderHtmlInput(true)}
|
|
26606
26626
|
</div>
|
|
26607
|
-
<div part="accent-right" class="accents right
|
|
26627
|
+
<div part="accent-right" class="accents right">
|
|
26608
26628
|
${this.renderValidationErrorIconHtml()}
|
|
26609
26629
|
${this.hasValue && this.type === 'password' ? this.renderHtmlNotificationPassword() : undefined}
|
|
26610
26630
|
${this.hasValue ? html$1`
|
|
@@ -26631,7 +26651,7 @@ class AuroInput extends BaseInput {
|
|
|
26631
26651
|
@click="${this.handleClick}"
|
|
26632
26652
|
class="${classMap(this.commonWrapperClasses)}"
|
|
26633
26653
|
part="wrapper">
|
|
26634
|
-
<div class="accents left
|
|
26654
|
+
<div class="accents left">
|
|
26635
26655
|
${this.layout.includes('left') ? html$1`
|
|
26636
26656
|
${this.renderValidationErrorIconHtml()}
|
|
26637
26657
|
` : undefined}
|
|
@@ -26639,7 +26659,7 @@ class AuroInput extends BaseInput {
|
|
|
26639
26659
|
<div class="mainContent">
|
|
26640
26660
|
${this.renderHtmlInput()}
|
|
26641
26661
|
</div>
|
|
26642
|
-
<div class="accents right
|
|
26662
|
+
<div class="accents right">
|
|
26643
26663
|
${this.layout.includes('right') || this.layout === "emphasized" ? html$1`
|
|
26644
26664
|
${this.renderValidationErrorIconHtml()}
|
|
26645
26665
|
` : undefined}
|
|
@@ -27993,6 +28013,7 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
27993
28013
|
shapeSizeCss$2,
|
|
27994
28014
|
|
|
27995
28015
|
// layouts
|
|
28016
|
+
classicLayoutStyle,
|
|
27996
28017
|
classicLayoutColor,
|
|
27997
28018
|
snowflakeStyle,
|
|
27998
28019
|
snowflakeColors
|
|
@@ -28060,11 +28081,7 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28060
28081
|
* @param {String} focusInput - Pass in `endDate` to focus on the return input. No parameter is needed to focus on the depart input.
|
|
28061
28082
|
* @returns {void}
|
|
28062
28083
|
*/
|
|
28063
|
-
focus(focusInput) {
|
|
28064
|
-
if (this.disabled) {
|
|
28065
|
-
return;
|
|
28066
|
-
}
|
|
28067
|
-
|
|
28084
|
+
focus(focusInput = '') {
|
|
28068
28085
|
this.range && focusInput === 'endDate' ? this.inputList[1].focus() : this.inputList[0].focus();
|
|
28069
28086
|
}
|
|
28070
28087
|
|
|
@@ -28267,9 +28284,11 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28267
28284
|
configureDatepicker() {
|
|
28268
28285
|
this.addEventListener('focusin', () => {
|
|
28269
28286
|
this.touched = true;
|
|
28287
|
+
this.hasFocus = true;
|
|
28270
28288
|
});
|
|
28271
28289
|
|
|
28272
28290
|
this.addEventListener('focusout', (evt) => {
|
|
28291
|
+
this.hasFocus = false;
|
|
28273
28292
|
if (!this.noValidate && !evt.detail.expanded && this.touched) {
|
|
28274
28293
|
if (!this.contains(document.activeElement)) {
|
|
28275
28294
|
this.validation.validate(this.inputList[0]);
|
|
@@ -28335,9 +28354,6 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28335
28354
|
const convertedDate = this.convertWcTimeToDate(time);
|
|
28336
28355
|
const newDate = this.util.toCustomFormat(convertedDate, this.format);
|
|
28337
28356
|
|
|
28338
|
-
console.log(newDate);
|
|
28339
|
-
console.log(this.util.validDateStr(newDate, this.format));
|
|
28340
|
-
|
|
28341
28357
|
if (this.util.validDateStr(newDate, this.format)) {
|
|
28342
28358
|
if (this.inputList.length > 1) {
|
|
28343
28359
|
if (!this.value || !this.util.validDateStr(this.value, this.format)) {
|
|
@@ -28376,7 +28392,7 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28376
28392
|
handleKeydownReset(event) {
|
|
28377
28393
|
if (event.key === 'Enter' || event.key === ' ') {
|
|
28378
28394
|
this.resetValues();
|
|
28379
|
-
this.
|
|
28395
|
+
this.focus();
|
|
28380
28396
|
}
|
|
28381
28397
|
}
|
|
28382
28398
|
|
|
@@ -28385,7 +28401,7 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28385
28401
|
*/
|
|
28386
28402
|
resetValues() {
|
|
28387
28403
|
this.inputList.forEach((input) => {
|
|
28388
|
-
input.
|
|
28404
|
+
input.clear();
|
|
28389
28405
|
});
|
|
28390
28406
|
}
|
|
28391
28407
|
|
|
@@ -28395,10 +28411,17 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28395
28411
|
*/
|
|
28396
28412
|
reset() {
|
|
28397
28413
|
this.resetValues();
|
|
28398
|
-
|
|
28399
28414
|
this.validation.reset(this);
|
|
28400
28415
|
}
|
|
28401
28416
|
|
|
28417
|
+
/**
|
|
28418
|
+
* Clears the current value(s) of the datepicker.
|
|
28419
|
+
* @returns {void}
|
|
28420
|
+
*/
|
|
28421
|
+
clear() {
|
|
28422
|
+
this.resetValues();
|
|
28423
|
+
}
|
|
28424
|
+
|
|
28402
28425
|
/**
|
|
28403
28426
|
* Validates value.
|
|
28404
28427
|
* @param {boolean} [force=false] - Whether to force validation.
|
|
@@ -28407,22 +28430,10 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28407
28430
|
this.validation.validate(this, force);
|
|
28408
28431
|
}
|
|
28409
28432
|
|
|
28410
|
-
|
|
28411
|
-
|
|
28412
|
-
|
|
28413
|
-
|
|
28414
|
-
|
|
28415
|
-
this.hasFocus = true;
|
|
28416
|
-
this.dropdown.show();
|
|
28417
|
-
|
|
28418
|
-
// shadowroot active element is null if we focus the datepicker itself
|
|
28419
|
-
if (this.shadowRoot.activeElement === null) {
|
|
28420
|
-
// If the shadowRoot.activeElement is null, we can assume that the datepicker itself has focus
|
|
28421
|
-
// and we should focus the first input in the inputList
|
|
28422
|
-
this.inputList[0].focus();
|
|
28423
|
-
}
|
|
28424
|
-
}
|
|
28425
|
-
|
|
28433
|
+
/**
|
|
28434
|
+
* Private method for interacting with the `hasValue` property.
|
|
28435
|
+
* @private
|
|
28436
|
+
*/
|
|
28426
28437
|
setHasValue() {
|
|
28427
28438
|
if (!this.range) {
|
|
28428
28439
|
this.hasValue = this.value && this.value.length > 0;
|
|
@@ -28442,6 +28453,17 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28442
28453
|
this.monthFirst = this.format.indexOf('mm') < this.format.indexOf('yyyy');
|
|
28443
28454
|
}
|
|
28444
28455
|
|
|
28456
|
+
if (changedProperties.has('disabled')) {
|
|
28457
|
+
if (this.disabled) {
|
|
28458
|
+
this.previousTabIndex = this.getAttribute('tabindex');
|
|
28459
|
+
this.setAttribute('tabindex', '-1');
|
|
28460
|
+
} else if (!this.disabled && this.previousTabIndex > -1) {
|
|
28461
|
+
this.tabIndex = this.previousTabIndex;
|
|
28462
|
+
} else {
|
|
28463
|
+
this.removeAttribute('tabindex');
|
|
28464
|
+
}
|
|
28465
|
+
}
|
|
28466
|
+
|
|
28445
28467
|
if (changedProperties.has('calendarFocusDate')) {
|
|
28446
28468
|
this.formattedFocusDate = this.util.toNorthAmericanFormat(this.calendarFocusDate, this.format);
|
|
28447
28469
|
|
|
@@ -28607,6 +28629,8 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28607
28629
|
this.calendarFocusDate = this.minDate;
|
|
28608
28630
|
}
|
|
28609
28631
|
}
|
|
28632
|
+
|
|
28633
|
+
this.calendar.requestUpdate();
|
|
28610
28634
|
}
|
|
28611
28635
|
|
|
28612
28636
|
// This resets the datepicker when the maxDate is set to a new value that is
|
|
@@ -28638,6 +28662,8 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28638
28662
|
}
|
|
28639
28663
|
}
|
|
28640
28664
|
}
|
|
28665
|
+
|
|
28666
|
+
this.calendar.requestUpdate();
|
|
28641
28667
|
}
|
|
28642
28668
|
|
|
28643
28669
|
if (changedProperties.has('centralDate')) {
|
|
@@ -28679,11 +28705,7 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28679
28705
|
|
|
28680
28706
|
// setup focus/blur event listeners
|
|
28681
28707
|
this.addEventListener('focus', () => {
|
|
28682
|
-
this.
|
|
28683
|
-
}, true);
|
|
28684
|
-
|
|
28685
|
-
this.addEventListener('blur', () => {
|
|
28686
|
-
this.hasFocus = false;
|
|
28708
|
+
this.focus();
|
|
28687
28709
|
}, true);
|
|
28688
28710
|
}
|
|
28689
28711
|
|
|
@@ -28738,17 +28760,63 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28738
28760
|
}
|
|
28739
28761
|
|
|
28740
28762
|
/**
|
|
28763
|
+
* Renders the snowflake layout for the datepicker.
|
|
28764
|
+
* @private
|
|
28765
|
+
* @returns {import("lit").TemplateResult}
|
|
28766
|
+
*/
|
|
28767
|
+
renderClassicLayout() {
|
|
28768
|
+
const accentsClassMap = {
|
|
28769
|
+
error: this.hasError
|
|
28770
|
+
};
|
|
28771
|
+
|
|
28772
|
+
const inputSectionClassMap = {
|
|
28773
|
+
inputSection: true,
|
|
28774
|
+
|
|
28775
|
+
hasValue: this.hasValue,
|
|
28776
|
+
hasFocus: this.hasFocus,
|
|
28777
|
+
};
|
|
28778
|
+
|
|
28779
|
+
const labelClassMap = {
|
|
28780
|
+
hasValue: this.hasValue,
|
|
28781
|
+
hasFocus: this.hasFocus,
|
|
28782
|
+
};
|
|
28783
|
+
|
|
28784
|
+
return html$1`
|
|
28785
|
+
<div
|
|
28786
|
+
class="wrapper trigger"
|
|
28787
|
+
part="wrapper">
|
|
28788
|
+
<div class="accents left">
|
|
28789
|
+
${this.renderHtmlIconCalendar()}
|
|
28790
|
+
</div>
|
|
28791
|
+
<div class="mainContent">
|
|
28792
|
+
<label class="${classMap(labelClassMap)}" part="mainLabel">
|
|
28793
|
+
<slot name="label"></slot>
|
|
28794
|
+
</label>
|
|
28795
|
+
<div class="${classMap(inputSectionClassMap)}" part="inputSection">
|
|
28796
|
+
${this.renderHtmlInputs()}
|
|
28797
|
+
</div>
|
|
28798
|
+
</div>
|
|
28799
|
+
<div class="accents right ${classMap(accentsClassMap)}">
|
|
28800
|
+
${this.hasError
|
|
28801
|
+
? this.renderHtmlIconError()
|
|
28802
|
+
: this.renderHtmlActionClear()
|
|
28803
|
+
}
|
|
28804
|
+
</div>
|
|
28805
|
+
</div>
|
|
28806
|
+
`;
|
|
28807
|
+
}
|
|
28808
|
+
|
|
28809
|
+
/**
|
|
28810
|
+
* Renders the layout based on the `layout` attribute.
|
|
28741
28811
|
* @private
|
|
28812
|
+
* @returns {import('lit').TemplateResult}
|
|
28742
28813
|
*/
|
|
28743
28814
|
renderLayoutFromAttributes() {
|
|
28744
28815
|
switch (this.layout) {
|
|
28745
28816
|
case 'snowflake':
|
|
28746
28817
|
return this.renderSnowflakeLayout();
|
|
28747
28818
|
default:
|
|
28748
|
-
|
|
28749
|
-
return html$1`
|
|
28750
|
-
<p>Please implement layout "${this.layout}" for datepicker</p>
|
|
28751
|
-
`;
|
|
28819
|
+
return this.renderClassicLayout();
|
|
28752
28820
|
}
|
|
28753
28821
|
}
|
|
28754
28822
|
|
|
@@ -28759,7 +28827,7 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28759
28827
|
* Returns formatted date like Apr 21 or Dec 25.
|
|
28760
28828
|
* @private
|
|
28761
28829
|
* @param {string} date - Date format should be in a format Date constructor accepts, like '2023-04-21' or '2023/04/21'.
|
|
28762
|
-
* @
|
|
28830
|
+
* @returns {string}
|
|
28763
28831
|
*/
|
|
28764
28832
|
formatShortDate(date) {
|
|
28765
28833
|
// should render like Apr 21
|
|
@@ -28774,8 +28842,8 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28774
28842
|
/**
|
|
28775
28843
|
* Format and render the provided date value.
|
|
28776
28844
|
* @private
|
|
28777
|
-
* @param dateValue
|
|
28778
|
-
* @
|
|
28845
|
+
* @param {string} dateValue - The date value to format and render.
|
|
28846
|
+
* @returns {import('lit').TemplateResult}
|
|
28779
28847
|
*/
|
|
28780
28848
|
renderDisplayTextDate(dateValue) {
|
|
28781
28849
|
return html$1`
|
|
@@ -28790,9 +28858,15 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28790
28858
|
`;
|
|
28791
28859
|
}
|
|
28792
28860
|
|
|
28861
|
+
/**
|
|
28862
|
+
* Renders the HTML inputs for the datepicker.
|
|
28863
|
+
* @private
|
|
28864
|
+
* @returns {import('lit').TemplateResult}
|
|
28865
|
+
*/
|
|
28793
28866
|
renderHtmlInputs() {
|
|
28794
28867
|
const inputClasses = {
|
|
28795
|
-
"util_displayHiddenVisually": !this.hasValue && !this.hasFocus
|
|
28868
|
+
"util_displayHiddenVisually": !this.hasValue && !this.hasFocus && this.layout !== "classic",
|
|
28869
|
+
"parentBorder": this.layout === "classic"
|
|
28796
28870
|
};
|
|
28797
28871
|
|
|
28798
28872
|
return html$1`
|
|
@@ -28806,14 +28880,12 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28806
28880
|
.min="${this.minDate}"
|
|
28807
28881
|
id="${this.generateRandomString(12)}"
|
|
28808
28882
|
.placeholder="${this.placeholder}"
|
|
28809
|
-
|
|
28810
|
-
|
|
28883
|
+
.size="${this.size}"
|
|
28884
|
+
.shape="${this.shape}"
|
|
28811
28885
|
noValidate
|
|
28812
28886
|
class="dateFrom ${classMap(inputClasses)}"
|
|
28813
28887
|
type="date"
|
|
28814
28888
|
part="input"
|
|
28815
|
-
shape="box"
|
|
28816
|
-
size="xl"
|
|
28817
28889
|
setCustomValidity="${this.setCustomValidity}"
|
|
28818
28890
|
setCustomValidityCustomError="${this.setCustomValidityCustomError}"
|
|
28819
28891
|
setCustomValidityValueMissing="${this.setCustomValidityValueMissing}"
|
|
@@ -28821,9 +28893,14 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28821
28893
|
setCustomValidityRangeUnderflow="${this.setCustomValidityRangeUnderflow}"
|
|
28822
28894
|
inputmode="${ifDefined(this.inputmode)}"
|
|
28823
28895
|
>
|
|
28824
|
-
|
|
28825
|
-
$
|
|
28826
|
-
|
|
28896
|
+
${this.layout !== "classic"
|
|
28897
|
+
? html$1`
|
|
28898
|
+
<span slot="displayValue">
|
|
28899
|
+
${this.renderDisplayTextDate(this.value)}
|
|
28900
|
+
</span>
|
|
28901
|
+
`
|
|
28902
|
+
: undefined
|
|
28903
|
+
}
|
|
28827
28904
|
<span slot="label"><slot name="fromLabel"></slot></span>
|
|
28828
28905
|
</${this.inputTag}>
|
|
28829
28906
|
</div>
|
|
@@ -28843,7 +28920,6 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28843
28920
|
.min="${this.minDate}"
|
|
28844
28921
|
.placeholder="${this.placeholderEndDate || this.placeholder}"
|
|
28845
28922
|
id="${this.generateRandomString(12)}"
|
|
28846
|
-
bordered
|
|
28847
28923
|
class="dateTo ${classMap(inputClasses)}"
|
|
28848
28924
|
noValidate
|
|
28849
28925
|
type="date"
|
|
@@ -28854,9 +28930,14 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28854
28930
|
setCustomValidityRangeUnderflow="${this.setCustomValidityRangeUnderflow}"
|
|
28855
28931
|
?disabled="${this.disabled}"
|
|
28856
28932
|
part="input">
|
|
28857
|
-
|
|
28858
|
-
$
|
|
28859
|
-
|
|
28933
|
+
${this.layout !== "classic"
|
|
28934
|
+
? html$1`
|
|
28935
|
+
<span slot="displayValue">
|
|
28936
|
+
${this.renderDisplayTextDate(this.valueEnd)}
|
|
28937
|
+
</span>
|
|
28938
|
+
`
|
|
28939
|
+
: undefined
|
|
28940
|
+
}
|
|
28860
28941
|
<span slot="label"><slot name="toLabel"></slot></span>
|
|
28861
28942
|
</${this.inputTag}>
|
|
28862
28943
|
</div>
|
|
@@ -28870,6 +28951,11 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28870
28951
|
// icons/actions
|
|
28871
28952
|
// ------------------------------------
|
|
28872
28953
|
|
|
28954
|
+
/**
|
|
28955
|
+
* Renders the clear action button.
|
|
28956
|
+
* @private
|
|
28957
|
+
* @returns {import('lit').TemplateResult}
|
|
28958
|
+
*/
|
|
28873
28959
|
renderHtmlActionClear() {
|
|
28874
28960
|
const clearActionClassMap = {
|
|
28875
28961
|
'notification': true,
|
|
@@ -28899,6 +28985,11 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28899
28985
|
`;
|
|
28900
28986
|
}
|
|
28901
28987
|
|
|
28988
|
+
/**
|
|
28989
|
+
* Renders the error icon.
|
|
28990
|
+
* @private
|
|
28991
|
+
* @returns {import('lit').TemplateResult}
|
|
28992
|
+
*/
|
|
28902
28993
|
renderHtmlIconError() {
|
|
28903
28994
|
const clearActionClassMap = {
|
|
28904
28995
|
'notification': true,
|
|
@@ -28918,6 +29009,11 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28918
29009
|
`;
|
|
28919
29010
|
}
|
|
28920
29011
|
|
|
29012
|
+
/**
|
|
29013
|
+
* Renders the calendar icon.
|
|
29014
|
+
* @private
|
|
29015
|
+
* @returns {import('lit').TemplateResult}
|
|
29016
|
+
*/
|
|
28921
29017
|
renderHtmlIconCalendar() {
|
|
28922
29018
|
return html$1`
|
|
28923
29019
|
<${this.iconTag}
|
|
@@ -28933,7 +29029,7 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28933
29029
|
/**
|
|
28934
29030
|
* Returns HTML for the help text and error message.
|
|
28935
29031
|
* @private
|
|
28936
|
-
* @returns {
|
|
29032
|
+
* @returns {import('lit').TemplateResult} - Returns HTML for the help text and error message.
|
|
28937
29033
|
*/
|
|
28938
29034
|
renderHtmlHelpText() {
|
|
28939
29035
|
return html$1`
|
|
@@ -28956,6 +29052,33 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28956
29052
|
`;
|
|
28957
29053
|
}
|
|
28958
29054
|
|
|
29055
|
+
/**
|
|
29056
|
+
* Separate method for rendering the calendar.
|
|
29057
|
+
* @private
|
|
29058
|
+
* @returns {import('lit').TemplateResult}
|
|
29059
|
+
*/
|
|
29060
|
+
renderCalendar() {
|
|
29061
|
+
return html$1`
|
|
29062
|
+
<auro-formkit-calendar
|
|
29063
|
+
?largeFullscreenHeadline="${this.largeFullscreenHeadline}"
|
|
29064
|
+
?noRange="${!this.range}"
|
|
29065
|
+
.format="${this.format}"
|
|
29066
|
+
.monthFirst="${this.monthFirst}"
|
|
29067
|
+
.min="${this.convertToWcValidTime(new Date(this.formattedMinDate))}"
|
|
29068
|
+
.max="${this.convertToWcValidTime(new Date(this.formattedMaxDate))}"
|
|
29069
|
+
.maxDate="${this.maxDate}"
|
|
29070
|
+
.minDate="${this.minDate}"
|
|
29071
|
+
.monthNames="${this.monthNames}"
|
|
29072
|
+
part="calendar"
|
|
29073
|
+
>
|
|
29074
|
+
<slot slot="bib.fullscreen.headline" name="bib.fullscreen.headline" @slotchange="${this.handleSlotToSlot}"></slot>
|
|
29075
|
+
<slot slot="bib.fullscreen.dateLabel" name="bib.fullscreen.dateLabel" @slotchange="${this.handleSlotToSlot}"></slot>
|
|
29076
|
+
<span slot="bib.fullscreen.fromStr">${this.value || html$1`<span class="placeholderDate">${this.format.toUpperCase()}</span>`}</span>
|
|
29077
|
+
${this.range ? html$1`<span slot="mobileDateToStr">${this.valueEnd || html$1`<span class="placeholderDate">${this.format.toUpperCase()}</span>`}</span>` : undefined}
|
|
29078
|
+
</auro-formkit-calendar>
|
|
29079
|
+
`;
|
|
29080
|
+
}
|
|
29081
|
+
|
|
28959
29082
|
// function that renders the HTML and CSS into the scope of the component
|
|
28960
29083
|
render() {
|
|
28961
29084
|
const dropdownElementClassMap = {
|
|
@@ -28977,37 +29100,18 @@ class AuroDatePicker extends AuroElement$1 {
|
|
|
28977
29100
|
.placement="${this.placement}"
|
|
28978
29101
|
.shape="${this.shape}"
|
|
28979
29102
|
.size="${this.size}"
|
|
28980
|
-
bordered
|
|
28981
29103
|
class="${classMap(dropdownElementClassMap)}"
|
|
28982
29104
|
disableEventShow
|
|
28983
29105
|
disableFocusTrap
|
|
28984
|
-
fluid
|
|
28985
29106
|
for="dropdownMenu"
|
|
28986
29107
|
part="dropdown"
|
|
28987
|
-
rounded
|
|
28988
29108
|
>
|
|
28989
29109
|
<div slot="trigger" class="dpTriggerContent" part="trigger">
|
|
28990
29110
|
${this.renderLayoutFromAttributes()}
|
|
28991
29111
|
</div>
|
|
28992
29112
|
|
|
28993
29113
|
<div class="calendarWrapper" part="calendarWrapper">
|
|
28994
|
-
|
|
28995
|
-
?largeFullscreenHeadline="${this.largeFullscreenHeadline}"
|
|
28996
|
-
?noRange="${!this.range}"
|
|
28997
|
-
.format="${this.format}"
|
|
28998
|
-
.monthFirst="${this.monthFirst}"
|
|
28999
|
-
.min="${this.convertToWcValidTime(new Date(this.formattedMinDate))}"
|
|
29000
|
-
.max="${this.convertToWcValidTime(new Date(this.formattedMaxDate))}"
|
|
29001
|
-
.maxDate="${this.maxDate}"
|
|
29002
|
-
.minDate="${this.minDate}"
|
|
29003
|
-
.monthNames="${this.monthNames}"
|
|
29004
|
-
part="calendar"
|
|
29005
|
-
>
|
|
29006
|
-
<slot slot="bib.fullscreen.headline" name="bib.fullscreen.headline" @slotchange="${this.handleSlotToSlot}"></slot>
|
|
29007
|
-
<slot slot="bib.fullscreen.dateLabel" name="bib.fullscreen.dateLabel" @slotchange="${this.handleSlotToSlot}"></slot>
|
|
29008
|
-
<span slot="bib.fullscreen.fromStr">${this.value || html$1`<span class="placeholderDate">${this.format.toUpperCase()}</span>`}</span>
|
|
29009
|
-
${this.range ? html$1`<span slot="mobileDateToStr">${this.valueEnd || html$1`<span class="placeholderDate">${this.format.toUpperCase()}</span>`}</span>` : undefined}
|
|
29010
|
-
</auro-formkit-calendar>
|
|
29114
|
+
${this.renderCalendar()}
|
|
29011
29115
|
</div>
|
|
29012
29116
|
<div slot="helpText" part="helpTextSpan">
|
|
29013
29117
|
${this.renderHtmlHelpText()}
|