@aurodesignsystem-dev/auro-formkit 0.0.0-pr755.0 → 0.0.0-pr755.1
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 +9 -9
- package/components/checkbox/demo/index.min.js +9 -9
- package/components/checkbox/dist/index.js +9 -9
- package/components/checkbox/dist/registered.js +9 -9
- package/components/combobox/demo/api.md +12 -6
- package/components/combobox/demo/api.min.js +81 -98
- package/components/combobox/demo/index.min.js +81 -98
- package/components/combobox/dist/index.js +44 -86
- package/components/combobox/dist/registered.js +44 -86
- package/components/counter/demo/api.md +140 -7
- package/components/counter/demo/api.min.js +555 -385
- package/components/counter/demo/index.md +82 -0
- package/components/counter/demo/index.min.js +555 -385
- package/components/counter/dist/auro-counter-group.d.ts +71 -14
- package/components/counter/dist/auro-counter.d.ts +10 -0
- package/components/counter/dist/index.js +555 -385
- package/components/counter/dist/registered.js +555 -385
- package/components/datepicker/demo/api.min.js +65 -92
- package/components/datepicker/demo/index.min.js +65 -92
- package/components/datepicker/dist/auro-datepicker.d.ts +6 -0
- package/components/datepicker/dist/index.js +65 -92
- package/components/datepicker/dist/registered.js +65 -92
- package/components/dropdown/demo/api.md +76 -268
- package/components/dropdown/demo/api.min.js +25 -67
- package/components/dropdown/demo/index.md +45 -363
- package/components/dropdown/demo/index.min.js +25 -67
- package/components/dropdown/dist/auro-dropdown.d.ts +21 -71
- package/components/dropdown/dist/index.js +25 -67
- package/components/dropdown/dist/registered.js +25 -67
- package/components/helptext/dist/index.js +1 -1
- package/components/helptext/dist/registered.js +1 -1
- package/components/input/demo/api.md +1 -1
- package/components/input/demo/api.min.js +12 -12
- package/components/input/demo/index.min.js +12 -12
- package/components/input/dist/base-input.d.ts +1 -1
- package/components/input/dist/index.js +12 -12
- package/components/input/dist/registered.js +12 -12
- package/components/menu/demo/api.md +1 -1
- package/components/menu/demo/api.min.js +37 -12
- package/components/menu/demo/index.min.js +37 -12
- package/components/menu/dist/auro-menu.d.ts +13 -2
- package/components/menu/dist/index.js +37 -12
- package/components/menu/dist/registered.js +37 -12
- package/components/radio/demo/api.min.js +10 -10
- package/components/radio/demo/index.min.js +10 -10
- package/components/radio/dist/auro-radio.d.ts +1 -1
- package/components/radio/dist/index.js +10 -10
- package/components/radio/dist/registered.js +10 -10
- package/components/select/demo/api.md +15 -9
- package/components/select/demo/api.min.js +125 -194
- package/components/select/demo/index.md +1 -1
- package/components/select/demo/index.min.js +125 -194
- package/components/select/dist/auro-select.d.ts +20 -4
- package/components/select/dist/index.js +88 -182
- package/components/select/dist/registered.js +88 -182
- package/package.json +3 -3
|
@@ -653,19 +653,19 @@ let AuroFormValidation$1 = class AuroFormValidation {
|
|
|
653
653
|
{
|
|
654
654
|
check: (e) => e.value?.length > 0 && e.value?.length < e.minLength,
|
|
655
655
|
validity: 'tooShort',
|
|
656
|
-
message: e => e.setCustomValidityTooShort || e.setCustomValidity || ''
|
|
656
|
+
message: e => e.getAttribute('setCustomValidityTooShort') || e.setCustomValidity || ''
|
|
657
657
|
},
|
|
658
658
|
{
|
|
659
659
|
check: (e) => e.value?.length > e.maxLength,
|
|
660
660
|
validity: 'tooLong',
|
|
661
|
-
message: e => e.setCustomValidityTooLong || e.setCustomValidity || ''
|
|
661
|
+
message: e => e.getAttribute('setCustomValidityTooLong') || e.setCustomValidity || ''
|
|
662
662
|
}
|
|
663
663
|
],
|
|
664
664
|
pattern: [
|
|
665
665
|
{
|
|
666
666
|
check: (e) => e.pattern && !new RegExp(`^${e.pattern}$`, 'u').test(e.value),
|
|
667
667
|
validity: 'patternMismatch',
|
|
668
|
-
message: e => e.setCustomValidityPatternMismatch || e.setCustomValidity || ''
|
|
668
|
+
message: e => e.getAttribute('setCustomValidityPatternMismatch') || e.setCustomValidity || ''
|
|
669
669
|
}
|
|
670
670
|
]
|
|
671
671
|
},
|
|
@@ -860,10 +860,10 @@ let AuroFormValidation$1 = class AuroFormValidation {
|
|
|
860
860
|
if (!hasValue && elem.required && elem.touched) {
|
|
861
861
|
elem.validity = 'valueMissing';
|
|
862
862
|
elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
|
|
863
|
-
} else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
|
|
863
|
+
} else if (hasValue && this.runtimeUtils.elementMatch(elem, 'auro-input')) {
|
|
864
864
|
this.validateType(elem);
|
|
865
865
|
this.validateElementAttributes(elem);
|
|
866
|
-
} else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
|
|
866
|
+
} else if (hasValue && (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group'))) {
|
|
867
867
|
this.validateElementAttributes(elem);
|
|
868
868
|
}
|
|
869
869
|
}
|
|
@@ -4097,7 +4097,7 @@ var dropdownVersion$1 = '3.0.0';
|
|
|
4097
4097
|
|
|
4098
4098
|
var shapeSizeCss$1 = i$5`.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}`;
|
|
4099
4099
|
|
|
4100
|
-
var colorCss$1$3 = i$5`:host(:not([ondark])) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host(:not([ondark])) .wrapper:focus-within,:host(:not([ondark])) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused, #01426a)}:host(:not([onDark])[disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([ondark])[error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]) .label{color:var(--ds-auro-dropdown-label-text-color)}:host([onDark]) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host([onDark]) .wrapper:focus-within,:host([onDark]) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([onDark][disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse-disabled, rgba(255, 255, 255, 0.1))}:host([ondark][error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}`;
|
|
4100
|
+
var colorCss$1$3 = i$5`:host(:not([layout*=classic])){--ds-auro-dropdown-trigger-border-color: transparent}:host(:not([ondark])) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host(:not([ondark])) .wrapper:focus-within,:host(:not([ondark])) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused, #01426a)}:host(:not([onDark])[disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([ondark])[error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]) .label{color:var(--ds-auro-dropdown-label-text-color)}:host([onDark]) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host([onDark]) .wrapper:focus-within,:host([onDark]) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([onDark][disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse-disabled, rgba(255, 255, 255, 0.1))}:host([ondark][error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}`;
|
|
4101
4101
|
|
|
4102
4102
|
var classicColorCss$1 = i$5``;
|
|
4103
4103
|
|
|
@@ -4109,7 +4109,7 @@ var styleSnowflakeCss$1 = i$5`:host{display:block}.wrapper{display:flex;flex:1;f
|
|
|
4109
4109
|
|
|
4110
4110
|
var colorCss$6 = i$5`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
|
|
4111
4111
|
|
|
4112
|
-
var styleCss$7 = i$5
|
|
4112
|
+
var styleCss$7 = i$5`:host{position:relative;display:block}.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
|
|
4113
4113
|
|
|
4114
4114
|
var tokensCss$6 = i$5`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
4115
4115
|
|
|
@@ -4414,10 +4414,8 @@ let AuroElement$4 = class AuroElement extends i$2 {
|
|
|
4414
4414
|
// See LICENSE in the project root for license information.
|
|
4415
4415
|
|
|
4416
4416
|
|
|
4417
|
-
|
|
4418
|
-
* @attr { Boolean } disableEventShow - If declared, the dropdown will only show by calling the API .show() public method.
|
|
4417
|
+
/*
|
|
4419
4418
|
* @slot - Default slot for the popover content.
|
|
4420
|
-
* @slot label - Defines the content of the label.
|
|
4421
4419
|
* @slot helpText - Defines the content of the helpText.
|
|
4422
4420
|
* @slot trigger - Defines the content of the trigger.
|
|
4423
4421
|
* @csspart trigger - The trigger content container.
|
|
@@ -4436,18 +4434,22 @@ class AuroDropdown extends AuroElement$4 {
|
|
|
4436
4434
|
this.matchWidth = false;
|
|
4437
4435
|
this.noHideOnThisFocusLoss = false;
|
|
4438
4436
|
|
|
4439
|
-
this.errorMessage =
|
|
4437
|
+
this.errorMessage = undefined; // TODO - check with Doug if there is still more to do here
|
|
4440
4438
|
|
|
4441
4439
|
// Layout Config
|
|
4442
|
-
this.layout =
|
|
4443
|
-
this.shape =
|
|
4444
|
-
this.size =
|
|
4440
|
+
this.layout = undefined;
|
|
4441
|
+
this.shape = undefined;
|
|
4442
|
+
this.size = undefined;
|
|
4445
4443
|
|
|
4446
4444
|
this.parentBorder = false;
|
|
4447
4445
|
|
|
4448
4446
|
this.privateDefaults();
|
|
4449
4447
|
}
|
|
4450
4448
|
|
|
4449
|
+
/**
|
|
4450
|
+
* @private
|
|
4451
|
+
* @returns {object} Class definition for the wrapper element.
|
|
4452
|
+
*/
|
|
4451
4453
|
get commonWrapperClasses() {
|
|
4452
4454
|
return {
|
|
4453
4455
|
'trigger': true,
|
|
@@ -4467,12 +4469,8 @@ class AuroDropdown extends AuroElement$4 {
|
|
|
4467
4469
|
this.disabled = false;
|
|
4468
4470
|
this.disableFocusTrap = false;
|
|
4469
4471
|
this.error = false;
|
|
4470
|
-
this.inset = false;
|
|
4471
|
-
this.rounded = false;
|
|
4472
4472
|
this.tabIndex = 0;
|
|
4473
4473
|
this.noToggle = false;
|
|
4474
|
-
this.a11yAutocomplete = 'none';
|
|
4475
|
-
this.labeled = true;
|
|
4476
4474
|
this.a11yRole = 'button';
|
|
4477
4475
|
this.onDark = false;
|
|
4478
4476
|
this.showTriggerBorders = true;
|
|
@@ -4594,26 +4592,27 @@ class AuroDropdown extends AuroElement$4 {
|
|
|
4594
4592
|
},
|
|
4595
4593
|
|
|
4596
4594
|
/**
|
|
4597
|
-
* If declared,
|
|
4595
|
+
* If declared, the dropdown will only show by calling the API .show() public method.
|
|
4596
|
+
* @default false
|
|
4598
4597
|
*/
|
|
4599
|
-
|
|
4598
|
+
disableEventShow: {
|
|
4600
4599
|
type: Boolean,
|
|
4601
4600
|
reflect: true
|
|
4602
4601
|
},
|
|
4603
4602
|
|
|
4604
4603
|
/**
|
|
4605
|
-
* If declared,
|
|
4606
|
-
* @attr {Boolean} chevron
|
|
4604
|
+
* If declared, applies a border around the trigger slot.
|
|
4607
4605
|
*/
|
|
4608
|
-
|
|
4606
|
+
simple: {
|
|
4609
4607
|
type: Boolean,
|
|
4610
4608
|
reflect: true
|
|
4611
4609
|
},
|
|
4612
4610
|
|
|
4613
4611
|
/**
|
|
4614
|
-
* If declared, the dropdown
|
|
4612
|
+
* If declared, the dropdown displays a chevron on the right.
|
|
4613
|
+
* @attr {Boolean} chevron
|
|
4615
4614
|
*/
|
|
4616
|
-
|
|
4615
|
+
chevron: {
|
|
4617
4616
|
type: Boolean,
|
|
4618
4617
|
reflect: true
|
|
4619
4618
|
},
|
|
@@ -4627,7 +4626,7 @@ class AuroDropdown extends AuroElement$4 {
|
|
|
4627
4626
|
},
|
|
4628
4627
|
|
|
4629
4628
|
/**
|
|
4630
|
-
* If
|
|
4629
|
+
* If declared, the focus trap inside of bib will be turned off.
|
|
4631
4630
|
*/
|
|
4632
4631
|
disableFocusTrap: {
|
|
4633
4632
|
type: Boolean,
|
|
@@ -4674,22 +4673,6 @@ class AuroDropdown extends AuroElement$4 {
|
|
|
4674
4673
|
reflect: true
|
|
4675
4674
|
},
|
|
4676
4675
|
|
|
4677
|
-
/**
|
|
4678
|
-
* Makes the trigger to be full width of its parent container.
|
|
4679
|
-
*/
|
|
4680
|
-
fluid: {
|
|
4681
|
-
type: Boolean,
|
|
4682
|
-
reflect: true
|
|
4683
|
-
},
|
|
4684
|
-
|
|
4685
|
-
/**
|
|
4686
|
-
* If declared, will apply padding around trigger slot content.
|
|
4687
|
-
*/
|
|
4688
|
-
inset: {
|
|
4689
|
-
type: Boolean,
|
|
4690
|
-
reflect: true
|
|
4691
|
-
},
|
|
4692
|
-
|
|
4693
4676
|
/**
|
|
4694
4677
|
* If true, the dropdown bib is displayed.
|
|
4695
4678
|
*/
|
|
@@ -4733,15 +4716,6 @@ class AuroDropdown extends AuroElement$4 {
|
|
|
4733
4716
|
reflect: true
|
|
4734
4717
|
},
|
|
4735
4718
|
|
|
4736
|
-
/**
|
|
4737
|
-
* Defines if there is a label preset.
|
|
4738
|
-
* @private
|
|
4739
|
-
*/
|
|
4740
|
-
labeled: {
|
|
4741
|
-
type: Boolean,
|
|
4742
|
-
reflect: true
|
|
4743
|
-
},
|
|
4744
|
-
|
|
4745
4719
|
/**
|
|
4746
4720
|
* Defines if the trigger should size based on the parent element providing the border UI.
|
|
4747
4721
|
* @private
|
|
@@ -4802,6 +4776,9 @@ class AuroDropdown extends AuroElement$4 {
|
|
|
4802
4776
|
reflect: true
|
|
4803
4777
|
},
|
|
4804
4778
|
|
|
4779
|
+
/**
|
|
4780
|
+
* If declared, and a function is set, that function will execute when the slot content is updated.
|
|
4781
|
+
*/
|
|
4805
4782
|
onSlotChange: {
|
|
4806
4783
|
type: Function,
|
|
4807
4784
|
reflect: false
|
|
@@ -4816,14 +4793,6 @@ class AuroDropdown extends AuroElement$4 {
|
|
|
4816
4793
|
reflect: true
|
|
4817
4794
|
},
|
|
4818
4795
|
|
|
4819
|
-
/**
|
|
4820
|
-
* If declared, will apply border-radius to trigger and default slots.
|
|
4821
|
-
*/
|
|
4822
|
-
rounded: {
|
|
4823
|
-
type: Boolean,
|
|
4824
|
-
reflect: true
|
|
4825
|
-
},
|
|
4826
|
-
|
|
4827
4796
|
/**
|
|
4828
4797
|
* @private
|
|
4829
4798
|
*/
|
|
@@ -4838,22 +4807,14 @@ class AuroDropdown extends AuroElement$4 {
|
|
|
4838
4807
|
type: String || undefined,
|
|
4839
4808
|
attribute: false,
|
|
4840
4809
|
reflect: false
|
|
4841
|
-
},
|
|
4842
|
-
|
|
4843
|
-
/**
|
|
4844
|
-
* The value for the aria-autocomplete attribute of the trigger element.
|
|
4845
|
-
*/
|
|
4846
|
-
a11yAutocomplete: {
|
|
4847
|
-
type: String,
|
|
4848
|
-
attribute: false,
|
|
4849
4810
|
}
|
|
4850
4811
|
};
|
|
4851
4812
|
}
|
|
4852
4813
|
|
|
4853
4814
|
static get styles() {
|
|
4854
4815
|
return [
|
|
4855
|
-
colorCss$1$3,
|
|
4856
4816
|
tokensCss$1$3,
|
|
4817
|
+
colorCss$1$3,
|
|
4857
4818
|
|
|
4858
4819
|
// default layout
|
|
4859
4820
|
classicColorCss$1,
|
|
@@ -5293,10 +5254,7 @@ class AuroDropdown extends AuroElement$4 {
|
|
|
5293
5254
|
id="bib"
|
|
5294
5255
|
shape="${this.shape}"
|
|
5295
5256
|
?data-show="${this.isPopoverVisible}"
|
|
5296
|
-
?isfullscreen="${this.isBibFullscreen}"
|
|
5297
|
-
?common="${this.common}"
|
|
5298
|
-
?rounded="${this.common || this.rounded}"
|
|
5299
|
-
?inset="${this.common || this.inset}">
|
|
5257
|
+
?isfullscreen="${this.isBibFullscreen}">
|
|
5300
5258
|
<div class="slotContent">
|
|
5301
5259
|
<slot @slotchange="${this.handleDefaultSlot}"></slot>
|
|
5302
5260
|
</div>
|
|
@@ -5404,19 +5362,19 @@ var styleCss$4$2 = i$5`.util_displayInline{display:inline}.util_displayInlineBlo
|
|
|
5404
5362
|
|
|
5405
5363
|
var styleDefaultCss = i$5`.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}`;
|
|
5406
5364
|
|
|
5407
|
-
var colorBaseCss = i$5`.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)}.wrapper .displayValue{background-color:var(--ds-auro-input-background-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-
|
|
5365
|
+
var colorBaseCss = i$5`.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)}.wrapper .displayValue{background-color:var(--ds-auro-input-background-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)}`;
|
|
5408
5366
|
|
|
5409
5367
|
var tokensCss$4 = i$5`: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}`;
|
|
5410
5368
|
|
|
5411
|
-
var classicStyleCss = i$5`.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{padding:0
|
|
5369
|
+
var classicStyleCss = i$5`.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-50, 0.25rem)}.layout-classic .accents.left{padding-right:var(--ds-size-50, 0.25rem)}.layout-classic .accents.right{padding-left:var(--ds-size-50, 0.25rem)}.layout-classic .accents.right .notification{margin-right:var(--ds-size-50, 0.25rem)}.layout-classic.withValue{justify-content:flex-start}.layout-classic:focus-within{justify-content:flex-start}.layout-classic:focus-within .alertNotification{display:none}`;
|
|
5412
5370
|
|
|
5413
5371
|
var classicColorCss = i$5`.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)}`;
|
|
5414
5372
|
|
|
5415
|
-
var emphasizedStyleCss = i$5`:host([layout*=emphasized][shape*=pill]:not([layout*=right])) .leftIndent{margin-left:
|
|
5373
|
+
var emphasizedStyleCss = i$5`:host([layout*=emphasized][shape*=pill]:not([layout*=right])) .leftIndent{margin-left:var(--ds-size-150, 0.75rem);width:calc(100% - var(--ds-size-150, 0.75rem))}:host([layout*=emphasized][shape*=pill]:not([layout*=left])) .rightIndent{margin-right:var(--ds-size-150, 0.75rem);width:calc(100% - var(--ds-size-150, 0.75rem))}:host([layout*=emphasized][shape*=pill]:not([layout*=left]):not([layout*=right])) .rightIndent{margin-right:var(--ds-size-150, 0.75rem);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}.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}.layout-emphasized .displayValue,.layout-emphasized-left .displayValue,.layout-emphasized-right .displayValue{position:absolute;top:0;right:0;bottom:0;left:0;display:none}.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 .displayValueWrapper,.layout-emphasized-left .displayValueWrapper,.layout-emphasized-right .displayValueWrapper{transform:translateY(-50%)}.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-150, 0.75rem)}.layout-emphasized .accents.right,.layout-emphasized-left .accents.right,.layout-emphasized-right .accents.right{padding-right:var(--ds-size-150, 0.75rem)}.layout-emphasized-left .alertNotification{margin-right:var(--ds-size-50, 0.25rem)}.layout-emphasized-left .clear{margin-left:var(--ds-size-50, 0.25rem)}.layout-emphasized-right .alertNotification{margin-left:var(--ds-size-50, 0.25rem)}.layout-emphasized-right .clear{margin-right:var(--ds-size-50, 0.25rem)}`;
|
|
5416
5374
|
|
|
5417
5375
|
var emphasizedColorCss = i$5`.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)}`;
|
|
5418
5376
|
|
|
5419
|
-
var snowflakeStyleCss = i$5`: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:24px;width:calc(100% - 48px)}:host([layout*=snowflake]) .rightIndent{margin-right:24px;width:calc(100% - 48px)}.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:24px}.layout-snowflake .accents.left{padding-left:24px}.layout-snowflake .accents.right{padding-right:24px}:host([layout*=snowflake]) .helpTextWrapper{text-align:center}`;
|
|
5377
|
+
var snowflakeStyleCss = i$5`: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}`;
|
|
5420
5378
|
|
|
5421
5379
|
const watchedItems = new Set();
|
|
5422
5380
|
|
|
@@ -9931,19 +9889,19 @@ class AuroFormValidation {
|
|
|
9931
9889
|
{
|
|
9932
9890
|
check: (e) => e.value?.length > 0 && e.value?.length < e.minLength,
|
|
9933
9891
|
validity: 'tooShort',
|
|
9934
|
-
message: e => e.setCustomValidityTooShort || e.setCustomValidity || ''
|
|
9892
|
+
message: e => e.getAttribute('setCustomValidityTooShort') || e.setCustomValidity || ''
|
|
9935
9893
|
},
|
|
9936
9894
|
{
|
|
9937
9895
|
check: (e) => e.value?.length > e.maxLength,
|
|
9938
9896
|
validity: 'tooLong',
|
|
9939
|
-
message: e => e.setCustomValidityTooLong || e.setCustomValidity || ''
|
|
9897
|
+
message: e => e.getAttribute('setCustomValidityTooLong') || e.setCustomValidity || ''
|
|
9940
9898
|
}
|
|
9941
9899
|
],
|
|
9942
9900
|
pattern: [
|
|
9943
9901
|
{
|
|
9944
9902
|
check: (e) => e.pattern && !new RegExp(`^${e.pattern}$`, 'u').test(e.value),
|
|
9945
9903
|
validity: 'patternMismatch',
|
|
9946
|
-
message: e => e.setCustomValidityPatternMismatch || e.setCustomValidity || ''
|
|
9904
|
+
message: e => e.getAttribute('setCustomValidityPatternMismatch') || e.setCustomValidity || ''
|
|
9947
9905
|
}
|
|
9948
9906
|
]
|
|
9949
9907
|
},
|
|
@@ -10138,10 +10096,10 @@ class AuroFormValidation {
|
|
|
10138
10096
|
if (!hasValue && elem.required && elem.touched) {
|
|
10139
10097
|
elem.validity = 'valueMissing';
|
|
10140
10098
|
elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
|
|
10141
|
-
} else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
|
|
10099
|
+
} else if (hasValue && this.runtimeUtils.elementMatch(elem, 'auro-input')) {
|
|
10142
10100
|
this.validateType(elem);
|
|
10143
10101
|
this.validateElementAttributes(elem);
|
|
10144
|
-
} else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
|
|
10102
|
+
} else if (hasValue && (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group'))) {
|
|
10145
10103
|
this.validateElementAttributes(elem);
|
|
10146
10104
|
}
|
|
10147
10105
|
}
|
|
@@ -10623,7 +10581,7 @@ class BaseInput extends AuroElement$2$1 {
|
|
|
10623
10581
|
},
|
|
10624
10582
|
|
|
10625
10583
|
/**
|
|
10626
|
-
* Define custom placeholder text
|
|
10584
|
+
* Define custom placeholder text.
|
|
10627
10585
|
*/
|
|
10628
10586
|
placeholder: {
|
|
10629
10587
|
type: String,
|
|
@@ -12883,7 +12841,7 @@ var buttonVersion$1 = '11.0.0';
|
|
|
12883
12841
|
|
|
12884
12842
|
var colorCss$5 = i$5`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
|
|
12885
12843
|
|
|
12886
|
-
var styleCss$6 = i$5
|
|
12844
|
+
var styleCss$6 = i$5`:host{position:relative;display:block}.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
|
|
12887
12845
|
|
|
12888
12846
|
var tokensCss$5 = i$5`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
12889
12847
|
|
|
@@ -13160,7 +13118,7 @@ class AuroInput extends BaseInput {
|
|
|
13160
13118
|
*/
|
|
13161
13119
|
get commonInputClasses() {
|
|
13162
13120
|
return {
|
|
13163
|
-
'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
|
|
13121
|
+
'util_displayHiddenVisually': (this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0) || ((!this.value || this.value.length === 0) && !this.hasFocus && (!this.placeholder || this.placeholder === '')),
|
|
13164
13122
|
};
|
|
13165
13123
|
}
|
|
13166
13124
|
|
|
@@ -15499,7 +15457,7 @@ class AuroBibtemplate extends i$2 {
|
|
|
15499
15457
|
<div id="bibTemplate" part="bibtemplate">
|
|
15500
15458
|
${this.isFullscreen ? u$2`
|
|
15501
15459
|
<div id="headerContainer">
|
|
15502
|
-
<${this.buttonTag} id="closeButton" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">
|
|
15460
|
+
<${this.buttonTag} id="closeButton" aria-label="Close" variant="ghost" shape="circle" size="sm" @click="${this.onCloseButtonClick}">
|
|
15503
15461
|
<${this.iconTag} category="interface" name="x-lg"></${this.iconTag}>
|
|
15504
15462
|
</${this.buttonTag}>
|
|
15505
15463
|
<${this.headerTag} display="${this.large ? 'display' : '600'}" level="3" size="none" id="header" no-margin-block>
|
|
@@ -15628,7 +15586,7 @@ let AuroElement$1 = class AuroElement extends i$2 {
|
|
|
15628
15586
|
|
|
15629
15587
|
var colorCss$3 = i$5`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
|
|
15630
15588
|
|
|
15631
|
-
var styleCss$3 = i$5
|
|
15589
|
+
var styleCss$3 = i$5`:host{position:relative;display:block}.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
|
|
15632
15590
|
|
|
15633
15591
|
var tokensCss$2 = i$5`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
15634
15592
|
|
|
@@ -16990,7 +16948,6 @@ function dispatchMenuEvent(element, eventName, detail = null) {
|
|
|
16990
16948
|
* @attr {boolean} nocheckmark - When true, selected option will not show the checkmark.
|
|
16991
16949
|
* @attr {boolean} loading - When true, displays a loading state using the loadingIcon and loadingText slots if provided.
|
|
16992
16950
|
* @attr {boolean} multiselect - When true, the selected option can be multiple options.
|
|
16993
|
-
* @attr {String|Array<string>} value - Value selected for the menu, type `string` by default. In multi-select mode, `value` is an array of strings.
|
|
16994
16951
|
* @prop {boolean} hasLoadingPlaceholder - Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state.
|
|
16995
16952
|
* @event {CustomEvent<Element>} auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
|
|
16996
16953
|
* @event {CustomEvent<any>} auroMenu-customEventFired - Notifies that a custom event has been fired.
|
|
@@ -17103,9 +17060,14 @@ class AuroMenu extends AuroElement$1 {
|
|
|
17103
17060
|
reflect: true,
|
|
17104
17061
|
attribute: 'multiselect'
|
|
17105
17062
|
},
|
|
17063
|
+
|
|
17064
|
+
/**
|
|
17065
|
+
* Value selected for the component.
|
|
17066
|
+
*/
|
|
17106
17067
|
value: {
|
|
17107
|
-
|
|
17108
|
-
|
|
17068
|
+
type: String,
|
|
17069
|
+
reflect: true,
|
|
17070
|
+
attribute: 'value'
|
|
17109
17071
|
},
|
|
17110
17072
|
|
|
17111
17073
|
/**
|
|
@@ -17140,6 +17102,25 @@ class AuroMenu extends AuroElement$1 {
|
|
|
17140
17102
|
AuroLibraryRuntimeUtils$7.prototype.registerComponent(name, AuroMenu);
|
|
17141
17103
|
}
|
|
17142
17104
|
|
|
17105
|
+
/**
|
|
17106
|
+
* Formatted value based on `multiSelect` state.
|
|
17107
|
+
* Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
|
|
17108
|
+
* @private
|
|
17109
|
+
* @returns {String|Array<String>}
|
|
17110
|
+
*/
|
|
17111
|
+
get formattedValue() {
|
|
17112
|
+
if (this.multiSelect) {
|
|
17113
|
+
if (!this.value) {
|
|
17114
|
+
return undefined;
|
|
17115
|
+
}
|
|
17116
|
+
if (this.value.startsWith("[")) {
|
|
17117
|
+
return JSON.parse(this.value);
|
|
17118
|
+
}
|
|
17119
|
+
return [this.value];
|
|
17120
|
+
}
|
|
17121
|
+
return this.value;
|
|
17122
|
+
}
|
|
17123
|
+
|
|
17143
17124
|
// Lifecycle Methods
|
|
17144
17125
|
|
|
17145
17126
|
connectedCallback() {
|
|
@@ -17182,7 +17163,7 @@ class AuroMenu extends AuroElement$1 {
|
|
|
17182
17163
|
updated(changedProperties) {
|
|
17183
17164
|
super.updated(changedProperties);
|
|
17184
17165
|
|
|
17185
|
-
if (changedProperties.has('multiSelect')) {
|
|
17166
|
+
if (changedProperties.has('multiSelect') && !changedProperties.has("value")) {
|
|
17186
17167
|
// Reset selection if multiSelect mode changes
|
|
17187
17168
|
this.clearSelection();
|
|
17188
17169
|
}
|
|
@@ -17196,7 +17177,7 @@ class AuroMenu extends AuroElement$1 {
|
|
|
17196
17177
|
} else {
|
|
17197
17178
|
if (this.multiSelect) {
|
|
17198
17179
|
// In multiselect mode, this.value should be an array of strings
|
|
17199
|
-
const valueArray =
|
|
17180
|
+
const valueArray = this.formattedValue;
|
|
17200
17181
|
const matchingOptions = this.items.filter((item) => valueArray.includes(item.value));
|
|
17201
17182
|
|
|
17202
17183
|
this.optionSelected = matchingOptions.length > 0 ? matchingOptions : undefined;
|
|
@@ -17363,14 +17344,14 @@ class AuroMenu extends AuroElement$1 {
|
|
|
17363
17344
|
*/
|
|
17364
17345
|
handleSelectState(option) {
|
|
17365
17346
|
if (this.multiSelect) {
|
|
17366
|
-
const currentValue = this.
|
|
17347
|
+
const currentValue = this.formattedValue || [];
|
|
17367
17348
|
const currentSelected = this.optionSelected || [];
|
|
17368
17349
|
|
|
17369
17350
|
if (!currentValue.includes(option.value)) {
|
|
17370
|
-
this.value = [
|
|
17351
|
+
this.value = JSON.stringify([
|
|
17371
17352
|
...currentValue,
|
|
17372
17353
|
option.value
|
|
17373
|
-
];
|
|
17354
|
+
]);
|
|
17374
17355
|
}
|
|
17375
17356
|
if (!currentSelected.includes(option)) {
|
|
17376
17357
|
this.optionSelected = [
|
|
@@ -17393,13 +17374,15 @@ class AuroMenu extends AuroElement$1 {
|
|
|
17393
17374
|
* @param {HTMLElement} option - The menuoption to be deselected.
|
|
17394
17375
|
*/
|
|
17395
17376
|
handleDeselectState(option) {
|
|
17396
|
-
if (this.multiSelect
|
|
17377
|
+
if (this.multiSelect) {
|
|
17397
17378
|
// Remove this option from array
|
|
17398
|
-
|
|
17379
|
+
const newFormattedValue = (this.formattedValue || []).filter((val) => val !== option.value);
|
|
17399
17380
|
|
|
17400
17381
|
// If array is empty after removal, set back to undefined
|
|
17401
|
-
if (
|
|
17382
|
+
if (newFormattedValue && newFormattedValue.length === 0) {
|
|
17402
17383
|
this.value = undefined;
|
|
17384
|
+
} else {
|
|
17385
|
+
this.value = JSON.stringify(newFormattedValue);
|
|
17403
17386
|
}
|
|
17404
17387
|
|
|
17405
17388
|
this.optionSelected = this.optionSelected.filter((val) => val !== option);
|
|
@@ -17750,7 +17733,7 @@ class AuroMenu extends AuroElement$1 {
|
|
|
17750
17733
|
}
|
|
17751
17734
|
}
|
|
17752
17735
|
|
|
17753
|
-
var styleCss$1 = i$5`:host{cursor:pointer;user-select:none}:host .wrapper{display:flex;align-items:center;padding-right:var(--ds-size-200, 1rem);padding-left:calc(var(--ds-size-150, 0.75rem) +
|
|
17736
|
+
var styleCss$1 = i$5`:host{cursor:pointer;user-select:none}:host .wrapper{display:flex;align-items:center;padding-right:var(--ds-size-200, 1rem);padding-left:calc(var(--ds-size-150, 0.75rem) + var(--ds-size-150, 0.75rem) + var(--ds-size-100, 0.5rem));padding-top:var(--ds-size-50, 0.25rem);padding-bottom:var(--ds-size-50, 0.25rem);-webkit-tap-highlight-color:transparent}:host .wrapper[class*=shape-box],:host .wrapper[class*=shape-snowflake]{border-radius:unset}:host .wrapper[class*=shape-pill]{border-radius:30px}:host .wrapper[class*=-lg]{font-size:var(--ds-text-body-size-lg, 1.125rem);line-height:var(--ds-text-body-height-lg, 1.625rem);padding-top:var(--ds-size-75, 0.375rem);padding-bottom:var(--ds-size-75, 0.375rem);padding-right:var(--ds-size-150, 0.75rem)}:host .wrapper[class*=-lg]:not(:last-child){margin-bottom:var(--ds-size-50, 0.25rem)}:host .wrapper[class*=-xl]{font-size:var(--ds-text-body-size-lg, 1.125rem);line-height:var(--ds-text-body-height-lg, 1.625rem);padding-top:var(--ds-size-100, 0.5rem);padding-bottom:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-200, 1rem)}:host .wrapper[class*=-xl]:not(:last-child){margin-bottom:var(--ds-size-100, 0.5rem)}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}:host ::slotted(strong){font-weight:700}:host([loadingplaceholder]) .wrapper{padding-left:calc(var(--ds-size-150, 0.75rem) + var(--ds-size-150, 0.75rem) + var(--ds-size-100, 0.5rem))}:host([selected]) .wrapper{padding-left:0}:host([nocheckmark]) .wrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([nocheckmark]) .wrapper[class*=-lg]{padding-left:var(--ds-size-150, 0.75rem)}:host([nocheckmark]) .wrapper[class*=-xl]{padding-left:var(--ds-size-200, 1rem)}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
|
|
17754
17737
|
|
|
17755
17738
|
var colorCss$1 = i$5`:host .wrapper{border:1px solid var(--ds-auro-menuoption-container-border-color);background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color)}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-neutral-subtle, #f7f7f7)}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-advanced-color-state-selected, #01426a);--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([selected]):host(:hover),:host([selected]):host(.active){--ds-auro-menuoption-container-color: var(--ds-advanced-color-state-selected-hover, #00274a)}`;
|
|
17756
17739
|
|