@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,38 +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 === null || theme === void 0 ? void 0 : theme.applyOnDomNode(overlayRef.overlayElement);
|
|
92
|
+
if (overlayRef.backdropElement) {
|
|
93
|
+
theme === null || theme === void 0 ? void 0 : 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
|
-
|
|
80
|
-
}] }, { type: i1.Platform }];
|
|
81
|
-
} });
|
|
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
|
+
}] });
|
|
82
105
|
|
|
106
|
+
// import { SapphireOverlayContainer } from './sapphire-overlay-container.service';
|
|
83
107
|
class ThemeBaseDirective {
|
|
84
108
|
constructor(elementRef, renderer, themeRef, parentTheme) {
|
|
85
109
|
this.elementRef = elementRef;
|
|
@@ -107,52 +131,14 @@ class ThemeBaseDirective {
|
|
|
107
131
|
}
|
|
108
132
|
}
|
|
109
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 });
|
|
110
|
-
ThemeBaseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: ThemeBaseDirective, isStandalone: true, selector: "[_sp-theme-base]", providers: [
|
|
111
|
-
{
|
|
112
|
-
provide: OverlayContainer,
|
|
113
|
-
useFactory: (existingOverlayContainer, parentTheme, _this, document, platform) => {
|
|
114
|
-
if (!parentTheme || parentTheme.equals(_this)) {
|
|
115
|
-
return existingOverlayContainer;
|
|
116
|
-
}
|
|
117
|
-
return new SapphireOverlayContainer(document, platform);
|
|
118
|
-
},
|
|
119
|
-
deps: [
|
|
120
|
-
[new SkipSelf(), OverlayContainer],
|
|
121
|
-
[new SkipSelf(), new Optional(), forwardRef(() => ThemeBaseDirective)],
|
|
122
|
-
forwardRef(() => ThemeBaseDirective),
|
|
123
|
-
DOCUMENT,
|
|
124
|
-
Platform,
|
|
125
|
-
],
|
|
126
|
-
},
|
|
127
|
-
// It's important to provide a new instance of Overlay that uses the provided OverlayContainer
|
|
128
|
-
Overlay,
|
|
129
|
-
], 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 });
|
|
130
135
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ThemeBaseDirective, decorators: [{
|
|
131
136
|
type: Directive,
|
|
132
137
|
args: [{
|
|
133
138
|
selector: '[_sp-theme-base]',
|
|
134
139
|
// directive.
|
|
135
140
|
standalone: true,
|
|
136
|
-
providers: [
|
|
137
|
-
{
|
|
138
|
-
provide: OverlayContainer,
|
|
139
|
-
useFactory: (existingOverlayContainer, parentTheme, _this, document, platform) => {
|
|
140
|
-
if (!parentTheme || parentTheme.equals(_this)) {
|
|
141
|
-
return existingOverlayContainer;
|
|
142
|
-
}
|
|
143
|
-
return new SapphireOverlayContainer(document, platform);
|
|
144
|
-
},
|
|
145
|
-
deps: [
|
|
146
|
-
[new SkipSelf(), OverlayContainer],
|
|
147
|
-
[new SkipSelf(), new Optional(), forwardRef(() => ThemeBaseDirective)],
|
|
148
|
-
forwardRef(() => ThemeBaseDirective),
|
|
149
|
-
DOCUMENT,
|
|
150
|
-
Platform,
|
|
151
|
-
],
|
|
152
|
-
},
|
|
153
|
-
// It's important to provide a new instance of Overlay that uses the provided OverlayContainer
|
|
154
|
-
Overlay,
|
|
155
|
-
],
|
|
141
|
+
providers: [SapphireOverlay],
|
|
156
142
|
}]
|
|
157
143
|
}], ctorParameters: function () {
|
|
158
144
|
return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: TopLevelThemeRef }, { type: ThemeBaseDirective, decorators: [{
|
|
@@ -930,6 +916,51 @@ const AutoId = ({ prefix = 'generated' } = {}) => {
|
|
|
930
916
|
};
|
|
931
917
|
};
|
|
932
918
|
|
|
919
|
+
var optional$6 = "Valgfrit";
|
|
920
|
+
var da$2 = {
|
|
921
|
+
optional: optional$6
|
|
922
|
+
};
|
|
923
|
+
|
|
924
|
+
var optional$5 = "Optional";
|
|
925
|
+
var en$2 = {
|
|
926
|
+
optional: optional$5
|
|
927
|
+
};
|
|
928
|
+
|
|
929
|
+
var optional$4 = "Optional";
|
|
930
|
+
var de$2 = {
|
|
931
|
+
optional: optional$4
|
|
932
|
+
};
|
|
933
|
+
|
|
934
|
+
var optional$3 = "Valinnainen";
|
|
935
|
+
var fi$2 = {
|
|
936
|
+
optional: optional$3
|
|
937
|
+
};
|
|
938
|
+
|
|
939
|
+
var optional$2 = "Valgfritt";
|
|
940
|
+
var no$2 = {
|
|
941
|
+
optional: optional$2
|
|
942
|
+
};
|
|
943
|
+
|
|
944
|
+
var optional$1 = "Opcjonalny";
|
|
945
|
+
var pl$2 = {
|
|
946
|
+
optional: optional$1
|
|
947
|
+
};
|
|
948
|
+
|
|
949
|
+
var optional = "Valfritt";
|
|
950
|
+
var se$2 = {
|
|
951
|
+
optional: optional
|
|
952
|
+
};
|
|
953
|
+
|
|
954
|
+
const translations$2 = new MessageDictionary({
|
|
955
|
+
'da-DK': da$2,
|
|
956
|
+
'en-US': en$2,
|
|
957
|
+
'de-DE': de$2,
|
|
958
|
+
'fi-FI': fi$2,
|
|
959
|
+
'nb-NO': no$2,
|
|
960
|
+
'pl-PL': pl$2,
|
|
961
|
+
'sv-SE': se$2,
|
|
962
|
+
}, 'en-US');
|
|
963
|
+
|
|
933
964
|
/**
|
|
934
965
|
* Injection token which is provided by components that are meant to be rendered
|
|
935
966
|
* within sp-field.
|
|
@@ -1057,51 +1088,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
1057
1088
|
}]
|
|
1058
1089
|
}], ctorParameters: function () { return [{ type: TranslateService }, { type: i2$1.MessageDictionary }]; } });
|
|
1059
1090
|
|
|
1060
|
-
var optional$6 = "Valgfrit";
|
|
1061
|
-
var da$2 = {
|
|
1062
|
-
optional: optional$6
|
|
1063
|
-
};
|
|
1064
|
-
|
|
1065
|
-
var optional$5 = "Optional";
|
|
1066
|
-
var en$2 = {
|
|
1067
|
-
optional: optional$5
|
|
1068
|
-
};
|
|
1069
|
-
|
|
1070
|
-
var optional$4 = "Optional";
|
|
1071
|
-
var de$2 = {
|
|
1072
|
-
optional: optional$4
|
|
1073
|
-
};
|
|
1074
|
-
|
|
1075
|
-
var optional$3 = "Valinnainen";
|
|
1076
|
-
var fi$2 = {
|
|
1077
|
-
optional: optional$3
|
|
1078
|
-
};
|
|
1079
|
-
|
|
1080
|
-
var optional$2 = "Valgfritt";
|
|
1081
|
-
var no$2 = {
|
|
1082
|
-
optional: optional$2
|
|
1083
|
-
};
|
|
1084
|
-
|
|
1085
|
-
var optional$1 = "Opcjonalny";
|
|
1086
|
-
var pl$2 = {
|
|
1087
|
-
optional: optional$1
|
|
1088
|
-
};
|
|
1089
|
-
|
|
1090
|
-
var optional = "Valfritt";
|
|
1091
|
-
var se$2 = {
|
|
1092
|
-
optional: optional
|
|
1093
|
-
};
|
|
1094
|
-
|
|
1095
|
-
const translations$2 = new MessageDictionary({
|
|
1096
|
-
'da-DK': da$2,
|
|
1097
|
-
'en-US': en$2,
|
|
1098
|
-
'de-DE': de$2,
|
|
1099
|
-
'fi-FI': fi$2,
|
|
1100
|
-
'nb-NO': no$2,
|
|
1101
|
-
'pl-PL': pl$2,
|
|
1102
|
-
'sv-SE': se$2,
|
|
1103
|
-
}, 'en-US');
|
|
1104
|
-
|
|
1105
1091
|
/**
|
|
1106
1092
|
* Label UI, currently used exclusively in sp-field.
|
|
1107
1093
|
* @internal
|
|
@@ -1189,7 +1175,11 @@ const _RadioMixinBase = mixinTabIndex(mixinDisabled(class {
|
|
|
1189
1175
|
this._elementRef = _elementRef;
|
|
1190
1176
|
}
|
|
1191
1177
|
}));
|
|
1192
|
-
|
|
1178
|
+
/**
|
|
1179
|
+
* @Directive decorator is just to be able to have a constructor with DI.
|
|
1180
|
+
* This class is being extended by other components.
|
|
1181
|
+
**/
|
|
1182
|
+
class RadioBase extends _RadioMixinBase {
|
|
1193
1183
|
_getAriaChecked() {
|
|
1194
1184
|
return this.checked ? 'true' : 'false';
|
|
1195
1185
|
}
|
|
@@ -1262,6 +1252,7 @@ class RadioComponent extends _RadioMixinBase {
|
|
|
1262
1252
|
constructor(radioGroup, elementRef, tabIndex, _focusMonitor, _radioDispatcher) {
|
|
1263
1253
|
super(elementRef);
|
|
1264
1254
|
this.radioGroup = radioGroup;
|
|
1255
|
+
this.elementRef = elementRef;
|
|
1265
1256
|
this._focusMonitor = _focusMonitor;
|
|
1266
1257
|
this._radioDispatcher = _radioDispatcher;
|
|
1267
1258
|
/**
|
|
@@ -1388,22 +1379,16 @@ class RadioComponent extends _RadioMixinBase {
|
|
|
1388
1379
|
}
|
|
1389
1380
|
}
|
|
1390
1381
|
}
|
|
1391
|
-
|
|
1392
|
-
|
|
1382
|
+
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 });
|
|
1383
|
+
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 });
|
|
1393
1384
|
__decorate([
|
|
1394
1385
|
AutoId()
|
|
1395
|
-
],
|
|
1396
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type:
|
|
1397
|
-
type:
|
|
1398
|
-
args: [{
|
|
1399
|
-
'[attr.id]': 'id',
|
|
1400
|
-
'[attr.tabindex]': 'null',
|
|
1401
|
-
'[attr.aria-label]': 'null',
|
|
1402
|
-
'[attr.aria-labelledby]': 'null',
|
|
1403
|
-
'[attr.aria-describedby]': 'null',
|
|
1404
|
-
}, 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"] }]
|
|
1386
|
+
], RadioBase.prototype, "id", void 0);
|
|
1387
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: RadioBase, decorators: [{
|
|
1388
|
+
type: Directive,
|
|
1389
|
+
args: [{}]
|
|
1405
1390
|
}], ctorParameters: function () {
|
|
1406
|
-
return [{ type:
|
|
1391
|
+
return [{ type: RadioGroupBase, decorators: [{
|
|
1407
1392
|
type: Optional
|
|
1408
1393
|
}] }, { type: i0.ElementRef }, { type: undefined, decorators: [{
|
|
1409
1394
|
type: Attribute,
|
|
@@ -1443,7 +1428,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
1443
1428
|
type: Output
|
|
1444
1429
|
}] } });
|
|
1445
1430
|
|
|
1446
|
-
class
|
|
1431
|
+
class RadioComponent extends RadioBase {
|
|
1432
|
+
}
|
|
1433
|
+
RadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: RadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1434
|
+
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 });
|
|
1435
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: RadioComponent, decorators: [{
|
|
1436
|
+
type: Component,
|
|
1437
|
+
args: [{ selector: 'sp-radio', changeDetection: ChangeDetectionStrategy.Default, hostDirectives: [ThemeCheckDirective], inputs: ['tabIndex'], host: {
|
|
1438
|
+
'[attr.id]': 'id',
|
|
1439
|
+
'[attr.tabindex]': 'null',
|
|
1440
|
+
'[attr.aria-label]': 'null',
|
|
1441
|
+
'[attr.aria-labelledby]': 'null',
|
|
1442
|
+
'[attr.aria-describedby]': 'null',
|
|
1443
|
+
}, 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"] }]
|
|
1444
|
+
}] });
|
|
1445
|
+
|
|
1446
|
+
class RadioGroupBase {
|
|
1447
1447
|
/** Name of the radio button group. All radio buttons inside this group will use this name. */
|
|
1448
1448
|
get name() {
|
|
1449
1449
|
return this._name;
|
|
@@ -1546,11 +1546,6 @@ class RadioGroupComponent {
|
|
|
1546
1546
|
isDisabled() {
|
|
1547
1547
|
return this.disabled;
|
|
1548
1548
|
}
|
|
1549
|
-
_contentFocusChanged(focusOrigin) {
|
|
1550
|
-
if (!focusOrigin) {
|
|
1551
|
-
this.onTouched();
|
|
1552
|
-
}
|
|
1553
|
-
}
|
|
1554
1549
|
/** Updates the `selected` radio button from the internal _value state. */
|
|
1555
1550
|
updateSelectedRadioFromValue() {
|
|
1556
1551
|
// If the value already matches the selected radio, do nothing.
|
|
@@ -1573,36 +1568,16 @@ class RadioGroupComponent {
|
|
|
1573
1568
|
}
|
|
1574
1569
|
}
|
|
1575
1570
|
}
|
|
1576
|
-
|
|
1577
|
-
|
|
1578
|
-
{
|
|
1579
|
-
provide: NG_VALUE_ACCESSOR,
|
|
1580
|
-
useExisting: forwardRef(() => RadioGroupComponent),
|
|
1581
|
-
multi: true,
|
|
1582
|
-
},
|
|
1583
|
-
{
|
|
1584
|
-
provide: FieldControl,
|
|
1585
|
-
useExisting: forwardRef(() => RadioGroupComponent),
|
|
1586
|
-
},
|
|
1587
|
-
], queries: [{ propertyName: "radios", predicate: i0.forwardRef(function () { return RadioComponent; }), descendants: 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)=\"_contentFocusChanged($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
|
+
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 });
|
|
1572
|
+
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 });
|
|
1588
1573
|
__decorate([
|
|
1589
1574
|
AutoId()
|
|
1590
|
-
],
|
|
1591
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type:
|
|
1592
|
-
type:
|
|
1593
|
-
args: [{
|
|
1594
|
-
|
|
1595
|
-
|
|
1596
|
-
useExisting: forwardRef(() => RadioGroupComponent),
|
|
1597
|
-
multi: true,
|
|
1598
|
-
},
|
|
1599
|
-
{
|
|
1600
|
-
provide: FieldControl,
|
|
1601
|
-
useExisting: forwardRef(() => RadioGroupComponent),
|
|
1602
|
-
},
|
|
1603
|
-
], host: {
|
|
1604
|
-
role: 'radiogroup',
|
|
1605
|
-
}, 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)=\"_contentFocusChanged($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"] }]
|
|
1575
|
+
], RadioGroupBase.prototype, "uniqueId", void 0);
|
|
1576
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: RadioGroupBase, decorators: [{
|
|
1577
|
+
type: Directive,
|
|
1578
|
+
args: [{
|
|
1579
|
+
standalone: true,
|
|
1580
|
+
}]
|
|
1606
1581
|
}], ctorParameters: function () {
|
|
1607
1582
|
return [{ type: i0.ChangeDetectorRef }, { type: FieldComponent, decorators: [{
|
|
1608
1583
|
type: Optional
|
|
@@ -1628,6 +1603,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
1628
1603
|
args: [forwardRef(() => RadioComponent), { descendants: true }]
|
|
1629
1604
|
}] } });
|
|
1630
1605
|
|
|
1606
|
+
class RadioGroupComponent extends RadioGroupBase {
|
|
1607
|
+
constructor() {
|
|
1608
|
+
super(...arguments);
|
|
1609
|
+
this.orientation = 'vertical';
|
|
1610
|
+
}
|
|
1611
|
+
_onFocusChange(focusOrigin) {
|
|
1612
|
+
if (!focusOrigin) {
|
|
1613
|
+
this.onTouched();
|
|
1614
|
+
}
|
|
1615
|
+
}
|
|
1616
|
+
}
|
|
1617
|
+
RadioGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: RadioGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1618
|
+
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: [
|
|
1619
|
+
{
|
|
1620
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1621
|
+
useExisting: forwardRef(() => RadioGroupComponent),
|
|
1622
|
+
multi: true,
|
|
1623
|
+
},
|
|
1624
|
+
{
|
|
1625
|
+
provide: FieldControl,
|
|
1626
|
+
useExisting: forwardRef(() => RadioGroupComponent),
|
|
1627
|
+
},
|
|
1628
|
+
{
|
|
1629
|
+
provide: RadioGroupBase,
|
|
1630
|
+
useExisting: forwardRef(() => RadioGroupComponent),
|
|
1631
|
+
},
|
|
1632
|
+
], 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 });
|
|
1633
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: RadioGroupComponent, decorators: [{
|
|
1634
|
+
type: Component,
|
|
1635
|
+
args: [{ selector: 'sp-radio-group', changeDetection: ChangeDetectionStrategy.Default, providers: [
|
|
1636
|
+
{
|
|
1637
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1638
|
+
useExisting: forwardRef(() => RadioGroupComponent),
|
|
1639
|
+
multi: true,
|
|
1640
|
+
},
|
|
1641
|
+
{
|
|
1642
|
+
provide: FieldControl,
|
|
1643
|
+
useExisting: forwardRef(() => RadioGroupComponent),
|
|
1644
|
+
},
|
|
1645
|
+
{
|
|
1646
|
+
provide: RadioGroupBase,
|
|
1647
|
+
useExisting: forwardRef(() => RadioGroupComponent),
|
|
1648
|
+
},
|
|
1649
|
+
], host: {
|
|
1650
|
+
role: 'radiogroup',
|
|
1651
|
+
}, 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"] }]
|
|
1652
|
+
}], propDecorators: { orientation: [{
|
|
1653
|
+
type: Input
|
|
1654
|
+
}] } });
|
|
1655
|
+
|
|
1631
1656
|
/**
|
|
1632
1657
|
* A field is a common container for labelable controls such as select, radio group, text field,
|
|
1633
1658
|
* etc.
|
|
@@ -1706,6 +1731,16 @@ class FieldComponent {
|
|
|
1706
1731
|
}
|
|
1707
1732
|
return (_a = this.controls) === null || _a === void 0 ? void 0 : _a.toArray().every((control) => control.isDisabled());
|
|
1708
1733
|
}
|
|
1734
|
+
/**
|
|
1735
|
+
* If any of the controls should be constrained by the field's default widht
|
|
1736
|
+
*/
|
|
1737
|
+
controlHasDefaultWidth() {
|
|
1738
|
+
var _a;
|
|
1739
|
+
if (!this.controls || this.controls.length === 0) {
|
|
1740
|
+
return false;
|
|
1741
|
+
}
|
|
1742
|
+
return (_a = this.controls) === null || _a === void 0 ? void 0 : _a.toArray().some((control) => control.hasDefaultWidth);
|
|
1743
|
+
}
|
|
1709
1744
|
/**
|
|
1710
1745
|
* Only support features like `for` or `labelClick` if the field has one control.
|
|
1711
1746
|
*/
|
|
@@ -1719,7 +1754,7 @@ class FieldComponent {
|
|
|
1719
1754
|
/**
|
|
1720
1755
|
* Whether the field control is radio group (sp-radio-group).
|
|
1721
1756
|
*/
|
|
1722
|
-
|
|
1757
|
+
hasRadioGroupChild() {
|
|
1723
1758
|
return this.radioGroup != undefined;
|
|
1724
1759
|
}
|
|
1725
1760
|
get labelNecessityIndicator() {
|
|
@@ -1744,21 +1779,25 @@ class FieldComponent {
|
|
|
1744
1779
|
}
|
|
1745
1780
|
}
|
|
1746
1781
|
FieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: FieldComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1747
|
-
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\" &&
|
|
1782
|
+
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: [
|
|
1748
1783
|
{
|
|
1749
1784
|
provide: ICON_SIZE_PROVIDER,
|
|
1750
1785
|
useExisting: forwardRef(() => FieldComponent),
|
|
1751
1786
|
},
|
|
1752
|
-
], queries: [{ propertyName: "note", first: true, predicate: FieldNoteDirective, descendants: true }, { propertyName: "error", first: true, predicate: FieldErrorDirective, descendants: true }, { propertyName: "
|
|
1787
|
+
], 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"] }] });
|
|
1753
1788
|
__decorate([
|
|
1754
1789
|
CoerceBoolean
|
|
1755
1790
|
], FieldComponent.prototype, "necessityIndicator", void 0);
|
|
1791
|
+
__decorate([
|
|
1792
|
+
CoerceBoolean
|
|
1793
|
+
], FieldComponent.prototype, "noDefaultWidth", void 0);
|
|
1756
1794
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: FieldComponent, decorators: [{
|
|
1757
1795
|
type: Component,
|
|
1758
1796
|
args: [{ selector: 'sp-field', host: {
|
|
1759
1797
|
class: 'sapphire-field',
|
|
1760
1798
|
'[class.sapphire-field--label-placement-side]': 'labelPlacement === "side"',
|
|
1761
|
-
'[class.sapphire-field--
|
|
1799
|
+
'[class.sapphire-field--no-width]': 'noDefaultWidth || !controlHasDefaultWidth()',
|
|
1800
|
+
'[class.sapphire-field--label-alignment-top]': 'labelPlacement === "side" && hasRadioGroupChild()',
|
|
1762
1801
|
'[class.sapphire-field--md]': 'size === "md"',
|
|
1763
1802
|
'[class.sapphire-field--error]': 'hasError()',
|
|
1764
1803
|
'[class.is-disabled]': 'isDisabled()',
|
|
@@ -1767,11 +1806,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
1767
1806
|
provide: ICON_SIZE_PROVIDER,
|
|
1768
1807
|
useExisting: forwardRef(() => FieldComponent),
|
|
1769
1808
|
},
|
|
1770
|
-
], 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:
|
|
1809
|
+
], 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"] }]
|
|
1771
1810
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { necessityIndicator: [{
|
|
1772
1811
|
type: Input
|
|
1773
1812
|
}], labelPlacement: [{
|
|
1774
1813
|
type: Input
|
|
1814
|
+
}], noDefaultWidth: [{
|
|
1815
|
+
type: Input
|
|
1775
1816
|
}], size: [{
|
|
1776
1817
|
type: Input
|
|
1777
1818
|
}], note: [{
|
|
@@ -1780,9 +1821,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
1780
1821
|
}], error: [{
|
|
1781
1822
|
type: ContentChild,
|
|
1782
1823
|
args: [FieldErrorDirective]
|
|
1783
|
-
}], radioGroup: [{
|
|
1784
|
-
type: ContentChild,
|
|
1785
|
-
args: [RadioGroupComponent]
|
|
1786
1824
|
}], label: [{
|
|
1787
1825
|
type: ViewChild,
|
|
1788
1826
|
args: [LabelComponent]
|
|
@@ -1792,6 +1830,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
1792
1830
|
}], controls: [{
|
|
1793
1831
|
type: ContentChildren,
|
|
1794
1832
|
args: [FieldControl]
|
|
1833
|
+
}], radioGroup: [{
|
|
1834
|
+
type: ContentChild,
|
|
1835
|
+
args: [RadioGroupComponent]
|
|
1795
1836
|
}], requiredValidator: [{
|
|
1796
1837
|
type: ContentChild,
|
|
1797
1838
|
args: [RequiredValidator, { descendants: true }]
|
|
@@ -1983,6 +2024,12 @@ class CheckboxComponent extends _CheckboxMixinBase {
|
|
|
1983
2024
|
this._indeterminate = coerceBooleanProperty(value);
|
|
1984
2025
|
this.syncIndeterminate(this._indeterminate);
|
|
1985
2026
|
}
|
|
2027
|
+
get labelNecessityIndicator() {
|
|
2028
|
+
if (this.necessityIndicator) {
|
|
2029
|
+
return coerceBooleanProperty(this.required) ? 'required' : 'optional';
|
|
2030
|
+
}
|
|
2031
|
+
return undefined;
|
|
2032
|
+
}
|
|
1986
2033
|
// Implemented as part of ControlValueAccessor.
|
|
1987
2034
|
writeValue(value) {
|
|
1988
2035
|
this.selected = !!value;
|
|
@@ -2065,19 +2112,23 @@ class CheckboxComponent extends _CheckboxMixinBase {
|
|
|
2065
2112
|
}
|
|
2066
2113
|
}
|
|
2067
2114
|
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 });
|
|
2068
|
-
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: [
|
|
2115
|
+
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: [
|
|
2069
2116
|
{
|
|
2070
2117
|
provide: NG_VALUE_ACCESSOR,
|
|
2071
2118
|
useExisting: forwardRef(() => CheckboxComponent),
|
|
2072
2119
|
multi: true,
|
|
2073
2120
|
},
|
|
2074
|
-
|
|
2121
|
+
{ provide: MessageDictionary, useValue: translations$2 },
|
|
2122
|
+
], 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 });
|
|
2075
2123
|
__decorate([
|
|
2076
2124
|
AutoId()
|
|
2077
2125
|
], CheckboxComponent.prototype, "id", void 0);
|
|
2078
2126
|
__decorate([
|
|
2079
2127
|
CoerceBoolean
|
|
2080
2128
|
], CheckboxComponent.prototype, "required", void 0);
|
|
2129
|
+
__decorate([
|
|
2130
|
+
CoerceBoolean
|
|
2131
|
+
], CheckboxComponent.prototype, "necessityIndicator", void 0);
|
|
2081
2132
|
__decorate([
|
|
2082
2133
|
CoerceBoolean
|
|
2083
2134
|
], CheckboxComponent.prototype, "readonly", void 0);
|
|
@@ -2089,11 +2140,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
2089
2140
|
useExisting: forwardRef(() => CheckboxComponent),
|
|
2090
2141
|
multi: true,
|
|
2091
2142
|
},
|
|
2143
|
+
{ provide: MessageDictionary, useValue: translations$2 },
|
|
2092
2144
|
], host: {
|
|
2093
2145
|
'[attr.tabindex]': 'null',
|
|
2094
2146
|
'[attr.aria-label]': 'null',
|
|
2095
2147
|
'[attr.aria-labelledby]': 'null',
|
|
2096
|
-
}, 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\"
|
|
2148
|
+
}, 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"] }]
|
|
2097
2149
|
}], ctorParameters: function () {
|
|
2098
2150
|
return [{ type: CheckboxGroupComponent, decorators: [{
|
|
2099
2151
|
type: Optional
|
|
@@ -2116,6 +2168,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
2116
2168
|
type: Input
|
|
2117
2169
|
}], required: [{
|
|
2118
2170
|
type: Input
|
|
2171
|
+
}], necessityIndicator: [{
|
|
2172
|
+
type: Input
|
|
2119
2173
|
}], readonly: [{
|
|
2120
2174
|
type: Input
|
|
2121
2175
|
}], name: [{
|
|
@@ -2165,7 +2219,7 @@ class SapphireCheckboxModule {
|
|
|
2165
2219
|
SapphireCheckboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SapphireCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
2166
2220
|
SapphireCheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.0", ngImport: i0, type: SapphireCheckboxModule, declarations: [CheckboxComponent,
|
|
2167
2221
|
SapphireCheckboxRequiredValidator,
|
|
2168
|
-
CheckboxGroupComponent], imports: [CommonModule, FormsModule, A11yModule], exports: [CheckboxComponent,
|
|
2222
|
+
CheckboxGroupComponent], imports: [CommonModule, TranslatePipe, FormsModule, A11yModule], exports: [CheckboxComponent,
|
|
2169
2223
|
SapphireCheckboxRequiredValidator,
|
|
2170
2224
|
CheckboxGroupComponent] });
|
|
2171
2225
|
SapphireCheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SapphireCheckboxModule, imports: [CommonModule, FormsModule, A11yModule] });
|
|
@@ -2177,7 +2231,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
2177
2231
|
SapphireCheckboxRequiredValidator,
|
|
2178
2232
|
CheckboxGroupComponent,
|
|
2179
2233
|
],
|
|
2180
|
-
imports: [CommonModule, FormsModule, A11yModule],
|
|
2234
|
+
imports: [CommonModule, TranslatePipe, FormsModule, A11yModule],
|
|
2181
2235
|
exports: [
|
|
2182
2236
|
CheckboxComponent,
|
|
2183
2237
|
SapphireCheckboxRequiredValidator,
|
|
@@ -2200,7 +2254,7 @@ MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
|
|
|
2200
2254
|
provide: ICON_SIZE_PROVIDER,
|
|
2201
2255
|
useExisting: forwardRef(() => MenuComponent),
|
|
2202
2256
|
},
|
|
2203
|
-
], hostDirectives: [{ directive: i1$
|
|
2257
|
+
], 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"] });
|
|
2204
2258
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuComponent, decorators: [{
|
|
2205
2259
|
type: Component,
|
|
2206
2260
|
args: [{ selector: 'sp-menu', hostDirectives: [
|
|
@@ -2218,7 +2272,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
2218
2272
|
provide: ICON_SIZE_PROVIDER,
|
|
2219
2273
|
useExisting: forwardRef(() => MenuComponent),
|
|
2220
2274
|
},
|
|
2221
|
-
], 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{
|
|
2275
|
+
], 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"] }]
|
|
2222
2276
|
}], propDecorators: { size: [{
|
|
2223
2277
|
type: Input
|
|
2224
2278
|
}] } });
|
|
@@ -2226,7 +2280,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
2226
2280
|
class MenuItemComponent {
|
|
2227
2281
|
}
|
|
2228
2282
|
MenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2229
|
-
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$
|
|
2283
|
+
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]" }] });
|
|
2230
2284
|
__decorate([
|
|
2231
2285
|
CoerceBoolean
|
|
2232
2286
|
], MenuItemComponent.prototype, "disabled", void 0);
|
|
@@ -2417,21 +2471,21 @@ class MenuTriggerDirective {
|
|
|
2417
2471
|
return result.withViewportMargin(placement.includes('end') ? 0 : 6);
|
|
2418
2472
|
};
|
|
2419
2473
|
const originalOpen = menuTrigger.open;
|
|
2420
|
-
menuTrigger.open =
|
|
2474
|
+
menuTrigger.open = () => {
|
|
2421
2475
|
var _a;
|
|
2422
2476
|
// @ts-expect-error accessing private method
|
|
2423
2477
|
(_a = menuTrigger.overlayRef) === null || _a === void 0 ? void 0 : _a.updatePositionStrategy(
|
|
2424
2478
|
// @ts-expect-error accessing private method
|
|
2425
2479
|
menuTrigger._getOverlayPositionStrategy());
|
|
2426
|
-
originalOpen.call(
|
|
2480
|
+
originalOpen.call(menuTrigger);
|
|
2427
2481
|
};
|
|
2428
2482
|
}
|
|
2429
2483
|
getPlacementValue() {
|
|
2430
2484
|
return `${this.direction} ${this.align}`;
|
|
2431
2485
|
}
|
|
2432
2486
|
}
|
|
2433
|
-
MenuTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuTriggerDirective, deps: [{ token: i1$
|
|
2434
|
-
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$
|
|
2487
|
+
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 });
|
|
2488
|
+
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 });
|
|
2435
2489
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuTriggerDirective, decorators: [{
|
|
2436
2490
|
type: Directive,
|
|
2437
2491
|
args: [{
|
|
@@ -2443,12 +2497,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
2443
2497
|
outputs: ['cdkMenuOpened: spMenuOpened', 'cdkMenuClosed: spMenuClosed'],
|
|
2444
2498
|
},
|
|
2445
2499
|
],
|
|
2500
|
+
// CdkMenuTrigger uses Overlay directly
|
|
2501
|
+
providers: [{ provide: Overlay, useClass: SapphireOverlay }],
|
|
2446
2502
|
exportAs: 'spMenuTrigger',
|
|
2447
2503
|
host: {
|
|
2448
2504
|
'[class.is-active]': 'isOpen()',
|
|
2449
2505
|
},
|
|
2450
2506
|
}]
|
|
2451
|
-
}], ctorParameters: function () { return [{ type: i1$
|
|
2507
|
+
}], ctorParameters: function () { return [{ type: i1$1.CdkMenuTrigger }]; }, propDecorators: { align: [{
|
|
2452
2508
|
type: Input,
|
|
2453
2509
|
args: ['spMenuTriggerAlign']
|
|
2454
2510
|
}], direction: [{
|
|
@@ -2471,14 +2527,14 @@ class MenuSectionComponent {
|
|
|
2471
2527
|
return ((_a = this.menu.items) === null || _a === void 0 ? void 0 : _a.first) === this.firstMenuItem;
|
|
2472
2528
|
}
|
|
2473
2529
|
}
|
|
2474
|
-
MenuSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuSectionComponent, deps: [{ token: i1$
|
|
2475
|
-
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$
|
|
2530
|
+
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 });
|
|
2531
|
+
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]" }] });
|
|
2476
2532
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuSectionComponent, decorators: [{
|
|
2477
2533
|
type: Component,
|
|
2478
2534
|
args: [{ selector: 'sp-menu-section', hostDirectives: [CdkMenuGroup, UseComponentStyles], host: {
|
|
2479
2535
|
'[class.sapphire-listbox__section]': 'true',
|
|
2480
2536
|
}, template: "<div\n *ngIf=\"!_isFirstSection()\"\n class=\"sapphire-listbox__separator\"\n _spUseComponentStyles\n></div>\n<ng-content></ng-content>\n" }]
|
|
2481
|
-
}], ctorParameters: function () { return [{ type: i1$
|
|
2537
|
+
}], ctorParameters: function () { return [{ type: i1$1.CdkMenu }]; }, propDecorators: { firstMenuItem: [{
|
|
2482
2538
|
type: ContentChild,
|
|
2483
2539
|
args: [CdkMenuItem]
|
|
2484
2540
|
}] } });
|
|
@@ -2588,9 +2644,9 @@ class PopoverTriggerDirective {
|
|
|
2588
2644
|
var _a, _b;
|
|
2589
2645
|
return (_b = (_a = this.overlayRef) === null || _a === void 0 ? void 0 : _a.hostElement.querySelector('[role="dialog"]')) === null || _b === void 0 ? void 0 : _b.id;
|
|
2590
2646
|
}
|
|
2591
|
-
constructor(changeDetectorRef,
|
|
2647
|
+
constructor(changeDetectorRef, overlay, viewContainerRef, elementRef, injector) {
|
|
2592
2648
|
this.changeDetectorRef = changeDetectorRef;
|
|
2593
|
-
this.
|
|
2649
|
+
this.overlay = overlay;
|
|
2594
2650
|
this.viewContainerRef = viewContainerRef;
|
|
2595
2651
|
this.elementRef = elementRef;
|
|
2596
2652
|
this.injector = injector;
|
|
@@ -2643,7 +2699,7 @@ class PopoverTriggerDirective {
|
|
|
2643
2699
|
if (!this.isOpen() && this.templateRef != null && !this.disabled) {
|
|
2644
2700
|
this.opened.next();
|
|
2645
2701
|
if (!this.overlayRef) {
|
|
2646
|
-
this.overlayRef = this.
|
|
2702
|
+
this.overlayRef = this.overlay.create(this.getOverlayConfig());
|
|
2647
2703
|
this.overlayRef.updatePositionStrategy(this.getOverlayPositionStrategy());
|
|
2648
2704
|
this.overlayRef.detachments().subscribe(() => {
|
|
2649
2705
|
this.closed.next();
|
|
@@ -2758,9 +2814,9 @@ class PopoverTriggerDirective {
|
|
|
2758
2814
|
return new OverlayConfig({
|
|
2759
2815
|
scrollStrategy: this.nonModal
|
|
2760
2816
|
? this.closeOnScroll
|
|
2761
|
-
? this.
|
|
2762
|
-
: this.
|
|
2763
|
-
: this.
|
|
2817
|
+
? this.overlay.scrollStrategies.close()
|
|
2818
|
+
: this.overlay.scrollStrategies.reposition()
|
|
2819
|
+
: this.overlay.scrollStrategies.block(),
|
|
2764
2820
|
// Including a transparent backdrop according to the latest decision of making popovers modal.
|
|
2765
2821
|
hasBackdrop: !this.nonModal,
|
|
2766
2822
|
backdropClass: 'cdk-overlay-transparent-backdrop',
|
|
@@ -2777,7 +2833,7 @@ class PopoverTriggerDirective {
|
|
|
2777
2833
|
}
|
|
2778
2834
|
getOverlayPositionStrategy() {
|
|
2779
2835
|
const placement = this.placement || 'bottom';
|
|
2780
|
-
return (this.
|
|
2836
|
+
return (this.overlay
|
|
2781
2837
|
.position()
|
|
2782
2838
|
.flexibleConnectedTo(this.elementRef)
|
|
2783
2839
|
.withLockedPosition()
|
|
@@ -2806,7 +2862,7 @@ class PopoverTriggerDirective {
|
|
|
2806
2862
|
.withViewportMargin(placement.includes('end') ? 0 : 6));
|
|
2807
2863
|
}
|
|
2808
2864
|
}
|
|
2809
|
-
PopoverTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PopoverTriggerDirective, deps: [{ token: i0.ChangeDetectorRef }, { token:
|
|
2865
|
+
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 });
|
|
2810
2866
|
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: [
|
|
2811
2867
|
{ provide: POPOVER_TRIGGER, useExisting: PopoverTriggerDirective },
|
|
2812
2868
|
], exportAs: ["spPopoverTrigger"], ngImport: i0 });
|
|
@@ -2838,7 +2894,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
2838
2894
|
},
|
|
2839
2895
|
exportAs: 'spPopoverTrigger',
|
|
2840
2896
|
}]
|
|
2841
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type:
|
|
2897
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SapphireOverlay }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i0.Injector }]; }, propDecorators: { placement: [{
|
|
2842
2898
|
type: Input,
|
|
2843
2899
|
args: ['spPopoverPlacement']
|
|
2844
2900
|
}], templateRef: [{
|
|
@@ -2975,7 +3031,7 @@ class PopoverComponent {
|
|
|
2975
3031
|
}
|
|
2976
3032
|
}
|
|
2977
3033
|
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 });
|
|
2978
|
-
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-
|
|
3034
|
+
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"] }] });
|
|
2979
3035
|
__decorate([
|
|
2980
3036
|
CoerceBoolean
|
|
2981
3037
|
], PopoverComponent.prototype, "noPadding", void 0);
|
|
@@ -2995,7 +3051,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
2995
3051
|
'[class.sapphire-popover--padded]': '!noPadding',
|
|
2996
3052
|
'[class.sapphire-popover--max-width]': '!noMaxWidth',
|
|
2997
3053
|
role: 'presentation',
|
|
2998
|
-
}, 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-
|
|
3054
|
+
}, 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"] }]
|
|
2999
3055
|
}], ctorParameters: function () {
|
|
3000
3056
|
return [{ type: undefined, decorators: [{
|
|
3001
3057
|
type: Optional
|
|
@@ -3231,6 +3287,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
3231
3287
|
class TextFieldComponent {
|
|
3232
3288
|
constructor(field) {
|
|
3233
3289
|
this.field = field;
|
|
3290
|
+
this.hasDefaultWidth = true;
|
|
3234
3291
|
}
|
|
3235
3292
|
isCharacterCounterExceeded() {
|
|
3236
3293
|
var _a, _b;
|
|
@@ -3252,7 +3309,7 @@ TextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
|
|
|
3252
3309
|
provide: FieldControl,
|
|
3253
3310
|
useExisting: forwardRef(() => TextFieldComponent),
|
|
3254
3311
|
},
|
|
3255
|
-
], 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{
|
|
3312
|
+
], 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]" }] });
|
|
3256
3313
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TextFieldComponent, decorators: [{
|
|
3257
3314
|
type: Component,
|
|
3258
3315
|
args: [{ selector: 'sp-text-field', host: {
|
|
@@ -3265,7 +3322,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
3265
3322
|
provide: FieldControl,
|
|
3266
3323
|
useExisting: forwardRef(() => TextFieldComponent),
|
|
3267
3324
|
},
|
|
3268
|
-
], 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{
|
|
3325
|
+
], 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"] }]
|
|
3269
3326
|
}], ctorParameters: function () {
|
|
3270
3327
|
return [{ type: FieldComponent, decorators: [{
|
|
3271
3328
|
type: Optional
|
|
@@ -3457,7 +3514,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
3457
3514
|
class OptionIconDirective {
|
|
3458
3515
|
}
|
|
3459
3516
|
OptionIconDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: OptionIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3460
|
-
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
|
|
3517
|
+
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"] }] });
|
|
3461
3518
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: OptionIconDirective, decorators: [{
|
|
3462
3519
|
type: Component,
|
|
3463
3520
|
args: [{
|
|
@@ -3475,7 +3532,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
3475
3532
|
class OptionSecondaryTextDirective {
|
|
3476
3533
|
}
|
|
3477
3534
|
OptionSecondaryTextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: OptionSecondaryTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3478
|
-
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
|
|
3535
|
+
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"] }] });
|
|
3479
3536
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: OptionSecondaryTextDirective, decorators: [{
|
|
3480
3537
|
type: Component,
|
|
3481
3538
|
args: [{
|
|
@@ -3636,7 +3693,7 @@ class CdkOptionScrollIssuePatch {
|
|
|
3636
3693
|
}
|
|
3637
3694
|
}
|
|
3638
3695
|
}
|
|
3639
|
-
CdkOptionScrollIssuePatch.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: CdkOptionScrollIssuePatch, deps: [{ token: i1$
|
|
3696
|
+
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 });
|
|
3640
3697
|
CdkOptionScrollIssuePatch.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: CdkOptionScrollIssuePatch, isStandalone: true, selector: "[cdkOption]", ngImport: i0 });
|
|
3641
3698
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: CdkOptionScrollIssuePatch, decorators: [{
|
|
3642
3699
|
type: Directive,
|
|
@@ -3644,7 +3701,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
3644
3701
|
selector: '[cdkOption]',
|
|
3645
3702
|
standalone: true,
|
|
3646
3703
|
}]
|
|
3647
|
-
}], ctorParameters: function () { return [{ type: i1$
|
|
3704
|
+
}], ctorParameters: function () { return [{ type: i1$2.CdkListbox }, { type: i1$2.CdkOption }, { type: i0.ElementRef }]; } });
|
|
3648
3705
|
|
|
3649
3706
|
/**
|
|
3650
3707
|
* JS-based :active state for non-button clickable elements.
|
|
@@ -3775,7 +3832,7 @@ class ListboxItemComponent {
|
|
|
3775
3832
|
}
|
|
3776
3833
|
}
|
|
3777
3834
|
ListboxItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ListboxItemComponent, deps: [{ token: PressedDirective }], target: i0.ɵɵFactoryTarget.Component });
|
|
3778
|
-
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
|
|
3835
|
+
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]" }] });
|
|
3779
3836
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ListboxItemComponent, decorators: [{
|
|
3780
3837
|
type: Component,
|
|
3781
3838
|
args: [{ selector: 'li[sp-listbox-item]', host: {
|
|
@@ -4003,7 +4060,7 @@ ListboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
|
|
|
4003
4060
|
useExisting: forwardRef(() => ListboxComponent),
|
|
4004
4061
|
},
|
|
4005
4062
|
ViewEncapsulationProvider,
|
|
4006
|
-
], 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"] }] });
|
|
4063
|
+
], 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"] }] });
|
|
4007
4064
|
__decorate([
|
|
4008
4065
|
CoerceBoolean
|
|
4009
4066
|
], ListboxComponent.prototype, "disabled", void 0);
|
|
@@ -4029,7 +4086,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
4029
4086
|
], host: {
|
|
4030
4087
|
'[attr.aria-label]': 'null',
|
|
4031
4088
|
'[attr.aria-labelledby]': 'null',
|
|
4032
|
-
}, 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{
|
|
4089
|
+
}, 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"] }]
|
|
4033
4090
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { selectedValues: [{
|
|
4034
4091
|
type: Input
|
|
4035
4092
|
}], selectedValuesChange: [{
|
|
@@ -4818,6 +4875,7 @@ class SelectComponent extends SelectComponentBase {
|
|
|
4818
4875
|
*/
|
|
4819
4876
|
this._valueContainerId = '';
|
|
4820
4877
|
this.destroyed = new Subject();
|
|
4878
|
+
this.hasDefaultWidth = true;
|
|
4821
4879
|
}
|
|
4822
4880
|
ngAfterViewInit() {
|
|
4823
4881
|
super.ngAfterViewInit();
|
|
@@ -5023,7 +5081,7 @@ SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
|
|
|
5023
5081
|
provide: FieldControl,
|
|
5024
5082
|
useExisting: forwardRef(() => SelectComponent),
|
|
5025
5083
|
},
|
|
5026
|
-
], 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:
|
|
5084
|
+
], 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" }] });
|
|
5027
5085
|
__decorate([
|
|
5028
5086
|
AutoId()
|
|
5029
5087
|
], SelectComponent.prototype, "_valueContainerId", void 0);
|
|
@@ -5053,7 +5111,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
5053
5111
|
'[attr.aria-label]': 'null',
|
|
5054
5112
|
'[attr.aria-labelledby]': 'null',
|
|
5055
5113
|
'[attr.placeholder]': 'null',
|
|
5056
|
-
}, 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:
|
|
5114
|
+
}, 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"] }]
|
|
5057
5115
|
}], ctorParameters: function () {
|
|
5058
5116
|
return [{ type: SelectValueHolder }, { type: i2$2.FocusMonitor }, { type: i2$2.InputModalityDetector }, { type: FieldComponent, decorators: [{
|
|
5059
5117
|
type: Optional
|
|
@@ -5156,7 +5214,7 @@ BasicSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
|
|
|
5156
5214
|
useExisting: forwardRef(() => BasicSelectComponent),
|
|
5157
5215
|
},
|
|
5158
5216
|
ViewEncapsulationProvider,
|
|
5159
|
-
], 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:
|
|
5217
|
+
], 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" }] });
|
|
5160
5218
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: BasicSelectComponent, decorators: [{
|
|
5161
5219
|
type: Component,
|
|
5162
5220
|
args: [{ selector: 'sp-basic-select', exportAs: 'spBasicSelect', providers: [
|
|
@@ -5173,7 +5231,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
5173
5231
|
], host: {
|
|
5174
5232
|
'[attr.aria-label]': 'null',
|
|
5175
5233
|
'[attr.aria-labelledby]': 'null',
|
|
5176
|
-
}, 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:
|
|
5234
|
+
}, 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"] }]
|
|
5177
5235
|
}], ctorParameters: function () { return [{ type: SelectValueHolder }, { type: i2$2.FocusMonitor }]; }, propDecorators: { size: [{
|
|
5178
5236
|
type: Input
|
|
5179
5237
|
}], variant: [{
|
|
@@ -5389,7 +5447,7 @@ class SegmentedTabComponent {
|
|
|
5389
5447
|
}
|
|
5390
5448
|
}
|
|
5391
5449
|
SegmentedTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SegmentedTabComponent, deps: [{ token: forwardRef(() => SegmentedTabsComponent) }], target: i0.ɵɵFactoryTarget.Component });
|
|
5392
|
-
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]" }] });
|
|
5450
|
+
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]" }] });
|
|
5393
5451
|
__decorate([
|
|
5394
5452
|
AutoId()
|
|
5395
5453
|
], SegmentedTabComponent.prototype, "id", void 0);
|
|
@@ -5399,7 +5457,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
5399
5457
|
// Angular specific styles that are needed due to extra dom elements added by angular
|
|
5400
5458
|
'[style.flex]': "'1 1 auto'",
|
|
5401
5459
|
'[style.display]': "'inline-flex'",
|
|
5402
|
-
}, 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"] }]
|
|
5460
|
+
}, 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"] }]
|
|
5403
5461
|
}], ctorParameters: function () {
|
|
5404
5462
|
return [{ type: SegmentedTabsComponent, decorators: [{
|
|
5405
5463
|
type: Inject,
|
|
@@ -5442,7 +5500,7 @@ class SegmentedTabsComponent {
|
|
|
5442
5500
|
this.selectedIndexChange = new EventEmitter();
|
|
5443
5501
|
this.tabs = new QueryList();
|
|
5444
5502
|
this._tabIds = [];
|
|
5445
|
-
this.
|
|
5503
|
+
this._gliderStyles = { left: '0px', width: '0px' };
|
|
5446
5504
|
this._animationEnabled = false;
|
|
5447
5505
|
this._focusVisible = false;
|
|
5448
5506
|
this.skipAnimationFrame();
|
|
@@ -5464,17 +5522,17 @@ class SegmentedTabsComponent {
|
|
|
5464
5522
|
// changed after it was checked" angular error.
|
|
5465
5523
|
//
|
|
5466
5524
|
// https://angular.io/errors/NG0100
|
|
5467
|
-
this.
|
|
5525
|
+
this.setGliderStyles();
|
|
5468
5526
|
this.changeDetector.detectChanges();
|
|
5469
5527
|
this.resizeObserver = new ResizeObserver(() => {
|
|
5470
5528
|
// zonejs doesn't monkey-patch resize observer (yet)
|
|
5471
5529
|
this.zone.run(() => {
|
|
5472
|
-
this.
|
|
5530
|
+
this.setGliderStyles();
|
|
5473
5531
|
});
|
|
5474
5532
|
});
|
|
5475
5533
|
this.resizeObserver.observe(this.segmentedControl.nativeElement);
|
|
5476
5534
|
this.selectedIndexChange.subscribe(() => {
|
|
5477
|
-
this.
|
|
5535
|
+
this.setGliderStyles();
|
|
5478
5536
|
});
|
|
5479
5537
|
}
|
|
5480
5538
|
ngOnDestroy() {
|
|
@@ -5483,7 +5541,7 @@ class SegmentedTabsComponent {
|
|
|
5483
5541
|
this.selectedIndexChange.unsubscribe();
|
|
5484
5542
|
}
|
|
5485
5543
|
ngAfterViewChecked() {
|
|
5486
|
-
this.
|
|
5544
|
+
this.setGliderStyles();
|
|
5487
5545
|
this.changeDetector.detectChanges();
|
|
5488
5546
|
}
|
|
5489
5547
|
getFocusedTab() {
|
|
@@ -5556,12 +5614,19 @@ class SegmentedTabsComponent {
|
|
|
5556
5614
|
return;
|
|
5557
5615
|
}
|
|
5558
5616
|
}
|
|
5559
|
-
|
|
5617
|
+
setGliderStyles() {
|
|
5618
|
+
const { offsetLeft, clientWidth } = this.getSelectedTabPosition();
|
|
5619
|
+
this._gliderStyles = {
|
|
5620
|
+
left: `${offsetLeft}px`,
|
|
5621
|
+
width: `${clientWidth}px`,
|
|
5622
|
+
};
|
|
5623
|
+
}
|
|
5624
|
+
getSelectedTabPosition() {
|
|
5560
5625
|
var _a, _b;
|
|
5561
5626
|
const tab = (_b = (_a = this.tabs.toArray()[this.selectedIndex]) === null || _a === void 0 ? void 0 : _a._button) === null || _b === void 0 ? void 0 : _b.nativeElement;
|
|
5562
|
-
|
|
5563
|
-
|
|
5564
|
-
|
|
5627
|
+
return {
|
|
5628
|
+
offsetLeft: (tab === null || tab === void 0 ? void 0 : tab.offsetLeft) || 0,
|
|
5629
|
+
clientWidth: (tab === null || tab === void 0 ? void 0 : tab.clientWidth) || 0,
|
|
5565
5630
|
};
|
|
5566
5631
|
}
|
|
5567
5632
|
onTabsChange() {
|
|
@@ -5612,7 +5677,7 @@ class SegmentedTabsComponent {
|
|
|
5612
5677
|
}
|
|
5613
5678
|
}
|
|
5614
5679
|
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 });
|
|
5615
|
-
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]=\"
|
|
5680
|
+
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"] }] });
|
|
5616
5681
|
__decorate([
|
|
5617
5682
|
CoerceBoolean
|
|
5618
5683
|
], SegmentedTabsComponent.prototype, "disabled", void 0);
|
|
@@ -5620,7 +5685,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
5620
5685
|
type: Component,
|
|
5621
5686
|
args: [{ selector: 'sp-segmented-tabs', providers: [ViewEncapsulationProvider], exportAs: 'spSegmentedTabs', host: {
|
|
5622
5687
|
'[attr.align]': 'null',
|
|
5623
|
-
}, 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]=\"
|
|
5688
|
+
}, 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"] }]
|
|
5624
5689
|
}], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { segmentedControl: [{
|
|
5625
5690
|
type: ViewChild,
|
|
5626
5691
|
args: ['segmentedControl']
|
|
@@ -5822,15 +5887,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
5822
5887
|
args: ['mouseleave']
|
|
5823
5888
|
}] } });
|
|
5824
5889
|
|
|
5825
|
-
|
|
5826
|
-
|
|
5827
|
-
|
|
5828
|
-
|
|
5829
|
-
|
|
5830
|
-
|
|
5831
|
-
/**
|
|
5832
|
-
|
|
5833
|
-
|
|
5890
|
+
/**
|
|
5891
|
+
* Sapphire default theme
|
|
5892
|
+
*/
|
|
5893
|
+
class ThemeDefault {
|
|
5894
|
+
}
|
|
5895
|
+
ThemeDefault.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ThemeDefault, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5896
|
+
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"] });
|
|
5897
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ThemeDefault, decorators: [{
|
|
5898
|
+
type: Component,
|
|
5899
|
+
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"] }]
|
|
5900
|
+
}] });
|
|
5901
|
+
/**
|
|
5902
|
+
* Sapphire default theme
|
|
5903
|
+
*/
|
|
5904
|
+
class ThemeDefaultDark {
|
|
5905
|
+
}
|
|
5906
|
+
ThemeDefaultDark.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ThemeDefaultDark, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5907
|
+
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"] });
|
|
5908
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ThemeDefaultDark, decorators: [{
|
|
5909
|
+
type: Component,
|
|
5910
|
+
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"] }]
|
|
5911
|
+
}] });
|
|
5912
|
+
|
|
5913
|
+
/**
|
|
5914
|
+
* Applies the current theme style on an element which is not under the rendered
|
|
5915
|
+
* sp-theme, in DOM tree. Useful for non-Sapphire portal components that render things in body.
|
|
5916
|
+
*
|
|
5917
|
+
*/
|
|
5918
|
+
class ThemeRootDirective {
|
|
5919
|
+
constructor(elementRef, themeRef, parentTheme) {
|
|
5920
|
+
const theme = parentTheme || themeRef.theme;
|
|
5921
|
+
theme.applyOnDomNode(elementRef.nativeElement);
|
|
5922
|
+
}
|
|
5923
|
+
}
|
|
5924
|
+
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 });
|
|
5925
|
+
ThemeRootDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: ThemeRootDirective, isStandalone: true, selector: "[sp-theme-root]", ngImport: i0 });
|
|
5926
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ThemeRootDirective, decorators: [{
|
|
5927
|
+
type: Directive,
|
|
5928
|
+
args: [{
|
|
5929
|
+
selector: '[sp-theme-root]',
|
|
5930
|
+
standalone: true,
|
|
5931
|
+
}]
|
|
5932
|
+
}], ctorParameters: function () {
|
|
5933
|
+
return [{ type: i0.ElementRef }, { type: TopLevelThemeRef }, { type: ThemeBaseDirective, decorators: [{
|
|
5934
|
+
type: Optional
|
|
5935
|
+
}, {
|
|
5936
|
+
type: SkipSelf
|
|
5937
|
+
}] }];
|
|
5938
|
+
} });
|
|
5939
|
+
|
|
5940
|
+
/**
|
|
5941
|
+
* - Makes sure currently applied theme is applied on overlays which are rendered as portal
|
|
5942
|
+
* - Provides `THEME_ATTRIBUTE` injectable via sp-theme component. Useful when a custom component
|
|
5943
|
+
* needs to render a portal with the currently applied theme class.
|
|
5944
|
+
*/
|
|
5945
|
+
class SapphireThemeModule {
|
|
5946
|
+
}
|
|
5947
|
+
SapphireThemeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SapphireThemeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
5948
|
+
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] });
|
|
5949
|
+
SapphireThemeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SapphireThemeModule, imports: [OverlayModule, ThemeDefault, ThemeDefaultDark] });
|
|
5950
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SapphireThemeModule, decorators: [{
|
|
5951
|
+
type: NgModule,
|
|
5952
|
+
args: [{
|
|
5953
|
+
declarations: [],
|
|
5954
|
+
imports: [OverlayModule, ThemeRootDirective, ThemeDefault, ThemeDefaultDark],
|
|
5955
|
+
exports: [ThemeRootDirective, ThemeDefault, ThemeDefaultDark],
|
|
5956
|
+
}]
|
|
5957
|
+
}] });
|
|
5958
|
+
|
|
5959
|
+
// We have separate public_api.ts file for each angular module, to have them
|
|
5960
|
+
/**
|
|
5961
|
+
* Exporting "tokens.size.breakpoint" is not good enough.
|
|
5962
|
+
* That is a map from breakpoint name to a a string which is the css variable
|
|
5963
|
+
* that will have the breakpoint size. This is not useful in a JS context.
|
|
5964
|
+
*
|
|
5965
|
+
* TODO: export something which uses the "tokens.size.breakpoint" and offers
|
|
5966
|
+
* something usabled in JS.
|
|
5967
|
+
*/
|
|
5968
|
+
const DEFAULT_BREAKPOINTS = {
|
|
5969
|
+
XS: 576,
|
|
5970
|
+
S: 768,
|
|
5971
|
+
M: 960,
|
|
5972
|
+
L: 1200,
|
|
5973
|
+
XL: 1400,
|
|
5974
|
+
};
|
|
5975
|
+
|
|
5976
|
+
const tooltips = {};
|
|
5977
|
+
let globalWarmedUp = false;
|
|
5978
|
+
let globalWarmUpTimeout = null;
|
|
5979
|
+
let globalCooldownTimeout = null;
|
|
5980
|
+
const TOOLTIP_COOLDOWN = 500;
|
|
5981
|
+
class TooltipDirective {
|
|
5982
|
+
/**
|
|
5983
|
+
* The amount of time that has to pass before tooltip will show
|
|
5984
|
+
* upon user interaction activating it – aka "warm up" period.
|
|
5834
5985
|
*
|
|
5835
5986
|
* @default 500
|
|
5836
5987
|
*/
|
|
@@ -6005,7 +6156,7 @@ class TooltipDirective {
|
|
|
6005
6156
|
};
|
|
6006
6157
|
}
|
|
6007
6158
|
}
|
|
6008
|
-
TooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TooltipDirective, deps: [{ token:
|
|
6159
|
+
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 });
|
|
6009
6160
|
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 });
|
|
6010
6161
|
__decorate([
|
|
6011
6162
|
AutoId()
|
|
@@ -6024,7 +6175,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
6024
6175
|
},
|
|
6025
6176
|
exportAs: 'spTooltip',
|
|
6026
6177
|
}]
|
|
6027
|
-
}], ctorParameters: function () { return [{ type:
|
|
6178
|
+
}], ctorParameters: function () { return [{ type: SapphireOverlay }, { type: i0.ElementRef }]; }, propDecorators: { id: [], tooltipText: [{
|
|
6028
6179
|
type: Input,
|
|
6029
6180
|
args: ['spTooltip']
|
|
6030
6181
|
}], delay: [{
|
|
@@ -6502,6 +6653,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
6502
6653
|
args: ['class']
|
|
6503
6654
|
}] } });
|
|
6504
6655
|
|
|
6656
|
+
/**
|
|
6657
|
+
* A patch to fix the issue of sticky header position getting affected
|
|
6658
|
+
* by transform, which is due to transform making the element
|
|
6659
|
+
* a [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block).
|
|
6660
|
+
*
|
|
6661
|
+
* It intercepts style assignments on the content wrapper, and converts
|
|
6662
|
+
* transform: translateY(value) to top: value, to avoid making the content
|
|
6663
|
+
* wrapper a containing block for sticky positioned children.
|
|
6664
|
+
*
|
|
6665
|
+
* @see
|
|
6666
|
+
* https://github.com/angular/components/issues/14833
|
|
6667
|
+
* https://github.com/angular/components/issues/18240
|
|
6668
|
+
* https://github.com/angular/components/issues/21576
|
|
6669
|
+
* https://github.com/angular/components/issues/28584
|
|
6670
|
+
*/
|
|
6671
|
+
class CdkVirtualScrollViewportFixDirective {
|
|
6672
|
+
constructor(cdkViewport) {
|
|
6673
|
+
this.cdkViewport = cdkViewport;
|
|
6674
|
+
}
|
|
6675
|
+
ngOnInit() {
|
|
6676
|
+
const contentWrapper = this.cdkViewport._contentWrapper.nativeElement;
|
|
6677
|
+
/**
|
|
6678
|
+
* Proxy to set `top: {value}px` instead of `transform: translateY({value}px)`
|
|
6679
|
+
* whenever `style.transform` is set.
|
|
6680
|
+
*/
|
|
6681
|
+
const styleProxy = new Proxy(contentWrapper.style, {
|
|
6682
|
+
set: (target, prop, value) => {
|
|
6683
|
+
var _a;
|
|
6684
|
+
const top = prop === 'transform'
|
|
6685
|
+
? (_a = value === null || value === void 0 ? void 0 : value.match(/translateY\((\d+)px\)/)) === null || _a === void 0 ? void 0 : _a[1]
|
|
6686
|
+
: undefined;
|
|
6687
|
+
if (top) {
|
|
6688
|
+
target['top'] = `${top}px`;
|
|
6689
|
+
return true;
|
|
6690
|
+
}
|
|
6691
|
+
target[prop] = value;
|
|
6692
|
+
return true;
|
|
6693
|
+
},
|
|
6694
|
+
});
|
|
6695
|
+
// Not directly setting style proxy to contentWrapper.style, to limit
|
|
6696
|
+
// it to the styles set by CdkVirtualScrollViewport.
|
|
6697
|
+
// i.e. only setting `top` instead of `transform`, when set by cdk viewport.
|
|
6698
|
+
this.cdkViewport._contentWrapper.nativeElement = new Proxy(contentWrapper, {
|
|
6699
|
+
get: (target, prop) => {
|
|
6700
|
+
return prop === 'style' ? styleProxy : target[prop];
|
|
6701
|
+
},
|
|
6702
|
+
});
|
|
6703
|
+
}
|
|
6704
|
+
}
|
|
6705
|
+
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 });
|
|
6706
|
+
CdkVirtualScrollViewportFixDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: CdkVirtualScrollViewportFixDirective, isStandalone: true, selector: "cdk-virtual-scroll-viewport", ngImport: i0 });
|
|
6707
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: CdkVirtualScrollViewportFixDirective, decorators: [{
|
|
6708
|
+
type: Directive,
|
|
6709
|
+
args: [{
|
|
6710
|
+
selector: 'cdk-virtual-scroll-viewport',
|
|
6711
|
+
standalone: true,
|
|
6712
|
+
}]
|
|
6713
|
+
}], ctorParameters: function () { return [{ type: i1$3.CdkVirtualScrollViewport }]; } });
|
|
6714
|
+
|
|
6505
6715
|
class SapphireTableModule {
|
|
6506
6716
|
}
|
|
6507
6717
|
SapphireTableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SapphireTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
@@ -6517,6 +6727,7 @@ SapphireTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ver
|
|
|
6517
6727
|
TableSortHeaderDirective], imports: [CommonModule,
|
|
6518
6728
|
SapphireIconModule,
|
|
6519
6729
|
TruncatedWithTooltipDirective,
|
|
6730
|
+
CdkVirtualScrollViewportFixDirective,
|
|
6520
6731
|
UseComponentStyles], exports: [TableComponent,
|
|
6521
6732
|
TableDirective,
|
|
6522
6733
|
TableBodyDirective,
|
|
@@ -6526,7 +6737,8 @@ SapphireTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ver
|
|
|
6526
6737
|
TableHeadCellComponent,
|
|
6527
6738
|
TableCellDirective,
|
|
6528
6739
|
TableSortDirective,
|
|
6529
|
-
TableSortHeaderDirective
|
|
6740
|
+
TableSortHeaderDirective,
|
|
6741
|
+
CdkVirtualScrollViewportFixDirective] });
|
|
6530
6742
|
SapphireTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SapphireTableModule, imports: [CommonModule,
|
|
6531
6743
|
SapphireIconModule] });
|
|
6532
6744
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SapphireTableModule, decorators: [{
|
|
@@ -6548,6 +6760,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
6548
6760
|
CommonModule,
|
|
6549
6761
|
SapphireIconModule,
|
|
6550
6762
|
TruncatedWithTooltipDirective,
|
|
6763
|
+
CdkVirtualScrollViewportFixDirective,
|
|
6551
6764
|
UseComponentStyles,
|
|
6552
6765
|
],
|
|
6553
6766
|
exports: [
|
|
@@ -6561,6 +6774,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
6561
6774
|
TableCellDirective,
|
|
6562
6775
|
TableSortDirective,
|
|
6563
6776
|
TableSortHeaderDirective,
|
|
6777
|
+
CdkVirtualScrollViewportFixDirective,
|
|
6564
6778
|
],
|
|
6565
6779
|
}]
|
|
6566
6780
|
}] });
|
|
@@ -6860,128 +7074,188 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
6860
7074
|
}]
|
|
6861
7075
|
}] });
|
|
6862
7076
|
|
|
6863
|
-
|
|
6864
|
-
|
|
6865
|
-
|
|
6866
|
-
|
|
6867
|
-
|
|
6868
|
-
|
|
6869
|
-
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"] });
|
|
6870
|
-
|
|
6871
|
-
|
|
6872
|
-
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"] }]
|
|
6873
|
-
|
|
6874
|
-
|
|
6875
|
-
|
|
6876
|
-
|
|
6877
|
-
|
|
6878
|
-
|
|
6879
|
-
|
|
6880
|
-
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"] });
|
|
6881
|
-
|
|
6882
|
-
|
|
6883
|
-
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"] }]
|
|
6884
|
-
|
|
6885
|
-
|
|
6886
|
-
|
|
6887
|
-
|
|
6888
|
-
|
|
6889
|
-
|
|
6890
|
-
|
|
6891
|
-
|
|
6892
|
-
|
|
6893
|
-
|
|
6894
|
-
|
|
7077
|
+
class SegmentedRadioGroupComponent extends RadioGroupBase {
|
|
7078
|
+
constructor(zone, changeDetector) {
|
|
7079
|
+
super(changeDetector, undefined);
|
|
7080
|
+
this.zone = zone;
|
|
7081
|
+
this.changeDetector = changeDetector;
|
|
7082
|
+
/** Size of tabs */
|
|
7083
|
+
this.size = 'md';
|
|
7084
|
+
/**
|
|
7085
|
+
* Alignment of tabs' buttons group.
|
|
7086
|
+
* @default 'left'
|
|
7087
|
+
*/
|
|
7088
|
+
this.align = 'left';
|
|
7089
|
+
this._gliderStyles = { left: '0px', width: '0px' };
|
|
7090
|
+
this._animationEnabled = false;
|
|
7091
|
+
this._focusVisible = false;
|
|
7092
|
+
this.skipAnimationFrame();
|
|
7093
|
+
}
|
|
7094
|
+
skipAnimationFrame() {
|
|
7095
|
+
// We want to avoid animation on first render and whenever tab content changes
|
|
7096
|
+
this._animationEnabled = false;
|
|
7097
|
+
requestAnimationFrame(() => {
|
|
7098
|
+
this._animationEnabled = true;
|
|
7099
|
+
});
|
|
7100
|
+
}
|
|
7101
|
+
setGliderStyles() {
|
|
7102
|
+
const { offsetLeft, clientWidth } = this.getSelectedTabPosition();
|
|
7103
|
+
this._gliderStyles = {
|
|
7104
|
+
left: `${offsetLeft}px`,
|
|
7105
|
+
width: `${clientWidth}px`,
|
|
7106
|
+
};
|
|
7107
|
+
}
|
|
7108
|
+
getSelectedTabPosition() {
|
|
7109
|
+
var _a;
|
|
7110
|
+
const selected = (_a = this.selected) === null || _a === void 0 ? void 0 : _a.elementRef.nativeElement;
|
|
7111
|
+
return {
|
|
7112
|
+
offsetLeft: (selected === null || selected === void 0 ? void 0 : selected.offsetLeft) || 0,
|
|
7113
|
+
clientWidth: (selected === null || selected === void 0 ? void 0 : selected.clientWidth) || 0,
|
|
7114
|
+
};
|
|
7115
|
+
}
|
|
7116
|
+
shouldUpdateGliderStyles() {
|
|
7117
|
+
const { offsetLeft, clientWidth } = this.getSelectedTabPosition();
|
|
7118
|
+
return (`${offsetLeft}px` !== this._gliderStyles.left ||
|
|
7119
|
+
`${clientWidth}px` !== this._gliderStyles.width);
|
|
7120
|
+
}
|
|
7121
|
+
ngAfterViewInit() {
|
|
7122
|
+
this.setGliderStyles();
|
|
7123
|
+
this.resizeObserver = new ResizeObserver(() => {
|
|
7124
|
+
if (this.shouldUpdateGliderStyles()) {
|
|
7125
|
+
// zonejs doesn't monkey-patch resize observer (yet)
|
|
7126
|
+
this.zone.run(() => {
|
|
7127
|
+
this.setGliderStyles();
|
|
7128
|
+
});
|
|
7129
|
+
}
|
|
7130
|
+
});
|
|
7131
|
+
this.resizeObserver.observe(this.segmentedControl.nativeElement);
|
|
7132
|
+
this.change.subscribe(() => {
|
|
7133
|
+
this.setGliderStyles();
|
|
7134
|
+
});
|
|
7135
|
+
}
|
|
7136
|
+
ngAfterViewChecked() {
|
|
7137
|
+
this.setGliderStyles();
|
|
7138
|
+
this.changeDetector.detectChanges();
|
|
7139
|
+
}
|
|
7140
|
+
ngOnDestroy() {
|
|
7141
|
+
var _a;
|
|
7142
|
+
(_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this.segmentedControl.nativeElement);
|
|
7143
|
+
this.change.unsubscribe();
|
|
7144
|
+
}
|
|
7145
|
+
_onFocusChange(focusOrigin) {
|
|
7146
|
+
this._focusVisible = focusOrigin === 'keyboard';
|
|
7147
|
+
if (!focusOrigin) {
|
|
7148
|
+
this.onTouched();
|
|
7149
|
+
}
|
|
6895
7150
|
}
|
|
6896
7151
|
}
|
|
6897
|
-
|
|
6898
|
-
|
|
6899
|
-
|
|
6900
|
-
|
|
6901
|
-
|
|
6902
|
-
|
|
6903
|
-
|
|
6904
|
-
|
|
6905
|
-
|
|
6906
|
-
|
|
6907
|
-
|
|
6908
|
-
|
|
6909
|
-
|
|
6910
|
-
|
|
6911
|
-
|
|
7152
|
+
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 });
|
|
7153
|
+
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: [
|
|
7154
|
+
ViewEncapsulationProvider,
|
|
7155
|
+
{
|
|
7156
|
+
provide: NG_VALUE_ACCESSOR,
|
|
7157
|
+
useExisting: forwardRef(() => SegmentedRadioGroupComponent),
|
|
7158
|
+
multi: true,
|
|
7159
|
+
},
|
|
7160
|
+
{
|
|
7161
|
+
provide: FieldControl,
|
|
7162
|
+
useExisting: forwardRef(() => SegmentedRadioGroupComponent),
|
|
7163
|
+
},
|
|
7164
|
+
{
|
|
7165
|
+
provide: RadioGroupBase,
|
|
7166
|
+
useExisting: forwardRef(() => SegmentedRadioGroupComponent),
|
|
7167
|
+
},
|
|
7168
|
+
], 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 });
|
|
7169
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SegmentedRadioGroupComponent, decorators: [{
|
|
7170
|
+
type: Component,
|
|
7171
|
+
args: [{ selector: 'sp-segmented-radio-group', changeDetection: ChangeDetectionStrategy.Default, providers: [
|
|
7172
|
+
ViewEncapsulationProvider,
|
|
7173
|
+
{
|
|
7174
|
+
provide: NG_VALUE_ACCESSOR,
|
|
7175
|
+
useExisting: forwardRef(() => SegmentedRadioGroupComponent),
|
|
7176
|
+
multi: true,
|
|
7177
|
+
},
|
|
7178
|
+
{
|
|
7179
|
+
provide: FieldControl,
|
|
7180
|
+
useExisting: forwardRef(() => SegmentedRadioGroupComponent),
|
|
7181
|
+
},
|
|
7182
|
+
{
|
|
7183
|
+
provide: RadioGroupBase,
|
|
7184
|
+
useExisting: forwardRef(() => SegmentedRadioGroupComponent),
|
|
7185
|
+
},
|
|
7186
|
+
], 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"] }]
|
|
7187
|
+
}], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { segmentedControl: [{
|
|
7188
|
+
type: ViewChild,
|
|
7189
|
+
args: ['segmentedControl']
|
|
7190
|
+
}], ariaLabel: [{
|
|
7191
|
+
type: Input,
|
|
7192
|
+
args: ['aria-label']
|
|
7193
|
+
}], size: [{
|
|
7194
|
+
type: Input
|
|
7195
|
+
}], align: [{
|
|
7196
|
+
type: Input
|
|
7197
|
+
}] } });
|
|
6912
7198
|
|
|
6913
|
-
|
|
6914
|
-
* - Makes sure currently applied theme is applied on overlays which are rendered as portal
|
|
6915
|
-
* - Provides `THEME_ATTRIBUTE` injectable via sp-theme component. Useful when a custom component
|
|
6916
|
-
* needs to render a portal with the currently applied theme class.
|
|
6917
|
-
*/
|
|
6918
|
-
class SapphireThemeModule {
|
|
7199
|
+
class SegmentedRadioComponent extends RadioBase {
|
|
6919
7200
|
}
|
|
6920
|
-
|
|
6921
|
-
|
|
6922
|
-
|
|
6923
|
-
|
|
6924
|
-
|
|
6925
|
-
|
|
6926
|
-
|
|
6927
|
-
|
|
6928
|
-
|
|
6929
|
-
|
|
6930
|
-
|
|
6931
|
-
|
|
6932
|
-
|
|
6933
|
-
|
|
6934
|
-
], imports: [OverlayModule, ThemeDefault, ThemeDefaultDark] });
|
|
6935
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SapphireThemeModule, decorators: [{
|
|
6936
|
-
type: NgModule,
|
|
6937
|
-
args: [{
|
|
6938
|
-
declarations: [],
|
|
6939
|
-
providers: [
|
|
6940
|
-
/**
|
|
6941
|
-
* Since we want to provide SapphireOverlayContainer as OverlayContainer token,
|
|
6942
|
-
* we can't just { providedIn: 'root' } to provide the default overlay container.
|
|
6943
|
-
* A side effect of that is that in lazy-loaded modules, a new instance of
|
|
6944
|
-
* SapphireOverlayContainer will be created, which is not ideal, but it should be ok,
|
|
6945
|
-
* since sp-theme-* components that are supposed to be rendered at top level provide
|
|
6946
|
-
* OverlayContainer (and Overlay) which will take precedent over the global
|
|
6947
|
-
* OverlayContainer that's only used in services like ModalService.
|
|
6948
|
-
* We could also follow the `forRoot` pattern, but it unnecessarily complicates the API.
|
|
6949
|
-
*/
|
|
6950
|
-
{ provide: OverlayContainer, useClass: SapphireOverlayContainer },
|
|
6951
|
-
],
|
|
6952
|
-
imports: [OverlayModule, ThemeRootDirective, ThemeDefault, ThemeDefaultDark],
|
|
6953
|
-
exports: [ThemeRootDirective, ThemeDefault, ThemeDefaultDark],
|
|
6954
|
-
}]
|
|
7201
|
+
SegmentedRadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SegmentedRadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
7202
|
+
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 });
|
|
7203
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SegmentedRadioComponent, decorators: [{
|
|
7204
|
+
type: Component,
|
|
7205
|
+
args: [{ selector: 'sp-segmented-radio', changeDetection: ChangeDetectionStrategy.Default, hostDirectives: [ThemeCheckDirective, UseComponentStyles], inputs: ['tabIndex'], host: {
|
|
7206
|
+
class: 'sapphire-segmented-control__button',
|
|
7207
|
+
'[class.sapphire-segmented-control__button--disabled]': 'disabled',
|
|
7208
|
+
'[class.sapphire-segmented-control__button--active]': 'checked',
|
|
7209
|
+
'[attr.id]': 'id',
|
|
7210
|
+
'[attr.tabindex]': 'null',
|
|
7211
|
+
'[attr.aria-label]': 'null',
|
|
7212
|
+
'[attr.aria-labelledby]': 'null',
|
|
7213
|
+
'[attr.aria-describedby]': 'null',
|
|
7214
|
+
}, 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" }]
|
|
6955
7215
|
}] });
|
|
6956
7216
|
|
|
6957
|
-
// We have separate public_api.ts file for each angular module, to have them
|
|
6958
|
-
/**
|
|
6959
|
-
* Exporting "tokens.size.breakpoint" is not good enough.
|
|
6960
|
-
* That is a map from breakpoint name to a a string which is the css variable
|
|
6961
|
-
* that will have the breakpoint size. This is not useful in a JS context.
|
|
6962
|
-
*
|
|
6963
|
-
* TODO: export something which uses the "tokens.size.breakpoint" and offers
|
|
6964
|
-
* something usabled in JS.
|
|
6965
|
-
*/
|
|
6966
|
-
const DEFAULT_BREAKPOINTS = {
|
|
6967
|
-
XS: 576,
|
|
6968
|
-
S: 768,
|
|
6969
|
-
M: 960,
|
|
6970
|
-
L: 1200,
|
|
6971
|
-
XL: 1400,
|
|
6972
|
-
};
|
|
6973
|
-
|
|
6974
7217
|
class SapphireRadioModule {
|
|
6975
7218
|
}
|
|
6976
7219
|
SapphireRadioModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SapphireRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
6977
|
-
SapphireRadioModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.0", ngImport: i0, type: SapphireRadioModule, declarations: [RadioComponent,
|
|
6978
|
-
|
|
7220
|
+
SapphireRadioModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.0", ngImport: i0, type: SapphireRadioModule, declarations: [RadioComponent,
|
|
7221
|
+
RadioGroupComponent,
|
|
7222
|
+
SegmentedRadioComponent,
|
|
7223
|
+
SegmentedRadioGroupComponent], imports: [CommonModule,
|
|
7224
|
+
LabelComponent,
|
|
7225
|
+
A11yModule,
|
|
7226
|
+
SapphireFieldModule,
|
|
7227
|
+
UseComponentStyles], exports: [RadioComponent,
|
|
7228
|
+
RadioGroupComponent,
|
|
7229
|
+
SegmentedRadioComponent,
|
|
7230
|
+
SegmentedRadioGroupComponent,
|
|
7231
|
+
SapphireFieldModule] });
|
|
7232
|
+
SapphireRadioModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SapphireRadioModule, imports: [CommonModule,
|
|
7233
|
+
LabelComponent,
|
|
7234
|
+
A11yModule,
|
|
7235
|
+
SapphireFieldModule, SapphireFieldModule] });
|
|
6979
7236
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SapphireRadioModule, decorators: [{
|
|
6980
7237
|
type: NgModule,
|
|
6981
7238
|
args: [{
|
|
6982
|
-
declarations: [
|
|
6983
|
-
|
|
6984
|
-
|
|
7239
|
+
declarations: [
|
|
7240
|
+
RadioComponent,
|
|
7241
|
+
RadioGroupComponent,
|
|
7242
|
+
SegmentedRadioComponent,
|
|
7243
|
+
SegmentedRadioGroupComponent,
|
|
7244
|
+
],
|
|
7245
|
+
imports: [
|
|
7246
|
+
CommonModule,
|
|
7247
|
+
LabelComponent,
|
|
7248
|
+
A11yModule,
|
|
7249
|
+
SapphireFieldModule,
|
|
7250
|
+
UseComponentStyles,
|
|
7251
|
+
],
|
|
7252
|
+
exports: [
|
|
7253
|
+
RadioComponent,
|
|
7254
|
+
RadioGroupComponent,
|
|
7255
|
+
SegmentedRadioComponent,
|
|
7256
|
+
SegmentedRadioGroupComponent,
|
|
7257
|
+
SapphireFieldModule,
|
|
7258
|
+
],
|
|
6985
7259
|
}]
|
|
6986
7260
|
}] });
|
|
6987
7261
|
|
|
@@ -7009,6 +7283,7 @@ class ModalService {
|
|
|
7009
7283
|
],
|
|
7010
7284
|
positionStrategy,
|
|
7011
7285
|
});
|
|
7286
|
+
this.overlay.applyTheme(dialogRef.overlayRef, options.theme);
|
|
7012
7287
|
const close = dialogRef.close.bind(dialogRef);
|
|
7013
7288
|
dialogRef.immediateClose = close;
|
|
7014
7289
|
dialogRef.closing = false;
|
|
@@ -7045,12 +7320,12 @@ class ModalService {
|
|
|
7045
7320
|
return this.open(componentOrTemplateRef, options, this.overlay.position().global().right());
|
|
7046
7321
|
}
|
|
7047
7322
|
}
|
|
7048
|
-
ModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalService, deps: [{ token: i1$
|
|
7323
|
+
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 });
|
|
7049
7324
|
ModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalService, providedIn: 'root' });
|
|
7050
7325
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalService, decorators: [{
|
|
7051
7326
|
type: Injectable,
|
|
7052
7327
|
args: [{ providedIn: 'root' }]
|
|
7053
|
-
}], ctorParameters: function () { return [{ type: i1$
|
|
7328
|
+
}], ctorParameters: function () { return [{ type: i1$4.Dialog }, { type: SapphireOverlay }]; } });
|
|
7054
7329
|
|
|
7055
7330
|
/**
|
|
7056
7331
|
* Monitors host element's **scrolled** and **scrollable** state.
|
|
@@ -7168,7 +7443,7 @@ class ModalCloseButtonDirective {
|
|
|
7168
7443
|
(_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.close();
|
|
7169
7444
|
}
|
|
7170
7445
|
}
|
|
7171
|
-
ModalCloseButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalCloseButtonDirective, deps: [{ token: TranslateService }, { token: i1$
|
|
7446
|
+
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 });
|
|
7172
7447
|
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 });
|
|
7173
7448
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalCloseButtonDirective, decorators: [{
|
|
7174
7449
|
type: Directive,
|
|
@@ -7179,7 +7454,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
7179
7454
|
},
|
|
7180
7455
|
}]
|
|
7181
7456
|
}], ctorParameters: function () {
|
|
7182
|
-
return [{ type: TranslateService }, { type: i1$
|
|
7457
|
+
return [{ type: TranslateService }, { type: i1$4.DialogRef, decorators: [{
|
|
7183
7458
|
type: Optional
|
|
7184
7459
|
}] }];
|
|
7185
7460
|
}, propDecorators: { close: [{
|
|
@@ -7302,7 +7577,7 @@ class ModalBaseComponent {
|
|
|
7302
7577
|
this.dialogRef.immediateClose();
|
|
7303
7578
|
}
|
|
7304
7579
|
}
|
|
7305
|
-
ModalBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalBaseComponent, deps: [{ token: i1$
|
|
7580
|
+
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 });
|
|
7306
7581
|
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 });
|
|
7307
7582
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalBaseComponent, decorators: [{
|
|
7308
7583
|
type: Component,
|
|
@@ -7317,7 +7592,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
7317
7592
|
'[attr.role]': 'null',
|
|
7318
7593
|
},
|
|
7319
7594
|
}]
|
|
7320
|
-
}], ctorParameters: function () { return [{ type: i1$
|
|
7595
|
+
}], ctorParameters: function () { return [{ type: i1$4.DialogRef }]; }, propDecorators: { ariaLabel: [{
|
|
7321
7596
|
type: Input,
|
|
7322
7597
|
args: ['aria-label']
|
|
7323
7598
|
}], ariaLabelledBy: [{
|
|
@@ -7348,7 +7623,7 @@ class DialogComponent extends ModalBaseComponent {
|
|
|
7348
7623
|
this.size = 'sm';
|
|
7349
7624
|
}
|
|
7350
7625
|
}
|
|
7351
|
-
DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DialogComponent, deps: [{ token: i1$
|
|
7626
|
+
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 });
|
|
7352
7627
|
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"] });
|
|
7353
7628
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DialogComponent, decorators: [{
|
|
7354
7629
|
type: Component,
|
|
@@ -7360,7 +7635,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
7360
7635
|
'[class.sapphire-dialog--lg]': "size === 'lg'",
|
|
7361
7636
|
'[class.sapphire-dialog--exiting]': 'dialogRef.closing',
|
|
7362
7637
|
}, 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"] }]
|
|
7363
|
-
}], ctorParameters: function () { return [{ type: i1$
|
|
7638
|
+
}], ctorParameters: function () { return [{ type: i1$4.DialogRef }]; }, propDecorators: { size: [{
|
|
7364
7639
|
type: Input
|
|
7365
7640
|
}] } });
|
|
7366
7641
|
|
|
@@ -7434,6 +7709,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
7434
7709
|
* Makes a clickable element a trigger for a modal
|
|
7435
7710
|
*/
|
|
7436
7711
|
class ModalTriggerDirective {
|
|
7712
|
+
constructor() {
|
|
7713
|
+
this.templateRef = null;
|
|
7714
|
+
this._dismissable = false;
|
|
7715
|
+
this._keyboardDismissDisabled = false;
|
|
7716
|
+
this.modalService = inject(ModalService);
|
|
7717
|
+
this.theme = inject(ThemeBaseDirective);
|
|
7718
|
+
}
|
|
7437
7719
|
get dismissable() {
|
|
7438
7720
|
return this._dismissable;
|
|
7439
7721
|
}
|
|
@@ -7446,18 +7728,12 @@ class ModalTriggerDirective {
|
|
|
7446
7728
|
set keyboardDismissDisabled(value) {
|
|
7447
7729
|
this._keyboardDismissDisabled = coerceBooleanProperty(value);
|
|
7448
7730
|
}
|
|
7449
|
-
constructor(modalService) {
|
|
7450
|
-
this.modalService = modalService;
|
|
7451
|
-
this.templateRef = null;
|
|
7452
|
-
this._dismissable = false;
|
|
7453
|
-
this._keyboardDismissDisabled = false;
|
|
7454
|
-
}
|
|
7455
7731
|
close() {
|
|
7456
7732
|
var _a;
|
|
7457
7733
|
(_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.close();
|
|
7458
7734
|
}
|
|
7459
7735
|
}
|
|
7460
|
-
ModalTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalTriggerDirective, deps: [
|
|
7736
|
+
ModalTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
7461
7737
|
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 });
|
|
7462
7738
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalTriggerDirective, decorators: [{
|
|
7463
7739
|
type: Directive,
|
|
@@ -7467,23 +7743,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
7467
7743
|
},
|
|
7468
7744
|
standalone: true,
|
|
7469
7745
|
}]
|
|
7470
|
-
}]
|
|
7746
|
+
}] });
|
|
7471
7747
|
|
|
7472
7748
|
/**
|
|
7473
7749
|
* Makes a clickable element a trigger for a dialog.
|
|
7474
7750
|
*/
|
|
7475
7751
|
class DialogTriggerDirective extends ModalTriggerDirective {
|
|
7476
|
-
constructor(modalService) {
|
|
7477
|
-
super(modalService);
|
|
7478
|
-
this.modalService = modalService;
|
|
7479
|
-
}
|
|
7480
7752
|
open() {
|
|
7481
7753
|
if (this.templateRef) {
|
|
7482
7754
|
this.dialogRef = this.modalService.openDialog(this.templateRef, this);
|
|
7483
7755
|
}
|
|
7484
7756
|
}
|
|
7485
7757
|
}
|
|
7486
|
-
DialogTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DialogTriggerDirective, deps:
|
|
7758
|
+
DialogTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DialogTriggerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
7487
7759
|
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 });
|
|
7488
7760
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DialogTriggerDirective, decorators: [{
|
|
7489
7761
|
type: Directive,
|
|
@@ -7496,7 +7768,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
7496
7768
|
],
|
|
7497
7769
|
exportAs: 'spDialogTrigger',
|
|
7498
7770
|
}]
|
|
7499
|
-
}],
|
|
7771
|
+
}], propDecorators: { open: [{
|
|
7500
7772
|
type: HostListener,
|
|
7501
7773
|
args: ['click']
|
|
7502
7774
|
}] } });
|
|
@@ -7628,7 +7900,7 @@ class PanelComponent extends ModalBaseComponent {
|
|
|
7628
7900
|
this.size = 'lg';
|
|
7629
7901
|
}
|
|
7630
7902
|
}
|
|
7631
|
-
PanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PanelComponent, deps: [{ token: i1$
|
|
7903
|
+
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 });
|
|
7632
7904
|
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"] });
|
|
7633
7905
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PanelComponent, decorators: [{
|
|
7634
7906
|
type: Component,
|
|
@@ -7637,7 +7909,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
7637
7909
|
'[class.sapphire-panel--sm]': 'size === "sm"',
|
|
7638
7910
|
'[class.sapphire-panel--visible]': '!dialogRef.closing',
|
|
7639
7911
|
}, 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"] }]
|
|
7640
|
-
}], ctorParameters: function () { return [{ type: i1$
|
|
7912
|
+
}], ctorParameters: function () { return [{ type: i1$4.DialogRef }]; }, propDecorators: { size: [{
|
|
7641
7913
|
type: Input
|
|
7642
7914
|
}] } });
|
|
7643
7915
|
|
|
@@ -7645,10 +7917,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
7645
7917
|
* Makes a clickable element a trigger for a panel.
|
|
7646
7918
|
*/
|
|
7647
7919
|
class PanelTriggerDirective extends ModalTriggerDirective {
|
|
7648
|
-
constructor(modalService) {
|
|
7649
|
-
super(modalService);
|
|
7650
|
-
this.modalService = modalService;
|
|
7651
|
-
}
|
|
7652
7920
|
open() {
|
|
7653
7921
|
if (!this.templateRef) {
|
|
7654
7922
|
throw new Error('Template referenced by modal trigger not found.');
|
|
@@ -7656,7 +7924,7 @@ class PanelTriggerDirective extends ModalTriggerDirective {
|
|
|
7656
7924
|
this.dialogRef = this.modalService.openPanel(this.templateRef, this);
|
|
7657
7925
|
}
|
|
7658
7926
|
}
|
|
7659
|
-
PanelTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PanelTriggerDirective, deps:
|
|
7927
|
+
PanelTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PanelTriggerDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
7660
7928
|
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 });
|
|
7661
7929
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PanelTriggerDirective, decorators: [{
|
|
7662
7930
|
type: Directive,
|
|
@@ -7669,7 +7937,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
7669
7937
|
],
|
|
7670
7938
|
exportAs: 'spPanelTrigger',
|
|
7671
7939
|
}]
|
|
7672
|
-
}],
|
|
7940
|
+
}], propDecorators: { open: [{
|
|
7673
7941
|
type: HostListener,
|
|
7674
7942
|
args: ['click']
|
|
7675
7943
|
}] } });
|
|
@@ -8646,5 +8914,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
8646
8914
|
* Generated bundle index. Do not edit.
|
|
8647
8915
|
*/
|
|
8648
8916
|
|
|
8649
|
-
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,
|
|
8917
|
+
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 };
|
|
8650
8918
|
//# sourceMappingURL=danske-sapphire-angular.mjs.map
|