@danske/sapphire-angular 2.2.0 → 2.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/checkbox/src/checkbox.component.mjs +20 -4
- package/esm2020/lib/checkbox/src/checkbox.module.mjs +4 -3
- package/esm2020/lib/field/src/field-control.mjs +1 -1
- package/esm2020/lib/field/src/field.component.mjs +24 -9
- package/esm2020/lib/listbox/src/listbox.component.mjs +2 -2
- package/esm2020/lib/menu/src/menu-trigger.directive.mjs +10 -4
- package/esm2020/lib/menu/src/menu.component.mjs +2 -2
- package/esm2020/lib/modal/src/dialog/dialog-trigger.directive.mjs +3 -8
- package/esm2020/lib/modal/src/modal-trigger.directive.mjs +13 -11
- package/esm2020/lib/modal/src/modal.service.mjs +5 -4
- package/esm2020/lib/modal/src/panel/panel-trigger.directive.mjs +3 -8
- package/esm2020/lib/popover/src/popover-trigger.directive.mjs +11 -11
- package/esm2020/lib/popover/src/popover.component.mjs +2 -2
- package/esm2020/lib/radio/public_api.mjs +3 -1
- package/esm2020/lib/radio/src/radio-group.component.mjs +22 -159
- package/esm2020/lib/radio/src/radio.component.mjs +8 -267
- package/esm2020/lib/radio/src/radio.module.mjs +40 -6
- package/esm2020/lib/radio/src/segmented/segmented-radio-group.component.mjs +130 -0
- package/esm2020/lib/radio/src/segmented/segmented-radio.component.mjs +25 -0
- package/esm2020/lib/radio/src/shared/radio-base.mjs +276 -0
- package/esm2020/lib/radio/src/shared/radio-group-base.mjs +166 -0
- package/esm2020/lib/segmented-tabs/src/segmented-tab.component.mjs +2 -2
- package/esm2020/lib/segmented-tabs/src/segmented-tabs.component.mjs +19 -12
- package/esm2020/lib/select/src/basic-select/basic-select.component.mjs +2 -2
- package/esm2020/lib/select/src/select/select.component.mjs +4 -3
- package/esm2020/lib/table/public_api.mjs +2 -1
- package/esm2020/lib/table/src/cdk-virtual-scroll-viewport-fix.directive.mjs +61 -0
- package/esm2020/lib/table/src/table.module.mjs +7 -2
- package/esm2020/lib/text-field/src/text-field.component.mjs +4 -3
- package/esm2020/lib/theme/public_api.mjs +2 -2
- package/esm2020/lib/theme/src/sapphire-overlay.service.mjs +62 -0
- package/esm2020/lib/theme/src/theme-base.directive.mjs +6 -46
- package/esm2020/lib/theme/src/theme.module.mjs +3 -29
- package/esm2020/lib/theme/src/themes.mjs +4 -4
- package/esm2020/lib/tooltip/src/tooltip.directive.mjs +4 -4
- package/fesm2015/danske-sapphire-angular.mjs +645 -377
- package/fesm2015/danske-sapphire-angular.mjs.map +1 -1
- package/fesm2020/danske-sapphire-angular.mjs +643 -377
- package/fesm2020/danske-sapphire-angular.mjs.map +1 -1
- package/lib/checkbox/src/checkbox.component.d.ts +6 -1
- package/lib/checkbox/src/checkbox.module.d.ts +4 -3
- package/lib/field/src/field-control.d.ts +1 -0
- package/lib/field/src/field.component.d.ts +11 -3
- package/lib/modal/src/dialog/dialog-trigger.directive.d.ts +0 -3
- package/lib/modal/src/modal-trigger.directive.d.ts +3 -2
- package/lib/modal/src/modal.service.d.ts +10 -2
- package/lib/modal/src/panel/panel-trigger.directive.d.ts +0 -3
- package/lib/popover/src/popover-trigger.directive.d.ts +4 -3
- package/lib/radio/public_api.d.ts +2 -0
- package/lib/radio/src/radio-group.component.d.ts +5 -60
- package/lib/radio/src/radio.component.d.ts +4 -96
- package/lib/radio/src/radio.module.d.ts +8 -5
- package/lib/radio/src/segmented/segmented-radio-group.component.d.ts +40 -0
- package/lib/radio/src/segmented/segmented-radio.component.d.ts +8 -0
- package/lib/radio/src/shared/radio-base.d.ts +103 -0
- package/lib/radio/src/shared/radio-group-base.d.ts +63 -0
- package/lib/segmented-tabs/src/segmented-tabs.component.d.ts +3 -2
- package/lib/select/src/select/select.component.d.ts +1 -0
- package/lib/table/public_api.d.ts +1 -0
- package/lib/table/src/cdk-virtual-scroll-viewport-fix.directive.d.ts +25 -0
- package/lib/table/src/table-cell.directive.d.ts +1 -1
- package/lib/table/src/table.module.d.ts +3 -2
- package/lib/text-field/src/text-field.component.d.ts +1 -0
- package/lib/theme/public_api.d.ts +1 -1
- package/lib/theme/src/sapphire-overlay.service.d.ts +34 -0
- package/lib/tooltip/src/tooltip.directive.d.ts +2 -2
- package/package.json +3 -3
- package/esm2020/lib/theme/src/sapphire-overlay-container.service.mjs +0 -37
- package/lib/theme/src/sapphire-overlay-container.service.d.ts +0 -14
|
@@ -1,32 +1,30 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, inject,
|
|
3
|
-
import
|
|
4
|
-
import { OverlayContainer, Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
|
|
2
|
+
import { Injectable, inject, Directive, Optional, SkipSelf, Component, Input, NgModule, ViewEncapsulation, InjectionToken, Inject, isDevMode, forwardRef, ChangeDetectionStrategy, HostBinding, ContentChild, EventEmitter, Output, HostListener, LOCALE_ID, Pipe, ElementRef, ViewChild, Attribute, QueryList, ContentChildren, Injector, ViewChildren, ChangeDetectorRef, TemplateRef } from '@angular/core';
|
|
3
|
+
import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
|
|
5
4
|
import * as i2 from '@angular/common';
|
|
6
|
-
import {
|
|
7
|
-
import * as i1 from '@angular/cdk/platform';
|
|
8
|
-
import { Platform } from '@angular/cdk/platform';
|
|
5
|
+
import { CommonModule, NgIf, DOCUMENT } from '@angular/common';
|
|
9
6
|
import { __decorate } from 'tslib';
|
|
10
7
|
import * as icons from '@danske/sapphire-icons/js';
|
|
11
8
|
import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
|
|
12
9
|
import * as i3$1 from '@angular/forms';
|
|
13
10
|
import { NG_VALUE_ACCESSOR, NG_VALIDATORS, CheckboxRequiredValidator, FormsModule, RequiredValidator } from '@angular/forms';
|
|
14
11
|
import * as i2$1 from '@internationalized/message';
|
|
15
|
-
import {
|
|
12
|
+
import { MessageDictionary, MessageFormatter } from '@internationalized/message';
|
|
16
13
|
import * as i2$2 from '@angular/cdk/a11y';
|
|
17
14
|
import { A11yModule, ListKeyManager } from '@angular/cdk/a11y';
|
|
18
15
|
import * as i3 from '@angular/cdk/collections';
|
|
19
|
-
import * as i1
|
|
16
|
+
import * as i1 from '@angular/cdk/portal';
|
|
20
17
|
import { TemplatePortal, DomPortal, PortalModule, CdkPortal, ComponentPortal } from '@angular/cdk/portal';
|
|
21
|
-
import * as i1$
|
|
18
|
+
import * as i1$1 from '@angular/cdk/menu';
|
|
22
19
|
import { CdkMenu, CdkMenuItem, CdkMenuTrigger, CdkMenuGroup, CdkMenuModule } from '@angular/cdk/menu';
|
|
23
20
|
import { hasModifierKey } from '@angular/cdk/keycodes';
|
|
24
21
|
import { Subject, merge, combineLatest, empty, fromEvent } from 'rxjs';
|
|
25
22
|
import { takeUntil, startWith, map } from 'rxjs/operators';
|
|
26
|
-
import * as i1$
|
|
23
|
+
import * as i1$2 from '@angular/cdk/listbox';
|
|
27
24
|
import { CdkListbox, CdkOption, CdkListboxModule } from '@angular/cdk/listbox';
|
|
28
25
|
export { tokens } from '@danske/sapphire-css/themes';
|
|
29
|
-
import * as i1$
|
|
26
|
+
import * as i1$3 from '@angular/cdk/scrolling';
|
|
27
|
+
import * as i1$4 from '@angular/cdk/dialog';
|
|
30
28
|
import { CdkDialogContainer, DialogModule } from '@angular/cdk/dialog';
|
|
31
29
|
|
|
32
30
|
/**
|
|
@@ -48,36 +46,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
48
46
|
args: [{ providedIn: 'root' }]
|
|
49
47
|
}] });
|
|
50
48
|
|
|
49
|
+
// eslint-disable-next-line sapphire-angular/cdk-overlay
|
|
51
50
|
/**
|
|
52
|
-
*
|
|
51
|
+
* NOTE: Providing a theme-aware OverlayContainer was a solution for overlay styles we used to have.
|
|
52
|
+
* It proved error-prone since it can lead to multiple overlay containers, which can cause
|
|
53
|
+
* z-index issues in various scenarios (UC-4160, UC-2897, UC-3843).
|
|
54
|
+
* The current solution applies.
|
|
53
55
|
*/
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
56
|
+
/**
|
|
57
|
+
* Sapphire theme aware overlay service.
|
|
58
|
+
* It's a slim wrapper around CDK Overlay service that adds theme styles to the overlay container.
|
|
59
|
+
*/
|
|
60
|
+
class SapphireOverlay extends Overlay {
|
|
61
|
+
constructor() {
|
|
62
|
+
super(...arguments);
|
|
57
63
|
this.topLevelThemeRef = inject(TopLevelThemeRef);
|
|
58
64
|
this.theme = inject(ThemeBaseDirective, {
|
|
59
65
|
optional: true,
|
|
60
66
|
});
|
|
61
67
|
}
|
|
62
|
-
|
|
63
|
-
|
|
68
|
+
/**
|
|
69
|
+
* Same as Angular CDK's `overlay.create`,
|
|
70
|
+
* but applies the current theme style on the overlay container.
|
|
71
|
+
* @param overlayConfig The overlay configuration to pass to overlay.create()
|
|
72
|
+
* @param theme The theme to apply. If not provided, the current theme will be used.
|
|
73
|
+
*/
|
|
74
|
+
create(overlayConfig, theme) {
|
|
75
|
+
const overlayRef = super.create(overlayConfig);
|
|
76
|
+
this.applyTheme(overlayRef, theme);
|
|
77
|
+
return overlayRef;
|
|
78
|
+
}
|
|
79
|
+
/**
|
|
80
|
+
* Applies the current theme style on the overlay container.
|
|
81
|
+
* Useful only when the overlay is not created using `SapphireOverlay.create` method.
|
|
82
|
+
* E.g. when using some higher-level service like Dialog from angular CDK.
|
|
83
|
+
* @param overlayRef The overlay reference to apply the theme on.
|
|
84
|
+
* @param theme The theme to apply. If not provided, the current theme will be used.
|
|
85
|
+
*/
|
|
86
|
+
applyTheme(overlayRef, theme) {
|
|
87
|
+
theme = theme || this.theme || this.topLevelThemeRef.getTheme();
|
|
64
88
|
if (!theme) {
|
|
65
89
|
throw new Error('Could not find the current theme needed for overlay container');
|
|
66
90
|
}
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
91
|
+
theme?.applyOnDomNode(overlayRef.overlayElement);
|
|
92
|
+
if (overlayRef.backdropElement) {
|
|
93
|
+
theme?.applyOnDomNode(overlayRef.backdropElement);
|
|
94
|
+
}
|
|
70
95
|
}
|
|
71
96
|
}
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type:
|
|
75
|
-
type: Injectable
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
97
|
+
SapphireOverlay.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SapphireOverlay, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
|
|
98
|
+
SapphireOverlay.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SapphireOverlay, providedIn: 'root' });
|
|
99
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SapphireOverlay, decorators: [{
|
|
100
|
+
type: Injectable,
|
|
101
|
+
args: [{
|
|
102
|
+
providedIn: 'root',
|
|
103
|
+
}]
|
|
104
|
+
}] });
|
|
80
105
|
|
|
106
|
+
// import { SapphireOverlayContainer } from './sapphire-overlay-container.service';
|
|
81
107
|
class ThemeBaseDirective {
|
|
82
108
|
constructor(elementRef, renderer, themeRef, parentTheme) {
|
|
83
109
|
this.elementRef = elementRef;
|
|
@@ -105,52 +131,14 @@ class ThemeBaseDirective {
|
|
|
105
131
|
}
|
|
106
132
|
}
|
|
107
133
|
ThemeBaseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ThemeBaseDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: TopLevelThemeRef }, { token: ThemeBaseDirective, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
108
|
-
ThemeBaseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: ThemeBaseDirective, isStandalone: true, selector: "[_sp-theme-base]", providers: [
|
|
109
|
-
{
|
|
110
|
-
provide: OverlayContainer,
|
|
111
|
-
useFactory: (existingOverlayContainer, parentTheme, _this, document, platform) => {
|
|
112
|
-
if (!parentTheme || parentTheme.equals(_this)) {
|
|
113
|
-
return existingOverlayContainer;
|
|
114
|
-
}
|
|
115
|
-
return new SapphireOverlayContainer(document, platform);
|
|
116
|
-
},
|
|
117
|
-
deps: [
|
|
118
|
-
[new SkipSelf(), OverlayContainer],
|
|
119
|
-
[new SkipSelf(), new Optional(), forwardRef(() => ThemeBaseDirective)],
|
|
120
|
-
forwardRef(() => ThemeBaseDirective),
|
|
121
|
-
DOCUMENT,
|
|
122
|
-
Platform,
|
|
123
|
-
],
|
|
124
|
-
},
|
|
125
|
-
// It's important to provide a new instance of Overlay that uses the provided OverlayContainer
|
|
126
|
-
Overlay,
|
|
127
|
-
], ngImport: i0 });
|
|
134
|
+
ThemeBaseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: ThemeBaseDirective, isStandalone: true, selector: "[_sp-theme-base]", providers: [SapphireOverlay], ngImport: i0 });
|
|
128
135
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ThemeBaseDirective, decorators: [{
|
|
129
136
|
type: Directive,
|
|
130
137
|
args: [{
|
|
131
138
|
selector: '[_sp-theme-base]',
|
|
132
139
|
// directive.
|
|
133
140
|
standalone: true,
|
|
134
|
-
providers: [
|
|
135
|
-
{
|
|
136
|
-
provide: OverlayContainer,
|
|
137
|
-
useFactory: (existingOverlayContainer, parentTheme, _this, document, platform) => {
|
|
138
|
-
if (!parentTheme || parentTheme.equals(_this)) {
|
|
139
|
-
return existingOverlayContainer;
|
|
140
|
-
}
|
|
141
|
-
return new SapphireOverlayContainer(document, platform);
|
|
142
|
-
},
|
|
143
|
-
deps: [
|
|
144
|
-
[new SkipSelf(), OverlayContainer],
|
|
145
|
-
[new SkipSelf(), new Optional(), forwardRef(() => ThemeBaseDirective)],
|
|
146
|
-
forwardRef(() => ThemeBaseDirective),
|
|
147
|
-
DOCUMENT,
|
|
148
|
-
Platform,
|
|
149
|
-
],
|
|
150
|
-
},
|
|
151
|
-
// It's important to provide a new instance of Overlay that uses the provided OverlayContainer
|
|
152
|
-
Overlay,
|
|
153
|
-
],
|
|
141
|
+
providers: [SapphireOverlay],
|
|
154
142
|
}]
|
|
155
143
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: TopLevelThemeRef }, { type: ThemeBaseDirective, decorators: [{
|
|
156
144
|
type: Optional
|
|
@@ -916,6 +904,51 @@ const AutoId = ({ prefix = 'generated' } = {}) => {
|
|
|
916
904
|
};
|
|
917
905
|
};
|
|
918
906
|
|
|
907
|
+
var optional$6 = "Valgfrit";
|
|
908
|
+
var da$2 = {
|
|
909
|
+
optional: optional$6
|
|
910
|
+
};
|
|
911
|
+
|
|
912
|
+
var optional$5 = "Optional";
|
|
913
|
+
var en$2 = {
|
|
914
|
+
optional: optional$5
|
|
915
|
+
};
|
|
916
|
+
|
|
917
|
+
var optional$4 = "Optional";
|
|
918
|
+
var de$2 = {
|
|
919
|
+
optional: optional$4
|
|
920
|
+
};
|
|
921
|
+
|
|
922
|
+
var optional$3 = "Valinnainen";
|
|
923
|
+
var fi$2 = {
|
|
924
|
+
optional: optional$3
|
|
925
|
+
};
|
|
926
|
+
|
|
927
|
+
var optional$2 = "Valgfritt";
|
|
928
|
+
var no$2 = {
|
|
929
|
+
optional: optional$2
|
|
930
|
+
};
|
|
931
|
+
|
|
932
|
+
var optional$1 = "Opcjonalny";
|
|
933
|
+
var pl$2 = {
|
|
934
|
+
optional: optional$1
|
|
935
|
+
};
|
|
936
|
+
|
|
937
|
+
var optional = "Valfritt";
|
|
938
|
+
var se$2 = {
|
|
939
|
+
optional: optional
|
|
940
|
+
};
|
|
941
|
+
|
|
942
|
+
const translations$2 = new MessageDictionary({
|
|
943
|
+
'da-DK': da$2,
|
|
944
|
+
'en-US': en$2,
|
|
945
|
+
'de-DE': de$2,
|
|
946
|
+
'fi-FI': fi$2,
|
|
947
|
+
'nb-NO': no$2,
|
|
948
|
+
'pl-PL': pl$2,
|
|
949
|
+
'sv-SE': se$2,
|
|
950
|
+
}, 'en-US');
|
|
951
|
+
|
|
919
952
|
/**
|
|
920
953
|
* Injection token which is provided by components that are meant to be rendered
|
|
921
954
|
* within sp-field.
|
|
@@ -1041,51 +1074,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
1041
1074
|
}]
|
|
1042
1075
|
}], ctorParameters: function () { return [{ type: TranslateService }, { type: i2$1.MessageDictionary }]; } });
|
|
1043
1076
|
|
|
1044
|
-
var optional$6 = "Valgfrit";
|
|
1045
|
-
var da$2 = {
|
|
1046
|
-
optional: optional$6
|
|
1047
|
-
};
|
|
1048
|
-
|
|
1049
|
-
var optional$5 = "Optional";
|
|
1050
|
-
var en$2 = {
|
|
1051
|
-
optional: optional$5
|
|
1052
|
-
};
|
|
1053
|
-
|
|
1054
|
-
var optional$4 = "Optional";
|
|
1055
|
-
var de$2 = {
|
|
1056
|
-
optional: optional$4
|
|
1057
|
-
};
|
|
1058
|
-
|
|
1059
|
-
var optional$3 = "Valinnainen";
|
|
1060
|
-
var fi$2 = {
|
|
1061
|
-
optional: optional$3
|
|
1062
|
-
};
|
|
1063
|
-
|
|
1064
|
-
var optional$2 = "Valgfritt";
|
|
1065
|
-
var no$2 = {
|
|
1066
|
-
optional: optional$2
|
|
1067
|
-
};
|
|
1068
|
-
|
|
1069
|
-
var optional$1 = "Opcjonalny";
|
|
1070
|
-
var pl$2 = {
|
|
1071
|
-
optional: optional$1
|
|
1072
|
-
};
|
|
1073
|
-
|
|
1074
|
-
var optional = "Valfritt";
|
|
1075
|
-
var se$2 = {
|
|
1076
|
-
optional: optional
|
|
1077
|
-
};
|
|
1078
|
-
|
|
1079
|
-
const translations$2 = new MessageDictionary({
|
|
1080
|
-
'da-DK': da$2,
|
|
1081
|
-
'en-US': en$2,
|
|
1082
|
-
'de-DE': de$2,
|
|
1083
|
-
'fi-FI': fi$2,
|
|
1084
|
-
'nb-NO': no$2,
|
|
1085
|
-
'pl-PL': pl$2,
|
|
1086
|
-
'sv-SE': se$2,
|
|
1087
|
-
}, 'en-US');
|
|
1088
|
-
|
|
1089
1077
|
/**
|
|
1090
1078
|
* Label UI, currently used exclusively in sp-field.
|
|
1091
1079
|
* @internal
|
|
@@ -1172,7 +1160,11 @@ const _RadioMixinBase = mixinTabIndex(mixinDisabled(class {
|
|
|
1172
1160
|
this._elementRef = _elementRef;
|
|
1173
1161
|
}
|
|
1174
1162
|
}));
|
|
1175
|
-
|
|
1163
|
+
/**
|
|
1164
|
+
* @Directive decorator is just to be able to have a constructor with DI.
|
|
1165
|
+
* This class is being extended by other components.
|
|
1166
|
+
**/
|
|
1167
|
+
class RadioBase extends _RadioMixinBase {
|
|
1176
1168
|
_getAriaChecked() {
|
|
1177
1169
|
return this.checked ? 'true' : 'false';
|
|
1178
1170
|
}
|
|
@@ -1245,6 +1237,7 @@ class RadioComponent extends _RadioMixinBase {
|
|
|
1245
1237
|
constructor(radioGroup, elementRef, tabIndex, _focusMonitor, _radioDispatcher) {
|
|
1246
1238
|
super(elementRef);
|
|
1247
1239
|
this.radioGroup = radioGroup;
|
|
1240
|
+
this.elementRef = elementRef;
|
|
1248
1241
|
this._focusMonitor = _focusMonitor;
|
|
1249
1242
|
this._radioDispatcher = _radioDispatcher;
|
|
1250
1243
|
/**
|
|
@@ -1370,21 +1363,15 @@ class RadioComponent extends _RadioMixinBase {
|
|
|
1370
1363
|
}
|
|
1371
1364
|
}
|
|
1372
1365
|
}
|
|
1373
|
-
|
|
1374
|
-
|
|
1366
|
+
RadioBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: RadioBase, deps: [{ token: RadioGroupBase, optional: true }, { token: i0.ElementRef }, { token: 'tabindex', attribute: true }, { token: i2$2.FocusMonitor }, { token: i3.UniqueSelectionDispatcher }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1367
|
+
RadioBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: RadioBase, inputs: { ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], name: "name", autofocus: "autofocus", id: "id", value: "value", checked: "checked", disabled: "disabled", readonly: "readonly", required: "required" }, outputs: { change: "change" }, host: { properties: { "id": "this.id" } }, viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0 });
|
|
1375
1368
|
__decorate([
|
|
1376
1369
|
AutoId()
|
|
1377
|
-
],
|
|
1378
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type:
|
|
1379
|
-
type:
|
|
1380
|
-
args: [{
|
|
1381
|
-
|
|
1382
|
-
'[attr.tabindex]': 'null',
|
|
1383
|
-
'[attr.aria-label]': 'null',
|
|
1384
|
-
'[attr.aria-labelledby]': 'null',
|
|
1385
|
-
'[attr.aria-describedby]': 'null',
|
|
1386
|
-
}, template: "<label\n [for]=\"inputId\"\n class=\"sapphire-radio\"\n [class.sapphire-radio--no-disabled]=\"radioGroup?.disabled\"\n [class.sapphire-radio--checked]=\"checked\"\n [class.sapphire-radio--md]=\"radioGroup?._field?.size === 'md'\"\n>\n <input\n #input\n class=\"sapphire-radio__input\"\n type=\"radio\"\n [id]=\"inputId\"\n [attr.aria-checked]=\"_getAriaChecked()\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n (change)=\"_onInputInteraction($event)\"\n [attr.autofocus]=\"autofocus ? true : null\"\n />\n <span class=\"sapphire-radio__box\"></span>\n <span class=\"sapphire-radio__label\">\n <ng-content></ng-content>\n </span>\n</label>\n", styles: [".sapphire-radio{display:inline-flex;font-family:var(--sapphire-semantic-font-name-default);max-width:100%;position:relative}.sapphire-radio__input{margin:0;overflow:visible;position:absolute;top:0;left:0;height:100%;width:100%;opacity:.0001;z-index:1;cursor:pointer}.sapphire-radio__label{margin-left:var(--sapphire-semantic-size-spacing-20);font-size:var(--sapphire-semantic-size-font-control-default);line-height:var(--sapphire-semantic-size-height-control-xs);color:var(--sapphire-semantic-color-content-default-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-radio--md .sapphire-radio__label{font-size:var(--sapphire-semantic-size-font-control-md);line-height:var(--sapphire-semantic-size-height-control-2xs)}.sapphire-radio__box{box-sizing:border-box;background-color:var(--sapphire-semantic-color-background-control-default);width:var(--sapphire-semantic-size-height-box-lg);height:var(--sapphire-semantic-size-height-box-lg);flex-shrink:0;border-radius:50%;border:var(--sapphire-semantic-size-border-md) solid var(--sapphire-semantic-color-border-control-default);position:relative;margin-top:var(--sapphire-semantic-size-spacing-5);transition-property:background-color,border-color,border-width;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:ease-in-out}.sapphire-radio--md .sapphire-radio__box{width:var(--sapphire-semantic-size-height-box-md);height:var(--sapphire-semantic-size-height-box-md)}.sapphire-radio--checked .sapphire-radio__box{border-color:var(--sapphire-semantic-color-background-action-primary-default);border-width:calc((var(--sapphire-semantic-size-height-box-lg) - var(--sapphire-global-size-generic-20)) / 2)}.sapphire-radio--md.sapphire-radio--checked .sapphire-radio__box{border-width:calc((var(--sapphire-semantic-size-height-box-md) - var(--sapphire-global-size-generic-15)) / 2)}.sapphire-radio--checked .sapphire-radio__box:after{display:block}.sapphire-radio:not(:active):not(.is-active):not(.sapphire-radio--checked).is-hover .sapphire-radio__box,.sapphire-radio:not(:active):not(.is-active):not(.sapphire-radio--checked):not(.js-hover):hover .sapphire-radio__input:not(:disabled)~.sapphire-radio__box{border-color:var(--sapphire-semantic-color-border-control-hover)}.sapphire-radio--checked:not(:active):not(.is-active).is-hover .sapphire-radio__box,.sapphire-radio--checked:not(:active):not(.is-active):not(.js-hover):hover .sapphire-radio__input:not(:disabled)~.sapphire-radio__box{border-color:var(--sapphire-semantic-color-background-action-primary-hover)}.sapphire-radio.is-focus .sapphire-radio__input~.sapphire-radio__box,.sapphire-radio:not(.js-focus) .sapphire-radio__input:focus-visible~.sapphire-radio__box{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);outline-offset:var(--sapphire-semantic-size-focus-ring)}.sapphire-radio__input:disabled{cursor:not-allowed}.sapphire-radio:not(.sapphire-radio--no-disabled) .sapphire-radio__input:disabled~.sapphire-radio__box,.sapphire-radio:not(.sapphire-radio--no-disabled) .sapphire-radio__input:disabled~.sapphire-radio__label{opacity:var(--sapphire-semantic-opacity-disabled)}\n"] }]
|
|
1387
|
-
}], ctorParameters: function () { return [{ type: RadioGroupComponent, decorators: [{
|
|
1370
|
+
], RadioBase.prototype, "id", void 0);
|
|
1371
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: RadioBase, decorators: [{
|
|
1372
|
+
type: Directive,
|
|
1373
|
+
args: [{}]
|
|
1374
|
+
}], ctorParameters: function () { return [{ type: RadioGroupBase, decorators: [{
|
|
1388
1375
|
type: Optional
|
|
1389
1376
|
}] }, { type: i0.ElementRef }, { type: undefined, decorators: [{
|
|
1390
1377
|
type: Attribute,
|
|
@@ -1423,7 +1410,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
1423
1410
|
type: Output
|
|
1424
1411
|
}] } });
|
|
1425
1412
|
|
|
1426
|
-
class
|
|
1413
|
+
class RadioComponent extends RadioBase {
|
|
1414
|
+
}
|
|
1415
|
+
RadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: RadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1416
|
+
RadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: RadioComponent, selector: "sp-radio", inputs: { tabIndex: "tabIndex" }, host: { properties: { "attr.id": "id", "attr.tabindex": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null" } }, usesInheritance: true, hostDirectives: [{ directive: ThemeCheckDirective }], ngImport: i0, template: "<label\n [for]=\"inputId\"\n class=\"sapphire-radio\"\n [class.sapphire-radio--no-disabled]=\"radioGroup?.disabled\"\n [class.sapphire-radio--checked]=\"checked\"\n [class.sapphire-radio--md]=\"radioGroup?._field?.size === 'md'\"\n>\n <input\n #input\n class=\"sapphire-radio__input\"\n type=\"radio\"\n [id]=\"inputId\"\n [attr.aria-checked]=\"_getAriaChecked()\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n (change)=\"_onInputInteraction($event)\"\n [attr.autofocus]=\"autofocus ? true : null\"\n />\n <span class=\"sapphire-radio__box\"></span>\n <span class=\"sapphire-radio__label\">\n <ng-content></ng-content>\n </span>\n</label>\n", styles: [".sapphire-radio{display:inline-flex;font-family:var(--sapphire-semantic-font-name-default);max-width:100%;position:relative}.sapphire-radio__input{margin:0;overflow:visible;position:absolute;top:0;left:0;height:100%;width:100%;opacity:.0001;z-index:1;cursor:pointer}.sapphire-radio__label{margin-left:var(--sapphire-semantic-size-spacing-20);font-size:var(--sapphire-semantic-size-font-control-default);line-height:var(--sapphire-semantic-size-height-control-xs);color:var(--sapphire-semantic-color-content-default-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-radio--md .sapphire-radio__label{font-size:var(--sapphire-semantic-size-font-control-md);line-height:var(--sapphire-semantic-size-height-control-2xs)}.sapphire-radio__box{box-sizing:border-box;background-color:var(--sapphire-semantic-color-background-control-default);width:var(--sapphire-semantic-size-height-box-lg);height:var(--sapphire-semantic-size-height-box-lg);flex-shrink:0;border-radius:50%;border:var(--sapphire-semantic-size-border-md) solid var(--sapphire-semantic-color-border-control-default);position:relative;margin-top:var(--sapphire-semantic-size-spacing-5);transition-property:background-color,border-color,border-width;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:ease-in-out}.sapphire-radio--md .sapphire-radio__box{width:var(--sapphire-semantic-size-height-box-md);height:var(--sapphire-semantic-size-height-box-md)}.sapphire-radio--checked .sapphire-radio__box{border-color:var(--sapphire-semantic-color-background-action-primary-default);border-width:calc((var(--sapphire-semantic-size-height-box-lg) - var(--sapphire-global-size-generic-20)) / 2)}.sapphire-radio--md.sapphire-radio--checked .sapphire-radio__box{border-width:calc((var(--sapphire-semantic-size-height-box-md) - var(--sapphire-global-size-generic-15)) / 2)}.sapphire-radio--checked .sapphire-radio__box:after{display:block}.sapphire-radio:not(:active):not(.is-active):not(.sapphire-radio--checked).is-hover .sapphire-radio__box,.sapphire-radio:not(:active):not(.is-active):not(.sapphire-radio--checked):not(.js-hover):hover .sapphire-radio__input:not(:disabled)~.sapphire-radio__box{border-color:var(--sapphire-semantic-color-border-control-hover)}.sapphire-radio--checked:not(:active):not(.is-active).is-hover .sapphire-radio__box,.sapphire-radio--checked:not(:active):not(.is-active):not(.js-hover):hover .sapphire-radio__input:not(:disabled)~.sapphire-radio__box{border-color:var(--sapphire-semantic-color-background-action-primary-hover)}.sapphire-radio.is-focus .sapphire-radio__input~.sapphire-radio__box,.sapphire-radio:not(.js-focus) .sapphire-radio__input:focus-visible~.sapphire-radio__box{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);outline-offset:var(--sapphire-semantic-size-focus-ring)}.sapphire-radio__input:disabled{cursor:not-allowed}.sapphire-radio:not(.sapphire-radio--no-disabled) .sapphire-radio__input:disabled~.sapphire-radio__box,.sapphire-radio:not(.sapphire-radio--no-disabled) .sapphire-radio__input:disabled~.sapphire-radio__label{opacity:var(--sapphire-semantic-opacity-disabled)}\n"], changeDetection: i0.ChangeDetectionStrategy.Default });
|
|
1417
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: RadioComponent, decorators: [{
|
|
1418
|
+
type: Component,
|
|
1419
|
+
args: [{ selector: 'sp-radio', changeDetection: ChangeDetectionStrategy.Default, hostDirectives: [ThemeCheckDirective], inputs: ['tabIndex'], host: {
|
|
1420
|
+
'[attr.id]': 'id',
|
|
1421
|
+
'[attr.tabindex]': 'null',
|
|
1422
|
+
'[attr.aria-label]': 'null',
|
|
1423
|
+
'[attr.aria-labelledby]': 'null',
|
|
1424
|
+
'[attr.aria-describedby]': 'null',
|
|
1425
|
+
}, template: "<label\n [for]=\"inputId\"\n class=\"sapphire-radio\"\n [class.sapphire-radio--no-disabled]=\"radioGroup?.disabled\"\n [class.sapphire-radio--checked]=\"checked\"\n [class.sapphire-radio--md]=\"radioGroup?._field?.size === 'md'\"\n>\n <input\n #input\n class=\"sapphire-radio__input\"\n type=\"radio\"\n [id]=\"inputId\"\n [attr.aria-checked]=\"_getAriaChecked()\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n (change)=\"_onInputInteraction($event)\"\n [attr.autofocus]=\"autofocus ? true : null\"\n />\n <span class=\"sapphire-radio__box\"></span>\n <span class=\"sapphire-radio__label\">\n <ng-content></ng-content>\n </span>\n</label>\n", styles: [".sapphire-radio{display:inline-flex;font-family:var(--sapphire-semantic-font-name-default);max-width:100%;position:relative}.sapphire-radio__input{margin:0;overflow:visible;position:absolute;top:0;left:0;height:100%;width:100%;opacity:.0001;z-index:1;cursor:pointer}.sapphire-radio__label{margin-left:var(--sapphire-semantic-size-spacing-20);font-size:var(--sapphire-semantic-size-font-control-default);line-height:var(--sapphire-semantic-size-height-control-xs);color:var(--sapphire-semantic-color-content-default-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-radio--md .sapphire-radio__label{font-size:var(--sapphire-semantic-size-font-control-md);line-height:var(--sapphire-semantic-size-height-control-2xs)}.sapphire-radio__box{box-sizing:border-box;background-color:var(--sapphire-semantic-color-background-control-default);width:var(--sapphire-semantic-size-height-box-lg);height:var(--sapphire-semantic-size-height-box-lg);flex-shrink:0;border-radius:50%;border:var(--sapphire-semantic-size-border-md) solid var(--sapphire-semantic-color-border-control-default);position:relative;margin-top:var(--sapphire-semantic-size-spacing-5);transition-property:background-color,border-color,border-width;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:ease-in-out}.sapphire-radio--md .sapphire-radio__box{width:var(--sapphire-semantic-size-height-box-md);height:var(--sapphire-semantic-size-height-box-md)}.sapphire-radio--checked .sapphire-radio__box{border-color:var(--sapphire-semantic-color-background-action-primary-default);border-width:calc((var(--sapphire-semantic-size-height-box-lg) - var(--sapphire-global-size-generic-20)) / 2)}.sapphire-radio--md.sapphire-radio--checked .sapphire-radio__box{border-width:calc((var(--sapphire-semantic-size-height-box-md) - var(--sapphire-global-size-generic-15)) / 2)}.sapphire-radio--checked .sapphire-radio__box:after{display:block}.sapphire-radio:not(:active):not(.is-active):not(.sapphire-radio--checked).is-hover .sapphire-radio__box,.sapphire-radio:not(:active):not(.is-active):not(.sapphire-radio--checked):not(.js-hover):hover .sapphire-radio__input:not(:disabled)~.sapphire-radio__box{border-color:var(--sapphire-semantic-color-border-control-hover)}.sapphire-radio--checked:not(:active):not(.is-active).is-hover .sapphire-radio__box,.sapphire-radio--checked:not(:active):not(.is-active):not(.js-hover):hover .sapphire-radio__input:not(:disabled)~.sapphire-radio__box{border-color:var(--sapphire-semantic-color-background-action-primary-hover)}.sapphire-radio.is-focus .sapphire-radio__input~.sapphire-radio__box,.sapphire-radio:not(.js-focus) .sapphire-radio__input:focus-visible~.sapphire-radio__box{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);outline-offset:var(--sapphire-semantic-size-focus-ring)}.sapphire-radio__input:disabled{cursor:not-allowed}.sapphire-radio:not(.sapphire-radio--no-disabled) .sapphire-radio__input:disabled~.sapphire-radio__box,.sapphire-radio:not(.sapphire-radio--no-disabled) .sapphire-radio__input:disabled~.sapphire-radio__label{opacity:var(--sapphire-semantic-opacity-disabled)}\n"] }]
|
|
1426
|
+
}] });
|
|
1427
|
+
|
|
1428
|
+
class RadioGroupBase {
|
|
1427
1429
|
/** Name of the radio button group. All radio buttons inside this group will use this name. */
|
|
1428
1430
|
get name() {
|
|
1429
1431
|
return this._name;
|
|
@@ -1526,11 +1528,6 @@ class RadioGroupComponent {
|
|
|
1526
1528
|
isDisabled() {
|
|
1527
1529
|
return this.disabled;
|
|
1528
1530
|
}
|
|
1529
|
-
_contentFocusChanged(focusOrigin) {
|
|
1530
|
-
if (!focusOrigin) {
|
|
1531
|
-
this.onTouched();
|
|
1532
|
-
}
|
|
1533
|
-
}
|
|
1534
1531
|
/** Updates the `selected` radio button from the internal _value state. */
|
|
1535
1532
|
updateSelectedRadioFromValue() {
|
|
1536
1533
|
// If the value already matches the selected radio, do nothing.
|
|
@@ -1553,8 +1550,52 @@ class RadioGroupComponent {
|
|
|
1553
1550
|
}
|
|
1554
1551
|
}
|
|
1555
1552
|
}
|
|
1556
|
-
|
|
1557
|
-
|
|
1553
|
+
RadioGroupBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: RadioGroupBase, deps: [{ token: i0.ChangeDetectorRef }, { token: FieldComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1554
|
+
RadioGroupBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: RadioGroupBase, isStandalone: true, inputs: { orientation: "orientation", name: "name", value: "value", selected: "selected", disabled: "disabled", readonly: "readonly", required: "required" }, outputs: { change: "change" }, queries: [{ propertyName: "radios", predicate: i0.forwardRef(function () { return RadioComponent; }), descendants: true }], ngImport: i0 });
|
|
1555
|
+
__decorate([
|
|
1556
|
+
AutoId()
|
|
1557
|
+
], RadioGroupBase.prototype, "uniqueId", void 0);
|
|
1558
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: RadioGroupBase, decorators: [{
|
|
1559
|
+
type: Directive,
|
|
1560
|
+
args: [{
|
|
1561
|
+
standalone: true,
|
|
1562
|
+
}]
|
|
1563
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: FieldComponent, decorators: [{
|
|
1564
|
+
type: Optional
|
|
1565
|
+
}] }]; }, propDecorators: { uniqueId: [], orientation: [{
|
|
1566
|
+
type: Input
|
|
1567
|
+
}], name: [{
|
|
1568
|
+
type: Input
|
|
1569
|
+
}], change: [{
|
|
1570
|
+
type: Output
|
|
1571
|
+
}], value: [{
|
|
1572
|
+
type: Input
|
|
1573
|
+
}], selected: [{
|
|
1574
|
+
type: Input
|
|
1575
|
+
}], disabled: [{
|
|
1576
|
+
type: Input
|
|
1577
|
+
}], readonly: [{
|
|
1578
|
+
type: Input
|
|
1579
|
+
}], required: [{
|
|
1580
|
+
type: Input
|
|
1581
|
+
}], radios: [{
|
|
1582
|
+
type: ContentChildren,
|
|
1583
|
+
args: [forwardRef(() => RadioComponent), { descendants: true }]
|
|
1584
|
+
}] } });
|
|
1585
|
+
|
|
1586
|
+
class RadioGroupComponent extends RadioGroupBase {
|
|
1587
|
+
constructor() {
|
|
1588
|
+
super(...arguments);
|
|
1589
|
+
this.orientation = 'vertical';
|
|
1590
|
+
}
|
|
1591
|
+
_onFocusChange(focusOrigin) {
|
|
1592
|
+
if (!focusOrigin) {
|
|
1593
|
+
this.onTouched();
|
|
1594
|
+
}
|
|
1595
|
+
}
|
|
1596
|
+
}
|
|
1597
|
+
RadioGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: RadioGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1598
|
+
RadioGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: RadioGroupComponent, selector: "sp-radio-group", inputs: { orientation: "orientation" }, host: { attributes: { "role": "radiogroup" } }, providers: [
|
|
1558
1599
|
{
|
|
1559
1600
|
provide: NG_VALUE_ACCESSOR,
|
|
1560
1601
|
useExisting: forwardRef(() => RadioGroupComponent),
|
|
@@ -1564,10 +1605,11 @@ RadioGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
|
|
|
1564
1605
|
provide: FieldControl,
|
|
1565
1606
|
useExisting: forwardRef(() => RadioGroupComponent),
|
|
1566
1607
|
},
|
|
1567
|
-
|
|
1568
|
-
|
|
1569
|
-
|
|
1570
|
-
|
|
1608
|
+
{
|
|
1609
|
+
provide: RadioGroupBase,
|
|
1610
|
+
useExisting: forwardRef(() => RadioGroupComponent),
|
|
1611
|
+
},
|
|
1612
|
+
], usesInheritance: true, hostDirectives: [{ directive: ThemeCheckDirective }], ngImport: i0, template: "<div\n class=\"sapphire-field-group\"\n role=\"radiogroup\"\n [attr.aria-orientation]=\"orientation\"\n [attr.aria-labelledby]=\"_field?.label?.id\"\n [class.sapphire-field-group--vertical]=\"orientation === 'vertical'\"\n [class.sapphire-field-group--horizontal]=\"orientation === 'horizontal'\"\n [class.sapphire-field-group--md]=\"_field?.size === 'md'\"\n (cdkFocusChange)=\"_onFocusChange($event)\"\n cdkMonitorSubtreeFocus\n>\n <ng-content></ng-content>\n</div>\n", styles: [".sapphire-field-group{display:flex;flex-wrap:wrap;column-gap:var(--sapphire-semantic-size-spacing-50);row-gap:var(--sapphire-semantic-size-spacing-30)}.sapphire-field-group--horizontal{flex-direction:row}.sapphire-field-group--vertical{flex-direction:column}.sapphire-field-group--md{row-gap:var(--sapphire-semantic-size-spacing-20)}\n"], dependencies: [{ kind: "directive", type: i2$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
|
|
1571
1613
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: RadioGroupComponent, decorators: [{
|
|
1572
1614
|
type: Component,
|
|
1573
1615
|
args: [{ selector: 'sp-radio-group', changeDetection: ChangeDetectionStrategy.Default, providers: [
|
|
@@ -1580,30 +1622,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
1580
1622
|
provide: FieldControl,
|
|
1581
1623
|
useExisting: forwardRef(() => RadioGroupComponent),
|
|
1582
1624
|
},
|
|
1625
|
+
{
|
|
1626
|
+
provide: RadioGroupBase,
|
|
1627
|
+
useExisting: forwardRef(() => RadioGroupComponent),
|
|
1628
|
+
},
|
|
1583
1629
|
], host: {
|
|
1584
1630
|
role: 'radiogroup',
|
|
1585
|
-
}, hostDirectives: [ThemeCheckDirective], template: "<div\n class=\"sapphire-field-group\"\n role=\"radiogroup\"\n [attr.aria-orientation]=\"orientation\"\n [attr.aria-labelledby]=\"_field?.label?.id\"\n [class.sapphire-field-group--vertical]=\"orientation === 'vertical'\"\n [class.sapphire-field-group--horizontal]=\"orientation === 'horizontal'\"\n [class.sapphire-field-group--md]=\"_field?.size === 'md'\"\n (cdkFocusChange)=\"
|
|
1586
|
-
}],
|
|
1587
|
-
type: Optional
|
|
1588
|
-
}] }]; }, propDecorators: { uniqueId: [], orientation: [{
|
|
1589
|
-
type: Input
|
|
1590
|
-
}], name: [{
|
|
1591
|
-
type: Input
|
|
1592
|
-
}], change: [{
|
|
1593
|
-
type: Output
|
|
1594
|
-
}], value: [{
|
|
1595
|
-
type: Input
|
|
1596
|
-
}], selected: [{
|
|
1597
|
-
type: Input
|
|
1598
|
-
}], disabled: [{
|
|
1599
|
-
type: Input
|
|
1600
|
-
}], readonly: [{
|
|
1601
|
-
type: Input
|
|
1602
|
-
}], required: [{
|
|
1631
|
+
}, hostDirectives: [ThemeCheckDirective], template: "<div\n class=\"sapphire-field-group\"\n role=\"radiogroup\"\n [attr.aria-orientation]=\"orientation\"\n [attr.aria-labelledby]=\"_field?.label?.id\"\n [class.sapphire-field-group--vertical]=\"orientation === 'vertical'\"\n [class.sapphire-field-group--horizontal]=\"orientation === 'horizontal'\"\n [class.sapphire-field-group--md]=\"_field?.size === 'md'\"\n (cdkFocusChange)=\"_onFocusChange($event)\"\n cdkMonitorSubtreeFocus\n>\n <ng-content></ng-content>\n</div>\n", styles: [".sapphire-field-group{display:flex;flex-wrap:wrap;column-gap:var(--sapphire-semantic-size-spacing-50);row-gap:var(--sapphire-semantic-size-spacing-30)}.sapphire-field-group--horizontal{flex-direction:row}.sapphire-field-group--vertical{flex-direction:column}.sapphire-field-group--md{row-gap:var(--sapphire-semantic-size-spacing-20)}\n"] }]
|
|
1632
|
+
}], propDecorators: { orientation: [{
|
|
1603
1633
|
type: Input
|
|
1604
|
-
}], radios: [{
|
|
1605
|
-
type: ContentChildren,
|
|
1606
|
-
args: [forwardRef(() => RadioComponent), { descendants: true }]
|
|
1607
1634
|
}] } });
|
|
1608
1635
|
|
|
1609
1636
|
/**
|
|
@@ -1683,6 +1710,15 @@ class FieldComponent {
|
|
|
1683
1710
|
}
|
|
1684
1711
|
return this.controls?.toArray().every((control) => control.isDisabled());
|
|
1685
1712
|
}
|
|
1713
|
+
/**
|
|
1714
|
+
* If any of the controls should be constrained by the field's default widht
|
|
1715
|
+
*/
|
|
1716
|
+
controlHasDefaultWidth() {
|
|
1717
|
+
if (!this.controls || this.controls.length === 0) {
|
|
1718
|
+
return false;
|
|
1719
|
+
}
|
|
1720
|
+
return this.controls?.toArray().some((control) => control.hasDefaultWidth);
|
|
1721
|
+
}
|
|
1686
1722
|
/**
|
|
1687
1723
|
* Only support features like `for` or `labelClick` if the field has one control.
|
|
1688
1724
|
*/
|
|
@@ -1695,7 +1731,7 @@ class FieldComponent {
|
|
|
1695
1731
|
/**
|
|
1696
1732
|
* Whether the field control is radio group (sp-radio-group).
|
|
1697
1733
|
*/
|
|
1698
|
-
|
|
1734
|
+
hasRadioGroupChild() {
|
|
1699
1735
|
return this.radioGroup != undefined;
|
|
1700
1736
|
}
|
|
1701
1737
|
get labelNecessityIndicator() {
|
|
@@ -1718,21 +1754,25 @@ class FieldComponent {
|
|
|
1718
1754
|
}
|
|
1719
1755
|
}
|
|
1720
1756
|
FieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: FieldComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1721
|
-
FieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: FieldComponent, selector: "sp-field", inputs: { necessityIndicator: "necessityIndicator", labelPlacement: "labelPlacement", size: "size" }, host: { properties: { "class.sapphire-field--label-placement-side": "labelPlacement === \"side\"", "class.sapphire-field--label-alignment-top": "labelPlacement === \"side\" &&
|
|
1757
|
+
FieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: FieldComponent, selector: "sp-field", inputs: { necessityIndicator: "necessityIndicator", labelPlacement: "labelPlacement", noDefaultWidth: "noDefaultWidth", size: "size" }, host: { properties: { "class.sapphire-field--label-placement-side": "labelPlacement === \"side\"", "class.sapphire-field--no-width": "noDefaultWidth || !controlHasDefaultWidth()", "class.sapphire-field--label-alignment-top": "labelPlacement === \"side\" && hasRadioGroupChild()", "class.sapphire-field--md": "size === \"md\"", "class.sapphire-field--error": "hasError()", "class.is-disabled": "isDisabled()" }, classAttribute: "sapphire-field" }, providers: [
|
|
1722
1758
|
{
|
|
1723
1759
|
provide: ICON_SIZE_PROVIDER,
|
|
1724
1760
|
useExisting: forwardRef(() => FieldComponent),
|
|
1725
1761
|
},
|
|
1726
|
-
], queries: [{ propertyName: "note", first: true, predicate: FieldNoteDirective, descendants: true }, { propertyName: "error", first: true, predicate: FieldErrorDirective, descendants: true }, { propertyName: "
|
|
1762
|
+
], queries: [{ propertyName: "note", first: true, predicate: FieldNoteDirective, descendants: true }, { propertyName: "error", first: true, predicate: FieldErrorDirective, descendants: true }, { propertyName: "_fieldLabel", first: true, predicate: FieldLabelDirective, descendants: true }, { propertyName: "radioGroup", first: true, predicate: RadioGroupComponent, descendants: true }, { propertyName: "requiredValidator", first: true, predicate: RequiredValidator, descendants: true }, { propertyName: "controls", predicate: FieldControl }], viewQueries: [{ propertyName: "label", first: true, predicate: LabelComponent, descendants: true }], hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: "<div class=\"sapphire-field__label\" *ngIf=\"_fieldLabel\">\n <sp-label\n [necessityIndicator]=\"labelNecessityIndicator\"\n [for]=\"control?.getId?.()\"\n [disabled]=\"isDisabled()\"\n (labelClick)=\"control?.focus?.('keyboard')\"\n [size]=\"size\"\n >\n <ng-content select=\"sp-field-label\"></ng-content>\n <ng-content\n select=\"sp-help-button\"\n ngProjectAs=\"sp-help-button\"\n ></ng-content>\n </sp-label>\n</div>\n<div\n class=\"sapphire-field__control\"\n [ngClass]=\"{\n 'sapphire-field__control--group': isGroup\n }\"\n>\n <ng-content></ng-content>\n</div>\n<div class=\"sapphire-field__message\" *ngIf=\"note || error || _noteSuffixPortal\">\n <div class=\"sapphire-field__note-row\">\n <div class=\"sapphire-field__note\" *ngIf=\"error\">\n <ng-content select=\"sp-field-error\"></ng-content>\n </div>\n <div class=\"sapphire-field__note\" *ngIf=\"note && !error\">\n <ng-content select=\"sp-field-note\"></ng-content>\n </div>\n <ng-container *ngIf=\"_noteSuffixPortal\">\n <ng-container *cdkPortalOutlet=\"_noteSuffixPortal\"></ng-container>\n </ng-container>\n </div>\n</div>\n", styles: [".sapphire-field{display:inline-grid;grid-template-columns:auto;row-gap:var(--sapphire-semantic-size-spacing-20);column-gap:var(--sapphire-semantic-size-spacing-40);font-family:var(--sapphire-semantic-font-name-default);grid-auto-rows:min-content;width:var(--sapphire-semantic-size-width-control-default);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box}.sapphire-field--no-width{width:auto}fieldset.sapphire-field{border:0;margin:0;padding:0}.sapphire-field__label{order:1;justify-content:end}legend.sapphire-field__label{padding:0;float:left}.sapphire-field__control{order:2;width:100%;min-width:0}.sapphire-field__control--group{display:flex;gap:var(--sapphire-semantic-size-spacing-control-horizontal-lg)}.sapphire-field--no-shrink .sapphire-field__control{min-width:initial}.sapphire-field__message{min-width:100%;max-width:min-content;order:3}.sapphire-field__note-row{display:flex;align-items:top;font-size:var(--sapphire-semantic-size-font-label-md);line-height:var(--sapphire-semantic-size-line-height-md);color:var(--sapphire-semantic-color-content-default-secondary)}.sapphire-field--md .sapphire-field__note-row{font-size:var(--sapphire-semantic-size-font-label-sm);line-height:var(--sapphire-semantic-size-line-height-sm)}.sapphire-field__note{flex:1}.sapphire-field--error .sapphire-field__note{color:var(--sapphire-semantic-color-content-negative-secondary-default)}.sapphire-field.is-disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-field.is-disabled .sapphire-field__control *{cursor:inherit}.sapphire-field--label-placement-side{grid-template-columns:max-content auto;width:auto}.sapphire-field--label-placement-side:not(.sapphire-field--no-width) .sapphire-field__control{width:var(--sapphire-semantic-size-width-control-default)}.sapphire-field--label-placement-side .sapphire-field__message{grid-column:2}.sapphire-field--label-placement-side .sapphire-field__label{display:flex;align-items:center;max-height:var(--sapphire-semantic-size-height-input-lg)}.sapphire-field--label-placement-side.sapphire-field--md .sapphire-field__label{max-height:var(--sapphire-semantic-size-height-input-md)}.sapphire-field--label-placement-side.sapphire-field--label-alignment-top .sapphire-field__label{align-items:flex-start;max-height:unset}.sapphire-fieldset{display:inline-flex;flex-direction:column;width:min-content;gap:var(--sapphire-semantic-size-spacing-50)}.sapphire-fieldset .sapphire-field--label-placement-side{grid-template-columns:1fr min-content}.sapphire-fieldset .sapphire-field--label-placement-side .sapphire-field__label{white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: LabelComponent, selector: "sp-label", inputs: ["id", "for", "disabled", "necessityIndicator", "size"], outputs: ["labelClick"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
1727
1763
|
__decorate([
|
|
1728
1764
|
CoerceBoolean
|
|
1729
1765
|
], FieldComponent.prototype, "necessityIndicator", void 0);
|
|
1766
|
+
__decorate([
|
|
1767
|
+
CoerceBoolean
|
|
1768
|
+
], FieldComponent.prototype, "noDefaultWidth", void 0);
|
|
1730
1769
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: FieldComponent, decorators: [{
|
|
1731
1770
|
type: Component,
|
|
1732
1771
|
args: [{ selector: 'sp-field', host: {
|
|
1733
1772
|
class: 'sapphire-field',
|
|
1734
1773
|
'[class.sapphire-field--label-placement-side]': 'labelPlacement === "side"',
|
|
1735
|
-
'[class.sapphire-field--
|
|
1774
|
+
'[class.sapphire-field--no-width]': 'noDefaultWidth || !controlHasDefaultWidth()',
|
|
1775
|
+
'[class.sapphire-field--label-alignment-top]': 'labelPlacement === "side" && hasRadioGroupChild()',
|
|
1736
1776
|
'[class.sapphire-field--md]': 'size === "md"',
|
|
1737
1777
|
'[class.sapphire-field--error]': 'hasError()',
|
|
1738
1778
|
'[class.is-disabled]': 'isDisabled()',
|
|
@@ -1741,11 +1781,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
1741
1781
|
provide: ICON_SIZE_PROVIDER,
|
|
1742
1782
|
useExisting: forwardRef(() => FieldComponent),
|
|
1743
1783
|
},
|
|
1744
|
-
], template: "<div class=\"sapphire-field__label\" *ngIf=\"_fieldLabel\">\n <sp-label\n [necessityIndicator]=\"labelNecessityIndicator\"\n [for]=\"control?.getId?.()\"\n [disabled]=\"isDisabled()\"\n (labelClick)=\"control?.focus?.('keyboard')\"\n [size]=\"size\"\n >\n <ng-content select=\"sp-field-label\"></ng-content>\n <ng-content\n select=\"sp-help-button\"\n ngProjectAs=\"sp-help-button\"\n ></ng-content>\n </sp-label>\n</div>\n<div\n class=\"sapphire-field__control\"\n [ngClass]=\"{\n 'sapphire-field__control--group': isGroup\n }\"\n>\n <ng-content></ng-content>\n</div>\n<div class=\"sapphire-field__message\" *ngIf=\"note || error || _noteSuffixPortal\">\n <div class=\"sapphire-field__note-row\">\n <div class=\"sapphire-field__note\" *ngIf=\"error\">\n <ng-content select=\"sp-field-error\"></ng-content>\n </div>\n <div class=\"sapphire-field__note\" *ngIf=\"note && !error\">\n <ng-content select=\"sp-field-note\"></ng-content>\n </div>\n <ng-container *ngIf=\"_noteSuffixPortal\">\n <ng-container *cdkPortalOutlet=\"_noteSuffixPortal\"></ng-container>\n </ng-container>\n </div>\n</div>\n", styles: [".sapphire-field{display:inline-grid;grid-template-columns:auto;row-gap:var(--sapphire-semantic-size-spacing-20);column-gap:var(--sapphire-semantic-size-spacing-40);font-family:var(--sapphire-semantic-font-name-default);grid-auto-rows:min-content;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box}fieldset.sapphire-field{border:0;margin:0;padding:0}.sapphire-field__label{order:1;justify-content:end}legend.sapphire-field__label{padding:0;float:left}.sapphire-field__control{order:2;min-width:
|
|
1784
|
+
], template: "<div class=\"sapphire-field__label\" *ngIf=\"_fieldLabel\">\n <sp-label\n [necessityIndicator]=\"labelNecessityIndicator\"\n [for]=\"control?.getId?.()\"\n [disabled]=\"isDisabled()\"\n (labelClick)=\"control?.focus?.('keyboard')\"\n [size]=\"size\"\n >\n <ng-content select=\"sp-field-label\"></ng-content>\n <ng-content\n select=\"sp-help-button\"\n ngProjectAs=\"sp-help-button\"\n ></ng-content>\n </sp-label>\n</div>\n<div\n class=\"sapphire-field__control\"\n [ngClass]=\"{\n 'sapphire-field__control--group': isGroup\n }\"\n>\n <ng-content></ng-content>\n</div>\n<div class=\"sapphire-field__message\" *ngIf=\"note || error || _noteSuffixPortal\">\n <div class=\"sapphire-field__note-row\">\n <div class=\"sapphire-field__note\" *ngIf=\"error\">\n <ng-content select=\"sp-field-error\"></ng-content>\n </div>\n <div class=\"sapphire-field__note\" *ngIf=\"note && !error\">\n <ng-content select=\"sp-field-note\"></ng-content>\n </div>\n <ng-container *ngIf=\"_noteSuffixPortal\">\n <ng-container *cdkPortalOutlet=\"_noteSuffixPortal\"></ng-container>\n </ng-container>\n </div>\n</div>\n", styles: [".sapphire-field{display:inline-grid;grid-template-columns:auto;row-gap:var(--sapphire-semantic-size-spacing-20);column-gap:var(--sapphire-semantic-size-spacing-40);font-family:var(--sapphire-semantic-font-name-default);grid-auto-rows:min-content;width:var(--sapphire-semantic-size-width-control-default);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box}.sapphire-field--no-width{width:auto}fieldset.sapphire-field{border:0;margin:0;padding:0}.sapphire-field__label{order:1;justify-content:end}legend.sapphire-field__label{padding:0;float:left}.sapphire-field__control{order:2;width:100%;min-width:0}.sapphire-field__control--group{display:flex;gap:var(--sapphire-semantic-size-spacing-control-horizontal-lg)}.sapphire-field--no-shrink .sapphire-field__control{min-width:initial}.sapphire-field__message{min-width:100%;max-width:min-content;order:3}.sapphire-field__note-row{display:flex;align-items:top;font-size:var(--sapphire-semantic-size-font-label-md);line-height:var(--sapphire-semantic-size-line-height-md);color:var(--sapphire-semantic-color-content-default-secondary)}.sapphire-field--md .sapphire-field__note-row{font-size:var(--sapphire-semantic-size-font-label-sm);line-height:var(--sapphire-semantic-size-line-height-sm)}.sapphire-field__note{flex:1}.sapphire-field--error .sapphire-field__note{color:var(--sapphire-semantic-color-content-negative-secondary-default)}.sapphire-field.is-disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-field.is-disabled .sapphire-field__control *{cursor:inherit}.sapphire-field--label-placement-side{grid-template-columns:max-content auto;width:auto}.sapphire-field--label-placement-side:not(.sapphire-field--no-width) .sapphire-field__control{width:var(--sapphire-semantic-size-width-control-default)}.sapphire-field--label-placement-side .sapphire-field__message{grid-column:2}.sapphire-field--label-placement-side .sapphire-field__label{display:flex;align-items:center;max-height:var(--sapphire-semantic-size-height-input-lg)}.sapphire-field--label-placement-side.sapphire-field--md .sapphire-field__label{max-height:var(--sapphire-semantic-size-height-input-md)}.sapphire-field--label-placement-side.sapphire-field--label-alignment-top .sapphire-field__label{align-items:flex-start;max-height:unset}.sapphire-fieldset{display:inline-flex;flex-direction:column;width:min-content;gap:var(--sapphire-semantic-size-spacing-50)}.sapphire-fieldset .sapphire-field--label-placement-side{grid-template-columns:1fr min-content}.sapphire-fieldset .sapphire-field--label-placement-side .sapphire-field__label{white-space:nowrap}\n"] }]
|
|
1745
1785
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { necessityIndicator: [{
|
|
1746
1786
|
type: Input
|
|
1747
1787
|
}], labelPlacement: [{
|
|
1748
1788
|
type: Input
|
|
1789
|
+
}], noDefaultWidth: [{
|
|
1790
|
+
type: Input
|
|
1749
1791
|
}], size: [{
|
|
1750
1792
|
type: Input
|
|
1751
1793
|
}], note: [{
|
|
@@ -1754,9 +1796,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
1754
1796
|
}], error: [{
|
|
1755
1797
|
type: ContentChild,
|
|
1756
1798
|
args: [FieldErrorDirective]
|
|
1757
|
-
}], radioGroup: [{
|
|
1758
|
-
type: ContentChild,
|
|
1759
|
-
args: [RadioGroupComponent]
|
|
1760
1799
|
}], label: [{
|
|
1761
1800
|
type: ViewChild,
|
|
1762
1801
|
args: [LabelComponent]
|
|
@@ -1766,6 +1805,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
1766
1805
|
}], controls: [{
|
|
1767
1806
|
type: ContentChildren,
|
|
1768
1807
|
args: [FieldControl]
|
|
1808
|
+
}], radioGroup: [{
|
|
1809
|
+
type: ContentChild,
|
|
1810
|
+
args: [RadioGroupComponent]
|
|
1769
1811
|
}], requiredValidator: [{
|
|
1770
1812
|
type: ContentChild,
|
|
1771
1813
|
args: [RequiredValidator, { descendants: true }]
|
|
@@ -1953,6 +1995,12 @@ class CheckboxComponent extends _CheckboxMixinBase {
|
|
|
1953
1995
|
this._indeterminate = coerceBooleanProperty(value);
|
|
1954
1996
|
this.syncIndeterminate(this._indeterminate);
|
|
1955
1997
|
}
|
|
1998
|
+
get labelNecessityIndicator() {
|
|
1999
|
+
if (this.necessityIndicator) {
|
|
2000
|
+
return coerceBooleanProperty(this.required) ? 'required' : 'optional';
|
|
2001
|
+
}
|
|
2002
|
+
return undefined;
|
|
2003
|
+
}
|
|
1956
2004
|
// Implemented as part of ControlValueAccessor.
|
|
1957
2005
|
writeValue(value) {
|
|
1958
2006
|
this.selected = !!value;
|
|
@@ -2035,19 +2083,23 @@ class CheckboxComponent extends _CheckboxMixinBase {
|
|
|
2035
2083
|
}
|
|
2036
2084
|
}
|
|
2037
2085
|
CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: CheckboxComponent, deps: [{ token: CheckboxGroupComponent, optional: true }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: 'tabindex', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
2038
|
-
CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: CheckboxComponent, selector: "sp-checkbox", inputs: { ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], id: "id", required: "required", readonly: "readonly", name: "name", size: "size", value: "value", selected: "selected", disabled: "disabled", indeterminate: "indeterminate" }, outputs: { change: "change" }, host: { properties: { "attr.tabindex": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "id": "this.id" } }, providers: [
|
|
2086
|
+
CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: CheckboxComponent, selector: "sp-checkbox", inputs: { ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], id: "id", required: "required", necessityIndicator: "necessityIndicator", readonly: "readonly", name: "name", size: "size", value: "value", selected: "selected", disabled: "disabled", indeterminate: "indeterminate" }, outputs: { change: "change" }, host: { properties: { "attr.tabindex": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "id": "this.id" } }, providers: [
|
|
2039
2087
|
{
|
|
2040
2088
|
provide: NG_VALUE_ACCESSOR,
|
|
2041
2089
|
useExisting: forwardRef(() => CheckboxComponent),
|
|
2042
2090
|
multi: true,
|
|
2043
2091
|
},
|
|
2044
|
-
|
|
2092
|
+
{ provide: MessageDictionary, useValue: translations$2 },
|
|
2093
|
+
], viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }], exportAs: ["spCheckbox"], usesInheritance: true, hostDirectives: [{ directive: ThemeCheckDirective }], ngImport: i0, template: "<label\n [for]=\"_inputId\"\n class=\"sapphire-checkbox\"\n [class.sapphire-checkbox--checked]=\"selected\"\n [class.sapphire-checkbox--indeterminate]=\"indeterminate\"\n [class.sapphire-checkbox--md]=\"size === 'md'\"\n>\n <input\n #input\n type=\"checkbox\"\n class=\"sapphire-checkbox__input\"\n [attr.aria-checked]=\"_getAriaChecked()\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [checked]=\"selected\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [id]=\"_inputId\"\n [required]=\"required\"\n [tabIndex]=\"tabIndex\"\n (blur)=\"_onBlur()\"\n (click)=\"_onInputClick($event)\"\n (change)=\"_onInteractionEvent($event)\"\n />\n <span class=\"sapphire-checkbox__box\">\n <svg\n *ngIf=\"indeterminate\"\n class=\"sapphire-checkbox__box-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\"\n >\n <g fill=\"none\" fill-rule=\"evenodd\">\n <path\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"square\"\n d=\"M7 12h10\"\n />\n <path fill=\"currentColor\" fill-rule=\"nonzero\" d=\"M18 11v2H6v-2z\" />\n </g>\n </svg>\n <svg\n *ngIf=\"selected && !indeterminate\"\n class=\"sapphire-checkbox__box-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M17.782 6.918l.753.659a.5.5 0 01.047.705L10.9 17.061a.5.5 0 01-.73.024l-4.232-4.231a.5.5 0 010-.708l.707-.707a.5.5 0 01.708 0l3.097 3.097 6.626-7.57a.5.5 0 01.705-.048z\"\n fill=\"currentColor\"\n fill-rule=\"nonzero\"\n />\n </svg>\n </span>\n <span class=\"sapphire-checkbox__label\">\n <ng-content></ng-content>\n <span\n *ngIf=\"labelNecessityIndicator === 'required'\"\n class=\"sapphire-checkbox__required-indicator\"\n ></span>\n <span\n *ngIf=\"labelNecessityIndicator === 'optional'\"\n class=\"sapphire-checkbox__optional-indicator\"\n >({{ 'optional' | t }})\n </span>\n </span>\n</label>\n", styles: [".sapphire-checkbox{font-family:var(--sapphire-semantic-font-name-default);display:inline-flex;position:relative;max-width:100%}.sapphire-checkbox__input{margin:0;overflow:visible;position:absolute;top:0;left:0;height:100%;width:100%;opacity:.0001;z-index:1;cursor:pointer}.sapphire-checkbox__label{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin-left:var(--sapphire-semantic-size-spacing-20);font-size:var(--sapphire-semantic-size-font-control-default);color:var(--sapphire-semantic-color-content-default-primary);line-height:var(--sapphire-semantic-size-height-control-xs);display:inline-flex;align-items:center;gap:var(--sapphire-semantic-size-spacing-10)}.sapphire-checkbox__label:empty{margin-left:0}.sapphire-checkbox__required-indicator{background-image:url(\"data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.99999 0.583344C4.41421 0.583344 4.74999 0.91913 4.74999 1.33334V3.22127L6.6017 2.62001C6.99567 2.49208 7.41874 2.70775 7.54666 3.10172C7.67459 3.49568 7.45892 3.91876 7.06495 4.04668L5.21363 4.64782L6.3601 6.22585C6.60356 6.56096 6.52927 7.02998 6.19416 7.27345C5.85905 7.51691 5.39002 7.44262 5.14656 7.10751L3.99999 5.52935L2.85343 7.10751C2.60996 7.44262 2.14094 7.51691 1.80583 7.27345C1.47072 7.02998 1.39642 6.56096 1.63989 6.22585L2.78636 4.64782L0.935036 4.04668C0.541071 3.91876 0.325401 3.49568 0.453323 3.10172C0.581246 2.70775 1.00432 2.49208 1.39829 2.62001L3.24999 3.22127V1.33334C3.24999 0.91913 3.58578 0.583344 3.99999 0.583344Z' fill='%23DD3254'/%3E%3C/svg%3E%0A\");width:8px;height:8px}.sapphire-checkbox__optional-indicator{color:var(--sapphire-semantic-color-content-default-secondary)}.sapphire-checkbox--md .sapphire-checkbox__label{font-size:var(--sapphire-semantic-size-font-control-md);line-height:var(--sapphire-semantic-size-height-control-2xs)}.sapphire-checkbox__error-text{display:block;font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-label-md);line-height:var(--sapphire-semantic-size-line-height-md);color:var(--sapphire-semantic-color-content-negative-secondary-default);margin-top:var(--sapphire-semantic-size-spacing-20);margin-left:calc(var(--sapphire-semantic-size-spacing-20) + var(--sapphire-semantic-size-height-box-lg))}.sapphire-checkbox__error-text--md{font-size:var(--sapphire-semantic-size-font-label-sm);line-height:var(--sapphire-semantic-size-line-height-sm);margin-left:calc(var(--sapphire-semantic-size-spacing-20) + var(--sapphire-semantic-size-height-box-md))}.sapphire-checkbox__box{box-sizing:border-box;position:relative;width:var(--sapphire-semantic-size-height-box-lg);height:var(--sapphire-semantic-size-height-box-lg);border-radius:var(--sapphire-semantic-size-radius-sm);border:var(--sapphire-semantic-size-border-md) solid var(--sapphire-semantic-color-border-control-default);background-color:var(--sapphire-semantic-color-background-control-default);transition:all var(--sapphire-semantic-time-fade-quick);flex-shrink:0;display:inline-flex;justify-content:center;align-items:center}.sapphire-checkbox__box:has(~ .sapphire-checkbox__label:not(:empty)){margin-top:var(--sapphire-semantic-size-spacing-5)}.sapphire-checkbox--md .sapphire-checkbox__box{width:var(--sapphire-semantic-size-height-box-md);height:var(--sapphire-semantic-size-height-box-md)}.sapphire-checkbox__box-icon{display:inherit;line-height:0;color:var(--sapphire-semantic-color-content-action-primary-default);margin:calc(var(--sapphire-semantic-size-border-md) * -1);height:var(--sapphire-semantic-size-height-box-lg);width:var(--sapphire-semantic-size-height-box-lg)}.sapphire-checkbox--md .sapphire-checkbox__box-icon{height:var(--sapphire-semantic-size-height-box-md);width:var(--sapphire-semantic-size-height-box-md)}.sapphire-checkbox--error .sapphire-checkbox__box{border-color:var(--sapphire-semantic-color-background-negative-primary-default)}.sapphire-checkbox--checked .sapphire-checkbox__box,.sapphire-checkbox--indeterminate .sapphire-checkbox__box{border-width:var(--sapphire-global-size-generic-0);background-color:var(--sapphire-semantic-color-background-action-primary-default)}.sapphire-checkbox--checked.sapphire-checkbox--error .sapphire-checkbox__box,.sapphire-checkbox--indeterminate.sapphire-checkbox--error .sapphire-checkbox__box{background-color:var(--sapphire-semantic-color-background-negative-primary-default)}.sapphire-checkbox:not(:active):not(.is-active):not(.sapphire-checkbox--checked).is-hover .sapphire-checkbox__box,.sapphire-checkbox:not(:active):not(.is-active):not(.sapphire-checkbox--checked):not(.js-hover):hover .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box{border-color:var(--sapphire-semantic-color-border-control-hover)}.sapphire-checkbox--error:not(:active):not(.is-active):not(.sapphire-checkbox--checked).is-hover .sapphire-checkbox__box,.sapphire-checkbox--error:not(:active):not(.is-active):not(.sapphire-checkbox--checked):not(.js-hover):hover .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box{border-color:var(--sapphire-semantic-color-background-negative-primary-hover)}.sapphire-checkbox--checked:not(:active):not(.is-active).is-hover .sapphire-checkbox__box,.sapphire-checkbox--checked:not(:active):not(.is-active):not(.js-hover):hover .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box,.sapphire-checkbox--indeterminate:not(:active):not(.is-active).is-hover .sapphire-checkbox__box,.sapphire-checkbox--indeterminate:not(:active):not(.is-active):not(.js-hover):hover .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box{background-color:var(--sapphire-semantic-color-background-action-primary-hover)}.sapphire-checkbox--checked.sapphire-checkbox--error:not(:active):not(.is-active).is-hover .sapphire-checkbox__box,.sapphire-checkbox--checked.sapphire-checkbox--error:not(:active):not(.is-active):not(.js-hover):hover .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box,.sapphire-checkbox--indeterminate.sapphire-checkbox--error:not(:active):not(.is-active).is-hover .sapphire-checkbox__box,.sapphire-checkbox--indeterminate.sapphire-checkbox--error:not(:active):not(.is-active):not(.js-hover):hover .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box{background-color:var(--sapphire-semantic-color-background-negative-primary-hover)}.sapphire-checkbox.is-focus .sapphire-checkbox__box,.sapphire-checkbox:not(.js-focus) .sapphire-checkbox__input:focus-visible~.sapphire-checkbox__box{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);outline-offset:var(--sapphire-semantic-size-focus-ring)}.sapphire-checkbox__input:disabled{cursor:not-allowed}.sapphire-checkbox:not(.sapphire-checkbox--no-disabled) .sapphire-checkbox__input:disabled~.sapphire-checkbox__box,.sapphire-checkbox:not(.sapphire-checkbox--no-disabled) .sapphire-checkbox__input:disabled~.sapphire-checkbox__label{opacity:var(--sapphire-semantic-opacity-disabled)}:host{display:inline-flex}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: TranslatePipe, name: "t" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2045
2094
|
__decorate([
|
|
2046
2095
|
AutoId()
|
|
2047
2096
|
], CheckboxComponent.prototype, "id", void 0);
|
|
2048
2097
|
__decorate([
|
|
2049
2098
|
CoerceBoolean
|
|
2050
2099
|
], CheckboxComponent.prototype, "required", void 0);
|
|
2100
|
+
__decorate([
|
|
2101
|
+
CoerceBoolean
|
|
2102
|
+
], CheckboxComponent.prototype, "necessityIndicator", void 0);
|
|
2051
2103
|
__decorate([
|
|
2052
2104
|
CoerceBoolean
|
|
2053
2105
|
], CheckboxComponent.prototype, "readonly", void 0);
|
|
@@ -2059,11 +2111,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
2059
2111
|
useExisting: forwardRef(() => CheckboxComponent),
|
|
2060
2112
|
multi: true,
|
|
2061
2113
|
},
|
|
2114
|
+
{ provide: MessageDictionary, useValue: translations$2 },
|
|
2062
2115
|
], host: {
|
|
2063
2116
|
'[attr.tabindex]': 'null',
|
|
2064
2117
|
'[attr.aria-label]': 'null',
|
|
2065
2118
|
'[attr.aria-labelledby]': 'null',
|
|
2066
|
-
}, hostDirectives: [ThemeCheckDirective], template: "<label\n [for]=\"_inputId\"\n class=\"sapphire-checkbox\"\n [class.sapphire-checkbox--checked]=\"selected\"\n [class.sapphire-checkbox--indeterminate]=\"indeterminate\"\n [class.sapphire-checkbox--md]=\"size === 'md'\"\n>\n <input\n #input\n type=\"checkbox\"\n class=\"sapphire-checkbox__input\"\n [attr.aria-checked]=\"_getAriaChecked()\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [checked]=\"selected\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [id]=\"_inputId\"\n [required]=\"required\"\n [tabIndex]=\"tabIndex\"\n (blur)=\"_onBlur()\"\n (click)=\"_onInputClick($event)\"\n (change)=\"_onInteractionEvent($event)\"\n />\n <span class=\"sapphire-checkbox__box\">\n <svg\n *ngIf=\"indeterminate\"\n class=\"sapphire-checkbox__box-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\"\n >\n <g fill=\"none\" fill-rule=\"evenodd\">\n <path\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"square\"\n d=\"M7 12h10\"\n />\n <path fill=\"currentColor\" fill-rule=\"nonzero\" d=\"M18 11v2H6v-2z\" />\n </g>\n </svg>\n <svg\n *ngIf=\"selected && !indeterminate\"\n class=\"sapphire-checkbox__box-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M17.782 6.918l.753.659a.5.5 0 01.047.705L10.9 17.061a.5.5 0 01-.73.024l-4.232-4.231a.5.5 0 010-.708l.707-.707a.5.5 0 01.708 0l3.097 3.097 6.626-7.57a.5.5 0 01.705-.048z\"\n fill=\"currentColor\"\n fill-rule=\"nonzero\"\n />\n </svg>\n </span>\n <span class=\"sapphire-checkbox__label\"
|
|
2119
|
+
}, hostDirectives: [ThemeCheckDirective], template: "<label\n [for]=\"_inputId\"\n class=\"sapphire-checkbox\"\n [class.sapphire-checkbox--checked]=\"selected\"\n [class.sapphire-checkbox--indeterminate]=\"indeterminate\"\n [class.sapphire-checkbox--md]=\"size === 'md'\"\n>\n <input\n #input\n type=\"checkbox\"\n class=\"sapphire-checkbox__input\"\n [attr.aria-checked]=\"_getAriaChecked()\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [checked]=\"selected\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [id]=\"_inputId\"\n [required]=\"required\"\n [tabIndex]=\"tabIndex\"\n (blur)=\"_onBlur()\"\n (click)=\"_onInputClick($event)\"\n (change)=\"_onInteractionEvent($event)\"\n />\n <span class=\"sapphire-checkbox__box\">\n <svg\n *ngIf=\"indeterminate\"\n class=\"sapphire-checkbox__box-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\"\n >\n <g fill=\"none\" fill-rule=\"evenodd\">\n <path\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"square\"\n d=\"M7 12h10\"\n />\n <path fill=\"currentColor\" fill-rule=\"nonzero\" d=\"M18 11v2H6v-2z\" />\n </g>\n </svg>\n <svg\n *ngIf=\"selected && !indeterminate\"\n class=\"sapphire-checkbox__box-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M17.782 6.918l.753.659a.5.5 0 01.047.705L10.9 17.061a.5.5 0 01-.73.024l-4.232-4.231a.5.5 0 010-.708l.707-.707a.5.5 0 01.708 0l3.097 3.097 6.626-7.57a.5.5 0 01.705-.048z\"\n fill=\"currentColor\"\n fill-rule=\"nonzero\"\n />\n </svg>\n </span>\n <span class=\"sapphire-checkbox__label\">\n <ng-content></ng-content>\n <span\n *ngIf=\"labelNecessityIndicator === 'required'\"\n class=\"sapphire-checkbox__required-indicator\"\n ></span>\n <span\n *ngIf=\"labelNecessityIndicator === 'optional'\"\n class=\"sapphire-checkbox__optional-indicator\"\n >({{ 'optional' | t }})\n </span>\n </span>\n</label>\n", styles: [".sapphire-checkbox{font-family:var(--sapphire-semantic-font-name-default);display:inline-flex;position:relative;max-width:100%}.sapphire-checkbox__input{margin:0;overflow:visible;position:absolute;top:0;left:0;height:100%;width:100%;opacity:.0001;z-index:1;cursor:pointer}.sapphire-checkbox__label{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin-left:var(--sapphire-semantic-size-spacing-20);font-size:var(--sapphire-semantic-size-font-control-default);color:var(--sapphire-semantic-color-content-default-primary);line-height:var(--sapphire-semantic-size-height-control-xs);display:inline-flex;align-items:center;gap:var(--sapphire-semantic-size-spacing-10)}.sapphire-checkbox__label:empty{margin-left:0}.sapphire-checkbox__required-indicator{background-image:url(\"data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.99999 0.583344C4.41421 0.583344 4.74999 0.91913 4.74999 1.33334V3.22127L6.6017 2.62001C6.99567 2.49208 7.41874 2.70775 7.54666 3.10172C7.67459 3.49568 7.45892 3.91876 7.06495 4.04668L5.21363 4.64782L6.3601 6.22585C6.60356 6.56096 6.52927 7.02998 6.19416 7.27345C5.85905 7.51691 5.39002 7.44262 5.14656 7.10751L3.99999 5.52935L2.85343 7.10751C2.60996 7.44262 2.14094 7.51691 1.80583 7.27345C1.47072 7.02998 1.39642 6.56096 1.63989 6.22585L2.78636 4.64782L0.935036 4.04668C0.541071 3.91876 0.325401 3.49568 0.453323 3.10172C0.581246 2.70775 1.00432 2.49208 1.39829 2.62001L3.24999 3.22127V1.33334C3.24999 0.91913 3.58578 0.583344 3.99999 0.583344Z' fill='%23DD3254'/%3E%3C/svg%3E%0A\");width:8px;height:8px}.sapphire-checkbox__optional-indicator{color:var(--sapphire-semantic-color-content-default-secondary)}.sapphire-checkbox--md .sapphire-checkbox__label{font-size:var(--sapphire-semantic-size-font-control-md);line-height:var(--sapphire-semantic-size-height-control-2xs)}.sapphire-checkbox__error-text{display:block;font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-label-md);line-height:var(--sapphire-semantic-size-line-height-md);color:var(--sapphire-semantic-color-content-negative-secondary-default);margin-top:var(--sapphire-semantic-size-spacing-20);margin-left:calc(var(--sapphire-semantic-size-spacing-20) + var(--sapphire-semantic-size-height-box-lg))}.sapphire-checkbox__error-text--md{font-size:var(--sapphire-semantic-size-font-label-sm);line-height:var(--sapphire-semantic-size-line-height-sm);margin-left:calc(var(--sapphire-semantic-size-spacing-20) + var(--sapphire-semantic-size-height-box-md))}.sapphire-checkbox__box{box-sizing:border-box;position:relative;width:var(--sapphire-semantic-size-height-box-lg);height:var(--sapphire-semantic-size-height-box-lg);border-radius:var(--sapphire-semantic-size-radius-sm);border:var(--sapphire-semantic-size-border-md) solid var(--sapphire-semantic-color-border-control-default);background-color:var(--sapphire-semantic-color-background-control-default);transition:all var(--sapphire-semantic-time-fade-quick);flex-shrink:0;display:inline-flex;justify-content:center;align-items:center}.sapphire-checkbox__box:has(~ .sapphire-checkbox__label:not(:empty)){margin-top:var(--sapphire-semantic-size-spacing-5)}.sapphire-checkbox--md .sapphire-checkbox__box{width:var(--sapphire-semantic-size-height-box-md);height:var(--sapphire-semantic-size-height-box-md)}.sapphire-checkbox__box-icon{display:inherit;line-height:0;color:var(--sapphire-semantic-color-content-action-primary-default);margin:calc(var(--sapphire-semantic-size-border-md) * -1);height:var(--sapphire-semantic-size-height-box-lg);width:var(--sapphire-semantic-size-height-box-lg)}.sapphire-checkbox--md .sapphire-checkbox__box-icon{height:var(--sapphire-semantic-size-height-box-md);width:var(--sapphire-semantic-size-height-box-md)}.sapphire-checkbox--error .sapphire-checkbox__box{border-color:var(--sapphire-semantic-color-background-negative-primary-default)}.sapphire-checkbox--checked .sapphire-checkbox__box,.sapphire-checkbox--indeterminate .sapphire-checkbox__box{border-width:var(--sapphire-global-size-generic-0);background-color:var(--sapphire-semantic-color-background-action-primary-default)}.sapphire-checkbox--checked.sapphire-checkbox--error .sapphire-checkbox__box,.sapphire-checkbox--indeterminate.sapphire-checkbox--error .sapphire-checkbox__box{background-color:var(--sapphire-semantic-color-background-negative-primary-default)}.sapphire-checkbox:not(:active):not(.is-active):not(.sapphire-checkbox--checked).is-hover .sapphire-checkbox__box,.sapphire-checkbox:not(:active):not(.is-active):not(.sapphire-checkbox--checked):not(.js-hover):hover .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box{border-color:var(--sapphire-semantic-color-border-control-hover)}.sapphire-checkbox--error:not(:active):not(.is-active):not(.sapphire-checkbox--checked).is-hover .sapphire-checkbox__box,.sapphire-checkbox--error:not(:active):not(.is-active):not(.sapphire-checkbox--checked):not(.js-hover):hover .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box{border-color:var(--sapphire-semantic-color-background-negative-primary-hover)}.sapphire-checkbox--checked:not(:active):not(.is-active).is-hover .sapphire-checkbox__box,.sapphire-checkbox--checked:not(:active):not(.is-active):not(.js-hover):hover .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box,.sapphire-checkbox--indeterminate:not(:active):not(.is-active).is-hover .sapphire-checkbox__box,.sapphire-checkbox--indeterminate:not(:active):not(.is-active):not(.js-hover):hover .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box{background-color:var(--sapphire-semantic-color-background-action-primary-hover)}.sapphire-checkbox--checked.sapphire-checkbox--error:not(:active):not(.is-active).is-hover .sapphire-checkbox__box,.sapphire-checkbox--checked.sapphire-checkbox--error:not(:active):not(.is-active):not(.js-hover):hover .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box,.sapphire-checkbox--indeterminate.sapphire-checkbox--error:not(:active):not(.is-active).is-hover .sapphire-checkbox__box,.sapphire-checkbox--indeterminate.sapphire-checkbox--error:not(:active):not(.is-active):not(.js-hover):hover .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box{background-color:var(--sapphire-semantic-color-background-negative-primary-hover)}.sapphire-checkbox.is-focus .sapphire-checkbox__box,.sapphire-checkbox:not(.js-focus) .sapphire-checkbox__input:focus-visible~.sapphire-checkbox__box{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);outline-offset:var(--sapphire-semantic-size-focus-ring)}.sapphire-checkbox__input:disabled{cursor:not-allowed}.sapphire-checkbox:not(.sapphire-checkbox--no-disabled) .sapphire-checkbox__input:disabled~.sapphire-checkbox__box,.sapphire-checkbox:not(.sapphire-checkbox--no-disabled) .sapphire-checkbox__input:disabled~.sapphire-checkbox__label{opacity:var(--sapphire-semantic-opacity-disabled)}:host{display:inline-flex}\n"] }]
|
|
2067
2120
|
}], ctorParameters: function () { return [{ type: CheckboxGroupComponent, decorators: [{
|
|
2068
2121
|
type: Optional
|
|
2069
2122
|
}] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
@@ -2084,6 +2137,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
2084
2137
|
type: Input
|
|
2085
2138
|
}], required: [{
|
|
2086
2139
|
type: Input
|
|
2140
|
+
}], necessityIndicator: [{
|
|
2141
|
+
type: Input
|
|
2087
2142
|
}], readonly: [{
|
|
2088
2143
|
type: Input
|
|
2089
2144
|
}], name: [{
|
|
@@ -2133,7 +2188,7 @@ class SapphireCheckboxModule {
|
|
|
2133
2188
|
SapphireCheckboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SapphireCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
2134
2189
|
SapphireCheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.0", ngImport: i0, type: SapphireCheckboxModule, declarations: [CheckboxComponent,
|
|
2135
2190
|
SapphireCheckboxRequiredValidator,
|
|
2136
|
-
CheckboxGroupComponent], imports: [CommonModule, FormsModule, A11yModule], exports: [CheckboxComponent,
|
|
2191
|
+
CheckboxGroupComponent], imports: [CommonModule, TranslatePipe, FormsModule, A11yModule], exports: [CheckboxComponent,
|
|
2137
2192
|
SapphireCheckboxRequiredValidator,
|
|
2138
2193
|
CheckboxGroupComponent] });
|
|
2139
2194
|
SapphireCheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SapphireCheckboxModule, imports: [CommonModule, FormsModule, A11yModule] });
|
|
@@ -2145,7 +2200,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
2145
2200
|
SapphireCheckboxRequiredValidator,
|
|
2146
2201
|
CheckboxGroupComponent,
|
|
2147
2202
|
],
|
|
2148
|
-
imports: [CommonModule, FormsModule, A11yModule],
|
|
2203
|
+
imports: [CommonModule, TranslatePipe, FormsModule, A11yModule],
|
|
2149
2204
|
exports: [
|
|
2150
2205
|
CheckboxComponent,
|
|
2151
2206
|
SapphireCheckboxRequiredValidator,
|
|
@@ -2168,7 +2223,7 @@ MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
|
|
|
2168
2223
|
provide: ICON_SIZE_PROVIDER,
|
|
2169
2224
|
useExisting: forwardRef(() => MenuComponent),
|
|
2170
2225
|
},
|
|
2171
|
-
], hostDirectives: [{ directive: i1$
|
|
2226
|
+
], hostDirectives: [{ directive: i1$1.CdkMenu, outputs: ["closed", "closed"] }, { directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }], ngImport: i0, template: "<div\n class=\"sapphire-listbox\"\n [class.sapphire-listbox--md]=\"size === 'md'\"\n [class.sapphire-listbox--sm]=\"size === 'sm'\"\n>\n <ng-content></ng-content>\n</div>\n", styles: [".sapphire-listbox{box-sizing:border-box;margin:0;position:relative;list-style:none;outline:none;font-family:var(--sapphire-semantic-font-name-default);padding:calc(var(--sapphire-semantic-size-spacing-10) - var(--sapphire-semantic-size-spacing-5)) 0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-listbox__item{display:flex;justify-content:space-between;align-items:center;padding:var(--sapphire-semantic-size-spacing-5) var(--sapphire-semantic-size-spacing-10);color:var(--sapphire-semantic-color-content-selection-unselected-default);outline:none;cursor:pointer;text-decoration:none;min-width:max-content}.sapphire-listbox__item--danger{color:var(--sapphire-semantic-color-content-action-danger-default)}.sapphire-listbox__item--selected{color:var(--sapphire-semantic-color-content-selection-selected-default)}.sapphire-listbox__item--selected .sapphire-listbox__content{background-color:var(--sapphire-semantic-color-background-selection-selected-default)}.sapphire-listbox__content{width:100%;max-width:calc(100vw - 2 * var(--sapphire-semantic-size-icon-lg));display:grid;grid-auto-flow:column;align-items:center;gap:var(--sapphire-semantic-size-spacing-30);grid-template-columns:auto 1fr var(--sapphire-semantic-size-icon-lg);padding:calc(var(--sapphire-semantic-size-spacing-30) - var(--sapphire-semantic-size-spacing-5)) var(--sapphire-semantic-size-spacing-30);border-radius:var(--sapphire-semantic-size-radius-sm);transition-property:opacity,background-color,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:ease-in-out;min-height:var(--sapphire-semantic-size-height-control-xs)}.sapphire-listbox--md .sapphire-listbox__content{gap:var(--sapphire-semantic-size-spacing-25);grid-template-columns:auto 1fr var(--sapphire-semantic-size-icon-md);padding:calc(var(--sapphire-semantic-size-spacing-20) - var(--sapphire-semantic-size-spacing-5)) var(--sapphire-semantic-size-spacing-25)}.sapphire-listbox--sm .sapphire-listbox__content{gap:var(--sapphire-semantic-size-spacing-20);grid-template-columns:auto 1fr var(--sapphire-semantic-size-icon-sm);padding:calc(var(--sapphire-semantic-size-spacing-10) - var(--sapphire-semantic-size-spacing-5)) var(--sapphire-semantic-size-spacing-20)}.sapphire-listbox__icon{line-height:0}.sapphire-listbox__text-container{line-height:var(--sapphire-semantic-size-line-height-md)}.sapphire-listbox__text-container:first-child{grid-column:span 2}.sapphire-listbox__primary-text{font-weight:var(--sapphire-semantic-font-weight-default-semibold);font-size:var(--sapphire-semantic-size-font-text-lg)}.sapphire-listbox__secondary-text{font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-text-md)}.sapphire-listbox--md .sapphire-listbox__primary-text{font-size:var(--sapphire-semantic-size-font-text-md)}.sapphire-listbox--sm .sapphire-listbox__primary-text,.sapphire-listbox--md .sapphire-listbox__secondary-text,.sapphire-listbox--sm .sapphire-listbox__secondary-text{font-size:var(--sapphire-semantic-size-font-text-sm)}.sapphire-listbox__item:not(.sapphire-listbox__item--danger):not(.sapphire-listbox__item--selected) .sapphire-listbox__secondary-text{color:var(--sapphire-semantic-color-content-default-secondary)}.sapphire-listbox__item.is-disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-listbox__section{padding:0;list-style:none}.sapphire-listbox__section-header{font-size:var(--sapphire-semantic-size-font-text-md);color:var(--sapphire-semantic-color-content-default-secondary);padding:var(--sapphire-semantic-size-spacing-30) var(--sapphire-semantic-size-spacing-40) var(--sapphire-semantic-size-spacing-20) var(--sapphire-semantic-size-spacing-40)}.sapphire-listbox--md .sapphire-listbox__section-header{font-size:var(--sapphire-semantic-size-font-text-sm);padding:var(--sapphire-semantic-size-spacing-25) var(--sapphire-global-size-generic-35) var(--sapphire-global-size-generic-15) var(--sapphire-global-size-generic-35)}.sapphire-listbox--sm .sapphire-listbox__section-header{font-size:var(--sapphire-semantic-size-font-text-sm);padding:var(--sapphire-semantic-size-spacing-20) var(--sapphire-semantic-size-spacing-30) var(--sapphire-semantic-size-spacing-10) var(--sapphire-semantic-size-spacing-30)}.sapphire-listbox__separator{height:var(--sapphire-semantic-size-border-sm);width:100%;background:var(--sapphire-semantic-color-border-separator-default);margin-top:calc(var(--sapphire-semantic-size-spacing-10) - var(--sapphire-semantic-size-spacing-5));margin-bottom:calc(var(--sapphire-semantic-size-spacing-10) - var(--sapphire-semantic-size-spacing-5))}.sapphire-listbox__item:not(.is-disabled).is-focus .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-focus):focus-visible .sapphire-listbox__content{box-shadow:0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring)}.sapphire-listbox__item:not(.is-disabled).is-hover:not(.is-active) .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-selection-unselected-hover);background-color:var(--sapphire-semantic-color-background-selection-unselected-hover)}.sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-action-danger-default);background-color:var(--sapphire-semantic-color-background-action-danger-default)}.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active):not(.js-hover):hover .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-selection-selected-hover);background-color:var(--sapphire-semantic-color-background-selection-selected-hover)}.sapphire-listbox__item:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-selection-unselected-active);background-color:var(--sapphire-semantic-color-background-selection-unselected-active)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-action-danger-active);background-color:var(--sapphire-semantic-color-background-action-danger-hover)}.sapphire-listbox__item--selected:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-selection-selected-active);background-color:var(--sapphire-semantic-color-background-selection-selected-active)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.sapphire-popover{box-sizing:border-box;background-color:var(--sapphire-semantic-color-background-popover-default);box-shadow:var(--sapphire-semantic-shadow-popover);animation:fade-in var(--sapphire-semantic-time-fade-quick) ease-in-out;border-radius:var(--sapphire-semantic-size-radius-popover);overflow:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-popover--padded{padding:var(--sapphire-semantic-size-spacing-container-horizontal-sm)}.sapphire-popover--max-width{max-width:var(--sapphire-global-size-generic-1120)}.sapphire-menu-backdrop{background:none}\n"] });
|
|
2172
2227
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuComponent, decorators: [{
|
|
2173
2228
|
type: Component,
|
|
2174
2229
|
args: [{ selector: 'sp-menu', hostDirectives: [
|
|
@@ -2186,7 +2241,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
2186
2241
|
provide: ICON_SIZE_PROVIDER,
|
|
2187
2242
|
useExisting: forwardRef(() => MenuComponent),
|
|
2188
2243
|
},
|
|
2189
|
-
], template: "<div\n class=\"sapphire-listbox\"\n [class.sapphire-listbox--md]=\"size === 'md'\"\n [class.sapphire-listbox--sm]=\"size === 'sm'\"\n>\n <ng-content></ng-content>\n</div>\n", styles: [".sapphire-listbox{box-sizing:border-box;margin:0;position:relative;list-style:none;outline:none;padding:calc(var(--sapphire-semantic-size-spacing-10) - var(--sapphire-semantic-size-spacing-5)) 0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-listbox__item{display:flex;justify-content:space-between;align-items:center;padding:var(--sapphire-semantic-size-spacing-5) var(--sapphire-semantic-size-spacing-10);color:var(--sapphire-semantic-color-content-selection-unselected-default);outline:none;cursor:pointer;text-decoration:none;min-width:max-content}.sapphire-listbox__item--danger{color:var(--sapphire-semantic-color-content-action-danger-default)}.sapphire-listbox__item--selected{color:var(--sapphire-semantic-color-content-selection-selected-default)}.sapphire-listbox__item--selected .sapphire-listbox__content{background-color:var(--sapphire-semantic-color-background-selection-selected-default)}.sapphire-listbox__content{width:100%;max-width:calc(100vw - 2 * var(--sapphire-semantic-size-icon-lg));display:grid;grid-auto-flow:column;align-items:center;gap:var(--sapphire-semantic-size-spacing-30);grid-template-columns:auto 1fr var(--sapphire-semantic-size-icon-lg);padding:calc(var(--sapphire-semantic-size-spacing-30) - var(--sapphire-semantic-size-spacing-5)) var(--sapphire-semantic-size-spacing-30);border-radius:var(--sapphire-semantic-size-radius-sm);transition-property:opacity,background-color,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:ease-in-out;min-height:var(--sapphire-semantic-size-height-control-xs)}.sapphire-listbox--md .sapphire-listbox__content{gap:var(--sapphire-semantic-size-spacing-25);grid-template-columns:auto 1fr var(--sapphire-semantic-size-icon-md);padding:calc(var(--sapphire-semantic-size-spacing-20) - var(--sapphire-semantic-size-spacing-5)) var(--sapphire-semantic-size-spacing-25)}.sapphire-listbox--sm .sapphire-listbox__content{gap:var(--sapphire-semantic-size-spacing-20);grid-template-columns:auto 1fr var(--sapphire-semantic-size-icon-sm);padding:calc(var(--sapphire-semantic-size-spacing-10) - var(--sapphire-semantic-size-spacing-5)) var(--sapphire-semantic-size-spacing-20)}.sapphire-listbox__icon{line-height:0}.sapphire-listbox__text-container{
|
|
2244
|
+
], template: "<div\n class=\"sapphire-listbox\"\n [class.sapphire-listbox--md]=\"size === 'md'\"\n [class.sapphire-listbox--sm]=\"size === 'sm'\"\n>\n <ng-content></ng-content>\n</div>\n", styles: [".sapphire-listbox{box-sizing:border-box;margin:0;position:relative;list-style:none;outline:none;font-family:var(--sapphire-semantic-font-name-default);padding:calc(var(--sapphire-semantic-size-spacing-10) - var(--sapphire-semantic-size-spacing-5)) 0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-listbox__item{display:flex;justify-content:space-between;align-items:center;padding:var(--sapphire-semantic-size-spacing-5) var(--sapphire-semantic-size-spacing-10);color:var(--sapphire-semantic-color-content-selection-unselected-default);outline:none;cursor:pointer;text-decoration:none;min-width:max-content}.sapphire-listbox__item--danger{color:var(--sapphire-semantic-color-content-action-danger-default)}.sapphire-listbox__item--selected{color:var(--sapphire-semantic-color-content-selection-selected-default)}.sapphire-listbox__item--selected .sapphire-listbox__content{background-color:var(--sapphire-semantic-color-background-selection-selected-default)}.sapphire-listbox__content{width:100%;max-width:calc(100vw - 2 * var(--sapphire-semantic-size-icon-lg));display:grid;grid-auto-flow:column;align-items:center;gap:var(--sapphire-semantic-size-spacing-30);grid-template-columns:auto 1fr var(--sapphire-semantic-size-icon-lg);padding:calc(var(--sapphire-semantic-size-spacing-30) - var(--sapphire-semantic-size-spacing-5)) var(--sapphire-semantic-size-spacing-30);border-radius:var(--sapphire-semantic-size-radius-sm);transition-property:opacity,background-color,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:ease-in-out;min-height:var(--sapphire-semantic-size-height-control-xs)}.sapphire-listbox--md .sapphire-listbox__content{gap:var(--sapphire-semantic-size-spacing-25);grid-template-columns:auto 1fr var(--sapphire-semantic-size-icon-md);padding:calc(var(--sapphire-semantic-size-spacing-20) - var(--sapphire-semantic-size-spacing-5)) var(--sapphire-semantic-size-spacing-25)}.sapphire-listbox--sm .sapphire-listbox__content{gap:var(--sapphire-semantic-size-spacing-20);grid-template-columns:auto 1fr var(--sapphire-semantic-size-icon-sm);padding:calc(var(--sapphire-semantic-size-spacing-10) - var(--sapphire-semantic-size-spacing-5)) var(--sapphire-semantic-size-spacing-20)}.sapphire-listbox__icon{line-height:0}.sapphire-listbox__text-container{line-height:var(--sapphire-semantic-size-line-height-md)}.sapphire-listbox__text-container:first-child{grid-column:span 2}.sapphire-listbox__primary-text{font-weight:var(--sapphire-semantic-font-weight-default-semibold);font-size:var(--sapphire-semantic-size-font-text-lg)}.sapphire-listbox__secondary-text{font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-text-md)}.sapphire-listbox--md .sapphire-listbox__primary-text{font-size:var(--sapphire-semantic-size-font-text-md)}.sapphire-listbox--sm .sapphire-listbox__primary-text,.sapphire-listbox--md .sapphire-listbox__secondary-text,.sapphire-listbox--sm .sapphire-listbox__secondary-text{font-size:var(--sapphire-semantic-size-font-text-sm)}.sapphire-listbox__item:not(.sapphire-listbox__item--danger):not(.sapphire-listbox__item--selected) .sapphire-listbox__secondary-text{color:var(--sapphire-semantic-color-content-default-secondary)}.sapphire-listbox__item.is-disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-listbox__section{padding:0;list-style:none}.sapphire-listbox__section-header{font-size:var(--sapphire-semantic-size-font-text-md);color:var(--sapphire-semantic-color-content-default-secondary);padding:var(--sapphire-semantic-size-spacing-30) var(--sapphire-semantic-size-spacing-40) var(--sapphire-semantic-size-spacing-20) var(--sapphire-semantic-size-spacing-40)}.sapphire-listbox--md .sapphire-listbox__section-header{font-size:var(--sapphire-semantic-size-font-text-sm);padding:var(--sapphire-semantic-size-spacing-25) var(--sapphire-global-size-generic-35) var(--sapphire-global-size-generic-15) var(--sapphire-global-size-generic-35)}.sapphire-listbox--sm .sapphire-listbox__section-header{font-size:var(--sapphire-semantic-size-font-text-sm);padding:var(--sapphire-semantic-size-spacing-20) var(--sapphire-semantic-size-spacing-30) var(--sapphire-semantic-size-spacing-10) var(--sapphire-semantic-size-spacing-30)}.sapphire-listbox__separator{height:var(--sapphire-semantic-size-border-sm);width:100%;background:var(--sapphire-semantic-color-border-separator-default);margin-top:calc(var(--sapphire-semantic-size-spacing-10) - var(--sapphire-semantic-size-spacing-5));margin-bottom:calc(var(--sapphire-semantic-size-spacing-10) - var(--sapphire-semantic-size-spacing-5))}.sapphire-listbox__item:not(.is-disabled).is-focus .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-focus):focus-visible .sapphire-listbox__content{box-shadow:0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring)}.sapphire-listbox__item:not(.is-disabled).is-hover:not(.is-active) .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-selection-unselected-hover);background-color:var(--sapphire-semantic-color-background-selection-unselected-hover)}.sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-action-danger-default);background-color:var(--sapphire-semantic-color-background-action-danger-default)}.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active):not(.js-hover):hover .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-selection-selected-hover);background-color:var(--sapphire-semantic-color-background-selection-selected-hover)}.sapphire-listbox__item:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-selection-unselected-active);background-color:var(--sapphire-semantic-color-background-selection-unselected-active)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-action-danger-active);background-color:var(--sapphire-semantic-color-background-action-danger-hover)}.sapphire-listbox__item--selected:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-selection-selected-active);background-color:var(--sapphire-semantic-color-background-selection-selected-active)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.sapphire-popover{box-sizing:border-box;background-color:var(--sapphire-semantic-color-background-popover-default);box-shadow:var(--sapphire-semantic-shadow-popover);animation:fade-in var(--sapphire-semantic-time-fade-quick) ease-in-out;border-radius:var(--sapphire-semantic-size-radius-popover);overflow:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-popover--padded{padding:var(--sapphire-semantic-size-spacing-container-horizontal-sm)}.sapphire-popover--max-width{max-width:var(--sapphire-global-size-generic-1120)}.sapphire-menu-backdrop{background:none}\n"] }]
|
|
2190
2245
|
}], propDecorators: { size: [{
|
|
2191
2246
|
type: Input
|
|
2192
2247
|
}] } });
|
|
@@ -2194,7 +2249,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
2194
2249
|
class MenuItemComponent {
|
|
2195
2250
|
}
|
|
2196
2251
|
MenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2197
|
-
MenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: MenuItemComponent, selector: "sp-menu-item", inputs: { disabled: "disabled", danger: "danger" }, host: { properties: { "class.sapphire-listbox__item": "true", "class.is-disabled": "this.disabled", "class.sapphire-listbox__item--danger": "this.danger" } }, hostDirectives: [{ directive: i1$
|
|
2252
|
+
MenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: MenuItemComponent, selector: "sp-menu-item", inputs: { disabled: "disabled", danger: "danger" }, host: { properties: { "class.sapphire-listbox__item": "true", "class.is-disabled": "this.disabled", "class.sapphire-listbox__item--danger": "this.danger" } }, hostDirectives: [{ directive: i1$1.CdkMenuItem, inputs: ["cdkMenuItemDisabled", "disabled", "cdkMenuitemTypeaheadLabel", "typeaheadLabel"], outputs: ["cdkMenuItemTriggered", "triggered"] }, { directive: UseComponentStyles }], ngImport: i0, template: "<div class=\"sapphire-listbox__content\" _spUseComponentStyles>\n <ng-content select=\"sp-menu-item-icon\"></ng-content>\n <div class=\"sapphire-listbox__text-container\" _spUseComponentStyles>\n <div class=\"sapphire-listbox__primary-text\" _spUseComponentStyles>\n <ng-content select=\"sp-menu-primary-text\"></ng-content>\n <!-- If nothing matches other ng-content selectors then render it as primary text -->\n <ng-content></ng-content>\n </div>\n <ng-content select=\"sp-menu-secondary-text\"></ng-content>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: UseComponentStyles, selector: "[_spUseComponentStyles]" }] });
|
|
2198
2253
|
__decorate([
|
|
2199
2254
|
CoerceBoolean
|
|
2200
2255
|
], MenuItemComponent.prototype, "disabled", void 0);
|
|
@@ -2391,20 +2446,20 @@ class MenuTriggerDirective {
|
|
|
2391
2446
|
return result.withViewportMargin(placement.includes('end') ? 0 : 6);
|
|
2392
2447
|
};
|
|
2393
2448
|
const originalOpen = menuTrigger.open;
|
|
2394
|
-
menuTrigger.open =
|
|
2449
|
+
menuTrigger.open = () => {
|
|
2395
2450
|
// @ts-expect-error accessing private method
|
|
2396
2451
|
menuTrigger.overlayRef?.updatePositionStrategy(
|
|
2397
2452
|
// @ts-expect-error accessing private method
|
|
2398
2453
|
menuTrigger._getOverlayPositionStrategy());
|
|
2399
|
-
originalOpen.call(
|
|
2454
|
+
originalOpen.call(menuTrigger);
|
|
2400
2455
|
};
|
|
2401
2456
|
}
|
|
2402
2457
|
getPlacementValue() {
|
|
2403
2458
|
return `${this.direction} ${this.align}`;
|
|
2404
2459
|
}
|
|
2405
2460
|
}
|
|
2406
|
-
MenuTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuTriggerDirective, deps: [{ token: i1$
|
|
2407
|
-
MenuTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: MenuTriggerDirective, selector: "[spMenuTriggerFor]", inputs: { align: ["spMenuTriggerAlign", "align"], direction: ["spMenuTriggerDirection", "direction"] }, host: { listeners: { "keydown.space": "handleSpace()", "keydown.escape": "handleEscape()" }, properties: { "class.is-active": "isOpen()" } }, exportAs: ["spMenuTrigger"], hostDirectives: [{ directive: i1$
|
|
2461
|
+
MenuTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuTriggerDirective, deps: [{ token: i1$1.CdkMenuTrigger }], target: i0.ɵɵFactoryTarget.Directive });
|
|
2462
|
+
MenuTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: MenuTriggerDirective, selector: "[spMenuTriggerFor]", inputs: { align: ["spMenuTriggerAlign", "align"], direction: ["spMenuTriggerDirection", "direction"] }, host: { listeners: { "keydown.space": "handleSpace()", "keydown.escape": "handleEscape()" }, properties: { "class.is-active": "isOpen()" } }, providers: [{ provide: Overlay, useClass: SapphireOverlay }], exportAs: ["spMenuTrigger"], hostDirectives: [{ directive: i1$1.CdkMenuTrigger, inputs: ["cdkMenuTriggerFor", "spMenuTriggerFor"], outputs: ["cdkMenuOpened", "spMenuOpened", "cdkMenuClosed", "spMenuClosed"] }], ngImport: i0 });
|
|
2408
2463
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuTriggerDirective, decorators: [{
|
|
2409
2464
|
type: Directive,
|
|
2410
2465
|
args: [{
|
|
@@ -2416,12 +2471,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
2416
2471
|
outputs: ['cdkMenuOpened: spMenuOpened', 'cdkMenuClosed: spMenuClosed'],
|
|
2417
2472
|
},
|
|
2418
2473
|
],
|
|
2474
|
+
// CdkMenuTrigger uses Overlay directly
|
|
2475
|
+
providers: [{ provide: Overlay, useClass: SapphireOverlay }],
|
|
2419
2476
|
exportAs: 'spMenuTrigger',
|
|
2420
2477
|
host: {
|
|
2421
2478
|
'[class.is-active]': 'isOpen()',
|
|
2422
2479
|
},
|
|
2423
2480
|
}]
|
|
2424
|
-
}], ctorParameters: function () { return [{ type: i1$
|
|
2481
|
+
}], ctorParameters: function () { return [{ type: i1$1.CdkMenuTrigger }]; }, propDecorators: { align: [{
|
|
2425
2482
|
type: Input,
|
|
2426
2483
|
args: ['spMenuTriggerAlign']
|
|
2427
2484
|
}], direction: [{
|
|
@@ -2443,14 +2500,14 @@ class MenuSectionComponent {
|
|
|
2443
2500
|
return this.menu.items?.first === this.firstMenuItem;
|
|
2444
2501
|
}
|
|
2445
2502
|
}
|
|
2446
|
-
MenuSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuSectionComponent, deps: [{ token: i1$
|
|
2447
|
-
MenuSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: MenuSectionComponent, selector: "sp-menu-section", host: { properties: { "class.sapphire-listbox__section": "true" } }, queries: [{ propertyName: "firstMenuItem", first: true, predicate: CdkMenuItem, descendants: true }], hostDirectives: [{ directive: i1$
|
|
2503
|
+
MenuSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuSectionComponent, deps: [{ token: i1$1.CdkMenu }], target: i0.ɵɵFactoryTarget.Component });
|
|
2504
|
+
MenuSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: MenuSectionComponent, selector: "sp-menu-section", host: { properties: { "class.sapphire-listbox__section": "true" } }, queries: [{ propertyName: "firstMenuItem", first: true, predicate: CdkMenuItem, descendants: true }], hostDirectives: [{ directive: i1$1.CdkMenuGroup }, { directive: UseComponentStyles }], ngImport: i0, template: "<div\n *ngIf=\"!_isFirstSection()\"\n class=\"sapphire-listbox__separator\"\n _spUseComponentStyles\n></div>\n<ng-content></ng-content>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: UseComponentStyles, selector: "[_spUseComponentStyles]" }] });
|
|
2448
2505
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuSectionComponent, decorators: [{
|
|
2449
2506
|
type: Component,
|
|
2450
2507
|
args: [{ selector: 'sp-menu-section', hostDirectives: [CdkMenuGroup, UseComponentStyles], host: {
|
|
2451
2508
|
'[class.sapphire-listbox__section]': 'true',
|
|
2452
2509
|
}, template: "<div\n *ngIf=\"!_isFirstSection()\"\n class=\"sapphire-listbox__separator\"\n _spUseComponentStyles\n></div>\n<ng-content></ng-content>\n" }]
|
|
2453
|
-
}], ctorParameters: function () { return [{ type: i1$
|
|
2510
|
+
}], ctorParameters: function () { return [{ type: i1$1.CdkMenu }]; }, propDecorators: { firstMenuItem: [{
|
|
2454
2511
|
type: ContentChild,
|
|
2455
2512
|
args: [CdkMenuItem]
|
|
2456
2513
|
}] } });
|
|
@@ -2559,9 +2616,9 @@ class PopoverTriggerDirective {
|
|
|
2559
2616
|
get getPopoverId() {
|
|
2560
2617
|
return this.overlayRef?.hostElement.querySelector('[role="dialog"]')?.id;
|
|
2561
2618
|
}
|
|
2562
|
-
constructor(changeDetectorRef,
|
|
2619
|
+
constructor(changeDetectorRef, overlay, viewContainerRef, elementRef, injector) {
|
|
2563
2620
|
this.changeDetectorRef = changeDetectorRef;
|
|
2564
|
-
this.
|
|
2621
|
+
this.overlay = overlay;
|
|
2565
2622
|
this.viewContainerRef = viewContainerRef;
|
|
2566
2623
|
this.elementRef = elementRef;
|
|
2567
2624
|
this.injector = injector;
|
|
@@ -2614,7 +2671,7 @@ class PopoverTriggerDirective {
|
|
|
2614
2671
|
if (!this.isOpen() && this.templateRef != null && !this.disabled) {
|
|
2615
2672
|
this.opened.next();
|
|
2616
2673
|
if (!this.overlayRef) {
|
|
2617
|
-
this.overlayRef = this.
|
|
2674
|
+
this.overlayRef = this.overlay.create(this.getOverlayConfig());
|
|
2618
2675
|
this.overlayRef.updatePositionStrategy(this.getOverlayPositionStrategy());
|
|
2619
2676
|
this.overlayRef.detachments().subscribe(() => {
|
|
2620
2677
|
this.closed.next();
|
|
@@ -2725,9 +2782,9 @@ class PopoverTriggerDirective {
|
|
|
2725
2782
|
return new OverlayConfig({
|
|
2726
2783
|
scrollStrategy: this.nonModal
|
|
2727
2784
|
? this.closeOnScroll
|
|
2728
|
-
? this.
|
|
2729
|
-
: this.
|
|
2730
|
-
: this.
|
|
2785
|
+
? this.overlay.scrollStrategies.close()
|
|
2786
|
+
: this.overlay.scrollStrategies.reposition()
|
|
2787
|
+
: this.overlay.scrollStrategies.block(),
|
|
2731
2788
|
// Including a transparent backdrop according to the latest decision of making popovers modal.
|
|
2732
2789
|
hasBackdrop: !this.nonModal,
|
|
2733
2790
|
backdropClass: 'cdk-overlay-transparent-backdrop',
|
|
@@ -2744,7 +2801,7 @@ class PopoverTriggerDirective {
|
|
|
2744
2801
|
}
|
|
2745
2802
|
getOverlayPositionStrategy() {
|
|
2746
2803
|
const placement = this.placement || 'bottom';
|
|
2747
|
-
return (this.
|
|
2804
|
+
return (this.overlay
|
|
2748
2805
|
.position()
|
|
2749
2806
|
.flexibleConnectedTo(this.elementRef)
|
|
2750
2807
|
.withLockedPosition()
|
|
@@ -2773,7 +2830,7 @@ class PopoverTriggerDirective {
|
|
|
2773
2830
|
.withViewportMargin(placement.includes('end') ? 0 : 6));
|
|
2774
2831
|
}
|
|
2775
2832
|
}
|
|
2776
|
-
PopoverTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PopoverTriggerDirective, deps: [{ token: i0.ChangeDetectorRef }, { token:
|
|
2833
|
+
PopoverTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PopoverTriggerDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: SapphireOverlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
|
|
2777
2834
|
PopoverTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: PopoverTriggerDirective, selector: "[spPopoverTriggerFor]", inputs: { placement: ["spPopoverPlacement", "placement"], templateRef: ["spPopoverTriggerFor", "templateRef"], nonModal: ["spPopoverNonModal", "nonModal"], openOnPressStart: ["spPopoverTriggerOpenOnPressStart", "openOnPressStart"], closeOnScroll: ["spPopoverTriggerCloseOnScroll", "closeOnScroll"], disabled: ["spPopoverTriggerDisabled", "disabled"], disablePushInsideViewport: ["spPopoverDisablePushInsideViewport", "disablePushInsideViewport"] }, outputs: { opened: "spPopoverTriggerOpened", closed: "spPopoverTriggerClosed" }, host: { listeners: { "mousedown": "handleMousedown($event)", "click": "handleClick($event)", "keydown.tab": "handleTab()", "focusout": "onFocusout($event)", "keydown": "handleKeyDown($event)" }, properties: { "class.is-active": "isOpen()", "attr.aria-expanded": "isOpen()", "attr.aria-controls": "this.getPopoverId" } }, providers: [
|
|
2778
2835
|
{ provide: POPOVER_TRIGGER, useExisting: PopoverTriggerDirective },
|
|
2779
2836
|
], exportAs: ["spPopoverTrigger"], ngImport: i0 });
|
|
@@ -2805,7 +2862,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
2805
2862
|
},
|
|
2806
2863
|
exportAs: 'spPopoverTrigger',
|
|
2807
2864
|
}]
|
|
2808
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type:
|
|
2865
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SapphireOverlay }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i0.Injector }]; }, propDecorators: { placement: [{
|
|
2809
2866
|
type: Input,
|
|
2810
2867
|
args: ['spPopoverPlacement']
|
|
2811
2868
|
}], templateRef: [{
|
|
@@ -2939,7 +2996,7 @@ class PopoverComponent {
|
|
|
2939
2996
|
}
|
|
2940
2997
|
}
|
|
2941
2998
|
PopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PopoverComponent, deps: [{ token: POPOVER_TRIGGER, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
2942
|
-
PopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: PopoverComponent, selector: "sp-popover", inputs: { noPadding: "noPadding", noMaxWidth: "noMaxWidth", noAutoFocus: "noAutoFocus", trapFocus: "trapFocus" }, host: { attributes: { "role": "presentation" }, listeners: { "keydown.Escape": "handleEscape($event)" }, properties: { "class.sapphire-popover": "true", "class.sapphire-popover--padded": "!noPadding", "class.sapphire-popover--max-width": "!noMaxWidth" } }, queries: [{ propertyName: "title", first: true, predicate: PopoverTitleDirective, descendants: true }], viewQueries: [{ propertyName: "contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true, read: ElementRef }], hostDirectives: [{ directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }], ngImport: i0, template: "<!--\n NOTE: cdkTrapFocus is required for cdkTrapFocusAutoCapture to work, which would be similar to\n <FocusScope autoFocus /> in react-aria.\n\n It prevents focus from going out of popover by bringing it back to the first\n focusable element.\n\n We sometimes counter this in (cdkFocusChange) and sometimes don't, based on\n the \"trapFocus\" input.\n -->\n<div\n #contentWrapper\n [id]=\"ID\"\n role=\"dialog\"\n tabindex=\"-1\"\n cdkMonitorSubtreeFocus\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"!noAutoFocus\"\n class=\"dialog\"\n [attr.aria-labelledby]=\"title?.ID\"\n (cdkFocusChange)=\"_contentFocusChanged($event)\"\n>\n <ng-content></ng-content>\n</div>\n", styles: ["@keyframes fade-in{0%{opacity:0}to{opacity:1}}.sapphire-popover{box-sizing:border-box;background-color:var(--sapphire-semantic-color-background-popover-default);box-shadow:var(--sapphire-semantic-shadow-popover);animation:fade-in var(--sapphire-semantic-time-fade-quick) ease-in-out;border-radius:var(--sapphire-semantic-size-radius-popover);overflow:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-popover--padded{padding:var(--sapphire-semantic-size-spacing-
|
|
2999
|
+
PopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: PopoverComponent, selector: "sp-popover", inputs: { noPadding: "noPadding", noMaxWidth: "noMaxWidth", noAutoFocus: "noAutoFocus", trapFocus: "trapFocus" }, host: { attributes: { "role": "presentation" }, listeners: { "keydown.Escape": "handleEscape($event)" }, properties: { "class.sapphire-popover": "true", "class.sapphire-popover--padded": "!noPadding", "class.sapphire-popover--max-width": "!noMaxWidth" } }, queries: [{ propertyName: "title", first: true, predicate: PopoverTitleDirective, descendants: true }], viewQueries: [{ propertyName: "contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true, read: ElementRef }], hostDirectives: [{ directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }], ngImport: i0, template: "<!--\n NOTE: cdkTrapFocus is required for cdkTrapFocusAutoCapture to work, which would be similar to\n <FocusScope autoFocus /> in react-aria.\n\n It prevents focus from going out of popover by bringing it back to the first\n focusable element.\n\n We sometimes counter this in (cdkFocusChange) and sometimes don't, based on\n the \"trapFocus\" input.\n -->\n<div\n #contentWrapper\n [id]=\"ID\"\n role=\"dialog\"\n tabindex=\"-1\"\n cdkMonitorSubtreeFocus\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"!noAutoFocus\"\n class=\"dialog\"\n [attr.aria-labelledby]=\"title?.ID\"\n (cdkFocusChange)=\"_contentFocusChanged($event)\"\n>\n <ng-content></ng-content>\n</div>\n", styles: ["@keyframes fade-in{0%{opacity:0}to{opacity:1}}.sapphire-popover{box-sizing:border-box;background-color:var(--sapphire-semantic-color-background-popover-default);box-shadow:var(--sapphire-semantic-shadow-popover);animation:fade-in var(--sapphire-semantic-time-fade-quick) ease-in-out;border-radius:var(--sapphire-semantic-size-radius-popover);overflow:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-popover--padded{padding:var(--sapphire-semantic-size-spacing-container-horizontal-sm)}.sapphire-popover--max-width{max-width:var(--sapphire-global-size-generic-1120)}.dialog{outline:none}\n"], dependencies: [{ kind: "directive", type: i2$2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i2$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }] });
|
|
2943
3000
|
__decorate([
|
|
2944
3001
|
CoerceBoolean
|
|
2945
3002
|
], PopoverComponent.prototype, "noPadding", void 0);
|
|
@@ -2959,7 +3016,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
2959
3016
|
'[class.sapphire-popover--padded]': '!noPadding',
|
|
2960
3017
|
'[class.sapphire-popover--max-width]': '!noMaxWidth',
|
|
2961
3018
|
role: 'presentation',
|
|
2962
|
-
}, hostDirectives: [ThemeCheckDirective, UseComponentStylesOnHost], template: "<!--\n NOTE: cdkTrapFocus is required for cdkTrapFocusAutoCapture to work, which would be similar to\n <FocusScope autoFocus /> in react-aria.\n\n It prevents focus from going out of popover by bringing it back to the first\n focusable element.\n\n We sometimes counter this in (cdkFocusChange) and sometimes don't, based on\n the \"trapFocus\" input.\n -->\n<div\n #contentWrapper\n [id]=\"ID\"\n role=\"dialog\"\n tabindex=\"-1\"\n cdkMonitorSubtreeFocus\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"!noAutoFocus\"\n class=\"dialog\"\n [attr.aria-labelledby]=\"title?.ID\"\n (cdkFocusChange)=\"_contentFocusChanged($event)\"\n>\n <ng-content></ng-content>\n</div>\n", styles: ["@keyframes fade-in{0%{opacity:0}to{opacity:1}}.sapphire-popover{box-sizing:border-box;background-color:var(--sapphire-semantic-color-background-popover-default);box-shadow:var(--sapphire-semantic-shadow-popover);animation:fade-in var(--sapphire-semantic-time-fade-quick) ease-in-out;border-radius:var(--sapphire-semantic-size-radius-popover);overflow:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-popover--padded{padding:var(--sapphire-semantic-size-spacing-
|
|
3019
|
+
}, hostDirectives: [ThemeCheckDirective, UseComponentStylesOnHost], template: "<!--\n NOTE: cdkTrapFocus is required for cdkTrapFocusAutoCapture to work, which would be similar to\n <FocusScope autoFocus /> in react-aria.\n\n It prevents focus from going out of popover by bringing it back to the first\n focusable element.\n\n We sometimes counter this in (cdkFocusChange) and sometimes don't, based on\n the \"trapFocus\" input.\n -->\n<div\n #contentWrapper\n [id]=\"ID\"\n role=\"dialog\"\n tabindex=\"-1\"\n cdkMonitorSubtreeFocus\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"!noAutoFocus\"\n class=\"dialog\"\n [attr.aria-labelledby]=\"title?.ID\"\n (cdkFocusChange)=\"_contentFocusChanged($event)\"\n>\n <ng-content></ng-content>\n</div>\n", styles: ["@keyframes fade-in{0%{opacity:0}to{opacity:1}}.sapphire-popover{box-sizing:border-box;background-color:var(--sapphire-semantic-color-background-popover-default);box-shadow:var(--sapphire-semantic-shadow-popover);animation:fade-in var(--sapphire-semantic-time-fade-quick) ease-in-out;border-radius:var(--sapphire-semantic-size-radius-popover);overflow:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-popover--padded{padding:var(--sapphire-semantic-size-spacing-container-horizontal-sm)}.sapphire-popover--max-width{max-width:var(--sapphire-global-size-generic-1120)}.dialog{outline:none}\n"] }]
|
|
2963
3020
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
2964
3021
|
type: Optional
|
|
2965
3022
|
}, {
|
|
@@ -3188,6 +3245,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
3188
3245
|
class TextFieldComponent {
|
|
3189
3246
|
constructor(field) {
|
|
3190
3247
|
this.field = field;
|
|
3248
|
+
this.hasDefaultWidth = true;
|
|
3191
3249
|
}
|
|
3192
3250
|
isCharacterCounterExceeded() {
|
|
3193
3251
|
return ((this._inputDirective?.valueLength ?? 0) >
|
|
@@ -3206,7 +3264,7 @@ TextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
|
|
|
3206
3264
|
provide: FieldControl,
|
|
3207
3265
|
useExisting: forwardRef(() => TextFieldComponent),
|
|
3208
3266
|
},
|
|
3209
|
-
], queries: [{ propertyName: "inputElement", first: true, predicate: TextFieldInputDirective, descendants: true, read: ElementRef }, { propertyName: "_inputDirective", first: true, predicate: TextFieldInputDirective, descendants: true }], hostDirectives: [{ directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }], ngImport: i0, template: "<ng-content\n select=\"sp-text-field-prefix\"\n *ngIf=\"!_inputDirective?.textarea\"\n></ng-content>\n<ng-content select=\"input\"></ng-content>\n<ng-content\n select=\"sp-text-field-postfix\"\n *ngIf=\"!_inputDirective?.textarea\"\n></ng-content>\n<ng-content select=\"textarea\"></ng-content>\n\n<span\n *ngIf=\"characterCounterMax !== undefined\"\n spFieldNoteSuffix\n class=\"sapphire-text-field__counter\"\n [class.sapphire-text-field__counter--error]=\"isCharacterCounterExceeded()\"\n >{{ _inputDirective?.valueLength }}/{{ characterCounterMax }}</span\n>\n", styles: [".sapphire-text-field{
|
|
3267
|
+
], queries: [{ propertyName: "inputElement", first: true, predicate: TextFieldInputDirective, descendants: true, read: ElementRef }, { propertyName: "_inputDirective", first: true, predicate: TextFieldInputDirective, descendants: true }], hostDirectives: [{ directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }], ngImport: i0, template: "<ng-content\n select=\"sp-text-field-prefix\"\n *ngIf=\"!_inputDirective?.textarea\"\n></ng-content>\n<ng-content select=\"input\"></ng-content>\n<ng-content\n select=\"sp-text-field-postfix\"\n *ngIf=\"!_inputDirective?.textarea\"\n></ng-content>\n<ng-content select=\"textarea\"></ng-content>\n\n<span\n *ngIf=\"characterCounterMax !== undefined\"\n spFieldNoteSuffix\n class=\"sapphire-text-field__counter\"\n [class.sapphire-text-field__counter--error]=\"isCharacterCounterExceeded()\"\n >{{ _inputDirective?.valueLength }}/{{ characterCounterMax }}</span\n>\n", styles: [".sapphire-text-field{outline:solid var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-field-default);outline-offset:calc(0px - var(--sapphire-semantic-size-border-sm));box-sizing:border-box;overflow-x:hidden;display:flex;align-items:center;border-radius:var(--sapphire-semantic-size-radius-sm);cursor:text;color:var(--sapphire-semantic-color-content-default-primary);background-color:var(--sapphire-semantic-color-background-field-default);height:var(--sapphire-semantic-size-height-input-lg);font-family:var(--sapphire-semantic-font-name-default);font-size:var(--sapphire-semantic-size-font-control-default);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-text-field--md{height:var(--sapphire-semantic-size-height-input-md);font-size:var(--sapphire-semantic-size-font-control-md)}.sapphire-text-field__input{box-sizing:border-box;width:100%;height:100%;margin:0;padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-lg);line-height:var(--sapphire-semantic-size-line-height-md);font-family:inherit;font-size:inherit;font-weight:var(--sapphire-semantic-font-weight-default-regular);caret-color:var(--sapphire-semantic-color-cursor-default);color:inherit;background-color:transparent;border:none;outline:none}.sapphire-text-field--md .sapphire-text-field__input{padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-md)}.sapphire-text-field__input::placeholder{opacity:1;color:var(--sapphire-semantic-color-content-default-secondary)}.sapphire-text-field__input--align-right{text-align:right}.sapphire-text-field:not(.sapphire-text-field--multiline){gap:var(--sapphire-semantic-size-spacing-20)}.sapphire-text-field:has(.sapphire-text-field__prefix) .sapphire-text-field__input{padding-left:0}.sapphire-text-field .sapphire-text-field__prefix{color:var(--sapphire-semantic-color-content-default-primary);flex-shrink:0;z-index:1;margin-left:var(--sapphire-semantic-size-spacing-control-horizontal-lg)}.sapphire-text-field--md .sapphire-text-field__prefix{margin-left:var(--sapphire-semantic-size-spacing-control-horizontal-md)}.sapphire-text-field:has(.sapphire-text-field__postfix) .sapphire-text-field__input{padding-right:0}.sapphire-text-field .sapphire-text-field__postfix{color:var(--sapphire-semantic-color-content-default-primary);flex-shrink:0;z-index:1;margin-right:var(--sapphire-semantic-size-spacing-control-horizontal-lg)}.sapphire-text-field--md .sapphire-text-field__postfix{margin-right:var(--sapphire-semantic-size-spacing-control-horizontal-md)}.sapphire-text-field .sapphire-text-field__prefix--icon,.sapphire-text-field .sapphire-text-field__postfix--icon{width:var(--sapphire-semantic-size-icon-lg);height:var(--sapphire-semantic-size-icon-lg)}.sapphire-text-field--md .sapphire-text-field__prefix--icon,.sapphire-text-field--md .sapphire-text-field__postfix--icon{width:var(--sapphire-semantic-size-icon-md);height:var(--sapphire-semantic-size-icon-md)}.sapphire-text-field--multiline{display:block;line-height:0;height:unset;padding:0}.sapphire-text-field--multiline .sapphire-text-field__input{resize:none;width:100%;padding:var(--sapphire-semantic-size-spacing-control-vertical-lg) var(--sapphire-semantic-size-spacing-control-horizontal-lg);scroll-padding-bottom:var(--sapphire-semantic-size-spacing-control-vertical-lg)}.sapphire-text-field--md .sapphire-text-field--multiline .sapphire-text-field__input{padding:var(--sapphire-semantic-size-spacing-control-vertical-md) var(--sapphire-semantic-size-spacing-control-horizontal-md);scroll-padding-bottom:var(--sapphire-semantic-size-spacing-control-vertical-md)}.sapphire-text-field--multiline.sapphire-text-field--resizable .sapphire-text-field__input{resize:vertical}.sapphire-text-field__counter{color:var(--sapphire-semantic-color-content-default-secondary);padding-left:var(--sapphire-semantic-size-spacing-20);margin-left:auto}.sapphire-text-field__counter--error{color:var(--sapphire-semantic-color-content-negative-secondary-default)}.sapphire-text-field--error{outline:solid var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-field-error)}.sapphire-text-field.is-focus,.sapphire-text-field:focus-within{outline:solid var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring);outline-offset:calc(0px - var(--sapphire-semantic-size-focus-ring))}.sapphire-text-field.is-focus .sapphire-text-field__input:-webkit-autofill,.sapphire-text-field:focus-within .sapphire-text-field__input:-webkit-autofill{box-shadow:0 0 0 var(--sapphire-semantic-size-height-input-lg) inset var(--sapphire-semantic-color-background-surface)!important}.sapphire-text-field.is-focus .sapphire-text-field__input:autofill,.sapphire-text-field:focus-within .sapphire-text-field__input:autofill{box-shadow:0 0 0 var(--sapphire-semantic-size-height-input-lg) inset var(--sapphire-semantic-color-background-surface)!important}.sapphire-text-field__stepper{display:flex;flex-direction:column;justify-items:stretch;padding:var(--sapphire-semantic-size-spacing-5) calc(var(--sapphire-semantic-size-spacing-5) + var(--sapphire-semantic-size-border-sm));gap:var(--sapphire-semantic-size-spacing-5)}.sapphire-text-field:has(.sapphire-text-field__stepper) .sapphire-text-field__postfix{margin-right:0}.sapphire-text-field__stepper-button{display:flex;align-items:center;justify-content:center;width:var(--sapphire-semantic-size-icon-md);margin:0;padding:0;max-width:-moz-fit-content;max-width:fit-content;flex-shrink:0;border-radius:var(--sapphire-semantic-size-radius-sm);border-style:solid;border-width:0;border-color:transparent;transition-property:opacity,background-color,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:ease-in-out;cursor:pointer;background-color:var(--sapphire-semantic-color-background-action-tertiary-default);color:var(--sapphire-semantic-color-content-action-tertiary-default)}.sapphire-text-field__stepper-button:not(:active):not(.is-active):not(.js-hover):hover,.sapphire-text-field__stepper-button:not(:active):not(.is-active).is-hover{background-color:var(--sapphire-semantic-color-background-action-tertiary-hover);color:var(--sapphire-semantic-color-content-action-tertiary-hover)}.sapphire-text-field__stepper-button.is-active,.sapphire-text-field__stepper-button:active{background-color:var(--sapphire-semantic-color-background-action-tertiary-active);color:var(--sapphire-semantic-color-content-action-tertiary-active)}.sapphire-text-field--md.sapphire-text-field__stepper-button{width:var(--sapphire-semantic-size-icon-sm)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: FieldNoteSuffixDirective, selector: "[spFieldNoteSuffix]" }] });
|
|
3210
3268
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TextFieldComponent, decorators: [{
|
|
3211
3269
|
type: Component,
|
|
3212
3270
|
args: [{ selector: 'sp-text-field', host: {
|
|
@@ -3219,7 +3277,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
3219
3277
|
provide: FieldControl,
|
|
3220
3278
|
useExisting: forwardRef(() => TextFieldComponent),
|
|
3221
3279
|
},
|
|
3222
|
-
], hostDirectives: [ThemeCheckDirective, UseComponentStylesOnHost], template: "<ng-content\n select=\"sp-text-field-prefix\"\n *ngIf=\"!_inputDirective?.textarea\"\n></ng-content>\n<ng-content select=\"input\"></ng-content>\n<ng-content\n select=\"sp-text-field-postfix\"\n *ngIf=\"!_inputDirective?.textarea\"\n></ng-content>\n<ng-content select=\"textarea\"></ng-content>\n\n<span\n *ngIf=\"characterCounterMax !== undefined\"\n spFieldNoteSuffix\n class=\"sapphire-text-field__counter\"\n [class.sapphire-text-field__counter--error]=\"isCharacterCounterExceeded()\"\n >{{ _inputDirective?.valueLength }}/{{ characterCounterMax }}</span\n>\n", styles: [".sapphire-text-field{
|
|
3280
|
+
], hostDirectives: [ThemeCheckDirective, UseComponentStylesOnHost], template: "<ng-content\n select=\"sp-text-field-prefix\"\n *ngIf=\"!_inputDirective?.textarea\"\n></ng-content>\n<ng-content select=\"input\"></ng-content>\n<ng-content\n select=\"sp-text-field-postfix\"\n *ngIf=\"!_inputDirective?.textarea\"\n></ng-content>\n<ng-content select=\"textarea\"></ng-content>\n\n<span\n *ngIf=\"characterCounterMax !== undefined\"\n spFieldNoteSuffix\n class=\"sapphire-text-field__counter\"\n [class.sapphire-text-field__counter--error]=\"isCharacterCounterExceeded()\"\n >{{ _inputDirective?.valueLength }}/{{ characterCounterMax }}</span\n>\n", styles: [".sapphire-text-field{outline:solid var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-field-default);outline-offset:calc(0px - var(--sapphire-semantic-size-border-sm));box-sizing:border-box;overflow-x:hidden;display:flex;align-items:center;border-radius:var(--sapphire-semantic-size-radius-sm);cursor:text;color:var(--sapphire-semantic-color-content-default-primary);background-color:var(--sapphire-semantic-color-background-field-default);height:var(--sapphire-semantic-size-height-input-lg);font-family:var(--sapphire-semantic-font-name-default);font-size:var(--sapphire-semantic-size-font-control-default);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-text-field--md{height:var(--sapphire-semantic-size-height-input-md);font-size:var(--sapphire-semantic-size-font-control-md)}.sapphire-text-field__input{box-sizing:border-box;width:100%;height:100%;margin:0;padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-lg);line-height:var(--sapphire-semantic-size-line-height-md);font-family:inherit;font-size:inherit;font-weight:var(--sapphire-semantic-font-weight-default-regular);caret-color:var(--sapphire-semantic-color-cursor-default);color:inherit;background-color:transparent;border:none;outline:none}.sapphire-text-field--md .sapphire-text-field__input{padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-md)}.sapphire-text-field__input::placeholder{opacity:1;color:var(--sapphire-semantic-color-content-default-secondary)}.sapphire-text-field__input--align-right{text-align:right}.sapphire-text-field:not(.sapphire-text-field--multiline){gap:var(--sapphire-semantic-size-spacing-20)}.sapphire-text-field:has(.sapphire-text-field__prefix) .sapphire-text-field__input{padding-left:0}.sapphire-text-field .sapphire-text-field__prefix{color:var(--sapphire-semantic-color-content-default-primary);flex-shrink:0;z-index:1;margin-left:var(--sapphire-semantic-size-spacing-control-horizontal-lg)}.sapphire-text-field--md .sapphire-text-field__prefix{margin-left:var(--sapphire-semantic-size-spacing-control-horizontal-md)}.sapphire-text-field:has(.sapphire-text-field__postfix) .sapphire-text-field__input{padding-right:0}.sapphire-text-field .sapphire-text-field__postfix{color:var(--sapphire-semantic-color-content-default-primary);flex-shrink:0;z-index:1;margin-right:var(--sapphire-semantic-size-spacing-control-horizontal-lg)}.sapphire-text-field--md .sapphire-text-field__postfix{margin-right:var(--sapphire-semantic-size-spacing-control-horizontal-md)}.sapphire-text-field .sapphire-text-field__prefix--icon,.sapphire-text-field .sapphire-text-field__postfix--icon{width:var(--sapphire-semantic-size-icon-lg);height:var(--sapphire-semantic-size-icon-lg)}.sapphire-text-field--md .sapphire-text-field__prefix--icon,.sapphire-text-field--md .sapphire-text-field__postfix--icon{width:var(--sapphire-semantic-size-icon-md);height:var(--sapphire-semantic-size-icon-md)}.sapphire-text-field--multiline{display:block;line-height:0;height:unset;padding:0}.sapphire-text-field--multiline .sapphire-text-field__input{resize:none;width:100%;padding:var(--sapphire-semantic-size-spacing-control-vertical-lg) var(--sapphire-semantic-size-spacing-control-horizontal-lg);scroll-padding-bottom:var(--sapphire-semantic-size-spacing-control-vertical-lg)}.sapphire-text-field--md .sapphire-text-field--multiline .sapphire-text-field__input{padding:var(--sapphire-semantic-size-spacing-control-vertical-md) var(--sapphire-semantic-size-spacing-control-horizontal-md);scroll-padding-bottom:var(--sapphire-semantic-size-spacing-control-vertical-md)}.sapphire-text-field--multiline.sapphire-text-field--resizable .sapphire-text-field__input{resize:vertical}.sapphire-text-field__counter{color:var(--sapphire-semantic-color-content-default-secondary);padding-left:var(--sapphire-semantic-size-spacing-20);margin-left:auto}.sapphire-text-field__counter--error{color:var(--sapphire-semantic-color-content-negative-secondary-default)}.sapphire-text-field--error{outline:solid var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-field-error)}.sapphire-text-field.is-focus,.sapphire-text-field:focus-within{outline:solid var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring);outline-offset:calc(0px - var(--sapphire-semantic-size-focus-ring))}.sapphire-text-field.is-focus .sapphire-text-field__input:-webkit-autofill,.sapphire-text-field:focus-within .sapphire-text-field__input:-webkit-autofill{box-shadow:0 0 0 var(--sapphire-semantic-size-height-input-lg) inset var(--sapphire-semantic-color-background-surface)!important}.sapphire-text-field.is-focus .sapphire-text-field__input:autofill,.sapphire-text-field:focus-within .sapphire-text-field__input:autofill{box-shadow:0 0 0 var(--sapphire-semantic-size-height-input-lg) inset var(--sapphire-semantic-color-background-surface)!important}.sapphire-text-field__stepper{display:flex;flex-direction:column;justify-items:stretch;padding:var(--sapphire-semantic-size-spacing-5) calc(var(--sapphire-semantic-size-spacing-5) + var(--sapphire-semantic-size-border-sm));gap:var(--sapphire-semantic-size-spacing-5)}.sapphire-text-field:has(.sapphire-text-field__stepper) .sapphire-text-field__postfix{margin-right:0}.sapphire-text-field__stepper-button{display:flex;align-items:center;justify-content:center;width:var(--sapphire-semantic-size-icon-md);margin:0;padding:0;max-width:-moz-fit-content;max-width:fit-content;flex-shrink:0;border-radius:var(--sapphire-semantic-size-radius-sm);border-style:solid;border-width:0;border-color:transparent;transition-property:opacity,background-color,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:ease-in-out;cursor:pointer;background-color:var(--sapphire-semantic-color-background-action-tertiary-default);color:var(--sapphire-semantic-color-content-action-tertiary-default)}.sapphire-text-field__stepper-button:not(:active):not(.is-active):not(.js-hover):hover,.sapphire-text-field__stepper-button:not(:active):not(.is-active).is-hover{background-color:var(--sapphire-semantic-color-background-action-tertiary-hover);color:var(--sapphire-semantic-color-content-action-tertiary-hover)}.sapphire-text-field__stepper-button.is-active,.sapphire-text-field__stepper-button:active{background-color:var(--sapphire-semantic-color-background-action-tertiary-active);color:var(--sapphire-semantic-color-content-action-tertiary-active)}.sapphire-text-field--md.sapphire-text-field__stepper-button{width:var(--sapphire-semantic-size-icon-sm)}\n"] }]
|
|
3223
3281
|
}], ctorParameters: function () { return [{ type: FieldComponent, decorators: [{
|
|
3224
3282
|
type: Optional
|
|
3225
3283
|
}] }]; }, propDecorators: { characterCounterMax: [{
|
|
@@ -3407,7 +3465,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
3407
3465
|
class OptionIconDirective {
|
|
3408
3466
|
}
|
|
3409
3467
|
OptionIconDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: OptionIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3410
|
-
OptionIconDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: OptionIconDirective, selector: "sp-option-icon", viewQueries: [{ propertyName: "contentPortal", first: true, predicate: CdkPortal, descendants: true }], ngImport: i0, template: '<ng-template cdkPortal><ng-content></ng-content></ng-template>', isInline: true, dependencies: [{ kind: "directive", type: i1
|
|
3468
|
+
OptionIconDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: OptionIconDirective, selector: "sp-option-icon", viewQueries: [{ propertyName: "contentPortal", first: true, predicate: CdkPortal, descendants: true }], ngImport: i0, template: '<ng-template cdkPortal><ng-content></ng-content></ng-template>', isInline: true, dependencies: [{ kind: "directive", type: i1.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }] });
|
|
3411
3469
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: OptionIconDirective, decorators: [{
|
|
3412
3470
|
type: Component,
|
|
3413
3471
|
args: [{
|
|
@@ -3425,7 +3483,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
3425
3483
|
class OptionSecondaryTextDirective {
|
|
3426
3484
|
}
|
|
3427
3485
|
OptionSecondaryTextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: OptionSecondaryTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3428
|
-
OptionSecondaryTextDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: OptionSecondaryTextDirective, selector: "sp-option-secondary-text", viewQueries: [{ propertyName: "contentPortal", first: true, predicate: CdkPortal, descendants: true }], ngImport: i0, template: '<ng-template cdkPortal><ng-content></ng-content></ng-template>', isInline: true, dependencies: [{ kind: "directive", type: i1
|
|
3486
|
+
OptionSecondaryTextDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: OptionSecondaryTextDirective, selector: "sp-option-secondary-text", viewQueries: [{ propertyName: "contentPortal", first: true, predicate: CdkPortal, descendants: true }], ngImport: i0, template: '<ng-template cdkPortal><ng-content></ng-content></ng-template>', isInline: true, dependencies: [{ kind: "directive", type: i1.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }] });
|
|
3429
3487
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: OptionSecondaryTextDirective, decorators: [{
|
|
3430
3488
|
type: Component,
|
|
3431
3489
|
args: [{
|
|
@@ -3582,7 +3640,7 @@ class CdkOptionScrollIssuePatch {
|
|
|
3582
3640
|
}
|
|
3583
3641
|
}
|
|
3584
3642
|
}
|
|
3585
|
-
CdkOptionScrollIssuePatch.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: CdkOptionScrollIssuePatch, deps: [{ token: i1$
|
|
3643
|
+
CdkOptionScrollIssuePatch.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: CdkOptionScrollIssuePatch, deps: [{ token: i1$2.CdkListbox }, { token: i1$2.CdkOption }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
3586
3644
|
CdkOptionScrollIssuePatch.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: CdkOptionScrollIssuePatch, isStandalone: true, selector: "[cdkOption]", ngImport: i0 });
|
|
3587
3645
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: CdkOptionScrollIssuePatch, decorators: [{
|
|
3588
3646
|
type: Directive,
|
|
@@ -3590,7 +3648,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
3590
3648
|
selector: '[cdkOption]',
|
|
3591
3649
|
standalone: true,
|
|
3592
3650
|
}]
|
|
3593
|
-
}], ctorParameters: function () { return [{ type: i1$
|
|
3651
|
+
}], ctorParameters: function () { return [{ type: i1$2.CdkListbox }, { type: i1$2.CdkOption }, { type: i0.ElementRef }]; } });
|
|
3594
3652
|
|
|
3595
3653
|
/**
|
|
3596
3654
|
* JS-based :active state for non-button clickable elements.
|
|
@@ -3718,7 +3776,7 @@ class ListboxItemComponent {
|
|
|
3718
3776
|
}
|
|
3719
3777
|
}
|
|
3720
3778
|
ListboxItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ListboxItemComponent, deps: [{ token: PressedDirective }], target: i0.ɵɵFactoryTarget.Component });
|
|
3721
|
-
ListboxItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ListboxItemComponent, selector: "li[sp-listbox-item]", inputs: { selected: "selected", focused: "focused", option: "option", size: "size" }, host: { properties: { "class.sapphire-listbox__item--selected": "selected", "class.is-disabled": "option.disabled" }, classAttribute: "sapphire-listbox__item" }, hostDirectives: [{ directive: UseComponentStyles }, { directive: PressedDirective }, { directive: FocusedDirective, inputs: ["spFocused", "focused"] }], ngImport: i0, template: "<div class=\"sapphire-listbox__content\" _spUseComponentStyles>\n <div\n class=\"sapphire-listbox__icon\"\n _spUseComponentStyles\n *ngIf=\"option.icon?.contentPortal as icon\"\n >\n <ng-container *cdkPortalOutlet=\"icon\"></ng-container>\n </div>\n <div class=\"sapphire-listbox__text-container\" _spUseComponentStyles>\n <div class=\"sapphire-listbox__primary-text\" _spUseComponentStyles>\n <ng-container *ngIf=\"option.primaryText\">\n <ng-container *cdkPortalOutlet=\"option.primaryText\"></ng-container>\n </ng-container>\n </div>\n <div\n class=\"sapphire-listbox__secondary-text\"\n _spUseComponentStyles\n *ngIf=\"option.secondaryText?.contentPortal as secondaryText\"\n >\n <ng-container *cdkPortalOutlet=\"secondaryText\"></ng-container>\n </div>\n </div>\n <div class=\"sapphire-listbox__icon\" _spUseComponentStyles *ngIf=\"selected\">\n <sp-icon name=\"checkMark\"></sp-icon>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size"] }, { kind: "directive", type: i1
|
|
3779
|
+
ListboxItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ListboxItemComponent, selector: "li[sp-listbox-item]", inputs: { selected: "selected", focused: "focused", option: "option", size: "size" }, host: { properties: { "class.sapphire-listbox__item--selected": "selected", "class.is-disabled": "option.disabled" }, classAttribute: "sapphire-listbox__item" }, hostDirectives: [{ directive: UseComponentStyles }, { directive: PressedDirective }, { directive: FocusedDirective, inputs: ["spFocused", "focused"] }], ngImport: i0, template: "<div class=\"sapphire-listbox__content\" _spUseComponentStyles>\n <div\n class=\"sapphire-listbox__icon\"\n _spUseComponentStyles\n *ngIf=\"option.icon?.contentPortal as icon\"\n >\n <ng-container *cdkPortalOutlet=\"icon\"></ng-container>\n </div>\n <div class=\"sapphire-listbox__text-container\" _spUseComponentStyles>\n <div class=\"sapphire-listbox__primary-text\" _spUseComponentStyles>\n <ng-container *ngIf=\"option.primaryText\">\n <ng-container *cdkPortalOutlet=\"option.primaryText\"></ng-container>\n </ng-container>\n </div>\n <div\n class=\"sapphire-listbox__secondary-text\"\n _spUseComponentStyles\n *ngIf=\"option.secondaryText?.contentPortal as secondaryText\"\n >\n <ng-container *cdkPortalOutlet=\"secondaryText\"></ng-container>\n </div>\n </div>\n <div class=\"sapphire-listbox__icon\" _spUseComponentStyles *ngIf=\"selected\">\n <sp-icon name=\"checkMark\"></sp-icon>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size"] }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: UseComponentStyles, selector: "[_spUseComponentStyles]" }] });
|
|
3722
3780
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ListboxItemComponent, decorators: [{
|
|
3723
3781
|
type: Component,
|
|
3724
3782
|
args: [{ selector: 'li[sp-listbox-item]', host: {
|
|
@@ -3940,7 +3998,7 @@ ListboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
|
|
|
3940
3998
|
useExisting: forwardRef(() => ListboxComponent),
|
|
3941
3999
|
},
|
|
3942
4000
|
ViewEncapsulationProvider,
|
|
3943
|
-
], queries: [{ propertyName: "itemsInContent", predicate: ListboxChild }], viewQueries: [{ propertyName: "cdkListbox", first: true, predicate: CdkListbox, descendants: true }, { propertyName: "cdkOptions", predicate: CdkOption, descendants: true }], exportAs: ["spListbox"], ngImport: i0, template: "<ul\n class=\"sapphire-listbox\"\n cdkListbox\n [id]=\"id || ''\"\n [cdkListboxCompareWith]=\"\"\n [cdkListboxMultiple]=\"!!multiple\"\n [cdkListboxDisabled]=\"!!disabled\"\n [cdkListboxNavigationWrapDisabled]=\"\n navigationWrapDisabled && !_forceEnableNavigationWrap\n \"\n [cdkListboxValue]=\"_validSelectedValues\"\n [cdkListboxUseActiveDescendant]=\"_shouldUseVirtualFocus()\"\n (cdkListboxValueChange)=\"_handleSelectionChange($event)\"\n (keydown.enter)=\"selected.emit($event)\"\n (keydown.space)=\"selected.emit($event)\"\n (mousedown)=\"_isConnectedToInput() && $event.preventDefault()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [class.sapphire-listbox--md]=\"size === 'md'\"\n [class.sapphire-listbox--sm]=\"size === 'sm'\"\n>\n <ng-container *ngFor=\"let item of options; let last = last\">\n <ng-container *ngIf=\"_isSection(item)\">\n <li role=\"presentation\">\n <ul\n role=\"group\"\n class=\"sapphire-listbox__section\"\n [attr.aria-label]=\"item.ariaLabel\"\n >\n <li\n *ngFor=\"let option of item.children\"\n [cdkOption]=\"option.value\"\n [cdkOptionDisabled]=\"!!option.disabled\"\n [cdkOptionTypeaheadLabel]=\"option.label\"\n #cdkOption=\"cdkOption\"\n sp-listbox-item\n [option]=\"option\"\n [selected]=\"isSelected(option)\"\n [focused]=\"cdkOption.isActive()\"\n (click)=\"!(disabled || option.disabled) && selected.emit($event)\"\n [size]=\"size\"\n ></li>\n </ul>\n </li>\n <li\n *ngIf=\"!last\"\n role=\"separator\"\n class=\"sapphire-listbox__separator\"\n ></li>\n </ng-container>\n <li\n *ngIf=\"_isOption(item)\"\n [cdkOption]=\"item.value\"\n [cdkOptionDisabled]=\"!!item.disabled\"\n [cdkOptionTypeaheadLabel]=\"item.label\"\n #cdkOption=\"cdkOption\"\n sp-listbox-item\n [option]=\"item\"\n [selected]=\"isSelected(item)\"\n [focused]=\"cdkOption.isActive()\"\n (click)=\"!(disabled || item.disabled) && selected.emit($event)\"\n [size]=\"size\"\n ></li>\n </ng-container>\n</ul>\n", styles: [".sapphire-listbox{box-sizing:border-box;margin:0;position:relative;list-style:none;outline:none;padding:calc(var(--sapphire-semantic-size-spacing-10) - var(--sapphire-semantic-size-spacing-5)) 0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-listbox__item{display:flex;justify-content:space-between;align-items:center;padding:var(--sapphire-semantic-size-spacing-5) var(--sapphire-semantic-size-spacing-10);color:var(--sapphire-semantic-color-content-selection-unselected-default);outline:none;cursor:pointer;text-decoration:none;min-width:max-content}.sapphire-listbox__item--danger{color:var(--sapphire-semantic-color-content-action-danger-default)}.sapphire-listbox__item--selected{color:var(--sapphire-semantic-color-content-selection-selected-default)}.sapphire-listbox__item--selected .sapphire-listbox__content{background-color:var(--sapphire-semantic-color-background-selection-selected-default)}.sapphire-listbox__content{width:100%;max-width:calc(100vw - 2 * var(--sapphire-semantic-size-icon-lg));display:grid;grid-auto-flow:column;align-items:center;gap:var(--sapphire-semantic-size-spacing-30);grid-template-columns:auto 1fr var(--sapphire-semantic-size-icon-lg);padding:calc(var(--sapphire-semantic-size-spacing-30) - var(--sapphire-semantic-size-spacing-5)) var(--sapphire-semantic-size-spacing-30);border-radius:var(--sapphire-semantic-size-radius-sm);transition-property:opacity,background-color,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:ease-in-out;min-height:var(--sapphire-semantic-size-height-control-xs)}.sapphire-listbox--md .sapphire-listbox__content{gap:var(--sapphire-semantic-size-spacing-25);grid-template-columns:auto 1fr var(--sapphire-semantic-size-icon-md);padding:calc(var(--sapphire-semantic-size-spacing-20) - var(--sapphire-semantic-size-spacing-5)) var(--sapphire-semantic-size-spacing-25)}.sapphire-listbox--sm .sapphire-listbox__content{gap:var(--sapphire-semantic-size-spacing-20);grid-template-columns:auto 1fr var(--sapphire-semantic-size-icon-sm);padding:calc(var(--sapphire-semantic-size-spacing-10) - var(--sapphire-semantic-size-spacing-5)) var(--sapphire-semantic-size-spacing-20)}.sapphire-listbox__icon{line-height:0}.sapphire-listbox__text-container{font-family:var(--sapphire-semantic-font-name-default);line-height:var(--sapphire-semantic-size-line-height-md)}.sapphire-listbox__text-container:first-child{grid-column:span 2}.sapphire-listbox__primary-text{font-weight:var(--sapphire-semantic-font-weight-default-semibold);font-size:var(--sapphire-semantic-size-font-text-lg)}.sapphire-listbox__secondary-text{font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-text-md)}.sapphire-listbox--md .sapphire-listbox__primary-text{font-size:var(--sapphire-semantic-size-font-text-md)}.sapphire-listbox--sm .sapphire-listbox__primary-text,.sapphire-listbox--md .sapphire-listbox__secondary-text,.sapphire-listbox--sm .sapphire-listbox__secondary-text{font-size:var(--sapphire-semantic-size-font-text-sm)}.sapphire-listbox__item:not(.sapphire-listbox__item--danger):not(.sapphire-listbox__item--selected) .sapphire-listbox__secondary-text{color:var(--sapphire-semantic-color-content-default-secondary)}.sapphire-listbox__item.is-disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-listbox__section{padding:0;list-style:none}.sapphire-listbox__section-header{font-size:var(--sapphire-semantic-size-font-text-md);color:var(--sapphire-semantic-color-content-default-secondary);padding:var(--sapphire-semantic-size-spacing-30) var(--sapphire-semantic-size-spacing-40) var(--sapphire-semantic-size-spacing-20) var(--sapphire-semantic-size-spacing-40)}.sapphire-listbox--md .sapphire-listbox__section-header{font-size:var(--sapphire-semantic-size-font-text-sm);padding:var(--sapphire-semantic-size-spacing-25) var(--sapphire-global-size-generic-35) var(--sapphire-global-size-generic-15) var(--sapphire-global-size-generic-35)}.sapphire-listbox--sm .sapphire-listbox__section-header{font-size:var(--sapphire-semantic-size-font-text-sm);padding:var(--sapphire-semantic-size-spacing-20) var(--sapphire-semantic-size-spacing-30) var(--sapphire-semantic-size-spacing-10) var(--sapphire-semantic-size-spacing-30)}.sapphire-listbox__separator{height:var(--sapphire-semantic-size-border-sm);width:100%;background:var(--sapphire-semantic-color-border-separator-default);margin-top:calc(var(--sapphire-semantic-size-spacing-10) - var(--sapphire-semantic-size-spacing-5));margin-bottom:calc(var(--sapphire-semantic-size-spacing-10) - var(--sapphire-semantic-size-spacing-5))}.sapphire-listbox__item:not(.is-disabled).is-focus .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-focus):focus-visible .sapphire-listbox__content{box-shadow:0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring)}.sapphire-listbox__item:not(.is-disabled).is-hover:not(.is-active) .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-selection-unselected-hover);background-color:var(--sapphire-semantic-color-background-selection-unselected-hover)}.sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-action-danger-default);background-color:var(--sapphire-semantic-color-background-action-danger-default)}.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active):not(.js-hover):hover .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-selection-selected-hover);background-color:var(--sapphire-semantic-color-background-selection-selected-hover)}.sapphire-listbox__item:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-selection-unselected-active);background-color:var(--sapphire-semantic-color-background-selection-unselected-active)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-action-danger-active);background-color:var(--sapphire-semantic-color-background-action-danger-hover)}.sapphire-listbox__item--selected:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-selection-selected-active);background-color:var(--sapphire-semantic-color-background-selection-selected-active)}:host{display:block}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i1$4.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "directive", type: CdkOptionScrollIssuePatch, selector: "[cdkOption]" }, { kind: "component", type: ListboxItemComponent, selector: "li[sp-listbox-item]", inputs: ["selected", "focused", "option", "size"] }] });
|
|
4001
|
+
], queries: [{ propertyName: "itemsInContent", predicate: ListboxChild }], viewQueries: [{ propertyName: "cdkListbox", first: true, predicate: CdkListbox, descendants: true }, { propertyName: "cdkOptions", predicate: CdkOption, descendants: true }], exportAs: ["spListbox"], ngImport: i0, template: "<ul\n class=\"sapphire-listbox\"\n cdkListbox\n [id]=\"id || ''\"\n [cdkListboxCompareWith]=\"\"\n [cdkListboxMultiple]=\"!!multiple\"\n [cdkListboxDisabled]=\"!!disabled\"\n [cdkListboxNavigationWrapDisabled]=\"\n navigationWrapDisabled && !_forceEnableNavigationWrap\n \"\n [cdkListboxValue]=\"_validSelectedValues\"\n [cdkListboxUseActiveDescendant]=\"_shouldUseVirtualFocus()\"\n (cdkListboxValueChange)=\"_handleSelectionChange($event)\"\n (keydown.enter)=\"selected.emit($event)\"\n (keydown.space)=\"selected.emit($event)\"\n (mousedown)=\"_isConnectedToInput() && $event.preventDefault()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [class.sapphire-listbox--md]=\"size === 'md'\"\n [class.sapphire-listbox--sm]=\"size === 'sm'\"\n>\n <ng-container *ngFor=\"let item of options; let last = last\">\n <ng-container *ngIf=\"_isSection(item)\">\n <li role=\"presentation\">\n <ul\n role=\"group\"\n class=\"sapphire-listbox__section\"\n [attr.aria-label]=\"item.ariaLabel\"\n >\n <li\n *ngFor=\"let option of item.children\"\n [cdkOption]=\"option.value\"\n [cdkOptionDisabled]=\"!!option.disabled\"\n [cdkOptionTypeaheadLabel]=\"option.label\"\n #cdkOption=\"cdkOption\"\n sp-listbox-item\n [option]=\"option\"\n [selected]=\"isSelected(option)\"\n [focused]=\"cdkOption.isActive()\"\n (click)=\"!(disabled || option.disabled) && selected.emit($event)\"\n [size]=\"size\"\n ></li>\n </ul>\n </li>\n <li\n *ngIf=\"!last\"\n role=\"separator\"\n class=\"sapphire-listbox__separator\"\n ></li>\n </ng-container>\n <li\n *ngIf=\"_isOption(item)\"\n [cdkOption]=\"item.value\"\n [cdkOptionDisabled]=\"!!item.disabled\"\n [cdkOptionTypeaheadLabel]=\"item.label\"\n #cdkOption=\"cdkOption\"\n sp-listbox-item\n [option]=\"item\"\n [selected]=\"isSelected(item)\"\n [focused]=\"cdkOption.isActive()\"\n (click)=\"!(disabled || item.disabled) && selected.emit($event)\"\n [size]=\"size\"\n ></li>\n </ng-container>\n</ul>\n", styles: [".sapphire-listbox{box-sizing:border-box;margin:0;position:relative;list-style:none;outline:none;font-family:var(--sapphire-semantic-font-name-default);padding:calc(var(--sapphire-semantic-size-spacing-10) - var(--sapphire-semantic-size-spacing-5)) 0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-listbox__item{display:flex;justify-content:space-between;align-items:center;padding:var(--sapphire-semantic-size-spacing-5) var(--sapphire-semantic-size-spacing-10);color:var(--sapphire-semantic-color-content-selection-unselected-default);outline:none;cursor:pointer;text-decoration:none;min-width:max-content}.sapphire-listbox__item--danger{color:var(--sapphire-semantic-color-content-action-danger-default)}.sapphire-listbox__item--selected{color:var(--sapphire-semantic-color-content-selection-selected-default)}.sapphire-listbox__item--selected .sapphire-listbox__content{background-color:var(--sapphire-semantic-color-background-selection-selected-default)}.sapphire-listbox__content{width:100%;max-width:calc(100vw - 2 * var(--sapphire-semantic-size-icon-lg));display:grid;grid-auto-flow:column;align-items:center;gap:var(--sapphire-semantic-size-spacing-30);grid-template-columns:auto 1fr var(--sapphire-semantic-size-icon-lg);padding:calc(var(--sapphire-semantic-size-spacing-30) - var(--sapphire-semantic-size-spacing-5)) var(--sapphire-semantic-size-spacing-30);border-radius:var(--sapphire-semantic-size-radius-sm);transition-property:opacity,background-color,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:ease-in-out;min-height:var(--sapphire-semantic-size-height-control-xs)}.sapphire-listbox--md .sapphire-listbox__content{gap:var(--sapphire-semantic-size-spacing-25);grid-template-columns:auto 1fr var(--sapphire-semantic-size-icon-md);padding:calc(var(--sapphire-semantic-size-spacing-20) - var(--sapphire-semantic-size-spacing-5)) var(--sapphire-semantic-size-spacing-25)}.sapphire-listbox--sm .sapphire-listbox__content{gap:var(--sapphire-semantic-size-spacing-20);grid-template-columns:auto 1fr var(--sapphire-semantic-size-icon-sm);padding:calc(var(--sapphire-semantic-size-spacing-10) - var(--sapphire-semantic-size-spacing-5)) var(--sapphire-semantic-size-spacing-20)}.sapphire-listbox__icon{line-height:0}.sapphire-listbox__text-container{line-height:var(--sapphire-semantic-size-line-height-md)}.sapphire-listbox__text-container:first-child{grid-column:span 2}.sapphire-listbox__primary-text{font-weight:var(--sapphire-semantic-font-weight-default-semibold);font-size:var(--sapphire-semantic-size-font-text-lg)}.sapphire-listbox__secondary-text{font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-text-md)}.sapphire-listbox--md .sapphire-listbox__primary-text{font-size:var(--sapphire-semantic-size-font-text-md)}.sapphire-listbox--sm .sapphire-listbox__primary-text,.sapphire-listbox--md .sapphire-listbox__secondary-text,.sapphire-listbox--sm .sapphire-listbox__secondary-text{font-size:var(--sapphire-semantic-size-font-text-sm)}.sapphire-listbox__item:not(.sapphire-listbox__item--danger):not(.sapphire-listbox__item--selected) .sapphire-listbox__secondary-text{color:var(--sapphire-semantic-color-content-default-secondary)}.sapphire-listbox__item.is-disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-listbox__section{padding:0;list-style:none}.sapphire-listbox__section-header{font-size:var(--sapphire-semantic-size-font-text-md);color:var(--sapphire-semantic-color-content-default-secondary);padding:var(--sapphire-semantic-size-spacing-30) var(--sapphire-semantic-size-spacing-40) var(--sapphire-semantic-size-spacing-20) var(--sapphire-semantic-size-spacing-40)}.sapphire-listbox--md .sapphire-listbox__section-header{font-size:var(--sapphire-semantic-size-font-text-sm);padding:var(--sapphire-semantic-size-spacing-25) var(--sapphire-global-size-generic-35) var(--sapphire-global-size-generic-15) var(--sapphire-global-size-generic-35)}.sapphire-listbox--sm .sapphire-listbox__section-header{font-size:var(--sapphire-semantic-size-font-text-sm);padding:var(--sapphire-semantic-size-spacing-20) var(--sapphire-semantic-size-spacing-30) var(--sapphire-semantic-size-spacing-10) var(--sapphire-semantic-size-spacing-30)}.sapphire-listbox__separator{height:var(--sapphire-semantic-size-border-sm);width:100%;background:var(--sapphire-semantic-color-border-separator-default);margin-top:calc(var(--sapphire-semantic-size-spacing-10) - var(--sapphire-semantic-size-spacing-5));margin-bottom:calc(var(--sapphire-semantic-size-spacing-10) - var(--sapphire-semantic-size-spacing-5))}.sapphire-listbox__item:not(.is-disabled).is-focus .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-focus):focus-visible .sapphire-listbox__content{box-shadow:0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring)}.sapphire-listbox__item:not(.is-disabled).is-hover:not(.is-active) .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-selection-unselected-hover);background-color:var(--sapphire-semantic-color-background-selection-unselected-hover)}.sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-action-danger-default);background-color:var(--sapphire-semantic-color-background-action-danger-default)}.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active):not(.js-hover):hover .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-selection-selected-hover);background-color:var(--sapphire-semantic-color-background-selection-selected-hover)}.sapphire-listbox__item:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-selection-unselected-active);background-color:var(--sapphire-semantic-color-background-selection-unselected-active)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-action-danger-active);background-color:var(--sapphire-semantic-color-background-action-danger-hover)}.sapphire-listbox__item--selected:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-selection-selected-active);background-color:var(--sapphire-semantic-color-background-selection-selected-active)}:host{display:block}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i1$2.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "directive", type: CdkOptionScrollIssuePatch, selector: "[cdkOption]" }, { kind: "component", type: ListboxItemComponent, selector: "li[sp-listbox-item]", inputs: ["selected", "focused", "option", "size"] }] });
|
|
3944
4002
|
__decorate([
|
|
3945
4003
|
CoerceBoolean
|
|
3946
4004
|
], ListboxComponent.prototype, "disabled", void 0);
|
|
@@ -3966,7 +4024,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
3966
4024
|
], host: {
|
|
3967
4025
|
'[attr.aria-label]': 'null',
|
|
3968
4026
|
'[attr.aria-labelledby]': 'null',
|
|
3969
|
-
}, exportAs: 'spListbox', template: "<ul\n class=\"sapphire-listbox\"\n cdkListbox\n [id]=\"id || ''\"\n [cdkListboxCompareWith]=\"\"\n [cdkListboxMultiple]=\"!!multiple\"\n [cdkListboxDisabled]=\"!!disabled\"\n [cdkListboxNavigationWrapDisabled]=\"\n navigationWrapDisabled && !_forceEnableNavigationWrap\n \"\n [cdkListboxValue]=\"_validSelectedValues\"\n [cdkListboxUseActiveDescendant]=\"_shouldUseVirtualFocus()\"\n (cdkListboxValueChange)=\"_handleSelectionChange($event)\"\n (keydown.enter)=\"selected.emit($event)\"\n (keydown.space)=\"selected.emit($event)\"\n (mousedown)=\"_isConnectedToInput() && $event.preventDefault()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [class.sapphire-listbox--md]=\"size === 'md'\"\n [class.sapphire-listbox--sm]=\"size === 'sm'\"\n>\n <ng-container *ngFor=\"let item of options; let last = last\">\n <ng-container *ngIf=\"_isSection(item)\">\n <li role=\"presentation\">\n <ul\n role=\"group\"\n class=\"sapphire-listbox__section\"\n [attr.aria-label]=\"item.ariaLabel\"\n >\n <li\n *ngFor=\"let option of item.children\"\n [cdkOption]=\"option.value\"\n [cdkOptionDisabled]=\"!!option.disabled\"\n [cdkOptionTypeaheadLabel]=\"option.label\"\n #cdkOption=\"cdkOption\"\n sp-listbox-item\n [option]=\"option\"\n [selected]=\"isSelected(option)\"\n [focused]=\"cdkOption.isActive()\"\n (click)=\"!(disabled || option.disabled) && selected.emit($event)\"\n [size]=\"size\"\n ></li>\n </ul>\n </li>\n <li\n *ngIf=\"!last\"\n role=\"separator\"\n class=\"sapphire-listbox__separator\"\n ></li>\n </ng-container>\n <li\n *ngIf=\"_isOption(item)\"\n [cdkOption]=\"item.value\"\n [cdkOptionDisabled]=\"!!item.disabled\"\n [cdkOptionTypeaheadLabel]=\"item.label\"\n #cdkOption=\"cdkOption\"\n sp-listbox-item\n [option]=\"item\"\n [selected]=\"isSelected(item)\"\n [focused]=\"cdkOption.isActive()\"\n (click)=\"!(disabled || item.disabled) && selected.emit($event)\"\n [size]=\"size\"\n ></li>\n </ng-container>\n</ul>\n", styles: [".sapphire-listbox{box-sizing:border-box;margin:0;position:relative;list-style:none;outline:none;padding:calc(var(--sapphire-semantic-size-spacing-10) - var(--sapphire-semantic-size-spacing-5)) 0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-listbox__item{display:flex;justify-content:space-between;align-items:center;padding:var(--sapphire-semantic-size-spacing-5) var(--sapphire-semantic-size-spacing-10);color:var(--sapphire-semantic-color-content-selection-unselected-default);outline:none;cursor:pointer;text-decoration:none;min-width:max-content}.sapphire-listbox__item--danger{color:var(--sapphire-semantic-color-content-action-danger-default)}.sapphire-listbox__item--selected{color:var(--sapphire-semantic-color-content-selection-selected-default)}.sapphire-listbox__item--selected .sapphire-listbox__content{background-color:var(--sapphire-semantic-color-background-selection-selected-default)}.sapphire-listbox__content{width:100%;max-width:calc(100vw - 2 * var(--sapphire-semantic-size-icon-lg));display:grid;grid-auto-flow:column;align-items:center;gap:var(--sapphire-semantic-size-spacing-30);grid-template-columns:auto 1fr var(--sapphire-semantic-size-icon-lg);padding:calc(var(--sapphire-semantic-size-spacing-30) - var(--sapphire-semantic-size-spacing-5)) var(--sapphire-semantic-size-spacing-30);border-radius:var(--sapphire-semantic-size-radius-sm);transition-property:opacity,background-color,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:ease-in-out;min-height:var(--sapphire-semantic-size-height-control-xs)}.sapphire-listbox--md .sapphire-listbox__content{gap:var(--sapphire-semantic-size-spacing-25);grid-template-columns:auto 1fr var(--sapphire-semantic-size-icon-md);padding:calc(var(--sapphire-semantic-size-spacing-20) - var(--sapphire-semantic-size-spacing-5)) var(--sapphire-semantic-size-spacing-25)}.sapphire-listbox--sm .sapphire-listbox__content{gap:var(--sapphire-semantic-size-spacing-20);grid-template-columns:auto 1fr var(--sapphire-semantic-size-icon-sm);padding:calc(var(--sapphire-semantic-size-spacing-10) - var(--sapphire-semantic-size-spacing-5)) var(--sapphire-semantic-size-spacing-20)}.sapphire-listbox__icon{line-height:0}.sapphire-listbox__text-container{
|
|
4027
|
+
}, exportAs: 'spListbox', template: "<ul\n class=\"sapphire-listbox\"\n cdkListbox\n [id]=\"id || ''\"\n [cdkListboxCompareWith]=\"\"\n [cdkListboxMultiple]=\"!!multiple\"\n [cdkListboxDisabled]=\"!!disabled\"\n [cdkListboxNavigationWrapDisabled]=\"\n navigationWrapDisabled && !_forceEnableNavigationWrap\n \"\n [cdkListboxValue]=\"_validSelectedValues\"\n [cdkListboxUseActiveDescendant]=\"_shouldUseVirtualFocus()\"\n (cdkListboxValueChange)=\"_handleSelectionChange($event)\"\n (keydown.enter)=\"selected.emit($event)\"\n (keydown.space)=\"selected.emit($event)\"\n (mousedown)=\"_isConnectedToInput() && $event.preventDefault()\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n [class.sapphire-listbox--md]=\"size === 'md'\"\n [class.sapphire-listbox--sm]=\"size === 'sm'\"\n>\n <ng-container *ngFor=\"let item of options; let last = last\">\n <ng-container *ngIf=\"_isSection(item)\">\n <li role=\"presentation\">\n <ul\n role=\"group\"\n class=\"sapphire-listbox__section\"\n [attr.aria-label]=\"item.ariaLabel\"\n >\n <li\n *ngFor=\"let option of item.children\"\n [cdkOption]=\"option.value\"\n [cdkOptionDisabled]=\"!!option.disabled\"\n [cdkOptionTypeaheadLabel]=\"option.label\"\n #cdkOption=\"cdkOption\"\n sp-listbox-item\n [option]=\"option\"\n [selected]=\"isSelected(option)\"\n [focused]=\"cdkOption.isActive()\"\n (click)=\"!(disabled || option.disabled) && selected.emit($event)\"\n [size]=\"size\"\n ></li>\n </ul>\n </li>\n <li\n *ngIf=\"!last\"\n role=\"separator\"\n class=\"sapphire-listbox__separator\"\n ></li>\n </ng-container>\n <li\n *ngIf=\"_isOption(item)\"\n [cdkOption]=\"item.value\"\n [cdkOptionDisabled]=\"!!item.disabled\"\n [cdkOptionTypeaheadLabel]=\"item.label\"\n #cdkOption=\"cdkOption\"\n sp-listbox-item\n [option]=\"item\"\n [selected]=\"isSelected(item)\"\n [focused]=\"cdkOption.isActive()\"\n (click)=\"!(disabled || item.disabled) && selected.emit($event)\"\n [size]=\"size\"\n ></li>\n </ng-container>\n</ul>\n", styles: [".sapphire-listbox{box-sizing:border-box;margin:0;position:relative;list-style:none;outline:none;font-family:var(--sapphire-semantic-font-name-default);padding:calc(var(--sapphire-semantic-size-spacing-10) - var(--sapphire-semantic-size-spacing-5)) 0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-listbox__item{display:flex;justify-content:space-between;align-items:center;padding:var(--sapphire-semantic-size-spacing-5) var(--sapphire-semantic-size-spacing-10);color:var(--sapphire-semantic-color-content-selection-unselected-default);outline:none;cursor:pointer;text-decoration:none;min-width:max-content}.sapphire-listbox__item--danger{color:var(--sapphire-semantic-color-content-action-danger-default)}.sapphire-listbox__item--selected{color:var(--sapphire-semantic-color-content-selection-selected-default)}.sapphire-listbox__item--selected .sapphire-listbox__content{background-color:var(--sapphire-semantic-color-background-selection-selected-default)}.sapphire-listbox__content{width:100%;max-width:calc(100vw - 2 * var(--sapphire-semantic-size-icon-lg));display:grid;grid-auto-flow:column;align-items:center;gap:var(--sapphire-semantic-size-spacing-30);grid-template-columns:auto 1fr var(--sapphire-semantic-size-icon-lg);padding:calc(var(--sapphire-semantic-size-spacing-30) - var(--sapphire-semantic-size-spacing-5)) var(--sapphire-semantic-size-spacing-30);border-radius:var(--sapphire-semantic-size-radius-sm);transition-property:opacity,background-color,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:ease-in-out;min-height:var(--sapphire-semantic-size-height-control-xs)}.sapphire-listbox--md .sapphire-listbox__content{gap:var(--sapphire-semantic-size-spacing-25);grid-template-columns:auto 1fr var(--sapphire-semantic-size-icon-md);padding:calc(var(--sapphire-semantic-size-spacing-20) - var(--sapphire-semantic-size-spacing-5)) var(--sapphire-semantic-size-spacing-25)}.sapphire-listbox--sm .sapphire-listbox__content{gap:var(--sapphire-semantic-size-spacing-20);grid-template-columns:auto 1fr var(--sapphire-semantic-size-icon-sm);padding:calc(var(--sapphire-semantic-size-spacing-10) - var(--sapphire-semantic-size-spacing-5)) var(--sapphire-semantic-size-spacing-20)}.sapphire-listbox__icon{line-height:0}.sapphire-listbox__text-container{line-height:var(--sapphire-semantic-size-line-height-md)}.sapphire-listbox__text-container:first-child{grid-column:span 2}.sapphire-listbox__primary-text{font-weight:var(--sapphire-semantic-font-weight-default-semibold);font-size:var(--sapphire-semantic-size-font-text-lg)}.sapphire-listbox__secondary-text{font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-text-md)}.sapphire-listbox--md .sapphire-listbox__primary-text{font-size:var(--sapphire-semantic-size-font-text-md)}.sapphire-listbox--sm .sapphire-listbox__primary-text,.sapphire-listbox--md .sapphire-listbox__secondary-text,.sapphire-listbox--sm .sapphire-listbox__secondary-text{font-size:var(--sapphire-semantic-size-font-text-sm)}.sapphire-listbox__item:not(.sapphire-listbox__item--danger):not(.sapphire-listbox__item--selected) .sapphire-listbox__secondary-text{color:var(--sapphire-semantic-color-content-default-secondary)}.sapphire-listbox__item.is-disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-listbox__section{padding:0;list-style:none}.sapphire-listbox__section-header{font-size:var(--sapphire-semantic-size-font-text-md);color:var(--sapphire-semantic-color-content-default-secondary);padding:var(--sapphire-semantic-size-spacing-30) var(--sapphire-semantic-size-spacing-40) var(--sapphire-semantic-size-spacing-20) var(--sapphire-semantic-size-spacing-40)}.sapphire-listbox--md .sapphire-listbox__section-header{font-size:var(--sapphire-semantic-size-font-text-sm);padding:var(--sapphire-semantic-size-spacing-25) var(--sapphire-global-size-generic-35) var(--sapphire-global-size-generic-15) var(--sapphire-global-size-generic-35)}.sapphire-listbox--sm .sapphire-listbox__section-header{font-size:var(--sapphire-semantic-size-font-text-sm);padding:var(--sapphire-semantic-size-spacing-20) var(--sapphire-semantic-size-spacing-30) var(--sapphire-semantic-size-spacing-10) var(--sapphire-semantic-size-spacing-30)}.sapphire-listbox__separator{height:var(--sapphire-semantic-size-border-sm);width:100%;background:var(--sapphire-semantic-color-border-separator-default);margin-top:calc(var(--sapphire-semantic-size-spacing-10) - var(--sapphire-semantic-size-spacing-5));margin-bottom:calc(var(--sapphire-semantic-size-spacing-10) - var(--sapphire-semantic-size-spacing-5))}.sapphire-listbox__item:not(.is-disabled).is-focus .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-focus):focus-visible .sapphire-listbox__content{box-shadow:0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring)}.sapphire-listbox__item:not(.is-disabled).is-hover:not(.is-active) .sapphire-listbox__content,.sapphire-listbox__item:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-selection-unselected-hover);background-color:var(--sapphire-semantic-color-background-selection-unselected-hover)}.sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-action-danger-default);background-color:var(--sapphire-semantic-color-background-action-danger-default)}.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--selected:not(.is-disabled):not(.is-active):not(.js-hover):hover .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-selection-selected-hover);background-color:var(--sapphire-semantic-color-background-selection-selected-hover)}.sapphire-listbox__item:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-selection-unselected-active);background-color:var(--sapphire-semantic-color-background-selection-unselected-active)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-action-danger-active);background-color:var(--sapphire-semantic-color-background-action-danger-hover)}.sapphire-listbox__item--selected:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-semantic-color-content-selection-selected-active);background-color:var(--sapphire-semantic-color-background-selection-selected-active)}:host{display:block}\n"] }]
|
|
3970
4028
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { selectedValues: [{
|
|
3971
4029
|
type: Input
|
|
3972
4030
|
}], selectedValuesChange: [{
|
|
@@ -4737,6 +4795,7 @@ class SelectComponent extends SelectComponentBase {
|
|
|
4737
4795
|
*/
|
|
4738
4796
|
this._valueContainerId = '';
|
|
4739
4797
|
this.destroyed = new Subject();
|
|
4798
|
+
this.hasDefaultWidth = true;
|
|
4740
4799
|
}
|
|
4741
4800
|
ngAfterViewInit() {
|
|
4742
4801
|
super.ngAfterViewInit();
|
|
@@ -4934,7 +4993,7 @@ SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
|
|
|
4934
4993
|
provide: FieldControl,
|
|
4935
4994
|
useExisting: forwardRef(() => SelectComponent),
|
|
4936
4995
|
},
|
|
4937
|
-
], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true }, { propertyName: "triggerElementRef", first: true, predicate: ["triggerElementRef"], descendants: true, read: ElementRef }, { propertyName: "listbox", first: true, predicate: ListboxComponent, descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, read: ElementRef }], exportAs: ["spSelect"], usesInheritance: true, hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: "<sp-hidden-select></sp-hidden-select>\n<div\n role=\"button\"\n aria-haspopup=\"listbox\"\n class=\"sapphire-select__button\"\n [spPopoverTriggerFor]=\"popover\"\n [spPopoverTriggerDisabled]=\"disabled\"\n spPopoverTriggerOpenOnPressStart\n spPopoverTriggerCloseOnScroll\n spPopoverPlacement=\"bottom start\"\n #triggerElementRef\n #triggerRef=\"spPopoverTrigger\"\n (keydown)=\"handleKeyDown($event)\"\n (spPopoverTriggerClosed)=\"_onClose()\"\n (spPopoverTriggerOpened)=\"_onOpen()\"\n (focus)=\"_onFocus()\"\n cdkMonitorSubtreeFocus\n (cdkFocusChange)=\"_onFocusChange($event)\"\n [spPopoverNonModal]=\"searchable\"\n spPopoverDisablePushInsideViewport=\"true\"\n [id]=\"id\"\n [tabindex]=\"-1\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"_getAriaLabelledBy()\"\n [attr.aria-describedby]=\"_field?.error?.id || _field?.note?.id\"\n [attr.aria-invalid]=\"_field?.hasError(this) ? true : null\"\n>\n <div class=\"sapphire-select__value\" [id]=\"_valueContainerId\">\n <input\n *ngIf=\"searchable\"\n #searchInput\n tabindex=\"-1\"\n role=\"combobox\"\n class=\"sapphire-select__search-input\"\n [spListboxInput]=\"listbox\"\n [spVisuallyHidden]=\"!_isInputVisible()\"\n [attr.data-hidden]=\"!_isInputVisible()\"\n [placeholder]=\"placeholder || ''\"\n (keydown)=\"_onInputKeydown($event)\"\n (beforeinput)=\"open()\"\n [value]=\"_searchableSelectDirective?.searchValue\"\n (input)=\"_onSearchInput($event)\"\n />\n <ng-container *ngIf=\"!searchable || !_isInputVisible()\">\n <div\n *ngIf=\"selectedOptions.length === 0\"\n class=\"sapphire-select__placeholder\"\n >\n {{ placeholder }}\n </div>\n <ng-container *ngIf=\"selectedOptions.length > 0\">\n <ng-container *ngIf=\"!selectionText\">{{\n getSelectionText()\n }}</ng-container>\n <ng-content select=\"sp-selection-text\"></ng-content>\n </ng-container>\n </ng-container>\n </div>\n <div class=\"sapphire-select__icon-container\">\n <sp-icon name=\"chevronDown\"></sp-icon>\n </div>\n</div>\n<ng-template #popover>\n <sp-popover\n [style.display]=\"\n (filteredChildren$ | async)?.length === 0 ? 'none' : undefined\n \"\n noPadding\n noMaxWidth\n [style.min-width]=\"triggerElementRef.offsetWidth + 'px'\"\n >\n <sp-listbox\n [spListboxItems]=\"(filteredChildren$ | async) || undefined\"\n navigationWrapDisabled\n [multiple]=\"multiple\"\n [(selectedValues)]=\"listboxValue\"\n (selectedValuesChange)=\"_searchableSelectDirective?.setSearchValue('')\"\n (selected)=\"_handleSelected()\"\n [size]=\"_field?.size\"\n >\n </sp-listbox>\n </sp-popover>\n</ng-template>\n", styles: [".sapphire-select{position:relative;display:
|
|
4996
|
+
], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true }, { propertyName: "triggerElementRef", first: true, predicate: ["triggerElementRef"], descendants: true, read: ElementRef }, { propertyName: "listbox", first: true, predicate: ListboxComponent, descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, read: ElementRef }], exportAs: ["spSelect"], usesInheritance: true, hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: "<sp-hidden-select></sp-hidden-select>\n<div\n role=\"button\"\n aria-haspopup=\"listbox\"\n class=\"sapphire-select__button\"\n [spPopoverTriggerFor]=\"popover\"\n [spPopoverTriggerDisabled]=\"disabled\"\n spPopoverTriggerOpenOnPressStart\n spPopoverTriggerCloseOnScroll\n spPopoverPlacement=\"bottom start\"\n #triggerElementRef\n #triggerRef=\"spPopoverTrigger\"\n (keydown)=\"handleKeyDown($event)\"\n (spPopoverTriggerClosed)=\"_onClose()\"\n (spPopoverTriggerOpened)=\"_onOpen()\"\n (focus)=\"_onFocus()\"\n cdkMonitorSubtreeFocus\n (cdkFocusChange)=\"_onFocusChange($event)\"\n [spPopoverNonModal]=\"searchable\"\n spPopoverDisablePushInsideViewport=\"true\"\n [id]=\"id\"\n [tabindex]=\"-1\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"_getAriaLabelledBy()\"\n [attr.aria-describedby]=\"_field?.error?.id || _field?.note?.id\"\n [attr.aria-invalid]=\"_field?.hasError(this) ? true : null\"\n>\n <div class=\"sapphire-select__value\" [id]=\"_valueContainerId\">\n <input\n *ngIf=\"searchable\"\n #searchInput\n tabindex=\"-1\"\n role=\"combobox\"\n class=\"sapphire-select__search-input\"\n [spListboxInput]=\"listbox\"\n [spVisuallyHidden]=\"!_isInputVisible()\"\n [attr.data-hidden]=\"!_isInputVisible()\"\n [placeholder]=\"placeholder || ''\"\n (keydown)=\"_onInputKeydown($event)\"\n (beforeinput)=\"open()\"\n [value]=\"_searchableSelectDirective?.searchValue\"\n (input)=\"_onSearchInput($event)\"\n />\n <ng-container *ngIf=\"!searchable || !_isInputVisible()\">\n <div\n *ngIf=\"selectedOptions.length === 0\"\n class=\"sapphire-select__placeholder\"\n >\n {{ placeholder }}\n </div>\n <ng-container *ngIf=\"selectedOptions.length > 0\">\n <ng-container *ngIf=\"!selectionText\">{{\n getSelectionText()\n }}</ng-container>\n <ng-content select=\"sp-selection-text\"></ng-content>\n </ng-container>\n </ng-container>\n </div>\n <div class=\"sapphire-select__icon-container\">\n <sp-icon name=\"chevronDown\"></sp-icon>\n </div>\n</div>\n<ng-template #popover>\n <sp-popover\n [style.display]=\"\n (filteredChildren$ | async)?.length === 0 ? 'none' : undefined\n \"\n noPadding\n noMaxWidth\n [style.min-width]=\"triggerElementRef.offsetWidth + 'px'\"\n >\n <sp-listbox\n [spListboxItems]=\"(filteredChildren$ | async) || undefined\"\n navigationWrapDisabled\n [multiple]=\"multiple\"\n [(selectedValues)]=\"listboxValue\"\n (selectedValuesChange)=\"_searchableSelectDirective?.setSearchValue('')\"\n (selected)=\"_handleSelected()\"\n [size]=\"_field?.size\"\n >\n </sp-listbox>\n </sp-popover>\n</ng-template>\n", styles: [".sapphire-select{position:relative;display:block;color:var(--sapphire-semantic-color-content-default-primary);font-family:var(--sapphire-semantic-font-name-default);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-select__button{display:flex;align-items:center;height:var(--sapphire-semantic-size-height-input-lg);box-sizing:border-box;cursor:pointer;padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-lg);border:none;background-color:var(--sapphire-semantic-color-background-field-default);width:100%;outline:0;text-align:left;color:inherit;font-family:inherit;box-shadow:inset 0 0 0 1px var(--sapphire-semantic-color-border-field-default);border-radius:var(--sapphire-semantic-size-radius-sm);gap:var(--sapphire-semantic-size-spacing-30)}.sapphire-select--md .sapphire-select__button{height:var(--sapphire-semantic-size-height-input-md);padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-md);gap:var(--sapphire-semantic-size-spacing-20)}.sapphire-select__value{flex:1 0 0;min-width:0;font-size:var(--sapphire-semantic-size-font-control-default);width:100%;font-weight:var(--sapphire-semantic-font-weight-default-regular);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sapphire-select--md .sapphire-select__value{font-size:var(--sapphire-semantic-size-font-control-md)}.sapphire-select__placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sapphire-semantic-color-content-default-secondary)}.sapphire-select__icon-container{line-height:0;width:var(--sapphire-semantic-size-icon-lg);height:var(--sapphire-semantic-size-icon-lg)}.sapphire-select--md .sapphire-select__icon-container{width:var(--sapphire-semantic-size-icon-md);height:var(--sapphire-semantic-size-icon-md)}.sapphire-select__prefix{display:inherit;font-size:var(--sapphire-semantic-size-font-control-default)}.sapphire-select--md .sapphire-select__prefix{font-size:var(--sapphire-semantic-size-font-control-md)}.sapphire-select__search-input:not([data-hidden=true]){all:inherit}.sapphire-select__search-input::placeholder{color:var(--sapphire-semantic-color-content-default-secondary)}.sapphire-select__native-select{position:absolute;inset:0;opacity:.01;width:100%;z-index:1}.sapphire-select--error:not(.is-disabled) .sapphire-select__button{box-shadow:inset 0 0 0 1px var(--sapphire-semantic-color-border-field-error)}.sapphire-select:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring)}.sapphire-select--error:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-border-field-error)}.sapphire-select.is-disabled .sapphire-select__button{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size"] }, { kind: "component", type: ListboxComponent, selector: "sp-listbox", inputs: ["selectedValues", "spListboxItems", "disabled", "multiple", "navigationWrapDisabled", "aria-label", "aria-labelledby", "size", "id"], outputs: ["selectedValuesChange", "selected"], exportAs: ["spListbox"] }, { kind: "directive", type: ListboxInputDirective, selector: "input[spListboxInput]", inputs: ["spListboxInput"] }, { kind: "component", type: PopoverComponent, selector: "sp-popover", inputs: ["noPadding", "noMaxWidth", "noAutoFocus", "trapFocus"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[spPopoverTriggerFor]", inputs: ["spPopoverPlacement", "spPopoverTriggerFor", "spPopoverNonModal", "spPopoverTriggerOpenOnPressStart", "spPopoverTriggerCloseOnScroll", "spPopoverTriggerDisabled", "spPopoverDisablePushInsideViewport"], outputs: ["spPopoverTriggerOpened", "spPopoverTriggerClosed"], exportAs: ["spPopoverTrigger"] }, { kind: "directive", type: i2$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: VisuallyHiddenDirective, selector: "[spVisuallyHidden]", inputs: ["spVisuallyHidden"] }, { kind: "component", type: HiddenSelectComponent, selector: "sp-hidden-select" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
|
|
4938
4997
|
__decorate([
|
|
4939
4998
|
AutoId()
|
|
4940
4999
|
], SelectComponent.prototype, "_valueContainerId", void 0);
|
|
@@ -4964,7 +5023,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
4964
5023
|
'[attr.aria-label]': 'null',
|
|
4965
5024
|
'[attr.aria-labelledby]': 'null',
|
|
4966
5025
|
'[attr.placeholder]': 'null',
|
|
4967
|
-
}, hostDirectives: [UseComponentStylesOnHost], template: "<sp-hidden-select></sp-hidden-select>\n<div\n role=\"button\"\n aria-haspopup=\"listbox\"\n class=\"sapphire-select__button\"\n [spPopoverTriggerFor]=\"popover\"\n [spPopoverTriggerDisabled]=\"disabled\"\n spPopoverTriggerOpenOnPressStart\n spPopoverTriggerCloseOnScroll\n spPopoverPlacement=\"bottom start\"\n #triggerElementRef\n #triggerRef=\"spPopoverTrigger\"\n (keydown)=\"handleKeyDown($event)\"\n (spPopoverTriggerClosed)=\"_onClose()\"\n (spPopoverTriggerOpened)=\"_onOpen()\"\n (focus)=\"_onFocus()\"\n cdkMonitorSubtreeFocus\n (cdkFocusChange)=\"_onFocusChange($event)\"\n [spPopoverNonModal]=\"searchable\"\n spPopoverDisablePushInsideViewport=\"true\"\n [id]=\"id\"\n [tabindex]=\"-1\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"_getAriaLabelledBy()\"\n [attr.aria-describedby]=\"_field?.error?.id || _field?.note?.id\"\n [attr.aria-invalid]=\"_field?.hasError(this) ? true : null\"\n>\n <div class=\"sapphire-select__value\" [id]=\"_valueContainerId\">\n <input\n *ngIf=\"searchable\"\n #searchInput\n tabindex=\"-1\"\n role=\"combobox\"\n class=\"sapphire-select__search-input\"\n [spListboxInput]=\"listbox\"\n [spVisuallyHidden]=\"!_isInputVisible()\"\n [attr.data-hidden]=\"!_isInputVisible()\"\n [placeholder]=\"placeholder || ''\"\n (keydown)=\"_onInputKeydown($event)\"\n (beforeinput)=\"open()\"\n [value]=\"_searchableSelectDirective?.searchValue\"\n (input)=\"_onSearchInput($event)\"\n />\n <ng-container *ngIf=\"!searchable || !_isInputVisible()\">\n <div\n *ngIf=\"selectedOptions.length === 0\"\n class=\"sapphire-select__placeholder\"\n >\n {{ placeholder }}\n </div>\n <ng-container *ngIf=\"selectedOptions.length > 0\">\n <ng-container *ngIf=\"!selectionText\">{{\n getSelectionText()\n }}</ng-container>\n <ng-content select=\"sp-selection-text\"></ng-content>\n </ng-container>\n </ng-container>\n </div>\n <div class=\"sapphire-select__icon-container\">\n <sp-icon name=\"chevronDown\"></sp-icon>\n </div>\n</div>\n<ng-template #popover>\n <sp-popover\n [style.display]=\"\n (filteredChildren$ | async)?.length === 0 ? 'none' : undefined\n \"\n noPadding\n noMaxWidth\n [style.min-width]=\"triggerElementRef.offsetWidth + 'px'\"\n >\n <sp-listbox\n [spListboxItems]=\"(filteredChildren$ | async) || undefined\"\n navigationWrapDisabled\n [multiple]=\"multiple\"\n [(selectedValues)]=\"listboxValue\"\n (selectedValuesChange)=\"_searchableSelectDirective?.setSearchValue('')\"\n (selected)=\"_handleSelected()\"\n [size]=\"_field?.size\"\n >\n </sp-listbox>\n </sp-popover>\n</ng-template>\n", styles: [".sapphire-select{position:relative;display:
|
|
5026
|
+
}, hostDirectives: [UseComponentStylesOnHost], template: "<sp-hidden-select></sp-hidden-select>\n<div\n role=\"button\"\n aria-haspopup=\"listbox\"\n class=\"sapphire-select__button\"\n [spPopoverTriggerFor]=\"popover\"\n [spPopoverTriggerDisabled]=\"disabled\"\n spPopoverTriggerOpenOnPressStart\n spPopoverTriggerCloseOnScroll\n spPopoverPlacement=\"bottom start\"\n #triggerElementRef\n #triggerRef=\"spPopoverTrigger\"\n (keydown)=\"handleKeyDown($event)\"\n (spPopoverTriggerClosed)=\"_onClose()\"\n (spPopoverTriggerOpened)=\"_onOpen()\"\n (focus)=\"_onFocus()\"\n cdkMonitorSubtreeFocus\n (cdkFocusChange)=\"_onFocusChange($event)\"\n [spPopoverNonModal]=\"searchable\"\n spPopoverDisablePushInsideViewport=\"true\"\n [id]=\"id\"\n [tabindex]=\"-1\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"_getAriaLabelledBy()\"\n [attr.aria-describedby]=\"_field?.error?.id || _field?.note?.id\"\n [attr.aria-invalid]=\"_field?.hasError(this) ? true : null\"\n>\n <div class=\"sapphire-select__value\" [id]=\"_valueContainerId\">\n <input\n *ngIf=\"searchable\"\n #searchInput\n tabindex=\"-1\"\n role=\"combobox\"\n class=\"sapphire-select__search-input\"\n [spListboxInput]=\"listbox\"\n [spVisuallyHidden]=\"!_isInputVisible()\"\n [attr.data-hidden]=\"!_isInputVisible()\"\n [placeholder]=\"placeholder || ''\"\n (keydown)=\"_onInputKeydown($event)\"\n (beforeinput)=\"open()\"\n [value]=\"_searchableSelectDirective?.searchValue\"\n (input)=\"_onSearchInput($event)\"\n />\n <ng-container *ngIf=\"!searchable || !_isInputVisible()\">\n <div\n *ngIf=\"selectedOptions.length === 0\"\n class=\"sapphire-select__placeholder\"\n >\n {{ placeholder }}\n </div>\n <ng-container *ngIf=\"selectedOptions.length > 0\">\n <ng-container *ngIf=\"!selectionText\">{{\n getSelectionText()\n }}</ng-container>\n <ng-content select=\"sp-selection-text\"></ng-content>\n </ng-container>\n </ng-container>\n </div>\n <div class=\"sapphire-select__icon-container\">\n <sp-icon name=\"chevronDown\"></sp-icon>\n </div>\n</div>\n<ng-template #popover>\n <sp-popover\n [style.display]=\"\n (filteredChildren$ | async)?.length === 0 ? 'none' : undefined\n \"\n noPadding\n noMaxWidth\n [style.min-width]=\"triggerElementRef.offsetWidth + 'px'\"\n >\n <sp-listbox\n [spListboxItems]=\"(filteredChildren$ | async) || undefined\"\n navigationWrapDisabled\n [multiple]=\"multiple\"\n [(selectedValues)]=\"listboxValue\"\n (selectedValuesChange)=\"_searchableSelectDirective?.setSearchValue('')\"\n (selected)=\"_handleSelected()\"\n [size]=\"_field?.size\"\n >\n </sp-listbox>\n </sp-popover>\n</ng-template>\n", styles: [".sapphire-select{position:relative;display:block;color:var(--sapphire-semantic-color-content-default-primary);font-family:var(--sapphire-semantic-font-name-default);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-select__button{display:flex;align-items:center;height:var(--sapphire-semantic-size-height-input-lg);box-sizing:border-box;cursor:pointer;padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-lg);border:none;background-color:var(--sapphire-semantic-color-background-field-default);width:100%;outline:0;text-align:left;color:inherit;font-family:inherit;box-shadow:inset 0 0 0 1px var(--sapphire-semantic-color-border-field-default);border-radius:var(--sapphire-semantic-size-radius-sm);gap:var(--sapphire-semantic-size-spacing-30)}.sapphire-select--md .sapphire-select__button{height:var(--sapphire-semantic-size-height-input-md);padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-md);gap:var(--sapphire-semantic-size-spacing-20)}.sapphire-select__value{flex:1 0 0;min-width:0;font-size:var(--sapphire-semantic-size-font-control-default);width:100%;font-weight:var(--sapphire-semantic-font-weight-default-regular);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sapphire-select--md .sapphire-select__value{font-size:var(--sapphire-semantic-size-font-control-md)}.sapphire-select__placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sapphire-semantic-color-content-default-secondary)}.sapphire-select__icon-container{line-height:0;width:var(--sapphire-semantic-size-icon-lg);height:var(--sapphire-semantic-size-icon-lg)}.sapphire-select--md .sapphire-select__icon-container{width:var(--sapphire-semantic-size-icon-md);height:var(--sapphire-semantic-size-icon-md)}.sapphire-select__prefix{display:inherit;font-size:var(--sapphire-semantic-size-font-control-default)}.sapphire-select--md .sapphire-select__prefix{font-size:var(--sapphire-semantic-size-font-control-md)}.sapphire-select__search-input:not([data-hidden=true]){all:inherit}.sapphire-select__search-input::placeholder{color:var(--sapphire-semantic-color-content-default-secondary)}.sapphire-select__native-select{position:absolute;inset:0;opacity:.01;width:100%;z-index:1}.sapphire-select--error:not(.is-disabled) .sapphire-select__button{box-shadow:inset 0 0 0 1px var(--sapphire-semantic-color-border-field-error)}.sapphire-select:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring)}.sapphire-select--error:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-border-field-error)}.sapphire-select.is-disabled .sapphire-select__button{cursor:not-allowed}\n"] }]
|
|
4968
5027
|
}], ctorParameters: function () { return [{ type: SelectValueHolder }, { type: i2$2.FocusMonitor }, { type: i2$2.InputModalityDetector }, { type: FieldComponent, decorators: [{
|
|
4969
5028
|
type: Optional
|
|
4970
5029
|
}] }, { type: SearchableSelectDirective, decorators: [{
|
|
@@ -5065,7 +5124,7 @@ BasicSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
|
|
|
5065
5124
|
useExisting: forwardRef(() => BasicSelectComponent),
|
|
5066
5125
|
},
|
|
5067
5126
|
ViewEncapsulationProvider,
|
|
5068
|
-
], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true }, { propertyName: "triggerElementRef", first: true, predicate: ["triggerElementRef"], descendants: true, read: ElementRef }, { propertyName: "listbox", first: true, predicate: ListboxComponent, descendants: true }], exportAs: ["spBasicSelect"], usesInheritance: true, ngImport: i0, template: "<div style=\"position: relative\">\n <sp-hidden-select></sp-hidden-select>\n <button\n sp-button\n [variant]=\"variant\"\n [size]=\"size\"\n iconAlign=\"right\"\n [spPopoverTriggerFor]=\"popover\"\n spPopoverPlacement=\"bottom start\"\n #triggerElementRef\n #triggerRef=\"spPopoverTrigger\"\n (keydown)=\"handleKeyDown($event)\"\n (spPopoverTriggerOpened)=\"_onOpen()\"\n (spPopoverTriggerClosed)=\"_onClose()\"\n cdkMonitorElementFocus\n (cdkFocusChange)=\"_onFocusChange($event)\"\n aria-haspopup=\"listbox\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [disabled]=\"disabled\"\n >\n <span *ngIf=\"selectedOptions.length === 0\">\n {{ placeholder }}\n </span>\n <ng-container *ngIf=\"selectedOptions.length > 0\">\n <ng-container *ngIf=\"!selectionText\">{{\n getSelectionText()\n }}</ng-container>\n <ng-content select=\"sp-selection-text\"></ng-content>\n </ng-container>\n <sp-icon spButtonIcon name=\"chevronDown\"></sp-icon>\n </button>\n <ng-template #popover>\n <sp-popover noPadding>\n <sp-listbox\n [spListboxItems]=\"listboxChildren\"\n navigationWrapDisabled\n [multiple]=\"multiple\"\n [(selectedValues)]=\"listboxValue\"\n (selected)=\"_handleSelected()\"\n [size]=\"size\"\n >\n </sp-listbox>\n </sp-popover>\n </ng-template>\n</div>\n", styles: [".sapphire-select{position:relative;display:
|
|
5127
|
+
], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerRef"], descendants: true }, { propertyName: "triggerElementRef", first: true, predicate: ["triggerElementRef"], descendants: true, read: ElementRef }, { propertyName: "listbox", first: true, predicate: ListboxComponent, descendants: true }], exportAs: ["spBasicSelect"], usesInheritance: true, ngImport: i0, template: "<div style=\"position: relative\">\n <sp-hidden-select></sp-hidden-select>\n <button\n sp-button\n [variant]=\"variant\"\n [size]=\"size\"\n iconAlign=\"right\"\n [spPopoverTriggerFor]=\"popover\"\n spPopoverPlacement=\"bottom start\"\n #triggerElementRef\n #triggerRef=\"spPopoverTrigger\"\n (keydown)=\"handleKeyDown($event)\"\n (spPopoverTriggerOpened)=\"_onOpen()\"\n (spPopoverTriggerClosed)=\"_onClose()\"\n cdkMonitorElementFocus\n (cdkFocusChange)=\"_onFocusChange($event)\"\n aria-haspopup=\"listbox\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [disabled]=\"disabled\"\n >\n <span *ngIf=\"selectedOptions.length === 0\">\n {{ placeholder }}\n </span>\n <ng-container *ngIf=\"selectedOptions.length > 0\">\n <ng-container *ngIf=\"!selectionText\">{{\n getSelectionText()\n }}</ng-container>\n <ng-content select=\"sp-selection-text\"></ng-content>\n </ng-container>\n <sp-icon spButtonIcon name=\"chevronDown\"></sp-icon>\n </button>\n <ng-template #popover>\n <sp-popover noPadding>\n <sp-listbox\n [spListboxItems]=\"listboxChildren\"\n navigationWrapDisabled\n [multiple]=\"multiple\"\n [(selectedValues)]=\"listboxValue\"\n (selected)=\"_handleSelected()\"\n [size]=\"size\"\n >\n </sp-listbox>\n </sp-popover>\n </ng-template>\n</div>\n", styles: [".sapphire-select{position:relative;display:block;color:var(--sapphire-semantic-color-content-default-primary);font-family:var(--sapphire-semantic-font-name-default);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-select__button{display:flex;align-items:center;height:var(--sapphire-semantic-size-height-input-lg);box-sizing:border-box;cursor:pointer;padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-lg);border:none;background-color:var(--sapphire-semantic-color-background-field-default);width:100%;outline:0;text-align:left;color:inherit;font-family:inherit;box-shadow:inset 0 0 0 1px var(--sapphire-semantic-color-border-field-default);border-radius:var(--sapphire-semantic-size-radius-sm);gap:var(--sapphire-semantic-size-spacing-30)}.sapphire-select--md .sapphire-select__button{height:var(--sapphire-semantic-size-height-input-md);padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-md);gap:var(--sapphire-semantic-size-spacing-20)}.sapphire-select__value{flex:1 0 0;min-width:0;font-size:var(--sapphire-semantic-size-font-control-default);width:100%;font-weight:var(--sapphire-semantic-font-weight-default-regular);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sapphire-select--md .sapphire-select__value{font-size:var(--sapphire-semantic-size-font-control-md)}.sapphire-select__placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sapphire-semantic-color-content-default-secondary)}.sapphire-select__icon-container{line-height:0;width:var(--sapphire-semantic-size-icon-lg);height:var(--sapphire-semantic-size-icon-lg)}.sapphire-select--md .sapphire-select__icon-container{width:var(--sapphire-semantic-size-icon-md);height:var(--sapphire-semantic-size-icon-md)}.sapphire-select__prefix{display:inherit;font-size:var(--sapphire-semantic-size-font-control-default)}.sapphire-select--md .sapphire-select__prefix{font-size:var(--sapphire-semantic-size-font-control-md)}.sapphire-select__search-input:not([data-hidden=true]){all:inherit}.sapphire-select__search-input::placeholder{color:var(--sapphire-semantic-color-content-default-secondary)}.sapphire-select__native-select{position:absolute;inset:0;opacity:.01;width:100%;z-index:1}.sapphire-select--error:not(.is-disabled) .sapphire-select__button{box-shadow:inset 0 0 0 1px var(--sapphire-semantic-color-border-field-error)}.sapphire-select:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring)}.sapphire-select--error:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-border-field-error)}.sapphire-select.is-disabled .sapphire-select__button{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size"] }, { kind: "component", type: ListboxComponent, selector: "sp-listbox", inputs: ["selectedValues", "spListboxItems", "disabled", "multiple", "navigationWrapDisabled", "aria-label", "aria-labelledby", "size", "id"], outputs: ["selectedValuesChange", "selected"], exportAs: ["spListbox"] }, { kind: "component", type: PopoverComponent, selector: "sp-popover", inputs: ["noPadding", "noMaxWidth", "noAutoFocus", "trapFocus"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[spPopoverTriggerFor]", inputs: ["spPopoverPlacement", "spPopoverTriggerFor", "spPopoverNonModal", "spPopoverTriggerOpenOnPressStart", "spPopoverTriggerCloseOnScroll", "spPopoverTriggerDisabled", "spPopoverDisablePushInsideViewport"], outputs: ["spPopoverTriggerOpened", "spPopoverTriggerClosed"], exportAs: ["spPopoverTrigger"] }, { kind: "directive", type: i2$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "component", type: ButtonComponent, selector: "button[sp-button], a[sp-button]", inputs: ["variant", "size", "disabled", "iconAlign", "type"] }, { kind: "directive", type: ButtonIconDirective, selector: "[spButtonIcon]" }, { kind: "component", type: HiddenSelectComponent, selector: "sp-hidden-select" }] });
|
|
5069
5128
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: BasicSelectComponent, decorators: [{
|
|
5070
5129
|
type: Component,
|
|
5071
5130
|
args: [{ selector: 'sp-basic-select', exportAs: 'spBasicSelect', providers: [
|
|
@@ -5082,7 +5141,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
5082
5141
|
], host: {
|
|
5083
5142
|
'[attr.aria-label]': 'null',
|
|
5084
5143
|
'[attr.aria-labelledby]': 'null',
|
|
5085
|
-
}, template: "<div style=\"position: relative\">\n <sp-hidden-select></sp-hidden-select>\n <button\n sp-button\n [variant]=\"variant\"\n [size]=\"size\"\n iconAlign=\"right\"\n [spPopoverTriggerFor]=\"popover\"\n spPopoverPlacement=\"bottom start\"\n #triggerElementRef\n #triggerRef=\"spPopoverTrigger\"\n (keydown)=\"handleKeyDown($event)\"\n (spPopoverTriggerOpened)=\"_onOpen()\"\n (spPopoverTriggerClosed)=\"_onClose()\"\n cdkMonitorElementFocus\n (cdkFocusChange)=\"_onFocusChange($event)\"\n aria-haspopup=\"listbox\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [disabled]=\"disabled\"\n >\n <span *ngIf=\"selectedOptions.length === 0\">\n {{ placeholder }}\n </span>\n <ng-container *ngIf=\"selectedOptions.length > 0\">\n <ng-container *ngIf=\"!selectionText\">{{\n getSelectionText()\n }}</ng-container>\n <ng-content select=\"sp-selection-text\"></ng-content>\n </ng-container>\n <sp-icon spButtonIcon name=\"chevronDown\"></sp-icon>\n </button>\n <ng-template #popover>\n <sp-popover noPadding>\n <sp-listbox\n [spListboxItems]=\"listboxChildren\"\n navigationWrapDisabled\n [multiple]=\"multiple\"\n [(selectedValues)]=\"listboxValue\"\n (selected)=\"_handleSelected()\"\n [size]=\"size\"\n >\n </sp-listbox>\n </sp-popover>\n </ng-template>\n</div>\n", styles: [".sapphire-select{position:relative;display:
|
|
5144
|
+
}, template: "<div style=\"position: relative\">\n <sp-hidden-select></sp-hidden-select>\n <button\n sp-button\n [variant]=\"variant\"\n [size]=\"size\"\n iconAlign=\"right\"\n [spPopoverTriggerFor]=\"popover\"\n spPopoverPlacement=\"bottom start\"\n #triggerElementRef\n #triggerRef=\"spPopoverTrigger\"\n (keydown)=\"handleKeyDown($event)\"\n (spPopoverTriggerOpened)=\"_onOpen()\"\n (spPopoverTriggerClosed)=\"_onClose()\"\n cdkMonitorElementFocus\n (cdkFocusChange)=\"_onFocusChange($event)\"\n aria-haspopup=\"listbox\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [disabled]=\"disabled\"\n >\n <span *ngIf=\"selectedOptions.length === 0\">\n {{ placeholder }}\n </span>\n <ng-container *ngIf=\"selectedOptions.length > 0\">\n <ng-container *ngIf=\"!selectionText\">{{\n getSelectionText()\n }}</ng-container>\n <ng-content select=\"sp-selection-text\"></ng-content>\n </ng-container>\n <sp-icon spButtonIcon name=\"chevronDown\"></sp-icon>\n </button>\n <ng-template #popover>\n <sp-popover noPadding>\n <sp-listbox\n [spListboxItems]=\"listboxChildren\"\n navigationWrapDisabled\n [multiple]=\"multiple\"\n [(selectedValues)]=\"listboxValue\"\n (selected)=\"_handleSelected()\"\n [size]=\"size\"\n >\n </sp-listbox>\n </sp-popover>\n </ng-template>\n</div>\n", styles: [".sapphire-select{position:relative;display:block;color:var(--sapphire-semantic-color-content-default-primary);font-family:var(--sapphire-semantic-font-name-default);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-select__button{display:flex;align-items:center;height:var(--sapphire-semantic-size-height-input-lg);box-sizing:border-box;cursor:pointer;padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-lg);border:none;background-color:var(--sapphire-semantic-color-background-field-default);width:100%;outline:0;text-align:left;color:inherit;font-family:inherit;box-shadow:inset 0 0 0 1px var(--sapphire-semantic-color-border-field-default);border-radius:var(--sapphire-semantic-size-radius-sm);gap:var(--sapphire-semantic-size-spacing-30)}.sapphire-select--md .sapphire-select__button{height:var(--sapphire-semantic-size-height-input-md);padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-md);gap:var(--sapphire-semantic-size-spacing-20)}.sapphire-select__value{flex:1 0 0;min-width:0;font-size:var(--sapphire-semantic-size-font-control-default);width:100%;font-weight:var(--sapphire-semantic-font-weight-default-regular);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sapphire-select--md .sapphire-select__value{font-size:var(--sapphire-semantic-size-font-control-md)}.sapphire-select__placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sapphire-semantic-color-content-default-secondary)}.sapphire-select__icon-container{line-height:0;width:var(--sapphire-semantic-size-icon-lg);height:var(--sapphire-semantic-size-icon-lg)}.sapphire-select--md .sapphire-select__icon-container{width:var(--sapphire-semantic-size-icon-md);height:var(--sapphire-semantic-size-icon-md)}.sapphire-select__prefix{display:inherit;font-size:var(--sapphire-semantic-size-font-control-default)}.sapphire-select--md .sapphire-select__prefix{font-size:var(--sapphire-semantic-size-font-control-md)}.sapphire-select__search-input:not([data-hidden=true]){all:inherit}.sapphire-select__search-input::placeholder{color:var(--sapphire-semantic-color-content-default-secondary)}.sapphire-select__native-select{position:absolute;inset:0;opacity:.01;width:100%;z-index:1}.sapphire-select--error:not(.is-disabled) .sapphire-select__button{box-shadow:inset 0 0 0 1px var(--sapphire-semantic-color-border-field-error)}.sapphire-select:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring)}.sapphire-select--error:not(.is-disabled).is-focus .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-border-field-error)}.sapphire-select.is-disabled .sapphire-select__button{cursor:not-allowed}\n"] }]
|
|
5086
5145
|
}], ctorParameters: function () { return [{ type: SelectValueHolder }, { type: i2$2.FocusMonitor }]; }, propDecorators: { size: [{
|
|
5087
5146
|
type: Input
|
|
5088
5147
|
}], variant: [{
|
|
@@ -5297,7 +5356,7 @@ class SegmentedTabComponent {
|
|
|
5297
5356
|
}
|
|
5298
5357
|
}
|
|
5299
5358
|
SegmentedTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SegmentedTabComponent, deps: [{ token: forwardRef(() => SegmentedTabsComponent) }], target: i0.ɵɵFactoryTarget.Component });
|
|
5300
|
-
SegmentedTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: SegmentedTabComponent, selector: "sp-segmented-tab", inputs: { disabled: "disabled", label: "label" }, host: { properties: { "style.flex": "'1 1 auto'", "style.display": "'inline-flex'" } }, viewQueries: [{ propertyName: "_contentTemplate", first: true, predicate: TemplateRef, descendants: true }, { propertyName: "_button", first: true, predicate: ["button"], descendants: true }], ngImport: i0, template: "<button\n #button\n class=\"sapphire-segmented-control__button\"\n _spUseComponentStyles\n [class.sapphire-segmented-control__button--disabled]=\"disabled\"\n [class.sapphire-segmented-control__button--active]=\"isSelected()\"\n role=\"tab\"\n (click)=\"select()\"\n [id]=\"id\"\n [tabIndex]=\"getTabIndex()\"\n [attr.aria-disabled]=\"disabled\"\n>\n {{ label }}\n <ng-content select=\"sp-segmented-tab-label\"></ng-content>\n</button>\n<ng-template>\n <div\n class=\"sapphire-tab-panel\"\n role=\"tabpanel\"\n tabindex=\"0\"\n [id]=\"id + '-panel'\"\n [attr.aria-labelledby]=\"id\"\n >\n <ng-content select=\"sp-segmented-tab-content\"></ng-content>\n </div>\n</ng-template>\n", styles: [".sapphire-tabs-scroll-container{-ms-overflow-style:none;scrollbar-width:none;overflow-x:scroll;overflow-y:hidden;white-space:nowrap;position:relative;scroll-padding:0 calc(2 * var(--sapphire-global-size-generic-100) + 1px);min-width:0;flex:1;overscroll-behavior-x:contain}.sapphire-tabs-scroll-container::-webkit-scrollbar{display:none}.sapphire-tabs-overflow-arrows{display:flex;align-items:center;min-width:0;flex:1;position:relative}.sapphire-tabs-overflow-arrows--inline{display:inline-flex}.sapphire-tabs-overflow-arrows__arrow{position:absolute;z-index:10;pointer-events:none}.sapphire-tabs-overflow-arrows__arrow--left{left:0;padding-right:var(--sapphire-global-size-generic-100);background:linear-gradient(90deg,var(--sapphire-global-color-neutral-white) 0%,var(--sapphire-global-color-neutral-white) 40%,var(--sapphire-global-color-neutral-transparent) 100%)}.sapphire-tabs-overflow-arrows__arrow--right{right:0;padding-left:var(--sapphire-global-size-generic-100);background:linear-gradient(90deg,var(--sapphire-global-color-neutral-transparent) 0%,var(--sapphire-global-color-neutral-white) 60%,var(--sapphire-global-color-neutral-white) 100%)}.sapphire-tabs{display:inline-flex;box-sizing:border-box;height:var(--sapphire-semantic-size-height-control-lg);gap:var(--sapphire-semantic-size-spacing-40);overflow:hidden;position:relative;min-width:100%;flex:1;padding:0 var(--sapphire-semantic-size-focus-ring)}.sapphire-tabs:after{content:\"\";display:block;position:absolute;bottom:0;width:100%;height:var(--sapphire-semantic-size-border-md);background-color:var(--sapphire-semantic-color-border-separator-default);border-radius:var(--sapphire-semantic-size-border-md)}.sapphire-tabs--no-border:after{display:none}.sapphire-tabs__tab{display:flex;align-items:center;position:relative;font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-control-md);text-decoration:none;background:none;color:var(--sapphire-semantic-color-content-default-primary);box-sizing:border-box;white-space:nowrap;border-width:0;padding:0;margin:var(--sapphire-semantic-size-focus-ring) 0 var(--sapphire-semantic-size-focus-ring) 0;cursor:pointer;outline:none;border-radius:var(--sapphire-semantic-size-radius-sm);z-index:1}.sapphire-tabs__tab:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-tabs__tab:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{color:var(--sapphire-semantic-color-content-action-secondary-default)}.sapphire-tabs__tab.js-focus.is-focus,.sapphire-tabs__tab:not(.js-focus):focus-visible{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring)}.sapphire-tabs__tab:disabled,.sapphire-tabs__tab.is-disabled{cursor:not-allowed}.sapphire-tabs__tab:disabled .sapphire-tabs__label,.sapphire-tabs__tab.is-disabled .sapphire-tabs__label{opacity:var(--sapphire-semantic-opacity-disabled)}.sapphire-tabs__label{padding:0 1px}.sapphire-tabs__tab--active{color:var(--sapphire-semantic-color-content-action-secondary-default)}.sapphire-tabs__tab--active.js-focus:not(.is-focus):after,.sapphire-tabs__tab--active:not(.js-focus):not(:focus-visible):after{content:\"\";display:block;position:absolute;bottom:calc(-1 * var(--sapphire-semantic-size-focus-ring));width:100%;height:var(--sapphire-semantic-size-border-md);background-color:var(--sapphire-semantic-color-content-action-secondary-default);border-radius:var(--sapphire-semantic-size-border-md)}.sapphire-tabs--sm{height:var(--sapphire-semantic-size-height-control-md);gap:var(--sapphire-semantic-size-spacing-40)}.sapphire-tabs--sm .sapphire-tabs__tab{font-size:var(--sapphire-semantic-size-font-control-sm)}.sapphire-tabs--lg{height:var(--sapphire-semantic-size-height-control-xl);gap:var(--sapphire-semantic-size-spacing-50)}.sapphire-tabs--lg .sapphire-tabs__tab{font-size:var(--sapphire-semantic-size-font-control-default)}.sapphire-tab-panel{min-height:0;flex-grow:1}.sapphire-tab-panel.js-focus.is-focus,.sapphire-tab-panel:not(.js-focus):focus-visible{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);outline-offset:var(--sapphire-semantic-size-focus-ring)}\n"], dependencies: [{ kind: "directive", type: UseComponentStyles, selector: "[_spUseComponentStyles]" }] });
|
|
5359
|
+
SegmentedTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: SegmentedTabComponent, selector: "sp-segmented-tab", inputs: { disabled: "disabled", label: "label" }, host: { properties: { "style.flex": "'1 1 auto'", "style.display": "'inline-flex'" } }, viewQueries: [{ propertyName: "_contentTemplate", first: true, predicate: TemplateRef, descendants: true }, { propertyName: "_button", first: true, predicate: ["button"], descendants: true }], ngImport: i0, template: "<button\n #button\n class=\"sapphire-segmented-control__button\"\n _spUseComponentStyles\n [class.sapphire-segmented-control__button--disabled]=\"disabled\"\n [class.sapphire-segmented-control__button--active]=\"isSelected()\"\n role=\"tab\"\n (click)=\"select()\"\n [id]=\"id\"\n [tabIndex]=\"getTabIndex()\"\n [attr.aria-disabled]=\"disabled\"\n>\n {{ label }}\n <ng-content select=\"sp-segmented-tab-label\"></ng-content>\n</button>\n<ng-template>\n <div\n class=\"sapphire-tab-panel\"\n role=\"tabpanel\"\n tabindex=\"0\"\n [id]=\"id + '-panel'\"\n [attr.aria-labelledby]=\"id\"\n >\n <ng-content select=\"sp-segmented-tab-content\"></ng-content>\n </div>\n</ng-template>\n", styles: [".sapphire-tabs-scroll-container{-ms-overflow-style:none;scrollbar-width:none;overflow-x:scroll;overflow-y:hidden;white-space:nowrap;position:relative;scroll-padding:0 calc(2 * var(--sapphire-global-size-generic-100) + 1px);min-width:0;flex:1;overscroll-behavior-x:contain}.sapphire-tabs-scroll-container::-webkit-scrollbar{display:none}.sapphire-tabs-overflow-arrows{display:flex;align-items:center;min-width:0;flex:1;position:relative}.sapphire-tabs-overflow-arrows--inline{display:inline-flex}.sapphire-tabs-overflow-arrows__arrow{position:absolute;z-index:10;pointer-events:none}.sapphire-tabs-overflow-arrows__arrow--left{left:0;padding-right:var(--sapphire-global-size-generic-100);background:linear-gradient(90deg,var(--sapphire-global-color-neutral-white) 0%,var(--sapphire-global-color-neutral-white) 40%,var(--sapphire-global-color-neutral-transparent) 100%)}.sapphire-tabs-overflow-arrows__arrow--right{right:0;padding-left:var(--sapphire-global-size-generic-100);background:linear-gradient(90deg,var(--sapphire-global-color-neutral-transparent) 0%,var(--sapphire-global-color-neutral-white) 60%,var(--sapphire-global-color-neutral-white) 100%)}.sapphire-tabs{display:inline-flex;box-sizing:border-box;height:var(--sapphire-semantic-size-height-control-lg);gap:var(--sapphire-semantic-size-spacing-40);overflow:hidden;position:relative;min-width:100%;flex:1;padding:0 var(--sapphire-semantic-size-focus-ring)}.sapphire-tabs--align-left{justify-content:start}.sapphire-tabs--align-center{justify-content:center}.sapphire-tabs--align-right{justify-content:end}.sapphire-tabs:after{content:\"\";display:block;position:absolute;bottom:0;width:100%;height:var(--sapphire-semantic-size-border-md);background-color:var(--sapphire-semantic-color-border-separator-default);border-radius:var(--sapphire-semantic-size-border-md)}.sapphire-tabs--no-border:after{display:none}.sapphire-tabs__tab{display:flex;align-items:center;position:relative;font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-control-md);text-decoration:none;background:none;color:var(--sapphire-semantic-color-content-default-primary);box-sizing:border-box;white-space:nowrap;border-width:0;padding:0;margin:var(--sapphire-semantic-size-focus-ring) 0 var(--sapphire-semantic-size-focus-ring) 0;cursor:pointer;outline:none;border-radius:var(--sapphire-semantic-size-radius-sm);z-index:1}.sapphire-tabs__tab:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-tabs__tab:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{color:var(--sapphire-semantic-color-content-action-secondary-default)}.sapphire-tabs__tab.js-focus.is-focus,.sapphire-tabs__tab:not(.js-focus):focus-visible{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring)}.sapphire-tabs__tab:disabled,.sapphire-tabs__tab.is-disabled{cursor:not-allowed}.sapphire-tabs__tab:disabled .sapphire-tabs__label,.sapphire-tabs__tab.is-disabled .sapphire-tabs__label{opacity:var(--sapphire-semantic-opacity-disabled)}.sapphire-tabs__label{padding:0 1px}.sapphire-tabs__tab--active{color:var(--sapphire-semantic-color-content-action-secondary-default)}.sapphire-tabs__tab--active.js-focus:not(.is-focus):after,.sapphire-tabs__tab--active:not(.js-focus):not(:focus-visible):after{content:\"\";display:block;position:absolute;bottom:calc(-1 * var(--sapphire-semantic-size-focus-ring));width:100%;height:var(--sapphire-semantic-size-border-md);background-color:var(--sapphire-semantic-color-content-action-secondary-default);border-radius:var(--sapphire-semantic-size-border-md)}.sapphire-tabs--sm{height:var(--sapphire-semantic-size-height-control-md);gap:var(--sapphire-semantic-size-spacing-40)}.sapphire-tabs--sm .sapphire-tabs__tab{font-size:var(--sapphire-semantic-size-font-control-sm)}.sapphire-tabs--lg{height:var(--sapphire-semantic-size-height-control-xl);gap:var(--sapphire-semantic-size-spacing-50)}.sapphire-tabs--lg .sapphire-tabs__tab{font-size:var(--sapphire-semantic-size-font-control-default)}.sapphire-tab-panel{min-height:0;flex-grow:1}.sapphire-tab-panel.js-focus.is-focus,.sapphire-tab-panel:not(.js-focus):focus-visible{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);outline-offset:var(--sapphire-semantic-size-focus-ring)}\n"], dependencies: [{ kind: "directive", type: UseComponentStyles, selector: "[_spUseComponentStyles]" }] });
|
|
5301
5360
|
__decorate([
|
|
5302
5361
|
AutoId()
|
|
5303
5362
|
], SegmentedTabComponent.prototype, "id", void 0);
|
|
@@ -5307,7 +5366,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
5307
5366
|
// Angular specific styles that are needed due to extra dom elements added by angular
|
|
5308
5367
|
'[style.flex]': "'1 1 auto'",
|
|
5309
5368
|
'[style.display]': "'inline-flex'",
|
|
5310
|
-
}, template: "<button\n #button\n class=\"sapphire-segmented-control__button\"\n _spUseComponentStyles\n [class.sapphire-segmented-control__button--disabled]=\"disabled\"\n [class.sapphire-segmented-control__button--active]=\"isSelected()\"\n role=\"tab\"\n (click)=\"select()\"\n [id]=\"id\"\n [tabIndex]=\"getTabIndex()\"\n [attr.aria-disabled]=\"disabled\"\n>\n {{ label }}\n <ng-content select=\"sp-segmented-tab-label\"></ng-content>\n</button>\n<ng-template>\n <div\n class=\"sapphire-tab-panel\"\n role=\"tabpanel\"\n tabindex=\"0\"\n [id]=\"id + '-panel'\"\n [attr.aria-labelledby]=\"id\"\n >\n <ng-content select=\"sp-segmented-tab-content\"></ng-content>\n </div>\n</ng-template>\n", styles: [".sapphire-tabs-scroll-container{-ms-overflow-style:none;scrollbar-width:none;overflow-x:scroll;overflow-y:hidden;white-space:nowrap;position:relative;scroll-padding:0 calc(2 * var(--sapphire-global-size-generic-100) + 1px);min-width:0;flex:1;overscroll-behavior-x:contain}.sapphire-tabs-scroll-container::-webkit-scrollbar{display:none}.sapphire-tabs-overflow-arrows{display:flex;align-items:center;min-width:0;flex:1;position:relative}.sapphire-tabs-overflow-arrows--inline{display:inline-flex}.sapphire-tabs-overflow-arrows__arrow{position:absolute;z-index:10;pointer-events:none}.sapphire-tabs-overflow-arrows__arrow--left{left:0;padding-right:var(--sapphire-global-size-generic-100);background:linear-gradient(90deg,var(--sapphire-global-color-neutral-white) 0%,var(--sapphire-global-color-neutral-white) 40%,var(--sapphire-global-color-neutral-transparent) 100%)}.sapphire-tabs-overflow-arrows__arrow--right{right:0;padding-left:var(--sapphire-global-size-generic-100);background:linear-gradient(90deg,var(--sapphire-global-color-neutral-transparent) 0%,var(--sapphire-global-color-neutral-white) 60%,var(--sapphire-global-color-neutral-white) 100%)}.sapphire-tabs{display:inline-flex;box-sizing:border-box;height:var(--sapphire-semantic-size-height-control-lg);gap:var(--sapphire-semantic-size-spacing-40);overflow:hidden;position:relative;min-width:100%;flex:1;padding:0 var(--sapphire-semantic-size-focus-ring)}.sapphire-tabs:after{content:\"\";display:block;position:absolute;bottom:0;width:100%;height:var(--sapphire-semantic-size-border-md);background-color:var(--sapphire-semantic-color-border-separator-default);border-radius:var(--sapphire-semantic-size-border-md)}.sapphire-tabs--no-border:after{display:none}.sapphire-tabs__tab{display:flex;align-items:center;position:relative;font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-control-md);text-decoration:none;background:none;color:var(--sapphire-semantic-color-content-default-primary);box-sizing:border-box;white-space:nowrap;border-width:0;padding:0;margin:var(--sapphire-semantic-size-focus-ring) 0 var(--sapphire-semantic-size-focus-ring) 0;cursor:pointer;outline:none;border-radius:var(--sapphire-semantic-size-radius-sm);z-index:1}.sapphire-tabs__tab:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-tabs__tab:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{color:var(--sapphire-semantic-color-content-action-secondary-default)}.sapphire-tabs__tab.js-focus.is-focus,.sapphire-tabs__tab:not(.js-focus):focus-visible{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring)}.sapphire-tabs__tab:disabled,.sapphire-tabs__tab.is-disabled{cursor:not-allowed}.sapphire-tabs__tab:disabled .sapphire-tabs__label,.sapphire-tabs__tab.is-disabled .sapphire-tabs__label{opacity:var(--sapphire-semantic-opacity-disabled)}.sapphire-tabs__label{padding:0 1px}.sapphire-tabs__tab--active{color:var(--sapphire-semantic-color-content-action-secondary-default)}.sapphire-tabs__tab--active.js-focus:not(.is-focus):after,.sapphire-tabs__tab--active:not(.js-focus):not(:focus-visible):after{content:\"\";display:block;position:absolute;bottom:calc(-1 * var(--sapphire-semantic-size-focus-ring));width:100%;height:var(--sapphire-semantic-size-border-md);background-color:var(--sapphire-semantic-color-content-action-secondary-default);border-radius:var(--sapphire-semantic-size-border-md)}.sapphire-tabs--sm{height:var(--sapphire-semantic-size-height-control-md);gap:var(--sapphire-semantic-size-spacing-40)}.sapphire-tabs--sm .sapphire-tabs__tab{font-size:var(--sapphire-semantic-size-font-control-sm)}.sapphire-tabs--lg{height:var(--sapphire-semantic-size-height-control-xl);gap:var(--sapphire-semantic-size-spacing-50)}.sapphire-tabs--lg .sapphire-tabs__tab{font-size:var(--sapphire-semantic-size-font-control-default)}.sapphire-tab-panel{min-height:0;flex-grow:1}.sapphire-tab-panel.js-focus.is-focus,.sapphire-tab-panel:not(.js-focus):focus-visible{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);outline-offset:var(--sapphire-semantic-size-focus-ring)}\n"] }]
|
|
5369
|
+
}, template: "<button\n #button\n class=\"sapphire-segmented-control__button\"\n _spUseComponentStyles\n [class.sapphire-segmented-control__button--disabled]=\"disabled\"\n [class.sapphire-segmented-control__button--active]=\"isSelected()\"\n role=\"tab\"\n (click)=\"select()\"\n [id]=\"id\"\n [tabIndex]=\"getTabIndex()\"\n [attr.aria-disabled]=\"disabled\"\n>\n {{ label }}\n <ng-content select=\"sp-segmented-tab-label\"></ng-content>\n</button>\n<ng-template>\n <div\n class=\"sapphire-tab-panel\"\n role=\"tabpanel\"\n tabindex=\"0\"\n [id]=\"id + '-panel'\"\n [attr.aria-labelledby]=\"id\"\n >\n <ng-content select=\"sp-segmented-tab-content\"></ng-content>\n </div>\n</ng-template>\n", styles: [".sapphire-tabs-scroll-container{-ms-overflow-style:none;scrollbar-width:none;overflow-x:scroll;overflow-y:hidden;white-space:nowrap;position:relative;scroll-padding:0 calc(2 * var(--sapphire-global-size-generic-100) + 1px);min-width:0;flex:1;overscroll-behavior-x:contain}.sapphire-tabs-scroll-container::-webkit-scrollbar{display:none}.sapphire-tabs-overflow-arrows{display:flex;align-items:center;min-width:0;flex:1;position:relative}.sapphire-tabs-overflow-arrows--inline{display:inline-flex}.sapphire-tabs-overflow-arrows__arrow{position:absolute;z-index:10;pointer-events:none}.sapphire-tabs-overflow-arrows__arrow--left{left:0;padding-right:var(--sapphire-global-size-generic-100);background:linear-gradient(90deg,var(--sapphire-global-color-neutral-white) 0%,var(--sapphire-global-color-neutral-white) 40%,var(--sapphire-global-color-neutral-transparent) 100%)}.sapphire-tabs-overflow-arrows__arrow--right{right:0;padding-left:var(--sapphire-global-size-generic-100);background:linear-gradient(90deg,var(--sapphire-global-color-neutral-transparent) 0%,var(--sapphire-global-color-neutral-white) 60%,var(--sapphire-global-color-neutral-white) 100%)}.sapphire-tabs{display:inline-flex;box-sizing:border-box;height:var(--sapphire-semantic-size-height-control-lg);gap:var(--sapphire-semantic-size-spacing-40);overflow:hidden;position:relative;min-width:100%;flex:1;padding:0 var(--sapphire-semantic-size-focus-ring)}.sapphire-tabs--align-left{justify-content:start}.sapphire-tabs--align-center{justify-content:center}.sapphire-tabs--align-right{justify-content:end}.sapphire-tabs:after{content:\"\";display:block;position:absolute;bottom:0;width:100%;height:var(--sapphire-semantic-size-border-md);background-color:var(--sapphire-semantic-color-border-separator-default);border-radius:var(--sapphire-semantic-size-border-md)}.sapphire-tabs--no-border:after{display:none}.sapphire-tabs__tab{display:flex;align-items:center;position:relative;font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-control-md);text-decoration:none;background:none;color:var(--sapphire-semantic-color-content-default-primary);box-sizing:border-box;white-space:nowrap;border-width:0;padding:0;margin:var(--sapphire-semantic-size-focus-ring) 0 var(--sapphire-semantic-size-focus-ring) 0;cursor:pointer;outline:none;border-radius:var(--sapphire-semantic-size-radius-sm);z-index:1}.sapphire-tabs__tab:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-tabs__tab:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{color:var(--sapphire-semantic-color-content-action-secondary-default)}.sapphire-tabs__tab.js-focus.is-focus,.sapphire-tabs__tab:not(.js-focus):focus-visible{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring)}.sapphire-tabs__tab:disabled,.sapphire-tabs__tab.is-disabled{cursor:not-allowed}.sapphire-tabs__tab:disabled .sapphire-tabs__label,.sapphire-tabs__tab.is-disabled .sapphire-tabs__label{opacity:var(--sapphire-semantic-opacity-disabled)}.sapphire-tabs__label{padding:0 1px}.sapphire-tabs__tab--active{color:var(--sapphire-semantic-color-content-action-secondary-default)}.sapphire-tabs__tab--active.js-focus:not(.is-focus):after,.sapphire-tabs__tab--active:not(.js-focus):not(:focus-visible):after{content:\"\";display:block;position:absolute;bottom:calc(-1 * var(--sapphire-semantic-size-focus-ring));width:100%;height:var(--sapphire-semantic-size-border-md);background-color:var(--sapphire-semantic-color-content-action-secondary-default);border-radius:var(--sapphire-semantic-size-border-md)}.sapphire-tabs--sm{height:var(--sapphire-semantic-size-height-control-md);gap:var(--sapphire-semantic-size-spacing-40)}.sapphire-tabs--sm .sapphire-tabs__tab{font-size:var(--sapphire-semantic-size-font-control-sm)}.sapphire-tabs--lg{height:var(--sapphire-semantic-size-height-control-xl);gap:var(--sapphire-semantic-size-spacing-50)}.sapphire-tabs--lg .sapphire-tabs__tab{font-size:var(--sapphire-semantic-size-font-control-default)}.sapphire-tab-panel{min-height:0;flex-grow:1}.sapphire-tab-panel.js-focus.is-focus,.sapphire-tab-panel:not(.js-focus):focus-visible{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);outline-offset:var(--sapphire-semantic-size-focus-ring)}\n"] }]
|
|
5311
5370
|
}], ctorParameters: function () { return [{ type: SegmentedTabsComponent, decorators: [{
|
|
5312
5371
|
type: Inject,
|
|
5313
5372
|
args: [forwardRef(() => SegmentedTabsComponent)]
|
|
@@ -5348,7 +5407,7 @@ class SegmentedTabsComponent {
|
|
|
5348
5407
|
this.selectedIndexChange = new EventEmitter();
|
|
5349
5408
|
this.tabs = new QueryList();
|
|
5350
5409
|
this._tabIds = [];
|
|
5351
|
-
this.
|
|
5410
|
+
this._gliderStyles = { left: '0px', width: '0px' };
|
|
5352
5411
|
this._animationEnabled = false;
|
|
5353
5412
|
this._focusVisible = false;
|
|
5354
5413
|
this.skipAnimationFrame();
|
|
@@ -5370,17 +5429,17 @@ class SegmentedTabsComponent {
|
|
|
5370
5429
|
// changed after it was checked" angular error.
|
|
5371
5430
|
//
|
|
5372
5431
|
// https://angular.io/errors/NG0100
|
|
5373
|
-
this.
|
|
5432
|
+
this.setGliderStyles();
|
|
5374
5433
|
this.changeDetector.detectChanges();
|
|
5375
5434
|
this.resizeObserver = new ResizeObserver(() => {
|
|
5376
5435
|
// zonejs doesn't monkey-patch resize observer (yet)
|
|
5377
5436
|
this.zone.run(() => {
|
|
5378
|
-
this.
|
|
5437
|
+
this.setGliderStyles();
|
|
5379
5438
|
});
|
|
5380
5439
|
});
|
|
5381
5440
|
this.resizeObserver.observe(this.segmentedControl.nativeElement);
|
|
5382
5441
|
this.selectedIndexChange.subscribe(() => {
|
|
5383
|
-
this.
|
|
5442
|
+
this.setGliderStyles();
|
|
5384
5443
|
});
|
|
5385
5444
|
}
|
|
5386
5445
|
ngOnDestroy() {
|
|
@@ -5388,7 +5447,7 @@ class SegmentedTabsComponent {
|
|
|
5388
5447
|
this.selectedIndexChange.unsubscribe();
|
|
5389
5448
|
}
|
|
5390
5449
|
ngAfterViewChecked() {
|
|
5391
|
-
this.
|
|
5450
|
+
this.setGliderStyles();
|
|
5392
5451
|
this.changeDetector.detectChanges();
|
|
5393
5452
|
}
|
|
5394
5453
|
getFocusedTab() {
|
|
@@ -5458,11 +5517,18 @@ class SegmentedTabsComponent {
|
|
|
5458
5517
|
return;
|
|
5459
5518
|
}
|
|
5460
5519
|
}
|
|
5461
|
-
|
|
5520
|
+
setGliderStyles() {
|
|
5521
|
+
const { offsetLeft, clientWidth } = this.getSelectedTabPosition();
|
|
5522
|
+
this._gliderStyles = {
|
|
5523
|
+
left: `${offsetLeft}px`,
|
|
5524
|
+
width: `${clientWidth}px`,
|
|
5525
|
+
};
|
|
5526
|
+
}
|
|
5527
|
+
getSelectedTabPosition() {
|
|
5462
5528
|
const tab = this.tabs.toArray()[this.selectedIndex]?._button?.nativeElement;
|
|
5463
|
-
|
|
5464
|
-
|
|
5465
|
-
|
|
5529
|
+
return {
|
|
5530
|
+
offsetLeft: tab?.offsetLeft || 0,
|
|
5531
|
+
clientWidth: tab?.clientWidth || 0,
|
|
5466
5532
|
};
|
|
5467
5533
|
}
|
|
5468
5534
|
onTabsChange() {
|
|
@@ -5513,7 +5579,7 @@ class SegmentedTabsComponent {
|
|
|
5513
5579
|
}
|
|
5514
5580
|
}
|
|
5515
5581
|
SegmentedTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SegmentedTabsComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
5516
|
-
SegmentedTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: SegmentedTabsComponent, selector: "sp-segmented-tabs", inputs: { size: "size", align: "align", keyboardActivation: "keyboardActivation", disabled: "disabled", selectedIndex: "selectedIndex" }, outputs: { selectedIndexChange: "selectedIndexChange" }, host: { properties: { "attr.align": "null" } }, providers: [ViewEncapsulationProvider], queries: [{ propertyName: "tabs", predicate: i0.forwardRef(function () { return SegmentedTabComponent; }) }], viewQueries: [{ propertyName: "segmentedControl", first: true, predicate: ["segmentedControl"], descendants: true }], exportAs: ["spSegmentedTabs"], ngImport: i0, template: "<div\n #segmentedControl\n class=\"sapphire-segmented-control\"\n [class.sapphire-segmented-control--lg]=\"size === 'lg'\"\n [class.sapphire-segmented-control--sm]=\"size === 'sm'\"\n [class.focus-visible]=\"_focusVisible\"\n [class.sapphire-segmented-control--manual-keyboard-activation]=\"\n keyboardActivation === 'manual'\n \"\n [ngClass]=\"\n align === 'stretch'\n ? 'sapphire-segmented-control--stretch'\n : 'sapphire-segmented-control--align-' + align\n \"\n>\n <div\n class=\"sapphire-segmented-control__button-container\"\n role=\"tablist\"\n aria-orientation=\"horizontal\"\n cdkMonitorSubtreeFocus\n (cdkFocusChange)=\"_onFocusChange($event)\"\n (keydown)=\"_onKeyDown($event)\"\n >\n <ng-content select=\"sp-segmented-tab\"></ng-content>\n <span\n [style.left]=\"
|
|
5582
|
+
SegmentedTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: SegmentedTabsComponent, selector: "sp-segmented-tabs", inputs: { size: "size", align: "align", keyboardActivation: "keyboardActivation", disabled: "disabled", selectedIndex: "selectedIndex" }, outputs: { selectedIndexChange: "selectedIndexChange" }, host: { properties: { "attr.align": "null" } }, providers: [ViewEncapsulationProvider], queries: [{ propertyName: "tabs", predicate: i0.forwardRef(function () { return SegmentedTabComponent; }) }], viewQueries: [{ propertyName: "segmentedControl", first: true, predicate: ["segmentedControl"], descendants: true }], exportAs: ["spSegmentedTabs"], ngImport: i0, template: "<div\n #segmentedControl\n class=\"sapphire-segmented-control\"\n [class.sapphire-segmented-control--lg]=\"size === 'lg'\"\n [class.sapphire-segmented-control--sm]=\"size === 'sm'\"\n [class.focus-visible]=\"_focusVisible\"\n [class.sapphire-segmented-control--manual-keyboard-activation]=\"\n keyboardActivation === 'manual'\n \"\n [ngClass]=\"\n align === 'stretch'\n ? 'sapphire-segmented-control--stretch'\n : 'sapphire-segmented-control--align-' + align\n \"\n>\n <div\n class=\"sapphire-segmented-control__button-container\"\n role=\"tablist\"\n aria-orientation=\"horizontal\"\n cdkMonitorSubtreeFocus\n (cdkFocusChange)=\"_onFocusChange($event)\"\n (keydown)=\"_onKeyDown($event)\"\n >\n <ng-content select=\"sp-segmented-tab\"></ng-content>\n <span\n [style.left]=\"_gliderStyles.left\"\n [style.width]=\"_gliderStyles.width\"\n [class.sapphire-segmented-control__glider--with-transition]=\"\n _animationEnabled\n \"\n class=\"sapphire-segmented-control__glider\"\n role=\"none\"\n ></span>\n </div>\n</div>\n<ng-container *ngTemplateOutlet=\"_getTabContentTemplate()\"></ng-container>\n", styles: [".sapphire-segmented-control{display:flex;height:var(--sapphire-semantic-size-height-control-md)}.sapphire-segmented-control--stretch .sapphire-segmented-control__button-container{width:100%}.sapphire-segmented-control--align-center{justify-content:center}.sapphire-segmented-control--align-right{justify-content:flex-end}.sapphire-segmented-control--align-left{justify-content:flex-start}.sapphire-segmented-control__button-container{display:inline-flex;position:relative;height:100%;background-color:var(--sapphire-semantic-color-background-control-special-secondary-default);border-radius:var(--sapphire-semantic-size-height-control-lg);padding:var(--sapphire-global-size-static-5);box-sizing:border-box}.sapphire-segmented-control__glider{position:absolute;top:var(--sapphire-global-size-static-5);left:0;height:calc(100% - var(--sapphire-global-size-static-5) * 2);display:block;background-color:var(--sapphire-semantic-color-background-control-special-primary-default);box-shadow:var(--sapphire-global-shadow-sm);box-sizing:border-box;z-index:1;border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control__glider--with-transition{transition:width var(--sapphire-semantic-time-motion-quick) ease-in-out,left var(--sapphire-semantic-time-motion-quick) ease-in-out}.sapphire-segmented-control__button{font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-semibold);font-size:var(--sapphire-semantic-size-font-control-md);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;flex:1 1 auto;box-sizing:content-box;margin:0;border:0;height:100%;min-width:var(--sapphire-global-size-generic-120);padding:0 var(--sapphire-semantic-size-spacing-50);background-color:transparent;color:var(--sapphire-semantic-color-content-default-primary);cursor:pointer;outline:none;z-index:2;display:flex;align-items:center;justify-content:center;position:relative;transition:color var(--sapphire-semantic-time-motion-quick) ease-in-out}.sapphire-segmented-control__button--active{color:var(--sapphire-semantic-color-content-link-primary-default)}.sapphire-segmented-control__button--disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-segmented-control.focus-visible:focus-within .sapphire-segmented-control__glider{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring)}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__glider{transition:none}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__button:focus{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control.focus-visible:focus-within.sapphire-segmented-control--manual-keyboard-activation .sapphire-segmented-control__glider{outline:none}.sapphire-segmented-control--lg{height:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control--lg .sapphire-segmented-control__button{font-size:var(--sapphire-semantic-size-font-control-default)}.sapphire-segmented-control--sm{height:var(--sapphire-semantic-size-height-control-sm)}.sapphire-segmented-control--sm .sapphire-segmented-control__button{font-size:var(--sapphire-semantic-size-font-control-sm)}.sapphire-segmented-control__radio-input{margin:0;overflow:visible;position:absolute;top:0;left:0;height:100%;width:100%;opacity:.0001;z-index:1;cursor:pointer}.sapphire-segmented-control__button--disabled .sapphire-segmented-control__radio-input{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }] });
|
|
5517
5583
|
__decorate([
|
|
5518
5584
|
CoerceBoolean
|
|
5519
5585
|
], SegmentedTabsComponent.prototype, "disabled", void 0);
|
|
@@ -5521,7 +5587,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
5521
5587
|
type: Component,
|
|
5522
5588
|
args: [{ selector: 'sp-segmented-tabs', providers: [ViewEncapsulationProvider], exportAs: 'spSegmentedTabs', host: {
|
|
5523
5589
|
'[attr.align]': 'null',
|
|
5524
|
-
}, template: "<div\n #segmentedControl\n class=\"sapphire-segmented-control\"\n [class.sapphire-segmented-control--lg]=\"size === 'lg'\"\n [class.sapphire-segmented-control--sm]=\"size === 'sm'\"\n [class.focus-visible]=\"_focusVisible\"\n [class.sapphire-segmented-control--manual-keyboard-activation]=\"\n keyboardActivation === 'manual'\n \"\n [ngClass]=\"\n align === 'stretch'\n ? 'sapphire-segmented-control--stretch'\n : 'sapphire-segmented-control--align-' + align\n \"\n>\n <div\n class=\"sapphire-segmented-control__button-container\"\n role=\"tablist\"\n aria-orientation=\"horizontal\"\n cdkMonitorSubtreeFocus\n (cdkFocusChange)=\"_onFocusChange($event)\"\n (keydown)=\"_onKeyDown($event)\"\n >\n <ng-content select=\"sp-segmented-tab\"></ng-content>\n <span\n [style.left]=\"
|
|
5590
|
+
}, template: "<div\n #segmentedControl\n class=\"sapphire-segmented-control\"\n [class.sapphire-segmented-control--lg]=\"size === 'lg'\"\n [class.sapphire-segmented-control--sm]=\"size === 'sm'\"\n [class.focus-visible]=\"_focusVisible\"\n [class.sapphire-segmented-control--manual-keyboard-activation]=\"\n keyboardActivation === 'manual'\n \"\n [ngClass]=\"\n align === 'stretch'\n ? 'sapphire-segmented-control--stretch'\n : 'sapphire-segmented-control--align-' + align\n \"\n>\n <div\n class=\"sapphire-segmented-control__button-container\"\n role=\"tablist\"\n aria-orientation=\"horizontal\"\n cdkMonitorSubtreeFocus\n (cdkFocusChange)=\"_onFocusChange($event)\"\n (keydown)=\"_onKeyDown($event)\"\n >\n <ng-content select=\"sp-segmented-tab\"></ng-content>\n <span\n [style.left]=\"_gliderStyles.left\"\n [style.width]=\"_gliderStyles.width\"\n [class.sapphire-segmented-control__glider--with-transition]=\"\n _animationEnabled\n \"\n class=\"sapphire-segmented-control__glider\"\n role=\"none\"\n ></span>\n </div>\n</div>\n<ng-container *ngTemplateOutlet=\"_getTabContentTemplate()\"></ng-container>\n", styles: [".sapphire-segmented-control{display:flex;height:var(--sapphire-semantic-size-height-control-md)}.sapphire-segmented-control--stretch .sapphire-segmented-control__button-container{width:100%}.sapphire-segmented-control--align-center{justify-content:center}.sapphire-segmented-control--align-right{justify-content:flex-end}.sapphire-segmented-control--align-left{justify-content:flex-start}.sapphire-segmented-control__button-container{display:inline-flex;position:relative;height:100%;background-color:var(--sapphire-semantic-color-background-control-special-secondary-default);border-radius:var(--sapphire-semantic-size-height-control-lg);padding:var(--sapphire-global-size-static-5);box-sizing:border-box}.sapphire-segmented-control__glider{position:absolute;top:var(--sapphire-global-size-static-5);left:0;height:calc(100% - var(--sapphire-global-size-static-5) * 2);display:block;background-color:var(--sapphire-semantic-color-background-control-special-primary-default);box-shadow:var(--sapphire-global-shadow-sm);box-sizing:border-box;z-index:1;border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control__glider--with-transition{transition:width var(--sapphire-semantic-time-motion-quick) ease-in-out,left var(--sapphire-semantic-time-motion-quick) ease-in-out}.sapphire-segmented-control__button{font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-semibold);font-size:var(--sapphire-semantic-size-font-control-md);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;flex:1 1 auto;box-sizing:content-box;margin:0;border:0;height:100%;min-width:var(--sapphire-global-size-generic-120);padding:0 var(--sapphire-semantic-size-spacing-50);background-color:transparent;color:var(--sapphire-semantic-color-content-default-primary);cursor:pointer;outline:none;z-index:2;display:flex;align-items:center;justify-content:center;position:relative;transition:color var(--sapphire-semantic-time-motion-quick) ease-in-out}.sapphire-segmented-control__button--active{color:var(--sapphire-semantic-color-content-link-primary-default)}.sapphire-segmented-control__button--disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-segmented-control.focus-visible:focus-within .sapphire-segmented-control__glider{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring)}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__glider{transition:none}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__button:focus{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control.focus-visible:focus-within.sapphire-segmented-control--manual-keyboard-activation .sapphire-segmented-control__glider{outline:none}.sapphire-segmented-control--lg{height:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control--lg .sapphire-segmented-control__button{font-size:var(--sapphire-semantic-size-font-control-default)}.sapphire-segmented-control--sm{height:var(--sapphire-semantic-size-height-control-sm)}.sapphire-segmented-control--sm .sapphire-segmented-control__button{font-size:var(--sapphire-semantic-size-font-control-sm)}.sapphire-segmented-control__radio-input{margin:0;overflow:visible;position:absolute;top:0;left:0;height:100%;width:100%;opacity:.0001;z-index:1;cursor:pointer}.sapphire-segmented-control__button--disabled .sapphire-segmented-control__radio-input{cursor:not-allowed}\n"] }]
|
|
5525
5591
|
}], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { segmentedControl: [{
|
|
5526
5592
|
type: ViewChild,
|
|
5527
5593
|
args: ['segmentedControl']
|
|
@@ -5720,20 +5786,104 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
5720
5786
|
args: ['mouseleave']
|
|
5721
5787
|
}] } });
|
|
5722
5788
|
|
|
5723
|
-
|
|
5724
|
-
|
|
5725
|
-
|
|
5726
|
-
|
|
5727
|
-
|
|
5728
|
-
|
|
5729
|
-
/**
|
|
5730
|
-
|
|
5731
|
-
|
|
5732
|
-
*
|
|
5733
|
-
|
|
5734
|
-
|
|
5735
|
-
|
|
5736
|
-
|
|
5789
|
+
/**
|
|
5790
|
+
* Sapphire default theme
|
|
5791
|
+
*/
|
|
5792
|
+
class ThemeDefault {
|
|
5793
|
+
}
|
|
5794
|
+
ThemeDefault.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ThemeDefault, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5795
|
+
ThemeDefault.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ThemeDefault, isStandalone: true, selector: "sp-theme-default", hostDirectives: [{ directive: ThemeBaseDirective }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["@keyframes backdrop-fade-in{0%{background-color:transparent}to{background-color:var(--sapphire-semantic-color-background-backdrop)}}@keyframes backdrop-fade-out{0%{background-color:var(--sapphire-semantic-color-background-backdrop)}to{background-color:transparent}}.sapphire-backdrop,:host.sapphire-backdrop{width:100%;height:100%;display:flex;justify-content:center;align-items:center;animation-name:backdrop-fade-in;animation-duration:var(--sapphire-semantic-time-fade-default);animation-timing-function:ease-in-out;animation-fill-mode:forwards}.sapphire-backdrop--exiting,:host.sapphire-backdrop--exiting{animation-name:backdrop-fade-out}.sapphire-theme-default,:host,.sapphire-theme--secondary,:host ::ng-deep .sapphire-theme--secondary,.sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-semantic-size-breakpoint-xl: 1400px;--sapphire-semantic-size-breakpoint-l: 1200px;--sapphire-semantic-size-breakpoint-m: 960px;--sapphire-semantic-size-breakpoint-s: 768px;--sapphire-semantic-size-breakpoint-xs: 576px;--sapphire-semantic-size-width-panel-lg: 100%;--sapphire-semantic-size-width-panel-sm: 100%;--sapphire-semantic-font-weight-display-bold: 700;--sapphire-semantic-font-weight-display-regular: 400;--sapphire-semantic-font-weight-default-bold: 700;--sapphire-semantic-font-weight-default-semibold: 600;--sapphire-semantic-font-weight-default-regular: 400;--sapphire-global-time-2000: 2s;--sapphire-global-time-1800: 1.8s;--sapphire-global-time-1000: 1s;--sapphire-global-time-400: .4s;--sapphire-global-time-200: .2s;--sapphire-global-time-100: .1s;--sapphire-global-size-ratio-height: .875;--sapphire-global-size-line-height-md: 1.5;--sapphire-global-size-line-height-sm: 1.2;--sapphire-global-size-font-300: 3rem;--sapphire-global-size-font-220: 2.1875rem;--sapphire-global-size-font-188: 1.875rem;--sapphire-global-size-font-150: 1.5rem;--sapphire-global-size-font-130: 1.3125rem;--sapphire-global-size-font-112: 1.125rem;--sapphire-global-size-font-106: 1.0625rem;--sapphire-global-size-font-100: 1rem;--sapphire-global-size-font-88: .875rem;--sapphire-global-size-font-75: .75rem;--sapphire-global-size-font-60: .625rem;--sapphire-global-size-generic-4320: 108rem;--sapphire-global-size-generic-3780: 94.5rem;--sapphire-global-size-generic-3600: 90rem;--sapphire-global-size-generic-3200: 80rem;--sapphire-global-size-generic-2560: 64rem;--sapphire-global-size-generic-2400: 60rem;--sapphire-global-size-generic-1920: 48rem;--sapphire-global-size-generic-1600: 40rem;--sapphire-global-size-generic-1400: 35rem;--sapphire-global-size-generic-1280: 32rem;--sapphire-global-size-generic-1200: 30rem;--sapphire-global-size-generic-1120: 28rem;--sapphire-global-size-generic-1000: 25rem;--sapphire-global-size-generic-960: 24rem;--sapphire-global-size-generic-940: 23.5rem;--sapphire-global-size-generic-900: 22.5rem;--sapphire-global-size-generic-800: 20rem;--sapphire-global-size-generic-750: 18.75rem;--sapphire-global-size-generic-640: 16rem;--sapphire-global-size-generic-600: 15rem;--sapphire-global-size-generic-560: 14rem;--sapphire-global-size-generic-480: 12rem;--sapphire-global-size-generic-400: 10rem;--sapphire-global-size-generic-340: 8.5rem;--sapphire-global-size-generic-320: 8rem;--sapphire-global-size-generic-300: 7.5rem;--sapphire-global-size-generic-280: 7rem;--sapphire-global-size-generic-240: 6rem;--sapphire-global-size-generic-200: 5rem;--sapphire-global-size-generic-180: 4.5rem;--sapphire-global-size-generic-160: 4rem;--sapphire-global-size-generic-140: 3.5rem;--sapphire-global-size-generic-120: 3rem;--sapphire-global-size-generic-100: 2.5rem;--sapphire-global-size-generic-80: 2rem;--sapphire-global-size-generic-60: 1.5rem;--sapphire-global-size-generic-50: 1.25rem;--sapphire-global-size-generic-40: 1rem;--sapphire-global-size-generic-35: .875rem;--sapphire-global-size-generic-30: .75rem;--sapphire-global-size-generic-25: .625rem;--sapphire-global-size-generic-20: .5rem;--sapphire-global-size-generic-15: .375rem;--sapphire-global-size-generic-10: .25rem;--sapphire-global-size-generic-5: .125rem;--sapphire-global-size-generic-2: .0625rem;--sapphire-global-size-generic-0: 0rem;--sapphire-global-size-static-60: 24px;--sapphire-global-size-static-30: 12px;--sapphire-global-size-static-20: 8px;--sapphire-global-size-static-10: 4px;--sapphire-global-size-static-5: 2px;--sapphire-global-size-static-2: 1px;--sapphire-global-size-static-0: 0px;--sapphire-global-shadow-lg: 0px 0px 2px 0px rgba(34, 64, 82, .02), 0px -1.5px 6px 0px rgba(34, 64, 82, .03), 0px 4.5px 12px 0px rgba(34, 64, 82, .04), 0px 14.5px 18px 0px rgba(34, 64, 82, .04), 0px 26px 34px 0px rgba(34, 64, 82, .05), 0px 84px 92px 0px rgba(34, 64, 82, .07), 0px 0px 2px 0px rgba(34, 64, 82, .05), 0px 0px 1px 0px rgba(34, 64, 82, .2);--sapphire-global-shadow-md: 0px 0px 3px 0px rgba(34, 64, 82, .02), 0px 3px 7px 0px rgba(34, 64, 82, .03), 0px 6.5px 14px 0px rgba(34, 64, 82, .04), 0px 13px 29px 0px rgba(34, 64, 82, .05), 0px 36px 80px 0px rgba(34, 64, 82, .07), 0px 0px 2px 0px rgba(34, 64, 82, .05), 0px 0px 1px 0px rgba(34, 64, 82, .2);--sapphire-global-shadow-sm: 0px 0px 2px 0px rgba(34, 64, 82, .06), 0px 1.5px 4px 0px rgba(34, 64, 82, .04), 0px 4.5px 6px 0px rgba(34, 64, 82, .04), 0px 10.5px 12px 0px rgba(34, 64, 82, .03), 0px 25px 24px 0px rgba(34, 64, 82, .02), 0px 100px 64px 0px rgba(34, 64, 82, .02), 0px 0px 2px 0px rgba(34, 64, 82, .05), 0px 0px 1px 0px rgba(34, 64, 82, .2);--sapphire-global-opacity-50: .5;--sapphire-global-opacity-40: .4;--sapphire-global-opacity-35: .35;--sapphire-global-font-danske-human-name: \"Danske Human\";--sapphire-global-font-danske-text-name: \"Danske Text v2\";--sapphire-global-color-secondary-orange-600: hsl(19, 100%, 34%);--sapphire-global-color-secondary-orange-500: hsl(17, 100%, 43%);--sapphire-global-color-secondary-orange-400: hsl(19, 84%, 54%);--sapphire-global-color-secondary-orange-300: hsl(21, 84%, 66%);--sapphire-global-color-secondary-orange-200: hsl(23, 83%, 79%);--sapphire-global-color-secondary-orange-150: hsl(25, 84%, 86%);--sapphire-global-color-secondary-orange-100: hsl(26, 89%, 93%);--sapphire-global-color-secondary-orange-75: hsl(27, 85%, 95%);--sapphire-global-color-secondary-orange-50: hsl(28, 89%, 96%);--sapphire-global-color-secondary-teal-600: hsl(171, 100%, 22%);--sapphire-global-color-secondary-teal-500: hsl(171, 100%, 26%);--sapphire-global-color-secondary-teal-400: hsl(172, 50%, 42%);--sapphire-global-color-secondary-teal-300: hsl(172, 36%, 57%);--sapphire-global-color-secondary-teal-200: hsl(171, 36%, 74%);--sapphire-global-color-secondary-teal-150: hsl(171, 36%, 82%);--sapphire-global-color-secondary-teal-100: hsl(172, 35%, 92%);--sapphire-global-color-secondary-teal-75: hsl(170, 38%, 94%);--sapphire-global-color-secondary-teal-50: hsl(171, 33%, 96%);--sapphire-global-color-secondary-forest-green-600: hsl(105, 93%, 23%);--sapphire-global-color-secondary-forest-green-500: hsl(105, 93%, 28%);--sapphire-global-color-secondary-forest-green-400: hsl(105, 48%, 43%);--sapphire-global-color-secondary-forest-green-300: hsl(105, 36%, 58%);--sapphire-global-color-secondary-forest-green-200: hsl(105, 36%, 74%);--sapphire-global-color-secondary-forest-green-150: hsl(105, 36%, 82%);--sapphire-global-color-secondary-forest-green-100: hsl(104, 35%, 92%);--sapphire-global-color-secondary-forest-green-75: hsl(109, 35%, 94%);--sapphire-global-color-secondary-forest-green-50: hsl(111, 33%, 96%);--sapphire-global-color-secondary-cobalt-600: hsl(215, 87%, 42%);--sapphire-global-color-secondary-cobalt-500: hsl(215, 92%, 51%);--sapphire-global-color-secondary-cobalt-400: hsl(215, 92%, 62%);--sapphire-global-color-secondary-cobalt-300: hsl(215, 92%, 72%);--sapphire-global-color-secondary-cobalt-200: hsl(215, 91%, 83%);--sapphire-global-color-secondary-cobalt-150: hsl(216, 93%, 89%);--sapphire-global-color-secondary-cobalt-100: hsl(216, 93%, 95%);--sapphire-global-color-secondary-cobalt-75: hsl(215, 90%, 96%);--sapphire-global-color-secondary-cobalt-50: hsl(215, 86%, 97%);--sapphire-global-color-secondary-gray-600: hsl(202, 6%, 38%);--sapphire-global-color-secondary-gray-500: hsl(201, 6%, 46%);--sapphire-global-color-secondary-gray-400: hsl(200, 5%, 56%);--sapphire-global-color-secondary-gray-300: hsl(203, 5%, 67%);--sapphire-global-color-secondary-gray-200: hsl(200, 6%, 79%);--sapphire-global-color-secondary-gray-150: hsl(195, 6%, 86%);--sapphire-global-color-secondary-gray-100: hsl(210, 6%, 93%);--sapphire-global-color-secondary-gray-75: hsl(240, 4%, 95%);--sapphire-global-color-secondary-gray-50: hsl(180, 6%, 97%);--sapphire-global-color-secondary-orchid-600: hsl(304, 36%, 42%);--sapphire-global-color-secondary-orchid-500: hsl(304, 37%, 51%);--sapphire-global-color-secondary-orchid-400: hsl(304, 37%, 61%);--sapphire-global-color-secondary-orchid-300: hsl(303, 37%, 71%);--sapphire-global-color-secondary-orchid-200: hsl(304, 37%, 82%);--sapphire-global-color-secondary-orchid-150: hsl(305, 38%, 88%);--sapphire-global-color-secondary-orchid-100: hsl(305, 38%, 94%);--sapphire-global-color-secondary-orchid-75: hsl(300, 36%, 96%);--sapphire-global-color-secondary-orchid-50: hsl(300, 33%, 97%);--sapphire-global-color-secondary-beige-600: hsl(38, 20%, 35%);--sapphire-global-color-secondary-beige-500: hsl(40, 20%, 43%);--sapphire-global-color-secondary-beige-400: hsl(38, 15%, 54%);--sapphire-global-color-secondary-beige-300: hsl(39, 16%, 65%);--sapphire-global-color-secondary-beige-200: hsl(41, 14%, 78%);--sapphire-global-color-secondary-beige-150: hsl(40, 16%, 85%);--sapphire-global-color-secondary-beige-100: hsl(40, 17%, 93%);--sapphire-global-color-secondary-beige-75: hsl(30, 15%, 95%);--sapphire-global-color-secondary-beige-50: hsl(30, 11%, 96%);--sapphire-global-color-secondary-gold-600: hsl(42, 97%, 25%);--sapphire-global-color-secondary-gold-500: hsl(42, 96%, 31%);--sapphire-global-color-secondary-gold-400: hsl(42, 54%, 45%);--sapphire-global-color-secondary-gold-300: hsl(42, 44%, 59%);--sapphire-global-color-secondary-gold-200: hsl(42, 44%, 74%);--sapphire-global-color-secondary-gold-150: hsl(43, 43%, 83%);--sapphire-global-color-secondary-gold-100: hsl(43, 43%, 92%);--sapphire-global-color-secondary-gold-75: hsl(42, 42%, 94%);--sapphire-global-color-secondary-gold-50: hsl(40, 43%, 96%);--sapphire-global-color-secondary-violet-600: hsl(245, 41%, 52%);--sapphire-global-color-secondary-violet-500: hsl(245, 66%, 64%);--sapphire-global-color-secondary-violet-400: hsl(245, 66%, 71%);--sapphire-global-color-secondary-violet-300: hsl(245, 66%, 78%);--sapphire-global-color-secondary-violet-200: hsl(244, 65%, 86%);--sapphire-global-color-secondary-violet-150: hsl(246, 66%, 91%);--sapphire-global-color-secondary-violet-100: hsl(244, 64%, 96%);--sapphire-global-color-secondary-violet-75: hsl(245, 65%, 97%);--sapphire-global-color-secondary-violet-50: hsl(240, 64%, 98%);--sapphire-global-color-secondary-purple-600: hsl(270, 28%, 45%);--sapphire-global-color-secondary-purple-500: hsl(270, 33%, 55%);--sapphire-global-color-secondary-purple-400: hsl(270, 33%, 64%);--sapphire-global-color-secondary-purple-300: hsl(270, 33%, 73%);--sapphire-global-color-secondary-purple-200: hsl(269, 33%, 83%);--sapphire-global-color-secondary-purple-150: hsl(272, 32%, 88%);--sapphire-global-color-secondary-purple-100: hsl(270, 36%, 95%);--sapphire-global-color-secondary-purple-75: hsl(274, 33%, 96%);--sapphire-global-color-secondary-purple-50: hsl(270, 29%, 97%);--sapphire-global-color-secondary-pink-600: hsl(327, 48%, 43%);--sapphire-global-color-secondary-pink-500: hsl(327, 53%, 53%);--sapphire-global-color-secondary-pink-400: hsl(326, 53%, 63%);--sapphire-global-color-secondary-pink-300: hsl(326, 53%, 73%);--sapphire-global-color-secondary-pink-200: hsl(327, 53%, 83%);--sapphire-global-color-secondary-pink-150: hsl(327, 54%, 89%);--sapphire-global-color-secondary-pink-100: hsl(328, 56%, 95%);--sapphire-global-color-secondary-pink-75: hsl(330, 50%, 96%);--sapphire-global-color-secondary-pink-50: hsl(326, 54%, 97%);--sapphire-global-color-secondary-lime-600: hsl(71, 76%, 23%);--sapphire-global-color-secondary-lime-500: hsl(71, 76%, 28%);--sapphire-global-color-secondary-lime-400: hsl(71, 42%, 42%);--sapphire-global-color-secondary-lime-300: hsl(72, 30%, 57%);--sapphire-global-color-secondary-lime-200: hsl(70, 29%, 73%);--sapphire-global-color-secondary-lime-150: hsl(71, 30%, 82%);--sapphire-global-color-secondary-lime-100: hsl(69, 29%, 91%);--sapphire-global-color-secondary-lime-75: hsl(66, 29%, 93%);--sapphire-global-color-secondary-lime-50: hsl(70, 27%, 96%);--sapphire-global-color-secondary-indigo-600: hsl(230, 62%, 53%);--sapphire-global-color-secondary-indigo-500: hsl(230, 100%, 64%);--sapphire-global-color-secondary-indigo-400: hsl(230, 100%, 72%);--sapphire-global-color-secondary-indigo-300: hsl(230, 100%, 79%);--sapphire-global-color-secondary-indigo-200: hsl(229, 100%, 87%);--sapphire-global-color-secondary-indigo-150: hsl(229, 100%, 91%);--sapphire-global-color-secondary-indigo-100: hsl(231, 100%, 96%);--sapphire-global-color-secondary-indigo-75: hsl(229, 100%, 97%);--sapphire-global-color-secondary-indigo-50: hsl(229, 100%, 98%);--sapphire-global-color-secondary-electro-600: hsl(207, 31%, 38%);--sapphire-global-color-secondary-electro-500: hsl(206, 31%, 46%);--sapphire-global-color-secondary-electro-400: hsl(206, 27%, 56%);--sapphire-global-color-secondary-electro-300: hsl(207, 27%, 67%);--sapphire-global-color-secondary-electro-200: hsl(208, 27%, 80%);--sapphire-global-color-secondary-electro-150: hsl(205, 27%, 86%);--sapphire-global-color-secondary-electro-100: hsl(207, 27%, 94%);--sapphire-global-color-secondary-electro-75: hsl(206, 28%, 95%);--sapphire-global-color-secondary-electro-50: hsl(204, 29%, 97%);--sapphire-global-color-secondary-copper-600: hsl(16, 54%, 39%);--sapphire-global-color-secondary-copper-500: hsl(15, 54%, 48%);--sapphire-global-color-secondary-copper-400: hsl(15, 50%, 59%);--sapphire-global-color-secondary-copper-300: hsl(15, 50%, 69%);--sapphire-global-color-secondary-copper-200: hsl(16, 49%, 81%);--sapphire-global-color-secondary-copper-150: hsl(15, 51%, 87%);--sapphire-global-color-secondary-copper-100: hsl(16, 48%, 94%);--sapphire-global-color-secondary-copper-75: hsl(16, 48%, 95%);--sapphire-global-color-secondary-copper-50: hsl(15, 50%, 97%);--sapphire-global-color-secondary-aqua-600: hsl(192, 100%, 26%);--sapphire-global-color-secondary-aqua-500: hsl(192, 100%, 32%);--sapphire-global-color-secondary-aqua-400: hsl(192, 55%, 46%);--sapphire-global-color-secondary-aqua-300: hsl(192, 47%, 60%);--sapphire-global-color-secondary-aqua-200: hsl(192, 47%, 76%);--sapphire-global-color-secondary-aqua-150: hsl(192, 47%, 84%);--sapphire-global-color-secondary-aqua-100: hsl(190, 45%, 92%);--sapphire-global-color-secondary-aqua-75: hsl(193, 47%, 94%);--sapphire-global-color-secondary-aqua-50: hsl(193, 47%, 96%);--sapphire-global-color-yellow-975: hsl(20, 95%, 8%);--sapphire-global-color-yellow-950: hsl(19, 89%, 11%);--sapphire-global-color-yellow-925: hsl(21, 87%, 15%);--sapphire-global-color-yellow-900: hsl(21, 88%, 19%);--sapphire-global-color-yellow-875: hsl(21, 86%, 23%);--sapphire-global-color-yellow-850: hsl(22, 85%, 27%);--sapphire-global-color-yellow-800: hsl(22, 88%, 29%);--sapphire-global-color-yellow-750: hsl(24, 89%, 33%);--sapphire-global-color-yellow-700: hsl(25, 93%, 37%);--sapphire-global-color-yellow-650: hsl(28, 94%, 41%);--sapphire-global-color-yellow-600: hsl(31, 93%, 44%);--sapphire-global-color-yellow-550: hsl(34, 94%, 48%);--sapphire-global-color-yellow-500: hsl(37, 95%, 52%);--sapphire-global-color-yellow-450: hsl(40, 95%, 54%);--sapphire-global-color-yellow-400: hsl(43, 98%, 55%);--sapphire-global-color-yellow-350: hsl(44, 98%, 60%);--sapphire-global-color-yellow-300: hsl(46, 98%, 64%);--sapphire-global-color-yellow-250: hsl(47, 97%, 70%);--sapphire-global-color-yellow-200: hsl(48, 98%, 76%);--sapphire-global-color-yellow-150: hsl(48, 98%, 79%);--sapphire-global-color-yellow-125: hsl(49, 97%, 85%);--sapphire-global-color-yellow-100: hsl(48, 100%, 89%);--sapphire-global-color-yellow-75: hsl(49, 100%, 92%);--sapphire-global-color-yellow-50: hsl(51, 100%, 96%);--sapphire-global-color-yellow-25: hsl(54, 100%, 98%);--sapphire-global-color-red-975: hsl(0, 33%, 10%);--sapphire-global-color-red-950: hsl(355, 38%, 12%);--sapphire-global-color-red-925: hsl(356, 41%, 14%);--sapphire-global-color-red-900: hsl(355, 43%, 15%);--sapphire-global-color-red-875: hsl(354, 44%, 18%);--sapphire-global-color-red-850: hsl(353, 48%, 21%);--sapphire-global-color-red-800: hsl(353, 50%, 26%);--sapphire-global-color-red-750: hsl(351, 54%, 31%);--sapphire-global-color-red-700: hsl(351, 55%, 35%);--sapphire-global-color-red-650: hsl(350, 57%, 39%);--sapphire-global-color-red-600: hsl(349, 60%, 44%);--sapphire-global-color-red-550: hsl(349, 61%, 48%);--sapphire-global-color-red-500: hsl(348, 72%, 53%);--sapphire-global-color-red-450: hsl(351, 73%, 59%);--sapphire-global-color-red-400: hsl(353, 75%, 65%);--sapphire-global-color-red-350: hsl(355, 79%, 71%);--sapphire-global-color-red-300: hsl(356, 82%, 76%);--sapphire-global-color-red-250: hsl(357, 88%, 81%);--sapphire-global-color-red-200: hsl(358, 92%, 86%);--sapphire-global-color-red-150: hsl(359, 100%, 91%);--sapphire-global-color-red-125: hsl(358, 100%, 94%);--sapphire-global-color-red-100: hsl(357, 100%, 96%);--sapphire-global-color-red-75: hsl(356, 100%, 97%);--sapphire-global-color-red-50: hsl(355, 100%, 98%);--sapphire-global-color-red-25: hsl(0, 100%, 99%);--sapphire-global-color-green-975: hsl(159, 100%, 5%);--sapphire-global-color-green-950: hsl(159, 100%, 6%);--sapphire-global-color-green-925: hsl(159, 100%, 7%);--sapphire-global-color-green-900: hsl(159, 100%, 7%);--sapphire-global-color-green-875: hsl(159, 100%, 9%);--sapphire-global-color-green-850: hsl(158, 100%, 10%);--sapphire-global-color-green-800: hsl(159, 100%, 13%);--sapphire-global-color-green-750: hsl(159, 100%, 15%);--sapphire-global-color-green-700: hsl(159, 100%, 17%);--sapphire-global-color-green-650: hsl(159, 100%, 19%);--sapphire-global-color-green-600: hsl(159, 100%, 22%);--sapphire-global-color-green-550: hsl(159, 100%, 24%);--sapphire-global-color-green-500: hsl(159, 100%, 27%);--sapphire-global-color-green-450: hsl(159, 71%, 34%);--sapphire-global-color-green-400: hsl(159, 51%, 42%);--sapphire-global-color-green-350: hsl(159, 37%, 50%);--sapphire-global-color-green-300: hsl(159, 36%, 57%);--sapphire-global-color-green-250: hsl(159, 36%, 66%);--sapphire-global-color-green-200: hsl(160, 36%, 74%);--sapphire-global-color-green-150: hsl(159, 36%, 83%);--sapphire-global-color-green-125: hsl(159, 37%, 88%);--sapphire-global-color-green-100: hsl(159, 35%, 92%);--sapphire-global-color-green-75: hsl(162, 33%, 94%);--sapphire-global-color-green-50: hsl(158, 40%, 96%);--sapphire-global-color-green-25: hsl(150, 40%, 98%);--sapphire-global-color-blue-975: hsl(202, 100%, 7%);--sapphire-global-color-blue-950: hsl(203, 100%, 9%);--sapphire-global-color-blue-925: hsl(203, 100%, 10%);--sapphire-global-color-blue-900: hsl(202, 100%, 11%);--sapphire-global-color-blue-875: hsl(203, 100%, 13%);--sapphire-global-color-blue-850: hsl(203, 100%, 15%);--sapphire-global-color-blue-800: hsl(203, 100%, 19%);--sapphire-global-color-blue-750: hsl(202, 100%, 22%);--sapphire-global-color-blue-700: hsl(203, 100%, 25%);--sapphire-global-color-blue-650: hsl(203, 100%, 29%);--sapphire-global-color-blue-600: hsl(203, 100%, 32%);--sapphire-global-color-blue-550: hsl(203, 100%, 35%);--sapphire-global-color-blue-500: hsl(203, 100%, 39%);--sapphire-global-color-blue-450: hsl(203, 90%, 44%);--sapphire-global-color-blue-400: hsl(203, 80%, 50%);--sapphire-global-color-blue-350: hsl(203, 75%, 57%);--sapphire-global-color-blue-300: hsl(203, 70%, 65%);--sapphire-global-color-blue-250: hsl(203, 64%, 72%);--sapphire-global-color-blue-200: hsl(203, 65%, 79%);--sapphire-global-color-blue-150: hsl(203, 64%, 86%);--sapphire-global-color-blue-125: hsl(204, 65%, 90%);--sapphire-global-color-blue-100: hsl(203, 64%, 94%);--sapphire-global-color-blue-75: hsl(206, 67%, 95%);--sapphire-global-color-blue-50: hsl(202, 65%, 97%);--sapphire-global-color-blue-25: hsl(204, 56%, 98%);--sapphire-global-color-sapphire-900-70p: hsla(202, 100%, 11%, .7);--sapphire-global-color-sapphire-900-4p: hsla(202, 100%, 11%, .04);--sapphire-global-color-sapphire-975: hsl(202, 100%, 7%);--sapphire-global-color-sapphire-950: hsl(203, 100%, 9%);--sapphire-global-color-sapphire-925: hsl(202, 100%, 10%);--sapphire-global-color-sapphire-900: hsl(202, 100%, 11%);--sapphire-global-color-sapphire-875: hsl(201, 82%, 13%);--sapphire-global-color-sapphire-850: hsl(202, 68%, 16%);--sapphire-global-color-sapphire-800: hsl(203, 50%, 21%);--sapphire-global-color-sapphire-750: hsl(204, 41%, 25%);--sapphire-global-color-sapphire-700: hsl(204, 32%, 29%);--sapphire-global-color-sapphire-650: hsl(203, 27%, 33%);--sapphire-global-color-sapphire-600: hsl(205, 23%, 37%);--sapphire-global-color-sapphire-550: hsl(205, 19%, 41%);--sapphire-global-color-sapphire-500: hsl(205, 16%, 46%);--sapphire-global-color-sapphire-450: hsl(206, 16%, 50%);--sapphire-global-color-sapphire-400: hsl(206, 15%, 56%);--sapphire-global-color-sapphire-350: hsl(206, 16%, 61%);--sapphire-global-color-sapphire-300: hsl(209, 17%, 66%);--sapphire-global-color-sapphire-250: hsl(207, 16%, 73%);--sapphire-global-color-sapphire-200: hsl(208, 18%, 79%);--sapphire-global-color-sapphire-150: hsl(208, 18%, 86%);--sapphire-global-color-sapphire-125: hsl(210, 19%, 90%);--sapphire-global-color-sapphire-100: hsl(210, 24%, 93%);--sapphire-global-color-sapphire-75: hsl(210, 23%, 95%);--sapphire-global-color-sapphire-50: hsl(216, 29%, 97%);--sapphire-global-color-sapphire-25: hsl(220, 33%, 98%);--sapphire-global-color-neutral-transparent: hsla(0, 0%, 100%, 0);--sapphire-global-color-neutral-black: hsl(0, 0%, 0%);--sapphire-global-color-neutral-white: hsl(0, 0%, 100%);--sapphire-semantic-time-motion-quick: var(--sapphire-global-time-100);--sapphire-semantic-time-motion-default: var(--sapphire-global-time-200);--sapphire-semantic-time-motion-slow: var(--sapphire-global-time-400);--sapphire-semantic-time-motion-very-slow: var(--sapphire-global-time-1000);--sapphire-semantic-time-fade-slow: var(--sapphire-global-time-1800);--sapphire-semantic-time-fade-quick: var(--sapphire-global-time-100);--sapphire-semantic-time-fade-default: var(--sapphire-global-time-200);--sapphire-semantic-size-spacing-80: var(--sapphire-global-size-generic-160);--sapphire-semantic-size-spacing-70: var(--sapphire-global-size-generic-100);--sapphire-semantic-size-spacing-60: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-spacing-50: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-spacing-40: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-spacing-30: var(--sapphire-global-size-generic-30);--sapphire-semantic-size-spacing-25: var(--sapphire-global-size-generic-25);--sapphire-semantic-size-spacing-20: var(--sapphire-global-size-generic-20);--sapphire-semantic-size-spacing-10: var(--sapphire-global-size-generic-10);--sapphire-semantic-size-spacing-5: var(--sapphire-global-size-generic-5);--sapphire-semantic-size-line-height-md: var(--sapphire-global-size-line-height-md);--sapphire-semantic-size-line-height-sm: var(--sapphire-global-size-line-height-sm);--sapphire-semantic-size-font-control-default: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-control-md: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-control-sm: var(--sapphire-global-size-font-75);--sapphire-semantic-size-font-label-lg: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-label-md: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-label-sm: var(--sapphire-global-size-font-75);--sapphire-semantic-size-font-text-lg: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-text-md: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-text-sm: var(--sapphire-global-size-font-75);--sapphire-semantic-size-radius-xl: var(--sapphire-global-size-static-60);--sapphire-semantic-size-radius-lg: var(--sapphire-global-size-static-30);--sapphire-semantic-size-radius-md: var(--sapphire-global-size-static-20);--sapphire-semantic-size-radius-sm: var(--sapphire-global-size-static-10);--sapphire-semantic-size-radius-xs: var(--sapphire-global-size-static-5);--sapphire-semantic-size-border-lg: var(--sapphire-global-size-static-10);--sapphire-semantic-size-border-md: var(--sapphire-global-size-static-5);--sapphire-semantic-size-border-sm: var(--sapphire-global-size-static-2);--sapphire-semantic-size-icon-xl: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-icon-lg: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-icon-md: var(--sapphire-global-size-generic-50);--sapphire-semantic-size-icon-sm: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-width-control-default: var(--sapphire-global-size-generic-750);--sapphire-semantic-size-height-box-md: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-height-control-xl: var(--sapphire-global-size-generic-140);--sapphire-semantic-size-height-control-lg: var(--sapphire-global-size-generic-120);--sapphire-semantic-size-height-control-md: var(--sapphire-global-size-generic-100);--sapphire-semantic-size-height-control-sm: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-height-control-xs: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-height-control-2xs: var(--sapphire-global-size-generic-50);--sapphire-semantic-shadow-popover: var(--sapphire-global-shadow-md);--sapphire-semantic-opacity-disabled: var(--sapphire-global-opacity-40);--sapphire-semantic-opacity-50: var(--sapphire-global-opacity-50);--sapphire-semantic-font-name-display: var(--sapphire-global-font-danske-human-name);--sapphire-semantic-font-name-default: var(--sapphire-global-font-danske-text-name);--sapphire-semantic-color-content-decorative-orange-secondary-default: var(--sapphire-global-color-secondary-orange-600);--sapphire-semantic-color-content-decorative-orange-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-teal-secondary-default: var(--sapphire-global-color-secondary-teal-600);--sapphire-semantic-color-content-decorative-teal-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-forest-green-secondary-default: var(--sapphire-global-color-secondary-forest-green-600);--sapphire-semantic-color-content-decorative-forest-green-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-cobalt-secondary-default: var(--sapphire-global-color-secondary-cobalt-600);--sapphire-semantic-color-content-decorative-cobalt-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-gray-secondary-default: var(--sapphire-global-color-secondary-gray-600);--sapphire-semantic-color-content-decorative-gray-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-orchid-secondary-default: var(--sapphire-global-color-secondary-orchid-600);--sapphire-semantic-color-content-decorative-orchid-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-beige-secondary-default: var(--sapphire-global-color-secondary-beige-600);--sapphire-semantic-color-content-decorative-beige-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-gold-secondary-default: var(--sapphire-global-color-secondary-gold-600);--sapphire-semantic-color-content-decorative-gold-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-violet-secondary-default: var(--sapphire-global-color-secondary-violet-600);--sapphire-semantic-color-content-decorative-violet-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-pink-secondary-default: var(--sapphire-global-color-secondary-pink-600);--sapphire-semantic-color-content-decorative-pink-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-lime-secondary-default: var(--sapphire-global-color-secondary-lime-600);--sapphire-semantic-color-content-decorative-lime-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-indigo-secondary-default: var(--sapphire-global-color-secondary-indigo-600);--sapphire-semantic-color-content-decorative-indigo-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-electro-secondary-default: var(--sapphire-global-color-secondary-electro-600);--sapphire-semantic-color-content-decorative-electro-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-copper-secondary-default: var(--sapphire-global-color-secondary-copper-600);--sapphire-semantic-color-content-decorative-copper-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-aqua-secondary-default: var(--sapphire-global-color-secondary-aqua-600);--sapphire-semantic-color-content-decorative-aqua-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-passive-secondary-default: var(--sapphire-global-color-sapphire-550);--sapphire-semantic-color-content-passive-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-informative-secondary-default: var(--sapphire-global-color-blue-550);--sapphire-semantic-color-content-informative-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-warning-secondary-default: var(--sapphire-global-color-yellow-700);--sapphire-semantic-color-content-negative-secondary-active: var(--sapphire-global-color-red-700);--sapphire-semantic-color-content-negative-secondary-hover: var(--sapphire-global-color-red-600);--sapphire-semantic-color-content-negative-secondary-default: var(--sapphire-global-color-red-550);--sapphire-semantic-color-content-negative-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-positive-secondary-default: var(--sapphire-global-color-green-550);--sapphire-semantic-color-content-positive-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-selection-unselected-active: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-selection-unselected-hover: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-selection-unselected-default: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-selection-selected-active: var(--sapphire-global-color-blue-700);--sapphire-semantic-color-content-selection-selected-hover: var(--sapphire-global-color-blue-600);--sapphire-semantic-color-content-selection-selected-default: var(--sapphire-global-color-blue-550);--sapphire-semantic-color-content-action-tertiary-active: var(--sapphire-global-color-sapphire-975);--sapphire-semantic-color-content-action-tertiary-hover: var(--sapphire-global-color-sapphire-950);--sapphire-semantic-color-content-action-tertiary-default: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-action-secondary-active: var(--sapphire-global-color-blue-700);--sapphire-semantic-color-content-action-secondary-hover: var(--sapphire-global-color-blue-600);--sapphire-semantic-color-content-action-secondary-default: var(--sapphire-global-color-blue-550);--sapphire-semantic-color-content-action-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-default-secondary: var(--sapphire-global-color-sapphire-600);--sapphire-semantic-color-content-default-primary: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-focus-ring: var(--sapphire-global-color-blue-400);--sapphire-semantic-color-border-decorative-orange-secondary-default: var(--sapphire-global-color-secondary-orange-200);--sapphire-semantic-color-border-decorative-teal-secondary-default: var(--sapphire-global-color-secondary-teal-200);--sapphire-semantic-color-border-decorative-forest-green-secondary-default: var(--sapphire-global-color-secondary-forest-green-200);--sapphire-semantic-color-border-decorative-cobalt-secondary-default: var(--sapphire-global-color-secondary-cobalt-200);--sapphire-semantic-color-border-decorative-gray-secondary-default: var(--sapphire-global-color-secondary-gray-200);--sapphire-semantic-color-border-decorative-orchid-secondary-default: var(--sapphire-global-color-secondary-orchid-200);--sapphire-semantic-color-border-decorative-beige-secondary-default: var(--sapphire-global-color-secondary-beige-200);--sapphire-semantic-color-border-decorative-gold-secondary-default: var(--sapphire-global-color-secondary-gold-200);--sapphire-semantic-color-border-decorative-violet-secondary-default: var(--sapphire-global-color-secondary-violet-200);--sapphire-semantic-color-border-decorative-pink-secondary-default: var(--sapphire-global-color-secondary-pink-200);--sapphire-semantic-color-border-decorative-lime-secondary-default: var(--sapphire-global-color-secondary-lime-200);--sapphire-semantic-color-border-decorative-indigo-secondary-default: var(--sapphire-global-color-secondary-indigo-200);--sapphire-semantic-color-border-decorative-electro-secondary-default: var(--sapphire-global-color-secondary-electro-200);--sapphire-semantic-color-border-decorative-copper-secondary-default: var(--sapphire-global-color-secondary-copper-200);--sapphire-semantic-color-border-decorative-aqua-secondary-default: var(--sapphire-global-color-secondary-aqua-200);--sapphire-semantic-color-border-informative-secondary-default: var(--sapphire-global-color-blue-200);--sapphire-semantic-color-border-warning-secondary-default: var(--sapphire-global-color-yellow-300);--sapphire-semantic-color-border-positive-secondary-default: var(--sapphire-global-color-green-200);--sapphire-semantic-color-border-negative-secondary-default: var(--sapphire-global-color-red-200);--sapphire-semantic-color-border-field-error: var(--sapphire-global-color-red-500);--sapphire-semantic-color-border-tertiary-default: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-border-secondary-default: var(--sapphire-global-color-sapphire-150);--sapphire-semantic-color-border-primary-active: var(--sapphire-global-color-sapphire-300);--sapphire-semantic-color-border-primary-hover: var(--sapphire-global-color-sapphire-250);--sapphire-semantic-color-border-primary-default: var(--sapphire-global-color-sapphire-200);--sapphire-semantic-color-background-skeleton-default: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-backdrop: var(--sapphire-global-color-sapphire-900-70p);--sapphire-semantic-color-background-surface: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-background-control-special-secondary-default: var(--sapphire-global-color-sapphire-900-4p);--sapphire-semantic-color-background-control-special-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-background-control-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-background-field-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-background-decorative-orange-secondary-default: var(--sapphire-global-color-secondary-orange-50);--sapphire-semantic-color-background-decorative-orange-primary-default: var(--sapphire-global-color-secondary-orange-400);--sapphire-semantic-color-background-decorative-teal-secondary-default: var(--sapphire-global-color-secondary-teal-50);--sapphire-semantic-color-background-decorative-teal-primary-default: var(--sapphire-global-color-secondary-teal-500);--sapphire-semantic-color-background-decorative-forest-green-secondary-default: var(--sapphire-global-color-secondary-forest-green-50);--sapphire-semantic-color-background-decorative-forest-green-primary-default: var(--sapphire-global-color-secondary-forest-green-500);--sapphire-semantic-color-background-decorative-cobalt-secondary-default: var(--sapphire-global-color-secondary-cobalt-50);--sapphire-semantic-color-background-decorative-cobalt-primary-default: var(--sapphire-global-color-secondary-cobalt-500);--sapphire-semantic-color-background-decorative-gray-secondary-default: var(--sapphire-global-color-secondary-gray-50);--sapphire-semantic-color-background-decorative-gray-primary-default: var(--sapphire-global-color-secondary-gray-500);--sapphire-semantic-color-background-decorative-orchid-secondary-default: var(--sapphire-global-color-secondary-orchid-50);--sapphire-semantic-color-background-decorative-orchid-primary-default: var(--sapphire-global-color-secondary-orchid-500);--sapphire-semantic-color-background-decorative-beige-secondary-default: var(--sapphire-global-color-secondary-beige-50);--sapphire-semantic-color-background-decorative-beige-primary-default: var(--sapphire-global-color-secondary-beige-500);--sapphire-semantic-color-background-decorative-gold-secondary-default: var(--sapphire-global-color-secondary-gold-50);--sapphire-semantic-color-background-decorative-gold-primary-default: var(--sapphire-global-color-secondary-gold-500);--sapphire-semantic-color-background-decorative-violet-secondary-default: var(--sapphire-global-color-secondary-violet-100);--sapphire-semantic-color-background-decorative-violet-primary-default: var(--sapphire-global-color-secondary-violet-500);--sapphire-semantic-color-background-decorative-pink-secondary-default: var(--sapphire-global-color-secondary-pink-100);--sapphire-semantic-color-background-decorative-pink-primary-default: var(--sapphire-global-color-secondary-pink-500);--sapphire-semantic-color-background-decorative-lime-secondary-default: var(--sapphire-global-color-secondary-lime-100);--sapphire-semantic-color-background-decorative-lime-primary-default: var(--sapphire-global-color-secondary-lime-500);--sapphire-semantic-color-background-decorative-indigo-secondary-default: var(--sapphire-global-color-secondary-indigo-100);--sapphire-semantic-color-background-decorative-indigo-primary-default: var(--sapphire-global-color-secondary-indigo-500);--sapphire-semantic-color-background-decorative-electro-secondary-default: var(--sapphire-global-color-secondary-electro-100);--sapphire-semantic-color-background-decorative-electro-primary-default: var(--sapphire-global-color-secondary-electro-500);--sapphire-semantic-color-background-decorative-copper-secondary-default: var(--sapphire-global-color-secondary-copper-100);--sapphire-semantic-color-background-decorative-copper-primary-default: var(--sapphire-global-color-secondary-copper-500);--sapphire-semantic-color-background-decorative-aqua-secondary-default: var(--sapphire-global-color-secondary-aqua-100);--sapphire-semantic-color-background-decorative-aqua-primary-default: var(--sapphire-global-color-secondary-aqua-500);--sapphire-semantic-color-background-passive-secondary-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-passive-primary-default: var(--sapphire-global-color-sapphire-450);--sapphire-semantic-color-background-informative-secondary-default: var(--sapphire-global-color-blue-50);--sapphire-semantic-color-background-informative-primary-default: var(--sapphire-global-color-blue-500);--sapphire-semantic-color-background-warning-secondary-default: var(--sapphire-global-color-yellow-75);--sapphire-semantic-color-background-warning-primary-default: var(--sapphire-global-color-yellow-300);--sapphire-semantic-color-background-positive-secondary-default: var(--sapphire-global-color-green-50);--sapphire-semantic-color-background-positive-primary-default: var(--sapphire-global-color-green-500);--sapphire-semantic-color-background-negative-secondary-active: var(--sapphire-global-color-red-100);--sapphire-semantic-color-background-negative-secondary-hover: var(--sapphire-global-color-red-75);--sapphire-semantic-color-background-negative-secondary-default: var(--sapphire-global-color-red-50);--sapphire-semantic-color-background-negative-primary-active: var(--sapphire-global-color-red-650);--sapphire-semantic-color-background-negative-primary-hover: var(--sapphire-global-color-red-600);--sapphire-semantic-color-background-negative-primary-default: var(--sapphire-global-color-red-500);--sapphire-semantic-color-background-selection-unselected-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-selection-unselected-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-selection-unselected-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-selection-selected-active: var(--sapphire-global-color-blue-100);--sapphire-semantic-color-background-selection-selected-hover: var(--sapphire-global-color-blue-75);--sapphire-semantic-color-background-selection-selected-default: var(--sapphire-global-color-blue-50);--sapphire-semantic-color-background-action-danger-text: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-danger-ghost-default: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-tertiary-text: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-tertiary-ghost-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-tertiary-ghost-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-tertiary-ghost-default: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-tertiary-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-tertiary-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-tertiary-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-action-secondary-text: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-secondary-ghost-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-secondary-ghost-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-secondary-ghost-default: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-secondary-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-secondary-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-secondary-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-action-primary-active: var(--sapphire-global-color-blue-650);--sapphire-semantic-color-background-action-primary-hover: var(--sapphire-global-color-blue-600);--sapphire-semantic-color-background-action-primary-default: var(--sapphire-global-color-blue-500);--sapphire-semantic-size-spacing-container-horizontal-md: var(--sapphire-semantic-size-spacing-60);--sapphire-semantic-size-spacing-container-horizontal-sm: var(--sapphire-semantic-size-spacing-30);--sapphire-semantic-size-spacing-data-collection-item-horizontal-lg: var(--sapphire-semantic-size-spacing-40);--sapphire-semantic-size-spacing-data-collection-item-horizontal-md: var(--sapphire-semantic-size-spacing-30);--sapphire-semantic-size-spacing-data-collection-item-horizontal-sm: var(--sapphire-semantic-size-spacing-20);--sapphire-semantic-size-spacing-control-horizontal-lg: var(--sapphire-semantic-size-spacing-30);--sapphire-semantic-size-spacing-control-horizontal-md: var(--sapphire-semantic-size-spacing-25);--sapphire-semantic-size-spacing-control-vertical-lg: var(--sapphire-semantic-size-spacing-30);--sapphire-semantic-size-spacing-control-vertical-md: var(--sapphire-semantic-size-spacing-25);--sapphire-semantic-size-spacing-control-vertical-sm: var(--sapphire-semantic-size-spacing-10);--sapphire-semantic-size-radius-popover: var(--sapphire-semantic-size-radius-md);--sapphire-semantic-size-focus-ring: var(--sapphire-semantic-size-border-md);--sapphire-semantic-size-height-box-lg: var(--sapphire-semantic-size-height-control-2xs);--sapphire-semantic-size-height-input-md: var(--sapphire-semantic-size-height-control-md);--sapphire-semantic-size-height-input-lg: var(--sapphire-semantic-size-height-control-lg);--sapphire-semantic-color-cursor-default: var(--sapphire-semantic-color-background-action-primary-default);--sapphire-semantic-color-content-warning-primary-default: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-link-secondary-active: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-link-secondary-hover: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-link-secondary-default: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-link-primary-active: var(--sapphire-semantic-color-content-action-secondary-active);--sapphire-semantic-color-content-link-primary-hover: var(--sapphire-semantic-color-content-action-secondary-hover);--sapphire-semantic-color-content-link-primary-default: var(--sapphire-semantic-color-content-action-secondary-default);--sapphire-semantic-color-content-action-danger-active: var(--sapphire-semantic-color-content-negative-secondary-active);--sapphire-semantic-color-content-action-danger-hover: var(--sapphire-semantic-color-content-negative-secondary-hover);--sapphire-semantic-color-content-action-danger-default: var(--sapphire-semantic-color-content-negative-secondary-default);--sapphire-semantic-color-border-passive-secondary-default: var(--sapphire-semantic-color-border-primary-default);--sapphire-semantic-color-border-separator-default: var(--sapphire-semantic-color-border-tertiary-default);--sapphire-semantic-color-border-control-active: var(--sapphire-semantic-color-border-primary-active);--sapphire-semantic-color-border-control-hover: var(--sapphire-semantic-color-border-primary-hover);--sapphire-semantic-color-border-control-default: var(--sapphire-semantic-color-border-primary-default);--sapphire-semantic-color-background-spinner-secondary-default: var(--sapphire-semantic-color-background-action-primary-default);--sapphire-semantic-color-background-spinner-primary-default: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-background-popover-default: var(--sapphire-semantic-color-background-surface);--sapphire-semantic-color-background-action-danger-ghost-active: var(--sapphire-semantic-color-background-negative-secondary-active);--sapphire-semantic-color-background-action-danger-ghost-hover: var(--sapphire-semantic-color-background-negative-secondary-hover);--sapphire-semantic-color-background-action-danger-active: var(--sapphire-semantic-color-background-negative-secondary-active);--sapphire-semantic-color-background-action-danger-hover: var(--sapphire-semantic-color-background-negative-secondary-hover);--sapphire-semantic-color-background-action-danger-default: var(--sapphire-semantic-color-background-negative-secondary-default);--sapphire-semantic-color-border-field-default: var(--sapphire-semantic-color-border-control-default)}@media screen and (min-width: 768px){.sapphire-theme-default,:host,.sapphire-theme--secondary,:host ::ng-deep .sapphire-theme--secondary,.sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-semantic-size-width-panel-sm: var(--sapphire-global-size-generic-1120);--sapphire-semantic-size-width-panel-lg: var(--sapphire-global-size-generic-1600)}}@media (prefers-reduced-motion){.sapphire-theme-default,:host,.sapphire-theme--secondary,:host ::ng-deep .sapphire-theme--secondary,.sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-semantic-time-motion-very-slow: var(--sapphire-global-time-2000);--sapphire-semantic-time-motion-slow: 0s;--sapphire-semantic-time-motion-default: 0s;--sapphire-semantic-time-motion-quick: 0s}}.sapphire-theme-default.sapphire-theme--secondary,.sapphire-theme-default .sapphire-theme--secondary,:host .sapphire-theme--secondary,:host ::ng-deep .sapphire-theme--secondary{--sapphire-semantic-color-background-action-secondary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-background-action-secondary-hover: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-secondary-active: var(--sapphire-global-color-sapphire-125);--sapphire-semantic-color-background-action-secondary-ghost-hover: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-secondary-ghost-active: var(--sapphire-global-color-sapphire-125);--sapphire-semantic-color-background-action-tertiary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-background-action-tertiary-hover: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-tertiary-active: var(--sapphire-global-color-sapphire-125);--sapphire-semantic-color-background-action-tertiary-ghost-hover: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-tertiary-ghost-active: var(--sapphire-global-color-sapphire-125);--sapphire-semantic-color-background-action-danger-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-background-action-danger-hover: var(--sapphire-global-color-red-100);--sapphire-semantic-color-background-action-danger-active: var(--sapphire-global-color-red-125);--sapphire-semantic-color-background-action-danger-ghost-hover: var(--sapphire-global-color-red-100);--sapphire-semantic-color-background-action-danger-ghost-active: var(--sapphire-global-color-red-125);--sapphire-semantic-color-background-surface: var(--sapphire-global-color-sapphire-50)}.sapphire-theme-default.sapphire-theme--contrast,.sapphire-theme-default .sapphire-theme--contrast,:host .sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-global-color-sapphire-25: hsl(202, 100%, 7%);--sapphire-global-color-sapphire-50: hsl(203, 100%, 9%);--sapphire-global-color-sapphire-75: hsl(202, 100%, 10%);--sapphire-global-color-sapphire-100: hsl(202, 100%, 11%);--sapphire-global-color-sapphire-125: hsl(201, 82%, 13%);--sapphire-global-color-sapphire-150: hsl(202, 68%, 16%);--sapphire-global-color-sapphire-200: hsl(203, 50%, 21%);--sapphire-global-color-sapphire-250: hsl(204, 41%, 25%);--sapphire-global-color-sapphire-300: hsl(204, 32%, 29%);--sapphire-global-color-sapphire-350: hsl(203, 27%, 33%);--sapphire-global-color-sapphire-400: hsl(205, 23%, 37%);--sapphire-global-color-sapphire-450: hsl(205, 19%, 41%);--sapphire-global-color-sapphire-500: hsl(205, 16%, 46%);--sapphire-global-color-sapphire-550: hsl(206, 16%, 50%);--sapphire-global-color-sapphire-600: hsl(206, 15%, 56%);--sapphire-global-color-sapphire-650: hsl(206, 16%, 61%);--sapphire-global-color-sapphire-700: hsl(209, 17%, 66%);--sapphire-global-color-sapphire-750: hsl(207, 16%, 73%);--sapphire-global-color-sapphire-800: hsl(208, 18%, 79%);--sapphire-global-color-sapphire-850: hsl(208, 18%, 86%);--sapphire-global-color-sapphire-875: hsl(210, 19%, 90%);--sapphire-global-color-sapphire-900: hsl(210, 24%, 93%);--sapphire-global-color-sapphire-925: hsl(210, 23%, 95%);--sapphire-global-color-sapphire-950: hsl(216, 29%, 97%);--sapphire-global-color-sapphire-975: hsl(220, 33%, 98%);--sapphire-global-color-sapphire-900-70p: hsla(210, 24%, 93%, .3);--sapphire-global-color-blue-25: hsl(202, 100%, 7%);--sapphire-global-color-blue-50: hsl(203, 100%, 9%);--sapphire-global-color-blue-75: hsl(203, 100%, 10%);--sapphire-global-color-blue-100: hsl(202, 100%, 11%);--sapphire-global-color-blue-125: hsl(203, 100%, 13%);--sapphire-global-color-blue-150: hsl(203, 100%, 15%);--sapphire-global-color-blue-200: hsl(203, 100%, 19%);--sapphire-global-color-blue-250: hsl(202, 100%, 22%);--sapphire-global-color-blue-300: hsl(203, 100%, 25%);--sapphire-global-color-blue-350: hsl(203, 100%, 29%);--sapphire-global-color-blue-400: hsl(203, 100%, 32%);--sapphire-global-color-blue-450: hsl(203, 100%, 35%);--sapphire-global-color-blue-500: hsl(203, 100%, 39%);--sapphire-global-color-blue-550: hsl(203, 90%, 44%);--sapphire-global-color-blue-600: hsl(203, 80%, 50%);--sapphire-global-color-blue-650: hsl(203, 75%, 57%);--sapphire-global-color-blue-700: hsl(203, 70%, 65%);--sapphire-global-color-blue-750: hsl(203, 64%, 72%);--sapphire-global-color-blue-800: hsl(203, 65%, 79%);--sapphire-global-color-blue-850: hsl(203, 64%, 86%);--sapphire-global-color-blue-875: hsl(204, 65%, 90%);--sapphire-global-color-blue-900: hsl(203, 64%, 94%);--sapphire-global-color-blue-925: hsl(206, 67%, 95%);--sapphire-global-color-blue-950: hsl(202, 65%, 97%);--sapphire-global-color-blue-975: hsl(204, 56%, 98%);--sapphire-global-color-green-25: hsl(159, 100%, 5%);--sapphire-global-color-green-50: hsl(159, 100%, 6%);--sapphire-global-color-green-75: hsl(159, 100%, 7%);--sapphire-global-color-green-100: hsl(159, 100%, 7%);--sapphire-global-color-green-125: hsl(159, 100%, 9%);--sapphire-global-color-green-150: hsl(158, 100%, 10%);--sapphire-global-color-green-200: hsl(159, 100%, 13%);--sapphire-global-color-green-250: hsl(159, 100%, 15%);--sapphire-global-color-green-300: hsl(159, 100%, 17%);--sapphire-global-color-green-350: hsl(159, 100%, 19%);--sapphire-global-color-green-400: hsl(159, 100%, 22%);--sapphire-global-color-green-450: hsl(159, 100%, 24%);--sapphire-global-color-green-500: hsl(159, 100%, 27%);--sapphire-global-color-green-550: hsl(159, 71%, 34%);--sapphire-global-color-green-600: hsl(159, 51%, 42%);--sapphire-global-color-green-650: hsl(159, 37%, 50%);--sapphire-global-color-green-700: hsl(159, 36%, 57%);--sapphire-global-color-green-750: hsl(159, 36%, 66%);--sapphire-global-color-green-800: hsl(160, 36%, 74%);--sapphire-global-color-green-850: hsl(159, 36%, 83%);--sapphire-global-color-green-875: hsl(159, 37%, 88%);--sapphire-global-color-green-900: hsl(159, 35%, 92%);--sapphire-global-color-green-925: hsl(162, 33%, 94%);--sapphire-global-color-green-950: hsl(158, 40%, 96%);--sapphire-global-color-green-975: hsl(150, 40%, 98%);--sapphire-global-color-red-25: hsl(0, 33%, 10%);--sapphire-global-color-red-50: hsl(355, 38%, 12%);--sapphire-global-color-red-75: hsl(356, 41%, 14%);--sapphire-global-color-red-100: hsl(355, 43%, 15%);--sapphire-global-color-red-125: hsl(354, 44%, 18%);--sapphire-global-color-red-150: hsl(353, 48%, 21%);--sapphire-global-color-red-200: hsl(353, 50%, 26%);--sapphire-global-color-red-250: hsl(351, 54%, 31%);--sapphire-global-color-red-300: hsl(351, 55%, 35%);--sapphire-global-color-red-350: hsl(350, 57%, 39%);--sapphire-global-color-red-400: hsl(349, 60%, 44%);--sapphire-global-color-red-450: hsl(349, 61%, 48%);--sapphire-global-color-red-500: hsl(348, 72%, 53%);--sapphire-global-color-red-550: hsl(351, 73%, 59%);--sapphire-global-color-red-600: hsl(353, 75%, 65%);--sapphire-global-color-red-650: hsl(355, 79%, 71%);--sapphire-global-color-red-700: hsl(356, 82%, 76%);--sapphire-global-color-red-750: hsl(357, 88%, 81%);--sapphire-global-color-red-800: hsl(358, 92%, 86%);--sapphire-global-color-red-850: hsl(359, 100%, 91%);--sapphire-global-color-red-875: hsl(358, 100%, 94%);--sapphire-global-color-red-900: hsl(357, 100%, 96%);--sapphire-global-color-red-925: hsl(356, 100%, 97%);--sapphire-global-color-red-950: hsl(355, 100%, 98%);--sapphire-global-color-red-975: hsl(0, 100%, 99%);--sapphire-global-color-secondary-aqua-50: hsl(192, 82%, 34%);--sapphire-global-color-secondary-aqua-100: hsl(192, 66%, 42%);--sapphire-global-color-secondary-aqua-150: hsl(192, 48%, 54%);--sapphire-global-color-secondary-aqua-200: hsl(192, 49%, 67%);--sapphire-global-color-secondary-aqua-300: hsl(191, 55%, 79%);--sapphire-global-color-secondary-aqua-400: hsl(192, 56%, 86%);--sapphire-global-color-secondary-aqua-500: hsl(190, 57%, 92%);--sapphire-global-color-secondary-aqua-600: hsl(190, 60%, 96%);--sapphire-global-color-secondary-copper-50: hsl(16, 54%, 47%);--sapphire-global-color-secondary-copper-100: hsl(16, 57%, 55%);--sapphire-global-color-secondary-copper-150: hsl(16, 56%, 65%);--sapphire-global-color-secondary-copper-200: hsl(16, 57%, 75%);--sapphire-global-color-secondary-copper-300: hsl(15, 56%, 85%);--sapphire-global-color-secondary-copper-400: hsl(16, 56%, 89%);--sapphire-global-color-secondary-copper-500: hsl(15, 57%, 95%);--sapphire-global-color-secondary-copper-600: hsl(17, 54%, 97%);--sapphire-global-color-secondary-electro-50: hsl(206, 32%, 46%);--sapphire-global-color-secondary-electro-100: hsl(206, 31%, 54%);--sapphire-global-color-secondary-electro-150: hsl(206, 31%, 63%);--sapphire-global-color-secondary-electro-200: hsl(206, 32%, 73%);--sapphire-global-color-secondary-electro-300: hsl(207, 38%, 84%);--sapphire-global-color-secondary-electro-400: hsl(207, 39%, 89%);--sapphire-global-color-secondary-electro-500: hsl(206, 44%, 94%);--sapphire-global-color-secondary-electro-600: hsl(204, 33%, 97%);--sapphire-global-color-secondary-indigo-50: hsl(224, 81%, 59%);--sapphire-global-color-secondary-indigo-100: hsl(224, 100%, 66%);--sapphire-global-color-secondary-indigo-150: hsl(224, 100%, 74%);--sapphire-global-color-secondary-indigo-200: hsl(223, 100%, 81%);--sapphire-global-color-secondary-indigo-300: hsl(224, 100%, 88%);--sapphire-global-color-secondary-indigo-400: hsl(225, 100%, 92%);--sapphire-global-color-secondary-indigo-500: hsl(224, 100%, 96%);--sapphire-global-color-secondary-indigo-600: hsl(224, 100%, 98%);--sapphire-global-color-secondary-lime-50: hsl(76, 100%, 25%);--sapphire-global-color-secondary-lime-100: hsl(74, 100%, 29%);--sapphire-global-color-secondary-lime-150: hsl(73, 52%, 44%);--sapphire-global-color-secondary-lime-200: hsl(74, 42%, 59%);--sapphire-global-color-secondary-lime-300: hsl(74, 46%, 74%);--sapphire-global-color-secondary-lime-400: hsl(74, 52%, 81%);--sapphire-global-color-secondary-lime-500: hsl(74, 61%, 89%);--sapphire-global-color-secondary-lime-600: hsl(73, 66%, 94%);--sapphire-global-color-secondary-pink-50: hsl(333, 53%, 52%);--sapphire-global-color-secondary-pink-100: hsl(333, 65%, 61%);--sapphire-global-color-secondary-pink-150: hsl(333, 66%, 69%);--sapphire-global-color-secondary-pink-200: hsl(333, 67%, 78%);--sapphire-global-color-secondary-pink-300: hsl(332, 69%, 86%);--sapphire-global-color-secondary-pink-400: hsl(333, 70%, 91%);--sapphire-global-color-secondary-pink-500: hsl(330, 62%, 95%);--sapphire-global-color-secondary-pink-600: hsl(330, 71%, 97%);--sapphire-global-color-secondary-violet-50: hsl(245, 60%, 63%);--sapphire-global-color-secondary-violet-100: hsl(245, 75%, 70%);--sapphire-global-color-secondary-violet-150: hsl(245, 74%, 76%);--sapphire-global-color-secondary-violet-200: hsl(246, 75%, 83%);--sapphire-global-color-secondary-violet-300: hsl(248, 74%, 89%);--sapphire-global-color-secondary-violet-400: hsl(246, 74%, 93%);--sapphire-global-color-secondary-violet-500: hsl(244, 70%, 96%);--sapphire-global-color-secondary-violet-600: hsl(248, 80%, 98%);--sapphire-semantic-color-background-field-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-control-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-control-special-primary-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-control-special-secondary-default: var(--sapphire-global-color-sapphire-200);--sapphire-semantic-color-background-surface: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-popover-default: var(--sapphire-global-color-sapphire-25);--sapphire-semantic-color-content-default-primary: var(--sapphire-global-color-neutral-white)}::ng-deep .cdk-overlay-container,::ng-deep .cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}::ng-deep .cdk-overlay-container{position:fixed;z-index:1000}::ng-deep .cdk-overlay-container:empty{display:none}::ng-deep .cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}::ng-deep .cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}::ng-deep .cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}::ng-deep .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active ::ng-deep .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}::ng-deep .cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}::ng-deep .cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}::ng-deep .cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}::ng-deep .cdk-overlay-backdrop-noop-animation{transition:none}::ng-deep .cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}::ng-deep .cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}::ng-deep .cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] ::ng-deep .cdk-visually-hidden{left:auto;right:0}\n"] });
|
|
5796
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ThemeDefault, decorators: [{
|
|
5797
|
+
type: Component,
|
|
5798
|
+
args: [{ selector: 'sp-theme-default', standalone: true, template: '<ng-content></ng-content>', hostDirectives: [ThemeBaseDirective], styles: ["@keyframes backdrop-fade-in{0%{background-color:transparent}to{background-color:var(--sapphire-semantic-color-background-backdrop)}}@keyframes backdrop-fade-out{0%{background-color:var(--sapphire-semantic-color-background-backdrop)}to{background-color:transparent}}.sapphire-backdrop,:host.sapphire-backdrop{width:100%;height:100%;display:flex;justify-content:center;align-items:center;animation-name:backdrop-fade-in;animation-duration:var(--sapphire-semantic-time-fade-default);animation-timing-function:ease-in-out;animation-fill-mode:forwards}.sapphire-backdrop--exiting,:host.sapphire-backdrop--exiting{animation-name:backdrop-fade-out}.sapphire-theme-default,:host,.sapphire-theme--secondary,:host ::ng-deep .sapphire-theme--secondary,.sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-semantic-size-breakpoint-xl: 1400px;--sapphire-semantic-size-breakpoint-l: 1200px;--sapphire-semantic-size-breakpoint-m: 960px;--sapphire-semantic-size-breakpoint-s: 768px;--sapphire-semantic-size-breakpoint-xs: 576px;--sapphire-semantic-size-width-panel-lg: 100%;--sapphire-semantic-size-width-panel-sm: 100%;--sapphire-semantic-font-weight-display-bold: 700;--sapphire-semantic-font-weight-display-regular: 400;--sapphire-semantic-font-weight-default-bold: 700;--sapphire-semantic-font-weight-default-semibold: 600;--sapphire-semantic-font-weight-default-regular: 400;--sapphire-global-time-2000: 2s;--sapphire-global-time-1800: 1.8s;--sapphire-global-time-1000: 1s;--sapphire-global-time-400: .4s;--sapphire-global-time-200: .2s;--sapphire-global-time-100: .1s;--sapphire-global-size-ratio-height: .875;--sapphire-global-size-line-height-md: 1.5;--sapphire-global-size-line-height-sm: 1.2;--sapphire-global-size-font-300: 3rem;--sapphire-global-size-font-220: 2.1875rem;--sapphire-global-size-font-188: 1.875rem;--sapphire-global-size-font-150: 1.5rem;--sapphire-global-size-font-130: 1.3125rem;--sapphire-global-size-font-112: 1.125rem;--sapphire-global-size-font-106: 1.0625rem;--sapphire-global-size-font-100: 1rem;--sapphire-global-size-font-88: .875rem;--sapphire-global-size-font-75: .75rem;--sapphire-global-size-font-60: .625rem;--sapphire-global-size-generic-4320: 108rem;--sapphire-global-size-generic-3780: 94.5rem;--sapphire-global-size-generic-3600: 90rem;--sapphire-global-size-generic-3200: 80rem;--sapphire-global-size-generic-2560: 64rem;--sapphire-global-size-generic-2400: 60rem;--sapphire-global-size-generic-1920: 48rem;--sapphire-global-size-generic-1600: 40rem;--sapphire-global-size-generic-1400: 35rem;--sapphire-global-size-generic-1280: 32rem;--sapphire-global-size-generic-1200: 30rem;--sapphire-global-size-generic-1120: 28rem;--sapphire-global-size-generic-1000: 25rem;--sapphire-global-size-generic-960: 24rem;--sapphire-global-size-generic-940: 23.5rem;--sapphire-global-size-generic-900: 22.5rem;--sapphire-global-size-generic-800: 20rem;--sapphire-global-size-generic-750: 18.75rem;--sapphire-global-size-generic-640: 16rem;--sapphire-global-size-generic-600: 15rem;--sapphire-global-size-generic-560: 14rem;--sapphire-global-size-generic-480: 12rem;--sapphire-global-size-generic-400: 10rem;--sapphire-global-size-generic-340: 8.5rem;--sapphire-global-size-generic-320: 8rem;--sapphire-global-size-generic-300: 7.5rem;--sapphire-global-size-generic-280: 7rem;--sapphire-global-size-generic-240: 6rem;--sapphire-global-size-generic-200: 5rem;--sapphire-global-size-generic-180: 4.5rem;--sapphire-global-size-generic-160: 4rem;--sapphire-global-size-generic-140: 3.5rem;--sapphire-global-size-generic-120: 3rem;--sapphire-global-size-generic-100: 2.5rem;--sapphire-global-size-generic-80: 2rem;--sapphire-global-size-generic-60: 1.5rem;--sapphire-global-size-generic-50: 1.25rem;--sapphire-global-size-generic-40: 1rem;--sapphire-global-size-generic-35: .875rem;--sapphire-global-size-generic-30: .75rem;--sapphire-global-size-generic-25: .625rem;--sapphire-global-size-generic-20: .5rem;--sapphire-global-size-generic-15: .375rem;--sapphire-global-size-generic-10: .25rem;--sapphire-global-size-generic-5: .125rem;--sapphire-global-size-generic-2: .0625rem;--sapphire-global-size-generic-0: 0rem;--sapphire-global-size-static-60: 24px;--sapphire-global-size-static-30: 12px;--sapphire-global-size-static-20: 8px;--sapphire-global-size-static-10: 4px;--sapphire-global-size-static-5: 2px;--sapphire-global-size-static-2: 1px;--sapphire-global-size-static-0: 0px;--sapphire-global-shadow-lg: 0px 0px 2px 0px rgba(34, 64, 82, .02), 0px -1.5px 6px 0px rgba(34, 64, 82, .03), 0px 4.5px 12px 0px rgba(34, 64, 82, .04), 0px 14.5px 18px 0px rgba(34, 64, 82, .04), 0px 26px 34px 0px rgba(34, 64, 82, .05), 0px 84px 92px 0px rgba(34, 64, 82, .07), 0px 0px 2px 0px rgba(34, 64, 82, .05), 0px 0px 1px 0px rgba(34, 64, 82, .2);--sapphire-global-shadow-md: 0px 0px 3px 0px rgba(34, 64, 82, .02), 0px 3px 7px 0px rgba(34, 64, 82, .03), 0px 6.5px 14px 0px rgba(34, 64, 82, .04), 0px 13px 29px 0px rgba(34, 64, 82, .05), 0px 36px 80px 0px rgba(34, 64, 82, .07), 0px 0px 2px 0px rgba(34, 64, 82, .05), 0px 0px 1px 0px rgba(34, 64, 82, .2);--sapphire-global-shadow-sm: 0px 0px 2px 0px rgba(34, 64, 82, .06), 0px 1.5px 4px 0px rgba(34, 64, 82, .04), 0px 4.5px 6px 0px rgba(34, 64, 82, .04), 0px 10.5px 12px 0px rgba(34, 64, 82, .03), 0px 25px 24px 0px rgba(34, 64, 82, .02), 0px 100px 64px 0px rgba(34, 64, 82, .02), 0px 0px 2px 0px rgba(34, 64, 82, .05), 0px 0px 1px 0px rgba(34, 64, 82, .2);--sapphire-global-opacity-50: .5;--sapphire-global-opacity-40: .4;--sapphire-global-opacity-35: .35;--sapphire-global-font-danske-human-name: \"Danske Human\";--sapphire-global-font-danske-text-name: \"Danske Text v2\";--sapphire-global-color-secondary-orange-600: hsl(19, 100%, 34%);--sapphire-global-color-secondary-orange-500: hsl(17, 100%, 43%);--sapphire-global-color-secondary-orange-400: hsl(19, 84%, 54%);--sapphire-global-color-secondary-orange-300: hsl(21, 84%, 66%);--sapphire-global-color-secondary-orange-200: hsl(23, 83%, 79%);--sapphire-global-color-secondary-orange-150: hsl(25, 84%, 86%);--sapphire-global-color-secondary-orange-100: hsl(26, 89%, 93%);--sapphire-global-color-secondary-orange-75: hsl(27, 85%, 95%);--sapphire-global-color-secondary-orange-50: hsl(28, 89%, 96%);--sapphire-global-color-secondary-teal-600: hsl(171, 100%, 22%);--sapphire-global-color-secondary-teal-500: hsl(171, 100%, 26%);--sapphire-global-color-secondary-teal-400: hsl(172, 50%, 42%);--sapphire-global-color-secondary-teal-300: hsl(172, 36%, 57%);--sapphire-global-color-secondary-teal-200: hsl(171, 36%, 74%);--sapphire-global-color-secondary-teal-150: hsl(171, 36%, 82%);--sapphire-global-color-secondary-teal-100: hsl(172, 35%, 92%);--sapphire-global-color-secondary-teal-75: hsl(170, 38%, 94%);--sapphire-global-color-secondary-teal-50: hsl(171, 33%, 96%);--sapphire-global-color-secondary-forest-green-600: hsl(105, 93%, 23%);--sapphire-global-color-secondary-forest-green-500: hsl(105, 93%, 28%);--sapphire-global-color-secondary-forest-green-400: hsl(105, 48%, 43%);--sapphire-global-color-secondary-forest-green-300: hsl(105, 36%, 58%);--sapphire-global-color-secondary-forest-green-200: hsl(105, 36%, 74%);--sapphire-global-color-secondary-forest-green-150: hsl(105, 36%, 82%);--sapphire-global-color-secondary-forest-green-100: hsl(104, 35%, 92%);--sapphire-global-color-secondary-forest-green-75: hsl(109, 35%, 94%);--sapphire-global-color-secondary-forest-green-50: hsl(111, 33%, 96%);--sapphire-global-color-secondary-cobalt-600: hsl(215, 87%, 42%);--sapphire-global-color-secondary-cobalt-500: hsl(215, 92%, 51%);--sapphire-global-color-secondary-cobalt-400: hsl(215, 92%, 62%);--sapphire-global-color-secondary-cobalt-300: hsl(215, 92%, 72%);--sapphire-global-color-secondary-cobalt-200: hsl(215, 91%, 83%);--sapphire-global-color-secondary-cobalt-150: hsl(216, 93%, 89%);--sapphire-global-color-secondary-cobalt-100: hsl(216, 93%, 95%);--sapphire-global-color-secondary-cobalt-75: hsl(215, 90%, 96%);--sapphire-global-color-secondary-cobalt-50: hsl(215, 86%, 97%);--sapphire-global-color-secondary-gray-600: hsl(202, 6%, 38%);--sapphire-global-color-secondary-gray-500: hsl(201, 6%, 46%);--sapphire-global-color-secondary-gray-400: hsl(200, 5%, 56%);--sapphire-global-color-secondary-gray-300: hsl(203, 5%, 67%);--sapphire-global-color-secondary-gray-200: hsl(200, 6%, 79%);--sapphire-global-color-secondary-gray-150: hsl(195, 6%, 86%);--sapphire-global-color-secondary-gray-100: hsl(210, 6%, 93%);--sapphire-global-color-secondary-gray-75: hsl(240, 4%, 95%);--sapphire-global-color-secondary-gray-50: hsl(180, 6%, 97%);--sapphire-global-color-secondary-orchid-600: hsl(304, 36%, 42%);--sapphire-global-color-secondary-orchid-500: hsl(304, 37%, 51%);--sapphire-global-color-secondary-orchid-400: hsl(304, 37%, 61%);--sapphire-global-color-secondary-orchid-300: hsl(303, 37%, 71%);--sapphire-global-color-secondary-orchid-200: hsl(304, 37%, 82%);--sapphire-global-color-secondary-orchid-150: hsl(305, 38%, 88%);--sapphire-global-color-secondary-orchid-100: hsl(305, 38%, 94%);--sapphire-global-color-secondary-orchid-75: hsl(300, 36%, 96%);--sapphire-global-color-secondary-orchid-50: hsl(300, 33%, 97%);--sapphire-global-color-secondary-beige-600: hsl(38, 20%, 35%);--sapphire-global-color-secondary-beige-500: hsl(40, 20%, 43%);--sapphire-global-color-secondary-beige-400: hsl(38, 15%, 54%);--sapphire-global-color-secondary-beige-300: hsl(39, 16%, 65%);--sapphire-global-color-secondary-beige-200: hsl(41, 14%, 78%);--sapphire-global-color-secondary-beige-150: hsl(40, 16%, 85%);--sapphire-global-color-secondary-beige-100: hsl(40, 17%, 93%);--sapphire-global-color-secondary-beige-75: hsl(30, 15%, 95%);--sapphire-global-color-secondary-beige-50: hsl(30, 11%, 96%);--sapphire-global-color-secondary-gold-600: hsl(42, 97%, 25%);--sapphire-global-color-secondary-gold-500: hsl(42, 96%, 31%);--sapphire-global-color-secondary-gold-400: hsl(42, 54%, 45%);--sapphire-global-color-secondary-gold-300: hsl(42, 44%, 59%);--sapphire-global-color-secondary-gold-200: hsl(42, 44%, 74%);--sapphire-global-color-secondary-gold-150: hsl(43, 43%, 83%);--sapphire-global-color-secondary-gold-100: hsl(43, 43%, 92%);--sapphire-global-color-secondary-gold-75: hsl(42, 42%, 94%);--sapphire-global-color-secondary-gold-50: hsl(40, 43%, 96%);--sapphire-global-color-secondary-violet-600: hsl(245, 41%, 52%);--sapphire-global-color-secondary-violet-500: hsl(245, 66%, 64%);--sapphire-global-color-secondary-violet-400: hsl(245, 66%, 71%);--sapphire-global-color-secondary-violet-300: hsl(245, 66%, 78%);--sapphire-global-color-secondary-violet-200: hsl(244, 65%, 86%);--sapphire-global-color-secondary-violet-150: hsl(246, 66%, 91%);--sapphire-global-color-secondary-violet-100: hsl(244, 64%, 96%);--sapphire-global-color-secondary-violet-75: hsl(245, 65%, 97%);--sapphire-global-color-secondary-violet-50: hsl(240, 64%, 98%);--sapphire-global-color-secondary-purple-600: hsl(270, 28%, 45%);--sapphire-global-color-secondary-purple-500: hsl(270, 33%, 55%);--sapphire-global-color-secondary-purple-400: hsl(270, 33%, 64%);--sapphire-global-color-secondary-purple-300: hsl(270, 33%, 73%);--sapphire-global-color-secondary-purple-200: hsl(269, 33%, 83%);--sapphire-global-color-secondary-purple-150: hsl(272, 32%, 88%);--sapphire-global-color-secondary-purple-100: hsl(270, 36%, 95%);--sapphire-global-color-secondary-purple-75: hsl(274, 33%, 96%);--sapphire-global-color-secondary-purple-50: hsl(270, 29%, 97%);--sapphire-global-color-secondary-pink-600: hsl(327, 48%, 43%);--sapphire-global-color-secondary-pink-500: hsl(327, 53%, 53%);--sapphire-global-color-secondary-pink-400: hsl(326, 53%, 63%);--sapphire-global-color-secondary-pink-300: hsl(326, 53%, 73%);--sapphire-global-color-secondary-pink-200: hsl(327, 53%, 83%);--sapphire-global-color-secondary-pink-150: hsl(327, 54%, 89%);--sapphire-global-color-secondary-pink-100: hsl(328, 56%, 95%);--sapphire-global-color-secondary-pink-75: hsl(330, 50%, 96%);--sapphire-global-color-secondary-pink-50: hsl(326, 54%, 97%);--sapphire-global-color-secondary-lime-600: hsl(71, 76%, 23%);--sapphire-global-color-secondary-lime-500: hsl(71, 76%, 28%);--sapphire-global-color-secondary-lime-400: hsl(71, 42%, 42%);--sapphire-global-color-secondary-lime-300: hsl(72, 30%, 57%);--sapphire-global-color-secondary-lime-200: hsl(70, 29%, 73%);--sapphire-global-color-secondary-lime-150: hsl(71, 30%, 82%);--sapphire-global-color-secondary-lime-100: hsl(69, 29%, 91%);--sapphire-global-color-secondary-lime-75: hsl(66, 29%, 93%);--sapphire-global-color-secondary-lime-50: hsl(70, 27%, 96%);--sapphire-global-color-secondary-indigo-600: hsl(230, 62%, 53%);--sapphire-global-color-secondary-indigo-500: hsl(230, 100%, 64%);--sapphire-global-color-secondary-indigo-400: hsl(230, 100%, 72%);--sapphire-global-color-secondary-indigo-300: hsl(230, 100%, 79%);--sapphire-global-color-secondary-indigo-200: hsl(229, 100%, 87%);--sapphire-global-color-secondary-indigo-150: hsl(229, 100%, 91%);--sapphire-global-color-secondary-indigo-100: hsl(231, 100%, 96%);--sapphire-global-color-secondary-indigo-75: hsl(229, 100%, 97%);--sapphire-global-color-secondary-indigo-50: hsl(229, 100%, 98%);--sapphire-global-color-secondary-electro-600: hsl(207, 31%, 38%);--sapphire-global-color-secondary-electro-500: hsl(206, 31%, 46%);--sapphire-global-color-secondary-electro-400: hsl(206, 27%, 56%);--sapphire-global-color-secondary-electro-300: hsl(207, 27%, 67%);--sapphire-global-color-secondary-electro-200: hsl(208, 27%, 80%);--sapphire-global-color-secondary-electro-150: hsl(205, 27%, 86%);--sapphire-global-color-secondary-electro-100: hsl(207, 27%, 94%);--sapphire-global-color-secondary-electro-75: hsl(206, 28%, 95%);--sapphire-global-color-secondary-electro-50: hsl(204, 29%, 97%);--sapphire-global-color-secondary-copper-600: hsl(16, 54%, 39%);--sapphire-global-color-secondary-copper-500: hsl(15, 54%, 48%);--sapphire-global-color-secondary-copper-400: hsl(15, 50%, 59%);--sapphire-global-color-secondary-copper-300: hsl(15, 50%, 69%);--sapphire-global-color-secondary-copper-200: hsl(16, 49%, 81%);--sapphire-global-color-secondary-copper-150: hsl(15, 51%, 87%);--sapphire-global-color-secondary-copper-100: hsl(16, 48%, 94%);--sapphire-global-color-secondary-copper-75: hsl(16, 48%, 95%);--sapphire-global-color-secondary-copper-50: hsl(15, 50%, 97%);--sapphire-global-color-secondary-aqua-600: hsl(192, 100%, 26%);--sapphire-global-color-secondary-aqua-500: hsl(192, 100%, 32%);--sapphire-global-color-secondary-aqua-400: hsl(192, 55%, 46%);--sapphire-global-color-secondary-aqua-300: hsl(192, 47%, 60%);--sapphire-global-color-secondary-aqua-200: hsl(192, 47%, 76%);--sapphire-global-color-secondary-aqua-150: hsl(192, 47%, 84%);--sapphire-global-color-secondary-aqua-100: hsl(190, 45%, 92%);--sapphire-global-color-secondary-aqua-75: hsl(193, 47%, 94%);--sapphire-global-color-secondary-aqua-50: hsl(193, 47%, 96%);--sapphire-global-color-yellow-975: hsl(20, 95%, 8%);--sapphire-global-color-yellow-950: hsl(19, 89%, 11%);--sapphire-global-color-yellow-925: hsl(21, 87%, 15%);--sapphire-global-color-yellow-900: hsl(21, 88%, 19%);--sapphire-global-color-yellow-875: hsl(21, 86%, 23%);--sapphire-global-color-yellow-850: hsl(22, 85%, 27%);--sapphire-global-color-yellow-800: hsl(22, 88%, 29%);--sapphire-global-color-yellow-750: hsl(24, 89%, 33%);--sapphire-global-color-yellow-700: hsl(25, 93%, 37%);--sapphire-global-color-yellow-650: hsl(28, 94%, 41%);--sapphire-global-color-yellow-600: hsl(31, 93%, 44%);--sapphire-global-color-yellow-550: hsl(34, 94%, 48%);--sapphire-global-color-yellow-500: hsl(37, 95%, 52%);--sapphire-global-color-yellow-450: hsl(40, 95%, 54%);--sapphire-global-color-yellow-400: hsl(43, 98%, 55%);--sapphire-global-color-yellow-350: hsl(44, 98%, 60%);--sapphire-global-color-yellow-300: hsl(46, 98%, 64%);--sapphire-global-color-yellow-250: hsl(47, 97%, 70%);--sapphire-global-color-yellow-200: hsl(48, 98%, 76%);--sapphire-global-color-yellow-150: hsl(48, 98%, 79%);--sapphire-global-color-yellow-125: hsl(49, 97%, 85%);--sapphire-global-color-yellow-100: hsl(48, 100%, 89%);--sapphire-global-color-yellow-75: hsl(49, 100%, 92%);--sapphire-global-color-yellow-50: hsl(51, 100%, 96%);--sapphire-global-color-yellow-25: hsl(54, 100%, 98%);--sapphire-global-color-red-975: hsl(0, 33%, 10%);--sapphire-global-color-red-950: hsl(355, 38%, 12%);--sapphire-global-color-red-925: hsl(356, 41%, 14%);--sapphire-global-color-red-900: hsl(355, 43%, 15%);--sapphire-global-color-red-875: hsl(354, 44%, 18%);--sapphire-global-color-red-850: hsl(353, 48%, 21%);--sapphire-global-color-red-800: hsl(353, 50%, 26%);--sapphire-global-color-red-750: hsl(351, 54%, 31%);--sapphire-global-color-red-700: hsl(351, 55%, 35%);--sapphire-global-color-red-650: hsl(350, 57%, 39%);--sapphire-global-color-red-600: hsl(349, 60%, 44%);--sapphire-global-color-red-550: hsl(349, 61%, 48%);--sapphire-global-color-red-500: hsl(348, 72%, 53%);--sapphire-global-color-red-450: hsl(351, 73%, 59%);--sapphire-global-color-red-400: hsl(353, 75%, 65%);--sapphire-global-color-red-350: hsl(355, 79%, 71%);--sapphire-global-color-red-300: hsl(356, 82%, 76%);--sapphire-global-color-red-250: hsl(357, 88%, 81%);--sapphire-global-color-red-200: hsl(358, 92%, 86%);--sapphire-global-color-red-150: hsl(359, 100%, 91%);--sapphire-global-color-red-125: hsl(358, 100%, 94%);--sapphire-global-color-red-100: hsl(357, 100%, 96%);--sapphire-global-color-red-75: hsl(356, 100%, 97%);--sapphire-global-color-red-50: hsl(355, 100%, 98%);--sapphire-global-color-red-25: hsl(0, 100%, 99%);--sapphire-global-color-green-975: hsl(159, 100%, 5%);--sapphire-global-color-green-950: hsl(159, 100%, 6%);--sapphire-global-color-green-925: hsl(159, 100%, 7%);--sapphire-global-color-green-900: hsl(159, 100%, 7%);--sapphire-global-color-green-875: hsl(159, 100%, 9%);--sapphire-global-color-green-850: hsl(158, 100%, 10%);--sapphire-global-color-green-800: hsl(159, 100%, 13%);--sapphire-global-color-green-750: hsl(159, 100%, 15%);--sapphire-global-color-green-700: hsl(159, 100%, 17%);--sapphire-global-color-green-650: hsl(159, 100%, 19%);--sapphire-global-color-green-600: hsl(159, 100%, 22%);--sapphire-global-color-green-550: hsl(159, 100%, 24%);--sapphire-global-color-green-500: hsl(159, 100%, 27%);--sapphire-global-color-green-450: hsl(159, 71%, 34%);--sapphire-global-color-green-400: hsl(159, 51%, 42%);--sapphire-global-color-green-350: hsl(159, 37%, 50%);--sapphire-global-color-green-300: hsl(159, 36%, 57%);--sapphire-global-color-green-250: hsl(159, 36%, 66%);--sapphire-global-color-green-200: hsl(160, 36%, 74%);--sapphire-global-color-green-150: hsl(159, 36%, 83%);--sapphire-global-color-green-125: hsl(159, 37%, 88%);--sapphire-global-color-green-100: hsl(159, 35%, 92%);--sapphire-global-color-green-75: hsl(162, 33%, 94%);--sapphire-global-color-green-50: hsl(158, 40%, 96%);--sapphire-global-color-green-25: hsl(150, 40%, 98%);--sapphire-global-color-blue-975: hsl(202, 100%, 7%);--sapphire-global-color-blue-950: hsl(203, 100%, 9%);--sapphire-global-color-blue-925: hsl(203, 100%, 10%);--sapphire-global-color-blue-900: hsl(202, 100%, 11%);--sapphire-global-color-blue-875: hsl(203, 100%, 13%);--sapphire-global-color-blue-850: hsl(203, 100%, 15%);--sapphire-global-color-blue-800: hsl(203, 100%, 19%);--sapphire-global-color-blue-750: hsl(202, 100%, 22%);--sapphire-global-color-blue-700: hsl(203, 100%, 25%);--sapphire-global-color-blue-650: hsl(203, 100%, 29%);--sapphire-global-color-blue-600: hsl(203, 100%, 32%);--sapphire-global-color-blue-550: hsl(203, 100%, 35%);--sapphire-global-color-blue-500: hsl(203, 100%, 39%);--sapphire-global-color-blue-450: hsl(203, 90%, 44%);--sapphire-global-color-blue-400: hsl(203, 80%, 50%);--sapphire-global-color-blue-350: hsl(203, 75%, 57%);--sapphire-global-color-blue-300: hsl(203, 70%, 65%);--sapphire-global-color-blue-250: hsl(203, 64%, 72%);--sapphire-global-color-blue-200: hsl(203, 65%, 79%);--sapphire-global-color-blue-150: hsl(203, 64%, 86%);--sapphire-global-color-blue-125: hsl(204, 65%, 90%);--sapphire-global-color-blue-100: hsl(203, 64%, 94%);--sapphire-global-color-blue-75: hsl(206, 67%, 95%);--sapphire-global-color-blue-50: hsl(202, 65%, 97%);--sapphire-global-color-blue-25: hsl(204, 56%, 98%);--sapphire-global-color-sapphire-900-70p: hsla(202, 100%, 11%, .7);--sapphire-global-color-sapphire-900-4p: hsla(202, 100%, 11%, .04);--sapphire-global-color-sapphire-975: hsl(202, 100%, 7%);--sapphire-global-color-sapphire-950: hsl(203, 100%, 9%);--sapphire-global-color-sapphire-925: hsl(202, 100%, 10%);--sapphire-global-color-sapphire-900: hsl(202, 100%, 11%);--sapphire-global-color-sapphire-875: hsl(201, 82%, 13%);--sapphire-global-color-sapphire-850: hsl(202, 68%, 16%);--sapphire-global-color-sapphire-800: hsl(203, 50%, 21%);--sapphire-global-color-sapphire-750: hsl(204, 41%, 25%);--sapphire-global-color-sapphire-700: hsl(204, 32%, 29%);--sapphire-global-color-sapphire-650: hsl(203, 27%, 33%);--sapphire-global-color-sapphire-600: hsl(205, 23%, 37%);--sapphire-global-color-sapphire-550: hsl(205, 19%, 41%);--sapphire-global-color-sapphire-500: hsl(205, 16%, 46%);--sapphire-global-color-sapphire-450: hsl(206, 16%, 50%);--sapphire-global-color-sapphire-400: hsl(206, 15%, 56%);--sapphire-global-color-sapphire-350: hsl(206, 16%, 61%);--sapphire-global-color-sapphire-300: hsl(209, 17%, 66%);--sapphire-global-color-sapphire-250: hsl(207, 16%, 73%);--sapphire-global-color-sapphire-200: hsl(208, 18%, 79%);--sapphire-global-color-sapphire-150: hsl(208, 18%, 86%);--sapphire-global-color-sapphire-125: hsl(210, 19%, 90%);--sapphire-global-color-sapphire-100: hsl(210, 24%, 93%);--sapphire-global-color-sapphire-75: hsl(210, 23%, 95%);--sapphire-global-color-sapphire-50: hsl(216, 29%, 97%);--sapphire-global-color-sapphire-25: hsl(220, 33%, 98%);--sapphire-global-color-neutral-transparent: hsla(0, 0%, 100%, 0);--sapphire-global-color-neutral-black: hsl(0, 0%, 0%);--sapphire-global-color-neutral-white: hsl(0, 0%, 100%);--sapphire-semantic-time-motion-quick: var(--sapphire-global-time-100);--sapphire-semantic-time-motion-default: var(--sapphire-global-time-200);--sapphire-semantic-time-motion-slow: var(--sapphire-global-time-400);--sapphire-semantic-time-motion-very-slow: var(--sapphire-global-time-1000);--sapphire-semantic-time-fade-slow: var(--sapphire-global-time-1800);--sapphire-semantic-time-fade-quick: var(--sapphire-global-time-100);--sapphire-semantic-time-fade-default: var(--sapphire-global-time-200);--sapphire-semantic-size-spacing-80: var(--sapphire-global-size-generic-160);--sapphire-semantic-size-spacing-70: var(--sapphire-global-size-generic-100);--sapphire-semantic-size-spacing-60: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-spacing-50: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-spacing-40: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-spacing-30: var(--sapphire-global-size-generic-30);--sapphire-semantic-size-spacing-25: var(--sapphire-global-size-generic-25);--sapphire-semantic-size-spacing-20: var(--sapphire-global-size-generic-20);--sapphire-semantic-size-spacing-10: var(--sapphire-global-size-generic-10);--sapphire-semantic-size-spacing-5: var(--sapphire-global-size-generic-5);--sapphire-semantic-size-line-height-md: var(--sapphire-global-size-line-height-md);--sapphire-semantic-size-line-height-sm: var(--sapphire-global-size-line-height-sm);--sapphire-semantic-size-font-control-default: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-control-md: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-control-sm: var(--sapphire-global-size-font-75);--sapphire-semantic-size-font-label-lg: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-label-md: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-label-sm: var(--sapphire-global-size-font-75);--sapphire-semantic-size-font-text-lg: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-text-md: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-text-sm: var(--sapphire-global-size-font-75);--sapphire-semantic-size-radius-xl: var(--sapphire-global-size-static-60);--sapphire-semantic-size-radius-lg: var(--sapphire-global-size-static-30);--sapphire-semantic-size-radius-md: var(--sapphire-global-size-static-20);--sapphire-semantic-size-radius-sm: var(--sapphire-global-size-static-10);--sapphire-semantic-size-radius-xs: var(--sapphire-global-size-static-5);--sapphire-semantic-size-border-lg: var(--sapphire-global-size-static-10);--sapphire-semantic-size-border-md: var(--sapphire-global-size-static-5);--sapphire-semantic-size-border-sm: var(--sapphire-global-size-static-2);--sapphire-semantic-size-icon-xl: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-icon-lg: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-icon-md: var(--sapphire-global-size-generic-50);--sapphire-semantic-size-icon-sm: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-width-control-default: var(--sapphire-global-size-generic-750);--sapphire-semantic-size-height-box-md: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-height-control-xl: var(--sapphire-global-size-generic-140);--sapphire-semantic-size-height-control-lg: var(--sapphire-global-size-generic-120);--sapphire-semantic-size-height-control-md: var(--sapphire-global-size-generic-100);--sapphire-semantic-size-height-control-sm: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-height-control-xs: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-height-control-2xs: var(--sapphire-global-size-generic-50);--sapphire-semantic-shadow-popover: var(--sapphire-global-shadow-md);--sapphire-semantic-opacity-disabled: var(--sapphire-global-opacity-40);--sapphire-semantic-opacity-50: var(--sapphire-global-opacity-50);--sapphire-semantic-font-name-display: var(--sapphire-global-font-danske-human-name);--sapphire-semantic-font-name-default: var(--sapphire-global-font-danske-text-name);--sapphire-semantic-color-content-decorative-orange-secondary-default: var(--sapphire-global-color-secondary-orange-600);--sapphire-semantic-color-content-decorative-orange-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-teal-secondary-default: var(--sapphire-global-color-secondary-teal-600);--sapphire-semantic-color-content-decorative-teal-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-forest-green-secondary-default: var(--sapphire-global-color-secondary-forest-green-600);--sapphire-semantic-color-content-decorative-forest-green-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-cobalt-secondary-default: var(--sapphire-global-color-secondary-cobalt-600);--sapphire-semantic-color-content-decorative-cobalt-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-gray-secondary-default: var(--sapphire-global-color-secondary-gray-600);--sapphire-semantic-color-content-decorative-gray-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-orchid-secondary-default: var(--sapphire-global-color-secondary-orchid-600);--sapphire-semantic-color-content-decorative-orchid-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-beige-secondary-default: var(--sapphire-global-color-secondary-beige-600);--sapphire-semantic-color-content-decorative-beige-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-gold-secondary-default: var(--sapphire-global-color-secondary-gold-600);--sapphire-semantic-color-content-decorative-gold-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-violet-secondary-default: var(--sapphire-global-color-secondary-violet-600);--sapphire-semantic-color-content-decorative-violet-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-pink-secondary-default: var(--sapphire-global-color-secondary-pink-600);--sapphire-semantic-color-content-decorative-pink-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-lime-secondary-default: var(--sapphire-global-color-secondary-lime-600);--sapphire-semantic-color-content-decorative-lime-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-indigo-secondary-default: var(--sapphire-global-color-secondary-indigo-600);--sapphire-semantic-color-content-decorative-indigo-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-electro-secondary-default: var(--sapphire-global-color-secondary-electro-600);--sapphire-semantic-color-content-decorative-electro-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-copper-secondary-default: var(--sapphire-global-color-secondary-copper-600);--sapphire-semantic-color-content-decorative-copper-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-aqua-secondary-default: var(--sapphire-global-color-secondary-aqua-600);--sapphire-semantic-color-content-decorative-aqua-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-passive-secondary-default: var(--sapphire-global-color-sapphire-550);--sapphire-semantic-color-content-passive-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-informative-secondary-default: var(--sapphire-global-color-blue-550);--sapphire-semantic-color-content-informative-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-warning-secondary-default: var(--sapphire-global-color-yellow-700);--sapphire-semantic-color-content-negative-secondary-active: var(--sapphire-global-color-red-700);--sapphire-semantic-color-content-negative-secondary-hover: var(--sapphire-global-color-red-600);--sapphire-semantic-color-content-negative-secondary-default: var(--sapphire-global-color-red-550);--sapphire-semantic-color-content-negative-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-positive-secondary-default: var(--sapphire-global-color-green-550);--sapphire-semantic-color-content-positive-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-selection-unselected-active: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-selection-unselected-hover: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-selection-unselected-default: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-selection-selected-active: var(--sapphire-global-color-blue-700);--sapphire-semantic-color-content-selection-selected-hover: var(--sapphire-global-color-blue-600);--sapphire-semantic-color-content-selection-selected-default: var(--sapphire-global-color-blue-550);--sapphire-semantic-color-content-action-tertiary-active: var(--sapphire-global-color-sapphire-975);--sapphire-semantic-color-content-action-tertiary-hover: var(--sapphire-global-color-sapphire-950);--sapphire-semantic-color-content-action-tertiary-default: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-action-secondary-active: var(--sapphire-global-color-blue-700);--sapphire-semantic-color-content-action-secondary-hover: var(--sapphire-global-color-blue-600);--sapphire-semantic-color-content-action-secondary-default: var(--sapphire-global-color-blue-550);--sapphire-semantic-color-content-action-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-default-secondary: var(--sapphire-global-color-sapphire-600);--sapphire-semantic-color-content-default-primary: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-focus-ring: var(--sapphire-global-color-blue-400);--sapphire-semantic-color-border-decorative-orange-secondary-default: var(--sapphire-global-color-secondary-orange-200);--sapphire-semantic-color-border-decorative-teal-secondary-default: var(--sapphire-global-color-secondary-teal-200);--sapphire-semantic-color-border-decorative-forest-green-secondary-default: var(--sapphire-global-color-secondary-forest-green-200);--sapphire-semantic-color-border-decorative-cobalt-secondary-default: var(--sapphire-global-color-secondary-cobalt-200);--sapphire-semantic-color-border-decorative-gray-secondary-default: var(--sapphire-global-color-secondary-gray-200);--sapphire-semantic-color-border-decorative-orchid-secondary-default: var(--sapphire-global-color-secondary-orchid-200);--sapphire-semantic-color-border-decorative-beige-secondary-default: var(--sapphire-global-color-secondary-beige-200);--sapphire-semantic-color-border-decorative-gold-secondary-default: var(--sapphire-global-color-secondary-gold-200);--sapphire-semantic-color-border-decorative-violet-secondary-default: var(--sapphire-global-color-secondary-violet-200);--sapphire-semantic-color-border-decorative-pink-secondary-default: var(--sapphire-global-color-secondary-pink-200);--sapphire-semantic-color-border-decorative-lime-secondary-default: var(--sapphire-global-color-secondary-lime-200);--sapphire-semantic-color-border-decorative-indigo-secondary-default: var(--sapphire-global-color-secondary-indigo-200);--sapphire-semantic-color-border-decorative-electro-secondary-default: var(--sapphire-global-color-secondary-electro-200);--sapphire-semantic-color-border-decorative-copper-secondary-default: var(--sapphire-global-color-secondary-copper-200);--sapphire-semantic-color-border-decorative-aqua-secondary-default: var(--sapphire-global-color-secondary-aqua-200);--sapphire-semantic-color-border-informative-secondary-default: var(--sapphire-global-color-blue-200);--sapphire-semantic-color-border-warning-secondary-default: var(--sapphire-global-color-yellow-300);--sapphire-semantic-color-border-positive-secondary-default: var(--sapphire-global-color-green-200);--sapphire-semantic-color-border-negative-secondary-default: var(--sapphire-global-color-red-200);--sapphire-semantic-color-border-field-error: var(--sapphire-global-color-red-500);--sapphire-semantic-color-border-tertiary-default: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-border-secondary-default: var(--sapphire-global-color-sapphire-150);--sapphire-semantic-color-border-primary-active: var(--sapphire-global-color-sapphire-300);--sapphire-semantic-color-border-primary-hover: var(--sapphire-global-color-sapphire-250);--sapphire-semantic-color-border-primary-default: var(--sapphire-global-color-sapphire-200);--sapphire-semantic-color-background-skeleton-default: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-backdrop: var(--sapphire-global-color-sapphire-900-70p);--sapphire-semantic-color-background-surface: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-background-control-special-secondary-default: var(--sapphire-global-color-sapphire-900-4p);--sapphire-semantic-color-background-control-special-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-background-control-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-background-field-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-background-decorative-orange-secondary-default: var(--sapphire-global-color-secondary-orange-50);--sapphire-semantic-color-background-decorative-orange-primary-default: var(--sapphire-global-color-secondary-orange-400);--sapphire-semantic-color-background-decorative-teal-secondary-default: var(--sapphire-global-color-secondary-teal-50);--sapphire-semantic-color-background-decorative-teal-primary-default: var(--sapphire-global-color-secondary-teal-500);--sapphire-semantic-color-background-decorative-forest-green-secondary-default: var(--sapphire-global-color-secondary-forest-green-50);--sapphire-semantic-color-background-decorative-forest-green-primary-default: var(--sapphire-global-color-secondary-forest-green-500);--sapphire-semantic-color-background-decorative-cobalt-secondary-default: var(--sapphire-global-color-secondary-cobalt-50);--sapphire-semantic-color-background-decorative-cobalt-primary-default: var(--sapphire-global-color-secondary-cobalt-500);--sapphire-semantic-color-background-decorative-gray-secondary-default: var(--sapphire-global-color-secondary-gray-50);--sapphire-semantic-color-background-decorative-gray-primary-default: var(--sapphire-global-color-secondary-gray-500);--sapphire-semantic-color-background-decorative-orchid-secondary-default: var(--sapphire-global-color-secondary-orchid-50);--sapphire-semantic-color-background-decorative-orchid-primary-default: var(--sapphire-global-color-secondary-orchid-500);--sapphire-semantic-color-background-decorative-beige-secondary-default: var(--sapphire-global-color-secondary-beige-50);--sapphire-semantic-color-background-decorative-beige-primary-default: var(--sapphire-global-color-secondary-beige-500);--sapphire-semantic-color-background-decorative-gold-secondary-default: var(--sapphire-global-color-secondary-gold-50);--sapphire-semantic-color-background-decorative-gold-primary-default: var(--sapphire-global-color-secondary-gold-500);--sapphire-semantic-color-background-decorative-violet-secondary-default: var(--sapphire-global-color-secondary-violet-100);--sapphire-semantic-color-background-decorative-violet-primary-default: var(--sapphire-global-color-secondary-violet-500);--sapphire-semantic-color-background-decorative-pink-secondary-default: var(--sapphire-global-color-secondary-pink-100);--sapphire-semantic-color-background-decorative-pink-primary-default: var(--sapphire-global-color-secondary-pink-500);--sapphire-semantic-color-background-decorative-lime-secondary-default: var(--sapphire-global-color-secondary-lime-100);--sapphire-semantic-color-background-decorative-lime-primary-default: var(--sapphire-global-color-secondary-lime-500);--sapphire-semantic-color-background-decorative-indigo-secondary-default: var(--sapphire-global-color-secondary-indigo-100);--sapphire-semantic-color-background-decorative-indigo-primary-default: var(--sapphire-global-color-secondary-indigo-500);--sapphire-semantic-color-background-decorative-electro-secondary-default: var(--sapphire-global-color-secondary-electro-100);--sapphire-semantic-color-background-decorative-electro-primary-default: var(--sapphire-global-color-secondary-electro-500);--sapphire-semantic-color-background-decorative-copper-secondary-default: var(--sapphire-global-color-secondary-copper-100);--sapphire-semantic-color-background-decorative-copper-primary-default: var(--sapphire-global-color-secondary-copper-500);--sapphire-semantic-color-background-decorative-aqua-secondary-default: var(--sapphire-global-color-secondary-aqua-100);--sapphire-semantic-color-background-decorative-aqua-primary-default: var(--sapphire-global-color-secondary-aqua-500);--sapphire-semantic-color-background-passive-secondary-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-passive-primary-default: var(--sapphire-global-color-sapphire-450);--sapphire-semantic-color-background-informative-secondary-default: var(--sapphire-global-color-blue-50);--sapphire-semantic-color-background-informative-primary-default: var(--sapphire-global-color-blue-500);--sapphire-semantic-color-background-warning-secondary-default: var(--sapphire-global-color-yellow-75);--sapphire-semantic-color-background-warning-primary-default: var(--sapphire-global-color-yellow-300);--sapphire-semantic-color-background-positive-secondary-default: var(--sapphire-global-color-green-50);--sapphire-semantic-color-background-positive-primary-default: var(--sapphire-global-color-green-500);--sapphire-semantic-color-background-negative-secondary-active: var(--sapphire-global-color-red-100);--sapphire-semantic-color-background-negative-secondary-hover: var(--sapphire-global-color-red-75);--sapphire-semantic-color-background-negative-secondary-default: var(--sapphire-global-color-red-50);--sapphire-semantic-color-background-negative-primary-active: var(--sapphire-global-color-red-650);--sapphire-semantic-color-background-negative-primary-hover: var(--sapphire-global-color-red-600);--sapphire-semantic-color-background-negative-primary-default: var(--sapphire-global-color-red-500);--sapphire-semantic-color-background-selection-unselected-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-selection-unselected-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-selection-unselected-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-selection-selected-active: var(--sapphire-global-color-blue-100);--sapphire-semantic-color-background-selection-selected-hover: var(--sapphire-global-color-blue-75);--sapphire-semantic-color-background-selection-selected-default: var(--sapphire-global-color-blue-50);--sapphire-semantic-color-background-action-danger-text: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-danger-ghost-default: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-tertiary-text: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-tertiary-ghost-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-tertiary-ghost-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-tertiary-ghost-default: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-tertiary-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-tertiary-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-tertiary-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-action-secondary-text: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-secondary-ghost-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-secondary-ghost-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-secondary-ghost-default: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-secondary-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-secondary-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-secondary-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-action-primary-active: var(--sapphire-global-color-blue-650);--sapphire-semantic-color-background-action-primary-hover: var(--sapphire-global-color-blue-600);--sapphire-semantic-color-background-action-primary-default: var(--sapphire-global-color-blue-500);--sapphire-semantic-size-spacing-container-horizontal-md: var(--sapphire-semantic-size-spacing-60);--sapphire-semantic-size-spacing-container-horizontal-sm: var(--sapphire-semantic-size-spacing-30);--sapphire-semantic-size-spacing-data-collection-item-horizontal-lg: var(--sapphire-semantic-size-spacing-40);--sapphire-semantic-size-spacing-data-collection-item-horizontal-md: var(--sapphire-semantic-size-spacing-30);--sapphire-semantic-size-spacing-data-collection-item-horizontal-sm: var(--sapphire-semantic-size-spacing-20);--sapphire-semantic-size-spacing-control-horizontal-lg: var(--sapphire-semantic-size-spacing-30);--sapphire-semantic-size-spacing-control-horizontal-md: var(--sapphire-semantic-size-spacing-25);--sapphire-semantic-size-spacing-control-vertical-lg: var(--sapphire-semantic-size-spacing-30);--sapphire-semantic-size-spacing-control-vertical-md: var(--sapphire-semantic-size-spacing-25);--sapphire-semantic-size-spacing-control-vertical-sm: var(--sapphire-semantic-size-spacing-10);--sapphire-semantic-size-radius-popover: var(--sapphire-semantic-size-radius-md);--sapphire-semantic-size-focus-ring: var(--sapphire-semantic-size-border-md);--sapphire-semantic-size-height-box-lg: var(--sapphire-semantic-size-height-control-2xs);--sapphire-semantic-size-height-input-md: var(--sapphire-semantic-size-height-control-md);--sapphire-semantic-size-height-input-lg: var(--sapphire-semantic-size-height-control-lg);--sapphire-semantic-color-cursor-default: var(--sapphire-semantic-color-background-action-primary-default);--sapphire-semantic-color-content-warning-primary-default: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-link-secondary-active: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-link-secondary-hover: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-link-secondary-default: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-link-primary-active: var(--sapphire-semantic-color-content-action-secondary-active);--sapphire-semantic-color-content-link-primary-hover: var(--sapphire-semantic-color-content-action-secondary-hover);--sapphire-semantic-color-content-link-primary-default: var(--sapphire-semantic-color-content-action-secondary-default);--sapphire-semantic-color-content-action-danger-active: var(--sapphire-semantic-color-content-negative-secondary-active);--sapphire-semantic-color-content-action-danger-hover: var(--sapphire-semantic-color-content-negative-secondary-hover);--sapphire-semantic-color-content-action-danger-default: var(--sapphire-semantic-color-content-negative-secondary-default);--sapphire-semantic-color-border-passive-secondary-default: var(--sapphire-semantic-color-border-primary-default);--sapphire-semantic-color-border-separator-default: var(--sapphire-semantic-color-border-tertiary-default);--sapphire-semantic-color-border-control-active: var(--sapphire-semantic-color-border-primary-active);--sapphire-semantic-color-border-control-hover: var(--sapphire-semantic-color-border-primary-hover);--sapphire-semantic-color-border-control-default: var(--sapphire-semantic-color-border-primary-default);--sapphire-semantic-color-background-spinner-secondary-default: var(--sapphire-semantic-color-background-action-primary-default);--sapphire-semantic-color-background-spinner-primary-default: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-background-popover-default: var(--sapphire-semantic-color-background-surface);--sapphire-semantic-color-background-action-danger-ghost-active: var(--sapphire-semantic-color-background-negative-secondary-active);--sapphire-semantic-color-background-action-danger-ghost-hover: var(--sapphire-semantic-color-background-negative-secondary-hover);--sapphire-semantic-color-background-action-danger-active: var(--sapphire-semantic-color-background-negative-secondary-active);--sapphire-semantic-color-background-action-danger-hover: var(--sapphire-semantic-color-background-negative-secondary-hover);--sapphire-semantic-color-background-action-danger-default: var(--sapphire-semantic-color-background-negative-secondary-default);--sapphire-semantic-color-border-field-default: var(--sapphire-semantic-color-border-control-default)}@media screen and (min-width: 768px){.sapphire-theme-default,:host,.sapphire-theme--secondary,:host ::ng-deep .sapphire-theme--secondary,.sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-semantic-size-width-panel-sm: var(--sapphire-global-size-generic-1120);--sapphire-semantic-size-width-panel-lg: var(--sapphire-global-size-generic-1600)}}@media (prefers-reduced-motion){.sapphire-theme-default,:host,.sapphire-theme--secondary,:host ::ng-deep .sapphire-theme--secondary,.sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-semantic-time-motion-very-slow: var(--sapphire-global-time-2000);--sapphire-semantic-time-motion-slow: 0s;--sapphire-semantic-time-motion-default: 0s;--sapphire-semantic-time-motion-quick: 0s}}.sapphire-theme-default.sapphire-theme--secondary,.sapphire-theme-default .sapphire-theme--secondary,:host .sapphire-theme--secondary,:host ::ng-deep .sapphire-theme--secondary{--sapphire-semantic-color-background-action-secondary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-background-action-secondary-hover: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-secondary-active: var(--sapphire-global-color-sapphire-125);--sapphire-semantic-color-background-action-secondary-ghost-hover: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-secondary-ghost-active: var(--sapphire-global-color-sapphire-125);--sapphire-semantic-color-background-action-tertiary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-background-action-tertiary-hover: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-tertiary-active: var(--sapphire-global-color-sapphire-125);--sapphire-semantic-color-background-action-tertiary-ghost-hover: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-tertiary-ghost-active: var(--sapphire-global-color-sapphire-125);--sapphire-semantic-color-background-action-danger-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-background-action-danger-hover: var(--sapphire-global-color-red-100);--sapphire-semantic-color-background-action-danger-active: var(--sapphire-global-color-red-125);--sapphire-semantic-color-background-action-danger-ghost-hover: var(--sapphire-global-color-red-100);--sapphire-semantic-color-background-action-danger-ghost-active: var(--sapphire-global-color-red-125);--sapphire-semantic-color-background-surface: var(--sapphire-global-color-sapphire-50)}.sapphire-theme-default.sapphire-theme--contrast,.sapphire-theme-default .sapphire-theme--contrast,:host .sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-global-color-sapphire-25: hsl(202, 100%, 7%);--sapphire-global-color-sapphire-50: hsl(203, 100%, 9%);--sapphire-global-color-sapphire-75: hsl(202, 100%, 10%);--sapphire-global-color-sapphire-100: hsl(202, 100%, 11%);--sapphire-global-color-sapphire-125: hsl(201, 82%, 13%);--sapphire-global-color-sapphire-150: hsl(202, 68%, 16%);--sapphire-global-color-sapphire-200: hsl(203, 50%, 21%);--sapphire-global-color-sapphire-250: hsl(204, 41%, 25%);--sapphire-global-color-sapphire-300: hsl(204, 32%, 29%);--sapphire-global-color-sapphire-350: hsl(203, 27%, 33%);--sapphire-global-color-sapphire-400: hsl(205, 23%, 37%);--sapphire-global-color-sapphire-450: hsl(205, 19%, 41%);--sapphire-global-color-sapphire-500: hsl(205, 16%, 46%);--sapphire-global-color-sapphire-550: hsl(206, 16%, 50%);--sapphire-global-color-sapphire-600: hsl(206, 15%, 56%);--sapphire-global-color-sapphire-650: hsl(206, 16%, 61%);--sapphire-global-color-sapphire-700: hsl(209, 17%, 66%);--sapphire-global-color-sapphire-750: hsl(207, 16%, 73%);--sapphire-global-color-sapphire-800: hsl(208, 18%, 79%);--sapphire-global-color-sapphire-850: hsl(208, 18%, 86%);--sapphire-global-color-sapphire-875: hsl(210, 19%, 90%);--sapphire-global-color-sapphire-900: hsl(210, 24%, 93%);--sapphire-global-color-sapphire-925: hsl(210, 23%, 95%);--sapphire-global-color-sapphire-950: hsl(216, 29%, 97%);--sapphire-global-color-sapphire-975: hsl(220, 33%, 98%);--sapphire-global-color-sapphire-900-70p: hsla(210, 24%, 93%, .3);--sapphire-global-color-blue-25: hsl(202, 100%, 7%);--sapphire-global-color-blue-50: hsl(203, 100%, 9%);--sapphire-global-color-blue-75: hsl(203, 100%, 10%);--sapphire-global-color-blue-100: hsl(202, 100%, 11%);--sapphire-global-color-blue-125: hsl(203, 100%, 13%);--sapphire-global-color-blue-150: hsl(203, 100%, 15%);--sapphire-global-color-blue-200: hsl(203, 100%, 19%);--sapphire-global-color-blue-250: hsl(202, 100%, 22%);--sapphire-global-color-blue-300: hsl(203, 100%, 25%);--sapphire-global-color-blue-350: hsl(203, 100%, 29%);--sapphire-global-color-blue-400: hsl(203, 100%, 32%);--sapphire-global-color-blue-450: hsl(203, 100%, 35%);--sapphire-global-color-blue-500: hsl(203, 100%, 39%);--sapphire-global-color-blue-550: hsl(203, 90%, 44%);--sapphire-global-color-blue-600: hsl(203, 80%, 50%);--sapphire-global-color-blue-650: hsl(203, 75%, 57%);--sapphire-global-color-blue-700: hsl(203, 70%, 65%);--sapphire-global-color-blue-750: hsl(203, 64%, 72%);--sapphire-global-color-blue-800: hsl(203, 65%, 79%);--sapphire-global-color-blue-850: hsl(203, 64%, 86%);--sapphire-global-color-blue-875: hsl(204, 65%, 90%);--sapphire-global-color-blue-900: hsl(203, 64%, 94%);--sapphire-global-color-blue-925: hsl(206, 67%, 95%);--sapphire-global-color-blue-950: hsl(202, 65%, 97%);--sapphire-global-color-blue-975: hsl(204, 56%, 98%);--sapphire-global-color-green-25: hsl(159, 100%, 5%);--sapphire-global-color-green-50: hsl(159, 100%, 6%);--sapphire-global-color-green-75: hsl(159, 100%, 7%);--sapphire-global-color-green-100: hsl(159, 100%, 7%);--sapphire-global-color-green-125: hsl(159, 100%, 9%);--sapphire-global-color-green-150: hsl(158, 100%, 10%);--sapphire-global-color-green-200: hsl(159, 100%, 13%);--sapphire-global-color-green-250: hsl(159, 100%, 15%);--sapphire-global-color-green-300: hsl(159, 100%, 17%);--sapphire-global-color-green-350: hsl(159, 100%, 19%);--sapphire-global-color-green-400: hsl(159, 100%, 22%);--sapphire-global-color-green-450: hsl(159, 100%, 24%);--sapphire-global-color-green-500: hsl(159, 100%, 27%);--sapphire-global-color-green-550: hsl(159, 71%, 34%);--sapphire-global-color-green-600: hsl(159, 51%, 42%);--sapphire-global-color-green-650: hsl(159, 37%, 50%);--sapphire-global-color-green-700: hsl(159, 36%, 57%);--sapphire-global-color-green-750: hsl(159, 36%, 66%);--sapphire-global-color-green-800: hsl(160, 36%, 74%);--sapphire-global-color-green-850: hsl(159, 36%, 83%);--sapphire-global-color-green-875: hsl(159, 37%, 88%);--sapphire-global-color-green-900: hsl(159, 35%, 92%);--sapphire-global-color-green-925: hsl(162, 33%, 94%);--sapphire-global-color-green-950: hsl(158, 40%, 96%);--sapphire-global-color-green-975: hsl(150, 40%, 98%);--sapphire-global-color-red-25: hsl(0, 33%, 10%);--sapphire-global-color-red-50: hsl(355, 38%, 12%);--sapphire-global-color-red-75: hsl(356, 41%, 14%);--sapphire-global-color-red-100: hsl(355, 43%, 15%);--sapphire-global-color-red-125: hsl(354, 44%, 18%);--sapphire-global-color-red-150: hsl(353, 48%, 21%);--sapphire-global-color-red-200: hsl(353, 50%, 26%);--sapphire-global-color-red-250: hsl(351, 54%, 31%);--sapphire-global-color-red-300: hsl(351, 55%, 35%);--sapphire-global-color-red-350: hsl(350, 57%, 39%);--sapphire-global-color-red-400: hsl(349, 60%, 44%);--sapphire-global-color-red-450: hsl(349, 61%, 48%);--sapphire-global-color-red-500: hsl(348, 72%, 53%);--sapphire-global-color-red-550: hsl(351, 73%, 59%);--sapphire-global-color-red-600: hsl(353, 75%, 65%);--sapphire-global-color-red-650: hsl(355, 79%, 71%);--sapphire-global-color-red-700: hsl(356, 82%, 76%);--sapphire-global-color-red-750: hsl(357, 88%, 81%);--sapphire-global-color-red-800: hsl(358, 92%, 86%);--sapphire-global-color-red-850: hsl(359, 100%, 91%);--sapphire-global-color-red-875: hsl(358, 100%, 94%);--sapphire-global-color-red-900: hsl(357, 100%, 96%);--sapphire-global-color-red-925: hsl(356, 100%, 97%);--sapphire-global-color-red-950: hsl(355, 100%, 98%);--sapphire-global-color-red-975: hsl(0, 100%, 99%);--sapphire-global-color-secondary-aqua-50: hsl(192, 82%, 34%);--sapphire-global-color-secondary-aqua-100: hsl(192, 66%, 42%);--sapphire-global-color-secondary-aqua-150: hsl(192, 48%, 54%);--sapphire-global-color-secondary-aqua-200: hsl(192, 49%, 67%);--sapphire-global-color-secondary-aqua-300: hsl(191, 55%, 79%);--sapphire-global-color-secondary-aqua-400: hsl(192, 56%, 86%);--sapphire-global-color-secondary-aqua-500: hsl(190, 57%, 92%);--sapphire-global-color-secondary-aqua-600: hsl(190, 60%, 96%);--sapphire-global-color-secondary-copper-50: hsl(16, 54%, 47%);--sapphire-global-color-secondary-copper-100: hsl(16, 57%, 55%);--sapphire-global-color-secondary-copper-150: hsl(16, 56%, 65%);--sapphire-global-color-secondary-copper-200: hsl(16, 57%, 75%);--sapphire-global-color-secondary-copper-300: hsl(15, 56%, 85%);--sapphire-global-color-secondary-copper-400: hsl(16, 56%, 89%);--sapphire-global-color-secondary-copper-500: hsl(15, 57%, 95%);--sapphire-global-color-secondary-copper-600: hsl(17, 54%, 97%);--sapphire-global-color-secondary-electro-50: hsl(206, 32%, 46%);--sapphire-global-color-secondary-electro-100: hsl(206, 31%, 54%);--sapphire-global-color-secondary-electro-150: hsl(206, 31%, 63%);--sapphire-global-color-secondary-electro-200: hsl(206, 32%, 73%);--sapphire-global-color-secondary-electro-300: hsl(207, 38%, 84%);--sapphire-global-color-secondary-electro-400: hsl(207, 39%, 89%);--sapphire-global-color-secondary-electro-500: hsl(206, 44%, 94%);--sapphire-global-color-secondary-electro-600: hsl(204, 33%, 97%);--sapphire-global-color-secondary-indigo-50: hsl(224, 81%, 59%);--sapphire-global-color-secondary-indigo-100: hsl(224, 100%, 66%);--sapphire-global-color-secondary-indigo-150: hsl(224, 100%, 74%);--sapphire-global-color-secondary-indigo-200: hsl(223, 100%, 81%);--sapphire-global-color-secondary-indigo-300: hsl(224, 100%, 88%);--sapphire-global-color-secondary-indigo-400: hsl(225, 100%, 92%);--sapphire-global-color-secondary-indigo-500: hsl(224, 100%, 96%);--sapphire-global-color-secondary-indigo-600: hsl(224, 100%, 98%);--sapphire-global-color-secondary-lime-50: hsl(76, 100%, 25%);--sapphire-global-color-secondary-lime-100: hsl(74, 100%, 29%);--sapphire-global-color-secondary-lime-150: hsl(73, 52%, 44%);--sapphire-global-color-secondary-lime-200: hsl(74, 42%, 59%);--sapphire-global-color-secondary-lime-300: hsl(74, 46%, 74%);--sapphire-global-color-secondary-lime-400: hsl(74, 52%, 81%);--sapphire-global-color-secondary-lime-500: hsl(74, 61%, 89%);--sapphire-global-color-secondary-lime-600: hsl(73, 66%, 94%);--sapphire-global-color-secondary-pink-50: hsl(333, 53%, 52%);--sapphire-global-color-secondary-pink-100: hsl(333, 65%, 61%);--sapphire-global-color-secondary-pink-150: hsl(333, 66%, 69%);--sapphire-global-color-secondary-pink-200: hsl(333, 67%, 78%);--sapphire-global-color-secondary-pink-300: hsl(332, 69%, 86%);--sapphire-global-color-secondary-pink-400: hsl(333, 70%, 91%);--sapphire-global-color-secondary-pink-500: hsl(330, 62%, 95%);--sapphire-global-color-secondary-pink-600: hsl(330, 71%, 97%);--sapphire-global-color-secondary-violet-50: hsl(245, 60%, 63%);--sapphire-global-color-secondary-violet-100: hsl(245, 75%, 70%);--sapphire-global-color-secondary-violet-150: hsl(245, 74%, 76%);--sapphire-global-color-secondary-violet-200: hsl(246, 75%, 83%);--sapphire-global-color-secondary-violet-300: hsl(248, 74%, 89%);--sapphire-global-color-secondary-violet-400: hsl(246, 74%, 93%);--sapphire-global-color-secondary-violet-500: hsl(244, 70%, 96%);--sapphire-global-color-secondary-violet-600: hsl(248, 80%, 98%);--sapphire-semantic-color-background-field-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-control-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-control-special-primary-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-control-special-secondary-default: var(--sapphire-global-color-sapphire-200);--sapphire-semantic-color-background-surface: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-popover-default: var(--sapphire-global-color-sapphire-25);--sapphire-semantic-color-content-default-primary: var(--sapphire-global-color-neutral-white)}::ng-deep .cdk-overlay-container,::ng-deep .cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}::ng-deep .cdk-overlay-container{position:fixed;z-index:1000}::ng-deep .cdk-overlay-container:empty{display:none}::ng-deep .cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}::ng-deep .cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}::ng-deep .cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}::ng-deep .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active ::ng-deep .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}::ng-deep .cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}::ng-deep .cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}::ng-deep .cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}::ng-deep .cdk-overlay-backdrop-noop-animation{transition:none}::ng-deep .cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}::ng-deep .cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}::ng-deep .cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] ::ng-deep .cdk-visually-hidden{left:auto;right:0}\n"] }]
|
|
5799
|
+
}] });
|
|
5800
|
+
/**
|
|
5801
|
+
* Sapphire default theme
|
|
5802
|
+
*/
|
|
5803
|
+
class ThemeDefaultDark {
|
|
5804
|
+
}
|
|
5805
|
+
ThemeDefaultDark.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ThemeDefaultDark, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5806
|
+
ThemeDefaultDark.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ThemeDefaultDark, isStandalone: true, selector: "sp-theme-default-dark", hostDirectives: [{ directive: ThemeBaseDirective }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["@keyframes backdrop-fade-in{0%{background-color:transparent}to{background-color:var(--sapphire-semantic-color-background-backdrop)}}@keyframes backdrop-fade-out{0%{background-color:var(--sapphire-semantic-color-background-backdrop)}to{background-color:transparent}}.sapphire-backdrop,:host.sapphire-backdrop{width:100%;height:100%;display:flex;justify-content:center;align-items:center;animation-name:backdrop-fade-in;animation-duration:var(--sapphire-semantic-time-fade-default);animation-timing-function:ease-in-out;animation-fill-mode:forwards}.sapphire-backdrop--exiting,:host.sapphire-backdrop--exiting{animation-name:backdrop-fade-out}.sapphire-theme-default-dark,:host,.sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-semantic-size-breakpoint-xl: 1400px;--sapphire-semantic-size-breakpoint-l: 1200px;--sapphire-semantic-size-breakpoint-m: 960px;--sapphire-semantic-size-breakpoint-s: 768px;--sapphire-semantic-size-breakpoint-xs: 576px;--sapphire-semantic-size-width-panel-lg: 100%;--sapphire-semantic-size-width-panel-sm: 100%;--sapphire-semantic-font-weight-display-bold: 700;--sapphire-semantic-font-weight-display-regular: 400;--sapphire-semantic-font-weight-default-bold: 700;--sapphire-semantic-font-weight-default-semibold: 600;--sapphire-semantic-font-weight-default-regular: 400;--sapphire-global-time-2000: 2s;--sapphire-global-time-1800: 1.8s;--sapphire-global-time-1000: 1s;--sapphire-global-time-400: .4s;--sapphire-global-time-200: .2s;--sapphire-global-time-100: .1s;--sapphire-global-size-ratio-height: .875;--sapphire-global-size-line-height-md: 1.5;--sapphire-global-size-line-height-sm: 1.2;--sapphire-global-size-font-300: 3rem;--sapphire-global-size-font-220: 2.1875rem;--sapphire-global-size-font-188: 1.875rem;--sapphire-global-size-font-150: 1.5rem;--sapphire-global-size-font-130: 1.3125rem;--sapphire-global-size-font-112: 1.125rem;--sapphire-global-size-font-106: 1.0625rem;--sapphire-global-size-font-100: 1rem;--sapphire-global-size-font-88: .875rem;--sapphire-global-size-font-75: .75rem;--sapphire-global-size-font-60: .625rem;--sapphire-global-size-generic-4320: 108rem;--sapphire-global-size-generic-3780: 94.5rem;--sapphire-global-size-generic-3600: 90rem;--sapphire-global-size-generic-3200: 80rem;--sapphire-global-size-generic-2560: 64rem;--sapphire-global-size-generic-2400: 60rem;--sapphire-global-size-generic-1920: 48rem;--sapphire-global-size-generic-1600: 40rem;--sapphire-global-size-generic-1400: 35rem;--sapphire-global-size-generic-1280: 32rem;--sapphire-global-size-generic-1200: 30rem;--sapphire-global-size-generic-1120: 28rem;--sapphire-global-size-generic-1000: 25rem;--sapphire-global-size-generic-960: 24rem;--sapphire-global-size-generic-940: 23.5rem;--sapphire-global-size-generic-900: 22.5rem;--sapphire-global-size-generic-800: 20rem;--sapphire-global-size-generic-750: 18.75rem;--sapphire-global-size-generic-640: 16rem;--sapphire-global-size-generic-600: 15rem;--sapphire-global-size-generic-560: 14rem;--sapphire-global-size-generic-480: 12rem;--sapphire-global-size-generic-400: 10rem;--sapphire-global-size-generic-340: 8.5rem;--sapphire-global-size-generic-320: 8rem;--sapphire-global-size-generic-300: 7.5rem;--sapphire-global-size-generic-280: 7rem;--sapphire-global-size-generic-240: 6rem;--sapphire-global-size-generic-200: 5rem;--sapphire-global-size-generic-180: 4.5rem;--sapphire-global-size-generic-160: 4rem;--sapphire-global-size-generic-140: 3.5rem;--sapphire-global-size-generic-120: 3rem;--sapphire-global-size-generic-100: 2.5rem;--sapphire-global-size-generic-80: 2rem;--sapphire-global-size-generic-60: 1.5rem;--sapphire-global-size-generic-50: 1.25rem;--sapphire-global-size-generic-40: 1rem;--sapphire-global-size-generic-35: .875rem;--sapphire-global-size-generic-30: .75rem;--sapphire-global-size-generic-25: .625rem;--sapphire-global-size-generic-20: .5rem;--sapphire-global-size-generic-15: .375rem;--sapphire-global-size-generic-10: .25rem;--sapphire-global-size-generic-5: .125rem;--sapphire-global-size-generic-2: .0625rem;--sapphire-global-size-generic-0: 0rem;--sapphire-global-size-static-60: 24px;--sapphire-global-size-static-30: 12px;--sapphire-global-size-static-20: 8px;--sapphire-global-size-static-10: 4px;--sapphire-global-size-static-5: 2px;--sapphire-global-size-static-2: 1px;--sapphire-global-size-static-0: 0px;--sapphire-global-shadow-lg: 0px 0px 2px 0px rgba(34, 64, 82, .02), 0px -1.5px 6px 0px rgba(34, 64, 82, .03), 0px 4.5px 12px 0px rgba(34, 64, 82, .04), 0px 14.5px 18px 0px rgba(34, 64, 82, .04), 0px 26px 34px 0px rgba(34, 64, 82, .05), 0px 84px 92px 0px rgba(34, 64, 82, .07), 0px 0px 2px 0px rgba(34, 64, 82, .05), 0px 0px 1px 0px rgba(34, 64, 82, .2);--sapphire-global-shadow-md: 0px 0px 3px 0px rgba(34, 64, 82, .02), 0px 3px 7px 0px rgba(34, 64, 82, .03), 0px 6.5px 14px 0px rgba(34, 64, 82, .04), 0px 13px 29px 0px rgba(34, 64, 82, .05), 0px 36px 80px 0px rgba(34, 64, 82, .07), 0px 0px 2px 0px rgba(34, 64, 82, .05), 0px 0px 1px 0px rgba(34, 64, 82, .2);--sapphire-global-shadow-sm: 0px 0px 2px 0px rgba(34, 64, 82, .06), 0px 1.5px 4px 0px rgba(34, 64, 82, .04), 0px 4.5px 6px 0px rgba(34, 64, 82, .04), 0px 10.5px 12px 0px rgba(34, 64, 82, .03), 0px 25px 24px 0px rgba(34, 64, 82, .02), 0px 100px 64px 0px rgba(34, 64, 82, .02), 0px 0px 2px 0px rgba(34, 64, 82, .05), 0px 0px 1px 0px rgba(34, 64, 82, .2);--sapphire-global-opacity-50: .5;--sapphire-global-opacity-40: .4;--sapphire-global-opacity-35: .35;--sapphire-global-font-danske-human-name: \"Danske Human\";--sapphire-global-font-danske-text-name: \"Danske Text v2\";--sapphire-global-color-secondary-orange-600: hsl(19, 100%, 34%);--sapphire-global-color-secondary-orange-500: hsl(17, 100%, 43%);--sapphire-global-color-secondary-orange-400: hsl(19, 84%, 54%);--sapphire-global-color-secondary-orange-300: hsl(21, 84%, 66%);--sapphire-global-color-secondary-orange-200: hsl(23, 83%, 79%);--sapphire-global-color-secondary-orange-150: hsl(25, 84%, 86%);--sapphire-global-color-secondary-orange-100: hsl(26, 89%, 93%);--sapphire-global-color-secondary-orange-75: hsl(27, 85%, 95%);--sapphire-global-color-secondary-orange-50: hsl(28, 89%, 96%);--sapphire-global-color-secondary-teal-600: hsl(171, 100%, 22%);--sapphire-global-color-secondary-teal-500: hsl(171, 100%, 26%);--sapphire-global-color-secondary-teal-400: hsl(172, 50%, 42%);--sapphire-global-color-secondary-teal-300: hsl(172, 36%, 57%);--sapphire-global-color-secondary-teal-200: hsl(171, 36%, 74%);--sapphire-global-color-secondary-teal-150: hsl(171, 36%, 82%);--sapphire-global-color-secondary-teal-100: hsl(172, 35%, 92%);--sapphire-global-color-secondary-teal-75: hsl(170, 38%, 94%);--sapphire-global-color-secondary-teal-50: hsl(171, 33%, 96%);--sapphire-global-color-secondary-forest-green-600: hsl(105, 93%, 23%);--sapphire-global-color-secondary-forest-green-500: hsl(105, 93%, 28%);--sapphire-global-color-secondary-forest-green-400: hsl(105, 48%, 43%);--sapphire-global-color-secondary-forest-green-300: hsl(105, 36%, 58%);--sapphire-global-color-secondary-forest-green-200: hsl(105, 36%, 74%);--sapphire-global-color-secondary-forest-green-150: hsl(105, 36%, 82%);--sapphire-global-color-secondary-forest-green-100: hsl(104, 35%, 92%);--sapphire-global-color-secondary-forest-green-75: hsl(109, 35%, 94%);--sapphire-global-color-secondary-forest-green-50: hsl(111, 33%, 96%);--sapphire-global-color-secondary-cobalt-600: hsl(215, 87%, 42%);--sapphire-global-color-secondary-cobalt-500: hsl(215, 92%, 51%);--sapphire-global-color-secondary-cobalt-400: hsl(215, 92%, 62%);--sapphire-global-color-secondary-cobalt-300: hsl(215, 92%, 72%);--sapphire-global-color-secondary-cobalt-200: hsl(215, 91%, 83%);--sapphire-global-color-secondary-cobalt-150: hsl(216, 93%, 89%);--sapphire-global-color-secondary-cobalt-100: hsl(216, 93%, 95%);--sapphire-global-color-secondary-cobalt-75: hsl(215, 90%, 96%);--sapphire-global-color-secondary-cobalt-50: hsl(215, 86%, 97%);--sapphire-global-color-secondary-gray-600: hsl(202, 6%, 38%);--sapphire-global-color-secondary-gray-500: hsl(201, 6%, 46%);--sapphire-global-color-secondary-gray-400: hsl(200, 5%, 56%);--sapphire-global-color-secondary-gray-300: hsl(203, 5%, 67%);--sapphire-global-color-secondary-gray-200: hsl(200, 6%, 79%);--sapphire-global-color-secondary-gray-150: hsl(195, 6%, 86%);--sapphire-global-color-secondary-gray-100: hsl(210, 6%, 93%);--sapphire-global-color-secondary-gray-75: hsl(240, 4%, 95%);--sapphire-global-color-secondary-gray-50: hsl(180, 6%, 97%);--sapphire-global-color-secondary-orchid-600: hsl(304, 36%, 42%);--sapphire-global-color-secondary-orchid-500: hsl(304, 37%, 51%);--sapphire-global-color-secondary-orchid-400: hsl(304, 37%, 61%);--sapphire-global-color-secondary-orchid-300: hsl(303, 37%, 71%);--sapphire-global-color-secondary-orchid-200: hsl(304, 37%, 82%);--sapphire-global-color-secondary-orchid-150: hsl(305, 38%, 88%);--sapphire-global-color-secondary-orchid-100: hsl(305, 38%, 94%);--sapphire-global-color-secondary-orchid-75: hsl(300, 36%, 96%);--sapphire-global-color-secondary-orchid-50: hsl(300, 33%, 97%);--sapphire-global-color-secondary-beige-600: hsl(38, 20%, 35%);--sapphire-global-color-secondary-beige-500: hsl(40, 20%, 43%);--sapphire-global-color-secondary-beige-400: hsl(38, 15%, 54%);--sapphire-global-color-secondary-beige-300: hsl(39, 16%, 65%);--sapphire-global-color-secondary-beige-200: hsl(41, 14%, 78%);--sapphire-global-color-secondary-beige-150: hsl(40, 16%, 85%);--sapphire-global-color-secondary-beige-100: hsl(40, 17%, 93%);--sapphire-global-color-secondary-beige-75: hsl(30, 15%, 95%);--sapphire-global-color-secondary-beige-50: hsl(30, 11%, 96%);--sapphire-global-color-secondary-gold-600: hsl(42, 97%, 25%);--sapphire-global-color-secondary-gold-500: hsl(42, 96%, 31%);--sapphire-global-color-secondary-gold-400: hsl(42, 54%, 45%);--sapphire-global-color-secondary-gold-300: hsl(42, 44%, 59%);--sapphire-global-color-secondary-gold-200: hsl(42, 44%, 74%);--sapphire-global-color-secondary-gold-150: hsl(43, 43%, 83%);--sapphire-global-color-secondary-gold-100: hsl(43, 43%, 92%);--sapphire-global-color-secondary-gold-75: hsl(42, 42%, 94%);--sapphire-global-color-secondary-gold-50: hsl(40, 43%, 96%);--sapphire-global-color-secondary-violet-600: hsl(248, 80%, 98%);--sapphire-global-color-secondary-violet-500: hsl(244, 70%, 96%);--sapphire-global-color-secondary-violet-400: hsl(246, 74%, 93%);--sapphire-global-color-secondary-violet-300: hsl(248, 74%, 89%);--sapphire-global-color-secondary-violet-200: hsl(246, 75%, 83%);--sapphire-global-color-secondary-violet-150: hsl(245, 74%, 76%);--sapphire-global-color-secondary-violet-100: hsl(245, 75%, 70%);--sapphire-global-color-secondary-violet-75: hsl(245, 65%, 97%);--sapphire-global-color-secondary-violet-50: hsl(245, 60%, 63%);--sapphire-global-color-secondary-purple-600: hsl(270, 28%, 45%);--sapphire-global-color-secondary-purple-500: hsl(270, 33%, 55%);--sapphire-global-color-secondary-purple-400: hsl(270, 33%, 64%);--sapphire-global-color-secondary-purple-300: hsl(270, 33%, 73%);--sapphire-global-color-secondary-purple-200: hsl(269, 33%, 83%);--sapphire-global-color-secondary-purple-150: hsl(272, 32%, 88%);--sapphire-global-color-secondary-purple-100: hsl(270, 36%, 95%);--sapphire-global-color-secondary-purple-75: hsl(274, 33%, 96%);--sapphire-global-color-secondary-purple-50: hsl(270, 29%, 97%);--sapphire-global-color-secondary-pink-600: hsl(330, 71%, 97%);--sapphire-global-color-secondary-pink-500: hsl(330, 62%, 95%);--sapphire-global-color-secondary-pink-400: hsl(333, 70%, 91%);--sapphire-global-color-secondary-pink-300: hsl(332, 69%, 86%);--sapphire-global-color-secondary-pink-200: hsl(333, 67%, 78%);--sapphire-global-color-secondary-pink-150: hsl(333, 66%, 69%);--sapphire-global-color-secondary-pink-100: hsl(333, 65%, 61%);--sapphire-global-color-secondary-pink-75: hsl(330, 50%, 96%);--sapphire-global-color-secondary-pink-50: hsl(333, 53%, 52%);--sapphire-global-color-secondary-lime-600: hsl(73, 66%, 94%);--sapphire-global-color-secondary-lime-500: hsl(74, 61%, 89%);--sapphire-global-color-secondary-lime-400: hsl(74, 52%, 81%);--sapphire-global-color-secondary-lime-300: hsl(74, 46%, 74%);--sapphire-global-color-secondary-lime-200: hsl(74, 42%, 59%);--sapphire-global-color-secondary-lime-150: hsl(73, 52%, 44%);--sapphire-global-color-secondary-lime-100: hsl(74, 100%, 29%);--sapphire-global-color-secondary-lime-75: hsl(66, 29%, 93%);--sapphire-global-color-secondary-lime-50: hsl(76, 100%, 25%);--sapphire-global-color-secondary-indigo-600: hsl(224, 100%, 98%);--sapphire-global-color-secondary-indigo-500: hsl(224, 100%, 96%);--sapphire-global-color-secondary-indigo-400: hsl(225, 100%, 92%);--sapphire-global-color-secondary-indigo-300: hsl(224, 100%, 88%);--sapphire-global-color-secondary-indigo-200: hsl(223, 100%, 81%);--sapphire-global-color-secondary-indigo-150: hsl(224, 100%, 74%);--sapphire-global-color-secondary-indigo-100: hsl(224, 100%, 66%);--sapphire-global-color-secondary-indigo-75: hsl(229, 100%, 97%);--sapphire-global-color-secondary-indigo-50: hsl(224, 81%, 59%);--sapphire-global-color-secondary-electro-600: hsl(204, 33%, 97%);--sapphire-global-color-secondary-electro-500: hsl(206, 44%, 94%);--sapphire-global-color-secondary-electro-400: hsl(207, 39%, 89%);--sapphire-global-color-secondary-electro-300: hsl(207, 38%, 84%);--sapphire-global-color-secondary-electro-200: hsl(206, 32%, 73%);--sapphire-global-color-secondary-electro-150: hsl(206, 31%, 63%);--sapphire-global-color-secondary-electro-100: hsl(206, 31%, 54%);--sapphire-global-color-secondary-electro-75: hsl(206, 28%, 95%);--sapphire-global-color-secondary-electro-50: hsl(206, 32%, 46%);--sapphire-global-color-secondary-copper-600: hsl(17, 54%, 97%);--sapphire-global-color-secondary-copper-500: hsl(15, 57%, 95%);--sapphire-global-color-secondary-copper-400: hsl(16, 56%, 89%);--sapphire-global-color-secondary-copper-300: hsl(15, 56%, 85%);--sapphire-global-color-secondary-copper-200: hsl(16, 57%, 75%);--sapphire-global-color-secondary-copper-150: hsl(16, 56%, 65%);--sapphire-global-color-secondary-copper-100: hsl(16, 57%, 55%);--sapphire-global-color-secondary-copper-75: hsl(16, 48%, 95%);--sapphire-global-color-secondary-copper-50: hsl(16, 54%, 47%);--sapphire-global-color-secondary-aqua-600: hsl(190, 60%, 96%);--sapphire-global-color-secondary-aqua-500: hsl(190, 57%, 92%);--sapphire-global-color-secondary-aqua-400: hsl(192, 56%, 86%);--sapphire-global-color-secondary-aqua-300: hsl(191, 55%, 79%);--sapphire-global-color-secondary-aqua-200: hsl(192, 49%, 67%);--sapphire-global-color-secondary-aqua-150: hsl(192, 48%, 54%);--sapphire-global-color-secondary-aqua-100: hsl(192, 66%, 42%);--sapphire-global-color-secondary-aqua-75: hsl(193, 47%, 94%);--sapphire-global-color-secondary-aqua-50: hsl(192, 82%, 34%);--sapphire-global-color-yellow-975: hsl(20, 95%, 8%);--sapphire-global-color-yellow-950: hsl(19, 89%, 11%);--sapphire-global-color-yellow-925: hsl(21, 87%, 15%);--sapphire-global-color-yellow-900: hsl(21, 88%, 19%);--sapphire-global-color-yellow-875: hsl(21, 86%, 23%);--sapphire-global-color-yellow-850: hsl(22, 85%, 27%);--sapphire-global-color-yellow-800: hsl(22, 88%, 29%);--sapphire-global-color-yellow-750: hsl(24, 89%, 33%);--sapphire-global-color-yellow-700: hsl(25, 93%, 37%);--sapphire-global-color-yellow-650: hsl(28, 94%, 41%);--sapphire-global-color-yellow-600: hsl(31, 93%, 44%);--sapphire-global-color-yellow-550: hsl(34, 94%, 48%);--sapphire-global-color-yellow-500: hsl(37, 95%, 52%);--sapphire-global-color-yellow-450: hsl(40, 95%, 54%);--sapphire-global-color-yellow-400: hsl(43, 98%, 55%);--sapphire-global-color-yellow-350: hsl(44, 98%, 60%);--sapphire-global-color-yellow-300: hsl(46, 98%, 64%);--sapphire-global-color-yellow-250: hsl(47, 97%, 70%);--sapphire-global-color-yellow-200: hsl(48, 98%, 76%);--sapphire-global-color-yellow-150: hsl(48, 98%, 79%);--sapphire-global-color-yellow-125: hsl(49, 97%, 85%);--sapphire-global-color-yellow-100: hsl(48, 100%, 89%);--sapphire-global-color-yellow-75: hsl(49, 100%, 92%);--sapphire-global-color-yellow-50: hsl(51, 100%, 96%);--sapphire-global-color-yellow-25: hsl(54, 100%, 98%);--sapphire-global-color-red-975: hsl(0, 100%, 99%);--sapphire-global-color-red-950: hsl(355, 100%, 98%);--sapphire-global-color-red-925: hsl(356, 100%, 97%);--sapphire-global-color-red-900: hsl(357, 100%, 96%);--sapphire-global-color-red-875: hsl(358, 100%, 94%);--sapphire-global-color-red-850: hsl(359, 100%, 91%);--sapphire-global-color-red-800: hsl(358, 92%, 86%);--sapphire-global-color-red-750: hsl(357, 88%, 81%);--sapphire-global-color-red-700: hsl(356, 82%, 76%);--sapphire-global-color-red-650: hsl(355, 79%, 71%);--sapphire-global-color-red-600: hsl(353, 75%, 65%);--sapphire-global-color-red-550: hsl(351, 73%, 59%);--sapphire-global-color-red-500: hsl(348, 72%, 53%);--sapphire-global-color-red-450: hsl(349, 61%, 48%);--sapphire-global-color-red-400: hsl(349, 60%, 44%);--sapphire-global-color-red-350: hsl(350, 57%, 39%);--sapphire-global-color-red-300: hsl(351, 55%, 35%);--sapphire-global-color-red-250: hsl(351, 54%, 31%);--sapphire-global-color-red-200: hsl(353, 50%, 26%);--sapphire-global-color-red-150: hsl(353, 48%, 21%);--sapphire-global-color-red-125: hsl(354, 44%, 18%);--sapphire-global-color-red-100: hsl(355, 43%, 15%);--sapphire-global-color-red-75: hsl(356, 41%, 14%);--sapphire-global-color-red-50: hsl(355, 38%, 12%);--sapphire-global-color-red-25: hsl(0, 33%, 10%);--sapphire-global-color-green-975: hsl(150, 40%, 98%);--sapphire-global-color-green-950: hsl(158, 40%, 96%);--sapphire-global-color-green-925: hsl(162, 33%, 94%);--sapphire-global-color-green-900: hsl(159, 35%, 92%);--sapphire-global-color-green-875: hsl(159, 37%, 88%);--sapphire-global-color-green-850: hsl(159, 36%, 83%);--sapphire-global-color-green-800: hsl(160, 36%, 74%);--sapphire-global-color-green-750: hsl(159, 36%, 66%);--sapphire-global-color-green-700: hsl(159, 36%, 57%);--sapphire-global-color-green-650: hsl(159, 37%, 50%);--sapphire-global-color-green-600: hsl(159, 51%, 42%);--sapphire-global-color-green-550: hsl(159, 71%, 34%);--sapphire-global-color-green-500: hsl(159, 100%, 27%);--sapphire-global-color-green-450: hsl(159, 100%, 24%);--sapphire-global-color-green-400: hsl(159, 100%, 22%);--sapphire-global-color-green-350: hsl(159, 100%, 19%);--sapphire-global-color-green-300: hsl(159, 100%, 17%);--sapphire-global-color-green-250: hsl(159, 100%, 15%);--sapphire-global-color-green-200: hsl(159, 100%, 13%);--sapphire-global-color-green-150: hsl(158, 100%, 10%);--sapphire-global-color-green-125: hsl(159, 100%, 9%);--sapphire-global-color-green-100: hsl(159, 100%, 7%);--sapphire-global-color-green-75: hsl(159, 100%, 7%);--sapphire-global-color-green-50: hsl(159, 100%, 6%);--sapphire-global-color-green-25: hsl(159, 100%, 5%);--sapphire-global-color-blue-975: hsl(204, 56%, 98%);--sapphire-global-color-blue-950: hsl(202, 65%, 97%);--sapphire-global-color-blue-925: hsl(206, 67%, 95%);--sapphire-global-color-blue-900: hsl(203, 64%, 94%);--sapphire-global-color-blue-875: hsl(204, 65%, 90%);--sapphire-global-color-blue-850: hsl(203, 64%, 86%);--sapphire-global-color-blue-800: hsl(203, 65%, 79%);--sapphire-global-color-blue-750: hsl(203, 64%, 72%);--sapphire-global-color-blue-700: hsl(203, 70%, 65%);--sapphire-global-color-blue-650: hsl(203, 75%, 57%);--sapphire-global-color-blue-600: hsl(203, 80%, 50%);--sapphire-global-color-blue-550: hsl(203, 90%, 44%);--sapphire-global-color-blue-500: hsl(203, 100%, 39%);--sapphire-global-color-blue-450: hsl(203, 100%, 35%);--sapphire-global-color-blue-400: hsl(203, 100%, 32%);--sapphire-global-color-blue-350: hsl(203, 100%, 29%);--sapphire-global-color-blue-300: hsl(203, 100%, 25%);--sapphire-global-color-blue-250: hsl(202, 100%, 22%);--sapphire-global-color-blue-200: hsl(203, 100%, 19%);--sapphire-global-color-blue-150: hsl(203, 100%, 15%);--sapphire-global-color-blue-125: hsl(203, 100%, 13%);--sapphire-global-color-blue-100: hsl(202, 100%, 11%);--sapphire-global-color-blue-75: hsl(203, 100%, 10%);--sapphire-global-color-blue-50: hsl(203, 100%, 9%);--sapphire-global-color-blue-25: hsl(202, 100%, 7%);--sapphire-global-color-sapphire-900-70p: hsla(210, 24%, 93%, .3);--sapphire-global-color-sapphire-900-4p: hsla(202, 100%, 11%, .04);--sapphire-global-color-sapphire-975: hsl(220, 33%, 98%);--sapphire-global-color-sapphire-950: hsl(216, 29%, 97%);--sapphire-global-color-sapphire-925: hsl(210, 23%, 95%);--sapphire-global-color-sapphire-900: hsl(210, 24%, 93%);--sapphire-global-color-sapphire-875: hsl(210, 19%, 90%);--sapphire-global-color-sapphire-850: hsl(208, 18%, 86%);--sapphire-global-color-sapphire-800: hsl(208, 18%, 79%);--sapphire-global-color-sapphire-750: hsl(207, 16%, 73%);--sapphire-global-color-sapphire-700: hsl(209, 17%, 66%);--sapphire-global-color-sapphire-650: hsl(206, 16%, 61%);--sapphire-global-color-sapphire-600: hsl(206, 15%, 56%);--sapphire-global-color-sapphire-550: hsl(206, 16%, 50%);--sapphire-global-color-sapphire-500: hsl(205, 16%, 46%);--sapphire-global-color-sapphire-450: hsl(205, 19%, 41%);--sapphire-global-color-sapphire-400: hsl(205, 23%, 37%);--sapphire-global-color-sapphire-350: hsl(203, 27%, 33%);--sapphire-global-color-sapphire-300: hsl(204, 32%, 29%);--sapphire-global-color-sapphire-250: hsl(204, 41%, 25%);--sapphire-global-color-sapphire-200: hsl(203, 50%, 21%);--sapphire-global-color-sapphire-150: hsl(202, 68%, 16%);--sapphire-global-color-sapphire-125: hsl(201, 82%, 13%);--sapphire-global-color-sapphire-100: hsl(202, 100%, 11%);--sapphire-global-color-sapphire-75: hsl(202, 100%, 10%);--sapphire-global-color-sapphire-50: hsl(203, 100%, 9%);--sapphire-global-color-sapphire-25: hsl(202, 100%, 7%);--sapphire-global-color-neutral-transparent: hsla(0, 0%, 100%, 0);--sapphire-global-color-neutral-black: hsl(0, 0%, 0%);--sapphire-global-color-neutral-white: hsl(0, 0%, 100%);--sapphire-semantic-time-motion-quick: var(--sapphire-global-time-100);--sapphire-semantic-time-motion-default: var(--sapphire-global-time-200);--sapphire-semantic-time-motion-slow: var(--sapphire-global-time-400);--sapphire-semantic-time-motion-very-slow: var(--sapphire-global-time-1000);--sapphire-semantic-time-fade-slow: var(--sapphire-global-time-1800);--sapphire-semantic-time-fade-quick: var(--sapphire-global-time-100);--sapphire-semantic-time-fade-default: var(--sapphire-global-time-200);--sapphire-semantic-size-spacing-80: var(--sapphire-global-size-generic-160);--sapphire-semantic-size-spacing-70: var(--sapphire-global-size-generic-100);--sapphire-semantic-size-spacing-60: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-spacing-50: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-spacing-40: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-spacing-30: var(--sapphire-global-size-generic-30);--sapphire-semantic-size-spacing-25: var(--sapphire-global-size-generic-25);--sapphire-semantic-size-spacing-20: var(--sapphire-global-size-generic-20);--sapphire-semantic-size-spacing-10: var(--sapphire-global-size-generic-10);--sapphire-semantic-size-spacing-5: var(--sapphire-global-size-generic-5);--sapphire-semantic-size-line-height-md: var(--sapphire-global-size-line-height-md);--sapphire-semantic-size-line-height-sm: var(--sapphire-global-size-line-height-sm);--sapphire-semantic-size-font-control-default: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-control-md: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-control-sm: var(--sapphire-global-size-font-75);--sapphire-semantic-size-font-label-lg: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-label-md: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-label-sm: var(--sapphire-global-size-font-75);--sapphire-semantic-size-font-text-lg: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-text-md: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-text-sm: var(--sapphire-global-size-font-75);--sapphire-semantic-size-radius-xl: var(--sapphire-global-size-static-60);--sapphire-semantic-size-radius-lg: var(--sapphire-global-size-static-30);--sapphire-semantic-size-radius-md: var(--sapphire-global-size-static-20);--sapphire-semantic-size-radius-sm: var(--sapphire-global-size-static-10);--sapphire-semantic-size-radius-xs: var(--sapphire-global-size-static-5);--sapphire-semantic-size-border-lg: var(--sapphire-global-size-static-10);--sapphire-semantic-size-border-md: var(--sapphire-global-size-static-5);--sapphire-semantic-size-border-sm: var(--sapphire-global-size-static-2);--sapphire-semantic-size-icon-xl: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-icon-lg: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-icon-md: var(--sapphire-global-size-generic-50);--sapphire-semantic-size-icon-sm: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-width-control-default: var(--sapphire-global-size-generic-750);--sapphire-semantic-size-height-box-md: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-height-control-xl: var(--sapphire-global-size-generic-140);--sapphire-semantic-size-height-control-lg: var(--sapphire-global-size-generic-120);--sapphire-semantic-size-height-control-md: var(--sapphire-global-size-generic-100);--sapphire-semantic-size-height-control-sm: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-height-control-xs: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-height-control-2xs: var(--sapphire-global-size-generic-50);--sapphire-semantic-shadow-popover: var(--sapphire-global-shadow-md);--sapphire-semantic-opacity-disabled: var(--sapphire-global-opacity-40);--sapphire-semantic-opacity-50: var(--sapphire-global-opacity-50);--sapphire-semantic-font-name-display: var(--sapphire-global-font-danske-human-name);--sapphire-semantic-font-name-default: var(--sapphire-global-font-danske-text-name);--sapphire-semantic-color-content-decorative-orange-secondary-default: var(--sapphire-global-color-secondary-orange-600);--sapphire-semantic-color-content-decorative-orange-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-teal-secondary-default: var(--sapphire-global-color-secondary-teal-600);--sapphire-semantic-color-content-decorative-teal-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-forest-green-secondary-default: var(--sapphire-global-color-secondary-forest-green-600);--sapphire-semantic-color-content-decorative-forest-green-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-cobalt-secondary-default: var(--sapphire-global-color-secondary-cobalt-600);--sapphire-semantic-color-content-decorative-cobalt-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-gray-secondary-default: var(--sapphire-global-color-secondary-gray-600);--sapphire-semantic-color-content-decorative-gray-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-orchid-secondary-default: var(--sapphire-global-color-secondary-orchid-600);--sapphire-semantic-color-content-decorative-orchid-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-beige-secondary-default: var(--sapphire-global-color-secondary-beige-600);--sapphire-semantic-color-content-decorative-beige-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-gold-secondary-default: var(--sapphire-global-color-secondary-gold-600);--sapphire-semantic-color-content-decorative-gold-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-violet-secondary-default: var(--sapphire-global-color-secondary-violet-600);--sapphire-semantic-color-content-decorative-violet-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-pink-secondary-default: var(--sapphire-global-color-secondary-pink-600);--sapphire-semantic-color-content-decorative-pink-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-lime-secondary-default: var(--sapphire-global-color-secondary-lime-600);--sapphire-semantic-color-content-decorative-lime-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-indigo-secondary-default: var(--sapphire-global-color-secondary-indigo-600);--sapphire-semantic-color-content-decorative-indigo-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-electro-secondary-default: var(--sapphire-global-color-secondary-electro-600);--sapphire-semantic-color-content-decorative-electro-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-copper-secondary-default: var(--sapphire-global-color-secondary-copper-600);--sapphire-semantic-color-content-decorative-copper-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-aqua-secondary-default: var(--sapphire-global-color-secondary-aqua-600);--sapphire-semantic-color-content-decorative-aqua-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-passive-secondary-default: var(--sapphire-global-color-sapphire-550);--sapphire-semantic-color-content-passive-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-informative-secondary-default: var(--sapphire-global-color-blue-550);--sapphire-semantic-color-content-informative-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-warning-secondary-default: var(--sapphire-global-color-yellow-700);--sapphire-semantic-color-content-negative-secondary-active: var(--sapphire-global-color-red-700);--sapphire-semantic-color-content-negative-secondary-hover: var(--sapphire-global-color-red-600);--sapphire-semantic-color-content-negative-secondary-default: var(--sapphire-global-color-red-550);--sapphire-semantic-color-content-negative-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-positive-secondary-default: var(--sapphire-global-color-green-550);--sapphire-semantic-color-content-positive-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-selection-unselected-active: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-selection-unselected-hover: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-selection-unselected-default: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-selection-selected-active: var(--sapphire-global-color-blue-700);--sapphire-semantic-color-content-selection-selected-hover: var(--sapphire-global-color-blue-600);--sapphire-semantic-color-content-selection-selected-default: var(--sapphire-global-color-blue-550);--sapphire-semantic-color-content-action-tertiary-active: var(--sapphire-global-color-sapphire-975);--sapphire-semantic-color-content-action-tertiary-hover: var(--sapphire-global-color-sapphire-950);--sapphire-semantic-color-content-action-tertiary-default: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-action-secondary-active: var(--sapphire-global-color-blue-700);--sapphire-semantic-color-content-action-secondary-hover: var(--sapphire-global-color-blue-600);--sapphire-semantic-color-content-action-secondary-default: var(--sapphire-global-color-blue-550);--sapphire-semantic-color-content-action-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-default-secondary: var(--sapphire-global-color-sapphire-600);--sapphire-semantic-color-content-default-primary: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-focus-ring: var(--sapphire-global-color-blue-400);--sapphire-semantic-color-border-decorative-orange-secondary-default: var(--sapphire-global-color-secondary-orange-200);--sapphire-semantic-color-border-decorative-teal-secondary-default: var(--sapphire-global-color-secondary-teal-200);--sapphire-semantic-color-border-decorative-forest-green-secondary-default: var(--sapphire-global-color-secondary-forest-green-200);--sapphire-semantic-color-border-decorative-cobalt-secondary-default: var(--sapphire-global-color-secondary-cobalt-200);--sapphire-semantic-color-border-decorative-gray-secondary-default: var(--sapphire-global-color-secondary-gray-200);--sapphire-semantic-color-border-decorative-orchid-secondary-default: var(--sapphire-global-color-secondary-orchid-200);--sapphire-semantic-color-border-decorative-beige-secondary-default: var(--sapphire-global-color-secondary-beige-200);--sapphire-semantic-color-border-decorative-gold-secondary-default: var(--sapphire-global-color-secondary-gold-200);--sapphire-semantic-color-border-decorative-violet-secondary-default: var(--sapphire-global-color-secondary-violet-200);--sapphire-semantic-color-border-decorative-pink-secondary-default: var(--sapphire-global-color-secondary-pink-200);--sapphire-semantic-color-border-decorative-lime-secondary-default: var(--sapphire-global-color-secondary-lime-200);--sapphire-semantic-color-border-decorative-indigo-secondary-default: var(--sapphire-global-color-secondary-indigo-200);--sapphire-semantic-color-border-decorative-electro-secondary-default: var(--sapphire-global-color-secondary-electro-200);--sapphire-semantic-color-border-decorative-copper-secondary-default: var(--sapphire-global-color-secondary-copper-200);--sapphire-semantic-color-border-decorative-aqua-secondary-default: var(--sapphire-global-color-secondary-aqua-200);--sapphire-semantic-color-border-informative-secondary-default: var(--sapphire-global-color-blue-200);--sapphire-semantic-color-border-warning-secondary-default: var(--sapphire-global-color-yellow-300);--sapphire-semantic-color-border-positive-secondary-default: var(--sapphire-global-color-green-200);--sapphire-semantic-color-border-negative-secondary-default: var(--sapphire-global-color-red-200);--sapphire-semantic-color-border-field-error: var(--sapphire-global-color-red-500);--sapphire-semantic-color-border-tertiary-default: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-border-secondary-default: var(--sapphire-global-color-sapphire-150);--sapphire-semantic-color-border-primary-active: var(--sapphire-global-color-sapphire-300);--sapphire-semantic-color-border-primary-hover: var(--sapphire-global-color-sapphire-250);--sapphire-semantic-color-border-primary-default: var(--sapphire-global-color-sapphire-200);--sapphire-semantic-color-background-skeleton-default: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-popover-default: var(--sapphire-global-color-sapphire-25);--sapphire-semantic-color-background-backdrop: var(--sapphire-global-color-sapphire-900-70p);--sapphire-semantic-color-background-surface: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-control-special-secondary-default: var(--sapphire-global-color-sapphire-200);--sapphire-semantic-color-background-control-special-primary-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-control-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-field-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-decorative-orange-secondary-default: var(--sapphire-global-color-secondary-orange-50);--sapphire-semantic-color-background-decorative-orange-primary-default: var(--sapphire-global-color-secondary-orange-400);--sapphire-semantic-color-background-decorative-teal-secondary-default: var(--sapphire-global-color-secondary-teal-50);--sapphire-semantic-color-background-decorative-teal-primary-default: var(--sapphire-global-color-secondary-teal-500);--sapphire-semantic-color-background-decorative-forest-green-secondary-default: var(--sapphire-global-color-secondary-forest-green-50);--sapphire-semantic-color-background-decorative-forest-green-primary-default: var(--sapphire-global-color-secondary-forest-green-500);--sapphire-semantic-color-background-decorative-cobalt-secondary-default: var(--sapphire-global-color-secondary-cobalt-50);--sapphire-semantic-color-background-decorative-cobalt-primary-default: var(--sapphire-global-color-secondary-cobalt-500);--sapphire-semantic-color-background-decorative-gray-secondary-default: var(--sapphire-global-color-secondary-gray-50);--sapphire-semantic-color-background-decorative-gray-primary-default: var(--sapphire-global-color-secondary-gray-500);--sapphire-semantic-color-background-decorative-orchid-secondary-default: var(--sapphire-global-color-secondary-orchid-50);--sapphire-semantic-color-background-decorative-orchid-primary-default: var(--sapphire-global-color-secondary-orchid-500);--sapphire-semantic-color-background-decorative-beige-secondary-default: var(--sapphire-global-color-secondary-beige-50);--sapphire-semantic-color-background-decorative-beige-primary-default: var(--sapphire-global-color-secondary-beige-500);--sapphire-semantic-color-background-decorative-gold-secondary-default: var(--sapphire-global-color-secondary-gold-50);--sapphire-semantic-color-background-decorative-gold-primary-default: var(--sapphire-global-color-secondary-gold-500);--sapphire-semantic-color-background-decorative-violet-secondary-default: var(--sapphire-global-color-secondary-violet-100);--sapphire-semantic-color-background-decorative-violet-primary-default: var(--sapphire-global-color-secondary-violet-500);--sapphire-semantic-color-background-decorative-pink-secondary-default: var(--sapphire-global-color-secondary-pink-100);--sapphire-semantic-color-background-decorative-pink-primary-default: var(--sapphire-global-color-secondary-pink-500);--sapphire-semantic-color-background-decorative-lime-secondary-default: var(--sapphire-global-color-secondary-lime-100);--sapphire-semantic-color-background-decorative-lime-primary-default: var(--sapphire-global-color-secondary-lime-500);--sapphire-semantic-color-background-decorative-indigo-secondary-default: var(--sapphire-global-color-secondary-indigo-100);--sapphire-semantic-color-background-decorative-indigo-primary-default: var(--sapphire-global-color-secondary-indigo-500);--sapphire-semantic-color-background-decorative-electro-secondary-default: var(--sapphire-global-color-secondary-electro-100);--sapphire-semantic-color-background-decorative-electro-primary-default: var(--sapphire-global-color-secondary-electro-500);--sapphire-semantic-color-background-decorative-copper-secondary-default: var(--sapphire-global-color-secondary-copper-100);--sapphire-semantic-color-background-decorative-copper-primary-default: var(--sapphire-global-color-secondary-copper-500);--sapphire-semantic-color-background-decorative-aqua-secondary-default: var(--sapphire-global-color-secondary-aqua-100);--sapphire-semantic-color-background-decorative-aqua-primary-default: var(--sapphire-global-color-secondary-aqua-500);--sapphire-semantic-color-background-passive-secondary-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-passive-primary-default: var(--sapphire-global-color-sapphire-450);--sapphire-semantic-color-background-informative-secondary-default: var(--sapphire-global-color-blue-50);--sapphire-semantic-color-background-informative-primary-default: var(--sapphire-global-color-blue-500);--sapphire-semantic-color-background-warning-secondary-default: var(--sapphire-global-color-yellow-75);--sapphire-semantic-color-background-warning-primary-default: var(--sapphire-global-color-yellow-300);--sapphire-semantic-color-background-positive-secondary-default: var(--sapphire-global-color-green-50);--sapphire-semantic-color-background-positive-primary-default: var(--sapphire-global-color-green-500);--sapphire-semantic-color-background-negative-secondary-active: var(--sapphire-global-color-red-100);--sapphire-semantic-color-background-negative-secondary-hover: var(--sapphire-global-color-red-75);--sapphire-semantic-color-background-negative-secondary-default: var(--sapphire-global-color-red-50);--sapphire-semantic-color-background-negative-primary-active: var(--sapphire-global-color-red-650);--sapphire-semantic-color-background-negative-primary-hover: var(--sapphire-global-color-red-600);--sapphire-semantic-color-background-negative-primary-default: var(--sapphire-global-color-red-500);--sapphire-semantic-color-background-selection-unselected-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-selection-unselected-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-selection-unselected-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-selection-selected-active: var(--sapphire-global-color-blue-100);--sapphire-semantic-color-background-selection-selected-hover: var(--sapphire-global-color-blue-75);--sapphire-semantic-color-background-selection-selected-default: var(--sapphire-global-color-blue-50);--sapphire-semantic-color-background-action-danger-text: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-danger-ghost-default: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-tertiary-text: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-tertiary-ghost-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-tertiary-ghost-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-tertiary-ghost-default: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-tertiary-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-tertiary-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-tertiary-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-action-secondary-text: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-secondary-ghost-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-secondary-ghost-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-secondary-ghost-default: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-secondary-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-secondary-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-secondary-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-action-primary-active: var(--sapphire-global-color-blue-650);--sapphire-semantic-color-background-action-primary-hover: var(--sapphire-global-color-blue-600);--sapphire-semantic-color-background-action-primary-default: var(--sapphire-global-color-blue-500);--sapphire-semantic-size-spacing-container-horizontal-md: var(--sapphire-semantic-size-spacing-60);--sapphire-semantic-size-spacing-container-horizontal-sm: var(--sapphire-semantic-size-spacing-30);--sapphire-semantic-size-spacing-data-collection-item-horizontal-lg: var(--sapphire-semantic-size-spacing-40);--sapphire-semantic-size-spacing-data-collection-item-horizontal-md: var(--sapphire-semantic-size-spacing-30);--sapphire-semantic-size-spacing-data-collection-item-horizontal-sm: var(--sapphire-semantic-size-spacing-20);--sapphire-semantic-size-spacing-control-horizontal-lg: var(--sapphire-semantic-size-spacing-30);--sapphire-semantic-size-spacing-control-horizontal-md: var(--sapphire-semantic-size-spacing-25);--sapphire-semantic-size-spacing-control-vertical-lg: var(--sapphire-semantic-size-spacing-30);--sapphire-semantic-size-spacing-control-vertical-md: var(--sapphire-semantic-size-spacing-25);--sapphire-semantic-size-spacing-control-vertical-sm: var(--sapphire-semantic-size-spacing-10);--sapphire-semantic-size-radius-popover: var(--sapphire-semantic-size-radius-md);--sapphire-semantic-size-focus-ring: var(--sapphire-semantic-size-border-md);--sapphire-semantic-size-height-box-lg: var(--sapphire-semantic-size-height-control-2xs);--sapphire-semantic-size-height-input-md: var(--sapphire-semantic-size-height-control-md);--sapphire-semantic-size-height-input-lg: var(--sapphire-semantic-size-height-control-lg);--sapphire-semantic-color-cursor-default: var(--sapphire-semantic-color-background-action-primary-default);--sapphire-semantic-color-content-warning-primary-default: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-link-secondary-active: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-link-secondary-hover: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-link-secondary-default: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-link-primary-active: var(--sapphire-semantic-color-content-action-secondary-active);--sapphire-semantic-color-content-link-primary-hover: var(--sapphire-semantic-color-content-action-secondary-hover);--sapphire-semantic-color-content-link-primary-default: var(--sapphire-semantic-color-content-action-secondary-default);--sapphire-semantic-color-content-action-danger-active: var(--sapphire-semantic-color-content-negative-secondary-active);--sapphire-semantic-color-content-action-danger-hover: var(--sapphire-semantic-color-content-negative-secondary-hover);--sapphire-semantic-color-content-action-danger-default: var(--sapphire-semantic-color-content-negative-secondary-default);--sapphire-semantic-color-border-passive-secondary-default: var(--sapphire-semantic-color-border-primary-default);--sapphire-semantic-color-border-separator-default: var(--sapphire-semantic-color-border-tertiary-default);--sapphire-semantic-color-border-control-active: var(--sapphire-semantic-color-border-primary-active);--sapphire-semantic-color-border-control-hover: var(--sapphire-semantic-color-border-primary-hover);--sapphire-semantic-color-border-control-default: var(--sapphire-semantic-color-border-primary-default);--sapphire-semantic-color-background-spinner-secondary-default: var(--sapphire-semantic-color-background-action-primary-default);--sapphire-semantic-color-background-spinner-primary-default: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-background-action-danger-ghost-active: var(--sapphire-semantic-color-background-negative-secondary-active);--sapphire-semantic-color-background-action-danger-ghost-hover: var(--sapphire-semantic-color-background-negative-secondary-hover);--sapphire-semantic-color-background-action-danger-active: var(--sapphire-semantic-color-background-negative-secondary-active);--sapphire-semantic-color-background-action-danger-hover: var(--sapphire-semantic-color-background-negative-secondary-hover);--sapphire-semantic-color-background-action-danger-default: var(--sapphire-semantic-color-background-negative-secondary-default);--sapphire-semantic-color-border-field-default: var(--sapphire-semantic-color-border-control-default)}@media screen and (min-width: 768px){.sapphire-theme-default-dark,:host,.sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-semantic-size-width-panel-sm: var(--sapphire-global-size-generic-1120);--sapphire-semantic-size-width-panel-lg: var(--sapphire-global-size-generic-1600)}}@media (prefers-reduced-motion){.sapphire-theme-default-dark,:host,.sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-semantic-time-motion-very-slow: var(--sapphire-global-time-2000);--sapphire-semantic-time-motion-slow: 0s;--sapphire-semantic-time-motion-default: 0s;--sapphire-semantic-time-motion-quick: 0s}}.sapphire-theme-default-dark.sapphire-theme--contrast,.sapphire-theme-default-dark .sapphire-theme--contrast,:host .sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-global-color-sapphire-25: hsl(220, 33%, 98%);--sapphire-global-color-sapphire-50: hsl(216, 29%, 97%);--sapphire-global-color-sapphire-75: hsl(210, 23%, 95%);--sapphire-global-color-sapphire-100: hsl(210, 24%, 93%);--sapphire-global-color-sapphire-125: hsl(210, 19%, 90%);--sapphire-global-color-sapphire-150: hsl(208, 18%, 86%);--sapphire-global-color-sapphire-200: hsl(208, 18%, 79%);--sapphire-global-color-sapphire-250: hsl(207, 16%, 73%);--sapphire-global-color-sapphire-300: hsl(209, 17%, 66%);--sapphire-global-color-sapphire-350: hsl(206, 16%, 61%);--sapphire-global-color-sapphire-400: hsl(206, 15%, 56%);--sapphire-global-color-sapphire-450: hsl(206, 16%, 50%);--sapphire-global-color-sapphire-500: hsl(205, 16%, 46%);--sapphire-global-color-sapphire-550: hsl(205, 19%, 41%);--sapphire-global-color-sapphire-600: hsl(205, 23%, 37%);--sapphire-global-color-sapphire-650: hsl(203, 27%, 33%);--sapphire-global-color-sapphire-700: hsl(204, 32%, 29%);--sapphire-global-color-sapphire-750: hsl(204, 41%, 25%);--sapphire-global-color-sapphire-800: hsl(203, 50%, 21%);--sapphire-global-color-sapphire-850: hsl(202, 68%, 16%);--sapphire-global-color-sapphire-875: hsl(201, 82%, 13%);--sapphire-global-color-sapphire-900: hsl(202, 100%, 11%);--sapphire-global-color-sapphire-925: hsl(202, 100%, 10%);--sapphire-global-color-sapphire-950: hsl(203, 100%, 9%);--sapphire-global-color-sapphire-975: hsl(202, 100%, 7%);--sapphire-global-color-sapphire-900-70p: hsla(202, 100%, 11%, .7);--sapphire-global-color-sapphire-900-4p: hsla(202, 100%, 11%, .04);--sapphire-global-color-blue-25: hsl(204, 56%, 98%);--sapphire-global-color-blue-50: hsl(202, 65%, 97%);--sapphire-global-color-blue-75: hsl(206, 67%, 95%);--sapphire-global-color-blue-100: hsl(203, 64%, 94%);--sapphire-global-color-blue-125: hsl(204, 65%, 90%);--sapphire-global-color-blue-150: hsl(203, 64%, 86%);--sapphire-global-color-blue-200: hsl(203, 65%, 79%);--sapphire-global-color-blue-250: hsl(203, 64%, 72%);--sapphire-global-color-blue-300: hsl(203, 70%, 65%);--sapphire-global-color-blue-350: hsl(203, 75%, 57%);--sapphire-global-color-blue-400: hsl(203, 80%, 50%);--sapphire-global-color-blue-450: hsl(203, 90%, 44%);--sapphire-global-color-blue-500: hsl(203, 100%, 39%);--sapphire-global-color-blue-550: hsl(203, 100%, 35%);--sapphire-global-color-blue-600: hsl(203, 100%, 32%);--sapphire-global-color-blue-650: hsl(203, 100%, 29%);--sapphire-global-color-blue-700: hsl(203, 100%, 25%);--sapphire-global-color-blue-750: hsl(202, 100%, 22%);--sapphire-global-color-blue-800: hsl(203, 100%, 19%);--sapphire-global-color-blue-850: hsl(203, 100%, 15%);--sapphire-global-color-blue-875: hsl(203, 100%, 13%);--sapphire-global-color-blue-900: hsl(202, 100%, 11%);--sapphire-global-color-blue-925: hsl(203, 100%, 10%);--sapphire-global-color-blue-950: hsl(203, 100%, 9%);--sapphire-global-color-blue-975: hsl(202, 100%, 7%);--sapphire-global-color-green-25: hsl(150, 40%, 98%);--sapphire-global-color-green-50: hsl(158, 40%, 96%);--sapphire-global-color-green-75: hsl(162, 33%, 94%);--sapphire-global-color-green-100: hsl(159, 35%, 92%);--sapphire-global-color-green-125: hsl(159, 37%, 88%);--sapphire-global-color-green-150: hsl(159, 36%, 83%);--sapphire-global-color-green-200: hsl(160, 36%, 74%);--sapphire-global-color-green-250: hsl(159, 36%, 66%);--sapphire-global-color-green-300: hsl(159, 36%, 57%);--sapphire-global-color-green-350: hsl(159, 37%, 50%);--sapphire-global-color-green-400: hsl(159, 51%, 42%);--sapphire-global-color-green-450: hsl(159, 71%, 34%);--sapphire-global-color-green-500: hsl(159, 100%, 27%);--sapphire-global-color-green-550: hsl(159, 100%, 24%);--sapphire-global-color-green-600: hsl(159, 100%, 22%);--sapphire-global-color-green-650: hsl(159, 100%, 19%);--sapphire-global-color-green-700: hsl(159, 100%, 17%);--sapphire-global-color-green-750: hsl(159, 100%, 15%);--sapphire-global-color-green-800: hsl(159, 100%, 13%);--sapphire-global-color-green-850: hsl(158, 100%, 10%);--sapphire-global-color-green-875: hsl(159, 100%, 9%);--sapphire-global-color-green-900: hsl(159, 100%, 7%);--sapphire-global-color-green-925: hsl(159, 100%, 7%);--sapphire-global-color-green-950: hsl(159, 100%, 6%);--sapphire-global-color-green-975: hsl(159, 100%, 5%);--sapphire-global-color-red-25: hsl(0, 100%, 99%);--sapphire-global-color-red-50: hsl(355, 100%, 98%);--sapphire-global-color-red-75: hsl(356, 100%, 97%);--sapphire-global-color-red-100: hsl(357, 100%, 96%);--sapphire-global-color-red-125: hsl(358, 100%, 94%);--sapphire-global-color-red-150: hsl(359, 100%, 91%);--sapphire-global-color-red-200: hsl(358, 92%, 86%);--sapphire-global-color-red-250: hsl(357, 88%, 81%);--sapphire-global-color-red-300: hsl(356, 82%, 76%);--sapphire-global-color-red-350: hsl(355, 79%, 71%);--sapphire-global-color-red-400: hsl(353, 75%, 65%);--sapphire-global-color-red-450: hsl(351, 73%, 59%);--sapphire-global-color-red-500: hsl(348, 72%, 53%);--sapphire-global-color-red-550: hsl(349, 61%, 48%);--sapphire-global-color-red-600: hsl(349, 60%, 44%);--sapphire-global-color-red-650: hsl(350, 57%, 39%);--sapphire-global-color-red-700: hsl(351, 55%, 35%);--sapphire-global-color-red-750: hsl(351, 54%, 31%);--sapphire-global-color-red-800: hsl(353, 50%, 26%);--sapphire-global-color-red-850: hsl(353, 48%, 21%);--sapphire-global-color-red-875: hsl(354, 44%, 18%);--sapphire-global-color-red-900: hsl(355, 43%, 15%);--sapphire-global-color-red-925: hsl(356, 41%, 14%);--sapphire-global-color-red-950: hsl(355, 38%, 12%);--sapphire-global-color-red-975: hsl(0, 33%, 10%);--sapphire-global-color-secondary-aqua-50: hsl(193, 47%, 96%);--sapphire-global-color-secondary-aqua-75: hsl(193, 47%, 94%);--sapphire-global-color-secondary-aqua-100: hsl(190, 45%, 92%);--sapphire-global-color-secondary-aqua-150: hsl(192, 47%, 84%);--sapphire-global-color-secondary-aqua-200: hsl(192, 47%, 76%);--sapphire-global-color-secondary-aqua-300: hsl(192, 47%, 60%);--sapphire-global-color-secondary-aqua-400: hsl(192, 55%, 46%);--sapphire-global-color-secondary-aqua-500: hsl(192, 100%, 32%);--sapphire-global-color-secondary-aqua-600: hsl(192, 100%, 26%);--sapphire-global-color-secondary-copper-50: hsl(15, 50%, 97%);--sapphire-global-color-secondary-copper-75: hsl(16, 48%, 95%);--sapphire-global-color-secondary-copper-100: hsl(16, 48%, 94%);--sapphire-global-color-secondary-copper-150: hsl(15, 51%, 87%);--sapphire-global-color-secondary-copper-200: hsl(16, 49%, 81%);--sapphire-global-color-secondary-copper-300: hsl(15, 50%, 69%);--sapphire-global-color-secondary-copper-400: hsl(15, 50%, 59%);--sapphire-global-color-secondary-copper-500: hsl(15, 54%, 48%);--sapphire-global-color-secondary-copper-600: hsl(16, 54%, 39%);--sapphire-global-color-secondary-electro-50: hsl(204, 29%, 97%);--sapphire-global-color-secondary-electro-75: hsl(206, 28%, 95%);--sapphire-global-color-secondary-electro-100: hsl(207, 27%, 94%);--sapphire-global-color-secondary-electro-150: hsl(205, 27%, 86%);--sapphire-global-color-secondary-electro-200: hsl(208, 27%, 80%);--sapphire-global-color-secondary-electro-300: hsl(207, 27%, 67%);--sapphire-global-color-secondary-electro-400: hsl(206, 27%, 56%);--sapphire-global-color-secondary-electro-500: hsl(206, 31%, 46%);--sapphire-global-color-secondary-electro-600: hsl(207, 31%, 38%);--sapphire-global-color-secondary-indigo-50: hsl(229, 100%, 98%);--sapphire-global-color-secondary-indigo-75: hsl(229, 100%, 97%);--sapphire-global-color-secondary-indigo-100: hsl(231, 100%, 96%);--sapphire-global-color-secondary-indigo-150: hsl(229, 100%, 91%);--sapphire-global-color-secondary-indigo-200: hsl(229, 100%, 87%);--sapphire-global-color-secondary-indigo-300: hsl(230, 100%, 79%);--sapphire-global-color-secondary-indigo-400: hsl(230, 100%, 72%);--sapphire-global-color-secondary-indigo-500: hsl(230, 100%, 64%);--sapphire-global-color-secondary-indigo-600: hsl(230, 62%, 53%);--sapphire-global-color-secondary-lime-50: hsl(70, 27%, 96%);--sapphire-global-color-secondary-lime-75: hsl(66, 29%, 93%);--sapphire-global-color-secondary-lime-100: hsl(69, 29%, 91%);--sapphire-global-color-secondary-lime-150: hsl(71, 30%, 82%);--sapphire-global-color-secondary-lime-200: hsl(70, 29%, 73%);--sapphire-global-color-secondary-lime-300: hsl(72, 30%, 57%);--sapphire-global-color-secondary-lime-400: hsl(71, 42%, 42%);--sapphire-global-color-secondary-lime-500: hsl(71, 76%, 28%);--sapphire-global-color-secondary-lime-600: hsl(71, 76%, 23%);--sapphire-global-color-secondary-pink-50: hsl(326, 54%, 97%);--sapphire-global-color-secondary-pink-75: hsl(330, 50%, 96%);--sapphire-global-color-secondary-pink-100: hsl(328, 56%, 95%);--sapphire-global-color-secondary-pink-150: hsl(327, 54%, 89%);--sapphire-global-color-secondary-pink-200: hsl(327, 53%, 83%);--sapphire-global-color-secondary-pink-300: hsl(326, 53%, 73%);--sapphire-global-color-secondary-pink-400: hsl(326, 53%, 63%);--sapphire-global-color-secondary-pink-500: hsl(327, 53%, 53%);--sapphire-global-color-secondary-pink-600: hsl(327, 48%, 43%);--sapphire-global-color-secondary-violet-50: hsl(240, 64%, 98%);--sapphire-global-color-secondary-violet-75: hsl(245, 65%, 97%);--sapphire-global-color-secondary-violet-100: hsl(244, 64%, 96%);--sapphire-global-color-secondary-violet-150: hsl(246, 66%, 91%);--sapphire-global-color-secondary-violet-200: hsl(244, 65%, 86%);--sapphire-global-color-secondary-violet-300: hsl(245, 66%, 78%);--sapphire-global-color-secondary-violet-400: hsl(245, 66%, 71%);--sapphire-global-color-secondary-violet-500: hsl(245, 66%, 64%);--sapphire-global-color-secondary-violet-600: hsl(245, 41%, 52%);--sapphire-global-color-secondary-purple-50: hsl(270, 29%, 97%);--sapphire-global-color-secondary-purple-75: hsl(274, 33%, 96%);--sapphire-global-color-secondary-purple-100: hsl(270, 36%, 95%);--sapphire-global-color-secondary-purple-150: hsl(272, 32%, 88%);--sapphire-global-color-secondary-purple-200: hsl(269, 33%, 83%);--sapphire-global-color-secondary-purple-300: hsl(270, 33%, 73%);--sapphire-global-color-secondary-purple-400: hsl(270, 33%, 64%);--sapphire-global-color-secondary-purple-500: hsl(270, 33%, 55%);--sapphire-global-color-secondary-purple-600: hsl(270, 28%, 45%);--sapphire-global-color-secondary-gold-50: hsl(40, 43%, 96%);--sapphire-global-color-secondary-gold-75: hsl(42, 42%, 94%);--sapphire-global-color-secondary-gold-100: hsl(43, 43%, 92%);--sapphire-global-color-secondary-gold-150: hsl(43, 43%, 83%);--sapphire-global-color-secondary-gold-200: hsl(42, 44%, 74%);--sapphire-global-color-secondary-gold-300: hsl(42, 44%, 59%);--sapphire-global-color-secondary-gold-400: hsl(42, 54%, 45%);--sapphire-global-color-secondary-gold-500: hsl(42, 96%, 31%);--sapphire-global-color-secondary-gold-600: hsl(42, 97%, 25%);--sapphire-global-color-secondary-beige-50: hsl(30, 11%, 96%);--sapphire-global-color-secondary-beige-75: hsl(30, 15%, 95%);--sapphire-global-color-secondary-beige-100: hsl(40, 17%, 93%);--sapphire-global-color-secondary-beige-150: hsl(40, 16%, 85%);--sapphire-global-color-secondary-beige-200: hsl(41, 14%, 78%);--sapphire-global-color-secondary-beige-300: hsl(39, 16%, 65%);--sapphire-global-color-secondary-beige-400: hsl(38, 15%, 54%);--sapphire-global-color-secondary-beige-500: hsl(40, 20%, 43%);--sapphire-global-color-secondary-beige-600: hsl(38, 20%, 35%);--sapphire-global-color-secondary-orchid-50: hsl(300, 33%, 97%);--sapphire-global-color-secondary-orchid-75: hsl(300, 36%, 96%);--sapphire-global-color-secondary-orchid-100: hsl(305, 38%, 94%);--sapphire-global-color-secondary-orchid-150: hsl(305, 38%, 88%);--sapphire-global-color-secondary-orchid-200: hsl(304, 37%, 82%);--sapphire-global-color-secondary-orchid-300: hsl(303, 37%, 71%);--sapphire-global-color-secondary-orchid-400: hsl(304, 37%, 61%);--sapphire-global-color-secondary-orchid-500: hsl(304, 37%, 51%);--sapphire-global-color-secondary-orchid-600: hsl(304, 36%, 42%);--sapphire-global-color-secondary-gray-50: hsl(180, 6%, 97%);--sapphire-global-color-secondary-gray-75: hsl(240, 4%, 95%);--sapphire-global-color-secondary-gray-100: hsl(210, 6%, 93%);--sapphire-global-color-secondary-gray-150: hsl(195, 6%, 86%);--sapphire-global-color-secondary-gray-200: hsl(200, 6%, 79%);--sapphire-global-color-secondary-gray-300: hsl(203, 5%, 67%);--sapphire-global-color-secondary-gray-400: hsl(200, 5%, 56%);--sapphire-global-color-secondary-gray-500: hsl(201, 6%, 46%);--sapphire-global-color-secondary-gray-600: hsl(202, 6%, 38%);--sapphire-global-color-secondary-cobalt-50: hsl(215, 86%, 97%);--sapphire-global-color-secondary-cobalt-75: hsl(215, 90%, 96%);--sapphire-global-color-secondary-cobalt-100: hsl(216, 93%, 95%);--sapphire-global-color-secondary-cobalt-150: hsl(216, 93%, 89%);--sapphire-global-color-secondary-cobalt-200: hsl(215, 91%, 83%);--sapphire-global-color-secondary-cobalt-300: hsl(215, 92%, 72%);--sapphire-global-color-secondary-cobalt-400: hsl(215, 92%, 62%);--sapphire-global-color-secondary-cobalt-500: hsl(215, 92%, 51%);--sapphire-global-color-secondary-cobalt-600: hsl(215, 87%, 42%);--sapphire-global-color-secondary-forest-green-50: hsl(111, 33%, 96%);--sapphire-global-color-secondary-forest-green-75: hsl(109, 35%, 94%);--sapphire-global-color-secondary-forest-green-100: hsl(104, 35%, 92%);--sapphire-global-color-secondary-forest-green-150: hsl(105, 36%, 82%);--sapphire-global-color-secondary-forest-green-200: hsl(105, 36%, 74%);--sapphire-global-color-secondary-forest-green-300: hsl(105, 36%, 58%);--sapphire-global-color-secondary-forest-green-400: hsl(105, 48%, 43%);--sapphire-global-color-secondary-forest-green-500: hsl(105, 93%, 28%);--sapphire-global-color-secondary-forest-green-600: hsl(105, 93%, 23%);--sapphire-global-color-secondary-teal-50: hsl(171, 33%, 96%);--sapphire-global-color-secondary-teal-75: hsl(170, 38%, 94%);--sapphire-global-color-secondary-teal-100: hsl(172, 35%, 92%);--sapphire-global-color-secondary-teal-150: hsl(171, 36%, 82%);--sapphire-global-color-secondary-teal-200: hsl(171, 36%, 74%);--sapphire-global-color-secondary-teal-300: hsl(172, 36%, 57%);--sapphire-global-color-secondary-teal-400: hsl(172, 50%, 42%);--sapphire-global-color-secondary-teal-500: hsl(171, 100%, 26%);--sapphire-global-color-secondary-teal-600: hsl(171, 100%, 22%);--sapphire-global-color-secondary-orange-50: hsl(28, 89%, 96%);--sapphire-global-color-secondary-orange-75: hsl(27, 85%, 95%);--sapphire-global-color-secondary-orange-100: hsl(26, 89%, 93%);--sapphire-global-color-secondary-orange-150: hsl(25, 84%, 86%);--sapphire-global-color-secondary-orange-200: hsl(23, 83%, 79%);--sapphire-global-color-secondary-orange-300: hsl(21, 84%, 66%);--sapphire-global-color-secondary-orange-400: hsl(19, 84%, 54%);--sapphire-global-color-secondary-orange-500: hsl(17, 100%, 43%);--sapphire-global-color-secondary-orange-600: hsl(19, 100%, 34%);--sapphire-global-color-neutral-white: hsl(0, 0%, 100%);--sapphire-global-color-neutral-black: hsl(0, 0%, 0%);--sapphire-global-color-neutral-transparent: hsla(0, 0%, 100%, 0);--sapphire-global-color-yellow-25: hsl(54, 100%, 98%);--sapphire-global-color-yellow-50: hsl(51, 100%, 96%);--sapphire-global-color-yellow-75: hsl(49, 100%, 92%);--sapphire-global-color-yellow-100: hsl(48, 100%, 89%);--sapphire-global-color-yellow-125: hsl(49, 97%, 85%);--sapphire-global-color-yellow-150: hsl(48, 98%, 79%);--sapphire-global-color-yellow-200: hsl(48, 98%, 76%);--sapphire-global-color-yellow-250: hsl(47, 97%, 70%);--sapphire-global-color-yellow-300: hsl(46, 98%, 64%);--sapphire-global-color-yellow-350: hsl(44, 98%, 60%);--sapphire-global-color-yellow-400: hsl(43, 98%, 55%);--sapphire-global-color-yellow-450: hsl(40, 95%, 54%);--sapphire-global-color-yellow-500: hsl(37, 95%, 52%);--sapphire-global-color-yellow-550: hsl(34, 94%, 48%);--sapphire-global-color-yellow-600: hsl(31, 93%, 44%);--sapphire-global-color-yellow-650: hsl(28, 94%, 41%);--sapphire-global-color-yellow-700: hsl(25, 93%, 37%);--sapphire-global-color-yellow-750: hsl(24, 89%, 33%);--sapphire-global-color-yellow-800: hsl(22, 88%, 29%);--sapphire-global-color-yellow-850: hsl(22, 85%, 27%);--sapphire-global-color-yellow-875: hsl(21, 86%, 23%);--sapphire-global-color-yellow-900: hsl(21, 88%, 19%);--sapphire-global-color-yellow-925: hsl(21, 87%, 15%);--sapphire-global-color-yellow-950: hsl(19, 89%, 11%);--sapphire-global-color-yellow-975: hsl(20, 95%, 8%);--sapphire-global-font-danske-text-name: \"Danske Text v2\";--sapphire-global-font-danske-human-name: \"Danske Human\";--sapphire-global-opacity-35: .35;--sapphire-global-opacity-40: .4;--sapphire-global-opacity-50: .5;--sapphire-global-shadow-sm: 0px 0px 2px 0px rgba(34, 64, 82, .06), 0px 1.5px 4px 0px rgba(34, 64, 82, .04), 0px 4.5px 6px 0px rgba(34, 64, 82, .04), 0px 10.5px 12px 0px rgba(34, 64, 82, .03), 0px 25px 24px 0px rgba(34, 64, 82, .02), 0px 100px 64px 0px rgba(34, 64, 82, .02), 0px 0px 2px 0px rgba(34, 64, 82, .05), 0px 0px 1px 0px rgba(34, 64, 82, .2);--sapphire-global-shadow-md: 0px 0px 3px 0px rgba(34, 64, 82, .02), 0px 3px 7px 0px rgba(34, 64, 82, .03), 0px 6.5px 14px 0px rgba(34, 64, 82, .04), 0px 13px 29px 0px rgba(34, 64, 82, .05), 0px 36px 80px 0px rgba(34, 64, 82, .07), 0px 0px 2px 0px rgba(34, 64, 82, .05), 0px 0px 1px 0px rgba(34, 64, 82, .2);--sapphire-global-shadow-lg: 0px 0px 2px 0px rgba(34, 64, 82, .02), 0px -1.5px 6px 0px rgba(34, 64, 82, .03), 0px 4.5px 12px 0px rgba(34, 64, 82, .04), 0px 14.5px 18px 0px rgba(34, 64, 82, .04), 0px 26px 34px 0px rgba(34, 64, 82, .05), 0px 84px 92px 0px rgba(34, 64, 82, .07), 0px 0px 2px 0px rgba(34, 64, 82, .05), 0px 0px 1px 0px rgba(34, 64, 82, .2);--sapphire-global-size-static-0: 0px;--sapphire-global-size-static-2: 1px;--sapphire-global-size-static-5: 2px;--sapphire-global-size-static-10: 4px;--sapphire-global-size-static-20: 8px;--sapphire-global-size-static-30: 12px;--sapphire-global-size-static-60: 24px;--sapphire-global-size-generic-0: 0rem;--sapphire-global-size-generic-2: .0625rem;--sapphire-global-size-generic-5: .125rem;--sapphire-global-size-generic-10: .25rem;--sapphire-global-size-generic-15: .375rem;--sapphire-global-size-generic-20: .5rem;--sapphire-global-size-generic-25: .625rem;--sapphire-global-size-generic-30: .75rem;--sapphire-global-size-generic-35: .875rem;--sapphire-global-size-generic-40: 1rem;--sapphire-global-size-generic-50: 1.25rem;--sapphire-global-size-generic-60: 1.5rem;--sapphire-global-size-generic-80: 2rem;--sapphire-global-size-generic-100: 2.5rem;--sapphire-global-size-generic-120: 3rem;--sapphire-global-size-generic-140: 3.5rem;--sapphire-global-size-generic-160: 4rem;--sapphire-global-size-generic-180: 4.5rem;--sapphire-global-size-generic-200: 5rem;--sapphire-global-size-generic-240: 6rem;--sapphire-global-size-generic-280: 7rem;--sapphire-global-size-generic-300: 7.5rem;--sapphire-global-size-generic-320: 8rem;--sapphire-global-size-generic-340: 8.5rem;--sapphire-global-size-generic-400: 10rem;--sapphire-global-size-generic-480: 12rem;--sapphire-global-size-generic-560: 14rem;--sapphire-global-size-generic-600: 15rem;--sapphire-global-size-generic-640: 16rem;--sapphire-global-size-generic-750: 18.75rem;--sapphire-global-size-generic-800: 20rem;--sapphire-global-size-generic-900: 22.5rem;--sapphire-global-size-generic-940: 23.5rem;--sapphire-global-size-generic-960: 24rem;--sapphire-global-size-generic-1000: 25rem;--sapphire-global-size-generic-1120: 28rem;--sapphire-global-size-generic-1200: 30rem;--sapphire-global-size-generic-1280: 32rem;--sapphire-global-size-generic-1400: 35rem;--sapphire-global-size-generic-1600: 40rem;--sapphire-global-size-generic-1920: 48rem;--sapphire-global-size-generic-2400: 60rem;--sapphire-global-size-generic-2560: 64rem;--sapphire-global-size-generic-3200: 80rem;--sapphire-global-size-generic-3600: 90rem;--sapphire-global-size-generic-3780: 94.5rem;--sapphire-global-size-generic-4320: 108rem;--sapphire-global-size-font-60: .625rem;--sapphire-global-size-font-75: .75rem;--sapphire-global-size-font-88: .875rem;--sapphire-global-size-font-100: 1rem;--sapphire-global-size-font-106: 1.0625rem;--sapphire-global-size-font-112: 1.125rem;--sapphire-global-size-font-130: 1.3125rem;--sapphire-global-size-font-150: 1.5rem;--sapphire-global-size-font-188: 1.875rem;--sapphire-global-size-font-220: 2.1875rem;--sapphire-global-size-font-300: 3rem;--sapphire-global-size-line-height-sm: 1.2;--sapphire-global-size-line-height-md: 1.5;--sapphire-global-size-ratio-height: .875;--sapphire-global-time-100: .1s;--sapphire-global-time-200: .2s;--sapphire-global-time-400: .4s;--sapphire-global-time-1000: 1s;--sapphire-global-time-1800: 1.8s;--sapphire-global-time-2000: 2s;--sapphire-semantic-color-background-surface: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-background-control-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-background-control-special-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-background-control-special-secondary-default: var(--sapphire-global-color-sapphire-900-4p);--sapphire-semantic-color-background-field-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-background-popover-default: var(--sapphire-semantic-color-background-surface);--sapphire-semantic-color-background-action-primary-default: var(--sapphire-global-color-blue-500);--sapphire-semantic-color-background-action-primary-hover: var(--sapphire-global-color-blue-600);--sapphire-semantic-color-background-action-primary-active: var(--sapphire-global-color-blue-650);--sapphire-semantic-color-background-action-secondary-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-action-secondary-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-secondary-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-secondary-ghost-default: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-secondary-ghost-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-secondary-ghost-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-secondary-text: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-tertiary-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-action-tertiary-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-tertiary-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-tertiary-ghost-default: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-tertiary-ghost-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-tertiary-ghost-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-tertiary-text: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-danger-default: var(--sapphire-semantic-color-background-negative-secondary-default);--sapphire-semantic-color-background-action-danger-hover: var(--sapphire-semantic-color-background-negative-secondary-hover);--sapphire-semantic-color-background-action-danger-active: var(--sapphire-semantic-color-background-negative-secondary-active);--sapphire-semantic-color-background-action-danger-ghost-default: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-danger-ghost-hover: var(--sapphire-semantic-color-background-negative-secondary-hover);--sapphire-semantic-color-background-action-danger-ghost-active: var(--sapphire-semantic-color-background-negative-secondary-active);--sapphire-semantic-color-background-action-danger-text: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-selection-selected-default: var(--sapphire-global-color-blue-50);--sapphire-semantic-color-background-selection-selected-hover: var(--sapphire-global-color-blue-75);--sapphire-semantic-color-background-selection-selected-active: var(--sapphire-global-color-blue-100);--sapphire-semantic-color-background-selection-unselected-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-selection-unselected-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-selection-unselected-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-negative-primary-default: var(--sapphire-global-color-red-500);--sapphire-semantic-color-background-negative-primary-hover: var(--sapphire-global-color-red-600);--sapphire-semantic-color-background-negative-primary-active: var(--sapphire-global-color-red-650);--sapphire-semantic-color-background-negative-secondary-default: var(--sapphire-global-color-red-50);--sapphire-semantic-color-background-negative-secondary-hover: var(--sapphire-global-color-red-75);--sapphire-semantic-color-background-negative-secondary-active: var(--sapphire-global-color-red-100);--sapphire-semantic-color-background-positive-primary-default: var(--sapphire-global-color-green-500);--sapphire-semantic-color-background-positive-secondary-default: var(--sapphire-global-color-green-50);--sapphire-semantic-color-background-warning-primary-default: var(--sapphire-global-color-yellow-300);--sapphire-semantic-color-background-warning-secondary-default: var(--sapphire-global-color-yellow-75);--sapphire-semantic-color-background-informative-primary-default: var(--sapphire-global-color-blue-500);--sapphire-semantic-color-background-informative-secondary-default: var(--sapphire-global-color-blue-50);--sapphire-semantic-color-background-passive-primary-default: var(--sapphire-global-color-sapphire-450);--sapphire-semantic-color-background-passive-secondary-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-decorative-aqua-primary-default: var(--sapphire-global-color-secondary-aqua-500);--sapphire-semantic-color-background-decorative-aqua-secondary-default: var(--sapphire-global-color-secondary-aqua-100);--sapphire-semantic-color-background-decorative-copper-primary-default: var(--sapphire-global-color-secondary-copper-500);--sapphire-semantic-color-background-decorative-copper-secondary-default: var(--sapphire-global-color-secondary-copper-100);--sapphire-semantic-color-background-decorative-electro-primary-default: var(--sapphire-global-color-secondary-electro-500);--sapphire-semantic-color-background-decorative-electro-secondary-default: var(--sapphire-global-color-secondary-electro-100);--sapphire-semantic-color-background-decorative-indigo-primary-default: var(--sapphire-global-color-secondary-indigo-500);--sapphire-semantic-color-background-decorative-indigo-secondary-default: var(--sapphire-global-color-secondary-indigo-100);--sapphire-semantic-color-background-decorative-lime-primary-default: var(--sapphire-global-color-secondary-lime-500);--sapphire-semantic-color-background-decorative-lime-secondary-default: var(--sapphire-global-color-secondary-lime-100);--sapphire-semantic-color-background-decorative-pink-primary-default: var(--sapphire-global-color-secondary-pink-500);--sapphire-semantic-color-background-decorative-pink-secondary-default: var(--sapphire-global-color-secondary-pink-100);--sapphire-semantic-color-background-decorative-violet-primary-default: var(--sapphire-global-color-secondary-violet-500);--sapphire-semantic-color-background-decorative-violet-secondary-default: var(--sapphire-global-color-secondary-violet-100);--sapphire-semantic-color-background-decorative-gold-primary-default: var(--sapphire-global-color-secondary-gold-500);--sapphire-semantic-color-background-decorative-gold-secondary-default: var(--sapphire-global-color-secondary-gold-50);--sapphire-semantic-color-background-decorative-beige-primary-default: var(--sapphire-global-color-secondary-beige-500);--sapphire-semantic-color-background-decorative-beige-secondary-default: var(--sapphire-global-color-secondary-beige-50);--sapphire-semantic-color-background-decorative-orchid-primary-default: var(--sapphire-global-color-secondary-orchid-500);--sapphire-semantic-color-background-decorative-orchid-secondary-default: var(--sapphire-global-color-secondary-orchid-50);--sapphire-semantic-color-background-decorative-gray-primary-default: var(--sapphire-global-color-secondary-gray-500);--sapphire-semantic-color-background-decorative-gray-secondary-default: var(--sapphire-global-color-secondary-gray-50);--sapphire-semantic-color-background-decorative-cobalt-primary-default: var(--sapphire-global-color-secondary-cobalt-500);--sapphire-semantic-color-background-decorative-cobalt-secondary-default: var(--sapphire-global-color-secondary-cobalt-50);--sapphire-semantic-color-background-decorative-forest-green-primary-default: var(--sapphire-global-color-secondary-forest-green-500);--sapphire-semantic-color-background-decorative-forest-green-secondary-default: var(--sapphire-global-color-secondary-forest-green-50);--sapphire-semantic-color-background-decorative-teal-primary-default: var(--sapphire-global-color-secondary-teal-500);--sapphire-semantic-color-background-decorative-teal-secondary-default: var(--sapphire-global-color-secondary-teal-50);--sapphire-semantic-color-background-decorative-orange-primary-default: var(--sapphire-global-color-secondary-orange-400);--sapphire-semantic-color-background-decorative-orange-secondary-default: var(--sapphire-global-color-secondary-orange-50);--sapphire-semantic-color-background-backdrop: var(--sapphire-global-color-sapphire-900-70p);--sapphire-semantic-color-background-skeleton-default: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-spinner-primary-default: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-background-spinner-secondary-default: var(--sapphire-semantic-color-background-action-primary-default);--sapphire-semantic-color-content-default-primary: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-default-secondary: var(--sapphire-global-color-sapphire-600);--sapphire-semantic-color-content-action-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-action-secondary-default: var(--sapphire-global-color-blue-550);--sapphire-semantic-color-content-action-secondary-hover: var(--sapphire-global-color-blue-600);--sapphire-semantic-color-content-action-secondary-active: var(--sapphire-global-color-blue-700);--sapphire-semantic-color-content-action-danger-default: var(--sapphire-semantic-color-content-negative-secondary-default);--sapphire-semantic-color-content-action-danger-hover: var(--sapphire-semantic-color-content-negative-secondary-hover);--sapphire-semantic-color-content-action-danger-active: var(--sapphire-semantic-color-content-negative-secondary-active);--sapphire-semantic-color-content-action-tertiary-default: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-action-tertiary-hover: var(--sapphire-global-color-sapphire-950);--sapphire-semantic-color-content-action-tertiary-active: var(--sapphire-global-color-sapphire-975);--sapphire-semantic-color-content-selection-selected-default: var(--sapphire-global-color-blue-550);--sapphire-semantic-color-content-selection-selected-hover: var(--sapphire-global-color-blue-600);--sapphire-semantic-color-content-selection-selected-active: var(--sapphire-global-color-blue-700);--sapphire-semantic-color-content-selection-unselected-default: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-selection-unselected-hover: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-selection-unselected-active: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-link-primary-default: var(--sapphire-semantic-color-content-action-secondary-default);--sapphire-semantic-color-content-link-primary-hover: var(--sapphire-semantic-color-content-action-secondary-hover);--sapphire-semantic-color-content-link-primary-active: var(--sapphire-semantic-color-content-action-secondary-active);--sapphire-semantic-color-content-link-secondary-default: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-link-secondary-hover: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-link-secondary-active: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-positive-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-positive-secondary-default: var(--sapphire-global-color-green-550);--sapphire-semantic-color-content-negative-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-negative-secondary-default: var(--sapphire-global-color-red-550);--sapphire-semantic-color-content-negative-secondary-hover: var(--sapphire-global-color-red-600);--sapphire-semantic-color-content-negative-secondary-active: var(--sapphire-global-color-red-700);--sapphire-semantic-color-content-warning-primary-default: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-warning-secondary-default: var(--sapphire-global-color-yellow-700);--sapphire-semantic-color-content-informative-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-informative-secondary-default: var(--sapphire-global-color-blue-550);--sapphire-semantic-color-content-passive-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-passive-secondary-default: var(--sapphire-global-color-sapphire-550);--sapphire-semantic-color-content-decorative-aqua-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-aqua-secondary-default: var(--sapphire-global-color-secondary-aqua-600);--sapphire-semantic-color-content-decorative-copper-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-copper-secondary-default: var(--sapphire-global-color-secondary-copper-600);--sapphire-semantic-color-content-decorative-electro-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-electro-secondary-default: var(--sapphire-global-color-secondary-electro-600);--sapphire-semantic-color-content-decorative-indigo-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-indigo-secondary-default: var(--sapphire-global-color-secondary-indigo-600);--sapphire-semantic-color-content-decorative-lime-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-lime-secondary-default: var(--sapphire-global-color-secondary-lime-600);--sapphire-semantic-color-content-decorative-pink-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-pink-secondary-default: var(--sapphire-global-color-secondary-pink-600);--sapphire-semantic-color-content-decorative-violet-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-violet-secondary-default: var(--sapphire-global-color-secondary-violet-600);--sapphire-semantic-color-content-decorative-gold-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-gold-secondary-default: var(--sapphire-global-color-secondary-gold-600);--sapphire-semantic-color-content-decorative-beige-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-beige-secondary-default: var(--sapphire-global-color-secondary-beige-600);--sapphire-semantic-color-content-decorative-orchid-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-orchid-secondary-default: var(--sapphire-global-color-secondary-orchid-600);--sapphire-semantic-color-content-decorative-gray-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-gray-secondary-default: var(--sapphire-global-color-secondary-gray-600);--sapphire-semantic-color-content-decorative-cobalt-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-cobalt-secondary-default: var(--sapphire-global-color-secondary-cobalt-600);--sapphire-semantic-color-content-decorative-forest-green-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-forest-green-secondary-default: var(--sapphire-global-color-secondary-forest-green-600);--sapphire-semantic-color-content-decorative-teal-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-teal-secondary-default: var(--sapphire-global-color-secondary-teal-600);--sapphire-semantic-color-content-decorative-orange-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-orange-secondary-default: var(--sapphire-global-color-secondary-orange-600);--sapphire-semantic-color-border-primary-default: var(--sapphire-global-color-sapphire-200);--sapphire-semantic-color-border-primary-hover: var(--sapphire-global-color-sapphire-250);--sapphire-semantic-color-border-primary-active: var(--sapphire-global-color-sapphire-300);--sapphire-semantic-color-border-secondary-default: var(--sapphire-global-color-sapphire-150);--sapphire-semantic-color-border-tertiary-default: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-border-field-default: var(--sapphire-semantic-color-border-control-default);--sapphire-semantic-color-border-field-error: var(--sapphire-global-color-red-500);--sapphire-semantic-color-border-control-default: var(--sapphire-semantic-color-border-primary-default);--sapphire-semantic-color-border-control-hover: var(--sapphire-semantic-color-border-primary-hover);--sapphire-semantic-color-border-control-active: var(--sapphire-semantic-color-border-primary-active);--sapphire-semantic-color-border-separator-default: var(--sapphire-semantic-color-border-tertiary-default);--sapphire-semantic-color-border-negative-secondary-default: var(--sapphire-global-color-red-200);--sapphire-semantic-color-border-positive-secondary-default: var(--sapphire-global-color-green-200);--sapphire-semantic-color-border-warning-secondary-default: var(--sapphire-global-color-yellow-300);--sapphire-semantic-color-border-informative-secondary-default: var(--sapphire-global-color-blue-200);--sapphire-semantic-color-border-passive-secondary-default: var(--sapphire-semantic-color-border-primary-default);--sapphire-semantic-color-border-decorative-aqua-secondary-default: var(--sapphire-global-color-secondary-aqua-200);--sapphire-semantic-color-border-decorative-copper-secondary-default: var(--sapphire-global-color-secondary-copper-200);--sapphire-semantic-color-border-decorative-electro-secondary-default: var(--sapphire-global-color-secondary-electro-200);--sapphire-semantic-color-border-decorative-indigo-secondary-default: var(--sapphire-global-color-secondary-indigo-200);--sapphire-semantic-color-border-decorative-lime-secondary-default: var(--sapphire-global-color-secondary-lime-200);--sapphire-semantic-color-border-decorative-pink-secondary-default: var(--sapphire-global-color-secondary-pink-200);--sapphire-semantic-color-border-decorative-violet-secondary-default: var(--sapphire-global-color-secondary-violet-200);--sapphire-semantic-color-border-decorative-gold-secondary-default: var(--sapphire-global-color-secondary-gold-200);--sapphire-semantic-color-border-decorative-beige-secondary-default: var(--sapphire-global-color-secondary-beige-200);--sapphire-semantic-color-border-decorative-orchid-secondary-default: var(--sapphire-global-color-secondary-orchid-200);--sapphire-semantic-color-border-decorative-gray-secondary-default: var(--sapphire-global-color-secondary-gray-200);--sapphire-semantic-color-border-decorative-cobalt-secondary-default: var(--sapphire-global-color-secondary-cobalt-200);--sapphire-semantic-color-border-decorative-forest-green-secondary-default: var(--sapphire-global-color-secondary-forest-green-200);--sapphire-semantic-color-border-decorative-teal-secondary-default: var(--sapphire-global-color-secondary-teal-200);--sapphire-semantic-color-border-decorative-orange-secondary-default: var(--sapphire-global-color-secondary-orange-200);--sapphire-semantic-color-focus-ring: var(--sapphire-global-color-blue-400);--sapphire-semantic-color-cursor-default: var(--sapphire-semantic-color-background-action-primary-default);--sapphire-semantic-font-name-default: var(--sapphire-global-font-danske-text-name);--sapphire-semantic-font-name-display: var(--sapphire-global-font-danske-human-name);--sapphire-semantic-font-weight-default-regular: 400;--sapphire-semantic-font-weight-default-semibold: 600;--sapphire-semantic-font-weight-default-bold: 700;--sapphire-semantic-font-weight-display-regular: 400;--sapphire-semantic-font-weight-display-bold: 700;--sapphire-semantic-opacity-50: var(--sapphire-global-opacity-50);--sapphire-semantic-opacity-disabled: var(--sapphire-global-opacity-40);--sapphire-semantic-shadow-popover: var(--sapphire-global-shadow-md);--sapphire-semantic-size-height-control-2xs: var(--sapphire-global-size-generic-50);--sapphire-semantic-size-height-control-xs: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-height-control-sm: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-height-control-md: var(--sapphire-global-size-generic-100);--sapphire-semantic-size-height-control-lg: var(--sapphire-global-size-generic-120);--sapphire-semantic-size-height-control-xl: var(--sapphire-global-size-generic-140);--sapphire-semantic-size-height-input-lg: var(--sapphire-semantic-size-height-control-lg);--sapphire-semantic-size-height-input-md: var(--sapphire-semantic-size-height-control-md);--sapphire-semantic-size-height-box-md: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-height-box-lg: var(--sapphire-semantic-size-height-control-2xs);--sapphire-semantic-size-width-control-default: var(--sapphire-global-size-generic-750);--sapphire-semantic-size-width-panel-sm: 100%;--sapphire-semantic-size-width-panel-lg: 100%;--sapphire-semantic-size-icon-sm: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-icon-md: var(--sapphire-global-size-generic-50);--sapphire-semantic-size-icon-lg: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-icon-xl: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-border-sm: var(--sapphire-global-size-static-2);--sapphire-semantic-size-border-md: var(--sapphire-global-size-static-5);--sapphire-semantic-size-border-lg: var(--sapphire-global-size-static-10);--sapphire-semantic-size-focus-ring: var(--sapphire-semantic-size-border-md);--sapphire-semantic-size-radius-xs: var(--sapphire-global-size-static-5);--sapphire-semantic-size-radius-sm: var(--sapphire-global-size-static-10);--sapphire-semantic-size-radius-md: var(--sapphire-global-size-static-20);--sapphire-semantic-size-radius-lg: var(--sapphire-global-size-static-30);--sapphire-semantic-size-radius-xl: var(--sapphire-global-size-static-60);--sapphire-semantic-size-radius-popover: var(--sapphire-semantic-size-radius-md);--sapphire-semantic-size-font-text-sm: var(--sapphire-global-size-font-75);--sapphire-semantic-size-font-text-md: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-text-lg: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-label-sm: var(--sapphire-global-size-font-75);--sapphire-semantic-size-font-label-md: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-label-lg: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-control-sm: var(--sapphire-global-size-font-75);--sapphire-semantic-size-font-control-md: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-control-default: var(--sapphire-global-size-font-100);--sapphire-semantic-size-line-height-sm: var(--sapphire-global-size-line-height-sm);--sapphire-semantic-size-line-height-md: var(--sapphire-global-size-line-height-md);--sapphire-semantic-size-spacing-5: var(--sapphire-global-size-generic-5);--sapphire-semantic-size-spacing-10: var(--sapphire-global-size-generic-10);--sapphire-semantic-size-spacing-20: var(--sapphire-global-size-generic-20);--sapphire-semantic-size-spacing-25: var(--sapphire-global-size-generic-25);--sapphire-semantic-size-spacing-30: var(--sapphire-global-size-generic-30);--sapphire-semantic-size-spacing-40: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-spacing-50: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-spacing-60: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-spacing-70: var(--sapphire-global-size-generic-100);--sapphire-semantic-size-spacing-80: var(--sapphire-global-size-generic-160);--sapphire-semantic-size-spacing-control-vertical-sm: var(--sapphire-semantic-size-spacing-10);--sapphire-semantic-size-spacing-control-vertical-md: var(--sapphire-semantic-size-spacing-25);--sapphire-semantic-size-spacing-control-vertical-lg: var(--sapphire-semantic-size-spacing-30);--sapphire-semantic-size-spacing-control-horizontal-md: var(--sapphire-semantic-size-spacing-25);--sapphire-semantic-size-spacing-control-horizontal-lg: var(--sapphire-semantic-size-spacing-30);--sapphire-semantic-size-spacing-data-collection-item-horizontal-sm: var(--sapphire-semantic-size-spacing-20);--sapphire-semantic-size-spacing-data-collection-item-horizontal-md: var(--sapphire-semantic-size-spacing-30);--sapphire-semantic-size-spacing-data-collection-item-horizontal-lg: var(--sapphire-semantic-size-spacing-40);--sapphire-semantic-size-spacing-container-horizontal-sm: var(--sapphire-semantic-size-spacing-30);--sapphire-semantic-size-spacing-container-horizontal-md: var(--sapphire-semantic-size-spacing-60);--sapphire-semantic-size-breakpoint-xs: 576px;--sapphire-semantic-size-breakpoint-s: 768px;--sapphire-semantic-size-breakpoint-m: 960px;--sapphire-semantic-size-breakpoint-l: 1200px;--sapphire-semantic-size-breakpoint-xl: 1400px;--sapphire-semantic-time-fade-default: var(--sapphire-global-time-200);--sapphire-semantic-time-fade-quick: var(--sapphire-global-time-100);--sapphire-semantic-time-fade-slow: var(--sapphire-global-time-1800);--sapphire-semantic-time-motion-very-slow: var(--sapphire-global-time-1000);--sapphire-semantic-time-motion-slow: var(--sapphire-global-time-400);--sapphire-semantic-time-motion-default: var(--sapphire-global-time-200);--sapphire-semantic-time-motion-quick: var(--sapphire-global-time-100)}::ng-deep .cdk-overlay-container,::ng-deep .cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}::ng-deep .cdk-overlay-container{position:fixed;z-index:1000}::ng-deep .cdk-overlay-container:empty{display:none}::ng-deep .cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}::ng-deep .cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}::ng-deep .cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}::ng-deep .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active ::ng-deep .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}::ng-deep .cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}::ng-deep .cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}::ng-deep .cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}::ng-deep .cdk-overlay-backdrop-noop-animation{transition:none}::ng-deep .cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}::ng-deep .cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}::ng-deep .cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] ::ng-deep .cdk-visually-hidden{left:auto;right:0}\n"] });
|
|
5807
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ThemeDefaultDark, decorators: [{
|
|
5808
|
+
type: Component,
|
|
5809
|
+
args: [{ selector: 'sp-theme-default-dark', standalone: true, template: '<ng-content></ng-content>', hostDirectives: [ThemeBaseDirective], styles: ["@keyframes backdrop-fade-in{0%{background-color:transparent}to{background-color:var(--sapphire-semantic-color-background-backdrop)}}@keyframes backdrop-fade-out{0%{background-color:var(--sapphire-semantic-color-background-backdrop)}to{background-color:transparent}}.sapphire-backdrop,:host.sapphire-backdrop{width:100%;height:100%;display:flex;justify-content:center;align-items:center;animation-name:backdrop-fade-in;animation-duration:var(--sapphire-semantic-time-fade-default);animation-timing-function:ease-in-out;animation-fill-mode:forwards}.sapphire-backdrop--exiting,:host.sapphire-backdrop--exiting{animation-name:backdrop-fade-out}.sapphire-theme-default-dark,:host,.sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-semantic-size-breakpoint-xl: 1400px;--sapphire-semantic-size-breakpoint-l: 1200px;--sapphire-semantic-size-breakpoint-m: 960px;--sapphire-semantic-size-breakpoint-s: 768px;--sapphire-semantic-size-breakpoint-xs: 576px;--sapphire-semantic-size-width-panel-lg: 100%;--sapphire-semantic-size-width-panel-sm: 100%;--sapphire-semantic-font-weight-display-bold: 700;--sapphire-semantic-font-weight-display-regular: 400;--sapphire-semantic-font-weight-default-bold: 700;--sapphire-semantic-font-weight-default-semibold: 600;--sapphire-semantic-font-weight-default-regular: 400;--sapphire-global-time-2000: 2s;--sapphire-global-time-1800: 1.8s;--sapphire-global-time-1000: 1s;--sapphire-global-time-400: .4s;--sapphire-global-time-200: .2s;--sapphire-global-time-100: .1s;--sapphire-global-size-ratio-height: .875;--sapphire-global-size-line-height-md: 1.5;--sapphire-global-size-line-height-sm: 1.2;--sapphire-global-size-font-300: 3rem;--sapphire-global-size-font-220: 2.1875rem;--sapphire-global-size-font-188: 1.875rem;--sapphire-global-size-font-150: 1.5rem;--sapphire-global-size-font-130: 1.3125rem;--sapphire-global-size-font-112: 1.125rem;--sapphire-global-size-font-106: 1.0625rem;--sapphire-global-size-font-100: 1rem;--sapphire-global-size-font-88: .875rem;--sapphire-global-size-font-75: .75rem;--sapphire-global-size-font-60: .625rem;--sapphire-global-size-generic-4320: 108rem;--sapphire-global-size-generic-3780: 94.5rem;--sapphire-global-size-generic-3600: 90rem;--sapphire-global-size-generic-3200: 80rem;--sapphire-global-size-generic-2560: 64rem;--sapphire-global-size-generic-2400: 60rem;--sapphire-global-size-generic-1920: 48rem;--sapphire-global-size-generic-1600: 40rem;--sapphire-global-size-generic-1400: 35rem;--sapphire-global-size-generic-1280: 32rem;--sapphire-global-size-generic-1200: 30rem;--sapphire-global-size-generic-1120: 28rem;--sapphire-global-size-generic-1000: 25rem;--sapphire-global-size-generic-960: 24rem;--sapphire-global-size-generic-940: 23.5rem;--sapphire-global-size-generic-900: 22.5rem;--sapphire-global-size-generic-800: 20rem;--sapphire-global-size-generic-750: 18.75rem;--sapphire-global-size-generic-640: 16rem;--sapphire-global-size-generic-600: 15rem;--sapphire-global-size-generic-560: 14rem;--sapphire-global-size-generic-480: 12rem;--sapphire-global-size-generic-400: 10rem;--sapphire-global-size-generic-340: 8.5rem;--sapphire-global-size-generic-320: 8rem;--sapphire-global-size-generic-300: 7.5rem;--sapphire-global-size-generic-280: 7rem;--sapphire-global-size-generic-240: 6rem;--sapphire-global-size-generic-200: 5rem;--sapphire-global-size-generic-180: 4.5rem;--sapphire-global-size-generic-160: 4rem;--sapphire-global-size-generic-140: 3.5rem;--sapphire-global-size-generic-120: 3rem;--sapphire-global-size-generic-100: 2.5rem;--sapphire-global-size-generic-80: 2rem;--sapphire-global-size-generic-60: 1.5rem;--sapphire-global-size-generic-50: 1.25rem;--sapphire-global-size-generic-40: 1rem;--sapphire-global-size-generic-35: .875rem;--sapphire-global-size-generic-30: .75rem;--sapphire-global-size-generic-25: .625rem;--sapphire-global-size-generic-20: .5rem;--sapphire-global-size-generic-15: .375rem;--sapphire-global-size-generic-10: .25rem;--sapphire-global-size-generic-5: .125rem;--sapphire-global-size-generic-2: .0625rem;--sapphire-global-size-generic-0: 0rem;--sapphire-global-size-static-60: 24px;--sapphire-global-size-static-30: 12px;--sapphire-global-size-static-20: 8px;--sapphire-global-size-static-10: 4px;--sapphire-global-size-static-5: 2px;--sapphire-global-size-static-2: 1px;--sapphire-global-size-static-0: 0px;--sapphire-global-shadow-lg: 0px 0px 2px 0px rgba(34, 64, 82, .02), 0px -1.5px 6px 0px rgba(34, 64, 82, .03), 0px 4.5px 12px 0px rgba(34, 64, 82, .04), 0px 14.5px 18px 0px rgba(34, 64, 82, .04), 0px 26px 34px 0px rgba(34, 64, 82, .05), 0px 84px 92px 0px rgba(34, 64, 82, .07), 0px 0px 2px 0px rgba(34, 64, 82, .05), 0px 0px 1px 0px rgba(34, 64, 82, .2);--sapphire-global-shadow-md: 0px 0px 3px 0px rgba(34, 64, 82, .02), 0px 3px 7px 0px rgba(34, 64, 82, .03), 0px 6.5px 14px 0px rgba(34, 64, 82, .04), 0px 13px 29px 0px rgba(34, 64, 82, .05), 0px 36px 80px 0px rgba(34, 64, 82, .07), 0px 0px 2px 0px rgba(34, 64, 82, .05), 0px 0px 1px 0px rgba(34, 64, 82, .2);--sapphire-global-shadow-sm: 0px 0px 2px 0px rgba(34, 64, 82, .06), 0px 1.5px 4px 0px rgba(34, 64, 82, .04), 0px 4.5px 6px 0px rgba(34, 64, 82, .04), 0px 10.5px 12px 0px rgba(34, 64, 82, .03), 0px 25px 24px 0px rgba(34, 64, 82, .02), 0px 100px 64px 0px rgba(34, 64, 82, .02), 0px 0px 2px 0px rgba(34, 64, 82, .05), 0px 0px 1px 0px rgba(34, 64, 82, .2);--sapphire-global-opacity-50: .5;--sapphire-global-opacity-40: .4;--sapphire-global-opacity-35: .35;--sapphire-global-font-danske-human-name: \"Danske Human\";--sapphire-global-font-danske-text-name: \"Danske Text v2\";--sapphire-global-color-secondary-orange-600: hsl(19, 100%, 34%);--sapphire-global-color-secondary-orange-500: hsl(17, 100%, 43%);--sapphire-global-color-secondary-orange-400: hsl(19, 84%, 54%);--sapphire-global-color-secondary-orange-300: hsl(21, 84%, 66%);--sapphire-global-color-secondary-orange-200: hsl(23, 83%, 79%);--sapphire-global-color-secondary-orange-150: hsl(25, 84%, 86%);--sapphire-global-color-secondary-orange-100: hsl(26, 89%, 93%);--sapphire-global-color-secondary-orange-75: hsl(27, 85%, 95%);--sapphire-global-color-secondary-orange-50: hsl(28, 89%, 96%);--sapphire-global-color-secondary-teal-600: hsl(171, 100%, 22%);--sapphire-global-color-secondary-teal-500: hsl(171, 100%, 26%);--sapphire-global-color-secondary-teal-400: hsl(172, 50%, 42%);--sapphire-global-color-secondary-teal-300: hsl(172, 36%, 57%);--sapphire-global-color-secondary-teal-200: hsl(171, 36%, 74%);--sapphire-global-color-secondary-teal-150: hsl(171, 36%, 82%);--sapphire-global-color-secondary-teal-100: hsl(172, 35%, 92%);--sapphire-global-color-secondary-teal-75: hsl(170, 38%, 94%);--sapphire-global-color-secondary-teal-50: hsl(171, 33%, 96%);--sapphire-global-color-secondary-forest-green-600: hsl(105, 93%, 23%);--sapphire-global-color-secondary-forest-green-500: hsl(105, 93%, 28%);--sapphire-global-color-secondary-forest-green-400: hsl(105, 48%, 43%);--sapphire-global-color-secondary-forest-green-300: hsl(105, 36%, 58%);--sapphire-global-color-secondary-forest-green-200: hsl(105, 36%, 74%);--sapphire-global-color-secondary-forest-green-150: hsl(105, 36%, 82%);--sapphire-global-color-secondary-forest-green-100: hsl(104, 35%, 92%);--sapphire-global-color-secondary-forest-green-75: hsl(109, 35%, 94%);--sapphire-global-color-secondary-forest-green-50: hsl(111, 33%, 96%);--sapphire-global-color-secondary-cobalt-600: hsl(215, 87%, 42%);--sapphire-global-color-secondary-cobalt-500: hsl(215, 92%, 51%);--sapphire-global-color-secondary-cobalt-400: hsl(215, 92%, 62%);--sapphire-global-color-secondary-cobalt-300: hsl(215, 92%, 72%);--sapphire-global-color-secondary-cobalt-200: hsl(215, 91%, 83%);--sapphire-global-color-secondary-cobalt-150: hsl(216, 93%, 89%);--sapphire-global-color-secondary-cobalt-100: hsl(216, 93%, 95%);--sapphire-global-color-secondary-cobalt-75: hsl(215, 90%, 96%);--sapphire-global-color-secondary-cobalt-50: hsl(215, 86%, 97%);--sapphire-global-color-secondary-gray-600: hsl(202, 6%, 38%);--sapphire-global-color-secondary-gray-500: hsl(201, 6%, 46%);--sapphire-global-color-secondary-gray-400: hsl(200, 5%, 56%);--sapphire-global-color-secondary-gray-300: hsl(203, 5%, 67%);--sapphire-global-color-secondary-gray-200: hsl(200, 6%, 79%);--sapphire-global-color-secondary-gray-150: hsl(195, 6%, 86%);--sapphire-global-color-secondary-gray-100: hsl(210, 6%, 93%);--sapphire-global-color-secondary-gray-75: hsl(240, 4%, 95%);--sapphire-global-color-secondary-gray-50: hsl(180, 6%, 97%);--sapphire-global-color-secondary-orchid-600: hsl(304, 36%, 42%);--sapphire-global-color-secondary-orchid-500: hsl(304, 37%, 51%);--sapphire-global-color-secondary-orchid-400: hsl(304, 37%, 61%);--sapphire-global-color-secondary-orchid-300: hsl(303, 37%, 71%);--sapphire-global-color-secondary-orchid-200: hsl(304, 37%, 82%);--sapphire-global-color-secondary-orchid-150: hsl(305, 38%, 88%);--sapphire-global-color-secondary-orchid-100: hsl(305, 38%, 94%);--sapphire-global-color-secondary-orchid-75: hsl(300, 36%, 96%);--sapphire-global-color-secondary-orchid-50: hsl(300, 33%, 97%);--sapphire-global-color-secondary-beige-600: hsl(38, 20%, 35%);--sapphire-global-color-secondary-beige-500: hsl(40, 20%, 43%);--sapphire-global-color-secondary-beige-400: hsl(38, 15%, 54%);--sapphire-global-color-secondary-beige-300: hsl(39, 16%, 65%);--sapphire-global-color-secondary-beige-200: hsl(41, 14%, 78%);--sapphire-global-color-secondary-beige-150: hsl(40, 16%, 85%);--sapphire-global-color-secondary-beige-100: hsl(40, 17%, 93%);--sapphire-global-color-secondary-beige-75: hsl(30, 15%, 95%);--sapphire-global-color-secondary-beige-50: hsl(30, 11%, 96%);--sapphire-global-color-secondary-gold-600: hsl(42, 97%, 25%);--sapphire-global-color-secondary-gold-500: hsl(42, 96%, 31%);--sapphire-global-color-secondary-gold-400: hsl(42, 54%, 45%);--sapphire-global-color-secondary-gold-300: hsl(42, 44%, 59%);--sapphire-global-color-secondary-gold-200: hsl(42, 44%, 74%);--sapphire-global-color-secondary-gold-150: hsl(43, 43%, 83%);--sapphire-global-color-secondary-gold-100: hsl(43, 43%, 92%);--sapphire-global-color-secondary-gold-75: hsl(42, 42%, 94%);--sapphire-global-color-secondary-gold-50: hsl(40, 43%, 96%);--sapphire-global-color-secondary-violet-600: hsl(248, 80%, 98%);--sapphire-global-color-secondary-violet-500: hsl(244, 70%, 96%);--sapphire-global-color-secondary-violet-400: hsl(246, 74%, 93%);--sapphire-global-color-secondary-violet-300: hsl(248, 74%, 89%);--sapphire-global-color-secondary-violet-200: hsl(246, 75%, 83%);--sapphire-global-color-secondary-violet-150: hsl(245, 74%, 76%);--sapphire-global-color-secondary-violet-100: hsl(245, 75%, 70%);--sapphire-global-color-secondary-violet-75: hsl(245, 65%, 97%);--sapphire-global-color-secondary-violet-50: hsl(245, 60%, 63%);--sapphire-global-color-secondary-purple-600: hsl(270, 28%, 45%);--sapphire-global-color-secondary-purple-500: hsl(270, 33%, 55%);--sapphire-global-color-secondary-purple-400: hsl(270, 33%, 64%);--sapphire-global-color-secondary-purple-300: hsl(270, 33%, 73%);--sapphire-global-color-secondary-purple-200: hsl(269, 33%, 83%);--sapphire-global-color-secondary-purple-150: hsl(272, 32%, 88%);--sapphire-global-color-secondary-purple-100: hsl(270, 36%, 95%);--sapphire-global-color-secondary-purple-75: hsl(274, 33%, 96%);--sapphire-global-color-secondary-purple-50: hsl(270, 29%, 97%);--sapphire-global-color-secondary-pink-600: hsl(330, 71%, 97%);--sapphire-global-color-secondary-pink-500: hsl(330, 62%, 95%);--sapphire-global-color-secondary-pink-400: hsl(333, 70%, 91%);--sapphire-global-color-secondary-pink-300: hsl(332, 69%, 86%);--sapphire-global-color-secondary-pink-200: hsl(333, 67%, 78%);--sapphire-global-color-secondary-pink-150: hsl(333, 66%, 69%);--sapphire-global-color-secondary-pink-100: hsl(333, 65%, 61%);--sapphire-global-color-secondary-pink-75: hsl(330, 50%, 96%);--sapphire-global-color-secondary-pink-50: hsl(333, 53%, 52%);--sapphire-global-color-secondary-lime-600: hsl(73, 66%, 94%);--sapphire-global-color-secondary-lime-500: hsl(74, 61%, 89%);--sapphire-global-color-secondary-lime-400: hsl(74, 52%, 81%);--sapphire-global-color-secondary-lime-300: hsl(74, 46%, 74%);--sapphire-global-color-secondary-lime-200: hsl(74, 42%, 59%);--sapphire-global-color-secondary-lime-150: hsl(73, 52%, 44%);--sapphire-global-color-secondary-lime-100: hsl(74, 100%, 29%);--sapphire-global-color-secondary-lime-75: hsl(66, 29%, 93%);--sapphire-global-color-secondary-lime-50: hsl(76, 100%, 25%);--sapphire-global-color-secondary-indigo-600: hsl(224, 100%, 98%);--sapphire-global-color-secondary-indigo-500: hsl(224, 100%, 96%);--sapphire-global-color-secondary-indigo-400: hsl(225, 100%, 92%);--sapphire-global-color-secondary-indigo-300: hsl(224, 100%, 88%);--sapphire-global-color-secondary-indigo-200: hsl(223, 100%, 81%);--sapphire-global-color-secondary-indigo-150: hsl(224, 100%, 74%);--sapphire-global-color-secondary-indigo-100: hsl(224, 100%, 66%);--sapphire-global-color-secondary-indigo-75: hsl(229, 100%, 97%);--sapphire-global-color-secondary-indigo-50: hsl(224, 81%, 59%);--sapphire-global-color-secondary-electro-600: hsl(204, 33%, 97%);--sapphire-global-color-secondary-electro-500: hsl(206, 44%, 94%);--sapphire-global-color-secondary-electro-400: hsl(207, 39%, 89%);--sapphire-global-color-secondary-electro-300: hsl(207, 38%, 84%);--sapphire-global-color-secondary-electro-200: hsl(206, 32%, 73%);--sapphire-global-color-secondary-electro-150: hsl(206, 31%, 63%);--sapphire-global-color-secondary-electro-100: hsl(206, 31%, 54%);--sapphire-global-color-secondary-electro-75: hsl(206, 28%, 95%);--sapphire-global-color-secondary-electro-50: hsl(206, 32%, 46%);--sapphire-global-color-secondary-copper-600: hsl(17, 54%, 97%);--sapphire-global-color-secondary-copper-500: hsl(15, 57%, 95%);--sapphire-global-color-secondary-copper-400: hsl(16, 56%, 89%);--sapphire-global-color-secondary-copper-300: hsl(15, 56%, 85%);--sapphire-global-color-secondary-copper-200: hsl(16, 57%, 75%);--sapphire-global-color-secondary-copper-150: hsl(16, 56%, 65%);--sapphire-global-color-secondary-copper-100: hsl(16, 57%, 55%);--sapphire-global-color-secondary-copper-75: hsl(16, 48%, 95%);--sapphire-global-color-secondary-copper-50: hsl(16, 54%, 47%);--sapphire-global-color-secondary-aqua-600: hsl(190, 60%, 96%);--sapphire-global-color-secondary-aqua-500: hsl(190, 57%, 92%);--sapphire-global-color-secondary-aqua-400: hsl(192, 56%, 86%);--sapphire-global-color-secondary-aqua-300: hsl(191, 55%, 79%);--sapphire-global-color-secondary-aqua-200: hsl(192, 49%, 67%);--sapphire-global-color-secondary-aqua-150: hsl(192, 48%, 54%);--sapphire-global-color-secondary-aqua-100: hsl(192, 66%, 42%);--sapphire-global-color-secondary-aqua-75: hsl(193, 47%, 94%);--sapphire-global-color-secondary-aqua-50: hsl(192, 82%, 34%);--sapphire-global-color-yellow-975: hsl(20, 95%, 8%);--sapphire-global-color-yellow-950: hsl(19, 89%, 11%);--sapphire-global-color-yellow-925: hsl(21, 87%, 15%);--sapphire-global-color-yellow-900: hsl(21, 88%, 19%);--sapphire-global-color-yellow-875: hsl(21, 86%, 23%);--sapphire-global-color-yellow-850: hsl(22, 85%, 27%);--sapphire-global-color-yellow-800: hsl(22, 88%, 29%);--sapphire-global-color-yellow-750: hsl(24, 89%, 33%);--sapphire-global-color-yellow-700: hsl(25, 93%, 37%);--sapphire-global-color-yellow-650: hsl(28, 94%, 41%);--sapphire-global-color-yellow-600: hsl(31, 93%, 44%);--sapphire-global-color-yellow-550: hsl(34, 94%, 48%);--sapphire-global-color-yellow-500: hsl(37, 95%, 52%);--sapphire-global-color-yellow-450: hsl(40, 95%, 54%);--sapphire-global-color-yellow-400: hsl(43, 98%, 55%);--sapphire-global-color-yellow-350: hsl(44, 98%, 60%);--sapphire-global-color-yellow-300: hsl(46, 98%, 64%);--sapphire-global-color-yellow-250: hsl(47, 97%, 70%);--sapphire-global-color-yellow-200: hsl(48, 98%, 76%);--sapphire-global-color-yellow-150: hsl(48, 98%, 79%);--sapphire-global-color-yellow-125: hsl(49, 97%, 85%);--sapphire-global-color-yellow-100: hsl(48, 100%, 89%);--sapphire-global-color-yellow-75: hsl(49, 100%, 92%);--sapphire-global-color-yellow-50: hsl(51, 100%, 96%);--sapphire-global-color-yellow-25: hsl(54, 100%, 98%);--sapphire-global-color-red-975: hsl(0, 100%, 99%);--sapphire-global-color-red-950: hsl(355, 100%, 98%);--sapphire-global-color-red-925: hsl(356, 100%, 97%);--sapphire-global-color-red-900: hsl(357, 100%, 96%);--sapphire-global-color-red-875: hsl(358, 100%, 94%);--sapphire-global-color-red-850: hsl(359, 100%, 91%);--sapphire-global-color-red-800: hsl(358, 92%, 86%);--sapphire-global-color-red-750: hsl(357, 88%, 81%);--sapphire-global-color-red-700: hsl(356, 82%, 76%);--sapphire-global-color-red-650: hsl(355, 79%, 71%);--sapphire-global-color-red-600: hsl(353, 75%, 65%);--sapphire-global-color-red-550: hsl(351, 73%, 59%);--sapphire-global-color-red-500: hsl(348, 72%, 53%);--sapphire-global-color-red-450: hsl(349, 61%, 48%);--sapphire-global-color-red-400: hsl(349, 60%, 44%);--sapphire-global-color-red-350: hsl(350, 57%, 39%);--sapphire-global-color-red-300: hsl(351, 55%, 35%);--sapphire-global-color-red-250: hsl(351, 54%, 31%);--sapphire-global-color-red-200: hsl(353, 50%, 26%);--sapphire-global-color-red-150: hsl(353, 48%, 21%);--sapphire-global-color-red-125: hsl(354, 44%, 18%);--sapphire-global-color-red-100: hsl(355, 43%, 15%);--sapphire-global-color-red-75: hsl(356, 41%, 14%);--sapphire-global-color-red-50: hsl(355, 38%, 12%);--sapphire-global-color-red-25: hsl(0, 33%, 10%);--sapphire-global-color-green-975: hsl(150, 40%, 98%);--sapphire-global-color-green-950: hsl(158, 40%, 96%);--sapphire-global-color-green-925: hsl(162, 33%, 94%);--sapphire-global-color-green-900: hsl(159, 35%, 92%);--sapphire-global-color-green-875: hsl(159, 37%, 88%);--sapphire-global-color-green-850: hsl(159, 36%, 83%);--sapphire-global-color-green-800: hsl(160, 36%, 74%);--sapphire-global-color-green-750: hsl(159, 36%, 66%);--sapphire-global-color-green-700: hsl(159, 36%, 57%);--sapphire-global-color-green-650: hsl(159, 37%, 50%);--sapphire-global-color-green-600: hsl(159, 51%, 42%);--sapphire-global-color-green-550: hsl(159, 71%, 34%);--sapphire-global-color-green-500: hsl(159, 100%, 27%);--sapphire-global-color-green-450: hsl(159, 100%, 24%);--sapphire-global-color-green-400: hsl(159, 100%, 22%);--sapphire-global-color-green-350: hsl(159, 100%, 19%);--sapphire-global-color-green-300: hsl(159, 100%, 17%);--sapphire-global-color-green-250: hsl(159, 100%, 15%);--sapphire-global-color-green-200: hsl(159, 100%, 13%);--sapphire-global-color-green-150: hsl(158, 100%, 10%);--sapphire-global-color-green-125: hsl(159, 100%, 9%);--sapphire-global-color-green-100: hsl(159, 100%, 7%);--sapphire-global-color-green-75: hsl(159, 100%, 7%);--sapphire-global-color-green-50: hsl(159, 100%, 6%);--sapphire-global-color-green-25: hsl(159, 100%, 5%);--sapphire-global-color-blue-975: hsl(204, 56%, 98%);--sapphire-global-color-blue-950: hsl(202, 65%, 97%);--sapphire-global-color-blue-925: hsl(206, 67%, 95%);--sapphire-global-color-blue-900: hsl(203, 64%, 94%);--sapphire-global-color-blue-875: hsl(204, 65%, 90%);--sapphire-global-color-blue-850: hsl(203, 64%, 86%);--sapphire-global-color-blue-800: hsl(203, 65%, 79%);--sapphire-global-color-blue-750: hsl(203, 64%, 72%);--sapphire-global-color-blue-700: hsl(203, 70%, 65%);--sapphire-global-color-blue-650: hsl(203, 75%, 57%);--sapphire-global-color-blue-600: hsl(203, 80%, 50%);--sapphire-global-color-blue-550: hsl(203, 90%, 44%);--sapphire-global-color-blue-500: hsl(203, 100%, 39%);--sapphire-global-color-blue-450: hsl(203, 100%, 35%);--sapphire-global-color-blue-400: hsl(203, 100%, 32%);--sapphire-global-color-blue-350: hsl(203, 100%, 29%);--sapphire-global-color-blue-300: hsl(203, 100%, 25%);--sapphire-global-color-blue-250: hsl(202, 100%, 22%);--sapphire-global-color-blue-200: hsl(203, 100%, 19%);--sapphire-global-color-blue-150: hsl(203, 100%, 15%);--sapphire-global-color-blue-125: hsl(203, 100%, 13%);--sapphire-global-color-blue-100: hsl(202, 100%, 11%);--sapphire-global-color-blue-75: hsl(203, 100%, 10%);--sapphire-global-color-blue-50: hsl(203, 100%, 9%);--sapphire-global-color-blue-25: hsl(202, 100%, 7%);--sapphire-global-color-sapphire-900-70p: hsla(210, 24%, 93%, .3);--sapphire-global-color-sapphire-900-4p: hsla(202, 100%, 11%, .04);--sapphire-global-color-sapphire-975: hsl(220, 33%, 98%);--sapphire-global-color-sapphire-950: hsl(216, 29%, 97%);--sapphire-global-color-sapphire-925: hsl(210, 23%, 95%);--sapphire-global-color-sapphire-900: hsl(210, 24%, 93%);--sapphire-global-color-sapphire-875: hsl(210, 19%, 90%);--sapphire-global-color-sapphire-850: hsl(208, 18%, 86%);--sapphire-global-color-sapphire-800: hsl(208, 18%, 79%);--sapphire-global-color-sapphire-750: hsl(207, 16%, 73%);--sapphire-global-color-sapphire-700: hsl(209, 17%, 66%);--sapphire-global-color-sapphire-650: hsl(206, 16%, 61%);--sapphire-global-color-sapphire-600: hsl(206, 15%, 56%);--sapphire-global-color-sapphire-550: hsl(206, 16%, 50%);--sapphire-global-color-sapphire-500: hsl(205, 16%, 46%);--sapphire-global-color-sapphire-450: hsl(205, 19%, 41%);--sapphire-global-color-sapphire-400: hsl(205, 23%, 37%);--sapphire-global-color-sapphire-350: hsl(203, 27%, 33%);--sapphire-global-color-sapphire-300: hsl(204, 32%, 29%);--sapphire-global-color-sapphire-250: hsl(204, 41%, 25%);--sapphire-global-color-sapphire-200: hsl(203, 50%, 21%);--sapphire-global-color-sapphire-150: hsl(202, 68%, 16%);--sapphire-global-color-sapphire-125: hsl(201, 82%, 13%);--sapphire-global-color-sapphire-100: hsl(202, 100%, 11%);--sapphire-global-color-sapphire-75: hsl(202, 100%, 10%);--sapphire-global-color-sapphire-50: hsl(203, 100%, 9%);--sapphire-global-color-sapphire-25: hsl(202, 100%, 7%);--sapphire-global-color-neutral-transparent: hsla(0, 0%, 100%, 0);--sapphire-global-color-neutral-black: hsl(0, 0%, 0%);--sapphire-global-color-neutral-white: hsl(0, 0%, 100%);--sapphire-semantic-time-motion-quick: var(--sapphire-global-time-100);--sapphire-semantic-time-motion-default: var(--sapphire-global-time-200);--sapphire-semantic-time-motion-slow: var(--sapphire-global-time-400);--sapphire-semantic-time-motion-very-slow: var(--sapphire-global-time-1000);--sapphire-semantic-time-fade-slow: var(--sapphire-global-time-1800);--sapphire-semantic-time-fade-quick: var(--sapphire-global-time-100);--sapphire-semantic-time-fade-default: var(--sapphire-global-time-200);--sapphire-semantic-size-spacing-80: var(--sapphire-global-size-generic-160);--sapphire-semantic-size-spacing-70: var(--sapphire-global-size-generic-100);--sapphire-semantic-size-spacing-60: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-spacing-50: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-spacing-40: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-spacing-30: var(--sapphire-global-size-generic-30);--sapphire-semantic-size-spacing-25: var(--sapphire-global-size-generic-25);--sapphire-semantic-size-spacing-20: var(--sapphire-global-size-generic-20);--sapphire-semantic-size-spacing-10: var(--sapphire-global-size-generic-10);--sapphire-semantic-size-spacing-5: var(--sapphire-global-size-generic-5);--sapphire-semantic-size-line-height-md: var(--sapphire-global-size-line-height-md);--sapphire-semantic-size-line-height-sm: var(--sapphire-global-size-line-height-sm);--sapphire-semantic-size-font-control-default: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-control-md: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-control-sm: var(--sapphire-global-size-font-75);--sapphire-semantic-size-font-label-lg: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-label-md: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-label-sm: var(--sapphire-global-size-font-75);--sapphire-semantic-size-font-text-lg: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-text-md: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-text-sm: var(--sapphire-global-size-font-75);--sapphire-semantic-size-radius-xl: var(--sapphire-global-size-static-60);--sapphire-semantic-size-radius-lg: var(--sapphire-global-size-static-30);--sapphire-semantic-size-radius-md: var(--sapphire-global-size-static-20);--sapphire-semantic-size-radius-sm: var(--sapphire-global-size-static-10);--sapphire-semantic-size-radius-xs: var(--sapphire-global-size-static-5);--sapphire-semantic-size-border-lg: var(--sapphire-global-size-static-10);--sapphire-semantic-size-border-md: var(--sapphire-global-size-static-5);--sapphire-semantic-size-border-sm: var(--sapphire-global-size-static-2);--sapphire-semantic-size-icon-xl: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-icon-lg: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-icon-md: var(--sapphire-global-size-generic-50);--sapphire-semantic-size-icon-sm: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-width-control-default: var(--sapphire-global-size-generic-750);--sapphire-semantic-size-height-box-md: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-height-control-xl: var(--sapphire-global-size-generic-140);--sapphire-semantic-size-height-control-lg: var(--sapphire-global-size-generic-120);--sapphire-semantic-size-height-control-md: var(--sapphire-global-size-generic-100);--sapphire-semantic-size-height-control-sm: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-height-control-xs: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-height-control-2xs: var(--sapphire-global-size-generic-50);--sapphire-semantic-shadow-popover: var(--sapphire-global-shadow-md);--sapphire-semantic-opacity-disabled: var(--sapphire-global-opacity-40);--sapphire-semantic-opacity-50: var(--sapphire-global-opacity-50);--sapphire-semantic-font-name-display: var(--sapphire-global-font-danske-human-name);--sapphire-semantic-font-name-default: var(--sapphire-global-font-danske-text-name);--sapphire-semantic-color-content-decorative-orange-secondary-default: var(--sapphire-global-color-secondary-orange-600);--sapphire-semantic-color-content-decorative-orange-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-teal-secondary-default: var(--sapphire-global-color-secondary-teal-600);--sapphire-semantic-color-content-decorative-teal-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-forest-green-secondary-default: var(--sapphire-global-color-secondary-forest-green-600);--sapphire-semantic-color-content-decorative-forest-green-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-cobalt-secondary-default: var(--sapphire-global-color-secondary-cobalt-600);--sapphire-semantic-color-content-decorative-cobalt-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-gray-secondary-default: var(--sapphire-global-color-secondary-gray-600);--sapphire-semantic-color-content-decorative-gray-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-orchid-secondary-default: var(--sapphire-global-color-secondary-orchid-600);--sapphire-semantic-color-content-decorative-orchid-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-beige-secondary-default: var(--sapphire-global-color-secondary-beige-600);--sapphire-semantic-color-content-decorative-beige-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-gold-secondary-default: var(--sapphire-global-color-secondary-gold-600);--sapphire-semantic-color-content-decorative-gold-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-violet-secondary-default: var(--sapphire-global-color-secondary-violet-600);--sapphire-semantic-color-content-decorative-violet-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-pink-secondary-default: var(--sapphire-global-color-secondary-pink-600);--sapphire-semantic-color-content-decorative-pink-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-lime-secondary-default: var(--sapphire-global-color-secondary-lime-600);--sapphire-semantic-color-content-decorative-lime-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-indigo-secondary-default: var(--sapphire-global-color-secondary-indigo-600);--sapphire-semantic-color-content-decorative-indigo-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-electro-secondary-default: var(--sapphire-global-color-secondary-electro-600);--sapphire-semantic-color-content-decorative-electro-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-copper-secondary-default: var(--sapphire-global-color-secondary-copper-600);--sapphire-semantic-color-content-decorative-copper-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-aqua-secondary-default: var(--sapphire-global-color-secondary-aqua-600);--sapphire-semantic-color-content-decorative-aqua-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-passive-secondary-default: var(--sapphire-global-color-sapphire-550);--sapphire-semantic-color-content-passive-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-informative-secondary-default: var(--sapphire-global-color-blue-550);--sapphire-semantic-color-content-informative-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-warning-secondary-default: var(--sapphire-global-color-yellow-700);--sapphire-semantic-color-content-negative-secondary-active: var(--sapphire-global-color-red-700);--sapphire-semantic-color-content-negative-secondary-hover: var(--sapphire-global-color-red-600);--sapphire-semantic-color-content-negative-secondary-default: var(--sapphire-global-color-red-550);--sapphire-semantic-color-content-negative-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-positive-secondary-default: var(--sapphire-global-color-green-550);--sapphire-semantic-color-content-positive-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-selection-unselected-active: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-selection-unselected-hover: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-selection-unselected-default: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-selection-selected-active: var(--sapphire-global-color-blue-700);--sapphire-semantic-color-content-selection-selected-hover: var(--sapphire-global-color-blue-600);--sapphire-semantic-color-content-selection-selected-default: var(--sapphire-global-color-blue-550);--sapphire-semantic-color-content-action-tertiary-active: var(--sapphire-global-color-sapphire-975);--sapphire-semantic-color-content-action-tertiary-hover: var(--sapphire-global-color-sapphire-950);--sapphire-semantic-color-content-action-tertiary-default: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-action-secondary-active: var(--sapphire-global-color-blue-700);--sapphire-semantic-color-content-action-secondary-hover: var(--sapphire-global-color-blue-600);--sapphire-semantic-color-content-action-secondary-default: var(--sapphire-global-color-blue-550);--sapphire-semantic-color-content-action-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-default-secondary: var(--sapphire-global-color-sapphire-600);--sapphire-semantic-color-content-default-primary: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-focus-ring: var(--sapphire-global-color-blue-400);--sapphire-semantic-color-border-decorative-orange-secondary-default: var(--sapphire-global-color-secondary-orange-200);--sapphire-semantic-color-border-decorative-teal-secondary-default: var(--sapphire-global-color-secondary-teal-200);--sapphire-semantic-color-border-decorative-forest-green-secondary-default: var(--sapphire-global-color-secondary-forest-green-200);--sapphire-semantic-color-border-decorative-cobalt-secondary-default: var(--sapphire-global-color-secondary-cobalt-200);--sapphire-semantic-color-border-decorative-gray-secondary-default: var(--sapphire-global-color-secondary-gray-200);--sapphire-semantic-color-border-decorative-orchid-secondary-default: var(--sapphire-global-color-secondary-orchid-200);--sapphire-semantic-color-border-decorative-beige-secondary-default: var(--sapphire-global-color-secondary-beige-200);--sapphire-semantic-color-border-decorative-gold-secondary-default: var(--sapphire-global-color-secondary-gold-200);--sapphire-semantic-color-border-decorative-violet-secondary-default: var(--sapphire-global-color-secondary-violet-200);--sapphire-semantic-color-border-decorative-pink-secondary-default: var(--sapphire-global-color-secondary-pink-200);--sapphire-semantic-color-border-decorative-lime-secondary-default: var(--sapphire-global-color-secondary-lime-200);--sapphire-semantic-color-border-decorative-indigo-secondary-default: var(--sapphire-global-color-secondary-indigo-200);--sapphire-semantic-color-border-decorative-electro-secondary-default: var(--sapphire-global-color-secondary-electro-200);--sapphire-semantic-color-border-decorative-copper-secondary-default: var(--sapphire-global-color-secondary-copper-200);--sapphire-semantic-color-border-decorative-aqua-secondary-default: var(--sapphire-global-color-secondary-aqua-200);--sapphire-semantic-color-border-informative-secondary-default: var(--sapphire-global-color-blue-200);--sapphire-semantic-color-border-warning-secondary-default: var(--sapphire-global-color-yellow-300);--sapphire-semantic-color-border-positive-secondary-default: var(--sapphire-global-color-green-200);--sapphire-semantic-color-border-negative-secondary-default: var(--sapphire-global-color-red-200);--sapphire-semantic-color-border-field-error: var(--sapphire-global-color-red-500);--sapphire-semantic-color-border-tertiary-default: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-border-secondary-default: var(--sapphire-global-color-sapphire-150);--sapphire-semantic-color-border-primary-active: var(--sapphire-global-color-sapphire-300);--sapphire-semantic-color-border-primary-hover: var(--sapphire-global-color-sapphire-250);--sapphire-semantic-color-border-primary-default: var(--sapphire-global-color-sapphire-200);--sapphire-semantic-color-background-skeleton-default: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-popover-default: var(--sapphire-global-color-sapphire-25);--sapphire-semantic-color-background-backdrop: var(--sapphire-global-color-sapphire-900-70p);--sapphire-semantic-color-background-surface: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-control-special-secondary-default: var(--sapphire-global-color-sapphire-200);--sapphire-semantic-color-background-control-special-primary-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-control-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-field-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-decorative-orange-secondary-default: var(--sapphire-global-color-secondary-orange-50);--sapphire-semantic-color-background-decorative-orange-primary-default: var(--sapphire-global-color-secondary-orange-400);--sapphire-semantic-color-background-decorative-teal-secondary-default: var(--sapphire-global-color-secondary-teal-50);--sapphire-semantic-color-background-decorative-teal-primary-default: var(--sapphire-global-color-secondary-teal-500);--sapphire-semantic-color-background-decorative-forest-green-secondary-default: var(--sapphire-global-color-secondary-forest-green-50);--sapphire-semantic-color-background-decorative-forest-green-primary-default: var(--sapphire-global-color-secondary-forest-green-500);--sapphire-semantic-color-background-decorative-cobalt-secondary-default: var(--sapphire-global-color-secondary-cobalt-50);--sapphire-semantic-color-background-decorative-cobalt-primary-default: var(--sapphire-global-color-secondary-cobalt-500);--sapphire-semantic-color-background-decorative-gray-secondary-default: var(--sapphire-global-color-secondary-gray-50);--sapphire-semantic-color-background-decorative-gray-primary-default: var(--sapphire-global-color-secondary-gray-500);--sapphire-semantic-color-background-decorative-orchid-secondary-default: var(--sapphire-global-color-secondary-orchid-50);--sapphire-semantic-color-background-decorative-orchid-primary-default: var(--sapphire-global-color-secondary-orchid-500);--sapphire-semantic-color-background-decorative-beige-secondary-default: var(--sapphire-global-color-secondary-beige-50);--sapphire-semantic-color-background-decorative-beige-primary-default: var(--sapphire-global-color-secondary-beige-500);--sapphire-semantic-color-background-decorative-gold-secondary-default: var(--sapphire-global-color-secondary-gold-50);--sapphire-semantic-color-background-decorative-gold-primary-default: var(--sapphire-global-color-secondary-gold-500);--sapphire-semantic-color-background-decorative-violet-secondary-default: var(--sapphire-global-color-secondary-violet-100);--sapphire-semantic-color-background-decorative-violet-primary-default: var(--sapphire-global-color-secondary-violet-500);--sapphire-semantic-color-background-decorative-pink-secondary-default: var(--sapphire-global-color-secondary-pink-100);--sapphire-semantic-color-background-decorative-pink-primary-default: var(--sapphire-global-color-secondary-pink-500);--sapphire-semantic-color-background-decorative-lime-secondary-default: var(--sapphire-global-color-secondary-lime-100);--sapphire-semantic-color-background-decorative-lime-primary-default: var(--sapphire-global-color-secondary-lime-500);--sapphire-semantic-color-background-decorative-indigo-secondary-default: var(--sapphire-global-color-secondary-indigo-100);--sapphire-semantic-color-background-decorative-indigo-primary-default: var(--sapphire-global-color-secondary-indigo-500);--sapphire-semantic-color-background-decorative-electro-secondary-default: var(--sapphire-global-color-secondary-electro-100);--sapphire-semantic-color-background-decorative-electro-primary-default: var(--sapphire-global-color-secondary-electro-500);--sapphire-semantic-color-background-decorative-copper-secondary-default: var(--sapphire-global-color-secondary-copper-100);--sapphire-semantic-color-background-decorative-copper-primary-default: var(--sapphire-global-color-secondary-copper-500);--sapphire-semantic-color-background-decorative-aqua-secondary-default: var(--sapphire-global-color-secondary-aqua-100);--sapphire-semantic-color-background-decorative-aqua-primary-default: var(--sapphire-global-color-secondary-aqua-500);--sapphire-semantic-color-background-passive-secondary-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-passive-primary-default: var(--sapphire-global-color-sapphire-450);--sapphire-semantic-color-background-informative-secondary-default: var(--sapphire-global-color-blue-50);--sapphire-semantic-color-background-informative-primary-default: var(--sapphire-global-color-blue-500);--sapphire-semantic-color-background-warning-secondary-default: var(--sapphire-global-color-yellow-75);--sapphire-semantic-color-background-warning-primary-default: var(--sapphire-global-color-yellow-300);--sapphire-semantic-color-background-positive-secondary-default: var(--sapphire-global-color-green-50);--sapphire-semantic-color-background-positive-primary-default: var(--sapphire-global-color-green-500);--sapphire-semantic-color-background-negative-secondary-active: var(--sapphire-global-color-red-100);--sapphire-semantic-color-background-negative-secondary-hover: var(--sapphire-global-color-red-75);--sapphire-semantic-color-background-negative-secondary-default: var(--sapphire-global-color-red-50);--sapphire-semantic-color-background-negative-primary-active: var(--sapphire-global-color-red-650);--sapphire-semantic-color-background-negative-primary-hover: var(--sapphire-global-color-red-600);--sapphire-semantic-color-background-negative-primary-default: var(--sapphire-global-color-red-500);--sapphire-semantic-color-background-selection-unselected-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-selection-unselected-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-selection-unselected-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-selection-selected-active: var(--sapphire-global-color-blue-100);--sapphire-semantic-color-background-selection-selected-hover: var(--sapphire-global-color-blue-75);--sapphire-semantic-color-background-selection-selected-default: var(--sapphire-global-color-blue-50);--sapphire-semantic-color-background-action-danger-text: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-danger-ghost-default: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-tertiary-text: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-tertiary-ghost-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-tertiary-ghost-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-tertiary-ghost-default: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-tertiary-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-tertiary-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-tertiary-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-action-secondary-text: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-secondary-ghost-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-secondary-ghost-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-secondary-ghost-default: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-secondary-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-secondary-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-secondary-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-action-primary-active: var(--sapphire-global-color-blue-650);--sapphire-semantic-color-background-action-primary-hover: var(--sapphire-global-color-blue-600);--sapphire-semantic-color-background-action-primary-default: var(--sapphire-global-color-blue-500);--sapphire-semantic-size-spacing-container-horizontal-md: var(--sapphire-semantic-size-spacing-60);--sapphire-semantic-size-spacing-container-horizontal-sm: var(--sapphire-semantic-size-spacing-30);--sapphire-semantic-size-spacing-data-collection-item-horizontal-lg: var(--sapphire-semantic-size-spacing-40);--sapphire-semantic-size-spacing-data-collection-item-horizontal-md: var(--sapphire-semantic-size-spacing-30);--sapphire-semantic-size-spacing-data-collection-item-horizontal-sm: var(--sapphire-semantic-size-spacing-20);--sapphire-semantic-size-spacing-control-horizontal-lg: var(--sapphire-semantic-size-spacing-30);--sapphire-semantic-size-spacing-control-horizontal-md: var(--sapphire-semantic-size-spacing-25);--sapphire-semantic-size-spacing-control-vertical-lg: var(--sapphire-semantic-size-spacing-30);--sapphire-semantic-size-spacing-control-vertical-md: var(--sapphire-semantic-size-spacing-25);--sapphire-semantic-size-spacing-control-vertical-sm: var(--sapphire-semantic-size-spacing-10);--sapphire-semantic-size-radius-popover: var(--sapphire-semantic-size-radius-md);--sapphire-semantic-size-focus-ring: var(--sapphire-semantic-size-border-md);--sapphire-semantic-size-height-box-lg: var(--sapphire-semantic-size-height-control-2xs);--sapphire-semantic-size-height-input-md: var(--sapphire-semantic-size-height-control-md);--sapphire-semantic-size-height-input-lg: var(--sapphire-semantic-size-height-control-lg);--sapphire-semantic-color-cursor-default: var(--sapphire-semantic-color-background-action-primary-default);--sapphire-semantic-color-content-warning-primary-default: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-link-secondary-active: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-link-secondary-hover: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-link-secondary-default: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-link-primary-active: var(--sapphire-semantic-color-content-action-secondary-active);--sapphire-semantic-color-content-link-primary-hover: var(--sapphire-semantic-color-content-action-secondary-hover);--sapphire-semantic-color-content-link-primary-default: var(--sapphire-semantic-color-content-action-secondary-default);--sapphire-semantic-color-content-action-danger-active: var(--sapphire-semantic-color-content-negative-secondary-active);--sapphire-semantic-color-content-action-danger-hover: var(--sapphire-semantic-color-content-negative-secondary-hover);--sapphire-semantic-color-content-action-danger-default: var(--sapphire-semantic-color-content-negative-secondary-default);--sapphire-semantic-color-border-passive-secondary-default: var(--sapphire-semantic-color-border-primary-default);--sapphire-semantic-color-border-separator-default: var(--sapphire-semantic-color-border-tertiary-default);--sapphire-semantic-color-border-control-active: var(--sapphire-semantic-color-border-primary-active);--sapphire-semantic-color-border-control-hover: var(--sapphire-semantic-color-border-primary-hover);--sapphire-semantic-color-border-control-default: var(--sapphire-semantic-color-border-primary-default);--sapphire-semantic-color-background-spinner-secondary-default: var(--sapphire-semantic-color-background-action-primary-default);--sapphire-semantic-color-background-spinner-primary-default: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-background-action-danger-ghost-active: var(--sapphire-semantic-color-background-negative-secondary-active);--sapphire-semantic-color-background-action-danger-ghost-hover: var(--sapphire-semantic-color-background-negative-secondary-hover);--sapphire-semantic-color-background-action-danger-active: var(--sapphire-semantic-color-background-negative-secondary-active);--sapphire-semantic-color-background-action-danger-hover: var(--sapphire-semantic-color-background-negative-secondary-hover);--sapphire-semantic-color-background-action-danger-default: var(--sapphire-semantic-color-background-negative-secondary-default);--sapphire-semantic-color-border-field-default: var(--sapphire-semantic-color-border-control-default)}@media screen and (min-width: 768px){.sapphire-theme-default-dark,:host,.sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-semantic-size-width-panel-sm: var(--sapphire-global-size-generic-1120);--sapphire-semantic-size-width-panel-lg: var(--sapphire-global-size-generic-1600)}}@media (prefers-reduced-motion){.sapphire-theme-default-dark,:host,.sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-semantic-time-motion-very-slow: var(--sapphire-global-time-2000);--sapphire-semantic-time-motion-slow: 0s;--sapphire-semantic-time-motion-default: 0s;--sapphire-semantic-time-motion-quick: 0s}}.sapphire-theme-default-dark.sapphire-theme--contrast,.sapphire-theme-default-dark .sapphire-theme--contrast,:host .sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-global-color-sapphire-25: hsl(220, 33%, 98%);--sapphire-global-color-sapphire-50: hsl(216, 29%, 97%);--sapphire-global-color-sapphire-75: hsl(210, 23%, 95%);--sapphire-global-color-sapphire-100: hsl(210, 24%, 93%);--sapphire-global-color-sapphire-125: hsl(210, 19%, 90%);--sapphire-global-color-sapphire-150: hsl(208, 18%, 86%);--sapphire-global-color-sapphire-200: hsl(208, 18%, 79%);--sapphire-global-color-sapphire-250: hsl(207, 16%, 73%);--sapphire-global-color-sapphire-300: hsl(209, 17%, 66%);--sapphire-global-color-sapphire-350: hsl(206, 16%, 61%);--sapphire-global-color-sapphire-400: hsl(206, 15%, 56%);--sapphire-global-color-sapphire-450: hsl(206, 16%, 50%);--sapphire-global-color-sapphire-500: hsl(205, 16%, 46%);--sapphire-global-color-sapphire-550: hsl(205, 19%, 41%);--sapphire-global-color-sapphire-600: hsl(205, 23%, 37%);--sapphire-global-color-sapphire-650: hsl(203, 27%, 33%);--sapphire-global-color-sapphire-700: hsl(204, 32%, 29%);--sapphire-global-color-sapphire-750: hsl(204, 41%, 25%);--sapphire-global-color-sapphire-800: hsl(203, 50%, 21%);--sapphire-global-color-sapphire-850: hsl(202, 68%, 16%);--sapphire-global-color-sapphire-875: hsl(201, 82%, 13%);--sapphire-global-color-sapphire-900: hsl(202, 100%, 11%);--sapphire-global-color-sapphire-925: hsl(202, 100%, 10%);--sapphire-global-color-sapphire-950: hsl(203, 100%, 9%);--sapphire-global-color-sapphire-975: hsl(202, 100%, 7%);--sapphire-global-color-sapphire-900-70p: hsla(202, 100%, 11%, .7);--sapphire-global-color-sapphire-900-4p: hsla(202, 100%, 11%, .04);--sapphire-global-color-blue-25: hsl(204, 56%, 98%);--sapphire-global-color-blue-50: hsl(202, 65%, 97%);--sapphire-global-color-blue-75: hsl(206, 67%, 95%);--sapphire-global-color-blue-100: hsl(203, 64%, 94%);--sapphire-global-color-blue-125: hsl(204, 65%, 90%);--sapphire-global-color-blue-150: hsl(203, 64%, 86%);--sapphire-global-color-blue-200: hsl(203, 65%, 79%);--sapphire-global-color-blue-250: hsl(203, 64%, 72%);--sapphire-global-color-blue-300: hsl(203, 70%, 65%);--sapphire-global-color-blue-350: hsl(203, 75%, 57%);--sapphire-global-color-blue-400: hsl(203, 80%, 50%);--sapphire-global-color-blue-450: hsl(203, 90%, 44%);--sapphire-global-color-blue-500: hsl(203, 100%, 39%);--sapphire-global-color-blue-550: hsl(203, 100%, 35%);--sapphire-global-color-blue-600: hsl(203, 100%, 32%);--sapphire-global-color-blue-650: hsl(203, 100%, 29%);--sapphire-global-color-blue-700: hsl(203, 100%, 25%);--sapphire-global-color-blue-750: hsl(202, 100%, 22%);--sapphire-global-color-blue-800: hsl(203, 100%, 19%);--sapphire-global-color-blue-850: hsl(203, 100%, 15%);--sapphire-global-color-blue-875: hsl(203, 100%, 13%);--sapphire-global-color-blue-900: hsl(202, 100%, 11%);--sapphire-global-color-blue-925: hsl(203, 100%, 10%);--sapphire-global-color-blue-950: hsl(203, 100%, 9%);--sapphire-global-color-blue-975: hsl(202, 100%, 7%);--sapphire-global-color-green-25: hsl(150, 40%, 98%);--sapphire-global-color-green-50: hsl(158, 40%, 96%);--sapphire-global-color-green-75: hsl(162, 33%, 94%);--sapphire-global-color-green-100: hsl(159, 35%, 92%);--sapphire-global-color-green-125: hsl(159, 37%, 88%);--sapphire-global-color-green-150: hsl(159, 36%, 83%);--sapphire-global-color-green-200: hsl(160, 36%, 74%);--sapphire-global-color-green-250: hsl(159, 36%, 66%);--sapphire-global-color-green-300: hsl(159, 36%, 57%);--sapphire-global-color-green-350: hsl(159, 37%, 50%);--sapphire-global-color-green-400: hsl(159, 51%, 42%);--sapphire-global-color-green-450: hsl(159, 71%, 34%);--sapphire-global-color-green-500: hsl(159, 100%, 27%);--sapphire-global-color-green-550: hsl(159, 100%, 24%);--sapphire-global-color-green-600: hsl(159, 100%, 22%);--sapphire-global-color-green-650: hsl(159, 100%, 19%);--sapphire-global-color-green-700: hsl(159, 100%, 17%);--sapphire-global-color-green-750: hsl(159, 100%, 15%);--sapphire-global-color-green-800: hsl(159, 100%, 13%);--sapphire-global-color-green-850: hsl(158, 100%, 10%);--sapphire-global-color-green-875: hsl(159, 100%, 9%);--sapphire-global-color-green-900: hsl(159, 100%, 7%);--sapphire-global-color-green-925: hsl(159, 100%, 7%);--sapphire-global-color-green-950: hsl(159, 100%, 6%);--sapphire-global-color-green-975: hsl(159, 100%, 5%);--sapphire-global-color-red-25: hsl(0, 100%, 99%);--sapphire-global-color-red-50: hsl(355, 100%, 98%);--sapphire-global-color-red-75: hsl(356, 100%, 97%);--sapphire-global-color-red-100: hsl(357, 100%, 96%);--sapphire-global-color-red-125: hsl(358, 100%, 94%);--sapphire-global-color-red-150: hsl(359, 100%, 91%);--sapphire-global-color-red-200: hsl(358, 92%, 86%);--sapphire-global-color-red-250: hsl(357, 88%, 81%);--sapphire-global-color-red-300: hsl(356, 82%, 76%);--sapphire-global-color-red-350: hsl(355, 79%, 71%);--sapphire-global-color-red-400: hsl(353, 75%, 65%);--sapphire-global-color-red-450: hsl(351, 73%, 59%);--sapphire-global-color-red-500: hsl(348, 72%, 53%);--sapphire-global-color-red-550: hsl(349, 61%, 48%);--sapphire-global-color-red-600: hsl(349, 60%, 44%);--sapphire-global-color-red-650: hsl(350, 57%, 39%);--sapphire-global-color-red-700: hsl(351, 55%, 35%);--sapphire-global-color-red-750: hsl(351, 54%, 31%);--sapphire-global-color-red-800: hsl(353, 50%, 26%);--sapphire-global-color-red-850: hsl(353, 48%, 21%);--sapphire-global-color-red-875: hsl(354, 44%, 18%);--sapphire-global-color-red-900: hsl(355, 43%, 15%);--sapphire-global-color-red-925: hsl(356, 41%, 14%);--sapphire-global-color-red-950: hsl(355, 38%, 12%);--sapphire-global-color-red-975: hsl(0, 33%, 10%);--sapphire-global-color-secondary-aqua-50: hsl(193, 47%, 96%);--sapphire-global-color-secondary-aqua-75: hsl(193, 47%, 94%);--sapphire-global-color-secondary-aqua-100: hsl(190, 45%, 92%);--sapphire-global-color-secondary-aqua-150: hsl(192, 47%, 84%);--sapphire-global-color-secondary-aqua-200: hsl(192, 47%, 76%);--sapphire-global-color-secondary-aqua-300: hsl(192, 47%, 60%);--sapphire-global-color-secondary-aqua-400: hsl(192, 55%, 46%);--sapphire-global-color-secondary-aqua-500: hsl(192, 100%, 32%);--sapphire-global-color-secondary-aqua-600: hsl(192, 100%, 26%);--sapphire-global-color-secondary-copper-50: hsl(15, 50%, 97%);--sapphire-global-color-secondary-copper-75: hsl(16, 48%, 95%);--sapphire-global-color-secondary-copper-100: hsl(16, 48%, 94%);--sapphire-global-color-secondary-copper-150: hsl(15, 51%, 87%);--sapphire-global-color-secondary-copper-200: hsl(16, 49%, 81%);--sapphire-global-color-secondary-copper-300: hsl(15, 50%, 69%);--sapphire-global-color-secondary-copper-400: hsl(15, 50%, 59%);--sapphire-global-color-secondary-copper-500: hsl(15, 54%, 48%);--sapphire-global-color-secondary-copper-600: hsl(16, 54%, 39%);--sapphire-global-color-secondary-electro-50: hsl(204, 29%, 97%);--sapphire-global-color-secondary-electro-75: hsl(206, 28%, 95%);--sapphire-global-color-secondary-electro-100: hsl(207, 27%, 94%);--sapphire-global-color-secondary-electro-150: hsl(205, 27%, 86%);--sapphire-global-color-secondary-electro-200: hsl(208, 27%, 80%);--sapphire-global-color-secondary-electro-300: hsl(207, 27%, 67%);--sapphire-global-color-secondary-electro-400: hsl(206, 27%, 56%);--sapphire-global-color-secondary-electro-500: hsl(206, 31%, 46%);--sapphire-global-color-secondary-electro-600: hsl(207, 31%, 38%);--sapphire-global-color-secondary-indigo-50: hsl(229, 100%, 98%);--sapphire-global-color-secondary-indigo-75: hsl(229, 100%, 97%);--sapphire-global-color-secondary-indigo-100: hsl(231, 100%, 96%);--sapphire-global-color-secondary-indigo-150: hsl(229, 100%, 91%);--sapphire-global-color-secondary-indigo-200: hsl(229, 100%, 87%);--sapphire-global-color-secondary-indigo-300: hsl(230, 100%, 79%);--sapphire-global-color-secondary-indigo-400: hsl(230, 100%, 72%);--sapphire-global-color-secondary-indigo-500: hsl(230, 100%, 64%);--sapphire-global-color-secondary-indigo-600: hsl(230, 62%, 53%);--sapphire-global-color-secondary-lime-50: hsl(70, 27%, 96%);--sapphire-global-color-secondary-lime-75: hsl(66, 29%, 93%);--sapphire-global-color-secondary-lime-100: hsl(69, 29%, 91%);--sapphire-global-color-secondary-lime-150: hsl(71, 30%, 82%);--sapphire-global-color-secondary-lime-200: hsl(70, 29%, 73%);--sapphire-global-color-secondary-lime-300: hsl(72, 30%, 57%);--sapphire-global-color-secondary-lime-400: hsl(71, 42%, 42%);--sapphire-global-color-secondary-lime-500: hsl(71, 76%, 28%);--sapphire-global-color-secondary-lime-600: hsl(71, 76%, 23%);--sapphire-global-color-secondary-pink-50: hsl(326, 54%, 97%);--sapphire-global-color-secondary-pink-75: hsl(330, 50%, 96%);--sapphire-global-color-secondary-pink-100: hsl(328, 56%, 95%);--sapphire-global-color-secondary-pink-150: hsl(327, 54%, 89%);--sapphire-global-color-secondary-pink-200: hsl(327, 53%, 83%);--sapphire-global-color-secondary-pink-300: hsl(326, 53%, 73%);--sapphire-global-color-secondary-pink-400: hsl(326, 53%, 63%);--sapphire-global-color-secondary-pink-500: hsl(327, 53%, 53%);--sapphire-global-color-secondary-pink-600: hsl(327, 48%, 43%);--sapphire-global-color-secondary-violet-50: hsl(240, 64%, 98%);--sapphire-global-color-secondary-violet-75: hsl(245, 65%, 97%);--sapphire-global-color-secondary-violet-100: hsl(244, 64%, 96%);--sapphire-global-color-secondary-violet-150: hsl(246, 66%, 91%);--sapphire-global-color-secondary-violet-200: hsl(244, 65%, 86%);--sapphire-global-color-secondary-violet-300: hsl(245, 66%, 78%);--sapphire-global-color-secondary-violet-400: hsl(245, 66%, 71%);--sapphire-global-color-secondary-violet-500: hsl(245, 66%, 64%);--sapphire-global-color-secondary-violet-600: hsl(245, 41%, 52%);--sapphire-global-color-secondary-purple-50: hsl(270, 29%, 97%);--sapphire-global-color-secondary-purple-75: hsl(274, 33%, 96%);--sapphire-global-color-secondary-purple-100: hsl(270, 36%, 95%);--sapphire-global-color-secondary-purple-150: hsl(272, 32%, 88%);--sapphire-global-color-secondary-purple-200: hsl(269, 33%, 83%);--sapphire-global-color-secondary-purple-300: hsl(270, 33%, 73%);--sapphire-global-color-secondary-purple-400: hsl(270, 33%, 64%);--sapphire-global-color-secondary-purple-500: hsl(270, 33%, 55%);--sapphire-global-color-secondary-purple-600: hsl(270, 28%, 45%);--sapphire-global-color-secondary-gold-50: hsl(40, 43%, 96%);--sapphire-global-color-secondary-gold-75: hsl(42, 42%, 94%);--sapphire-global-color-secondary-gold-100: hsl(43, 43%, 92%);--sapphire-global-color-secondary-gold-150: hsl(43, 43%, 83%);--sapphire-global-color-secondary-gold-200: hsl(42, 44%, 74%);--sapphire-global-color-secondary-gold-300: hsl(42, 44%, 59%);--sapphire-global-color-secondary-gold-400: hsl(42, 54%, 45%);--sapphire-global-color-secondary-gold-500: hsl(42, 96%, 31%);--sapphire-global-color-secondary-gold-600: hsl(42, 97%, 25%);--sapphire-global-color-secondary-beige-50: hsl(30, 11%, 96%);--sapphire-global-color-secondary-beige-75: hsl(30, 15%, 95%);--sapphire-global-color-secondary-beige-100: hsl(40, 17%, 93%);--sapphire-global-color-secondary-beige-150: hsl(40, 16%, 85%);--sapphire-global-color-secondary-beige-200: hsl(41, 14%, 78%);--sapphire-global-color-secondary-beige-300: hsl(39, 16%, 65%);--sapphire-global-color-secondary-beige-400: hsl(38, 15%, 54%);--sapphire-global-color-secondary-beige-500: hsl(40, 20%, 43%);--sapphire-global-color-secondary-beige-600: hsl(38, 20%, 35%);--sapphire-global-color-secondary-orchid-50: hsl(300, 33%, 97%);--sapphire-global-color-secondary-orchid-75: hsl(300, 36%, 96%);--sapphire-global-color-secondary-orchid-100: hsl(305, 38%, 94%);--sapphire-global-color-secondary-orchid-150: hsl(305, 38%, 88%);--sapphire-global-color-secondary-orchid-200: hsl(304, 37%, 82%);--sapphire-global-color-secondary-orchid-300: hsl(303, 37%, 71%);--sapphire-global-color-secondary-orchid-400: hsl(304, 37%, 61%);--sapphire-global-color-secondary-orchid-500: hsl(304, 37%, 51%);--sapphire-global-color-secondary-orchid-600: hsl(304, 36%, 42%);--sapphire-global-color-secondary-gray-50: hsl(180, 6%, 97%);--sapphire-global-color-secondary-gray-75: hsl(240, 4%, 95%);--sapphire-global-color-secondary-gray-100: hsl(210, 6%, 93%);--sapphire-global-color-secondary-gray-150: hsl(195, 6%, 86%);--sapphire-global-color-secondary-gray-200: hsl(200, 6%, 79%);--sapphire-global-color-secondary-gray-300: hsl(203, 5%, 67%);--sapphire-global-color-secondary-gray-400: hsl(200, 5%, 56%);--sapphire-global-color-secondary-gray-500: hsl(201, 6%, 46%);--sapphire-global-color-secondary-gray-600: hsl(202, 6%, 38%);--sapphire-global-color-secondary-cobalt-50: hsl(215, 86%, 97%);--sapphire-global-color-secondary-cobalt-75: hsl(215, 90%, 96%);--sapphire-global-color-secondary-cobalt-100: hsl(216, 93%, 95%);--sapphire-global-color-secondary-cobalt-150: hsl(216, 93%, 89%);--sapphire-global-color-secondary-cobalt-200: hsl(215, 91%, 83%);--sapphire-global-color-secondary-cobalt-300: hsl(215, 92%, 72%);--sapphire-global-color-secondary-cobalt-400: hsl(215, 92%, 62%);--sapphire-global-color-secondary-cobalt-500: hsl(215, 92%, 51%);--sapphire-global-color-secondary-cobalt-600: hsl(215, 87%, 42%);--sapphire-global-color-secondary-forest-green-50: hsl(111, 33%, 96%);--sapphire-global-color-secondary-forest-green-75: hsl(109, 35%, 94%);--sapphire-global-color-secondary-forest-green-100: hsl(104, 35%, 92%);--sapphire-global-color-secondary-forest-green-150: hsl(105, 36%, 82%);--sapphire-global-color-secondary-forest-green-200: hsl(105, 36%, 74%);--sapphire-global-color-secondary-forest-green-300: hsl(105, 36%, 58%);--sapphire-global-color-secondary-forest-green-400: hsl(105, 48%, 43%);--sapphire-global-color-secondary-forest-green-500: hsl(105, 93%, 28%);--sapphire-global-color-secondary-forest-green-600: hsl(105, 93%, 23%);--sapphire-global-color-secondary-teal-50: hsl(171, 33%, 96%);--sapphire-global-color-secondary-teal-75: hsl(170, 38%, 94%);--sapphire-global-color-secondary-teal-100: hsl(172, 35%, 92%);--sapphire-global-color-secondary-teal-150: hsl(171, 36%, 82%);--sapphire-global-color-secondary-teal-200: hsl(171, 36%, 74%);--sapphire-global-color-secondary-teal-300: hsl(172, 36%, 57%);--sapphire-global-color-secondary-teal-400: hsl(172, 50%, 42%);--sapphire-global-color-secondary-teal-500: hsl(171, 100%, 26%);--sapphire-global-color-secondary-teal-600: hsl(171, 100%, 22%);--sapphire-global-color-secondary-orange-50: hsl(28, 89%, 96%);--sapphire-global-color-secondary-orange-75: hsl(27, 85%, 95%);--sapphire-global-color-secondary-orange-100: hsl(26, 89%, 93%);--sapphire-global-color-secondary-orange-150: hsl(25, 84%, 86%);--sapphire-global-color-secondary-orange-200: hsl(23, 83%, 79%);--sapphire-global-color-secondary-orange-300: hsl(21, 84%, 66%);--sapphire-global-color-secondary-orange-400: hsl(19, 84%, 54%);--sapphire-global-color-secondary-orange-500: hsl(17, 100%, 43%);--sapphire-global-color-secondary-orange-600: hsl(19, 100%, 34%);--sapphire-global-color-neutral-white: hsl(0, 0%, 100%);--sapphire-global-color-neutral-black: hsl(0, 0%, 0%);--sapphire-global-color-neutral-transparent: hsla(0, 0%, 100%, 0);--sapphire-global-color-yellow-25: hsl(54, 100%, 98%);--sapphire-global-color-yellow-50: hsl(51, 100%, 96%);--sapphire-global-color-yellow-75: hsl(49, 100%, 92%);--sapphire-global-color-yellow-100: hsl(48, 100%, 89%);--sapphire-global-color-yellow-125: hsl(49, 97%, 85%);--sapphire-global-color-yellow-150: hsl(48, 98%, 79%);--sapphire-global-color-yellow-200: hsl(48, 98%, 76%);--sapphire-global-color-yellow-250: hsl(47, 97%, 70%);--sapphire-global-color-yellow-300: hsl(46, 98%, 64%);--sapphire-global-color-yellow-350: hsl(44, 98%, 60%);--sapphire-global-color-yellow-400: hsl(43, 98%, 55%);--sapphire-global-color-yellow-450: hsl(40, 95%, 54%);--sapphire-global-color-yellow-500: hsl(37, 95%, 52%);--sapphire-global-color-yellow-550: hsl(34, 94%, 48%);--sapphire-global-color-yellow-600: hsl(31, 93%, 44%);--sapphire-global-color-yellow-650: hsl(28, 94%, 41%);--sapphire-global-color-yellow-700: hsl(25, 93%, 37%);--sapphire-global-color-yellow-750: hsl(24, 89%, 33%);--sapphire-global-color-yellow-800: hsl(22, 88%, 29%);--sapphire-global-color-yellow-850: hsl(22, 85%, 27%);--sapphire-global-color-yellow-875: hsl(21, 86%, 23%);--sapphire-global-color-yellow-900: hsl(21, 88%, 19%);--sapphire-global-color-yellow-925: hsl(21, 87%, 15%);--sapphire-global-color-yellow-950: hsl(19, 89%, 11%);--sapphire-global-color-yellow-975: hsl(20, 95%, 8%);--sapphire-global-font-danske-text-name: \"Danske Text v2\";--sapphire-global-font-danske-human-name: \"Danske Human\";--sapphire-global-opacity-35: .35;--sapphire-global-opacity-40: .4;--sapphire-global-opacity-50: .5;--sapphire-global-shadow-sm: 0px 0px 2px 0px rgba(34, 64, 82, .06), 0px 1.5px 4px 0px rgba(34, 64, 82, .04), 0px 4.5px 6px 0px rgba(34, 64, 82, .04), 0px 10.5px 12px 0px rgba(34, 64, 82, .03), 0px 25px 24px 0px rgba(34, 64, 82, .02), 0px 100px 64px 0px rgba(34, 64, 82, .02), 0px 0px 2px 0px rgba(34, 64, 82, .05), 0px 0px 1px 0px rgba(34, 64, 82, .2);--sapphire-global-shadow-md: 0px 0px 3px 0px rgba(34, 64, 82, .02), 0px 3px 7px 0px rgba(34, 64, 82, .03), 0px 6.5px 14px 0px rgba(34, 64, 82, .04), 0px 13px 29px 0px rgba(34, 64, 82, .05), 0px 36px 80px 0px rgba(34, 64, 82, .07), 0px 0px 2px 0px rgba(34, 64, 82, .05), 0px 0px 1px 0px rgba(34, 64, 82, .2);--sapphire-global-shadow-lg: 0px 0px 2px 0px rgba(34, 64, 82, .02), 0px -1.5px 6px 0px rgba(34, 64, 82, .03), 0px 4.5px 12px 0px rgba(34, 64, 82, .04), 0px 14.5px 18px 0px rgba(34, 64, 82, .04), 0px 26px 34px 0px rgba(34, 64, 82, .05), 0px 84px 92px 0px rgba(34, 64, 82, .07), 0px 0px 2px 0px rgba(34, 64, 82, .05), 0px 0px 1px 0px rgba(34, 64, 82, .2);--sapphire-global-size-static-0: 0px;--sapphire-global-size-static-2: 1px;--sapphire-global-size-static-5: 2px;--sapphire-global-size-static-10: 4px;--sapphire-global-size-static-20: 8px;--sapphire-global-size-static-30: 12px;--sapphire-global-size-static-60: 24px;--sapphire-global-size-generic-0: 0rem;--sapphire-global-size-generic-2: .0625rem;--sapphire-global-size-generic-5: .125rem;--sapphire-global-size-generic-10: .25rem;--sapphire-global-size-generic-15: .375rem;--sapphire-global-size-generic-20: .5rem;--sapphire-global-size-generic-25: .625rem;--sapphire-global-size-generic-30: .75rem;--sapphire-global-size-generic-35: .875rem;--sapphire-global-size-generic-40: 1rem;--sapphire-global-size-generic-50: 1.25rem;--sapphire-global-size-generic-60: 1.5rem;--sapphire-global-size-generic-80: 2rem;--sapphire-global-size-generic-100: 2.5rem;--sapphire-global-size-generic-120: 3rem;--sapphire-global-size-generic-140: 3.5rem;--sapphire-global-size-generic-160: 4rem;--sapphire-global-size-generic-180: 4.5rem;--sapphire-global-size-generic-200: 5rem;--sapphire-global-size-generic-240: 6rem;--sapphire-global-size-generic-280: 7rem;--sapphire-global-size-generic-300: 7.5rem;--sapphire-global-size-generic-320: 8rem;--sapphire-global-size-generic-340: 8.5rem;--sapphire-global-size-generic-400: 10rem;--sapphire-global-size-generic-480: 12rem;--sapphire-global-size-generic-560: 14rem;--sapphire-global-size-generic-600: 15rem;--sapphire-global-size-generic-640: 16rem;--sapphire-global-size-generic-750: 18.75rem;--sapphire-global-size-generic-800: 20rem;--sapphire-global-size-generic-900: 22.5rem;--sapphire-global-size-generic-940: 23.5rem;--sapphire-global-size-generic-960: 24rem;--sapphire-global-size-generic-1000: 25rem;--sapphire-global-size-generic-1120: 28rem;--sapphire-global-size-generic-1200: 30rem;--sapphire-global-size-generic-1280: 32rem;--sapphire-global-size-generic-1400: 35rem;--sapphire-global-size-generic-1600: 40rem;--sapphire-global-size-generic-1920: 48rem;--sapphire-global-size-generic-2400: 60rem;--sapphire-global-size-generic-2560: 64rem;--sapphire-global-size-generic-3200: 80rem;--sapphire-global-size-generic-3600: 90rem;--sapphire-global-size-generic-3780: 94.5rem;--sapphire-global-size-generic-4320: 108rem;--sapphire-global-size-font-60: .625rem;--sapphire-global-size-font-75: .75rem;--sapphire-global-size-font-88: .875rem;--sapphire-global-size-font-100: 1rem;--sapphire-global-size-font-106: 1.0625rem;--sapphire-global-size-font-112: 1.125rem;--sapphire-global-size-font-130: 1.3125rem;--sapphire-global-size-font-150: 1.5rem;--sapphire-global-size-font-188: 1.875rem;--sapphire-global-size-font-220: 2.1875rem;--sapphire-global-size-font-300: 3rem;--sapphire-global-size-line-height-sm: 1.2;--sapphire-global-size-line-height-md: 1.5;--sapphire-global-size-ratio-height: .875;--sapphire-global-time-100: .1s;--sapphire-global-time-200: .2s;--sapphire-global-time-400: .4s;--sapphire-global-time-1000: 1s;--sapphire-global-time-1800: 1.8s;--sapphire-global-time-2000: 2s;--sapphire-semantic-color-background-surface: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-background-control-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-background-control-special-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-background-control-special-secondary-default: var(--sapphire-global-color-sapphire-900-4p);--sapphire-semantic-color-background-field-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-background-popover-default: var(--sapphire-semantic-color-background-surface);--sapphire-semantic-color-background-action-primary-default: var(--sapphire-global-color-blue-500);--sapphire-semantic-color-background-action-primary-hover: var(--sapphire-global-color-blue-600);--sapphire-semantic-color-background-action-primary-active: var(--sapphire-global-color-blue-650);--sapphire-semantic-color-background-action-secondary-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-action-secondary-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-secondary-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-secondary-ghost-default: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-secondary-ghost-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-secondary-ghost-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-secondary-text: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-tertiary-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-action-tertiary-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-tertiary-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-tertiary-ghost-default: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-tertiary-ghost-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-tertiary-ghost-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-tertiary-text: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-danger-default: var(--sapphire-semantic-color-background-negative-secondary-default);--sapphire-semantic-color-background-action-danger-hover: var(--sapphire-semantic-color-background-negative-secondary-hover);--sapphire-semantic-color-background-action-danger-active: var(--sapphire-semantic-color-background-negative-secondary-active);--sapphire-semantic-color-background-action-danger-ghost-default: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-danger-ghost-hover: var(--sapphire-semantic-color-background-negative-secondary-hover);--sapphire-semantic-color-background-action-danger-ghost-active: var(--sapphire-semantic-color-background-negative-secondary-active);--sapphire-semantic-color-background-action-danger-text: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-selection-selected-default: var(--sapphire-global-color-blue-50);--sapphire-semantic-color-background-selection-selected-hover: var(--sapphire-global-color-blue-75);--sapphire-semantic-color-background-selection-selected-active: var(--sapphire-global-color-blue-100);--sapphire-semantic-color-background-selection-unselected-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-selection-unselected-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-selection-unselected-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-negative-primary-default: var(--sapphire-global-color-red-500);--sapphire-semantic-color-background-negative-primary-hover: var(--sapphire-global-color-red-600);--sapphire-semantic-color-background-negative-primary-active: var(--sapphire-global-color-red-650);--sapphire-semantic-color-background-negative-secondary-default: var(--sapphire-global-color-red-50);--sapphire-semantic-color-background-negative-secondary-hover: var(--sapphire-global-color-red-75);--sapphire-semantic-color-background-negative-secondary-active: var(--sapphire-global-color-red-100);--sapphire-semantic-color-background-positive-primary-default: var(--sapphire-global-color-green-500);--sapphire-semantic-color-background-positive-secondary-default: var(--sapphire-global-color-green-50);--sapphire-semantic-color-background-warning-primary-default: var(--sapphire-global-color-yellow-300);--sapphire-semantic-color-background-warning-secondary-default: var(--sapphire-global-color-yellow-75);--sapphire-semantic-color-background-informative-primary-default: var(--sapphire-global-color-blue-500);--sapphire-semantic-color-background-informative-secondary-default: var(--sapphire-global-color-blue-50);--sapphire-semantic-color-background-passive-primary-default: var(--sapphire-global-color-sapphire-450);--sapphire-semantic-color-background-passive-secondary-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-decorative-aqua-primary-default: var(--sapphire-global-color-secondary-aqua-500);--sapphire-semantic-color-background-decorative-aqua-secondary-default: var(--sapphire-global-color-secondary-aqua-100);--sapphire-semantic-color-background-decorative-copper-primary-default: var(--sapphire-global-color-secondary-copper-500);--sapphire-semantic-color-background-decorative-copper-secondary-default: var(--sapphire-global-color-secondary-copper-100);--sapphire-semantic-color-background-decorative-electro-primary-default: var(--sapphire-global-color-secondary-electro-500);--sapphire-semantic-color-background-decorative-electro-secondary-default: var(--sapphire-global-color-secondary-electro-100);--sapphire-semantic-color-background-decorative-indigo-primary-default: var(--sapphire-global-color-secondary-indigo-500);--sapphire-semantic-color-background-decorative-indigo-secondary-default: var(--sapphire-global-color-secondary-indigo-100);--sapphire-semantic-color-background-decorative-lime-primary-default: var(--sapphire-global-color-secondary-lime-500);--sapphire-semantic-color-background-decorative-lime-secondary-default: var(--sapphire-global-color-secondary-lime-100);--sapphire-semantic-color-background-decorative-pink-primary-default: var(--sapphire-global-color-secondary-pink-500);--sapphire-semantic-color-background-decorative-pink-secondary-default: var(--sapphire-global-color-secondary-pink-100);--sapphire-semantic-color-background-decorative-violet-primary-default: var(--sapphire-global-color-secondary-violet-500);--sapphire-semantic-color-background-decorative-violet-secondary-default: var(--sapphire-global-color-secondary-violet-100);--sapphire-semantic-color-background-decorative-gold-primary-default: var(--sapphire-global-color-secondary-gold-500);--sapphire-semantic-color-background-decorative-gold-secondary-default: var(--sapphire-global-color-secondary-gold-50);--sapphire-semantic-color-background-decorative-beige-primary-default: var(--sapphire-global-color-secondary-beige-500);--sapphire-semantic-color-background-decorative-beige-secondary-default: var(--sapphire-global-color-secondary-beige-50);--sapphire-semantic-color-background-decorative-orchid-primary-default: var(--sapphire-global-color-secondary-orchid-500);--sapphire-semantic-color-background-decorative-orchid-secondary-default: var(--sapphire-global-color-secondary-orchid-50);--sapphire-semantic-color-background-decorative-gray-primary-default: var(--sapphire-global-color-secondary-gray-500);--sapphire-semantic-color-background-decorative-gray-secondary-default: var(--sapphire-global-color-secondary-gray-50);--sapphire-semantic-color-background-decorative-cobalt-primary-default: var(--sapphire-global-color-secondary-cobalt-500);--sapphire-semantic-color-background-decorative-cobalt-secondary-default: var(--sapphire-global-color-secondary-cobalt-50);--sapphire-semantic-color-background-decorative-forest-green-primary-default: var(--sapphire-global-color-secondary-forest-green-500);--sapphire-semantic-color-background-decorative-forest-green-secondary-default: var(--sapphire-global-color-secondary-forest-green-50);--sapphire-semantic-color-background-decorative-teal-primary-default: var(--sapphire-global-color-secondary-teal-500);--sapphire-semantic-color-background-decorative-teal-secondary-default: var(--sapphire-global-color-secondary-teal-50);--sapphire-semantic-color-background-decorative-orange-primary-default: var(--sapphire-global-color-secondary-orange-400);--sapphire-semantic-color-background-decorative-orange-secondary-default: var(--sapphire-global-color-secondary-orange-50);--sapphire-semantic-color-background-backdrop: var(--sapphire-global-color-sapphire-900-70p);--sapphire-semantic-color-background-skeleton-default: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-spinner-primary-default: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-background-spinner-secondary-default: var(--sapphire-semantic-color-background-action-primary-default);--sapphire-semantic-color-content-default-primary: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-default-secondary: var(--sapphire-global-color-sapphire-600);--sapphire-semantic-color-content-action-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-action-secondary-default: var(--sapphire-global-color-blue-550);--sapphire-semantic-color-content-action-secondary-hover: var(--sapphire-global-color-blue-600);--sapphire-semantic-color-content-action-secondary-active: var(--sapphire-global-color-blue-700);--sapphire-semantic-color-content-action-danger-default: var(--sapphire-semantic-color-content-negative-secondary-default);--sapphire-semantic-color-content-action-danger-hover: var(--sapphire-semantic-color-content-negative-secondary-hover);--sapphire-semantic-color-content-action-danger-active: var(--sapphire-semantic-color-content-negative-secondary-active);--sapphire-semantic-color-content-action-tertiary-default: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-action-tertiary-hover: var(--sapphire-global-color-sapphire-950);--sapphire-semantic-color-content-action-tertiary-active: var(--sapphire-global-color-sapphire-975);--sapphire-semantic-color-content-selection-selected-default: var(--sapphire-global-color-blue-550);--sapphire-semantic-color-content-selection-selected-hover: var(--sapphire-global-color-blue-600);--sapphire-semantic-color-content-selection-selected-active: var(--sapphire-global-color-blue-700);--sapphire-semantic-color-content-selection-unselected-default: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-selection-unselected-hover: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-selection-unselected-active: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-link-primary-default: var(--sapphire-semantic-color-content-action-secondary-default);--sapphire-semantic-color-content-link-primary-hover: var(--sapphire-semantic-color-content-action-secondary-hover);--sapphire-semantic-color-content-link-primary-active: var(--sapphire-semantic-color-content-action-secondary-active);--sapphire-semantic-color-content-link-secondary-default: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-link-secondary-hover: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-link-secondary-active: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-positive-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-positive-secondary-default: var(--sapphire-global-color-green-550);--sapphire-semantic-color-content-negative-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-negative-secondary-default: var(--sapphire-global-color-red-550);--sapphire-semantic-color-content-negative-secondary-hover: var(--sapphire-global-color-red-600);--sapphire-semantic-color-content-negative-secondary-active: var(--sapphire-global-color-red-700);--sapphire-semantic-color-content-warning-primary-default: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-warning-secondary-default: var(--sapphire-global-color-yellow-700);--sapphire-semantic-color-content-informative-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-informative-secondary-default: var(--sapphire-global-color-blue-550);--sapphire-semantic-color-content-passive-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-passive-secondary-default: var(--sapphire-global-color-sapphire-550);--sapphire-semantic-color-content-decorative-aqua-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-aqua-secondary-default: var(--sapphire-global-color-secondary-aqua-600);--sapphire-semantic-color-content-decorative-copper-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-copper-secondary-default: var(--sapphire-global-color-secondary-copper-600);--sapphire-semantic-color-content-decorative-electro-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-electro-secondary-default: var(--sapphire-global-color-secondary-electro-600);--sapphire-semantic-color-content-decorative-indigo-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-indigo-secondary-default: var(--sapphire-global-color-secondary-indigo-600);--sapphire-semantic-color-content-decorative-lime-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-lime-secondary-default: var(--sapphire-global-color-secondary-lime-600);--sapphire-semantic-color-content-decorative-pink-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-pink-secondary-default: var(--sapphire-global-color-secondary-pink-600);--sapphire-semantic-color-content-decorative-violet-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-violet-secondary-default: var(--sapphire-global-color-secondary-violet-600);--sapphire-semantic-color-content-decorative-gold-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-gold-secondary-default: var(--sapphire-global-color-secondary-gold-600);--sapphire-semantic-color-content-decorative-beige-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-beige-secondary-default: var(--sapphire-global-color-secondary-beige-600);--sapphire-semantic-color-content-decorative-orchid-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-orchid-secondary-default: var(--sapphire-global-color-secondary-orchid-600);--sapphire-semantic-color-content-decorative-gray-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-gray-secondary-default: var(--sapphire-global-color-secondary-gray-600);--sapphire-semantic-color-content-decorative-cobalt-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-cobalt-secondary-default: var(--sapphire-global-color-secondary-cobalt-600);--sapphire-semantic-color-content-decorative-forest-green-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-forest-green-secondary-default: var(--sapphire-global-color-secondary-forest-green-600);--sapphire-semantic-color-content-decorative-teal-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-teal-secondary-default: var(--sapphire-global-color-secondary-teal-600);--sapphire-semantic-color-content-decorative-orange-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-orange-secondary-default: var(--sapphire-global-color-secondary-orange-600);--sapphire-semantic-color-border-primary-default: var(--sapphire-global-color-sapphire-200);--sapphire-semantic-color-border-primary-hover: var(--sapphire-global-color-sapphire-250);--sapphire-semantic-color-border-primary-active: var(--sapphire-global-color-sapphire-300);--sapphire-semantic-color-border-secondary-default: var(--sapphire-global-color-sapphire-150);--sapphire-semantic-color-border-tertiary-default: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-border-field-default: var(--sapphire-semantic-color-border-control-default);--sapphire-semantic-color-border-field-error: var(--sapphire-global-color-red-500);--sapphire-semantic-color-border-control-default: var(--sapphire-semantic-color-border-primary-default);--sapphire-semantic-color-border-control-hover: var(--sapphire-semantic-color-border-primary-hover);--sapphire-semantic-color-border-control-active: var(--sapphire-semantic-color-border-primary-active);--sapphire-semantic-color-border-separator-default: var(--sapphire-semantic-color-border-tertiary-default);--sapphire-semantic-color-border-negative-secondary-default: var(--sapphire-global-color-red-200);--sapphire-semantic-color-border-positive-secondary-default: var(--sapphire-global-color-green-200);--sapphire-semantic-color-border-warning-secondary-default: var(--sapphire-global-color-yellow-300);--sapphire-semantic-color-border-informative-secondary-default: var(--sapphire-global-color-blue-200);--sapphire-semantic-color-border-passive-secondary-default: var(--sapphire-semantic-color-border-primary-default);--sapphire-semantic-color-border-decorative-aqua-secondary-default: var(--sapphire-global-color-secondary-aqua-200);--sapphire-semantic-color-border-decorative-copper-secondary-default: var(--sapphire-global-color-secondary-copper-200);--sapphire-semantic-color-border-decorative-electro-secondary-default: var(--sapphire-global-color-secondary-electro-200);--sapphire-semantic-color-border-decorative-indigo-secondary-default: var(--sapphire-global-color-secondary-indigo-200);--sapphire-semantic-color-border-decorative-lime-secondary-default: var(--sapphire-global-color-secondary-lime-200);--sapphire-semantic-color-border-decorative-pink-secondary-default: var(--sapphire-global-color-secondary-pink-200);--sapphire-semantic-color-border-decorative-violet-secondary-default: var(--sapphire-global-color-secondary-violet-200);--sapphire-semantic-color-border-decorative-gold-secondary-default: var(--sapphire-global-color-secondary-gold-200);--sapphire-semantic-color-border-decorative-beige-secondary-default: var(--sapphire-global-color-secondary-beige-200);--sapphire-semantic-color-border-decorative-orchid-secondary-default: var(--sapphire-global-color-secondary-orchid-200);--sapphire-semantic-color-border-decorative-gray-secondary-default: var(--sapphire-global-color-secondary-gray-200);--sapphire-semantic-color-border-decorative-cobalt-secondary-default: var(--sapphire-global-color-secondary-cobalt-200);--sapphire-semantic-color-border-decorative-forest-green-secondary-default: var(--sapphire-global-color-secondary-forest-green-200);--sapphire-semantic-color-border-decorative-teal-secondary-default: var(--sapphire-global-color-secondary-teal-200);--sapphire-semantic-color-border-decorative-orange-secondary-default: var(--sapphire-global-color-secondary-orange-200);--sapphire-semantic-color-focus-ring: var(--sapphire-global-color-blue-400);--sapphire-semantic-color-cursor-default: var(--sapphire-semantic-color-background-action-primary-default);--sapphire-semantic-font-name-default: var(--sapphire-global-font-danske-text-name);--sapphire-semantic-font-name-display: var(--sapphire-global-font-danske-human-name);--sapphire-semantic-font-weight-default-regular: 400;--sapphire-semantic-font-weight-default-semibold: 600;--sapphire-semantic-font-weight-default-bold: 700;--sapphire-semantic-font-weight-display-regular: 400;--sapphire-semantic-font-weight-display-bold: 700;--sapphire-semantic-opacity-50: var(--sapphire-global-opacity-50);--sapphire-semantic-opacity-disabled: var(--sapphire-global-opacity-40);--sapphire-semantic-shadow-popover: var(--sapphire-global-shadow-md);--sapphire-semantic-size-height-control-2xs: var(--sapphire-global-size-generic-50);--sapphire-semantic-size-height-control-xs: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-height-control-sm: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-height-control-md: var(--sapphire-global-size-generic-100);--sapphire-semantic-size-height-control-lg: var(--sapphire-global-size-generic-120);--sapphire-semantic-size-height-control-xl: var(--sapphire-global-size-generic-140);--sapphire-semantic-size-height-input-lg: var(--sapphire-semantic-size-height-control-lg);--sapphire-semantic-size-height-input-md: var(--sapphire-semantic-size-height-control-md);--sapphire-semantic-size-height-box-md: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-height-box-lg: var(--sapphire-semantic-size-height-control-2xs);--sapphire-semantic-size-width-control-default: var(--sapphire-global-size-generic-750);--sapphire-semantic-size-width-panel-sm: 100%;--sapphire-semantic-size-width-panel-lg: 100%;--sapphire-semantic-size-icon-sm: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-icon-md: var(--sapphire-global-size-generic-50);--sapphire-semantic-size-icon-lg: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-icon-xl: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-border-sm: var(--sapphire-global-size-static-2);--sapphire-semantic-size-border-md: var(--sapphire-global-size-static-5);--sapphire-semantic-size-border-lg: var(--sapphire-global-size-static-10);--sapphire-semantic-size-focus-ring: var(--sapphire-semantic-size-border-md);--sapphire-semantic-size-radius-xs: var(--sapphire-global-size-static-5);--sapphire-semantic-size-radius-sm: var(--sapphire-global-size-static-10);--sapphire-semantic-size-radius-md: var(--sapphire-global-size-static-20);--sapphire-semantic-size-radius-lg: var(--sapphire-global-size-static-30);--sapphire-semantic-size-radius-xl: var(--sapphire-global-size-static-60);--sapphire-semantic-size-radius-popover: var(--sapphire-semantic-size-radius-md);--sapphire-semantic-size-font-text-sm: var(--sapphire-global-size-font-75);--sapphire-semantic-size-font-text-md: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-text-lg: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-label-sm: var(--sapphire-global-size-font-75);--sapphire-semantic-size-font-label-md: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-label-lg: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-control-sm: var(--sapphire-global-size-font-75);--sapphire-semantic-size-font-control-md: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-control-default: var(--sapphire-global-size-font-100);--sapphire-semantic-size-line-height-sm: var(--sapphire-global-size-line-height-sm);--sapphire-semantic-size-line-height-md: var(--sapphire-global-size-line-height-md);--sapphire-semantic-size-spacing-5: var(--sapphire-global-size-generic-5);--sapphire-semantic-size-spacing-10: var(--sapphire-global-size-generic-10);--sapphire-semantic-size-spacing-20: var(--sapphire-global-size-generic-20);--sapphire-semantic-size-spacing-25: var(--sapphire-global-size-generic-25);--sapphire-semantic-size-spacing-30: var(--sapphire-global-size-generic-30);--sapphire-semantic-size-spacing-40: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-spacing-50: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-spacing-60: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-spacing-70: var(--sapphire-global-size-generic-100);--sapphire-semantic-size-spacing-80: var(--sapphire-global-size-generic-160);--sapphire-semantic-size-spacing-control-vertical-sm: var(--sapphire-semantic-size-spacing-10);--sapphire-semantic-size-spacing-control-vertical-md: var(--sapphire-semantic-size-spacing-25);--sapphire-semantic-size-spacing-control-vertical-lg: var(--sapphire-semantic-size-spacing-30);--sapphire-semantic-size-spacing-control-horizontal-md: var(--sapphire-semantic-size-spacing-25);--sapphire-semantic-size-spacing-control-horizontal-lg: var(--sapphire-semantic-size-spacing-30);--sapphire-semantic-size-spacing-data-collection-item-horizontal-sm: var(--sapphire-semantic-size-spacing-20);--sapphire-semantic-size-spacing-data-collection-item-horizontal-md: var(--sapphire-semantic-size-spacing-30);--sapphire-semantic-size-spacing-data-collection-item-horizontal-lg: var(--sapphire-semantic-size-spacing-40);--sapphire-semantic-size-spacing-container-horizontal-sm: var(--sapphire-semantic-size-spacing-30);--sapphire-semantic-size-spacing-container-horizontal-md: var(--sapphire-semantic-size-spacing-60);--sapphire-semantic-size-breakpoint-xs: 576px;--sapphire-semantic-size-breakpoint-s: 768px;--sapphire-semantic-size-breakpoint-m: 960px;--sapphire-semantic-size-breakpoint-l: 1200px;--sapphire-semantic-size-breakpoint-xl: 1400px;--sapphire-semantic-time-fade-default: var(--sapphire-global-time-200);--sapphire-semantic-time-fade-quick: var(--sapphire-global-time-100);--sapphire-semantic-time-fade-slow: var(--sapphire-global-time-1800);--sapphire-semantic-time-motion-very-slow: var(--sapphire-global-time-1000);--sapphire-semantic-time-motion-slow: var(--sapphire-global-time-400);--sapphire-semantic-time-motion-default: var(--sapphire-global-time-200);--sapphire-semantic-time-motion-quick: var(--sapphire-global-time-100)}::ng-deep .cdk-overlay-container,::ng-deep .cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}::ng-deep .cdk-overlay-container{position:fixed;z-index:1000}::ng-deep .cdk-overlay-container:empty{display:none}::ng-deep .cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}::ng-deep .cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}::ng-deep .cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}::ng-deep .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active ::ng-deep .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}::ng-deep .cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}::ng-deep .cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}::ng-deep .cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}::ng-deep .cdk-overlay-backdrop-noop-animation{transition:none}::ng-deep .cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}::ng-deep .cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}::ng-deep .cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] ::ng-deep .cdk-visually-hidden{left:auto;right:0}\n"] }]
|
|
5810
|
+
}] });
|
|
5811
|
+
|
|
5812
|
+
/**
|
|
5813
|
+
* Applies the current theme style on an element which is not under the rendered
|
|
5814
|
+
* sp-theme, in DOM tree. Useful for non-Sapphire portal components that render things in body.
|
|
5815
|
+
*
|
|
5816
|
+
*/
|
|
5817
|
+
class ThemeRootDirective {
|
|
5818
|
+
constructor(elementRef, themeRef, parentTheme) {
|
|
5819
|
+
const theme = parentTheme || themeRef.theme;
|
|
5820
|
+
theme.applyOnDomNode(elementRef.nativeElement);
|
|
5821
|
+
}
|
|
5822
|
+
}
|
|
5823
|
+
ThemeRootDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ThemeRootDirective, deps: [{ token: i0.ElementRef }, { token: TopLevelThemeRef }, { token: ThemeBaseDirective, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
5824
|
+
ThemeRootDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: ThemeRootDirective, isStandalone: true, selector: "[sp-theme-root]", ngImport: i0 });
|
|
5825
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ThemeRootDirective, decorators: [{
|
|
5826
|
+
type: Directive,
|
|
5827
|
+
args: [{
|
|
5828
|
+
selector: '[sp-theme-root]',
|
|
5829
|
+
standalone: true,
|
|
5830
|
+
}]
|
|
5831
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: TopLevelThemeRef }, { type: ThemeBaseDirective, decorators: [{
|
|
5832
|
+
type: Optional
|
|
5833
|
+
}, {
|
|
5834
|
+
type: SkipSelf
|
|
5835
|
+
}] }]; } });
|
|
5836
|
+
|
|
5837
|
+
/**
|
|
5838
|
+
* - Makes sure currently applied theme is applied on overlays which are rendered as portal
|
|
5839
|
+
* - Provides `THEME_ATTRIBUTE` injectable via sp-theme component. Useful when a custom component
|
|
5840
|
+
* needs to render a portal with the currently applied theme class.
|
|
5841
|
+
*/
|
|
5842
|
+
class SapphireThemeModule {
|
|
5843
|
+
}
|
|
5844
|
+
SapphireThemeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SapphireThemeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
5845
|
+
SapphireThemeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.0", ngImport: i0, type: SapphireThemeModule, imports: [OverlayModule, ThemeRootDirective, ThemeDefault, ThemeDefaultDark], exports: [ThemeRootDirective, ThemeDefault, ThemeDefaultDark] });
|
|
5846
|
+
SapphireThemeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SapphireThemeModule, imports: [OverlayModule, ThemeDefault, ThemeDefaultDark] });
|
|
5847
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SapphireThemeModule, decorators: [{
|
|
5848
|
+
type: NgModule,
|
|
5849
|
+
args: [{
|
|
5850
|
+
declarations: [],
|
|
5851
|
+
imports: [OverlayModule, ThemeRootDirective, ThemeDefault, ThemeDefaultDark],
|
|
5852
|
+
exports: [ThemeRootDirective, ThemeDefault, ThemeDefaultDark],
|
|
5853
|
+
}]
|
|
5854
|
+
}] });
|
|
5855
|
+
|
|
5856
|
+
// We have separate public_api.ts file for each angular module, to have them
|
|
5857
|
+
/**
|
|
5858
|
+
* Exporting "tokens.size.breakpoint" is not good enough.
|
|
5859
|
+
* That is a map from breakpoint name to a a string which is the css variable
|
|
5860
|
+
* that will have the breakpoint size. This is not useful in a JS context.
|
|
5861
|
+
*
|
|
5862
|
+
* TODO: export something which uses the "tokens.size.breakpoint" and offers
|
|
5863
|
+
* something usabled in JS.
|
|
5864
|
+
*/
|
|
5865
|
+
const DEFAULT_BREAKPOINTS = {
|
|
5866
|
+
XS: 576,
|
|
5867
|
+
S: 768,
|
|
5868
|
+
M: 960,
|
|
5869
|
+
L: 1200,
|
|
5870
|
+
XL: 1400,
|
|
5871
|
+
};
|
|
5872
|
+
|
|
5873
|
+
const tooltips = {};
|
|
5874
|
+
let globalWarmedUp = false;
|
|
5875
|
+
let globalWarmUpTimeout = null;
|
|
5876
|
+
let globalCooldownTimeout = null;
|
|
5877
|
+
const TOOLTIP_COOLDOWN = 500;
|
|
5878
|
+
class TooltipDirective {
|
|
5879
|
+
/**
|
|
5880
|
+
* The amount of time that has to pass before tooltip will show
|
|
5881
|
+
* upon user interaction activating it – aka "warm up" period.
|
|
5882
|
+
*
|
|
5883
|
+
* @default 500
|
|
5884
|
+
*/
|
|
5885
|
+
get delay() {
|
|
5886
|
+
return this._delay;
|
|
5737
5887
|
}
|
|
5738
5888
|
set delay(value) {
|
|
5739
5889
|
this._delay = coerceNumberProperty(value);
|
|
@@ -5896,7 +6046,7 @@ class TooltipDirective {
|
|
|
5896
6046
|
};
|
|
5897
6047
|
}
|
|
5898
6048
|
}
|
|
5899
|
-
TooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TooltipDirective, deps: [{ token:
|
|
6049
|
+
TooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TooltipDirective, deps: [{ token: SapphireOverlay }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
5900
6050
|
TooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: TooltipDirective, isStandalone: true, selector: "[spTooltip]", inputs: { tooltipText: ["spTooltip", "tooltipText"], delay: ["spTooltipDelay", "delay"], placement: ["spTooltipPlacement", "placement"] }, host: { listeners: { "mouseenter": "warmup()", "mouseleave": "hide()", "click": "hide(true)", "document:keydown.escape": "handleGlobalEscapeKeyEvent()", "focus": "onFocus($event)", "blur": "onBlur($event)" } }, exportAs: ["spTooltip"], ngImport: i0 });
|
|
5901
6051
|
__decorate([
|
|
5902
6052
|
AutoId()
|
|
@@ -5915,7 +6065,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
5915
6065
|
},
|
|
5916
6066
|
exportAs: 'spTooltip',
|
|
5917
6067
|
}]
|
|
5918
|
-
}], ctorParameters: function () { return [{ type:
|
|
6068
|
+
}], ctorParameters: function () { return [{ type: SapphireOverlay }, { type: i0.ElementRef }]; }, propDecorators: { id: [], tooltipText: [{
|
|
5919
6069
|
type: Input,
|
|
5920
6070
|
args: ['spTooltip']
|
|
5921
6071
|
}], delay: [{
|
|
@@ -6381,6 +6531,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
6381
6531
|
args: ['class']
|
|
6382
6532
|
}] } });
|
|
6383
6533
|
|
|
6534
|
+
/**
|
|
6535
|
+
* A patch to fix the issue of sticky header position getting affected
|
|
6536
|
+
* by transform, which is due to transform making the element
|
|
6537
|
+
* a [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block).
|
|
6538
|
+
*
|
|
6539
|
+
* It intercepts style assignments on the content wrapper, and converts
|
|
6540
|
+
* transform: translateY(value) to top: value, to avoid making the content
|
|
6541
|
+
* wrapper a containing block for sticky positioned children.
|
|
6542
|
+
*
|
|
6543
|
+
* @see
|
|
6544
|
+
* https://github.com/angular/components/issues/14833
|
|
6545
|
+
* https://github.com/angular/components/issues/18240
|
|
6546
|
+
* https://github.com/angular/components/issues/21576
|
|
6547
|
+
* https://github.com/angular/components/issues/28584
|
|
6548
|
+
*/
|
|
6549
|
+
class CdkVirtualScrollViewportFixDirective {
|
|
6550
|
+
constructor(cdkViewport) {
|
|
6551
|
+
this.cdkViewport = cdkViewport;
|
|
6552
|
+
}
|
|
6553
|
+
ngOnInit() {
|
|
6554
|
+
const contentWrapper = this.cdkViewport._contentWrapper.nativeElement;
|
|
6555
|
+
/**
|
|
6556
|
+
* Proxy to set `top: {value}px` instead of `transform: translateY({value}px)`
|
|
6557
|
+
* whenever `style.transform` is set.
|
|
6558
|
+
*/
|
|
6559
|
+
const styleProxy = new Proxy(contentWrapper.style, {
|
|
6560
|
+
set: (target, prop, value) => {
|
|
6561
|
+
const top = prop === 'transform'
|
|
6562
|
+
? value?.match(/translateY\((\d+)px\)/)?.[1]
|
|
6563
|
+
: undefined;
|
|
6564
|
+
if (top) {
|
|
6565
|
+
target['top'] = `${top}px`;
|
|
6566
|
+
return true;
|
|
6567
|
+
}
|
|
6568
|
+
target[prop] = value;
|
|
6569
|
+
return true;
|
|
6570
|
+
},
|
|
6571
|
+
});
|
|
6572
|
+
// Not directly setting style proxy to contentWrapper.style, to limit
|
|
6573
|
+
// it to the styles set by CdkVirtualScrollViewport.
|
|
6574
|
+
// i.e. only setting `top` instead of `transform`, when set by cdk viewport.
|
|
6575
|
+
this.cdkViewport._contentWrapper.nativeElement = new Proxy(contentWrapper, {
|
|
6576
|
+
get: (target, prop) => {
|
|
6577
|
+
return prop === 'style' ? styleProxy : target[prop];
|
|
6578
|
+
},
|
|
6579
|
+
});
|
|
6580
|
+
}
|
|
6581
|
+
}
|
|
6582
|
+
CdkVirtualScrollViewportFixDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: CdkVirtualScrollViewportFixDirective, deps: [{ token: i1$3.CdkVirtualScrollViewport }], target: i0.ɵɵFactoryTarget.Directive });
|
|
6583
|
+
CdkVirtualScrollViewportFixDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: CdkVirtualScrollViewportFixDirective, isStandalone: true, selector: "cdk-virtual-scroll-viewport", ngImport: i0 });
|
|
6584
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: CdkVirtualScrollViewportFixDirective, decorators: [{
|
|
6585
|
+
type: Directive,
|
|
6586
|
+
args: [{
|
|
6587
|
+
selector: 'cdk-virtual-scroll-viewport',
|
|
6588
|
+
standalone: true,
|
|
6589
|
+
}]
|
|
6590
|
+
}], ctorParameters: function () { return [{ type: i1$3.CdkVirtualScrollViewport }]; } });
|
|
6591
|
+
|
|
6384
6592
|
class SapphireTableModule {
|
|
6385
6593
|
}
|
|
6386
6594
|
SapphireTableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SapphireTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
@@ -6396,6 +6604,7 @@ SapphireTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ver
|
|
|
6396
6604
|
TableSortHeaderDirective], imports: [CommonModule,
|
|
6397
6605
|
SapphireIconModule,
|
|
6398
6606
|
TruncatedWithTooltipDirective,
|
|
6607
|
+
CdkVirtualScrollViewportFixDirective,
|
|
6399
6608
|
UseComponentStyles], exports: [TableComponent,
|
|
6400
6609
|
TableDirective,
|
|
6401
6610
|
TableBodyDirective,
|
|
@@ -6405,7 +6614,8 @@ SapphireTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ver
|
|
|
6405
6614
|
TableHeadCellComponent,
|
|
6406
6615
|
TableCellDirective,
|
|
6407
6616
|
TableSortDirective,
|
|
6408
|
-
TableSortHeaderDirective
|
|
6617
|
+
TableSortHeaderDirective,
|
|
6618
|
+
CdkVirtualScrollViewportFixDirective] });
|
|
6409
6619
|
SapphireTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SapphireTableModule, imports: [CommonModule,
|
|
6410
6620
|
SapphireIconModule] });
|
|
6411
6621
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SapphireTableModule, decorators: [{
|
|
@@ -6427,6 +6637,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
6427
6637
|
CommonModule,
|
|
6428
6638
|
SapphireIconModule,
|
|
6429
6639
|
TruncatedWithTooltipDirective,
|
|
6640
|
+
CdkVirtualScrollViewportFixDirective,
|
|
6430
6641
|
UseComponentStyles,
|
|
6431
6642
|
],
|
|
6432
6643
|
exports: [
|
|
@@ -6440,6 +6651,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
6440
6651
|
TableCellDirective,
|
|
6441
6652
|
TableSortDirective,
|
|
6442
6653
|
TableSortHeaderDirective,
|
|
6654
|
+
CdkVirtualScrollViewportFixDirective,
|
|
6443
6655
|
],
|
|
6444
6656
|
}]
|
|
6445
6657
|
}] });
|
|
@@ -6737,126 +6949,186 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
6737
6949
|
}]
|
|
6738
6950
|
}] });
|
|
6739
6951
|
|
|
6740
|
-
|
|
6741
|
-
|
|
6742
|
-
|
|
6743
|
-
|
|
6744
|
-
|
|
6745
|
-
|
|
6746
|
-
ThemeDefault.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ThemeDefault, isStandalone: true, selector: "sp-theme-default", hostDirectives: [{ directive: ThemeBaseDirective }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["@keyframes backdrop-fade-in{0%{background-color:transparent}to{background-color:var(--sapphire-semantic-color-background-backdrop)}}@keyframes backdrop-fade-out{0%{background-color:var(--sapphire-semantic-color-background-backdrop)}to{background-color:transparent}}.sapphire-backdrop,::ng-deep .sapphire-backdrop{width:100%;height:100%;display:flex;justify-content:center;align-items:center;animation-name:backdrop-fade-in;animation-duration:var(--sapphire-semantic-time-fade-default);animation-timing-function:ease-in-out;animation-fill-mode:forwards}.sapphire-backdrop--exiting,::ng-deep .sapphire-backdrop--exiting{animation-name:backdrop-fade-out}.sapphire-theme-default,:host,.sapphire-theme--secondary,:host ::ng-deep .sapphire-theme--secondary,.sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-semantic-size-breakpoint-xl: 1400px;--sapphire-semantic-size-breakpoint-l: 1200px;--sapphire-semantic-size-breakpoint-m: 960px;--sapphire-semantic-size-breakpoint-s: 768px;--sapphire-semantic-size-breakpoint-xs: 576px;--sapphire-semantic-size-width-panel-lg: 100%;--sapphire-semantic-size-width-panel-sm: 100%;--sapphire-semantic-font-weight-display-bold: 700;--sapphire-semantic-font-weight-display-regular: 400;--sapphire-semantic-font-weight-default-bold: 700;--sapphire-semantic-font-weight-default-semibold: 600;--sapphire-semantic-font-weight-default-regular: 400;--sapphire-global-time-2000: 2s;--sapphire-global-time-1800: 1.8s;--sapphire-global-time-1000: 1s;--sapphire-global-time-400: .4s;--sapphire-global-time-200: .2s;--sapphire-global-time-100: .1s;--sapphire-global-size-ratio-height: .875;--sapphire-global-size-line-height-md: 1.5;--sapphire-global-size-line-height-sm: 1.2;--sapphire-global-size-font-300: 3rem;--sapphire-global-size-font-220: 2.1875rem;--sapphire-global-size-font-188: 1.875rem;--sapphire-global-size-font-150: 1.5rem;--sapphire-global-size-font-130: 1.3125rem;--sapphire-global-size-font-112: 1.125rem;--sapphire-global-size-font-106: 1.0625rem;--sapphire-global-size-font-100: 1rem;--sapphire-global-size-font-88: .875rem;--sapphire-global-size-font-75: .75rem;--sapphire-global-size-font-60: .625rem;--sapphire-global-size-generic-4320: 108rem;--sapphire-global-size-generic-3780: 94.5rem;--sapphire-global-size-generic-3600: 90rem;--sapphire-global-size-generic-3200: 80rem;--sapphire-global-size-generic-2560: 64rem;--sapphire-global-size-generic-2400: 60rem;--sapphire-global-size-generic-1920: 48rem;--sapphire-global-size-generic-1600: 40rem;--sapphire-global-size-generic-1400: 35rem;--sapphire-global-size-generic-1280: 32rem;--sapphire-global-size-generic-1200: 30rem;--sapphire-global-size-generic-1120: 28rem;--sapphire-global-size-generic-1000: 25rem;--sapphire-global-size-generic-960: 24rem;--sapphire-global-size-generic-940: 23.5rem;--sapphire-global-size-generic-900: 22.5rem;--sapphire-global-size-generic-800: 20rem;--sapphire-global-size-generic-750: 18.75rem;--sapphire-global-size-generic-640: 16rem;--sapphire-global-size-generic-600: 15rem;--sapphire-global-size-generic-560: 14rem;--sapphire-global-size-generic-480: 12rem;--sapphire-global-size-generic-400: 10rem;--sapphire-global-size-generic-340: 8.5rem;--sapphire-global-size-generic-320: 8rem;--sapphire-global-size-generic-300: 7.5rem;--sapphire-global-size-generic-280: 7rem;--sapphire-global-size-generic-240: 6rem;--sapphire-global-size-generic-200: 5rem;--sapphire-global-size-generic-180: 4.5rem;--sapphire-global-size-generic-160: 4rem;--sapphire-global-size-generic-140: 3.5rem;--sapphire-global-size-generic-120: 3rem;--sapphire-global-size-generic-100: 2.5rem;--sapphire-global-size-generic-80: 2rem;--sapphire-global-size-generic-60: 1.5rem;--sapphire-global-size-generic-50: 1.25rem;--sapphire-global-size-generic-40: 1rem;--sapphire-global-size-generic-35: .875rem;--sapphire-global-size-generic-30: .75rem;--sapphire-global-size-generic-25: .625rem;--sapphire-global-size-generic-20: .5rem;--sapphire-global-size-generic-15: .375rem;--sapphire-global-size-generic-10: .25rem;--sapphire-global-size-generic-5: .125rem;--sapphire-global-size-generic-2: .0625rem;--sapphire-global-size-generic-0: 0rem;--sapphire-global-size-static-60: 24px;--sapphire-global-size-static-30: 12px;--sapphire-global-size-static-20: 8px;--sapphire-global-size-static-10: 4px;--sapphire-global-size-static-5: 2px;--sapphire-global-size-static-2: 1px;--sapphire-global-size-static-0: 0px;--sapphire-global-shadow-lg: 0px 0px 2px 0px rgba(34, 64, 82, .02), 0px -1.5px 6px 0px rgba(34, 64, 82, .03), 0px 4.5px 12px 0px rgba(34, 64, 82, .04), 0px 14.5px 18px 0px rgba(34, 64, 82, .04), 0px 26px 34px 0px rgba(34, 64, 82, .05), 0px 84px 92px 0px rgba(34, 64, 82, .07), 0px 0px 2px 0px rgba(34, 64, 82, .05), 0px 0px 1px 0px rgba(34, 64, 82, .2);--sapphire-global-shadow-md: 0px 0px 3px 0px rgba(34, 64, 82, .02), 0px 3px 7px 0px rgba(34, 64, 82, .03), 0px 6.5px 14px 0px rgba(34, 64, 82, .04), 0px 13px 29px 0px rgba(34, 64, 82, .05), 0px 36px 80px 0px rgba(34, 64, 82, .07), 0px 0px 2px 0px rgba(34, 64, 82, .05), 0px 0px 1px 0px rgba(34, 64, 82, .2);--sapphire-global-shadow-sm: 0px 0px 2px 0px rgba(34, 64, 82, .06), 0px 1.5px 4px 0px rgba(34, 64, 82, .04), 0px 4.5px 6px 0px rgba(34, 64, 82, .04), 0px 10.5px 12px 0px rgba(34, 64, 82, .03), 0px 25px 24px 0px rgba(34, 64, 82, .02), 0px 100px 64px 0px rgba(34, 64, 82, .02), 0px 0px 2px 0px rgba(34, 64, 82, .05), 0px 0px 1px 0px rgba(34, 64, 82, .2);--sapphire-global-opacity-50: .5;--sapphire-global-opacity-40: .4;--sapphire-global-opacity-35: .35;--sapphire-global-font-danske-human-name: \"Danske Human\";--sapphire-global-font-danske-text-name: \"Danske Text v2\";--sapphire-global-color-secondary-orange-600: hsl(19, 100%, 34%);--sapphire-global-color-secondary-orange-500: hsl(17, 100%, 43%);--sapphire-global-color-secondary-orange-400: hsl(19, 84%, 54%);--sapphire-global-color-secondary-orange-300: hsl(21, 84%, 66%);--sapphire-global-color-secondary-orange-200: hsl(23, 83%, 79%);--sapphire-global-color-secondary-orange-150: hsl(25, 84%, 86%);--sapphire-global-color-secondary-orange-100: hsl(26, 89%, 93%);--sapphire-global-color-secondary-orange-75: hsl(27, 85%, 95%);--sapphire-global-color-secondary-orange-50: hsl(28, 89%, 96%);--sapphire-global-color-secondary-teal-600: hsl(171, 100%, 22%);--sapphire-global-color-secondary-teal-500: hsl(171, 100%, 26%);--sapphire-global-color-secondary-teal-400: hsl(172, 50%, 42%);--sapphire-global-color-secondary-teal-300: hsl(172, 36%, 57%);--sapphire-global-color-secondary-teal-200: hsl(171, 36%, 74%);--sapphire-global-color-secondary-teal-150: hsl(171, 36%, 82%);--sapphire-global-color-secondary-teal-100: hsl(172, 35%, 92%);--sapphire-global-color-secondary-teal-75: hsl(170, 38%, 94%);--sapphire-global-color-secondary-teal-50: hsl(171, 33%, 96%);--sapphire-global-color-secondary-forest-green-600: hsl(105, 93%, 23%);--sapphire-global-color-secondary-forest-green-500: hsl(105, 93%, 28%);--sapphire-global-color-secondary-forest-green-400: hsl(105, 48%, 43%);--sapphire-global-color-secondary-forest-green-300: hsl(105, 36%, 58%);--sapphire-global-color-secondary-forest-green-200: hsl(105, 36%, 74%);--sapphire-global-color-secondary-forest-green-150: hsl(105, 36%, 82%);--sapphire-global-color-secondary-forest-green-100: hsl(104, 35%, 92%);--sapphire-global-color-secondary-forest-green-75: hsl(109, 35%, 94%);--sapphire-global-color-secondary-forest-green-50: hsl(111, 33%, 96%);--sapphire-global-color-secondary-cobalt-600: hsl(215, 87%, 42%);--sapphire-global-color-secondary-cobalt-500: hsl(215, 92%, 51%);--sapphire-global-color-secondary-cobalt-400: hsl(215, 92%, 62%);--sapphire-global-color-secondary-cobalt-300: hsl(215, 92%, 72%);--sapphire-global-color-secondary-cobalt-200: hsl(215, 91%, 83%);--sapphire-global-color-secondary-cobalt-150: hsl(216, 93%, 89%);--sapphire-global-color-secondary-cobalt-100: hsl(216, 93%, 95%);--sapphire-global-color-secondary-cobalt-75: hsl(215, 90%, 96%);--sapphire-global-color-secondary-cobalt-50: hsl(215, 86%, 97%);--sapphire-global-color-secondary-gray-600: hsl(202, 6%, 38%);--sapphire-global-color-secondary-gray-500: hsl(201, 6%, 46%);--sapphire-global-color-secondary-gray-400: hsl(200, 5%, 56%);--sapphire-global-color-secondary-gray-300: hsl(203, 5%, 67%);--sapphire-global-color-secondary-gray-200: hsl(200, 6%, 79%);--sapphire-global-color-secondary-gray-150: hsl(195, 6%, 86%);--sapphire-global-color-secondary-gray-100: hsl(210, 6%, 93%);--sapphire-global-color-secondary-gray-75: hsl(240, 4%, 95%);--sapphire-global-color-secondary-gray-50: hsl(180, 6%, 97%);--sapphire-global-color-secondary-orchid-600: hsl(304, 36%, 42%);--sapphire-global-color-secondary-orchid-500: hsl(304, 37%, 51%);--sapphire-global-color-secondary-orchid-400: hsl(304, 37%, 61%);--sapphire-global-color-secondary-orchid-300: hsl(303, 37%, 71%);--sapphire-global-color-secondary-orchid-200: hsl(304, 37%, 82%);--sapphire-global-color-secondary-orchid-150: hsl(305, 38%, 88%);--sapphire-global-color-secondary-orchid-100: hsl(305, 38%, 94%);--sapphire-global-color-secondary-orchid-75: hsl(300, 36%, 96%);--sapphire-global-color-secondary-orchid-50: hsl(300, 33%, 97%);--sapphire-global-color-secondary-beige-600: hsl(38, 20%, 35%);--sapphire-global-color-secondary-beige-500: hsl(40, 20%, 43%);--sapphire-global-color-secondary-beige-400: hsl(38, 15%, 54%);--sapphire-global-color-secondary-beige-300: hsl(39, 16%, 65%);--sapphire-global-color-secondary-beige-200: hsl(41, 14%, 78%);--sapphire-global-color-secondary-beige-150: hsl(40, 16%, 85%);--sapphire-global-color-secondary-beige-100: hsl(40, 17%, 93%);--sapphire-global-color-secondary-beige-75: hsl(30, 15%, 95%);--sapphire-global-color-secondary-beige-50: hsl(30, 11%, 96%);--sapphire-global-color-secondary-gold-600: hsl(42, 97%, 25%);--sapphire-global-color-secondary-gold-500: hsl(42, 96%, 31%);--sapphire-global-color-secondary-gold-400: hsl(42, 54%, 45%);--sapphire-global-color-secondary-gold-300: hsl(42, 44%, 59%);--sapphire-global-color-secondary-gold-200: hsl(42, 44%, 74%);--sapphire-global-color-secondary-gold-150: hsl(43, 43%, 83%);--sapphire-global-color-secondary-gold-100: hsl(43, 43%, 92%);--sapphire-global-color-secondary-gold-75: hsl(42, 42%, 94%);--sapphire-global-color-secondary-gold-50: hsl(40, 43%, 96%);--sapphire-global-color-secondary-violet-600: hsl(245, 41%, 52%);--sapphire-global-color-secondary-violet-500: hsl(245, 66%, 64%);--sapphire-global-color-secondary-violet-400: hsl(245, 66%, 71%);--sapphire-global-color-secondary-violet-300: hsl(245, 66%, 78%);--sapphire-global-color-secondary-violet-200: hsl(244, 65%, 86%);--sapphire-global-color-secondary-violet-150: hsl(246, 66%, 91%);--sapphire-global-color-secondary-violet-100: hsl(244, 64%, 96%);--sapphire-global-color-secondary-violet-75: hsl(245, 65%, 97%);--sapphire-global-color-secondary-violet-50: hsl(240, 64%, 98%);--sapphire-global-color-secondary-purple-600: hsl(270, 28%, 45%);--sapphire-global-color-secondary-purple-500: hsl(270, 33%, 55%);--sapphire-global-color-secondary-purple-400: hsl(270, 33%, 64%);--sapphire-global-color-secondary-purple-300: hsl(270, 33%, 73%);--sapphire-global-color-secondary-purple-200: hsl(269, 33%, 83%);--sapphire-global-color-secondary-purple-150: hsl(272, 32%, 88%);--sapphire-global-color-secondary-purple-100: hsl(270, 36%, 95%);--sapphire-global-color-secondary-purple-75: hsl(274, 33%, 96%);--sapphire-global-color-secondary-purple-50: hsl(270, 29%, 97%);--sapphire-global-color-secondary-pink-600: hsl(327, 48%, 43%);--sapphire-global-color-secondary-pink-500: hsl(327, 53%, 53%);--sapphire-global-color-secondary-pink-400: hsl(326, 53%, 63%);--sapphire-global-color-secondary-pink-300: hsl(326, 53%, 73%);--sapphire-global-color-secondary-pink-200: hsl(327, 53%, 83%);--sapphire-global-color-secondary-pink-150: hsl(327, 54%, 89%);--sapphire-global-color-secondary-pink-100: hsl(328, 56%, 95%);--sapphire-global-color-secondary-pink-75: hsl(330, 50%, 96%);--sapphire-global-color-secondary-pink-50: hsl(326, 54%, 97%);--sapphire-global-color-secondary-lime-600: hsl(71, 76%, 23%);--sapphire-global-color-secondary-lime-500: hsl(71, 76%, 28%);--sapphire-global-color-secondary-lime-400: hsl(71, 42%, 42%);--sapphire-global-color-secondary-lime-300: hsl(72, 30%, 57%);--sapphire-global-color-secondary-lime-200: hsl(70, 29%, 73%);--sapphire-global-color-secondary-lime-150: hsl(71, 30%, 82%);--sapphire-global-color-secondary-lime-100: hsl(69, 29%, 91%);--sapphire-global-color-secondary-lime-75: hsl(66, 29%, 93%);--sapphire-global-color-secondary-lime-50: hsl(70, 27%, 96%);--sapphire-global-color-secondary-indigo-600: hsl(230, 62%, 53%);--sapphire-global-color-secondary-indigo-500: hsl(230, 100%, 64%);--sapphire-global-color-secondary-indigo-400: hsl(230, 100%, 72%);--sapphire-global-color-secondary-indigo-300: hsl(230, 100%, 79%);--sapphire-global-color-secondary-indigo-200: hsl(229, 100%, 87%);--sapphire-global-color-secondary-indigo-150: hsl(229, 100%, 91%);--sapphire-global-color-secondary-indigo-100: hsl(231, 100%, 96%);--sapphire-global-color-secondary-indigo-75: hsl(229, 100%, 97%);--sapphire-global-color-secondary-indigo-50: hsl(229, 100%, 98%);--sapphire-global-color-secondary-electro-600: hsl(207, 31%, 38%);--sapphire-global-color-secondary-electro-500: hsl(206, 31%, 46%);--sapphire-global-color-secondary-electro-400: hsl(206, 27%, 56%);--sapphire-global-color-secondary-electro-300: hsl(207, 27%, 67%);--sapphire-global-color-secondary-electro-200: hsl(208, 27%, 80%);--sapphire-global-color-secondary-electro-150: hsl(205, 27%, 86%);--sapphire-global-color-secondary-electro-100: hsl(207, 27%, 94%);--sapphire-global-color-secondary-electro-75: hsl(206, 28%, 95%);--sapphire-global-color-secondary-electro-50: hsl(204, 29%, 97%);--sapphire-global-color-secondary-copper-600: hsl(16, 54%, 39%);--sapphire-global-color-secondary-copper-500: hsl(15, 54%, 48%);--sapphire-global-color-secondary-copper-400: hsl(15, 50%, 59%);--sapphire-global-color-secondary-copper-300: hsl(15, 50%, 69%);--sapphire-global-color-secondary-copper-200: hsl(16, 49%, 81%);--sapphire-global-color-secondary-copper-150: hsl(15, 51%, 87%);--sapphire-global-color-secondary-copper-100: hsl(16, 48%, 94%);--sapphire-global-color-secondary-copper-75: hsl(16, 48%, 95%);--sapphire-global-color-secondary-copper-50: hsl(15, 50%, 97%);--sapphire-global-color-secondary-aqua-600: hsl(192, 100%, 26%);--sapphire-global-color-secondary-aqua-500: hsl(192, 100%, 32%);--sapphire-global-color-secondary-aqua-400: hsl(192, 55%, 46%);--sapphire-global-color-secondary-aqua-300: hsl(192, 47%, 60%);--sapphire-global-color-secondary-aqua-200: hsl(192, 47%, 76%);--sapphire-global-color-secondary-aqua-150: hsl(192, 47%, 84%);--sapphire-global-color-secondary-aqua-100: hsl(190, 45%, 92%);--sapphire-global-color-secondary-aqua-75: hsl(193, 47%, 94%);--sapphire-global-color-secondary-aqua-50: hsl(193, 47%, 96%);--sapphire-global-color-yellow-975: hsl(20, 95%, 8%);--sapphire-global-color-yellow-950: hsl(19, 89%, 11%);--sapphire-global-color-yellow-925: hsl(21, 87%, 15%);--sapphire-global-color-yellow-900: hsl(21, 88%, 19%);--sapphire-global-color-yellow-875: hsl(21, 86%, 23%);--sapphire-global-color-yellow-850: hsl(22, 85%, 27%);--sapphire-global-color-yellow-800: hsl(22, 88%, 29%);--sapphire-global-color-yellow-750: hsl(24, 89%, 33%);--sapphire-global-color-yellow-700: hsl(25, 93%, 37%);--sapphire-global-color-yellow-650: hsl(28, 94%, 41%);--sapphire-global-color-yellow-600: hsl(31, 93%, 44%);--sapphire-global-color-yellow-550: hsl(34, 94%, 48%);--sapphire-global-color-yellow-500: hsl(37, 95%, 52%);--sapphire-global-color-yellow-450: hsl(40, 95%, 54%);--sapphire-global-color-yellow-400: hsl(43, 98%, 55%);--sapphire-global-color-yellow-350: hsl(44, 98%, 60%);--sapphire-global-color-yellow-300: hsl(46, 98%, 64%);--sapphire-global-color-yellow-250: hsl(47, 97%, 70%);--sapphire-global-color-yellow-200: hsl(48, 98%, 76%);--sapphire-global-color-yellow-150: hsl(48, 98%, 79%);--sapphire-global-color-yellow-125: hsl(49, 97%, 85%);--sapphire-global-color-yellow-100: hsl(48, 100%, 89%);--sapphire-global-color-yellow-75: hsl(49, 100%, 92%);--sapphire-global-color-yellow-50: hsl(51, 100%, 96%);--sapphire-global-color-yellow-25: hsl(54, 100%, 98%);--sapphire-global-color-red-975: hsl(0, 33%, 10%);--sapphire-global-color-red-950: hsl(355, 38%, 12%);--sapphire-global-color-red-925: hsl(356, 41%, 14%);--sapphire-global-color-red-900: hsl(355, 43%, 15%);--sapphire-global-color-red-875: hsl(354, 44%, 18%);--sapphire-global-color-red-850: hsl(353, 48%, 21%);--sapphire-global-color-red-800: hsl(353, 50%, 26%);--sapphire-global-color-red-750: hsl(351, 54%, 31%);--sapphire-global-color-red-700: hsl(351, 55%, 35%);--sapphire-global-color-red-650: hsl(350, 57%, 39%);--sapphire-global-color-red-600: hsl(349, 60%, 44%);--sapphire-global-color-red-550: hsl(349, 61%, 48%);--sapphire-global-color-red-500: hsl(348, 72%, 53%);--sapphire-global-color-red-450: hsl(351, 73%, 59%);--sapphire-global-color-red-400: hsl(353, 75%, 65%);--sapphire-global-color-red-350: hsl(355, 79%, 71%);--sapphire-global-color-red-300: hsl(356, 82%, 76%);--sapphire-global-color-red-250: hsl(357, 88%, 81%);--sapphire-global-color-red-200: hsl(358, 92%, 86%);--sapphire-global-color-red-150: hsl(359, 100%, 91%);--sapphire-global-color-red-125: hsl(358, 100%, 94%);--sapphire-global-color-red-100: hsl(357, 100%, 96%);--sapphire-global-color-red-75: hsl(356, 100%, 97%);--sapphire-global-color-red-50: hsl(355, 100%, 98%);--sapphire-global-color-red-25: hsl(0, 100%, 99%);--sapphire-global-color-green-975: hsl(159, 100%, 5%);--sapphire-global-color-green-950: hsl(159, 100%, 6%);--sapphire-global-color-green-925: hsl(159, 100%, 7%);--sapphire-global-color-green-900: hsl(159, 100%, 7%);--sapphire-global-color-green-875: hsl(159, 100%, 9%);--sapphire-global-color-green-850: hsl(158, 100%, 10%);--sapphire-global-color-green-800: hsl(159, 100%, 13%);--sapphire-global-color-green-750: hsl(159, 100%, 15%);--sapphire-global-color-green-700: hsl(159, 100%, 17%);--sapphire-global-color-green-650: hsl(159, 100%, 19%);--sapphire-global-color-green-600: hsl(159, 100%, 22%);--sapphire-global-color-green-550: hsl(159, 100%, 24%);--sapphire-global-color-green-500: hsl(159, 100%, 27%);--sapphire-global-color-green-450: hsl(159, 71%, 34%);--sapphire-global-color-green-400: hsl(159, 51%, 42%);--sapphire-global-color-green-350: hsl(159, 37%, 50%);--sapphire-global-color-green-300: hsl(159, 36%, 57%);--sapphire-global-color-green-250: hsl(159, 36%, 66%);--sapphire-global-color-green-200: hsl(160, 36%, 74%);--sapphire-global-color-green-150: hsl(159, 36%, 83%);--sapphire-global-color-green-125: hsl(159, 37%, 88%);--sapphire-global-color-green-100: hsl(159, 35%, 92%);--sapphire-global-color-green-75: hsl(162, 33%, 94%);--sapphire-global-color-green-50: hsl(158, 40%, 96%);--sapphire-global-color-green-25: hsl(150, 40%, 98%);--sapphire-global-color-blue-975: hsl(202, 100%, 7%);--sapphire-global-color-blue-950: hsl(203, 100%, 9%);--sapphire-global-color-blue-925: hsl(203, 100%, 10%);--sapphire-global-color-blue-900: hsl(202, 100%, 11%);--sapphire-global-color-blue-875: hsl(203, 100%, 13%);--sapphire-global-color-blue-850: hsl(203, 100%, 15%);--sapphire-global-color-blue-800: hsl(203, 100%, 19%);--sapphire-global-color-blue-750: hsl(202, 100%, 22%);--sapphire-global-color-blue-700: hsl(203, 100%, 25%);--sapphire-global-color-blue-650: hsl(203, 100%, 29%);--sapphire-global-color-blue-600: hsl(203, 100%, 32%);--sapphire-global-color-blue-550: hsl(203, 100%, 35%);--sapphire-global-color-blue-500: hsl(203, 100%, 39%);--sapphire-global-color-blue-450: hsl(203, 90%, 44%);--sapphire-global-color-blue-400: hsl(203, 80%, 50%);--sapphire-global-color-blue-350: hsl(203, 75%, 57%);--sapphire-global-color-blue-300: hsl(203, 70%, 65%);--sapphire-global-color-blue-250: hsl(203, 64%, 72%);--sapphire-global-color-blue-200: hsl(203, 65%, 79%);--sapphire-global-color-blue-150: hsl(203, 64%, 86%);--sapphire-global-color-blue-125: hsl(204, 65%, 90%);--sapphire-global-color-blue-100: hsl(203, 64%, 94%);--sapphire-global-color-blue-75: hsl(206, 67%, 95%);--sapphire-global-color-blue-50: hsl(202, 65%, 97%);--sapphire-global-color-blue-25: hsl(204, 56%, 98%);--sapphire-global-color-sapphire-900-70p: hsla(202, 100%, 11%, .7);--sapphire-global-color-sapphire-900-4p: hsla(202, 100%, 11%, .04);--sapphire-global-color-sapphire-975: hsl(202, 100%, 7%);--sapphire-global-color-sapphire-950: hsl(203, 100%, 9%);--sapphire-global-color-sapphire-925: hsl(202, 100%, 10%);--sapphire-global-color-sapphire-900: hsl(202, 100%, 11%);--sapphire-global-color-sapphire-875: hsl(201, 82%, 13%);--sapphire-global-color-sapphire-850: hsl(202, 68%, 16%);--sapphire-global-color-sapphire-800: hsl(203, 50%, 21%);--sapphire-global-color-sapphire-750: hsl(204, 41%, 25%);--sapphire-global-color-sapphire-700: hsl(204, 32%, 29%);--sapphire-global-color-sapphire-650: hsl(203, 27%, 33%);--sapphire-global-color-sapphire-600: hsl(205, 23%, 37%);--sapphire-global-color-sapphire-550: hsl(205, 19%, 41%);--sapphire-global-color-sapphire-500: hsl(205, 16%, 46%);--sapphire-global-color-sapphire-450: hsl(206, 16%, 50%);--sapphire-global-color-sapphire-400: hsl(206, 15%, 56%);--sapphire-global-color-sapphire-350: hsl(206, 16%, 61%);--sapphire-global-color-sapphire-300: hsl(209, 17%, 66%);--sapphire-global-color-sapphire-250: hsl(207, 16%, 73%);--sapphire-global-color-sapphire-200: hsl(208, 18%, 79%);--sapphire-global-color-sapphire-150: hsl(208, 18%, 86%);--sapphire-global-color-sapphire-125: hsl(210, 19%, 90%);--sapphire-global-color-sapphire-100: hsl(210, 24%, 93%);--sapphire-global-color-sapphire-75: hsl(210, 23%, 95%);--sapphire-global-color-sapphire-50: hsl(216, 29%, 97%);--sapphire-global-color-sapphire-25: hsl(220, 33%, 98%);--sapphire-global-color-neutral-transparent: hsla(0, 0%, 100%, 0);--sapphire-global-color-neutral-black: hsl(0, 0%, 0%);--sapphire-global-color-neutral-white: hsl(0, 0%, 100%);--sapphire-semantic-time-motion-quick: var(--sapphire-global-time-100);--sapphire-semantic-time-motion-default: var(--sapphire-global-time-200);--sapphire-semantic-time-motion-slow: var(--sapphire-global-time-400);--sapphire-semantic-time-motion-very-slow: var(--sapphire-global-time-1000);--sapphire-semantic-time-fade-slow: var(--sapphire-global-time-1800);--sapphire-semantic-time-fade-quick: var(--sapphire-global-time-100);--sapphire-semantic-time-fade-default: var(--sapphire-global-time-200);--sapphire-semantic-size-spacing-80: var(--sapphire-global-size-generic-160);--sapphire-semantic-size-spacing-70: var(--sapphire-global-size-generic-100);--sapphire-semantic-size-spacing-60: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-spacing-50: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-spacing-40: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-spacing-30: var(--sapphire-global-size-generic-30);--sapphire-semantic-size-spacing-25: var(--sapphire-global-size-generic-25);--sapphire-semantic-size-spacing-20: var(--sapphire-global-size-generic-20);--sapphire-semantic-size-spacing-10: var(--sapphire-global-size-generic-10);--sapphire-semantic-size-spacing-5: var(--sapphire-global-size-generic-5);--sapphire-semantic-size-line-height-md: var(--sapphire-global-size-line-height-md);--sapphire-semantic-size-line-height-sm: var(--sapphire-global-size-line-height-sm);--sapphire-semantic-size-font-control-default: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-control-md: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-control-sm: var(--sapphire-global-size-font-75);--sapphire-semantic-size-font-label-lg: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-label-md: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-label-sm: var(--sapphire-global-size-font-75);--sapphire-semantic-size-font-text-lg: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-text-md: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-text-sm: var(--sapphire-global-size-font-75);--sapphire-semantic-size-radius-xl: var(--sapphire-global-size-static-60);--sapphire-semantic-size-radius-lg: var(--sapphire-global-size-static-30);--sapphire-semantic-size-radius-md: var(--sapphire-global-size-static-20);--sapphire-semantic-size-radius-sm: var(--sapphire-global-size-static-10);--sapphire-semantic-size-radius-xs: var(--sapphire-global-size-static-5);--sapphire-semantic-size-border-lg: var(--sapphire-global-size-static-10);--sapphire-semantic-size-border-md: var(--sapphire-global-size-static-5);--sapphire-semantic-size-border-sm: var(--sapphire-global-size-static-2);--sapphire-semantic-size-icon-xl: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-icon-lg: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-icon-md: var(--sapphire-global-size-generic-50);--sapphire-semantic-size-icon-sm: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-width-control-default: var(--sapphire-global-size-generic-750);--sapphire-semantic-size-height-box-md: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-height-control-xl: var(--sapphire-global-size-generic-140);--sapphire-semantic-size-height-control-lg: var(--sapphire-global-size-generic-120);--sapphire-semantic-size-height-control-md: var(--sapphire-global-size-generic-100);--sapphire-semantic-size-height-control-sm: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-height-control-xs: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-height-control-2xs: var(--sapphire-global-size-generic-50);--sapphire-semantic-shadow-popover: var(--sapphire-global-shadow-md);--sapphire-semantic-opacity-disabled: var(--sapphire-global-opacity-40);--sapphire-semantic-opacity-50: var(--sapphire-global-opacity-50);--sapphire-semantic-font-name-display: var(--sapphire-global-font-danske-human-name);--sapphire-semantic-font-name-default: var(--sapphire-global-font-danske-text-name);--sapphire-semantic-color-content-decorative-orange-secondary-default: var(--sapphire-global-color-secondary-orange-600);--sapphire-semantic-color-content-decorative-orange-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-teal-secondary-default: var(--sapphire-global-color-secondary-teal-600);--sapphire-semantic-color-content-decorative-teal-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-forest-green-secondary-default: var(--sapphire-global-color-secondary-forest-green-600);--sapphire-semantic-color-content-decorative-forest-green-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-cobalt-secondary-default: var(--sapphire-global-color-secondary-cobalt-600);--sapphire-semantic-color-content-decorative-cobalt-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-gray-secondary-default: var(--sapphire-global-color-secondary-gray-600);--sapphire-semantic-color-content-decorative-gray-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-orchid-secondary-default: var(--sapphire-global-color-secondary-orchid-600);--sapphire-semantic-color-content-decorative-orchid-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-beige-secondary-default: var(--sapphire-global-color-secondary-beige-600);--sapphire-semantic-color-content-decorative-beige-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-gold-secondary-default: var(--sapphire-global-color-secondary-gold-600);--sapphire-semantic-color-content-decorative-gold-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-violet-secondary-default: var(--sapphire-global-color-secondary-violet-600);--sapphire-semantic-color-content-decorative-violet-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-pink-secondary-default: var(--sapphire-global-color-secondary-pink-600);--sapphire-semantic-color-content-decorative-pink-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-lime-secondary-default: var(--sapphire-global-color-secondary-lime-600);--sapphire-semantic-color-content-decorative-lime-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-indigo-secondary-default: var(--sapphire-global-color-secondary-indigo-600);--sapphire-semantic-color-content-decorative-indigo-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-electro-secondary-default: var(--sapphire-global-color-secondary-electro-600);--sapphire-semantic-color-content-decorative-electro-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-copper-secondary-default: var(--sapphire-global-color-secondary-copper-600);--sapphire-semantic-color-content-decorative-copper-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-aqua-secondary-default: var(--sapphire-global-color-secondary-aqua-600);--sapphire-semantic-color-content-decorative-aqua-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-passive-secondary-default: var(--sapphire-global-color-sapphire-550);--sapphire-semantic-color-content-passive-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-informative-secondary-default: var(--sapphire-global-color-blue-550);--sapphire-semantic-color-content-informative-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-warning-secondary-default: var(--sapphire-global-color-yellow-700);--sapphire-semantic-color-content-negative-secondary-active: var(--sapphire-global-color-red-700);--sapphire-semantic-color-content-negative-secondary-hover: var(--sapphire-global-color-red-600);--sapphire-semantic-color-content-negative-secondary-default: var(--sapphire-global-color-red-550);--sapphire-semantic-color-content-negative-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-positive-secondary-default: var(--sapphire-global-color-green-550);--sapphire-semantic-color-content-positive-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-selection-unselected-active: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-selection-unselected-hover: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-selection-unselected-default: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-selection-selected-active: var(--sapphire-global-color-blue-700);--sapphire-semantic-color-content-selection-selected-hover: var(--sapphire-global-color-blue-600);--sapphire-semantic-color-content-selection-selected-default: var(--sapphire-global-color-blue-550);--sapphire-semantic-color-content-action-tertiary-active: var(--sapphire-global-color-sapphire-975);--sapphire-semantic-color-content-action-tertiary-hover: var(--sapphire-global-color-sapphire-950);--sapphire-semantic-color-content-action-tertiary-default: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-action-secondary-active: var(--sapphire-global-color-blue-700);--sapphire-semantic-color-content-action-secondary-hover: var(--sapphire-global-color-blue-600);--sapphire-semantic-color-content-action-secondary-default: var(--sapphire-global-color-blue-550);--sapphire-semantic-color-content-action-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-default-secondary: var(--sapphire-global-color-sapphire-600);--sapphire-semantic-color-content-default-primary: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-focus-ring: var(--sapphire-global-color-blue-400);--sapphire-semantic-color-border-decorative-orange-secondary-default: var(--sapphire-global-color-secondary-orange-200);--sapphire-semantic-color-border-decorative-teal-secondary-default: var(--sapphire-global-color-secondary-teal-200);--sapphire-semantic-color-border-decorative-forest-green-secondary-default: var(--sapphire-global-color-secondary-forest-green-200);--sapphire-semantic-color-border-decorative-cobalt-secondary-default: var(--sapphire-global-color-secondary-cobalt-200);--sapphire-semantic-color-border-decorative-gray-secondary-default: var(--sapphire-global-color-secondary-gray-200);--sapphire-semantic-color-border-decorative-orchid-secondary-default: var(--sapphire-global-color-secondary-orchid-200);--sapphire-semantic-color-border-decorative-beige-secondary-default: var(--sapphire-global-color-secondary-beige-200);--sapphire-semantic-color-border-decorative-gold-secondary-default: var(--sapphire-global-color-secondary-gold-200);--sapphire-semantic-color-border-decorative-violet-secondary-default: var(--sapphire-global-color-secondary-violet-200);--sapphire-semantic-color-border-decorative-pink-secondary-default: var(--sapphire-global-color-secondary-pink-200);--sapphire-semantic-color-border-decorative-lime-secondary-default: var(--sapphire-global-color-secondary-lime-200);--sapphire-semantic-color-border-decorative-indigo-secondary-default: var(--sapphire-global-color-secondary-indigo-200);--sapphire-semantic-color-border-decorative-electro-secondary-default: var(--sapphire-global-color-secondary-electro-200);--sapphire-semantic-color-border-decorative-copper-secondary-default: var(--sapphire-global-color-secondary-copper-200);--sapphire-semantic-color-border-decorative-aqua-secondary-default: var(--sapphire-global-color-secondary-aqua-200);--sapphire-semantic-color-border-informative-secondary-default: var(--sapphire-global-color-blue-200);--sapphire-semantic-color-border-warning-secondary-default: var(--sapphire-global-color-yellow-300);--sapphire-semantic-color-border-positive-secondary-default: var(--sapphire-global-color-green-200);--sapphire-semantic-color-border-negative-secondary-default: var(--sapphire-global-color-red-200);--sapphire-semantic-color-border-field-error: var(--sapphire-global-color-red-500);--sapphire-semantic-color-border-tertiary-default: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-border-secondary-default: var(--sapphire-global-color-sapphire-150);--sapphire-semantic-color-border-primary-active: var(--sapphire-global-color-sapphire-300);--sapphire-semantic-color-border-primary-hover: var(--sapphire-global-color-sapphire-250);--sapphire-semantic-color-border-primary-default: var(--sapphire-global-color-sapphire-200);--sapphire-semantic-color-background-skeleton-default: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-backdrop: var(--sapphire-global-color-sapphire-900-70p);--sapphire-semantic-color-background-surface: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-background-control-special-secondary-default: var(--sapphire-global-color-sapphire-900-4p);--sapphire-semantic-color-background-control-special-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-background-control-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-background-field-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-background-decorative-orange-secondary-default: var(--sapphire-global-color-secondary-orange-50);--sapphire-semantic-color-background-decorative-orange-primary-default: var(--sapphire-global-color-secondary-orange-400);--sapphire-semantic-color-background-decorative-teal-secondary-default: var(--sapphire-global-color-secondary-teal-50);--sapphire-semantic-color-background-decorative-teal-primary-default: var(--sapphire-global-color-secondary-teal-500);--sapphire-semantic-color-background-decorative-forest-green-secondary-default: var(--sapphire-global-color-secondary-forest-green-50);--sapphire-semantic-color-background-decorative-forest-green-primary-default: var(--sapphire-global-color-secondary-forest-green-500);--sapphire-semantic-color-background-decorative-cobalt-secondary-default: var(--sapphire-global-color-secondary-cobalt-50);--sapphire-semantic-color-background-decorative-cobalt-primary-default: var(--sapphire-global-color-secondary-cobalt-500);--sapphire-semantic-color-background-decorative-gray-secondary-default: var(--sapphire-global-color-secondary-gray-50);--sapphire-semantic-color-background-decorative-gray-primary-default: var(--sapphire-global-color-secondary-gray-500);--sapphire-semantic-color-background-decorative-orchid-secondary-default: var(--sapphire-global-color-secondary-orchid-50);--sapphire-semantic-color-background-decorative-orchid-primary-default: var(--sapphire-global-color-secondary-orchid-500);--sapphire-semantic-color-background-decorative-beige-secondary-default: var(--sapphire-global-color-secondary-beige-50);--sapphire-semantic-color-background-decorative-beige-primary-default: var(--sapphire-global-color-secondary-beige-500);--sapphire-semantic-color-background-decorative-gold-secondary-default: var(--sapphire-global-color-secondary-gold-50);--sapphire-semantic-color-background-decorative-gold-primary-default: var(--sapphire-global-color-secondary-gold-500);--sapphire-semantic-color-background-decorative-violet-secondary-default: var(--sapphire-global-color-secondary-violet-100);--sapphire-semantic-color-background-decorative-violet-primary-default: var(--sapphire-global-color-secondary-violet-500);--sapphire-semantic-color-background-decorative-pink-secondary-default: var(--sapphire-global-color-secondary-pink-100);--sapphire-semantic-color-background-decorative-pink-primary-default: var(--sapphire-global-color-secondary-pink-500);--sapphire-semantic-color-background-decorative-lime-secondary-default: var(--sapphire-global-color-secondary-lime-100);--sapphire-semantic-color-background-decorative-lime-primary-default: var(--sapphire-global-color-secondary-lime-500);--sapphire-semantic-color-background-decorative-indigo-secondary-default: var(--sapphire-global-color-secondary-indigo-100);--sapphire-semantic-color-background-decorative-indigo-primary-default: var(--sapphire-global-color-secondary-indigo-500);--sapphire-semantic-color-background-decorative-electro-secondary-default: var(--sapphire-global-color-secondary-electro-100);--sapphire-semantic-color-background-decorative-electro-primary-default: var(--sapphire-global-color-secondary-electro-500);--sapphire-semantic-color-background-decorative-copper-secondary-default: var(--sapphire-global-color-secondary-copper-100);--sapphire-semantic-color-background-decorative-copper-primary-default: var(--sapphire-global-color-secondary-copper-500);--sapphire-semantic-color-background-decorative-aqua-secondary-default: var(--sapphire-global-color-secondary-aqua-100);--sapphire-semantic-color-background-decorative-aqua-primary-default: var(--sapphire-global-color-secondary-aqua-500);--sapphire-semantic-color-background-passive-secondary-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-passive-primary-default: var(--sapphire-global-color-sapphire-450);--sapphire-semantic-color-background-informative-secondary-default: var(--sapphire-global-color-blue-50);--sapphire-semantic-color-background-informative-primary-default: var(--sapphire-global-color-blue-500);--sapphire-semantic-color-background-warning-secondary-default: var(--sapphire-global-color-yellow-75);--sapphire-semantic-color-background-warning-primary-default: var(--sapphire-global-color-yellow-300);--sapphire-semantic-color-background-positive-secondary-default: var(--sapphire-global-color-green-50);--sapphire-semantic-color-background-positive-primary-default: var(--sapphire-global-color-green-500);--sapphire-semantic-color-background-negative-secondary-active: var(--sapphire-global-color-red-100);--sapphire-semantic-color-background-negative-secondary-hover: var(--sapphire-global-color-red-75);--sapphire-semantic-color-background-negative-secondary-default: var(--sapphire-global-color-red-50);--sapphire-semantic-color-background-negative-primary-active: var(--sapphire-global-color-red-650);--sapphire-semantic-color-background-negative-primary-hover: var(--sapphire-global-color-red-600);--sapphire-semantic-color-background-negative-primary-default: var(--sapphire-global-color-red-500);--sapphire-semantic-color-background-selection-unselected-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-selection-unselected-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-selection-unselected-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-selection-selected-active: var(--sapphire-global-color-blue-100);--sapphire-semantic-color-background-selection-selected-hover: var(--sapphire-global-color-blue-75);--sapphire-semantic-color-background-selection-selected-default: var(--sapphire-global-color-blue-50);--sapphire-semantic-color-background-action-danger-text: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-danger-ghost-default: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-tertiary-text: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-tertiary-ghost-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-tertiary-ghost-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-tertiary-ghost-default: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-tertiary-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-tertiary-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-tertiary-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-action-secondary-text: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-secondary-ghost-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-secondary-ghost-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-secondary-ghost-default: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-secondary-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-secondary-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-secondary-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-action-primary-active: var(--sapphire-global-color-blue-650);--sapphire-semantic-color-background-action-primary-hover: var(--sapphire-global-color-blue-600);--sapphire-semantic-color-background-action-primary-default: var(--sapphire-global-color-blue-500);--sapphire-semantic-size-spacing-container-horizontal-md: var(--sapphire-semantic-size-spacing-60);--sapphire-semantic-size-spacing-data-collection-item-horizontal-lg: var(--sapphire-semantic-size-spacing-40);--sapphire-semantic-size-spacing-data-collection-item-horizontal-md: var(--sapphire-semantic-size-spacing-30);--sapphire-semantic-size-spacing-data-collection-item-horizontal-sm: var(--sapphire-semantic-size-spacing-20);--sapphire-semantic-size-spacing-control-horizontal-lg: var(--sapphire-semantic-size-spacing-30);--sapphire-semantic-size-spacing-control-horizontal-md: var(--sapphire-semantic-size-spacing-25);--sapphire-semantic-size-spacing-control-vertical-lg: var(--sapphire-semantic-size-spacing-30);--sapphire-semantic-size-spacing-control-vertical-md: var(--sapphire-semantic-size-spacing-25);--sapphire-semantic-size-spacing-control-vertical-sm: var(--sapphire-semantic-size-spacing-10);--sapphire-semantic-size-radius-popover: var(--sapphire-semantic-size-radius-md);--sapphire-semantic-size-focus-ring: var(--sapphire-semantic-size-border-md);--sapphire-semantic-size-height-box-lg: var(--sapphire-semantic-size-height-control-2xs);--sapphire-semantic-size-height-input-md: var(--sapphire-semantic-size-height-control-md);--sapphire-semantic-size-height-input-lg: var(--sapphire-semantic-size-height-control-lg);--sapphire-semantic-color-cursor-default: var(--sapphire-semantic-color-background-action-primary-default);--sapphire-semantic-color-content-warning-primary-default: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-link-secondary-active: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-link-secondary-hover: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-link-secondary-default: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-link-primary-active: var(--sapphire-semantic-color-content-action-secondary-active);--sapphire-semantic-color-content-link-primary-hover: var(--sapphire-semantic-color-content-action-secondary-hover);--sapphire-semantic-color-content-link-primary-default: var(--sapphire-semantic-color-content-action-secondary-default);--sapphire-semantic-color-content-action-danger-active: var(--sapphire-semantic-color-content-negative-secondary-active);--sapphire-semantic-color-content-action-danger-hover: var(--sapphire-semantic-color-content-negative-secondary-hover);--sapphire-semantic-color-content-action-danger-default: var(--sapphire-semantic-color-content-negative-secondary-default);--sapphire-semantic-color-border-passive-secondary-default: var(--sapphire-semantic-color-border-primary-default);--sapphire-semantic-color-border-separator-default: var(--sapphire-semantic-color-border-tertiary-default);--sapphire-semantic-color-border-control-active: var(--sapphire-semantic-color-border-primary-active);--sapphire-semantic-color-border-control-hover: var(--sapphire-semantic-color-border-primary-hover);--sapphire-semantic-color-border-control-default: var(--sapphire-semantic-color-border-primary-default);--sapphire-semantic-color-background-spinner-secondary-default: var(--sapphire-semantic-color-background-action-primary-default);--sapphire-semantic-color-background-spinner-primary-default: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-background-popover-default: var(--sapphire-semantic-color-background-surface);--sapphire-semantic-color-background-action-danger-ghost-active: var(--sapphire-semantic-color-background-negative-secondary-active);--sapphire-semantic-color-background-action-danger-ghost-hover: var(--sapphire-semantic-color-background-negative-secondary-hover);--sapphire-semantic-color-background-action-danger-active: var(--sapphire-semantic-color-background-negative-secondary-active);--sapphire-semantic-color-background-action-danger-hover: var(--sapphire-semantic-color-background-negative-secondary-hover);--sapphire-semantic-color-background-action-danger-default: var(--sapphire-semantic-color-background-negative-secondary-default);--sapphire-semantic-color-border-field-default: var(--sapphire-semantic-color-border-control-default)}@media screen and (min-width: 768px){.sapphire-theme-default,:host,.sapphire-theme--secondary,:host ::ng-deep .sapphire-theme--secondary,.sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-semantic-size-width-panel-sm: var(--sapphire-global-size-generic-1120);--sapphire-semantic-size-width-panel-lg: var(--sapphire-global-size-generic-1600)}}@media (prefers-reduced-motion){.sapphire-theme-default,:host,.sapphire-theme--secondary,:host ::ng-deep .sapphire-theme--secondary,.sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-semantic-time-motion-very-slow: var(--sapphire-global-time-2000);--sapphire-semantic-time-motion-slow: 0s;--sapphire-semantic-time-motion-default: 0s;--sapphire-semantic-time-motion-quick: 0s}}.sapphire-theme-default.sapphire-theme--secondary,.sapphire-theme-default .sapphire-theme--secondary,:host .sapphire-theme--secondary,:host ::ng-deep .sapphire-theme--secondary{--sapphire-semantic-color-background-action-secondary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-background-action-secondary-hover: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-secondary-active: var(--sapphire-global-color-sapphire-125);--sapphire-semantic-color-background-action-secondary-ghost-hover: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-secondary-ghost-active: var(--sapphire-global-color-sapphire-125);--sapphire-semantic-color-background-action-tertiary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-background-action-tertiary-hover: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-tertiary-active: var(--sapphire-global-color-sapphire-125);--sapphire-semantic-color-background-action-tertiary-ghost-hover: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-tertiary-ghost-active: var(--sapphire-global-color-sapphire-125);--sapphire-semantic-color-background-action-danger-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-background-action-danger-hover: var(--sapphire-global-color-red-100);--sapphire-semantic-color-background-action-danger-active: var(--sapphire-global-color-red-125);--sapphire-semantic-color-background-action-danger-ghost-hover: var(--sapphire-global-color-red-100);--sapphire-semantic-color-background-action-danger-ghost-active: var(--sapphire-global-color-red-125);--sapphire-semantic-color-background-surface: var(--sapphire-global-color-sapphire-50)}.sapphire-theme-default.sapphire-theme--contrast,.sapphire-theme-default .sapphire-theme--contrast,:host .sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-global-color-sapphire-25: hsl(202, 100%, 7%);--sapphire-global-color-sapphire-50: hsl(203, 100%, 9%);--sapphire-global-color-sapphire-75: hsl(202, 100%, 10%);--sapphire-global-color-sapphire-100: hsl(202, 100%, 11%);--sapphire-global-color-sapphire-125: hsl(201, 82%, 13%);--sapphire-global-color-sapphire-150: hsl(202, 68%, 16%);--sapphire-global-color-sapphire-200: hsl(203, 50%, 21%);--sapphire-global-color-sapphire-250: hsl(204, 41%, 25%);--sapphire-global-color-sapphire-300: hsl(204, 32%, 29%);--sapphire-global-color-sapphire-350: hsl(203, 27%, 33%);--sapphire-global-color-sapphire-400: hsl(205, 23%, 37%);--sapphire-global-color-sapphire-450: hsl(205, 19%, 41%);--sapphire-global-color-sapphire-500: hsl(205, 16%, 46%);--sapphire-global-color-sapphire-550: hsl(206, 16%, 50%);--sapphire-global-color-sapphire-600: hsl(206, 15%, 56%);--sapphire-global-color-sapphire-650: hsl(206, 16%, 61%);--sapphire-global-color-sapphire-700: hsl(209, 17%, 66%);--sapphire-global-color-sapphire-750: hsl(207, 16%, 73%);--sapphire-global-color-sapphire-800: hsl(208, 18%, 79%);--sapphire-global-color-sapphire-850: hsl(208, 18%, 86%);--sapphire-global-color-sapphire-875: hsl(210, 19%, 90%);--sapphire-global-color-sapphire-900: hsl(210, 24%, 93%);--sapphire-global-color-sapphire-925: hsl(210, 23%, 95%);--sapphire-global-color-sapphire-950: hsl(216, 29%, 97%);--sapphire-global-color-sapphire-975: hsl(220, 33%, 98%);--sapphire-global-color-sapphire-900-70p: hsla(210, 24%, 93%, .3);--sapphire-global-color-blue-25: hsl(202, 100%, 7%);--sapphire-global-color-blue-50: hsl(203, 100%, 9%);--sapphire-global-color-blue-75: hsl(203, 100%, 10%);--sapphire-global-color-blue-100: hsl(202, 100%, 11%);--sapphire-global-color-blue-125: hsl(203, 100%, 13%);--sapphire-global-color-blue-150: hsl(203, 100%, 15%);--sapphire-global-color-blue-200: hsl(203, 100%, 19%);--sapphire-global-color-blue-250: hsl(202, 100%, 22%);--sapphire-global-color-blue-300: hsl(203, 100%, 25%);--sapphire-global-color-blue-350: hsl(203, 100%, 29%);--sapphire-global-color-blue-400: hsl(203, 100%, 32%);--sapphire-global-color-blue-450: hsl(203, 100%, 35%);--sapphire-global-color-blue-500: hsl(203, 100%, 39%);--sapphire-global-color-blue-550: hsl(203, 90%, 44%);--sapphire-global-color-blue-600: hsl(203, 80%, 50%);--sapphire-global-color-blue-650: hsl(203, 75%, 57%);--sapphire-global-color-blue-700: hsl(203, 70%, 65%);--sapphire-global-color-blue-750: hsl(203, 64%, 72%);--sapphire-global-color-blue-800: hsl(203, 65%, 79%);--sapphire-global-color-blue-850: hsl(203, 64%, 86%);--sapphire-global-color-blue-875: hsl(204, 65%, 90%);--sapphire-global-color-blue-900: hsl(203, 64%, 94%);--sapphire-global-color-blue-925: hsl(206, 67%, 95%);--sapphire-global-color-blue-950: hsl(202, 65%, 97%);--sapphire-global-color-blue-975: hsl(204, 56%, 98%);--sapphire-global-color-green-25: hsl(159, 100%, 5%);--sapphire-global-color-green-50: hsl(159, 100%, 6%);--sapphire-global-color-green-75: hsl(159, 100%, 7%);--sapphire-global-color-green-100: hsl(159, 100%, 7%);--sapphire-global-color-green-125: hsl(159, 100%, 9%);--sapphire-global-color-green-150: hsl(158, 100%, 10%);--sapphire-global-color-green-200: hsl(159, 100%, 13%);--sapphire-global-color-green-250: hsl(159, 100%, 15%);--sapphire-global-color-green-300: hsl(159, 100%, 17%);--sapphire-global-color-green-350: hsl(159, 100%, 19%);--sapphire-global-color-green-400: hsl(159, 100%, 22%);--sapphire-global-color-green-450: hsl(159, 100%, 24%);--sapphire-global-color-green-500: hsl(159, 100%, 27%);--sapphire-global-color-green-550: hsl(159, 71%, 34%);--sapphire-global-color-green-600: hsl(159, 51%, 42%);--sapphire-global-color-green-650: hsl(159, 37%, 50%);--sapphire-global-color-green-700: hsl(159, 36%, 57%);--sapphire-global-color-green-750: hsl(159, 36%, 66%);--sapphire-global-color-green-800: hsl(160, 36%, 74%);--sapphire-global-color-green-850: hsl(159, 36%, 83%);--sapphire-global-color-green-875: hsl(159, 37%, 88%);--sapphire-global-color-green-900: hsl(159, 35%, 92%);--sapphire-global-color-green-925: hsl(162, 33%, 94%);--sapphire-global-color-green-950: hsl(158, 40%, 96%);--sapphire-global-color-green-975: hsl(150, 40%, 98%);--sapphire-global-color-red-25: hsl(0, 33%, 10%);--sapphire-global-color-red-50: hsl(355, 38%, 12%);--sapphire-global-color-red-75: hsl(356, 41%, 14%);--sapphire-global-color-red-100: hsl(355, 43%, 15%);--sapphire-global-color-red-125: hsl(354, 44%, 18%);--sapphire-global-color-red-150: hsl(353, 48%, 21%);--sapphire-global-color-red-200: hsl(353, 50%, 26%);--sapphire-global-color-red-250: hsl(351, 54%, 31%);--sapphire-global-color-red-300: hsl(351, 55%, 35%);--sapphire-global-color-red-350: hsl(350, 57%, 39%);--sapphire-global-color-red-400: hsl(349, 60%, 44%);--sapphire-global-color-red-450: hsl(349, 61%, 48%);--sapphire-global-color-red-500: hsl(348, 72%, 53%);--sapphire-global-color-red-550: hsl(351, 73%, 59%);--sapphire-global-color-red-600: hsl(353, 75%, 65%);--sapphire-global-color-red-650: hsl(355, 79%, 71%);--sapphire-global-color-red-700: hsl(356, 82%, 76%);--sapphire-global-color-red-750: hsl(357, 88%, 81%);--sapphire-global-color-red-800: hsl(358, 92%, 86%);--sapphire-global-color-red-850: hsl(359, 100%, 91%);--sapphire-global-color-red-875: hsl(358, 100%, 94%);--sapphire-global-color-red-900: hsl(357, 100%, 96%);--sapphire-global-color-red-925: hsl(356, 100%, 97%);--sapphire-global-color-red-950: hsl(355, 100%, 98%);--sapphire-global-color-red-975: hsl(0, 100%, 99%);--sapphire-global-color-secondary-aqua-50: hsl(192, 82%, 34%);--sapphire-global-color-secondary-aqua-100: hsl(192, 66%, 42%);--sapphire-global-color-secondary-aqua-150: hsl(192, 48%, 54%);--sapphire-global-color-secondary-aqua-200: hsl(192, 49%, 67%);--sapphire-global-color-secondary-aqua-300: hsl(191, 55%, 79%);--sapphire-global-color-secondary-aqua-400: hsl(192, 56%, 86%);--sapphire-global-color-secondary-aqua-500: hsl(190, 57%, 92%);--sapphire-global-color-secondary-aqua-600: hsl(190, 60%, 96%);--sapphire-global-color-secondary-copper-50: hsl(16, 54%, 47%);--sapphire-global-color-secondary-copper-100: hsl(16, 57%, 55%);--sapphire-global-color-secondary-copper-150: hsl(16, 56%, 65%);--sapphire-global-color-secondary-copper-200: hsl(16, 57%, 75%);--sapphire-global-color-secondary-copper-300: hsl(15, 56%, 85%);--sapphire-global-color-secondary-copper-400: hsl(16, 56%, 89%);--sapphire-global-color-secondary-copper-500: hsl(15, 57%, 95%);--sapphire-global-color-secondary-copper-600: hsl(17, 54%, 97%);--sapphire-global-color-secondary-electro-50: hsl(206, 32%, 46%);--sapphire-global-color-secondary-electro-100: hsl(206, 31%, 54%);--sapphire-global-color-secondary-electro-150: hsl(206, 31%, 63%);--sapphire-global-color-secondary-electro-200: hsl(206, 32%, 73%);--sapphire-global-color-secondary-electro-300: hsl(207, 38%, 84%);--sapphire-global-color-secondary-electro-400: hsl(207, 39%, 89%);--sapphire-global-color-secondary-electro-500: hsl(206, 44%, 94%);--sapphire-global-color-secondary-electro-600: hsl(204, 33%, 97%);--sapphire-global-color-secondary-indigo-50: hsl(224, 81%, 59%);--sapphire-global-color-secondary-indigo-100: hsl(224, 100%, 66%);--sapphire-global-color-secondary-indigo-150: hsl(224, 100%, 74%);--sapphire-global-color-secondary-indigo-200: hsl(223, 100%, 81%);--sapphire-global-color-secondary-indigo-300: hsl(224, 100%, 88%);--sapphire-global-color-secondary-indigo-400: hsl(225, 100%, 92%);--sapphire-global-color-secondary-indigo-500: hsl(224, 100%, 96%);--sapphire-global-color-secondary-indigo-600: hsl(224, 100%, 98%);--sapphire-global-color-secondary-lime-50: hsl(76, 100%, 25%);--sapphire-global-color-secondary-lime-100: hsl(74, 100%, 29%);--sapphire-global-color-secondary-lime-150: hsl(73, 52%, 44%);--sapphire-global-color-secondary-lime-200: hsl(74, 42%, 59%);--sapphire-global-color-secondary-lime-300: hsl(74, 46%, 74%);--sapphire-global-color-secondary-lime-400: hsl(74, 52%, 81%);--sapphire-global-color-secondary-lime-500: hsl(74, 61%, 89%);--sapphire-global-color-secondary-lime-600: hsl(73, 66%, 94%);--sapphire-global-color-secondary-pink-50: hsl(333, 53%, 52%);--sapphire-global-color-secondary-pink-100: hsl(333, 65%, 61%);--sapphire-global-color-secondary-pink-150: hsl(333, 66%, 69%);--sapphire-global-color-secondary-pink-200: hsl(333, 67%, 78%);--sapphire-global-color-secondary-pink-300: hsl(332, 69%, 86%);--sapphire-global-color-secondary-pink-400: hsl(333, 70%, 91%);--sapphire-global-color-secondary-pink-500: hsl(330, 62%, 95%);--sapphire-global-color-secondary-pink-600: hsl(330, 71%, 97%);--sapphire-global-color-secondary-violet-50: hsl(245, 60%, 63%);--sapphire-global-color-secondary-violet-100: hsl(245, 75%, 70%);--sapphire-global-color-secondary-violet-150: hsl(245, 74%, 76%);--sapphire-global-color-secondary-violet-200: hsl(246, 75%, 83%);--sapphire-global-color-secondary-violet-300: hsl(248, 74%, 89%);--sapphire-global-color-secondary-violet-400: hsl(246, 74%, 93%);--sapphire-global-color-secondary-violet-500: hsl(244, 70%, 96%);--sapphire-global-color-secondary-violet-600: hsl(248, 80%, 98%);--sapphire-semantic-color-background-field-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-control-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-control-special-primary-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-control-special-secondary-default: var(--sapphire-global-color-sapphire-200);--sapphire-semantic-color-background-surface: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-popover-default: var(--sapphire-global-color-sapphire-25);--sapphire-semantic-color-content-default-primary: var(--sapphire-global-color-neutral-white)}:host ::ng-deep .cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] :host ::ng-deep .cdk-visually-hidden{left:auto;right:0}:host ::ng-deep .cdk-overlay-container,:host ::ng-deep .cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}:host ::ng-deep .cdk-overlay-container{position:fixed;z-index:1000}:host ::ng-deep .cdk-overlay-container:empty{display:none}:host ::ng-deep .cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}:host ::ng-deep .cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}:host ::ng-deep .cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}:host ::ng-deep .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active :host ::ng-deep .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}:host ::ng-deep .cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}:host ::ng-deep .cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}:host ::ng-deep .cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}:host ::ng-deep .cdk-overlay-backdrop-noop-animation{transition:none}:host ::ng-deep .cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}:host ::ng-deep .cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.cdk-overlay-container,:host.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container,:host.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock,::ng-deep .cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}\n"] });
|
|
6747
|
-
|
|
6748
|
-
|
|
6749
|
-
args: [{ selector: 'sp-theme-default', standalone: true, template: '<ng-content></ng-content>', hostDirectives: [ThemeBaseDirective], styles: ["@keyframes backdrop-fade-in{0%{background-color:transparent}to{background-color:var(--sapphire-semantic-color-background-backdrop)}}@keyframes backdrop-fade-out{0%{background-color:var(--sapphire-semantic-color-background-backdrop)}to{background-color:transparent}}.sapphire-backdrop,::ng-deep .sapphire-backdrop{width:100%;height:100%;display:flex;justify-content:center;align-items:center;animation-name:backdrop-fade-in;animation-duration:var(--sapphire-semantic-time-fade-default);animation-timing-function:ease-in-out;animation-fill-mode:forwards}.sapphire-backdrop--exiting,::ng-deep .sapphire-backdrop--exiting{animation-name:backdrop-fade-out}.sapphire-theme-default,:host,.sapphire-theme--secondary,:host ::ng-deep .sapphire-theme--secondary,.sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-semantic-size-breakpoint-xl: 1400px;--sapphire-semantic-size-breakpoint-l: 1200px;--sapphire-semantic-size-breakpoint-m: 960px;--sapphire-semantic-size-breakpoint-s: 768px;--sapphire-semantic-size-breakpoint-xs: 576px;--sapphire-semantic-size-width-panel-lg: 100%;--sapphire-semantic-size-width-panel-sm: 100%;--sapphire-semantic-font-weight-display-bold: 700;--sapphire-semantic-font-weight-display-regular: 400;--sapphire-semantic-font-weight-default-bold: 700;--sapphire-semantic-font-weight-default-semibold: 600;--sapphire-semantic-font-weight-default-regular: 400;--sapphire-global-time-2000: 2s;--sapphire-global-time-1800: 1.8s;--sapphire-global-time-1000: 1s;--sapphire-global-time-400: .4s;--sapphire-global-time-200: .2s;--sapphire-global-time-100: .1s;--sapphire-global-size-ratio-height: .875;--sapphire-global-size-line-height-md: 1.5;--sapphire-global-size-line-height-sm: 1.2;--sapphire-global-size-font-300: 3rem;--sapphire-global-size-font-220: 2.1875rem;--sapphire-global-size-font-188: 1.875rem;--sapphire-global-size-font-150: 1.5rem;--sapphire-global-size-font-130: 1.3125rem;--sapphire-global-size-font-112: 1.125rem;--sapphire-global-size-font-106: 1.0625rem;--sapphire-global-size-font-100: 1rem;--sapphire-global-size-font-88: .875rem;--sapphire-global-size-font-75: .75rem;--sapphire-global-size-font-60: .625rem;--sapphire-global-size-generic-4320: 108rem;--sapphire-global-size-generic-3780: 94.5rem;--sapphire-global-size-generic-3600: 90rem;--sapphire-global-size-generic-3200: 80rem;--sapphire-global-size-generic-2560: 64rem;--sapphire-global-size-generic-2400: 60rem;--sapphire-global-size-generic-1920: 48rem;--sapphire-global-size-generic-1600: 40rem;--sapphire-global-size-generic-1400: 35rem;--sapphire-global-size-generic-1280: 32rem;--sapphire-global-size-generic-1200: 30rem;--sapphire-global-size-generic-1120: 28rem;--sapphire-global-size-generic-1000: 25rem;--sapphire-global-size-generic-960: 24rem;--sapphire-global-size-generic-940: 23.5rem;--sapphire-global-size-generic-900: 22.5rem;--sapphire-global-size-generic-800: 20rem;--sapphire-global-size-generic-750: 18.75rem;--sapphire-global-size-generic-640: 16rem;--sapphire-global-size-generic-600: 15rem;--sapphire-global-size-generic-560: 14rem;--sapphire-global-size-generic-480: 12rem;--sapphire-global-size-generic-400: 10rem;--sapphire-global-size-generic-340: 8.5rem;--sapphire-global-size-generic-320: 8rem;--sapphire-global-size-generic-300: 7.5rem;--sapphire-global-size-generic-280: 7rem;--sapphire-global-size-generic-240: 6rem;--sapphire-global-size-generic-200: 5rem;--sapphire-global-size-generic-180: 4.5rem;--sapphire-global-size-generic-160: 4rem;--sapphire-global-size-generic-140: 3.5rem;--sapphire-global-size-generic-120: 3rem;--sapphire-global-size-generic-100: 2.5rem;--sapphire-global-size-generic-80: 2rem;--sapphire-global-size-generic-60: 1.5rem;--sapphire-global-size-generic-50: 1.25rem;--sapphire-global-size-generic-40: 1rem;--sapphire-global-size-generic-35: .875rem;--sapphire-global-size-generic-30: .75rem;--sapphire-global-size-generic-25: .625rem;--sapphire-global-size-generic-20: .5rem;--sapphire-global-size-generic-15: .375rem;--sapphire-global-size-generic-10: .25rem;--sapphire-global-size-generic-5: .125rem;--sapphire-global-size-generic-2: .0625rem;--sapphire-global-size-generic-0: 0rem;--sapphire-global-size-static-60: 24px;--sapphire-global-size-static-30: 12px;--sapphire-global-size-static-20: 8px;--sapphire-global-size-static-10: 4px;--sapphire-global-size-static-5: 2px;--sapphire-global-size-static-2: 1px;--sapphire-global-size-static-0: 0px;--sapphire-global-shadow-lg: 0px 0px 2px 0px rgba(34, 64, 82, .02), 0px -1.5px 6px 0px rgba(34, 64, 82, .03), 0px 4.5px 12px 0px rgba(34, 64, 82, .04), 0px 14.5px 18px 0px rgba(34, 64, 82, .04), 0px 26px 34px 0px rgba(34, 64, 82, .05), 0px 84px 92px 0px rgba(34, 64, 82, .07), 0px 0px 2px 0px rgba(34, 64, 82, .05), 0px 0px 1px 0px rgba(34, 64, 82, .2);--sapphire-global-shadow-md: 0px 0px 3px 0px rgba(34, 64, 82, .02), 0px 3px 7px 0px rgba(34, 64, 82, .03), 0px 6.5px 14px 0px rgba(34, 64, 82, .04), 0px 13px 29px 0px rgba(34, 64, 82, .05), 0px 36px 80px 0px rgba(34, 64, 82, .07), 0px 0px 2px 0px rgba(34, 64, 82, .05), 0px 0px 1px 0px rgba(34, 64, 82, .2);--sapphire-global-shadow-sm: 0px 0px 2px 0px rgba(34, 64, 82, .06), 0px 1.5px 4px 0px rgba(34, 64, 82, .04), 0px 4.5px 6px 0px rgba(34, 64, 82, .04), 0px 10.5px 12px 0px rgba(34, 64, 82, .03), 0px 25px 24px 0px rgba(34, 64, 82, .02), 0px 100px 64px 0px rgba(34, 64, 82, .02), 0px 0px 2px 0px rgba(34, 64, 82, .05), 0px 0px 1px 0px rgba(34, 64, 82, .2);--sapphire-global-opacity-50: .5;--sapphire-global-opacity-40: .4;--sapphire-global-opacity-35: .35;--sapphire-global-font-danske-human-name: \"Danske Human\";--sapphire-global-font-danske-text-name: \"Danske Text v2\";--sapphire-global-color-secondary-orange-600: hsl(19, 100%, 34%);--sapphire-global-color-secondary-orange-500: hsl(17, 100%, 43%);--sapphire-global-color-secondary-orange-400: hsl(19, 84%, 54%);--sapphire-global-color-secondary-orange-300: hsl(21, 84%, 66%);--sapphire-global-color-secondary-orange-200: hsl(23, 83%, 79%);--sapphire-global-color-secondary-orange-150: hsl(25, 84%, 86%);--sapphire-global-color-secondary-orange-100: hsl(26, 89%, 93%);--sapphire-global-color-secondary-orange-75: hsl(27, 85%, 95%);--sapphire-global-color-secondary-orange-50: hsl(28, 89%, 96%);--sapphire-global-color-secondary-teal-600: hsl(171, 100%, 22%);--sapphire-global-color-secondary-teal-500: hsl(171, 100%, 26%);--sapphire-global-color-secondary-teal-400: hsl(172, 50%, 42%);--sapphire-global-color-secondary-teal-300: hsl(172, 36%, 57%);--sapphire-global-color-secondary-teal-200: hsl(171, 36%, 74%);--sapphire-global-color-secondary-teal-150: hsl(171, 36%, 82%);--sapphire-global-color-secondary-teal-100: hsl(172, 35%, 92%);--sapphire-global-color-secondary-teal-75: hsl(170, 38%, 94%);--sapphire-global-color-secondary-teal-50: hsl(171, 33%, 96%);--sapphire-global-color-secondary-forest-green-600: hsl(105, 93%, 23%);--sapphire-global-color-secondary-forest-green-500: hsl(105, 93%, 28%);--sapphire-global-color-secondary-forest-green-400: hsl(105, 48%, 43%);--sapphire-global-color-secondary-forest-green-300: hsl(105, 36%, 58%);--sapphire-global-color-secondary-forest-green-200: hsl(105, 36%, 74%);--sapphire-global-color-secondary-forest-green-150: hsl(105, 36%, 82%);--sapphire-global-color-secondary-forest-green-100: hsl(104, 35%, 92%);--sapphire-global-color-secondary-forest-green-75: hsl(109, 35%, 94%);--sapphire-global-color-secondary-forest-green-50: hsl(111, 33%, 96%);--sapphire-global-color-secondary-cobalt-600: hsl(215, 87%, 42%);--sapphire-global-color-secondary-cobalt-500: hsl(215, 92%, 51%);--sapphire-global-color-secondary-cobalt-400: hsl(215, 92%, 62%);--sapphire-global-color-secondary-cobalt-300: hsl(215, 92%, 72%);--sapphire-global-color-secondary-cobalt-200: hsl(215, 91%, 83%);--sapphire-global-color-secondary-cobalt-150: hsl(216, 93%, 89%);--sapphire-global-color-secondary-cobalt-100: hsl(216, 93%, 95%);--sapphire-global-color-secondary-cobalt-75: hsl(215, 90%, 96%);--sapphire-global-color-secondary-cobalt-50: hsl(215, 86%, 97%);--sapphire-global-color-secondary-gray-600: hsl(202, 6%, 38%);--sapphire-global-color-secondary-gray-500: hsl(201, 6%, 46%);--sapphire-global-color-secondary-gray-400: hsl(200, 5%, 56%);--sapphire-global-color-secondary-gray-300: hsl(203, 5%, 67%);--sapphire-global-color-secondary-gray-200: hsl(200, 6%, 79%);--sapphire-global-color-secondary-gray-150: hsl(195, 6%, 86%);--sapphire-global-color-secondary-gray-100: hsl(210, 6%, 93%);--sapphire-global-color-secondary-gray-75: hsl(240, 4%, 95%);--sapphire-global-color-secondary-gray-50: hsl(180, 6%, 97%);--sapphire-global-color-secondary-orchid-600: hsl(304, 36%, 42%);--sapphire-global-color-secondary-orchid-500: hsl(304, 37%, 51%);--sapphire-global-color-secondary-orchid-400: hsl(304, 37%, 61%);--sapphire-global-color-secondary-orchid-300: hsl(303, 37%, 71%);--sapphire-global-color-secondary-orchid-200: hsl(304, 37%, 82%);--sapphire-global-color-secondary-orchid-150: hsl(305, 38%, 88%);--sapphire-global-color-secondary-orchid-100: hsl(305, 38%, 94%);--sapphire-global-color-secondary-orchid-75: hsl(300, 36%, 96%);--sapphire-global-color-secondary-orchid-50: hsl(300, 33%, 97%);--sapphire-global-color-secondary-beige-600: hsl(38, 20%, 35%);--sapphire-global-color-secondary-beige-500: hsl(40, 20%, 43%);--sapphire-global-color-secondary-beige-400: hsl(38, 15%, 54%);--sapphire-global-color-secondary-beige-300: hsl(39, 16%, 65%);--sapphire-global-color-secondary-beige-200: hsl(41, 14%, 78%);--sapphire-global-color-secondary-beige-150: hsl(40, 16%, 85%);--sapphire-global-color-secondary-beige-100: hsl(40, 17%, 93%);--sapphire-global-color-secondary-beige-75: hsl(30, 15%, 95%);--sapphire-global-color-secondary-beige-50: hsl(30, 11%, 96%);--sapphire-global-color-secondary-gold-600: hsl(42, 97%, 25%);--sapphire-global-color-secondary-gold-500: hsl(42, 96%, 31%);--sapphire-global-color-secondary-gold-400: hsl(42, 54%, 45%);--sapphire-global-color-secondary-gold-300: hsl(42, 44%, 59%);--sapphire-global-color-secondary-gold-200: hsl(42, 44%, 74%);--sapphire-global-color-secondary-gold-150: hsl(43, 43%, 83%);--sapphire-global-color-secondary-gold-100: hsl(43, 43%, 92%);--sapphire-global-color-secondary-gold-75: hsl(42, 42%, 94%);--sapphire-global-color-secondary-gold-50: hsl(40, 43%, 96%);--sapphire-global-color-secondary-violet-600: hsl(245, 41%, 52%);--sapphire-global-color-secondary-violet-500: hsl(245, 66%, 64%);--sapphire-global-color-secondary-violet-400: hsl(245, 66%, 71%);--sapphire-global-color-secondary-violet-300: hsl(245, 66%, 78%);--sapphire-global-color-secondary-violet-200: hsl(244, 65%, 86%);--sapphire-global-color-secondary-violet-150: hsl(246, 66%, 91%);--sapphire-global-color-secondary-violet-100: hsl(244, 64%, 96%);--sapphire-global-color-secondary-violet-75: hsl(245, 65%, 97%);--sapphire-global-color-secondary-violet-50: hsl(240, 64%, 98%);--sapphire-global-color-secondary-purple-600: hsl(270, 28%, 45%);--sapphire-global-color-secondary-purple-500: hsl(270, 33%, 55%);--sapphire-global-color-secondary-purple-400: hsl(270, 33%, 64%);--sapphire-global-color-secondary-purple-300: hsl(270, 33%, 73%);--sapphire-global-color-secondary-purple-200: hsl(269, 33%, 83%);--sapphire-global-color-secondary-purple-150: hsl(272, 32%, 88%);--sapphire-global-color-secondary-purple-100: hsl(270, 36%, 95%);--sapphire-global-color-secondary-purple-75: hsl(274, 33%, 96%);--sapphire-global-color-secondary-purple-50: hsl(270, 29%, 97%);--sapphire-global-color-secondary-pink-600: hsl(327, 48%, 43%);--sapphire-global-color-secondary-pink-500: hsl(327, 53%, 53%);--sapphire-global-color-secondary-pink-400: hsl(326, 53%, 63%);--sapphire-global-color-secondary-pink-300: hsl(326, 53%, 73%);--sapphire-global-color-secondary-pink-200: hsl(327, 53%, 83%);--sapphire-global-color-secondary-pink-150: hsl(327, 54%, 89%);--sapphire-global-color-secondary-pink-100: hsl(328, 56%, 95%);--sapphire-global-color-secondary-pink-75: hsl(330, 50%, 96%);--sapphire-global-color-secondary-pink-50: hsl(326, 54%, 97%);--sapphire-global-color-secondary-lime-600: hsl(71, 76%, 23%);--sapphire-global-color-secondary-lime-500: hsl(71, 76%, 28%);--sapphire-global-color-secondary-lime-400: hsl(71, 42%, 42%);--sapphire-global-color-secondary-lime-300: hsl(72, 30%, 57%);--sapphire-global-color-secondary-lime-200: hsl(70, 29%, 73%);--sapphire-global-color-secondary-lime-150: hsl(71, 30%, 82%);--sapphire-global-color-secondary-lime-100: hsl(69, 29%, 91%);--sapphire-global-color-secondary-lime-75: hsl(66, 29%, 93%);--sapphire-global-color-secondary-lime-50: hsl(70, 27%, 96%);--sapphire-global-color-secondary-indigo-600: hsl(230, 62%, 53%);--sapphire-global-color-secondary-indigo-500: hsl(230, 100%, 64%);--sapphire-global-color-secondary-indigo-400: hsl(230, 100%, 72%);--sapphire-global-color-secondary-indigo-300: hsl(230, 100%, 79%);--sapphire-global-color-secondary-indigo-200: hsl(229, 100%, 87%);--sapphire-global-color-secondary-indigo-150: hsl(229, 100%, 91%);--sapphire-global-color-secondary-indigo-100: hsl(231, 100%, 96%);--sapphire-global-color-secondary-indigo-75: hsl(229, 100%, 97%);--sapphire-global-color-secondary-indigo-50: hsl(229, 100%, 98%);--sapphire-global-color-secondary-electro-600: hsl(207, 31%, 38%);--sapphire-global-color-secondary-electro-500: hsl(206, 31%, 46%);--sapphire-global-color-secondary-electro-400: hsl(206, 27%, 56%);--sapphire-global-color-secondary-electro-300: hsl(207, 27%, 67%);--sapphire-global-color-secondary-electro-200: hsl(208, 27%, 80%);--sapphire-global-color-secondary-electro-150: hsl(205, 27%, 86%);--sapphire-global-color-secondary-electro-100: hsl(207, 27%, 94%);--sapphire-global-color-secondary-electro-75: hsl(206, 28%, 95%);--sapphire-global-color-secondary-electro-50: hsl(204, 29%, 97%);--sapphire-global-color-secondary-copper-600: hsl(16, 54%, 39%);--sapphire-global-color-secondary-copper-500: hsl(15, 54%, 48%);--sapphire-global-color-secondary-copper-400: hsl(15, 50%, 59%);--sapphire-global-color-secondary-copper-300: hsl(15, 50%, 69%);--sapphire-global-color-secondary-copper-200: hsl(16, 49%, 81%);--sapphire-global-color-secondary-copper-150: hsl(15, 51%, 87%);--sapphire-global-color-secondary-copper-100: hsl(16, 48%, 94%);--sapphire-global-color-secondary-copper-75: hsl(16, 48%, 95%);--sapphire-global-color-secondary-copper-50: hsl(15, 50%, 97%);--sapphire-global-color-secondary-aqua-600: hsl(192, 100%, 26%);--sapphire-global-color-secondary-aqua-500: hsl(192, 100%, 32%);--sapphire-global-color-secondary-aqua-400: hsl(192, 55%, 46%);--sapphire-global-color-secondary-aqua-300: hsl(192, 47%, 60%);--sapphire-global-color-secondary-aqua-200: hsl(192, 47%, 76%);--sapphire-global-color-secondary-aqua-150: hsl(192, 47%, 84%);--sapphire-global-color-secondary-aqua-100: hsl(190, 45%, 92%);--sapphire-global-color-secondary-aqua-75: hsl(193, 47%, 94%);--sapphire-global-color-secondary-aqua-50: hsl(193, 47%, 96%);--sapphire-global-color-yellow-975: hsl(20, 95%, 8%);--sapphire-global-color-yellow-950: hsl(19, 89%, 11%);--sapphire-global-color-yellow-925: hsl(21, 87%, 15%);--sapphire-global-color-yellow-900: hsl(21, 88%, 19%);--sapphire-global-color-yellow-875: hsl(21, 86%, 23%);--sapphire-global-color-yellow-850: hsl(22, 85%, 27%);--sapphire-global-color-yellow-800: hsl(22, 88%, 29%);--sapphire-global-color-yellow-750: hsl(24, 89%, 33%);--sapphire-global-color-yellow-700: hsl(25, 93%, 37%);--sapphire-global-color-yellow-650: hsl(28, 94%, 41%);--sapphire-global-color-yellow-600: hsl(31, 93%, 44%);--sapphire-global-color-yellow-550: hsl(34, 94%, 48%);--sapphire-global-color-yellow-500: hsl(37, 95%, 52%);--sapphire-global-color-yellow-450: hsl(40, 95%, 54%);--sapphire-global-color-yellow-400: hsl(43, 98%, 55%);--sapphire-global-color-yellow-350: hsl(44, 98%, 60%);--sapphire-global-color-yellow-300: hsl(46, 98%, 64%);--sapphire-global-color-yellow-250: hsl(47, 97%, 70%);--sapphire-global-color-yellow-200: hsl(48, 98%, 76%);--sapphire-global-color-yellow-150: hsl(48, 98%, 79%);--sapphire-global-color-yellow-125: hsl(49, 97%, 85%);--sapphire-global-color-yellow-100: hsl(48, 100%, 89%);--sapphire-global-color-yellow-75: hsl(49, 100%, 92%);--sapphire-global-color-yellow-50: hsl(51, 100%, 96%);--sapphire-global-color-yellow-25: hsl(54, 100%, 98%);--sapphire-global-color-red-975: hsl(0, 33%, 10%);--sapphire-global-color-red-950: hsl(355, 38%, 12%);--sapphire-global-color-red-925: hsl(356, 41%, 14%);--sapphire-global-color-red-900: hsl(355, 43%, 15%);--sapphire-global-color-red-875: hsl(354, 44%, 18%);--sapphire-global-color-red-850: hsl(353, 48%, 21%);--sapphire-global-color-red-800: hsl(353, 50%, 26%);--sapphire-global-color-red-750: hsl(351, 54%, 31%);--sapphire-global-color-red-700: hsl(351, 55%, 35%);--sapphire-global-color-red-650: hsl(350, 57%, 39%);--sapphire-global-color-red-600: hsl(349, 60%, 44%);--sapphire-global-color-red-550: hsl(349, 61%, 48%);--sapphire-global-color-red-500: hsl(348, 72%, 53%);--sapphire-global-color-red-450: hsl(351, 73%, 59%);--sapphire-global-color-red-400: hsl(353, 75%, 65%);--sapphire-global-color-red-350: hsl(355, 79%, 71%);--sapphire-global-color-red-300: hsl(356, 82%, 76%);--sapphire-global-color-red-250: hsl(357, 88%, 81%);--sapphire-global-color-red-200: hsl(358, 92%, 86%);--sapphire-global-color-red-150: hsl(359, 100%, 91%);--sapphire-global-color-red-125: hsl(358, 100%, 94%);--sapphire-global-color-red-100: hsl(357, 100%, 96%);--sapphire-global-color-red-75: hsl(356, 100%, 97%);--sapphire-global-color-red-50: hsl(355, 100%, 98%);--sapphire-global-color-red-25: hsl(0, 100%, 99%);--sapphire-global-color-green-975: hsl(159, 100%, 5%);--sapphire-global-color-green-950: hsl(159, 100%, 6%);--sapphire-global-color-green-925: hsl(159, 100%, 7%);--sapphire-global-color-green-900: hsl(159, 100%, 7%);--sapphire-global-color-green-875: hsl(159, 100%, 9%);--sapphire-global-color-green-850: hsl(158, 100%, 10%);--sapphire-global-color-green-800: hsl(159, 100%, 13%);--sapphire-global-color-green-750: hsl(159, 100%, 15%);--sapphire-global-color-green-700: hsl(159, 100%, 17%);--sapphire-global-color-green-650: hsl(159, 100%, 19%);--sapphire-global-color-green-600: hsl(159, 100%, 22%);--sapphire-global-color-green-550: hsl(159, 100%, 24%);--sapphire-global-color-green-500: hsl(159, 100%, 27%);--sapphire-global-color-green-450: hsl(159, 71%, 34%);--sapphire-global-color-green-400: hsl(159, 51%, 42%);--sapphire-global-color-green-350: hsl(159, 37%, 50%);--sapphire-global-color-green-300: hsl(159, 36%, 57%);--sapphire-global-color-green-250: hsl(159, 36%, 66%);--sapphire-global-color-green-200: hsl(160, 36%, 74%);--sapphire-global-color-green-150: hsl(159, 36%, 83%);--sapphire-global-color-green-125: hsl(159, 37%, 88%);--sapphire-global-color-green-100: hsl(159, 35%, 92%);--sapphire-global-color-green-75: hsl(162, 33%, 94%);--sapphire-global-color-green-50: hsl(158, 40%, 96%);--sapphire-global-color-green-25: hsl(150, 40%, 98%);--sapphire-global-color-blue-975: hsl(202, 100%, 7%);--sapphire-global-color-blue-950: hsl(203, 100%, 9%);--sapphire-global-color-blue-925: hsl(203, 100%, 10%);--sapphire-global-color-blue-900: hsl(202, 100%, 11%);--sapphire-global-color-blue-875: hsl(203, 100%, 13%);--sapphire-global-color-blue-850: hsl(203, 100%, 15%);--sapphire-global-color-blue-800: hsl(203, 100%, 19%);--sapphire-global-color-blue-750: hsl(202, 100%, 22%);--sapphire-global-color-blue-700: hsl(203, 100%, 25%);--sapphire-global-color-blue-650: hsl(203, 100%, 29%);--sapphire-global-color-blue-600: hsl(203, 100%, 32%);--sapphire-global-color-blue-550: hsl(203, 100%, 35%);--sapphire-global-color-blue-500: hsl(203, 100%, 39%);--sapphire-global-color-blue-450: hsl(203, 90%, 44%);--sapphire-global-color-blue-400: hsl(203, 80%, 50%);--sapphire-global-color-blue-350: hsl(203, 75%, 57%);--sapphire-global-color-blue-300: hsl(203, 70%, 65%);--sapphire-global-color-blue-250: hsl(203, 64%, 72%);--sapphire-global-color-blue-200: hsl(203, 65%, 79%);--sapphire-global-color-blue-150: hsl(203, 64%, 86%);--sapphire-global-color-blue-125: hsl(204, 65%, 90%);--sapphire-global-color-blue-100: hsl(203, 64%, 94%);--sapphire-global-color-blue-75: hsl(206, 67%, 95%);--sapphire-global-color-blue-50: hsl(202, 65%, 97%);--sapphire-global-color-blue-25: hsl(204, 56%, 98%);--sapphire-global-color-sapphire-900-70p: hsla(202, 100%, 11%, .7);--sapphire-global-color-sapphire-900-4p: hsla(202, 100%, 11%, .04);--sapphire-global-color-sapphire-975: hsl(202, 100%, 7%);--sapphire-global-color-sapphire-950: hsl(203, 100%, 9%);--sapphire-global-color-sapphire-925: hsl(202, 100%, 10%);--sapphire-global-color-sapphire-900: hsl(202, 100%, 11%);--sapphire-global-color-sapphire-875: hsl(201, 82%, 13%);--sapphire-global-color-sapphire-850: hsl(202, 68%, 16%);--sapphire-global-color-sapphire-800: hsl(203, 50%, 21%);--sapphire-global-color-sapphire-750: hsl(204, 41%, 25%);--sapphire-global-color-sapphire-700: hsl(204, 32%, 29%);--sapphire-global-color-sapphire-650: hsl(203, 27%, 33%);--sapphire-global-color-sapphire-600: hsl(205, 23%, 37%);--sapphire-global-color-sapphire-550: hsl(205, 19%, 41%);--sapphire-global-color-sapphire-500: hsl(205, 16%, 46%);--sapphire-global-color-sapphire-450: hsl(206, 16%, 50%);--sapphire-global-color-sapphire-400: hsl(206, 15%, 56%);--sapphire-global-color-sapphire-350: hsl(206, 16%, 61%);--sapphire-global-color-sapphire-300: hsl(209, 17%, 66%);--sapphire-global-color-sapphire-250: hsl(207, 16%, 73%);--sapphire-global-color-sapphire-200: hsl(208, 18%, 79%);--sapphire-global-color-sapphire-150: hsl(208, 18%, 86%);--sapphire-global-color-sapphire-125: hsl(210, 19%, 90%);--sapphire-global-color-sapphire-100: hsl(210, 24%, 93%);--sapphire-global-color-sapphire-75: hsl(210, 23%, 95%);--sapphire-global-color-sapphire-50: hsl(216, 29%, 97%);--sapphire-global-color-sapphire-25: hsl(220, 33%, 98%);--sapphire-global-color-neutral-transparent: hsla(0, 0%, 100%, 0);--sapphire-global-color-neutral-black: hsl(0, 0%, 0%);--sapphire-global-color-neutral-white: hsl(0, 0%, 100%);--sapphire-semantic-time-motion-quick: var(--sapphire-global-time-100);--sapphire-semantic-time-motion-default: var(--sapphire-global-time-200);--sapphire-semantic-time-motion-slow: var(--sapphire-global-time-400);--sapphire-semantic-time-motion-very-slow: var(--sapphire-global-time-1000);--sapphire-semantic-time-fade-slow: var(--sapphire-global-time-1800);--sapphire-semantic-time-fade-quick: var(--sapphire-global-time-100);--sapphire-semantic-time-fade-default: var(--sapphire-global-time-200);--sapphire-semantic-size-spacing-80: var(--sapphire-global-size-generic-160);--sapphire-semantic-size-spacing-70: var(--sapphire-global-size-generic-100);--sapphire-semantic-size-spacing-60: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-spacing-50: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-spacing-40: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-spacing-30: var(--sapphire-global-size-generic-30);--sapphire-semantic-size-spacing-25: var(--sapphire-global-size-generic-25);--sapphire-semantic-size-spacing-20: var(--sapphire-global-size-generic-20);--sapphire-semantic-size-spacing-10: var(--sapphire-global-size-generic-10);--sapphire-semantic-size-spacing-5: var(--sapphire-global-size-generic-5);--sapphire-semantic-size-line-height-md: var(--sapphire-global-size-line-height-md);--sapphire-semantic-size-line-height-sm: var(--sapphire-global-size-line-height-sm);--sapphire-semantic-size-font-control-default: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-control-md: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-control-sm: var(--sapphire-global-size-font-75);--sapphire-semantic-size-font-label-lg: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-label-md: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-label-sm: var(--sapphire-global-size-font-75);--sapphire-semantic-size-font-text-lg: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-text-md: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-text-sm: var(--sapphire-global-size-font-75);--sapphire-semantic-size-radius-xl: var(--sapphire-global-size-static-60);--sapphire-semantic-size-radius-lg: var(--sapphire-global-size-static-30);--sapphire-semantic-size-radius-md: var(--sapphire-global-size-static-20);--sapphire-semantic-size-radius-sm: var(--sapphire-global-size-static-10);--sapphire-semantic-size-radius-xs: var(--sapphire-global-size-static-5);--sapphire-semantic-size-border-lg: var(--sapphire-global-size-static-10);--sapphire-semantic-size-border-md: var(--sapphire-global-size-static-5);--sapphire-semantic-size-border-sm: var(--sapphire-global-size-static-2);--sapphire-semantic-size-icon-xl: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-icon-lg: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-icon-md: var(--sapphire-global-size-generic-50);--sapphire-semantic-size-icon-sm: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-width-control-default: var(--sapphire-global-size-generic-750);--sapphire-semantic-size-height-box-md: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-height-control-xl: var(--sapphire-global-size-generic-140);--sapphire-semantic-size-height-control-lg: var(--sapphire-global-size-generic-120);--sapphire-semantic-size-height-control-md: var(--sapphire-global-size-generic-100);--sapphire-semantic-size-height-control-sm: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-height-control-xs: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-height-control-2xs: var(--sapphire-global-size-generic-50);--sapphire-semantic-shadow-popover: var(--sapphire-global-shadow-md);--sapphire-semantic-opacity-disabled: var(--sapphire-global-opacity-40);--sapphire-semantic-opacity-50: var(--sapphire-global-opacity-50);--sapphire-semantic-font-name-display: var(--sapphire-global-font-danske-human-name);--sapphire-semantic-font-name-default: var(--sapphire-global-font-danske-text-name);--sapphire-semantic-color-content-decorative-orange-secondary-default: var(--sapphire-global-color-secondary-orange-600);--sapphire-semantic-color-content-decorative-orange-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-teal-secondary-default: var(--sapphire-global-color-secondary-teal-600);--sapphire-semantic-color-content-decorative-teal-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-forest-green-secondary-default: var(--sapphire-global-color-secondary-forest-green-600);--sapphire-semantic-color-content-decorative-forest-green-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-cobalt-secondary-default: var(--sapphire-global-color-secondary-cobalt-600);--sapphire-semantic-color-content-decorative-cobalt-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-gray-secondary-default: var(--sapphire-global-color-secondary-gray-600);--sapphire-semantic-color-content-decorative-gray-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-orchid-secondary-default: var(--sapphire-global-color-secondary-orchid-600);--sapphire-semantic-color-content-decorative-orchid-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-beige-secondary-default: var(--sapphire-global-color-secondary-beige-600);--sapphire-semantic-color-content-decorative-beige-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-gold-secondary-default: var(--sapphire-global-color-secondary-gold-600);--sapphire-semantic-color-content-decorative-gold-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-violet-secondary-default: var(--sapphire-global-color-secondary-violet-600);--sapphire-semantic-color-content-decorative-violet-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-pink-secondary-default: var(--sapphire-global-color-secondary-pink-600);--sapphire-semantic-color-content-decorative-pink-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-lime-secondary-default: var(--sapphire-global-color-secondary-lime-600);--sapphire-semantic-color-content-decorative-lime-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-indigo-secondary-default: var(--sapphire-global-color-secondary-indigo-600);--sapphire-semantic-color-content-decorative-indigo-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-electro-secondary-default: var(--sapphire-global-color-secondary-electro-600);--sapphire-semantic-color-content-decorative-electro-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-copper-secondary-default: var(--sapphire-global-color-secondary-copper-600);--sapphire-semantic-color-content-decorative-copper-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-aqua-secondary-default: var(--sapphire-global-color-secondary-aqua-600);--sapphire-semantic-color-content-decorative-aqua-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-passive-secondary-default: var(--sapphire-global-color-sapphire-550);--sapphire-semantic-color-content-passive-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-informative-secondary-default: var(--sapphire-global-color-blue-550);--sapphire-semantic-color-content-informative-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-warning-secondary-default: var(--sapphire-global-color-yellow-700);--sapphire-semantic-color-content-negative-secondary-active: var(--sapphire-global-color-red-700);--sapphire-semantic-color-content-negative-secondary-hover: var(--sapphire-global-color-red-600);--sapphire-semantic-color-content-negative-secondary-default: var(--sapphire-global-color-red-550);--sapphire-semantic-color-content-negative-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-positive-secondary-default: var(--sapphire-global-color-green-550);--sapphire-semantic-color-content-positive-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-selection-unselected-active: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-selection-unselected-hover: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-selection-unselected-default: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-selection-selected-active: var(--sapphire-global-color-blue-700);--sapphire-semantic-color-content-selection-selected-hover: var(--sapphire-global-color-blue-600);--sapphire-semantic-color-content-selection-selected-default: var(--sapphire-global-color-blue-550);--sapphire-semantic-color-content-action-tertiary-active: var(--sapphire-global-color-sapphire-975);--sapphire-semantic-color-content-action-tertiary-hover: var(--sapphire-global-color-sapphire-950);--sapphire-semantic-color-content-action-tertiary-default: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-action-secondary-active: var(--sapphire-global-color-blue-700);--sapphire-semantic-color-content-action-secondary-hover: var(--sapphire-global-color-blue-600);--sapphire-semantic-color-content-action-secondary-default: var(--sapphire-global-color-blue-550);--sapphire-semantic-color-content-action-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-default-secondary: var(--sapphire-global-color-sapphire-600);--sapphire-semantic-color-content-default-primary: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-focus-ring: var(--sapphire-global-color-blue-400);--sapphire-semantic-color-border-decorative-orange-secondary-default: var(--sapphire-global-color-secondary-orange-200);--sapphire-semantic-color-border-decorative-teal-secondary-default: var(--sapphire-global-color-secondary-teal-200);--sapphire-semantic-color-border-decorative-forest-green-secondary-default: var(--sapphire-global-color-secondary-forest-green-200);--sapphire-semantic-color-border-decorative-cobalt-secondary-default: var(--sapphire-global-color-secondary-cobalt-200);--sapphire-semantic-color-border-decorative-gray-secondary-default: var(--sapphire-global-color-secondary-gray-200);--sapphire-semantic-color-border-decorative-orchid-secondary-default: var(--sapphire-global-color-secondary-orchid-200);--sapphire-semantic-color-border-decorative-beige-secondary-default: var(--sapphire-global-color-secondary-beige-200);--sapphire-semantic-color-border-decorative-gold-secondary-default: var(--sapphire-global-color-secondary-gold-200);--sapphire-semantic-color-border-decorative-violet-secondary-default: var(--sapphire-global-color-secondary-violet-200);--sapphire-semantic-color-border-decorative-pink-secondary-default: var(--sapphire-global-color-secondary-pink-200);--sapphire-semantic-color-border-decorative-lime-secondary-default: var(--sapphire-global-color-secondary-lime-200);--sapphire-semantic-color-border-decorative-indigo-secondary-default: var(--sapphire-global-color-secondary-indigo-200);--sapphire-semantic-color-border-decorative-electro-secondary-default: var(--sapphire-global-color-secondary-electro-200);--sapphire-semantic-color-border-decorative-copper-secondary-default: var(--sapphire-global-color-secondary-copper-200);--sapphire-semantic-color-border-decorative-aqua-secondary-default: var(--sapphire-global-color-secondary-aqua-200);--sapphire-semantic-color-border-informative-secondary-default: var(--sapphire-global-color-blue-200);--sapphire-semantic-color-border-warning-secondary-default: var(--sapphire-global-color-yellow-300);--sapphire-semantic-color-border-positive-secondary-default: var(--sapphire-global-color-green-200);--sapphire-semantic-color-border-negative-secondary-default: var(--sapphire-global-color-red-200);--sapphire-semantic-color-border-field-error: var(--sapphire-global-color-red-500);--sapphire-semantic-color-border-tertiary-default: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-border-secondary-default: var(--sapphire-global-color-sapphire-150);--sapphire-semantic-color-border-primary-active: var(--sapphire-global-color-sapphire-300);--sapphire-semantic-color-border-primary-hover: var(--sapphire-global-color-sapphire-250);--sapphire-semantic-color-border-primary-default: var(--sapphire-global-color-sapphire-200);--sapphire-semantic-color-background-skeleton-default: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-backdrop: var(--sapphire-global-color-sapphire-900-70p);--sapphire-semantic-color-background-surface: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-background-control-special-secondary-default: var(--sapphire-global-color-sapphire-900-4p);--sapphire-semantic-color-background-control-special-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-background-control-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-background-field-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-background-decorative-orange-secondary-default: var(--sapphire-global-color-secondary-orange-50);--sapphire-semantic-color-background-decorative-orange-primary-default: var(--sapphire-global-color-secondary-orange-400);--sapphire-semantic-color-background-decorative-teal-secondary-default: var(--sapphire-global-color-secondary-teal-50);--sapphire-semantic-color-background-decorative-teal-primary-default: var(--sapphire-global-color-secondary-teal-500);--sapphire-semantic-color-background-decorative-forest-green-secondary-default: var(--sapphire-global-color-secondary-forest-green-50);--sapphire-semantic-color-background-decorative-forest-green-primary-default: var(--sapphire-global-color-secondary-forest-green-500);--sapphire-semantic-color-background-decorative-cobalt-secondary-default: var(--sapphire-global-color-secondary-cobalt-50);--sapphire-semantic-color-background-decorative-cobalt-primary-default: var(--sapphire-global-color-secondary-cobalt-500);--sapphire-semantic-color-background-decorative-gray-secondary-default: var(--sapphire-global-color-secondary-gray-50);--sapphire-semantic-color-background-decorative-gray-primary-default: var(--sapphire-global-color-secondary-gray-500);--sapphire-semantic-color-background-decorative-orchid-secondary-default: var(--sapphire-global-color-secondary-orchid-50);--sapphire-semantic-color-background-decorative-orchid-primary-default: var(--sapphire-global-color-secondary-orchid-500);--sapphire-semantic-color-background-decorative-beige-secondary-default: var(--sapphire-global-color-secondary-beige-50);--sapphire-semantic-color-background-decorative-beige-primary-default: var(--sapphire-global-color-secondary-beige-500);--sapphire-semantic-color-background-decorative-gold-secondary-default: var(--sapphire-global-color-secondary-gold-50);--sapphire-semantic-color-background-decorative-gold-primary-default: var(--sapphire-global-color-secondary-gold-500);--sapphire-semantic-color-background-decorative-violet-secondary-default: var(--sapphire-global-color-secondary-violet-100);--sapphire-semantic-color-background-decorative-violet-primary-default: var(--sapphire-global-color-secondary-violet-500);--sapphire-semantic-color-background-decorative-pink-secondary-default: var(--sapphire-global-color-secondary-pink-100);--sapphire-semantic-color-background-decorative-pink-primary-default: var(--sapphire-global-color-secondary-pink-500);--sapphire-semantic-color-background-decorative-lime-secondary-default: var(--sapphire-global-color-secondary-lime-100);--sapphire-semantic-color-background-decorative-lime-primary-default: var(--sapphire-global-color-secondary-lime-500);--sapphire-semantic-color-background-decorative-indigo-secondary-default: var(--sapphire-global-color-secondary-indigo-100);--sapphire-semantic-color-background-decorative-indigo-primary-default: var(--sapphire-global-color-secondary-indigo-500);--sapphire-semantic-color-background-decorative-electro-secondary-default: var(--sapphire-global-color-secondary-electro-100);--sapphire-semantic-color-background-decorative-electro-primary-default: var(--sapphire-global-color-secondary-electro-500);--sapphire-semantic-color-background-decorative-copper-secondary-default: var(--sapphire-global-color-secondary-copper-100);--sapphire-semantic-color-background-decorative-copper-primary-default: var(--sapphire-global-color-secondary-copper-500);--sapphire-semantic-color-background-decorative-aqua-secondary-default: var(--sapphire-global-color-secondary-aqua-100);--sapphire-semantic-color-background-decorative-aqua-primary-default: var(--sapphire-global-color-secondary-aqua-500);--sapphire-semantic-color-background-passive-secondary-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-passive-primary-default: var(--sapphire-global-color-sapphire-450);--sapphire-semantic-color-background-informative-secondary-default: var(--sapphire-global-color-blue-50);--sapphire-semantic-color-background-informative-primary-default: var(--sapphire-global-color-blue-500);--sapphire-semantic-color-background-warning-secondary-default: var(--sapphire-global-color-yellow-75);--sapphire-semantic-color-background-warning-primary-default: var(--sapphire-global-color-yellow-300);--sapphire-semantic-color-background-positive-secondary-default: var(--sapphire-global-color-green-50);--sapphire-semantic-color-background-positive-primary-default: var(--sapphire-global-color-green-500);--sapphire-semantic-color-background-negative-secondary-active: var(--sapphire-global-color-red-100);--sapphire-semantic-color-background-negative-secondary-hover: var(--sapphire-global-color-red-75);--sapphire-semantic-color-background-negative-secondary-default: var(--sapphire-global-color-red-50);--sapphire-semantic-color-background-negative-primary-active: var(--sapphire-global-color-red-650);--sapphire-semantic-color-background-negative-primary-hover: var(--sapphire-global-color-red-600);--sapphire-semantic-color-background-negative-primary-default: var(--sapphire-global-color-red-500);--sapphire-semantic-color-background-selection-unselected-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-selection-unselected-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-selection-unselected-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-selection-selected-active: var(--sapphire-global-color-blue-100);--sapphire-semantic-color-background-selection-selected-hover: var(--sapphire-global-color-blue-75);--sapphire-semantic-color-background-selection-selected-default: var(--sapphire-global-color-blue-50);--sapphire-semantic-color-background-action-danger-text: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-danger-ghost-default: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-tertiary-text: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-tertiary-ghost-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-tertiary-ghost-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-tertiary-ghost-default: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-tertiary-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-tertiary-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-tertiary-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-action-secondary-text: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-secondary-ghost-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-secondary-ghost-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-secondary-ghost-default: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-secondary-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-secondary-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-secondary-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-action-primary-active: var(--sapphire-global-color-blue-650);--sapphire-semantic-color-background-action-primary-hover: var(--sapphire-global-color-blue-600);--sapphire-semantic-color-background-action-primary-default: var(--sapphire-global-color-blue-500);--sapphire-semantic-size-spacing-container-horizontal-md: var(--sapphire-semantic-size-spacing-60);--sapphire-semantic-size-spacing-data-collection-item-horizontal-lg: var(--sapphire-semantic-size-spacing-40);--sapphire-semantic-size-spacing-data-collection-item-horizontal-md: var(--sapphire-semantic-size-spacing-30);--sapphire-semantic-size-spacing-data-collection-item-horizontal-sm: var(--sapphire-semantic-size-spacing-20);--sapphire-semantic-size-spacing-control-horizontal-lg: var(--sapphire-semantic-size-spacing-30);--sapphire-semantic-size-spacing-control-horizontal-md: var(--sapphire-semantic-size-spacing-25);--sapphire-semantic-size-spacing-control-vertical-lg: var(--sapphire-semantic-size-spacing-30);--sapphire-semantic-size-spacing-control-vertical-md: var(--sapphire-semantic-size-spacing-25);--sapphire-semantic-size-spacing-control-vertical-sm: var(--sapphire-semantic-size-spacing-10);--sapphire-semantic-size-radius-popover: var(--sapphire-semantic-size-radius-md);--sapphire-semantic-size-focus-ring: var(--sapphire-semantic-size-border-md);--sapphire-semantic-size-height-box-lg: var(--sapphire-semantic-size-height-control-2xs);--sapphire-semantic-size-height-input-md: var(--sapphire-semantic-size-height-control-md);--sapphire-semantic-size-height-input-lg: var(--sapphire-semantic-size-height-control-lg);--sapphire-semantic-color-cursor-default: var(--sapphire-semantic-color-background-action-primary-default);--sapphire-semantic-color-content-warning-primary-default: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-link-secondary-active: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-link-secondary-hover: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-link-secondary-default: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-link-primary-active: var(--sapphire-semantic-color-content-action-secondary-active);--sapphire-semantic-color-content-link-primary-hover: var(--sapphire-semantic-color-content-action-secondary-hover);--sapphire-semantic-color-content-link-primary-default: var(--sapphire-semantic-color-content-action-secondary-default);--sapphire-semantic-color-content-action-danger-active: var(--sapphire-semantic-color-content-negative-secondary-active);--sapphire-semantic-color-content-action-danger-hover: var(--sapphire-semantic-color-content-negative-secondary-hover);--sapphire-semantic-color-content-action-danger-default: var(--sapphire-semantic-color-content-negative-secondary-default);--sapphire-semantic-color-border-passive-secondary-default: var(--sapphire-semantic-color-border-primary-default);--sapphire-semantic-color-border-separator-default: var(--sapphire-semantic-color-border-tertiary-default);--sapphire-semantic-color-border-control-active: var(--sapphire-semantic-color-border-primary-active);--sapphire-semantic-color-border-control-hover: var(--sapphire-semantic-color-border-primary-hover);--sapphire-semantic-color-border-control-default: var(--sapphire-semantic-color-border-primary-default);--sapphire-semantic-color-background-spinner-secondary-default: var(--sapphire-semantic-color-background-action-primary-default);--sapphire-semantic-color-background-spinner-primary-default: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-background-popover-default: var(--sapphire-semantic-color-background-surface);--sapphire-semantic-color-background-action-danger-ghost-active: var(--sapphire-semantic-color-background-negative-secondary-active);--sapphire-semantic-color-background-action-danger-ghost-hover: var(--sapphire-semantic-color-background-negative-secondary-hover);--sapphire-semantic-color-background-action-danger-active: var(--sapphire-semantic-color-background-negative-secondary-active);--sapphire-semantic-color-background-action-danger-hover: var(--sapphire-semantic-color-background-negative-secondary-hover);--sapphire-semantic-color-background-action-danger-default: var(--sapphire-semantic-color-background-negative-secondary-default);--sapphire-semantic-color-border-field-default: var(--sapphire-semantic-color-border-control-default)}@media screen and (min-width: 768px){.sapphire-theme-default,:host,.sapphire-theme--secondary,:host ::ng-deep .sapphire-theme--secondary,.sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-semantic-size-width-panel-sm: var(--sapphire-global-size-generic-1120);--sapphire-semantic-size-width-panel-lg: var(--sapphire-global-size-generic-1600)}}@media (prefers-reduced-motion){.sapphire-theme-default,:host,.sapphire-theme--secondary,:host ::ng-deep .sapphire-theme--secondary,.sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-semantic-time-motion-very-slow: var(--sapphire-global-time-2000);--sapphire-semantic-time-motion-slow: 0s;--sapphire-semantic-time-motion-default: 0s;--sapphire-semantic-time-motion-quick: 0s}}.sapphire-theme-default.sapphire-theme--secondary,.sapphire-theme-default .sapphire-theme--secondary,:host .sapphire-theme--secondary,:host ::ng-deep .sapphire-theme--secondary{--sapphire-semantic-color-background-action-secondary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-background-action-secondary-hover: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-secondary-active: var(--sapphire-global-color-sapphire-125);--sapphire-semantic-color-background-action-secondary-ghost-hover: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-secondary-ghost-active: var(--sapphire-global-color-sapphire-125);--sapphire-semantic-color-background-action-tertiary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-background-action-tertiary-hover: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-tertiary-active: var(--sapphire-global-color-sapphire-125);--sapphire-semantic-color-background-action-tertiary-ghost-hover: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-tertiary-ghost-active: var(--sapphire-global-color-sapphire-125);--sapphire-semantic-color-background-action-danger-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-background-action-danger-hover: var(--sapphire-global-color-red-100);--sapphire-semantic-color-background-action-danger-active: var(--sapphire-global-color-red-125);--sapphire-semantic-color-background-action-danger-ghost-hover: var(--sapphire-global-color-red-100);--sapphire-semantic-color-background-action-danger-ghost-active: var(--sapphire-global-color-red-125);--sapphire-semantic-color-background-surface: var(--sapphire-global-color-sapphire-50)}.sapphire-theme-default.sapphire-theme--contrast,.sapphire-theme-default .sapphire-theme--contrast,:host .sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-global-color-sapphire-25: hsl(202, 100%, 7%);--sapphire-global-color-sapphire-50: hsl(203, 100%, 9%);--sapphire-global-color-sapphire-75: hsl(202, 100%, 10%);--sapphire-global-color-sapphire-100: hsl(202, 100%, 11%);--sapphire-global-color-sapphire-125: hsl(201, 82%, 13%);--sapphire-global-color-sapphire-150: hsl(202, 68%, 16%);--sapphire-global-color-sapphire-200: hsl(203, 50%, 21%);--sapphire-global-color-sapphire-250: hsl(204, 41%, 25%);--sapphire-global-color-sapphire-300: hsl(204, 32%, 29%);--sapphire-global-color-sapphire-350: hsl(203, 27%, 33%);--sapphire-global-color-sapphire-400: hsl(205, 23%, 37%);--sapphire-global-color-sapphire-450: hsl(205, 19%, 41%);--sapphire-global-color-sapphire-500: hsl(205, 16%, 46%);--sapphire-global-color-sapphire-550: hsl(206, 16%, 50%);--sapphire-global-color-sapphire-600: hsl(206, 15%, 56%);--sapphire-global-color-sapphire-650: hsl(206, 16%, 61%);--sapphire-global-color-sapphire-700: hsl(209, 17%, 66%);--sapphire-global-color-sapphire-750: hsl(207, 16%, 73%);--sapphire-global-color-sapphire-800: hsl(208, 18%, 79%);--sapphire-global-color-sapphire-850: hsl(208, 18%, 86%);--sapphire-global-color-sapphire-875: hsl(210, 19%, 90%);--sapphire-global-color-sapphire-900: hsl(210, 24%, 93%);--sapphire-global-color-sapphire-925: hsl(210, 23%, 95%);--sapphire-global-color-sapphire-950: hsl(216, 29%, 97%);--sapphire-global-color-sapphire-975: hsl(220, 33%, 98%);--sapphire-global-color-sapphire-900-70p: hsla(210, 24%, 93%, .3);--sapphire-global-color-blue-25: hsl(202, 100%, 7%);--sapphire-global-color-blue-50: hsl(203, 100%, 9%);--sapphire-global-color-blue-75: hsl(203, 100%, 10%);--sapphire-global-color-blue-100: hsl(202, 100%, 11%);--sapphire-global-color-blue-125: hsl(203, 100%, 13%);--sapphire-global-color-blue-150: hsl(203, 100%, 15%);--sapphire-global-color-blue-200: hsl(203, 100%, 19%);--sapphire-global-color-blue-250: hsl(202, 100%, 22%);--sapphire-global-color-blue-300: hsl(203, 100%, 25%);--sapphire-global-color-blue-350: hsl(203, 100%, 29%);--sapphire-global-color-blue-400: hsl(203, 100%, 32%);--sapphire-global-color-blue-450: hsl(203, 100%, 35%);--sapphire-global-color-blue-500: hsl(203, 100%, 39%);--sapphire-global-color-blue-550: hsl(203, 90%, 44%);--sapphire-global-color-blue-600: hsl(203, 80%, 50%);--sapphire-global-color-blue-650: hsl(203, 75%, 57%);--sapphire-global-color-blue-700: hsl(203, 70%, 65%);--sapphire-global-color-blue-750: hsl(203, 64%, 72%);--sapphire-global-color-blue-800: hsl(203, 65%, 79%);--sapphire-global-color-blue-850: hsl(203, 64%, 86%);--sapphire-global-color-blue-875: hsl(204, 65%, 90%);--sapphire-global-color-blue-900: hsl(203, 64%, 94%);--sapphire-global-color-blue-925: hsl(206, 67%, 95%);--sapphire-global-color-blue-950: hsl(202, 65%, 97%);--sapphire-global-color-blue-975: hsl(204, 56%, 98%);--sapphire-global-color-green-25: hsl(159, 100%, 5%);--sapphire-global-color-green-50: hsl(159, 100%, 6%);--sapphire-global-color-green-75: hsl(159, 100%, 7%);--sapphire-global-color-green-100: hsl(159, 100%, 7%);--sapphire-global-color-green-125: hsl(159, 100%, 9%);--sapphire-global-color-green-150: hsl(158, 100%, 10%);--sapphire-global-color-green-200: hsl(159, 100%, 13%);--sapphire-global-color-green-250: hsl(159, 100%, 15%);--sapphire-global-color-green-300: hsl(159, 100%, 17%);--sapphire-global-color-green-350: hsl(159, 100%, 19%);--sapphire-global-color-green-400: hsl(159, 100%, 22%);--sapphire-global-color-green-450: hsl(159, 100%, 24%);--sapphire-global-color-green-500: hsl(159, 100%, 27%);--sapphire-global-color-green-550: hsl(159, 71%, 34%);--sapphire-global-color-green-600: hsl(159, 51%, 42%);--sapphire-global-color-green-650: hsl(159, 37%, 50%);--sapphire-global-color-green-700: hsl(159, 36%, 57%);--sapphire-global-color-green-750: hsl(159, 36%, 66%);--sapphire-global-color-green-800: hsl(160, 36%, 74%);--sapphire-global-color-green-850: hsl(159, 36%, 83%);--sapphire-global-color-green-875: hsl(159, 37%, 88%);--sapphire-global-color-green-900: hsl(159, 35%, 92%);--sapphire-global-color-green-925: hsl(162, 33%, 94%);--sapphire-global-color-green-950: hsl(158, 40%, 96%);--sapphire-global-color-green-975: hsl(150, 40%, 98%);--sapphire-global-color-red-25: hsl(0, 33%, 10%);--sapphire-global-color-red-50: hsl(355, 38%, 12%);--sapphire-global-color-red-75: hsl(356, 41%, 14%);--sapphire-global-color-red-100: hsl(355, 43%, 15%);--sapphire-global-color-red-125: hsl(354, 44%, 18%);--sapphire-global-color-red-150: hsl(353, 48%, 21%);--sapphire-global-color-red-200: hsl(353, 50%, 26%);--sapphire-global-color-red-250: hsl(351, 54%, 31%);--sapphire-global-color-red-300: hsl(351, 55%, 35%);--sapphire-global-color-red-350: hsl(350, 57%, 39%);--sapphire-global-color-red-400: hsl(349, 60%, 44%);--sapphire-global-color-red-450: hsl(349, 61%, 48%);--sapphire-global-color-red-500: hsl(348, 72%, 53%);--sapphire-global-color-red-550: hsl(351, 73%, 59%);--sapphire-global-color-red-600: hsl(353, 75%, 65%);--sapphire-global-color-red-650: hsl(355, 79%, 71%);--sapphire-global-color-red-700: hsl(356, 82%, 76%);--sapphire-global-color-red-750: hsl(357, 88%, 81%);--sapphire-global-color-red-800: hsl(358, 92%, 86%);--sapphire-global-color-red-850: hsl(359, 100%, 91%);--sapphire-global-color-red-875: hsl(358, 100%, 94%);--sapphire-global-color-red-900: hsl(357, 100%, 96%);--sapphire-global-color-red-925: hsl(356, 100%, 97%);--sapphire-global-color-red-950: hsl(355, 100%, 98%);--sapphire-global-color-red-975: hsl(0, 100%, 99%);--sapphire-global-color-secondary-aqua-50: hsl(192, 82%, 34%);--sapphire-global-color-secondary-aqua-100: hsl(192, 66%, 42%);--sapphire-global-color-secondary-aqua-150: hsl(192, 48%, 54%);--sapphire-global-color-secondary-aqua-200: hsl(192, 49%, 67%);--sapphire-global-color-secondary-aqua-300: hsl(191, 55%, 79%);--sapphire-global-color-secondary-aqua-400: hsl(192, 56%, 86%);--sapphire-global-color-secondary-aqua-500: hsl(190, 57%, 92%);--sapphire-global-color-secondary-aqua-600: hsl(190, 60%, 96%);--sapphire-global-color-secondary-copper-50: hsl(16, 54%, 47%);--sapphire-global-color-secondary-copper-100: hsl(16, 57%, 55%);--sapphire-global-color-secondary-copper-150: hsl(16, 56%, 65%);--sapphire-global-color-secondary-copper-200: hsl(16, 57%, 75%);--sapphire-global-color-secondary-copper-300: hsl(15, 56%, 85%);--sapphire-global-color-secondary-copper-400: hsl(16, 56%, 89%);--sapphire-global-color-secondary-copper-500: hsl(15, 57%, 95%);--sapphire-global-color-secondary-copper-600: hsl(17, 54%, 97%);--sapphire-global-color-secondary-electro-50: hsl(206, 32%, 46%);--sapphire-global-color-secondary-electro-100: hsl(206, 31%, 54%);--sapphire-global-color-secondary-electro-150: hsl(206, 31%, 63%);--sapphire-global-color-secondary-electro-200: hsl(206, 32%, 73%);--sapphire-global-color-secondary-electro-300: hsl(207, 38%, 84%);--sapphire-global-color-secondary-electro-400: hsl(207, 39%, 89%);--sapphire-global-color-secondary-electro-500: hsl(206, 44%, 94%);--sapphire-global-color-secondary-electro-600: hsl(204, 33%, 97%);--sapphire-global-color-secondary-indigo-50: hsl(224, 81%, 59%);--sapphire-global-color-secondary-indigo-100: hsl(224, 100%, 66%);--sapphire-global-color-secondary-indigo-150: hsl(224, 100%, 74%);--sapphire-global-color-secondary-indigo-200: hsl(223, 100%, 81%);--sapphire-global-color-secondary-indigo-300: hsl(224, 100%, 88%);--sapphire-global-color-secondary-indigo-400: hsl(225, 100%, 92%);--sapphire-global-color-secondary-indigo-500: hsl(224, 100%, 96%);--sapphire-global-color-secondary-indigo-600: hsl(224, 100%, 98%);--sapphire-global-color-secondary-lime-50: hsl(76, 100%, 25%);--sapphire-global-color-secondary-lime-100: hsl(74, 100%, 29%);--sapphire-global-color-secondary-lime-150: hsl(73, 52%, 44%);--sapphire-global-color-secondary-lime-200: hsl(74, 42%, 59%);--sapphire-global-color-secondary-lime-300: hsl(74, 46%, 74%);--sapphire-global-color-secondary-lime-400: hsl(74, 52%, 81%);--sapphire-global-color-secondary-lime-500: hsl(74, 61%, 89%);--sapphire-global-color-secondary-lime-600: hsl(73, 66%, 94%);--sapphire-global-color-secondary-pink-50: hsl(333, 53%, 52%);--sapphire-global-color-secondary-pink-100: hsl(333, 65%, 61%);--sapphire-global-color-secondary-pink-150: hsl(333, 66%, 69%);--sapphire-global-color-secondary-pink-200: hsl(333, 67%, 78%);--sapphire-global-color-secondary-pink-300: hsl(332, 69%, 86%);--sapphire-global-color-secondary-pink-400: hsl(333, 70%, 91%);--sapphire-global-color-secondary-pink-500: hsl(330, 62%, 95%);--sapphire-global-color-secondary-pink-600: hsl(330, 71%, 97%);--sapphire-global-color-secondary-violet-50: hsl(245, 60%, 63%);--sapphire-global-color-secondary-violet-100: hsl(245, 75%, 70%);--sapphire-global-color-secondary-violet-150: hsl(245, 74%, 76%);--sapphire-global-color-secondary-violet-200: hsl(246, 75%, 83%);--sapphire-global-color-secondary-violet-300: hsl(248, 74%, 89%);--sapphire-global-color-secondary-violet-400: hsl(246, 74%, 93%);--sapphire-global-color-secondary-violet-500: hsl(244, 70%, 96%);--sapphire-global-color-secondary-violet-600: hsl(248, 80%, 98%);--sapphire-semantic-color-background-field-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-control-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-control-special-primary-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-control-special-secondary-default: var(--sapphire-global-color-sapphire-200);--sapphire-semantic-color-background-surface: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-popover-default: var(--sapphire-global-color-sapphire-25);--sapphire-semantic-color-content-default-primary: var(--sapphire-global-color-neutral-white)}:host ::ng-deep .cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] :host ::ng-deep .cdk-visually-hidden{left:auto;right:0}:host ::ng-deep .cdk-overlay-container,:host ::ng-deep .cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}:host ::ng-deep .cdk-overlay-container{position:fixed;z-index:1000}:host ::ng-deep .cdk-overlay-container:empty{display:none}:host ::ng-deep .cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}:host ::ng-deep .cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}:host ::ng-deep .cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}:host ::ng-deep .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active :host ::ng-deep .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}:host ::ng-deep .cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}:host ::ng-deep .cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}:host ::ng-deep .cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}:host ::ng-deep .cdk-overlay-backdrop-noop-animation{transition:none}:host ::ng-deep .cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}:host ::ng-deep .cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.cdk-overlay-container,:host.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container,:host.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock,::ng-deep .cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}\n"] }]
|
|
6750
|
-
|
|
6751
|
-
|
|
6752
|
-
|
|
6753
|
-
|
|
6754
|
-
|
|
6755
|
-
|
|
6756
|
-
|
|
6757
|
-
ThemeDefaultDark.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ThemeDefaultDark, isStandalone: true, selector: "sp-theme-default-dark", hostDirectives: [{ directive: ThemeBaseDirective }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["@keyframes backdrop-fade-in{0%{background-color:transparent}to{background-color:var(--sapphire-semantic-color-background-backdrop)}}@keyframes backdrop-fade-out{0%{background-color:var(--sapphire-semantic-color-background-backdrop)}to{background-color:transparent}}.sapphire-backdrop,::ng-deep .sapphire-backdrop{width:100%;height:100%;display:flex;justify-content:center;align-items:center;animation-name:backdrop-fade-in;animation-duration:var(--sapphire-semantic-time-fade-default);animation-timing-function:ease-in-out;animation-fill-mode:forwards}.sapphire-backdrop--exiting,::ng-deep .sapphire-backdrop--exiting{animation-name:backdrop-fade-out}.sapphire-theme-default-dark,:host,.sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-semantic-size-breakpoint-xl: 1400px;--sapphire-semantic-size-breakpoint-l: 1200px;--sapphire-semantic-size-breakpoint-m: 960px;--sapphire-semantic-size-breakpoint-s: 768px;--sapphire-semantic-size-breakpoint-xs: 576px;--sapphire-semantic-size-width-panel-lg: 100%;--sapphire-semantic-size-width-panel-sm: 100%;--sapphire-semantic-font-weight-display-bold: 700;--sapphire-semantic-font-weight-display-regular: 400;--sapphire-semantic-font-weight-default-bold: 700;--sapphire-semantic-font-weight-default-semibold: 600;--sapphire-semantic-font-weight-default-regular: 400;--sapphire-global-time-2000: 2s;--sapphire-global-time-1800: 1.8s;--sapphire-global-time-1000: 1s;--sapphire-global-time-400: .4s;--sapphire-global-time-200: .2s;--sapphire-global-time-100: .1s;--sapphire-global-size-ratio-height: .875;--sapphire-global-size-line-height-md: 1.5;--sapphire-global-size-line-height-sm: 1.2;--sapphire-global-size-font-300: 3rem;--sapphire-global-size-font-220: 2.1875rem;--sapphire-global-size-font-188: 1.875rem;--sapphire-global-size-font-150: 1.5rem;--sapphire-global-size-font-130: 1.3125rem;--sapphire-global-size-font-112: 1.125rem;--sapphire-global-size-font-106: 1.0625rem;--sapphire-global-size-font-100: 1rem;--sapphire-global-size-font-88: .875rem;--sapphire-global-size-font-75: .75rem;--sapphire-global-size-font-60: .625rem;--sapphire-global-size-generic-4320: 108rem;--sapphire-global-size-generic-3780: 94.5rem;--sapphire-global-size-generic-3600: 90rem;--sapphire-global-size-generic-3200: 80rem;--sapphire-global-size-generic-2560: 64rem;--sapphire-global-size-generic-2400: 60rem;--sapphire-global-size-generic-1920: 48rem;--sapphire-global-size-generic-1600: 40rem;--sapphire-global-size-generic-1400: 35rem;--sapphire-global-size-generic-1280: 32rem;--sapphire-global-size-generic-1200: 30rem;--sapphire-global-size-generic-1120: 28rem;--sapphire-global-size-generic-1000: 25rem;--sapphire-global-size-generic-960: 24rem;--sapphire-global-size-generic-940: 23.5rem;--sapphire-global-size-generic-900: 22.5rem;--sapphire-global-size-generic-800: 20rem;--sapphire-global-size-generic-750: 18.75rem;--sapphire-global-size-generic-640: 16rem;--sapphire-global-size-generic-600: 15rem;--sapphire-global-size-generic-560: 14rem;--sapphire-global-size-generic-480: 12rem;--sapphire-global-size-generic-400: 10rem;--sapphire-global-size-generic-340: 8.5rem;--sapphire-global-size-generic-320: 8rem;--sapphire-global-size-generic-300: 7.5rem;--sapphire-global-size-generic-280: 7rem;--sapphire-global-size-generic-240: 6rem;--sapphire-global-size-generic-200: 5rem;--sapphire-global-size-generic-180: 4.5rem;--sapphire-global-size-generic-160: 4rem;--sapphire-global-size-generic-140: 3.5rem;--sapphire-global-size-generic-120: 3rem;--sapphire-global-size-generic-100: 2.5rem;--sapphire-global-size-generic-80: 2rem;--sapphire-global-size-generic-60: 1.5rem;--sapphire-global-size-generic-50: 1.25rem;--sapphire-global-size-generic-40: 1rem;--sapphire-global-size-generic-35: .875rem;--sapphire-global-size-generic-30: .75rem;--sapphire-global-size-generic-25: .625rem;--sapphire-global-size-generic-20: .5rem;--sapphire-global-size-generic-15: .375rem;--sapphire-global-size-generic-10: .25rem;--sapphire-global-size-generic-5: .125rem;--sapphire-global-size-generic-2: .0625rem;--sapphire-global-size-generic-0: 0rem;--sapphire-global-size-static-60: 24px;--sapphire-global-size-static-30: 12px;--sapphire-global-size-static-20: 8px;--sapphire-global-size-static-10: 4px;--sapphire-global-size-static-5: 2px;--sapphire-global-size-static-2: 1px;--sapphire-global-size-static-0: 0px;--sapphire-global-shadow-lg: 0px 0px 2px 0px rgba(34, 64, 82, .02), 0px -1.5px 6px 0px rgba(34, 64, 82, .03), 0px 4.5px 12px 0px rgba(34, 64, 82, .04), 0px 14.5px 18px 0px rgba(34, 64, 82, .04), 0px 26px 34px 0px rgba(34, 64, 82, .05), 0px 84px 92px 0px rgba(34, 64, 82, .07), 0px 0px 2px 0px rgba(34, 64, 82, .05), 0px 0px 1px 0px rgba(34, 64, 82, .2);--sapphire-global-shadow-md: 0px 0px 3px 0px rgba(34, 64, 82, .02), 0px 3px 7px 0px rgba(34, 64, 82, .03), 0px 6.5px 14px 0px rgba(34, 64, 82, .04), 0px 13px 29px 0px rgba(34, 64, 82, .05), 0px 36px 80px 0px rgba(34, 64, 82, .07), 0px 0px 2px 0px rgba(34, 64, 82, .05), 0px 0px 1px 0px rgba(34, 64, 82, .2);--sapphire-global-shadow-sm: 0px 0px 2px 0px rgba(34, 64, 82, .06), 0px 1.5px 4px 0px rgba(34, 64, 82, .04), 0px 4.5px 6px 0px rgba(34, 64, 82, .04), 0px 10.5px 12px 0px rgba(34, 64, 82, .03), 0px 25px 24px 0px rgba(34, 64, 82, .02), 0px 100px 64px 0px rgba(34, 64, 82, .02), 0px 0px 2px 0px rgba(34, 64, 82, .05), 0px 0px 1px 0px rgba(34, 64, 82, .2);--sapphire-global-opacity-50: .5;--sapphire-global-opacity-40: .4;--sapphire-global-opacity-35: .35;--sapphire-global-font-danske-human-name: \"Danske Human\";--sapphire-global-font-danske-text-name: \"Danske Text v2\";--sapphire-global-color-secondary-orange-600: hsl(19, 100%, 34%);--sapphire-global-color-secondary-orange-500: hsl(17, 100%, 43%);--sapphire-global-color-secondary-orange-400: hsl(19, 84%, 54%);--sapphire-global-color-secondary-orange-300: hsl(21, 84%, 66%);--sapphire-global-color-secondary-orange-200: hsl(23, 83%, 79%);--sapphire-global-color-secondary-orange-150: hsl(25, 84%, 86%);--sapphire-global-color-secondary-orange-100: hsl(26, 89%, 93%);--sapphire-global-color-secondary-orange-75: hsl(27, 85%, 95%);--sapphire-global-color-secondary-orange-50: hsl(28, 89%, 96%);--sapphire-global-color-secondary-teal-600: hsl(171, 100%, 22%);--sapphire-global-color-secondary-teal-500: hsl(171, 100%, 26%);--sapphire-global-color-secondary-teal-400: hsl(172, 50%, 42%);--sapphire-global-color-secondary-teal-300: hsl(172, 36%, 57%);--sapphire-global-color-secondary-teal-200: hsl(171, 36%, 74%);--sapphire-global-color-secondary-teal-150: hsl(171, 36%, 82%);--sapphire-global-color-secondary-teal-100: hsl(172, 35%, 92%);--sapphire-global-color-secondary-teal-75: hsl(170, 38%, 94%);--sapphire-global-color-secondary-teal-50: hsl(171, 33%, 96%);--sapphire-global-color-secondary-forest-green-600: hsl(105, 93%, 23%);--sapphire-global-color-secondary-forest-green-500: hsl(105, 93%, 28%);--sapphire-global-color-secondary-forest-green-400: hsl(105, 48%, 43%);--sapphire-global-color-secondary-forest-green-300: hsl(105, 36%, 58%);--sapphire-global-color-secondary-forest-green-200: hsl(105, 36%, 74%);--sapphire-global-color-secondary-forest-green-150: hsl(105, 36%, 82%);--sapphire-global-color-secondary-forest-green-100: hsl(104, 35%, 92%);--sapphire-global-color-secondary-forest-green-75: hsl(109, 35%, 94%);--sapphire-global-color-secondary-forest-green-50: hsl(111, 33%, 96%);--sapphire-global-color-secondary-cobalt-600: hsl(215, 87%, 42%);--sapphire-global-color-secondary-cobalt-500: hsl(215, 92%, 51%);--sapphire-global-color-secondary-cobalt-400: hsl(215, 92%, 62%);--sapphire-global-color-secondary-cobalt-300: hsl(215, 92%, 72%);--sapphire-global-color-secondary-cobalt-200: hsl(215, 91%, 83%);--sapphire-global-color-secondary-cobalt-150: hsl(216, 93%, 89%);--sapphire-global-color-secondary-cobalt-100: hsl(216, 93%, 95%);--sapphire-global-color-secondary-cobalt-75: hsl(215, 90%, 96%);--sapphire-global-color-secondary-cobalt-50: hsl(215, 86%, 97%);--sapphire-global-color-secondary-gray-600: hsl(202, 6%, 38%);--sapphire-global-color-secondary-gray-500: hsl(201, 6%, 46%);--sapphire-global-color-secondary-gray-400: hsl(200, 5%, 56%);--sapphire-global-color-secondary-gray-300: hsl(203, 5%, 67%);--sapphire-global-color-secondary-gray-200: hsl(200, 6%, 79%);--sapphire-global-color-secondary-gray-150: hsl(195, 6%, 86%);--sapphire-global-color-secondary-gray-100: hsl(210, 6%, 93%);--sapphire-global-color-secondary-gray-75: hsl(240, 4%, 95%);--sapphire-global-color-secondary-gray-50: hsl(180, 6%, 97%);--sapphire-global-color-secondary-orchid-600: hsl(304, 36%, 42%);--sapphire-global-color-secondary-orchid-500: hsl(304, 37%, 51%);--sapphire-global-color-secondary-orchid-400: hsl(304, 37%, 61%);--sapphire-global-color-secondary-orchid-300: hsl(303, 37%, 71%);--sapphire-global-color-secondary-orchid-200: hsl(304, 37%, 82%);--sapphire-global-color-secondary-orchid-150: hsl(305, 38%, 88%);--sapphire-global-color-secondary-orchid-100: hsl(305, 38%, 94%);--sapphire-global-color-secondary-orchid-75: hsl(300, 36%, 96%);--sapphire-global-color-secondary-orchid-50: hsl(300, 33%, 97%);--sapphire-global-color-secondary-beige-600: hsl(38, 20%, 35%);--sapphire-global-color-secondary-beige-500: hsl(40, 20%, 43%);--sapphire-global-color-secondary-beige-400: hsl(38, 15%, 54%);--sapphire-global-color-secondary-beige-300: hsl(39, 16%, 65%);--sapphire-global-color-secondary-beige-200: hsl(41, 14%, 78%);--sapphire-global-color-secondary-beige-150: hsl(40, 16%, 85%);--sapphire-global-color-secondary-beige-100: hsl(40, 17%, 93%);--sapphire-global-color-secondary-beige-75: hsl(30, 15%, 95%);--sapphire-global-color-secondary-beige-50: hsl(30, 11%, 96%);--sapphire-global-color-secondary-gold-600: hsl(42, 97%, 25%);--sapphire-global-color-secondary-gold-500: hsl(42, 96%, 31%);--sapphire-global-color-secondary-gold-400: hsl(42, 54%, 45%);--sapphire-global-color-secondary-gold-300: hsl(42, 44%, 59%);--sapphire-global-color-secondary-gold-200: hsl(42, 44%, 74%);--sapphire-global-color-secondary-gold-150: hsl(43, 43%, 83%);--sapphire-global-color-secondary-gold-100: hsl(43, 43%, 92%);--sapphire-global-color-secondary-gold-75: hsl(42, 42%, 94%);--sapphire-global-color-secondary-gold-50: hsl(40, 43%, 96%);--sapphire-global-color-secondary-violet-600: hsl(248, 80%, 98%);--sapphire-global-color-secondary-violet-500: hsl(244, 70%, 96%);--sapphire-global-color-secondary-violet-400: hsl(246, 74%, 93%);--sapphire-global-color-secondary-violet-300: hsl(248, 74%, 89%);--sapphire-global-color-secondary-violet-200: hsl(246, 75%, 83%);--sapphire-global-color-secondary-violet-150: hsl(245, 74%, 76%);--sapphire-global-color-secondary-violet-100: hsl(245, 75%, 70%);--sapphire-global-color-secondary-violet-75: hsl(245, 65%, 97%);--sapphire-global-color-secondary-violet-50: hsl(245, 60%, 63%);--sapphire-global-color-secondary-purple-600: hsl(270, 28%, 45%);--sapphire-global-color-secondary-purple-500: hsl(270, 33%, 55%);--sapphire-global-color-secondary-purple-400: hsl(270, 33%, 64%);--sapphire-global-color-secondary-purple-300: hsl(270, 33%, 73%);--sapphire-global-color-secondary-purple-200: hsl(269, 33%, 83%);--sapphire-global-color-secondary-purple-150: hsl(272, 32%, 88%);--sapphire-global-color-secondary-purple-100: hsl(270, 36%, 95%);--sapphire-global-color-secondary-purple-75: hsl(274, 33%, 96%);--sapphire-global-color-secondary-purple-50: hsl(270, 29%, 97%);--sapphire-global-color-secondary-pink-600: hsl(330, 71%, 97%);--sapphire-global-color-secondary-pink-500: hsl(330, 62%, 95%);--sapphire-global-color-secondary-pink-400: hsl(333, 70%, 91%);--sapphire-global-color-secondary-pink-300: hsl(332, 69%, 86%);--sapphire-global-color-secondary-pink-200: hsl(333, 67%, 78%);--sapphire-global-color-secondary-pink-150: hsl(333, 66%, 69%);--sapphire-global-color-secondary-pink-100: hsl(333, 65%, 61%);--sapphire-global-color-secondary-pink-75: hsl(330, 50%, 96%);--sapphire-global-color-secondary-pink-50: hsl(333, 53%, 52%);--sapphire-global-color-secondary-lime-600: hsl(73, 66%, 94%);--sapphire-global-color-secondary-lime-500: hsl(74, 61%, 89%);--sapphire-global-color-secondary-lime-400: hsl(74, 52%, 81%);--sapphire-global-color-secondary-lime-300: hsl(74, 46%, 74%);--sapphire-global-color-secondary-lime-200: hsl(74, 42%, 59%);--sapphire-global-color-secondary-lime-150: hsl(73, 52%, 44%);--sapphire-global-color-secondary-lime-100: hsl(74, 100%, 29%);--sapphire-global-color-secondary-lime-75: hsl(66, 29%, 93%);--sapphire-global-color-secondary-lime-50: hsl(76, 100%, 25%);--sapphire-global-color-secondary-indigo-600: hsl(224, 100%, 98%);--sapphire-global-color-secondary-indigo-500: hsl(224, 100%, 96%);--sapphire-global-color-secondary-indigo-400: hsl(225, 100%, 92%);--sapphire-global-color-secondary-indigo-300: hsl(224, 100%, 88%);--sapphire-global-color-secondary-indigo-200: hsl(223, 100%, 81%);--sapphire-global-color-secondary-indigo-150: hsl(224, 100%, 74%);--sapphire-global-color-secondary-indigo-100: hsl(224, 100%, 66%);--sapphire-global-color-secondary-indigo-75: hsl(229, 100%, 97%);--sapphire-global-color-secondary-indigo-50: hsl(224, 81%, 59%);--sapphire-global-color-secondary-electro-600: hsl(204, 33%, 97%);--sapphire-global-color-secondary-electro-500: hsl(206, 44%, 94%);--sapphire-global-color-secondary-electro-400: hsl(207, 39%, 89%);--sapphire-global-color-secondary-electro-300: hsl(207, 38%, 84%);--sapphire-global-color-secondary-electro-200: hsl(206, 32%, 73%);--sapphire-global-color-secondary-electro-150: hsl(206, 31%, 63%);--sapphire-global-color-secondary-electro-100: hsl(206, 31%, 54%);--sapphire-global-color-secondary-electro-75: hsl(206, 28%, 95%);--sapphire-global-color-secondary-electro-50: hsl(206, 32%, 46%);--sapphire-global-color-secondary-copper-600: hsl(17, 54%, 97%);--sapphire-global-color-secondary-copper-500: hsl(15, 57%, 95%);--sapphire-global-color-secondary-copper-400: hsl(16, 56%, 89%);--sapphire-global-color-secondary-copper-300: hsl(15, 56%, 85%);--sapphire-global-color-secondary-copper-200: hsl(16, 57%, 75%);--sapphire-global-color-secondary-copper-150: hsl(16, 56%, 65%);--sapphire-global-color-secondary-copper-100: hsl(16, 57%, 55%);--sapphire-global-color-secondary-copper-75: hsl(16, 48%, 95%);--sapphire-global-color-secondary-copper-50: hsl(16, 54%, 47%);--sapphire-global-color-secondary-aqua-600: hsl(190, 60%, 96%);--sapphire-global-color-secondary-aqua-500: hsl(190, 57%, 92%);--sapphire-global-color-secondary-aqua-400: hsl(192, 56%, 86%);--sapphire-global-color-secondary-aqua-300: hsl(191, 55%, 79%);--sapphire-global-color-secondary-aqua-200: hsl(192, 49%, 67%);--sapphire-global-color-secondary-aqua-150: hsl(192, 48%, 54%);--sapphire-global-color-secondary-aqua-100: hsl(192, 66%, 42%);--sapphire-global-color-secondary-aqua-75: hsl(193, 47%, 94%);--sapphire-global-color-secondary-aqua-50: hsl(192, 82%, 34%);--sapphire-global-color-yellow-975: hsl(20, 95%, 8%);--sapphire-global-color-yellow-950: hsl(19, 89%, 11%);--sapphire-global-color-yellow-925: hsl(21, 87%, 15%);--sapphire-global-color-yellow-900: hsl(21, 88%, 19%);--sapphire-global-color-yellow-875: hsl(21, 86%, 23%);--sapphire-global-color-yellow-850: hsl(22, 85%, 27%);--sapphire-global-color-yellow-800: hsl(22, 88%, 29%);--sapphire-global-color-yellow-750: hsl(24, 89%, 33%);--sapphire-global-color-yellow-700: hsl(25, 93%, 37%);--sapphire-global-color-yellow-650: hsl(28, 94%, 41%);--sapphire-global-color-yellow-600: hsl(31, 93%, 44%);--sapphire-global-color-yellow-550: hsl(34, 94%, 48%);--sapphire-global-color-yellow-500: hsl(37, 95%, 52%);--sapphire-global-color-yellow-450: hsl(40, 95%, 54%);--sapphire-global-color-yellow-400: hsl(43, 98%, 55%);--sapphire-global-color-yellow-350: hsl(44, 98%, 60%);--sapphire-global-color-yellow-300: hsl(46, 98%, 64%);--sapphire-global-color-yellow-250: hsl(47, 97%, 70%);--sapphire-global-color-yellow-200: hsl(48, 98%, 76%);--sapphire-global-color-yellow-150: hsl(48, 98%, 79%);--sapphire-global-color-yellow-125: hsl(49, 97%, 85%);--sapphire-global-color-yellow-100: hsl(48, 100%, 89%);--sapphire-global-color-yellow-75: hsl(49, 100%, 92%);--sapphire-global-color-yellow-50: hsl(51, 100%, 96%);--sapphire-global-color-yellow-25: hsl(54, 100%, 98%);--sapphire-global-color-red-975: hsl(0, 100%, 99%);--sapphire-global-color-red-950: hsl(355, 100%, 98%);--sapphire-global-color-red-925: hsl(356, 100%, 97%);--sapphire-global-color-red-900: hsl(357, 100%, 96%);--sapphire-global-color-red-875: hsl(358, 100%, 94%);--sapphire-global-color-red-850: hsl(359, 100%, 91%);--sapphire-global-color-red-800: hsl(358, 92%, 86%);--sapphire-global-color-red-750: hsl(357, 88%, 81%);--sapphire-global-color-red-700: hsl(356, 82%, 76%);--sapphire-global-color-red-650: hsl(355, 79%, 71%);--sapphire-global-color-red-600: hsl(353, 75%, 65%);--sapphire-global-color-red-550: hsl(351, 73%, 59%);--sapphire-global-color-red-500: hsl(348, 72%, 53%);--sapphire-global-color-red-450: hsl(349, 61%, 48%);--sapphire-global-color-red-400: hsl(349, 60%, 44%);--sapphire-global-color-red-350: hsl(350, 57%, 39%);--sapphire-global-color-red-300: hsl(351, 55%, 35%);--sapphire-global-color-red-250: hsl(351, 54%, 31%);--sapphire-global-color-red-200: hsl(353, 50%, 26%);--sapphire-global-color-red-150: hsl(353, 48%, 21%);--sapphire-global-color-red-125: hsl(354, 44%, 18%);--sapphire-global-color-red-100: hsl(355, 43%, 15%);--sapphire-global-color-red-75: hsl(356, 41%, 14%);--sapphire-global-color-red-50: hsl(355, 38%, 12%);--sapphire-global-color-red-25: hsl(0, 33%, 10%);--sapphire-global-color-green-975: hsl(150, 40%, 98%);--sapphire-global-color-green-950: hsl(158, 40%, 96%);--sapphire-global-color-green-925: hsl(162, 33%, 94%);--sapphire-global-color-green-900: hsl(159, 35%, 92%);--sapphire-global-color-green-875: hsl(159, 37%, 88%);--sapphire-global-color-green-850: hsl(159, 36%, 83%);--sapphire-global-color-green-800: hsl(160, 36%, 74%);--sapphire-global-color-green-750: hsl(159, 36%, 66%);--sapphire-global-color-green-700: hsl(159, 36%, 57%);--sapphire-global-color-green-650: hsl(159, 37%, 50%);--sapphire-global-color-green-600: hsl(159, 51%, 42%);--sapphire-global-color-green-550: hsl(159, 71%, 34%);--sapphire-global-color-green-500: hsl(159, 100%, 27%);--sapphire-global-color-green-450: hsl(159, 100%, 24%);--sapphire-global-color-green-400: hsl(159, 100%, 22%);--sapphire-global-color-green-350: hsl(159, 100%, 19%);--sapphire-global-color-green-300: hsl(159, 100%, 17%);--sapphire-global-color-green-250: hsl(159, 100%, 15%);--sapphire-global-color-green-200: hsl(159, 100%, 13%);--sapphire-global-color-green-150: hsl(158, 100%, 10%);--sapphire-global-color-green-125: hsl(159, 100%, 9%);--sapphire-global-color-green-100: hsl(159, 100%, 7%);--sapphire-global-color-green-75: hsl(159, 100%, 7%);--sapphire-global-color-green-50: hsl(159, 100%, 6%);--sapphire-global-color-green-25: hsl(159, 100%, 5%);--sapphire-global-color-blue-975: hsl(204, 56%, 98%);--sapphire-global-color-blue-950: hsl(202, 65%, 97%);--sapphire-global-color-blue-925: hsl(206, 67%, 95%);--sapphire-global-color-blue-900: hsl(203, 64%, 94%);--sapphire-global-color-blue-875: hsl(204, 65%, 90%);--sapphire-global-color-blue-850: hsl(203, 64%, 86%);--sapphire-global-color-blue-800: hsl(203, 65%, 79%);--sapphire-global-color-blue-750: hsl(203, 64%, 72%);--sapphire-global-color-blue-700: hsl(203, 70%, 65%);--sapphire-global-color-blue-650: hsl(203, 75%, 57%);--sapphire-global-color-blue-600: hsl(203, 80%, 50%);--sapphire-global-color-blue-550: hsl(203, 90%, 44%);--sapphire-global-color-blue-500: hsl(203, 100%, 39%);--sapphire-global-color-blue-450: hsl(203, 100%, 35%);--sapphire-global-color-blue-400: hsl(203, 100%, 32%);--sapphire-global-color-blue-350: hsl(203, 100%, 29%);--sapphire-global-color-blue-300: hsl(203, 100%, 25%);--sapphire-global-color-blue-250: hsl(202, 100%, 22%);--sapphire-global-color-blue-200: hsl(203, 100%, 19%);--sapphire-global-color-blue-150: hsl(203, 100%, 15%);--sapphire-global-color-blue-125: hsl(203, 100%, 13%);--sapphire-global-color-blue-100: hsl(202, 100%, 11%);--sapphire-global-color-blue-75: hsl(203, 100%, 10%);--sapphire-global-color-blue-50: hsl(203, 100%, 9%);--sapphire-global-color-blue-25: hsl(202, 100%, 7%);--sapphire-global-color-sapphire-900-70p: hsla(210, 24%, 93%, .3);--sapphire-global-color-sapphire-900-4p: hsla(202, 100%, 11%, .04);--sapphire-global-color-sapphire-975: hsl(220, 33%, 98%);--sapphire-global-color-sapphire-950: hsl(216, 29%, 97%);--sapphire-global-color-sapphire-925: hsl(210, 23%, 95%);--sapphire-global-color-sapphire-900: hsl(210, 24%, 93%);--sapphire-global-color-sapphire-875: hsl(210, 19%, 90%);--sapphire-global-color-sapphire-850: hsl(208, 18%, 86%);--sapphire-global-color-sapphire-800: hsl(208, 18%, 79%);--sapphire-global-color-sapphire-750: hsl(207, 16%, 73%);--sapphire-global-color-sapphire-700: hsl(209, 17%, 66%);--sapphire-global-color-sapphire-650: hsl(206, 16%, 61%);--sapphire-global-color-sapphire-600: hsl(206, 15%, 56%);--sapphire-global-color-sapphire-550: hsl(206, 16%, 50%);--sapphire-global-color-sapphire-500: hsl(205, 16%, 46%);--sapphire-global-color-sapphire-450: hsl(205, 19%, 41%);--sapphire-global-color-sapphire-400: hsl(205, 23%, 37%);--sapphire-global-color-sapphire-350: hsl(203, 27%, 33%);--sapphire-global-color-sapphire-300: hsl(204, 32%, 29%);--sapphire-global-color-sapphire-250: hsl(204, 41%, 25%);--sapphire-global-color-sapphire-200: hsl(203, 50%, 21%);--sapphire-global-color-sapphire-150: hsl(202, 68%, 16%);--sapphire-global-color-sapphire-125: hsl(201, 82%, 13%);--sapphire-global-color-sapphire-100: hsl(202, 100%, 11%);--sapphire-global-color-sapphire-75: hsl(202, 100%, 10%);--sapphire-global-color-sapphire-50: hsl(203, 100%, 9%);--sapphire-global-color-sapphire-25: hsl(202, 100%, 7%);--sapphire-global-color-neutral-transparent: hsla(0, 0%, 100%, 0);--sapphire-global-color-neutral-black: hsl(0, 0%, 0%);--sapphire-global-color-neutral-white: hsl(0, 0%, 100%);--sapphire-semantic-time-motion-quick: var(--sapphire-global-time-100);--sapphire-semantic-time-motion-default: var(--sapphire-global-time-200);--sapphire-semantic-time-motion-slow: var(--sapphire-global-time-400);--sapphire-semantic-time-motion-very-slow: var(--sapphire-global-time-1000);--sapphire-semantic-time-fade-slow: var(--sapphire-global-time-1800);--sapphire-semantic-time-fade-quick: var(--sapphire-global-time-100);--sapphire-semantic-time-fade-default: var(--sapphire-global-time-200);--sapphire-semantic-size-spacing-80: var(--sapphire-global-size-generic-160);--sapphire-semantic-size-spacing-70: var(--sapphire-global-size-generic-100);--sapphire-semantic-size-spacing-60: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-spacing-50: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-spacing-40: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-spacing-30: var(--sapphire-global-size-generic-30);--sapphire-semantic-size-spacing-25: var(--sapphire-global-size-generic-25);--sapphire-semantic-size-spacing-20: var(--sapphire-global-size-generic-20);--sapphire-semantic-size-spacing-10: var(--sapphire-global-size-generic-10);--sapphire-semantic-size-spacing-5: var(--sapphire-global-size-generic-5);--sapphire-semantic-size-line-height-md: var(--sapphire-global-size-line-height-md);--sapphire-semantic-size-line-height-sm: var(--sapphire-global-size-line-height-sm);--sapphire-semantic-size-font-control-default: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-control-md: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-control-sm: var(--sapphire-global-size-font-75);--sapphire-semantic-size-font-label-lg: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-label-md: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-label-sm: var(--sapphire-global-size-font-75);--sapphire-semantic-size-font-text-lg: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-text-md: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-text-sm: var(--sapphire-global-size-font-75);--sapphire-semantic-size-radius-xl: var(--sapphire-global-size-static-60);--sapphire-semantic-size-radius-lg: var(--sapphire-global-size-static-30);--sapphire-semantic-size-radius-md: var(--sapphire-global-size-static-20);--sapphire-semantic-size-radius-sm: var(--sapphire-global-size-static-10);--sapphire-semantic-size-radius-xs: var(--sapphire-global-size-static-5);--sapphire-semantic-size-border-lg: var(--sapphire-global-size-static-10);--sapphire-semantic-size-border-md: var(--sapphire-global-size-static-5);--sapphire-semantic-size-border-sm: var(--sapphire-global-size-static-2);--sapphire-semantic-size-icon-xl: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-icon-lg: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-icon-md: var(--sapphire-global-size-generic-50);--sapphire-semantic-size-icon-sm: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-width-control-default: var(--sapphire-global-size-generic-750);--sapphire-semantic-size-height-box-md: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-height-control-xl: var(--sapphire-global-size-generic-140);--sapphire-semantic-size-height-control-lg: var(--sapphire-global-size-generic-120);--sapphire-semantic-size-height-control-md: var(--sapphire-global-size-generic-100);--sapphire-semantic-size-height-control-sm: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-height-control-xs: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-height-control-2xs: var(--sapphire-global-size-generic-50);--sapphire-semantic-shadow-popover: var(--sapphire-global-shadow-md);--sapphire-semantic-opacity-disabled: var(--sapphire-global-opacity-40);--sapphire-semantic-opacity-50: var(--sapphire-global-opacity-50);--sapphire-semantic-font-name-display: var(--sapphire-global-font-danske-human-name);--sapphire-semantic-font-name-default: var(--sapphire-global-font-danske-text-name);--sapphire-semantic-color-content-decorative-orange-secondary-default: var(--sapphire-global-color-secondary-orange-600);--sapphire-semantic-color-content-decorative-orange-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-teal-secondary-default: var(--sapphire-global-color-secondary-teal-600);--sapphire-semantic-color-content-decorative-teal-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-forest-green-secondary-default: var(--sapphire-global-color-secondary-forest-green-600);--sapphire-semantic-color-content-decorative-forest-green-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-cobalt-secondary-default: var(--sapphire-global-color-secondary-cobalt-600);--sapphire-semantic-color-content-decorative-cobalt-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-gray-secondary-default: var(--sapphire-global-color-secondary-gray-600);--sapphire-semantic-color-content-decorative-gray-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-orchid-secondary-default: var(--sapphire-global-color-secondary-orchid-600);--sapphire-semantic-color-content-decorative-orchid-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-beige-secondary-default: var(--sapphire-global-color-secondary-beige-600);--sapphire-semantic-color-content-decorative-beige-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-gold-secondary-default: var(--sapphire-global-color-secondary-gold-600);--sapphire-semantic-color-content-decorative-gold-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-violet-secondary-default: var(--sapphire-global-color-secondary-violet-600);--sapphire-semantic-color-content-decorative-violet-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-pink-secondary-default: var(--sapphire-global-color-secondary-pink-600);--sapphire-semantic-color-content-decorative-pink-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-lime-secondary-default: var(--sapphire-global-color-secondary-lime-600);--sapphire-semantic-color-content-decorative-lime-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-indigo-secondary-default: var(--sapphire-global-color-secondary-indigo-600);--sapphire-semantic-color-content-decorative-indigo-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-electro-secondary-default: var(--sapphire-global-color-secondary-electro-600);--sapphire-semantic-color-content-decorative-electro-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-copper-secondary-default: var(--sapphire-global-color-secondary-copper-600);--sapphire-semantic-color-content-decorative-copper-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-aqua-secondary-default: var(--sapphire-global-color-secondary-aqua-600);--sapphire-semantic-color-content-decorative-aqua-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-passive-secondary-default: var(--sapphire-global-color-sapphire-550);--sapphire-semantic-color-content-passive-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-informative-secondary-default: var(--sapphire-global-color-blue-550);--sapphire-semantic-color-content-informative-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-warning-secondary-default: var(--sapphire-global-color-yellow-700);--sapphire-semantic-color-content-negative-secondary-active: var(--sapphire-global-color-red-700);--sapphire-semantic-color-content-negative-secondary-hover: var(--sapphire-global-color-red-600);--sapphire-semantic-color-content-negative-secondary-default: var(--sapphire-global-color-red-550);--sapphire-semantic-color-content-negative-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-positive-secondary-default: var(--sapphire-global-color-green-550);--sapphire-semantic-color-content-positive-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-selection-unselected-active: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-selection-unselected-hover: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-selection-unselected-default: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-selection-selected-active: var(--sapphire-global-color-blue-700);--sapphire-semantic-color-content-selection-selected-hover: var(--sapphire-global-color-blue-600);--sapphire-semantic-color-content-selection-selected-default: var(--sapphire-global-color-blue-550);--sapphire-semantic-color-content-action-tertiary-active: var(--sapphire-global-color-sapphire-975);--sapphire-semantic-color-content-action-tertiary-hover: var(--sapphire-global-color-sapphire-950);--sapphire-semantic-color-content-action-tertiary-default: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-action-secondary-active: var(--sapphire-global-color-blue-700);--sapphire-semantic-color-content-action-secondary-hover: var(--sapphire-global-color-blue-600);--sapphire-semantic-color-content-action-secondary-default: var(--sapphire-global-color-blue-550);--sapphire-semantic-color-content-action-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-default-secondary: var(--sapphire-global-color-sapphire-600);--sapphire-semantic-color-content-default-primary: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-focus-ring: var(--sapphire-global-color-blue-400);--sapphire-semantic-color-border-decorative-orange-secondary-default: var(--sapphire-global-color-secondary-orange-200);--sapphire-semantic-color-border-decorative-teal-secondary-default: var(--sapphire-global-color-secondary-teal-200);--sapphire-semantic-color-border-decorative-forest-green-secondary-default: var(--sapphire-global-color-secondary-forest-green-200);--sapphire-semantic-color-border-decorative-cobalt-secondary-default: var(--sapphire-global-color-secondary-cobalt-200);--sapphire-semantic-color-border-decorative-gray-secondary-default: var(--sapphire-global-color-secondary-gray-200);--sapphire-semantic-color-border-decorative-orchid-secondary-default: var(--sapphire-global-color-secondary-orchid-200);--sapphire-semantic-color-border-decorative-beige-secondary-default: var(--sapphire-global-color-secondary-beige-200);--sapphire-semantic-color-border-decorative-gold-secondary-default: var(--sapphire-global-color-secondary-gold-200);--sapphire-semantic-color-border-decorative-violet-secondary-default: var(--sapphire-global-color-secondary-violet-200);--sapphire-semantic-color-border-decorative-pink-secondary-default: var(--sapphire-global-color-secondary-pink-200);--sapphire-semantic-color-border-decorative-lime-secondary-default: var(--sapphire-global-color-secondary-lime-200);--sapphire-semantic-color-border-decorative-indigo-secondary-default: var(--sapphire-global-color-secondary-indigo-200);--sapphire-semantic-color-border-decorative-electro-secondary-default: var(--sapphire-global-color-secondary-electro-200);--sapphire-semantic-color-border-decorative-copper-secondary-default: var(--sapphire-global-color-secondary-copper-200);--sapphire-semantic-color-border-decorative-aqua-secondary-default: var(--sapphire-global-color-secondary-aqua-200);--sapphire-semantic-color-border-informative-secondary-default: var(--sapphire-global-color-blue-200);--sapphire-semantic-color-border-warning-secondary-default: var(--sapphire-global-color-yellow-300);--sapphire-semantic-color-border-positive-secondary-default: var(--sapphire-global-color-green-200);--sapphire-semantic-color-border-negative-secondary-default: var(--sapphire-global-color-red-200);--sapphire-semantic-color-border-field-error: var(--sapphire-global-color-red-500);--sapphire-semantic-color-border-tertiary-default: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-border-secondary-default: var(--sapphire-global-color-sapphire-150);--sapphire-semantic-color-border-primary-active: var(--sapphire-global-color-sapphire-300);--sapphire-semantic-color-border-primary-hover: var(--sapphire-global-color-sapphire-250);--sapphire-semantic-color-border-primary-default: var(--sapphire-global-color-sapphire-200);--sapphire-semantic-color-background-skeleton-default: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-popover-default: var(--sapphire-global-color-sapphire-25);--sapphire-semantic-color-background-backdrop: var(--sapphire-global-color-sapphire-900-70p);--sapphire-semantic-color-background-surface: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-control-special-secondary-default: var(--sapphire-global-color-sapphire-200);--sapphire-semantic-color-background-control-special-primary-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-control-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-field-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-decorative-orange-secondary-default: var(--sapphire-global-color-secondary-orange-50);--sapphire-semantic-color-background-decorative-orange-primary-default: var(--sapphire-global-color-secondary-orange-400);--sapphire-semantic-color-background-decorative-teal-secondary-default: var(--sapphire-global-color-secondary-teal-50);--sapphire-semantic-color-background-decorative-teal-primary-default: var(--sapphire-global-color-secondary-teal-500);--sapphire-semantic-color-background-decorative-forest-green-secondary-default: var(--sapphire-global-color-secondary-forest-green-50);--sapphire-semantic-color-background-decorative-forest-green-primary-default: var(--sapphire-global-color-secondary-forest-green-500);--sapphire-semantic-color-background-decorative-cobalt-secondary-default: var(--sapphire-global-color-secondary-cobalt-50);--sapphire-semantic-color-background-decorative-cobalt-primary-default: var(--sapphire-global-color-secondary-cobalt-500);--sapphire-semantic-color-background-decorative-gray-secondary-default: var(--sapphire-global-color-secondary-gray-50);--sapphire-semantic-color-background-decorative-gray-primary-default: var(--sapphire-global-color-secondary-gray-500);--sapphire-semantic-color-background-decorative-orchid-secondary-default: var(--sapphire-global-color-secondary-orchid-50);--sapphire-semantic-color-background-decorative-orchid-primary-default: var(--sapphire-global-color-secondary-orchid-500);--sapphire-semantic-color-background-decorative-beige-secondary-default: var(--sapphire-global-color-secondary-beige-50);--sapphire-semantic-color-background-decorative-beige-primary-default: var(--sapphire-global-color-secondary-beige-500);--sapphire-semantic-color-background-decorative-gold-secondary-default: var(--sapphire-global-color-secondary-gold-50);--sapphire-semantic-color-background-decorative-gold-primary-default: var(--sapphire-global-color-secondary-gold-500);--sapphire-semantic-color-background-decorative-violet-secondary-default: var(--sapphire-global-color-secondary-violet-100);--sapphire-semantic-color-background-decorative-violet-primary-default: var(--sapphire-global-color-secondary-violet-500);--sapphire-semantic-color-background-decorative-pink-secondary-default: var(--sapphire-global-color-secondary-pink-100);--sapphire-semantic-color-background-decorative-pink-primary-default: var(--sapphire-global-color-secondary-pink-500);--sapphire-semantic-color-background-decorative-lime-secondary-default: var(--sapphire-global-color-secondary-lime-100);--sapphire-semantic-color-background-decorative-lime-primary-default: var(--sapphire-global-color-secondary-lime-500);--sapphire-semantic-color-background-decorative-indigo-secondary-default: var(--sapphire-global-color-secondary-indigo-100);--sapphire-semantic-color-background-decorative-indigo-primary-default: var(--sapphire-global-color-secondary-indigo-500);--sapphire-semantic-color-background-decorative-electro-secondary-default: var(--sapphire-global-color-secondary-electro-100);--sapphire-semantic-color-background-decorative-electro-primary-default: var(--sapphire-global-color-secondary-electro-500);--sapphire-semantic-color-background-decorative-copper-secondary-default: var(--sapphire-global-color-secondary-copper-100);--sapphire-semantic-color-background-decorative-copper-primary-default: var(--sapphire-global-color-secondary-copper-500);--sapphire-semantic-color-background-decorative-aqua-secondary-default: var(--sapphire-global-color-secondary-aqua-100);--sapphire-semantic-color-background-decorative-aqua-primary-default: var(--sapphire-global-color-secondary-aqua-500);--sapphire-semantic-color-background-passive-secondary-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-passive-primary-default: var(--sapphire-global-color-sapphire-450);--sapphire-semantic-color-background-informative-secondary-default: var(--sapphire-global-color-blue-50);--sapphire-semantic-color-background-informative-primary-default: var(--sapphire-global-color-blue-500);--sapphire-semantic-color-background-warning-secondary-default: var(--sapphire-global-color-yellow-75);--sapphire-semantic-color-background-warning-primary-default: var(--sapphire-global-color-yellow-300);--sapphire-semantic-color-background-positive-secondary-default: var(--sapphire-global-color-green-50);--sapphire-semantic-color-background-positive-primary-default: var(--sapphire-global-color-green-500);--sapphire-semantic-color-background-negative-secondary-active: var(--sapphire-global-color-red-100);--sapphire-semantic-color-background-negative-secondary-hover: var(--sapphire-global-color-red-75);--sapphire-semantic-color-background-negative-secondary-default: var(--sapphire-global-color-red-50);--sapphire-semantic-color-background-negative-primary-active: var(--sapphire-global-color-red-650);--sapphire-semantic-color-background-negative-primary-hover: var(--sapphire-global-color-red-600);--sapphire-semantic-color-background-negative-primary-default: var(--sapphire-global-color-red-500);--sapphire-semantic-color-background-selection-unselected-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-selection-unselected-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-selection-unselected-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-selection-selected-active: var(--sapphire-global-color-blue-100);--sapphire-semantic-color-background-selection-selected-hover: var(--sapphire-global-color-blue-75);--sapphire-semantic-color-background-selection-selected-default: var(--sapphire-global-color-blue-50);--sapphire-semantic-color-background-action-danger-text: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-danger-ghost-default: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-tertiary-text: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-tertiary-ghost-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-tertiary-ghost-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-tertiary-ghost-default: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-tertiary-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-tertiary-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-tertiary-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-action-secondary-text: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-secondary-ghost-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-secondary-ghost-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-secondary-ghost-default: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-secondary-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-secondary-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-secondary-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-action-primary-active: var(--sapphire-global-color-blue-650);--sapphire-semantic-color-background-action-primary-hover: var(--sapphire-global-color-blue-600);--sapphire-semantic-color-background-action-primary-default: var(--sapphire-global-color-blue-500);--sapphire-semantic-size-spacing-container-horizontal-md: var(--sapphire-semantic-size-spacing-60);--sapphire-semantic-size-spacing-data-collection-item-horizontal-lg: var(--sapphire-semantic-size-spacing-40);--sapphire-semantic-size-spacing-data-collection-item-horizontal-md: var(--sapphire-semantic-size-spacing-30);--sapphire-semantic-size-spacing-data-collection-item-horizontal-sm: var(--sapphire-semantic-size-spacing-20);--sapphire-semantic-size-spacing-control-horizontal-lg: var(--sapphire-semantic-size-spacing-30);--sapphire-semantic-size-spacing-control-horizontal-md: var(--sapphire-semantic-size-spacing-25);--sapphire-semantic-size-spacing-control-vertical-lg: var(--sapphire-semantic-size-spacing-30);--sapphire-semantic-size-spacing-control-vertical-md: var(--sapphire-semantic-size-spacing-25);--sapphire-semantic-size-spacing-control-vertical-sm: var(--sapphire-semantic-size-spacing-10);--sapphire-semantic-size-radius-popover: var(--sapphire-semantic-size-radius-md);--sapphire-semantic-size-focus-ring: var(--sapphire-semantic-size-border-md);--sapphire-semantic-size-height-box-lg: var(--sapphire-semantic-size-height-control-2xs);--sapphire-semantic-size-height-input-md: var(--sapphire-semantic-size-height-control-md);--sapphire-semantic-size-height-input-lg: var(--sapphire-semantic-size-height-control-lg);--sapphire-semantic-color-cursor-default: var(--sapphire-semantic-color-background-action-primary-default);--sapphire-semantic-color-content-warning-primary-default: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-link-secondary-active: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-link-secondary-hover: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-link-secondary-default: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-link-primary-active: var(--sapphire-semantic-color-content-action-secondary-active);--sapphire-semantic-color-content-link-primary-hover: var(--sapphire-semantic-color-content-action-secondary-hover);--sapphire-semantic-color-content-link-primary-default: var(--sapphire-semantic-color-content-action-secondary-default);--sapphire-semantic-color-content-action-danger-active: var(--sapphire-semantic-color-content-negative-secondary-active);--sapphire-semantic-color-content-action-danger-hover: var(--sapphire-semantic-color-content-negative-secondary-hover);--sapphire-semantic-color-content-action-danger-default: var(--sapphire-semantic-color-content-negative-secondary-default);--sapphire-semantic-color-border-passive-secondary-default: var(--sapphire-semantic-color-border-primary-default);--sapphire-semantic-color-border-separator-default: var(--sapphire-semantic-color-border-tertiary-default);--sapphire-semantic-color-border-control-active: var(--sapphire-semantic-color-border-primary-active);--sapphire-semantic-color-border-control-hover: var(--sapphire-semantic-color-border-primary-hover);--sapphire-semantic-color-border-control-default: var(--sapphire-semantic-color-border-primary-default);--sapphire-semantic-color-background-spinner-secondary-default: var(--sapphire-semantic-color-background-action-primary-default);--sapphire-semantic-color-background-spinner-primary-default: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-background-action-danger-ghost-active: var(--sapphire-semantic-color-background-negative-secondary-active);--sapphire-semantic-color-background-action-danger-ghost-hover: var(--sapphire-semantic-color-background-negative-secondary-hover);--sapphire-semantic-color-background-action-danger-active: var(--sapphire-semantic-color-background-negative-secondary-active);--sapphire-semantic-color-background-action-danger-hover: var(--sapphire-semantic-color-background-negative-secondary-hover);--sapphire-semantic-color-background-action-danger-default: var(--sapphire-semantic-color-background-negative-secondary-default);--sapphire-semantic-color-border-field-default: var(--sapphire-semantic-color-border-control-default)}@media screen and (min-width: 768px){.sapphire-theme-default-dark,:host,.sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-semantic-size-width-panel-sm: var(--sapphire-global-size-generic-1120);--sapphire-semantic-size-width-panel-lg: var(--sapphire-global-size-generic-1600)}}@media (prefers-reduced-motion){.sapphire-theme-default-dark,:host,.sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-semantic-time-motion-very-slow: var(--sapphire-global-time-2000);--sapphire-semantic-time-motion-slow: 0s;--sapphire-semantic-time-motion-default: 0s;--sapphire-semantic-time-motion-quick: 0s}}.sapphire-theme-default-dark.sapphire-theme--contrast,.sapphire-theme-default-dark .sapphire-theme--contrast,:host .sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-global-color-sapphire-25: hsl(220, 33%, 98%);--sapphire-global-color-sapphire-50: hsl(216, 29%, 97%);--sapphire-global-color-sapphire-75: hsl(210, 23%, 95%);--sapphire-global-color-sapphire-100: hsl(210, 24%, 93%);--sapphire-global-color-sapphire-125: hsl(210, 19%, 90%);--sapphire-global-color-sapphire-150: hsl(208, 18%, 86%);--sapphire-global-color-sapphire-200: hsl(208, 18%, 79%);--sapphire-global-color-sapphire-250: hsl(207, 16%, 73%);--sapphire-global-color-sapphire-300: hsl(209, 17%, 66%);--sapphire-global-color-sapphire-350: hsl(206, 16%, 61%);--sapphire-global-color-sapphire-400: hsl(206, 15%, 56%);--sapphire-global-color-sapphire-450: hsl(206, 16%, 50%);--sapphire-global-color-sapphire-500: hsl(205, 16%, 46%);--sapphire-global-color-sapphire-550: hsl(205, 19%, 41%);--sapphire-global-color-sapphire-600: hsl(205, 23%, 37%);--sapphire-global-color-sapphire-650: hsl(203, 27%, 33%);--sapphire-global-color-sapphire-700: hsl(204, 32%, 29%);--sapphire-global-color-sapphire-750: hsl(204, 41%, 25%);--sapphire-global-color-sapphire-800: hsl(203, 50%, 21%);--sapphire-global-color-sapphire-850: hsl(202, 68%, 16%);--sapphire-global-color-sapphire-875: hsl(201, 82%, 13%);--sapphire-global-color-sapphire-900: hsl(202, 100%, 11%);--sapphire-global-color-sapphire-925: hsl(202, 100%, 10%);--sapphire-global-color-sapphire-950: hsl(203, 100%, 9%);--sapphire-global-color-sapphire-975: hsl(202, 100%, 7%);--sapphire-global-color-sapphire-900-70p: hsla(202, 100%, 11%, .7);--sapphire-global-color-sapphire-900-4p: hsla(202, 100%, 11%, .04);--sapphire-global-color-blue-25: hsl(204, 56%, 98%);--sapphire-global-color-blue-50: hsl(202, 65%, 97%);--sapphire-global-color-blue-75: hsl(206, 67%, 95%);--sapphire-global-color-blue-100: hsl(203, 64%, 94%);--sapphire-global-color-blue-125: hsl(204, 65%, 90%);--sapphire-global-color-blue-150: hsl(203, 64%, 86%);--sapphire-global-color-blue-200: hsl(203, 65%, 79%);--sapphire-global-color-blue-250: hsl(203, 64%, 72%);--sapphire-global-color-blue-300: hsl(203, 70%, 65%);--sapphire-global-color-blue-350: hsl(203, 75%, 57%);--sapphire-global-color-blue-400: hsl(203, 80%, 50%);--sapphire-global-color-blue-450: hsl(203, 90%, 44%);--sapphire-global-color-blue-500: hsl(203, 100%, 39%);--sapphire-global-color-blue-550: hsl(203, 100%, 35%);--sapphire-global-color-blue-600: hsl(203, 100%, 32%);--sapphire-global-color-blue-650: hsl(203, 100%, 29%);--sapphire-global-color-blue-700: hsl(203, 100%, 25%);--sapphire-global-color-blue-750: hsl(202, 100%, 22%);--sapphire-global-color-blue-800: hsl(203, 100%, 19%);--sapphire-global-color-blue-850: hsl(203, 100%, 15%);--sapphire-global-color-blue-875: hsl(203, 100%, 13%);--sapphire-global-color-blue-900: hsl(202, 100%, 11%);--sapphire-global-color-blue-925: hsl(203, 100%, 10%);--sapphire-global-color-blue-950: hsl(203, 100%, 9%);--sapphire-global-color-blue-975: hsl(202, 100%, 7%);--sapphire-global-color-green-25: hsl(150, 40%, 98%);--sapphire-global-color-green-50: hsl(158, 40%, 96%);--sapphire-global-color-green-75: hsl(162, 33%, 94%);--sapphire-global-color-green-100: hsl(159, 35%, 92%);--sapphire-global-color-green-125: hsl(159, 37%, 88%);--sapphire-global-color-green-150: hsl(159, 36%, 83%);--sapphire-global-color-green-200: hsl(160, 36%, 74%);--sapphire-global-color-green-250: hsl(159, 36%, 66%);--sapphire-global-color-green-300: hsl(159, 36%, 57%);--sapphire-global-color-green-350: hsl(159, 37%, 50%);--sapphire-global-color-green-400: hsl(159, 51%, 42%);--sapphire-global-color-green-450: hsl(159, 71%, 34%);--sapphire-global-color-green-500: hsl(159, 100%, 27%);--sapphire-global-color-green-550: hsl(159, 100%, 24%);--sapphire-global-color-green-600: hsl(159, 100%, 22%);--sapphire-global-color-green-650: hsl(159, 100%, 19%);--sapphire-global-color-green-700: hsl(159, 100%, 17%);--sapphire-global-color-green-750: hsl(159, 100%, 15%);--sapphire-global-color-green-800: hsl(159, 100%, 13%);--sapphire-global-color-green-850: hsl(158, 100%, 10%);--sapphire-global-color-green-875: hsl(159, 100%, 9%);--sapphire-global-color-green-900: hsl(159, 100%, 7%);--sapphire-global-color-green-925: hsl(159, 100%, 7%);--sapphire-global-color-green-950: hsl(159, 100%, 6%);--sapphire-global-color-green-975: hsl(159, 100%, 5%);--sapphire-global-color-red-25: hsl(0, 100%, 99%);--sapphire-global-color-red-50: hsl(355, 100%, 98%);--sapphire-global-color-red-75: hsl(356, 100%, 97%);--sapphire-global-color-red-100: hsl(357, 100%, 96%);--sapphire-global-color-red-125: hsl(358, 100%, 94%);--sapphire-global-color-red-150: hsl(359, 100%, 91%);--sapphire-global-color-red-200: hsl(358, 92%, 86%);--sapphire-global-color-red-250: hsl(357, 88%, 81%);--sapphire-global-color-red-300: hsl(356, 82%, 76%);--sapphire-global-color-red-350: hsl(355, 79%, 71%);--sapphire-global-color-red-400: hsl(353, 75%, 65%);--sapphire-global-color-red-450: hsl(351, 73%, 59%);--sapphire-global-color-red-500: hsl(348, 72%, 53%);--sapphire-global-color-red-550: hsl(349, 61%, 48%);--sapphire-global-color-red-600: hsl(349, 60%, 44%);--sapphire-global-color-red-650: hsl(350, 57%, 39%);--sapphire-global-color-red-700: hsl(351, 55%, 35%);--sapphire-global-color-red-750: hsl(351, 54%, 31%);--sapphire-global-color-red-800: hsl(353, 50%, 26%);--sapphire-global-color-red-850: hsl(353, 48%, 21%);--sapphire-global-color-red-875: hsl(354, 44%, 18%);--sapphire-global-color-red-900: hsl(355, 43%, 15%);--sapphire-global-color-red-925: hsl(356, 41%, 14%);--sapphire-global-color-red-950: hsl(355, 38%, 12%);--sapphire-global-color-red-975: hsl(0, 33%, 10%);--sapphire-global-color-secondary-aqua-50: hsl(193, 47%, 96%);--sapphire-global-color-secondary-aqua-75: hsl(193, 47%, 94%);--sapphire-global-color-secondary-aqua-100: hsl(190, 45%, 92%);--sapphire-global-color-secondary-aqua-150: hsl(192, 47%, 84%);--sapphire-global-color-secondary-aqua-200: hsl(192, 47%, 76%);--sapphire-global-color-secondary-aqua-300: hsl(192, 47%, 60%);--sapphire-global-color-secondary-aqua-400: hsl(192, 55%, 46%);--sapphire-global-color-secondary-aqua-500: hsl(192, 100%, 32%);--sapphire-global-color-secondary-aqua-600: hsl(192, 100%, 26%);--sapphire-global-color-secondary-copper-50: hsl(15, 50%, 97%);--sapphire-global-color-secondary-copper-75: hsl(16, 48%, 95%);--sapphire-global-color-secondary-copper-100: hsl(16, 48%, 94%);--sapphire-global-color-secondary-copper-150: hsl(15, 51%, 87%);--sapphire-global-color-secondary-copper-200: hsl(16, 49%, 81%);--sapphire-global-color-secondary-copper-300: hsl(15, 50%, 69%);--sapphire-global-color-secondary-copper-400: hsl(15, 50%, 59%);--sapphire-global-color-secondary-copper-500: hsl(15, 54%, 48%);--sapphire-global-color-secondary-copper-600: hsl(16, 54%, 39%);--sapphire-global-color-secondary-electro-50: hsl(204, 29%, 97%);--sapphire-global-color-secondary-electro-75: hsl(206, 28%, 95%);--sapphire-global-color-secondary-electro-100: hsl(207, 27%, 94%);--sapphire-global-color-secondary-electro-150: hsl(205, 27%, 86%);--sapphire-global-color-secondary-electro-200: hsl(208, 27%, 80%);--sapphire-global-color-secondary-electro-300: hsl(207, 27%, 67%);--sapphire-global-color-secondary-electro-400: hsl(206, 27%, 56%);--sapphire-global-color-secondary-electro-500: hsl(206, 31%, 46%);--sapphire-global-color-secondary-electro-600: hsl(207, 31%, 38%);--sapphire-global-color-secondary-indigo-50: hsl(229, 100%, 98%);--sapphire-global-color-secondary-indigo-75: hsl(229, 100%, 97%);--sapphire-global-color-secondary-indigo-100: hsl(231, 100%, 96%);--sapphire-global-color-secondary-indigo-150: hsl(229, 100%, 91%);--sapphire-global-color-secondary-indigo-200: hsl(229, 100%, 87%);--sapphire-global-color-secondary-indigo-300: hsl(230, 100%, 79%);--sapphire-global-color-secondary-indigo-400: hsl(230, 100%, 72%);--sapphire-global-color-secondary-indigo-500: hsl(230, 100%, 64%);--sapphire-global-color-secondary-indigo-600: hsl(230, 62%, 53%);--sapphire-global-color-secondary-lime-50: hsl(70, 27%, 96%);--sapphire-global-color-secondary-lime-75: hsl(66, 29%, 93%);--sapphire-global-color-secondary-lime-100: hsl(69, 29%, 91%);--sapphire-global-color-secondary-lime-150: hsl(71, 30%, 82%);--sapphire-global-color-secondary-lime-200: hsl(70, 29%, 73%);--sapphire-global-color-secondary-lime-300: hsl(72, 30%, 57%);--sapphire-global-color-secondary-lime-400: hsl(71, 42%, 42%);--sapphire-global-color-secondary-lime-500: hsl(71, 76%, 28%);--sapphire-global-color-secondary-lime-600: hsl(71, 76%, 23%);--sapphire-global-color-secondary-pink-50: hsl(326, 54%, 97%);--sapphire-global-color-secondary-pink-75: hsl(330, 50%, 96%);--sapphire-global-color-secondary-pink-100: hsl(328, 56%, 95%);--sapphire-global-color-secondary-pink-150: hsl(327, 54%, 89%);--sapphire-global-color-secondary-pink-200: hsl(327, 53%, 83%);--sapphire-global-color-secondary-pink-300: hsl(326, 53%, 73%);--sapphire-global-color-secondary-pink-400: hsl(326, 53%, 63%);--sapphire-global-color-secondary-pink-500: hsl(327, 53%, 53%);--sapphire-global-color-secondary-pink-600: hsl(327, 48%, 43%);--sapphire-global-color-secondary-violet-50: hsl(240, 64%, 98%);--sapphire-global-color-secondary-violet-75: hsl(245, 65%, 97%);--sapphire-global-color-secondary-violet-100: hsl(244, 64%, 96%);--sapphire-global-color-secondary-violet-150: hsl(246, 66%, 91%);--sapphire-global-color-secondary-violet-200: hsl(244, 65%, 86%);--sapphire-global-color-secondary-violet-300: hsl(245, 66%, 78%);--sapphire-global-color-secondary-violet-400: hsl(245, 66%, 71%);--sapphire-global-color-secondary-violet-500: hsl(245, 66%, 64%);--sapphire-global-color-secondary-violet-600: hsl(245, 41%, 52%);--sapphire-global-color-secondary-purple-50: hsl(270, 29%, 97%);--sapphire-global-color-secondary-purple-75: hsl(274, 33%, 96%);--sapphire-global-color-secondary-purple-100: hsl(270, 36%, 95%);--sapphire-global-color-secondary-purple-150: hsl(272, 32%, 88%);--sapphire-global-color-secondary-purple-200: hsl(269, 33%, 83%);--sapphire-global-color-secondary-purple-300: hsl(270, 33%, 73%);--sapphire-global-color-secondary-purple-400: hsl(270, 33%, 64%);--sapphire-global-color-secondary-purple-500: hsl(270, 33%, 55%);--sapphire-global-color-secondary-purple-600: hsl(270, 28%, 45%);--sapphire-global-color-secondary-gold-50: hsl(40, 43%, 96%);--sapphire-global-color-secondary-gold-75: hsl(42, 42%, 94%);--sapphire-global-color-secondary-gold-100: hsl(43, 43%, 92%);--sapphire-global-color-secondary-gold-150: hsl(43, 43%, 83%);--sapphire-global-color-secondary-gold-200: hsl(42, 44%, 74%);--sapphire-global-color-secondary-gold-300: hsl(42, 44%, 59%);--sapphire-global-color-secondary-gold-400: hsl(42, 54%, 45%);--sapphire-global-color-secondary-gold-500: hsl(42, 96%, 31%);--sapphire-global-color-secondary-gold-600: hsl(42, 97%, 25%);--sapphire-global-color-secondary-beige-50: hsl(30, 11%, 96%);--sapphire-global-color-secondary-beige-75: hsl(30, 15%, 95%);--sapphire-global-color-secondary-beige-100: hsl(40, 17%, 93%);--sapphire-global-color-secondary-beige-150: hsl(40, 16%, 85%);--sapphire-global-color-secondary-beige-200: hsl(41, 14%, 78%);--sapphire-global-color-secondary-beige-300: hsl(39, 16%, 65%);--sapphire-global-color-secondary-beige-400: hsl(38, 15%, 54%);--sapphire-global-color-secondary-beige-500: hsl(40, 20%, 43%);--sapphire-global-color-secondary-beige-600: hsl(38, 20%, 35%);--sapphire-global-color-secondary-orchid-50: hsl(300, 33%, 97%);--sapphire-global-color-secondary-orchid-75: hsl(300, 36%, 96%);--sapphire-global-color-secondary-orchid-100: hsl(305, 38%, 94%);--sapphire-global-color-secondary-orchid-150: hsl(305, 38%, 88%);--sapphire-global-color-secondary-orchid-200: hsl(304, 37%, 82%);--sapphire-global-color-secondary-orchid-300: hsl(303, 37%, 71%);--sapphire-global-color-secondary-orchid-400: hsl(304, 37%, 61%);--sapphire-global-color-secondary-orchid-500: hsl(304, 37%, 51%);--sapphire-global-color-secondary-orchid-600: hsl(304, 36%, 42%);--sapphire-global-color-secondary-gray-50: hsl(180, 6%, 97%);--sapphire-global-color-secondary-gray-75: hsl(240, 4%, 95%);--sapphire-global-color-secondary-gray-100: hsl(210, 6%, 93%);--sapphire-global-color-secondary-gray-150: hsl(195, 6%, 86%);--sapphire-global-color-secondary-gray-200: hsl(200, 6%, 79%);--sapphire-global-color-secondary-gray-300: hsl(203, 5%, 67%);--sapphire-global-color-secondary-gray-400: hsl(200, 5%, 56%);--sapphire-global-color-secondary-gray-500: hsl(201, 6%, 46%);--sapphire-global-color-secondary-gray-600: hsl(202, 6%, 38%);--sapphire-global-color-secondary-cobalt-50: hsl(215, 86%, 97%);--sapphire-global-color-secondary-cobalt-75: hsl(215, 90%, 96%);--sapphire-global-color-secondary-cobalt-100: hsl(216, 93%, 95%);--sapphire-global-color-secondary-cobalt-150: hsl(216, 93%, 89%);--sapphire-global-color-secondary-cobalt-200: hsl(215, 91%, 83%);--sapphire-global-color-secondary-cobalt-300: hsl(215, 92%, 72%);--sapphire-global-color-secondary-cobalt-400: hsl(215, 92%, 62%);--sapphire-global-color-secondary-cobalt-500: hsl(215, 92%, 51%);--sapphire-global-color-secondary-cobalt-600: hsl(215, 87%, 42%);--sapphire-global-color-secondary-forest-green-50: hsl(111, 33%, 96%);--sapphire-global-color-secondary-forest-green-75: hsl(109, 35%, 94%);--sapphire-global-color-secondary-forest-green-100: hsl(104, 35%, 92%);--sapphire-global-color-secondary-forest-green-150: hsl(105, 36%, 82%);--sapphire-global-color-secondary-forest-green-200: hsl(105, 36%, 74%);--sapphire-global-color-secondary-forest-green-300: hsl(105, 36%, 58%);--sapphire-global-color-secondary-forest-green-400: hsl(105, 48%, 43%);--sapphire-global-color-secondary-forest-green-500: hsl(105, 93%, 28%);--sapphire-global-color-secondary-forest-green-600: hsl(105, 93%, 23%);--sapphire-global-color-secondary-teal-50: hsl(171, 33%, 96%);--sapphire-global-color-secondary-teal-75: hsl(170, 38%, 94%);--sapphire-global-color-secondary-teal-100: hsl(172, 35%, 92%);--sapphire-global-color-secondary-teal-150: hsl(171, 36%, 82%);--sapphire-global-color-secondary-teal-200: hsl(171, 36%, 74%);--sapphire-global-color-secondary-teal-300: hsl(172, 36%, 57%);--sapphire-global-color-secondary-teal-400: hsl(172, 50%, 42%);--sapphire-global-color-secondary-teal-500: hsl(171, 100%, 26%);--sapphire-global-color-secondary-teal-600: hsl(171, 100%, 22%);--sapphire-global-color-secondary-orange-50: hsl(28, 89%, 96%);--sapphire-global-color-secondary-orange-75: hsl(27, 85%, 95%);--sapphire-global-color-secondary-orange-100: hsl(26, 89%, 93%);--sapphire-global-color-secondary-orange-150: hsl(25, 84%, 86%);--sapphire-global-color-secondary-orange-200: hsl(23, 83%, 79%);--sapphire-global-color-secondary-orange-300: hsl(21, 84%, 66%);--sapphire-global-color-secondary-orange-400: hsl(19, 84%, 54%);--sapphire-global-color-secondary-orange-500: hsl(17, 100%, 43%);--sapphire-global-color-secondary-orange-600: hsl(19, 100%, 34%);--sapphire-global-color-neutral-white: hsl(0, 0%, 100%);--sapphire-global-color-neutral-black: hsl(0, 0%, 0%);--sapphire-global-color-neutral-transparent: hsla(0, 0%, 100%, 0);--sapphire-global-color-yellow-25: hsl(54, 100%, 98%);--sapphire-global-color-yellow-50: hsl(51, 100%, 96%);--sapphire-global-color-yellow-75: hsl(49, 100%, 92%);--sapphire-global-color-yellow-100: hsl(48, 100%, 89%);--sapphire-global-color-yellow-125: hsl(49, 97%, 85%);--sapphire-global-color-yellow-150: hsl(48, 98%, 79%);--sapphire-global-color-yellow-200: hsl(48, 98%, 76%);--sapphire-global-color-yellow-250: hsl(47, 97%, 70%);--sapphire-global-color-yellow-300: hsl(46, 98%, 64%);--sapphire-global-color-yellow-350: hsl(44, 98%, 60%);--sapphire-global-color-yellow-400: hsl(43, 98%, 55%);--sapphire-global-color-yellow-450: hsl(40, 95%, 54%);--sapphire-global-color-yellow-500: hsl(37, 95%, 52%);--sapphire-global-color-yellow-550: hsl(34, 94%, 48%);--sapphire-global-color-yellow-600: hsl(31, 93%, 44%);--sapphire-global-color-yellow-650: hsl(28, 94%, 41%);--sapphire-global-color-yellow-700: hsl(25, 93%, 37%);--sapphire-global-color-yellow-750: hsl(24, 89%, 33%);--sapphire-global-color-yellow-800: hsl(22, 88%, 29%);--sapphire-global-color-yellow-850: hsl(22, 85%, 27%);--sapphire-global-color-yellow-875: hsl(21, 86%, 23%);--sapphire-global-color-yellow-900: hsl(21, 88%, 19%);--sapphire-global-color-yellow-925: hsl(21, 87%, 15%);--sapphire-global-color-yellow-950: hsl(19, 89%, 11%);--sapphire-global-color-yellow-975: hsl(20, 95%, 8%);--sapphire-global-font-danske-text-name: \"Danske Text v2\";--sapphire-global-font-danske-human-name: \"Danske Human\";--sapphire-global-opacity-35: .35;--sapphire-global-opacity-40: .4;--sapphire-global-opacity-50: .5;--sapphire-global-shadow-sm: 0px 0px 2px 0px rgba(34, 64, 82, .06), 0px 1.5px 4px 0px rgba(34, 64, 82, .04), 0px 4.5px 6px 0px rgba(34, 64, 82, .04), 0px 10.5px 12px 0px rgba(34, 64, 82, .03), 0px 25px 24px 0px rgba(34, 64, 82, .02), 0px 100px 64px 0px rgba(34, 64, 82, .02), 0px 0px 2px 0px rgba(34, 64, 82, .05), 0px 0px 1px 0px rgba(34, 64, 82, .2);--sapphire-global-shadow-md: 0px 0px 3px 0px rgba(34, 64, 82, .02), 0px 3px 7px 0px rgba(34, 64, 82, .03), 0px 6.5px 14px 0px rgba(34, 64, 82, .04), 0px 13px 29px 0px rgba(34, 64, 82, .05), 0px 36px 80px 0px rgba(34, 64, 82, .07), 0px 0px 2px 0px rgba(34, 64, 82, .05), 0px 0px 1px 0px rgba(34, 64, 82, .2);--sapphire-global-shadow-lg: 0px 0px 2px 0px rgba(34, 64, 82, .02), 0px -1.5px 6px 0px rgba(34, 64, 82, .03), 0px 4.5px 12px 0px rgba(34, 64, 82, .04), 0px 14.5px 18px 0px rgba(34, 64, 82, .04), 0px 26px 34px 0px rgba(34, 64, 82, .05), 0px 84px 92px 0px rgba(34, 64, 82, .07), 0px 0px 2px 0px rgba(34, 64, 82, .05), 0px 0px 1px 0px rgba(34, 64, 82, .2);--sapphire-global-size-static-0: 0px;--sapphire-global-size-static-2: 1px;--sapphire-global-size-static-5: 2px;--sapphire-global-size-static-10: 4px;--sapphire-global-size-static-20: 8px;--sapphire-global-size-static-30: 12px;--sapphire-global-size-static-60: 24px;--sapphire-global-size-generic-0: 0rem;--sapphire-global-size-generic-2: .0625rem;--sapphire-global-size-generic-5: .125rem;--sapphire-global-size-generic-10: .25rem;--sapphire-global-size-generic-15: .375rem;--sapphire-global-size-generic-20: .5rem;--sapphire-global-size-generic-25: .625rem;--sapphire-global-size-generic-30: .75rem;--sapphire-global-size-generic-35: .875rem;--sapphire-global-size-generic-40: 1rem;--sapphire-global-size-generic-50: 1.25rem;--sapphire-global-size-generic-60: 1.5rem;--sapphire-global-size-generic-80: 2rem;--sapphire-global-size-generic-100: 2.5rem;--sapphire-global-size-generic-120: 3rem;--sapphire-global-size-generic-140: 3.5rem;--sapphire-global-size-generic-160: 4rem;--sapphire-global-size-generic-180: 4.5rem;--sapphire-global-size-generic-200: 5rem;--sapphire-global-size-generic-240: 6rem;--sapphire-global-size-generic-280: 7rem;--sapphire-global-size-generic-300: 7.5rem;--sapphire-global-size-generic-320: 8rem;--sapphire-global-size-generic-340: 8.5rem;--sapphire-global-size-generic-400: 10rem;--sapphire-global-size-generic-480: 12rem;--sapphire-global-size-generic-560: 14rem;--sapphire-global-size-generic-600: 15rem;--sapphire-global-size-generic-640: 16rem;--sapphire-global-size-generic-750: 18.75rem;--sapphire-global-size-generic-800: 20rem;--sapphire-global-size-generic-900: 22.5rem;--sapphire-global-size-generic-940: 23.5rem;--sapphire-global-size-generic-960: 24rem;--sapphire-global-size-generic-1000: 25rem;--sapphire-global-size-generic-1120: 28rem;--sapphire-global-size-generic-1200: 30rem;--sapphire-global-size-generic-1280: 32rem;--sapphire-global-size-generic-1400: 35rem;--sapphire-global-size-generic-1600: 40rem;--sapphire-global-size-generic-1920: 48rem;--sapphire-global-size-generic-2400: 60rem;--sapphire-global-size-generic-2560: 64rem;--sapphire-global-size-generic-3200: 80rem;--sapphire-global-size-generic-3600: 90rem;--sapphire-global-size-generic-3780: 94.5rem;--sapphire-global-size-generic-4320: 108rem;--sapphire-global-size-font-60: .625rem;--sapphire-global-size-font-75: .75rem;--sapphire-global-size-font-88: .875rem;--sapphire-global-size-font-100: 1rem;--sapphire-global-size-font-106: 1.0625rem;--sapphire-global-size-font-112: 1.125rem;--sapphire-global-size-font-130: 1.3125rem;--sapphire-global-size-font-150: 1.5rem;--sapphire-global-size-font-188: 1.875rem;--sapphire-global-size-font-220: 2.1875rem;--sapphire-global-size-font-300: 3rem;--sapphire-global-size-line-height-sm: 1.2;--sapphire-global-size-line-height-md: 1.5;--sapphire-global-size-ratio-height: .875;--sapphire-global-time-100: .1s;--sapphire-global-time-200: .2s;--sapphire-global-time-400: .4s;--sapphire-global-time-1000: 1s;--sapphire-global-time-1800: 1.8s;--sapphire-global-time-2000: 2s;--sapphire-semantic-color-background-surface: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-background-control-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-background-control-special-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-background-control-special-secondary-default: var(--sapphire-global-color-sapphire-900-4p);--sapphire-semantic-color-background-field-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-background-popover-default: var(--sapphire-semantic-color-background-surface);--sapphire-semantic-color-background-action-primary-default: var(--sapphire-global-color-blue-500);--sapphire-semantic-color-background-action-primary-hover: var(--sapphire-global-color-blue-600);--sapphire-semantic-color-background-action-primary-active: var(--sapphire-global-color-blue-650);--sapphire-semantic-color-background-action-secondary-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-action-secondary-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-secondary-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-secondary-ghost-default: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-secondary-ghost-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-secondary-ghost-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-secondary-text: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-tertiary-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-action-tertiary-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-tertiary-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-tertiary-ghost-default: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-tertiary-ghost-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-tertiary-ghost-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-tertiary-text: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-danger-default: var(--sapphire-semantic-color-background-negative-secondary-default);--sapphire-semantic-color-background-action-danger-hover: var(--sapphire-semantic-color-background-negative-secondary-hover);--sapphire-semantic-color-background-action-danger-active: var(--sapphire-semantic-color-background-negative-secondary-active);--sapphire-semantic-color-background-action-danger-ghost-default: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-danger-ghost-hover: var(--sapphire-semantic-color-background-negative-secondary-hover);--sapphire-semantic-color-background-action-danger-ghost-active: var(--sapphire-semantic-color-background-negative-secondary-active);--sapphire-semantic-color-background-action-danger-text: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-selection-selected-default: var(--sapphire-global-color-blue-50);--sapphire-semantic-color-background-selection-selected-hover: var(--sapphire-global-color-blue-75);--sapphire-semantic-color-background-selection-selected-active: var(--sapphire-global-color-blue-100);--sapphire-semantic-color-background-selection-unselected-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-selection-unselected-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-selection-unselected-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-negative-primary-default: var(--sapphire-global-color-red-500);--sapphire-semantic-color-background-negative-primary-hover: var(--sapphire-global-color-red-600);--sapphire-semantic-color-background-negative-primary-active: var(--sapphire-global-color-red-650);--sapphire-semantic-color-background-negative-secondary-default: var(--sapphire-global-color-red-50);--sapphire-semantic-color-background-negative-secondary-hover: var(--sapphire-global-color-red-75);--sapphire-semantic-color-background-negative-secondary-active: var(--sapphire-global-color-red-100);--sapphire-semantic-color-background-positive-primary-default: var(--sapphire-global-color-green-500);--sapphire-semantic-color-background-positive-secondary-default: var(--sapphire-global-color-green-50);--sapphire-semantic-color-background-warning-primary-default: var(--sapphire-global-color-yellow-300);--sapphire-semantic-color-background-warning-secondary-default: var(--sapphire-global-color-yellow-75);--sapphire-semantic-color-background-informative-primary-default: var(--sapphire-global-color-blue-500);--sapphire-semantic-color-background-informative-secondary-default: var(--sapphire-global-color-blue-50);--sapphire-semantic-color-background-passive-primary-default: var(--sapphire-global-color-sapphire-450);--sapphire-semantic-color-background-passive-secondary-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-decorative-aqua-primary-default: var(--sapphire-global-color-secondary-aqua-500);--sapphire-semantic-color-background-decorative-aqua-secondary-default: var(--sapphire-global-color-secondary-aqua-100);--sapphire-semantic-color-background-decorative-copper-primary-default: var(--sapphire-global-color-secondary-copper-500);--sapphire-semantic-color-background-decorative-copper-secondary-default: var(--sapphire-global-color-secondary-copper-100);--sapphire-semantic-color-background-decorative-electro-primary-default: var(--sapphire-global-color-secondary-electro-500);--sapphire-semantic-color-background-decorative-electro-secondary-default: var(--sapphire-global-color-secondary-electro-100);--sapphire-semantic-color-background-decorative-indigo-primary-default: var(--sapphire-global-color-secondary-indigo-500);--sapphire-semantic-color-background-decorative-indigo-secondary-default: var(--sapphire-global-color-secondary-indigo-100);--sapphire-semantic-color-background-decorative-lime-primary-default: var(--sapphire-global-color-secondary-lime-500);--sapphire-semantic-color-background-decorative-lime-secondary-default: var(--sapphire-global-color-secondary-lime-100);--sapphire-semantic-color-background-decorative-pink-primary-default: var(--sapphire-global-color-secondary-pink-500);--sapphire-semantic-color-background-decorative-pink-secondary-default: var(--sapphire-global-color-secondary-pink-100);--sapphire-semantic-color-background-decorative-violet-primary-default: var(--sapphire-global-color-secondary-violet-500);--sapphire-semantic-color-background-decorative-violet-secondary-default: var(--sapphire-global-color-secondary-violet-100);--sapphire-semantic-color-background-decorative-gold-primary-default: var(--sapphire-global-color-secondary-gold-500);--sapphire-semantic-color-background-decorative-gold-secondary-default: var(--sapphire-global-color-secondary-gold-50);--sapphire-semantic-color-background-decorative-beige-primary-default: var(--sapphire-global-color-secondary-beige-500);--sapphire-semantic-color-background-decorative-beige-secondary-default: var(--sapphire-global-color-secondary-beige-50);--sapphire-semantic-color-background-decorative-orchid-primary-default: var(--sapphire-global-color-secondary-orchid-500);--sapphire-semantic-color-background-decorative-orchid-secondary-default: var(--sapphire-global-color-secondary-orchid-50);--sapphire-semantic-color-background-decorative-gray-primary-default: var(--sapphire-global-color-secondary-gray-500);--sapphire-semantic-color-background-decorative-gray-secondary-default: var(--sapphire-global-color-secondary-gray-50);--sapphire-semantic-color-background-decorative-cobalt-primary-default: var(--sapphire-global-color-secondary-cobalt-500);--sapphire-semantic-color-background-decorative-cobalt-secondary-default: var(--sapphire-global-color-secondary-cobalt-50);--sapphire-semantic-color-background-decorative-forest-green-primary-default: var(--sapphire-global-color-secondary-forest-green-500);--sapphire-semantic-color-background-decorative-forest-green-secondary-default: var(--sapphire-global-color-secondary-forest-green-50);--sapphire-semantic-color-background-decorative-teal-primary-default: var(--sapphire-global-color-secondary-teal-500);--sapphire-semantic-color-background-decorative-teal-secondary-default: var(--sapphire-global-color-secondary-teal-50);--sapphire-semantic-color-background-decorative-orange-primary-default: var(--sapphire-global-color-secondary-orange-400);--sapphire-semantic-color-background-decorative-orange-secondary-default: var(--sapphire-global-color-secondary-orange-50);--sapphire-semantic-color-background-backdrop: var(--sapphire-global-color-sapphire-900-70p);--sapphire-semantic-color-background-skeleton-default: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-spinner-primary-default: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-background-spinner-secondary-default: var(--sapphire-semantic-color-background-action-primary-default);--sapphire-semantic-color-content-default-primary: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-default-secondary: var(--sapphire-global-color-sapphire-600);--sapphire-semantic-color-content-action-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-action-secondary-default: var(--sapphire-global-color-blue-550);--sapphire-semantic-color-content-action-secondary-hover: var(--sapphire-global-color-blue-600);--sapphire-semantic-color-content-action-secondary-active: var(--sapphire-global-color-blue-700);--sapphire-semantic-color-content-action-danger-default: var(--sapphire-semantic-color-content-negative-secondary-default);--sapphire-semantic-color-content-action-danger-hover: var(--sapphire-semantic-color-content-negative-secondary-hover);--sapphire-semantic-color-content-action-danger-active: var(--sapphire-semantic-color-content-negative-secondary-active);--sapphire-semantic-color-content-action-tertiary-default: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-action-tertiary-hover: var(--sapphire-global-color-sapphire-950);--sapphire-semantic-color-content-action-tertiary-active: var(--sapphire-global-color-sapphire-975);--sapphire-semantic-color-content-selection-selected-default: var(--sapphire-global-color-blue-550);--sapphire-semantic-color-content-selection-selected-hover: var(--sapphire-global-color-blue-600);--sapphire-semantic-color-content-selection-selected-active: var(--sapphire-global-color-blue-700);--sapphire-semantic-color-content-selection-unselected-default: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-selection-unselected-hover: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-selection-unselected-active: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-link-primary-default: var(--sapphire-semantic-color-content-action-secondary-default);--sapphire-semantic-color-content-link-primary-hover: var(--sapphire-semantic-color-content-action-secondary-hover);--sapphire-semantic-color-content-link-primary-active: var(--sapphire-semantic-color-content-action-secondary-active);--sapphire-semantic-color-content-link-secondary-default: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-link-secondary-hover: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-link-secondary-active: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-positive-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-positive-secondary-default: var(--sapphire-global-color-green-550);--sapphire-semantic-color-content-negative-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-negative-secondary-default: var(--sapphire-global-color-red-550);--sapphire-semantic-color-content-negative-secondary-hover: var(--sapphire-global-color-red-600);--sapphire-semantic-color-content-negative-secondary-active: var(--sapphire-global-color-red-700);--sapphire-semantic-color-content-warning-primary-default: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-warning-secondary-default: var(--sapphire-global-color-yellow-700);--sapphire-semantic-color-content-informative-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-informative-secondary-default: var(--sapphire-global-color-blue-550);--sapphire-semantic-color-content-passive-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-passive-secondary-default: var(--sapphire-global-color-sapphire-550);--sapphire-semantic-color-content-decorative-aqua-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-aqua-secondary-default: var(--sapphire-global-color-secondary-aqua-600);--sapphire-semantic-color-content-decorative-copper-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-copper-secondary-default: var(--sapphire-global-color-secondary-copper-600);--sapphire-semantic-color-content-decorative-electro-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-electro-secondary-default: var(--sapphire-global-color-secondary-electro-600);--sapphire-semantic-color-content-decorative-indigo-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-indigo-secondary-default: var(--sapphire-global-color-secondary-indigo-600);--sapphire-semantic-color-content-decorative-lime-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-lime-secondary-default: var(--sapphire-global-color-secondary-lime-600);--sapphire-semantic-color-content-decorative-pink-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-pink-secondary-default: var(--sapphire-global-color-secondary-pink-600);--sapphire-semantic-color-content-decorative-violet-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-violet-secondary-default: var(--sapphire-global-color-secondary-violet-600);--sapphire-semantic-color-content-decorative-gold-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-gold-secondary-default: var(--sapphire-global-color-secondary-gold-600);--sapphire-semantic-color-content-decorative-beige-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-beige-secondary-default: var(--sapphire-global-color-secondary-beige-600);--sapphire-semantic-color-content-decorative-orchid-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-orchid-secondary-default: var(--sapphire-global-color-secondary-orchid-600);--sapphire-semantic-color-content-decorative-gray-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-gray-secondary-default: var(--sapphire-global-color-secondary-gray-600);--sapphire-semantic-color-content-decorative-cobalt-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-cobalt-secondary-default: var(--sapphire-global-color-secondary-cobalt-600);--sapphire-semantic-color-content-decorative-forest-green-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-forest-green-secondary-default: var(--sapphire-global-color-secondary-forest-green-600);--sapphire-semantic-color-content-decorative-teal-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-teal-secondary-default: var(--sapphire-global-color-secondary-teal-600);--sapphire-semantic-color-content-decorative-orange-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-orange-secondary-default: var(--sapphire-global-color-secondary-orange-600);--sapphire-semantic-color-border-primary-default: var(--sapphire-global-color-sapphire-200);--sapphire-semantic-color-border-primary-hover: var(--sapphire-global-color-sapphire-250);--sapphire-semantic-color-border-primary-active: var(--sapphire-global-color-sapphire-300);--sapphire-semantic-color-border-secondary-default: var(--sapphire-global-color-sapphire-150);--sapphire-semantic-color-border-tertiary-default: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-border-field-default: var(--sapphire-semantic-color-border-control-default);--sapphire-semantic-color-border-field-error: var(--sapphire-global-color-red-500);--sapphire-semantic-color-border-control-default: var(--sapphire-semantic-color-border-primary-default);--sapphire-semantic-color-border-control-hover: var(--sapphire-semantic-color-border-primary-hover);--sapphire-semantic-color-border-control-active: var(--sapphire-semantic-color-border-primary-active);--sapphire-semantic-color-border-separator-default: var(--sapphire-semantic-color-border-tertiary-default);--sapphire-semantic-color-border-negative-secondary-default: var(--sapphire-global-color-red-200);--sapphire-semantic-color-border-positive-secondary-default: var(--sapphire-global-color-green-200);--sapphire-semantic-color-border-warning-secondary-default: var(--sapphire-global-color-yellow-300);--sapphire-semantic-color-border-informative-secondary-default: var(--sapphire-global-color-blue-200);--sapphire-semantic-color-border-passive-secondary-default: var(--sapphire-semantic-color-border-primary-default);--sapphire-semantic-color-border-decorative-aqua-secondary-default: var(--sapphire-global-color-secondary-aqua-200);--sapphire-semantic-color-border-decorative-copper-secondary-default: var(--sapphire-global-color-secondary-copper-200);--sapphire-semantic-color-border-decorative-electro-secondary-default: var(--sapphire-global-color-secondary-electro-200);--sapphire-semantic-color-border-decorative-indigo-secondary-default: var(--sapphire-global-color-secondary-indigo-200);--sapphire-semantic-color-border-decorative-lime-secondary-default: var(--sapphire-global-color-secondary-lime-200);--sapphire-semantic-color-border-decorative-pink-secondary-default: var(--sapphire-global-color-secondary-pink-200);--sapphire-semantic-color-border-decorative-violet-secondary-default: var(--sapphire-global-color-secondary-violet-200);--sapphire-semantic-color-border-decorative-gold-secondary-default: var(--sapphire-global-color-secondary-gold-200);--sapphire-semantic-color-border-decorative-beige-secondary-default: var(--sapphire-global-color-secondary-beige-200);--sapphire-semantic-color-border-decorative-orchid-secondary-default: var(--sapphire-global-color-secondary-orchid-200);--sapphire-semantic-color-border-decorative-gray-secondary-default: var(--sapphire-global-color-secondary-gray-200);--sapphire-semantic-color-border-decorative-cobalt-secondary-default: var(--sapphire-global-color-secondary-cobalt-200);--sapphire-semantic-color-border-decorative-forest-green-secondary-default: var(--sapphire-global-color-secondary-forest-green-200);--sapphire-semantic-color-border-decorative-teal-secondary-default: var(--sapphire-global-color-secondary-teal-200);--sapphire-semantic-color-border-decorative-orange-secondary-default: var(--sapphire-global-color-secondary-orange-200);--sapphire-semantic-color-focus-ring: var(--sapphire-global-color-blue-400);--sapphire-semantic-color-cursor-default: var(--sapphire-semantic-color-background-action-primary-default);--sapphire-semantic-font-name-default: var(--sapphire-global-font-danske-text-name);--sapphire-semantic-font-name-display: var(--sapphire-global-font-danske-human-name);--sapphire-semantic-font-weight-default-regular: 400;--sapphire-semantic-font-weight-default-semibold: 600;--sapphire-semantic-font-weight-default-bold: 700;--sapphire-semantic-font-weight-display-regular: 400;--sapphire-semantic-font-weight-display-bold: 700;--sapphire-semantic-opacity-50: var(--sapphire-global-opacity-50);--sapphire-semantic-opacity-disabled: var(--sapphire-global-opacity-40);--sapphire-semantic-shadow-popover: var(--sapphire-global-shadow-md);--sapphire-semantic-size-height-control-2xs: var(--sapphire-global-size-generic-50);--sapphire-semantic-size-height-control-xs: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-height-control-sm: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-height-control-md: var(--sapphire-global-size-generic-100);--sapphire-semantic-size-height-control-lg: var(--sapphire-global-size-generic-120);--sapphire-semantic-size-height-control-xl: var(--sapphire-global-size-generic-140);--sapphire-semantic-size-height-input-lg: var(--sapphire-semantic-size-height-control-lg);--sapphire-semantic-size-height-input-md: var(--sapphire-semantic-size-height-control-md);--sapphire-semantic-size-height-box-md: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-height-box-lg: var(--sapphire-semantic-size-height-control-2xs);--sapphire-semantic-size-width-control-default: var(--sapphire-global-size-generic-750);--sapphire-semantic-size-width-panel-sm: 100%;--sapphire-semantic-size-width-panel-lg: 100%;--sapphire-semantic-size-icon-sm: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-icon-md: var(--sapphire-global-size-generic-50);--sapphire-semantic-size-icon-lg: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-icon-xl: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-border-sm: var(--sapphire-global-size-static-2);--sapphire-semantic-size-border-md: var(--sapphire-global-size-static-5);--sapphire-semantic-size-border-lg: var(--sapphire-global-size-static-10);--sapphire-semantic-size-focus-ring: var(--sapphire-semantic-size-border-md);--sapphire-semantic-size-radius-xs: var(--sapphire-global-size-static-5);--sapphire-semantic-size-radius-sm: var(--sapphire-global-size-static-10);--sapphire-semantic-size-radius-md: var(--sapphire-global-size-static-20);--sapphire-semantic-size-radius-lg: var(--sapphire-global-size-static-30);--sapphire-semantic-size-radius-xl: var(--sapphire-global-size-static-60);--sapphire-semantic-size-radius-popover: var(--sapphire-semantic-size-radius-md);--sapphire-semantic-size-font-text-sm: var(--sapphire-global-size-font-75);--sapphire-semantic-size-font-text-md: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-text-lg: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-label-sm: var(--sapphire-global-size-font-75);--sapphire-semantic-size-font-label-md: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-label-lg: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-control-sm: var(--sapphire-global-size-font-75);--sapphire-semantic-size-font-control-md: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-control-default: var(--sapphire-global-size-font-100);--sapphire-semantic-size-line-height-sm: var(--sapphire-global-size-line-height-sm);--sapphire-semantic-size-line-height-md: var(--sapphire-global-size-line-height-md);--sapphire-semantic-size-spacing-5: var(--sapphire-global-size-generic-5);--sapphire-semantic-size-spacing-10: var(--sapphire-global-size-generic-10);--sapphire-semantic-size-spacing-20: var(--sapphire-global-size-generic-20);--sapphire-semantic-size-spacing-25: var(--sapphire-global-size-generic-25);--sapphire-semantic-size-spacing-30: var(--sapphire-global-size-generic-30);--sapphire-semantic-size-spacing-40: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-spacing-50: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-spacing-60: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-spacing-70: var(--sapphire-global-size-generic-100);--sapphire-semantic-size-spacing-80: var(--sapphire-global-size-generic-160);--sapphire-semantic-size-spacing-control-vertical-sm: var(--sapphire-semantic-size-spacing-10);--sapphire-semantic-size-spacing-control-vertical-md: var(--sapphire-semantic-size-spacing-25);--sapphire-semantic-size-spacing-control-vertical-lg: var(--sapphire-semantic-size-spacing-30);--sapphire-semantic-size-spacing-control-horizontal-md: var(--sapphire-semantic-size-spacing-25);--sapphire-semantic-size-spacing-control-horizontal-lg: var(--sapphire-semantic-size-spacing-30);--sapphire-semantic-size-spacing-data-collection-item-horizontal-sm: var(--sapphire-semantic-size-spacing-20);--sapphire-semantic-size-spacing-data-collection-item-horizontal-md: var(--sapphire-semantic-size-spacing-30);--sapphire-semantic-size-spacing-data-collection-item-horizontal-lg: var(--sapphire-semantic-size-spacing-40);--sapphire-semantic-size-spacing-container-horizontal-md: var(--sapphire-semantic-size-spacing-60);--sapphire-semantic-size-breakpoint-xs: 576px;--sapphire-semantic-size-breakpoint-s: 768px;--sapphire-semantic-size-breakpoint-m: 960px;--sapphire-semantic-size-breakpoint-l: 1200px;--sapphire-semantic-size-breakpoint-xl: 1400px;--sapphire-semantic-time-fade-default: var(--sapphire-global-time-200);--sapphire-semantic-time-fade-quick: var(--sapphire-global-time-100);--sapphire-semantic-time-fade-slow: var(--sapphire-global-time-1800);--sapphire-semantic-time-motion-very-slow: var(--sapphire-global-time-1000);--sapphire-semantic-time-motion-slow: var(--sapphire-global-time-400);--sapphire-semantic-time-motion-default: var(--sapphire-global-time-200);--sapphire-semantic-time-motion-quick: var(--sapphire-global-time-100)}:host ::ng-deep .cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] :host ::ng-deep .cdk-visually-hidden{left:auto;right:0}:host ::ng-deep .cdk-overlay-container,:host ::ng-deep .cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}:host ::ng-deep .cdk-overlay-container{position:fixed;z-index:1000}:host ::ng-deep .cdk-overlay-container:empty{display:none}:host ::ng-deep .cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}:host ::ng-deep .cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}:host ::ng-deep .cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}:host ::ng-deep .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active :host ::ng-deep .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}:host ::ng-deep .cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}:host ::ng-deep .cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}:host ::ng-deep .cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}:host ::ng-deep .cdk-overlay-backdrop-noop-animation{transition:none}:host ::ng-deep .cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}:host ::ng-deep .cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.cdk-overlay-container,:host.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container,:host.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock,::ng-deep .cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}\n"] });
|
|
6758
|
-
|
|
6759
|
-
|
|
6760
|
-
args: [{ selector: 'sp-theme-default-dark', standalone: true, template: '<ng-content></ng-content>', hostDirectives: [ThemeBaseDirective], styles: ["@keyframes backdrop-fade-in{0%{background-color:transparent}to{background-color:var(--sapphire-semantic-color-background-backdrop)}}@keyframes backdrop-fade-out{0%{background-color:var(--sapphire-semantic-color-background-backdrop)}to{background-color:transparent}}.sapphire-backdrop,::ng-deep .sapphire-backdrop{width:100%;height:100%;display:flex;justify-content:center;align-items:center;animation-name:backdrop-fade-in;animation-duration:var(--sapphire-semantic-time-fade-default);animation-timing-function:ease-in-out;animation-fill-mode:forwards}.sapphire-backdrop--exiting,::ng-deep .sapphire-backdrop--exiting{animation-name:backdrop-fade-out}.sapphire-theme-default-dark,:host,.sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-semantic-size-breakpoint-xl: 1400px;--sapphire-semantic-size-breakpoint-l: 1200px;--sapphire-semantic-size-breakpoint-m: 960px;--sapphire-semantic-size-breakpoint-s: 768px;--sapphire-semantic-size-breakpoint-xs: 576px;--sapphire-semantic-size-width-panel-lg: 100%;--sapphire-semantic-size-width-panel-sm: 100%;--sapphire-semantic-font-weight-display-bold: 700;--sapphire-semantic-font-weight-display-regular: 400;--sapphire-semantic-font-weight-default-bold: 700;--sapphire-semantic-font-weight-default-semibold: 600;--sapphire-semantic-font-weight-default-regular: 400;--sapphire-global-time-2000: 2s;--sapphire-global-time-1800: 1.8s;--sapphire-global-time-1000: 1s;--sapphire-global-time-400: .4s;--sapphire-global-time-200: .2s;--sapphire-global-time-100: .1s;--sapphire-global-size-ratio-height: .875;--sapphire-global-size-line-height-md: 1.5;--sapphire-global-size-line-height-sm: 1.2;--sapphire-global-size-font-300: 3rem;--sapphire-global-size-font-220: 2.1875rem;--sapphire-global-size-font-188: 1.875rem;--sapphire-global-size-font-150: 1.5rem;--sapphire-global-size-font-130: 1.3125rem;--sapphire-global-size-font-112: 1.125rem;--sapphire-global-size-font-106: 1.0625rem;--sapphire-global-size-font-100: 1rem;--sapphire-global-size-font-88: .875rem;--sapphire-global-size-font-75: .75rem;--sapphire-global-size-font-60: .625rem;--sapphire-global-size-generic-4320: 108rem;--sapphire-global-size-generic-3780: 94.5rem;--sapphire-global-size-generic-3600: 90rem;--sapphire-global-size-generic-3200: 80rem;--sapphire-global-size-generic-2560: 64rem;--sapphire-global-size-generic-2400: 60rem;--sapphire-global-size-generic-1920: 48rem;--sapphire-global-size-generic-1600: 40rem;--sapphire-global-size-generic-1400: 35rem;--sapphire-global-size-generic-1280: 32rem;--sapphire-global-size-generic-1200: 30rem;--sapphire-global-size-generic-1120: 28rem;--sapphire-global-size-generic-1000: 25rem;--sapphire-global-size-generic-960: 24rem;--sapphire-global-size-generic-940: 23.5rem;--sapphire-global-size-generic-900: 22.5rem;--sapphire-global-size-generic-800: 20rem;--sapphire-global-size-generic-750: 18.75rem;--sapphire-global-size-generic-640: 16rem;--sapphire-global-size-generic-600: 15rem;--sapphire-global-size-generic-560: 14rem;--sapphire-global-size-generic-480: 12rem;--sapphire-global-size-generic-400: 10rem;--sapphire-global-size-generic-340: 8.5rem;--sapphire-global-size-generic-320: 8rem;--sapphire-global-size-generic-300: 7.5rem;--sapphire-global-size-generic-280: 7rem;--sapphire-global-size-generic-240: 6rem;--sapphire-global-size-generic-200: 5rem;--sapphire-global-size-generic-180: 4.5rem;--sapphire-global-size-generic-160: 4rem;--sapphire-global-size-generic-140: 3.5rem;--sapphire-global-size-generic-120: 3rem;--sapphire-global-size-generic-100: 2.5rem;--sapphire-global-size-generic-80: 2rem;--sapphire-global-size-generic-60: 1.5rem;--sapphire-global-size-generic-50: 1.25rem;--sapphire-global-size-generic-40: 1rem;--sapphire-global-size-generic-35: .875rem;--sapphire-global-size-generic-30: .75rem;--sapphire-global-size-generic-25: .625rem;--sapphire-global-size-generic-20: .5rem;--sapphire-global-size-generic-15: .375rem;--sapphire-global-size-generic-10: .25rem;--sapphire-global-size-generic-5: .125rem;--sapphire-global-size-generic-2: .0625rem;--sapphire-global-size-generic-0: 0rem;--sapphire-global-size-static-60: 24px;--sapphire-global-size-static-30: 12px;--sapphire-global-size-static-20: 8px;--sapphire-global-size-static-10: 4px;--sapphire-global-size-static-5: 2px;--sapphire-global-size-static-2: 1px;--sapphire-global-size-static-0: 0px;--sapphire-global-shadow-lg: 0px 0px 2px 0px rgba(34, 64, 82, .02), 0px -1.5px 6px 0px rgba(34, 64, 82, .03), 0px 4.5px 12px 0px rgba(34, 64, 82, .04), 0px 14.5px 18px 0px rgba(34, 64, 82, .04), 0px 26px 34px 0px rgba(34, 64, 82, .05), 0px 84px 92px 0px rgba(34, 64, 82, .07), 0px 0px 2px 0px rgba(34, 64, 82, .05), 0px 0px 1px 0px rgba(34, 64, 82, .2);--sapphire-global-shadow-md: 0px 0px 3px 0px rgba(34, 64, 82, .02), 0px 3px 7px 0px rgba(34, 64, 82, .03), 0px 6.5px 14px 0px rgba(34, 64, 82, .04), 0px 13px 29px 0px rgba(34, 64, 82, .05), 0px 36px 80px 0px rgba(34, 64, 82, .07), 0px 0px 2px 0px rgba(34, 64, 82, .05), 0px 0px 1px 0px rgba(34, 64, 82, .2);--sapphire-global-shadow-sm: 0px 0px 2px 0px rgba(34, 64, 82, .06), 0px 1.5px 4px 0px rgba(34, 64, 82, .04), 0px 4.5px 6px 0px rgba(34, 64, 82, .04), 0px 10.5px 12px 0px rgba(34, 64, 82, .03), 0px 25px 24px 0px rgba(34, 64, 82, .02), 0px 100px 64px 0px rgba(34, 64, 82, .02), 0px 0px 2px 0px rgba(34, 64, 82, .05), 0px 0px 1px 0px rgba(34, 64, 82, .2);--sapphire-global-opacity-50: .5;--sapphire-global-opacity-40: .4;--sapphire-global-opacity-35: .35;--sapphire-global-font-danske-human-name: \"Danske Human\";--sapphire-global-font-danske-text-name: \"Danske Text v2\";--sapphire-global-color-secondary-orange-600: hsl(19, 100%, 34%);--sapphire-global-color-secondary-orange-500: hsl(17, 100%, 43%);--sapphire-global-color-secondary-orange-400: hsl(19, 84%, 54%);--sapphire-global-color-secondary-orange-300: hsl(21, 84%, 66%);--sapphire-global-color-secondary-orange-200: hsl(23, 83%, 79%);--sapphire-global-color-secondary-orange-150: hsl(25, 84%, 86%);--sapphire-global-color-secondary-orange-100: hsl(26, 89%, 93%);--sapphire-global-color-secondary-orange-75: hsl(27, 85%, 95%);--sapphire-global-color-secondary-orange-50: hsl(28, 89%, 96%);--sapphire-global-color-secondary-teal-600: hsl(171, 100%, 22%);--sapphire-global-color-secondary-teal-500: hsl(171, 100%, 26%);--sapphire-global-color-secondary-teal-400: hsl(172, 50%, 42%);--sapphire-global-color-secondary-teal-300: hsl(172, 36%, 57%);--sapphire-global-color-secondary-teal-200: hsl(171, 36%, 74%);--sapphire-global-color-secondary-teal-150: hsl(171, 36%, 82%);--sapphire-global-color-secondary-teal-100: hsl(172, 35%, 92%);--sapphire-global-color-secondary-teal-75: hsl(170, 38%, 94%);--sapphire-global-color-secondary-teal-50: hsl(171, 33%, 96%);--sapphire-global-color-secondary-forest-green-600: hsl(105, 93%, 23%);--sapphire-global-color-secondary-forest-green-500: hsl(105, 93%, 28%);--sapphire-global-color-secondary-forest-green-400: hsl(105, 48%, 43%);--sapphire-global-color-secondary-forest-green-300: hsl(105, 36%, 58%);--sapphire-global-color-secondary-forest-green-200: hsl(105, 36%, 74%);--sapphire-global-color-secondary-forest-green-150: hsl(105, 36%, 82%);--sapphire-global-color-secondary-forest-green-100: hsl(104, 35%, 92%);--sapphire-global-color-secondary-forest-green-75: hsl(109, 35%, 94%);--sapphire-global-color-secondary-forest-green-50: hsl(111, 33%, 96%);--sapphire-global-color-secondary-cobalt-600: hsl(215, 87%, 42%);--sapphire-global-color-secondary-cobalt-500: hsl(215, 92%, 51%);--sapphire-global-color-secondary-cobalt-400: hsl(215, 92%, 62%);--sapphire-global-color-secondary-cobalt-300: hsl(215, 92%, 72%);--sapphire-global-color-secondary-cobalt-200: hsl(215, 91%, 83%);--sapphire-global-color-secondary-cobalt-150: hsl(216, 93%, 89%);--sapphire-global-color-secondary-cobalt-100: hsl(216, 93%, 95%);--sapphire-global-color-secondary-cobalt-75: hsl(215, 90%, 96%);--sapphire-global-color-secondary-cobalt-50: hsl(215, 86%, 97%);--sapphire-global-color-secondary-gray-600: hsl(202, 6%, 38%);--sapphire-global-color-secondary-gray-500: hsl(201, 6%, 46%);--sapphire-global-color-secondary-gray-400: hsl(200, 5%, 56%);--sapphire-global-color-secondary-gray-300: hsl(203, 5%, 67%);--sapphire-global-color-secondary-gray-200: hsl(200, 6%, 79%);--sapphire-global-color-secondary-gray-150: hsl(195, 6%, 86%);--sapphire-global-color-secondary-gray-100: hsl(210, 6%, 93%);--sapphire-global-color-secondary-gray-75: hsl(240, 4%, 95%);--sapphire-global-color-secondary-gray-50: hsl(180, 6%, 97%);--sapphire-global-color-secondary-orchid-600: hsl(304, 36%, 42%);--sapphire-global-color-secondary-orchid-500: hsl(304, 37%, 51%);--sapphire-global-color-secondary-orchid-400: hsl(304, 37%, 61%);--sapphire-global-color-secondary-orchid-300: hsl(303, 37%, 71%);--sapphire-global-color-secondary-orchid-200: hsl(304, 37%, 82%);--sapphire-global-color-secondary-orchid-150: hsl(305, 38%, 88%);--sapphire-global-color-secondary-orchid-100: hsl(305, 38%, 94%);--sapphire-global-color-secondary-orchid-75: hsl(300, 36%, 96%);--sapphire-global-color-secondary-orchid-50: hsl(300, 33%, 97%);--sapphire-global-color-secondary-beige-600: hsl(38, 20%, 35%);--sapphire-global-color-secondary-beige-500: hsl(40, 20%, 43%);--sapphire-global-color-secondary-beige-400: hsl(38, 15%, 54%);--sapphire-global-color-secondary-beige-300: hsl(39, 16%, 65%);--sapphire-global-color-secondary-beige-200: hsl(41, 14%, 78%);--sapphire-global-color-secondary-beige-150: hsl(40, 16%, 85%);--sapphire-global-color-secondary-beige-100: hsl(40, 17%, 93%);--sapphire-global-color-secondary-beige-75: hsl(30, 15%, 95%);--sapphire-global-color-secondary-beige-50: hsl(30, 11%, 96%);--sapphire-global-color-secondary-gold-600: hsl(42, 97%, 25%);--sapphire-global-color-secondary-gold-500: hsl(42, 96%, 31%);--sapphire-global-color-secondary-gold-400: hsl(42, 54%, 45%);--sapphire-global-color-secondary-gold-300: hsl(42, 44%, 59%);--sapphire-global-color-secondary-gold-200: hsl(42, 44%, 74%);--sapphire-global-color-secondary-gold-150: hsl(43, 43%, 83%);--sapphire-global-color-secondary-gold-100: hsl(43, 43%, 92%);--sapphire-global-color-secondary-gold-75: hsl(42, 42%, 94%);--sapphire-global-color-secondary-gold-50: hsl(40, 43%, 96%);--sapphire-global-color-secondary-violet-600: hsl(248, 80%, 98%);--sapphire-global-color-secondary-violet-500: hsl(244, 70%, 96%);--sapphire-global-color-secondary-violet-400: hsl(246, 74%, 93%);--sapphire-global-color-secondary-violet-300: hsl(248, 74%, 89%);--sapphire-global-color-secondary-violet-200: hsl(246, 75%, 83%);--sapphire-global-color-secondary-violet-150: hsl(245, 74%, 76%);--sapphire-global-color-secondary-violet-100: hsl(245, 75%, 70%);--sapphire-global-color-secondary-violet-75: hsl(245, 65%, 97%);--sapphire-global-color-secondary-violet-50: hsl(245, 60%, 63%);--sapphire-global-color-secondary-purple-600: hsl(270, 28%, 45%);--sapphire-global-color-secondary-purple-500: hsl(270, 33%, 55%);--sapphire-global-color-secondary-purple-400: hsl(270, 33%, 64%);--sapphire-global-color-secondary-purple-300: hsl(270, 33%, 73%);--sapphire-global-color-secondary-purple-200: hsl(269, 33%, 83%);--sapphire-global-color-secondary-purple-150: hsl(272, 32%, 88%);--sapphire-global-color-secondary-purple-100: hsl(270, 36%, 95%);--sapphire-global-color-secondary-purple-75: hsl(274, 33%, 96%);--sapphire-global-color-secondary-purple-50: hsl(270, 29%, 97%);--sapphire-global-color-secondary-pink-600: hsl(330, 71%, 97%);--sapphire-global-color-secondary-pink-500: hsl(330, 62%, 95%);--sapphire-global-color-secondary-pink-400: hsl(333, 70%, 91%);--sapphire-global-color-secondary-pink-300: hsl(332, 69%, 86%);--sapphire-global-color-secondary-pink-200: hsl(333, 67%, 78%);--sapphire-global-color-secondary-pink-150: hsl(333, 66%, 69%);--sapphire-global-color-secondary-pink-100: hsl(333, 65%, 61%);--sapphire-global-color-secondary-pink-75: hsl(330, 50%, 96%);--sapphire-global-color-secondary-pink-50: hsl(333, 53%, 52%);--sapphire-global-color-secondary-lime-600: hsl(73, 66%, 94%);--sapphire-global-color-secondary-lime-500: hsl(74, 61%, 89%);--sapphire-global-color-secondary-lime-400: hsl(74, 52%, 81%);--sapphire-global-color-secondary-lime-300: hsl(74, 46%, 74%);--sapphire-global-color-secondary-lime-200: hsl(74, 42%, 59%);--sapphire-global-color-secondary-lime-150: hsl(73, 52%, 44%);--sapphire-global-color-secondary-lime-100: hsl(74, 100%, 29%);--sapphire-global-color-secondary-lime-75: hsl(66, 29%, 93%);--sapphire-global-color-secondary-lime-50: hsl(76, 100%, 25%);--sapphire-global-color-secondary-indigo-600: hsl(224, 100%, 98%);--sapphire-global-color-secondary-indigo-500: hsl(224, 100%, 96%);--sapphire-global-color-secondary-indigo-400: hsl(225, 100%, 92%);--sapphire-global-color-secondary-indigo-300: hsl(224, 100%, 88%);--sapphire-global-color-secondary-indigo-200: hsl(223, 100%, 81%);--sapphire-global-color-secondary-indigo-150: hsl(224, 100%, 74%);--sapphire-global-color-secondary-indigo-100: hsl(224, 100%, 66%);--sapphire-global-color-secondary-indigo-75: hsl(229, 100%, 97%);--sapphire-global-color-secondary-indigo-50: hsl(224, 81%, 59%);--sapphire-global-color-secondary-electro-600: hsl(204, 33%, 97%);--sapphire-global-color-secondary-electro-500: hsl(206, 44%, 94%);--sapphire-global-color-secondary-electro-400: hsl(207, 39%, 89%);--sapphire-global-color-secondary-electro-300: hsl(207, 38%, 84%);--sapphire-global-color-secondary-electro-200: hsl(206, 32%, 73%);--sapphire-global-color-secondary-electro-150: hsl(206, 31%, 63%);--sapphire-global-color-secondary-electro-100: hsl(206, 31%, 54%);--sapphire-global-color-secondary-electro-75: hsl(206, 28%, 95%);--sapphire-global-color-secondary-electro-50: hsl(206, 32%, 46%);--sapphire-global-color-secondary-copper-600: hsl(17, 54%, 97%);--sapphire-global-color-secondary-copper-500: hsl(15, 57%, 95%);--sapphire-global-color-secondary-copper-400: hsl(16, 56%, 89%);--sapphire-global-color-secondary-copper-300: hsl(15, 56%, 85%);--sapphire-global-color-secondary-copper-200: hsl(16, 57%, 75%);--sapphire-global-color-secondary-copper-150: hsl(16, 56%, 65%);--sapphire-global-color-secondary-copper-100: hsl(16, 57%, 55%);--sapphire-global-color-secondary-copper-75: hsl(16, 48%, 95%);--sapphire-global-color-secondary-copper-50: hsl(16, 54%, 47%);--sapphire-global-color-secondary-aqua-600: hsl(190, 60%, 96%);--sapphire-global-color-secondary-aqua-500: hsl(190, 57%, 92%);--sapphire-global-color-secondary-aqua-400: hsl(192, 56%, 86%);--sapphire-global-color-secondary-aqua-300: hsl(191, 55%, 79%);--sapphire-global-color-secondary-aqua-200: hsl(192, 49%, 67%);--sapphire-global-color-secondary-aqua-150: hsl(192, 48%, 54%);--sapphire-global-color-secondary-aqua-100: hsl(192, 66%, 42%);--sapphire-global-color-secondary-aqua-75: hsl(193, 47%, 94%);--sapphire-global-color-secondary-aqua-50: hsl(192, 82%, 34%);--sapphire-global-color-yellow-975: hsl(20, 95%, 8%);--sapphire-global-color-yellow-950: hsl(19, 89%, 11%);--sapphire-global-color-yellow-925: hsl(21, 87%, 15%);--sapphire-global-color-yellow-900: hsl(21, 88%, 19%);--sapphire-global-color-yellow-875: hsl(21, 86%, 23%);--sapphire-global-color-yellow-850: hsl(22, 85%, 27%);--sapphire-global-color-yellow-800: hsl(22, 88%, 29%);--sapphire-global-color-yellow-750: hsl(24, 89%, 33%);--sapphire-global-color-yellow-700: hsl(25, 93%, 37%);--sapphire-global-color-yellow-650: hsl(28, 94%, 41%);--sapphire-global-color-yellow-600: hsl(31, 93%, 44%);--sapphire-global-color-yellow-550: hsl(34, 94%, 48%);--sapphire-global-color-yellow-500: hsl(37, 95%, 52%);--sapphire-global-color-yellow-450: hsl(40, 95%, 54%);--sapphire-global-color-yellow-400: hsl(43, 98%, 55%);--sapphire-global-color-yellow-350: hsl(44, 98%, 60%);--sapphire-global-color-yellow-300: hsl(46, 98%, 64%);--sapphire-global-color-yellow-250: hsl(47, 97%, 70%);--sapphire-global-color-yellow-200: hsl(48, 98%, 76%);--sapphire-global-color-yellow-150: hsl(48, 98%, 79%);--sapphire-global-color-yellow-125: hsl(49, 97%, 85%);--sapphire-global-color-yellow-100: hsl(48, 100%, 89%);--sapphire-global-color-yellow-75: hsl(49, 100%, 92%);--sapphire-global-color-yellow-50: hsl(51, 100%, 96%);--sapphire-global-color-yellow-25: hsl(54, 100%, 98%);--sapphire-global-color-red-975: hsl(0, 100%, 99%);--sapphire-global-color-red-950: hsl(355, 100%, 98%);--sapphire-global-color-red-925: hsl(356, 100%, 97%);--sapphire-global-color-red-900: hsl(357, 100%, 96%);--sapphire-global-color-red-875: hsl(358, 100%, 94%);--sapphire-global-color-red-850: hsl(359, 100%, 91%);--sapphire-global-color-red-800: hsl(358, 92%, 86%);--sapphire-global-color-red-750: hsl(357, 88%, 81%);--sapphire-global-color-red-700: hsl(356, 82%, 76%);--sapphire-global-color-red-650: hsl(355, 79%, 71%);--sapphire-global-color-red-600: hsl(353, 75%, 65%);--sapphire-global-color-red-550: hsl(351, 73%, 59%);--sapphire-global-color-red-500: hsl(348, 72%, 53%);--sapphire-global-color-red-450: hsl(349, 61%, 48%);--sapphire-global-color-red-400: hsl(349, 60%, 44%);--sapphire-global-color-red-350: hsl(350, 57%, 39%);--sapphire-global-color-red-300: hsl(351, 55%, 35%);--sapphire-global-color-red-250: hsl(351, 54%, 31%);--sapphire-global-color-red-200: hsl(353, 50%, 26%);--sapphire-global-color-red-150: hsl(353, 48%, 21%);--sapphire-global-color-red-125: hsl(354, 44%, 18%);--sapphire-global-color-red-100: hsl(355, 43%, 15%);--sapphire-global-color-red-75: hsl(356, 41%, 14%);--sapphire-global-color-red-50: hsl(355, 38%, 12%);--sapphire-global-color-red-25: hsl(0, 33%, 10%);--sapphire-global-color-green-975: hsl(150, 40%, 98%);--sapphire-global-color-green-950: hsl(158, 40%, 96%);--sapphire-global-color-green-925: hsl(162, 33%, 94%);--sapphire-global-color-green-900: hsl(159, 35%, 92%);--sapphire-global-color-green-875: hsl(159, 37%, 88%);--sapphire-global-color-green-850: hsl(159, 36%, 83%);--sapphire-global-color-green-800: hsl(160, 36%, 74%);--sapphire-global-color-green-750: hsl(159, 36%, 66%);--sapphire-global-color-green-700: hsl(159, 36%, 57%);--sapphire-global-color-green-650: hsl(159, 37%, 50%);--sapphire-global-color-green-600: hsl(159, 51%, 42%);--sapphire-global-color-green-550: hsl(159, 71%, 34%);--sapphire-global-color-green-500: hsl(159, 100%, 27%);--sapphire-global-color-green-450: hsl(159, 100%, 24%);--sapphire-global-color-green-400: hsl(159, 100%, 22%);--sapphire-global-color-green-350: hsl(159, 100%, 19%);--sapphire-global-color-green-300: hsl(159, 100%, 17%);--sapphire-global-color-green-250: hsl(159, 100%, 15%);--sapphire-global-color-green-200: hsl(159, 100%, 13%);--sapphire-global-color-green-150: hsl(158, 100%, 10%);--sapphire-global-color-green-125: hsl(159, 100%, 9%);--sapphire-global-color-green-100: hsl(159, 100%, 7%);--sapphire-global-color-green-75: hsl(159, 100%, 7%);--sapphire-global-color-green-50: hsl(159, 100%, 6%);--sapphire-global-color-green-25: hsl(159, 100%, 5%);--sapphire-global-color-blue-975: hsl(204, 56%, 98%);--sapphire-global-color-blue-950: hsl(202, 65%, 97%);--sapphire-global-color-blue-925: hsl(206, 67%, 95%);--sapphire-global-color-blue-900: hsl(203, 64%, 94%);--sapphire-global-color-blue-875: hsl(204, 65%, 90%);--sapphire-global-color-blue-850: hsl(203, 64%, 86%);--sapphire-global-color-blue-800: hsl(203, 65%, 79%);--sapphire-global-color-blue-750: hsl(203, 64%, 72%);--sapphire-global-color-blue-700: hsl(203, 70%, 65%);--sapphire-global-color-blue-650: hsl(203, 75%, 57%);--sapphire-global-color-blue-600: hsl(203, 80%, 50%);--sapphire-global-color-blue-550: hsl(203, 90%, 44%);--sapphire-global-color-blue-500: hsl(203, 100%, 39%);--sapphire-global-color-blue-450: hsl(203, 100%, 35%);--sapphire-global-color-blue-400: hsl(203, 100%, 32%);--sapphire-global-color-blue-350: hsl(203, 100%, 29%);--sapphire-global-color-blue-300: hsl(203, 100%, 25%);--sapphire-global-color-blue-250: hsl(202, 100%, 22%);--sapphire-global-color-blue-200: hsl(203, 100%, 19%);--sapphire-global-color-blue-150: hsl(203, 100%, 15%);--sapphire-global-color-blue-125: hsl(203, 100%, 13%);--sapphire-global-color-blue-100: hsl(202, 100%, 11%);--sapphire-global-color-blue-75: hsl(203, 100%, 10%);--sapphire-global-color-blue-50: hsl(203, 100%, 9%);--sapphire-global-color-blue-25: hsl(202, 100%, 7%);--sapphire-global-color-sapphire-900-70p: hsla(210, 24%, 93%, .3);--sapphire-global-color-sapphire-900-4p: hsla(202, 100%, 11%, .04);--sapphire-global-color-sapphire-975: hsl(220, 33%, 98%);--sapphire-global-color-sapphire-950: hsl(216, 29%, 97%);--sapphire-global-color-sapphire-925: hsl(210, 23%, 95%);--sapphire-global-color-sapphire-900: hsl(210, 24%, 93%);--sapphire-global-color-sapphire-875: hsl(210, 19%, 90%);--sapphire-global-color-sapphire-850: hsl(208, 18%, 86%);--sapphire-global-color-sapphire-800: hsl(208, 18%, 79%);--sapphire-global-color-sapphire-750: hsl(207, 16%, 73%);--sapphire-global-color-sapphire-700: hsl(209, 17%, 66%);--sapphire-global-color-sapphire-650: hsl(206, 16%, 61%);--sapphire-global-color-sapphire-600: hsl(206, 15%, 56%);--sapphire-global-color-sapphire-550: hsl(206, 16%, 50%);--sapphire-global-color-sapphire-500: hsl(205, 16%, 46%);--sapphire-global-color-sapphire-450: hsl(205, 19%, 41%);--sapphire-global-color-sapphire-400: hsl(205, 23%, 37%);--sapphire-global-color-sapphire-350: hsl(203, 27%, 33%);--sapphire-global-color-sapphire-300: hsl(204, 32%, 29%);--sapphire-global-color-sapphire-250: hsl(204, 41%, 25%);--sapphire-global-color-sapphire-200: hsl(203, 50%, 21%);--sapphire-global-color-sapphire-150: hsl(202, 68%, 16%);--sapphire-global-color-sapphire-125: hsl(201, 82%, 13%);--sapphire-global-color-sapphire-100: hsl(202, 100%, 11%);--sapphire-global-color-sapphire-75: hsl(202, 100%, 10%);--sapphire-global-color-sapphire-50: hsl(203, 100%, 9%);--sapphire-global-color-sapphire-25: hsl(202, 100%, 7%);--sapphire-global-color-neutral-transparent: hsla(0, 0%, 100%, 0);--sapphire-global-color-neutral-black: hsl(0, 0%, 0%);--sapphire-global-color-neutral-white: hsl(0, 0%, 100%);--sapphire-semantic-time-motion-quick: var(--sapphire-global-time-100);--sapphire-semantic-time-motion-default: var(--sapphire-global-time-200);--sapphire-semantic-time-motion-slow: var(--sapphire-global-time-400);--sapphire-semantic-time-motion-very-slow: var(--sapphire-global-time-1000);--sapphire-semantic-time-fade-slow: var(--sapphire-global-time-1800);--sapphire-semantic-time-fade-quick: var(--sapphire-global-time-100);--sapphire-semantic-time-fade-default: var(--sapphire-global-time-200);--sapphire-semantic-size-spacing-80: var(--sapphire-global-size-generic-160);--sapphire-semantic-size-spacing-70: var(--sapphire-global-size-generic-100);--sapphire-semantic-size-spacing-60: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-spacing-50: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-spacing-40: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-spacing-30: var(--sapphire-global-size-generic-30);--sapphire-semantic-size-spacing-25: var(--sapphire-global-size-generic-25);--sapphire-semantic-size-spacing-20: var(--sapphire-global-size-generic-20);--sapphire-semantic-size-spacing-10: var(--sapphire-global-size-generic-10);--sapphire-semantic-size-spacing-5: var(--sapphire-global-size-generic-5);--sapphire-semantic-size-line-height-md: var(--sapphire-global-size-line-height-md);--sapphire-semantic-size-line-height-sm: var(--sapphire-global-size-line-height-sm);--sapphire-semantic-size-font-control-default: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-control-md: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-control-sm: var(--sapphire-global-size-font-75);--sapphire-semantic-size-font-label-lg: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-label-md: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-label-sm: var(--sapphire-global-size-font-75);--sapphire-semantic-size-font-text-lg: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-text-md: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-text-sm: var(--sapphire-global-size-font-75);--sapphire-semantic-size-radius-xl: var(--sapphire-global-size-static-60);--sapphire-semantic-size-radius-lg: var(--sapphire-global-size-static-30);--sapphire-semantic-size-radius-md: var(--sapphire-global-size-static-20);--sapphire-semantic-size-radius-sm: var(--sapphire-global-size-static-10);--sapphire-semantic-size-radius-xs: var(--sapphire-global-size-static-5);--sapphire-semantic-size-border-lg: var(--sapphire-global-size-static-10);--sapphire-semantic-size-border-md: var(--sapphire-global-size-static-5);--sapphire-semantic-size-border-sm: var(--sapphire-global-size-static-2);--sapphire-semantic-size-icon-xl: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-icon-lg: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-icon-md: var(--sapphire-global-size-generic-50);--sapphire-semantic-size-icon-sm: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-width-control-default: var(--sapphire-global-size-generic-750);--sapphire-semantic-size-height-box-md: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-height-control-xl: var(--sapphire-global-size-generic-140);--sapphire-semantic-size-height-control-lg: var(--sapphire-global-size-generic-120);--sapphire-semantic-size-height-control-md: var(--sapphire-global-size-generic-100);--sapphire-semantic-size-height-control-sm: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-height-control-xs: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-height-control-2xs: var(--sapphire-global-size-generic-50);--sapphire-semantic-shadow-popover: var(--sapphire-global-shadow-md);--sapphire-semantic-opacity-disabled: var(--sapphire-global-opacity-40);--sapphire-semantic-opacity-50: var(--sapphire-global-opacity-50);--sapphire-semantic-font-name-display: var(--sapphire-global-font-danske-human-name);--sapphire-semantic-font-name-default: var(--sapphire-global-font-danske-text-name);--sapphire-semantic-color-content-decorative-orange-secondary-default: var(--sapphire-global-color-secondary-orange-600);--sapphire-semantic-color-content-decorative-orange-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-teal-secondary-default: var(--sapphire-global-color-secondary-teal-600);--sapphire-semantic-color-content-decorative-teal-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-forest-green-secondary-default: var(--sapphire-global-color-secondary-forest-green-600);--sapphire-semantic-color-content-decorative-forest-green-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-cobalt-secondary-default: var(--sapphire-global-color-secondary-cobalt-600);--sapphire-semantic-color-content-decorative-cobalt-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-gray-secondary-default: var(--sapphire-global-color-secondary-gray-600);--sapphire-semantic-color-content-decorative-gray-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-orchid-secondary-default: var(--sapphire-global-color-secondary-orchid-600);--sapphire-semantic-color-content-decorative-orchid-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-beige-secondary-default: var(--sapphire-global-color-secondary-beige-600);--sapphire-semantic-color-content-decorative-beige-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-gold-secondary-default: var(--sapphire-global-color-secondary-gold-600);--sapphire-semantic-color-content-decorative-gold-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-violet-secondary-default: var(--sapphire-global-color-secondary-violet-600);--sapphire-semantic-color-content-decorative-violet-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-pink-secondary-default: var(--sapphire-global-color-secondary-pink-600);--sapphire-semantic-color-content-decorative-pink-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-lime-secondary-default: var(--sapphire-global-color-secondary-lime-600);--sapphire-semantic-color-content-decorative-lime-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-indigo-secondary-default: var(--sapphire-global-color-secondary-indigo-600);--sapphire-semantic-color-content-decorative-indigo-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-electro-secondary-default: var(--sapphire-global-color-secondary-electro-600);--sapphire-semantic-color-content-decorative-electro-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-copper-secondary-default: var(--sapphire-global-color-secondary-copper-600);--sapphire-semantic-color-content-decorative-copper-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-aqua-secondary-default: var(--sapphire-global-color-secondary-aqua-600);--sapphire-semantic-color-content-decorative-aqua-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-passive-secondary-default: var(--sapphire-global-color-sapphire-550);--sapphire-semantic-color-content-passive-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-informative-secondary-default: var(--sapphire-global-color-blue-550);--sapphire-semantic-color-content-informative-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-warning-secondary-default: var(--sapphire-global-color-yellow-700);--sapphire-semantic-color-content-negative-secondary-active: var(--sapphire-global-color-red-700);--sapphire-semantic-color-content-negative-secondary-hover: var(--sapphire-global-color-red-600);--sapphire-semantic-color-content-negative-secondary-default: var(--sapphire-global-color-red-550);--sapphire-semantic-color-content-negative-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-positive-secondary-default: var(--sapphire-global-color-green-550);--sapphire-semantic-color-content-positive-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-selection-unselected-active: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-selection-unselected-hover: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-selection-unselected-default: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-selection-selected-active: var(--sapphire-global-color-blue-700);--sapphire-semantic-color-content-selection-selected-hover: var(--sapphire-global-color-blue-600);--sapphire-semantic-color-content-selection-selected-default: var(--sapphire-global-color-blue-550);--sapphire-semantic-color-content-action-tertiary-active: var(--sapphire-global-color-sapphire-975);--sapphire-semantic-color-content-action-tertiary-hover: var(--sapphire-global-color-sapphire-950);--sapphire-semantic-color-content-action-tertiary-default: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-action-secondary-active: var(--sapphire-global-color-blue-700);--sapphire-semantic-color-content-action-secondary-hover: var(--sapphire-global-color-blue-600);--sapphire-semantic-color-content-action-secondary-default: var(--sapphire-global-color-blue-550);--sapphire-semantic-color-content-action-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-default-secondary: var(--sapphire-global-color-sapphire-600);--sapphire-semantic-color-content-default-primary: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-focus-ring: var(--sapphire-global-color-blue-400);--sapphire-semantic-color-border-decorative-orange-secondary-default: var(--sapphire-global-color-secondary-orange-200);--sapphire-semantic-color-border-decorative-teal-secondary-default: var(--sapphire-global-color-secondary-teal-200);--sapphire-semantic-color-border-decorative-forest-green-secondary-default: var(--sapphire-global-color-secondary-forest-green-200);--sapphire-semantic-color-border-decorative-cobalt-secondary-default: var(--sapphire-global-color-secondary-cobalt-200);--sapphire-semantic-color-border-decorative-gray-secondary-default: var(--sapphire-global-color-secondary-gray-200);--sapphire-semantic-color-border-decorative-orchid-secondary-default: var(--sapphire-global-color-secondary-orchid-200);--sapphire-semantic-color-border-decorative-beige-secondary-default: var(--sapphire-global-color-secondary-beige-200);--sapphire-semantic-color-border-decorative-gold-secondary-default: var(--sapphire-global-color-secondary-gold-200);--sapphire-semantic-color-border-decorative-violet-secondary-default: var(--sapphire-global-color-secondary-violet-200);--sapphire-semantic-color-border-decorative-pink-secondary-default: var(--sapphire-global-color-secondary-pink-200);--sapphire-semantic-color-border-decorative-lime-secondary-default: var(--sapphire-global-color-secondary-lime-200);--sapphire-semantic-color-border-decorative-indigo-secondary-default: var(--sapphire-global-color-secondary-indigo-200);--sapphire-semantic-color-border-decorative-electro-secondary-default: var(--sapphire-global-color-secondary-electro-200);--sapphire-semantic-color-border-decorative-copper-secondary-default: var(--sapphire-global-color-secondary-copper-200);--sapphire-semantic-color-border-decorative-aqua-secondary-default: var(--sapphire-global-color-secondary-aqua-200);--sapphire-semantic-color-border-informative-secondary-default: var(--sapphire-global-color-blue-200);--sapphire-semantic-color-border-warning-secondary-default: var(--sapphire-global-color-yellow-300);--sapphire-semantic-color-border-positive-secondary-default: var(--sapphire-global-color-green-200);--sapphire-semantic-color-border-negative-secondary-default: var(--sapphire-global-color-red-200);--sapphire-semantic-color-border-field-error: var(--sapphire-global-color-red-500);--sapphire-semantic-color-border-tertiary-default: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-border-secondary-default: var(--sapphire-global-color-sapphire-150);--sapphire-semantic-color-border-primary-active: var(--sapphire-global-color-sapphire-300);--sapphire-semantic-color-border-primary-hover: var(--sapphire-global-color-sapphire-250);--sapphire-semantic-color-border-primary-default: var(--sapphire-global-color-sapphire-200);--sapphire-semantic-color-background-skeleton-default: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-popover-default: var(--sapphire-global-color-sapphire-25);--sapphire-semantic-color-background-backdrop: var(--sapphire-global-color-sapphire-900-70p);--sapphire-semantic-color-background-surface: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-control-special-secondary-default: var(--sapphire-global-color-sapphire-200);--sapphire-semantic-color-background-control-special-primary-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-control-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-field-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-decorative-orange-secondary-default: var(--sapphire-global-color-secondary-orange-50);--sapphire-semantic-color-background-decorative-orange-primary-default: var(--sapphire-global-color-secondary-orange-400);--sapphire-semantic-color-background-decorative-teal-secondary-default: var(--sapphire-global-color-secondary-teal-50);--sapphire-semantic-color-background-decorative-teal-primary-default: var(--sapphire-global-color-secondary-teal-500);--sapphire-semantic-color-background-decorative-forest-green-secondary-default: var(--sapphire-global-color-secondary-forest-green-50);--sapphire-semantic-color-background-decorative-forest-green-primary-default: var(--sapphire-global-color-secondary-forest-green-500);--sapphire-semantic-color-background-decorative-cobalt-secondary-default: var(--sapphire-global-color-secondary-cobalt-50);--sapphire-semantic-color-background-decorative-cobalt-primary-default: var(--sapphire-global-color-secondary-cobalt-500);--sapphire-semantic-color-background-decorative-gray-secondary-default: var(--sapphire-global-color-secondary-gray-50);--sapphire-semantic-color-background-decorative-gray-primary-default: var(--sapphire-global-color-secondary-gray-500);--sapphire-semantic-color-background-decorative-orchid-secondary-default: var(--sapphire-global-color-secondary-orchid-50);--sapphire-semantic-color-background-decorative-orchid-primary-default: var(--sapphire-global-color-secondary-orchid-500);--sapphire-semantic-color-background-decorative-beige-secondary-default: var(--sapphire-global-color-secondary-beige-50);--sapphire-semantic-color-background-decorative-beige-primary-default: var(--sapphire-global-color-secondary-beige-500);--sapphire-semantic-color-background-decorative-gold-secondary-default: var(--sapphire-global-color-secondary-gold-50);--sapphire-semantic-color-background-decorative-gold-primary-default: var(--sapphire-global-color-secondary-gold-500);--sapphire-semantic-color-background-decorative-violet-secondary-default: var(--sapphire-global-color-secondary-violet-100);--sapphire-semantic-color-background-decorative-violet-primary-default: var(--sapphire-global-color-secondary-violet-500);--sapphire-semantic-color-background-decorative-pink-secondary-default: var(--sapphire-global-color-secondary-pink-100);--sapphire-semantic-color-background-decorative-pink-primary-default: var(--sapphire-global-color-secondary-pink-500);--sapphire-semantic-color-background-decorative-lime-secondary-default: var(--sapphire-global-color-secondary-lime-100);--sapphire-semantic-color-background-decorative-lime-primary-default: var(--sapphire-global-color-secondary-lime-500);--sapphire-semantic-color-background-decorative-indigo-secondary-default: var(--sapphire-global-color-secondary-indigo-100);--sapphire-semantic-color-background-decorative-indigo-primary-default: var(--sapphire-global-color-secondary-indigo-500);--sapphire-semantic-color-background-decorative-electro-secondary-default: var(--sapphire-global-color-secondary-electro-100);--sapphire-semantic-color-background-decorative-electro-primary-default: var(--sapphire-global-color-secondary-electro-500);--sapphire-semantic-color-background-decorative-copper-secondary-default: var(--sapphire-global-color-secondary-copper-100);--sapphire-semantic-color-background-decorative-copper-primary-default: var(--sapphire-global-color-secondary-copper-500);--sapphire-semantic-color-background-decorative-aqua-secondary-default: var(--sapphire-global-color-secondary-aqua-100);--sapphire-semantic-color-background-decorative-aqua-primary-default: var(--sapphire-global-color-secondary-aqua-500);--sapphire-semantic-color-background-passive-secondary-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-passive-primary-default: var(--sapphire-global-color-sapphire-450);--sapphire-semantic-color-background-informative-secondary-default: var(--sapphire-global-color-blue-50);--sapphire-semantic-color-background-informative-primary-default: var(--sapphire-global-color-blue-500);--sapphire-semantic-color-background-warning-secondary-default: var(--sapphire-global-color-yellow-75);--sapphire-semantic-color-background-warning-primary-default: var(--sapphire-global-color-yellow-300);--sapphire-semantic-color-background-positive-secondary-default: var(--sapphire-global-color-green-50);--sapphire-semantic-color-background-positive-primary-default: var(--sapphire-global-color-green-500);--sapphire-semantic-color-background-negative-secondary-active: var(--sapphire-global-color-red-100);--sapphire-semantic-color-background-negative-secondary-hover: var(--sapphire-global-color-red-75);--sapphire-semantic-color-background-negative-secondary-default: var(--sapphire-global-color-red-50);--sapphire-semantic-color-background-negative-primary-active: var(--sapphire-global-color-red-650);--sapphire-semantic-color-background-negative-primary-hover: var(--sapphire-global-color-red-600);--sapphire-semantic-color-background-negative-primary-default: var(--sapphire-global-color-red-500);--sapphire-semantic-color-background-selection-unselected-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-selection-unselected-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-selection-unselected-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-selection-selected-active: var(--sapphire-global-color-blue-100);--sapphire-semantic-color-background-selection-selected-hover: var(--sapphire-global-color-blue-75);--sapphire-semantic-color-background-selection-selected-default: var(--sapphire-global-color-blue-50);--sapphire-semantic-color-background-action-danger-text: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-danger-ghost-default: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-tertiary-text: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-tertiary-ghost-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-tertiary-ghost-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-tertiary-ghost-default: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-tertiary-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-tertiary-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-tertiary-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-action-secondary-text: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-secondary-ghost-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-secondary-ghost-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-secondary-ghost-default: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-secondary-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-secondary-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-secondary-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-action-primary-active: var(--sapphire-global-color-blue-650);--sapphire-semantic-color-background-action-primary-hover: var(--sapphire-global-color-blue-600);--sapphire-semantic-color-background-action-primary-default: var(--sapphire-global-color-blue-500);--sapphire-semantic-size-spacing-container-horizontal-md: var(--sapphire-semantic-size-spacing-60);--sapphire-semantic-size-spacing-data-collection-item-horizontal-lg: var(--sapphire-semantic-size-spacing-40);--sapphire-semantic-size-spacing-data-collection-item-horizontal-md: var(--sapphire-semantic-size-spacing-30);--sapphire-semantic-size-spacing-data-collection-item-horizontal-sm: var(--sapphire-semantic-size-spacing-20);--sapphire-semantic-size-spacing-control-horizontal-lg: var(--sapphire-semantic-size-spacing-30);--sapphire-semantic-size-spacing-control-horizontal-md: var(--sapphire-semantic-size-spacing-25);--sapphire-semantic-size-spacing-control-vertical-lg: var(--sapphire-semantic-size-spacing-30);--sapphire-semantic-size-spacing-control-vertical-md: var(--sapphire-semantic-size-spacing-25);--sapphire-semantic-size-spacing-control-vertical-sm: var(--sapphire-semantic-size-spacing-10);--sapphire-semantic-size-radius-popover: var(--sapphire-semantic-size-radius-md);--sapphire-semantic-size-focus-ring: var(--sapphire-semantic-size-border-md);--sapphire-semantic-size-height-box-lg: var(--sapphire-semantic-size-height-control-2xs);--sapphire-semantic-size-height-input-md: var(--sapphire-semantic-size-height-control-md);--sapphire-semantic-size-height-input-lg: var(--sapphire-semantic-size-height-control-lg);--sapphire-semantic-color-cursor-default: var(--sapphire-semantic-color-background-action-primary-default);--sapphire-semantic-color-content-warning-primary-default: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-link-secondary-active: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-link-secondary-hover: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-link-secondary-default: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-link-primary-active: var(--sapphire-semantic-color-content-action-secondary-active);--sapphire-semantic-color-content-link-primary-hover: var(--sapphire-semantic-color-content-action-secondary-hover);--sapphire-semantic-color-content-link-primary-default: var(--sapphire-semantic-color-content-action-secondary-default);--sapphire-semantic-color-content-action-danger-active: var(--sapphire-semantic-color-content-negative-secondary-active);--sapphire-semantic-color-content-action-danger-hover: var(--sapphire-semantic-color-content-negative-secondary-hover);--sapphire-semantic-color-content-action-danger-default: var(--sapphire-semantic-color-content-negative-secondary-default);--sapphire-semantic-color-border-passive-secondary-default: var(--sapphire-semantic-color-border-primary-default);--sapphire-semantic-color-border-separator-default: var(--sapphire-semantic-color-border-tertiary-default);--sapphire-semantic-color-border-control-active: var(--sapphire-semantic-color-border-primary-active);--sapphire-semantic-color-border-control-hover: var(--sapphire-semantic-color-border-primary-hover);--sapphire-semantic-color-border-control-default: var(--sapphire-semantic-color-border-primary-default);--sapphire-semantic-color-background-spinner-secondary-default: var(--sapphire-semantic-color-background-action-primary-default);--sapphire-semantic-color-background-spinner-primary-default: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-background-action-danger-ghost-active: var(--sapphire-semantic-color-background-negative-secondary-active);--sapphire-semantic-color-background-action-danger-ghost-hover: var(--sapphire-semantic-color-background-negative-secondary-hover);--sapphire-semantic-color-background-action-danger-active: var(--sapphire-semantic-color-background-negative-secondary-active);--sapphire-semantic-color-background-action-danger-hover: var(--sapphire-semantic-color-background-negative-secondary-hover);--sapphire-semantic-color-background-action-danger-default: var(--sapphire-semantic-color-background-negative-secondary-default);--sapphire-semantic-color-border-field-default: var(--sapphire-semantic-color-border-control-default)}@media screen and (min-width: 768px){.sapphire-theme-default-dark,:host,.sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-semantic-size-width-panel-sm: var(--sapphire-global-size-generic-1120);--sapphire-semantic-size-width-panel-lg: var(--sapphire-global-size-generic-1600)}}@media (prefers-reduced-motion){.sapphire-theme-default-dark,:host,.sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-semantic-time-motion-very-slow: var(--sapphire-global-time-2000);--sapphire-semantic-time-motion-slow: 0s;--sapphire-semantic-time-motion-default: 0s;--sapphire-semantic-time-motion-quick: 0s}}.sapphire-theme-default-dark.sapphire-theme--contrast,.sapphire-theme-default-dark .sapphire-theme--contrast,:host .sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-global-color-sapphire-25: hsl(220, 33%, 98%);--sapphire-global-color-sapphire-50: hsl(216, 29%, 97%);--sapphire-global-color-sapphire-75: hsl(210, 23%, 95%);--sapphire-global-color-sapphire-100: hsl(210, 24%, 93%);--sapphire-global-color-sapphire-125: hsl(210, 19%, 90%);--sapphire-global-color-sapphire-150: hsl(208, 18%, 86%);--sapphire-global-color-sapphire-200: hsl(208, 18%, 79%);--sapphire-global-color-sapphire-250: hsl(207, 16%, 73%);--sapphire-global-color-sapphire-300: hsl(209, 17%, 66%);--sapphire-global-color-sapphire-350: hsl(206, 16%, 61%);--sapphire-global-color-sapphire-400: hsl(206, 15%, 56%);--sapphire-global-color-sapphire-450: hsl(206, 16%, 50%);--sapphire-global-color-sapphire-500: hsl(205, 16%, 46%);--sapphire-global-color-sapphire-550: hsl(205, 19%, 41%);--sapphire-global-color-sapphire-600: hsl(205, 23%, 37%);--sapphire-global-color-sapphire-650: hsl(203, 27%, 33%);--sapphire-global-color-sapphire-700: hsl(204, 32%, 29%);--sapphire-global-color-sapphire-750: hsl(204, 41%, 25%);--sapphire-global-color-sapphire-800: hsl(203, 50%, 21%);--sapphire-global-color-sapphire-850: hsl(202, 68%, 16%);--sapphire-global-color-sapphire-875: hsl(201, 82%, 13%);--sapphire-global-color-sapphire-900: hsl(202, 100%, 11%);--sapphire-global-color-sapphire-925: hsl(202, 100%, 10%);--sapphire-global-color-sapphire-950: hsl(203, 100%, 9%);--sapphire-global-color-sapphire-975: hsl(202, 100%, 7%);--sapphire-global-color-sapphire-900-70p: hsla(202, 100%, 11%, .7);--sapphire-global-color-sapphire-900-4p: hsla(202, 100%, 11%, .04);--sapphire-global-color-blue-25: hsl(204, 56%, 98%);--sapphire-global-color-blue-50: hsl(202, 65%, 97%);--sapphire-global-color-blue-75: hsl(206, 67%, 95%);--sapphire-global-color-blue-100: hsl(203, 64%, 94%);--sapphire-global-color-blue-125: hsl(204, 65%, 90%);--sapphire-global-color-blue-150: hsl(203, 64%, 86%);--sapphire-global-color-blue-200: hsl(203, 65%, 79%);--sapphire-global-color-blue-250: hsl(203, 64%, 72%);--sapphire-global-color-blue-300: hsl(203, 70%, 65%);--sapphire-global-color-blue-350: hsl(203, 75%, 57%);--sapphire-global-color-blue-400: hsl(203, 80%, 50%);--sapphire-global-color-blue-450: hsl(203, 90%, 44%);--sapphire-global-color-blue-500: hsl(203, 100%, 39%);--sapphire-global-color-blue-550: hsl(203, 100%, 35%);--sapphire-global-color-blue-600: hsl(203, 100%, 32%);--sapphire-global-color-blue-650: hsl(203, 100%, 29%);--sapphire-global-color-blue-700: hsl(203, 100%, 25%);--sapphire-global-color-blue-750: hsl(202, 100%, 22%);--sapphire-global-color-blue-800: hsl(203, 100%, 19%);--sapphire-global-color-blue-850: hsl(203, 100%, 15%);--sapphire-global-color-blue-875: hsl(203, 100%, 13%);--sapphire-global-color-blue-900: hsl(202, 100%, 11%);--sapphire-global-color-blue-925: hsl(203, 100%, 10%);--sapphire-global-color-blue-950: hsl(203, 100%, 9%);--sapphire-global-color-blue-975: hsl(202, 100%, 7%);--sapphire-global-color-green-25: hsl(150, 40%, 98%);--sapphire-global-color-green-50: hsl(158, 40%, 96%);--sapphire-global-color-green-75: hsl(162, 33%, 94%);--sapphire-global-color-green-100: hsl(159, 35%, 92%);--sapphire-global-color-green-125: hsl(159, 37%, 88%);--sapphire-global-color-green-150: hsl(159, 36%, 83%);--sapphire-global-color-green-200: hsl(160, 36%, 74%);--sapphire-global-color-green-250: hsl(159, 36%, 66%);--sapphire-global-color-green-300: hsl(159, 36%, 57%);--sapphire-global-color-green-350: hsl(159, 37%, 50%);--sapphire-global-color-green-400: hsl(159, 51%, 42%);--sapphire-global-color-green-450: hsl(159, 71%, 34%);--sapphire-global-color-green-500: hsl(159, 100%, 27%);--sapphire-global-color-green-550: hsl(159, 100%, 24%);--sapphire-global-color-green-600: hsl(159, 100%, 22%);--sapphire-global-color-green-650: hsl(159, 100%, 19%);--sapphire-global-color-green-700: hsl(159, 100%, 17%);--sapphire-global-color-green-750: hsl(159, 100%, 15%);--sapphire-global-color-green-800: hsl(159, 100%, 13%);--sapphire-global-color-green-850: hsl(158, 100%, 10%);--sapphire-global-color-green-875: hsl(159, 100%, 9%);--sapphire-global-color-green-900: hsl(159, 100%, 7%);--sapphire-global-color-green-925: hsl(159, 100%, 7%);--sapphire-global-color-green-950: hsl(159, 100%, 6%);--sapphire-global-color-green-975: hsl(159, 100%, 5%);--sapphire-global-color-red-25: hsl(0, 100%, 99%);--sapphire-global-color-red-50: hsl(355, 100%, 98%);--sapphire-global-color-red-75: hsl(356, 100%, 97%);--sapphire-global-color-red-100: hsl(357, 100%, 96%);--sapphire-global-color-red-125: hsl(358, 100%, 94%);--sapphire-global-color-red-150: hsl(359, 100%, 91%);--sapphire-global-color-red-200: hsl(358, 92%, 86%);--sapphire-global-color-red-250: hsl(357, 88%, 81%);--sapphire-global-color-red-300: hsl(356, 82%, 76%);--sapphire-global-color-red-350: hsl(355, 79%, 71%);--sapphire-global-color-red-400: hsl(353, 75%, 65%);--sapphire-global-color-red-450: hsl(351, 73%, 59%);--sapphire-global-color-red-500: hsl(348, 72%, 53%);--sapphire-global-color-red-550: hsl(349, 61%, 48%);--sapphire-global-color-red-600: hsl(349, 60%, 44%);--sapphire-global-color-red-650: hsl(350, 57%, 39%);--sapphire-global-color-red-700: hsl(351, 55%, 35%);--sapphire-global-color-red-750: hsl(351, 54%, 31%);--sapphire-global-color-red-800: hsl(353, 50%, 26%);--sapphire-global-color-red-850: hsl(353, 48%, 21%);--sapphire-global-color-red-875: hsl(354, 44%, 18%);--sapphire-global-color-red-900: hsl(355, 43%, 15%);--sapphire-global-color-red-925: hsl(356, 41%, 14%);--sapphire-global-color-red-950: hsl(355, 38%, 12%);--sapphire-global-color-red-975: hsl(0, 33%, 10%);--sapphire-global-color-secondary-aqua-50: hsl(193, 47%, 96%);--sapphire-global-color-secondary-aqua-75: hsl(193, 47%, 94%);--sapphire-global-color-secondary-aqua-100: hsl(190, 45%, 92%);--sapphire-global-color-secondary-aqua-150: hsl(192, 47%, 84%);--sapphire-global-color-secondary-aqua-200: hsl(192, 47%, 76%);--sapphire-global-color-secondary-aqua-300: hsl(192, 47%, 60%);--sapphire-global-color-secondary-aqua-400: hsl(192, 55%, 46%);--sapphire-global-color-secondary-aqua-500: hsl(192, 100%, 32%);--sapphire-global-color-secondary-aqua-600: hsl(192, 100%, 26%);--sapphire-global-color-secondary-copper-50: hsl(15, 50%, 97%);--sapphire-global-color-secondary-copper-75: hsl(16, 48%, 95%);--sapphire-global-color-secondary-copper-100: hsl(16, 48%, 94%);--sapphire-global-color-secondary-copper-150: hsl(15, 51%, 87%);--sapphire-global-color-secondary-copper-200: hsl(16, 49%, 81%);--sapphire-global-color-secondary-copper-300: hsl(15, 50%, 69%);--sapphire-global-color-secondary-copper-400: hsl(15, 50%, 59%);--sapphire-global-color-secondary-copper-500: hsl(15, 54%, 48%);--sapphire-global-color-secondary-copper-600: hsl(16, 54%, 39%);--sapphire-global-color-secondary-electro-50: hsl(204, 29%, 97%);--sapphire-global-color-secondary-electro-75: hsl(206, 28%, 95%);--sapphire-global-color-secondary-electro-100: hsl(207, 27%, 94%);--sapphire-global-color-secondary-electro-150: hsl(205, 27%, 86%);--sapphire-global-color-secondary-electro-200: hsl(208, 27%, 80%);--sapphire-global-color-secondary-electro-300: hsl(207, 27%, 67%);--sapphire-global-color-secondary-electro-400: hsl(206, 27%, 56%);--sapphire-global-color-secondary-electro-500: hsl(206, 31%, 46%);--sapphire-global-color-secondary-electro-600: hsl(207, 31%, 38%);--sapphire-global-color-secondary-indigo-50: hsl(229, 100%, 98%);--sapphire-global-color-secondary-indigo-75: hsl(229, 100%, 97%);--sapphire-global-color-secondary-indigo-100: hsl(231, 100%, 96%);--sapphire-global-color-secondary-indigo-150: hsl(229, 100%, 91%);--sapphire-global-color-secondary-indigo-200: hsl(229, 100%, 87%);--sapphire-global-color-secondary-indigo-300: hsl(230, 100%, 79%);--sapphire-global-color-secondary-indigo-400: hsl(230, 100%, 72%);--sapphire-global-color-secondary-indigo-500: hsl(230, 100%, 64%);--sapphire-global-color-secondary-indigo-600: hsl(230, 62%, 53%);--sapphire-global-color-secondary-lime-50: hsl(70, 27%, 96%);--sapphire-global-color-secondary-lime-75: hsl(66, 29%, 93%);--sapphire-global-color-secondary-lime-100: hsl(69, 29%, 91%);--sapphire-global-color-secondary-lime-150: hsl(71, 30%, 82%);--sapphire-global-color-secondary-lime-200: hsl(70, 29%, 73%);--sapphire-global-color-secondary-lime-300: hsl(72, 30%, 57%);--sapphire-global-color-secondary-lime-400: hsl(71, 42%, 42%);--sapphire-global-color-secondary-lime-500: hsl(71, 76%, 28%);--sapphire-global-color-secondary-lime-600: hsl(71, 76%, 23%);--sapphire-global-color-secondary-pink-50: hsl(326, 54%, 97%);--sapphire-global-color-secondary-pink-75: hsl(330, 50%, 96%);--sapphire-global-color-secondary-pink-100: hsl(328, 56%, 95%);--sapphire-global-color-secondary-pink-150: hsl(327, 54%, 89%);--sapphire-global-color-secondary-pink-200: hsl(327, 53%, 83%);--sapphire-global-color-secondary-pink-300: hsl(326, 53%, 73%);--sapphire-global-color-secondary-pink-400: hsl(326, 53%, 63%);--sapphire-global-color-secondary-pink-500: hsl(327, 53%, 53%);--sapphire-global-color-secondary-pink-600: hsl(327, 48%, 43%);--sapphire-global-color-secondary-violet-50: hsl(240, 64%, 98%);--sapphire-global-color-secondary-violet-75: hsl(245, 65%, 97%);--sapphire-global-color-secondary-violet-100: hsl(244, 64%, 96%);--sapphire-global-color-secondary-violet-150: hsl(246, 66%, 91%);--sapphire-global-color-secondary-violet-200: hsl(244, 65%, 86%);--sapphire-global-color-secondary-violet-300: hsl(245, 66%, 78%);--sapphire-global-color-secondary-violet-400: hsl(245, 66%, 71%);--sapphire-global-color-secondary-violet-500: hsl(245, 66%, 64%);--sapphire-global-color-secondary-violet-600: hsl(245, 41%, 52%);--sapphire-global-color-secondary-purple-50: hsl(270, 29%, 97%);--sapphire-global-color-secondary-purple-75: hsl(274, 33%, 96%);--sapphire-global-color-secondary-purple-100: hsl(270, 36%, 95%);--sapphire-global-color-secondary-purple-150: hsl(272, 32%, 88%);--sapphire-global-color-secondary-purple-200: hsl(269, 33%, 83%);--sapphire-global-color-secondary-purple-300: hsl(270, 33%, 73%);--sapphire-global-color-secondary-purple-400: hsl(270, 33%, 64%);--sapphire-global-color-secondary-purple-500: hsl(270, 33%, 55%);--sapphire-global-color-secondary-purple-600: hsl(270, 28%, 45%);--sapphire-global-color-secondary-gold-50: hsl(40, 43%, 96%);--sapphire-global-color-secondary-gold-75: hsl(42, 42%, 94%);--sapphire-global-color-secondary-gold-100: hsl(43, 43%, 92%);--sapphire-global-color-secondary-gold-150: hsl(43, 43%, 83%);--sapphire-global-color-secondary-gold-200: hsl(42, 44%, 74%);--sapphire-global-color-secondary-gold-300: hsl(42, 44%, 59%);--sapphire-global-color-secondary-gold-400: hsl(42, 54%, 45%);--sapphire-global-color-secondary-gold-500: hsl(42, 96%, 31%);--sapphire-global-color-secondary-gold-600: hsl(42, 97%, 25%);--sapphire-global-color-secondary-beige-50: hsl(30, 11%, 96%);--sapphire-global-color-secondary-beige-75: hsl(30, 15%, 95%);--sapphire-global-color-secondary-beige-100: hsl(40, 17%, 93%);--sapphire-global-color-secondary-beige-150: hsl(40, 16%, 85%);--sapphire-global-color-secondary-beige-200: hsl(41, 14%, 78%);--sapphire-global-color-secondary-beige-300: hsl(39, 16%, 65%);--sapphire-global-color-secondary-beige-400: hsl(38, 15%, 54%);--sapphire-global-color-secondary-beige-500: hsl(40, 20%, 43%);--sapphire-global-color-secondary-beige-600: hsl(38, 20%, 35%);--sapphire-global-color-secondary-orchid-50: hsl(300, 33%, 97%);--sapphire-global-color-secondary-orchid-75: hsl(300, 36%, 96%);--sapphire-global-color-secondary-orchid-100: hsl(305, 38%, 94%);--sapphire-global-color-secondary-orchid-150: hsl(305, 38%, 88%);--sapphire-global-color-secondary-orchid-200: hsl(304, 37%, 82%);--sapphire-global-color-secondary-orchid-300: hsl(303, 37%, 71%);--sapphire-global-color-secondary-orchid-400: hsl(304, 37%, 61%);--sapphire-global-color-secondary-orchid-500: hsl(304, 37%, 51%);--sapphire-global-color-secondary-orchid-600: hsl(304, 36%, 42%);--sapphire-global-color-secondary-gray-50: hsl(180, 6%, 97%);--sapphire-global-color-secondary-gray-75: hsl(240, 4%, 95%);--sapphire-global-color-secondary-gray-100: hsl(210, 6%, 93%);--sapphire-global-color-secondary-gray-150: hsl(195, 6%, 86%);--sapphire-global-color-secondary-gray-200: hsl(200, 6%, 79%);--sapphire-global-color-secondary-gray-300: hsl(203, 5%, 67%);--sapphire-global-color-secondary-gray-400: hsl(200, 5%, 56%);--sapphire-global-color-secondary-gray-500: hsl(201, 6%, 46%);--sapphire-global-color-secondary-gray-600: hsl(202, 6%, 38%);--sapphire-global-color-secondary-cobalt-50: hsl(215, 86%, 97%);--sapphire-global-color-secondary-cobalt-75: hsl(215, 90%, 96%);--sapphire-global-color-secondary-cobalt-100: hsl(216, 93%, 95%);--sapphire-global-color-secondary-cobalt-150: hsl(216, 93%, 89%);--sapphire-global-color-secondary-cobalt-200: hsl(215, 91%, 83%);--sapphire-global-color-secondary-cobalt-300: hsl(215, 92%, 72%);--sapphire-global-color-secondary-cobalt-400: hsl(215, 92%, 62%);--sapphire-global-color-secondary-cobalt-500: hsl(215, 92%, 51%);--sapphire-global-color-secondary-cobalt-600: hsl(215, 87%, 42%);--sapphire-global-color-secondary-forest-green-50: hsl(111, 33%, 96%);--sapphire-global-color-secondary-forest-green-75: hsl(109, 35%, 94%);--sapphire-global-color-secondary-forest-green-100: hsl(104, 35%, 92%);--sapphire-global-color-secondary-forest-green-150: hsl(105, 36%, 82%);--sapphire-global-color-secondary-forest-green-200: hsl(105, 36%, 74%);--sapphire-global-color-secondary-forest-green-300: hsl(105, 36%, 58%);--sapphire-global-color-secondary-forest-green-400: hsl(105, 48%, 43%);--sapphire-global-color-secondary-forest-green-500: hsl(105, 93%, 28%);--sapphire-global-color-secondary-forest-green-600: hsl(105, 93%, 23%);--sapphire-global-color-secondary-teal-50: hsl(171, 33%, 96%);--sapphire-global-color-secondary-teal-75: hsl(170, 38%, 94%);--sapphire-global-color-secondary-teal-100: hsl(172, 35%, 92%);--sapphire-global-color-secondary-teal-150: hsl(171, 36%, 82%);--sapphire-global-color-secondary-teal-200: hsl(171, 36%, 74%);--sapphire-global-color-secondary-teal-300: hsl(172, 36%, 57%);--sapphire-global-color-secondary-teal-400: hsl(172, 50%, 42%);--sapphire-global-color-secondary-teal-500: hsl(171, 100%, 26%);--sapphire-global-color-secondary-teal-600: hsl(171, 100%, 22%);--sapphire-global-color-secondary-orange-50: hsl(28, 89%, 96%);--sapphire-global-color-secondary-orange-75: hsl(27, 85%, 95%);--sapphire-global-color-secondary-orange-100: hsl(26, 89%, 93%);--sapphire-global-color-secondary-orange-150: hsl(25, 84%, 86%);--sapphire-global-color-secondary-orange-200: hsl(23, 83%, 79%);--sapphire-global-color-secondary-orange-300: hsl(21, 84%, 66%);--sapphire-global-color-secondary-orange-400: hsl(19, 84%, 54%);--sapphire-global-color-secondary-orange-500: hsl(17, 100%, 43%);--sapphire-global-color-secondary-orange-600: hsl(19, 100%, 34%);--sapphire-global-color-neutral-white: hsl(0, 0%, 100%);--sapphire-global-color-neutral-black: hsl(0, 0%, 0%);--sapphire-global-color-neutral-transparent: hsla(0, 0%, 100%, 0);--sapphire-global-color-yellow-25: hsl(54, 100%, 98%);--sapphire-global-color-yellow-50: hsl(51, 100%, 96%);--sapphire-global-color-yellow-75: hsl(49, 100%, 92%);--sapphire-global-color-yellow-100: hsl(48, 100%, 89%);--sapphire-global-color-yellow-125: hsl(49, 97%, 85%);--sapphire-global-color-yellow-150: hsl(48, 98%, 79%);--sapphire-global-color-yellow-200: hsl(48, 98%, 76%);--sapphire-global-color-yellow-250: hsl(47, 97%, 70%);--sapphire-global-color-yellow-300: hsl(46, 98%, 64%);--sapphire-global-color-yellow-350: hsl(44, 98%, 60%);--sapphire-global-color-yellow-400: hsl(43, 98%, 55%);--sapphire-global-color-yellow-450: hsl(40, 95%, 54%);--sapphire-global-color-yellow-500: hsl(37, 95%, 52%);--sapphire-global-color-yellow-550: hsl(34, 94%, 48%);--sapphire-global-color-yellow-600: hsl(31, 93%, 44%);--sapphire-global-color-yellow-650: hsl(28, 94%, 41%);--sapphire-global-color-yellow-700: hsl(25, 93%, 37%);--sapphire-global-color-yellow-750: hsl(24, 89%, 33%);--sapphire-global-color-yellow-800: hsl(22, 88%, 29%);--sapphire-global-color-yellow-850: hsl(22, 85%, 27%);--sapphire-global-color-yellow-875: hsl(21, 86%, 23%);--sapphire-global-color-yellow-900: hsl(21, 88%, 19%);--sapphire-global-color-yellow-925: hsl(21, 87%, 15%);--sapphire-global-color-yellow-950: hsl(19, 89%, 11%);--sapphire-global-color-yellow-975: hsl(20, 95%, 8%);--sapphire-global-font-danske-text-name: \"Danske Text v2\";--sapphire-global-font-danske-human-name: \"Danske Human\";--sapphire-global-opacity-35: .35;--sapphire-global-opacity-40: .4;--sapphire-global-opacity-50: .5;--sapphire-global-shadow-sm: 0px 0px 2px 0px rgba(34, 64, 82, .06), 0px 1.5px 4px 0px rgba(34, 64, 82, .04), 0px 4.5px 6px 0px rgba(34, 64, 82, .04), 0px 10.5px 12px 0px rgba(34, 64, 82, .03), 0px 25px 24px 0px rgba(34, 64, 82, .02), 0px 100px 64px 0px rgba(34, 64, 82, .02), 0px 0px 2px 0px rgba(34, 64, 82, .05), 0px 0px 1px 0px rgba(34, 64, 82, .2);--sapphire-global-shadow-md: 0px 0px 3px 0px rgba(34, 64, 82, .02), 0px 3px 7px 0px rgba(34, 64, 82, .03), 0px 6.5px 14px 0px rgba(34, 64, 82, .04), 0px 13px 29px 0px rgba(34, 64, 82, .05), 0px 36px 80px 0px rgba(34, 64, 82, .07), 0px 0px 2px 0px rgba(34, 64, 82, .05), 0px 0px 1px 0px rgba(34, 64, 82, .2);--sapphire-global-shadow-lg: 0px 0px 2px 0px rgba(34, 64, 82, .02), 0px -1.5px 6px 0px rgba(34, 64, 82, .03), 0px 4.5px 12px 0px rgba(34, 64, 82, .04), 0px 14.5px 18px 0px rgba(34, 64, 82, .04), 0px 26px 34px 0px rgba(34, 64, 82, .05), 0px 84px 92px 0px rgba(34, 64, 82, .07), 0px 0px 2px 0px rgba(34, 64, 82, .05), 0px 0px 1px 0px rgba(34, 64, 82, .2);--sapphire-global-size-static-0: 0px;--sapphire-global-size-static-2: 1px;--sapphire-global-size-static-5: 2px;--sapphire-global-size-static-10: 4px;--sapphire-global-size-static-20: 8px;--sapphire-global-size-static-30: 12px;--sapphire-global-size-static-60: 24px;--sapphire-global-size-generic-0: 0rem;--sapphire-global-size-generic-2: .0625rem;--sapphire-global-size-generic-5: .125rem;--sapphire-global-size-generic-10: .25rem;--sapphire-global-size-generic-15: .375rem;--sapphire-global-size-generic-20: .5rem;--sapphire-global-size-generic-25: .625rem;--sapphire-global-size-generic-30: .75rem;--sapphire-global-size-generic-35: .875rem;--sapphire-global-size-generic-40: 1rem;--sapphire-global-size-generic-50: 1.25rem;--sapphire-global-size-generic-60: 1.5rem;--sapphire-global-size-generic-80: 2rem;--sapphire-global-size-generic-100: 2.5rem;--sapphire-global-size-generic-120: 3rem;--sapphire-global-size-generic-140: 3.5rem;--sapphire-global-size-generic-160: 4rem;--sapphire-global-size-generic-180: 4.5rem;--sapphire-global-size-generic-200: 5rem;--sapphire-global-size-generic-240: 6rem;--sapphire-global-size-generic-280: 7rem;--sapphire-global-size-generic-300: 7.5rem;--sapphire-global-size-generic-320: 8rem;--sapphire-global-size-generic-340: 8.5rem;--sapphire-global-size-generic-400: 10rem;--sapphire-global-size-generic-480: 12rem;--sapphire-global-size-generic-560: 14rem;--sapphire-global-size-generic-600: 15rem;--sapphire-global-size-generic-640: 16rem;--sapphire-global-size-generic-750: 18.75rem;--sapphire-global-size-generic-800: 20rem;--sapphire-global-size-generic-900: 22.5rem;--sapphire-global-size-generic-940: 23.5rem;--sapphire-global-size-generic-960: 24rem;--sapphire-global-size-generic-1000: 25rem;--sapphire-global-size-generic-1120: 28rem;--sapphire-global-size-generic-1200: 30rem;--sapphire-global-size-generic-1280: 32rem;--sapphire-global-size-generic-1400: 35rem;--sapphire-global-size-generic-1600: 40rem;--sapphire-global-size-generic-1920: 48rem;--sapphire-global-size-generic-2400: 60rem;--sapphire-global-size-generic-2560: 64rem;--sapphire-global-size-generic-3200: 80rem;--sapphire-global-size-generic-3600: 90rem;--sapphire-global-size-generic-3780: 94.5rem;--sapphire-global-size-generic-4320: 108rem;--sapphire-global-size-font-60: .625rem;--sapphire-global-size-font-75: .75rem;--sapphire-global-size-font-88: .875rem;--sapphire-global-size-font-100: 1rem;--sapphire-global-size-font-106: 1.0625rem;--sapphire-global-size-font-112: 1.125rem;--sapphire-global-size-font-130: 1.3125rem;--sapphire-global-size-font-150: 1.5rem;--sapphire-global-size-font-188: 1.875rem;--sapphire-global-size-font-220: 2.1875rem;--sapphire-global-size-font-300: 3rem;--sapphire-global-size-line-height-sm: 1.2;--sapphire-global-size-line-height-md: 1.5;--sapphire-global-size-ratio-height: .875;--sapphire-global-time-100: .1s;--sapphire-global-time-200: .2s;--sapphire-global-time-400: .4s;--sapphire-global-time-1000: 1s;--sapphire-global-time-1800: 1.8s;--sapphire-global-time-2000: 2s;--sapphire-semantic-color-background-surface: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-background-control-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-background-control-special-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-background-control-special-secondary-default: var(--sapphire-global-color-sapphire-900-4p);--sapphire-semantic-color-background-field-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-background-popover-default: var(--sapphire-semantic-color-background-surface);--sapphire-semantic-color-background-action-primary-default: var(--sapphire-global-color-blue-500);--sapphire-semantic-color-background-action-primary-hover: var(--sapphire-global-color-blue-600);--sapphire-semantic-color-background-action-primary-active: var(--sapphire-global-color-blue-650);--sapphire-semantic-color-background-action-secondary-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-action-secondary-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-secondary-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-secondary-ghost-default: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-secondary-ghost-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-secondary-ghost-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-secondary-text: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-tertiary-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-action-tertiary-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-tertiary-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-tertiary-ghost-default: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-tertiary-ghost-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-action-tertiary-ghost-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-action-tertiary-text: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-danger-default: var(--sapphire-semantic-color-background-negative-secondary-default);--sapphire-semantic-color-background-action-danger-hover: var(--sapphire-semantic-color-background-negative-secondary-hover);--sapphire-semantic-color-background-action-danger-active: var(--sapphire-semantic-color-background-negative-secondary-active);--sapphire-semantic-color-background-action-danger-ghost-default: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-action-danger-ghost-hover: var(--sapphire-semantic-color-background-negative-secondary-hover);--sapphire-semantic-color-background-action-danger-ghost-active: var(--sapphire-semantic-color-background-negative-secondary-active);--sapphire-semantic-color-background-action-danger-text: var(--sapphire-global-color-neutral-transparent);--sapphire-semantic-color-background-selection-selected-default: var(--sapphire-global-color-blue-50);--sapphire-semantic-color-background-selection-selected-hover: var(--sapphire-global-color-blue-75);--sapphire-semantic-color-background-selection-selected-active: var(--sapphire-global-color-blue-100);--sapphire-semantic-color-background-selection-unselected-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-selection-unselected-hover: var(--sapphire-global-color-sapphire-75);--sapphire-semantic-color-background-selection-unselected-active: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-negative-primary-default: var(--sapphire-global-color-red-500);--sapphire-semantic-color-background-negative-primary-hover: var(--sapphire-global-color-red-600);--sapphire-semantic-color-background-negative-primary-active: var(--sapphire-global-color-red-650);--sapphire-semantic-color-background-negative-secondary-default: var(--sapphire-global-color-red-50);--sapphire-semantic-color-background-negative-secondary-hover: var(--sapphire-global-color-red-75);--sapphire-semantic-color-background-negative-secondary-active: var(--sapphire-global-color-red-100);--sapphire-semantic-color-background-positive-primary-default: var(--sapphire-global-color-green-500);--sapphire-semantic-color-background-positive-secondary-default: var(--sapphire-global-color-green-50);--sapphire-semantic-color-background-warning-primary-default: var(--sapphire-global-color-yellow-300);--sapphire-semantic-color-background-warning-secondary-default: var(--sapphire-global-color-yellow-75);--sapphire-semantic-color-background-informative-primary-default: var(--sapphire-global-color-blue-500);--sapphire-semantic-color-background-informative-secondary-default: var(--sapphire-global-color-blue-50);--sapphire-semantic-color-background-passive-primary-default: var(--sapphire-global-color-sapphire-450);--sapphire-semantic-color-background-passive-secondary-default: var(--sapphire-global-color-sapphire-50);--sapphire-semantic-color-background-decorative-aqua-primary-default: var(--sapphire-global-color-secondary-aqua-500);--sapphire-semantic-color-background-decorative-aqua-secondary-default: var(--sapphire-global-color-secondary-aqua-100);--sapphire-semantic-color-background-decorative-copper-primary-default: var(--sapphire-global-color-secondary-copper-500);--sapphire-semantic-color-background-decorative-copper-secondary-default: var(--sapphire-global-color-secondary-copper-100);--sapphire-semantic-color-background-decorative-electro-primary-default: var(--sapphire-global-color-secondary-electro-500);--sapphire-semantic-color-background-decorative-electro-secondary-default: var(--sapphire-global-color-secondary-electro-100);--sapphire-semantic-color-background-decorative-indigo-primary-default: var(--sapphire-global-color-secondary-indigo-500);--sapphire-semantic-color-background-decorative-indigo-secondary-default: var(--sapphire-global-color-secondary-indigo-100);--sapphire-semantic-color-background-decorative-lime-primary-default: var(--sapphire-global-color-secondary-lime-500);--sapphire-semantic-color-background-decorative-lime-secondary-default: var(--sapphire-global-color-secondary-lime-100);--sapphire-semantic-color-background-decorative-pink-primary-default: var(--sapphire-global-color-secondary-pink-500);--sapphire-semantic-color-background-decorative-pink-secondary-default: var(--sapphire-global-color-secondary-pink-100);--sapphire-semantic-color-background-decorative-violet-primary-default: var(--sapphire-global-color-secondary-violet-500);--sapphire-semantic-color-background-decorative-violet-secondary-default: var(--sapphire-global-color-secondary-violet-100);--sapphire-semantic-color-background-decorative-gold-primary-default: var(--sapphire-global-color-secondary-gold-500);--sapphire-semantic-color-background-decorative-gold-secondary-default: var(--sapphire-global-color-secondary-gold-50);--sapphire-semantic-color-background-decorative-beige-primary-default: var(--sapphire-global-color-secondary-beige-500);--sapphire-semantic-color-background-decorative-beige-secondary-default: var(--sapphire-global-color-secondary-beige-50);--sapphire-semantic-color-background-decorative-orchid-primary-default: var(--sapphire-global-color-secondary-orchid-500);--sapphire-semantic-color-background-decorative-orchid-secondary-default: var(--sapphire-global-color-secondary-orchid-50);--sapphire-semantic-color-background-decorative-gray-primary-default: var(--sapphire-global-color-secondary-gray-500);--sapphire-semantic-color-background-decorative-gray-secondary-default: var(--sapphire-global-color-secondary-gray-50);--sapphire-semantic-color-background-decorative-cobalt-primary-default: var(--sapphire-global-color-secondary-cobalt-500);--sapphire-semantic-color-background-decorative-cobalt-secondary-default: var(--sapphire-global-color-secondary-cobalt-50);--sapphire-semantic-color-background-decorative-forest-green-primary-default: var(--sapphire-global-color-secondary-forest-green-500);--sapphire-semantic-color-background-decorative-forest-green-secondary-default: var(--sapphire-global-color-secondary-forest-green-50);--sapphire-semantic-color-background-decorative-teal-primary-default: var(--sapphire-global-color-secondary-teal-500);--sapphire-semantic-color-background-decorative-teal-secondary-default: var(--sapphire-global-color-secondary-teal-50);--sapphire-semantic-color-background-decorative-orange-primary-default: var(--sapphire-global-color-secondary-orange-400);--sapphire-semantic-color-background-decorative-orange-secondary-default: var(--sapphire-global-color-secondary-orange-50);--sapphire-semantic-color-background-backdrop: var(--sapphire-global-color-sapphire-900-70p);--sapphire-semantic-color-background-skeleton-default: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-background-spinner-primary-default: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-background-spinner-secondary-default: var(--sapphire-semantic-color-background-action-primary-default);--sapphire-semantic-color-content-default-primary: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-default-secondary: var(--sapphire-global-color-sapphire-600);--sapphire-semantic-color-content-action-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-action-secondary-default: var(--sapphire-global-color-blue-550);--sapphire-semantic-color-content-action-secondary-hover: var(--sapphire-global-color-blue-600);--sapphire-semantic-color-content-action-secondary-active: var(--sapphire-global-color-blue-700);--sapphire-semantic-color-content-action-danger-default: var(--sapphire-semantic-color-content-negative-secondary-default);--sapphire-semantic-color-content-action-danger-hover: var(--sapphire-semantic-color-content-negative-secondary-hover);--sapphire-semantic-color-content-action-danger-active: var(--sapphire-semantic-color-content-negative-secondary-active);--sapphire-semantic-color-content-action-tertiary-default: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-action-tertiary-hover: var(--sapphire-global-color-sapphire-950);--sapphire-semantic-color-content-action-tertiary-active: var(--sapphire-global-color-sapphire-975);--sapphire-semantic-color-content-selection-selected-default: var(--sapphire-global-color-blue-550);--sapphire-semantic-color-content-selection-selected-hover: var(--sapphire-global-color-blue-600);--sapphire-semantic-color-content-selection-selected-active: var(--sapphire-global-color-blue-700);--sapphire-semantic-color-content-selection-unselected-default: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-selection-unselected-hover: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-selection-unselected-active: var(--sapphire-global-color-sapphire-900);--sapphire-semantic-color-content-link-primary-default: var(--sapphire-semantic-color-content-action-secondary-default);--sapphire-semantic-color-content-link-primary-hover: var(--sapphire-semantic-color-content-action-secondary-hover);--sapphire-semantic-color-content-link-primary-active: var(--sapphire-semantic-color-content-action-secondary-active);--sapphire-semantic-color-content-link-secondary-default: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-link-secondary-hover: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-link-secondary-active: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-positive-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-positive-secondary-default: var(--sapphire-global-color-green-550);--sapphire-semantic-color-content-negative-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-negative-secondary-default: var(--sapphire-global-color-red-550);--sapphire-semantic-color-content-negative-secondary-hover: var(--sapphire-global-color-red-600);--sapphire-semantic-color-content-negative-secondary-active: var(--sapphire-global-color-red-700);--sapphire-semantic-color-content-warning-primary-default: var(--sapphire-semantic-color-content-default-primary);--sapphire-semantic-color-content-warning-secondary-default: var(--sapphire-global-color-yellow-700);--sapphire-semantic-color-content-informative-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-informative-secondary-default: var(--sapphire-global-color-blue-550);--sapphire-semantic-color-content-passive-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-passive-secondary-default: var(--sapphire-global-color-sapphire-550);--sapphire-semantic-color-content-decorative-aqua-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-aqua-secondary-default: var(--sapphire-global-color-secondary-aqua-600);--sapphire-semantic-color-content-decorative-copper-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-copper-secondary-default: var(--sapphire-global-color-secondary-copper-600);--sapphire-semantic-color-content-decorative-electro-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-electro-secondary-default: var(--sapphire-global-color-secondary-electro-600);--sapphire-semantic-color-content-decorative-indigo-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-indigo-secondary-default: var(--sapphire-global-color-secondary-indigo-600);--sapphire-semantic-color-content-decorative-lime-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-lime-secondary-default: var(--sapphire-global-color-secondary-lime-600);--sapphire-semantic-color-content-decorative-pink-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-pink-secondary-default: var(--sapphire-global-color-secondary-pink-600);--sapphire-semantic-color-content-decorative-violet-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-violet-secondary-default: var(--sapphire-global-color-secondary-violet-600);--sapphire-semantic-color-content-decorative-gold-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-gold-secondary-default: var(--sapphire-global-color-secondary-gold-600);--sapphire-semantic-color-content-decorative-beige-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-beige-secondary-default: var(--sapphire-global-color-secondary-beige-600);--sapphire-semantic-color-content-decorative-orchid-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-orchid-secondary-default: var(--sapphire-global-color-secondary-orchid-600);--sapphire-semantic-color-content-decorative-gray-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-gray-secondary-default: var(--sapphire-global-color-secondary-gray-600);--sapphire-semantic-color-content-decorative-cobalt-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-cobalt-secondary-default: var(--sapphire-global-color-secondary-cobalt-600);--sapphire-semantic-color-content-decorative-forest-green-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-forest-green-secondary-default: var(--sapphire-global-color-secondary-forest-green-600);--sapphire-semantic-color-content-decorative-teal-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-teal-secondary-default: var(--sapphire-global-color-secondary-teal-600);--sapphire-semantic-color-content-decorative-orange-primary-default: var(--sapphire-global-color-neutral-white);--sapphire-semantic-color-content-decorative-orange-secondary-default: var(--sapphire-global-color-secondary-orange-600);--sapphire-semantic-color-border-primary-default: var(--sapphire-global-color-sapphire-200);--sapphire-semantic-color-border-primary-hover: var(--sapphire-global-color-sapphire-250);--sapphire-semantic-color-border-primary-active: var(--sapphire-global-color-sapphire-300);--sapphire-semantic-color-border-secondary-default: var(--sapphire-global-color-sapphire-150);--sapphire-semantic-color-border-tertiary-default: var(--sapphire-global-color-sapphire-100);--sapphire-semantic-color-border-field-default: var(--sapphire-semantic-color-border-control-default);--sapphire-semantic-color-border-field-error: var(--sapphire-global-color-red-500);--sapphire-semantic-color-border-control-default: var(--sapphire-semantic-color-border-primary-default);--sapphire-semantic-color-border-control-hover: var(--sapphire-semantic-color-border-primary-hover);--sapphire-semantic-color-border-control-active: var(--sapphire-semantic-color-border-primary-active);--sapphire-semantic-color-border-separator-default: var(--sapphire-semantic-color-border-tertiary-default);--sapphire-semantic-color-border-negative-secondary-default: var(--sapphire-global-color-red-200);--sapphire-semantic-color-border-positive-secondary-default: var(--sapphire-global-color-green-200);--sapphire-semantic-color-border-warning-secondary-default: var(--sapphire-global-color-yellow-300);--sapphire-semantic-color-border-informative-secondary-default: var(--sapphire-global-color-blue-200);--sapphire-semantic-color-border-passive-secondary-default: var(--sapphire-semantic-color-border-primary-default);--sapphire-semantic-color-border-decorative-aqua-secondary-default: var(--sapphire-global-color-secondary-aqua-200);--sapphire-semantic-color-border-decorative-copper-secondary-default: var(--sapphire-global-color-secondary-copper-200);--sapphire-semantic-color-border-decorative-electro-secondary-default: var(--sapphire-global-color-secondary-electro-200);--sapphire-semantic-color-border-decorative-indigo-secondary-default: var(--sapphire-global-color-secondary-indigo-200);--sapphire-semantic-color-border-decorative-lime-secondary-default: var(--sapphire-global-color-secondary-lime-200);--sapphire-semantic-color-border-decorative-pink-secondary-default: var(--sapphire-global-color-secondary-pink-200);--sapphire-semantic-color-border-decorative-violet-secondary-default: var(--sapphire-global-color-secondary-violet-200);--sapphire-semantic-color-border-decorative-gold-secondary-default: var(--sapphire-global-color-secondary-gold-200);--sapphire-semantic-color-border-decorative-beige-secondary-default: var(--sapphire-global-color-secondary-beige-200);--sapphire-semantic-color-border-decorative-orchid-secondary-default: var(--sapphire-global-color-secondary-orchid-200);--sapphire-semantic-color-border-decorative-gray-secondary-default: var(--sapphire-global-color-secondary-gray-200);--sapphire-semantic-color-border-decorative-cobalt-secondary-default: var(--sapphire-global-color-secondary-cobalt-200);--sapphire-semantic-color-border-decorative-forest-green-secondary-default: var(--sapphire-global-color-secondary-forest-green-200);--sapphire-semantic-color-border-decorative-teal-secondary-default: var(--sapphire-global-color-secondary-teal-200);--sapphire-semantic-color-border-decorative-orange-secondary-default: var(--sapphire-global-color-secondary-orange-200);--sapphire-semantic-color-focus-ring: var(--sapphire-global-color-blue-400);--sapphire-semantic-color-cursor-default: var(--sapphire-semantic-color-background-action-primary-default);--sapphire-semantic-font-name-default: var(--sapphire-global-font-danske-text-name);--sapphire-semantic-font-name-display: var(--sapphire-global-font-danske-human-name);--sapphire-semantic-font-weight-default-regular: 400;--sapphire-semantic-font-weight-default-semibold: 600;--sapphire-semantic-font-weight-default-bold: 700;--sapphire-semantic-font-weight-display-regular: 400;--sapphire-semantic-font-weight-display-bold: 700;--sapphire-semantic-opacity-50: var(--sapphire-global-opacity-50);--sapphire-semantic-opacity-disabled: var(--sapphire-global-opacity-40);--sapphire-semantic-shadow-popover: var(--sapphire-global-shadow-md);--sapphire-semantic-size-height-control-2xs: var(--sapphire-global-size-generic-50);--sapphire-semantic-size-height-control-xs: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-height-control-sm: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-height-control-md: var(--sapphire-global-size-generic-100);--sapphire-semantic-size-height-control-lg: var(--sapphire-global-size-generic-120);--sapphire-semantic-size-height-control-xl: var(--sapphire-global-size-generic-140);--sapphire-semantic-size-height-input-lg: var(--sapphire-semantic-size-height-control-lg);--sapphire-semantic-size-height-input-md: var(--sapphire-semantic-size-height-control-md);--sapphire-semantic-size-height-box-md: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-height-box-lg: var(--sapphire-semantic-size-height-control-2xs);--sapphire-semantic-size-width-control-default: var(--sapphire-global-size-generic-750);--sapphire-semantic-size-width-panel-sm: 100%;--sapphire-semantic-size-width-panel-lg: 100%;--sapphire-semantic-size-icon-sm: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-icon-md: var(--sapphire-global-size-generic-50);--sapphire-semantic-size-icon-lg: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-icon-xl: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-border-sm: var(--sapphire-global-size-static-2);--sapphire-semantic-size-border-md: var(--sapphire-global-size-static-5);--sapphire-semantic-size-border-lg: var(--sapphire-global-size-static-10);--sapphire-semantic-size-focus-ring: var(--sapphire-semantic-size-border-md);--sapphire-semantic-size-radius-xs: var(--sapphire-global-size-static-5);--sapphire-semantic-size-radius-sm: var(--sapphire-global-size-static-10);--sapphire-semantic-size-radius-md: var(--sapphire-global-size-static-20);--sapphire-semantic-size-radius-lg: var(--sapphire-global-size-static-30);--sapphire-semantic-size-radius-xl: var(--sapphire-global-size-static-60);--sapphire-semantic-size-radius-popover: var(--sapphire-semantic-size-radius-md);--sapphire-semantic-size-font-text-sm: var(--sapphire-global-size-font-75);--sapphire-semantic-size-font-text-md: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-text-lg: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-label-sm: var(--sapphire-global-size-font-75);--sapphire-semantic-size-font-label-md: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-label-lg: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-control-sm: var(--sapphire-global-size-font-75);--sapphire-semantic-size-font-control-md: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-control-default: var(--sapphire-global-size-font-100);--sapphire-semantic-size-line-height-sm: var(--sapphire-global-size-line-height-sm);--sapphire-semantic-size-line-height-md: var(--sapphire-global-size-line-height-md);--sapphire-semantic-size-spacing-5: var(--sapphire-global-size-generic-5);--sapphire-semantic-size-spacing-10: var(--sapphire-global-size-generic-10);--sapphire-semantic-size-spacing-20: var(--sapphire-global-size-generic-20);--sapphire-semantic-size-spacing-25: var(--sapphire-global-size-generic-25);--sapphire-semantic-size-spacing-30: var(--sapphire-global-size-generic-30);--sapphire-semantic-size-spacing-40: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-spacing-50: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-spacing-60: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-spacing-70: var(--sapphire-global-size-generic-100);--sapphire-semantic-size-spacing-80: var(--sapphire-global-size-generic-160);--sapphire-semantic-size-spacing-control-vertical-sm: var(--sapphire-semantic-size-spacing-10);--sapphire-semantic-size-spacing-control-vertical-md: var(--sapphire-semantic-size-spacing-25);--sapphire-semantic-size-spacing-control-vertical-lg: var(--sapphire-semantic-size-spacing-30);--sapphire-semantic-size-spacing-control-horizontal-md: var(--sapphire-semantic-size-spacing-25);--sapphire-semantic-size-spacing-control-horizontal-lg: var(--sapphire-semantic-size-spacing-30);--sapphire-semantic-size-spacing-data-collection-item-horizontal-sm: var(--sapphire-semantic-size-spacing-20);--sapphire-semantic-size-spacing-data-collection-item-horizontal-md: var(--sapphire-semantic-size-spacing-30);--sapphire-semantic-size-spacing-data-collection-item-horizontal-lg: var(--sapphire-semantic-size-spacing-40);--sapphire-semantic-size-spacing-container-horizontal-md: var(--sapphire-semantic-size-spacing-60);--sapphire-semantic-size-breakpoint-xs: 576px;--sapphire-semantic-size-breakpoint-s: 768px;--sapphire-semantic-size-breakpoint-m: 960px;--sapphire-semantic-size-breakpoint-l: 1200px;--sapphire-semantic-size-breakpoint-xl: 1400px;--sapphire-semantic-time-fade-default: var(--sapphire-global-time-200);--sapphire-semantic-time-fade-quick: var(--sapphire-global-time-100);--sapphire-semantic-time-fade-slow: var(--sapphire-global-time-1800);--sapphire-semantic-time-motion-very-slow: var(--sapphire-global-time-1000);--sapphire-semantic-time-motion-slow: var(--sapphire-global-time-400);--sapphire-semantic-time-motion-default: var(--sapphire-global-time-200);--sapphire-semantic-time-motion-quick: var(--sapphire-global-time-100)}:host ::ng-deep .cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] :host ::ng-deep .cdk-visually-hidden{left:auto;right:0}:host ::ng-deep .cdk-overlay-container,:host ::ng-deep .cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}:host ::ng-deep .cdk-overlay-container{position:fixed;z-index:1000}:host ::ng-deep .cdk-overlay-container:empty{display:none}:host ::ng-deep .cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}:host ::ng-deep .cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}:host ::ng-deep .cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}:host ::ng-deep .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active :host ::ng-deep .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}:host ::ng-deep .cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}:host ::ng-deep .cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}:host ::ng-deep .cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}:host ::ng-deep .cdk-overlay-backdrop-noop-animation{transition:none}:host ::ng-deep .cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}:host ::ng-deep .cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.cdk-overlay-container,:host.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container,:host.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock,::ng-deep .cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}\n"] }]
|
|
6761
|
-
|
|
6762
|
-
|
|
6763
|
-
|
|
6764
|
-
|
|
6765
|
-
|
|
6766
|
-
|
|
6767
|
-
|
|
6768
|
-
|
|
6769
|
-
|
|
6770
|
-
|
|
6771
|
-
|
|
6952
|
+
class SegmentedRadioGroupComponent extends RadioGroupBase {
|
|
6953
|
+
constructor(zone, changeDetector) {
|
|
6954
|
+
super(changeDetector, undefined);
|
|
6955
|
+
this.zone = zone;
|
|
6956
|
+
this.changeDetector = changeDetector;
|
|
6957
|
+
/** Size of tabs */
|
|
6958
|
+
this.size = 'md';
|
|
6959
|
+
/**
|
|
6960
|
+
* Alignment of tabs' buttons group.
|
|
6961
|
+
* @default 'left'
|
|
6962
|
+
*/
|
|
6963
|
+
this.align = 'left';
|
|
6964
|
+
this._gliderStyles = { left: '0px', width: '0px' };
|
|
6965
|
+
this._animationEnabled = false;
|
|
6966
|
+
this._focusVisible = false;
|
|
6967
|
+
this.skipAnimationFrame();
|
|
6968
|
+
}
|
|
6969
|
+
skipAnimationFrame() {
|
|
6970
|
+
// We want to avoid animation on first render and whenever tab content changes
|
|
6971
|
+
this._animationEnabled = false;
|
|
6972
|
+
requestAnimationFrame(() => {
|
|
6973
|
+
this._animationEnabled = true;
|
|
6974
|
+
});
|
|
6975
|
+
}
|
|
6976
|
+
setGliderStyles() {
|
|
6977
|
+
const { offsetLeft, clientWidth } = this.getSelectedTabPosition();
|
|
6978
|
+
this._gliderStyles = {
|
|
6979
|
+
left: `${offsetLeft}px`,
|
|
6980
|
+
width: `${clientWidth}px`,
|
|
6981
|
+
};
|
|
6982
|
+
}
|
|
6983
|
+
getSelectedTabPosition() {
|
|
6984
|
+
const selected = this.selected?.elementRef.nativeElement;
|
|
6985
|
+
return {
|
|
6986
|
+
offsetLeft: selected?.offsetLeft || 0,
|
|
6987
|
+
clientWidth: selected?.clientWidth || 0,
|
|
6988
|
+
};
|
|
6989
|
+
}
|
|
6990
|
+
shouldUpdateGliderStyles() {
|
|
6991
|
+
const { offsetLeft, clientWidth } = this.getSelectedTabPosition();
|
|
6992
|
+
return (`${offsetLeft}px` !== this._gliderStyles.left ||
|
|
6993
|
+
`${clientWidth}px` !== this._gliderStyles.width);
|
|
6994
|
+
}
|
|
6995
|
+
ngAfterViewInit() {
|
|
6996
|
+
this.setGliderStyles();
|
|
6997
|
+
this.resizeObserver = new ResizeObserver(() => {
|
|
6998
|
+
if (this.shouldUpdateGliderStyles()) {
|
|
6999
|
+
// zonejs doesn't monkey-patch resize observer (yet)
|
|
7000
|
+
this.zone.run(() => {
|
|
7001
|
+
this.setGliderStyles();
|
|
7002
|
+
});
|
|
7003
|
+
}
|
|
7004
|
+
});
|
|
7005
|
+
this.resizeObserver.observe(this.segmentedControl.nativeElement);
|
|
7006
|
+
this.change.subscribe(() => {
|
|
7007
|
+
this.setGliderStyles();
|
|
7008
|
+
});
|
|
7009
|
+
}
|
|
7010
|
+
ngAfterViewChecked() {
|
|
7011
|
+
this.setGliderStyles();
|
|
7012
|
+
this.changeDetector.detectChanges();
|
|
7013
|
+
}
|
|
7014
|
+
ngOnDestroy() {
|
|
7015
|
+
this.resizeObserver?.unobserve(this.segmentedControl.nativeElement);
|
|
7016
|
+
this.change.unsubscribe();
|
|
7017
|
+
}
|
|
7018
|
+
_onFocusChange(focusOrigin) {
|
|
7019
|
+
this._focusVisible = focusOrigin === 'keyboard';
|
|
7020
|
+
if (!focusOrigin) {
|
|
7021
|
+
this.onTouched();
|
|
7022
|
+
}
|
|
6772
7023
|
}
|
|
6773
7024
|
}
|
|
6774
|
-
|
|
6775
|
-
|
|
6776
|
-
|
|
6777
|
-
|
|
6778
|
-
|
|
6779
|
-
|
|
6780
|
-
|
|
6781
|
-
|
|
6782
|
-
|
|
6783
|
-
|
|
6784
|
-
|
|
6785
|
-
|
|
6786
|
-
|
|
7025
|
+
SegmentedRadioGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SegmentedRadioGroupComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
7026
|
+
SegmentedRadioGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: SegmentedRadioGroupComponent, selector: "sp-segmented-radio-group", inputs: { ariaLabel: ["aria-label", "ariaLabel"], size: "size", align: "align" }, providers: [
|
|
7027
|
+
ViewEncapsulationProvider,
|
|
7028
|
+
{
|
|
7029
|
+
provide: NG_VALUE_ACCESSOR,
|
|
7030
|
+
useExisting: forwardRef(() => SegmentedRadioGroupComponent),
|
|
7031
|
+
multi: true,
|
|
7032
|
+
},
|
|
7033
|
+
{
|
|
7034
|
+
provide: FieldControl,
|
|
7035
|
+
useExisting: forwardRef(() => SegmentedRadioGroupComponent),
|
|
7036
|
+
},
|
|
7037
|
+
{
|
|
7038
|
+
provide: RadioGroupBase,
|
|
7039
|
+
useExisting: forwardRef(() => SegmentedRadioGroupComponent),
|
|
7040
|
+
},
|
|
7041
|
+
], viewQueries: [{ propertyName: "segmentedControl", first: true, predicate: ["segmentedControl"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: ThemeCheckDirective }], ngImport: i0, template: "<div\n #segmentedControl\n class=\"sapphire-segmented-control\"\n [class.sapphire-segmented-control--lg]=\"size === 'lg'\"\n [class.sapphire-segmented-control--sm]=\"size === 'sm'\"\n [class.focus-visible]=\"_focusVisible\"\n [ngClass]=\"\n align === 'stretch'\n ? 'sapphire-segmented-control--stretch'\n : 'sapphire-segmented-control--align-' + align\n \"\n>\n <div\n class=\"sapphire-segmented-control__button-container\"\n role=\"radiogroup\"\n [attr.aria-label]=\"ariaLabel\"\n aria-orientation=\"horizontal\"\n cdkMonitorSubtreeFocus\n (cdkFocusChange)=\"_onFocusChange($event)\"\n >\n <ng-content></ng-content>\n <span\n [style.left]=\"_gliderStyles.left\"\n [style.width]=\"_gliderStyles.width\"\n [class.sapphire-segmented-control__glider--with-transition]=\"\n _animationEnabled\n \"\n class=\"sapphire-segmented-control__glider\"\n role=\"none\"\n ></span>\n </div>\n</div>\n", styles: [".sapphire-segmented-control{display:flex;height:var(--sapphire-semantic-size-height-control-md)}.sapphire-segmented-control--stretch .sapphire-segmented-control__button-container{width:100%}.sapphire-segmented-control--align-center{justify-content:center}.sapphire-segmented-control--align-right{justify-content:flex-end}.sapphire-segmented-control--align-left{justify-content:flex-start}.sapphire-segmented-control__button-container{display:inline-flex;position:relative;height:100%;background-color:var(--sapphire-semantic-color-background-control-special-secondary-default);border-radius:var(--sapphire-semantic-size-height-control-lg);padding:var(--sapphire-global-size-static-5);box-sizing:border-box}.sapphire-segmented-control__glider{position:absolute;top:var(--sapphire-global-size-static-5);left:0;height:calc(100% - var(--sapphire-global-size-static-5) * 2);display:block;background-color:var(--sapphire-semantic-color-background-control-special-primary-default);box-shadow:var(--sapphire-global-shadow-sm);box-sizing:border-box;z-index:1;border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control__glider--with-transition{transition:width var(--sapphire-semantic-time-motion-quick) ease-in-out,left var(--sapphire-semantic-time-motion-quick) ease-in-out}.sapphire-segmented-control__button{font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-semibold);font-size:var(--sapphire-semantic-size-font-control-md);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;flex:1 1 auto;box-sizing:content-box;margin:0;border:0;height:100%;min-width:var(--sapphire-global-size-generic-120);padding:0 var(--sapphire-semantic-size-spacing-50);background-color:transparent;color:var(--sapphire-semantic-color-content-default-primary);cursor:pointer;outline:none;z-index:2;display:flex;align-items:center;justify-content:center;position:relative;transition:color var(--sapphire-semantic-time-motion-quick) ease-in-out}.sapphire-segmented-control__button--active{color:var(--sapphire-semantic-color-content-link-primary-default)}.sapphire-segmented-control__button--disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-segmented-control.focus-visible:focus-within .sapphire-segmented-control__glider{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring)}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__glider{transition:none}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__button:focus{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control.focus-visible:focus-within.sapphire-segmented-control--manual-keyboard-activation .sapphire-segmented-control__glider{outline:none}.sapphire-segmented-control--lg{height:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control--lg .sapphire-segmented-control__button{font-size:var(--sapphire-semantic-size-font-control-default)}.sapphire-segmented-control--sm{height:var(--sapphire-semantic-size-height-control-sm)}.sapphire-segmented-control--sm .sapphire-segmented-control__button{font-size:var(--sapphire-semantic-size-font-control-sm)}.sapphire-segmented-control__radio-input{margin:0;overflow:visible;position:absolute;top:0;left:0;height:100%;width:100%;opacity:.0001;z-index:1;cursor:pointer}.sapphire-segmented-control__button--disabled .sapphire-segmented-control__radio-input{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
|
|
7042
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SegmentedRadioGroupComponent, decorators: [{
|
|
7043
|
+
type: Component,
|
|
7044
|
+
args: [{ selector: 'sp-segmented-radio-group', changeDetection: ChangeDetectionStrategy.Default, providers: [
|
|
7045
|
+
ViewEncapsulationProvider,
|
|
7046
|
+
{
|
|
7047
|
+
provide: NG_VALUE_ACCESSOR,
|
|
7048
|
+
useExisting: forwardRef(() => SegmentedRadioGroupComponent),
|
|
7049
|
+
multi: true,
|
|
7050
|
+
},
|
|
7051
|
+
{
|
|
7052
|
+
provide: FieldControl,
|
|
7053
|
+
useExisting: forwardRef(() => SegmentedRadioGroupComponent),
|
|
7054
|
+
},
|
|
7055
|
+
{
|
|
7056
|
+
provide: RadioGroupBase,
|
|
7057
|
+
useExisting: forwardRef(() => SegmentedRadioGroupComponent),
|
|
7058
|
+
},
|
|
7059
|
+
], hostDirectives: [ThemeCheckDirective], template: "<div\n #segmentedControl\n class=\"sapphire-segmented-control\"\n [class.sapphire-segmented-control--lg]=\"size === 'lg'\"\n [class.sapphire-segmented-control--sm]=\"size === 'sm'\"\n [class.focus-visible]=\"_focusVisible\"\n [ngClass]=\"\n align === 'stretch'\n ? 'sapphire-segmented-control--stretch'\n : 'sapphire-segmented-control--align-' + align\n \"\n>\n <div\n class=\"sapphire-segmented-control__button-container\"\n role=\"radiogroup\"\n [attr.aria-label]=\"ariaLabel\"\n aria-orientation=\"horizontal\"\n cdkMonitorSubtreeFocus\n (cdkFocusChange)=\"_onFocusChange($event)\"\n >\n <ng-content></ng-content>\n <span\n [style.left]=\"_gliderStyles.left\"\n [style.width]=\"_gliderStyles.width\"\n [class.sapphire-segmented-control__glider--with-transition]=\"\n _animationEnabled\n \"\n class=\"sapphire-segmented-control__glider\"\n role=\"none\"\n ></span>\n </div>\n</div>\n", styles: [".sapphire-segmented-control{display:flex;height:var(--sapphire-semantic-size-height-control-md)}.sapphire-segmented-control--stretch .sapphire-segmented-control__button-container{width:100%}.sapphire-segmented-control--align-center{justify-content:center}.sapphire-segmented-control--align-right{justify-content:flex-end}.sapphire-segmented-control--align-left{justify-content:flex-start}.sapphire-segmented-control__button-container{display:inline-flex;position:relative;height:100%;background-color:var(--sapphire-semantic-color-background-control-special-secondary-default);border-radius:var(--sapphire-semantic-size-height-control-lg);padding:var(--sapphire-global-size-static-5);box-sizing:border-box}.sapphire-segmented-control__glider{position:absolute;top:var(--sapphire-global-size-static-5);left:0;height:calc(100% - var(--sapphire-global-size-static-5) * 2);display:block;background-color:var(--sapphire-semantic-color-background-control-special-primary-default);box-shadow:var(--sapphire-global-shadow-sm);box-sizing:border-box;z-index:1;border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control__glider--with-transition{transition:width var(--sapphire-semantic-time-motion-quick) ease-in-out,left var(--sapphire-semantic-time-motion-quick) ease-in-out}.sapphire-segmented-control__button{font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-semibold);font-size:var(--sapphire-semantic-size-font-control-md);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;flex:1 1 auto;box-sizing:content-box;margin:0;border:0;height:100%;min-width:var(--sapphire-global-size-generic-120);padding:0 var(--sapphire-semantic-size-spacing-50);background-color:transparent;color:var(--sapphire-semantic-color-content-default-primary);cursor:pointer;outline:none;z-index:2;display:flex;align-items:center;justify-content:center;position:relative;transition:color var(--sapphire-semantic-time-motion-quick) ease-in-out}.sapphire-segmented-control__button--active{color:var(--sapphire-semantic-color-content-link-primary-default)}.sapphire-segmented-control__button--disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-segmented-control.focus-visible:focus-within .sapphire-segmented-control__glider{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring)}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__glider{transition:none}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__button:focus{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control.focus-visible:focus-within.sapphire-segmented-control--manual-keyboard-activation .sapphire-segmented-control__glider{outline:none}.sapphire-segmented-control--lg{height:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control--lg .sapphire-segmented-control__button{font-size:var(--sapphire-semantic-size-font-control-default)}.sapphire-segmented-control--sm{height:var(--sapphire-semantic-size-height-control-sm)}.sapphire-segmented-control--sm .sapphire-segmented-control__button{font-size:var(--sapphire-semantic-size-font-control-sm)}.sapphire-segmented-control__radio-input{margin:0;overflow:visible;position:absolute;top:0;left:0;height:100%;width:100%;opacity:.0001;z-index:1;cursor:pointer}.sapphire-segmented-control__button--disabled .sapphire-segmented-control__radio-input{cursor:not-allowed}\n"] }]
|
|
7060
|
+
}], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { segmentedControl: [{
|
|
7061
|
+
type: ViewChild,
|
|
7062
|
+
args: ['segmentedControl']
|
|
7063
|
+
}], ariaLabel: [{
|
|
7064
|
+
type: Input,
|
|
7065
|
+
args: ['aria-label']
|
|
7066
|
+
}], size: [{
|
|
7067
|
+
type: Input
|
|
7068
|
+
}], align: [{
|
|
7069
|
+
type: Input
|
|
7070
|
+
}] } });
|
|
6787
7071
|
|
|
6788
|
-
|
|
6789
|
-
* - Makes sure currently applied theme is applied on overlays which are rendered as portal
|
|
6790
|
-
* - Provides `THEME_ATTRIBUTE` injectable via sp-theme component. Useful when a custom component
|
|
6791
|
-
* needs to render a portal with the currently applied theme class.
|
|
6792
|
-
*/
|
|
6793
|
-
class SapphireThemeModule {
|
|
7072
|
+
class SegmentedRadioComponent extends RadioBase {
|
|
6794
7073
|
}
|
|
6795
|
-
|
|
6796
|
-
|
|
6797
|
-
|
|
6798
|
-
|
|
6799
|
-
|
|
6800
|
-
|
|
6801
|
-
|
|
6802
|
-
|
|
6803
|
-
|
|
6804
|
-
|
|
6805
|
-
|
|
6806
|
-
|
|
6807
|
-
|
|
6808
|
-
|
|
6809
|
-
], imports: [OverlayModule, ThemeDefault, ThemeDefaultDark] });
|
|
6810
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SapphireThemeModule, decorators: [{
|
|
6811
|
-
type: NgModule,
|
|
6812
|
-
args: [{
|
|
6813
|
-
declarations: [],
|
|
6814
|
-
providers: [
|
|
6815
|
-
/**
|
|
6816
|
-
* Since we want to provide SapphireOverlayContainer as OverlayContainer token,
|
|
6817
|
-
* we can't just { providedIn: 'root' } to provide the default overlay container.
|
|
6818
|
-
* A side effect of that is that in lazy-loaded modules, a new instance of
|
|
6819
|
-
* SapphireOverlayContainer will be created, which is not ideal, but it should be ok,
|
|
6820
|
-
* since sp-theme-* components that are supposed to be rendered at top level provide
|
|
6821
|
-
* OverlayContainer (and Overlay) which will take precedent over the global
|
|
6822
|
-
* OverlayContainer that's only used in services like ModalService.
|
|
6823
|
-
* We could also follow the `forRoot` pattern, but it unnecessarily complicates the API.
|
|
6824
|
-
*/
|
|
6825
|
-
{ provide: OverlayContainer, useClass: SapphireOverlayContainer },
|
|
6826
|
-
],
|
|
6827
|
-
imports: [OverlayModule, ThemeRootDirective, ThemeDefault, ThemeDefaultDark],
|
|
6828
|
-
exports: [ThemeRootDirective, ThemeDefault, ThemeDefaultDark],
|
|
6829
|
-
}]
|
|
7074
|
+
SegmentedRadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SegmentedRadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
7075
|
+
SegmentedRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: SegmentedRadioComponent, selector: "sp-segmented-radio", inputs: { tabIndex: "tabIndex" }, host: { properties: { "class.sapphire-segmented-control__button--disabled": "disabled", "class.sapphire-segmented-control__button--active": "checked", "attr.id": "id", "attr.tabindex": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null" }, classAttribute: "sapphire-segmented-control__button" }, usesInheritance: true, hostDirectives: [{ directive: ThemeCheckDirective }, { directive: UseComponentStyles }], ngImport: i0, template: "<label [for]=\"inputId\">\n <input\n #input\n _spUseComponentStyles\n class=\"sapphire-segmented-control__radio-input\"\n type=\"radio\"\n [id]=\"inputId\"\n [attr.aria-checked]=\"_getAriaChecked()\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n (change)=\"_onInputInteraction($event)\"\n [attr.autofocus]=\"autofocus ? true : null\"\n />\n <ng-content></ng-content>\n</label>\n", dependencies: [{ kind: "directive", type: UseComponentStyles, selector: "[_spUseComponentStyles]" }], changeDetection: i0.ChangeDetectionStrategy.Default });
|
|
7076
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SegmentedRadioComponent, decorators: [{
|
|
7077
|
+
type: Component,
|
|
7078
|
+
args: [{ selector: 'sp-segmented-radio', changeDetection: ChangeDetectionStrategy.Default, hostDirectives: [ThemeCheckDirective, UseComponentStyles], inputs: ['tabIndex'], host: {
|
|
7079
|
+
class: 'sapphire-segmented-control__button',
|
|
7080
|
+
'[class.sapphire-segmented-control__button--disabled]': 'disabled',
|
|
7081
|
+
'[class.sapphire-segmented-control__button--active]': 'checked',
|
|
7082
|
+
'[attr.id]': 'id',
|
|
7083
|
+
'[attr.tabindex]': 'null',
|
|
7084
|
+
'[attr.aria-label]': 'null',
|
|
7085
|
+
'[attr.aria-labelledby]': 'null',
|
|
7086
|
+
'[attr.aria-describedby]': 'null',
|
|
7087
|
+
}, template: "<label [for]=\"inputId\">\n <input\n #input\n _spUseComponentStyles\n class=\"sapphire-segmented-control__radio-input\"\n type=\"radio\"\n [id]=\"inputId\"\n [attr.aria-checked]=\"_getAriaChecked()\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n (change)=\"_onInputInteraction($event)\"\n [attr.autofocus]=\"autofocus ? true : null\"\n />\n <ng-content></ng-content>\n</label>\n" }]
|
|
6830
7088
|
}] });
|
|
6831
7089
|
|
|
6832
|
-
// We have separate public_api.ts file for each angular module, to have them
|
|
6833
|
-
/**
|
|
6834
|
-
* Exporting "tokens.size.breakpoint" is not good enough.
|
|
6835
|
-
* That is a map from breakpoint name to a a string which is the css variable
|
|
6836
|
-
* that will have the breakpoint size. This is not useful in a JS context.
|
|
6837
|
-
*
|
|
6838
|
-
* TODO: export something which uses the "tokens.size.breakpoint" and offers
|
|
6839
|
-
* something usabled in JS.
|
|
6840
|
-
*/
|
|
6841
|
-
const DEFAULT_BREAKPOINTS = {
|
|
6842
|
-
XS: 576,
|
|
6843
|
-
S: 768,
|
|
6844
|
-
M: 960,
|
|
6845
|
-
L: 1200,
|
|
6846
|
-
XL: 1400,
|
|
6847
|
-
};
|
|
6848
|
-
|
|
6849
7090
|
class SapphireRadioModule {
|
|
6850
7091
|
}
|
|
6851
7092
|
SapphireRadioModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SapphireRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
6852
|
-
SapphireRadioModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.0", ngImport: i0, type: SapphireRadioModule, declarations: [RadioComponent,
|
|
6853
|
-
|
|
7093
|
+
SapphireRadioModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.0", ngImport: i0, type: SapphireRadioModule, declarations: [RadioComponent,
|
|
7094
|
+
RadioGroupComponent,
|
|
7095
|
+
SegmentedRadioComponent,
|
|
7096
|
+
SegmentedRadioGroupComponent], imports: [CommonModule,
|
|
7097
|
+
LabelComponent,
|
|
7098
|
+
A11yModule,
|
|
7099
|
+
SapphireFieldModule,
|
|
7100
|
+
UseComponentStyles], exports: [RadioComponent,
|
|
7101
|
+
RadioGroupComponent,
|
|
7102
|
+
SegmentedRadioComponent,
|
|
7103
|
+
SegmentedRadioGroupComponent,
|
|
7104
|
+
SapphireFieldModule] });
|
|
7105
|
+
SapphireRadioModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SapphireRadioModule, imports: [CommonModule,
|
|
7106
|
+
LabelComponent,
|
|
7107
|
+
A11yModule,
|
|
7108
|
+
SapphireFieldModule, SapphireFieldModule] });
|
|
6854
7109
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SapphireRadioModule, decorators: [{
|
|
6855
7110
|
type: NgModule,
|
|
6856
7111
|
args: [{
|
|
6857
|
-
declarations: [
|
|
6858
|
-
|
|
6859
|
-
|
|
7112
|
+
declarations: [
|
|
7113
|
+
RadioComponent,
|
|
7114
|
+
RadioGroupComponent,
|
|
7115
|
+
SegmentedRadioComponent,
|
|
7116
|
+
SegmentedRadioGroupComponent,
|
|
7117
|
+
],
|
|
7118
|
+
imports: [
|
|
7119
|
+
CommonModule,
|
|
7120
|
+
LabelComponent,
|
|
7121
|
+
A11yModule,
|
|
7122
|
+
SapphireFieldModule,
|
|
7123
|
+
UseComponentStyles,
|
|
7124
|
+
],
|
|
7125
|
+
exports: [
|
|
7126
|
+
RadioComponent,
|
|
7127
|
+
RadioGroupComponent,
|
|
7128
|
+
SegmentedRadioComponent,
|
|
7129
|
+
SegmentedRadioGroupComponent,
|
|
7130
|
+
SapphireFieldModule,
|
|
7131
|
+
],
|
|
6860
7132
|
}]
|
|
6861
7133
|
}] });
|
|
6862
7134
|
|
|
@@ -6884,6 +7156,7 @@ class ModalService {
|
|
|
6884
7156
|
],
|
|
6885
7157
|
positionStrategy,
|
|
6886
7158
|
});
|
|
7159
|
+
this.overlay.applyTheme(dialogRef.overlayRef, options.theme);
|
|
6887
7160
|
const close = dialogRef.close.bind(dialogRef);
|
|
6888
7161
|
dialogRef.immediateClose = close;
|
|
6889
7162
|
dialogRef.closing = false;
|
|
@@ -6919,12 +7192,12 @@ class ModalService {
|
|
|
6919
7192
|
return this.open(componentOrTemplateRef, options, this.overlay.position().global().right());
|
|
6920
7193
|
}
|
|
6921
7194
|
}
|
|
6922
|
-
ModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalService, deps: [{ token: i1$
|
|
7195
|
+
ModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalService, deps: [{ token: i1$4.Dialog }, { token: SapphireOverlay }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
6923
7196
|
ModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalService, providedIn: 'root' });
|
|
6924
7197
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalService, decorators: [{
|
|
6925
7198
|
type: Injectable,
|
|
6926
7199
|
args: [{ providedIn: 'root' }]
|
|
6927
|
-
}], ctorParameters: function () { return [{ type: i1$
|
|
7200
|
+
}], ctorParameters: function () { return [{ type: i1$4.Dialog }, { type: SapphireOverlay }]; } });
|
|
6928
7201
|
|
|
6929
7202
|
/**
|
|
6930
7203
|
* Monitors host element's **scrolled** and **scrollable** state.
|
|
@@ -7040,7 +7313,7 @@ class ModalCloseButtonDirective {
|
|
|
7040
7313
|
this.dialogRef?.close();
|
|
7041
7314
|
}
|
|
7042
7315
|
}
|
|
7043
|
-
ModalCloseButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalCloseButtonDirective, deps: [{ token: TranslateService }, { token: i1$
|
|
7316
|
+
ModalCloseButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalCloseButtonDirective, deps: [{ token: TranslateService }, { token: i1$4.DialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
7044
7317
|
ModalCloseButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: ModalCloseButtonDirective, selector: "button[spModalCloseButton]", host: { listeners: { "click": "close()" }, properties: { "attr.aria-label": "dismissLabel" } }, ngImport: i0 });
|
|
7045
7318
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalCloseButtonDirective, decorators: [{
|
|
7046
7319
|
type: Directive,
|
|
@@ -7050,7 +7323,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
7050
7323
|
'[attr.aria-label]': 'dismissLabel',
|
|
7051
7324
|
},
|
|
7052
7325
|
}]
|
|
7053
|
-
}], ctorParameters: function () { return [{ type: TranslateService }, { type: i1$
|
|
7326
|
+
}], ctorParameters: function () { return [{ type: TranslateService }, { type: i1$4.DialogRef, decorators: [{
|
|
7054
7327
|
type: Optional
|
|
7055
7328
|
}] }]; }, propDecorators: { close: [{
|
|
7056
7329
|
type: HostListener,
|
|
@@ -7171,7 +7444,7 @@ class ModalBaseComponent {
|
|
|
7171
7444
|
this.dialogRef.immediateClose();
|
|
7172
7445
|
}
|
|
7173
7446
|
}
|
|
7174
|
-
ModalBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalBaseComponent, deps: [{ token: i1$
|
|
7447
|
+
ModalBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalBaseComponent, deps: [{ token: i1$4.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
7175
7448
|
ModalBaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ModalBaseComponent, selector: "ng-component", inputs: { ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledBy: ["aria-labelledby", "ariaLabelledBy"], ariaDescribedBy: ["aria-describedby", "ariaDescribedBy"], role: "role" }, host: { properties: { "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null", "attr.role": "null" } }, queries: [{ propertyName: "header", first: true, predicate: ModalHeaderDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: '', isInline: true });
|
|
7176
7449
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalBaseComponent, decorators: [{
|
|
7177
7450
|
type: Component,
|
|
@@ -7186,7 +7459,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
7186
7459
|
'[attr.role]': 'null',
|
|
7187
7460
|
},
|
|
7188
7461
|
}]
|
|
7189
|
-
}], ctorParameters: function () { return [{ type: i1$
|
|
7462
|
+
}], ctorParameters: function () { return [{ type: i1$4.DialogRef }]; }, propDecorators: { ariaLabel: [{
|
|
7190
7463
|
type: Input,
|
|
7191
7464
|
args: ['aria-label']
|
|
7192
7465
|
}], ariaLabelledBy: [{
|
|
@@ -7217,7 +7490,7 @@ class DialogComponent extends ModalBaseComponent {
|
|
|
7217
7490
|
this.size = 'sm';
|
|
7218
7491
|
}
|
|
7219
7492
|
}
|
|
7220
|
-
DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DialogComponent, deps: [{ token: i1$
|
|
7493
|
+
DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DialogComponent, deps: [{ token: i1$4.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
7221
7494
|
DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: DialogComponent, selector: "sp-dialog", inputs: { size: "size" }, host: { properties: { "class.sapphire-dialog--xs": "size === 'xs'", "class.sapphire-dialog--sm": "size === 'sm'", "class.sapphire-dialog--md": "size === 'md'", "class.sapphire-dialog--lg": "size === 'lg'", "class.sapphire-dialog--exiting": "dialogRef.closing" }, classAttribute: "sapphire-dialog" }, usesInheritance: true, hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}.sapphire-dialog{border-radius:var(--sapphire-semantic-size-radius-lg);background-color:var(--sapphire-semantic-color-background-surface);font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-content-default-primary);box-sizing:border-box;overflow:hidden;max-height:90vh;max-width:90vw;display:flex;flex-direction:column;outline:none;animation-name:fade-in;animation-duration:var(--sapphire-semantic-time-fade-default);animation-timing-function:ease-in-out;animation-fill-mode:forwards}.sapphire-dialog--exiting{animation-name:fade-out}.sapphire-dialog--xs{width:var(--sapphire-global-size-generic-800)}.sapphire-dialog--sm{width:var(--sapphire-global-size-generic-1400)}.sapphire-dialog--md{width:var(--sapphire-global-size-generic-1920)}.sapphire-dialog--lg{width:var(--sapphire-global-size-generic-2560)}\n"] });
|
|
7222
7495
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DialogComponent, decorators: [{
|
|
7223
7496
|
type: Component,
|
|
@@ -7229,7 +7502,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
7229
7502
|
'[class.sapphire-dialog--lg]': "size === 'lg'",
|
|
7230
7503
|
'[class.sapphire-dialog--exiting]': 'dialogRef.closing',
|
|
7231
7504
|
}, hostDirectives: [UseComponentStylesOnHost], styles: ["@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}.sapphire-dialog{border-radius:var(--sapphire-semantic-size-radius-lg);background-color:var(--sapphire-semantic-color-background-surface);font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-content-default-primary);box-sizing:border-box;overflow:hidden;max-height:90vh;max-width:90vw;display:flex;flex-direction:column;outline:none;animation-name:fade-in;animation-duration:var(--sapphire-semantic-time-fade-default);animation-timing-function:ease-in-out;animation-fill-mode:forwards}.sapphire-dialog--exiting{animation-name:fade-out}.sapphire-dialog--xs{width:var(--sapphire-global-size-generic-800)}.sapphire-dialog--sm{width:var(--sapphire-global-size-generic-1400)}.sapphire-dialog--md{width:var(--sapphire-global-size-generic-1920)}.sapphire-dialog--lg{width:var(--sapphire-global-size-generic-2560)}\n"] }]
|
|
7232
|
-
}], ctorParameters: function () { return [{ type: i1$
|
|
7505
|
+
}], ctorParameters: function () { return [{ type: i1$4.DialogRef }]; }, propDecorators: { size: [{
|
|
7233
7506
|
type: Input
|
|
7234
7507
|
}] } });
|
|
7235
7508
|
|
|
@@ -7303,6 +7576,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
7303
7576
|
* Makes a clickable element a trigger for a modal
|
|
7304
7577
|
*/
|
|
7305
7578
|
class ModalTriggerDirective {
|
|
7579
|
+
constructor() {
|
|
7580
|
+
this.templateRef = null;
|
|
7581
|
+
this._dismissable = false;
|
|
7582
|
+
this._keyboardDismissDisabled = false;
|
|
7583
|
+
this.modalService = inject(ModalService);
|
|
7584
|
+
this.theme = inject(ThemeBaseDirective);
|
|
7585
|
+
}
|
|
7306
7586
|
get dismissable() {
|
|
7307
7587
|
return this._dismissable;
|
|
7308
7588
|
}
|
|
@@ -7315,17 +7595,11 @@ class ModalTriggerDirective {
|
|
|
7315
7595
|
set keyboardDismissDisabled(value) {
|
|
7316
7596
|
this._keyboardDismissDisabled = coerceBooleanProperty(value);
|
|
7317
7597
|
}
|
|
7318
|
-
constructor(modalService) {
|
|
7319
|
-
this.modalService = modalService;
|
|
7320
|
-
this.templateRef = null;
|
|
7321
|
-
this._dismissable = false;
|
|
7322
|
-
this._keyboardDismissDisabled = false;
|
|
7323
|
-
}
|
|
7324
7598
|
close() {
|
|
7325
7599
|
this.dialogRef?.close();
|
|
7326
7600
|
}
|
|
7327
7601
|
}
|
|
7328
|
-
ModalTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalTriggerDirective, deps: [
|
|
7602
|
+
ModalTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
7329
7603
|
ModalTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: ModalTriggerDirective, isStandalone: true, host: { properties: { "attr.aria-controls": "dialogRef?.id ?? null" } }, ngImport: i0 });
|
|
7330
7604
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalTriggerDirective, decorators: [{
|
|
7331
7605
|
type: Directive,
|
|
@@ -7335,23 +7609,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
7335
7609
|
},
|
|
7336
7610
|
standalone: true,
|
|
7337
7611
|
}]
|
|
7338
|
-
}]
|
|
7612
|
+
}] });
|
|
7339
7613
|
|
|
7340
7614
|
/**
|
|
7341
7615
|
* Makes a clickable element a trigger for a dialog.
|
|
7342
7616
|
*/
|
|
7343
7617
|
class DialogTriggerDirective extends ModalTriggerDirective {
|
|
7344
|
-
constructor(modalService) {
|
|
7345
|
-
super(modalService);
|
|
7346
|
-
this.modalService = modalService;
|
|
7347
|
-
}
|
|
7348
7618
|
open() {
|
|
7349
7619
|
if (this.templateRef) {
|
|
7350
7620
|
this.dialogRef = this.modalService.openDialog(this.templateRef, this);
|
|
7351
7621
|
}
|
|
7352
7622
|
}
|
|
7353
7623
|
}
|
|
7354
|
-
DialogTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DialogTriggerDirective, deps:
|
|
7624
|
+
DialogTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DialogTriggerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
7355
7625
|
DialogTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: DialogTriggerDirective, selector: "[spDialogTriggerFor]", inputs: { dismissable: ["spDialogDismissable", "dismissable"], keyboardDismissDisabled: ["spDialogDisableKeyboardDismissable", "keyboardDismissDisabled"], templateRef: ["spDialogTriggerFor", "templateRef"] }, host: { listeners: { "click": "open()" } }, exportAs: ["spDialogTrigger"], usesInheritance: true, ngImport: i0 });
|
|
7356
7626
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DialogTriggerDirective, decorators: [{
|
|
7357
7627
|
type: Directive,
|
|
@@ -7364,7 +7634,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
7364
7634
|
],
|
|
7365
7635
|
exportAs: 'spDialogTrigger',
|
|
7366
7636
|
}]
|
|
7367
|
-
}],
|
|
7637
|
+
}], propDecorators: { open: [{
|
|
7368
7638
|
type: HostListener,
|
|
7369
7639
|
args: ['click']
|
|
7370
7640
|
}] } });
|
|
@@ -7496,7 +7766,7 @@ class PanelComponent extends ModalBaseComponent {
|
|
|
7496
7766
|
this.size = 'lg';
|
|
7497
7767
|
}
|
|
7498
7768
|
}
|
|
7499
|
-
PanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PanelComponent, deps: [{ token: i1$
|
|
7769
|
+
PanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PanelComponent, deps: [{ token: i1$4.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
7500
7770
|
PanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: PanelComponent, selector: "sp-panel", inputs: { size: "size" }, host: { properties: { "class.sapphire-panel--sm": "size === \"sm\"", "class.sapphire-panel--visible": "!dialogRef.closing" }, classAttribute: "sapphire-panel" }, usesInheritance: true, hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".sapphire-panel{box-sizing:border-box;overflow:hidden;max-width:100%;display:block;height:100%;outline:0;transition:transform var(--sapphire-semantic-time-motion-default) ease-in-out;transform:translate(100%);width:var(--sapphire-semantic-size-width-panel-lg)}.sapphire-panel--visible{transform:translate(0)}.sapphire-panel--sm{width:var(--sapphire-semantic-size-width-panel-sm)}.sapphire-modal-layout{display:flex;flex-direction:column;height:100%;min-height:0;background-color:var(--sapphire-semantic-color-background-surface);font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-content-default-primary)}.sapphire-modal-layout__header-container{flex-shrink:0}.sapphire-modal-layout__header{display:flex;justify-content:space-between;padding:var(--sapphire-semantic-size-spacing-50) var(--sapphire-semantic-size-spacing-container-horizontal-md);gap:var(--sapphire-semantic-size-spacing-30)}.sapphire-modal-layout__body{overflow-y:auto;overflow-x:hidden;flex-grow:1;padding:0 var(--sapphire-semantic-size-spacing-container-horizontal-md)}.sapphire-modal-layout__body.sapphire-modal-layout__body--no-padding{padding:0}.sapphire-modal-layout__footer-container{flex-shrink:0}.sapphire-modal-layout__footer{padding:var(--sapphire-semantic-size-spacing-70) var(--sapphire-semantic-size-spacing-container-horizontal-md) var(--sapphire-semantic-size-spacing-70) var(--sapphire-semantic-size-spacing-container-horizontal-md)}.sapphire-modal-layout__heading-container{flex:1;padding:var(--sapphire-semantic-size-spacing-20) 0;display:flex;flex-direction:column;justify-content:center;word-break:break-word}.sapphire-modal-layout__subheading{color:var(--sapphire-semantic-color-content-default-secondary);margin-top:var(--sapphire-semantic-size-spacing-20)}.sapphire-modal-layout__header-container+.sapphire-modal-layout__body{border-top:var(--sapphire-semantic-size-border-sm) solid transparent}.sapphire-modal-layout__header-container+.sapphire-modal-layout__body.sapphire-modal-layout__body--scrolled{border-top:var(--sapphire-semantic-size-border-sm) solid var(--sapphire-semantic-color-border-separator-default)}.sapphire-modal-layout:not(:has(.sapphire-modal-layout__footer)) .sapphire-modal-layout__body:not(.sapphire-modal-layout__body--no-padding){padding-bottom:var(--sapphire-semantic-size-spacing-50)}.sapphire-modal-layout__body+.sapphire-modal-layout__footer-container{border-top:var(--sapphire-semantic-size-border-sm) solid transparent}.sapphire-modal-layout__body.sapphire-modal-layout__body--scrollable+.sapphire-modal-layout__footer-container{border-top:var(--sapphire-semantic-size-border-sm) solid var(--sapphire-semantic-color-border-separator-default)}\n"] });
|
|
7501
7771
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PanelComponent, decorators: [{
|
|
7502
7772
|
type: Component,
|
|
@@ -7505,7 +7775,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
7505
7775
|
'[class.sapphire-panel--sm]': 'size === "sm"',
|
|
7506
7776
|
'[class.sapphire-panel--visible]': '!dialogRef.closing',
|
|
7507
7777
|
}, hostDirectives: [UseComponentStylesOnHost], styles: [".sapphire-panel{box-sizing:border-box;overflow:hidden;max-width:100%;display:block;height:100%;outline:0;transition:transform var(--sapphire-semantic-time-motion-default) ease-in-out;transform:translate(100%);width:var(--sapphire-semantic-size-width-panel-lg)}.sapphire-panel--visible{transform:translate(0)}.sapphire-panel--sm{width:var(--sapphire-semantic-size-width-panel-sm)}.sapphire-modal-layout{display:flex;flex-direction:column;height:100%;min-height:0;background-color:var(--sapphire-semantic-color-background-surface);font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-content-default-primary)}.sapphire-modal-layout__header-container{flex-shrink:0}.sapphire-modal-layout__header{display:flex;justify-content:space-between;padding:var(--sapphire-semantic-size-spacing-50) var(--sapphire-semantic-size-spacing-container-horizontal-md);gap:var(--sapphire-semantic-size-spacing-30)}.sapphire-modal-layout__body{overflow-y:auto;overflow-x:hidden;flex-grow:1;padding:0 var(--sapphire-semantic-size-spacing-container-horizontal-md)}.sapphire-modal-layout__body.sapphire-modal-layout__body--no-padding{padding:0}.sapphire-modal-layout__footer-container{flex-shrink:0}.sapphire-modal-layout__footer{padding:var(--sapphire-semantic-size-spacing-70) var(--sapphire-semantic-size-spacing-container-horizontal-md) var(--sapphire-semantic-size-spacing-70) var(--sapphire-semantic-size-spacing-container-horizontal-md)}.sapphire-modal-layout__heading-container{flex:1;padding:var(--sapphire-semantic-size-spacing-20) 0;display:flex;flex-direction:column;justify-content:center;word-break:break-word}.sapphire-modal-layout__subheading{color:var(--sapphire-semantic-color-content-default-secondary);margin-top:var(--sapphire-semantic-size-spacing-20)}.sapphire-modal-layout__header-container+.sapphire-modal-layout__body{border-top:var(--sapphire-semantic-size-border-sm) solid transparent}.sapphire-modal-layout__header-container+.sapphire-modal-layout__body.sapphire-modal-layout__body--scrolled{border-top:var(--sapphire-semantic-size-border-sm) solid var(--sapphire-semantic-color-border-separator-default)}.sapphire-modal-layout:not(:has(.sapphire-modal-layout__footer)) .sapphire-modal-layout__body:not(.sapphire-modal-layout__body--no-padding){padding-bottom:var(--sapphire-semantic-size-spacing-50)}.sapphire-modal-layout__body+.sapphire-modal-layout__footer-container{border-top:var(--sapphire-semantic-size-border-sm) solid transparent}.sapphire-modal-layout__body.sapphire-modal-layout__body--scrollable+.sapphire-modal-layout__footer-container{border-top:var(--sapphire-semantic-size-border-sm) solid var(--sapphire-semantic-color-border-separator-default)}\n"] }]
|
|
7508
|
-
}], ctorParameters: function () { return [{ type: i1$
|
|
7778
|
+
}], ctorParameters: function () { return [{ type: i1$4.DialogRef }]; }, propDecorators: { size: [{
|
|
7509
7779
|
type: Input
|
|
7510
7780
|
}] } });
|
|
7511
7781
|
|
|
@@ -7513,10 +7783,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
7513
7783
|
* Makes a clickable element a trigger for a panel.
|
|
7514
7784
|
*/
|
|
7515
7785
|
class PanelTriggerDirective extends ModalTriggerDirective {
|
|
7516
|
-
constructor(modalService) {
|
|
7517
|
-
super(modalService);
|
|
7518
|
-
this.modalService = modalService;
|
|
7519
|
-
}
|
|
7520
7786
|
open() {
|
|
7521
7787
|
if (!this.templateRef) {
|
|
7522
7788
|
throw new Error('Template referenced by modal trigger not found.');
|
|
@@ -7524,7 +7790,7 @@ class PanelTriggerDirective extends ModalTriggerDirective {
|
|
|
7524
7790
|
this.dialogRef = this.modalService.openPanel(this.templateRef, this);
|
|
7525
7791
|
}
|
|
7526
7792
|
}
|
|
7527
|
-
PanelTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PanelTriggerDirective, deps:
|
|
7793
|
+
PanelTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PanelTriggerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
7528
7794
|
PanelTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: PanelTriggerDirective, selector: "[spPanelTriggerFor]", inputs: { dismissable: ["spPanelDismissable", "dismissable"], keyboardDismissDisabled: ["spPanelDisableKeyboardDismissable", "keyboardDismissDisabled"], templateRef: ["spPanelTriggerFor", "templateRef"] }, host: { listeners: { "click": "open()" } }, exportAs: ["spPanelTrigger"], usesInheritance: true, ngImport: i0 });
|
|
7529
7795
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PanelTriggerDirective, decorators: [{
|
|
7530
7796
|
type: Directive,
|
|
@@ -7537,7 +7803,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
7537
7803
|
],
|
|
7538
7804
|
exportAs: 'spPanelTrigger',
|
|
7539
7805
|
}]
|
|
7540
|
-
}],
|
|
7806
|
+
}], propDecorators: { open: [{
|
|
7541
7807
|
type: HostListener,
|
|
7542
7808
|
args: ['click']
|
|
7543
7809
|
}] } });
|
|
@@ -8510,5 +8776,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
8510
8776
|
* Generated bundle index. Do not edit.
|
|
8511
8777
|
*/
|
|
8512
8778
|
|
|
8513
|
-
export { BadgeComponent, BasicSelectComponent, BasicSingleSelectDirective, ButtonComponent, ButtonGroupComponent, ButtonIconDirective, CheckboxChange, CheckboxComponent, CheckboxGroupComponent, ConfirmationDialogComponent, DEFAULT_BREAKPOINTS, DangerDialogComponent, DialogComponent, DialogTriggerDirective, FieldComponent, FieldControl, FieldErrorDirective, FieldLabelDirective, FieldNoteDirective, FieldNoteSuffixDirective, FocusedDirective, HeadingComponent, HelpButtonComponent, HelpButtonContentDirective, HelpButtonFooterDirective, HelpButtonHeaderDirective, ICON_SIZE_PROVIDER, IconButtonComponent, IconComponent, LabelComponent, LinkComponent, ListboxChild, ListboxComponent, ListboxInputDirective, MenuComponent, MenuIconComponent, MenuItemComponent, MenuPrimaryTextComponent, MenuSecondaryTextComponent, MenuSectionComponent, MenuTriggerDirective, ModalBackButtonDirective, ModalBodyComponent, ModalCloseButtonDirective, ModalFooterComponent, ModalFooterDirective, ModalHeaderComponent, ModalHeaderDirective, ModalLayoutComponent, ModalService, MultiSelectDirective, NotificationBadgeComponent, OptionComponent, OptionIconDirective, OptionPrimaryTextDirective, OptionSecondaryTextDirective, POPOVER_TRIGGER, PaginationComponent, PanelComponent, PanelTriggerDirective, ParagraphComponent, PopoverCloseButtonDirective, PopoverComponent, PopoverTitleDirective, PopoverTriggerDirective, PressedDirective, RadioComponent, RadioGroupComponent, SapphireBadgeModule, SapphireButtonModule, SapphireCheckboxModule, SapphireCheckboxRequiredValidator, SapphireCoreModule, SapphireFieldModule, SapphireHelpButtonModule, SapphireIconModule, SapphireLinkModule, SapphireListboxModule, SapphireMenuModule, SapphireModalModule, SapphireNotificationBadgeModule,
|
|
8779
|
+
export { BadgeComponent, BasicSelectComponent, BasicSingleSelectDirective, ButtonComponent, ButtonGroupComponent, ButtonIconDirective, CdkVirtualScrollViewportFixDirective, CheckboxChange, CheckboxComponent, CheckboxGroupComponent, ConfirmationDialogComponent, DEFAULT_BREAKPOINTS, DangerDialogComponent, DialogComponent, DialogTriggerDirective, FieldComponent, FieldControl, FieldErrorDirective, FieldLabelDirective, FieldNoteDirective, FieldNoteSuffixDirective, FocusedDirective, HeadingComponent, HelpButtonComponent, HelpButtonContentDirective, HelpButtonFooterDirective, HelpButtonHeaderDirective, ICON_SIZE_PROVIDER, IconButtonComponent, IconComponent, LabelComponent, LinkComponent, ListboxChild, ListboxComponent, ListboxInputDirective, MenuComponent, MenuIconComponent, MenuItemComponent, MenuPrimaryTextComponent, MenuSecondaryTextComponent, MenuSectionComponent, MenuTriggerDirective, ModalBackButtonDirective, ModalBodyComponent, ModalCloseButtonDirective, ModalFooterComponent, ModalFooterDirective, ModalHeaderComponent, ModalHeaderDirective, ModalLayoutComponent, ModalService, MultiSelectDirective, NotificationBadgeComponent, OptionComponent, OptionIconDirective, OptionPrimaryTextDirective, OptionSecondaryTextDirective, POPOVER_TRIGGER, PaginationComponent, PanelComponent, PanelTriggerDirective, ParagraphComponent, PopoverCloseButtonDirective, PopoverComponent, PopoverTitleDirective, PopoverTriggerDirective, PressedDirective, RadioComponent, RadioGroupComponent, SapphireBadgeModule, SapphireButtonModule, SapphireCheckboxModule, SapphireCheckboxRequiredValidator, SapphireCoreModule, SapphireFieldModule, SapphireHelpButtonModule, SapphireIconModule, SapphireLinkModule, SapphireListboxModule, SapphireMenuModule, SapphireModalModule, SapphireNotificationBadgeModule, SapphireOverlay, SapphirePaginationChange, SapphirePaginationModule, SapphirePopoverModule, SapphireRadioModule, SapphireSegmentedTabsModule, SapphireSelectModule, SapphireSkeletonModule, SapphireSurfaceModule, SapphireSwitchChange, SapphireSwitchModule, SapphireSwitchRequiredValidator, SapphireTableModule, SapphireTextFieldModule, SapphireThemeModule, SapphireToggleButtonRequiredValidator, SapphireTooltipModule, SapphireTypographyModule, ScrollMonitorDirective, SearchableSelectDirective, SectionDirective, SegmentedRadioComponent, SegmentedRadioGroupComponent, SegmentedTabComponent, SegmentedTabContentDirective, SegmentedTabLabelDirective, SegmentedTabsComponent, SelectComponent, SelectionTextDirective, SingleSelectDirective, SkeletonBlockDirective, SkeletonCircleDirective, SkeletonComponent, SkeletonTextDirective, SurfaceComponent, SwitchComponent, TableBodyDirective, TableCellDirective, TableComponent, TableDirective, TableFooterDirective, TableHeadCellComponent, TableHeadDirective, TableRowDirective, TableSortDirective, TableSortHeaderDirective, TextFieldComponent, TextFieldInputDirective, TextFieldPostfixDirective, TextFieldPrefixDirective, TextFieldTextareaAutosizeDirective, ThemeBaseDirective, ThemeCheckDirective, ThemeDefault, ThemeDefaultDark, ThemeRootDirective, ToggleButtonComponent, TooltipComponent, TooltipDirective, TranslatePipe, TranslateService, TruncatedWithTooltipDirective, UseComponentStyles, UseComponentStylesOnHost, ViewEncapsulationProvider };
|
|
8514
8780
|
//# sourceMappingURL=danske-sapphire-angular.mjs.map
|