@danske/sapphire-angular 3.2.0 → 3.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/button/src/button.component.mjs +14 -4
- package/esm2020/lib/button/src/toggle-button.component.mjs +2 -2
- package/esm2020/lib/checkbox/src/checkbox.component.mjs +2 -2
- package/esm2020/lib/field/src/field.component.mjs +4 -5
- package/esm2020/lib/icon/src/icon.component.mjs +3 -3
- package/esm2020/lib/label/src/label.component.mjs +3 -3
- package/esm2020/lib/link/src/link.component.mjs +2 -2
- package/esm2020/lib/list/src/list.component.mjs +15 -3
- package/esm2020/lib/modal/public_api.mjs +3 -1
- package/esm2020/lib/modal/src/dialog/confirmation-dialog.component.mjs +1 -1
- package/esm2020/lib/modal/src/dialog/danger-dialog.component.mjs +1 -1
- package/esm2020/lib/modal/src/dialog/dialog.component.mjs +2 -2
- package/esm2020/lib/modal/src/layout/modal-header.component.mjs +3 -3
- package/esm2020/lib/modal/src/layout/modal-layout.component.mjs +2 -2
- package/esm2020/lib/modal/src/layout/modal-section-title.directive.mjs +14 -0
- package/esm2020/lib/modal/src/layout/modal-section.component.mjs +25 -0
- package/esm2020/lib/modal/src/modal.module.mjs +14 -2
- package/esm2020/lib/modal/src/panel/panel.component.mjs +2 -2
- package/esm2020/lib/radio/src/radio.component.mjs +3 -3
- package/esm2020/lib/select/src/select/select.component.mjs +2 -2
- package/esm2020/lib/select/src/select-button/select-button.component.mjs +2 -2
- package/esm2020/lib/table/src/table.component.mjs +2 -2
- package/esm2020/lib/text-field/src/text-field-input.directive.mjs +18 -8
- package/esm2020/lib/text-field/src/text-field.component.mjs +4 -4
- package/esm2020/lib/theme/src/themes.mjs +4 -4
- package/esm2020/lib/typography/src/body.component.mjs +2 -2
- package/esm2020/lib/typography/src/caption.component.mjs +2 -2
- package/esm2020/lib/typography/src/heading.component.mjs +2 -2
- package/esm2020/lib/typography/src/subheading.component.mjs +2 -2
- package/fesm2015/danske-sapphire-angular.mjs +147 -766
- package/fesm2015/danske-sapphire-angular.mjs.map +1 -1
- package/fesm2020/danske-sapphire-angular.mjs +145 -766
- package/fesm2020/danske-sapphire-angular.mjs.map +1 -1
- package/lib/button/src/button.component.d.ts +3 -1
- package/lib/list/src/list.component.d.ts +7 -1
- package/lib/modal/public_api.d.ts +2 -0
- package/lib/modal/src/layout/modal-section-title.directive.d.ts +5 -0
- package/lib/modal/src/layout/modal-section.component.d.ts +8 -0
- package/lib/modal/src/modal.module.d.ts +19 -17
- package/lib/text-field/src/text-field-input.directive.d.ts +5 -2
- package/package.json +4 -4
- package/esm2020/lib/icon/src/svgSanitizer.mjs +0 -690
- package/lib/icon/src/svgSanitizer.d.ts +0 -1
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, inject, Directive, Optional, SkipSelf, Component, Input, HostBinding, NgModule, ViewEncapsulation, isDevMode, InjectionToken, Inject, ChangeDetectionStrategy, ContentChild, EventEmitter, forwardRef, Output, HostListener, LOCALE_ID, Pipe, ElementRef, ViewChild, Attribute, QueryList, ContentChildren, ViewChildren, Injector, ChangeDetectorRef, TemplateRef } from '@angular/core';
|
|
2
|
+
import { Injectable, inject, Directive, Optional, SkipSelf, Component, Input, HostBinding, NgModule, ViewEncapsulation, isDevMode, InjectionToken, Inject, ChangeDetectionStrategy, ContentChild, EventEmitter, forwardRef, Output, HostListener, LOCALE_ID, Pipe, ElementRef, ViewChild, Attribute, QueryList, ContentChildren, ViewChildren, Injector, Self, ChangeDetectorRef, TemplateRef } from '@angular/core';
|
|
3
3
|
import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
|
|
4
4
|
import * as i2 from '@angular/common';
|
|
5
5
|
import { CommonModule, NgIf, DOCUMENT, NgTemplateOutlet } from '@angular/common';
|
|
6
6
|
import { __decorate } from 'tslib';
|
|
7
|
-
import
|
|
7
|
+
import DOMPurify from 'dompurify';
|
|
8
8
|
import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
|
|
9
|
-
import * as
|
|
9
|
+
import * as i1$2 from '@angular/forms';
|
|
10
10
|
import { NG_VALUE_ACCESSOR, NG_VALIDATORS, CheckboxRequiredValidator, FormsModule, RequiredValidator } from '@angular/forms';
|
|
11
11
|
import * as i2$1 from '@internationalized/message';
|
|
12
12
|
import { MessageDictionary, MessageFormatter } from '@internationalized/message';
|
|
@@ -21,11 +21,11 @@ import { CdkMenu, CdkMenuItem, CdkMenuTrigger, CdkMenuGroup, CdkMenuModule } fro
|
|
|
21
21
|
import { hasModifierKey } from '@angular/cdk/keycodes';
|
|
22
22
|
import { Subject, merge, combineLatest, empty, fromEvent } from 'rxjs';
|
|
23
23
|
import { takeUntil, startWith, map } from 'rxjs/operators';
|
|
24
|
-
import * as i1$
|
|
24
|
+
import * as i1$3 from '@angular/cdk/listbox';
|
|
25
25
|
import { CdkListbox, CdkOption, CdkListboxModule } from '@angular/cdk/listbox';
|
|
26
26
|
export { tokens } from '@danske/sapphire-css/themes';
|
|
27
|
-
import * as i1$
|
|
28
|
-
import * as i1$
|
|
27
|
+
import * as i1$4 from '@angular/cdk/scrolling';
|
|
28
|
+
import * as i1$5 from '@angular/cdk/dialog';
|
|
29
29
|
import { CdkDialogContainer, DialogModule } from '@angular/cdk/dialog';
|
|
30
30
|
|
|
31
31
|
/**
|
|
@@ -288,7 +288,7 @@ class HeadingComponent {
|
|
|
288
288
|
}
|
|
289
289
|
}
|
|
290
290
|
HeadingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: HeadingComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
291
|
-
HeadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: HeadingComponent, selector: "h1[sp-heading],h2[sp-heading],h3[sp-heading],h4[sp-heading],h5[sp-heading],h6[sp-heading]", inputs: { level: ["sp-heading", "level"], color: "color" }, host: { properties: { "class.sapphire-text": "true", "class.sapphire-text--heading-2xl": "level === \"1\"", "class.sapphire-text--heading-xl": "level === \"2\"", "class.sapphire-text--heading-lg": "level === \"3\"", "class.sapphire-text--heading-md": "level === \"4\"", "class.sapphire-text--heading-sm": "level === \"5\"", "class.sapphire-text--heading-xs": "level === \"6\"", "class": "this.className" } }, hostDirectives: [{ directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".sapphire-text{font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-foreground-primary);font-weight:var(--sapphire-semantic-font-weight-default-regular);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-text--strong{font-weight:var(--sapphire-semantic-font-weight-default-bold)}.sapphire-text--semibold{font-weight:var(--sapphire-semantic-font-weight-default-medium)}.sapphire-text--underlined{text-decoration:underline}.sapphire-text--secondary{color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-text--informative{color:var(--sapphire-semantic-color-foreground-accent)}.sapphire-text--positive{color:var(--sapphire-semantic-color-foreground-positive)}.sapphire-text--warning{color:var(--sapphire-semantic-color-foreground-warning)}.sapphire-text--negative{color:var(--sapphire-semantic-color-foreground-negative)}.sapphire-text--heading-2xl,.sapphire-text--heading-xl,.sapphire-text--heading-lg,.sapphire-text--heading-md,.sapphire-text--heading-sm,.sapphire-text--heading-xs{margin-top:0;margin-bottom:0;line-height:var(--sapphire-global-size-line-height-sm);letter-spacing
|
|
291
|
+
HeadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: HeadingComponent, selector: "h1[sp-heading],h2[sp-heading],h3[sp-heading],h4[sp-heading],h5[sp-heading],h6[sp-heading]", inputs: { level: ["sp-heading", "level"], color: "color" }, host: { properties: { "class.sapphire-text": "true", "class.sapphire-text--heading-2xl": "level === \"1\"", "class.sapphire-text--heading-xl": "level === \"2\"", "class.sapphire-text--heading-lg": "level === \"3\"", "class.sapphire-text--heading-md": "level === \"4\"", "class.sapphire-text--heading-sm": "level === \"5\"", "class.sapphire-text--heading-xs": "level === \"6\"", "class": "this.className" } }, hostDirectives: [{ directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".sapphire-text{font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-foreground-primary);font-weight:var(--sapphire-semantic-font-weight-default-regular);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-text--strong{font-weight:var(--sapphire-semantic-font-weight-default-bold)}.sapphire-text--semibold{font-weight:var(--sapphire-semantic-font-weight-default-medium)}.sapphire-text--underlined{text-decoration:underline}.sapphire-text--secondary{color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-text--informative{color:var(--sapphire-semantic-color-foreground-accent)}.sapphire-text--positive{color:var(--sapphire-semantic-color-foreground-positive)}.sapphire-text--warning{color:var(--sapphire-semantic-color-foreground-warning)}.sapphire-text--negative{color:var(--sapphire-semantic-color-foreground-negative)}.sapphire-text--heading-2xl,.sapphire-text--heading-xl,.sapphire-text--heading-lg,.sapphire-text--heading-md,.sapphire-text--heading-sm,.sapphire-text--heading-xs{margin-top:0;margin-bottom:0;line-height:var(--sapphire-global-size-line-height-sm);letter-spacing:-.01em}.sapphire-text--heading-2xl{font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-heading-2xl)}.sapphire-text--heading-xl{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-xl)}.sapphire-text--heading-lg{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-lg)}.sapphire-text--heading-md{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-md)}.sapphire-text--heading-sm{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-sm)}.sapphire-text--heading-xs{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-xs)}.sapphire-text--subheading-md,.sapphire-text--subheading-sm{line-height:var(--sapphire-global-size-line-height-sm)}.sapphire-text--subheading-md{font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-text--subheading-sm{font-size:var(--sapphire-semantic-size-font-body-xs)}.sapphire-text--body-lg,.sapphire-text--body-md,.sapphire-text--body-sm,.sapphire-text--body-xs{line-height:var(--sapphire-global-size-line-height-md);margin-top:0;margin-bottom:0}.sapphire-text--body-lg{font-size:var(--sapphire-semantic-size-font-body-lg)}.sapphire-text--body-md{font-size:var(--sapphire-semantic-size-font-body-md)}.sapphire-text--body-sm{font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-text--body-xs{font-size:var(--sapphire-semantic-size-font-body-xs)}.sapphire-text--caption-md,.sapphire-text--caption-sm{font-weight:var(--sapphire-semantic-font-weight-default-bold);line-height:var(--sapphire-global-size-line-height-sm)}.sapphire-text--caption-md{font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-text--caption-sm{font-size:var(--sapphire-semantic-size-font-body-xs)}\n"] });
|
|
292
292
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: HeadingComponent, decorators: [{
|
|
293
293
|
type: Component,
|
|
294
294
|
args: [{ selector: 'h1[sp-heading],h2[sp-heading],h3[sp-heading],h4[sp-heading],h5[sp-heading],h6[sp-heading]', template: '<ng-content></ng-content>', host: {
|
|
@@ -299,7 +299,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
299
299
|
'[class.sapphire-text--heading-md]': 'level === "4"',
|
|
300
300
|
'[class.sapphire-text--heading-sm]': 'level === "5"',
|
|
301
301
|
'[class.sapphire-text--heading-xs]': 'level === "6"',
|
|
302
|
-
}, hostDirectives: [ThemeCheckDirective, UseComponentStylesOnHost], standalone: false, styles: [".sapphire-text{font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-foreground-primary);font-weight:var(--sapphire-semantic-font-weight-default-regular);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-text--strong{font-weight:var(--sapphire-semantic-font-weight-default-bold)}.sapphire-text--semibold{font-weight:var(--sapphire-semantic-font-weight-default-medium)}.sapphire-text--underlined{text-decoration:underline}.sapphire-text--secondary{color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-text--informative{color:var(--sapphire-semantic-color-foreground-accent)}.sapphire-text--positive{color:var(--sapphire-semantic-color-foreground-positive)}.sapphire-text--warning{color:var(--sapphire-semantic-color-foreground-warning)}.sapphire-text--negative{color:var(--sapphire-semantic-color-foreground-negative)}.sapphire-text--heading-2xl,.sapphire-text--heading-xl,.sapphire-text--heading-lg,.sapphire-text--heading-md,.sapphire-text--heading-sm,.sapphire-text--heading-xs{margin-top:0;margin-bottom:0;line-height:var(--sapphire-global-size-line-height-sm);letter-spacing
|
|
302
|
+
}, hostDirectives: [ThemeCheckDirective, UseComponentStylesOnHost], standalone: false, styles: [".sapphire-text{font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-foreground-primary);font-weight:var(--sapphire-semantic-font-weight-default-regular);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-text--strong{font-weight:var(--sapphire-semantic-font-weight-default-bold)}.sapphire-text--semibold{font-weight:var(--sapphire-semantic-font-weight-default-medium)}.sapphire-text--underlined{text-decoration:underline}.sapphire-text--secondary{color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-text--informative{color:var(--sapphire-semantic-color-foreground-accent)}.sapphire-text--positive{color:var(--sapphire-semantic-color-foreground-positive)}.sapphire-text--warning{color:var(--sapphire-semantic-color-foreground-warning)}.sapphire-text--negative{color:var(--sapphire-semantic-color-foreground-negative)}.sapphire-text--heading-2xl,.sapphire-text--heading-xl,.sapphire-text--heading-lg,.sapphire-text--heading-md,.sapphire-text--heading-sm,.sapphire-text--heading-xs{margin-top:0;margin-bottom:0;line-height:var(--sapphire-global-size-line-height-sm);letter-spacing:-.01em}.sapphire-text--heading-2xl{font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-heading-2xl)}.sapphire-text--heading-xl{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-xl)}.sapphire-text--heading-lg{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-lg)}.sapphire-text--heading-md{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-md)}.sapphire-text--heading-sm{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-sm)}.sapphire-text--heading-xs{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-xs)}.sapphire-text--subheading-md,.sapphire-text--subheading-sm{line-height:var(--sapphire-global-size-line-height-sm)}.sapphire-text--subheading-md{font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-text--subheading-sm{font-size:var(--sapphire-semantic-size-font-body-xs)}.sapphire-text--body-lg,.sapphire-text--body-md,.sapphire-text--body-sm,.sapphire-text--body-xs{line-height:var(--sapphire-global-size-line-height-md);margin-top:0;margin-bottom:0}.sapphire-text--body-lg{font-size:var(--sapphire-semantic-size-font-body-lg)}.sapphire-text--body-md{font-size:var(--sapphire-semantic-size-font-body-md)}.sapphire-text--body-sm{font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-text--body-xs{font-size:var(--sapphire-semantic-size-font-body-xs)}.sapphire-text--caption-md,.sapphire-text--caption-sm{font-weight:var(--sapphire-semantic-font-weight-default-bold);line-height:var(--sapphire-global-size-line-height-sm)}.sapphire-text--caption-md{font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-text--caption-sm{font-size:var(--sapphire-semantic-size-font-body-xs)}\n"] }]
|
|
303
303
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { level: [{
|
|
304
304
|
type: Input,
|
|
305
305
|
args: ['sp-heading']
|
|
@@ -324,14 +324,14 @@ class SubheadingComponent {
|
|
|
324
324
|
}
|
|
325
325
|
}
|
|
326
326
|
SubheadingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SubheadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
327
|
-
SubheadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: SubheadingComponent, selector: "[sp-subheading]", inputs: { size: "size", color: "color" }, host: { properties: { "class.sapphire-text": "true", "class.sapphire-text--subheading-sm": "size === \"sm\"", "class.sapphire-text--subheading-md": "size === \"md\"", "class": "this.className" } }, hostDirectives: [{ directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".sapphire-text{font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-foreground-primary);font-weight:var(--sapphire-semantic-font-weight-default-regular);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-text--strong{font-weight:var(--sapphire-semantic-font-weight-default-bold)}.sapphire-text--semibold{font-weight:var(--sapphire-semantic-font-weight-default-medium)}.sapphire-text--underlined{text-decoration:underline}.sapphire-text--secondary{color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-text--informative{color:var(--sapphire-semantic-color-foreground-accent)}.sapphire-text--positive{color:var(--sapphire-semantic-color-foreground-positive)}.sapphire-text--warning{color:var(--sapphire-semantic-color-foreground-warning)}.sapphire-text--negative{color:var(--sapphire-semantic-color-foreground-negative)}.sapphire-text--heading-2xl,.sapphire-text--heading-xl,.sapphire-text--heading-lg,.sapphire-text--heading-md,.sapphire-text--heading-sm,.sapphire-text--heading-xs{margin-top:0;margin-bottom:0;line-height:var(--sapphire-global-size-line-height-sm);letter-spacing
|
|
327
|
+
SubheadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: SubheadingComponent, selector: "[sp-subheading]", inputs: { size: "size", color: "color" }, host: { properties: { "class.sapphire-text": "true", "class.sapphire-text--subheading-sm": "size === \"sm\"", "class.sapphire-text--subheading-md": "size === \"md\"", "class": "this.className" } }, hostDirectives: [{ directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".sapphire-text{font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-foreground-primary);font-weight:var(--sapphire-semantic-font-weight-default-regular);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-text--strong{font-weight:var(--sapphire-semantic-font-weight-default-bold)}.sapphire-text--semibold{font-weight:var(--sapphire-semantic-font-weight-default-medium)}.sapphire-text--underlined{text-decoration:underline}.sapphire-text--secondary{color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-text--informative{color:var(--sapphire-semantic-color-foreground-accent)}.sapphire-text--positive{color:var(--sapphire-semantic-color-foreground-positive)}.sapphire-text--warning{color:var(--sapphire-semantic-color-foreground-warning)}.sapphire-text--negative{color:var(--sapphire-semantic-color-foreground-negative)}.sapphire-text--heading-2xl,.sapphire-text--heading-xl,.sapphire-text--heading-lg,.sapphire-text--heading-md,.sapphire-text--heading-sm,.sapphire-text--heading-xs{margin-top:0;margin-bottom:0;line-height:var(--sapphire-global-size-line-height-sm);letter-spacing:-.01em}.sapphire-text--heading-2xl{font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-heading-2xl)}.sapphire-text--heading-xl{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-xl)}.sapphire-text--heading-lg{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-lg)}.sapphire-text--heading-md{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-md)}.sapphire-text--heading-sm{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-sm)}.sapphire-text--heading-xs{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-xs)}.sapphire-text--subheading-md,.sapphire-text--subheading-sm{line-height:var(--sapphire-global-size-line-height-sm)}.sapphire-text--subheading-md{font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-text--subheading-sm{font-size:var(--sapphire-semantic-size-font-body-xs)}.sapphire-text--body-lg,.sapphire-text--body-md,.sapphire-text--body-sm,.sapphire-text--body-xs{line-height:var(--sapphire-global-size-line-height-md);margin-top:0;margin-bottom:0}.sapphire-text--body-lg{font-size:var(--sapphire-semantic-size-font-body-lg)}.sapphire-text--body-md{font-size:var(--sapphire-semantic-size-font-body-md)}.sapphire-text--body-sm{font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-text--body-xs{font-size:var(--sapphire-semantic-size-font-body-xs)}.sapphire-text--caption-md,.sapphire-text--caption-sm{font-weight:var(--sapphire-semantic-font-weight-default-bold);line-height:var(--sapphire-global-size-line-height-sm)}.sapphire-text--caption-md{font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-text--caption-sm{font-size:var(--sapphire-semantic-size-font-body-xs)}\n"] });
|
|
328
328
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SubheadingComponent, decorators: [{
|
|
329
329
|
type: Component,
|
|
330
330
|
args: [{ selector: '[sp-subheading]', template: '<ng-content></ng-content>', host: {
|
|
331
331
|
'[class.sapphire-text]': 'true',
|
|
332
332
|
'[class.sapphire-text--subheading-sm]': 'size === "sm"',
|
|
333
333
|
'[class.sapphire-text--subheading-md]': 'size === "md"',
|
|
334
|
-
}, hostDirectives: [ThemeCheckDirective, UseComponentStylesOnHost], styles: [".sapphire-text{font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-foreground-primary);font-weight:var(--sapphire-semantic-font-weight-default-regular);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-text--strong{font-weight:var(--sapphire-semantic-font-weight-default-bold)}.sapphire-text--semibold{font-weight:var(--sapphire-semantic-font-weight-default-medium)}.sapphire-text--underlined{text-decoration:underline}.sapphire-text--secondary{color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-text--informative{color:var(--sapphire-semantic-color-foreground-accent)}.sapphire-text--positive{color:var(--sapphire-semantic-color-foreground-positive)}.sapphire-text--warning{color:var(--sapphire-semantic-color-foreground-warning)}.sapphire-text--negative{color:var(--sapphire-semantic-color-foreground-negative)}.sapphire-text--heading-2xl,.sapphire-text--heading-xl,.sapphire-text--heading-lg,.sapphire-text--heading-md,.sapphire-text--heading-sm,.sapphire-text--heading-xs{margin-top:0;margin-bottom:0;line-height:var(--sapphire-global-size-line-height-sm);letter-spacing
|
|
334
|
+
}, hostDirectives: [ThemeCheckDirective, UseComponentStylesOnHost], styles: [".sapphire-text{font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-foreground-primary);font-weight:var(--sapphire-semantic-font-weight-default-regular);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-text--strong{font-weight:var(--sapphire-semantic-font-weight-default-bold)}.sapphire-text--semibold{font-weight:var(--sapphire-semantic-font-weight-default-medium)}.sapphire-text--underlined{text-decoration:underline}.sapphire-text--secondary{color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-text--informative{color:var(--sapphire-semantic-color-foreground-accent)}.sapphire-text--positive{color:var(--sapphire-semantic-color-foreground-positive)}.sapphire-text--warning{color:var(--sapphire-semantic-color-foreground-warning)}.sapphire-text--negative{color:var(--sapphire-semantic-color-foreground-negative)}.sapphire-text--heading-2xl,.sapphire-text--heading-xl,.sapphire-text--heading-lg,.sapphire-text--heading-md,.sapphire-text--heading-sm,.sapphire-text--heading-xs{margin-top:0;margin-bottom:0;line-height:var(--sapphire-global-size-line-height-sm);letter-spacing:-.01em}.sapphire-text--heading-2xl{font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-heading-2xl)}.sapphire-text--heading-xl{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-xl)}.sapphire-text--heading-lg{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-lg)}.sapphire-text--heading-md{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-md)}.sapphire-text--heading-sm{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-sm)}.sapphire-text--heading-xs{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-xs)}.sapphire-text--subheading-md,.sapphire-text--subheading-sm{line-height:var(--sapphire-global-size-line-height-sm)}.sapphire-text--subheading-md{font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-text--subheading-sm{font-size:var(--sapphire-semantic-size-font-body-xs)}.sapphire-text--body-lg,.sapphire-text--body-md,.sapphire-text--body-sm,.sapphire-text--body-xs{line-height:var(--sapphire-global-size-line-height-md);margin-top:0;margin-bottom:0}.sapphire-text--body-lg{font-size:var(--sapphire-semantic-size-font-body-lg)}.sapphire-text--body-md{font-size:var(--sapphire-semantic-size-font-body-md)}.sapphire-text--body-sm{font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-text--body-xs{font-size:var(--sapphire-semantic-size-font-body-xs)}.sapphire-text--caption-md,.sapphire-text--caption-sm{font-weight:var(--sapphire-semantic-font-weight-default-bold);line-height:var(--sapphire-global-size-line-height-sm)}.sapphire-text--caption-md{font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-text--caption-sm{font-size:var(--sapphire-semantic-size-font-body-xs)}\n"] }]
|
|
335
335
|
}], propDecorators: { size: [{
|
|
336
336
|
type: Input
|
|
337
337
|
}], color: [{
|
|
@@ -355,14 +355,14 @@ class CaptionComponent {
|
|
|
355
355
|
}
|
|
356
356
|
}
|
|
357
357
|
CaptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: CaptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
358
|
-
CaptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: CaptionComponent, selector: "[sp-caption]", inputs: { size: "size", color: "color" }, host: { properties: { "class.sapphire-text": "true", "class.sapphire-text--caption-sm": "size === \"sm\"", "class.sapphire-text--caption-md": "size === \"md\"", "class": "this.className" } }, hostDirectives: [{ directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".sapphire-text{font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-foreground-primary);font-weight:var(--sapphire-semantic-font-weight-default-regular);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-text--strong{font-weight:var(--sapphire-semantic-font-weight-default-bold)}.sapphire-text--semibold{font-weight:var(--sapphire-semantic-font-weight-default-medium)}.sapphire-text--underlined{text-decoration:underline}.sapphire-text--secondary{color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-text--informative{color:var(--sapphire-semantic-color-foreground-accent)}.sapphire-text--positive{color:var(--sapphire-semantic-color-foreground-positive)}.sapphire-text--warning{color:var(--sapphire-semantic-color-foreground-warning)}.sapphire-text--negative{color:var(--sapphire-semantic-color-foreground-negative)}.sapphire-text--heading-2xl,.sapphire-text--heading-xl,.sapphire-text--heading-lg,.sapphire-text--heading-md,.sapphire-text--heading-sm,.sapphire-text--heading-xs{margin-top:0;margin-bottom:0;line-height:var(--sapphire-global-size-line-height-sm);letter-spacing
|
|
358
|
+
CaptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: CaptionComponent, selector: "[sp-caption]", inputs: { size: "size", color: "color" }, host: { properties: { "class.sapphire-text": "true", "class.sapphire-text--caption-sm": "size === \"sm\"", "class.sapphire-text--caption-md": "size === \"md\"", "class": "this.className" } }, hostDirectives: [{ directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".sapphire-text{font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-foreground-primary);font-weight:var(--sapphire-semantic-font-weight-default-regular);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-text--strong{font-weight:var(--sapphire-semantic-font-weight-default-bold)}.sapphire-text--semibold{font-weight:var(--sapphire-semantic-font-weight-default-medium)}.sapphire-text--underlined{text-decoration:underline}.sapphire-text--secondary{color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-text--informative{color:var(--sapphire-semantic-color-foreground-accent)}.sapphire-text--positive{color:var(--sapphire-semantic-color-foreground-positive)}.sapphire-text--warning{color:var(--sapphire-semantic-color-foreground-warning)}.sapphire-text--negative{color:var(--sapphire-semantic-color-foreground-negative)}.sapphire-text--heading-2xl,.sapphire-text--heading-xl,.sapphire-text--heading-lg,.sapphire-text--heading-md,.sapphire-text--heading-sm,.sapphire-text--heading-xs{margin-top:0;margin-bottom:0;line-height:var(--sapphire-global-size-line-height-sm);letter-spacing:-.01em}.sapphire-text--heading-2xl{font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-heading-2xl)}.sapphire-text--heading-xl{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-xl)}.sapphire-text--heading-lg{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-lg)}.sapphire-text--heading-md{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-md)}.sapphire-text--heading-sm{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-sm)}.sapphire-text--heading-xs{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-xs)}.sapphire-text--subheading-md,.sapphire-text--subheading-sm{line-height:var(--sapphire-global-size-line-height-sm)}.sapphire-text--subheading-md{font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-text--subheading-sm{font-size:var(--sapphire-semantic-size-font-body-xs)}.sapphire-text--body-lg,.sapphire-text--body-md,.sapphire-text--body-sm,.sapphire-text--body-xs{line-height:var(--sapphire-global-size-line-height-md);margin-top:0;margin-bottom:0}.sapphire-text--body-lg{font-size:var(--sapphire-semantic-size-font-body-lg)}.sapphire-text--body-md{font-size:var(--sapphire-semantic-size-font-body-md)}.sapphire-text--body-sm{font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-text--body-xs{font-size:var(--sapphire-semantic-size-font-body-xs)}.sapphire-text--caption-md,.sapphire-text--caption-sm{font-weight:var(--sapphire-semantic-font-weight-default-bold);line-height:var(--sapphire-global-size-line-height-sm)}.sapphire-text--caption-md{font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-text--caption-sm{font-size:var(--sapphire-semantic-size-font-body-xs)}\n"] });
|
|
359
359
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: CaptionComponent, decorators: [{
|
|
360
360
|
type: Component,
|
|
361
361
|
args: [{ selector: '[sp-caption]', template: '<ng-content></ng-content>', host: {
|
|
362
362
|
'[class.sapphire-text]': 'true',
|
|
363
363
|
'[class.sapphire-text--caption-sm]': 'size === "sm"',
|
|
364
364
|
'[class.sapphire-text--caption-md]': 'size === "md"',
|
|
365
|
-
}, hostDirectives: [ThemeCheckDirective, UseComponentStylesOnHost], styles: [".sapphire-text{font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-foreground-primary);font-weight:var(--sapphire-semantic-font-weight-default-regular);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-text--strong{font-weight:var(--sapphire-semantic-font-weight-default-bold)}.sapphire-text--semibold{font-weight:var(--sapphire-semantic-font-weight-default-medium)}.sapphire-text--underlined{text-decoration:underline}.sapphire-text--secondary{color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-text--informative{color:var(--sapphire-semantic-color-foreground-accent)}.sapphire-text--positive{color:var(--sapphire-semantic-color-foreground-positive)}.sapphire-text--warning{color:var(--sapphire-semantic-color-foreground-warning)}.sapphire-text--negative{color:var(--sapphire-semantic-color-foreground-negative)}.sapphire-text--heading-2xl,.sapphire-text--heading-xl,.sapphire-text--heading-lg,.sapphire-text--heading-md,.sapphire-text--heading-sm,.sapphire-text--heading-xs{margin-top:0;margin-bottom:0;line-height:var(--sapphire-global-size-line-height-sm);letter-spacing
|
|
365
|
+
}, hostDirectives: [ThemeCheckDirective, UseComponentStylesOnHost], styles: [".sapphire-text{font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-foreground-primary);font-weight:var(--sapphire-semantic-font-weight-default-regular);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-text--strong{font-weight:var(--sapphire-semantic-font-weight-default-bold)}.sapphire-text--semibold{font-weight:var(--sapphire-semantic-font-weight-default-medium)}.sapphire-text--underlined{text-decoration:underline}.sapphire-text--secondary{color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-text--informative{color:var(--sapphire-semantic-color-foreground-accent)}.sapphire-text--positive{color:var(--sapphire-semantic-color-foreground-positive)}.sapphire-text--warning{color:var(--sapphire-semantic-color-foreground-warning)}.sapphire-text--negative{color:var(--sapphire-semantic-color-foreground-negative)}.sapphire-text--heading-2xl,.sapphire-text--heading-xl,.sapphire-text--heading-lg,.sapphire-text--heading-md,.sapphire-text--heading-sm,.sapphire-text--heading-xs{margin-top:0;margin-bottom:0;line-height:var(--sapphire-global-size-line-height-sm);letter-spacing:-.01em}.sapphire-text--heading-2xl{font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-heading-2xl)}.sapphire-text--heading-xl{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-xl)}.sapphire-text--heading-lg{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-lg)}.sapphire-text--heading-md{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-md)}.sapphire-text--heading-sm{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-sm)}.sapphire-text--heading-xs{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-xs)}.sapphire-text--subheading-md,.sapphire-text--subheading-sm{line-height:var(--sapphire-global-size-line-height-sm)}.sapphire-text--subheading-md{font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-text--subheading-sm{font-size:var(--sapphire-semantic-size-font-body-xs)}.sapphire-text--body-lg,.sapphire-text--body-md,.sapphire-text--body-sm,.sapphire-text--body-xs{line-height:var(--sapphire-global-size-line-height-md);margin-top:0;margin-bottom:0}.sapphire-text--body-lg{font-size:var(--sapphire-semantic-size-font-body-lg)}.sapphire-text--body-md{font-size:var(--sapphire-semantic-size-font-body-md)}.sapphire-text--body-sm{font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-text--body-xs{font-size:var(--sapphire-semantic-size-font-body-xs)}.sapphire-text--caption-md,.sapphire-text--caption-sm{font-weight:var(--sapphire-semantic-font-weight-default-bold);line-height:var(--sapphire-global-size-line-height-sm)}.sapphire-text--caption-md{font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-text--caption-sm{font-size:var(--sapphire-semantic-size-font-body-xs)}\n"] }]
|
|
366
366
|
}], propDecorators: { size: [{
|
|
367
367
|
type: Input
|
|
368
368
|
}], color: [{
|
|
@@ -388,7 +388,7 @@ class BodyComponent {
|
|
|
388
388
|
}
|
|
389
389
|
}
|
|
390
390
|
BodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: BodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
391
|
-
BodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: BodyComponent, selector: "[sp-body]", inputs: { size: "size", color: "color", bold: "bold", semibold: "semibold" }, host: { properties: { "class.sapphire-text": "true", "class.sapphire-text--body-xs": "size === \"xs\"", "class.sapphire-text--body-sm": "size === \"sm\"", "class.sapphire-text--body-md": "size === \"md\"", "class.sapphire-text--body-lg": "size === \"lg\"", "class.sapphire-text--strong": "bold", "class.sapphire-text--semibold": "semibold", "class": "this.className" } }, hostDirectives: [{ directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".sapphire-text{font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-foreground-primary);font-weight:var(--sapphire-semantic-font-weight-default-regular);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-text--strong{font-weight:var(--sapphire-semantic-font-weight-default-bold)}.sapphire-text--semibold{font-weight:var(--sapphire-semantic-font-weight-default-medium)}.sapphire-text--underlined{text-decoration:underline}.sapphire-text--secondary{color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-text--informative{color:var(--sapphire-semantic-color-foreground-accent)}.sapphire-text--positive{color:var(--sapphire-semantic-color-foreground-positive)}.sapphire-text--warning{color:var(--sapphire-semantic-color-foreground-warning)}.sapphire-text--negative{color:var(--sapphire-semantic-color-foreground-negative)}.sapphire-text--heading-2xl,.sapphire-text--heading-xl,.sapphire-text--heading-lg,.sapphire-text--heading-md,.sapphire-text--heading-sm,.sapphire-text--heading-xs{margin-top:0;margin-bottom:0;line-height:var(--sapphire-global-size-line-height-sm);letter-spacing
|
|
391
|
+
BodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: BodyComponent, selector: "[sp-body]", inputs: { size: "size", color: "color", bold: "bold", semibold: "semibold" }, host: { properties: { "class.sapphire-text": "true", "class.sapphire-text--body-xs": "size === \"xs\"", "class.sapphire-text--body-sm": "size === \"sm\"", "class.sapphire-text--body-md": "size === \"md\"", "class.sapphire-text--body-lg": "size === \"lg\"", "class.sapphire-text--strong": "bold", "class.sapphire-text--semibold": "semibold", "class": "this.className" } }, hostDirectives: [{ directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".sapphire-text{font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-foreground-primary);font-weight:var(--sapphire-semantic-font-weight-default-regular);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-text--strong{font-weight:var(--sapphire-semantic-font-weight-default-bold)}.sapphire-text--semibold{font-weight:var(--sapphire-semantic-font-weight-default-medium)}.sapphire-text--underlined{text-decoration:underline}.sapphire-text--secondary{color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-text--informative{color:var(--sapphire-semantic-color-foreground-accent)}.sapphire-text--positive{color:var(--sapphire-semantic-color-foreground-positive)}.sapphire-text--warning{color:var(--sapphire-semantic-color-foreground-warning)}.sapphire-text--negative{color:var(--sapphire-semantic-color-foreground-negative)}.sapphire-text--heading-2xl,.sapphire-text--heading-xl,.sapphire-text--heading-lg,.sapphire-text--heading-md,.sapphire-text--heading-sm,.sapphire-text--heading-xs{margin-top:0;margin-bottom:0;line-height:var(--sapphire-global-size-line-height-sm);letter-spacing:-.01em}.sapphire-text--heading-2xl{font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-heading-2xl)}.sapphire-text--heading-xl{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-xl)}.sapphire-text--heading-lg{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-lg)}.sapphire-text--heading-md{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-md)}.sapphire-text--heading-sm{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-sm)}.sapphire-text--heading-xs{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-xs)}.sapphire-text--subheading-md,.sapphire-text--subheading-sm{line-height:var(--sapphire-global-size-line-height-sm)}.sapphire-text--subheading-md{font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-text--subheading-sm{font-size:var(--sapphire-semantic-size-font-body-xs)}.sapphire-text--body-lg,.sapphire-text--body-md,.sapphire-text--body-sm,.sapphire-text--body-xs{line-height:var(--sapphire-global-size-line-height-md);margin-top:0;margin-bottom:0}.sapphire-text--body-lg{font-size:var(--sapphire-semantic-size-font-body-lg)}.sapphire-text--body-md{font-size:var(--sapphire-semantic-size-font-body-md)}.sapphire-text--body-sm{font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-text--body-xs{font-size:var(--sapphire-semantic-size-font-body-xs)}.sapphire-text--caption-md,.sapphire-text--caption-sm{font-weight:var(--sapphire-semantic-font-weight-default-bold);line-height:var(--sapphire-global-size-line-height-sm)}.sapphire-text--caption-md{font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-text--caption-sm{font-size:var(--sapphire-semantic-size-font-body-xs)}\n"] });
|
|
392
392
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: BodyComponent, decorators: [{
|
|
393
393
|
type: Component,
|
|
394
394
|
args: [{ selector: '[sp-body]', template: '<ng-content></ng-content>', host: {
|
|
@@ -399,7 +399,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
399
399
|
'[class.sapphire-text--body-lg]': 'size === "lg"',
|
|
400
400
|
'[class.sapphire-text--strong]': 'bold',
|
|
401
401
|
'[class.sapphire-text--semibold]': 'semibold',
|
|
402
|
-
}, hostDirectives: [ThemeCheckDirective, UseComponentStylesOnHost], standalone: false, styles: [".sapphire-text{font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-foreground-primary);font-weight:var(--sapphire-semantic-font-weight-default-regular);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-text--strong{font-weight:var(--sapphire-semantic-font-weight-default-bold)}.sapphire-text--semibold{font-weight:var(--sapphire-semantic-font-weight-default-medium)}.sapphire-text--underlined{text-decoration:underline}.sapphire-text--secondary{color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-text--informative{color:var(--sapphire-semantic-color-foreground-accent)}.sapphire-text--positive{color:var(--sapphire-semantic-color-foreground-positive)}.sapphire-text--warning{color:var(--sapphire-semantic-color-foreground-warning)}.sapphire-text--negative{color:var(--sapphire-semantic-color-foreground-negative)}.sapphire-text--heading-2xl,.sapphire-text--heading-xl,.sapphire-text--heading-lg,.sapphire-text--heading-md,.sapphire-text--heading-sm,.sapphire-text--heading-xs{margin-top:0;margin-bottom:0;line-height:var(--sapphire-global-size-line-height-sm);letter-spacing
|
|
402
|
+
}, hostDirectives: [ThemeCheckDirective, UseComponentStylesOnHost], standalone: false, styles: [".sapphire-text{font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-foreground-primary);font-weight:var(--sapphire-semantic-font-weight-default-regular);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-text--strong{font-weight:var(--sapphire-semantic-font-weight-default-bold)}.sapphire-text--semibold{font-weight:var(--sapphire-semantic-font-weight-default-medium)}.sapphire-text--underlined{text-decoration:underline}.sapphire-text--secondary{color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-text--informative{color:var(--sapphire-semantic-color-foreground-accent)}.sapphire-text--positive{color:var(--sapphire-semantic-color-foreground-positive)}.sapphire-text--warning{color:var(--sapphire-semantic-color-foreground-warning)}.sapphire-text--negative{color:var(--sapphire-semantic-color-foreground-negative)}.sapphire-text--heading-2xl,.sapphire-text--heading-xl,.sapphire-text--heading-lg,.sapphire-text--heading-md,.sapphire-text--heading-sm,.sapphire-text--heading-xs{margin-top:0;margin-bottom:0;line-height:var(--sapphire-global-size-line-height-sm);letter-spacing:-.01em}.sapphire-text--heading-2xl{font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-heading-2xl)}.sapphire-text--heading-xl{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-xl)}.sapphire-text--heading-lg{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-lg)}.sapphire-text--heading-md{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-md)}.sapphire-text--heading-sm{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-sm)}.sapphire-text--heading-xs{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-xs)}.sapphire-text--subheading-md,.sapphire-text--subheading-sm{line-height:var(--sapphire-global-size-line-height-sm)}.sapphire-text--subheading-md{font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-text--subheading-sm{font-size:var(--sapphire-semantic-size-font-body-xs)}.sapphire-text--body-lg,.sapphire-text--body-md,.sapphire-text--body-sm,.sapphire-text--body-xs{line-height:var(--sapphire-global-size-line-height-md);margin-top:0;margin-bottom:0}.sapphire-text--body-lg{font-size:var(--sapphire-semantic-size-font-body-lg)}.sapphire-text--body-md{font-size:var(--sapphire-semantic-size-font-body-md)}.sapphire-text--body-sm{font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-text--body-xs{font-size:var(--sapphire-semantic-size-font-body-xs)}.sapphire-text--caption-md,.sapphire-text--caption-sm{font-weight:var(--sapphire-semantic-font-weight-default-bold);line-height:var(--sapphire-global-size-line-height-sm)}.sapphire-text--caption-md{font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-text--caption-sm{font-size:var(--sapphire-semantic-size-font-body-xs)}\n"] }]
|
|
403
403
|
}], propDecorators: { size: [{
|
|
404
404
|
type: Input
|
|
405
405
|
}], color: [{
|
|
@@ -574,699 +574,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
574
574
|
*/
|
|
575
575
|
const ICON_SIZE_PROVIDER = new InjectionToken("Icon size based on the context it's being used in");
|
|
576
576
|
|
|
577
|
-
const allowedAttributes = {
|
|
578
|
-
svg: [
|
|
579
|
-
'id',
|
|
580
|
-
'class',
|
|
581
|
-
'style',
|
|
582
|
-
'xmlns',
|
|
583
|
-
'width',
|
|
584
|
-
'height',
|
|
585
|
-
'viewBox',
|
|
586
|
-
'preserveAspectRatio',
|
|
587
|
-
'clip-path',
|
|
588
|
-
'visibility',
|
|
589
|
-
'pointer-events',
|
|
590
|
-
'cursor',
|
|
591
|
-
'display',
|
|
592
|
-
'overflow',
|
|
593
|
-
'fill',
|
|
594
|
-
],
|
|
595
|
-
g: [
|
|
596
|
-
'id',
|
|
597
|
-
'class',
|
|
598
|
-
'style',
|
|
599
|
-
'transform',
|
|
600
|
-
'clip-path',
|
|
601
|
-
'visibility',
|
|
602
|
-
'pointer-events',
|
|
603
|
-
'cursor',
|
|
604
|
-
'display',
|
|
605
|
-
'fill',
|
|
606
|
-
],
|
|
607
|
-
defs: [
|
|
608
|
-
'id',
|
|
609
|
-
'class',
|
|
610
|
-
'style',
|
|
611
|
-
'visibility',
|
|
612
|
-
'pointer-events',
|
|
613
|
-
'cursor',
|
|
614
|
-
'display',
|
|
615
|
-
],
|
|
616
|
-
symbol: [
|
|
617
|
-
'id',
|
|
618
|
-
'class',
|
|
619
|
-
'style',
|
|
620
|
-
'viewBox',
|
|
621
|
-
'preserveAspectRatio',
|
|
622
|
-
'clip-path',
|
|
623
|
-
'visibility',
|
|
624
|
-
'pointer-events',
|
|
625
|
-
'cursor',
|
|
626
|
-
'display',
|
|
627
|
-
],
|
|
628
|
-
use: [
|
|
629
|
-
'id',
|
|
630
|
-
'class',
|
|
631
|
-
'style',
|
|
632
|
-
'href',
|
|
633
|
-
'xlink:href',
|
|
634
|
-
'transform',
|
|
635
|
-
'clip-path',
|
|
636
|
-
'visibility',
|
|
637
|
-
'pointer-events',
|
|
638
|
-
'cursor',
|
|
639
|
-
'display',
|
|
640
|
-
],
|
|
641
|
-
path: [
|
|
642
|
-
'id',
|
|
643
|
-
'class',
|
|
644
|
-
'style',
|
|
645
|
-
'd',
|
|
646
|
-
'fill',
|
|
647
|
-
'stroke',
|
|
648
|
-
'stroke-width',
|
|
649
|
-
'transform',
|
|
650
|
-
'opacity',
|
|
651
|
-
'clip-path',
|
|
652
|
-
'stroke-dasharray',
|
|
653
|
-
'stroke-dashoffset',
|
|
654
|
-
'stroke-opacity',
|
|
655
|
-
'fill-opacity',
|
|
656
|
-
'visibility',
|
|
657
|
-
'pointer-events',
|
|
658
|
-
'cursor',
|
|
659
|
-
'display',
|
|
660
|
-
'filter',
|
|
661
|
-
],
|
|
662
|
-
rect: [
|
|
663
|
-
'id',
|
|
664
|
-
'class',
|
|
665
|
-
'style',
|
|
666
|
-
'x',
|
|
667
|
-
'y',
|
|
668
|
-
'width',
|
|
669
|
-
'height',
|
|
670
|
-
'rx',
|
|
671
|
-
'ry',
|
|
672
|
-
'fill',
|
|
673
|
-
'stroke',
|
|
674
|
-
'stroke-width',
|
|
675
|
-
'transform',
|
|
676
|
-
'opacity',
|
|
677
|
-
'clip-path',
|
|
678
|
-
'stroke-dasharray',
|
|
679
|
-
'stroke-dashoffset',
|
|
680
|
-
'stroke-opacity',
|
|
681
|
-
'fill-opacity',
|
|
682
|
-
'visibility',
|
|
683
|
-
'pointer-events',
|
|
684
|
-
'cursor',
|
|
685
|
-
'display',
|
|
686
|
-
'filter',
|
|
687
|
-
],
|
|
688
|
-
circle: [
|
|
689
|
-
'id',
|
|
690
|
-
'class',
|
|
691
|
-
'style',
|
|
692
|
-
'cx',
|
|
693
|
-
'cy',
|
|
694
|
-
'r',
|
|
695
|
-
'fill',
|
|
696
|
-
'stroke',
|
|
697
|
-
'stroke-width',
|
|
698
|
-
'transform',
|
|
699
|
-
'opacity',
|
|
700
|
-
'clip-path',
|
|
701
|
-
'stroke-dasharray',
|
|
702
|
-
'stroke-dashoffset',
|
|
703
|
-
'stroke-opacity',
|
|
704
|
-
'fill-opacity',
|
|
705
|
-
'visibility',
|
|
706
|
-
'pointer-events',
|
|
707
|
-
'cursor',
|
|
708
|
-
'display',
|
|
709
|
-
'filter',
|
|
710
|
-
],
|
|
711
|
-
ellipse: [
|
|
712
|
-
'id',
|
|
713
|
-
'class',
|
|
714
|
-
'style',
|
|
715
|
-
'cx',
|
|
716
|
-
'cy',
|
|
717
|
-
'rx',
|
|
718
|
-
'ry',
|
|
719
|
-
'fill',
|
|
720
|
-
'stroke',
|
|
721
|
-
'stroke-width',
|
|
722
|
-
'transform',
|
|
723
|
-
'opacity',
|
|
724
|
-
'clip-path',
|
|
725
|
-
'stroke-dasharray',
|
|
726
|
-
'stroke-dashoffset',
|
|
727
|
-
'stroke-opacity',
|
|
728
|
-
'fill-opacity',
|
|
729
|
-
'visibility',
|
|
730
|
-
'pointer-events',
|
|
731
|
-
'cursor',
|
|
732
|
-
'display',
|
|
733
|
-
'filter',
|
|
734
|
-
],
|
|
735
|
-
line: [
|
|
736
|
-
'id',
|
|
737
|
-
'class',
|
|
738
|
-
'style',
|
|
739
|
-
'x1',
|
|
740
|
-
'y1',
|
|
741
|
-
'x2',
|
|
742
|
-
'y2',
|
|
743
|
-
'stroke',
|
|
744
|
-
'stroke-width',
|
|
745
|
-
'transform',
|
|
746
|
-
'opacity',
|
|
747
|
-
'clip-path',
|
|
748
|
-
'stroke-dasharray',
|
|
749
|
-
'stroke-dashoffset',
|
|
750
|
-
'stroke-opacity',
|
|
751
|
-
'visibility',
|
|
752
|
-
'pointer-events',
|
|
753
|
-
'cursor',
|
|
754
|
-
'display',
|
|
755
|
-
'filter',
|
|
756
|
-
],
|
|
757
|
-
polyline: [
|
|
758
|
-
'id',
|
|
759
|
-
'class',
|
|
760
|
-
'style',
|
|
761
|
-
'points',
|
|
762
|
-
'fill',
|
|
763
|
-
'stroke',
|
|
764
|
-
'stroke-width',
|
|
765
|
-
'transform',
|
|
766
|
-
'opacity',
|
|
767
|
-
'clip-path',
|
|
768
|
-
'stroke-dasharray',
|
|
769
|
-
'stroke-dashoffset',
|
|
770
|
-
'stroke-opacity',
|
|
771
|
-
'fill-opacity',
|
|
772
|
-
'visibility',
|
|
773
|
-
'pointer-events',
|
|
774
|
-
'cursor',
|
|
775
|
-
'display',
|
|
776
|
-
'filter',
|
|
777
|
-
],
|
|
778
|
-
polygon: [
|
|
779
|
-
'id',
|
|
780
|
-
'class',
|
|
781
|
-
'style',
|
|
782
|
-
'points',
|
|
783
|
-
'fill',
|
|
784
|
-
'stroke',
|
|
785
|
-
'stroke-width',
|
|
786
|
-
'transform',
|
|
787
|
-
'opacity',
|
|
788
|
-
'clip-path',
|
|
789
|
-
'stroke-dasharray',
|
|
790
|
-
'stroke-dashoffset',
|
|
791
|
-
'stroke-opacity',
|
|
792
|
-
'fill-opacity',
|
|
793
|
-
'visibility',
|
|
794
|
-
'pointer-events',
|
|
795
|
-
'cursor',
|
|
796
|
-
'display',
|
|
797
|
-
'filter',
|
|
798
|
-
],
|
|
799
|
-
text: [
|
|
800
|
-
'id',
|
|
801
|
-
'class',
|
|
802
|
-
'style',
|
|
803
|
-
'x',
|
|
804
|
-
'y',
|
|
805
|
-
'fill',
|
|
806
|
-
'stroke',
|
|
807
|
-
'font-family',
|
|
808
|
-
'font-size',
|
|
809
|
-
'text-anchor',
|
|
810
|
-
'alignment-baseline',
|
|
811
|
-
'transform',
|
|
812
|
-
'opacity',
|
|
813
|
-
'clip-path',
|
|
814
|
-
'fill-opacity',
|
|
815
|
-
'visibility',
|
|
816
|
-
'pointer-events',
|
|
817
|
-
'cursor',
|
|
818
|
-
'display',
|
|
819
|
-
'filter',
|
|
820
|
-
],
|
|
821
|
-
tspan: [
|
|
822
|
-
'id',
|
|
823
|
-
'class',
|
|
824
|
-
'style',
|
|
825
|
-
'x',
|
|
826
|
-
'y',
|
|
827
|
-
'dx',
|
|
828
|
-
'dy',
|
|
829
|
-
'fill',
|
|
830
|
-
'stroke',
|
|
831
|
-
'font-family',
|
|
832
|
-
'font-size',
|
|
833
|
-
'text-anchor',
|
|
834
|
-
'alignment-baseline',
|
|
835
|
-
'transform',
|
|
836
|
-
'opacity',
|
|
837
|
-
'clip-path',
|
|
838
|
-
'fill-opacity',
|
|
839
|
-
'visibility',
|
|
840
|
-
'pointer-events',
|
|
841
|
-
'cursor',
|
|
842
|
-
'display',
|
|
843
|
-
'filter',
|
|
844
|
-
],
|
|
845
|
-
textPath: [
|
|
846
|
-
'id',
|
|
847
|
-
'class',
|
|
848
|
-
'style',
|
|
849
|
-
'href',
|
|
850
|
-
'xlink:href',
|
|
851
|
-
'startOffset',
|
|
852
|
-
'method',
|
|
853
|
-
'spacing',
|
|
854
|
-
'fill',
|
|
855
|
-
'stroke',
|
|
856
|
-
'font-family',
|
|
857
|
-
'font-size',
|
|
858
|
-
'text-anchor',
|
|
859
|
-
'alignment-baseline',
|
|
860
|
-
'transform',
|
|
861
|
-
'opacity',
|
|
862
|
-
'clip-path',
|
|
863
|
-
'fill-opacity',
|
|
864
|
-
'visibility',
|
|
865
|
-
'pointer-events',
|
|
866
|
-
'cursor',
|
|
867
|
-
'display',
|
|
868
|
-
'filter',
|
|
869
|
-
],
|
|
870
|
-
image: [
|
|
871
|
-
'id',
|
|
872
|
-
'class',
|
|
873
|
-
'style',
|
|
874
|
-
'x',
|
|
875
|
-
'y',
|
|
876
|
-
'width',
|
|
877
|
-
'height',
|
|
878
|
-
'href',
|
|
879
|
-
'xlink:href',
|
|
880
|
-
'transform',
|
|
881
|
-
'opacity',
|
|
882
|
-
'clip-path',
|
|
883
|
-
'visibility',
|
|
884
|
-
'pointer-events',
|
|
885
|
-
'cursor',
|
|
886
|
-
'display',
|
|
887
|
-
'filter',
|
|
888
|
-
],
|
|
889
|
-
clipPath: [
|
|
890
|
-
'id',
|
|
891
|
-
'class',
|
|
892
|
-
'style',
|
|
893
|
-
'clipPathUnits',
|
|
894
|
-
'transform',
|
|
895
|
-
'visibility',
|
|
896
|
-
'pointer-events',
|
|
897
|
-
'cursor',
|
|
898
|
-
'display',
|
|
899
|
-
],
|
|
900
|
-
mask: [
|
|
901
|
-
'id',
|
|
902
|
-
'class',
|
|
903
|
-
'style',
|
|
904
|
-
'x',
|
|
905
|
-
'y',
|
|
906
|
-
'width',
|
|
907
|
-
'height',
|
|
908
|
-
'maskUnits',
|
|
909
|
-
'maskContentUnits',
|
|
910
|
-
'transform',
|
|
911
|
-
'clip-path',
|
|
912
|
-
'visibility',
|
|
913
|
-
'pointer-events',
|
|
914
|
-
'cursor',
|
|
915
|
-
'display',
|
|
916
|
-
],
|
|
917
|
-
pattern: [
|
|
918
|
-
'id',
|
|
919
|
-
'class',
|
|
920
|
-
'style',
|
|
921
|
-
'x',
|
|
922
|
-
'y',
|
|
923
|
-
'width',
|
|
924
|
-
'height',
|
|
925
|
-
'patternUnits',
|
|
926
|
-
'patternContentUnits',
|
|
927
|
-
'viewBox',
|
|
928
|
-
'preserveAspectRatio',
|
|
929
|
-
'transform',
|
|
930
|
-
'clip-path',
|
|
931
|
-
'visibility',
|
|
932
|
-
'pointer-events',
|
|
933
|
-
'cursor',
|
|
934
|
-
'display',
|
|
935
|
-
],
|
|
936
|
-
linearGradient: [
|
|
937
|
-
'id',
|
|
938
|
-
'class',
|
|
939
|
-
'style',
|
|
940
|
-
'x1',
|
|
941
|
-
'y1',
|
|
942
|
-
'x2',
|
|
943
|
-
'y2',
|
|
944
|
-
'gradientUnits',
|
|
945
|
-
'gradientTransform',
|
|
946
|
-
'visibility',
|
|
947
|
-
'pointer-events',
|
|
948
|
-
'cursor',
|
|
949
|
-
'display',
|
|
950
|
-
],
|
|
951
|
-
radialGradient: [
|
|
952
|
-
'id',
|
|
953
|
-
'class',
|
|
954
|
-
'style',
|
|
955
|
-
'cx',
|
|
956
|
-
'cy',
|
|
957
|
-
'r',
|
|
958
|
-
'fx',
|
|
959
|
-
'fy',
|
|
960
|
-
'gradientUnits',
|
|
961
|
-
'gradientTransform',
|
|
962
|
-
'visibility',
|
|
963
|
-
'pointer-events',
|
|
964
|
-
'cursor',
|
|
965
|
-
'display',
|
|
966
|
-
],
|
|
967
|
-
stop: [
|
|
968
|
-
'id',
|
|
969
|
-
'class',
|
|
970
|
-
'style',
|
|
971
|
-
'offset',
|
|
972
|
-
'stop-color',
|
|
973
|
-
'stop-opacity',
|
|
974
|
-
'visibility',
|
|
975
|
-
'pointer-events',
|
|
976
|
-
'cursor',
|
|
977
|
-
'display',
|
|
978
|
-
],
|
|
979
|
-
filter: [
|
|
980
|
-
'id',
|
|
981
|
-
'class',
|
|
982
|
-
'style',
|
|
983
|
-
'x',
|
|
984
|
-
'y',
|
|
985
|
-
'width',
|
|
986
|
-
'height',
|
|
987
|
-
'filterUnits',
|
|
988
|
-
'primitiveUnits',
|
|
989
|
-
'transform',
|
|
990
|
-
'clip-path',
|
|
991
|
-
'visibility',
|
|
992
|
-
'pointer-events',
|
|
993
|
-
'cursor',
|
|
994
|
-
'display',
|
|
995
|
-
],
|
|
996
|
-
feGaussianBlur: [
|
|
997
|
-
'id',
|
|
998
|
-
'class',
|
|
999
|
-
'style',
|
|
1000
|
-
'in',
|
|
1001
|
-
'stdDeviation',
|
|
1002
|
-
'visibility',
|
|
1003
|
-
'pointer-events',
|
|
1004
|
-
'cursor',
|
|
1005
|
-
'display',
|
|
1006
|
-
],
|
|
1007
|
-
feColorMatrix: [
|
|
1008
|
-
'id',
|
|
1009
|
-
'class',
|
|
1010
|
-
'style',
|
|
1011
|
-
'in',
|
|
1012
|
-
'type',
|
|
1013
|
-
'values',
|
|
1014
|
-
'visibility',
|
|
1015
|
-
'pointer-events',
|
|
1016
|
-
'cursor',
|
|
1017
|
-
'display',
|
|
1018
|
-
],
|
|
1019
|
-
feBlend: [
|
|
1020
|
-
'id',
|
|
1021
|
-
'class',
|
|
1022
|
-
'style',
|
|
1023
|
-
'in',
|
|
1024
|
-
'in2',
|
|
1025
|
-
'mode',
|
|
1026
|
-
'visibility',
|
|
1027
|
-
'pointer-events',
|
|
1028
|
-
'cursor',
|
|
1029
|
-
'display',
|
|
1030
|
-
],
|
|
1031
|
-
feOffset: [
|
|
1032
|
-
'id',
|
|
1033
|
-
'class',
|
|
1034
|
-
'style',
|
|
1035
|
-
'in',
|
|
1036
|
-
'dx',
|
|
1037
|
-
'dy',
|
|
1038
|
-
'visibility',
|
|
1039
|
-
'pointer-events',
|
|
1040
|
-
'cursor',
|
|
1041
|
-
'display',
|
|
1042
|
-
],
|
|
1043
|
-
feMerge: [
|
|
1044
|
-
'id',
|
|
1045
|
-
'class',
|
|
1046
|
-
'style',
|
|
1047
|
-
'visibility',
|
|
1048
|
-
'pointer-events',
|
|
1049
|
-
'cursor',
|
|
1050
|
-
'display',
|
|
1051
|
-
],
|
|
1052
|
-
feMergeNode: [
|
|
1053
|
-
'id',
|
|
1054
|
-
'class',
|
|
1055
|
-
'style',
|
|
1056
|
-
'in',
|
|
1057
|
-
'visibility',
|
|
1058
|
-
'pointer-events',
|
|
1059
|
-
'cursor',
|
|
1060
|
-
'display',
|
|
1061
|
-
],
|
|
1062
|
-
feComponentTransfer: [
|
|
1063
|
-
'id',
|
|
1064
|
-
'class',
|
|
1065
|
-
'style',
|
|
1066
|
-
'in',
|
|
1067
|
-
'visibility',
|
|
1068
|
-
'pointer-events',
|
|
1069
|
-
'cursor',
|
|
1070
|
-
'display',
|
|
1071
|
-
],
|
|
1072
|
-
feFuncR: [
|
|
1073
|
-
'id',
|
|
1074
|
-
'class',
|
|
1075
|
-
'style',
|
|
1076
|
-
'type',
|
|
1077
|
-
'tableValues',
|
|
1078
|
-
'slope',
|
|
1079
|
-
'intercept',
|
|
1080
|
-
'amplitude',
|
|
1081
|
-
'exponent',
|
|
1082
|
-
'offset',
|
|
1083
|
-
'visibility',
|
|
1084
|
-
'pointer-events',
|
|
1085
|
-
'cursor',
|
|
1086
|
-
'display',
|
|
1087
|
-
],
|
|
1088
|
-
feFuncG: [
|
|
1089
|
-
'id',
|
|
1090
|
-
'class',
|
|
1091
|
-
'style',
|
|
1092
|
-
'type',
|
|
1093
|
-
'tableValues',
|
|
1094
|
-
'slope',
|
|
1095
|
-
'intercept',
|
|
1096
|
-
'amplitude',
|
|
1097
|
-
'exponent',
|
|
1098
|
-
'offset',
|
|
1099
|
-
'visibility',
|
|
1100
|
-
'pointer-events',
|
|
1101
|
-
'cursor',
|
|
1102
|
-
'display',
|
|
1103
|
-
],
|
|
1104
|
-
feFuncB: [
|
|
1105
|
-
'id',
|
|
1106
|
-
'class',
|
|
1107
|
-
'style',
|
|
1108
|
-
'type',
|
|
1109
|
-
'tableValues',
|
|
1110
|
-
'slope',
|
|
1111
|
-
'intercept',
|
|
1112
|
-
'amplitude',
|
|
1113
|
-
'exponent',
|
|
1114
|
-
'offset',
|
|
1115
|
-
'visibility',
|
|
1116
|
-
'pointer-events',
|
|
1117
|
-
'cursor',
|
|
1118
|
-
'display',
|
|
1119
|
-
],
|
|
1120
|
-
feFuncA: [
|
|
1121
|
-
'id',
|
|
1122
|
-
'class',
|
|
1123
|
-
'style',
|
|
1124
|
-
'type',
|
|
1125
|
-
'tableValues',
|
|
1126
|
-
'slope',
|
|
1127
|
-
'intercept',
|
|
1128
|
-
'amplitude',
|
|
1129
|
-
'exponent',
|
|
1130
|
-
'offset',
|
|
1131
|
-
'visibility',
|
|
1132
|
-
'pointer-events',
|
|
1133
|
-
'cursor',
|
|
1134
|
-
'display',
|
|
1135
|
-
],
|
|
1136
|
-
animate: [
|
|
1137
|
-
'id',
|
|
1138
|
-
'class',
|
|
1139
|
-
'style',
|
|
1140
|
-
'attributeName',
|
|
1141
|
-
'from',
|
|
1142
|
-
'to',
|
|
1143
|
-
'begin',
|
|
1144
|
-
'dur',
|
|
1145
|
-
'end',
|
|
1146
|
-
'repeatCount',
|
|
1147
|
-
'values',
|
|
1148
|
-
'keyTimes',
|
|
1149
|
-
'keySplines',
|
|
1150
|
-
'calcMode',
|
|
1151
|
-
'visibility',
|
|
1152
|
-
'pointer-events',
|
|
1153
|
-
'cursor',
|
|
1154
|
-
'display',
|
|
1155
|
-
],
|
|
1156
|
-
animateTransform: [
|
|
1157
|
-
'id',
|
|
1158
|
-
'class',
|
|
1159
|
-
'style',
|
|
1160
|
-
'attributeName',
|
|
1161
|
-
'type',
|
|
1162
|
-
'from',
|
|
1163
|
-
'to',
|
|
1164
|
-
'begin',
|
|
1165
|
-
'dur',
|
|
1166
|
-
'end',
|
|
1167
|
-
'repeatCount',
|
|
1168
|
-
'values',
|
|
1169
|
-
'keyTimes',
|
|
1170
|
-
'keySplines',
|
|
1171
|
-
'calcMode',
|
|
1172
|
-
'visibility',
|
|
1173
|
-
'pointer-events',
|
|
1174
|
-
'cursor',
|
|
1175
|
-
'display',
|
|
1176
|
-
],
|
|
1177
|
-
animateMotion: [
|
|
1178
|
-
'id',
|
|
1179
|
-
'class',
|
|
1180
|
-
'style',
|
|
1181
|
-
'path',
|
|
1182
|
-
'keyPoints',
|
|
1183
|
-
'rotate',
|
|
1184
|
-
'from',
|
|
1185
|
-
'to',
|
|
1186
|
-
'begin',
|
|
1187
|
-
'dur',
|
|
1188
|
-
'end',
|
|
1189
|
-
'repeatCount',
|
|
1190
|
-
'values',
|
|
1191
|
-
'keyTimes',
|
|
1192
|
-
'keySplines',
|
|
1193
|
-
'calcMode',
|
|
1194
|
-
'visibility',
|
|
1195
|
-
'pointer-events',
|
|
1196
|
-
'cursor',
|
|
1197
|
-
'display',
|
|
1198
|
-
],
|
|
1199
|
-
set: [
|
|
1200
|
-
'id',
|
|
1201
|
-
'class',
|
|
1202
|
-
'style',
|
|
1203
|
-
'attributeName',
|
|
1204
|
-
'to',
|
|
1205
|
-
'begin',
|
|
1206
|
-
'dur',
|
|
1207
|
-
'end',
|
|
1208
|
-
'repeatCount',
|
|
1209
|
-
'visibility',
|
|
1210
|
-
'pointer-events',
|
|
1211
|
-
'cursor',
|
|
1212
|
-
'display',
|
|
1213
|
-
],
|
|
1214
|
-
desc: [
|
|
1215
|
-
'id',
|
|
1216
|
-
'class',
|
|
1217
|
-
'style',
|
|
1218
|
-
'visibility',
|
|
1219
|
-
'pointer-events',
|
|
1220
|
-
'cursor',
|
|
1221
|
-
'display',
|
|
1222
|
-
],
|
|
1223
|
-
title: [
|
|
1224
|
-
'id',
|
|
1225
|
-
'class',
|
|
1226
|
-
'style',
|
|
1227
|
-
'visibility',
|
|
1228
|
-
'pointer-events',
|
|
1229
|
-
'cursor',
|
|
1230
|
-
'display',
|
|
1231
|
-
],
|
|
1232
|
-
};
|
|
1233
|
-
const selfClosing = [
|
|
1234
|
-
'path',
|
|
1235
|
-
'rect',
|
|
1236
|
-
'circle',
|
|
1237
|
-
'ellipse',
|
|
1238
|
-
'line',
|
|
1239
|
-
'polyline',
|
|
1240
|
-
'polygon',
|
|
1241
|
-
'stop',
|
|
1242
|
-
'use',
|
|
1243
|
-
'image',
|
|
1244
|
-
'feGaussianBlur',
|
|
1245
|
-
'feColorMatrix',
|
|
1246
|
-
'feBlend',
|
|
1247
|
-
'feOffset',
|
|
1248
|
-
'feMergeNode',
|
|
1249
|
-
'feFuncR',
|
|
1250
|
-
'feFuncG',
|
|
1251
|
-
'feFuncB',
|
|
1252
|
-
'feFuncA',
|
|
1253
|
-
];
|
|
1254
|
-
const sanitizeSvg = (svg) => {
|
|
1255
|
-
return sanitizeHtml(svg, {
|
|
1256
|
-
allowedTags: Object.keys(allowedAttributes),
|
|
1257
|
-
allowedAttributes,
|
|
1258
|
-
selfClosing,
|
|
1259
|
-
parser: {
|
|
1260
|
-
lowerCaseTags: false,
|
|
1261
|
-
lowerCaseAttributeNames: false,
|
|
1262
|
-
},
|
|
1263
|
-
});
|
|
1264
|
-
};
|
|
1265
|
-
|
|
1266
577
|
class IconComponent {
|
|
1267
578
|
set name(value) {
|
|
1268
579
|
const unsafeSvg = (value && this.registry.getSvg(value)) || '';
|
|
1269
|
-
const safeSvg =
|
|
580
|
+
const safeSvg = DOMPurify.sanitize(unsafeSvg);
|
|
1270
581
|
this.elementRef.nativeElement.innerHTML = safeSvg;
|
|
1271
582
|
this.setClasses();
|
|
1272
583
|
}
|
|
@@ -1400,6 +711,12 @@ class ButtonComponent {
|
|
|
1400
711
|
get variantClass() {
|
|
1401
712
|
return `sapphire-button--${this.variant}`;
|
|
1402
713
|
}
|
|
714
|
+
get hostTabIndex() {
|
|
715
|
+
var _a;
|
|
716
|
+
if (this.disabled)
|
|
717
|
+
return -1;
|
|
718
|
+
return (_a = this.tabindex) !== null && _a !== void 0 ? _a : null;
|
|
719
|
+
}
|
|
1403
720
|
constructor(elementRef) {
|
|
1404
721
|
this.elementRef = elementRef;
|
|
1405
722
|
this.variant = 'primary';
|
|
@@ -1421,12 +738,12 @@ class ButtonComponent {
|
|
|
1421
738
|
}
|
|
1422
739
|
}
|
|
1423
740
|
ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1424
|
-
ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ButtonComponent, selector: "button[sp-button], a[sp-button]", inputs: { variant: "variant", size: "size", disabled: "disabled", iconAlign: "iconAlign", type: "type" }, host: { properties: { "attr.disabled": "disabled || null", "class.is-disabled": "disabled", "class.sapphire-button--lg": "size === \"lg\"", "class.sapphire-button--sm": "size === \"sm\"", "class.sapphire-button--with-left-icon": "buttonIcon && iconAlign === \"left\"", "class.sapphire-button--with-right-icon": "buttonIcon && iconAlign === \"right\"", "type": "this.type", "class": "this.variantClass" }, classAttribute: "sapphire-button" }, providers: [
|
|
741
|
+
ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ButtonComponent, selector: "button[sp-button], a[sp-button]", inputs: { variant: "variant", size: "size", disabled: "disabled", iconAlign: "iconAlign", type: "type", tabindex: "tabindex" }, host: { properties: { "attr.disabled": "disabled || null", "class.is-disabled": "disabled", "class.sapphire-button--lg": "size === \"lg\"", "class.sapphire-button--sm": "size === \"sm\"", "class.sapphire-button--with-left-icon": "buttonIcon && iconAlign === \"left\"", "class.sapphire-button--with-right-icon": "buttonIcon && iconAlign === \"right\"", "type": "this.type", "class": "this.variantClass", "attr.tabindex": "this.hostTabIndex" }, classAttribute: "sapphire-button" }, providers: [
|
|
1425
742
|
{
|
|
1426
743
|
provide: ICON_SIZE_PROVIDER,
|
|
1427
744
|
useClass: ButtonIconSizeProvider,
|
|
1428
745
|
},
|
|
1429
|
-
], queries: [{ propertyName: "buttonIcon", first: true, predicate: ButtonIconDirective, descendants: true }, { propertyName: "icon", first: true, predicate: IconComponent, descendants: true }], hostDirectives: [{ directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }], ngImport: i0, template: "<span class=\"sapphire-button__content\">\n <span\n *ngIf=\"buttonIcon && iconAlign === 'left'\"\n class=\"sapphire-button__icon\"\n >\n <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\n </span>\n\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n\n <span\n *ngIf=\"buttonIcon && iconAlign === 'right'\"\n class=\"sapphire-button__icon\"\n >\n <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\n </span>\n\n <ng-template #content>\n <ng-content></ng-content>\n </ng-template>\n <ng-template #iconContent>\n <ng-content select=\"[spButtonIcon]\"></ng-content>\n </ng-template>\n</span>\n", styles: [".sapphire-button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;margin:0;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-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding:0 var(--sapphire-global-size-generic-50);height:var(--sapphire-semantic-size-height-control-md);min-width:var(--sapphire-global-size-generic-100);max-width:-moz-fit-content;max-width:fit-content;flex-shrink:0;border-radius:var(--sapphire-semantic-size-height-control-md);border-style:solid;border-width:0;border-color:transparent;transition-property:opacity,background,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:var(--sapphire-semantic-transitions-fade);cursor:pointer}.sapphire-button__content{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;gap:var(--sapphire-semantic-size-spacing-xs);margin:0;width:100%}a.sapphire-button{text-decoration:none}.sapphire-button:disabled,.sapphire-button.is-disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-button:focus{outline:none}.sapphire-button.is-focus,.sapphire-button: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)}.sapphire-button--loading{cursor:not-allowed}.sapphire-button__spinner{position:absolute;display:inherit}.sapphire-button--loading .sapphire-button__content{visibility:hidden}.sapphire-button--primary{background:var(--sapphire-semantic-color-background-action-primary-default);color:var(--sapphire-semantic-color-foreground-action-on-primary-default)}.sapphire-button--primary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--primary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-primary-hover)}.sapphire-button--primary.is-focus,.sapphire-button--primary:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-primary-default);color:var(--sapphire-semantic-color-foreground-action-on-primary-default)}.sapphire-button--primary:not(:disabled):not(.is-disabled).is-active,.sapphire-button--primary:not(:disabled):not(.is-disabled):active,.sapphire-button--primary:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-primary-active);color:var(--sapphire-semantic-color-foreground-action-on-primary-active)}.sapphire-button--secondary{background:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-secondary-default)}.sapphire-button--secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-secondary-hover);color:var(--sapphire-semantic-color-foreground-action-on-secondary-hover)}.sapphire-button--secondary.is-focus,.sapphire-button--secondary:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-secondary-default)}.sapphire-button--secondary:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-secondary-active);color:var(--sapphire-semantic-color-foreground-action-on-secondary-active)}.sapphire-button--tertiary{background:var(--sapphire-semantic-color-background-action-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-default)}.sapphire-button--tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-tertiary-hover);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-hover)}.sapphire-button--tertiary.is-focus,.sapphire-button--tertiary:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-default)}.sapphire-button--tertiary:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-tertiary-active);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-active)}.sapphire-button--text{color:var(--sapphire-semantic-color-foreground-action-link-default);border-radius:var(--sapphire-semantic-size-radius-xs);background:transparent;padding:0}.sapphire-button--text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{color:var(--sapphire-semantic-color-foreground-action-link-hover)}.sapphire-button--text:not(:disabled):not(.is-disabled).is-active,.sapphire-button--text:not(:disabled):not(.is-disabled):active,.sapphire-button--text:not(:disabled):not(.is-disabled):focus-visible:active{color:var(--sapphire-semantic-color-foreground-action-link-active)}.sapphire-button--danger{background:var(--sapphire-semantic-color-background-action-danger-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-default)}.sapphire-button--danger:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-danger-hover);color:var(--sapphire-semantic-color-foreground-action-on-danger-hover)}.sapphire-button--danger.is-focus,.sapphire-button--danger:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-danger-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-default)}.sapphire-button--danger:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger:not(:disabled):not(.is-disabled):active,.sapphire-button--danger:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-danger-active);color:var(--sapphire-semantic-color-foreground-action-on-danger-active)}.sapphire-button--danger-secondary{background:var(--sapphire-semantic-color-background-action-danger-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-secondary-default)}.sapphire-button--danger-secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-danger-secondary-hover);color:var(--sapphire-semantic-color-foreground-action-on-danger-secondary-hover)}.sapphire-button--danger-secondary.is-focus,.sapphire-button--danger-secondary:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-danger-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-secondary-default)}.sapphire-button--danger-secondary:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-secondary:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-secondary:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-danger-secondary-active);color:var(--sapphire-semantic-color-foreground-action-on-danger-secondary-active)}.sapphire-button--danger-tertiary{background:var(--sapphire-semantic-color-background-action-danger-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-default)}.sapphire-button--danger-tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-danger-tertiary-hover);color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-hover)}.sapphire-button--danger-tertiary.is-focus,.sapphire-button--danger-tertiary:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-danger-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-default)}.sapphire-button--danger-tertiary:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-tertiary:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-tertiary:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-danger-tertiary-active);color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-active)}.sapphire-button--danger-text{color:var(--sapphire-semantic-color-foreground-action-danger-default);border-radius:var(--sapphire-semantic-size-radius-xs);background:transparent;padding:0}.sapphire-button--danger-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{color:var(--sapphire-semantic-color-foreground-action-danger-hover)}.sapphire-button--danger-text:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):focus-visible:active{color:var(--sapphire-semantic-color-foreground-action-danger-active)}.sapphire-button--selected{background:var(--sapphire-semantic-color-background-action-select-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-select-secondary-default)}.sapphire-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-select-secondary-hover);color:var(--sapphire-semantic-color-foreground-action-on-select-secondary-hover)}.sapphire-button--selected.is-focus,.sapphire-button--selected:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-select-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-select-secondary-default)}.sapphire-button--selected:not(:disabled):not(.is-disabled).is-active,.sapphire-button--selected:not(:disabled):not(.is-disabled):active,.sapphire-button--selected:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-select-secondary-active);color:var(--sapphire-semantic-color-foreground-action-on-select-secondary-active)}.sapphire-button--unselected{background:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-secondary-default)}.sapphire-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-secondary-hover);color:var(--sapphire-semantic-color-foreground-action-on-secondary-hover)}.sapphire-button--unselected.is-focus,.sapphire-button--unselected:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-secondary-default)}.sapphire-button--unselected:not(:disabled):not(.is-disabled).is-active,.sapphire-button--unselected:not(:disabled):not(.is-disabled):active,.sapphire-button--unselected:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-secondary-active);color:var(--sapphire-semantic-color-foreground-action-on-secondary-active)}.sapphire-button__icon{display:flex;flex-direction:column;justify-content:center;align-items:center;height:var(--sapphire-semantic-size-icon-sm);width:var(--sapphire-semantic-size-icon-sm)}.sapphire-button--lg .sapphire-button__icon{height:var(--sapphire-semantic-size-icon-md);width:var(--sapphire-semantic-size-icon-md)}.sapphire-button--lg{height:var(--sapphire-semantic-size-height-control-lg);min-width:var(--sapphire-global-size-generic-120);padding:0 var(--sapphire-semantic-size-spacing-xl);font-size:var(--sapphire-semantic-size-font-control-lg);border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-button--lg.sapphire-button--text,.sapphire-button--lg.sapphire-button--danger-text{padding:0;border-radius:var(--sapphire-semantic-size-radius-xs)}.sapphire-button--sm{height:var(--sapphire-semantic-size-height-control-sm);min-width:var(--sapphire-global-size-generic-80);padding:0 var(--sapphire-semantic-size-spacing-md);font-size:var(--sapphire-semantic-size-font-control-sm);border-radius:var(--sapphire-semantic-size-height-control-sm)}.sapphire-button--sm.sapphire-button--text,.sapphire-button--sm.sapphire-button--danger-text{padding:0;border-radius:var(--sapphire-semantic-size-radius-xs)}.sapphire-button--sm .sapphire-button__content{gap:var(--sapphire-semantic-size-spacing-2xs)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
746
|
+
], queries: [{ propertyName: "buttonIcon", first: true, predicate: ButtonIconDirective, descendants: true }, { propertyName: "icon", first: true, predicate: IconComponent, descendants: true }], hostDirectives: [{ directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }], ngImport: i0, template: "<span class=\"sapphire-button__content\">\n <span\n *ngIf=\"buttonIcon && iconAlign === 'left'\"\n class=\"sapphire-button__icon\"\n >\n <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\n </span>\n\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n\n <span\n *ngIf=\"buttonIcon && iconAlign === 'right'\"\n class=\"sapphire-button__icon\"\n >\n <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\n </span>\n\n <ng-template #content>\n <ng-content></ng-content>\n </ng-template>\n <ng-template #iconContent>\n <ng-content select=\"[spButtonIcon]\"></ng-content>\n </ng-template>\n</span>\n", styles: [".sapphire-button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;margin:0;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-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding:0 var(--sapphire-global-size-generic-50);height:var(--sapphire-semantic-size-height-control-md);min-width:var(--sapphire-global-size-generic-100);max-width:-moz-fit-content;max-width:fit-content;flex-shrink:0;border-radius:var(--sapphire-semantic-size-height-control-md);border-style:solid;border-width:0;border-color:transparent;transition-property:opacity,background,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:var(--sapphire-semantic-transitions-fade);cursor:pointer}.sapphire-button__content{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;gap:var(--sapphire-semantic-size-spacing-xs);margin:0;width:100%}a.sapphire-button{text-decoration:none}.sapphire-button:disabled,.sapphire-button.is-disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-button:focus{outline:none}.sapphire-button.is-focus,.sapphire-button: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)}.sapphire-button--loading{cursor:not-allowed}.sapphire-button__spinner{position:absolute;display:inherit}.sapphire-button--loading .sapphire-button__content{visibility:hidden}.sapphire-button--primary{background:var(--sapphire-semantic-color-background-action-primary-default);color:var(--sapphire-semantic-color-foreground-action-on-primary-default)}.sapphire-button--primary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--primary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-primary-hover)}.sapphire-button--primary.is-focus,.sapphire-button--primary:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-primary-default);color:var(--sapphire-semantic-color-foreground-action-on-primary-default)}.sapphire-button--primary:not(:disabled):not(.is-disabled).is-active,.sapphire-button--primary:not(:disabled):not(.is-disabled):active,.sapphire-button--primary:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-primary-active);color:var(--sapphire-semantic-color-foreground-action-on-primary-active)}.sapphire-button--secondary{background:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-secondary-default)}.sapphire-button--secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-secondary-hover);color:var(--sapphire-semantic-color-foreground-action-on-secondary-hover)}.sapphire-button--secondary.is-focus,.sapphire-button--secondary:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-secondary-default)}.sapphire-button--secondary:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-secondary-active);color:var(--sapphire-semantic-color-foreground-action-on-secondary-active)}.sapphire-button--tertiary{background:var(--sapphire-semantic-color-background-action-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-default)}.sapphire-button--tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-tertiary-hover);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-hover)}.sapphire-button--tertiary.is-focus,.sapphire-button--tertiary:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-default)}.sapphire-button--tertiary:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-tertiary-active);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-active)}.sapphire-button--text{color:var(--sapphire-semantic-color-foreground-action-link-default);border-radius:var(--sapphire-semantic-size-radius-xs);background:transparent;padding:0}.sapphire-button--text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{text-decoration:underline;text-decoration-thickness:var(--sapphire-semantic-size-border-sm);color:var(--sapphire-semantic-color-foreground-action-link-hover)}.sapphire-button--text:not(:disabled):not(.is-disabled).is-active,.sapphire-button--text:not(:disabled):not(.is-disabled):active,.sapphire-button--text:not(:disabled):not(.is-disabled):focus-visible:active{text-decoration:underline;text-decoration-thickness:var(--sapphire-semantic-size-border-sm);color:var(--sapphire-semantic-color-foreground-action-link-active)}.sapphire-button--danger{background:var(--sapphire-semantic-color-background-action-danger-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-default)}.sapphire-button--danger:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-danger-hover);color:var(--sapphire-semantic-color-foreground-action-on-danger-hover)}.sapphire-button--danger.is-focus,.sapphire-button--danger:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-danger-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-default)}.sapphire-button--danger:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger:not(:disabled):not(.is-disabled):active,.sapphire-button--danger:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-danger-active);color:var(--sapphire-semantic-color-foreground-action-on-danger-active)}.sapphire-button--danger-secondary{background:var(--sapphire-semantic-color-background-action-danger-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-secondary-default)}.sapphire-button--danger-secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-danger-secondary-hover);color:var(--sapphire-semantic-color-foreground-action-on-danger-secondary-hover)}.sapphire-button--danger-secondary.is-focus,.sapphire-button--danger-secondary:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-danger-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-secondary-default)}.sapphire-button--danger-secondary:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-secondary:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-secondary:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-danger-secondary-active);color:var(--sapphire-semantic-color-foreground-action-on-danger-secondary-active)}.sapphire-button--danger-tertiary{background:var(--sapphire-semantic-color-background-action-danger-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-default)}.sapphire-button--danger-tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-danger-tertiary-hover);color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-hover)}.sapphire-button--danger-tertiary.is-focus,.sapphire-button--danger-tertiary:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-danger-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-default)}.sapphire-button--danger-tertiary:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-tertiary:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-tertiary:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-danger-tertiary-active);color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-active)}.sapphire-button--danger-text{color:var(--sapphire-semantic-color-foreground-action-danger-default);border-radius:var(--sapphire-semantic-size-radius-xs);background:transparent;padding:0}.sapphire-button--danger-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{color:var(--sapphire-semantic-color-foreground-action-danger-hover)}.sapphire-button--danger-text:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):focus-visible:active{color:var(--sapphire-semantic-color-foreground-action-danger-active)}.sapphire-button--selected{background:var(--sapphire-semantic-color-background-action-select-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-select-secondary-default)}.sapphire-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-select-secondary-hover);color:var(--sapphire-semantic-color-foreground-action-on-select-secondary-hover)}.sapphire-button--selected.is-focus,.sapphire-button--selected:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-select-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-select-secondary-default)}.sapphire-button--selected:not(:disabled):not(.is-disabled).is-active,.sapphire-button--selected:not(:disabled):not(.is-disabled):active,.sapphire-button--selected:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-select-secondary-active);color:var(--sapphire-semantic-color-foreground-action-on-select-secondary-active)}.sapphire-button--unselected{background:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-secondary-default)}.sapphire-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-secondary-hover);color:var(--sapphire-semantic-color-foreground-action-on-secondary-hover)}.sapphire-button--unselected.is-focus,.sapphire-button--unselected:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-secondary-default)}.sapphire-button--unselected:not(:disabled):not(.is-disabled).is-active,.sapphire-button--unselected:not(:disabled):not(.is-disabled):active,.sapphire-button--unselected:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-secondary-active);color:var(--sapphire-semantic-color-foreground-action-on-secondary-active)}.sapphire-button__icon{display:flex;flex-direction:column;justify-content:center;align-items:center;height:var(--sapphire-semantic-size-icon-sm);width:var(--sapphire-semantic-size-icon-sm)}.sapphire-button--lg .sapphire-button__icon{height:var(--sapphire-semantic-size-icon-md);width:var(--sapphire-semantic-size-icon-md)}.sapphire-button--lg{height:var(--sapphire-semantic-size-height-control-lg);min-width:var(--sapphire-global-size-generic-120);padding:0 var(--sapphire-semantic-size-spacing-xl);font-size:var(--sapphire-semantic-size-font-control-lg);border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-button--lg.sapphire-button--text,.sapphire-button--lg.sapphire-button--danger-text{padding:0;border-radius:var(--sapphire-semantic-size-radius-xs)}.sapphire-button--sm{height:var(--sapphire-semantic-size-height-control-sm);min-width:var(--sapphire-global-size-generic-80);padding:0 var(--sapphire-semantic-size-spacing-md);font-size:var(--sapphire-semantic-size-font-control-sm);border-radius:var(--sapphire-semantic-size-height-control-sm)}.sapphire-button--sm.sapphire-button--text,.sapphire-button--sm.sapphire-button--danger-text{padding:0;border-radius:var(--sapphire-semantic-size-radius-xs)}.sapphire-button--sm .sapphire-button__content{gap:var(--sapphire-semantic-size-spacing-2xs)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1430
747
|
__decorate([
|
|
1431
748
|
CoerceBoolean
|
|
1432
749
|
], ButtonComponent.prototype, "disabled", void 0);
|
|
@@ -1445,7 +762,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
1445
762
|
provide: ICON_SIZE_PROVIDER,
|
|
1446
763
|
useClass: ButtonIconSizeProvider,
|
|
1447
764
|
},
|
|
1448
|
-
], standalone: false, template: "<span class=\"sapphire-button__content\">\n <span\n *ngIf=\"buttonIcon && iconAlign === 'left'\"\n class=\"sapphire-button__icon\"\n >\n <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\n </span>\n\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n\n <span\n *ngIf=\"buttonIcon && iconAlign === 'right'\"\n class=\"sapphire-button__icon\"\n >\n <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\n </span>\n\n <ng-template #content>\n <ng-content></ng-content>\n </ng-template>\n <ng-template #iconContent>\n <ng-content select=\"[spButtonIcon]\"></ng-content>\n </ng-template>\n</span>\n", styles: [".sapphire-button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;margin:0;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-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding:0 var(--sapphire-global-size-generic-50);height:var(--sapphire-semantic-size-height-control-md);min-width:var(--sapphire-global-size-generic-100);max-width:-moz-fit-content;max-width:fit-content;flex-shrink:0;border-radius:var(--sapphire-semantic-size-height-control-md);border-style:solid;border-width:0;border-color:transparent;transition-property:opacity,background,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:var(--sapphire-semantic-transitions-fade);cursor:pointer}.sapphire-button__content{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;gap:var(--sapphire-semantic-size-spacing-xs);margin:0;width:100%}a.sapphire-button{text-decoration:none}.sapphire-button:disabled,.sapphire-button.is-disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-button:focus{outline:none}.sapphire-button.is-focus,.sapphire-button: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)}.sapphire-button--loading{cursor:not-allowed}.sapphire-button__spinner{position:absolute;display:inherit}.sapphire-button--loading .sapphire-button__content{visibility:hidden}.sapphire-button--primary{background:var(--sapphire-semantic-color-background-action-primary-default);color:var(--sapphire-semantic-color-foreground-action-on-primary-default)}.sapphire-button--primary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--primary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-primary-hover)}.sapphire-button--primary.is-focus,.sapphire-button--primary:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-primary-default);color:var(--sapphire-semantic-color-foreground-action-on-primary-default)}.sapphire-button--primary:not(:disabled):not(.is-disabled).is-active,.sapphire-button--primary:not(:disabled):not(.is-disabled):active,.sapphire-button--primary:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-primary-active);color:var(--sapphire-semantic-color-foreground-action-on-primary-active)}.sapphire-button--secondary{background:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-secondary-default)}.sapphire-button--secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-secondary-hover);color:var(--sapphire-semantic-color-foreground-action-on-secondary-hover)}.sapphire-button--secondary.is-focus,.sapphire-button--secondary:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-secondary-default)}.sapphire-button--secondary:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-secondary-active);color:var(--sapphire-semantic-color-foreground-action-on-secondary-active)}.sapphire-button--tertiary{background:var(--sapphire-semantic-color-background-action-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-default)}.sapphire-button--tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-tertiary-hover);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-hover)}.sapphire-button--tertiary.is-focus,.sapphire-button--tertiary:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-default)}.sapphire-button--tertiary:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-tertiary-active);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-active)}.sapphire-button--text{color:var(--sapphire-semantic-color-foreground-action-link-default);border-radius:var(--sapphire-semantic-size-radius-xs);background:transparent;padding:0}.sapphire-button--text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{color:var(--sapphire-semantic-color-foreground-action-link-hover)}.sapphire-button--text:not(:disabled):not(.is-disabled).is-active,.sapphire-button--text:not(:disabled):not(.is-disabled):active,.sapphire-button--text:not(:disabled):not(.is-disabled):focus-visible:active{color:var(--sapphire-semantic-color-foreground-action-link-active)}.sapphire-button--danger{background:var(--sapphire-semantic-color-background-action-danger-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-default)}.sapphire-button--danger:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-danger-hover);color:var(--sapphire-semantic-color-foreground-action-on-danger-hover)}.sapphire-button--danger.is-focus,.sapphire-button--danger:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-danger-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-default)}.sapphire-button--danger:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger:not(:disabled):not(.is-disabled):active,.sapphire-button--danger:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-danger-active);color:var(--sapphire-semantic-color-foreground-action-on-danger-active)}.sapphire-button--danger-secondary{background:var(--sapphire-semantic-color-background-action-danger-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-secondary-default)}.sapphire-button--danger-secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-danger-secondary-hover);color:var(--sapphire-semantic-color-foreground-action-on-danger-secondary-hover)}.sapphire-button--danger-secondary.is-focus,.sapphire-button--danger-secondary:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-danger-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-secondary-default)}.sapphire-button--danger-secondary:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-secondary:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-secondary:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-danger-secondary-active);color:var(--sapphire-semantic-color-foreground-action-on-danger-secondary-active)}.sapphire-button--danger-tertiary{background:var(--sapphire-semantic-color-background-action-danger-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-default)}.sapphire-button--danger-tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-danger-tertiary-hover);color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-hover)}.sapphire-button--danger-tertiary.is-focus,.sapphire-button--danger-tertiary:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-danger-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-default)}.sapphire-button--danger-tertiary:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-tertiary:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-tertiary:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-danger-tertiary-active);color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-active)}.sapphire-button--danger-text{color:var(--sapphire-semantic-color-foreground-action-danger-default);border-radius:var(--sapphire-semantic-size-radius-xs);background:transparent;padding:0}.sapphire-button--danger-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{color:var(--sapphire-semantic-color-foreground-action-danger-hover)}.sapphire-button--danger-text:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):focus-visible:active{color:var(--sapphire-semantic-color-foreground-action-danger-active)}.sapphire-button--selected{background:var(--sapphire-semantic-color-background-action-select-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-select-secondary-default)}.sapphire-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-select-secondary-hover);color:var(--sapphire-semantic-color-foreground-action-on-select-secondary-hover)}.sapphire-button--selected.is-focus,.sapphire-button--selected:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-select-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-select-secondary-default)}.sapphire-button--selected:not(:disabled):not(.is-disabled).is-active,.sapphire-button--selected:not(:disabled):not(.is-disabled):active,.sapphire-button--selected:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-select-secondary-active);color:var(--sapphire-semantic-color-foreground-action-on-select-secondary-active)}.sapphire-button--unselected{background:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-secondary-default)}.sapphire-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-secondary-hover);color:var(--sapphire-semantic-color-foreground-action-on-secondary-hover)}.sapphire-button--unselected.is-focus,.sapphire-button--unselected:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-secondary-default)}.sapphire-button--unselected:not(:disabled):not(.is-disabled).is-active,.sapphire-button--unselected:not(:disabled):not(.is-disabled):active,.sapphire-button--unselected:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-secondary-active);color:var(--sapphire-semantic-color-foreground-action-on-secondary-active)}.sapphire-button__icon{display:flex;flex-direction:column;justify-content:center;align-items:center;height:var(--sapphire-semantic-size-icon-sm);width:var(--sapphire-semantic-size-icon-sm)}.sapphire-button--lg .sapphire-button__icon{height:var(--sapphire-semantic-size-icon-md);width:var(--sapphire-semantic-size-icon-md)}.sapphire-button--lg{height:var(--sapphire-semantic-size-height-control-lg);min-width:var(--sapphire-global-size-generic-120);padding:0 var(--sapphire-semantic-size-spacing-xl);font-size:var(--sapphire-semantic-size-font-control-lg);border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-button--lg.sapphire-button--text,.sapphire-button--lg.sapphire-button--danger-text{padding:0;border-radius:var(--sapphire-semantic-size-radius-xs)}.sapphire-button--sm{height:var(--sapphire-semantic-size-height-control-sm);min-width:var(--sapphire-global-size-generic-80);padding:0 var(--sapphire-semantic-size-spacing-md);font-size:var(--sapphire-semantic-size-font-control-sm);border-radius:var(--sapphire-semantic-size-height-control-sm)}.sapphire-button--sm.sapphire-button--text,.sapphire-button--sm.sapphire-button--danger-text{padding:0;border-radius:var(--sapphire-semantic-size-radius-xs)}.sapphire-button--sm .sapphire-button__content{gap:var(--sapphire-semantic-size-spacing-2xs)}\n"] }]
|
|
765
|
+
], standalone: false, template: "<span class=\"sapphire-button__content\">\n <span\n *ngIf=\"buttonIcon && iconAlign === 'left'\"\n class=\"sapphire-button__icon\"\n >\n <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\n </span>\n\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n\n <span\n *ngIf=\"buttonIcon && iconAlign === 'right'\"\n class=\"sapphire-button__icon\"\n >\n <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\n </span>\n\n <ng-template #content>\n <ng-content></ng-content>\n </ng-template>\n <ng-template #iconContent>\n <ng-content select=\"[spButtonIcon]\"></ng-content>\n </ng-template>\n</span>\n", styles: [".sapphire-button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;margin:0;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-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding:0 var(--sapphire-global-size-generic-50);height:var(--sapphire-semantic-size-height-control-md);min-width:var(--sapphire-global-size-generic-100);max-width:-moz-fit-content;max-width:fit-content;flex-shrink:0;border-radius:var(--sapphire-semantic-size-height-control-md);border-style:solid;border-width:0;border-color:transparent;transition-property:opacity,background,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:var(--sapphire-semantic-transitions-fade);cursor:pointer}.sapphire-button__content{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;gap:var(--sapphire-semantic-size-spacing-xs);margin:0;width:100%}a.sapphire-button{text-decoration:none}.sapphire-button:disabled,.sapphire-button.is-disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-button:focus{outline:none}.sapphire-button.is-focus,.sapphire-button: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)}.sapphire-button--loading{cursor:not-allowed}.sapphire-button__spinner{position:absolute;display:inherit}.sapphire-button--loading .sapphire-button__content{visibility:hidden}.sapphire-button--primary{background:var(--sapphire-semantic-color-background-action-primary-default);color:var(--sapphire-semantic-color-foreground-action-on-primary-default)}.sapphire-button--primary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--primary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-primary-hover)}.sapphire-button--primary.is-focus,.sapphire-button--primary:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-primary-default);color:var(--sapphire-semantic-color-foreground-action-on-primary-default)}.sapphire-button--primary:not(:disabled):not(.is-disabled).is-active,.sapphire-button--primary:not(:disabled):not(.is-disabled):active,.sapphire-button--primary:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-primary-active);color:var(--sapphire-semantic-color-foreground-action-on-primary-active)}.sapphire-button--secondary{background:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-secondary-default)}.sapphire-button--secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-secondary-hover);color:var(--sapphire-semantic-color-foreground-action-on-secondary-hover)}.sapphire-button--secondary.is-focus,.sapphire-button--secondary:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-secondary-default)}.sapphire-button--secondary:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-secondary-active);color:var(--sapphire-semantic-color-foreground-action-on-secondary-active)}.sapphire-button--tertiary{background:var(--sapphire-semantic-color-background-action-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-default)}.sapphire-button--tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-tertiary-hover);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-hover)}.sapphire-button--tertiary.is-focus,.sapphire-button--tertiary:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-default)}.sapphire-button--tertiary:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-tertiary-active);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-active)}.sapphire-button--text{color:var(--sapphire-semantic-color-foreground-action-link-default);border-radius:var(--sapphire-semantic-size-radius-xs);background:transparent;padding:0}.sapphire-button--text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{text-decoration:underline;text-decoration-thickness:var(--sapphire-semantic-size-border-sm);color:var(--sapphire-semantic-color-foreground-action-link-hover)}.sapphire-button--text:not(:disabled):not(.is-disabled).is-active,.sapphire-button--text:not(:disabled):not(.is-disabled):active,.sapphire-button--text:not(:disabled):not(.is-disabled):focus-visible:active{text-decoration:underline;text-decoration-thickness:var(--sapphire-semantic-size-border-sm);color:var(--sapphire-semantic-color-foreground-action-link-active)}.sapphire-button--danger{background:var(--sapphire-semantic-color-background-action-danger-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-default)}.sapphire-button--danger:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-danger-hover);color:var(--sapphire-semantic-color-foreground-action-on-danger-hover)}.sapphire-button--danger.is-focus,.sapphire-button--danger:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-danger-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-default)}.sapphire-button--danger:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger:not(:disabled):not(.is-disabled):active,.sapphire-button--danger:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-danger-active);color:var(--sapphire-semantic-color-foreground-action-on-danger-active)}.sapphire-button--danger-secondary{background:var(--sapphire-semantic-color-background-action-danger-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-secondary-default)}.sapphire-button--danger-secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-danger-secondary-hover);color:var(--sapphire-semantic-color-foreground-action-on-danger-secondary-hover)}.sapphire-button--danger-secondary.is-focus,.sapphire-button--danger-secondary:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-danger-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-secondary-default)}.sapphire-button--danger-secondary:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-secondary:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-secondary:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-danger-secondary-active);color:var(--sapphire-semantic-color-foreground-action-on-danger-secondary-active)}.sapphire-button--danger-tertiary{background:var(--sapphire-semantic-color-background-action-danger-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-default)}.sapphire-button--danger-tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-danger-tertiary-hover);color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-hover)}.sapphire-button--danger-tertiary.is-focus,.sapphire-button--danger-tertiary:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-danger-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-default)}.sapphire-button--danger-tertiary:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-tertiary:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-tertiary:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-danger-tertiary-active);color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-active)}.sapphire-button--danger-text{color:var(--sapphire-semantic-color-foreground-action-danger-default);border-radius:var(--sapphire-semantic-size-radius-xs);background:transparent;padding:0}.sapphire-button--danger-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{color:var(--sapphire-semantic-color-foreground-action-danger-hover)}.sapphire-button--danger-text:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):focus-visible:active{color:var(--sapphire-semantic-color-foreground-action-danger-active)}.sapphire-button--selected{background:var(--sapphire-semantic-color-background-action-select-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-select-secondary-default)}.sapphire-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-select-secondary-hover);color:var(--sapphire-semantic-color-foreground-action-on-select-secondary-hover)}.sapphire-button--selected.is-focus,.sapphire-button--selected:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-select-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-select-secondary-default)}.sapphire-button--selected:not(:disabled):not(.is-disabled).is-active,.sapphire-button--selected:not(:disabled):not(.is-disabled):active,.sapphire-button--selected:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-select-secondary-active);color:var(--sapphire-semantic-color-foreground-action-on-select-secondary-active)}.sapphire-button--unselected{background:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-secondary-default)}.sapphire-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-secondary-hover);color:var(--sapphire-semantic-color-foreground-action-on-secondary-hover)}.sapphire-button--unselected.is-focus,.sapphire-button--unselected:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-secondary-default)}.sapphire-button--unselected:not(:disabled):not(.is-disabled).is-active,.sapphire-button--unselected:not(:disabled):not(.is-disabled):active,.sapphire-button--unselected:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-secondary-active);color:var(--sapphire-semantic-color-foreground-action-on-secondary-active)}.sapphire-button__icon{display:flex;flex-direction:column;justify-content:center;align-items:center;height:var(--sapphire-semantic-size-icon-sm);width:var(--sapphire-semantic-size-icon-sm)}.sapphire-button--lg .sapphire-button__icon{height:var(--sapphire-semantic-size-icon-md);width:var(--sapphire-semantic-size-icon-md)}.sapphire-button--lg{height:var(--sapphire-semantic-size-height-control-lg);min-width:var(--sapphire-global-size-generic-120);padding:0 var(--sapphire-semantic-size-spacing-xl);font-size:var(--sapphire-semantic-size-font-control-lg);border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-button--lg.sapphire-button--text,.sapphire-button--lg.sapphire-button--danger-text{padding:0;border-radius:var(--sapphire-semantic-size-radius-xs)}.sapphire-button--sm{height:var(--sapphire-semantic-size-height-control-sm);min-width:var(--sapphire-global-size-generic-80);padding:0 var(--sapphire-semantic-size-spacing-md);font-size:var(--sapphire-semantic-size-font-control-sm);border-radius:var(--sapphire-semantic-size-height-control-sm)}.sapphire-button--sm.sapphire-button--text,.sapphire-button--sm.sapphire-button--danger-text{padding:0;border-radius:var(--sapphire-semantic-size-radius-xs)}.sapphire-button--sm .sapphire-button__content{gap:var(--sapphire-semantic-size-spacing-2xs)}\n"] }]
|
|
1449
766
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { variant: [{
|
|
1450
767
|
type: Input
|
|
1451
768
|
}], size: [{
|
|
@@ -1462,6 +779,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
1462
779
|
}], variantClass: [{
|
|
1463
780
|
type: HostBinding,
|
|
1464
781
|
args: ['class']
|
|
782
|
+
}], tabindex: [{
|
|
783
|
+
type: Input
|
|
784
|
+
}], hostTabIndex: [{
|
|
785
|
+
type: HostBinding,
|
|
786
|
+
args: ['attr.tabindex']
|
|
1465
787
|
}], buttonIcon: [{
|
|
1466
788
|
type: ContentChild,
|
|
1467
789
|
args: [ButtonIconDirective]
|
|
@@ -1624,7 +946,7 @@ ToggleButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
|
|
|
1624
946
|
provide: ICON_SIZE_PROVIDER,
|
|
1625
947
|
useClass: ToggleButtonIconSizeProvider,
|
|
1626
948
|
},
|
|
1627
|
-
], queries: [{ propertyName: "buttonIcon", first: true, predicate: ButtonIconDirective, descendants: true }, { propertyName: "icon", first: true, predicate: IconComponent, descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: "<span class=\"sapphire-button__content\">\n <span\n *ngIf=\"buttonIcon && iconAlign === 'left'\"\n class=\"sapphire-button__icon\"\n >\n <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\n </span>\n\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n\n <span\n *ngIf=\"buttonIcon && iconAlign === 'right'\"\n class=\"sapphire-button__icon\"\n >\n <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\n </span>\n\n <ng-template #content>\n <ng-content></ng-content>\n </ng-template>\n <ng-template #iconContent>\n <ng-content select=\"[spButtonIcon]\"></ng-content>\n </ng-template>\n</span>\n", styles: [".sapphire-button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;margin:0;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-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding:0 var(--sapphire-global-size-generic-50);height:var(--sapphire-semantic-size-height-control-md);min-width:var(--sapphire-global-size-generic-100);max-width:-moz-fit-content;max-width:fit-content;flex-shrink:0;border-radius:var(--sapphire-semantic-size-height-control-md);border-style:solid;border-width:0;border-color:transparent;transition-property:opacity,background,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:var(--sapphire-semantic-transitions-fade);cursor:pointer}.sapphire-button__content{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;gap:var(--sapphire-semantic-size-spacing-xs);margin:0;width:100%}a.sapphire-button{text-decoration:none}.sapphire-button:disabled,.sapphire-button.is-disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-button:focus{outline:none}.sapphire-button.is-focus,.sapphire-button: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)}.sapphire-button--loading{cursor:not-allowed}.sapphire-button__spinner{position:absolute;display:inherit}.sapphire-button--loading .sapphire-button__content{visibility:hidden}.sapphire-button--primary{background:var(--sapphire-semantic-color-background-action-primary-default);color:var(--sapphire-semantic-color-foreground-action-on-primary-default)}.sapphire-button--primary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--primary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-primary-hover)}.sapphire-button--primary.is-focus,.sapphire-button--primary:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-primary-default);color:var(--sapphire-semantic-color-foreground-action-on-primary-default)}.sapphire-button--primary:not(:disabled):not(.is-disabled).is-active,.sapphire-button--primary:not(:disabled):not(.is-disabled):active,.sapphire-button--primary:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-primary-active);color:var(--sapphire-semantic-color-foreground-action-on-primary-active)}.sapphire-button--secondary{background:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-secondary-default)}.sapphire-button--secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-secondary-hover);color:var(--sapphire-semantic-color-foreground-action-on-secondary-hover)}.sapphire-button--secondary.is-focus,.sapphire-button--secondary:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-secondary-default)}.sapphire-button--secondary:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-secondary-active);color:var(--sapphire-semantic-color-foreground-action-on-secondary-active)}.sapphire-button--tertiary{background:var(--sapphire-semantic-color-background-action-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-default)}.sapphire-button--tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-tertiary-hover);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-hover)}.sapphire-button--tertiary.is-focus,.sapphire-button--tertiary:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-default)}.sapphire-button--tertiary:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-tertiary-active);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-active)}.sapphire-button--text{color:var(--sapphire-semantic-color-foreground-action-link-default);border-radius:var(--sapphire-semantic-size-radius-xs);background:transparent;padding:0}.sapphire-button--text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{color:var(--sapphire-semantic-color-foreground-action-link-hover)}.sapphire-button--text:not(:disabled):not(.is-disabled).is-active,.sapphire-button--text:not(:disabled):not(.is-disabled):active,.sapphire-button--text:not(:disabled):not(.is-disabled):focus-visible:active{color:var(--sapphire-semantic-color-foreground-action-link-active)}.sapphire-button--danger{background:var(--sapphire-semantic-color-background-action-danger-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-default)}.sapphire-button--danger:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-danger-hover);color:var(--sapphire-semantic-color-foreground-action-on-danger-hover)}.sapphire-button--danger.is-focus,.sapphire-button--danger:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-danger-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-default)}.sapphire-button--danger:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger:not(:disabled):not(.is-disabled):active,.sapphire-button--danger:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-danger-active);color:var(--sapphire-semantic-color-foreground-action-on-danger-active)}.sapphire-button--danger-secondary{background:var(--sapphire-semantic-color-background-action-danger-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-secondary-default)}.sapphire-button--danger-secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-danger-secondary-hover);color:var(--sapphire-semantic-color-foreground-action-on-danger-secondary-hover)}.sapphire-button--danger-secondary.is-focus,.sapphire-button--danger-secondary:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-danger-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-secondary-default)}.sapphire-button--danger-secondary:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-secondary:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-secondary:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-danger-secondary-active);color:var(--sapphire-semantic-color-foreground-action-on-danger-secondary-active)}.sapphire-button--danger-tertiary{background:var(--sapphire-semantic-color-background-action-danger-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-default)}.sapphire-button--danger-tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-danger-tertiary-hover);color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-hover)}.sapphire-button--danger-tertiary.is-focus,.sapphire-button--danger-tertiary:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-danger-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-default)}.sapphire-button--danger-tertiary:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-tertiary:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-tertiary:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-danger-tertiary-active);color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-active)}.sapphire-button--danger-text{color:var(--sapphire-semantic-color-foreground-action-danger-default);border-radius:var(--sapphire-semantic-size-radius-xs);background:transparent;padding:0}.sapphire-button--danger-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{color:var(--sapphire-semantic-color-foreground-action-danger-hover)}.sapphire-button--danger-text:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):focus-visible:active{color:var(--sapphire-semantic-color-foreground-action-danger-active)}.sapphire-button--selected{background:var(--sapphire-semantic-color-background-action-select-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-select-secondary-default)}.sapphire-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-select-secondary-hover);color:var(--sapphire-semantic-color-foreground-action-on-select-secondary-hover)}.sapphire-button--selected.is-focus,.sapphire-button--selected:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-select-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-select-secondary-default)}.sapphire-button--selected:not(:disabled):not(.is-disabled).is-active,.sapphire-button--selected:not(:disabled):not(.is-disabled):active,.sapphire-button--selected:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-select-secondary-active);color:var(--sapphire-semantic-color-foreground-action-on-select-secondary-active)}.sapphire-button--unselected{background:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-secondary-default)}.sapphire-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-secondary-hover);color:var(--sapphire-semantic-color-foreground-action-on-secondary-hover)}.sapphire-button--unselected.is-focus,.sapphire-button--unselected:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-secondary-default)}.sapphire-button--unselected:not(:disabled):not(.is-disabled).is-active,.sapphire-button--unselected:not(:disabled):not(.is-disabled):active,.sapphire-button--unselected:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-secondary-active);color:var(--sapphire-semantic-color-foreground-action-on-secondary-active)}.sapphire-button__icon{display:flex;flex-direction:column;justify-content:center;align-items:center;height:var(--sapphire-semantic-size-icon-sm);width:var(--sapphire-semantic-size-icon-sm)}.sapphire-button--lg .sapphire-button__icon{height:var(--sapphire-semantic-size-icon-md);width:var(--sapphire-semantic-size-icon-md)}.sapphire-button--lg{height:var(--sapphire-semantic-size-height-control-lg);min-width:var(--sapphire-global-size-generic-120);padding:0 var(--sapphire-semantic-size-spacing-xl);font-size:var(--sapphire-semantic-size-font-control-lg);border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-button--lg.sapphire-button--text,.sapphire-button--lg.sapphire-button--danger-text{padding:0;border-radius:var(--sapphire-semantic-size-radius-xs)}.sapphire-button--sm{height:var(--sapphire-semantic-size-height-control-sm);min-width:var(--sapphire-global-size-generic-80);padding:0 var(--sapphire-semantic-size-spacing-md);font-size:var(--sapphire-semantic-size-font-control-sm);border-radius:var(--sapphire-semantic-size-height-control-sm)}.sapphire-button--sm.sapphire-button--text,.sapphire-button--sm.sapphire-button--danger-text{padding:0;border-radius:var(--sapphire-semantic-size-radius-xs)}.sapphire-button--sm .sapphire-button__content{gap:var(--sapphire-semantic-size-spacing-2xs)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
949
|
+
], queries: [{ propertyName: "buttonIcon", first: true, predicate: ButtonIconDirective, descendants: true }, { propertyName: "icon", first: true, predicate: IconComponent, descendants: true }], usesOnChanges: true, hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: "<span class=\"sapphire-button__content\">\n <span\n *ngIf=\"buttonIcon && iconAlign === 'left'\"\n class=\"sapphire-button__icon\"\n >\n <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\n </span>\n\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n\n <span\n *ngIf=\"buttonIcon && iconAlign === 'right'\"\n class=\"sapphire-button__icon\"\n >\n <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\n </span>\n\n <ng-template #content>\n <ng-content></ng-content>\n </ng-template>\n <ng-template #iconContent>\n <ng-content select=\"[spButtonIcon]\"></ng-content>\n </ng-template>\n</span>\n", styles: [".sapphire-button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;margin:0;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-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding:0 var(--sapphire-global-size-generic-50);height:var(--sapphire-semantic-size-height-control-md);min-width:var(--sapphire-global-size-generic-100);max-width:-moz-fit-content;max-width:fit-content;flex-shrink:0;border-radius:var(--sapphire-semantic-size-height-control-md);border-style:solid;border-width:0;border-color:transparent;transition-property:opacity,background,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:var(--sapphire-semantic-transitions-fade);cursor:pointer}.sapphire-button__content{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;gap:var(--sapphire-semantic-size-spacing-xs);margin:0;width:100%}a.sapphire-button{text-decoration:none}.sapphire-button:disabled,.sapphire-button.is-disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-button:focus{outline:none}.sapphire-button.is-focus,.sapphire-button: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)}.sapphire-button--loading{cursor:not-allowed}.sapphire-button__spinner{position:absolute;display:inherit}.sapphire-button--loading .sapphire-button__content{visibility:hidden}.sapphire-button--primary{background:var(--sapphire-semantic-color-background-action-primary-default);color:var(--sapphire-semantic-color-foreground-action-on-primary-default)}.sapphire-button--primary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--primary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-primary-hover)}.sapphire-button--primary.is-focus,.sapphire-button--primary:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-primary-default);color:var(--sapphire-semantic-color-foreground-action-on-primary-default)}.sapphire-button--primary:not(:disabled):not(.is-disabled).is-active,.sapphire-button--primary:not(:disabled):not(.is-disabled):active,.sapphire-button--primary:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-primary-active);color:var(--sapphire-semantic-color-foreground-action-on-primary-active)}.sapphire-button--secondary{background:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-secondary-default)}.sapphire-button--secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-secondary-hover);color:var(--sapphire-semantic-color-foreground-action-on-secondary-hover)}.sapphire-button--secondary.is-focus,.sapphire-button--secondary:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-secondary-default)}.sapphire-button--secondary:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-secondary-active);color:var(--sapphire-semantic-color-foreground-action-on-secondary-active)}.sapphire-button--tertiary{background:var(--sapphire-semantic-color-background-action-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-default)}.sapphire-button--tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-tertiary-hover);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-hover)}.sapphire-button--tertiary.is-focus,.sapphire-button--tertiary:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-default)}.sapphire-button--tertiary:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-tertiary-active);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-active)}.sapphire-button--text{color:var(--sapphire-semantic-color-foreground-action-link-default);border-radius:var(--sapphire-semantic-size-radius-xs);background:transparent;padding:0}.sapphire-button--text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{text-decoration:underline;text-decoration-thickness:var(--sapphire-semantic-size-border-sm);color:var(--sapphire-semantic-color-foreground-action-link-hover)}.sapphire-button--text:not(:disabled):not(.is-disabled).is-active,.sapphire-button--text:not(:disabled):not(.is-disabled):active,.sapphire-button--text:not(:disabled):not(.is-disabled):focus-visible:active{text-decoration:underline;text-decoration-thickness:var(--sapphire-semantic-size-border-sm);color:var(--sapphire-semantic-color-foreground-action-link-active)}.sapphire-button--danger{background:var(--sapphire-semantic-color-background-action-danger-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-default)}.sapphire-button--danger:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-danger-hover);color:var(--sapphire-semantic-color-foreground-action-on-danger-hover)}.sapphire-button--danger.is-focus,.sapphire-button--danger:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-danger-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-default)}.sapphire-button--danger:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger:not(:disabled):not(.is-disabled):active,.sapphire-button--danger:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-danger-active);color:var(--sapphire-semantic-color-foreground-action-on-danger-active)}.sapphire-button--danger-secondary{background:var(--sapphire-semantic-color-background-action-danger-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-secondary-default)}.sapphire-button--danger-secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-danger-secondary-hover);color:var(--sapphire-semantic-color-foreground-action-on-danger-secondary-hover)}.sapphire-button--danger-secondary.is-focus,.sapphire-button--danger-secondary:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-danger-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-secondary-default)}.sapphire-button--danger-secondary:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-secondary:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-secondary:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-danger-secondary-active);color:var(--sapphire-semantic-color-foreground-action-on-danger-secondary-active)}.sapphire-button--danger-tertiary{background:var(--sapphire-semantic-color-background-action-danger-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-default)}.sapphire-button--danger-tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-danger-tertiary-hover);color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-hover)}.sapphire-button--danger-tertiary.is-focus,.sapphire-button--danger-tertiary:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-danger-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-default)}.sapphire-button--danger-tertiary:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-tertiary:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-tertiary:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-danger-tertiary-active);color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-active)}.sapphire-button--danger-text{color:var(--sapphire-semantic-color-foreground-action-danger-default);border-radius:var(--sapphire-semantic-size-radius-xs);background:transparent;padding:0}.sapphire-button--danger-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{color:var(--sapphire-semantic-color-foreground-action-danger-hover)}.sapphire-button--danger-text:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):focus-visible:active{color:var(--sapphire-semantic-color-foreground-action-danger-active)}.sapphire-button--selected{background:var(--sapphire-semantic-color-background-action-select-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-select-secondary-default)}.sapphire-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-select-secondary-hover);color:var(--sapphire-semantic-color-foreground-action-on-select-secondary-hover)}.sapphire-button--selected.is-focus,.sapphire-button--selected:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-select-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-select-secondary-default)}.sapphire-button--selected:not(:disabled):not(.is-disabled).is-active,.sapphire-button--selected:not(:disabled):not(.is-disabled):active,.sapphire-button--selected:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-select-secondary-active);color:var(--sapphire-semantic-color-foreground-action-on-select-secondary-active)}.sapphire-button--unselected{background:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-secondary-default)}.sapphire-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-secondary-hover);color:var(--sapphire-semantic-color-foreground-action-on-secondary-hover)}.sapphire-button--unselected.is-focus,.sapphire-button--unselected:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-secondary-default)}.sapphire-button--unselected:not(:disabled):not(.is-disabled).is-active,.sapphire-button--unselected:not(:disabled):not(.is-disabled):active,.sapphire-button--unselected:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-secondary-active);color:var(--sapphire-semantic-color-foreground-action-on-secondary-active)}.sapphire-button__icon{display:flex;flex-direction:column;justify-content:center;align-items:center;height:var(--sapphire-semantic-size-icon-sm);width:var(--sapphire-semantic-size-icon-sm)}.sapphire-button--lg .sapphire-button__icon{height:var(--sapphire-semantic-size-icon-md);width:var(--sapphire-semantic-size-icon-md)}.sapphire-button--lg{height:var(--sapphire-semantic-size-height-control-lg);min-width:var(--sapphire-global-size-generic-120);padding:0 var(--sapphire-semantic-size-spacing-xl);font-size:var(--sapphire-semantic-size-font-control-lg);border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-button--lg.sapphire-button--text,.sapphire-button--lg.sapphire-button--danger-text{padding:0;border-radius:var(--sapphire-semantic-size-radius-xs)}.sapphire-button--sm{height:var(--sapphire-semantic-size-height-control-sm);min-width:var(--sapphire-global-size-generic-80);padding:0 var(--sapphire-semantic-size-spacing-md);font-size:var(--sapphire-semantic-size-font-control-sm);border-radius:var(--sapphire-semantic-size-height-control-sm)}.sapphire-button--sm.sapphire-button--text,.sapphire-button--sm.sapphire-button--danger-text{padding:0;border-radius:var(--sapphire-semantic-size-radius-xs)}.sapphire-button--sm .sapphire-button__content{gap:var(--sapphire-semantic-size-spacing-2xs)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1628
950
|
__decorate([
|
|
1629
951
|
CoerceBoolean
|
|
1630
952
|
], ToggleButtonComponent.prototype, "selected", void 0);
|
|
@@ -1654,7 +976,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
1654
976
|
'[class.sapphire-button--sm]': 'size === "sm"',
|
|
1655
977
|
'[class.sapphire-button--with-left-icon]': 'buttonIcon && iconAlign === "left"',
|
|
1656
978
|
'[class.sapphire-button--with-right-icon]': 'buttonIcon && iconAlign === "right"',
|
|
1657
|
-
}, hostDirectives: [UseComponentStylesOnHost], standalone: false, template: "<span class=\"sapphire-button__content\">\n <span\n *ngIf=\"buttonIcon && iconAlign === 'left'\"\n class=\"sapphire-button__icon\"\n >\n <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\n </span>\n\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n\n <span\n *ngIf=\"buttonIcon && iconAlign === 'right'\"\n class=\"sapphire-button__icon\"\n >\n <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\n </span>\n\n <ng-template #content>\n <ng-content></ng-content>\n </ng-template>\n <ng-template #iconContent>\n <ng-content select=\"[spButtonIcon]\"></ng-content>\n </ng-template>\n</span>\n", styles: [".sapphire-button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;margin:0;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-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding:0 var(--sapphire-global-size-generic-50);height:var(--sapphire-semantic-size-height-control-md);min-width:var(--sapphire-global-size-generic-100);max-width:-moz-fit-content;max-width:fit-content;flex-shrink:0;border-radius:var(--sapphire-semantic-size-height-control-md);border-style:solid;border-width:0;border-color:transparent;transition-property:opacity,background,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:var(--sapphire-semantic-transitions-fade);cursor:pointer}.sapphire-button__content{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;gap:var(--sapphire-semantic-size-spacing-xs);margin:0;width:100%}a.sapphire-button{text-decoration:none}.sapphire-button:disabled,.sapphire-button.is-disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-button:focus{outline:none}.sapphire-button.is-focus,.sapphire-button: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)}.sapphire-button--loading{cursor:not-allowed}.sapphire-button__spinner{position:absolute;display:inherit}.sapphire-button--loading .sapphire-button__content{visibility:hidden}.sapphire-button--primary{background:var(--sapphire-semantic-color-background-action-primary-default);color:var(--sapphire-semantic-color-foreground-action-on-primary-default)}.sapphire-button--primary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--primary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-primary-hover)}.sapphire-button--primary.is-focus,.sapphire-button--primary:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-primary-default);color:var(--sapphire-semantic-color-foreground-action-on-primary-default)}.sapphire-button--primary:not(:disabled):not(.is-disabled).is-active,.sapphire-button--primary:not(:disabled):not(.is-disabled):active,.sapphire-button--primary:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-primary-active);color:var(--sapphire-semantic-color-foreground-action-on-primary-active)}.sapphire-button--secondary{background:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-secondary-default)}.sapphire-button--secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-secondary-hover);color:var(--sapphire-semantic-color-foreground-action-on-secondary-hover)}.sapphire-button--secondary.is-focus,.sapphire-button--secondary:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-secondary-default)}.sapphire-button--secondary:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-secondary-active);color:var(--sapphire-semantic-color-foreground-action-on-secondary-active)}.sapphire-button--tertiary{background:var(--sapphire-semantic-color-background-action-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-default)}.sapphire-button--tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-tertiary-hover);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-hover)}.sapphire-button--tertiary.is-focus,.sapphire-button--tertiary:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-default)}.sapphire-button--tertiary:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-tertiary-active);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-active)}.sapphire-button--text{color:var(--sapphire-semantic-color-foreground-action-link-default);border-radius:var(--sapphire-semantic-size-radius-xs);background:transparent;padding:0}.sapphire-button--text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{color:var(--sapphire-semantic-color-foreground-action-link-hover)}.sapphire-button--text:not(:disabled):not(.is-disabled).is-active,.sapphire-button--text:not(:disabled):not(.is-disabled):active,.sapphire-button--text:not(:disabled):not(.is-disabled):focus-visible:active{color:var(--sapphire-semantic-color-foreground-action-link-active)}.sapphire-button--danger{background:var(--sapphire-semantic-color-background-action-danger-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-default)}.sapphire-button--danger:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-danger-hover);color:var(--sapphire-semantic-color-foreground-action-on-danger-hover)}.sapphire-button--danger.is-focus,.sapphire-button--danger:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-danger-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-default)}.sapphire-button--danger:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger:not(:disabled):not(.is-disabled):active,.sapphire-button--danger:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-danger-active);color:var(--sapphire-semantic-color-foreground-action-on-danger-active)}.sapphire-button--danger-secondary{background:var(--sapphire-semantic-color-background-action-danger-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-secondary-default)}.sapphire-button--danger-secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-danger-secondary-hover);color:var(--sapphire-semantic-color-foreground-action-on-danger-secondary-hover)}.sapphire-button--danger-secondary.is-focus,.sapphire-button--danger-secondary:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-danger-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-secondary-default)}.sapphire-button--danger-secondary:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-secondary:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-secondary:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-danger-secondary-active);color:var(--sapphire-semantic-color-foreground-action-on-danger-secondary-active)}.sapphire-button--danger-tertiary{background:var(--sapphire-semantic-color-background-action-danger-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-default)}.sapphire-button--danger-tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-danger-tertiary-hover);color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-hover)}.sapphire-button--danger-tertiary.is-focus,.sapphire-button--danger-tertiary:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-danger-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-default)}.sapphire-button--danger-tertiary:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-tertiary:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-tertiary:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-danger-tertiary-active);color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-active)}.sapphire-button--danger-text{color:var(--sapphire-semantic-color-foreground-action-danger-default);border-radius:var(--sapphire-semantic-size-radius-xs);background:transparent;padding:0}.sapphire-button--danger-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{color:var(--sapphire-semantic-color-foreground-action-danger-hover)}.sapphire-button--danger-text:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):focus-visible:active{color:var(--sapphire-semantic-color-foreground-action-danger-active)}.sapphire-button--selected{background:var(--sapphire-semantic-color-background-action-select-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-select-secondary-default)}.sapphire-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-select-secondary-hover);color:var(--sapphire-semantic-color-foreground-action-on-select-secondary-hover)}.sapphire-button--selected.is-focus,.sapphire-button--selected:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-select-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-select-secondary-default)}.sapphire-button--selected:not(:disabled):not(.is-disabled).is-active,.sapphire-button--selected:not(:disabled):not(.is-disabled):active,.sapphire-button--selected:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-select-secondary-active);color:var(--sapphire-semantic-color-foreground-action-on-select-secondary-active)}.sapphire-button--unselected{background:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-secondary-default)}.sapphire-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-secondary-hover);color:var(--sapphire-semantic-color-foreground-action-on-secondary-hover)}.sapphire-button--unselected.is-focus,.sapphire-button--unselected:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-secondary-default)}.sapphire-button--unselected:not(:disabled):not(.is-disabled).is-active,.sapphire-button--unselected:not(:disabled):not(.is-disabled):active,.sapphire-button--unselected:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-secondary-active);color:var(--sapphire-semantic-color-foreground-action-on-secondary-active)}.sapphire-button__icon{display:flex;flex-direction:column;justify-content:center;align-items:center;height:var(--sapphire-semantic-size-icon-sm);width:var(--sapphire-semantic-size-icon-sm)}.sapphire-button--lg .sapphire-button__icon{height:var(--sapphire-semantic-size-icon-md);width:var(--sapphire-semantic-size-icon-md)}.sapphire-button--lg{height:var(--sapphire-semantic-size-height-control-lg);min-width:var(--sapphire-global-size-generic-120);padding:0 var(--sapphire-semantic-size-spacing-xl);font-size:var(--sapphire-semantic-size-font-control-lg);border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-button--lg.sapphire-button--text,.sapphire-button--lg.sapphire-button--danger-text{padding:0;border-radius:var(--sapphire-semantic-size-radius-xs)}.sapphire-button--sm{height:var(--sapphire-semantic-size-height-control-sm);min-width:var(--sapphire-global-size-generic-80);padding:0 var(--sapphire-semantic-size-spacing-md);font-size:var(--sapphire-semantic-size-font-control-sm);border-radius:var(--sapphire-semantic-size-height-control-sm)}.sapphire-button--sm.sapphire-button--text,.sapphire-button--sm.sapphire-button--danger-text{padding:0;border-radius:var(--sapphire-semantic-size-radius-xs)}.sapphire-button--sm .sapphire-button__content{gap:var(--sapphire-semantic-size-spacing-2xs)}\n"] }]
|
|
979
|
+
}, hostDirectives: [UseComponentStylesOnHost], standalone: false, template: "<span class=\"sapphire-button__content\">\n <span\n *ngIf=\"buttonIcon && iconAlign === 'left'\"\n class=\"sapphire-button__icon\"\n >\n <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\n </span>\n\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n\n <span\n *ngIf=\"buttonIcon && iconAlign === 'right'\"\n class=\"sapphire-button__icon\"\n >\n <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\n </span>\n\n <ng-template #content>\n <ng-content></ng-content>\n </ng-template>\n <ng-template #iconContent>\n <ng-content select=\"[spButtonIcon]\"></ng-content>\n </ng-template>\n</span>\n", styles: [".sapphire-button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;margin:0;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-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding:0 var(--sapphire-global-size-generic-50);height:var(--sapphire-semantic-size-height-control-md);min-width:var(--sapphire-global-size-generic-100);max-width:-moz-fit-content;max-width:fit-content;flex-shrink:0;border-radius:var(--sapphire-semantic-size-height-control-md);border-style:solid;border-width:0;border-color:transparent;transition-property:opacity,background,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:var(--sapphire-semantic-transitions-fade);cursor:pointer}.sapphire-button__content{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;gap:var(--sapphire-semantic-size-spacing-xs);margin:0;width:100%}a.sapphire-button{text-decoration:none}.sapphire-button:disabled,.sapphire-button.is-disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-button:focus{outline:none}.sapphire-button.is-focus,.sapphire-button: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)}.sapphire-button--loading{cursor:not-allowed}.sapphire-button__spinner{position:absolute;display:inherit}.sapphire-button--loading .sapphire-button__content{visibility:hidden}.sapphire-button--primary{background:var(--sapphire-semantic-color-background-action-primary-default);color:var(--sapphire-semantic-color-foreground-action-on-primary-default)}.sapphire-button--primary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--primary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-primary-hover)}.sapphire-button--primary.is-focus,.sapphire-button--primary:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-primary-default);color:var(--sapphire-semantic-color-foreground-action-on-primary-default)}.sapphire-button--primary:not(:disabled):not(.is-disabled).is-active,.sapphire-button--primary:not(:disabled):not(.is-disabled):active,.sapphire-button--primary:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-primary-active);color:var(--sapphire-semantic-color-foreground-action-on-primary-active)}.sapphire-button--secondary{background:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-secondary-default)}.sapphire-button--secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-secondary-hover);color:var(--sapphire-semantic-color-foreground-action-on-secondary-hover)}.sapphire-button--secondary.is-focus,.sapphire-button--secondary:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-secondary-default)}.sapphire-button--secondary:not(:disabled):not(.is-disabled).is-active,.sapphire-button--secondary:not(:disabled):not(.is-disabled):active,.sapphire-button--secondary:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-secondary-active);color:var(--sapphire-semantic-color-foreground-action-on-secondary-active)}.sapphire-button--tertiary{background:var(--sapphire-semantic-color-background-action-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-default)}.sapphire-button--tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-tertiary-hover);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-hover)}.sapphire-button--tertiary.is-focus,.sapphire-button--tertiary:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-default)}.sapphire-button--tertiary:not(:disabled):not(.is-disabled).is-active,.sapphire-button--tertiary:not(:disabled):not(.is-disabled):active,.sapphire-button--tertiary:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-tertiary-active);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-active)}.sapphire-button--text{color:var(--sapphire-semantic-color-foreground-action-link-default);border-radius:var(--sapphire-semantic-size-radius-xs);background:transparent;padding:0}.sapphire-button--text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{text-decoration:underline;text-decoration-thickness:var(--sapphire-semantic-size-border-sm);color:var(--sapphire-semantic-color-foreground-action-link-hover)}.sapphire-button--text:not(:disabled):not(.is-disabled).is-active,.sapphire-button--text:not(:disabled):not(.is-disabled):active,.sapphire-button--text:not(:disabled):not(.is-disabled):focus-visible:active{text-decoration:underline;text-decoration-thickness:var(--sapphire-semantic-size-border-sm);color:var(--sapphire-semantic-color-foreground-action-link-active)}.sapphire-button--danger{background:var(--sapphire-semantic-color-background-action-danger-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-default)}.sapphire-button--danger:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-danger-hover);color:var(--sapphire-semantic-color-foreground-action-on-danger-hover)}.sapphire-button--danger.is-focus,.sapphire-button--danger:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-danger-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-default)}.sapphire-button--danger:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger:not(:disabled):not(.is-disabled):active,.sapphire-button--danger:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-danger-active);color:var(--sapphire-semantic-color-foreground-action-on-danger-active)}.sapphire-button--danger-secondary{background:var(--sapphire-semantic-color-background-action-danger-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-secondary-default)}.sapphire-button--danger-secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-danger-secondary-hover);color:var(--sapphire-semantic-color-foreground-action-on-danger-secondary-hover)}.sapphire-button--danger-secondary.is-focus,.sapphire-button--danger-secondary:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-danger-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-secondary-default)}.sapphire-button--danger-secondary:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-secondary:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-secondary:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-danger-secondary-active);color:var(--sapphire-semantic-color-foreground-action-on-danger-secondary-active)}.sapphire-button--danger-tertiary{background:var(--sapphire-semantic-color-background-action-danger-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-default)}.sapphire-button--danger-tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-danger-tertiary-hover);color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-hover)}.sapphire-button--danger-tertiary.is-focus,.sapphire-button--danger-tertiary:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-danger-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-default)}.sapphire-button--danger-tertiary:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-tertiary:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-tertiary:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-danger-tertiary-active);color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-active)}.sapphire-button--danger-text{color:var(--sapphire-semantic-color-foreground-action-danger-default);border-radius:var(--sapphire-semantic-size-radius-xs);background:transparent;padding:0}.sapphire-button--danger-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{color:var(--sapphire-semantic-color-foreground-action-danger-hover)}.sapphire-button--danger-text:not(:disabled):not(.is-disabled).is-active,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):active,.sapphire-button--danger-text:not(:disabled):not(.is-disabled):focus-visible:active{color:var(--sapphire-semantic-color-foreground-action-danger-active)}.sapphire-button--selected{background:var(--sapphire-semantic-color-background-action-select-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-select-secondary-default)}.sapphire-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-select-secondary-hover);color:var(--sapphire-semantic-color-foreground-action-on-select-secondary-hover)}.sapphire-button--selected.is-focus,.sapphire-button--selected:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-select-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-select-secondary-default)}.sapphire-button--selected:not(:disabled):not(.is-disabled).is-active,.sapphire-button--selected:not(:disabled):not(.is-disabled):active,.sapphire-button--selected:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-select-secondary-active);color:var(--sapphire-semantic-color-foreground-action-on-select-secondary-active)}.sapphire-button--unselected{background:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-secondary-default)}.sapphire-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-secondary-hover);color:var(--sapphire-semantic-color-foreground-action-on-secondary-hover)}.sapphire-button--unselected.is-focus,.sapphire-button--unselected:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-secondary-default)}.sapphire-button--unselected:not(:disabled):not(.is-disabled).is-active,.sapphire-button--unselected:not(:disabled):not(.is-disabled):active,.sapphire-button--unselected:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-secondary-active);color:var(--sapphire-semantic-color-foreground-action-on-secondary-active)}.sapphire-button__icon{display:flex;flex-direction:column;justify-content:center;align-items:center;height:var(--sapphire-semantic-size-icon-sm);width:var(--sapphire-semantic-size-icon-sm)}.sapphire-button--lg .sapphire-button__icon{height:var(--sapphire-semantic-size-icon-md);width:var(--sapphire-semantic-size-icon-md)}.sapphire-button--lg{height:var(--sapphire-semantic-size-height-control-lg);min-width:var(--sapphire-global-size-generic-120);padding:0 var(--sapphire-semantic-size-spacing-xl);font-size:var(--sapphire-semantic-size-font-control-lg);border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-button--lg.sapphire-button--text,.sapphire-button--lg.sapphire-button--danger-text{padding:0;border-radius:var(--sapphire-semantic-size-radius-xs)}.sapphire-button--sm{height:var(--sapphire-semantic-size-height-control-sm);min-width:var(--sapphire-global-size-generic-80);padding:0 var(--sapphire-semantic-size-spacing-md);font-size:var(--sapphire-semantic-size-font-control-sm);border-radius:var(--sapphire-semantic-size-height-control-sm)}.sapphire-button--sm.sapphire-button--text,.sapphire-button--sm.sapphire-button--danger-text{padding:0;border-radius:var(--sapphire-semantic-size-radius-xs)}.sapphire-button--sm .sapphire-button__content{gap:var(--sapphire-semantic-size-spacing-2xs)}\n"] }]
|
|
1658
980
|
}], ctorParameters: function () { return []; }, propDecorators: { size: [{
|
|
1659
981
|
type: Input
|
|
1660
982
|
}], selected: [{
|
|
@@ -2021,7 +1343,7 @@ class LabelComponent {
|
|
|
2021
1343
|
}
|
|
2022
1344
|
}
|
|
2023
1345
|
LabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2024
|
-
LabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: LabelComponent, isStandalone: true, selector: "sp-label", inputs: { id: "id", for: "for", disabled: "disabled", necessityIndicator: "necessityIndicator", size: "size" }, outputs: { labelClick: "labelClick" }, providers: [{ provide: MessageDictionary, useValue: translations$2 }], viewQueries: [{ propertyName: "labelElementRef", first: true, predicate: ["label"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"sapphire-label\" [class.sapphire-label--md]=\"size === 'md'\">\n <label\n class=\"sapphire-label__text\"\n (click)=\"!disabled && labelClick.emit($event)\"\n [attr.for]=\"for\"\n [attr.id]=\"id\"\n #label\n ><ng-content></ng-content\n ></label>\n\n <span\n *ngIf=\"necessityIndicator === 'required'\"\n class=\"sapphire-label__required-indicator\"\n ></span>\n <span\n *ngIf=\"necessityIndicator === 'optional'\"\n class=\"sapphire-label__optional-indicator\"\n >({{ 'optional' | t }})</span\n >\n\n <ng-content select=\"sp-help-button\"></ng-content>\n</div>\n", styles: [".sapphire-label{display:
|
|
1346
|
+
LabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: LabelComponent, isStandalone: true, selector: "sp-label", inputs: { id: "id", for: "for", disabled: "disabled", necessityIndicator: "necessityIndicator", size: "size" }, outputs: { labelClick: "labelClick" }, providers: [{ provide: MessageDictionary, useValue: translations$2 }], viewQueries: [{ propertyName: "labelElementRef", first: true, predicate: ["label"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"sapphire-label\" [class.sapphire-label--md]=\"size === 'md'\">\n <label\n class=\"sapphire-label__text\"\n (click)=\"!disabled && labelClick.emit($event)\"\n [attr.for]=\"for\"\n [attr.id]=\"id\"\n #label\n ><ng-content></ng-content\n ></label>\n\n <span\n *ngIf=\"necessityIndicator === 'required'\"\n class=\"sapphire-label__required-indicator\"\n ></span>\n <span\n *ngIf=\"necessityIndicator === 'optional'\"\n class=\"sapphire-label__optional-indicator\"\n >({{ 'optional' | t }})</span\n >\n\n <ng-content select=\"sp-help-button\"></ng-content>\n</div>\n", styles: [".sapphire-label{display:flex;align-items:center;min-height:var(--sapphire-semantic-size-height-control-xs);line-height:var(--sapphire-semantic-size-line-height-md);font-size:var(--sapphire-semantic-size-font-label-md);gap:var(--sapphire-semantic-size-spacing-3xs)}.sapphire-label--md{font-size:var(--sapphire-semantic-size-font-label-sm);min-height:var(--sapphire-semantic-size-height-control-2xs)}.sapphire-label__text{font-weight:var(--sapphire-semantic-font-weight-default-medium);color:var(--sapphire-semantic-color-foreground-primary)}.sapphire-label__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-label__optional-indicator{color:var(--sapphire-semantic-color-foreground-secondary)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: TranslatePipe, name: "t" }] });
|
|
2025
1347
|
__decorate([
|
|
2026
1348
|
AutoId()
|
|
2027
1349
|
], LabelComponent.prototype, "id", void 0);
|
|
@@ -2030,7 +1352,7 @@ __decorate([
|
|
|
2030
1352
|
], LabelComponent.prototype, "disabled", void 0);
|
|
2031
1353
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: LabelComponent, decorators: [{
|
|
2032
1354
|
type: Component,
|
|
2033
|
-
args: [{ selector: 'sp-label', standalone: true, imports: [NgIf, TranslatePipe], providers: [{ provide: MessageDictionary, useValue: translations$2 }], template: "<div class=\"sapphire-label\" [class.sapphire-label--md]=\"size === 'md'\">\n <label\n class=\"sapphire-label__text\"\n (click)=\"!disabled && labelClick.emit($event)\"\n [attr.for]=\"for\"\n [attr.id]=\"id\"\n #label\n ><ng-content></ng-content\n ></label>\n\n <span\n *ngIf=\"necessityIndicator === 'required'\"\n class=\"sapphire-label__required-indicator\"\n ></span>\n <span\n *ngIf=\"necessityIndicator === 'optional'\"\n class=\"sapphire-label__optional-indicator\"\n >({{ 'optional' | t }})</span\n >\n\n <ng-content select=\"sp-help-button\"></ng-content>\n</div>\n", styles: [".sapphire-label{display:
|
|
1355
|
+
args: [{ selector: 'sp-label', standalone: true, imports: [NgIf, TranslatePipe], providers: [{ provide: MessageDictionary, useValue: translations$2 }], template: "<div class=\"sapphire-label\" [class.sapphire-label--md]=\"size === 'md'\">\n <label\n class=\"sapphire-label__text\"\n (click)=\"!disabled && labelClick.emit($event)\"\n [attr.for]=\"for\"\n [attr.id]=\"id\"\n #label\n ><ng-content></ng-content\n ></label>\n\n <span\n *ngIf=\"necessityIndicator === 'required'\"\n class=\"sapphire-label__required-indicator\"\n ></span>\n <span\n *ngIf=\"necessityIndicator === 'optional'\"\n class=\"sapphire-label__optional-indicator\"\n >({{ 'optional' | t }})</span\n >\n\n <ng-content select=\"sp-help-button\"></ng-content>\n</div>\n", styles: [".sapphire-label{display:flex;align-items:center;min-height:var(--sapphire-semantic-size-height-control-xs);line-height:var(--sapphire-semantic-size-line-height-md);font-size:var(--sapphire-semantic-size-font-label-md);gap:var(--sapphire-semantic-size-spacing-3xs)}.sapphire-label--md{font-size:var(--sapphire-semantic-size-font-label-sm);min-height:var(--sapphire-semantic-size-height-control-2xs)}.sapphire-label__text{font-weight:var(--sapphire-semantic-font-weight-default-medium);color:var(--sapphire-semantic-color-foreground-primary)}.sapphire-label__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-label__optional-indicator{color:var(--sapphire-semantic-color-foreground-secondary)}\n"] }]
|
|
2034
1356
|
}], propDecorators: { id: [{
|
|
2035
1357
|
type: Input
|
|
2036
1358
|
}], for: [{
|
|
@@ -2335,7 +1657,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
2335
1657
|
class RadioComponent extends RadioBase {
|
|
2336
1658
|
}
|
|
2337
1659
|
RadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: RadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2338
|
-
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--
|
|
1660
|
+
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--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-sm);font-size:var(--sapphire-semantic-size-font-control-lg);line-height:var(--sapphire-semantic-size-height-control-xs);color:var(--sapphire-semantic-color-foreground-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-field);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-sm) solid var(--sapphire-semantic-color-border-field-default);position:relative;margin-top:var(--sapphire-semantic-size-spacing-4xs);transition-property:background-color,border-color,border-width;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:var(--sapphire-semantic-transitions-fade)}.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);background-color:var(--sapphire-semantic-color-foreground-action-on-select-default)}.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-field-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:not(.sapphire-radio--checked).is-active .sapphire-radio__box,.sapphire-radio:not(.sapphire-radio--checked):active .sapphire-radio__input:not(:disabled)~.sapphire-radio__box{border-color:var(--sapphire-semantic-color-border-field-active)}.sapphire-radio--checked.is-active .sapphire-radio__box,.sapphire-radio--checked:active .sapphire-radio__input:not(:disabled)~.sapphire-radio__box{border-color:var(--sapphire-semantic-color-background-action-primary-active)}.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 .sapphire-radio__input:disabled~.sapphire-radio__box,.sapphire-radio .sapphire-radio__input:disabled~.sapphire-radio__label{opacity:var(--sapphire-semantic-opacity-disabled)}\n"], changeDetection: i0.ChangeDetectionStrategy.Default });
|
|
2339
1661
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: RadioComponent, decorators: [{
|
|
2340
1662
|
type: Component,
|
|
2341
1663
|
args: [{ selector: 'sp-radio', changeDetection: ChangeDetectionStrategy.Default, hostDirectives: [ThemeCheckDirective], inputs: ['tabIndex'], host: {
|
|
@@ -2344,7 +1666,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
2344
1666
|
'[attr.aria-label]': 'null',
|
|
2345
1667
|
'[attr.aria-labelledby]': 'null',
|
|
2346
1668
|
'[attr.aria-describedby]': 'null',
|
|
2347
|
-
}, standalone: false, template: "<label\n [for]=\"inputId\"\n class=\"sapphire-radio\"\n [class.sapphire-radio--
|
|
1669
|
+
}, standalone: false, template: "<label\n [for]=\"inputId\"\n class=\"sapphire-radio\"\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-sm);font-size:var(--sapphire-semantic-size-font-control-lg);line-height:var(--sapphire-semantic-size-height-control-xs);color:var(--sapphire-semantic-color-foreground-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-field);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-sm) solid var(--sapphire-semantic-color-border-field-default);position:relative;margin-top:var(--sapphire-semantic-size-spacing-4xs);transition-property:background-color,border-color,border-width;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:var(--sapphire-semantic-transitions-fade)}.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);background-color:var(--sapphire-semantic-color-foreground-action-on-select-default)}.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-field-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:not(.sapphire-radio--checked).is-active .sapphire-radio__box,.sapphire-radio:not(.sapphire-radio--checked):active .sapphire-radio__input:not(:disabled)~.sapphire-radio__box{border-color:var(--sapphire-semantic-color-border-field-active)}.sapphire-radio--checked.is-active .sapphire-radio__box,.sapphire-radio--checked:active .sapphire-radio__input:not(:disabled)~.sapphire-radio__box{border-color:var(--sapphire-semantic-color-background-action-primary-active)}.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 .sapphire-radio__input:disabled~.sapphire-radio__box,.sapphire-radio .sapphire-radio__input:disabled~.sapphire-radio__label{opacity:var(--sapphire-semantic-opacity-disabled)}\n"] }]
|
|
2348
1670
|
}] });
|
|
2349
1671
|
|
|
2350
1672
|
class RadioGroupBase {
|
|
@@ -2712,12 +2034,12 @@ class FieldComponent {
|
|
|
2712
2034
|
}
|
|
2713
2035
|
}
|
|
2714
2036
|
FieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: FieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: IconRegistry }], target: i0.ɵɵFactoryTarget.Component });
|
|
2715
|
-
FieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: FieldComponent, selector: "sp-field", inputs: { necessityIndicator: "necessityIndicator", labelPlacement: "labelPlacement", noDefaultWidth: "noDefaultWidth", allowNoteAndError: "allowNoteAndError", 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\""
|
|
2037
|
+
FieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: FieldComponent, selector: "sp-field", inputs: { necessityIndicator: "necessityIndicator", labelPlacement: "labelPlacement", noDefaultWidth: "noDefaultWidth", allowNoteAndError: "allowNoteAndError", 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\"" }, classAttribute: "sapphire-field" }, providers: [
|
|
2716
2038
|
{
|
|
2717
2039
|
provide: ICON_SIZE_PROVIDER,
|
|
2718
2040
|
useClass: FieldIconSizeProvider,
|
|
2719
2041
|
},
|
|
2720
|
-
], 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 }, { propertyName: "suffixPortalOutlet", predicate: CdkPortalOutlet, 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 sapphire-text--negative\" *ngIf=\"error\">\n <span class=\"sapphire-field__note-icon\">\n <sp-icon name=\"error\" size=\"sm\"></sp-icon>\n </span>\n <div class=\"sapphire-field__note\">\n <ng-content select=\"sp-field-error\"></ng-content>\n </div>\n\n <ng-container *ngIf=\"_noteSuffixPortal\">\n <ng-container *cdkPortalOutlet=\"_noteSuffixPortal\"></ng-container>\n </ng-container>\n </div>\n <div\n class=\"sapphire-field__note-row\"\n [ngClass]=\"{\n 'sapphire-text--positive': note?.variant === 'success',\n 'sapphire-text--warning': note?.variant === 'warning'\n }\"\n *ngIf=\"note && (!error || allowNoteAndError)\"\n >\n <span class=\"sapphire-field__note-icon\" *ngIf=\"note?.icon\">\n <sp-icon [name]=\"note?.icon\" size=\"sm\"></sp-icon>\n </span>\n <div class=\"sapphire-field__note\">\n <ng-content select=\"sp-field-note\"></ng-content>\n </div>\n\n <ng-container *ngIf=\"!error && _noteSuffixPortal\">\n <ng-container *cdkPortalOutlet=\"_noteSuffixPortal\"></ng-container>\n </ng-container>\n </div>\n <div\n class=\"sapphire-field__note-row\"\n *ngIf=\"!note && !error && _noteSuffixPortal\"\n >\n <ng-container>\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-2xs);column-gap:var(--sapphire-semantic-size-spacing-md);font-family:var(--sapphire-semantic-font-name-default);grid-auto-rows:min-content;width:var(--sapphire-semantic-size-width-field);-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;line-height:var(--sapphire-semantic-size-line-height-md);font-size:var(--sapphire-semantic-size-font-control-lg)}.sapphire-field--md .sapphire-field__control{font-size:var(--sapphire-semantic-size-font-control-md)}.sapphire-field__control--group{display:flex;gap:var(--sapphire-semantic-size-spacing-xs)}.sapphire-field--md .sapphire-field__control--group{gap:var(--sapphire-semantic-size-spacing-2xs)}.sapphire-field--no-shrink .sapphire-field__control{min-width:initial}.sapphire-field__message{min-width:100%;max-width:min-content;order:3;display:flex;flex-direction:column;gap:var(--sapphire-semantic-size-spacing-4xs);padding:var(--sapphire-semantic-size-spacing-4xs) 0}.sapphire-field__note-row{display:flex;align-items:flex-start;gap:var(--sapphire-semantic-size-spacing-xs);font-size:var(--sapphire-semantic-size-font-label-md);line-height:var(--sapphire-semantic-size-line-height-md);color:var(--sapphire-semantic-color-foreground-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);gap:var(--sapphire-semantic-size-spacing-2xs)}.sapphire-field__note{flex:1}.sapphire-field__note-icon{display:inline-flex;line-height:0;padding-top:var(--sapphire-semantic-size-spacing-4xs)}.sapphire-field--md .sapphire-field__note-icon{padding-top:0}.sapphire-field.is-disabled .sapphire-field__control{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-field)}.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-control-lg)}.sapphire-field--label-placement-side.sapphire-field--md .sapphire-field__label{max-height:var(--sapphire-semantic-size-height-control-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-lg)}.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}.sapphire-text{font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-foreground-primary);font-weight:var(--sapphire-semantic-font-weight-default-regular);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-text--strong{font-weight:var(--sapphire-semantic-font-weight-default-bold)}.sapphire-text--semibold{font-weight:var(--sapphire-semantic-font-weight-default-medium)}.sapphire-text--underlined{text-decoration:underline}.sapphire-text--secondary{color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-text--informative{color:var(--sapphire-semantic-color-foreground-accent)}.sapphire-text--positive{color:var(--sapphire-semantic-color-foreground-positive)}.sapphire-text--warning{color:var(--sapphire-semantic-color-foreground-warning)}.sapphire-text--negative{color:var(--sapphire-semantic-color-foreground-negative)}.sapphire-text--heading-2xl,.sapphire-text--heading-xl,.sapphire-text--heading-lg,.sapphire-text--heading-md,.sapphire-text--heading-sm,.sapphire-text--heading-xs{margin-top:0;margin-bottom:0;line-height:var(--sapphire-global-size-line-height-sm);letter-spacing
|
|
2042
|
+
], 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 }, { propertyName: "suffixPortalOutlet", predicate: CdkPortalOutlet, 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 sapphire-text--negative\" *ngIf=\"error\">\n <span class=\"sapphire-field__note-icon\">\n <sp-icon name=\"error\" size=\"sm\"></sp-icon>\n </span>\n <div class=\"sapphire-field__note\">\n <ng-content select=\"sp-field-error\"></ng-content>\n </div>\n\n <ng-container *ngIf=\"_noteSuffixPortal\">\n <ng-container *cdkPortalOutlet=\"_noteSuffixPortal\"></ng-container>\n </ng-container>\n </div>\n <div\n class=\"sapphire-field__note-row\"\n [ngClass]=\"{\n 'sapphire-text--positive': note?.variant === 'success',\n 'sapphire-text--warning': note?.variant === 'warning'\n }\"\n *ngIf=\"note && (!error || allowNoteAndError)\"\n >\n <span class=\"sapphire-field__note-icon\" *ngIf=\"note?.icon\">\n <sp-icon [name]=\"note?.icon\" size=\"sm\"></sp-icon>\n </span>\n <div class=\"sapphire-field__note\">\n <ng-content select=\"sp-field-note\"></ng-content>\n </div>\n\n <ng-container *ngIf=\"!error && _noteSuffixPortal\">\n <ng-container *cdkPortalOutlet=\"_noteSuffixPortal\"></ng-container>\n </ng-container>\n </div>\n <div\n class=\"sapphire-field__note-row\"\n *ngIf=\"!note && !error && _noteSuffixPortal\"\n >\n <ng-container>\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-2xs);column-gap:var(--sapphire-semantic-size-spacing-md);font-family:var(--sapphire-semantic-font-name-default);grid-auto-rows:min-content;width:var(--sapphire-semantic-size-width-field);-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;line-height:var(--sapphire-semantic-size-line-height-md);font-size:var(--sapphire-semantic-size-font-control-lg)}.sapphire-field--md .sapphire-field__control{font-size:var(--sapphire-semantic-size-font-control-md)}.sapphire-field__control--group{display:flex;gap:var(--sapphire-semantic-size-spacing-xs)}.sapphire-field--md .sapphire-field__control--group{gap:var(--sapphire-semantic-size-spacing-2xs)}.sapphire-field--no-shrink .sapphire-field__control{min-width:initial}.sapphire-field__message{min-width:100%;max-width:min-content;order:3;display:flex;flex-direction:column;gap:var(--sapphire-semantic-size-spacing-4xs);padding:var(--sapphire-semantic-size-spacing-4xs) 0}.sapphire-field__note-row{display:flex;align-items:flex-start;gap:var(--sapphire-semantic-size-spacing-xs);font-size:var(--sapphire-semantic-size-font-label-md);line-height:var(--sapphire-semantic-size-line-height-md);color:var(--sapphire-semantic-color-foreground-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);gap:var(--sapphire-semantic-size-spacing-2xs)}.sapphire-field__note{flex:1}.sapphire-field__note-icon{display:inline-flex;line-height:0;padding-top:var(--sapphire-semantic-size-spacing-4xs)}.sapphire-field--md .sapphire-field__note-icon{padding-top:0}.sapphire-field.is-disabled .sapphire-field__control{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-field)}.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-control-lg)}.sapphire-field--label-placement-side.sapphire-field--md .sapphire-field__label{max-height:var(--sapphire-semantic-size-height-control-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-lg)}.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}.sapphire-text{font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-foreground-primary);font-weight:var(--sapphire-semantic-font-weight-default-regular);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-text--strong{font-weight:var(--sapphire-semantic-font-weight-default-bold)}.sapphire-text--semibold{font-weight:var(--sapphire-semantic-font-weight-default-medium)}.sapphire-text--underlined{text-decoration:underline}.sapphire-text--secondary{color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-text--informative{color:var(--sapphire-semantic-color-foreground-accent)}.sapphire-text--positive{color:var(--sapphire-semantic-color-foreground-positive)}.sapphire-text--warning{color:var(--sapphire-semantic-color-foreground-warning)}.sapphire-text--negative{color:var(--sapphire-semantic-color-foreground-negative)}.sapphire-text--heading-2xl,.sapphire-text--heading-xl,.sapphire-text--heading-lg,.sapphire-text--heading-md,.sapphire-text--heading-sm,.sapphire-text--heading-xs{margin-top:0;margin-bottom:0;line-height:var(--sapphire-global-size-line-height-sm);letter-spacing:-.01em}.sapphire-text--heading-2xl{font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-heading-2xl)}.sapphire-text--heading-xl{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-xl)}.sapphire-text--heading-lg{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-lg)}.sapphire-text--heading-md{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-md)}.sapphire-text--heading-sm{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-sm)}.sapphire-text--heading-xs{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-xs)}.sapphire-text--subheading-md,.sapphire-text--subheading-sm{line-height:var(--sapphire-global-size-line-height-sm)}.sapphire-text--subheading-md{font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-text--subheading-sm{font-size:var(--sapphire-semantic-size-font-body-xs)}.sapphire-text--body-lg,.sapphire-text--body-md,.sapphire-text--body-sm,.sapphire-text--body-xs{line-height:var(--sapphire-global-size-line-height-md);margin-top:0;margin-bottom:0}.sapphire-text--body-lg{font-size:var(--sapphire-semantic-size-font-body-lg)}.sapphire-text--body-md{font-size:var(--sapphire-semantic-size-font-body-md)}.sapphire-text--body-sm{font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-text--body-xs{font-size:var(--sapphire-semantic-size-font-body-xs)}.sapphire-text--caption-md,.sapphire-text--caption-sm{font-weight:var(--sapphire-semantic-font-weight-default-bold);line-height:var(--sapphire-global-size-line-height-sm)}.sapphire-text--caption-md{font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-text--caption-sm{font-size:var(--sapphire-semantic-size-font-body-xs)}\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"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size", "color"] }] });
|
|
2721
2043
|
__decorate([
|
|
2722
2044
|
CoerceBoolean
|
|
2723
2045
|
], FieldComponent.prototype, "necessityIndicator", void 0);
|
|
@@ -2735,13 +2057,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
2735
2057
|
'[class.sapphire-field--no-width]': 'noDefaultWidth || !controlHasDefaultWidth()',
|
|
2736
2058
|
'[class.sapphire-field--label-alignment-top]': 'labelPlacement === "side" && hasRadioGroupChild()',
|
|
2737
2059
|
'[class.sapphire-field--md]': 'size === "md"',
|
|
2738
|
-
'[class.is-disabled]': 'isDisabled()',
|
|
2739
2060
|
}, hostDirectives: [UseComponentStylesOnHost], providers: [
|
|
2740
2061
|
{
|
|
2741
2062
|
provide: ICON_SIZE_PROVIDER,
|
|
2742
2063
|
useClass: FieldIconSizeProvider,
|
|
2743
2064
|
},
|
|
2744
|
-
], standalone: false, 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 sapphire-text--negative\" *ngIf=\"error\">\n <span class=\"sapphire-field__note-icon\">\n <sp-icon name=\"error\" size=\"sm\"></sp-icon>\n </span>\n <div class=\"sapphire-field__note\">\n <ng-content select=\"sp-field-error\"></ng-content>\n </div>\n\n <ng-container *ngIf=\"_noteSuffixPortal\">\n <ng-container *cdkPortalOutlet=\"_noteSuffixPortal\"></ng-container>\n </ng-container>\n </div>\n <div\n class=\"sapphire-field__note-row\"\n [ngClass]=\"{\n 'sapphire-text--positive': note?.variant === 'success',\n 'sapphire-text--warning': note?.variant === 'warning'\n }\"\n *ngIf=\"note && (!error || allowNoteAndError)\"\n >\n <span class=\"sapphire-field__note-icon\" *ngIf=\"note?.icon\">\n <sp-icon [name]=\"note?.icon\" size=\"sm\"></sp-icon>\n </span>\n <div class=\"sapphire-field__note\">\n <ng-content select=\"sp-field-note\"></ng-content>\n </div>\n\n <ng-container *ngIf=\"!error && _noteSuffixPortal\">\n <ng-container *cdkPortalOutlet=\"_noteSuffixPortal\"></ng-container>\n </ng-container>\n </div>\n <div\n class=\"sapphire-field__note-row\"\n *ngIf=\"!note && !error && _noteSuffixPortal\"\n >\n <ng-container>\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-2xs);column-gap:var(--sapphire-semantic-size-spacing-md);font-family:var(--sapphire-semantic-font-name-default);grid-auto-rows:min-content;width:var(--sapphire-semantic-size-width-field);-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;line-height:var(--sapphire-semantic-size-line-height-md);font-size:var(--sapphire-semantic-size-font-control-lg)}.sapphire-field--md .sapphire-field__control{font-size:var(--sapphire-semantic-size-font-control-md)}.sapphire-field__control--group{display:flex;gap:var(--sapphire-semantic-size-spacing-xs)}.sapphire-field--md .sapphire-field__control--group{gap:var(--sapphire-semantic-size-spacing-2xs)}.sapphire-field--no-shrink .sapphire-field__control{min-width:initial}.sapphire-field__message{min-width:100%;max-width:min-content;order:3;display:flex;flex-direction:column;gap:var(--sapphire-semantic-size-spacing-4xs);padding:var(--sapphire-semantic-size-spacing-4xs) 0}.sapphire-field__note-row{display:flex;align-items:flex-start;gap:var(--sapphire-semantic-size-spacing-xs);font-size:var(--sapphire-semantic-size-font-label-md);line-height:var(--sapphire-semantic-size-line-height-md);color:var(--sapphire-semantic-color-foreground-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);gap:var(--sapphire-semantic-size-spacing-2xs)}.sapphire-field__note{flex:1}.sapphire-field__note-icon{display:inline-flex;line-height:0;padding-top:var(--sapphire-semantic-size-spacing-4xs)}.sapphire-field--md .sapphire-field__note-icon{padding-top:0}.sapphire-field.is-disabled .sapphire-field__control{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-field)}.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-control-lg)}.sapphire-field--label-placement-side.sapphire-field--md .sapphire-field__label{max-height:var(--sapphire-semantic-size-height-control-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-lg)}.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}.sapphire-text{font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-foreground-primary);font-weight:var(--sapphire-semantic-font-weight-default-regular);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-text--strong{font-weight:var(--sapphire-semantic-font-weight-default-bold)}.sapphire-text--semibold{font-weight:var(--sapphire-semantic-font-weight-default-medium)}.sapphire-text--underlined{text-decoration:underline}.sapphire-text--secondary{color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-text--informative{color:var(--sapphire-semantic-color-foreground-accent)}.sapphire-text--positive{color:var(--sapphire-semantic-color-foreground-positive)}.sapphire-text--warning{color:var(--sapphire-semantic-color-foreground-warning)}.sapphire-text--negative{color:var(--sapphire-semantic-color-foreground-negative)}.sapphire-text--heading-2xl,.sapphire-text--heading-xl,.sapphire-text--heading-lg,.sapphire-text--heading-md,.sapphire-text--heading-sm,.sapphire-text--heading-xs{margin-top:0;margin-bottom:0;line-height:var(--sapphire-global-size-line-height-sm);letter-spacing
|
|
2065
|
+
], standalone: false, 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 sapphire-text--negative\" *ngIf=\"error\">\n <span class=\"sapphire-field__note-icon\">\n <sp-icon name=\"error\" size=\"sm\"></sp-icon>\n </span>\n <div class=\"sapphire-field__note\">\n <ng-content select=\"sp-field-error\"></ng-content>\n </div>\n\n <ng-container *ngIf=\"_noteSuffixPortal\">\n <ng-container *cdkPortalOutlet=\"_noteSuffixPortal\"></ng-container>\n </ng-container>\n </div>\n <div\n class=\"sapphire-field__note-row\"\n [ngClass]=\"{\n 'sapphire-text--positive': note?.variant === 'success',\n 'sapphire-text--warning': note?.variant === 'warning'\n }\"\n *ngIf=\"note && (!error || allowNoteAndError)\"\n >\n <span class=\"sapphire-field__note-icon\" *ngIf=\"note?.icon\">\n <sp-icon [name]=\"note?.icon\" size=\"sm\"></sp-icon>\n </span>\n <div class=\"sapphire-field__note\">\n <ng-content select=\"sp-field-note\"></ng-content>\n </div>\n\n <ng-container *ngIf=\"!error && _noteSuffixPortal\">\n <ng-container *cdkPortalOutlet=\"_noteSuffixPortal\"></ng-container>\n </ng-container>\n </div>\n <div\n class=\"sapphire-field__note-row\"\n *ngIf=\"!note && !error && _noteSuffixPortal\"\n >\n <ng-container>\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-2xs);column-gap:var(--sapphire-semantic-size-spacing-md);font-family:var(--sapphire-semantic-font-name-default);grid-auto-rows:min-content;width:var(--sapphire-semantic-size-width-field);-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;line-height:var(--sapphire-semantic-size-line-height-md);font-size:var(--sapphire-semantic-size-font-control-lg)}.sapphire-field--md .sapphire-field__control{font-size:var(--sapphire-semantic-size-font-control-md)}.sapphire-field__control--group{display:flex;gap:var(--sapphire-semantic-size-spacing-xs)}.sapphire-field--md .sapphire-field__control--group{gap:var(--sapphire-semantic-size-spacing-2xs)}.sapphire-field--no-shrink .sapphire-field__control{min-width:initial}.sapphire-field__message{min-width:100%;max-width:min-content;order:3;display:flex;flex-direction:column;gap:var(--sapphire-semantic-size-spacing-4xs);padding:var(--sapphire-semantic-size-spacing-4xs) 0}.sapphire-field__note-row{display:flex;align-items:flex-start;gap:var(--sapphire-semantic-size-spacing-xs);font-size:var(--sapphire-semantic-size-font-label-md);line-height:var(--sapphire-semantic-size-line-height-md);color:var(--sapphire-semantic-color-foreground-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);gap:var(--sapphire-semantic-size-spacing-2xs)}.sapphire-field__note{flex:1}.sapphire-field__note-icon{display:inline-flex;line-height:0;padding-top:var(--sapphire-semantic-size-spacing-4xs)}.sapphire-field--md .sapphire-field__note-icon{padding-top:0}.sapphire-field.is-disabled .sapphire-field__control{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-field)}.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-control-lg)}.sapphire-field--label-placement-side.sapphire-field--md .sapphire-field__label{max-height:var(--sapphire-semantic-size-height-control-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-lg)}.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}.sapphire-text{font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-foreground-primary);font-weight:var(--sapphire-semantic-font-weight-default-regular);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-text--strong{font-weight:var(--sapphire-semantic-font-weight-default-bold)}.sapphire-text--semibold{font-weight:var(--sapphire-semantic-font-weight-default-medium)}.sapphire-text--underlined{text-decoration:underline}.sapphire-text--secondary{color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-text--informative{color:var(--sapphire-semantic-color-foreground-accent)}.sapphire-text--positive{color:var(--sapphire-semantic-color-foreground-positive)}.sapphire-text--warning{color:var(--sapphire-semantic-color-foreground-warning)}.sapphire-text--negative{color:var(--sapphire-semantic-color-foreground-negative)}.sapphire-text--heading-2xl,.sapphire-text--heading-xl,.sapphire-text--heading-lg,.sapphire-text--heading-md,.sapphire-text--heading-sm,.sapphire-text--heading-xs{margin-top:0;margin-bottom:0;line-height:var(--sapphire-global-size-line-height-sm);letter-spacing:-.01em}.sapphire-text--heading-2xl{font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-heading-2xl)}.sapphire-text--heading-xl{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-xl)}.sapphire-text--heading-lg{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-lg)}.sapphire-text--heading-md{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-md)}.sapphire-text--heading-sm{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-sm)}.sapphire-text--heading-xs{font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-heading-xs)}.sapphire-text--subheading-md,.sapphire-text--subheading-sm{line-height:var(--sapphire-global-size-line-height-sm)}.sapphire-text--subheading-md{font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-text--subheading-sm{font-size:var(--sapphire-semantic-size-font-body-xs)}.sapphire-text--body-lg,.sapphire-text--body-md,.sapphire-text--body-sm,.sapphire-text--body-xs{line-height:var(--sapphire-global-size-line-height-md);margin-top:0;margin-bottom:0}.sapphire-text--body-lg{font-size:var(--sapphire-semantic-size-font-body-lg)}.sapphire-text--body-md{font-size:var(--sapphire-semantic-size-font-body-md)}.sapphire-text--body-sm{font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-text--body-xs{font-size:var(--sapphire-semantic-size-font-body-xs)}.sapphire-text--caption-md,.sapphire-text--caption-sm{font-weight:var(--sapphire-semantic-font-weight-default-bold);line-height:var(--sapphire-global-size-line-height-sm)}.sapphire-text--caption-md{font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-text--caption-sm{font-size:var(--sapphire-semantic-size-font-body-xs)}\n"] }]
|
|
2745
2066
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: IconRegistry }]; }, propDecorators: { necessityIndicator: [{
|
|
2746
2067
|
type: Input
|
|
2747
2068
|
}], labelPlacement: [{
|
|
@@ -3059,7 +2380,7 @@ CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
|
|
|
3059
2380
|
multi: true,
|
|
3060
2381
|
},
|
|
3061
2382
|
{ provide: MessageDictionary, useValue: translations$2 },
|
|
3062
|
-
], 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.is-disabled]=\"disabled && !checkboxGroup?.disabled\"\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-container{display:flex;flex-flow:column}.sapphire-checkbox{font-family:var(--sapphire-semantic-font-name-default);display:inline-flex;position:relative;max-width:100%;cursor:pointer}.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-sm);font-size:var(--sapphire-semantic-size-font-control-lg);color:var(--sapphire-semantic-color-foreground-primary);line-height:var(--sapphire-semantic-size-height-control-xs);display:inline-flex;align-items:center;gap:var(--sapphire-semantic-size-spacing-3xs)}.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-foreground-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);margin-left:var(--sapphire-semantic-size-spacing-xs)}.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-foreground-on-negative-subtle);margin-top:var(--sapphire-semantic-size-spacing-2xs);margin-left:calc(var(--sapphire-semantic-size-spacing-sm) + 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-xs) + 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-sm) solid var(--sapphire-semantic-color-border-field-default);background:var(--sapphire-semantic-color-background-field);transition:all var(--sapphire-semantic-time-fade-quick) var(--sapphire-semantic-transitions-fade);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-4xs)}.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-foreground-action-on-select-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-border-negative-default)}.sapphire-checkbox--checked .sapphire-checkbox__box,.sapphire-checkbox--indeterminate .sapphire-checkbox__box{border-width:var(--sapphire-global-size-generic-0);background:var(--sapphire-semantic-color-background-action-select-default)}.sapphire-checkbox--checked.sapphire-checkbox--error .sapphire-checkbox__box,.sapphire-checkbox--indeterminate.sapphire-checkbox--error .sapphire-checkbox__box{background:var(--sapphire-semantic-color-background-action-danger-default)}.sapphire-checkbox:not(:active):not(.is-disabled):not(.is-active):not(.sapphire-checkbox--checked).is-hover .sapphire-checkbox__box,.sapphire-checkbox:not(:active):not(.is-disabled):not(.is-active):not(.sapphire-checkbox--checked):not(.js-hover):hover .sapphire-checkbox__box{border-color:var(--sapphire-semantic-color-border-field-hover)}.sapphire-checkbox--error:not(:active):not(.is-disabled):not(.is-active):not(.sapphire-checkbox--checked).is-hover .sapphire-checkbox__box,.sapphire-checkbox--error:not(:active):not(.is-disabled):not(.is-active):not(.sapphire-checkbox--checked):not(.js-hover):hover .sapphire-checkbox__box{border-color:var(--sapphire-semantic-color-border-negative-hover)}.sapphire-checkbox--checked:not(:active):not(.is-disabled):not(.is-active).is-hover .sapphire-checkbox__box,.sapphire-checkbox--checked:not(:active):not(.is-disabled):not(.is-active):not(.js-hover):hover .sapphire-checkbox__box,.sapphire-checkbox--indeterminate:not(:active):not(.is-disabled):not(.is-active).is-hover .sapphire-checkbox__box,.sapphire-checkbox--indeterminate:not(:active):not(.is-disabled):not(.is-active):not(.js-hover):hover .sapphire-checkbox__box{background-color:var(--sapphire-semantic-color-background-action-select-hover)}.sapphire-checkbox--checked.sapphire-checkbox--error:not(:active):not(.is-disabled):not(.is-active).is-hover .sapphire-checkbox__box,.sapphire-checkbox--checked.sapphire-checkbox--error:not(:active):not(.is-disabled):not(.is-active):not(.js-hover):hover .sapphire-checkbox__box,.sapphire-checkbox--indeterminate.sapphire-checkbox--error:not(:active):not(.is-disabled):not(.is-active).is-hover .sapphire-checkbox__box,.sapphire-checkbox--indeterminate.sapphire-checkbox--error:not(:active):not(.is-disabled):not(.is-active):not(.js-hover):hover .sapphire-checkbox__box{background:var(--sapphire-semantic-color-background-action-danger-hover)}.sapphire-checkbox:not(.sapphire-checkbox--checked).is-active .sapphire-checkbox__box,.sapphire-checkbox:not(.sapphire-checkbox--checked):active .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box{border-color:var(--sapphire-semantic-color-border-field-active)}.sapphire-checkbox--error:not(.sapphire-checkbox--checked).is-active .sapphire-checkbox__box,.sapphire-checkbox--error:not(.sapphire-checkbox--checked):active .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box{border-color:var(--sapphire-semantic-color-border-negative-active)}.sapphire-checkbox--checked.is-active .sapphire-checkbox__box,.sapphire-checkbox--checked:active .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box,.sapphire-checkbox--indeterminate.is-active .sapphire-checkbox__box,.sapphire-checkbox--indeterminate:active .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box{background:var(--sapphire-semantic-color-background-action-select-active)}.sapphire-checkbox--checked.sapphire-checkbox--error.is-active .sapphire-checkbox__box,.sapphire-checkbox--checked.sapphire-checkbox--error:active .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box,.sapphire-checkbox--indeterminate.sapphire-checkbox--error.is-active .sapphire-checkbox__box,.sapphire-checkbox--indeterminate.sapphire-checkbox--error:active .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box{background:var(--sapphire-semantic-color-background-action-danger-active)}.sapphire-checkbox.is-focus .sapphire-checkbox__box,.sapphire-checkbox:not(.js-focus):has(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.is-disabled,.sapphire-checkbox__input:disabled{cursor:not-allowed}.sapphire-checkbox.is-disabled .sapphire-checkbox__box,.sapphire-checkbox.is-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 });
|
|
2383
|
+
], 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.is-disabled]=\"disabled && !checkboxGroup?.disabled\"\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-container{display:flex;flex-flow:column}.sapphire-checkbox{font-family:var(--sapphire-semantic-font-name-default);display:inline-flex;position:relative;max-width:100%;cursor:pointer}.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-sm);font-size:var(--sapphire-semantic-size-font-control-lg);color:var(--sapphire-semantic-color-foreground-primary);line-height:var(--sapphire-semantic-size-height-control-xs);display:inline-flex;align-items:center;gap:var(--sapphire-semantic-size-spacing-3xs)}.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-foreground-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);margin-left:var(--sapphire-semantic-size-spacing-xs)}.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-foreground-on-negative-subtle);margin-top:var(--sapphire-semantic-size-spacing-2xs);margin-left:calc(var(--sapphire-semantic-size-spacing-sm) + 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-xs) + 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-sm) solid var(--sapphire-semantic-color-border-field-default);background:var(--sapphire-semantic-color-background-field);transition:all var(--sapphire-semantic-time-fade-quick) var(--sapphire-semantic-transitions-fade);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-4xs)}.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-foreground-action-on-select-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-border-negative-default)}.sapphire-checkbox--checked .sapphire-checkbox__box,.sapphire-checkbox--indeterminate .sapphire-checkbox__box{border-width:var(--sapphire-global-size-generic-0);background:var(--sapphire-semantic-color-background-action-select-default)}.sapphire-checkbox--checked.sapphire-checkbox--error .sapphire-checkbox__box,.sapphire-checkbox--indeterminate.sapphire-checkbox--error .sapphire-checkbox__box{background:var(--sapphire-semantic-color-background-action-danger-default)}.sapphire-checkbox:not(:active):not(.is-disabled):not(.is-active):not(.sapphire-checkbox--checked).is-hover .sapphire-checkbox__box,.sapphire-checkbox:not(:active):not(.is-disabled):not(.is-active):not(.sapphire-checkbox--checked):not(.js-hover):hover .sapphire-checkbox__box{border-color:var(--sapphire-semantic-color-border-field-hover)}.sapphire-checkbox--error:not(:active):not(.is-disabled):not(.is-active):not(.sapphire-checkbox--checked).is-hover .sapphire-checkbox__box,.sapphire-checkbox--error:not(:active):not(.is-disabled):not(.is-active):not(.sapphire-checkbox--checked):not(.js-hover):hover .sapphire-checkbox__box{border-color:var(--sapphire-semantic-color-border-negative-hover)}.sapphire-checkbox--checked:not(:active):not(.is-disabled):not(.is-active).is-hover .sapphire-checkbox__box,.sapphire-checkbox--checked:not(:active):not(.is-disabled):not(.is-active):not(.js-hover):hover .sapphire-checkbox__box,.sapphire-checkbox--indeterminate:not(:active):not(.is-disabled):not(.is-active).is-hover .sapphire-checkbox__box,.sapphire-checkbox--indeterminate:not(:active):not(.is-disabled):not(.is-active):not(.js-hover):hover .sapphire-checkbox__box{background-color:var(--sapphire-semantic-color-background-action-select-hover)}.sapphire-checkbox--checked.sapphire-checkbox--error:not(:active):not(.is-disabled):not(.is-active).is-hover .sapphire-checkbox__box,.sapphire-checkbox--checked.sapphire-checkbox--error:not(:active):not(.is-disabled):not(.is-active):not(.js-hover):hover .sapphire-checkbox__box,.sapphire-checkbox--indeterminate.sapphire-checkbox--error:not(:active):not(.is-disabled):not(.is-active).is-hover .sapphire-checkbox__box,.sapphire-checkbox--indeterminate.sapphire-checkbox--error:not(:active):not(.is-disabled):not(.is-active):not(.js-hover):hover .sapphire-checkbox__box{background:var(--sapphire-semantic-color-background-action-danger-hover)}.sapphire-checkbox:not(.sapphire-checkbox--checked).is-active .sapphire-checkbox__box,.sapphire-checkbox:not(.sapphire-checkbox--checked):active .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box{border-color:var(--sapphire-semantic-color-border-field-active)}.sapphire-checkbox--error:not(.sapphire-checkbox--checked).is-active .sapphire-checkbox__box,.sapphire-checkbox--error:not(.sapphire-checkbox--checked):active .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box{border-color:var(--sapphire-semantic-color-border-negative-active)}.sapphire-checkbox--checked.is-active .sapphire-checkbox__box,.sapphire-checkbox--checked:active .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box,.sapphire-checkbox--indeterminate.is-active .sapphire-checkbox__box,.sapphire-checkbox--indeterminate:active .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box{background:var(--sapphire-semantic-color-background-action-select-active)}.sapphire-checkbox--checked.sapphire-checkbox--error.is-active .sapphire-checkbox__box,.sapphire-checkbox--checked.sapphire-checkbox--error:active .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box,.sapphire-checkbox--indeterminate.sapphire-checkbox--error.is-active .sapphire-checkbox__box,.sapphire-checkbox--indeterminate.sapphire-checkbox--error:active .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box{background:var(--sapphire-semantic-color-background-action-danger-active)}.sapphire-checkbox.is-focus .sapphire-checkbox__box,.sapphire-checkbox:not(.js-focus):has(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.is-disabled,.sapphire-checkbox__input:disabled{cursor:not-allowed}.sapphire-checkbox.is-disabled,.sapphire-checkbox:has(:disabled){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 });
|
|
3063
2384
|
__decorate([
|
|
3064
2385
|
AutoId()
|
|
3065
2386
|
], CheckboxComponent.prototype, "id", void 0);
|
|
@@ -3085,7 +2406,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
3085
2406
|
'[attr.tabindex]': 'null',
|
|
3086
2407
|
'[attr.aria-label]': 'null',
|
|
3087
2408
|
'[attr.aria-labelledby]': 'null',
|
|
3088
|
-
}, hostDirectives: [ThemeCheckDirective], standalone: false, template: "<label\n [for]=\"_inputId\"\n class=\"sapphire-checkbox\"\n [class.sapphire-checkbox--checked]=\"selected\"\n [class.sapphire-checkbox--indeterminate]=\"indeterminate\"\n [class.is-disabled]=\"disabled && !checkboxGroup?.disabled\"\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-container{display:flex;flex-flow:column}.sapphire-checkbox{font-family:var(--sapphire-semantic-font-name-default);display:inline-flex;position:relative;max-width:100%;cursor:pointer}.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-sm);font-size:var(--sapphire-semantic-size-font-control-lg);color:var(--sapphire-semantic-color-foreground-primary);line-height:var(--sapphire-semantic-size-height-control-xs);display:inline-flex;align-items:center;gap:var(--sapphire-semantic-size-spacing-3xs)}.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-foreground-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);margin-left:var(--sapphire-semantic-size-spacing-xs)}.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-foreground-on-negative-subtle);margin-top:var(--sapphire-semantic-size-spacing-2xs);margin-left:calc(var(--sapphire-semantic-size-spacing-sm) + 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-xs) + 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-sm) solid var(--sapphire-semantic-color-border-field-default);background:var(--sapphire-semantic-color-background-field);transition:all var(--sapphire-semantic-time-fade-quick) var(--sapphire-semantic-transitions-fade);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-4xs)}.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-foreground-action-on-select-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-border-negative-default)}.sapphire-checkbox--checked .sapphire-checkbox__box,.sapphire-checkbox--indeterminate .sapphire-checkbox__box{border-width:var(--sapphire-global-size-generic-0);background:var(--sapphire-semantic-color-background-action-select-default)}.sapphire-checkbox--checked.sapphire-checkbox--error .sapphire-checkbox__box,.sapphire-checkbox--indeterminate.sapphire-checkbox--error .sapphire-checkbox__box{background:var(--sapphire-semantic-color-background-action-danger-default)}.sapphire-checkbox:not(:active):not(.is-disabled):not(.is-active):not(.sapphire-checkbox--checked).is-hover .sapphire-checkbox__box,.sapphire-checkbox:not(:active):not(.is-disabled):not(.is-active):not(.sapphire-checkbox--checked):not(.js-hover):hover .sapphire-checkbox__box{border-color:var(--sapphire-semantic-color-border-field-hover)}.sapphire-checkbox--error:not(:active):not(.is-disabled):not(.is-active):not(.sapphire-checkbox--checked).is-hover .sapphire-checkbox__box,.sapphire-checkbox--error:not(:active):not(.is-disabled):not(.is-active):not(.sapphire-checkbox--checked):not(.js-hover):hover .sapphire-checkbox__box{border-color:var(--sapphire-semantic-color-border-negative-hover)}.sapphire-checkbox--checked:not(:active):not(.is-disabled):not(.is-active).is-hover .sapphire-checkbox__box,.sapphire-checkbox--checked:not(:active):not(.is-disabled):not(.is-active):not(.js-hover):hover .sapphire-checkbox__box,.sapphire-checkbox--indeterminate:not(:active):not(.is-disabled):not(.is-active).is-hover .sapphire-checkbox__box,.sapphire-checkbox--indeterminate:not(:active):not(.is-disabled):not(.is-active):not(.js-hover):hover .sapphire-checkbox__box{background-color:var(--sapphire-semantic-color-background-action-select-hover)}.sapphire-checkbox--checked.sapphire-checkbox--error:not(:active):not(.is-disabled):not(.is-active).is-hover .sapphire-checkbox__box,.sapphire-checkbox--checked.sapphire-checkbox--error:not(:active):not(.is-disabled):not(.is-active):not(.js-hover):hover .sapphire-checkbox__box,.sapphire-checkbox--indeterminate.sapphire-checkbox--error:not(:active):not(.is-disabled):not(.is-active).is-hover .sapphire-checkbox__box,.sapphire-checkbox--indeterminate.sapphire-checkbox--error:not(:active):not(.is-disabled):not(.is-active):not(.js-hover):hover .sapphire-checkbox__box{background:var(--sapphire-semantic-color-background-action-danger-hover)}.sapphire-checkbox:not(.sapphire-checkbox--checked).is-active .sapphire-checkbox__box,.sapphire-checkbox:not(.sapphire-checkbox--checked):active .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box{border-color:var(--sapphire-semantic-color-border-field-active)}.sapphire-checkbox--error:not(.sapphire-checkbox--checked).is-active .sapphire-checkbox__box,.sapphire-checkbox--error:not(.sapphire-checkbox--checked):active .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box{border-color:var(--sapphire-semantic-color-border-negative-active)}.sapphire-checkbox--checked.is-active .sapphire-checkbox__box,.sapphire-checkbox--checked:active .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box,.sapphire-checkbox--indeterminate.is-active .sapphire-checkbox__box,.sapphire-checkbox--indeterminate:active .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box{background:var(--sapphire-semantic-color-background-action-select-active)}.sapphire-checkbox--checked.sapphire-checkbox--error.is-active .sapphire-checkbox__box,.sapphire-checkbox--checked.sapphire-checkbox--error:active .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box,.sapphire-checkbox--indeterminate.sapphire-checkbox--error.is-active .sapphire-checkbox__box,.sapphire-checkbox--indeterminate.sapphire-checkbox--error:active .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box{background:var(--sapphire-semantic-color-background-action-danger-active)}.sapphire-checkbox.is-focus .sapphire-checkbox__box,.sapphire-checkbox:not(.js-focus):has(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.is-disabled,.sapphire-checkbox__input:disabled{cursor:not-allowed}.sapphire-checkbox.is-disabled .sapphire-checkbox__box,.sapphire-checkbox.is-disabled .sapphire-checkbox__label{opacity:var(--sapphire-semantic-opacity-disabled)}:host{display:inline-flex}\n"] }]
|
|
2409
|
+
}, hostDirectives: [ThemeCheckDirective], standalone: false, template: "<label\n [for]=\"_inputId\"\n class=\"sapphire-checkbox\"\n [class.sapphire-checkbox--checked]=\"selected\"\n [class.sapphire-checkbox--indeterminate]=\"indeterminate\"\n [class.is-disabled]=\"disabled && !checkboxGroup?.disabled\"\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-container{display:flex;flex-flow:column}.sapphire-checkbox{font-family:var(--sapphire-semantic-font-name-default);display:inline-flex;position:relative;max-width:100%;cursor:pointer}.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-sm);font-size:var(--sapphire-semantic-size-font-control-lg);color:var(--sapphire-semantic-color-foreground-primary);line-height:var(--sapphire-semantic-size-height-control-xs);display:inline-flex;align-items:center;gap:var(--sapphire-semantic-size-spacing-3xs)}.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-foreground-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);margin-left:var(--sapphire-semantic-size-spacing-xs)}.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-foreground-on-negative-subtle);margin-top:var(--sapphire-semantic-size-spacing-2xs);margin-left:calc(var(--sapphire-semantic-size-spacing-sm) + 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-xs) + 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-sm) solid var(--sapphire-semantic-color-border-field-default);background:var(--sapphire-semantic-color-background-field);transition:all var(--sapphire-semantic-time-fade-quick) var(--sapphire-semantic-transitions-fade);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-4xs)}.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-foreground-action-on-select-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-border-negative-default)}.sapphire-checkbox--checked .sapphire-checkbox__box,.sapphire-checkbox--indeterminate .sapphire-checkbox__box{border-width:var(--sapphire-global-size-generic-0);background:var(--sapphire-semantic-color-background-action-select-default)}.sapphire-checkbox--checked.sapphire-checkbox--error .sapphire-checkbox__box,.sapphire-checkbox--indeterminate.sapphire-checkbox--error .sapphire-checkbox__box{background:var(--sapphire-semantic-color-background-action-danger-default)}.sapphire-checkbox:not(:active):not(.is-disabled):not(.is-active):not(.sapphire-checkbox--checked).is-hover .sapphire-checkbox__box,.sapphire-checkbox:not(:active):not(.is-disabled):not(.is-active):not(.sapphire-checkbox--checked):not(.js-hover):hover .sapphire-checkbox__box{border-color:var(--sapphire-semantic-color-border-field-hover)}.sapphire-checkbox--error:not(:active):not(.is-disabled):not(.is-active):not(.sapphire-checkbox--checked).is-hover .sapphire-checkbox__box,.sapphire-checkbox--error:not(:active):not(.is-disabled):not(.is-active):not(.sapphire-checkbox--checked):not(.js-hover):hover .sapphire-checkbox__box{border-color:var(--sapphire-semantic-color-border-negative-hover)}.sapphire-checkbox--checked:not(:active):not(.is-disabled):not(.is-active).is-hover .sapphire-checkbox__box,.sapphire-checkbox--checked:not(:active):not(.is-disabled):not(.is-active):not(.js-hover):hover .sapphire-checkbox__box,.sapphire-checkbox--indeterminate:not(:active):not(.is-disabled):not(.is-active).is-hover .sapphire-checkbox__box,.sapphire-checkbox--indeterminate:not(:active):not(.is-disabled):not(.is-active):not(.js-hover):hover .sapphire-checkbox__box{background-color:var(--sapphire-semantic-color-background-action-select-hover)}.sapphire-checkbox--checked.sapphire-checkbox--error:not(:active):not(.is-disabled):not(.is-active).is-hover .sapphire-checkbox__box,.sapphire-checkbox--checked.sapphire-checkbox--error:not(:active):not(.is-disabled):not(.is-active):not(.js-hover):hover .sapphire-checkbox__box,.sapphire-checkbox--indeterminate.sapphire-checkbox--error:not(:active):not(.is-disabled):not(.is-active).is-hover .sapphire-checkbox__box,.sapphire-checkbox--indeterminate.sapphire-checkbox--error:not(:active):not(.is-disabled):not(.is-active):not(.js-hover):hover .sapphire-checkbox__box{background:var(--sapphire-semantic-color-background-action-danger-hover)}.sapphire-checkbox:not(.sapphire-checkbox--checked).is-active .sapphire-checkbox__box,.sapphire-checkbox:not(.sapphire-checkbox--checked):active .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box{border-color:var(--sapphire-semantic-color-border-field-active)}.sapphire-checkbox--error:not(.sapphire-checkbox--checked).is-active .sapphire-checkbox__box,.sapphire-checkbox--error:not(.sapphire-checkbox--checked):active .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box{border-color:var(--sapphire-semantic-color-border-negative-active)}.sapphire-checkbox--checked.is-active .sapphire-checkbox__box,.sapphire-checkbox--checked:active .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box,.sapphire-checkbox--indeterminate.is-active .sapphire-checkbox__box,.sapphire-checkbox--indeterminate:active .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box{background:var(--sapphire-semantic-color-background-action-select-active)}.sapphire-checkbox--checked.sapphire-checkbox--error.is-active .sapphire-checkbox__box,.sapphire-checkbox--checked.sapphire-checkbox--error:active .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box,.sapphire-checkbox--indeterminate.sapphire-checkbox--error.is-active .sapphire-checkbox__box,.sapphire-checkbox--indeterminate.sapphire-checkbox--error:active .sapphire-checkbox__input:not(:disabled)~.sapphire-checkbox__box{background:var(--sapphire-semantic-color-background-action-danger-active)}.sapphire-checkbox.is-focus .sapphire-checkbox__box,.sapphire-checkbox:not(.js-focus):has(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.is-disabled,.sapphire-checkbox__input:disabled{cursor:not-allowed}.sapphire-checkbox.is-disabled,.sapphire-checkbox:has(:disabled){opacity:var(--sapphire-semantic-opacity-disabled)}:host{display:inline-flex}\n"] }]
|
|
3089
2410
|
}], ctorParameters: function () {
|
|
3090
2411
|
return [{ type: CheckboxGroupComponent, decorators: [{
|
|
3091
2412
|
type: Optional
|
|
@@ -4174,12 +3495,17 @@ class TextFieldInputDirective {
|
|
|
4174
3495
|
get style() {
|
|
4175
3496
|
return this.autofillStyle;
|
|
4176
3497
|
}
|
|
3498
|
+
get isDisabled() {
|
|
3499
|
+
var _a;
|
|
3500
|
+
return ((_a = this.ngControl) === null || _a === void 0 ? void 0 : _a.disabled) || coerceBooleanProperty(this.disabled);
|
|
3501
|
+
}
|
|
4177
3502
|
updateAutofillStyle() {
|
|
4178
3503
|
const { backgroundColor } = window.getComputedStyle(this._elementRef.nativeElement);
|
|
4179
3504
|
this.autofillStyle = `box-shadow: -100px 0 ${backgroundColor}, 100px 0 ${backgroundColor}`;
|
|
4180
3505
|
}
|
|
4181
|
-
constructor(_elementRef, field) {
|
|
3506
|
+
constructor(_elementRef, ngControl, field) {
|
|
4182
3507
|
this._elementRef = _elementRef;
|
|
3508
|
+
this.ngControl = ngControl;
|
|
4183
3509
|
this.field = field;
|
|
4184
3510
|
this.id = '';
|
|
4185
3511
|
this.disabled = false;
|
|
@@ -4190,7 +3516,7 @@ class TextFieldInputDirective {
|
|
|
4190
3516
|
this.textarea = element.nodeName.toLowerCase() === 'textarea';
|
|
4191
3517
|
}
|
|
4192
3518
|
}
|
|
4193
|
-
TextFieldInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TextFieldInputDirective, deps: [{ token: i0.ElementRef }, { token: FieldComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
3519
|
+
TextFieldInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TextFieldInputDirective, deps: [{ token: i0.ElementRef }, { token: i1$2.NgControl, optional: true, self: true }, { token: FieldComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
4194
3520
|
TextFieldInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: TextFieldInputDirective, selector: "[spTextFieldInput]", inputs: { id: "id", disabled: "disabled", required: "required" }, host: { listeners: { "input": "ngDoCheck($event.target.value)", "blur": "onBlur()" }, properties: { "id": "id", "attr.aria-describedby": "field?.error?.id || field?.note?.id", "attr.aria-invalid": "field?.hasError(this) ? true : null", "style": "this.style" }, classAttribute: "sapphire-text-field__input" }, hostDirectives: [{ directive: UseComponentStyles }], ngImport: i0 });
|
|
4195
3521
|
__decorate([
|
|
4196
3522
|
AutoId()
|
|
@@ -4212,7 +3538,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
4212
3538
|
standalone: false,
|
|
4213
3539
|
}]
|
|
4214
3540
|
}], ctorParameters: function () {
|
|
4215
|
-
return [{ type: i0.ElementRef }, { type:
|
|
3541
|
+
return [{ type: i0.ElementRef }, { type: i1$2.NgControl, decorators: [{
|
|
3542
|
+
type: Self
|
|
3543
|
+
}, {
|
|
3544
|
+
type: Optional
|
|
3545
|
+
}] }, { type: FieldComponent, decorators: [{
|
|
4216
3546
|
type: Optional
|
|
4217
3547
|
}] }];
|
|
4218
3548
|
}, propDecorators: { id: [{
|
|
@@ -4244,7 +3574,7 @@ class TextFieldComponent {
|
|
|
4244
3574
|
}
|
|
4245
3575
|
isDisabled() {
|
|
4246
3576
|
var _a;
|
|
4247
|
-
return coerceBooleanProperty((_a = this._inputDirective) === null || _a === void 0 ? void 0 : _a.
|
|
3577
|
+
return coerceBooleanProperty((_a = this._inputDirective) === null || _a === void 0 ? void 0 : _a.isDisabled);
|
|
4248
3578
|
}
|
|
4249
3579
|
getId() {
|
|
4250
3580
|
var _a;
|
|
@@ -4257,7 +3587,7 @@ TextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
|
|
|
4257
3587
|
provide: FieldControl,
|
|
4258
3588
|
useExisting: forwardRef(() => TextFieldComponent),
|
|
4259
3589
|
},
|
|
4260
|
-
], 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-
|
|
3590
|
+
], 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-md);cursor:text;color:var(--sapphire-semantic-color-foreground-primary);background:var(--sapphire-semantic-color-background-field);height:var(--sapphire-semantic-size-height-control-lg);font-family:var(--sapphire-semantic-font-name-default);font-size:var(--sapphire-semantic-size-font-control-lg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-text-field--md{border-radius:var(--sapphire-semantic-size-radius-sm);height:var(--sapphire-semantic-size-height-control-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);color:inherit;background: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-foreground-secondary)}.sapphire-text-field__input--align-right{text-align:right}.sapphire-text-field:not(.sapphire-text-field--multiline){gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-text-field--md:not(.sapphire-text-field--multiline){gap:var(--sapphire-semantic-size-spacing-xs)}.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-foreground-secondary);flex-shrink:0;z-index:1;margin-left:var(--sapphire-semantic-size-spacing-control-horizontal-md)}.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-foreground-secondary);flex-shrink:0;z-index:1;margin-right:var(--sapphire-semantic-size-spacing-control-horizontal-md)}.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-md);height:var(--sapphire-semantic-size-icon-md)}.sapphire-text-field--md .sapphire-text-field__prefix--icon,.sapphire-text-field--md .sapphire-text-field__postfix--icon{width:var(--sapphire-semantic-size-icon-sm);height:var(--sapphire-semantic-size-icon-sm)}.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-foreground-secondary);margin-left:auto}.sapphire-text-field__counter--error{color:var(--sapphire-semantic-color-foreground-negative)}.sapphire-text-field--error{outline:solid var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-negative-default)}.sapphire-text-field:has([disabled]){cursor:not-allowed;opacity:var(--sapphire-semantic-opacity-disabled)}.sapphire-text-field:not(:has([disabled])):not(.sapphire-text-field--error):not(.is-focus):not(:focus-within).is-hover,.sapphire-text-field:not(:has([disabled])):not(.sapphire-text-field--error):not(.is-focus):not(:focus-within):not(.js-hover):hover{outline:solid var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-field-hover)}.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-control-lg) inset var(--sapphire-semantic-color-background-field)!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-control-lg) inset var(--sapphire-semantic-color-background-field)!important}.sapphire-text-field__stepper{display:flex;flex-direction:column;justify-items:stretch;padding:var(--sapphire-semantic-size-spacing-4xs) calc(var(--sapphire-semantic-size-spacing-4xs) + var(--sapphire-semantic-size-border-sm));gap:var(--sapphire-semantic-size-spacing-4xs)}.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:var(--sapphire-semantic-transitions-fade);cursor:pointer;background:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-secondary-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:var(--sapphire-semantic-color-background-action-secondary-hover);color:var(--sapphire-semantic-color-foreground-action-on-secondary-hover)}.sapphire-text-field__stepper-button.is-active,.sapphire-text-field__stepper-button:active{background:var(--sapphire-semantic-color-background-action-secondary-active);color:var(--sapphire-semantic-color-foreground-action-on-secondary-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]" }] });
|
|
4261
3591
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TextFieldComponent, decorators: [{
|
|
4262
3592
|
type: Component,
|
|
4263
3593
|
args: [{ selector: 'sp-text-field', host: {
|
|
@@ -4270,7 +3600,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
4270
3600
|
provide: FieldControl,
|
|
4271
3601
|
useExisting: forwardRef(() => TextFieldComponent),
|
|
4272
3602
|
},
|
|
4273
|
-
], hostDirectives: [ThemeCheckDirective, UseComponentStylesOnHost], standalone: false, 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-
|
|
3603
|
+
], hostDirectives: [ThemeCheckDirective, UseComponentStylesOnHost], standalone: false, 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-md);cursor:text;color:var(--sapphire-semantic-color-foreground-primary);background:var(--sapphire-semantic-color-background-field);height:var(--sapphire-semantic-size-height-control-lg);font-family:var(--sapphire-semantic-font-name-default);font-size:var(--sapphire-semantic-size-font-control-lg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-text-field--md{border-radius:var(--sapphire-semantic-size-radius-sm);height:var(--sapphire-semantic-size-height-control-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);color:inherit;background: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-foreground-secondary)}.sapphire-text-field__input--align-right{text-align:right}.sapphire-text-field:not(.sapphire-text-field--multiline){gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-text-field--md:not(.sapphire-text-field--multiline){gap:var(--sapphire-semantic-size-spacing-xs)}.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-foreground-secondary);flex-shrink:0;z-index:1;margin-left:var(--sapphire-semantic-size-spacing-control-horizontal-md)}.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-foreground-secondary);flex-shrink:0;z-index:1;margin-right:var(--sapphire-semantic-size-spacing-control-horizontal-md)}.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-md);height:var(--sapphire-semantic-size-icon-md)}.sapphire-text-field--md .sapphire-text-field__prefix--icon,.sapphire-text-field--md .sapphire-text-field__postfix--icon{width:var(--sapphire-semantic-size-icon-sm);height:var(--sapphire-semantic-size-icon-sm)}.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-foreground-secondary);margin-left:auto}.sapphire-text-field__counter--error{color:var(--sapphire-semantic-color-foreground-negative)}.sapphire-text-field--error{outline:solid var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-negative-default)}.sapphire-text-field:has([disabled]){cursor:not-allowed;opacity:var(--sapphire-semantic-opacity-disabled)}.sapphire-text-field:not(:has([disabled])):not(.sapphire-text-field--error):not(.is-focus):not(:focus-within).is-hover,.sapphire-text-field:not(:has([disabled])):not(.sapphire-text-field--error):not(.is-focus):not(:focus-within):not(.js-hover):hover{outline:solid var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-field-hover)}.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-control-lg) inset var(--sapphire-semantic-color-background-field)!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-control-lg) inset var(--sapphire-semantic-color-background-field)!important}.sapphire-text-field__stepper{display:flex;flex-direction:column;justify-items:stretch;padding:var(--sapphire-semantic-size-spacing-4xs) calc(var(--sapphire-semantic-size-spacing-4xs) + var(--sapphire-semantic-size-border-sm));gap:var(--sapphire-semantic-size-spacing-4xs)}.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:var(--sapphire-semantic-transitions-fade);cursor:pointer;background:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-secondary-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:var(--sapphire-semantic-color-background-action-secondary-hover);color:var(--sapphire-semantic-color-foreground-action-on-secondary-hover)}.sapphire-text-field__stepper-button.is-active,.sapphire-text-field__stepper-button:active{background:var(--sapphire-semantic-color-background-action-secondary-active);color:var(--sapphire-semantic-color-foreground-action-on-secondary-active)}.sapphire-text-field--md.sapphire-text-field__stepper-button{width:var(--sapphire-semantic-size-icon-sm)}\n"] }]
|
|
4274
3604
|
}], ctorParameters: function () {
|
|
4275
3605
|
return [{ type: FieldComponent, decorators: [{
|
|
4276
3606
|
type: Optional
|
|
@@ -4649,7 +3979,7 @@ class CdkOptionScrollIssuePatch {
|
|
|
4649
3979
|
}
|
|
4650
3980
|
}
|
|
4651
3981
|
}
|
|
4652
|
-
CdkOptionScrollIssuePatch.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: CdkOptionScrollIssuePatch, deps: [{ token: i1$
|
|
3982
|
+
CdkOptionScrollIssuePatch.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: CdkOptionScrollIssuePatch, deps: [{ token: i1$3.CdkListbox }, { token: i1$3.CdkOption }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
4653
3983
|
CdkOptionScrollIssuePatch.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: CdkOptionScrollIssuePatch, isStandalone: true, selector: "[cdkOption]", ngImport: i0 });
|
|
4654
3984
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: CdkOptionScrollIssuePatch, decorators: [{
|
|
4655
3985
|
type: Directive,
|
|
@@ -4657,7 +3987,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
4657
3987
|
selector: '[cdkOption]',
|
|
4658
3988
|
standalone: true,
|
|
4659
3989
|
}]
|
|
4660
|
-
}], ctorParameters: function () { return [{ type: i1$
|
|
3990
|
+
}], ctorParameters: function () { return [{ type: i1$3.CdkListbox }, { type: i1$3.CdkOption }, { type: i0.ElementRef }]; } });
|
|
4661
3991
|
|
|
4662
3992
|
/**
|
|
4663
3993
|
* JS-based :active state for non-button clickable elements.
|
|
@@ -5013,7 +4343,7 @@ ListboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
|
|
|
5013
4343
|
useValue: { size: 'sm' },
|
|
5014
4344
|
},
|
|
5015
4345
|
ViewEncapsulationProvider,
|
|
5016
|
-
], 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 sapphire-listbox--selection\"\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>\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 ></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 ></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);--sapphire-listbox-spacing-outer: var(--sapphire-semantic-size-spacing-3xs);--sapphire-listbox-items-gap: var(--sapphire-semantic-size-spacing-4xs);padding:calc(var(--sapphire-listbox-spacing-outer) - var(--sapphire-listbox-items-gap)) 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-listbox-items-gap) var(--sapphire-listbox-spacing-outer);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-default);outline:none;cursor:pointer;text-decoration:none;min-width:max-content}.sapphire-listbox__item--danger,.sapphire-listbox__item--danger .sapphire-listbox__secondary-text{color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-default)}.sapphire-listbox__content{width:100%;max-width:calc(100vw - 2 * var(--sapphire-semantic-size-icon-sm));display:grid;grid-auto-flow:column;align-items:center;gap:var(--sapphire-semantic-size-spacing-xs);grid-template-columns:[left-icon] auto [text-content] 1fr [right-icon] auto;padding:calc(var(--sapphire-semantic-size-spacing-sm) - var(--sapphire-semantic-size-spacing-4xs)) var(--sapphire-semantic-size-spacing-sm);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:var(--sapphire-semantic-transitions-fade)}.sapphire-listbox--selection .sapphire-listbox__content{grid-template-columns:[left-icon] var(--sapphire-semantic-size-icon-sm) [text-content] 1fr [right-icon] auto}.sapphire-listbox__icon{line-height:0;align-self:start;padding-top:calc((var(--sapphire-semantic-size-font-body-sm) * var(--sapphire-semantic-size-line-height-md) - var(--sapphire-semantic-size-icon-sm)) / 2)}.sapphire-listbox__icon:last-child{grid-column:right-icon/span 1}.sapphire-listbox__icon:first-child{grid-column:left-icon/span 1}.sapphire-listbox__text-container{grid-column:text-content/span 1;line-height:var(--sapphire-semantic-size-line-height-md)}.sapphire-listbox:not(.sapphire-listbox--selection) .sapphire-listbox__text-container:first-child{grid-column:span 2}.sapphire-listbox__primary-text{font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-listbox__secondary-text{font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-body-xs);color:var(--sapphire-semantic-color-foreground-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-body-xs);color:var(--sapphire-semantic-color-foreground-primary);font-weight:var(--sapphire-semantic-font-weight-default-medium);padding:calc(var(--sapphire-semantic-size-spacing-md) - var(--sapphire-listbox-items-gap)) calc(var(--sapphire-semantic-size-spacing-sm) + var(--sapphire-listbox-spacing-outer)) var(--sapphire-semantic-size-spacing-3xs) calc(var(--sapphire-semantic-size-spacing-sm) + var(--sapphire-listbox-spacing-outer))}.sapphire-listbox__separator{height:var(--sapphire-semantic-size-border-sm);background:var(--sapphire-semantic-color-border-secondary);margin:var(--sapphire-listbox-items-gap) calc(var(--sapphire-semantic-size-spacing-sm) + var(--sapphire-listbox-spacing-outer))}.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-foreground-action-on-tertiary-hover);background:var(--sapphire-semantic-color-background-action-tertiary-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{background:var(--sapphire-semantic-color-background-action-danger-tertiary-hover)}.sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__secondary-text,.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__secondary-text{color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-hover)}.sapphire-listbox__item:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-semantic-color-foreground-action-on-tertiary-active);background:var(--sapphire-semantic-color-background-action-tertiary-active)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content{background:var(--sapphire-semantic-color-background-action-danger-tertiary-active)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__secondary-text{color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-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$
|
|
4346
|
+
], 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 sapphire-listbox--selection\"\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>\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 ></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 ></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);--sapphire-listbox-spacing-outer: var(--sapphire-semantic-size-spacing-3xs);--sapphire-listbox-items-gap: var(--sapphire-semantic-size-spacing-4xs);padding:calc(var(--sapphire-listbox-spacing-outer) - var(--sapphire-listbox-items-gap)) 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-listbox-items-gap) var(--sapphire-listbox-spacing-outer);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-default);outline:none;cursor:pointer;text-decoration:none;min-width:max-content}.sapphire-listbox__item--danger,.sapphire-listbox__item--danger .sapphire-listbox__secondary-text{color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-default)}.sapphire-listbox__content{width:100%;max-width:calc(100vw - 2 * var(--sapphire-semantic-size-icon-sm));display:grid;grid-auto-flow:column;align-items:center;gap:var(--sapphire-semantic-size-spacing-xs);grid-template-columns:[left-icon] auto [text-content] 1fr [right-icon] auto;padding:calc(var(--sapphire-semantic-size-spacing-sm) - var(--sapphire-semantic-size-spacing-4xs)) var(--sapphire-semantic-size-spacing-sm);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:var(--sapphire-semantic-transitions-fade)}.sapphire-listbox--selection .sapphire-listbox__content{grid-template-columns:[left-icon] var(--sapphire-semantic-size-icon-sm) [text-content] 1fr [right-icon] auto}.sapphire-listbox__icon{line-height:0;align-self:start;padding-top:calc((var(--sapphire-semantic-size-font-body-sm) * var(--sapphire-semantic-size-line-height-md) - var(--sapphire-semantic-size-icon-sm)) / 2)}.sapphire-listbox__icon:last-child{grid-column:right-icon/span 1}.sapphire-listbox__icon:first-child{grid-column:left-icon/span 1}.sapphire-listbox__text-container{grid-column:text-content/span 1;line-height:var(--sapphire-semantic-size-line-height-md)}.sapphire-listbox:not(.sapphire-listbox--selection) .sapphire-listbox__text-container:first-child{grid-column:span 2}.sapphire-listbox__primary-text{font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-body-sm)}.sapphire-listbox__secondary-text{font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-body-xs);color:var(--sapphire-semantic-color-foreground-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-body-xs);color:var(--sapphire-semantic-color-foreground-primary);font-weight:var(--sapphire-semantic-font-weight-default-medium);padding:calc(var(--sapphire-semantic-size-spacing-md) - var(--sapphire-listbox-items-gap)) calc(var(--sapphire-semantic-size-spacing-sm) + var(--sapphire-listbox-spacing-outer)) var(--sapphire-semantic-size-spacing-3xs) calc(var(--sapphire-semantic-size-spacing-sm) + var(--sapphire-listbox-spacing-outer))}.sapphire-listbox__separator{height:var(--sapphire-semantic-size-border-sm);background:var(--sapphire-semantic-color-border-secondary);margin:var(--sapphire-listbox-items-gap) calc(var(--sapphire-semantic-size-spacing-sm) + var(--sapphire-listbox-spacing-outer))}.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-foreground-action-on-tertiary-hover);background:var(--sapphire-semantic-color-background-action-tertiary-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{background:var(--sapphire-semantic-color-background-action-danger-tertiary-hover)}.sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled):not(.is-active).is-hover .sapphire-listbox__secondary-text,.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled):not(.js-hover):not(.is-active):hover .sapphire-listbox__secondary-text{color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-hover)}.sapphire-listbox__item:not(.is-disabled).is-active .sapphire-listbox__content{color:var(--sapphire-semantic-color-foreground-action-on-tertiary-active);background:var(--sapphire-semantic-color-background-action-tertiary-active)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content{background:var(--sapphire-semantic-color-background-action-danger-tertiary-active)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content,.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__secondary-text{color:var(--sapphire-semantic-color-foreground-action-on-danger-tertiary-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$3.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i1$3.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"] }] });
|
|
5017
4347
|
__decorate([
|
|
5018
4348
|
CoerceBoolean
|
|
5019
4349
|
], ListboxComponent.prototype, "disabled", void 0);
|
|
@@ -5739,7 +5069,7 @@ class HiddenSelectComponent {
|
|
|
5739
5069
|
}
|
|
5740
5070
|
}
|
|
5741
5071
|
HiddenSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: HiddenSelectComponent, deps: [{ token: SelectComponentBase }], target: i0.ɵɵFactoryTarget.Component });
|
|
5742
|
-
HiddenSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: HiddenSelectComponent, selector: "sp-hidden-select", ngImport: i0, template: "<ng-container *ngIf=\"_select._initialized\">\n <select\n *ngIf=\"_isMobile && !_select.multiple\"\n class=\"sapphire-select__native-select\"\n _spUseComponentStyles\n [disabled]=\"_select.disabled\"\n [attr.name]=\"_select.name\"\n [attr.autocomplete]=\"_select.autocomplete\"\n (change)=\"_onNativeSelectChange($event)\"\n >\n <option\n *ngFor=\"let option of _select.options\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled\"\n [selected]=\"_select.listboxValue.includes(option.value)\"\n >\n {{ option.label }}\n </option>\n </select>\n <div\n *ngIf=\"!_isMobile || _select.multiple\"\n aria-hidden=\"true\"\n spVisuallyHidden\n >\n <input\n type=\"text\"\n style=\"font-size: 16px\"\n [disabled]=\"_select.disabled\"\n [tabIndex]=\"_select.isFocused() || _select.isOpen() ? -1 : 0\"\n (focus)=\"_select.focus('keyboard')\"\n />\n <label>\n {{ _select.getLabelText() }}\n <select\n [attr.size]=\"_select.multiple ? _select.options.length : null\"\n [disabled]=\"_select.disabled\"\n tabindex=\"-1\"\n [multiple]=\"_select.multiple\"\n (change)=\"_onNativeSelectChange($event)\"\n [attr.name]=\"_select.name\"\n [attr.autocomplete]=\"_select.autocomplete\"\n >\n <option\n *ngFor=\"let option of _select.options\"\n [value]=\"option.value\"\n [selected]=\"_select.listboxValue.includes(option.value)\"\n [disabled]=\"option.disabled\"\n >\n {{ option.label }}\n </option>\n </select>\n </label>\n </div>\n</ng-container>\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:
|
|
5072
|
+
HiddenSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: HiddenSelectComponent, selector: "sp-hidden-select", ngImport: i0, template: "<ng-container *ngIf=\"_select._initialized\">\n <select\n *ngIf=\"_isMobile && !_select.multiple\"\n class=\"sapphire-select__native-select\"\n _spUseComponentStyles\n [disabled]=\"_select.disabled\"\n [attr.name]=\"_select.name\"\n [attr.autocomplete]=\"_select.autocomplete\"\n (change)=\"_onNativeSelectChange($event)\"\n >\n <option\n *ngFor=\"let option of _select.options\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled\"\n [selected]=\"_select.listboxValue.includes(option.value)\"\n >\n {{ option.label }}\n </option>\n </select>\n <div\n *ngIf=\"!_isMobile || _select.multiple\"\n aria-hidden=\"true\"\n spVisuallyHidden\n >\n <input\n type=\"text\"\n style=\"font-size: 16px\"\n [disabled]=\"_select.disabled\"\n [tabIndex]=\"_select.isFocused() || _select.isOpen() ? -1 : 0\"\n (focus)=\"_select.focus('keyboard')\"\n />\n <label>\n {{ _select.getLabelText() }}\n <select\n [attr.size]=\"_select.multiple ? _select.options.length : null\"\n [disabled]=\"_select.disabled\"\n tabindex=\"-1\"\n [multiple]=\"_select.multiple\"\n (change)=\"_onNativeSelectChange($event)\"\n [attr.name]=\"_select.name\"\n [attr.autocomplete]=\"_select.autocomplete\"\n >\n <option\n *ngFor=\"let option of _select.options\"\n [value]=\"option.value\"\n [selected]=\"_select.listboxValue.includes(option.value)\"\n [disabled]=\"option.disabled\"\n >\n {{ option.label }}\n </option>\n </select>\n </label>\n </div>\n</ng-container>\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.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: VisuallyHiddenDirective, selector: "[spVisuallyHidden]", inputs: ["spVisuallyHidden"] }, { kind: "directive", type: UseComponentStyles, selector: "[_spUseComponentStyles]" }] });
|
|
5743
5073
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: HiddenSelectComponent, decorators: [{
|
|
5744
5074
|
type: Component,
|
|
5745
5075
|
args: [{ selector: 'sp-hidden-select', standalone: false, template: "<ng-container *ngIf=\"_select._initialized\">\n <select\n *ngIf=\"_isMobile && !_select.multiple\"\n class=\"sapphire-select__native-select\"\n _spUseComponentStyles\n [disabled]=\"_select.disabled\"\n [attr.name]=\"_select.name\"\n [attr.autocomplete]=\"_select.autocomplete\"\n (change)=\"_onNativeSelectChange($event)\"\n >\n <option\n *ngFor=\"let option of _select.options\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled\"\n [selected]=\"_select.listboxValue.includes(option.value)\"\n >\n {{ option.label }}\n </option>\n </select>\n <div\n *ngIf=\"!_isMobile || _select.multiple\"\n aria-hidden=\"true\"\n spVisuallyHidden\n >\n <input\n type=\"text\"\n style=\"font-size: 16px\"\n [disabled]=\"_select.disabled\"\n [tabIndex]=\"_select.isFocused() || _select.isOpen() ? -1 : 0\"\n (focus)=\"_select.focus('keyboard')\"\n />\n <label>\n {{ _select.getLabelText() }}\n <select\n [attr.size]=\"_select.multiple ? _select.options.length : null\"\n [disabled]=\"_select.disabled\"\n tabindex=\"-1\"\n [multiple]=\"_select.multiple\"\n (change)=\"_onNativeSelectChange($event)\"\n [attr.name]=\"_select.name\"\n [attr.autocomplete]=\"_select.autocomplete\"\n >\n <option\n *ngFor=\"let option of _select.options\"\n [value]=\"option.value\"\n [selected]=\"_select.listboxValue.includes(option.value)\"\n [disabled]=\"option.disabled\"\n >\n {{ option.label }}\n </option>\n </select>\n </label>\n </div>\n</ng-container>\n" }]
|
|
@@ -6037,7 +5367,7 @@ SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
|
|
|
6037
5367
|
provide: FieldControl,
|
|
6038
5368
|
useExisting: forwardRef(() => SelectComponent),
|
|
6039
5369
|
},
|
|
6040
|
-
], 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 [trapFocus]=\"!searchable\"\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 >\n </sp-listbox>\n </sp-popover>\n</ng-template>\n", styles: [".sapphire-select{position:relative;display:block;color:var(--sapphire-semantic-color-foreground-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-control-lg);box-sizing:border-box;cursor:pointer;padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-lg);border:none;background:var(--sapphire-semantic-color-background-field);width:100%;outline:0;text-align:left;color:inherit;font-family:inherit;box-shadow:inset 0 0 0 var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-field-default);border-radius:var(--sapphire-semantic-size-radius-
|
|
5370
|
+
], 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 [trapFocus]=\"!searchable\"\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 >\n </sp-listbox>\n </sp-popover>\n</ng-template>\n", styles: [".sapphire-select{position:relative;display:block;color:var(--sapphire-semantic-color-foreground-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-control-lg);box-sizing:border-box;cursor:pointer;padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-md) 0 var(--sapphire-semantic-size-spacing-control-horizontal-lg);border:none;background:var(--sapphire-semantic-color-background-field);width:100%;outline:0;text-align:left;color:inherit;font-family:inherit;box-shadow:inset 0 0 0 var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-field-default);border-radius:var(--sapphire-semantic-size-radius-md);gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-select--md .sapphire-select__button{border-radius:var(--sapphire-semantic-size-radius-sm);height:var(--sapphire-semantic-size-height-control-md);padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-md);gap:var(--sapphire-semantic-size-spacing-xs)}.sapphire-select__value{flex:1 0 0;min-width:0;font-size:var(--sapphire-semantic-size-font-control-lg);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-foreground-secondary);pointer-events:none}.sapphire-select__icon-container{line-height:0;width:var(--sapphire-semantic-size-icon-md);height:var(--sapphire-semantic-size-icon-md)}.sapphire-select--md .sapphire-select__icon-container{width:var(--sapphire-semantic-size-icon-sm);height:var(--sapphire-semantic-size-icon-sm)}.sapphire-select__prefix{display:inherit;font-size:var(--sapphire-semantic-size-font-control-lg);color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-select:not(.sapphire-select--md) .sapphire-select__button:has(.sapphire-select__prefix){padding-left:var(--sapphire-semantic-size-spacing-control-horizontal-md)}.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-foreground-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-negative-default)}.sapphire-select:not(.sapphire-select--error):not(.is-focus):not(.is-disabled).is-hover .sapphire-select__button,.sapphire-select:not(.sapphire-select--error):not(.is-focus):not(.is-disabled):not(.js-hover):hover .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-field-hover)}.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-negative-default)}.sapphire-select.is-disabled .sapphire-select__button{cursor:not-allowed;opacity:var(--sapphire-semantic-opacity-disabled)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: ListboxComponent, selector: "sp-listbox", inputs: ["selectedValues", "spListboxItems", "disabled", "multiple", "navigationWrapDisabled", "aria-label", "aria-labelledby", "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: i3.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" }] });
|
|
6041
5371
|
__decorate([
|
|
6042
5372
|
AutoId()
|
|
6043
5373
|
], SelectComponent.prototype, "_valueContainerId", void 0);
|
|
@@ -6067,7 +5397,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
6067
5397
|
'[attr.aria-label]': 'null',
|
|
6068
5398
|
'[attr.aria-labelledby]': 'null',
|
|
6069
5399
|
'[attr.placeholder]': 'null',
|
|
6070
|
-
}, hostDirectives: [UseComponentStylesOnHost], standalone: false, 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 [trapFocus]=\"!searchable\"\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 >\n </sp-listbox>\n </sp-popover>\n</ng-template>\n", styles: [".sapphire-select{position:relative;display:block;color:var(--sapphire-semantic-color-foreground-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-control-lg);box-sizing:border-box;cursor:pointer;padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-lg);border:none;background:var(--sapphire-semantic-color-background-field);width:100%;outline:0;text-align:left;color:inherit;font-family:inherit;box-shadow:inset 0 0 0 var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-field-default);border-radius:var(--sapphire-semantic-size-radius-
|
|
5400
|
+
}, hostDirectives: [UseComponentStylesOnHost], standalone: false, 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 [trapFocus]=\"!searchable\"\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 >\n </sp-listbox>\n </sp-popover>\n</ng-template>\n", styles: [".sapphire-select{position:relative;display:block;color:var(--sapphire-semantic-color-foreground-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-control-lg);box-sizing:border-box;cursor:pointer;padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-md) 0 var(--sapphire-semantic-size-spacing-control-horizontal-lg);border:none;background:var(--sapphire-semantic-color-background-field);width:100%;outline:0;text-align:left;color:inherit;font-family:inherit;box-shadow:inset 0 0 0 var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-field-default);border-radius:var(--sapphire-semantic-size-radius-md);gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-select--md .sapphire-select__button{border-radius:var(--sapphire-semantic-size-radius-sm);height:var(--sapphire-semantic-size-height-control-md);padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-md);gap:var(--sapphire-semantic-size-spacing-xs)}.sapphire-select__value{flex:1 0 0;min-width:0;font-size:var(--sapphire-semantic-size-font-control-lg);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-foreground-secondary);pointer-events:none}.sapphire-select__icon-container{line-height:0;width:var(--sapphire-semantic-size-icon-md);height:var(--sapphire-semantic-size-icon-md)}.sapphire-select--md .sapphire-select__icon-container{width:var(--sapphire-semantic-size-icon-sm);height:var(--sapphire-semantic-size-icon-sm)}.sapphire-select__prefix{display:inherit;font-size:var(--sapphire-semantic-size-font-control-lg);color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-select:not(.sapphire-select--md) .sapphire-select__button:has(.sapphire-select__prefix){padding-left:var(--sapphire-semantic-size-spacing-control-horizontal-md)}.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-foreground-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-negative-default)}.sapphire-select:not(.sapphire-select--error):not(.is-focus):not(.is-disabled).is-hover .sapphire-select__button,.sapphire-select:not(.sapphire-select--error):not(.is-focus):not(.is-disabled):not(.js-hover):hover .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-field-hover)}.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-negative-default)}.sapphire-select.is-disabled .sapphire-select__button{cursor:not-allowed;opacity:var(--sapphire-semantic-opacity-disabled)}\n"] }]
|
|
6071
5401
|
}], ctorParameters: function () {
|
|
6072
5402
|
return [{ type: SelectValueHolder }, { type: IconRegistry }, { type: i3.FocusMonitor }, { type: i3.InputModalityDetector }, { type: FieldComponent, decorators: [{
|
|
6073
5403
|
type: Optional
|
|
@@ -6172,7 +5502,7 @@ SelectButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
|
|
|
6172
5502
|
useExisting: forwardRef(() => SelectButtonComponent),
|
|
6173
5503
|
},
|
|
6174
5504
|
ViewEncapsulationProvider,
|
|
6175
|
-
], 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: ["spSelectButton"], 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 >\n </sp-listbox>\n </sp-popover>\n </ng-template>\n</div>\n", styles: [".sapphire-select{position:relative;display:block;color:var(--sapphire-semantic-color-foreground-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-control-lg);box-sizing:border-box;cursor:pointer;padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-lg);border:none;background:var(--sapphire-semantic-color-background-field);width:100%;outline:0;text-align:left;color:inherit;font-family:inherit;box-shadow:inset 0 0 0 var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-field-default);border-radius:var(--sapphire-semantic-size-radius-
|
|
5505
|
+
], 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: ["spSelectButton"], 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 >\n </sp-listbox>\n </sp-popover>\n </ng-template>\n</div>\n", styles: [".sapphire-select{position:relative;display:block;color:var(--sapphire-semantic-color-foreground-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-control-lg);box-sizing:border-box;cursor:pointer;padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-md) 0 var(--sapphire-semantic-size-spacing-control-horizontal-lg);border:none;background:var(--sapphire-semantic-color-background-field);width:100%;outline:0;text-align:left;color:inherit;font-family:inherit;box-shadow:inset 0 0 0 var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-field-default);border-radius:var(--sapphire-semantic-size-radius-md);gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-select--md .sapphire-select__button{border-radius:var(--sapphire-semantic-size-radius-sm);height:var(--sapphire-semantic-size-height-control-md);padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-md);gap:var(--sapphire-semantic-size-spacing-xs)}.sapphire-select__value{flex:1 0 0;min-width:0;font-size:var(--sapphire-semantic-size-font-control-lg);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-foreground-secondary);pointer-events:none}.sapphire-select__icon-container{line-height:0;width:var(--sapphire-semantic-size-icon-md);height:var(--sapphire-semantic-size-icon-md)}.sapphire-select--md .sapphire-select__icon-container{width:var(--sapphire-semantic-size-icon-sm);height:var(--sapphire-semantic-size-icon-sm)}.sapphire-select__prefix{display:inherit;font-size:var(--sapphire-semantic-size-font-control-lg);color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-select:not(.sapphire-select--md) .sapphire-select__button:has(.sapphire-select__prefix){padding-left:var(--sapphire-semantic-size-spacing-control-horizontal-md)}.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-foreground-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-negative-default)}.sapphire-select:not(.sapphire-select--error):not(.is-focus):not(.is-disabled).is-hover .sapphire-select__button,.sapphire-select:not(.sapphire-select--error):not(.is-focus):not(.is-disabled):not(.js-hover):hover .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-field-hover)}.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-negative-default)}.sapphire-select.is-disabled .sapphire-select__button{cursor:not-allowed;opacity:var(--sapphire-semantic-opacity-disabled)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: ListboxComponent, selector: "sp-listbox", inputs: ["selectedValues", "spListboxItems", "disabled", "multiple", "navigationWrapDisabled", "aria-label", "aria-labelledby", "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: i3.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", "tabindex"] }, { kind: "directive", type: ButtonIconDirective, selector: "[spButtonIcon]" }, { kind: "component", type: HiddenSelectComponent, selector: "sp-hidden-select" }] });
|
|
6176
5506
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SelectButtonComponent, decorators: [{
|
|
6177
5507
|
type: Component,
|
|
6178
5508
|
args: [{ selector: 'sp-select-button', exportAs: 'spSelectButton', providers: [
|
|
@@ -6189,7 +5519,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
6189
5519
|
], host: {
|
|
6190
5520
|
'[attr.aria-label]': 'null',
|
|
6191
5521
|
'[attr.aria-labelledby]': 'null',
|
|
6192
|
-
}, standalone: false, 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 >\n </sp-listbox>\n </sp-popover>\n </ng-template>\n</div>\n", styles: [".sapphire-select{position:relative;display:block;color:var(--sapphire-semantic-color-foreground-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-control-lg);box-sizing:border-box;cursor:pointer;padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-lg);border:none;background:var(--sapphire-semantic-color-background-field);width:100%;outline:0;text-align:left;color:inherit;font-family:inherit;box-shadow:inset 0 0 0 var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-field-default);border-radius:var(--sapphire-semantic-size-radius-
|
|
5522
|
+
}, standalone: false, 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 >\n </sp-listbox>\n </sp-popover>\n </ng-template>\n</div>\n", styles: [".sapphire-select{position:relative;display:block;color:var(--sapphire-semantic-color-foreground-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-control-lg);box-sizing:border-box;cursor:pointer;padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-md) 0 var(--sapphire-semantic-size-spacing-control-horizontal-lg);border:none;background:var(--sapphire-semantic-color-background-field);width:100%;outline:0;text-align:left;color:inherit;font-family:inherit;box-shadow:inset 0 0 0 var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-field-default);border-radius:var(--sapphire-semantic-size-radius-md);gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-select--md .sapphire-select__button{border-radius:var(--sapphire-semantic-size-radius-sm);height:var(--sapphire-semantic-size-height-control-md);padding:0 var(--sapphire-semantic-size-spacing-control-horizontal-md);gap:var(--sapphire-semantic-size-spacing-xs)}.sapphire-select__value{flex:1 0 0;min-width:0;font-size:var(--sapphire-semantic-size-font-control-lg);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-foreground-secondary);pointer-events:none}.sapphire-select__icon-container{line-height:0;width:var(--sapphire-semantic-size-icon-md);height:var(--sapphire-semantic-size-icon-md)}.sapphire-select--md .sapphire-select__icon-container{width:var(--sapphire-semantic-size-icon-sm);height:var(--sapphire-semantic-size-icon-sm)}.sapphire-select__prefix{display:inherit;font-size:var(--sapphire-semantic-size-font-control-lg);color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-select:not(.sapphire-select--md) .sapphire-select__button:has(.sapphire-select__prefix){padding-left:var(--sapphire-semantic-size-spacing-control-horizontal-md)}.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-foreground-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-negative-default)}.sapphire-select:not(.sapphire-select--error):not(.is-focus):not(.is-disabled).is-hover .sapphire-select__button,.sapphire-select:not(.sapphire-select--error):not(.is-focus):not(.is-disabled):not(.js-hover):hover .sapphire-select__button{box-shadow:inset 0 0 0 var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-field-hover)}.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-negative-default)}.sapphire-select.is-disabled .sapphire-select__button{cursor:not-allowed;opacity:var(--sapphire-semantic-opacity-disabled)}\n"] }]
|
|
6193
5523
|
}], ctorParameters: function () { return [{ type: SelectValueHolder }, { type: i3.FocusMonitor }, { type: IconRegistry }]; }, propDecorators: { size: [{
|
|
6194
5524
|
type: Input
|
|
6195
5525
|
}], variant: [{
|
|
@@ -6313,7 +5643,7 @@ class LinkComponent {
|
|
|
6313
5643
|
}
|
|
6314
5644
|
}
|
|
6315
5645
|
LinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: LinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6316
|
-
LinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: LinkComponent, isStandalone: true, selector: "a[sp-link]", inputs: { variant: "variant", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex" }, host: { listeners: { "click": "handleDisableInteraction($event)", "pointerdown": "handleDisableInteraction($event)", "mousedown": "handleDisableInteraction($event)", "keydown": "handleDisableInteraction($event)" }, properties: { "class.sapphire-link--primary": "variant === \"primary\"", "class.sapphire-link--secondary": "variant === \"secondary\"", "attr.tabindex": "disabled ? -1 : (tabindex || tabIndex)", "attr.aria-disabled": "disabled || null", "class.is-disabled": "disabled" }, classAttribute: "sapphire-link" }, hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [".sapphire-link{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:inline;font-family:var(--sapphire-semantic-font-name-default);cursor:pointer;border-radius:var(--sapphire-semantic-size-radius-xs)
|
|
5646
|
+
LinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: LinkComponent, isStandalone: true, selector: "a[sp-link]", inputs: { variant: "variant", disabled: "disabled", tabindex: "tabindex", tabIndex: "tabIndex" }, host: { listeners: { "click": "handleDisableInteraction($event)", "pointerdown": "handleDisableInteraction($event)", "mousedown": "handleDisableInteraction($event)", "keydown": "handleDisableInteraction($event)" }, properties: { "class.sapphire-link--primary": "variant === \"primary\"", "class.sapphire-link--secondary": "variant === \"secondary\"", "attr.tabindex": "disabled ? -1 : (tabindex || tabIndex)", "attr.aria-disabled": "disabled || null", "class.is-disabled": "disabled" }, classAttribute: "sapphire-link" }, hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [".sapphire-link{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:inline;font-family:var(--sapphire-semantic-font-name-default);cursor:pointer;border-radius:var(--sapphire-semantic-size-radius-xs);outline:none;color:var(--sapphire-semantic-color-foreground-action-link-default);text-decoration:underline;text-decoration-thickness:var(--sapphire-semantic-size-border-sm)}.sapphire-link.is-disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-link:not(.sapphire-link--secondary):not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-link:not(.sapphire-link--secondary):not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{color:var(--sapphire-semantic-color-foreground-action-link-hover)}.sapphire-link.is-focus,.sapphire-link:not(.js-focus):focus-visible{text-decoration-style:double}.sapphire-link:not(.sapphire-link--secondary).is-focus,.sapphire-link:not(.sapphire-link--secondary):not(.js-focus):focus-visible{color:var(--sapphire-semantic-color-foreground-action-link-default)}.sapphire-link:not(.sapphire-link--secondary):not(:disabled):not(.is-disabled).is-active,.sapphire-link:not(.sapphire-link--secondary):not(:disabled):not(.is-disabled):active,.sapphire-link:not(.sapphire-link--secondary):not(:disabled):not(.is-disabled):focus-visible:active{color:var(--sapphire-semantic-color-foreground-action-link-active)}.sapphire-link--secondary{color:var(--sapphire-semantic-color-foreground-primary)}\n"] });
|
|
6317
5647
|
__decorate([
|
|
6318
5648
|
CoerceBoolean
|
|
6319
5649
|
], LinkComponent.prototype, "disabled", void 0);
|
|
@@ -6326,7 +5656,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
6326
5656
|
'[attr.tabindex]': 'disabled ? -1 : (tabindex || tabIndex)',
|
|
6327
5657
|
'[attr.aria-disabled]': 'disabled || null',
|
|
6328
5658
|
'[class.is-disabled]': 'disabled',
|
|
6329
|
-
}, hostDirectives: [UseComponentStylesOnHost], styles: [".sapphire-link{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:inline;font-family:var(--sapphire-semantic-font-name-default);cursor:pointer;border-radius:var(--sapphire-semantic-size-radius-xs)
|
|
5659
|
+
}, hostDirectives: [UseComponentStylesOnHost], styles: [".sapphire-link{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:inline;font-family:var(--sapphire-semantic-font-name-default);cursor:pointer;border-radius:var(--sapphire-semantic-size-radius-xs);outline:none;color:var(--sapphire-semantic-color-foreground-action-link-default);text-decoration:underline;text-decoration-thickness:var(--sapphire-semantic-size-border-sm)}.sapphire-link.is-disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-link:not(.sapphire-link--secondary):not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-link:not(.sapphire-link--secondary):not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{color:var(--sapphire-semantic-color-foreground-action-link-hover)}.sapphire-link.is-focus,.sapphire-link:not(.js-focus):focus-visible{text-decoration-style:double}.sapphire-link:not(.sapphire-link--secondary).is-focus,.sapphire-link:not(.sapphire-link--secondary):not(.js-focus):focus-visible{color:var(--sapphire-semantic-color-foreground-action-link-default)}.sapphire-link:not(.sapphire-link--secondary):not(:disabled):not(.is-disabled).is-active,.sapphire-link:not(.sapphire-link--secondary):not(:disabled):not(.is-disabled):active,.sapphire-link:not(.sapphire-link--secondary):not(:disabled):not(.is-disabled):focus-visible:active{color:var(--sapphire-semantic-color-foreground-action-link-active)}.sapphire-link--secondary{color:var(--sapphire-semantic-color-foreground-primary)}\n"] }]
|
|
6330
5660
|
}], propDecorators: { variant: [{
|
|
6331
5661
|
type: Input
|
|
6332
5662
|
}], disabled: [{
|
|
@@ -7081,10 +6411,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
7081
6411
|
class ThemeDefault {
|
|
7082
6412
|
}
|
|
7083
6413
|
ThemeDefault.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ThemeDefault, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7084
|
-
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:transparent}to{background:var(--sapphire-semantic-color-background-backdrop)}}@keyframes backdrop-fade-out{0%{background:var(--sapphire-semantic-color-background-backdrop)}to{background: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:var(--sapphire-semantic-transitions-fade);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--tertiary,:host ::ng-deep .sapphire-theme--tertiary,.sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-semantic-size-breakpoint-xl: 1400px;--sapphire-semantic-size-breakpoint-lg: 1200px;--sapphire-semantic-size-breakpoint-md: 960px;--sapphire-semantic-size-breakpoint-sm: 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-default-bold: 600;--sapphire-semantic-font-weight-default-medium: 500;--sapphire-semantic-font-weight-default-regular: 400;--sapphire-semantic-font-weight-default-light: 300;--sapphire-global-transitions-ease-in: cubic-bezier(0, 0, 0, 1);--sapphire-global-transitions-ease-in-out-quick: cubic-bezier(.5, 0, 0, 1);--sapphire-global-transitions-ease-in-out: cubic-bezier(.7, 0, .2, 1);--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.3;--sapphire-global-size-font-300: 3rem;--sapphire-global-size-font-250: 2.5rem;--sapphire-global-size-font-200: 2rem;--sapphire-global-size-font-175: 1.75rem;--sapphire-global-size-font-163: 1.625rem;--sapphire-global-size-font-150: 1.5rem;--sapphire-global-size-font-125: 1.25rem;--sapphire-global-size-font-112: 1.125rem;--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-110: 2.75rem;--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-40: 16px;--sapphire-global-size-static-30: 12px;--sapphire-global-size-static-20: 8px;--sapphire-global-size-static-15: 6px;--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-md: 0px 0px 0px 1px hsl(212 63% 12% / .1) inset, 0px 4px 24px 0px hsl(212 63% 12% / .04);--sapphire-global-opacity-30: .3;--sapphire-global-font-danske-name: \"Danske\";--sapphire-global-color-secondary-green-4: hsl(137 64% 78%);--sapphire-global-color-secondary-green-3: hsl(152 42% 56%);--sapphire-global-color-secondary-green-2: hsl(152 44% 38%);--sapphire-global-color-secondary-green-1: hsl(158 58% 19%);--sapphire-global-color-secondary-copper-4: hsl(23 69% 75%);--sapphire-global-color-secondary-copper-3: hsl(19 61% 60%);--sapphire-global-color-secondary-copper-2: hsl(18 57% 41%);--sapphire-global-color-secondary-copper-1: hsl(12 65% 23%);--sapphire-global-color-secondary-gold-4: hsl(45 63% 69%);--sapphire-global-color-secondary-gold-3: hsl(39 49% 54%);--sapphire-global-color-secondary-gold-2: hsl(37 57% 36%);--sapphire-global-color-secondary-gold-1: hsl(37 68% 19%);--sapphire-global-color-secondary-blue-4: hsl(211 72% 72%);--sapphire-global-color-secondary-blue-3: hsl(214 59% 62%);--sapphire-global-color-secondary-blue-2: hsl(218 51% 52%);--sapphire-global-color-secondary-blue-1: hsl(212 100% 24%);--sapphire-global-color-alpha-yellow-950: hsl(23 100% 13% / .987);--sapphire-global-color-alpha-yellow-900: hsl(25 100% 19% / .963);--sapphire-global-color-alpha-yellow-800: hsl(27 100% 25% / .959);--sapphire-global-color-alpha-yellow-700: hsl(31 100% 32% / .979);--sapphire-global-color-alpha-yellow-600: hsl(36 100% 39% / .987);--sapphire-global-color-alpha-yellow-500: hsl(41 100% 45% / .975);--sapphire-global-color-alpha-yellow-400: hsl(46 100% 48% / .897);--sapphire-global-color-alpha-yellow-300: hsl(46 100% 49% / .697);--sapphire-global-color-alpha-yellow-200: hsl(51 100% 48% / .47);--sapphire-global-color-alpha-yellow-100: hsl(51 100% 47% / .235);--sapphire-global-color-alpha-yellow-50: hsl(53 100% 50% / .161);--sapphire-global-color-alpha-green-950: hsl(129 100% 4% / .944);--sapphire-global-color-alpha-green-900: hsl(130 100% 6% / .916);--sapphire-global-color-alpha-green-800: hsl(128 100% 8% / .885);--sapphire-global-color-alpha-green-700: hsl(128 100% 11% / .862);--sapphire-global-color-alpha-green-600: hsl(127 100% 17% / .842);--sapphire-global-color-alpha-green-500: hsl(124 100% 21% / .822);--sapphire-global-color-alpha-green-400: hsl(122 100% 28% / .701);--sapphire-global-color-alpha-green-300: hsl(124 100% 28% / .56);--sapphire-global-color-alpha-green-200: hsl(124 100% 30% / .388);--sapphire-global-color-alpha-green-100: hsl(125 100% 11% / .231);--sapphire-global-color-alpha-green-50: hsl(129 100% 25% / .11);--sapphire-global-color-alpha-red-950: hsl(358 100% 6% / .957);--sapphire-global-color-alpha-red-900: hsl(1 100% 10% / .92);--sapphire-global-color-alpha-red-800: hsl(359 100% 17% / .877);--sapphire-global-color-alpha-red-700: hsl(359 100% 24% / .842);--sapphire-global-color-alpha-red-600: hsl(359 100% 32% / .819);--sapphire-global-color-alpha-red-500: hsl(0 100% 39% / .815);--sapphire-global-color-alpha-red-400: hsl(1 100% 47% / .65);--sapphire-global-color-alpha-red-300: hsl(1 100% 48% / .501);--sapphire-global-color-alpha-red-200: hsl(2 100% 50% / .325);--sapphire-global-color-alpha-red-100: hsl(4 100% 50% / .169);--sapphire-global-color-alpha-red-50: hsl(0 98% 45% / .079);--sapphire-global-color-alpha-blue-500: hsl(215 99% 45% / .995);--sapphire-global-color-alpha-blue-400: hsl(216 100% 50% / .74);--sapphire-global-color-alpha-blue-300: hsl(215 100% 50% / .513);--sapphire-global-color-alpha-blue-200: hsl(214 100% 50% / .349);--sapphire-global-color-alpha-blue-100: hsl(214 100% 50% / .2);--sapphire-global-color-alpha-blue-50: hsl(219 100% 50% / .091);--sapphire-global-color-alpha-sand-950: hsl(40 100% 3% / .905);--sapphire-global-color-alpha-sand-900: hsl(41 100% 5% / .858);--sapphire-global-color-alpha-sand-800: hsl(43 100% 7% / .803);--sapphire-global-color-alpha-sand-700: hsl(42 100% 9% / .74);--sapphire-global-color-alpha-sand-600: hsl(42 100% 12% / .678);--sapphire-global-color-alpha-sand-500: hsl(43 100% 12% / .548);--sapphire-global-color-alpha-sand-400: hsl(39 100% 17% / .411);--sapphire-global-color-alpha-sand-300: hsl(48 100% 17% / .294);--sapphire-global-color-alpha-sand-200: hsl(48 100% 13% / .153);--sapphire-global-color-alpha-sand-100: hsl(60 100% 10% / .098);--sapphire-global-color-alpha-sand-50: hsl(60 100% 10% / .043);--sapphire-global-color-alpha-gray-900: hsl(211 63% 13% / .952);--sapphire-global-color-alpha-gray-800: hsl(213 100% 9% / .909);--sapphire-global-color-alpha-gray-700: hsl(213 100% 11% / .819);--sapphire-global-color-alpha-gray-600: hsl(212 100% 13% / .74);--sapphire-global-color-alpha-gray-500: hsl(212 100% 15% / .603);--sapphire-global-color-alpha-gray-400: hsl(211 100% 18% / .455);--sapphire-global-color-alpha-gray-300: hsl(211 100% 20% / .282);--sapphire-global-color-alpha-gray-200: hsl(210 100% 21% / .188);--sapphire-global-color-alpha-gray-100: hsl(208 98% 23% / .114);--sapphire-global-color-alpha-gray-50: hsl(206 100% 25% / .055);--sapphire-global-color-yellow-950: hsl(24 91% 14%);--sapphire-global-color-yellow-900: hsl(25 84% 22%);--sapphire-global-color-yellow-800: hsl(27 86% 28%);--sapphire-global-color-yellow-700: hsl(31 94% 33%);--sapphire-global-color-yellow-600: hsl(36 97% 40%);--sapphire-global-color-yellow-500: hsl(41 95% 46%);--sapphire-global-color-yellow-400: hsl(46 94% 54%);--sapphire-global-color-yellow-300: hsl(46 97% 65%);--sapphire-global-color-yellow-200: hsl(51 92% 75%);--sapphire-global-color-yellow-100: hsl(51 90% 88%);--sapphire-global-color-yellow-50: hsl(53 100% 92%);--sapphire-global-color-green-950: hsl(129 42% 9%);--sapphire-global-color-green-900: hsl(131 40% 14%);--sapphire-global-color-green-800: hsl(128 38% 18%);--sapphire-global-color-green-700: hsl(129 41% 23%);--sapphire-global-color-green-600: hsl(127 47% 30%);--sapphire-global-color-green-500: hsl(125 50% 35%);--sapphire-global-color-green-400: hsl(122 39% 49%);--sapphire-global-color-green-300: hsl(124 39% 60%);--sapphire-global-color-green-200: hsl(124 42% 73%);--sapphire-global-color-green-100: hsl(125 46% 84%);--sapphire-global-color-green-50: hsl(129 33% 92%);--sapphire-global-color-red-950: hsl(358 57% 10%);--sapphire-global-color-red-900: hsl(1 53% 17%);--sapphire-global-color-red-800: hsl(358 55% 27%);--sapphire-global-color-red-700: hsl(359 57% 36%);--sapphire-global-color-red-600: hsl(359 59% 44%);--sapphire-global-color-red-500: hsl(0 65% 51%);--sapphire-global-color-red-400: hsl(1 90% 66%);--sapphire-global-color-red-300: hsl(1 92% 74%);--sapphire-global-color-red-200: hsl(2 100% 84%);--sapphire-global-color-red-100: hsl(4 100% 92%);--sapphire-global-color-red-50: hsl(0 82% 96%);--sapphire-global-color-blue-950: hsl(210 100% 9%);--sapphire-global-color-blue-900: hsl(210 100% 14%);--sapphire-global-color-blue-800: hsl(211 100% 21%);--sapphire-global-color-blue-700: hsl(211 100% 28%);--sapphire-global-color-blue-600: hsl(212 100% 37%);--sapphire-global-color-blue-500: hsl(218 92% 49%);--sapphire-global-color-blue-400: hsl(216 100% 63%);--sapphire-global-color-blue-300: hsl(215 100% 74%);--sapphire-global-color-blue-200: hsl(214 100% 83%);--sapphire-global-color-blue-100: hsl(214 100% 90%);--sapphire-global-color-blue-50: hsl(219 100% 95%);--sapphire-global-color-sand-950: hsl(39 23% 12%);--sapphire-global-color-sand-900: hsl(41 23% 18%);--sapphire-global-color-sand-800: hsl(43 22% 25%);--sapphire-global-color-sand-700: hsl(42 20% 33%);--sapphire-global-color-sand-600: hsl(42 20% 40%);--sapphire-global-color-sand-500: hsl(43 14% 52%);--sapphire-global-color-sand-400: hsl(39 20% 66%);--sapphire-global-color-sand-300: hsl(48 20% 75%);--sapphire-global-color-sand-200: hsl(48 15% 87%);--sapphire-global-color-sand-100: hsl(60 11% 91%);--sapphire-global-color-sand-50: hsl(60 9% 96%);--sapphire-global-color-gray-950: hsl(210 94% 7%);--sapphire-global-color-gray-900: hsl(211 64% 13%);--sapphire-global-color-gray-800: hsl(213 48% 17%);--sapphire-global-color-gray-700: hsl(212 33% 27%);--sapphire-global-color-gray-600: hsl(212 27% 35%);--sapphire-global-color-gray-500: hsl(211 19% 49%);--sapphire-global-color-gray-400: hsl(211 22% 63%);--sapphire-global-color-gray-300: hsl(211 22% 77%);--sapphire-global-color-gray-200: hsl(210 26% 85%);--sapphire-global-color-gray-100: hsl(208 29% 91%);--sapphire-global-color-gray-50: hsl(206 33% 96%);--sapphire-global-color-transparent: hsla(0, 0%, 100%, 0);--sapphire-global-color-black: hsla(0, 0%, 0%, 1);--sapphire-global-color-white: hsla(0, 0%, 100%, 1);--sapphire-semantic-transitions-fade: var(--sapphire-global-transitions-ease-in);--sapphire-semantic-transitions-dynamic: var(--sapphire-global-transitions-ease-in-out-quick);--sapphire-semantic-transitions-standard: var(--sapphire-global-transitions-ease-in-out);--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-6xl: var(--sapphire-global-size-generic-180);--sapphire-semantic-size-spacing-5xl: var(--sapphire-global-size-generic-160);--sapphire-semantic-size-spacing-4xl: var(--sapphire-global-size-generic-120);--sapphire-semantic-size-spacing-3xl: var(--sapphire-global-size-generic-100);--sapphire-semantic-size-spacing-2xl: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-spacing-xl: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-spacing-lg: var(--sapphire-global-size-generic-50);--sapphire-semantic-size-spacing-md: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-spacing-sm: var(--sapphire-global-size-generic-30);--sapphire-semantic-size-spacing-xs: var(--sapphire-global-size-generic-20);--sapphire-semantic-size-spacing-2xs: var(--sapphire-global-size-generic-15);--sapphire-semantic-size-spacing-3xs: var(--sapphire-global-size-generic-10);--sapphire-semantic-size-spacing-4xs: 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-heading-2xl: var(--sapphire-global-size-font-175);--sapphire-semantic-size-font-heading-xl: var(--sapphire-global-size-font-150);--sapphire-semantic-size-font-heading-lg: var(--sapphire-global-size-font-125);--sapphire-semantic-size-font-heading-md: var(--sapphire-global-size-font-125);--sapphire-semantic-size-font-heading-sm: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-heading-xs: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-body-lg: var(--sapphire-global-size-font-112);--sapphire-semantic-size-font-body-md: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-body-sm: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-body-xs: var(--sapphire-global-size-font-75);--sapphire-semantic-size-radius-2xl: var(--sapphire-global-size-static-40);--sapphire-semantic-size-radius-xl: var(--sapphire-global-size-static-30);--sapphire-semantic-size-radius-lg: var(--sapphire-global-size-static-20);--sapphire-semantic-size-radius-md: var(--sapphire-global-size-static-15);--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-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-field: var(--sapphire-global-size-generic-750);--sapphire-semantic-size-height-box-md: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-height-control-4xl: var(--sapphire-global-size-generic-200);--sapphire-semantic-size-height-control-3xl: var(--sapphire-global-size-generic-180);--sapphire-semantic-size-height-control-2xl: var(--sapphire-global-size-generic-160);--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-30);--sapphire-semantic-font-name-default: var(--sapphire-global-font-danske-name);--sapphire-semantic-color-foreground-on-decorative-neutral: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-16: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-15: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-14: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-13: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-12: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-11: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-10: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-9: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-8: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-7: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-6: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-5: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-4: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-3: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-2: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-1: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-signature: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-warning-subtle: var(--sapphire-global-color-alpha-yellow-800);--sapphire-semantic-color-foreground-on-warning: var(--sapphire-global-color-alpha-yellow-900);--sapphire-semantic-color-foreground-on-positive: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-negative: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-accent: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-positive: var(--sapphire-global-color-alpha-green-500);--sapphire-semantic-color-foreground-warning: var(--sapphire-global-color-alpha-yellow-700);--sapphire-semantic-color-foreground-negative: var(--sapphire-global-color-alpha-red-500);--sapphire-semantic-color-foreground-accent: var(--sapphire-global-color-alpha-blue-500);--sapphire-semantic-color-foreground-secondary: color(from var(--sapphire-global-color-blue-900) xyz x y z / .64);--sapphire-semantic-color-foreground-secondary-alpha: .64;--sapphire-semantic-color-foreground-primary: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-background-decorative-neutral: var(--sapphire-global-color-alpha-sand-50);--sapphire-semantic-color-background-decorative-16: var(--sapphire-global-color-secondary-green-4);--sapphire-semantic-color-background-decorative-15: var(--sapphire-global-color-secondary-green-3);--sapphire-semantic-color-background-decorative-14: var(--sapphire-global-color-secondary-green-2);--sapphire-semantic-color-background-decorative-13: var(--sapphire-global-color-secondary-green-1);--sapphire-semantic-color-background-decorative-12: var(--sapphire-global-color-secondary-copper-4);--sapphire-semantic-color-background-decorative-11: var(--sapphire-global-color-secondary-copper-3);--sapphire-semantic-color-background-decorative-10: var(--sapphire-global-color-secondary-copper-2);--sapphire-semantic-color-background-decorative-9: var(--sapphire-global-color-secondary-copper-1);--sapphire-semantic-color-background-decorative-8: var(--sapphire-global-color-secondary-gold-4);--sapphire-semantic-color-background-decorative-7: var(--sapphire-global-color-secondary-gold-3);--sapphire-semantic-color-background-decorative-6: var(--sapphire-global-color-secondary-gold-2);--sapphire-semantic-color-background-decorative-5: var(--sapphire-global-color-secondary-gold-1);--sapphire-semantic-color-background-decorative-4: var(--sapphire-global-color-secondary-blue-4);--sapphire-semantic-color-background-decorative-3: var(--sapphire-global-color-secondary-blue-3);--sapphire-semantic-color-background-decorative-2: var(--sapphire-global-color-secondary-blue-2);--sapphire-semantic-color-background-decorative-1: var(--sapphire-global-color-secondary-blue-1);--sapphire-semantic-color-background-popover: var(--sapphire-global-color-white);--sapphire-semantic-color-background-backdrop: color(from var(--sapphire-global-color-gray-950) xyz x y z / .6);--sapphire-semantic-color-background-backdrop-alpha: .6;--sapphire-semantic-color-background-surface: var(--sapphire-global-color-white);--sapphire-semantic-color-background-field: var(--sapphire-global-color-white);--sapphire-semantic-color-background-warning-subtle: var(--sapphire-global-color-alpha-yellow-50);--sapphire-semantic-color-background-positive-subtle: var(--sapphire-global-color-alpha-green-50);--sapphire-semantic-color-background-negative-subtle: var(--sapphire-global-color-alpha-red-50);--sapphire-semantic-color-background-accent-subtle: var(--sapphire-global-color-alpha-blue-50);--sapphire-semantic-color-background-neutral-subtle: var(--sapphire-global-color-alpha-sand-50);--sapphire-semantic-color-background-negative: var(--sapphire-global-color-red-500);--sapphire-semantic-color-background-warning: var(--sapphire-global-color-yellow-300);--sapphire-semantic-color-background-positive: var(--sapphire-global-color-green-500);--sapphire-semantic-color-background-accent: var(--sapphire-global-color-blue-500);--sapphire-semantic-color-background-signature: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-background-segmented-control-knob: var(--sapphire-global-color-white);--sapphire-semantic-color-background-segmented-control-track: var(--sapphire-global-color-alpha-sand-100);--sapphire-semantic-color-background-switch-default: var(--sapphire-global-color-alpha-sand-200);--sapphire-semantic-color-background-action-highlight: var(--sapphire-global-color-alpha-sand-50);--sapphire-semantic-color-background-action-select-tertiary-default: var(--sapphire-global-color-transparent);--sapphire-semantic-color-background-action-danger-tertiary-default: var(--sapphire-global-color-transparent);--sapphire-semantic-color-background-action-tertiary-default: var(--sapphire-global-color-transparent);--sapphire-semantic-color-background-action-secondary-default: var(--sapphire-global-color-alpha-sand-100);--sapphire-semantic-color-focus-ring: var(--sapphire-global-color-blue-400);--sapphire-semantic-color-border-negative-default: var(--sapphire-global-color-red-500);--sapphire-semantic-color-border-accent: var(--sapphire-global-color-blue-500);--sapphire-semantic-color-border-tertiary: color(from var(--sapphire-global-color-blue-900) xyz x y z / .06);--sapphire-semantic-color-border-tertiary-alpha: .06;--sapphire-semantic-color-border-secondary: color(from var(--sapphire-global-color-blue-900) xyz x y z / .08);--sapphire-semantic-color-border-secondary-alpha: .08;--sapphire-semantic-color-border-primary: color(from var(--sapphire-global-color-blue-900) xyz x y z / .16);--sapphire-semantic-color-border-primary-alpha: .16;--sapphire-semantic-color-state-border-active: color(from var(--sapphire-global-color-blue-900) xyz x y z / .2);--sapphire-semantic-color-state-border-active-alpha: .2;--sapphire-semantic-color-state-border-hover: color(from var(--sapphire-global-color-blue-900) xyz x y z / .12);--sapphire-semantic-color-state-border-hover-alpha: .12;--sapphire-semantic-color-state-negative-subtle-active: color(from var(--sapphire-global-color-red-500) xyz x y z / .1);--sapphire-semantic-color-state-negative-subtle-active-alpha: .1;--sapphire-semantic-color-state-negative-subtle-hover: color(from var(--sapphire-global-color-red-500) xyz x y z / .06);--sapphire-semantic-color-state-negative-subtle-hover-alpha: .06;--sapphire-semantic-color-state-negative-active: color(from var(--sapphire-global-color-red-900) xyz x y z / .2);--sapphire-semantic-color-state-negative-active-alpha: .2;--sapphire-semantic-color-state-negative-hover: color(from var(--sapphire-global-color-red-900) xyz x y z / .12);--sapphire-semantic-color-state-negative-hover-alpha: .12;--sapphire-semantic-color-state-neutral-ghost-active: color(from var(--sapphire-global-color-sand-900) xyz x y z / .1);--sapphire-semantic-color-state-neutral-ghost-active-alpha: .1;--sapphire-semantic-color-state-neutral-ghost-hover: color(from var(--sapphire-global-color-sand-900) xyz x y z / .06);--sapphire-semantic-color-state-neutral-ghost-hover-alpha: .06;--sapphire-semantic-color-state-neutral-active: color(from var(--sapphire-global-color-sand-900) xyz x y z / .1);--sapphire-semantic-color-state-neutral-active-alpha: .1;--sapphire-semantic-color-state-neutral-hover: color(from var(--sapphire-global-color-sand-900) xyz x y z / .06);--sapphire-semantic-color-state-neutral-hover-alpha: .06;--sapphire-semantic-color-state-accent-subtle-active: color(from var(--sapphire-global-color-blue-500) xyz x y z / .12);--sapphire-semantic-color-state-accent-subtle-active-alpha: .12;--sapphire-semantic-color-state-accent-subtle-hover: color(from var(--sapphire-global-color-blue-500) xyz x y z / .06);--sapphire-semantic-color-state-accent-subtle-hover-alpha: .06;--sapphire-semantic-color-state-accent-active: color(from var(--sapphire-global-color-blue-900) xyz x y z / .2);--sapphire-semantic-color-state-accent-active-alpha: .2;--sapphire-semantic-color-state-accent-hover: color(from var(--sapphire-global-color-blue-900) xyz x y z / .12);--sapphire-semantic-color-state-accent-hover-alpha: .12;--sapphire-global-color-alpha-blue-950: var(--sapphire-global-color-blue-950);--sapphire-global-color-alpha-blue-900: var(--sapphire-global-color-blue-900);--sapphire-global-color-alpha-blue-800: var(--sapphire-global-color-blue-800);--sapphire-global-color-alpha-blue-700: var(--sapphire-global-color-blue-700);--sapphire-global-color-alpha-blue-600: var(--sapphire-global-color-blue-600);--sapphire-global-color-alpha-gray-950: var(--sapphire-global-color-gray-950);--sapphire-semantic-size-spacing-container-horizontal-md: var(--sapphire-semantic-size-spacing-xl);--sapphire-semantic-size-spacing-container-horizontal-sm: var(--sapphire-semantic-size-spacing-sm);--sapphire-semantic-size-spacing-control-horizontal-lg: var(--sapphire-semantic-size-spacing-md);--sapphire-semantic-size-spacing-control-horizontal-md: var(--sapphire-semantic-size-spacing-sm);--sapphire-semantic-size-spacing-control-vertical-lg: var(--sapphire-semantic-size-spacing-sm);--sapphire-semantic-size-spacing-control-vertical-md: var(--sapphire-semantic-size-spacing-xs);--sapphire-semantic-size-spacing-control-vertical-sm: var(--sapphire-semantic-size-spacing-3xs);--sapphire-semantic-size-font-control-lg: var(--sapphire-semantic-size-font-body-md);--sapphire-semantic-size-font-control-md: var(--sapphire-semantic-size-font-body-sm);--sapphire-semantic-size-font-control-sm: var(--sapphire-semantic-size-font-body-xs);--sapphire-semantic-size-font-label-md: var(--sapphire-semantic-size-font-body-sm);--sapphire-semantic-size-font-label-sm: var(--sapphire-semantic-size-font-body-xs);--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-color-foreground-on-neutral-subtle: var(--sapphire-semantic-color-foreground-primary);--sapphire-semantic-color-foreground-on-positive-subtle: var(--sapphire-semantic-color-foreground-positive);--sapphire-semantic-color-foreground-on-negative-subtle: var(--sapphire-semantic-color-foreground-negative);--sapphire-semantic-color-foreground-on-accent-subtle: var(--sapphire-semantic-color-foreground-accent);--sapphire-semantic-color-foreground-action-danger-default: var(--sapphire-semantic-color-foreground-negative);--sapphire-semantic-color-foreground-action-link-default: var(--sapphire-semantic-color-foreground-accent);--sapphire-semantic-color-foreground-action-select-default: var(--sapphire-semantic-color-foreground-accent);--sapphire-semantic-color-foreground-action-on-select-default: var(--sapphire-semantic-color-foreground-on-accent);--sapphire-semantic-color-foreground-action-on-danger-default: var(--sapphire-semantic-color-foreground-on-negative);--sapphire-semantic-color-foreground-action-on-tertiary-default: var(--sapphire-semantic-color-foreground-primary);--sapphire-semantic-color-foreground-action-on-primary-default: var(--sapphire-semantic-color-foreground-on-accent);--sapphire-semantic-color-background-spinner-secondary: var(--sapphire-semantic-color-foreground-accent);--sapphire-semantic-color-background-spinner-primary: var(--sapphire-semantic-color-foreground-primary);--sapphire-semantic-color-background-skeleton: var(--sapphire-semantic-color-state-neutral-active);--sapphire-semantic-color-background-switch-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-active-alpha) * 100%), var(--sapphire-semantic-color-background-switch-default) calc((1 - var(--sapphire-semantic-color-state-neutral-active-alpha)) * 100%));--sapphire-semantic-color-background-switch-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-hover-alpha) * 100%), var(--sapphire-semantic-color-background-switch-default) calc((1 - var(--sapphire-semantic-color-state-neutral-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-select-tertiary-active: var(--sapphire-semantic-color-state-accent-subtle-active);--sapphire-semantic-color-background-action-select-tertiary-hover: var(--sapphire-semantic-color-state-accent-subtle-hover);--sapphire-semantic-color-background-action-select-secondary-default: var(--sapphire-semantic-color-background-accent-subtle);--sapphire-semantic-color-background-action-danger-tertiary-active: var(--sapphire-semantic-color-state-negative-subtle-active);--sapphire-semantic-color-background-action-danger-tertiary-hover: var(--sapphire-semantic-color-state-negative-subtle-hover);--sapphire-semantic-color-background-action-danger-secondary-default: var(--sapphire-semantic-color-background-negative-subtle);--sapphire-semantic-color-background-action-danger-default: var(--sapphire-semantic-color-background-negative);--sapphire-semantic-color-background-action-tertiary-active: var(--sapphire-semantic-color-state-neutral-ghost-active);--sapphire-semantic-color-background-action-tertiary-hover: var(--sapphire-semantic-color-state-neutral-ghost-hover);--sapphire-semantic-color-background-action-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-secondary-default) calc((1 - var(--sapphire-semantic-color-state-neutral-active-alpha)) * 100%));--sapphire-semantic-color-background-action-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-secondary-default) calc((1 - var(--sapphire-semantic-color-state-neutral-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-primary-default: var(--sapphire-semantic-color-background-accent);--sapphire-semantic-color-border-field-default: var(--sapphire-semantic-color-border-primary);--sapphire-semantic-color-border-negative-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-border-negative-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-border-negative-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-border-negative-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-danger-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-danger-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-link-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-link-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-link-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-link-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-select-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-select-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-select-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-select-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-select-tertiary-default: var(--sapphire-semantic-color-foreground-action-select-default);--sapphire-semantic-color-foreground-action-on-select-secondary-default: var(--sapphire-semantic-color-foreground-on-accent-subtle);--sapphire-semantic-color-foreground-action-on-select-active: var(--sapphire-semantic-color-foreground-action-on-select-default);--sapphire-semantic-color-foreground-action-on-select-hover: var(--sapphire-semantic-color-foreground-action-on-select-default);--sapphire-semantic-color-foreground-action-on-danger-tertiary-default: var(--sapphire-semantic-color-foreground-action-danger-default);--sapphire-semantic-color-foreground-action-on-danger-secondary-default: var(--sapphire-semantic-color-foreground-on-negative-subtle);--sapphire-semantic-color-foreground-action-on-danger-active: var(--sapphire-semantic-color-foreground-action-on-danger-default);--sapphire-semantic-color-foreground-action-on-danger-hover: var(--sapphire-semantic-color-foreground-action-on-danger-default);--sapphire-semantic-color-foreground-action-on-tertiary-active: var(--sapphire-semantic-color-foreground-action-on-tertiary-default);--sapphire-semantic-color-foreground-action-on-tertiary-hover: var(--sapphire-semantic-color-foreground-action-on-tertiary-default);--sapphire-semantic-color-foreground-action-on-secondary-default: var(--sapphire-semantic-color-foreground-on-neutral-subtle);--sapphire-semantic-color-foreground-action-on-primary-active: var(--sapphire-semantic-color-foreground-action-on-primary-default);--sapphire-semantic-color-foreground-action-on-primary-hover: var(--sapphire-semantic-color-foreground-action-on-primary-default);--sapphire-semantic-color-background-action-select-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-subtle-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-subtle-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-subtle-active-alpha)) * 100%));--sapphire-semantic-color-background-action-select-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-subtle-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-subtle-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-subtle-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-select-default: var(--sapphire-semantic-color-background-action-primary-default);--sapphire-semantic-color-background-action-danger-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-subtle-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-subtle-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-subtle-active-alpha)) * 100%));--sapphire-semantic-color-background-action-danger-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-subtle-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-subtle-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-subtle-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-danger-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-background-action-danger-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-primary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-primary-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-background-action-primary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-primary-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-border-field-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-border-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-border-active-alpha) * 100%), var(--sapphire-semantic-color-border-field-default) calc((1 - var(--sapphire-semantic-color-state-border-active-alpha)) * 100%));--sapphire-semantic-color-border-field-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-border-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-border-hover-alpha) * 100%), var(--sapphire-semantic-color-border-field-default) calc((1 - var(--sapphire-semantic-color-state-border-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-select-tertiary-active: var(--sapphire-semantic-color-foreground-action-select-active);--sapphire-semantic-color-foreground-action-on-select-tertiary-hover: var(--sapphire-semantic-color-foreground-action-select-hover);--sapphire-semantic-color-foreground-action-on-select-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-select-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-danger-tertiary-active: var(--sapphire-semantic-color-foreground-action-danger-active);--sapphire-semantic-color-foreground-action-on-danger-tertiary-hover: var(--sapphire-semantic-color-foreground-action-danger-hover);--sapphire-semantic-color-foreground-action-on-danger-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-danger-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-secondary-active: var(--sapphire-semantic-color-foreground-action-on-secondary-default);--sapphire-semantic-color-foreground-action-on-secondary-hover: var(--sapphire-semantic-color-foreground-action-on-secondary-default);--sapphire-semantic-color-background-action-select-active: var(--sapphire-semantic-color-background-action-primary-active);--sapphire-semantic-color-background-action-select-hover: var(--sapphire-semantic-color-background-action-primary-hover)}@media screen and (min-width: 768px){.sapphire-theme-default,:host,.sapphire-theme--secondary,:host ::ng-deep .sapphire-theme--secondary,.sapphire-theme--tertiary,:host ::ng-deep .sapphire-theme--tertiary,.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 screen and (min-width: 960px){.sapphire-theme-default,:host,.sapphire-theme--secondary,:host ::ng-deep .sapphire-theme--secondary,.sapphire-theme--tertiary,:host ::ng-deep .sapphire-theme--tertiary,.sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-semantic-size-font-heading-sm: var(--sapphire-global-size-font-125);--sapphire-semantic-size-font-heading-md: var(--sapphire-global-size-font-150);--sapphire-semantic-size-font-heading-lg: var(--sapphire-global-size-font-200);--sapphire-semantic-size-font-heading-xl: var(--sapphire-global-size-font-250);--sapphire-semantic-size-font-heading-2xl: var(--sapphire-global-size-font-300)}}@media (prefers-reduced-motion){.sapphire-theme-default,:host,.sapphire-theme--secondary,:host ::ng-deep .sapphire-theme--secondary,.sapphire-theme--tertiary,:host ::ng-deep .sapphire-theme--tertiary,.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-foreground-positive: var(--sapphire-global-color-alpha-green-600);--sapphire-semantic-color-foreground-secondary: color(from var(--sapphire-global-color-blue-900) xyz x y z / .65);--sapphire-semantic-color-foreground-secondary-alpha: .65;--sapphire-semantic-color-background-decorative-neutral: var(--sapphire-global-color-white);--sapphire-semantic-color-background-surface: var(--sapphire-global-color-sand-50);--sapphire-semantic-color-background-warning-subtle: var(--sapphire-global-color-alpha-yellow-100);--sapphire-semantic-color-background-action-danger-secondary-default: var(--sapphire-global-color-white);--sapphire-semantic-color-background-action-secondary-default: var(--sapphire-global-color-white);--sapphire-semantic-color-state-negative-subtle-active: color(from var(--sapphire-global-color-red-600) xyz x y z / .16);--sapphire-semantic-color-state-negative-subtle-active-alpha: .16;--sapphire-semantic-color-state-negative-subtle-hover: color(from var(--sapphire-global-color-red-600) xyz x y z / .12);--sapphire-semantic-color-state-negative-subtle-hover-alpha: .12;--sapphire-semantic-color-state-neutral-active: color(from var(--sapphire-global-color-sand-900) xyz x y z / .14);--sapphire-semantic-color-state-neutral-active-alpha: .14;--sapphire-semantic-color-state-neutral-hover: color(from var(--sapphire-global-color-sand-900) xyz x y z / .1);--sapphire-semantic-color-state-neutral-hover-alpha: .1;--sapphire-semantic-color-state-accent-subtle-active: color(from var(--sapphire-global-color-blue-500) xyz x y z / .12);--sapphire-semantic-color-state-accent-subtle-active-alpha: .12;--sapphire-semantic-color-state-accent-subtle-hover: color(from var(--sapphire-global-color-blue-500) xyz x y z / .1);--sapphire-semantic-color-state-accent-subtle-hover-alpha: .1}.sapphire-theme-default.sapphire-theme--tertiary,.sapphire-theme-default .sapphire-theme--tertiary,:host .sapphire-theme--tertiary,:host ::ng-deep .sapphire-theme--tertiary{--sapphire-semantic-color-foreground-positive: var(--sapphire-global-color-alpha-green-600);--sapphire-semantic-color-foreground-negative: var(--sapphire-global-color-alpha-red-600);--sapphire-semantic-color-foreground-secondary: color(from var(--sapphire-global-color-blue-900) xyz x y z / .665);--sapphire-semantic-color-foreground-secondary-alpha: .665;--sapphire-semantic-color-background-decorative-neutral: var(--sapphire-global-color-white);--sapphire-semantic-color-background-surface: var(--sapphire-global-color-sand-100);--sapphire-semantic-color-background-warning-subtle: var(--sapphire-global-color-alpha-yellow-100);--sapphire-semantic-color-background-neutral-subtle: var(--sapphire-global-color-alpha-sand-100);--sapphire-semantic-color-background-action-danger-secondary-default: var(--sapphire-global-color-white);--sapphire-semantic-color-background-action-secondary-default: var(--sapphire-global-color-white);--sapphire-semantic-color-state-border-active: color(from var(--sapphire-global-color-blue-900) xyz x y z / .2);--sapphire-semantic-color-state-border-active-alpha: .2;--sapphire-semantic-color-state-border-hover: color(from var(--sapphire-global-color-blue-900) xyz x y z / .1);--sapphire-semantic-color-state-border-hover-alpha: .1;--sapphire-semantic-color-state-negative-subtle-active: color(from var(--sapphire-global-color-red-600) xyz x y z / .2);--sapphire-semantic-color-state-negative-subtle-active-alpha: .2;--sapphire-semantic-color-state-negative-subtle-hover: color(from var(--sapphire-global-color-red-600) xyz x y z / .16);--sapphire-semantic-color-state-negative-subtle-hover-alpha: .16;--sapphire-semantic-color-state-neutral-active: color(from var(--sapphire-global-color-sand-900) xyz x y z / .18);--sapphire-semantic-color-state-neutral-active-alpha: .18;--sapphire-semantic-color-state-neutral-hover: color(from var(--sapphire-global-color-sand-900) xyz x y z / .14);--sapphire-semantic-color-state-neutral-hover-alpha: .14;--sapphire-semantic-color-state-accent-subtle-active: color(from var(--sapphire-global-color-blue-500) xyz x y z / .18);--sapphire-semantic-color-state-accent-subtle-active-alpha: .18;--sapphire-semantic-color-state-accent-subtle-hover: color(from var(--sapphire-global-color-blue-500) xyz x y z / .14);--sapphire-semantic-color-state-accent-subtle-hover-alpha: .14}.sapphire-theme-default.sapphire-theme--contrast,.sapphire-theme-default .sapphire-theme--contrast,:host .sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-global-shadow-md: 0px 0px 0px .5px hsl(0 0% 100% / .1) inset, 0px 4px 16px 0px hsl(212 63% 12% / .04);--sapphire-global-color-alpha-yellow-950: hsl(24 100% 14% / .902);--sapphire-global-color-alpha-yellow-900: hsl(25 100% 27% / .733);--sapphire-global-color-alpha-yellow-800: hsl(27 100% 37% / .705);--sapphire-global-color-alpha-yellow-700: hsl(31 100% 38% / .846);--sapphire-global-color-alpha-yellow-600: hsl(36 100% 44% / .902);--sapphire-global-color-alpha-yellow-500: hsl(41 100% 51% / .905);--sapphire-global-color-alpha-yellow-400: hsl(46 100% 55% / .971);--sapphire-global-color-alpha-yellow-300: hsl(46 100% 65% / .987);--sapphire-global-color-alpha-yellow-200: hsl(50 100% 77% / .979);--sapphire-global-color-alpha-yellow-100: hsl(51 100% 89% / .987);--sapphire-global-color-alpha-yellow-50: hsl(53 100% 92%);--sapphire-global-color-alpha-green-950: hsl(87 100% 10% / .508);--sapphire-global-color-alpha-green-900: hsl(86 100% 27% / .254);--sapphire-global-color-alpha-green-800: hsl(90 100% 56% / .198);--sapphire-global-color-alpha-green-700: hsl(101 100% 62% / .278);--sapphire-global-color-alpha-green-600: hsl(111 100% 64% / .396);--sapphire-global-color-alpha-green-500: hsl(113 100% 64% / .489);--sapphire-global-color-alpha-green-400: hsl(116 100% 70% / .662);--sapphire-global-color-alpha-green-300: hsl(117 100% 79% / .733);--sapphire-global-color-alpha-green-200: hsl(118 100% 86% / .83);--sapphire-global-color-alpha-green-100: hsl(120 100% 92% / .906);--sapphire-global-color-alpha-green-50: hsl(120 100% 97% / .939);--sapphire-global-color-alpha-red-950: hsl(7 100% 12% / .648);--sapphire-global-color-alpha-red-900: hsl(10 100% 30% / .423);--sapphire-global-color-alpha-red-800: hsl(5 100% 56% / .413);--sapphire-global-color-alpha-red-700: hsl(3 100% 59% / .564);--sapphire-global-color-alpha-red-600: hsl(1 100% 61% / .701);--sapphire-global-color-alpha-red-500: hsl(1 100% 60% / .826);--sapphire-global-color-alpha-red-400: hsl(1 100% 68% / .963);--sapphire-global-color-alpha-red-300: hsl(1 100% 75% / .979);--sapphire-global-color-alpha-red-200: hsl(2 100% 84%);--sapphire-global-color-alpha-red-100: hsl(4 100% 92%);--sapphire-global-color-alpha-red-50: hsl(0 100% 96% / .991);--sapphire-global-color-alpha-blue-950: hsl(210 100% 11% / .667);--sapphire-global-color-alpha-blue-900: hsl(210 100% 17% / .667);--sapphire-global-color-alpha-blue-800: hsl(211 100% 28% / .667);--sapphire-global-color-alpha-blue-700: hsl(211 100% 39% / .667);--sapphire-global-color-alpha-blue-600: hsl(212 100% 50% / .699);--sapphire-global-color-alpha-blue-500: hsl(215 100% 50% / .894);--sapphire-global-color-alpha-sand-950: hsl(33 100% 24% / .31);--sapphire-global-color-alpha-sand-900: hsl(35 100% 58% / .224);--sapphire-global-color-alpha-sand-800: hsl(38 100% 66% / .307);--sapphire-global-color-alpha-sand-700: hsl(38 100% 72% / .39);--sapphire-global-color-alpha-sand-600: hsl(38 100% 76% / .476);--sapphire-global-color-alpha-sand-500: hsl(39 100% 84% / .586);--sapphire-global-color-alpha-sand-400: hsl(42 100% 88% / .723);--sapphire-global-color-alpha-sand-300: hsl(45 100% 92% / .802);--sapphire-global-color-alpha-sand-200: hsl(44 100% 97% / .885);--sapphire-global-color-alpha-sand-100: hsl(53 100% 98% / .92);--sapphire-global-color-alpha-sand-50: hsl(40 100% 99% / .96);--sapphire-global-color-alpha-gray-900: hsl(215 97% 75% / .087);--sapphire-global-color-alpha-gray-800: hsl(221 100% 81% / .144);--sapphire-global-color-alpha-gray-700: hsl(214 100% 85% / .254);--sapphire-global-color-alpha-gray-600: hsl(213 100% 85% / .363);--sapphire-global-color-alpha-gray-500: hsl(212 100% 89% / .508);--sapphire-global-color-alpha-gray-400: hsl(211 100% 91% / .663);--sapphire-global-color-alpha-gray-300: hsl(211 100% 95% / .803);--sapphire-global-color-alpha-gray-200: hsl(212 100% 97% / .871);--sapphire-global-color-alpha-gray-100: hsl(207 100% 98% / .926);--sapphire-global-color-alpha-gray-50: hsl(200 100% 99% / .966);--sapphire-semantic-color-foreground-on-decorative-neutral: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-warning-subtle: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-warning: var(--sapphire-global-color-yellow-900);--sapphire-semantic-color-foreground-on-positive-subtle: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-negative-subtle: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-accent-subtle: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-positive: var(--sapphire-global-color-alpha-green-400);--sapphire-semantic-color-foreground-warning: var(--sapphire-global-color-alpha-yellow-400);--sapphire-semantic-color-foreground-negative: var(--sapphire-global-color-alpha-red-400);--sapphire-semantic-color-foreground-secondary: color(from var(--sapphire-global-color-gray-50) xyz x y z / .55);--sapphire-semantic-color-foreground-secondary-alpha: .55;--sapphire-semantic-color-foreground-primary: var(--sapphire-global-color-gray-50);--sapphire-semantic-color-background-decorative-neutral: var(--sapphire-global-color-alpha-gray-800);--sapphire-semantic-color-background-popover: var(--sapphire-global-color-gray-800);--sapphire-semantic-color-background-surface: var(--sapphire-global-color-gray-900);--sapphire-semantic-color-background-field: var(--sapphire-global-color-gray-800);--sapphire-semantic-color-background-warning-subtle: var(--sapphire-global-color-alpha-yellow-900);--sapphire-semantic-color-background-positive-subtle: var(--sapphire-global-color-alpha-green-800);--sapphire-semantic-color-background-negative-subtle: var(--sapphire-global-color-alpha-red-800);--sapphire-semantic-color-background-accent-subtle: var(--sapphire-global-color-alpha-blue-800);--sapphire-semantic-color-background-neutral-subtle: var(--sapphire-global-color-alpha-gray-900);--sapphire-semantic-color-background-segmented-control-knob: var(--sapphire-global-color-alpha-gray-600);--sapphire-semantic-color-background-segmented-control-track: var(--sapphire-global-color-alpha-gray-800);--sapphire-semantic-color-background-switch-default: var(--sapphire-global-color-alpha-gray-600);--sapphire-semantic-color-background-action-highlight: var(--sapphire-global-color-alpha-gray-900);--sapphire-semantic-color-background-action-secondary-default: var(--sapphire-global-color-alpha-gray-800);--sapphire-semantic-color-border-tertiary: color(from var(--sapphire-global-color-gray-50) xyz x y z / .06);--sapphire-semantic-color-border-tertiary-alpha: .06;--sapphire-semantic-color-border-secondary: color(from var(--sapphire-global-color-gray-50) xyz x y z / .08);--sapphire-semantic-color-border-secondary-alpha: .08;--sapphire-semantic-color-border-primary: color(from var(--sapphire-global-color-gray-50) xyz x y z / .16);--sapphire-semantic-color-border-primary-alpha: .16;--sapphire-semantic-color-state-border-active: color(from var(--sapphire-global-color-gray-100) xyz x y z / .2);--sapphire-semantic-color-state-border-active-alpha: .2;--sapphire-semantic-color-state-border-hover: color(from var(--sapphire-global-color-gray-100) xyz x y z / .12);--sapphire-semantic-color-state-border-hover-alpha: .12;--sapphire-semantic-color-state-negative-subtle-active: color(from var(--sapphire-global-color-red-100) xyz x y z / .12);--sapphire-semantic-color-state-negative-subtle-active-alpha: .12;--sapphire-semantic-color-state-negative-subtle-hover: color(from var(--sapphire-global-color-red-100) xyz x y z / .08);--sapphire-semantic-color-state-negative-subtle-hover-alpha: .08;--sapphire-semantic-color-state-negative-active: color(from var(--sapphire-global-color-red-100) xyz x y z / .2);--sapphire-semantic-color-state-negative-active-alpha: .2;--sapphire-semantic-color-state-negative-hover: color(from var(--sapphire-global-color-red-100) xyz x y z / .12);--sapphire-semantic-color-state-negative-hover-alpha: .12;--sapphire-semantic-color-state-neutral-ghost-active: color(from var(--sapphire-global-color-gray-200) xyz x y z / .1);--sapphire-semantic-color-state-neutral-ghost-active-alpha: .1;--sapphire-semantic-color-state-neutral-ghost-hover: color(from var(--sapphire-global-color-gray-200) xyz x y z / .06);--sapphire-semantic-color-state-neutral-ghost-hover-alpha: .06;--sapphire-semantic-color-state-neutral-active: color(from var(--sapphire-global-color-gray-200) xyz x y z / .1);--sapphire-semantic-color-state-neutral-active-alpha: .1;--sapphire-semantic-color-state-neutral-hover: color(from var(--sapphire-global-color-gray-200) xyz x y z / .06);--sapphire-semantic-color-state-neutral-hover-alpha: .06;--sapphire-semantic-color-state-accent-active: color(from var(--sapphire-global-color-blue-100) xyz x y z / .2);--sapphire-semantic-color-state-accent-active-alpha: .2;--sapphire-semantic-color-state-accent-hover: color(from var(--sapphire-global-color-blue-100) xyz x y z / .12);--sapphire-semantic-color-state-accent-hover-alpha: .12;--sapphire-global-color-alpha-blue-400: var(--sapphire-global-color-blue-400);--sapphire-global-color-alpha-blue-300: var(--sapphire-global-color-blue-300);--sapphire-global-color-alpha-blue-200: var(--sapphire-global-color-blue-200);--sapphire-global-color-alpha-blue-100: var(--sapphire-global-color-blue-100);--sapphire-global-color-alpha-blue-50: var(--sapphire-global-color-blue-50);--sapphire-semantic-color-foreground-accent: var(--sapphire-global-color-alpha-blue-400)}::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"] });
|
|
6414
|
+
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:transparent}to{background:var(--sapphire-semantic-color-background-backdrop)}}@keyframes backdrop-fade-out{0%{background:var(--sapphire-semantic-color-background-backdrop)}to{background: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:var(--sapphire-semantic-transitions-fade);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--tertiary,:host ::ng-deep .sapphire-theme--tertiary,.sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-semantic-size-breakpoint-xl: 1400px;--sapphire-semantic-size-breakpoint-lg: 1200px;--sapphire-semantic-size-breakpoint-md: 960px;--sapphire-semantic-size-breakpoint-sm: 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-default-bold: 600;--sapphire-semantic-font-weight-default-medium: 500;--sapphire-semantic-font-weight-default-regular: 400;--sapphire-semantic-font-weight-default-light: 300;--sapphire-global-transitions-ease-in: cubic-bezier(0, 0, 0, 1);--sapphire-global-transitions-ease-in-out-quick: cubic-bezier(.5, 0, 0, 1);--sapphire-global-transitions-ease-in-out: cubic-bezier(.7, 0, .2, 1);--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.3;--sapphire-global-size-font-300: 3rem;--sapphire-global-size-font-250: 2.5rem;--sapphire-global-size-font-200: 2rem;--sapphire-global-size-font-175: 1.75rem;--sapphire-global-size-font-163: 1.625rem;--sapphire-global-size-font-150: 1.5rem;--sapphire-global-size-font-125: 1.25rem;--sapphire-global-size-font-112: 1.125rem;--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-110: 2.75rem;--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-40: 16px;--sapphire-global-size-static-30: 12px;--sapphire-global-size-static-20: 8px;--sapphire-global-size-static-15: 6px;--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-md: 0px 0px 0px 1px hsl(212 63% 12% / .1) inset, 0px 4px 24px 0px hsl(212 63% 12% / .04);--sapphire-global-opacity-30: .3;--sapphire-global-font-danske-name: \"Danske\";--sapphire-global-color-secondary-green-4: hsl(137 64% 78%);--sapphire-global-color-secondary-green-3: hsl(152 42% 56%);--sapphire-global-color-secondary-green-2: hsl(152 44% 38%);--sapphire-global-color-secondary-green-1: hsl(158 58% 19%);--sapphire-global-color-secondary-copper-4: hsl(23 69% 75%);--sapphire-global-color-secondary-copper-3: hsl(19 61% 60%);--sapphire-global-color-secondary-copper-2: hsl(18 57% 41%);--sapphire-global-color-secondary-copper-1: hsl(12 65% 23%);--sapphire-global-color-secondary-gold-4: hsl(45 63% 69%);--sapphire-global-color-secondary-gold-3: hsl(39 49% 54%);--sapphire-global-color-secondary-gold-2: hsl(37 57% 36%);--sapphire-global-color-secondary-gold-1: hsl(37 68% 19%);--sapphire-global-color-secondary-blue-4: hsl(211 72% 72%);--sapphire-global-color-secondary-blue-3: hsl(214 59% 62%);--sapphire-global-color-secondary-blue-2: hsl(218 51% 52%);--sapphire-global-color-secondary-blue-1: hsl(212 100% 24%);--sapphire-global-color-alpha-yellow-950: hsl(23 100% 13% / .987);--sapphire-global-color-alpha-yellow-900: hsl(25 100% 19% / .963);--sapphire-global-color-alpha-yellow-800: hsl(27 100% 25% / .959);--sapphire-global-color-alpha-yellow-700: hsl(31 100% 32% / .979);--sapphire-global-color-alpha-yellow-600: hsl(36 100% 39% / .987);--sapphire-global-color-alpha-yellow-500: hsl(41 100% 45% / .975);--sapphire-global-color-alpha-yellow-400: hsl(46 100% 48% / .897);--sapphire-global-color-alpha-yellow-300: hsl(46 100% 49% / .697);--sapphire-global-color-alpha-yellow-200: hsl(51 100% 48% / .47);--sapphire-global-color-alpha-yellow-100: hsl(51 100% 47% / .235);--sapphire-global-color-alpha-yellow-50: hsl(53 100% 50% / .161);--sapphire-global-color-alpha-green-950: hsl(129 100% 4% / .944);--sapphire-global-color-alpha-green-900: hsl(130 100% 6% / .916);--sapphire-global-color-alpha-green-800: hsl(128 100% 8% / .885);--sapphire-global-color-alpha-green-700: hsl(128 100% 11% / .862);--sapphire-global-color-alpha-green-600: hsl(127 100% 17% / .842);--sapphire-global-color-alpha-green-500: hsl(124 100% 21% / .822);--sapphire-global-color-alpha-green-400: hsl(122 100% 28% / .701);--sapphire-global-color-alpha-green-300: hsl(124 100% 28% / .56);--sapphire-global-color-alpha-green-200: hsl(124 100% 30% / .388);--sapphire-global-color-alpha-green-100: hsl(125 100% 11% / .231);--sapphire-global-color-alpha-green-50: hsl(129 100% 25% / .11);--sapphire-global-color-alpha-red-950: hsl(358 100% 6% / .957);--sapphire-global-color-alpha-red-900: hsl(1 100% 10% / .92);--sapphire-global-color-alpha-red-800: hsl(359 100% 17% / .877);--sapphire-global-color-alpha-red-700: hsl(359 100% 24% / .842);--sapphire-global-color-alpha-red-600: hsl(359 100% 32% / .819);--sapphire-global-color-alpha-red-500: hsl(0 100% 39% / .815);--sapphire-global-color-alpha-red-400: hsl(1 100% 47% / .65);--sapphire-global-color-alpha-red-300: hsl(1 100% 48% / .501);--sapphire-global-color-alpha-red-200: hsl(2 100% 50% / .325);--sapphire-global-color-alpha-red-100: hsl(4 100% 50% / .169);--sapphire-global-color-alpha-red-50: hsl(0 98% 45% / .079);--sapphire-global-color-alpha-blue-500: hsl(215 99% 45% / .995);--sapphire-global-color-alpha-blue-400: hsl(216 100% 50% / .74);--sapphire-global-color-alpha-blue-300: hsl(215 100% 50% / .513);--sapphire-global-color-alpha-blue-200: hsl(214 100% 50% / .349);--sapphire-global-color-alpha-blue-100: hsl(214 100% 50% / .2);--sapphire-global-color-alpha-blue-50: hsl(219 100% 50% / .091);--sapphire-global-color-alpha-sand-950: hsl(40 100% 3% / .905);--sapphire-global-color-alpha-sand-900: hsl(41 100% 5% / .858);--sapphire-global-color-alpha-sand-800: hsl(43 100% 7% / .803);--sapphire-global-color-alpha-sand-700: hsl(42 100% 9% / .74);--sapphire-global-color-alpha-sand-600: hsl(42 100% 12% / .678);--sapphire-global-color-alpha-sand-500: hsl(43 100% 12% / .548);--sapphire-global-color-alpha-sand-400: hsl(39 100% 17% / .411);--sapphire-global-color-alpha-sand-300: hsl(48 100% 17% / .294);--sapphire-global-color-alpha-sand-200: hsl(48 100% 13% / .153);--sapphire-global-color-alpha-sand-100: hsl(60 100% 10% / .098);--sapphire-global-color-alpha-sand-50: hsl(60 100% 10% / .043);--sapphire-global-color-alpha-gray-900: hsl(211 63% 13% / .952);--sapphire-global-color-alpha-gray-800: hsl(213 100% 9% / .909);--sapphire-global-color-alpha-gray-700: hsl(213 100% 11% / .819);--sapphire-global-color-alpha-gray-600: hsl(212 100% 13% / .74);--sapphire-global-color-alpha-gray-500: hsl(212 100% 15% / .603);--sapphire-global-color-alpha-gray-400: hsl(211 100% 18% / .455);--sapphire-global-color-alpha-gray-300: hsl(211 100% 20% / .282);--sapphire-global-color-alpha-gray-200: hsl(210 100% 21% / .188);--sapphire-global-color-alpha-gray-100: hsl(208 98% 23% / .114);--sapphire-global-color-alpha-gray-50: hsl(206 100% 25% / .055);--sapphire-global-color-yellow-950: hsl(24 91% 14%);--sapphire-global-color-yellow-900: hsl(25 84% 22%);--sapphire-global-color-yellow-800: hsl(27 86% 28%);--sapphire-global-color-yellow-700: hsl(31 94% 33%);--sapphire-global-color-yellow-600: hsl(36 97% 40%);--sapphire-global-color-yellow-500: hsl(41 95% 46%);--sapphire-global-color-yellow-400: hsl(46 94% 54%);--sapphire-global-color-yellow-300: hsl(46 97% 65%);--sapphire-global-color-yellow-200: hsl(51 92% 75%);--sapphire-global-color-yellow-100: hsl(51 90% 88%);--sapphire-global-color-yellow-50: hsl(53 100% 92%);--sapphire-global-color-green-950: hsl(129 42% 9%);--sapphire-global-color-green-900: hsl(131 40% 14%);--sapphire-global-color-green-800: hsl(128 38% 18%);--sapphire-global-color-green-700: hsl(129 41% 23%);--sapphire-global-color-green-600: hsl(127 47% 30%);--sapphire-global-color-green-500: hsl(125 50% 35%);--sapphire-global-color-green-400: hsl(122 39% 49%);--sapphire-global-color-green-300: hsl(124 39% 60%);--sapphire-global-color-green-200: hsl(124 42% 73%);--sapphire-global-color-green-100: hsl(125 46% 84%);--sapphire-global-color-green-50: hsl(129 33% 92%);--sapphire-global-color-red-950: hsl(358 57% 10%);--sapphire-global-color-red-900: hsl(1 53% 17%);--sapphire-global-color-red-800: hsl(358 55% 27%);--sapphire-global-color-red-700: hsl(359 57% 36%);--sapphire-global-color-red-600: hsl(359 59% 44%);--sapphire-global-color-red-500: hsl(0 65% 51%);--sapphire-global-color-red-400: hsl(1 90% 66%);--sapphire-global-color-red-300: hsl(1 92% 74%);--sapphire-global-color-red-200: hsl(2 100% 84%);--sapphire-global-color-red-100: hsl(4 100% 92%);--sapphire-global-color-red-50: hsl(0 82% 96%);--sapphire-global-color-blue-950: hsl(210 100% 9%);--sapphire-global-color-blue-900: hsl(210 100% 14%);--sapphire-global-color-blue-800: hsl(211 100% 21%);--sapphire-global-color-blue-700: hsl(211 100% 28%);--sapphire-global-color-blue-600: hsl(212 100% 37%);--sapphire-global-color-blue-500: hsl(218 92% 49%);--sapphire-global-color-blue-400: hsl(216 100% 63%);--sapphire-global-color-blue-300: hsl(215 100% 74%);--sapphire-global-color-blue-200: hsl(214 100% 83%);--sapphire-global-color-blue-100: hsl(214 100% 90%);--sapphire-global-color-blue-50: hsl(219 100% 95%);--sapphire-global-color-sand-950: hsl(39 23% 12%);--sapphire-global-color-sand-900: hsl(41 23% 18%);--sapphire-global-color-sand-800: hsl(43 22% 25%);--sapphire-global-color-sand-700: hsl(42 20% 33%);--sapphire-global-color-sand-600: hsl(42 20% 40%);--sapphire-global-color-sand-500: hsl(43 14% 52%);--sapphire-global-color-sand-400: hsl(39 20% 66%);--sapphire-global-color-sand-300: hsl(48 20% 75%);--sapphire-global-color-sand-200: hsl(48 15% 87%);--sapphire-global-color-sand-100: hsl(60 11% 91%);--sapphire-global-color-sand-50: hsl(60 9% 96%);--sapphire-global-color-gray-950: hsl(210 94% 7%);--sapphire-global-color-gray-900: hsl(211 64% 13%);--sapphire-global-color-gray-800: hsl(213 48% 17%);--sapphire-global-color-gray-700: hsl(212 33% 27%);--sapphire-global-color-gray-600: hsl(212 27% 35%);--sapphire-global-color-gray-500: hsl(211 19% 49%);--sapphire-global-color-gray-400: hsl(211 22% 63%);--sapphire-global-color-gray-300: hsl(211 22% 77%);--sapphire-global-color-gray-200: hsl(210 26% 85%);--sapphire-global-color-gray-100: hsl(208 29% 91%);--sapphire-global-color-gray-50: hsl(206 33% 96%);--sapphire-global-color-transparent: hsla(0, 0%, 100%, 0);--sapphire-global-color-black: hsla(0, 0%, 0%, 1);--sapphire-global-color-white: hsla(0, 0%, 100%, 1);--sapphire-semantic-transitions-fade: var(--sapphire-global-transitions-ease-in);--sapphire-semantic-transitions-dynamic: var(--sapphire-global-transitions-ease-in-out-quick);--sapphire-semantic-transitions-standard: var(--sapphire-global-transitions-ease-in-out);--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-6xl: var(--sapphire-global-size-generic-180);--sapphire-semantic-size-spacing-5xl: var(--sapphire-global-size-generic-160);--sapphire-semantic-size-spacing-4xl: var(--sapphire-global-size-generic-120);--sapphire-semantic-size-spacing-3xl: var(--sapphire-global-size-generic-100);--sapphire-semantic-size-spacing-2xl: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-spacing-xl: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-spacing-lg: var(--sapphire-global-size-generic-50);--sapphire-semantic-size-spacing-md: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-spacing-sm: var(--sapphire-global-size-generic-30);--sapphire-semantic-size-spacing-xs: var(--sapphire-global-size-generic-20);--sapphire-semantic-size-spacing-2xs: var(--sapphire-global-size-generic-15);--sapphire-semantic-size-spacing-3xs: var(--sapphire-global-size-generic-10);--sapphire-semantic-size-spacing-4xs: 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-heading-2xl: var(--sapphire-global-size-font-175);--sapphire-semantic-size-font-heading-xl: var(--sapphire-global-size-font-150);--sapphire-semantic-size-font-heading-lg: var(--sapphire-global-size-font-125);--sapphire-semantic-size-font-heading-md: var(--sapphire-global-size-font-125);--sapphire-semantic-size-font-heading-sm: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-heading-xs: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-body-lg: var(--sapphire-global-size-font-112);--sapphire-semantic-size-font-body-md: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-body-sm: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-body-xs: var(--sapphire-global-size-font-75);--sapphire-semantic-size-radius-2xl: var(--sapphire-global-size-static-40);--sapphire-semantic-size-radius-xl: var(--sapphire-global-size-static-30);--sapphire-semantic-size-radius-lg: var(--sapphire-global-size-static-20);--sapphire-semantic-size-radius-md: var(--sapphire-global-size-static-15);--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-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-field: var(--sapphire-global-size-generic-750);--sapphire-semantic-size-height-box-md: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-height-control-4xl: var(--sapphire-global-size-generic-200);--sapphire-semantic-size-height-control-3xl: var(--sapphire-global-size-generic-180);--sapphire-semantic-size-height-control-2xl: var(--sapphire-global-size-generic-160);--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-30);--sapphire-semantic-font-name-default: var(--sapphire-global-font-danske-name);--sapphire-semantic-color-foreground-on-decorative-neutral: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-16: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-15: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-14: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-13: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-12: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-11: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-10: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-9: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-8: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-7: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-6: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-5: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-4: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-3: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-2: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-1: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-signature: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-warning-subtle: var(--sapphire-global-color-alpha-yellow-800);--sapphire-semantic-color-foreground-on-warning: var(--sapphire-global-color-alpha-yellow-900);--sapphire-semantic-color-foreground-on-positive: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-negative: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-accent: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-positive: var(--sapphire-global-color-alpha-green-500);--sapphire-semantic-color-foreground-warning: var(--sapphire-global-color-alpha-yellow-700);--sapphire-semantic-color-foreground-negative: var(--sapphire-global-color-alpha-red-500);--sapphire-semantic-color-foreground-accent: var(--sapphire-global-color-alpha-blue-500);--sapphire-semantic-color-foreground-secondary: color(from var(--sapphire-global-color-blue-900) xyz x y z / .64);--sapphire-semantic-color-foreground-secondary-alpha: .64;--sapphire-semantic-color-foreground-primary: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-background-decorative-neutral: var(--sapphire-global-color-alpha-sand-50);--sapphire-semantic-color-background-decorative-16: var(--sapphire-global-color-secondary-green-4);--sapphire-semantic-color-background-decorative-15: var(--sapphire-global-color-secondary-green-3);--sapphire-semantic-color-background-decorative-14: var(--sapphire-global-color-secondary-green-2);--sapphire-semantic-color-background-decorative-13: var(--sapphire-global-color-secondary-green-1);--sapphire-semantic-color-background-decorative-12: var(--sapphire-global-color-secondary-copper-4);--sapphire-semantic-color-background-decorative-11: var(--sapphire-global-color-secondary-copper-3);--sapphire-semantic-color-background-decorative-10: var(--sapphire-global-color-secondary-copper-2);--sapphire-semantic-color-background-decorative-9: var(--sapphire-global-color-secondary-copper-1);--sapphire-semantic-color-background-decorative-8: var(--sapphire-global-color-secondary-gold-4);--sapphire-semantic-color-background-decorative-7: var(--sapphire-global-color-secondary-gold-3);--sapphire-semantic-color-background-decorative-6: var(--sapphire-global-color-secondary-gold-2);--sapphire-semantic-color-background-decorative-5: var(--sapphire-global-color-secondary-gold-1);--sapphire-semantic-color-background-decorative-4: var(--sapphire-global-color-secondary-blue-4);--sapphire-semantic-color-background-decorative-3: var(--sapphire-global-color-secondary-blue-3);--sapphire-semantic-color-background-decorative-2: var(--sapphire-global-color-secondary-blue-2);--sapphire-semantic-color-background-decorative-1: var(--sapphire-global-color-secondary-blue-1);--sapphire-semantic-color-background-popover: var(--sapphire-global-color-white);--sapphire-semantic-color-background-backdrop: color(from var(--sapphire-global-color-gray-950) xyz x y z / .6);--sapphire-semantic-color-background-backdrop-alpha: .6;--sapphire-semantic-color-background-surface: var(--sapphire-global-color-white);--sapphire-semantic-color-background-field: var(--sapphire-global-color-white);--sapphire-semantic-color-background-warning-subtle: var(--sapphire-global-color-alpha-yellow-50);--sapphire-semantic-color-background-positive-subtle: var(--sapphire-global-color-alpha-green-50);--sapphire-semantic-color-background-negative-subtle: var(--sapphire-global-color-alpha-red-50);--sapphire-semantic-color-background-accent-subtle: var(--sapphire-global-color-alpha-blue-50);--sapphire-semantic-color-background-neutral-subtle: var(--sapphire-global-color-alpha-sand-50);--sapphire-semantic-color-background-negative: var(--sapphire-global-color-red-500);--sapphire-semantic-color-background-warning: var(--sapphire-global-color-yellow-300);--sapphire-semantic-color-background-positive: var(--sapphire-global-color-green-500);--sapphire-semantic-color-background-accent: var(--sapphire-global-color-blue-500);--sapphire-semantic-color-background-signature: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-background-segmented-control-knob: var(--sapphire-global-color-white);--sapphire-semantic-color-background-segmented-control-track: var(--sapphire-global-color-alpha-sand-100);--sapphire-semantic-color-background-switch-default: var(--sapphire-global-color-alpha-sand-200);--sapphire-semantic-color-background-action-highlight: var(--sapphire-global-color-alpha-sand-50);--sapphire-semantic-color-background-action-select-tertiary-default: var(--sapphire-global-color-transparent);--sapphire-semantic-color-background-action-danger-tertiary-default: var(--sapphire-global-color-transparent);--sapphire-semantic-color-background-action-tertiary-default: var(--sapphire-global-color-transparent);--sapphire-semantic-color-background-action-secondary-default: var(--sapphire-global-color-alpha-sand-100);--sapphire-semantic-color-focus-ring: var(--sapphire-global-color-blue-400);--sapphire-semantic-color-border-field-default: color(from var(--sapphire-global-color-blue-900) xyz x y z / .48);--sapphire-semantic-color-border-field-default-alpha: .48;--sapphire-semantic-color-border-negative-default: var(--sapphire-global-color-red-500);--sapphire-semantic-color-border-accent: var(--sapphire-global-color-blue-500);--sapphire-semantic-color-border-tertiary: color(from var(--sapphire-global-color-blue-900) xyz x y z / .06);--sapphire-semantic-color-border-tertiary-alpha: .06;--sapphire-semantic-color-border-secondary: color(from var(--sapphire-global-color-blue-900) xyz x y z / .08);--sapphire-semantic-color-border-secondary-alpha: .08;--sapphire-semantic-color-border-primary: color(from var(--sapphire-global-color-blue-900) xyz x y z / .16);--sapphire-semantic-color-border-primary-alpha: .16;--sapphire-semantic-color-state-border-active: color(from var(--sapphire-global-color-blue-900) xyz x y z / .2);--sapphire-semantic-color-state-border-active-alpha: .2;--sapphire-semantic-color-state-border-hover: color(from var(--sapphire-global-color-blue-900) xyz x y z / .12);--sapphire-semantic-color-state-border-hover-alpha: .12;--sapphire-semantic-color-state-negative-subtle-active: color(from var(--sapphire-global-color-red-500) xyz x y z / .1);--sapphire-semantic-color-state-negative-subtle-active-alpha: .1;--sapphire-semantic-color-state-negative-subtle-hover: color(from var(--sapphire-global-color-red-500) xyz x y z / .06);--sapphire-semantic-color-state-negative-subtle-hover-alpha: .06;--sapphire-semantic-color-state-negative-active: color(from var(--sapphire-global-color-red-900) xyz x y z / .2);--sapphire-semantic-color-state-negative-active-alpha: .2;--sapphire-semantic-color-state-negative-hover: color(from var(--sapphire-global-color-red-900) xyz x y z / .12);--sapphire-semantic-color-state-negative-hover-alpha: .12;--sapphire-semantic-color-state-neutral-ghost-active: color(from var(--sapphire-global-color-sand-900) xyz x y z / .1);--sapphire-semantic-color-state-neutral-ghost-active-alpha: .1;--sapphire-semantic-color-state-neutral-ghost-hover: color(from var(--sapphire-global-color-sand-900) xyz x y z / .06);--sapphire-semantic-color-state-neutral-ghost-hover-alpha: .06;--sapphire-semantic-color-state-neutral-active: color(from var(--sapphire-global-color-sand-900) xyz x y z / .1);--sapphire-semantic-color-state-neutral-active-alpha: .1;--sapphire-semantic-color-state-neutral-hover: color(from var(--sapphire-global-color-sand-900) xyz x y z / .06);--sapphire-semantic-color-state-neutral-hover-alpha: .06;--sapphire-semantic-color-state-accent-subtle-active: color(from var(--sapphire-global-color-blue-500) xyz x y z / .12);--sapphire-semantic-color-state-accent-subtle-active-alpha: .12;--sapphire-semantic-color-state-accent-subtle-hover: color(from var(--sapphire-global-color-blue-500) xyz x y z / .06);--sapphire-semantic-color-state-accent-subtle-hover-alpha: .06;--sapphire-semantic-color-state-accent-active: color(from var(--sapphire-global-color-blue-900) xyz x y z / .2);--sapphire-semantic-color-state-accent-active-alpha: .2;--sapphire-semantic-color-state-accent-hover: color(from var(--sapphire-global-color-blue-900) xyz x y z / .12);--sapphire-semantic-color-state-accent-hover-alpha: .12;--sapphire-global-color-alpha-blue-950: var(--sapphire-global-color-blue-950);--sapphire-global-color-alpha-blue-900: var(--sapphire-global-color-blue-900);--sapphire-global-color-alpha-blue-800: var(--sapphire-global-color-blue-800);--sapphire-global-color-alpha-blue-700: var(--sapphire-global-color-blue-700);--sapphire-global-color-alpha-blue-600: var(--sapphire-global-color-blue-600);--sapphire-global-color-alpha-gray-950: var(--sapphire-global-color-gray-950);--sapphire-semantic-size-spacing-container-horizontal-md: var(--sapphire-semantic-size-spacing-2xl);--sapphire-semantic-size-spacing-container-horizontal-sm: var(--sapphire-semantic-size-spacing-sm);--sapphire-semantic-size-spacing-control-horizontal-lg: var(--sapphire-semantic-size-spacing-md);--sapphire-semantic-size-spacing-control-horizontal-md: var(--sapphire-semantic-size-spacing-sm);--sapphire-semantic-size-spacing-control-vertical-lg: var(--sapphire-semantic-size-spacing-sm);--sapphire-semantic-size-spacing-control-vertical-md: var(--sapphire-semantic-size-spacing-xs);--sapphire-semantic-size-spacing-control-vertical-sm: var(--sapphire-semantic-size-spacing-3xs);--sapphire-semantic-size-font-control-lg: var(--sapphire-semantic-size-font-body-md);--sapphire-semantic-size-font-control-md: var(--sapphire-semantic-size-font-body-sm);--sapphire-semantic-size-font-control-sm: var(--sapphire-semantic-size-font-body-xs);--sapphire-semantic-size-font-label-md: var(--sapphire-semantic-size-font-body-sm);--sapphire-semantic-size-font-label-sm: var(--sapphire-semantic-size-font-body-xs);--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-color-foreground-on-neutral-subtle: var(--sapphire-semantic-color-foreground-primary);--sapphire-semantic-color-foreground-on-positive-subtle: var(--sapphire-semantic-color-foreground-positive);--sapphire-semantic-color-foreground-on-negative-subtle: var(--sapphire-semantic-color-foreground-negative);--sapphire-semantic-color-foreground-on-accent-subtle: var(--sapphire-semantic-color-foreground-accent);--sapphire-semantic-color-foreground-action-danger-default: var(--sapphire-semantic-color-foreground-negative);--sapphire-semantic-color-foreground-action-link-default: var(--sapphire-semantic-color-foreground-accent);--sapphire-semantic-color-foreground-action-select-default: var(--sapphire-semantic-color-foreground-accent);--sapphire-semantic-color-foreground-action-on-select-default: var(--sapphire-semantic-color-foreground-on-accent);--sapphire-semantic-color-foreground-action-on-danger-default: var(--sapphire-semantic-color-foreground-on-negative);--sapphire-semantic-color-foreground-action-on-tertiary-default: var(--sapphire-semantic-color-foreground-primary);--sapphire-semantic-color-foreground-action-on-primary-default: var(--sapphire-semantic-color-foreground-on-accent);--sapphire-semantic-color-background-spinner-secondary: var(--sapphire-semantic-color-foreground-accent);--sapphire-semantic-color-background-spinner-primary: var(--sapphire-semantic-color-foreground-primary);--sapphire-semantic-color-background-skeleton: var(--sapphire-semantic-color-state-neutral-active);--sapphire-semantic-color-background-progress-track: var(--sapphire-semantic-color-background-accent-subtle);--sapphire-semantic-color-background-progress-fill: var(--sapphire-semantic-color-background-accent);--sapphire-semantic-color-background-switch-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-active-alpha) * 100%), var(--sapphire-semantic-color-background-switch-default) calc((1 - var(--sapphire-semantic-color-state-neutral-active-alpha)) * 100%));--sapphire-semantic-color-background-switch-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-hover-alpha) * 100%), var(--sapphire-semantic-color-background-switch-default) calc((1 - var(--sapphire-semantic-color-state-neutral-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-select-tertiary-active: var(--sapphire-semantic-color-state-accent-subtle-active);--sapphire-semantic-color-background-action-select-tertiary-hover: var(--sapphire-semantic-color-state-accent-subtle-hover);--sapphire-semantic-color-background-action-select-secondary-default: var(--sapphire-semantic-color-background-accent-subtle);--sapphire-semantic-color-background-action-danger-tertiary-active: var(--sapphire-semantic-color-state-negative-subtle-active);--sapphire-semantic-color-background-action-danger-tertiary-hover: var(--sapphire-semantic-color-state-negative-subtle-hover);--sapphire-semantic-color-background-action-danger-secondary-default: var(--sapphire-semantic-color-background-negative-subtle);--sapphire-semantic-color-background-action-danger-default: var(--sapphire-semantic-color-background-negative);--sapphire-semantic-color-background-action-tertiary-active: var(--sapphire-semantic-color-state-neutral-ghost-active);--sapphire-semantic-color-background-action-tertiary-hover: var(--sapphire-semantic-color-state-neutral-ghost-hover);--sapphire-semantic-color-background-action-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-secondary-default) calc((1 - var(--sapphire-semantic-color-state-neutral-active-alpha)) * 100%));--sapphire-semantic-color-background-action-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-secondary-default) calc((1 - var(--sapphire-semantic-color-state-neutral-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-primary-default: var(--sapphire-semantic-color-background-accent);--sapphire-semantic-color-border-field-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-border-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-border-active-alpha) * 100%), var(--sapphire-semantic-color-border-field-default) calc((1 - var(--sapphire-semantic-color-state-border-active-alpha)) * 100%));--sapphire-semantic-color-border-field-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-border-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-border-hover-alpha) * 100%), var(--sapphire-semantic-color-border-field-default) calc((1 - var(--sapphire-semantic-color-state-border-hover-alpha)) * 100%));--sapphire-semantic-color-border-negative-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-border-negative-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-border-negative-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-border-negative-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-danger-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-danger-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-link-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-link-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-link-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-link-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-select-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-select-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-select-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-select-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-select-tertiary-default: var(--sapphire-semantic-color-foreground-action-select-default);--sapphire-semantic-color-foreground-action-on-select-secondary-default: var(--sapphire-semantic-color-foreground-on-accent-subtle);--sapphire-semantic-color-foreground-action-on-select-active: var(--sapphire-semantic-color-foreground-action-on-select-default);--sapphire-semantic-color-foreground-action-on-select-hover: var(--sapphire-semantic-color-foreground-action-on-select-default);--sapphire-semantic-color-foreground-action-on-danger-tertiary-default: var(--sapphire-semantic-color-foreground-action-danger-default);--sapphire-semantic-color-foreground-action-on-danger-secondary-default: var(--sapphire-semantic-color-foreground-on-negative-subtle);--sapphire-semantic-color-foreground-action-on-danger-active: var(--sapphire-semantic-color-foreground-action-on-danger-default);--sapphire-semantic-color-foreground-action-on-danger-hover: var(--sapphire-semantic-color-foreground-action-on-danger-default);--sapphire-semantic-color-foreground-action-on-tertiary-active: var(--sapphire-semantic-color-foreground-action-on-tertiary-default);--sapphire-semantic-color-foreground-action-on-tertiary-hover: var(--sapphire-semantic-color-foreground-action-on-tertiary-default);--sapphire-semantic-color-foreground-action-on-secondary-default: var(--sapphire-semantic-color-foreground-on-neutral-subtle);--sapphire-semantic-color-foreground-action-on-primary-active: var(--sapphire-semantic-color-foreground-action-on-primary-default);--sapphire-semantic-color-foreground-action-on-primary-hover: var(--sapphire-semantic-color-foreground-action-on-primary-default);--sapphire-semantic-color-background-action-select-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-subtle-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-subtle-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-subtle-active-alpha)) * 100%));--sapphire-semantic-color-background-action-select-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-subtle-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-subtle-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-subtle-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-select-default: var(--sapphire-semantic-color-background-action-primary-default);--sapphire-semantic-color-background-action-danger-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-subtle-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-subtle-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-subtle-active-alpha)) * 100%));--sapphire-semantic-color-background-action-danger-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-subtle-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-subtle-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-subtle-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-danger-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-background-action-danger-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-primary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-primary-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-background-action-primary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-primary-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-select-tertiary-active: var(--sapphire-semantic-color-foreground-action-select-active);--sapphire-semantic-color-foreground-action-on-select-tertiary-hover: var(--sapphire-semantic-color-foreground-action-select-hover);--sapphire-semantic-color-foreground-action-on-select-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-select-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-danger-tertiary-active: var(--sapphire-semantic-color-foreground-action-danger-active);--sapphire-semantic-color-foreground-action-on-danger-tertiary-hover: var(--sapphire-semantic-color-foreground-action-danger-hover);--sapphire-semantic-color-foreground-action-on-danger-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-danger-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-secondary-active: var(--sapphire-semantic-color-foreground-action-on-secondary-default);--sapphire-semantic-color-foreground-action-on-secondary-hover: var(--sapphire-semantic-color-foreground-action-on-secondary-default);--sapphire-semantic-color-background-action-select-active: var(--sapphire-semantic-color-background-action-primary-active);--sapphire-semantic-color-background-action-select-hover: var(--sapphire-semantic-color-background-action-primary-hover)}@media screen and (min-width: 768px){.sapphire-theme-default,:host,.sapphire-theme--secondary,:host ::ng-deep .sapphire-theme--secondary,.sapphire-theme--tertiary,:host ::ng-deep .sapphire-theme--tertiary,.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 screen and (min-width: 960px){.sapphire-theme-default,:host,.sapphire-theme--secondary,:host ::ng-deep .sapphire-theme--secondary,.sapphire-theme--tertiary,:host ::ng-deep .sapphire-theme--tertiary,.sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-semantic-size-font-heading-sm: var(--sapphire-global-size-font-125);--sapphire-semantic-size-font-heading-md: var(--sapphire-global-size-font-150);--sapphire-semantic-size-font-heading-lg: var(--sapphire-global-size-font-200);--sapphire-semantic-size-font-heading-xl: var(--sapphire-global-size-font-250);--sapphire-semantic-size-font-heading-2xl: var(--sapphire-global-size-font-300)}}@media (prefers-reduced-motion){.sapphire-theme-default,:host,.sapphire-theme--secondary,:host ::ng-deep .sapphire-theme--secondary,.sapphire-theme--tertiary,:host ::ng-deep .sapphire-theme--tertiary,.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-foreground-positive: var(--sapphire-global-color-alpha-green-600);--sapphire-semantic-color-foreground-secondary: color(from var(--sapphire-global-color-blue-900) xyz x y z / .65);--sapphire-semantic-color-foreground-secondary-alpha: .65;--sapphire-semantic-color-background-decorative-neutral: var(--sapphire-global-color-white);--sapphire-semantic-color-background-surface: var(--sapphire-global-color-sand-50);--sapphire-semantic-color-background-warning-subtle: var(--sapphire-global-color-alpha-yellow-100);--sapphire-semantic-color-background-action-danger-secondary-default: var(--sapphire-global-color-white);--sapphire-semantic-color-background-action-secondary-default: var(--sapphire-global-color-white);--sapphire-semantic-color-border-field-default: color(from var(--sapphire-global-color-blue-900) xyz x y z / .51);--sapphire-semantic-color-border-field-default-alpha: .51;--sapphire-semantic-color-state-negative-subtle-active: color(from var(--sapphire-global-color-red-600) xyz x y z / .16);--sapphire-semantic-color-state-negative-subtle-active-alpha: .16;--sapphire-semantic-color-state-negative-subtle-hover: color(from var(--sapphire-global-color-red-600) xyz x y z / .12);--sapphire-semantic-color-state-negative-subtle-hover-alpha: .12;--sapphire-semantic-color-state-neutral-active: color(from var(--sapphire-global-color-sand-900) xyz x y z / .14);--sapphire-semantic-color-state-neutral-active-alpha: .14;--sapphire-semantic-color-state-neutral-hover: color(from var(--sapphire-global-color-sand-900) xyz x y z / .1);--sapphire-semantic-color-state-neutral-hover-alpha: .1;--sapphire-semantic-color-state-accent-subtle-active: color(from var(--sapphire-global-color-blue-500) xyz x y z / .12);--sapphire-semantic-color-state-accent-subtle-active-alpha: .12;--sapphire-semantic-color-state-accent-subtle-hover: color(from var(--sapphire-global-color-blue-500) xyz x y z / .1);--sapphire-semantic-color-state-accent-subtle-hover-alpha: .1}.sapphire-theme-default.sapphire-theme--tertiary,.sapphire-theme-default .sapphire-theme--tertiary,:host .sapphire-theme--tertiary,:host ::ng-deep .sapphire-theme--tertiary{--sapphire-semantic-color-foreground-positive: var(--sapphire-global-color-alpha-green-600);--sapphire-semantic-color-foreground-negative: var(--sapphire-global-color-alpha-red-600);--sapphire-semantic-color-foreground-secondary: color(from var(--sapphire-global-color-blue-900) xyz x y z / .665);--sapphire-semantic-color-foreground-secondary-alpha: .665;--sapphire-semantic-color-background-decorative-neutral: var(--sapphire-global-color-white);--sapphire-semantic-color-background-surface: var(--sapphire-global-color-sand-100);--sapphire-semantic-color-background-warning-subtle: var(--sapphire-global-color-alpha-yellow-100);--sapphire-semantic-color-background-neutral-subtle: var(--sapphire-global-color-alpha-sand-100);--sapphire-semantic-color-background-action-danger-secondary-default: var(--sapphire-global-color-white);--sapphire-semantic-color-background-action-secondary-default: var(--sapphire-global-color-white);--sapphire-semantic-color-border-field-default: color(from var(--sapphire-global-color-blue-900) xyz x y z / .54);--sapphire-semantic-color-border-field-default-alpha: .54;--sapphire-semantic-color-state-negative-subtle-active: color(from var(--sapphire-global-color-red-600) xyz x y z / .2);--sapphire-semantic-color-state-negative-subtle-active-alpha: .2;--sapphire-semantic-color-state-negative-subtle-hover: color(from var(--sapphire-global-color-red-600) xyz x y z / .16);--sapphire-semantic-color-state-negative-subtle-hover-alpha: .16;--sapphire-semantic-color-state-neutral-active: color(from var(--sapphire-global-color-sand-900) xyz x y z / .18);--sapphire-semantic-color-state-neutral-active-alpha: .18;--sapphire-semantic-color-state-neutral-hover: color(from var(--sapphire-global-color-sand-900) xyz x y z / .14);--sapphire-semantic-color-state-neutral-hover-alpha: .14;--sapphire-semantic-color-state-accent-subtle-active: color(from var(--sapphire-global-color-blue-500) xyz x y z / .18);--sapphire-semantic-color-state-accent-subtle-active-alpha: .18;--sapphire-semantic-color-state-accent-subtle-hover: color(from var(--sapphire-global-color-blue-500) xyz x y z / .14);--sapphire-semantic-color-state-accent-subtle-hover-alpha: .14}.sapphire-theme-default.sapphire-theme--contrast,.sapphire-theme-default .sapphire-theme--contrast,:host .sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-global-shadow-md: 0px 0px 0px .5px hsl(0 0% 100% / .1) inset, 0px 4px 16px 0px hsl(212 63% 12% / .04);--sapphire-global-color-alpha-yellow-950: hsl(24 100% 14% / .902);--sapphire-global-color-alpha-yellow-900: hsl(25 100% 27% / .733);--sapphire-global-color-alpha-yellow-800: hsl(27 100% 37% / .705);--sapphire-global-color-alpha-yellow-700: hsl(31 100% 38% / .846);--sapphire-global-color-alpha-yellow-600: hsl(36 100% 44% / .902);--sapphire-global-color-alpha-yellow-500: hsl(41 100% 51% / .905);--sapphire-global-color-alpha-yellow-400: hsl(46 100% 55% / .971);--sapphire-global-color-alpha-yellow-300: hsl(46 100% 65% / .987);--sapphire-global-color-alpha-yellow-200: hsl(50 100% 77% / .979);--sapphire-global-color-alpha-yellow-100: hsl(51 100% 89% / .987);--sapphire-global-color-alpha-yellow-50: hsl(53 100% 92%);--sapphire-global-color-alpha-green-950: hsl(87 100% 10% / .508);--sapphire-global-color-alpha-green-900: hsl(86 100% 27% / .254);--sapphire-global-color-alpha-green-800: hsl(90 100% 56% / .198);--sapphire-global-color-alpha-green-700: hsl(101 100% 62% / .278);--sapphire-global-color-alpha-green-600: hsl(111 100% 64% / .396);--sapphire-global-color-alpha-green-500: hsl(113 100% 64% / .489);--sapphire-global-color-alpha-green-400: hsl(116 100% 70% / .662);--sapphire-global-color-alpha-green-300: hsl(117 100% 79% / .733);--sapphire-global-color-alpha-green-200: hsl(118 100% 86% / .83);--sapphire-global-color-alpha-green-100: hsl(120 100% 92% / .906);--sapphire-global-color-alpha-green-50: hsl(120 100% 97% / .939);--sapphire-global-color-alpha-red-950: hsl(7 100% 12% / .648);--sapphire-global-color-alpha-red-900: hsl(10 100% 30% / .423);--sapphire-global-color-alpha-red-800: hsl(5 100% 56% / .413);--sapphire-global-color-alpha-red-700: hsl(3 100% 59% / .564);--sapphire-global-color-alpha-red-600: hsl(1 100% 61% / .701);--sapphire-global-color-alpha-red-500: hsl(1 100% 60% / .826);--sapphire-global-color-alpha-red-400: hsl(1 100% 68% / .963);--sapphire-global-color-alpha-red-300: hsl(1 100% 75% / .979);--sapphire-global-color-alpha-red-200: hsl(2 100% 84%);--sapphire-global-color-alpha-red-100: hsl(4 100% 92%);--sapphire-global-color-alpha-red-50: hsl(0 100% 96% / .991);--sapphire-global-color-alpha-blue-950: hsl(210 100% 11% / .667);--sapphire-global-color-alpha-blue-900: hsl(210 100% 17% / .667);--sapphire-global-color-alpha-blue-800: hsl(211 100% 28% / .667);--sapphire-global-color-alpha-blue-700: hsl(211 100% 39% / .667);--sapphire-global-color-alpha-blue-600: hsl(212 100% 50% / .699);--sapphire-global-color-alpha-blue-500: hsl(215 100% 50% / .894);--sapphire-global-color-alpha-sand-950: hsl(33 100% 24% / .31);--sapphire-global-color-alpha-sand-900: hsl(35 100% 58% / .224);--sapphire-global-color-alpha-sand-800: hsl(38 100% 66% / .307);--sapphire-global-color-alpha-sand-700: hsl(38 100% 72% / .39);--sapphire-global-color-alpha-sand-600: hsl(38 100% 76% / .476);--sapphire-global-color-alpha-sand-500: hsl(39 100% 84% / .586);--sapphire-global-color-alpha-sand-400: hsl(42 100% 88% / .723);--sapphire-global-color-alpha-sand-300: hsl(45 100% 92% / .802);--sapphire-global-color-alpha-sand-200: hsl(44 100% 97% / .885);--sapphire-global-color-alpha-sand-100: hsl(53 100% 98% / .92);--sapphire-global-color-alpha-sand-50: hsl(40 100% 99% / .96);--sapphire-global-color-alpha-gray-900: hsl(215 97% 75% / .087);--sapphire-global-color-alpha-gray-800: hsl(221 100% 81% / .144);--sapphire-global-color-alpha-gray-700: hsl(214 100% 85% / .254);--sapphire-global-color-alpha-gray-600: hsl(213 100% 85% / .363);--sapphire-global-color-alpha-gray-500: hsl(212 100% 89% / .508);--sapphire-global-color-alpha-gray-400: hsl(211 100% 91% / .663);--sapphire-global-color-alpha-gray-300: hsl(211 100% 95% / .803);--sapphire-global-color-alpha-gray-200: hsl(212 100% 97% / .871);--sapphire-global-color-alpha-gray-100: hsl(207 100% 98% / .926);--sapphire-global-color-alpha-gray-50: hsl(200 100% 99% / .966);--sapphire-semantic-color-foreground-on-decorative-neutral: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-warning-subtle: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-warning: var(--sapphire-global-color-yellow-900);--sapphire-semantic-color-foreground-on-positive-subtle: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-negative-subtle: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-accent-subtle: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-positive: var(--sapphire-global-color-alpha-green-400);--sapphire-semantic-color-foreground-warning: var(--sapphire-global-color-alpha-yellow-400);--sapphire-semantic-color-foreground-negative: var(--sapphire-global-color-alpha-red-400);--sapphire-semantic-color-foreground-secondary: color(from var(--sapphire-global-color-gray-50) xyz x y z / .55);--sapphire-semantic-color-foreground-secondary-alpha: .55;--sapphire-semantic-color-foreground-primary: var(--sapphire-global-color-gray-50);--sapphire-semantic-color-background-decorative-neutral: var(--sapphire-global-color-alpha-gray-800);--sapphire-semantic-color-background-popover: var(--sapphire-global-color-gray-800);--sapphire-semantic-color-background-surface: var(--sapphire-global-color-gray-900);--sapphire-semantic-color-background-field: var(--sapphire-global-color-gray-800);--sapphire-semantic-color-background-warning-subtle: var(--sapphire-global-color-alpha-yellow-900);--sapphire-semantic-color-background-positive-subtle: var(--sapphire-global-color-alpha-green-800);--sapphire-semantic-color-background-negative-subtle: var(--sapphire-global-color-alpha-red-800);--sapphire-semantic-color-background-accent-subtle: var(--sapphire-global-color-alpha-blue-800);--sapphire-semantic-color-background-neutral-subtle: var(--sapphire-global-color-alpha-gray-900);--sapphire-semantic-color-background-progress-track: var(--sapphire-global-color-alpha-gray-700);--sapphire-semantic-color-background-segmented-control-knob: var(--sapphire-global-color-alpha-gray-600);--sapphire-semantic-color-background-segmented-control-track: var(--sapphire-global-color-alpha-gray-800);--sapphire-semantic-color-background-switch-default: var(--sapphire-global-color-alpha-gray-600);--sapphire-semantic-color-background-action-highlight: var(--sapphire-global-color-alpha-gray-900);--sapphire-semantic-color-background-action-secondary-default: var(--sapphire-global-color-alpha-gray-800);--sapphire-semantic-color-border-field-default: color(from var(--sapphire-global-color-gray-50) xyz x y z / .32);--sapphire-semantic-color-border-field-default-alpha: .32;--sapphire-semantic-color-border-tertiary: color(from var(--sapphire-global-color-gray-50) xyz x y z / .06);--sapphire-semantic-color-border-tertiary-alpha: .06;--sapphire-semantic-color-border-secondary: color(from var(--sapphire-global-color-gray-50) xyz x y z / .08);--sapphire-semantic-color-border-secondary-alpha: .08;--sapphire-semantic-color-border-primary: color(from var(--sapphire-global-color-gray-50) xyz x y z / .16);--sapphire-semantic-color-border-primary-alpha: .16;--sapphire-semantic-color-state-border-active: color(from var(--sapphire-global-color-gray-100) xyz x y z / .2);--sapphire-semantic-color-state-border-active-alpha: .2;--sapphire-semantic-color-state-border-hover: color(from var(--sapphire-global-color-gray-100) xyz x y z / .12);--sapphire-semantic-color-state-border-hover-alpha: .12;--sapphire-semantic-color-state-negative-subtle-active: color(from var(--sapphire-global-color-red-100) xyz x y z / .12);--sapphire-semantic-color-state-negative-subtle-active-alpha: .12;--sapphire-semantic-color-state-negative-subtle-hover: color(from var(--sapphire-global-color-red-100) xyz x y z / .08);--sapphire-semantic-color-state-negative-subtle-hover-alpha: .08;--sapphire-semantic-color-state-negative-active: color(from var(--sapphire-global-color-red-100) xyz x y z / .2);--sapphire-semantic-color-state-negative-active-alpha: .2;--sapphire-semantic-color-state-negative-hover: color(from var(--sapphire-global-color-red-100) xyz x y z / .12);--sapphire-semantic-color-state-negative-hover-alpha: .12;--sapphire-semantic-color-state-neutral-ghost-active: color(from var(--sapphire-global-color-gray-200) xyz x y z / .1);--sapphire-semantic-color-state-neutral-ghost-active-alpha: .1;--sapphire-semantic-color-state-neutral-ghost-hover: color(from var(--sapphire-global-color-gray-200) xyz x y z / .06);--sapphire-semantic-color-state-neutral-ghost-hover-alpha: .06;--sapphire-semantic-color-state-neutral-active: color(from var(--sapphire-global-color-gray-200) xyz x y z / .1);--sapphire-semantic-color-state-neutral-active-alpha: .1;--sapphire-semantic-color-state-neutral-hover: color(from var(--sapphire-global-color-gray-200) xyz x y z / .06);--sapphire-semantic-color-state-neutral-hover-alpha: .06;--sapphire-semantic-color-state-accent-active: color(from var(--sapphire-global-color-blue-100) xyz x y z / .2);--sapphire-semantic-color-state-accent-active-alpha: .2;--sapphire-semantic-color-state-accent-hover: color(from var(--sapphire-global-color-blue-100) xyz x y z / .12);--sapphire-semantic-color-state-accent-hover-alpha: .12;--sapphire-global-color-alpha-blue-400: var(--sapphire-global-color-blue-400);--sapphire-global-color-alpha-blue-300: var(--sapphire-global-color-blue-300);--sapphire-global-color-alpha-blue-200: var(--sapphire-global-color-blue-200);--sapphire-global-color-alpha-blue-100: var(--sapphire-global-color-blue-100);--sapphire-global-color-alpha-blue-50: var(--sapphire-global-color-blue-50);--sapphire-semantic-color-foreground-accent: var(--sapphire-global-color-alpha-blue-400);--sapphire-semantic-color-background-progress-fill: var(--sapphire-semantic-color-background-accent)}::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}::ng-deep .cdk-overlay-transparent-backdrop{visibility:visible!important;opacity:0!important}:host{color-scheme:light}\n"] });
|
|
7085
6415
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ThemeDefault, decorators: [{
|
|
7086
6416
|
type: Component,
|
|
7087
|
-
args: [{ selector: 'sp-theme-default', standalone: true, template: '<ng-content></ng-content>', hostDirectives: [ThemeBaseDirective], styles: ["@keyframes backdrop-fade-in{0%{background:transparent}to{background:var(--sapphire-semantic-color-background-backdrop)}}@keyframes backdrop-fade-out{0%{background:var(--sapphire-semantic-color-background-backdrop)}to{background: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:var(--sapphire-semantic-transitions-fade);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--tertiary,:host ::ng-deep .sapphire-theme--tertiary,.sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-semantic-size-breakpoint-xl: 1400px;--sapphire-semantic-size-breakpoint-lg: 1200px;--sapphire-semantic-size-breakpoint-md: 960px;--sapphire-semantic-size-breakpoint-sm: 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-default-bold: 600;--sapphire-semantic-font-weight-default-medium: 500;--sapphire-semantic-font-weight-default-regular: 400;--sapphire-semantic-font-weight-default-light: 300;--sapphire-global-transitions-ease-in: cubic-bezier(0, 0, 0, 1);--sapphire-global-transitions-ease-in-out-quick: cubic-bezier(.5, 0, 0, 1);--sapphire-global-transitions-ease-in-out: cubic-bezier(.7, 0, .2, 1);--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.3;--sapphire-global-size-font-300: 3rem;--sapphire-global-size-font-250: 2.5rem;--sapphire-global-size-font-200: 2rem;--sapphire-global-size-font-175: 1.75rem;--sapphire-global-size-font-163: 1.625rem;--sapphire-global-size-font-150: 1.5rem;--sapphire-global-size-font-125: 1.25rem;--sapphire-global-size-font-112: 1.125rem;--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-110: 2.75rem;--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-40: 16px;--sapphire-global-size-static-30: 12px;--sapphire-global-size-static-20: 8px;--sapphire-global-size-static-15: 6px;--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-md: 0px 0px 0px 1px hsl(212 63% 12% / .1) inset, 0px 4px 24px 0px hsl(212 63% 12% / .04);--sapphire-global-opacity-30: .3;--sapphire-global-font-danske-name: \"Danske\";--sapphire-global-color-secondary-green-4: hsl(137 64% 78%);--sapphire-global-color-secondary-green-3: hsl(152 42% 56%);--sapphire-global-color-secondary-green-2: hsl(152 44% 38%);--sapphire-global-color-secondary-green-1: hsl(158 58% 19%);--sapphire-global-color-secondary-copper-4: hsl(23 69% 75%);--sapphire-global-color-secondary-copper-3: hsl(19 61% 60%);--sapphire-global-color-secondary-copper-2: hsl(18 57% 41%);--sapphire-global-color-secondary-copper-1: hsl(12 65% 23%);--sapphire-global-color-secondary-gold-4: hsl(45 63% 69%);--sapphire-global-color-secondary-gold-3: hsl(39 49% 54%);--sapphire-global-color-secondary-gold-2: hsl(37 57% 36%);--sapphire-global-color-secondary-gold-1: hsl(37 68% 19%);--sapphire-global-color-secondary-blue-4: hsl(211 72% 72%);--sapphire-global-color-secondary-blue-3: hsl(214 59% 62%);--sapphire-global-color-secondary-blue-2: hsl(218 51% 52%);--sapphire-global-color-secondary-blue-1: hsl(212 100% 24%);--sapphire-global-color-alpha-yellow-950: hsl(23 100% 13% / .987);--sapphire-global-color-alpha-yellow-900: hsl(25 100% 19% / .963);--sapphire-global-color-alpha-yellow-800: hsl(27 100% 25% / .959);--sapphire-global-color-alpha-yellow-700: hsl(31 100% 32% / .979);--sapphire-global-color-alpha-yellow-600: hsl(36 100% 39% / .987);--sapphire-global-color-alpha-yellow-500: hsl(41 100% 45% / .975);--sapphire-global-color-alpha-yellow-400: hsl(46 100% 48% / .897);--sapphire-global-color-alpha-yellow-300: hsl(46 100% 49% / .697);--sapphire-global-color-alpha-yellow-200: hsl(51 100% 48% / .47);--sapphire-global-color-alpha-yellow-100: hsl(51 100% 47% / .235);--sapphire-global-color-alpha-yellow-50: hsl(53 100% 50% / .161);--sapphire-global-color-alpha-green-950: hsl(129 100% 4% / .944);--sapphire-global-color-alpha-green-900: hsl(130 100% 6% / .916);--sapphire-global-color-alpha-green-800: hsl(128 100% 8% / .885);--sapphire-global-color-alpha-green-700: hsl(128 100% 11% / .862);--sapphire-global-color-alpha-green-600: hsl(127 100% 17% / .842);--sapphire-global-color-alpha-green-500: hsl(124 100% 21% / .822);--sapphire-global-color-alpha-green-400: hsl(122 100% 28% / .701);--sapphire-global-color-alpha-green-300: hsl(124 100% 28% / .56);--sapphire-global-color-alpha-green-200: hsl(124 100% 30% / .388);--sapphire-global-color-alpha-green-100: hsl(125 100% 11% / .231);--sapphire-global-color-alpha-green-50: hsl(129 100% 25% / .11);--sapphire-global-color-alpha-red-950: hsl(358 100% 6% / .957);--sapphire-global-color-alpha-red-900: hsl(1 100% 10% / .92);--sapphire-global-color-alpha-red-800: hsl(359 100% 17% / .877);--sapphire-global-color-alpha-red-700: hsl(359 100% 24% / .842);--sapphire-global-color-alpha-red-600: hsl(359 100% 32% / .819);--sapphire-global-color-alpha-red-500: hsl(0 100% 39% / .815);--sapphire-global-color-alpha-red-400: hsl(1 100% 47% / .65);--sapphire-global-color-alpha-red-300: hsl(1 100% 48% / .501);--sapphire-global-color-alpha-red-200: hsl(2 100% 50% / .325);--sapphire-global-color-alpha-red-100: hsl(4 100% 50% / .169);--sapphire-global-color-alpha-red-50: hsl(0 98% 45% / .079);--sapphire-global-color-alpha-blue-500: hsl(215 99% 45% / .995);--sapphire-global-color-alpha-blue-400: hsl(216 100% 50% / .74);--sapphire-global-color-alpha-blue-300: hsl(215 100% 50% / .513);--sapphire-global-color-alpha-blue-200: hsl(214 100% 50% / .349);--sapphire-global-color-alpha-blue-100: hsl(214 100% 50% / .2);--sapphire-global-color-alpha-blue-50: hsl(219 100% 50% / .091);--sapphire-global-color-alpha-sand-950: hsl(40 100% 3% / .905);--sapphire-global-color-alpha-sand-900: hsl(41 100% 5% / .858);--sapphire-global-color-alpha-sand-800: hsl(43 100% 7% / .803);--sapphire-global-color-alpha-sand-700: hsl(42 100% 9% / .74);--sapphire-global-color-alpha-sand-600: hsl(42 100% 12% / .678);--sapphire-global-color-alpha-sand-500: hsl(43 100% 12% / .548);--sapphire-global-color-alpha-sand-400: hsl(39 100% 17% / .411);--sapphire-global-color-alpha-sand-300: hsl(48 100% 17% / .294);--sapphire-global-color-alpha-sand-200: hsl(48 100% 13% / .153);--sapphire-global-color-alpha-sand-100: hsl(60 100% 10% / .098);--sapphire-global-color-alpha-sand-50: hsl(60 100% 10% / .043);--sapphire-global-color-alpha-gray-900: hsl(211 63% 13% / .952);--sapphire-global-color-alpha-gray-800: hsl(213 100% 9% / .909);--sapphire-global-color-alpha-gray-700: hsl(213 100% 11% / .819);--sapphire-global-color-alpha-gray-600: hsl(212 100% 13% / .74);--sapphire-global-color-alpha-gray-500: hsl(212 100% 15% / .603);--sapphire-global-color-alpha-gray-400: hsl(211 100% 18% / .455);--sapphire-global-color-alpha-gray-300: hsl(211 100% 20% / .282);--sapphire-global-color-alpha-gray-200: hsl(210 100% 21% / .188);--sapphire-global-color-alpha-gray-100: hsl(208 98% 23% / .114);--sapphire-global-color-alpha-gray-50: hsl(206 100% 25% / .055);--sapphire-global-color-yellow-950: hsl(24 91% 14%);--sapphire-global-color-yellow-900: hsl(25 84% 22%);--sapphire-global-color-yellow-800: hsl(27 86% 28%);--sapphire-global-color-yellow-700: hsl(31 94% 33%);--sapphire-global-color-yellow-600: hsl(36 97% 40%);--sapphire-global-color-yellow-500: hsl(41 95% 46%);--sapphire-global-color-yellow-400: hsl(46 94% 54%);--sapphire-global-color-yellow-300: hsl(46 97% 65%);--sapphire-global-color-yellow-200: hsl(51 92% 75%);--sapphire-global-color-yellow-100: hsl(51 90% 88%);--sapphire-global-color-yellow-50: hsl(53 100% 92%);--sapphire-global-color-green-950: hsl(129 42% 9%);--sapphire-global-color-green-900: hsl(131 40% 14%);--sapphire-global-color-green-800: hsl(128 38% 18%);--sapphire-global-color-green-700: hsl(129 41% 23%);--sapphire-global-color-green-600: hsl(127 47% 30%);--sapphire-global-color-green-500: hsl(125 50% 35%);--sapphire-global-color-green-400: hsl(122 39% 49%);--sapphire-global-color-green-300: hsl(124 39% 60%);--sapphire-global-color-green-200: hsl(124 42% 73%);--sapphire-global-color-green-100: hsl(125 46% 84%);--sapphire-global-color-green-50: hsl(129 33% 92%);--sapphire-global-color-red-950: hsl(358 57% 10%);--sapphire-global-color-red-900: hsl(1 53% 17%);--sapphire-global-color-red-800: hsl(358 55% 27%);--sapphire-global-color-red-700: hsl(359 57% 36%);--sapphire-global-color-red-600: hsl(359 59% 44%);--sapphire-global-color-red-500: hsl(0 65% 51%);--sapphire-global-color-red-400: hsl(1 90% 66%);--sapphire-global-color-red-300: hsl(1 92% 74%);--sapphire-global-color-red-200: hsl(2 100% 84%);--sapphire-global-color-red-100: hsl(4 100% 92%);--sapphire-global-color-red-50: hsl(0 82% 96%);--sapphire-global-color-blue-950: hsl(210 100% 9%);--sapphire-global-color-blue-900: hsl(210 100% 14%);--sapphire-global-color-blue-800: hsl(211 100% 21%);--sapphire-global-color-blue-700: hsl(211 100% 28%);--sapphire-global-color-blue-600: hsl(212 100% 37%);--sapphire-global-color-blue-500: hsl(218 92% 49%);--sapphire-global-color-blue-400: hsl(216 100% 63%);--sapphire-global-color-blue-300: hsl(215 100% 74%);--sapphire-global-color-blue-200: hsl(214 100% 83%);--sapphire-global-color-blue-100: hsl(214 100% 90%);--sapphire-global-color-blue-50: hsl(219 100% 95%);--sapphire-global-color-sand-950: hsl(39 23% 12%);--sapphire-global-color-sand-900: hsl(41 23% 18%);--sapphire-global-color-sand-800: hsl(43 22% 25%);--sapphire-global-color-sand-700: hsl(42 20% 33%);--sapphire-global-color-sand-600: hsl(42 20% 40%);--sapphire-global-color-sand-500: hsl(43 14% 52%);--sapphire-global-color-sand-400: hsl(39 20% 66%);--sapphire-global-color-sand-300: hsl(48 20% 75%);--sapphire-global-color-sand-200: hsl(48 15% 87%);--sapphire-global-color-sand-100: hsl(60 11% 91%);--sapphire-global-color-sand-50: hsl(60 9% 96%);--sapphire-global-color-gray-950: hsl(210 94% 7%);--sapphire-global-color-gray-900: hsl(211 64% 13%);--sapphire-global-color-gray-800: hsl(213 48% 17%);--sapphire-global-color-gray-700: hsl(212 33% 27%);--sapphire-global-color-gray-600: hsl(212 27% 35%);--sapphire-global-color-gray-500: hsl(211 19% 49%);--sapphire-global-color-gray-400: hsl(211 22% 63%);--sapphire-global-color-gray-300: hsl(211 22% 77%);--sapphire-global-color-gray-200: hsl(210 26% 85%);--sapphire-global-color-gray-100: hsl(208 29% 91%);--sapphire-global-color-gray-50: hsl(206 33% 96%);--sapphire-global-color-transparent: hsla(0, 0%, 100%, 0);--sapphire-global-color-black: hsla(0, 0%, 0%, 1);--sapphire-global-color-white: hsla(0, 0%, 100%, 1);--sapphire-semantic-transitions-fade: var(--sapphire-global-transitions-ease-in);--sapphire-semantic-transitions-dynamic: var(--sapphire-global-transitions-ease-in-out-quick);--sapphire-semantic-transitions-standard: var(--sapphire-global-transitions-ease-in-out);--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-6xl: var(--sapphire-global-size-generic-180);--sapphire-semantic-size-spacing-5xl: var(--sapphire-global-size-generic-160);--sapphire-semantic-size-spacing-4xl: var(--sapphire-global-size-generic-120);--sapphire-semantic-size-spacing-3xl: var(--sapphire-global-size-generic-100);--sapphire-semantic-size-spacing-2xl: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-spacing-xl: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-spacing-lg: var(--sapphire-global-size-generic-50);--sapphire-semantic-size-spacing-md: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-spacing-sm: var(--sapphire-global-size-generic-30);--sapphire-semantic-size-spacing-xs: var(--sapphire-global-size-generic-20);--sapphire-semantic-size-spacing-2xs: var(--sapphire-global-size-generic-15);--sapphire-semantic-size-spacing-3xs: var(--sapphire-global-size-generic-10);--sapphire-semantic-size-spacing-4xs: 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-heading-2xl: var(--sapphire-global-size-font-175);--sapphire-semantic-size-font-heading-xl: var(--sapphire-global-size-font-150);--sapphire-semantic-size-font-heading-lg: var(--sapphire-global-size-font-125);--sapphire-semantic-size-font-heading-md: var(--sapphire-global-size-font-125);--sapphire-semantic-size-font-heading-sm: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-heading-xs: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-body-lg: var(--sapphire-global-size-font-112);--sapphire-semantic-size-font-body-md: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-body-sm: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-body-xs: var(--sapphire-global-size-font-75);--sapphire-semantic-size-radius-2xl: var(--sapphire-global-size-static-40);--sapphire-semantic-size-radius-xl: var(--sapphire-global-size-static-30);--sapphire-semantic-size-radius-lg: var(--sapphire-global-size-static-20);--sapphire-semantic-size-radius-md: var(--sapphire-global-size-static-15);--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-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-field: var(--sapphire-global-size-generic-750);--sapphire-semantic-size-height-box-md: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-height-control-4xl: var(--sapphire-global-size-generic-200);--sapphire-semantic-size-height-control-3xl: var(--sapphire-global-size-generic-180);--sapphire-semantic-size-height-control-2xl: var(--sapphire-global-size-generic-160);--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-30);--sapphire-semantic-font-name-default: var(--sapphire-global-font-danske-name);--sapphire-semantic-color-foreground-on-decorative-neutral: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-16: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-15: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-14: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-13: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-12: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-11: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-10: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-9: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-8: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-7: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-6: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-5: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-4: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-3: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-2: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-1: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-signature: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-warning-subtle: var(--sapphire-global-color-alpha-yellow-800);--sapphire-semantic-color-foreground-on-warning: var(--sapphire-global-color-alpha-yellow-900);--sapphire-semantic-color-foreground-on-positive: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-negative: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-accent: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-positive: var(--sapphire-global-color-alpha-green-500);--sapphire-semantic-color-foreground-warning: var(--sapphire-global-color-alpha-yellow-700);--sapphire-semantic-color-foreground-negative: var(--sapphire-global-color-alpha-red-500);--sapphire-semantic-color-foreground-accent: var(--sapphire-global-color-alpha-blue-500);--sapphire-semantic-color-foreground-secondary: color(from var(--sapphire-global-color-blue-900) xyz x y z / .64);--sapphire-semantic-color-foreground-secondary-alpha: .64;--sapphire-semantic-color-foreground-primary: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-background-decorative-neutral: var(--sapphire-global-color-alpha-sand-50);--sapphire-semantic-color-background-decorative-16: var(--sapphire-global-color-secondary-green-4);--sapphire-semantic-color-background-decorative-15: var(--sapphire-global-color-secondary-green-3);--sapphire-semantic-color-background-decorative-14: var(--sapphire-global-color-secondary-green-2);--sapphire-semantic-color-background-decorative-13: var(--sapphire-global-color-secondary-green-1);--sapphire-semantic-color-background-decorative-12: var(--sapphire-global-color-secondary-copper-4);--sapphire-semantic-color-background-decorative-11: var(--sapphire-global-color-secondary-copper-3);--sapphire-semantic-color-background-decorative-10: var(--sapphire-global-color-secondary-copper-2);--sapphire-semantic-color-background-decorative-9: var(--sapphire-global-color-secondary-copper-1);--sapphire-semantic-color-background-decorative-8: var(--sapphire-global-color-secondary-gold-4);--sapphire-semantic-color-background-decorative-7: var(--sapphire-global-color-secondary-gold-3);--sapphire-semantic-color-background-decorative-6: var(--sapphire-global-color-secondary-gold-2);--sapphire-semantic-color-background-decorative-5: var(--sapphire-global-color-secondary-gold-1);--sapphire-semantic-color-background-decorative-4: var(--sapphire-global-color-secondary-blue-4);--sapphire-semantic-color-background-decorative-3: var(--sapphire-global-color-secondary-blue-3);--sapphire-semantic-color-background-decorative-2: var(--sapphire-global-color-secondary-blue-2);--sapphire-semantic-color-background-decorative-1: var(--sapphire-global-color-secondary-blue-1);--sapphire-semantic-color-background-popover: var(--sapphire-global-color-white);--sapphire-semantic-color-background-backdrop: color(from var(--sapphire-global-color-gray-950) xyz x y z / .6);--sapphire-semantic-color-background-backdrop-alpha: .6;--sapphire-semantic-color-background-surface: var(--sapphire-global-color-white);--sapphire-semantic-color-background-field: var(--sapphire-global-color-white);--sapphire-semantic-color-background-warning-subtle: var(--sapphire-global-color-alpha-yellow-50);--sapphire-semantic-color-background-positive-subtle: var(--sapphire-global-color-alpha-green-50);--sapphire-semantic-color-background-negative-subtle: var(--sapphire-global-color-alpha-red-50);--sapphire-semantic-color-background-accent-subtle: var(--sapphire-global-color-alpha-blue-50);--sapphire-semantic-color-background-neutral-subtle: var(--sapphire-global-color-alpha-sand-50);--sapphire-semantic-color-background-negative: var(--sapphire-global-color-red-500);--sapphire-semantic-color-background-warning: var(--sapphire-global-color-yellow-300);--sapphire-semantic-color-background-positive: var(--sapphire-global-color-green-500);--sapphire-semantic-color-background-accent: var(--sapphire-global-color-blue-500);--sapphire-semantic-color-background-signature: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-background-segmented-control-knob: var(--sapphire-global-color-white);--sapphire-semantic-color-background-segmented-control-track: var(--sapphire-global-color-alpha-sand-100);--sapphire-semantic-color-background-switch-default: var(--sapphire-global-color-alpha-sand-200);--sapphire-semantic-color-background-action-highlight: var(--sapphire-global-color-alpha-sand-50);--sapphire-semantic-color-background-action-select-tertiary-default: var(--sapphire-global-color-transparent);--sapphire-semantic-color-background-action-danger-tertiary-default: var(--sapphire-global-color-transparent);--sapphire-semantic-color-background-action-tertiary-default: var(--sapphire-global-color-transparent);--sapphire-semantic-color-background-action-secondary-default: var(--sapphire-global-color-alpha-sand-100);--sapphire-semantic-color-focus-ring: var(--sapphire-global-color-blue-400);--sapphire-semantic-color-border-negative-default: var(--sapphire-global-color-red-500);--sapphire-semantic-color-border-accent: var(--sapphire-global-color-blue-500);--sapphire-semantic-color-border-tertiary: color(from var(--sapphire-global-color-blue-900) xyz x y z / .06);--sapphire-semantic-color-border-tertiary-alpha: .06;--sapphire-semantic-color-border-secondary: color(from var(--sapphire-global-color-blue-900) xyz x y z / .08);--sapphire-semantic-color-border-secondary-alpha: .08;--sapphire-semantic-color-border-primary: color(from var(--sapphire-global-color-blue-900) xyz x y z / .16);--sapphire-semantic-color-border-primary-alpha: .16;--sapphire-semantic-color-state-border-active: color(from var(--sapphire-global-color-blue-900) xyz x y z / .2);--sapphire-semantic-color-state-border-active-alpha: .2;--sapphire-semantic-color-state-border-hover: color(from var(--sapphire-global-color-blue-900) xyz x y z / .12);--sapphire-semantic-color-state-border-hover-alpha: .12;--sapphire-semantic-color-state-negative-subtle-active: color(from var(--sapphire-global-color-red-500) xyz x y z / .1);--sapphire-semantic-color-state-negative-subtle-active-alpha: .1;--sapphire-semantic-color-state-negative-subtle-hover: color(from var(--sapphire-global-color-red-500) xyz x y z / .06);--sapphire-semantic-color-state-negative-subtle-hover-alpha: .06;--sapphire-semantic-color-state-negative-active: color(from var(--sapphire-global-color-red-900) xyz x y z / .2);--sapphire-semantic-color-state-negative-active-alpha: .2;--sapphire-semantic-color-state-negative-hover: color(from var(--sapphire-global-color-red-900) xyz x y z / .12);--sapphire-semantic-color-state-negative-hover-alpha: .12;--sapphire-semantic-color-state-neutral-ghost-active: color(from var(--sapphire-global-color-sand-900) xyz x y z / .1);--sapphire-semantic-color-state-neutral-ghost-active-alpha: .1;--sapphire-semantic-color-state-neutral-ghost-hover: color(from var(--sapphire-global-color-sand-900) xyz x y z / .06);--sapphire-semantic-color-state-neutral-ghost-hover-alpha: .06;--sapphire-semantic-color-state-neutral-active: color(from var(--sapphire-global-color-sand-900) xyz x y z / .1);--sapphire-semantic-color-state-neutral-active-alpha: .1;--sapphire-semantic-color-state-neutral-hover: color(from var(--sapphire-global-color-sand-900) xyz x y z / .06);--sapphire-semantic-color-state-neutral-hover-alpha: .06;--sapphire-semantic-color-state-accent-subtle-active: color(from var(--sapphire-global-color-blue-500) xyz x y z / .12);--sapphire-semantic-color-state-accent-subtle-active-alpha: .12;--sapphire-semantic-color-state-accent-subtle-hover: color(from var(--sapphire-global-color-blue-500) xyz x y z / .06);--sapphire-semantic-color-state-accent-subtle-hover-alpha: .06;--sapphire-semantic-color-state-accent-active: color(from var(--sapphire-global-color-blue-900) xyz x y z / .2);--sapphire-semantic-color-state-accent-active-alpha: .2;--sapphire-semantic-color-state-accent-hover: color(from var(--sapphire-global-color-blue-900) xyz x y z / .12);--sapphire-semantic-color-state-accent-hover-alpha: .12;--sapphire-global-color-alpha-blue-950: var(--sapphire-global-color-blue-950);--sapphire-global-color-alpha-blue-900: var(--sapphire-global-color-blue-900);--sapphire-global-color-alpha-blue-800: var(--sapphire-global-color-blue-800);--sapphire-global-color-alpha-blue-700: var(--sapphire-global-color-blue-700);--sapphire-global-color-alpha-blue-600: var(--sapphire-global-color-blue-600);--sapphire-global-color-alpha-gray-950: var(--sapphire-global-color-gray-950);--sapphire-semantic-size-spacing-container-horizontal-md: var(--sapphire-semantic-size-spacing-xl);--sapphire-semantic-size-spacing-container-horizontal-sm: var(--sapphire-semantic-size-spacing-sm);--sapphire-semantic-size-spacing-control-horizontal-lg: var(--sapphire-semantic-size-spacing-md);--sapphire-semantic-size-spacing-control-horizontal-md: var(--sapphire-semantic-size-spacing-sm);--sapphire-semantic-size-spacing-control-vertical-lg: var(--sapphire-semantic-size-spacing-sm);--sapphire-semantic-size-spacing-control-vertical-md: var(--sapphire-semantic-size-spacing-xs);--sapphire-semantic-size-spacing-control-vertical-sm: var(--sapphire-semantic-size-spacing-3xs);--sapphire-semantic-size-font-control-lg: var(--sapphire-semantic-size-font-body-md);--sapphire-semantic-size-font-control-md: var(--sapphire-semantic-size-font-body-sm);--sapphire-semantic-size-font-control-sm: var(--sapphire-semantic-size-font-body-xs);--sapphire-semantic-size-font-label-md: var(--sapphire-semantic-size-font-body-sm);--sapphire-semantic-size-font-label-sm: var(--sapphire-semantic-size-font-body-xs);--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-color-foreground-on-neutral-subtle: var(--sapphire-semantic-color-foreground-primary);--sapphire-semantic-color-foreground-on-positive-subtle: var(--sapphire-semantic-color-foreground-positive);--sapphire-semantic-color-foreground-on-negative-subtle: var(--sapphire-semantic-color-foreground-negative);--sapphire-semantic-color-foreground-on-accent-subtle: var(--sapphire-semantic-color-foreground-accent);--sapphire-semantic-color-foreground-action-danger-default: var(--sapphire-semantic-color-foreground-negative);--sapphire-semantic-color-foreground-action-link-default: var(--sapphire-semantic-color-foreground-accent);--sapphire-semantic-color-foreground-action-select-default: var(--sapphire-semantic-color-foreground-accent);--sapphire-semantic-color-foreground-action-on-select-default: var(--sapphire-semantic-color-foreground-on-accent);--sapphire-semantic-color-foreground-action-on-danger-default: var(--sapphire-semantic-color-foreground-on-negative);--sapphire-semantic-color-foreground-action-on-tertiary-default: var(--sapphire-semantic-color-foreground-primary);--sapphire-semantic-color-foreground-action-on-primary-default: var(--sapphire-semantic-color-foreground-on-accent);--sapphire-semantic-color-background-spinner-secondary: var(--sapphire-semantic-color-foreground-accent);--sapphire-semantic-color-background-spinner-primary: var(--sapphire-semantic-color-foreground-primary);--sapphire-semantic-color-background-skeleton: var(--sapphire-semantic-color-state-neutral-active);--sapphire-semantic-color-background-switch-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-active-alpha) * 100%), var(--sapphire-semantic-color-background-switch-default) calc((1 - var(--sapphire-semantic-color-state-neutral-active-alpha)) * 100%));--sapphire-semantic-color-background-switch-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-hover-alpha) * 100%), var(--sapphire-semantic-color-background-switch-default) calc((1 - var(--sapphire-semantic-color-state-neutral-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-select-tertiary-active: var(--sapphire-semantic-color-state-accent-subtle-active);--sapphire-semantic-color-background-action-select-tertiary-hover: var(--sapphire-semantic-color-state-accent-subtle-hover);--sapphire-semantic-color-background-action-select-secondary-default: var(--sapphire-semantic-color-background-accent-subtle);--sapphire-semantic-color-background-action-danger-tertiary-active: var(--sapphire-semantic-color-state-negative-subtle-active);--sapphire-semantic-color-background-action-danger-tertiary-hover: var(--sapphire-semantic-color-state-negative-subtle-hover);--sapphire-semantic-color-background-action-danger-secondary-default: var(--sapphire-semantic-color-background-negative-subtle);--sapphire-semantic-color-background-action-danger-default: var(--sapphire-semantic-color-background-negative);--sapphire-semantic-color-background-action-tertiary-active: var(--sapphire-semantic-color-state-neutral-ghost-active);--sapphire-semantic-color-background-action-tertiary-hover: var(--sapphire-semantic-color-state-neutral-ghost-hover);--sapphire-semantic-color-background-action-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-secondary-default) calc((1 - var(--sapphire-semantic-color-state-neutral-active-alpha)) * 100%));--sapphire-semantic-color-background-action-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-secondary-default) calc((1 - var(--sapphire-semantic-color-state-neutral-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-primary-default: var(--sapphire-semantic-color-background-accent);--sapphire-semantic-color-border-field-default: var(--sapphire-semantic-color-border-primary);--sapphire-semantic-color-border-negative-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-border-negative-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-border-negative-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-border-negative-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-danger-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-danger-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-link-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-link-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-link-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-link-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-select-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-select-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-select-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-select-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-select-tertiary-default: var(--sapphire-semantic-color-foreground-action-select-default);--sapphire-semantic-color-foreground-action-on-select-secondary-default: var(--sapphire-semantic-color-foreground-on-accent-subtle);--sapphire-semantic-color-foreground-action-on-select-active: var(--sapphire-semantic-color-foreground-action-on-select-default);--sapphire-semantic-color-foreground-action-on-select-hover: var(--sapphire-semantic-color-foreground-action-on-select-default);--sapphire-semantic-color-foreground-action-on-danger-tertiary-default: var(--sapphire-semantic-color-foreground-action-danger-default);--sapphire-semantic-color-foreground-action-on-danger-secondary-default: var(--sapphire-semantic-color-foreground-on-negative-subtle);--sapphire-semantic-color-foreground-action-on-danger-active: var(--sapphire-semantic-color-foreground-action-on-danger-default);--sapphire-semantic-color-foreground-action-on-danger-hover: var(--sapphire-semantic-color-foreground-action-on-danger-default);--sapphire-semantic-color-foreground-action-on-tertiary-active: var(--sapphire-semantic-color-foreground-action-on-tertiary-default);--sapphire-semantic-color-foreground-action-on-tertiary-hover: var(--sapphire-semantic-color-foreground-action-on-tertiary-default);--sapphire-semantic-color-foreground-action-on-secondary-default: var(--sapphire-semantic-color-foreground-on-neutral-subtle);--sapphire-semantic-color-foreground-action-on-primary-active: var(--sapphire-semantic-color-foreground-action-on-primary-default);--sapphire-semantic-color-foreground-action-on-primary-hover: var(--sapphire-semantic-color-foreground-action-on-primary-default);--sapphire-semantic-color-background-action-select-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-subtle-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-subtle-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-subtle-active-alpha)) * 100%));--sapphire-semantic-color-background-action-select-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-subtle-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-subtle-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-subtle-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-select-default: var(--sapphire-semantic-color-background-action-primary-default);--sapphire-semantic-color-background-action-danger-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-subtle-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-subtle-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-subtle-active-alpha)) * 100%));--sapphire-semantic-color-background-action-danger-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-subtle-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-subtle-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-subtle-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-danger-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-background-action-danger-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-primary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-primary-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-background-action-primary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-primary-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-border-field-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-border-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-border-active-alpha) * 100%), var(--sapphire-semantic-color-border-field-default) calc((1 - var(--sapphire-semantic-color-state-border-active-alpha)) * 100%));--sapphire-semantic-color-border-field-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-border-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-border-hover-alpha) * 100%), var(--sapphire-semantic-color-border-field-default) calc((1 - var(--sapphire-semantic-color-state-border-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-select-tertiary-active: var(--sapphire-semantic-color-foreground-action-select-active);--sapphire-semantic-color-foreground-action-on-select-tertiary-hover: var(--sapphire-semantic-color-foreground-action-select-hover);--sapphire-semantic-color-foreground-action-on-select-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-select-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-danger-tertiary-active: var(--sapphire-semantic-color-foreground-action-danger-active);--sapphire-semantic-color-foreground-action-on-danger-tertiary-hover: var(--sapphire-semantic-color-foreground-action-danger-hover);--sapphire-semantic-color-foreground-action-on-danger-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-danger-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-secondary-active: var(--sapphire-semantic-color-foreground-action-on-secondary-default);--sapphire-semantic-color-foreground-action-on-secondary-hover: var(--sapphire-semantic-color-foreground-action-on-secondary-default);--sapphire-semantic-color-background-action-select-active: var(--sapphire-semantic-color-background-action-primary-active);--sapphire-semantic-color-background-action-select-hover: var(--sapphire-semantic-color-background-action-primary-hover)}@media screen and (min-width: 768px){.sapphire-theme-default,:host,.sapphire-theme--secondary,:host ::ng-deep .sapphire-theme--secondary,.sapphire-theme--tertiary,:host ::ng-deep .sapphire-theme--tertiary,.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 screen and (min-width: 960px){.sapphire-theme-default,:host,.sapphire-theme--secondary,:host ::ng-deep .sapphire-theme--secondary,.sapphire-theme--tertiary,:host ::ng-deep .sapphire-theme--tertiary,.sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-semantic-size-font-heading-sm: var(--sapphire-global-size-font-125);--sapphire-semantic-size-font-heading-md: var(--sapphire-global-size-font-150);--sapphire-semantic-size-font-heading-lg: var(--sapphire-global-size-font-200);--sapphire-semantic-size-font-heading-xl: var(--sapphire-global-size-font-250);--sapphire-semantic-size-font-heading-2xl: var(--sapphire-global-size-font-300)}}@media (prefers-reduced-motion){.sapphire-theme-default,:host,.sapphire-theme--secondary,:host ::ng-deep .sapphire-theme--secondary,.sapphire-theme--tertiary,:host ::ng-deep .sapphire-theme--tertiary,.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-foreground-positive: var(--sapphire-global-color-alpha-green-600);--sapphire-semantic-color-foreground-secondary: color(from var(--sapphire-global-color-blue-900) xyz x y z / .65);--sapphire-semantic-color-foreground-secondary-alpha: .65;--sapphire-semantic-color-background-decorative-neutral: var(--sapphire-global-color-white);--sapphire-semantic-color-background-surface: var(--sapphire-global-color-sand-50);--sapphire-semantic-color-background-warning-subtle: var(--sapphire-global-color-alpha-yellow-100);--sapphire-semantic-color-background-action-danger-secondary-default: var(--sapphire-global-color-white);--sapphire-semantic-color-background-action-secondary-default: var(--sapphire-global-color-white);--sapphire-semantic-color-state-negative-subtle-active: color(from var(--sapphire-global-color-red-600) xyz x y z / .16);--sapphire-semantic-color-state-negative-subtle-active-alpha: .16;--sapphire-semantic-color-state-negative-subtle-hover: color(from var(--sapphire-global-color-red-600) xyz x y z / .12);--sapphire-semantic-color-state-negative-subtle-hover-alpha: .12;--sapphire-semantic-color-state-neutral-active: color(from var(--sapphire-global-color-sand-900) xyz x y z / .14);--sapphire-semantic-color-state-neutral-active-alpha: .14;--sapphire-semantic-color-state-neutral-hover: color(from var(--sapphire-global-color-sand-900) xyz x y z / .1);--sapphire-semantic-color-state-neutral-hover-alpha: .1;--sapphire-semantic-color-state-accent-subtle-active: color(from var(--sapphire-global-color-blue-500) xyz x y z / .12);--sapphire-semantic-color-state-accent-subtle-active-alpha: .12;--sapphire-semantic-color-state-accent-subtle-hover: color(from var(--sapphire-global-color-blue-500) xyz x y z / .1);--sapphire-semantic-color-state-accent-subtle-hover-alpha: .1}.sapphire-theme-default.sapphire-theme--tertiary,.sapphire-theme-default .sapphire-theme--tertiary,:host .sapphire-theme--tertiary,:host ::ng-deep .sapphire-theme--tertiary{--sapphire-semantic-color-foreground-positive: var(--sapphire-global-color-alpha-green-600);--sapphire-semantic-color-foreground-negative: var(--sapphire-global-color-alpha-red-600);--sapphire-semantic-color-foreground-secondary: color(from var(--sapphire-global-color-blue-900) xyz x y z / .665);--sapphire-semantic-color-foreground-secondary-alpha: .665;--sapphire-semantic-color-background-decorative-neutral: var(--sapphire-global-color-white);--sapphire-semantic-color-background-surface: var(--sapphire-global-color-sand-100);--sapphire-semantic-color-background-warning-subtle: var(--sapphire-global-color-alpha-yellow-100);--sapphire-semantic-color-background-neutral-subtle: var(--sapphire-global-color-alpha-sand-100);--sapphire-semantic-color-background-action-danger-secondary-default: var(--sapphire-global-color-white);--sapphire-semantic-color-background-action-secondary-default: var(--sapphire-global-color-white);--sapphire-semantic-color-state-border-active: color(from var(--sapphire-global-color-blue-900) xyz x y z / .2);--sapphire-semantic-color-state-border-active-alpha: .2;--sapphire-semantic-color-state-border-hover: color(from var(--sapphire-global-color-blue-900) xyz x y z / .1);--sapphire-semantic-color-state-border-hover-alpha: .1;--sapphire-semantic-color-state-negative-subtle-active: color(from var(--sapphire-global-color-red-600) xyz x y z / .2);--sapphire-semantic-color-state-negative-subtle-active-alpha: .2;--sapphire-semantic-color-state-negative-subtle-hover: color(from var(--sapphire-global-color-red-600) xyz x y z / .16);--sapphire-semantic-color-state-negative-subtle-hover-alpha: .16;--sapphire-semantic-color-state-neutral-active: color(from var(--sapphire-global-color-sand-900) xyz x y z / .18);--sapphire-semantic-color-state-neutral-active-alpha: .18;--sapphire-semantic-color-state-neutral-hover: color(from var(--sapphire-global-color-sand-900) xyz x y z / .14);--sapphire-semantic-color-state-neutral-hover-alpha: .14;--sapphire-semantic-color-state-accent-subtle-active: color(from var(--sapphire-global-color-blue-500) xyz x y z / .18);--sapphire-semantic-color-state-accent-subtle-active-alpha: .18;--sapphire-semantic-color-state-accent-subtle-hover: color(from var(--sapphire-global-color-blue-500) xyz x y z / .14);--sapphire-semantic-color-state-accent-subtle-hover-alpha: .14}.sapphire-theme-default.sapphire-theme--contrast,.sapphire-theme-default .sapphire-theme--contrast,:host .sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-global-shadow-md: 0px 0px 0px .5px hsl(0 0% 100% / .1) inset, 0px 4px 16px 0px hsl(212 63% 12% / .04);--sapphire-global-color-alpha-yellow-950: hsl(24 100% 14% / .902);--sapphire-global-color-alpha-yellow-900: hsl(25 100% 27% / .733);--sapphire-global-color-alpha-yellow-800: hsl(27 100% 37% / .705);--sapphire-global-color-alpha-yellow-700: hsl(31 100% 38% / .846);--sapphire-global-color-alpha-yellow-600: hsl(36 100% 44% / .902);--sapphire-global-color-alpha-yellow-500: hsl(41 100% 51% / .905);--sapphire-global-color-alpha-yellow-400: hsl(46 100% 55% / .971);--sapphire-global-color-alpha-yellow-300: hsl(46 100% 65% / .987);--sapphire-global-color-alpha-yellow-200: hsl(50 100% 77% / .979);--sapphire-global-color-alpha-yellow-100: hsl(51 100% 89% / .987);--sapphire-global-color-alpha-yellow-50: hsl(53 100% 92%);--sapphire-global-color-alpha-green-950: hsl(87 100% 10% / .508);--sapphire-global-color-alpha-green-900: hsl(86 100% 27% / .254);--sapphire-global-color-alpha-green-800: hsl(90 100% 56% / .198);--sapphire-global-color-alpha-green-700: hsl(101 100% 62% / .278);--sapphire-global-color-alpha-green-600: hsl(111 100% 64% / .396);--sapphire-global-color-alpha-green-500: hsl(113 100% 64% / .489);--sapphire-global-color-alpha-green-400: hsl(116 100% 70% / .662);--sapphire-global-color-alpha-green-300: hsl(117 100% 79% / .733);--sapphire-global-color-alpha-green-200: hsl(118 100% 86% / .83);--sapphire-global-color-alpha-green-100: hsl(120 100% 92% / .906);--sapphire-global-color-alpha-green-50: hsl(120 100% 97% / .939);--sapphire-global-color-alpha-red-950: hsl(7 100% 12% / .648);--sapphire-global-color-alpha-red-900: hsl(10 100% 30% / .423);--sapphire-global-color-alpha-red-800: hsl(5 100% 56% / .413);--sapphire-global-color-alpha-red-700: hsl(3 100% 59% / .564);--sapphire-global-color-alpha-red-600: hsl(1 100% 61% / .701);--sapphire-global-color-alpha-red-500: hsl(1 100% 60% / .826);--sapphire-global-color-alpha-red-400: hsl(1 100% 68% / .963);--sapphire-global-color-alpha-red-300: hsl(1 100% 75% / .979);--sapphire-global-color-alpha-red-200: hsl(2 100% 84%);--sapphire-global-color-alpha-red-100: hsl(4 100% 92%);--sapphire-global-color-alpha-red-50: hsl(0 100% 96% / .991);--sapphire-global-color-alpha-blue-950: hsl(210 100% 11% / .667);--sapphire-global-color-alpha-blue-900: hsl(210 100% 17% / .667);--sapphire-global-color-alpha-blue-800: hsl(211 100% 28% / .667);--sapphire-global-color-alpha-blue-700: hsl(211 100% 39% / .667);--sapphire-global-color-alpha-blue-600: hsl(212 100% 50% / .699);--sapphire-global-color-alpha-blue-500: hsl(215 100% 50% / .894);--sapphire-global-color-alpha-sand-950: hsl(33 100% 24% / .31);--sapphire-global-color-alpha-sand-900: hsl(35 100% 58% / .224);--sapphire-global-color-alpha-sand-800: hsl(38 100% 66% / .307);--sapphire-global-color-alpha-sand-700: hsl(38 100% 72% / .39);--sapphire-global-color-alpha-sand-600: hsl(38 100% 76% / .476);--sapphire-global-color-alpha-sand-500: hsl(39 100% 84% / .586);--sapphire-global-color-alpha-sand-400: hsl(42 100% 88% / .723);--sapphire-global-color-alpha-sand-300: hsl(45 100% 92% / .802);--sapphire-global-color-alpha-sand-200: hsl(44 100% 97% / .885);--sapphire-global-color-alpha-sand-100: hsl(53 100% 98% / .92);--sapphire-global-color-alpha-sand-50: hsl(40 100% 99% / .96);--sapphire-global-color-alpha-gray-900: hsl(215 97% 75% / .087);--sapphire-global-color-alpha-gray-800: hsl(221 100% 81% / .144);--sapphire-global-color-alpha-gray-700: hsl(214 100% 85% / .254);--sapphire-global-color-alpha-gray-600: hsl(213 100% 85% / .363);--sapphire-global-color-alpha-gray-500: hsl(212 100% 89% / .508);--sapphire-global-color-alpha-gray-400: hsl(211 100% 91% / .663);--sapphire-global-color-alpha-gray-300: hsl(211 100% 95% / .803);--sapphire-global-color-alpha-gray-200: hsl(212 100% 97% / .871);--sapphire-global-color-alpha-gray-100: hsl(207 100% 98% / .926);--sapphire-global-color-alpha-gray-50: hsl(200 100% 99% / .966);--sapphire-semantic-color-foreground-on-decorative-neutral: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-warning-subtle: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-warning: var(--sapphire-global-color-yellow-900);--sapphire-semantic-color-foreground-on-positive-subtle: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-negative-subtle: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-accent-subtle: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-positive: var(--sapphire-global-color-alpha-green-400);--sapphire-semantic-color-foreground-warning: var(--sapphire-global-color-alpha-yellow-400);--sapphire-semantic-color-foreground-negative: var(--sapphire-global-color-alpha-red-400);--sapphire-semantic-color-foreground-secondary: color(from var(--sapphire-global-color-gray-50) xyz x y z / .55);--sapphire-semantic-color-foreground-secondary-alpha: .55;--sapphire-semantic-color-foreground-primary: var(--sapphire-global-color-gray-50);--sapphire-semantic-color-background-decorative-neutral: var(--sapphire-global-color-alpha-gray-800);--sapphire-semantic-color-background-popover: var(--sapphire-global-color-gray-800);--sapphire-semantic-color-background-surface: var(--sapphire-global-color-gray-900);--sapphire-semantic-color-background-field: var(--sapphire-global-color-gray-800);--sapphire-semantic-color-background-warning-subtle: var(--sapphire-global-color-alpha-yellow-900);--sapphire-semantic-color-background-positive-subtle: var(--sapphire-global-color-alpha-green-800);--sapphire-semantic-color-background-negative-subtle: var(--sapphire-global-color-alpha-red-800);--sapphire-semantic-color-background-accent-subtle: var(--sapphire-global-color-alpha-blue-800);--sapphire-semantic-color-background-neutral-subtle: var(--sapphire-global-color-alpha-gray-900);--sapphire-semantic-color-background-segmented-control-knob: var(--sapphire-global-color-alpha-gray-600);--sapphire-semantic-color-background-segmented-control-track: var(--sapphire-global-color-alpha-gray-800);--sapphire-semantic-color-background-switch-default: var(--sapphire-global-color-alpha-gray-600);--sapphire-semantic-color-background-action-highlight: var(--sapphire-global-color-alpha-gray-900);--sapphire-semantic-color-background-action-secondary-default: var(--sapphire-global-color-alpha-gray-800);--sapphire-semantic-color-border-tertiary: color(from var(--sapphire-global-color-gray-50) xyz x y z / .06);--sapphire-semantic-color-border-tertiary-alpha: .06;--sapphire-semantic-color-border-secondary: color(from var(--sapphire-global-color-gray-50) xyz x y z / .08);--sapphire-semantic-color-border-secondary-alpha: .08;--sapphire-semantic-color-border-primary: color(from var(--sapphire-global-color-gray-50) xyz x y z / .16);--sapphire-semantic-color-border-primary-alpha: .16;--sapphire-semantic-color-state-border-active: color(from var(--sapphire-global-color-gray-100) xyz x y z / .2);--sapphire-semantic-color-state-border-active-alpha: .2;--sapphire-semantic-color-state-border-hover: color(from var(--sapphire-global-color-gray-100) xyz x y z / .12);--sapphire-semantic-color-state-border-hover-alpha: .12;--sapphire-semantic-color-state-negative-subtle-active: color(from var(--sapphire-global-color-red-100) xyz x y z / .12);--sapphire-semantic-color-state-negative-subtle-active-alpha: .12;--sapphire-semantic-color-state-negative-subtle-hover: color(from var(--sapphire-global-color-red-100) xyz x y z / .08);--sapphire-semantic-color-state-negative-subtle-hover-alpha: .08;--sapphire-semantic-color-state-negative-active: color(from var(--sapphire-global-color-red-100) xyz x y z / .2);--sapphire-semantic-color-state-negative-active-alpha: .2;--sapphire-semantic-color-state-negative-hover: color(from var(--sapphire-global-color-red-100) xyz x y z / .12);--sapphire-semantic-color-state-negative-hover-alpha: .12;--sapphire-semantic-color-state-neutral-ghost-active: color(from var(--sapphire-global-color-gray-200) xyz x y z / .1);--sapphire-semantic-color-state-neutral-ghost-active-alpha: .1;--sapphire-semantic-color-state-neutral-ghost-hover: color(from var(--sapphire-global-color-gray-200) xyz x y z / .06);--sapphire-semantic-color-state-neutral-ghost-hover-alpha: .06;--sapphire-semantic-color-state-neutral-active: color(from var(--sapphire-global-color-gray-200) xyz x y z / .1);--sapphire-semantic-color-state-neutral-active-alpha: .1;--sapphire-semantic-color-state-neutral-hover: color(from var(--sapphire-global-color-gray-200) xyz x y z / .06);--sapphire-semantic-color-state-neutral-hover-alpha: .06;--sapphire-semantic-color-state-accent-active: color(from var(--sapphire-global-color-blue-100) xyz x y z / .2);--sapphire-semantic-color-state-accent-active-alpha: .2;--sapphire-semantic-color-state-accent-hover: color(from var(--sapphire-global-color-blue-100) xyz x y z / .12);--sapphire-semantic-color-state-accent-hover-alpha: .12;--sapphire-global-color-alpha-blue-400: var(--sapphire-global-color-blue-400);--sapphire-global-color-alpha-blue-300: var(--sapphire-global-color-blue-300);--sapphire-global-color-alpha-blue-200: var(--sapphire-global-color-blue-200);--sapphire-global-color-alpha-blue-100: var(--sapphire-global-color-blue-100);--sapphire-global-color-alpha-blue-50: var(--sapphire-global-color-blue-50);--sapphire-semantic-color-foreground-accent: var(--sapphire-global-color-alpha-blue-400)}::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"] }]
|
|
6417
|
+
args: [{ selector: 'sp-theme-default', standalone: true, template: '<ng-content></ng-content>', hostDirectives: [ThemeBaseDirective], styles: ["@keyframes backdrop-fade-in{0%{background:transparent}to{background:var(--sapphire-semantic-color-background-backdrop)}}@keyframes backdrop-fade-out{0%{background:var(--sapphire-semantic-color-background-backdrop)}to{background: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:var(--sapphire-semantic-transitions-fade);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--tertiary,:host ::ng-deep .sapphire-theme--tertiary,.sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-semantic-size-breakpoint-xl: 1400px;--sapphire-semantic-size-breakpoint-lg: 1200px;--sapphire-semantic-size-breakpoint-md: 960px;--sapphire-semantic-size-breakpoint-sm: 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-default-bold: 600;--sapphire-semantic-font-weight-default-medium: 500;--sapphire-semantic-font-weight-default-regular: 400;--sapphire-semantic-font-weight-default-light: 300;--sapphire-global-transitions-ease-in: cubic-bezier(0, 0, 0, 1);--sapphire-global-transitions-ease-in-out-quick: cubic-bezier(.5, 0, 0, 1);--sapphire-global-transitions-ease-in-out: cubic-bezier(.7, 0, .2, 1);--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.3;--sapphire-global-size-font-300: 3rem;--sapphire-global-size-font-250: 2.5rem;--sapphire-global-size-font-200: 2rem;--sapphire-global-size-font-175: 1.75rem;--sapphire-global-size-font-163: 1.625rem;--sapphire-global-size-font-150: 1.5rem;--sapphire-global-size-font-125: 1.25rem;--sapphire-global-size-font-112: 1.125rem;--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-110: 2.75rem;--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-40: 16px;--sapphire-global-size-static-30: 12px;--sapphire-global-size-static-20: 8px;--sapphire-global-size-static-15: 6px;--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-md: 0px 0px 0px 1px hsl(212 63% 12% / .1) inset, 0px 4px 24px 0px hsl(212 63% 12% / .04);--sapphire-global-opacity-30: .3;--sapphire-global-font-danske-name: \"Danske\";--sapphire-global-color-secondary-green-4: hsl(137 64% 78%);--sapphire-global-color-secondary-green-3: hsl(152 42% 56%);--sapphire-global-color-secondary-green-2: hsl(152 44% 38%);--sapphire-global-color-secondary-green-1: hsl(158 58% 19%);--sapphire-global-color-secondary-copper-4: hsl(23 69% 75%);--sapphire-global-color-secondary-copper-3: hsl(19 61% 60%);--sapphire-global-color-secondary-copper-2: hsl(18 57% 41%);--sapphire-global-color-secondary-copper-1: hsl(12 65% 23%);--sapphire-global-color-secondary-gold-4: hsl(45 63% 69%);--sapphire-global-color-secondary-gold-3: hsl(39 49% 54%);--sapphire-global-color-secondary-gold-2: hsl(37 57% 36%);--sapphire-global-color-secondary-gold-1: hsl(37 68% 19%);--sapphire-global-color-secondary-blue-4: hsl(211 72% 72%);--sapphire-global-color-secondary-blue-3: hsl(214 59% 62%);--sapphire-global-color-secondary-blue-2: hsl(218 51% 52%);--sapphire-global-color-secondary-blue-1: hsl(212 100% 24%);--sapphire-global-color-alpha-yellow-950: hsl(23 100% 13% / .987);--sapphire-global-color-alpha-yellow-900: hsl(25 100% 19% / .963);--sapphire-global-color-alpha-yellow-800: hsl(27 100% 25% / .959);--sapphire-global-color-alpha-yellow-700: hsl(31 100% 32% / .979);--sapphire-global-color-alpha-yellow-600: hsl(36 100% 39% / .987);--sapphire-global-color-alpha-yellow-500: hsl(41 100% 45% / .975);--sapphire-global-color-alpha-yellow-400: hsl(46 100% 48% / .897);--sapphire-global-color-alpha-yellow-300: hsl(46 100% 49% / .697);--sapphire-global-color-alpha-yellow-200: hsl(51 100% 48% / .47);--sapphire-global-color-alpha-yellow-100: hsl(51 100% 47% / .235);--sapphire-global-color-alpha-yellow-50: hsl(53 100% 50% / .161);--sapphire-global-color-alpha-green-950: hsl(129 100% 4% / .944);--sapphire-global-color-alpha-green-900: hsl(130 100% 6% / .916);--sapphire-global-color-alpha-green-800: hsl(128 100% 8% / .885);--sapphire-global-color-alpha-green-700: hsl(128 100% 11% / .862);--sapphire-global-color-alpha-green-600: hsl(127 100% 17% / .842);--sapphire-global-color-alpha-green-500: hsl(124 100% 21% / .822);--sapphire-global-color-alpha-green-400: hsl(122 100% 28% / .701);--sapphire-global-color-alpha-green-300: hsl(124 100% 28% / .56);--sapphire-global-color-alpha-green-200: hsl(124 100% 30% / .388);--sapphire-global-color-alpha-green-100: hsl(125 100% 11% / .231);--sapphire-global-color-alpha-green-50: hsl(129 100% 25% / .11);--sapphire-global-color-alpha-red-950: hsl(358 100% 6% / .957);--sapphire-global-color-alpha-red-900: hsl(1 100% 10% / .92);--sapphire-global-color-alpha-red-800: hsl(359 100% 17% / .877);--sapphire-global-color-alpha-red-700: hsl(359 100% 24% / .842);--sapphire-global-color-alpha-red-600: hsl(359 100% 32% / .819);--sapphire-global-color-alpha-red-500: hsl(0 100% 39% / .815);--sapphire-global-color-alpha-red-400: hsl(1 100% 47% / .65);--sapphire-global-color-alpha-red-300: hsl(1 100% 48% / .501);--sapphire-global-color-alpha-red-200: hsl(2 100% 50% / .325);--sapphire-global-color-alpha-red-100: hsl(4 100% 50% / .169);--sapphire-global-color-alpha-red-50: hsl(0 98% 45% / .079);--sapphire-global-color-alpha-blue-500: hsl(215 99% 45% / .995);--sapphire-global-color-alpha-blue-400: hsl(216 100% 50% / .74);--sapphire-global-color-alpha-blue-300: hsl(215 100% 50% / .513);--sapphire-global-color-alpha-blue-200: hsl(214 100% 50% / .349);--sapphire-global-color-alpha-blue-100: hsl(214 100% 50% / .2);--sapphire-global-color-alpha-blue-50: hsl(219 100% 50% / .091);--sapphire-global-color-alpha-sand-950: hsl(40 100% 3% / .905);--sapphire-global-color-alpha-sand-900: hsl(41 100% 5% / .858);--sapphire-global-color-alpha-sand-800: hsl(43 100% 7% / .803);--sapphire-global-color-alpha-sand-700: hsl(42 100% 9% / .74);--sapphire-global-color-alpha-sand-600: hsl(42 100% 12% / .678);--sapphire-global-color-alpha-sand-500: hsl(43 100% 12% / .548);--sapphire-global-color-alpha-sand-400: hsl(39 100% 17% / .411);--sapphire-global-color-alpha-sand-300: hsl(48 100% 17% / .294);--sapphire-global-color-alpha-sand-200: hsl(48 100% 13% / .153);--sapphire-global-color-alpha-sand-100: hsl(60 100% 10% / .098);--sapphire-global-color-alpha-sand-50: hsl(60 100% 10% / .043);--sapphire-global-color-alpha-gray-900: hsl(211 63% 13% / .952);--sapphire-global-color-alpha-gray-800: hsl(213 100% 9% / .909);--sapphire-global-color-alpha-gray-700: hsl(213 100% 11% / .819);--sapphire-global-color-alpha-gray-600: hsl(212 100% 13% / .74);--sapphire-global-color-alpha-gray-500: hsl(212 100% 15% / .603);--sapphire-global-color-alpha-gray-400: hsl(211 100% 18% / .455);--sapphire-global-color-alpha-gray-300: hsl(211 100% 20% / .282);--sapphire-global-color-alpha-gray-200: hsl(210 100% 21% / .188);--sapphire-global-color-alpha-gray-100: hsl(208 98% 23% / .114);--sapphire-global-color-alpha-gray-50: hsl(206 100% 25% / .055);--sapphire-global-color-yellow-950: hsl(24 91% 14%);--sapphire-global-color-yellow-900: hsl(25 84% 22%);--sapphire-global-color-yellow-800: hsl(27 86% 28%);--sapphire-global-color-yellow-700: hsl(31 94% 33%);--sapphire-global-color-yellow-600: hsl(36 97% 40%);--sapphire-global-color-yellow-500: hsl(41 95% 46%);--sapphire-global-color-yellow-400: hsl(46 94% 54%);--sapphire-global-color-yellow-300: hsl(46 97% 65%);--sapphire-global-color-yellow-200: hsl(51 92% 75%);--sapphire-global-color-yellow-100: hsl(51 90% 88%);--sapphire-global-color-yellow-50: hsl(53 100% 92%);--sapphire-global-color-green-950: hsl(129 42% 9%);--sapphire-global-color-green-900: hsl(131 40% 14%);--sapphire-global-color-green-800: hsl(128 38% 18%);--sapphire-global-color-green-700: hsl(129 41% 23%);--sapphire-global-color-green-600: hsl(127 47% 30%);--sapphire-global-color-green-500: hsl(125 50% 35%);--sapphire-global-color-green-400: hsl(122 39% 49%);--sapphire-global-color-green-300: hsl(124 39% 60%);--sapphire-global-color-green-200: hsl(124 42% 73%);--sapphire-global-color-green-100: hsl(125 46% 84%);--sapphire-global-color-green-50: hsl(129 33% 92%);--sapphire-global-color-red-950: hsl(358 57% 10%);--sapphire-global-color-red-900: hsl(1 53% 17%);--sapphire-global-color-red-800: hsl(358 55% 27%);--sapphire-global-color-red-700: hsl(359 57% 36%);--sapphire-global-color-red-600: hsl(359 59% 44%);--sapphire-global-color-red-500: hsl(0 65% 51%);--sapphire-global-color-red-400: hsl(1 90% 66%);--sapphire-global-color-red-300: hsl(1 92% 74%);--sapphire-global-color-red-200: hsl(2 100% 84%);--sapphire-global-color-red-100: hsl(4 100% 92%);--sapphire-global-color-red-50: hsl(0 82% 96%);--sapphire-global-color-blue-950: hsl(210 100% 9%);--sapphire-global-color-blue-900: hsl(210 100% 14%);--sapphire-global-color-blue-800: hsl(211 100% 21%);--sapphire-global-color-blue-700: hsl(211 100% 28%);--sapphire-global-color-blue-600: hsl(212 100% 37%);--sapphire-global-color-blue-500: hsl(218 92% 49%);--sapphire-global-color-blue-400: hsl(216 100% 63%);--sapphire-global-color-blue-300: hsl(215 100% 74%);--sapphire-global-color-blue-200: hsl(214 100% 83%);--sapphire-global-color-blue-100: hsl(214 100% 90%);--sapphire-global-color-blue-50: hsl(219 100% 95%);--sapphire-global-color-sand-950: hsl(39 23% 12%);--sapphire-global-color-sand-900: hsl(41 23% 18%);--sapphire-global-color-sand-800: hsl(43 22% 25%);--sapphire-global-color-sand-700: hsl(42 20% 33%);--sapphire-global-color-sand-600: hsl(42 20% 40%);--sapphire-global-color-sand-500: hsl(43 14% 52%);--sapphire-global-color-sand-400: hsl(39 20% 66%);--sapphire-global-color-sand-300: hsl(48 20% 75%);--sapphire-global-color-sand-200: hsl(48 15% 87%);--sapphire-global-color-sand-100: hsl(60 11% 91%);--sapphire-global-color-sand-50: hsl(60 9% 96%);--sapphire-global-color-gray-950: hsl(210 94% 7%);--sapphire-global-color-gray-900: hsl(211 64% 13%);--sapphire-global-color-gray-800: hsl(213 48% 17%);--sapphire-global-color-gray-700: hsl(212 33% 27%);--sapphire-global-color-gray-600: hsl(212 27% 35%);--sapphire-global-color-gray-500: hsl(211 19% 49%);--sapphire-global-color-gray-400: hsl(211 22% 63%);--sapphire-global-color-gray-300: hsl(211 22% 77%);--sapphire-global-color-gray-200: hsl(210 26% 85%);--sapphire-global-color-gray-100: hsl(208 29% 91%);--sapphire-global-color-gray-50: hsl(206 33% 96%);--sapphire-global-color-transparent: hsla(0, 0%, 100%, 0);--sapphire-global-color-black: hsla(0, 0%, 0%, 1);--sapphire-global-color-white: hsla(0, 0%, 100%, 1);--sapphire-semantic-transitions-fade: var(--sapphire-global-transitions-ease-in);--sapphire-semantic-transitions-dynamic: var(--sapphire-global-transitions-ease-in-out-quick);--sapphire-semantic-transitions-standard: var(--sapphire-global-transitions-ease-in-out);--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-6xl: var(--sapphire-global-size-generic-180);--sapphire-semantic-size-spacing-5xl: var(--sapphire-global-size-generic-160);--sapphire-semantic-size-spacing-4xl: var(--sapphire-global-size-generic-120);--sapphire-semantic-size-spacing-3xl: var(--sapphire-global-size-generic-100);--sapphire-semantic-size-spacing-2xl: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-spacing-xl: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-spacing-lg: var(--sapphire-global-size-generic-50);--sapphire-semantic-size-spacing-md: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-spacing-sm: var(--sapphire-global-size-generic-30);--sapphire-semantic-size-spacing-xs: var(--sapphire-global-size-generic-20);--sapphire-semantic-size-spacing-2xs: var(--sapphire-global-size-generic-15);--sapphire-semantic-size-spacing-3xs: var(--sapphire-global-size-generic-10);--sapphire-semantic-size-spacing-4xs: 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-heading-2xl: var(--sapphire-global-size-font-175);--sapphire-semantic-size-font-heading-xl: var(--sapphire-global-size-font-150);--sapphire-semantic-size-font-heading-lg: var(--sapphire-global-size-font-125);--sapphire-semantic-size-font-heading-md: var(--sapphire-global-size-font-125);--sapphire-semantic-size-font-heading-sm: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-heading-xs: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-body-lg: var(--sapphire-global-size-font-112);--sapphire-semantic-size-font-body-md: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-body-sm: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-body-xs: var(--sapphire-global-size-font-75);--sapphire-semantic-size-radius-2xl: var(--sapphire-global-size-static-40);--sapphire-semantic-size-radius-xl: var(--sapphire-global-size-static-30);--sapphire-semantic-size-radius-lg: var(--sapphire-global-size-static-20);--sapphire-semantic-size-radius-md: var(--sapphire-global-size-static-15);--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-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-field: var(--sapphire-global-size-generic-750);--sapphire-semantic-size-height-box-md: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-height-control-4xl: var(--sapphire-global-size-generic-200);--sapphire-semantic-size-height-control-3xl: var(--sapphire-global-size-generic-180);--sapphire-semantic-size-height-control-2xl: var(--sapphire-global-size-generic-160);--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-30);--sapphire-semantic-font-name-default: var(--sapphire-global-font-danske-name);--sapphire-semantic-color-foreground-on-decorative-neutral: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-16: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-15: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-14: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-13: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-12: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-11: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-10: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-9: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-8: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-7: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-6: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-5: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-4: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-3: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-2: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-1: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-signature: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-warning-subtle: var(--sapphire-global-color-alpha-yellow-800);--sapphire-semantic-color-foreground-on-warning: var(--sapphire-global-color-alpha-yellow-900);--sapphire-semantic-color-foreground-on-positive: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-negative: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-accent: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-positive: var(--sapphire-global-color-alpha-green-500);--sapphire-semantic-color-foreground-warning: var(--sapphire-global-color-alpha-yellow-700);--sapphire-semantic-color-foreground-negative: var(--sapphire-global-color-alpha-red-500);--sapphire-semantic-color-foreground-accent: var(--sapphire-global-color-alpha-blue-500);--sapphire-semantic-color-foreground-secondary: color(from var(--sapphire-global-color-blue-900) xyz x y z / .64);--sapphire-semantic-color-foreground-secondary-alpha: .64;--sapphire-semantic-color-foreground-primary: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-background-decorative-neutral: var(--sapphire-global-color-alpha-sand-50);--sapphire-semantic-color-background-decorative-16: var(--sapphire-global-color-secondary-green-4);--sapphire-semantic-color-background-decorative-15: var(--sapphire-global-color-secondary-green-3);--sapphire-semantic-color-background-decorative-14: var(--sapphire-global-color-secondary-green-2);--sapphire-semantic-color-background-decorative-13: var(--sapphire-global-color-secondary-green-1);--sapphire-semantic-color-background-decorative-12: var(--sapphire-global-color-secondary-copper-4);--sapphire-semantic-color-background-decorative-11: var(--sapphire-global-color-secondary-copper-3);--sapphire-semantic-color-background-decorative-10: var(--sapphire-global-color-secondary-copper-2);--sapphire-semantic-color-background-decorative-9: var(--sapphire-global-color-secondary-copper-1);--sapphire-semantic-color-background-decorative-8: var(--sapphire-global-color-secondary-gold-4);--sapphire-semantic-color-background-decorative-7: var(--sapphire-global-color-secondary-gold-3);--sapphire-semantic-color-background-decorative-6: var(--sapphire-global-color-secondary-gold-2);--sapphire-semantic-color-background-decorative-5: var(--sapphire-global-color-secondary-gold-1);--sapphire-semantic-color-background-decorative-4: var(--sapphire-global-color-secondary-blue-4);--sapphire-semantic-color-background-decorative-3: var(--sapphire-global-color-secondary-blue-3);--sapphire-semantic-color-background-decorative-2: var(--sapphire-global-color-secondary-blue-2);--sapphire-semantic-color-background-decorative-1: var(--sapphire-global-color-secondary-blue-1);--sapphire-semantic-color-background-popover: var(--sapphire-global-color-white);--sapphire-semantic-color-background-backdrop: color(from var(--sapphire-global-color-gray-950) xyz x y z / .6);--sapphire-semantic-color-background-backdrop-alpha: .6;--sapphire-semantic-color-background-surface: var(--sapphire-global-color-white);--sapphire-semantic-color-background-field: var(--sapphire-global-color-white);--sapphire-semantic-color-background-warning-subtle: var(--sapphire-global-color-alpha-yellow-50);--sapphire-semantic-color-background-positive-subtle: var(--sapphire-global-color-alpha-green-50);--sapphire-semantic-color-background-negative-subtle: var(--sapphire-global-color-alpha-red-50);--sapphire-semantic-color-background-accent-subtle: var(--sapphire-global-color-alpha-blue-50);--sapphire-semantic-color-background-neutral-subtle: var(--sapphire-global-color-alpha-sand-50);--sapphire-semantic-color-background-negative: var(--sapphire-global-color-red-500);--sapphire-semantic-color-background-warning: var(--sapphire-global-color-yellow-300);--sapphire-semantic-color-background-positive: var(--sapphire-global-color-green-500);--sapphire-semantic-color-background-accent: var(--sapphire-global-color-blue-500);--sapphire-semantic-color-background-signature: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-background-segmented-control-knob: var(--sapphire-global-color-white);--sapphire-semantic-color-background-segmented-control-track: var(--sapphire-global-color-alpha-sand-100);--sapphire-semantic-color-background-switch-default: var(--sapphire-global-color-alpha-sand-200);--sapphire-semantic-color-background-action-highlight: var(--sapphire-global-color-alpha-sand-50);--sapphire-semantic-color-background-action-select-tertiary-default: var(--sapphire-global-color-transparent);--sapphire-semantic-color-background-action-danger-tertiary-default: var(--sapphire-global-color-transparent);--sapphire-semantic-color-background-action-tertiary-default: var(--sapphire-global-color-transparent);--sapphire-semantic-color-background-action-secondary-default: var(--sapphire-global-color-alpha-sand-100);--sapphire-semantic-color-focus-ring: var(--sapphire-global-color-blue-400);--sapphire-semantic-color-border-field-default: color(from var(--sapphire-global-color-blue-900) xyz x y z / .48);--sapphire-semantic-color-border-field-default-alpha: .48;--sapphire-semantic-color-border-negative-default: var(--sapphire-global-color-red-500);--sapphire-semantic-color-border-accent: var(--sapphire-global-color-blue-500);--sapphire-semantic-color-border-tertiary: color(from var(--sapphire-global-color-blue-900) xyz x y z / .06);--sapphire-semantic-color-border-tertiary-alpha: .06;--sapphire-semantic-color-border-secondary: color(from var(--sapphire-global-color-blue-900) xyz x y z / .08);--sapphire-semantic-color-border-secondary-alpha: .08;--sapphire-semantic-color-border-primary: color(from var(--sapphire-global-color-blue-900) xyz x y z / .16);--sapphire-semantic-color-border-primary-alpha: .16;--sapphire-semantic-color-state-border-active: color(from var(--sapphire-global-color-blue-900) xyz x y z / .2);--sapphire-semantic-color-state-border-active-alpha: .2;--sapphire-semantic-color-state-border-hover: color(from var(--sapphire-global-color-blue-900) xyz x y z / .12);--sapphire-semantic-color-state-border-hover-alpha: .12;--sapphire-semantic-color-state-negative-subtle-active: color(from var(--sapphire-global-color-red-500) xyz x y z / .1);--sapphire-semantic-color-state-negative-subtle-active-alpha: .1;--sapphire-semantic-color-state-negative-subtle-hover: color(from var(--sapphire-global-color-red-500) xyz x y z / .06);--sapphire-semantic-color-state-negative-subtle-hover-alpha: .06;--sapphire-semantic-color-state-negative-active: color(from var(--sapphire-global-color-red-900) xyz x y z / .2);--sapphire-semantic-color-state-negative-active-alpha: .2;--sapphire-semantic-color-state-negative-hover: color(from var(--sapphire-global-color-red-900) xyz x y z / .12);--sapphire-semantic-color-state-negative-hover-alpha: .12;--sapphire-semantic-color-state-neutral-ghost-active: color(from var(--sapphire-global-color-sand-900) xyz x y z / .1);--sapphire-semantic-color-state-neutral-ghost-active-alpha: .1;--sapphire-semantic-color-state-neutral-ghost-hover: color(from var(--sapphire-global-color-sand-900) xyz x y z / .06);--sapphire-semantic-color-state-neutral-ghost-hover-alpha: .06;--sapphire-semantic-color-state-neutral-active: color(from var(--sapphire-global-color-sand-900) xyz x y z / .1);--sapphire-semantic-color-state-neutral-active-alpha: .1;--sapphire-semantic-color-state-neutral-hover: color(from var(--sapphire-global-color-sand-900) xyz x y z / .06);--sapphire-semantic-color-state-neutral-hover-alpha: .06;--sapphire-semantic-color-state-accent-subtle-active: color(from var(--sapphire-global-color-blue-500) xyz x y z / .12);--sapphire-semantic-color-state-accent-subtle-active-alpha: .12;--sapphire-semantic-color-state-accent-subtle-hover: color(from var(--sapphire-global-color-blue-500) xyz x y z / .06);--sapphire-semantic-color-state-accent-subtle-hover-alpha: .06;--sapphire-semantic-color-state-accent-active: color(from var(--sapphire-global-color-blue-900) xyz x y z / .2);--sapphire-semantic-color-state-accent-active-alpha: .2;--sapphire-semantic-color-state-accent-hover: color(from var(--sapphire-global-color-blue-900) xyz x y z / .12);--sapphire-semantic-color-state-accent-hover-alpha: .12;--sapphire-global-color-alpha-blue-950: var(--sapphire-global-color-blue-950);--sapphire-global-color-alpha-blue-900: var(--sapphire-global-color-blue-900);--sapphire-global-color-alpha-blue-800: var(--sapphire-global-color-blue-800);--sapphire-global-color-alpha-blue-700: var(--sapphire-global-color-blue-700);--sapphire-global-color-alpha-blue-600: var(--sapphire-global-color-blue-600);--sapphire-global-color-alpha-gray-950: var(--sapphire-global-color-gray-950);--sapphire-semantic-size-spacing-container-horizontal-md: var(--sapphire-semantic-size-spacing-2xl);--sapphire-semantic-size-spacing-container-horizontal-sm: var(--sapphire-semantic-size-spacing-sm);--sapphire-semantic-size-spacing-control-horizontal-lg: var(--sapphire-semantic-size-spacing-md);--sapphire-semantic-size-spacing-control-horizontal-md: var(--sapphire-semantic-size-spacing-sm);--sapphire-semantic-size-spacing-control-vertical-lg: var(--sapphire-semantic-size-spacing-sm);--sapphire-semantic-size-spacing-control-vertical-md: var(--sapphire-semantic-size-spacing-xs);--sapphire-semantic-size-spacing-control-vertical-sm: var(--sapphire-semantic-size-spacing-3xs);--sapphire-semantic-size-font-control-lg: var(--sapphire-semantic-size-font-body-md);--sapphire-semantic-size-font-control-md: var(--sapphire-semantic-size-font-body-sm);--sapphire-semantic-size-font-control-sm: var(--sapphire-semantic-size-font-body-xs);--sapphire-semantic-size-font-label-md: var(--sapphire-semantic-size-font-body-sm);--sapphire-semantic-size-font-label-sm: var(--sapphire-semantic-size-font-body-xs);--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-color-foreground-on-neutral-subtle: var(--sapphire-semantic-color-foreground-primary);--sapphire-semantic-color-foreground-on-positive-subtle: var(--sapphire-semantic-color-foreground-positive);--sapphire-semantic-color-foreground-on-negative-subtle: var(--sapphire-semantic-color-foreground-negative);--sapphire-semantic-color-foreground-on-accent-subtle: var(--sapphire-semantic-color-foreground-accent);--sapphire-semantic-color-foreground-action-danger-default: var(--sapphire-semantic-color-foreground-negative);--sapphire-semantic-color-foreground-action-link-default: var(--sapphire-semantic-color-foreground-accent);--sapphire-semantic-color-foreground-action-select-default: var(--sapphire-semantic-color-foreground-accent);--sapphire-semantic-color-foreground-action-on-select-default: var(--sapphire-semantic-color-foreground-on-accent);--sapphire-semantic-color-foreground-action-on-danger-default: var(--sapphire-semantic-color-foreground-on-negative);--sapphire-semantic-color-foreground-action-on-tertiary-default: var(--sapphire-semantic-color-foreground-primary);--sapphire-semantic-color-foreground-action-on-primary-default: var(--sapphire-semantic-color-foreground-on-accent);--sapphire-semantic-color-background-spinner-secondary: var(--sapphire-semantic-color-foreground-accent);--sapphire-semantic-color-background-spinner-primary: var(--sapphire-semantic-color-foreground-primary);--sapphire-semantic-color-background-skeleton: var(--sapphire-semantic-color-state-neutral-active);--sapphire-semantic-color-background-progress-track: var(--sapphire-semantic-color-background-accent-subtle);--sapphire-semantic-color-background-progress-fill: var(--sapphire-semantic-color-background-accent);--sapphire-semantic-color-background-switch-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-active-alpha) * 100%), var(--sapphire-semantic-color-background-switch-default) calc((1 - var(--sapphire-semantic-color-state-neutral-active-alpha)) * 100%));--sapphire-semantic-color-background-switch-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-hover-alpha) * 100%), var(--sapphire-semantic-color-background-switch-default) calc((1 - var(--sapphire-semantic-color-state-neutral-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-select-tertiary-active: var(--sapphire-semantic-color-state-accent-subtle-active);--sapphire-semantic-color-background-action-select-tertiary-hover: var(--sapphire-semantic-color-state-accent-subtle-hover);--sapphire-semantic-color-background-action-select-secondary-default: var(--sapphire-semantic-color-background-accent-subtle);--sapphire-semantic-color-background-action-danger-tertiary-active: var(--sapphire-semantic-color-state-negative-subtle-active);--sapphire-semantic-color-background-action-danger-tertiary-hover: var(--sapphire-semantic-color-state-negative-subtle-hover);--sapphire-semantic-color-background-action-danger-secondary-default: var(--sapphire-semantic-color-background-negative-subtle);--sapphire-semantic-color-background-action-danger-default: var(--sapphire-semantic-color-background-negative);--sapphire-semantic-color-background-action-tertiary-active: var(--sapphire-semantic-color-state-neutral-ghost-active);--sapphire-semantic-color-background-action-tertiary-hover: var(--sapphire-semantic-color-state-neutral-ghost-hover);--sapphire-semantic-color-background-action-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-secondary-default) calc((1 - var(--sapphire-semantic-color-state-neutral-active-alpha)) * 100%));--sapphire-semantic-color-background-action-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-secondary-default) calc((1 - var(--sapphire-semantic-color-state-neutral-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-primary-default: var(--sapphire-semantic-color-background-accent);--sapphire-semantic-color-border-field-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-border-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-border-active-alpha) * 100%), var(--sapphire-semantic-color-border-field-default) calc((1 - var(--sapphire-semantic-color-state-border-active-alpha)) * 100%));--sapphire-semantic-color-border-field-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-border-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-border-hover-alpha) * 100%), var(--sapphire-semantic-color-border-field-default) calc((1 - var(--sapphire-semantic-color-state-border-hover-alpha)) * 100%));--sapphire-semantic-color-border-negative-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-border-negative-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-border-negative-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-border-negative-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-danger-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-danger-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-link-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-link-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-link-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-link-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-select-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-select-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-select-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-select-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-select-tertiary-default: var(--sapphire-semantic-color-foreground-action-select-default);--sapphire-semantic-color-foreground-action-on-select-secondary-default: var(--sapphire-semantic-color-foreground-on-accent-subtle);--sapphire-semantic-color-foreground-action-on-select-active: var(--sapphire-semantic-color-foreground-action-on-select-default);--sapphire-semantic-color-foreground-action-on-select-hover: var(--sapphire-semantic-color-foreground-action-on-select-default);--sapphire-semantic-color-foreground-action-on-danger-tertiary-default: var(--sapphire-semantic-color-foreground-action-danger-default);--sapphire-semantic-color-foreground-action-on-danger-secondary-default: var(--sapphire-semantic-color-foreground-on-negative-subtle);--sapphire-semantic-color-foreground-action-on-danger-active: var(--sapphire-semantic-color-foreground-action-on-danger-default);--sapphire-semantic-color-foreground-action-on-danger-hover: var(--sapphire-semantic-color-foreground-action-on-danger-default);--sapphire-semantic-color-foreground-action-on-tertiary-active: var(--sapphire-semantic-color-foreground-action-on-tertiary-default);--sapphire-semantic-color-foreground-action-on-tertiary-hover: var(--sapphire-semantic-color-foreground-action-on-tertiary-default);--sapphire-semantic-color-foreground-action-on-secondary-default: var(--sapphire-semantic-color-foreground-on-neutral-subtle);--sapphire-semantic-color-foreground-action-on-primary-active: var(--sapphire-semantic-color-foreground-action-on-primary-default);--sapphire-semantic-color-foreground-action-on-primary-hover: var(--sapphire-semantic-color-foreground-action-on-primary-default);--sapphire-semantic-color-background-action-select-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-subtle-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-subtle-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-subtle-active-alpha)) * 100%));--sapphire-semantic-color-background-action-select-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-subtle-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-subtle-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-subtle-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-select-default: var(--sapphire-semantic-color-background-action-primary-default);--sapphire-semantic-color-background-action-danger-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-subtle-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-subtle-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-subtle-active-alpha)) * 100%));--sapphire-semantic-color-background-action-danger-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-subtle-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-subtle-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-subtle-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-danger-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-background-action-danger-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-primary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-primary-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-background-action-primary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-primary-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-select-tertiary-active: var(--sapphire-semantic-color-foreground-action-select-active);--sapphire-semantic-color-foreground-action-on-select-tertiary-hover: var(--sapphire-semantic-color-foreground-action-select-hover);--sapphire-semantic-color-foreground-action-on-select-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-select-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-danger-tertiary-active: var(--sapphire-semantic-color-foreground-action-danger-active);--sapphire-semantic-color-foreground-action-on-danger-tertiary-hover: var(--sapphire-semantic-color-foreground-action-danger-hover);--sapphire-semantic-color-foreground-action-on-danger-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-danger-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-secondary-active: var(--sapphire-semantic-color-foreground-action-on-secondary-default);--sapphire-semantic-color-foreground-action-on-secondary-hover: var(--sapphire-semantic-color-foreground-action-on-secondary-default);--sapphire-semantic-color-background-action-select-active: var(--sapphire-semantic-color-background-action-primary-active);--sapphire-semantic-color-background-action-select-hover: var(--sapphire-semantic-color-background-action-primary-hover)}@media screen and (min-width: 768px){.sapphire-theme-default,:host,.sapphire-theme--secondary,:host ::ng-deep .sapphire-theme--secondary,.sapphire-theme--tertiary,:host ::ng-deep .sapphire-theme--tertiary,.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 screen and (min-width: 960px){.sapphire-theme-default,:host,.sapphire-theme--secondary,:host ::ng-deep .sapphire-theme--secondary,.sapphire-theme--tertiary,:host ::ng-deep .sapphire-theme--tertiary,.sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-semantic-size-font-heading-sm: var(--sapphire-global-size-font-125);--sapphire-semantic-size-font-heading-md: var(--sapphire-global-size-font-150);--sapphire-semantic-size-font-heading-lg: var(--sapphire-global-size-font-200);--sapphire-semantic-size-font-heading-xl: var(--sapphire-global-size-font-250);--sapphire-semantic-size-font-heading-2xl: var(--sapphire-global-size-font-300)}}@media (prefers-reduced-motion){.sapphire-theme-default,:host,.sapphire-theme--secondary,:host ::ng-deep .sapphire-theme--secondary,.sapphire-theme--tertiary,:host ::ng-deep .sapphire-theme--tertiary,.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-foreground-positive: var(--sapphire-global-color-alpha-green-600);--sapphire-semantic-color-foreground-secondary: color(from var(--sapphire-global-color-blue-900) xyz x y z / .65);--sapphire-semantic-color-foreground-secondary-alpha: .65;--sapphire-semantic-color-background-decorative-neutral: var(--sapphire-global-color-white);--sapphire-semantic-color-background-surface: var(--sapphire-global-color-sand-50);--sapphire-semantic-color-background-warning-subtle: var(--sapphire-global-color-alpha-yellow-100);--sapphire-semantic-color-background-action-danger-secondary-default: var(--sapphire-global-color-white);--sapphire-semantic-color-background-action-secondary-default: var(--sapphire-global-color-white);--sapphire-semantic-color-border-field-default: color(from var(--sapphire-global-color-blue-900) xyz x y z / .51);--sapphire-semantic-color-border-field-default-alpha: .51;--sapphire-semantic-color-state-negative-subtle-active: color(from var(--sapphire-global-color-red-600) xyz x y z / .16);--sapphire-semantic-color-state-negative-subtle-active-alpha: .16;--sapphire-semantic-color-state-negative-subtle-hover: color(from var(--sapphire-global-color-red-600) xyz x y z / .12);--sapphire-semantic-color-state-negative-subtle-hover-alpha: .12;--sapphire-semantic-color-state-neutral-active: color(from var(--sapphire-global-color-sand-900) xyz x y z / .14);--sapphire-semantic-color-state-neutral-active-alpha: .14;--sapphire-semantic-color-state-neutral-hover: color(from var(--sapphire-global-color-sand-900) xyz x y z / .1);--sapphire-semantic-color-state-neutral-hover-alpha: .1;--sapphire-semantic-color-state-accent-subtle-active: color(from var(--sapphire-global-color-blue-500) xyz x y z / .12);--sapphire-semantic-color-state-accent-subtle-active-alpha: .12;--sapphire-semantic-color-state-accent-subtle-hover: color(from var(--sapphire-global-color-blue-500) xyz x y z / .1);--sapphire-semantic-color-state-accent-subtle-hover-alpha: .1}.sapphire-theme-default.sapphire-theme--tertiary,.sapphire-theme-default .sapphire-theme--tertiary,:host .sapphire-theme--tertiary,:host ::ng-deep .sapphire-theme--tertiary{--sapphire-semantic-color-foreground-positive: var(--sapphire-global-color-alpha-green-600);--sapphire-semantic-color-foreground-negative: var(--sapphire-global-color-alpha-red-600);--sapphire-semantic-color-foreground-secondary: color(from var(--sapphire-global-color-blue-900) xyz x y z / .665);--sapphire-semantic-color-foreground-secondary-alpha: .665;--sapphire-semantic-color-background-decorative-neutral: var(--sapphire-global-color-white);--sapphire-semantic-color-background-surface: var(--sapphire-global-color-sand-100);--sapphire-semantic-color-background-warning-subtle: var(--sapphire-global-color-alpha-yellow-100);--sapphire-semantic-color-background-neutral-subtle: var(--sapphire-global-color-alpha-sand-100);--sapphire-semantic-color-background-action-danger-secondary-default: var(--sapphire-global-color-white);--sapphire-semantic-color-background-action-secondary-default: var(--sapphire-global-color-white);--sapphire-semantic-color-border-field-default: color(from var(--sapphire-global-color-blue-900) xyz x y z / .54);--sapphire-semantic-color-border-field-default-alpha: .54;--sapphire-semantic-color-state-negative-subtle-active: color(from var(--sapphire-global-color-red-600) xyz x y z / .2);--sapphire-semantic-color-state-negative-subtle-active-alpha: .2;--sapphire-semantic-color-state-negative-subtle-hover: color(from var(--sapphire-global-color-red-600) xyz x y z / .16);--sapphire-semantic-color-state-negative-subtle-hover-alpha: .16;--sapphire-semantic-color-state-neutral-active: color(from var(--sapphire-global-color-sand-900) xyz x y z / .18);--sapphire-semantic-color-state-neutral-active-alpha: .18;--sapphire-semantic-color-state-neutral-hover: color(from var(--sapphire-global-color-sand-900) xyz x y z / .14);--sapphire-semantic-color-state-neutral-hover-alpha: .14;--sapphire-semantic-color-state-accent-subtle-active: color(from var(--sapphire-global-color-blue-500) xyz x y z / .18);--sapphire-semantic-color-state-accent-subtle-active-alpha: .18;--sapphire-semantic-color-state-accent-subtle-hover: color(from var(--sapphire-global-color-blue-500) xyz x y z / .14);--sapphire-semantic-color-state-accent-subtle-hover-alpha: .14}.sapphire-theme-default.sapphire-theme--contrast,.sapphire-theme-default .sapphire-theme--contrast,:host .sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-global-shadow-md: 0px 0px 0px .5px hsl(0 0% 100% / .1) inset, 0px 4px 16px 0px hsl(212 63% 12% / .04);--sapphire-global-color-alpha-yellow-950: hsl(24 100% 14% / .902);--sapphire-global-color-alpha-yellow-900: hsl(25 100% 27% / .733);--sapphire-global-color-alpha-yellow-800: hsl(27 100% 37% / .705);--sapphire-global-color-alpha-yellow-700: hsl(31 100% 38% / .846);--sapphire-global-color-alpha-yellow-600: hsl(36 100% 44% / .902);--sapphire-global-color-alpha-yellow-500: hsl(41 100% 51% / .905);--sapphire-global-color-alpha-yellow-400: hsl(46 100% 55% / .971);--sapphire-global-color-alpha-yellow-300: hsl(46 100% 65% / .987);--sapphire-global-color-alpha-yellow-200: hsl(50 100% 77% / .979);--sapphire-global-color-alpha-yellow-100: hsl(51 100% 89% / .987);--sapphire-global-color-alpha-yellow-50: hsl(53 100% 92%);--sapphire-global-color-alpha-green-950: hsl(87 100% 10% / .508);--sapphire-global-color-alpha-green-900: hsl(86 100% 27% / .254);--sapphire-global-color-alpha-green-800: hsl(90 100% 56% / .198);--sapphire-global-color-alpha-green-700: hsl(101 100% 62% / .278);--sapphire-global-color-alpha-green-600: hsl(111 100% 64% / .396);--sapphire-global-color-alpha-green-500: hsl(113 100% 64% / .489);--sapphire-global-color-alpha-green-400: hsl(116 100% 70% / .662);--sapphire-global-color-alpha-green-300: hsl(117 100% 79% / .733);--sapphire-global-color-alpha-green-200: hsl(118 100% 86% / .83);--sapphire-global-color-alpha-green-100: hsl(120 100% 92% / .906);--sapphire-global-color-alpha-green-50: hsl(120 100% 97% / .939);--sapphire-global-color-alpha-red-950: hsl(7 100% 12% / .648);--sapphire-global-color-alpha-red-900: hsl(10 100% 30% / .423);--sapphire-global-color-alpha-red-800: hsl(5 100% 56% / .413);--sapphire-global-color-alpha-red-700: hsl(3 100% 59% / .564);--sapphire-global-color-alpha-red-600: hsl(1 100% 61% / .701);--sapphire-global-color-alpha-red-500: hsl(1 100% 60% / .826);--sapphire-global-color-alpha-red-400: hsl(1 100% 68% / .963);--sapphire-global-color-alpha-red-300: hsl(1 100% 75% / .979);--sapphire-global-color-alpha-red-200: hsl(2 100% 84%);--sapphire-global-color-alpha-red-100: hsl(4 100% 92%);--sapphire-global-color-alpha-red-50: hsl(0 100% 96% / .991);--sapphire-global-color-alpha-blue-950: hsl(210 100% 11% / .667);--sapphire-global-color-alpha-blue-900: hsl(210 100% 17% / .667);--sapphire-global-color-alpha-blue-800: hsl(211 100% 28% / .667);--sapphire-global-color-alpha-blue-700: hsl(211 100% 39% / .667);--sapphire-global-color-alpha-blue-600: hsl(212 100% 50% / .699);--sapphire-global-color-alpha-blue-500: hsl(215 100% 50% / .894);--sapphire-global-color-alpha-sand-950: hsl(33 100% 24% / .31);--sapphire-global-color-alpha-sand-900: hsl(35 100% 58% / .224);--sapphire-global-color-alpha-sand-800: hsl(38 100% 66% / .307);--sapphire-global-color-alpha-sand-700: hsl(38 100% 72% / .39);--sapphire-global-color-alpha-sand-600: hsl(38 100% 76% / .476);--sapphire-global-color-alpha-sand-500: hsl(39 100% 84% / .586);--sapphire-global-color-alpha-sand-400: hsl(42 100% 88% / .723);--sapphire-global-color-alpha-sand-300: hsl(45 100% 92% / .802);--sapphire-global-color-alpha-sand-200: hsl(44 100% 97% / .885);--sapphire-global-color-alpha-sand-100: hsl(53 100% 98% / .92);--sapphire-global-color-alpha-sand-50: hsl(40 100% 99% / .96);--sapphire-global-color-alpha-gray-900: hsl(215 97% 75% / .087);--sapphire-global-color-alpha-gray-800: hsl(221 100% 81% / .144);--sapphire-global-color-alpha-gray-700: hsl(214 100% 85% / .254);--sapphire-global-color-alpha-gray-600: hsl(213 100% 85% / .363);--sapphire-global-color-alpha-gray-500: hsl(212 100% 89% / .508);--sapphire-global-color-alpha-gray-400: hsl(211 100% 91% / .663);--sapphire-global-color-alpha-gray-300: hsl(211 100% 95% / .803);--sapphire-global-color-alpha-gray-200: hsl(212 100% 97% / .871);--sapphire-global-color-alpha-gray-100: hsl(207 100% 98% / .926);--sapphire-global-color-alpha-gray-50: hsl(200 100% 99% / .966);--sapphire-semantic-color-foreground-on-decorative-neutral: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-warning-subtle: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-warning: var(--sapphire-global-color-yellow-900);--sapphire-semantic-color-foreground-on-positive-subtle: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-negative-subtle: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-accent-subtle: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-positive: var(--sapphire-global-color-alpha-green-400);--sapphire-semantic-color-foreground-warning: var(--sapphire-global-color-alpha-yellow-400);--sapphire-semantic-color-foreground-negative: var(--sapphire-global-color-alpha-red-400);--sapphire-semantic-color-foreground-secondary: color(from var(--sapphire-global-color-gray-50) xyz x y z / .55);--sapphire-semantic-color-foreground-secondary-alpha: .55;--sapphire-semantic-color-foreground-primary: var(--sapphire-global-color-gray-50);--sapphire-semantic-color-background-decorative-neutral: var(--sapphire-global-color-alpha-gray-800);--sapphire-semantic-color-background-popover: var(--sapphire-global-color-gray-800);--sapphire-semantic-color-background-surface: var(--sapphire-global-color-gray-900);--sapphire-semantic-color-background-field: var(--sapphire-global-color-gray-800);--sapphire-semantic-color-background-warning-subtle: var(--sapphire-global-color-alpha-yellow-900);--sapphire-semantic-color-background-positive-subtle: var(--sapphire-global-color-alpha-green-800);--sapphire-semantic-color-background-negative-subtle: var(--sapphire-global-color-alpha-red-800);--sapphire-semantic-color-background-accent-subtle: var(--sapphire-global-color-alpha-blue-800);--sapphire-semantic-color-background-neutral-subtle: var(--sapphire-global-color-alpha-gray-900);--sapphire-semantic-color-background-progress-track: var(--sapphire-global-color-alpha-gray-700);--sapphire-semantic-color-background-segmented-control-knob: var(--sapphire-global-color-alpha-gray-600);--sapphire-semantic-color-background-segmented-control-track: var(--sapphire-global-color-alpha-gray-800);--sapphire-semantic-color-background-switch-default: var(--sapphire-global-color-alpha-gray-600);--sapphire-semantic-color-background-action-highlight: var(--sapphire-global-color-alpha-gray-900);--sapphire-semantic-color-background-action-secondary-default: var(--sapphire-global-color-alpha-gray-800);--sapphire-semantic-color-border-field-default: color(from var(--sapphire-global-color-gray-50) xyz x y z / .32);--sapphire-semantic-color-border-field-default-alpha: .32;--sapphire-semantic-color-border-tertiary: color(from var(--sapphire-global-color-gray-50) xyz x y z / .06);--sapphire-semantic-color-border-tertiary-alpha: .06;--sapphire-semantic-color-border-secondary: color(from var(--sapphire-global-color-gray-50) xyz x y z / .08);--sapphire-semantic-color-border-secondary-alpha: .08;--sapphire-semantic-color-border-primary: color(from var(--sapphire-global-color-gray-50) xyz x y z / .16);--sapphire-semantic-color-border-primary-alpha: .16;--sapphire-semantic-color-state-border-active: color(from var(--sapphire-global-color-gray-100) xyz x y z / .2);--sapphire-semantic-color-state-border-active-alpha: .2;--sapphire-semantic-color-state-border-hover: color(from var(--sapphire-global-color-gray-100) xyz x y z / .12);--sapphire-semantic-color-state-border-hover-alpha: .12;--sapphire-semantic-color-state-negative-subtle-active: color(from var(--sapphire-global-color-red-100) xyz x y z / .12);--sapphire-semantic-color-state-negative-subtle-active-alpha: .12;--sapphire-semantic-color-state-negative-subtle-hover: color(from var(--sapphire-global-color-red-100) xyz x y z / .08);--sapphire-semantic-color-state-negative-subtle-hover-alpha: .08;--sapphire-semantic-color-state-negative-active: color(from var(--sapphire-global-color-red-100) xyz x y z / .2);--sapphire-semantic-color-state-negative-active-alpha: .2;--sapphire-semantic-color-state-negative-hover: color(from var(--sapphire-global-color-red-100) xyz x y z / .12);--sapphire-semantic-color-state-negative-hover-alpha: .12;--sapphire-semantic-color-state-neutral-ghost-active: color(from var(--sapphire-global-color-gray-200) xyz x y z / .1);--sapphire-semantic-color-state-neutral-ghost-active-alpha: .1;--sapphire-semantic-color-state-neutral-ghost-hover: color(from var(--sapphire-global-color-gray-200) xyz x y z / .06);--sapphire-semantic-color-state-neutral-ghost-hover-alpha: .06;--sapphire-semantic-color-state-neutral-active: color(from var(--sapphire-global-color-gray-200) xyz x y z / .1);--sapphire-semantic-color-state-neutral-active-alpha: .1;--sapphire-semantic-color-state-neutral-hover: color(from var(--sapphire-global-color-gray-200) xyz x y z / .06);--sapphire-semantic-color-state-neutral-hover-alpha: .06;--sapphire-semantic-color-state-accent-active: color(from var(--sapphire-global-color-blue-100) xyz x y z / .2);--sapphire-semantic-color-state-accent-active-alpha: .2;--sapphire-semantic-color-state-accent-hover: color(from var(--sapphire-global-color-blue-100) xyz x y z / .12);--sapphire-semantic-color-state-accent-hover-alpha: .12;--sapphire-global-color-alpha-blue-400: var(--sapphire-global-color-blue-400);--sapphire-global-color-alpha-blue-300: var(--sapphire-global-color-blue-300);--sapphire-global-color-alpha-blue-200: var(--sapphire-global-color-blue-200);--sapphire-global-color-alpha-blue-100: var(--sapphire-global-color-blue-100);--sapphire-global-color-alpha-blue-50: var(--sapphire-global-color-blue-50);--sapphire-semantic-color-foreground-accent: var(--sapphire-global-color-alpha-blue-400);--sapphire-semantic-color-background-progress-fill: var(--sapphire-semantic-color-background-accent)}::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}::ng-deep .cdk-overlay-transparent-backdrop{visibility:visible!important;opacity:0!important}:host{color-scheme:light}\n"] }]
|
|
7088
6418
|
}] });
|
|
7089
6419
|
/**
|
|
7090
6420
|
* Sapphire default theme
|
|
@@ -7092,10 +6422,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
7092
6422
|
class ThemeDefaultDark {
|
|
7093
6423
|
}
|
|
7094
6424
|
ThemeDefaultDark.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ThemeDefaultDark, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7095
|
-
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:transparent}to{background:var(--sapphire-semantic-color-background-backdrop)}}@keyframes backdrop-fade-out{0%{background:var(--sapphire-semantic-color-background-backdrop)}to{background: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:var(--sapphire-semantic-transitions-fade);animation-fill-mode:forwards}.sapphire-backdrop--exiting,:host.sapphire-backdrop--exiting{animation-name:backdrop-fade-out}.sapphire-theme-default-dark,: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-lg: 1200px;--sapphire-semantic-size-breakpoint-md: 960px;--sapphire-semantic-size-breakpoint-sm: 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-default-bold: 600;--sapphire-semantic-font-weight-default-medium: 500;--sapphire-semantic-font-weight-default-regular: 400;--sapphire-semantic-font-weight-default-light: 300;--sapphire-global-transitions-ease-in: cubic-bezier(0, 0, 0, 1);--sapphire-global-transitions-ease-in-out-quick: cubic-bezier(.5, 0, 0, 1);--sapphire-global-transitions-ease-in-out: cubic-bezier(.7, 0, .2, 1);--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.3;--sapphire-global-size-font-300: 3rem;--sapphire-global-size-font-250: 2.5rem;--sapphire-global-size-font-200: 2rem;--sapphire-global-size-font-175: 1.75rem;--sapphire-global-size-font-163: 1.625rem;--sapphire-global-size-font-150: 1.5rem;--sapphire-global-size-font-125: 1.25rem;--sapphire-global-size-font-112: 1.125rem;--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-110: 2.75rem;--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-40: 16px;--sapphire-global-size-static-30: 12px;--sapphire-global-size-static-20: 8px;--sapphire-global-size-static-15: 6px;--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-md: 0px 0px 0px .5px hsl(0 0% 100% / .1) inset, 0px 4px 16px 0px hsl(212 63% 12% / .04);--sapphire-global-opacity-30: .3;--sapphire-global-font-danske-name: \"Danske\";--sapphire-global-color-secondary-green-4: hsl(137 64% 78%);--sapphire-global-color-secondary-green-3: hsl(152 42% 56%);--sapphire-global-color-secondary-green-2: hsl(152 44% 38%);--sapphire-global-color-secondary-green-1: hsl(158 58% 19%);--sapphire-global-color-secondary-copper-4: hsl(23 69% 75%);--sapphire-global-color-secondary-copper-3: hsl(19 61% 60%);--sapphire-global-color-secondary-copper-2: hsl(18 57% 41%);--sapphire-global-color-secondary-copper-1: hsl(12 65% 23%);--sapphire-global-color-secondary-gold-4: hsl(45 63% 69%);--sapphire-global-color-secondary-gold-3: hsl(39 49% 54%);--sapphire-global-color-secondary-gold-2: hsl(37 57% 36%);--sapphire-global-color-secondary-gold-1: hsl(37 68% 19%);--sapphire-global-color-secondary-blue-4: hsl(211 72% 72%);--sapphire-global-color-secondary-blue-3: hsl(214 59% 62%);--sapphire-global-color-secondary-blue-2: hsl(218 51% 52%);--sapphire-global-color-secondary-blue-1: hsl(212 100% 24%);--sapphire-global-color-alpha-yellow-950: hsl(24 100% 14% / .902);--sapphire-global-color-alpha-yellow-900: hsl(25 100% 27% / .733);--sapphire-global-color-alpha-yellow-800: hsl(27 100% 37% / .705);--sapphire-global-color-alpha-yellow-700: hsl(31 100% 38% / .846);--sapphire-global-color-alpha-yellow-600: hsl(36 100% 44% / .902);--sapphire-global-color-alpha-yellow-500: hsl(41 100% 51% / .905);--sapphire-global-color-alpha-yellow-400: hsl(46 100% 55% / .971);--sapphire-global-color-alpha-yellow-300: hsl(46 100% 65% / .987);--sapphire-global-color-alpha-yellow-200: hsl(50 100% 77% / .979);--sapphire-global-color-alpha-yellow-100: hsl(51 100% 89% / .987);--sapphire-global-color-alpha-yellow-50: hsl(53 100% 92%);--sapphire-global-color-alpha-green-950: hsl(87 100% 10% / .508);--sapphire-global-color-alpha-green-900: hsl(86 100% 27% / .254);--sapphire-global-color-alpha-green-800: hsl(90 100% 56% / .198);--sapphire-global-color-alpha-green-700: hsl(101 100% 62% / .278);--sapphire-global-color-alpha-green-600: hsl(111 100% 64% / .396);--sapphire-global-color-alpha-green-500: hsl(113 100% 64% / .489);--sapphire-global-color-alpha-green-400: hsl(116 100% 70% / .662);--sapphire-global-color-alpha-green-300: hsl(117 100% 79% / .733);--sapphire-global-color-alpha-green-200: hsl(118 100% 86% / .83);--sapphire-global-color-alpha-green-100: hsl(120 100% 92% / .906);--sapphire-global-color-alpha-green-50: hsl(120 100% 97% / .939);--sapphire-global-color-alpha-red-950: hsl(7 100% 12% / .648);--sapphire-global-color-alpha-red-900: hsl(10 100% 30% / .423);--sapphire-global-color-alpha-red-800: hsl(5 100% 56% / .413);--sapphire-global-color-alpha-red-700: hsl(3 100% 59% / .564);--sapphire-global-color-alpha-red-600: hsl(1 100% 61% / .701);--sapphire-global-color-alpha-red-500: hsl(1 100% 60% / .826);--sapphire-global-color-alpha-red-400: hsl(1 100% 68% / .963);--sapphire-global-color-alpha-red-300: hsl(1 100% 75% / .979);--sapphire-global-color-alpha-red-200: hsl(2 100% 84%);--sapphire-global-color-alpha-red-100: hsl(4 100% 92%);--sapphire-global-color-alpha-red-50: hsl(0 100% 96% / .991);--sapphire-global-color-alpha-blue-950: hsl(210 100% 11% / .667);--sapphire-global-color-alpha-blue-900: hsl(210 100% 17% / .667);--sapphire-global-color-alpha-blue-800: hsl(211 100% 28% / .667);--sapphire-global-color-alpha-blue-700: hsl(211 100% 39% / .667);--sapphire-global-color-alpha-blue-600: hsl(212 100% 50% / .699);--sapphire-global-color-alpha-blue-500: hsl(215 100% 50% / .894);--sapphire-global-color-alpha-sand-950: hsl(33 100% 24% / .31);--sapphire-global-color-alpha-sand-900: hsl(35 100% 58% / .224);--sapphire-global-color-alpha-sand-800: hsl(38 100% 66% / .307);--sapphire-global-color-alpha-sand-700: hsl(38 100% 72% / .39);--sapphire-global-color-alpha-sand-600: hsl(38 100% 76% / .476);--sapphire-global-color-alpha-sand-500: hsl(39 100% 84% / .586);--sapphire-global-color-alpha-sand-400: hsl(42 100% 88% / .723);--sapphire-global-color-alpha-sand-300: hsl(45 100% 92% / .802);--sapphire-global-color-alpha-sand-200: hsl(44 100% 97% / .885);--sapphire-global-color-alpha-sand-100: hsl(53 100% 98% / .92);--sapphire-global-color-alpha-sand-50: hsl(40 100% 99% / .96);--sapphire-global-color-alpha-gray-900: hsl(215 97% 75% / .087);--sapphire-global-color-alpha-gray-800: hsl(221 100% 81% / .144);--sapphire-global-color-alpha-gray-700: hsl(214 100% 85% / .254);--sapphire-global-color-alpha-gray-600: hsl(213 100% 85% / .363);--sapphire-global-color-alpha-gray-500: hsl(212 100% 89% / .508);--sapphire-global-color-alpha-gray-400: hsl(211 100% 91% / .663);--sapphire-global-color-alpha-gray-300: hsl(211 100% 95% / .803);--sapphire-global-color-alpha-gray-200: hsl(212 100% 97% / .871);--sapphire-global-color-alpha-gray-100: hsl(207 100% 98% / .926);--sapphire-global-color-alpha-gray-50: hsl(200 100% 99% / .966);--sapphire-global-color-yellow-950: hsl(24 91% 14%);--sapphire-global-color-yellow-900: hsl(25 84% 22%);--sapphire-global-color-yellow-800: hsl(27 86% 28%);--sapphire-global-color-yellow-700: hsl(31 94% 33%);--sapphire-global-color-yellow-600: hsl(36 97% 40%);--sapphire-global-color-yellow-500: hsl(41 95% 46%);--sapphire-global-color-yellow-400: hsl(46 94% 54%);--sapphire-global-color-yellow-300: hsl(46 97% 65%);--sapphire-global-color-yellow-200: hsl(51 92% 75%);--sapphire-global-color-yellow-100: hsl(51 90% 88%);--sapphire-global-color-yellow-50: hsl(53 100% 92%);--sapphire-global-color-green-950: hsl(129 42% 9%);--sapphire-global-color-green-900: hsl(131 40% 14%);--sapphire-global-color-green-800: hsl(128 38% 18%);--sapphire-global-color-green-700: hsl(129 41% 23%);--sapphire-global-color-green-600: hsl(127 47% 30%);--sapphire-global-color-green-500: hsl(125 50% 35%);--sapphire-global-color-green-400: hsl(122 39% 49%);--sapphire-global-color-green-300: hsl(124 39% 60%);--sapphire-global-color-green-200: hsl(124 42% 73%);--sapphire-global-color-green-100: hsl(125 46% 84%);--sapphire-global-color-green-50: hsl(129 33% 92%);--sapphire-global-color-red-950: hsl(358 57% 10%);--sapphire-global-color-red-900: hsl(1 53% 17%);--sapphire-global-color-red-800: hsl(358 55% 27%);--sapphire-global-color-red-700: hsl(359 57% 36%);--sapphire-global-color-red-600: hsl(359 59% 44%);--sapphire-global-color-red-500: hsl(0 65% 51%);--sapphire-global-color-red-400: hsl(1 90% 66%);--sapphire-global-color-red-300: hsl(1 92% 74%);--sapphire-global-color-red-200: hsl(2 100% 84%);--sapphire-global-color-red-100: hsl(4 100% 92%);--sapphire-global-color-red-50: hsl(0 82% 96%);--sapphire-global-color-blue-950: hsl(210 100% 9%);--sapphire-global-color-blue-900: hsl(210 100% 14%);--sapphire-global-color-blue-800: hsl(211 100% 21%);--sapphire-global-color-blue-700: hsl(211 100% 28%);--sapphire-global-color-blue-600: hsl(212 100% 37%);--sapphire-global-color-blue-500: hsl(218 92% 49%);--sapphire-global-color-blue-400: hsl(216 100% 63%);--sapphire-global-color-blue-300: hsl(215 100% 74%);--sapphire-global-color-blue-200: hsl(214 100% 83%);--sapphire-global-color-blue-100: hsl(214 100% 90%);--sapphire-global-color-blue-50: hsl(219 100% 95%);--sapphire-global-color-sand-950: hsl(39 23% 12%);--sapphire-global-color-sand-900: hsl(41 23% 18%);--sapphire-global-color-sand-800: hsl(43 22% 25%);--sapphire-global-color-sand-700: hsl(42 20% 33%);--sapphire-global-color-sand-600: hsl(42 20% 40%);--sapphire-global-color-sand-500: hsl(43 14% 52%);--sapphire-global-color-sand-400: hsl(39 20% 66%);--sapphire-global-color-sand-300: hsl(48 20% 75%);--sapphire-global-color-sand-200: hsl(48 15% 87%);--sapphire-global-color-sand-100: hsl(60 11% 91%);--sapphire-global-color-sand-50: hsl(60 9% 96%);--sapphire-global-color-gray-950: hsl(210 94% 7%);--sapphire-global-color-gray-900: hsl(211 64% 13%);--sapphire-global-color-gray-800: hsl(213 48% 17%);--sapphire-global-color-gray-700: hsl(212 33% 27%);--sapphire-global-color-gray-600: hsl(212 27% 35%);--sapphire-global-color-gray-500: hsl(211 19% 49%);--sapphire-global-color-gray-400: hsl(211 22% 63%);--sapphire-global-color-gray-300: hsl(211 22% 77%);--sapphire-global-color-gray-200: hsl(210 26% 85%);--sapphire-global-color-gray-100: hsl(208 29% 91%);--sapphire-global-color-gray-50: hsl(206 33% 96%);--sapphire-global-color-transparent: hsla(0, 0%, 100%, 0);--sapphire-global-color-black: hsla(0, 0%, 0%, 1);--sapphire-global-color-white: hsla(0, 0%, 100%, 1);--sapphire-semantic-transitions-fade: var(--sapphire-global-transitions-ease-in);--sapphire-semantic-transitions-dynamic: var(--sapphire-global-transitions-ease-in-out-quick);--sapphire-semantic-transitions-standard: var(--sapphire-global-transitions-ease-in-out);--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-6xl: var(--sapphire-global-size-generic-180);--sapphire-semantic-size-spacing-5xl: var(--sapphire-global-size-generic-160);--sapphire-semantic-size-spacing-4xl: var(--sapphire-global-size-generic-120);--sapphire-semantic-size-spacing-3xl: var(--sapphire-global-size-generic-100);--sapphire-semantic-size-spacing-2xl: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-spacing-xl: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-spacing-lg: var(--sapphire-global-size-generic-50);--sapphire-semantic-size-spacing-md: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-spacing-sm: var(--sapphire-global-size-generic-30);--sapphire-semantic-size-spacing-xs: var(--sapphire-global-size-generic-20);--sapphire-semantic-size-spacing-2xs: var(--sapphire-global-size-generic-15);--sapphire-semantic-size-spacing-3xs: var(--sapphire-global-size-generic-10);--sapphire-semantic-size-spacing-4xs: 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-heading-2xl: var(--sapphire-global-size-font-175);--sapphire-semantic-size-font-heading-xl: var(--sapphire-global-size-font-150);--sapphire-semantic-size-font-heading-lg: var(--sapphire-global-size-font-125);--sapphire-semantic-size-font-heading-md: var(--sapphire-global-size-font-125);--sapphire-semantic-size-font-heading-sm: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-heading-xs: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-body-lg: var(--sapphire-global-size-font-112);--sapphire-semantic-size-font-body-md: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-body-sm: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-body-xs: var(--sapphire-global-size-font-75);--sapphire-semantic-size-radius-2xl: var(--sapphire-global-size-static-40);--sapphire-semantic-size-radius-xl: var(--sapphire-global-size-static-30);--sapphire-semantic-size-radius-lg: var(--sapphire-global-size-static-20);--sapphire-semantic-size-radius-md: var(--sapphire-global-size-static-15);--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-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-field: var(--sapphire-global-size-generic-750);--sapphire-semantic-size-height-box-md: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-height-control-4xl: var(--sapphire-global-size-generic-200);--sapphire-semantic-size-height-control-3xl: var(--sapphire-global-size-generic-180);--sapphire-semantic-size-height-control-2xl: var(--sapphire-global-size-generic-160);--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-30);--sapphire-semantic-font-name-default: var(--sapphire-global-font-danske-name);--sapphire-semantic-color-foreground-on-decorative-neutral: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-16: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-15: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-14: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-13: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-12: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-11: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-10: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-9: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-8: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-7: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-6: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-5: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-4: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-3: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-2: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-1: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-signature: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-warning-subtle: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-warning: var(--sapphire-global-color-yellow-900);--sapphire-semantic-color-foreground-on-positive-subtle: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-positive: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-negative-subtle: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-negative: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-accent-subtle: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-accent: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-positive: var(--sapphire-global-color-alpha-green-400);--sapphire-semantic-color-foreground-warning: var(--sapphire-global-color-alpha-yellow-400);--sapphire-semantic-color-foreground-negative: var(--sapphire-global-color-alpha-red-400);--sapphire-semantic-color-foreground-secondary: color(from var(--sapphire-global-color-gray-50) xyz x y z / .55);--sapphire-semantic-color-foreground-secondary-alpha: .55;--sapphire-semantic-color-foreground-primary: var(--sapphire-global-color-gray-50);--sapphire-semantic-color-background-decorative-neutral: var(--sapphire-global-color-alpha-gray-800);--sapphire-semantic-color-background-decorative-16: var(--sapphire-global-color-secondary-green-4);--sapphire-semantic-color-background-decorative-15: var(--sapphire-global-color-secondary-green-3);--sapphire-semantic-color-background-decorative-14: var(--sapphire-global-color-secondary-green-2);--sapphire-semantic-color-background-decorative-13: var(--sapphire-global-color-secondary-green-1);--sapphire-semantic-color-background-decorative-12: var(--sapphire-global-color-secondary-copper-4);--sapphire-semantic-color-background-decorative-11: var(--sapphire-global-color-secondary-copper-3);--sapphire-semantic-color-background-decorative-10: var(--sapphire-global-color-secondary-copper-2);--sapphire-semantic-color-background-decorative-9: var(--sapphire-global-color-secondary-copper-1);--sapphire-semantic-color-background-decorative-8: var(--sapphire-global-color-secondary-gold-4);--sapphire-semantic-color-background-decorative-7: var(--sapphire-global-color-secondary-gold-3);--sapphire-semantic-color-background-decorative-6: var(--sapphire-global-color-secondary-gold-2);--sapphire-semantic-color-background-decorative-5: var(--sapphire-global-color-secondary-gold-1);--sapphire-semantic-color-background-decorative-4: var(--sapphire-global-color-secondary-blue-4);--sapphire-semantic-color-background-decorative-3: var(--sapphire-global-color-secondary-blue-3);--sapphire-semantic-color-background-decorative-2: var(--sapphire-global-color-secondary-blue-2);--sapphire-semantic-color-background-decorative-1: var(--sapphire-global-color-secondary-blue-1);--sapphire-semantic-color-background-popover: var(--sapphire-global-color-gray-800);--sapphire-semantic-color-background-backdrop: color(from var(--sapphire-global-color-gray-950) xyz x y z / .6);--sapphire-semantic-color-background-backdrop-alpha: .6;--sapphire-semantic-color-background-surface: var(--sapphire-global-color-gray-900);--sapphire-semantic-color-background-field: var(--sapphire-global-color-gray-800);--sapphire-semantic-color-background-warning-subtle: var(--sapphire-global-color-alpha-yellow-900);--sapphire-semantic-color-background-positive-subtle: var(--sapphire-global-color-alpha-green-800);--sapphire-semantic-color-background-negative-subtle: var(--sapphire-global-color-alpha-red-800);--sapphire-semantic-color-background-accent-subtle: var(--sapphire-global-color-alpha-blue-800);--sapphire-semantic-color-background-neutral-subtle: var(--sapphire-global-color-alpha-gray-900);--sapphire-semantic-color-background-negative: var(--sapphire-global-color-red-500);--sapphire-semantic-color-background-warning: var(--sapphire-global-color-yellow-300);--sapphire-semantic-color-background-positive: var(--sapphire-global-color-green-500);--sapphire-semantic-color-background-accent: var(--sapphire-global-color-blue-500);--sapphire-semantic-color-background-signature: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-background-segmented-control-knob: var(--sapphire-global-color-alpha-gray-600);--sapphire-semantic-color-background-segmented-control-track: var(--sapphire-global-color-alpha-gray-800);--sapphire-semantic-color-background-switch-default: var(--sapphire-global-color-alpha-gray-600);--sapphire-semantic-color-background-action-highlight: var(--sapphire-global-color-alpha-gray-900);--sapphire-semantic-color-background-action-select-tertiary-default: var(--sapphire-global-color-transparent);--sapphire-semantic-color-background-action-danger-tertiary-default: var(--sapphire-global-color-transparent);--sapphire-semantic-color-background-action-tertiary-default: var(--sapphire-global-color-transparent);--sapphire-semantic-color-background-action-secondary-default: var(--sapphire-global-color-alpha-gray-800);--sapphire-semantic-color-focus-ring: var(--sapphire-global-color-blue-400);--sapphire-semantic-color-border-negative-default: var(--sapphire-global-color-red-500);--sapphire-semantic-color-border-accent: var(--sapphire-global-color-blue-500);--sapphire-semantic-color-border-tertiary: color(from var(--sapphire-global-color-gray-50) xyz x y z / .06);--sapphire-semantic-color-border-tertiary-alpha: .06;--sapphire-semantic-color-border-secondary: color(from var(--sapphire-global-color-gray-50) xyz x y z / .08);--sapphire-semantic-color-border-secondary-alpha: .08;--sapphire-semantic-color-border-primary: color(from var(--sapphire-global-color-gray-50) xyz x y z / .16);--sapphire-semantic-color-border-primary-alpha: .16;--sapphire-semantic-color-state-border-active: color(from var(--sapphire-global-color-gray-100) xyz x y z / .2);--sapphire-semantic-color-state-border-active-alpha: .2;--sapphire-semantic-color-state-border-hover: color(from var(--sapphire-global-color-gray-100) xyz x y z / .12);--sapphire-semantic-color-state-border-hover-alpha: .12;--sapphire-semantic-color-state-negative-subtle-active: color(from var(--sapphire-global-color-red-100) xyz x y z / .12);--sapphire-semantic-color-state-negative-subtle-active-alpha: .12;--sapphire-semantic-color-state-negative-subtle-hover: color(from var(--sapphire-global-color-red-100) xyz x y z / .08);--sapphire-semantic-color-state-negative-subtle-hover-alpha: .08;--sapphire-semantic-color-state-negative-active: color(from var(--sapphire-global-color-red-100) xyz x y z / .2);--sapphire-semantic-color-state-negative-active-alpha: .2;--sapphire-semantic-color-state-negative-hover: color(from var(--sapphire-global-color-red-100) xyz x y z / .12);--sapphire-semantic-color-state-negative-hover-alpha: .12;--sapphire-semantic-color-state-neutral-ghost-active: color(from var(--sapphire-global-color-gray-200) xyz x y z / .1);--sapphire-semantic-color-state-neutral-ghost-active-alpha: .1;--sapphire-semantic-color-state-neutral-ghost-hover: color(from var(--sapphire-global-color-gray-200) xyz x y z / .06);--sapphire-semantic-color-state-neutral-ghost-hover-alpha: .06;--sapphire-semantic-color-state-neutral-active: color(from var(--sapphire-global-color-gray-200) xyz x y z / .1);--sapphire-semantic-color-state-neutral-active-alpha: .1;--sapphire-semantic-color-state-neutral-hover: color(from var(--sapphire-global-color-gray-200) xyz x y z / .06);--sapphire-semantic-color-state-neutral-hover-alpha: .06;--sapphire-semantic-color-state-accent-subtle-active: color(from var(--sapphire-global-color-blue-500) xyz x y z / .12);--sapphire-semantic-color-state-accent-subtle-active-alpha: .12;--sapphire-semantic-color-state-accent-subtle-hover: color(from var(--sapphire-global-color-blue-500) xyz x y z / .06);--sapphire-semantic-color-state-accent-subtle-hover-alpha: .06;--sapphire-semantic-color-state-accent-active: color(from var(--sapphire-global-color-blue-100) xyz x y z / .2);--sapphire-semantic-color-state-accent-active-alpha: .2;--sapphire-semantic-color-state-accent-hover: color(from var(--sapphire-global-color-blue-100) xyz x y z / .12);--sapphire-semantic-color-state-accent-hover-alpha: .12;--sapphire-global-color-alpha-blue-400: var(--sapphire-global-color-blue-400);--sapphire-global-color-alpha-blue-300: var(--sapphire-global-color-blue-300);--sapphire-global-color-alpha-blue-200: var(--sapphire-global-color-blue-200);--sapphire-global-color-alpha-blue-100: var(--sapphire-global-color-blue-100);--sapphire-global-color-alpha-blue-50: var(--sapphire-global-color-blue-50);--sapphire-global-color-alpha-gray-950: var(--sapphire-global-color-gray-950);--sapphire-semantic-size-spacing-container-horizontal-md: var(--sapphire-semantic-size-spacing-xl);--sapphire-semantic-size-spacing-container-horizontal-sm: var(--sapphire-semantic-size-spacing-sm);--sapphire-semantic-size-spacing-control-horizontal-lg: var(--sapphire-semantic-size-spacing-md);--sapphire-semantic-size-spacing-control-horizontal-md: var(--sapphire-semantic-size-spacing-sm);--sapphire-semantic-size-spacing-control-vertical-lg: var(--sapphire-semantic-size-spacing-sm);--sapphire-semantic-size-spacing-control-vertical-md: var(--sapphire-semantic-size-spacing-xs);--sapphire-semantic-size-spacing-control-vertical-sm: var(--sapphire-semantic-size-spacing-3xs);--sapphire-semantic-size-font-control-lg: var(--sapphire-semantic-size-font-body-md);--sapphire-semantic-size-font-control-md: var(--sapphire-semantic-size-font-body-sm);--sapphire-semantic-size-font-control-sm: var(--sapphire-semantic-size-font-body-xs);--sapphire-semantic-size-font-label-md: var(--sapphire-semantic-size-font-body-sm);--sapphire-semantic-size-font-label-sm: var(--sapphire-semantic-size-font-body-xs);--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-color-foreground-on-neutral-subtle: var(--sapphire-semantic-color-foreground-primary);--sapphire-semantic-color-foreground-accent: var(--sapphire-global-color-alpha-blue-400);--sapphire-semantic-color-foreground-action-danger-default: var(--sapphire-semantic-color-foreground-negative);--sapphire-semantic-color-foreground-action-on-select-secondary-default: var(--sapphire-semantic-color-foreground-on-accent-subtle);--sapphire-semantic-color-foreground-action-on-select-default: var(--sapphire-semantic-color-foreground-on-accent);--sapphire-semantic-color-foreground-action-on-danger-secondary-default: var(--sapphire-semantic-color-foreground-on-negative-subtle);--sapphire-semantic-color-foreground-action-on-danger-default: var(--sapphire-semantic-color-foreground-on-negative);--sapphire-semantic-color-foreground-action-on-tertiary-default: var(--sapphire-semantic-color-foreground-primary);--sapphire-semantic-color-foreground-action-on-primary-default: var(--sapphire-semantic-color-foreground-on-accent);--sapphire-semantic-color-background-spinner-primary: var(--sapphire-semantic-color-foreground-primary);--sapphire-semantic-color-background-skeleton: var(--sapphire-semantic-color-state-neutral-active);--sapphire-semantic-color-background-switch-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-active-alpha) * 100%), var(--sapphire-semantic-color-background-switch-default) calc((1 - var(--sapphire-semantic-color-state-neutral-active-alpha)) * 100%));--sapphire-semantic-color-background-switch-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-hover-alpha) * 100%), var(--sapphire-semantic-color-background-switch-default) calc((1 - var(--sapphire-semantic-color-state-neutral-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-select-tertiary-active: var(--sapphire-semantic-color-state-accent-subtle-active);--sapphire-semantic-color-background-action-select-tertiary-hover: var(--sapphire-semantic-color-state-accent-subtle-hover);--sapphire-semantic-color-background-action-select-secondary-default: var(--sapphire-semantic-color-background-accent-subtle);--sapphire-semantic-color-background-action-danger-tertiary-active: var(--sapphire-semantic-color-state-negative-subtle-active);--sapphire-semantic-color-background-action-danger-tertiary-hover: var(--sapphire-semantic-color-state-negative-subtle-hover);--sapphire-semantic-color-background-action-danger-secondary-default: var(--sapphire-semantic-color-background-negative-subtle);--sapphire-semantic-color-background-action-danger-default: var(--sapphire-semantic-color-background-negative);--sapphire-semantic-color-background-action-tertiary-active: var(--sapphire-semantic-color-state-neutral-ghost-active);--sapphire-semantic-color-background-action-tertiary-hover: var(--sapphire-semantic-color-state-neutral-ghost-hover);--sapphire-semantic-color-background-action-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-secondary-default) calc((1 - var(--sapphire-semantic-color-state-neutral-active-alpha)) * 100%));--sapphire-semantic-color-background-action-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-secondary-default) calc((1 - var(--sapphire-semantic-color-state-neutral-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-primary-default: var(--sapphire-semantic-color-background-accent);--sapphire-semantic-color-border-field-default: var(--sapphire-semantic-color-border-primary);--sapphire-semantic-color-border-negative-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-border-negative-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-border-negative-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-border-negative-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-danger-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-danger-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-link-default: var(--sapphire-semantic-color-foreground-accent);--sapphire-semantic-color-foreground-action-select-default: var(--sapphire-semantic-color-foreground-accent);--sapphire-semantic-color-foreground-action-on-select-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-select-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-select-active: var(--sapphire-semantic-color-foreground-action-on-select-default);--sapphire-semantic-color-foreground-action-on-select-hover: var(--sapphire-semantic-color-foreground-action-on-select-default);--sapphire-semantic-color-foreground-action-on-danger-tertiary-default: var(--sapphire-semantic-color-foreground-action-danger-default);--sapphire-semantic-color-foreground-action-on-danger-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-danger-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-danger-active: var(--sapphire-semantic-color-foreground-action-on-danger-default);--sapphire-semantic-color-foreground-action-on-danger-hover: var(--sapphire-semantic-color-foreground-action-on-danger-default);--sapphire-semantic-color-foreground-action-on-tertiary-active: var(--sapphire-semantic-color-foreground-action-on-tertiary-default);--sapphire-semantic-color-foreground-action-on-tertiary-hover: var(--sapphire-semantic-color-foreground-action-on-tertiary-default);--sapphire-semantic-color-foreground-action-on-secondary-default: var(--sapphire-semantic-color-foreground-on-neutral-subtle);--sapphire-semantic-color-foreground-action-on-primary-active: var(--sapphire-semantic-color-foreground-action-on-primary-default);--sapphire-semantic-color-foreground-action-on-primary-hover: var(--sapphire-semantic-color-foreground-action-on-primary-default);--sapphire-semantic-color-background-spinner-secondary: var(--sapphire-semantic-color-foreground-accent);--sapphire-semantic-color-background-action-select-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-subtle-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-subtle-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-subtle-active-alpha)) * 100%));--sapphire-semantic-color-background-action-select-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-subtle-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-subtle-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-subtle-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-select-default: var(--sapphire-semantic-color-background-action-primary-default);--sapphire-semantic-color-background-action-danger-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-subtle-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-subtle-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-subtle-active-alpha)) * 100%));--sapphire-semantic-color-background-action-danger-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-subtle-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-subtle-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-subtle-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-danger-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-background-action-danger-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-primary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-primary-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-background-action-primary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-primary-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-border-field-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-border-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-border-active-alpha) * 100%), var(--sapphire-semantic-color-border-field-default) calc((1 - var(--sapphire-semantic-color-state-border-active-alpha)) * 100%));--sapphire-semantic-color-border-field-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-border-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-border-hover-alpha) * 100%), var(--sapphire-semantic-color-border-field-default) calc((1 - var(--sapphire-semantic-color-state-border-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-link-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-link-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-link-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-link-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-select-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-select-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-select-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-select-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-select-tertiary-default: var(--sapphire-semantic-color-foreground-action-select-default);--sapphire-semantic-color-foreground-action-on-danger-tertiary-active: var(--sapphire-semantic-color-foreground-action-danger-active);--sapphire-semantic-color-foreground-action-on-danger-tertiary-hover: var(--sapphire-semantic-color-foreground-action-danger-hover);--sapphire-semantic-color-foreground-action-on-secondary-active: var(--sapphire-semantic-color-foreground-action-on-secondary-default);--sapphire-semantic-color-foreground-action-on-secondary-hover: var(--sapphire-semantic-color-foreground-action-on-secondary-default);--sapphire-semantic-color-background-action-select-active: var(--sapphire-semantic-color-background-action-primary-active);--sapphire-semantic-color-background-action-select-hover: var(--sapphire-semantic-color-background-action-primary-hover);--sapphire-semantic-color-foreground-action-on-select-tertiary-active: var(--sapphire-semantic-color-foreground-action-select-active);--sapphire-semantic-color-foreground-action-on-select-tertiary-hover: var(--sapphire-semantic-color-foreground-action-select-hover)}@media screen and (min-width: 768px){.sapphire-theme-default-dark,: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 screen and (min-width: 960px){.sapphire-theme-default-dark,:host,.sapphire-theme--secondary,:host ::ng-deep .sapphire-theme--secondary,.sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-semantic-size-font-heading-sm: var(--sapphire-global-size-font-125);--sapphire-semantic-size-font-heading-md: var(--sapphire-global-size-font-150);--sapphire-semantic-size-font-heading-lg: var(--sapphire-global-size-font-200);--sapphire-semantic-size-font-heading-xl: var(--sapphire-global-size-font-250);--sapphire-semantic-size-font-heading-2xl: var(--sapphire-global-size-font-300)}}@media (prefers-reduced-motion){.sapphire-theme-default-dark,: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-dark.sapphire-theme--secondary,.sapphire-theme-default-dark .sapphire-theme--secondary,:host .sapphire-theme--secondary,:host ::ng-deep .sapphire-theme--secondary{--sapphire-global-shadow-md: 0px 0px 0px .5px hsl(0 0% 100% / .1) inset, 0px 4px 16px 0px hsl(209 100% 6% / .04);--sapphire-global-color-alpha-red-50: hsl(4 100% 97% / .99);--sapphire-semantic-color-background-surface: var(--sapphire-global-color-gray-950)}.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-semantic-size-breakpoint-xl: 1400px;--sapphire-semantic-size-breakpoint-lg: 1200px;--sapphire-semantic-size-breakpoint-md: 960px;--sapphire-semantic-size-breakpoint-sm: 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-default-bold: 600;--sapphire-semantic-font-weight-default-medium: 500;--sapphire-semantic-font-weight-default-regular: 400;--sapphire-semantic-font-weight-default-light: 300;--sapphire-global-transitions-ease-in: cubic-bezier(0, 0, 0, 1);--sapphire-global-transitions-ease-in-out-quick: cubic-bezier(.5, 0, 0, 1);--sapphire-global-transitions-ease-in-out: cubic-bezier(.7, 0, .2, 1);--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.3;--sapphire-global-size-font-300: 3rem;--sapphire-global-size-font-250: 2.5rem;--sapphire-global-size-font-200: 2rem;--sapphire-global-size-font-175: 1.75rem;--sapphire-global-size-font-163: 1.625rem;--sapphire-global-size-font-150: 1.5rem;--sapphire-global-size-font-125: 1.25rem;--sapphire-global-size-font-112: 1.125rem;--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-110: 2.75rem;--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-40: 16px;--sapphire-global-size-static-30: 12px;--sapphire-global-size-static-20: 8px;--sapphire-global-size-static-15: 6px;--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-md: 0px 0px 0px 1px hsl(212 63% 12% / .1) inset, 0px 4px 24px 0px hsl(212 63% 12% / .04);--sapphire-global-opacity-30: .3;--sapphire-global-font-danske-name: \"Danske\";--sapphire-global-color-secondary-green-4: hsl(137 64% 78%);--sapphire-global-color-secondary-green-3: hsl(152 42% 56%);--sapphire-global-color-secondary-green-2: hsl(152 44% 38%);--sapphire-global-color-secondary-green-1: hsl(158 58% 19%);--sapphire-global-color-secondary-copper-4: hsl(23 69% 75%);--sapphire-global-color-secondary-copper-3: hsl(19 61% 60%);--sapphire-global-color-secondary-copper-2: hsl(18 57% 41%);--sapphire-global-color-secondary-copper-1: hsl(12 65% 23%);--sapphire-global-color-secondary-gold-4: hsl(45 63% 69%);--sapphire-global-color-secondary-gold-3: hsl(39 49% 54%);--sapphire-global-color-secondary-gold-2: hsl(37 57% 36%);--sapphire-global-color-secondary-gold-1: hsl(37 68% 19%);--sapphire-global-color-secondary-blue-4: hsl(211 72% 72%);--sapphire-global-color-secondary-blue-3: hsl(214 59% 62%);--sapphire-global-color-secondary-blue-2: hsl(218 51% 52%);--sapphire-global-color-secondary-blue-1: hsl(212 100% 24%);--sapphire-global-color-alpha-yellow-950: hsl(23 100% 13% / .987);--sapphire-global-color-alpha-yellow-900: hsl(25 100% 19% / .963);--sapphire-global-color-alpha-yellow-800: hsl(27 100% 25% / .959);--sapphire-global-color-alpha-yellow-700: hsl(31 100% 32% / .979);--sapphire-global-color-alpha-yellow-600: hsl(36 100% 39% / .987);--sapphire-global-color-alpha-yellow-500: hsl(41 100% 45% / .975);--sapphire-global-color-alpha-yellow-400: hsl(46 100% 48% / .897);--sapphire-global-color-alpha-yellow-300: hsl(46 100% 49% / .697);--sapphire-global-color-alpha-yellow-200: hsl(51 100% 48% / .47);--sapphire-global-color-alpha-yellow-100: hsl(51 100% 47% / .235);--sapphire-global-color-alpha-yellow-50: hsl(53 100% 50% / .161);--sapphire-global-color-alpha-green-950: hsl(129 100% 4% / .944);--sapphire-global-color-alpha-green-900: hsl(130 100% 6% / .916);--sapphire-global-color-alpha-green-800: hsl(128 100% 8% / .885);--sapphire-global-color-alpha-green-700: hsl(128 100% 11% / .862);--sapphire-global-color-alpha-green-600: hsl(127 100% 17% / .842);--sapphire-global-color-alpha-green-500: hsl(124 100% 21% / .822);--sapphire-global-color-alpha-green-400: hsl(122 100% 28% / .701);--sapphire-global-color-alpha-green-300: hsl(124 100% 28% / .56);--sapphire-global-color-alpha-green-200: hsl(124 100% 30% / .388);--sapphire-global-color-alpha-green-100: hsl(125 100% 11% / .231);--sapphire-global-color-alpha-green-50: hsl(129 100% 25% / .11);--sapphire-global-color-alpha-red-950: hsl(358 100% 6% / .957);--sapphire-global-color-alpha-red-900: hsl(1 100% 10% / .92);--sapphire-global-color-alpha-red-800: hsl(359 100% 17% / .877);--sapphire-global-color-alpha-red-700: hsl(359 100% 24% / .842);--sapphire-global-color-alpha-red-600: hsl(359 100% 32% / .819);--sapphire-global-color-alpha-red-500: hsl(0 100% 39% / .815);--sapphire-global-color-alpha-red-400: hsl(1 100% 47% / .65);--sapphire-global-color-alpha-red-300: hsl(1 100% 48% / .501);--sapphire-global-color-alpha-red-200: hsl(2 100% 50% / .325);--sapphire-global-color-alpha-red-100: hsl(4 100% 50% / .169);--sapphire-global-color-alpha-red-50: hsl(0 98% 45% / .079);--sapphire-global-color-alpha-blue-500: hsl(215 99% 45% / .995);--sapphire-global-color-alpha-blue-400: hsl(216 100% 50% / .74);--sapphire-global-color-alpha-blue-300: hsl(215 100% 50% / .513);--sapphire-global-color-alpha-blue-200: hsl(214 100% 50% / .349);--sapphire-global-color-alpha-blue-100: hsl(214 100% 50% / .2);--sapphire-global-color-alpha-blue-50: hsl(219 100% 50% / .091);--sapphire-global-color-alpha-sand-950: hsl(40 100% 3% / .905);--sapphire-global-color-alpha-sand-900: hsl(41 100% 5% / .858);--sapphire-global-color-alpha-sand-800: hsl(43 100% 7% / .803);--sapphire-global-color-alpha-sand-700: hsl(42 100% 9% / .74);--sapphire-global-color-alpha-sand-600: hsl(42 100% 12% / .678);--sapphire-global-color-alpha-sand-500: hsl(43 100% 12% / .548);--sapphire-global-color-alpha-sand-400: hsl(39 100% 17% / .411);--sapphire-global-color-alpha-sand-300: hsl(48 100% 17% / .294);--sapphire-global-color-alpha-sand-200: hsl(48 100% 13% / .153);--sapphire-global-color-alpha-sand-100: hsl(60 100% 10% / .098);--sapphire-global-color-alpha-sand-50: hsl(60 100% 10% / .043);--sapphire-global-color-alpha-gray-900: hsl(211 63% 13% / .952);--sapphire-global-color-alpha-gray-800: hsl(213 100% 9% / .909);--sapphire-global-color-alpha-gray-700: hsl(213 100% 11% / .819);--sapphire-global-color-alpha-gray-600: hsl(212 100% 13% / .74);--sapphire-global-color-alpha-gray-500: hsl(212 100% 15% / .603);--sapphire-global-color-alpha-gray-400: hsl(211 100% 18% / .455);--sapphire-global-color-alpha-gray-300: hsl(211 100% 20% / .282);--sapphire-global-color-alpha-gray-200: hsl(210 100% 21% / .188);--sapphire-global-color-alpha-gray-100: hsl(208 98% 23% / .114);--sapphire-global-color-alpha-gray-50: hsl(206 100% 25% / .055);--sapphire-global-color-yellow-950: hsl(24 91% 14%);--sapphire-global-color-yellow-900: hsl(25 84% 22%);--sapphire-global-color-yellow-800: hsl(27 86% 28%);--sapphire-global-color-yellow-700: hsl(31 94% 33%);--sapphire-global-color-yellow-600: hsl(36 97% 40%);--sapphire-global-color-yellow-500: hsl(41 95% 46%);--sapphire-global-color-yellow-400: hsl(46 94% 54%);--sapphire-global-color-yellow-300: hsl(46 97% 65%);--sapphire-global-color-yellow-200: hsl(51 92% 75%);--sapphire-global-color-yellow-100: hsl(51 90% 88%);--sapphire-global-color-yellow-50: hsl(53 100% 92%);--sapphire-global-color-green-950: hsl(129 42% 9%);--sapphire-global-color-green-900: hsl(131 40% 14%);--sapphire-global-color-green-800: hsl(128 38% 18%);--sapphire-global-color-green-700: hsl(129 41% 23%);--sapphire-global-color-green-600: hsl(127 47% 30%);--sapphire-global-color-green-500: hsl(125 50% 35%);--sapphire-global-color-green-400: hsl(122 39% 49%);--sapphire-global-color-green-300: hsl(124 39% 60%);--sapphire-global-color-green-200: hsl(124 42% 73%);--sapphire-global-color-green-100: hsl(125 46% 84%);--sapphire-global-color-green-50: hsl(129 33% 92%);--sapphire-global-color-red-950: hsl(358 57% 10%);--sapphire-global-color-red-900: hsl(1 53% 17%);--sapphire-global-color-red-800: hsl(358 55% 27%);--sapphire-global-color-red-700: hsl(359 57% 36%);--sapphire-global-color-red-600: hsl(359 59% 44%);--sapphire-global-color-red-500: hsl(0 65% 51%);--sapphire-global-color-red-400: hsl(1 90% 66%);--sapphire-global-color-red-300: hsl(1 92% 74%);--sapphire-global-color-red-200: hsl(2 100% 84%);--sapphire-global-color-red-100: hsl(4 100% 92%);--sapphire-global-color-red-50: hsl(0 82% 96%);--sapphire-global-color-blue-950: hsl(210 100% 9%);--sapphire-global-color-blue-900: hsl(210 100% 14%);--sapphire-global-color-blue-800: hsl(211 100% 21%);--sapphire-global-color-blue-700: hsl(211 100% 28%);--sapphire-global-color-blue-600: hsl(212 100% 37%);--sapphire-global-color-blue-500: hsl(218 92% 49%);--sapphire-global-color-blue-400: hsl(216 100% 63%);--sapphire-global-color-blue-300: hsl(215 100% 74%);--sapphire-global-color-blue-200: hsl(214 100% 83%);--sapphire-global-color-blue-100: hsl(214 100% 90%);--sapphire-global-color-blue-50: hsl(219 100% 95%);--sapphire-global-color-sand-950: hsl(39 23% 12%);--sapphire-global-color-sand-900: hsl(41 23% 18%);--sapphire-global-color-sand-800: hsl(43 22% 25%);--sapphire-global-color-sand-700: hsl(42 20% 33%);--sapphire-global-color-sand-600: hsl(42 20% 40%);--sapphire-global-color-sand-500: hsl(43 14% 52%);--sapphire-global-color-sand-400: hsl(39 20% 66%);--sapphire-global-color-sand-300: hsl(48 20% 75%);--sapphire-global-color-sand-200: hsl(48 15% 87%);--sapphire-global-color-sand-100: hsl(60 11% 91%);--sapphire-global-color-sand-50: hsl(60 9% 96%);--sapphire-global-color-gray-950: hsl(210 94% 7%);--sapphire-global-color-gray-900: hsl(211 64% 13%);--sapphire-global-color-gray-800: hsl(213 48% 17%);--sapphire-global-color-gray-700: hsl(212 33% 27%);--sapphire-global-color-gray-600: hsl(212 27% 35%);--sapphire-global-color-gray-500: hsl(211 19% 49%);--sapphire-global-color-gray-400: hsl(211 22% 63%);--sapphire-global-color-gray-300: hsl(211 22% 77%);--sapphire-global-color-gray-200: hsl(210 26% 85%);--sapphire-global-color-gray-100: hsl(208 29% 91%);--sapphire-global-color-gray-50: hsl(206 33% 96%);--sapphire-global-color-transparent: hsla(0, 0%, 100%, 0);--sapphire-global-color-black: hsla(0, 0%, 0%, 1);--sapphire-global-color-white: hsla(0, 0%, 100%, 1);--sapphire-semantic-transitions-fade: var(--sapphire-global-transitions-ease-in);--sapphire-semantic-transitions-dynamic: var(--sapphire-global-transitions-ease-in-out-quick);--sapphire-semantic-transitions-standard: var(--sapphire-global-transitions-ease-in-out);--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-6xl: var(--sapphire-global-size-generic-180);--sapphire-semantic-size-spacing-5xl: var(--sapphire-global-size-generic-160);--sapphire-semantic-size-spacing-4xl: var(--sapphire-global-size-generic-120);--sapphire-semantic-size-spacing-3xl: var(--sapphire-global-size-generic-100);--sapphire-semantic-size-spacing-2xl: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-spacing-xl: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-spacing-lg: var(--sapphire-global-size-generic-50);--sapphire-semantic-size-spacing-md: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-spacing-sm: var(--sapphire-global-size-generic-30);--sapphire-semantic-size-spacing-xs: var(--sapphire-global-size-generic-20);--sapphire-semantic-size-spacing-2xs: var(--sapphire-global-size-generic-15);--sapphire-semantic-size-spacing-3xs: var(--sapphire-global-size-generic-10);--sapphire-semantic-size-spacing-4xs: 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-heading-2xl: var(--sapphire-global-size-font-175);--sapphire-semantic-size-font-heading-xl: var(--sapphire-global-size-font-150);--sapphire-semantic-size-font-heading-lg: var(--sapphire-global-size-font-125);--sapphire-semantic-size-font-heading-md: var(--sapphire-global-size-font-125);--sapphire-semantic-size-font-heading-sm: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-heading-xs: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-body-lg: var(--sapphire-global-size-font-112);--sapphire-semantic-size-font-body-md: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-body-sm: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-body-xs: var(--sapphire-global-size-font-75);--sapphire-semantic-size-radius-2xl: var(--sapphire-global-size-static-40);--sapphire-semantic-size-radius-xl: var(--sapphire-global-size-static-30);--sapphire-semantic-size-radius-lg: var(--sapphire-global-size-static-20);--sapphire-semantic-size-radius-md: var(--sapphire-global-size-static-15);--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-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-field: var(--sapphire-global-size-generic-750);--sapphire-semantic-size-height-box-md: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-height-control-4xl: var(--sapphire-global-size-generic-200);--sapphire-semantic-size-height-control-3xl: var(--sapphire-global-size-generic-180);--sapphire-semantic-size-height-control-2xl: var(--sapphire-global-size-generic-160);--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-30);--sapphire-semantic-font-name-default: var(--sapphire-global-font-danske-name);--sapphire-semantic-color-foreground-on-decorative-neutral: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-16: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-15: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-14: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-13: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-12: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-11: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-10: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-9: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-8: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-7: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-6: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-5: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-4: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-3: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-2: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-1: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-signature: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-warning-subtle: var(--sapphire-global-color-alpha-yellow-800);--sapphire-semantic-color-foreground-on-warning: var(--sapphire-global-color-alpha-yellow-900);--sapphire-semantic-color-foreground-on-positive: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-negative: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-accent: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-positive: var(--sapphire-global-color-alpha-green-500);--sapphire-semantic-color-foreground-warning: var(--sapphire-global-color-alpha-yellow-700);--sapphire-semantic-color-foreground-negative: var(--sapphire-global-color-alpha-red-500);--sapphire-semantic-color-foreground-accent: var(--sapphire-global-color-alpha-blue-500);--sapphire-semantic-color-foreground-secondary: color(from var(--sapphire-global-color-blue-900) xyz x y z / .64);--sapphire-semantic-color-foreground-secondary-alpha: .64;--sapphire-semantic-color-foreground-primary: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-background-decorative-neutral: var(--sapphire-global-color-alpha-sand-50);--sapphire-semantic-color-background-decorative-16: var(--sapphire-global-color-secondary-green-4);--sapphire-semantic-color-background-decorative-15: var(--sapphire-global-color-secondary-green-3);--sapphire-semantic-color-background-decorative-14: var(--sapphire-global-color-secondary-green-2);--sapphire-semantic-color-background-decorative-13: var(--sapphire-global-color-secondary-green-1);--sapphire-semantic-color-background-decorative-12: var(--sapphire-global-color-secondary-copper-4);--sapphire-semantic-color-background-decorative-11: var(--sapphire-global-color-secondary-copper-3);--sapphire-semantic-color-background-decorative-10: var(--sapphire-global-color-secondary-copper-2);--sapphire-semantic-color-background-decorative-9: var(--sapphire-global-color-secondary-copper-1);--sapphire-semantic-color-background-decorative-8: var(--sapphire-global-color-secondary-gold-4);--sapphire-semantic-color-background-decorative-7: var(--sapphire-global-color-secondary-gold-3);--sapphire-semantic-color-background-decorative-6: var(--sapphire-global-color-secondary-gold-2);--sapphire-semantic-color-background-decorative-5: var(--sapphire-global-color-secondary-gold-1);--sapphire-semantic-color-background-decorative-4: var(--sapphire-global-color-secondary-blue-4);--sapphire-semantic-color-background-decorative-3: var(--sapphire-global-color-secondary-blue-3);--sapphire-semantic-color-background-decorative-2: var(--sapphire-global-color-secondary-blue-2);--sapphire-semantic-color-background-decorative-1: var(--sapphire-global-color-secondary-blue-1);--sapphire-semantic-color-background-popover: var(--sapphire-global-color-white);--sapphire-semantic-color-background-backdrop: color(from var(--sapphire-global-color-gray-950) xyz x y z / .6);--sapphire-semantic-color-background-backdrop-alpha: .6;--sapphire-semantic-color-background-surface: var(--sapphire-global-color-white);--sapphire-semantic-color-background-field: var(--sapphire-global-color-white);--sapphire-semantic-color-background-warning-subtle: var(--sapphire-global-color-alpha-yellow-50);--sapphire-semantic-color-background-positive-subtle: var(--sapphire-global-color-alpha-green-50);--sapphire-semantic-color-background-negative-subtle: var(--sapphire-global-color-alpha-red-50);--sapphire-semantic-color-background-accent-subtle: var(--sapphire-global-color-alpha-blue-50);--sapphire-semantic-color-background-neutral-subtle: var(--sapphire-global-color-alpha-sand-50);--sapphire-semantic-color-background-negative: var(--sapphire-global-color-red-500);--sapphire-semantic-color-background-warning: var(--sapphire-global-color-yellow-300);--sapphire-semantic-color-background-positive: var(--sapphire-global-color-green-500);--sapphire-semantic-color-background-accent: var(--sapphire-global-color-blue-500);--sapphire-semantic-color-background-signature: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-background-segmented-control-knob: var(--sapphire-global-color-white);--sapphire-semantic-color-background-segmented-control-track: var(--sapphire-global-color-alpha-sand-100);--sapphire-semantic-color-background-switch-default: var(--sapphire-global-color-alpha-sand-200);--sapphire-semantic-color-background-action-highlight: var(--sapphire-global-color-alpha-sand-50);--sapphire-semantic-color-background-action-select-tertiary-default: var(--sapphire-global-color-transparent);--sapphire-semantic-color-background-action-danger-tertiary-default: var(--sapphire-global-color-transparent);--sapphire-semantic-color-background-action-tertiary-default: var(--sapphire-global-color-transparent);--sapphire-semantic-color-background-action-secondary-default: var(--sapphire-global-color-alpha-sand-100);--sapphire-semantic-color-focus-ring: var(--sapphire-global-color-blue-400);--sapphire-semantic-color-border-negative-default: var(--sapphire-global-color-red-500);--sapphire-semantic-color-border-accent: var(--sapphire-global-color-blue-500);--sapphire-semantic-color-border-tertiary: color(from var(--sapphire-global-color-blue-900) xyz x y z / .06);--sapphire-semantic-color-border-tertiary-alpha: .06;--sapphire-semantic-color-border-secondary: color(from var(--sapphire-global-color-blue-900) xyz x y z / .08);--sapphire-semantic-color-border-secondary-alpha: .08;--sapphire-semantic-color-border-primary: color(from var(--sapphire-global-color-blue-900) xyz x y z / .16);--sapphire-semantic-color-border-primary-alpha: .16;--sapphire-semantic-color-state-border-active: color(from var(--sapphire-global-color-blue-900) xyz x y z / .2);--sapphire-semantic-color-state-border-active-alpha: .2;--sapphire-semantic-color-state-border-hover: color(from var(--sapphire-global-color-blue-900) xyz x y z / .12);--sapphire-semantic-color-state-border-hover-alpha: .12;--sapphire-semantic-color-state-negative-subtle-active: color(from var(--sapphire-global-color-red-500) xyz x y z / .1);--sapphire-semantic-color-state-negative-subtle-active-alpha: .1;--sapphire-semantic-color-state-negative-subtle-hover: color(from var(--sapphire-global-color-red-500) xyz x y z / .06);--sapphire-semantic-color-state-negative-subtle-hover-alpha: .06;--sapphire-semantic-color-state-negative-active: color(from var(--sapphire-global-color-red-900) xyz x y z / .2);--sapphire-semantic-color-state-negative-active-alpha: .2;--sapphire-semantic-color-state-negative-hover: color(from var(--sapphire-global-color-red-900) xyz x y z / .12);--sapphire-semantic-color-state-negative-hover-alpha: .12;--sapphire-semantic-color-state-neutral-ghost-active: color(from var(--sapphire-global-color-sand-900) xyz x y z / .1);--sapphire-semantic-color-state-neutral-ghost-active-alpha: .1;--sapphire-semantic-color-state-neutral-ghost-hover: color(from var(--sapphire-global-color-sand-900) xyz x y z / .06);--sapphire-semantic-color-state-neutral-ghost-hover-alpha: .06;--sapphire-semantic-color-state-neutral-active: color(from var(--sapphire-global-color-sand-900) xyz x y z / .1);--sapphire-semantic-color-state-neutral-active-alpha: .1;--sapphire-semantic-color-state-neutral-hover: color(from var(--sapphire-global-color-sand-900) xyz x y z / .06);--sapphire-semantic-color-state-neutral-hover-alpha: .06;--sapphire-semantic-color-state-accent-subtle-active: color(from var(--sapphire-global-color-blue-500) xyz x y z / .12);--sapphire-semantic-color-state-accent-subtle-active-alpha: .12;--sapphire-semantic-color-state-accent-subtle-hover: color(from var(--sapphire-global-color-blue-500) xyz x y z / .06);--sapphire-semantic-color-state-accent-subtle-hover-alpha: .06;--sapphire-semantic-color-state-accent-active: color(from var(--sapphire-global-color-blue-900) xyz x y z / .2);--sapphire-semantic-color-state-accent-active-alpha: .2;--sapphire-semantic-color-state-accent-hover: color(from var(--sapphire-global-color-blue-900) xyz x y z / .12);--sapphire-semantic-color-state-accent-hover-alpha: .12;--sapphire-global-color-alpha-blue-950: var(--sapphire-global-color-blue-950);--sapphire-global-color-alpha-blue-900: var(--sapphire-global-color-blue-900);--sapphire-global-color-alpha-blue-800: var(--sapphire-global-color-blue-800);--sapphire-global-color-alpha-blue-700: var(--sapphire-global-color-blue-700);--sapphire-global-color-alpha-blue-600: var(--sapphire-global-color-blue-600);--sapphire-global-color-alpha-gray-950: var(--sapphire-global-color-gray-950);--sapphire-semantic-size-spacing-container-horizontal-md: var(--sapphire-semantic-size-spacing-xl);--sapphire-semantic-size-spacing-container-horizontal-sm: var(--sapphire-semantic-size-spacing-sm);--sapphire-semantic-size-spacing-control-horizontal-lg: var(--sapphire-semantic-size-spacing-md);--sapphire-semantic-size-spacing-control-horizontal-md: var(--sapphire-semantic-size-spacing-sm);--sapphire-semantic-size-spacing-control-vertical-lg: var(--sapphire-semantic-size-spacing-sm);--sapphire-semantic-size-spacing-control-vertical-md: var(--sapphire-semantic-size-spacing-xs);--sapphire-semantic-size-spacing-control-vertical-sm: var(--sapphire-semantic-size-spacing-3xs);--sapphire-semantic-size-font-control-lg: var(--sapphire-semantic-size-font-body-md);--sapphire-semantic-size-font-control-md: var(--sapphire-semantic-size-font-body-sm);--sapphire-semantic-size-font-control-sm: var(--sapphire-semantic-size-font-body-xs);--sapphire-semantic-size-font-label-md: var(--sapphire-semantic-size-font-body-sm);--sapphire-semantic-size-font-label-sm: var(--sapphire-semantic-size-font-body-xs);--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-color-foreground-on-neutral-subtle: var(--sapphire-semantic-color-foreground-primary);--sapphire-semantic-color-foreground-on-positive-subtle: var(--sapphire-semantic-color-foreground-positive);--sapphire-semantic-color-foreground-on-negative-subtle: var(--sapphire-semantic-color-foreground-negative);--sapphire-semantic-color-foreground-on-accent-subtle: var(--sapphire-semantic-color-foreground-accent);--sapphire-semantic-color-foreground-action-danger-default: var(--sapphire-semantic-color-foreground-negative);--sapphire-semantic-color-foreground-action-link-default: var(--sapphire-semantic-color-foreground-accent);--sapphire-semantic-color-foreground-action-select-default: var(--sapphire-semantic-color-foreground-accent);--sapphire-semantic-color-foreground-action-on-select-default: var(--sapphire-semantic-color-foreground-on-accent);--sapphire-semantic-color-foreground-action-on-danger-default: var(--sapphire-semantic-color-foreground-on-negative);--sapphire-semantic-color-foreground-action-on-tertiary-default: var(--sapphire-semantic-color-foreground-primary);--sapphire-semantic-color-foreground-action-on-primary-default: var(--sapphire-semantic-color-foreground-on-accent);--sapphire-semantic-color-background-spinner-secondary: var(--sapphire-semantic-color-foreground-accent);--sapphire-semantic-color-background-spinner-primary: var(--sapphire-semantic-color-foreground-primary);--sapphire-semantic-color-background-skeleton: var(--sapphire-semantic-color-state-neutral-active);--sapphire-semantic-color-background-switch-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-active-alpha) * 100%), var(--sapphire-semantic-color-background-switch-default) calc((1 - var(--sapphire-semantic-color-state-neutral-active-alpha)) * 100%));--sapphire-semantic-color-background-switch-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-hover-alpha) * 100%), var(--sapphire-semantic-color-background-switch-default) calc((1 - var(--sapphire-semantic-color-state-neutral-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-select-tertiary-active: var(--sapphire-semantic-color-state-accent-subtle-active);--sapphire-semantic-color-background-action-select-tertiary-hover: var(--sapphire-semantic-color-state-accent-subtle-hover);--sapphire-semantic-color-background-action-select-secondary-default: var(--sapphire-semantic-color-background-accent-subtle);--sapphire-semantic-color-background-action-danger-tertiary-active: var(--sapphire-semantic-color-state-negative-subtle-active);--sapphire-semantic-color-background-action-danger-tertiary-hover: var(--sapphire-semantic-color-state-negative-subtle-hover);--sapphire-semantic-color-background-action-danger-secondary-default: var(--sapphire-semantic-color-background-negative-subtle);--sapphire-semantic-color-background-action-danger-default: var(--sapphire-semantic-color-background-negative);--sapphire-semantic-color-background-action-tertiary-active: var(--sapphire-semantic-color-state-neutral-ghost-active);--sapphire-semantic-color-background-action-tertiary-hover: var(--sapphire-semantic-color-state-neutral-ghost-hover);--sapphire-semantic-color-background-action-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-secondary-default) calc((1 - var(--sapphire-semantic-color-state-neutral-active-alpha)) * 100%));--sapphire-semantic-color-background-action-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-secondary-default) calc((1 - var(--sapphire-semantic-color-state-neutral-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-primary-default: var(--sapphire-semantic-color-background-accent);--sapphire-semantic-color-border-field-default: var(--sapphire-semantic-color-border-primary);--sapphire-semantic-color-border-negative-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-border-negative-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-border-negative-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-border-negative-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-danger-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-danger-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-link-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-link-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-link-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-link-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-select-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-select-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-select-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-select-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-select-tertiary-default: var(--sapphire-semantic-color-foreground-action-select-default);--sapphire-semantic-color-foreground-action-on-select-secondary-default: var(--sapphire-semantic-color-foreground-on-accent-subtle);--sapphire-semantic-color-foreground-action-on-select-active: var(--sapphire-semantic-color-foreground-action-on-select-default);--sapphire-semantic-color-foreground-action-on-select-hover: var(--sapphire-semantic-color-foreground-action-on-select-default);--sapphire-semantic-color-foreground-action-on-danger-tertiary-default: var(--sapphire-semantic-color-foreground-action-danger-default);--sapphire-semantic-color-foreground-action-on-danger-secondary-default: var(--sapphire-semantic-color-foreground-on-negative-subtle);--sapphire-semantic-color-foreground-action-on-danger-active: var(--sapphire-semantic-color-foreground-action-on-danger-default);--sapphire-semantic-color-foreground-action-on-danger-hover: var(--sapphire-semantic-color-foreground-action-on-danger-default);--sapphire-semantic-color-foreground-action-on-tertiary-active: var(--sapphire-semantic-color-foreground-action-on-tertiary-default);--sapphire-semantic-color-foreground-action-on-tertiary-hover: var(--sapphire-semantic-color-foreground-action-on-tertiary-default);--sapphire-semantic-color-foreground-action-on-secondary-default: var(--sapphire-semantic-color-foreground-on-neutral-subtle);--sapphire-semantic-color-foreground-action-on-primary-active: var(--sapphire-semantic-color-foreground-action-on-primary-default);--sapphire-semantic-color-foreground-action-on-primary-hover: var(--sapphire-semantic-color-foreground-action-on-primary-default);--sapphire-semantic-color-background-action-select-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-subtle-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-subtle-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-subtle-active-alpha)) * 100%));--sapphire-semantic-color-background-action-select-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-subtle-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-subtle-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-subtle-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-select-default: var(--sapphire-semantic-color-background-action-primary-default);--sapphire-semantic-color-background-action-danger-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-subtle-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-subtle-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-subtle-active-alpha)) * 100%));--sapphire-semantic-color-background-action-danger-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-subtle-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-subtle-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-subtle-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-danger-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-background-action-danger-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-primary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-primary-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-background-action-primary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-primary-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-border-field-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-border-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-border-active-alpha) * 100%), var(--sapphire-semantic-color-border-field-default) calc((1 - var(--sapphire-semantic-color-state-border-active-alpha)) * 100%));--sapphire-semantic-color-border-field-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-border-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-border-hover-alpha) * 100%), var(--sapphire-semantic-color-border-field-default) calc((1 - var(--sapphire-semantic-color-state-border-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-select-tertiary-active: var(--sapphire-semantic-color-foreground-action-select-active);--sapphire-semantic-color-foreground-action-on-select-tertiary-hover: var(--sapphire-semantic-color-foreground-action-select-hover);--sapphire-semantic-color-foreground-action-on-select-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-select-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-danger-tertiary-active: var(--sapphire-semantic-color-foreground-action-danger-active);--sapphire-semantic-color-foreground-action-on-danger-tertiary-hover: var(--sapphire-semantic-color-foreground-action-danger-hover);--sapphire-semantic-color-foreground-action-on-danger-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-danger-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-secondary-active: var(--sapphire-semantic-color-foreground-action-on-secondary-default);--sapphire-semantic-color-foreground-action-on-secondary-hover: var(--sapphire-semantic-color-foreground-action-on-secondary-default);--sapphire-semantic-color-background-action-select-active: var(--sapphire-semantic-color-background-action-primary-active);--sapphire-semantic-color-background-action-select-hover: var(--sapphire-semantic-color-background-action-primary-hover)}::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"] });
|
|
6425
|
+
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:transparent}to{background:var(--sapphire-semantic-color-background-backdrop)}}@keyframes backdrop-fade-out{0%{background:var(--sapphire-semantic-color-background-backdrop)}to{background: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:var(--sapphire-semantic-transitions-fade);animation-fill-mode:forwards}.sapphire-backdrop--exiting,:host.sapphire-backdrop--exiting{animation-name:backdrop-fade-out}.sapphire-theme-default-dark,: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-lg: 1200px;--sapphire-semantic-size-breakpoint-md: 960px;--sapphire-semantic-size-breakpoint-sm: 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-default-bold: 600;--sapphire-semantic-font-weight-default-medium: 500;--sapphire-semantic-font-weight-default-regular: 400;--sapphire-semantic-font-weight-default-light: 300;--sapphire-global-transitions-ease-in: cubic-bezier(0, 0, 0, 1);--sapphire-global-transitions-ease-in-out-quick: cubic-bezier(.5, 0, 0, 1);--sapphire-global-transitions-ease-in-out: cubic-bezier(.7, 0, .2, 1);--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.3;--sapphire-global-size-font-300: 3rem;--sapphire-global-size-font-250: 2.5rem;--sapphire-global-size-font-200: 2rem;--sapphire-global-size-font-175: 1.75rem;--sapphire-global-size-font-163: 1.625rem;--sapphire-global-size-font-150: 1.5rem;--sapphire-global-size-font-125: 1.25rem;--sapphire-global-size-font-112: 1.125rem;--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-110: 2.75rem;--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-40: 16px;--sapphire-global-size-static-30: 12px;--sapphire-global-size-static-20: 8px;--sapphire-global-size-static-15: 6px;--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-md: 0px 0px 0px .5px hsl(0 0% 100% / .1) inset, 0px 4px 16px 0px hsl(212 63% 12% / .04);--sapphire-global-opacity-30: .3;--sapphire-global-font-danske-name: \"Danske\";--sapphire-global-color-secondary-green-4: hsl(137 64% 78%);--sapphire-global-color-secondary-green-3: hsl(152 42% 56%);--sapphire-global-color-secondary-green-2: hsl(152 44% 38%);--sapphire-global-color-secondary-green-1: hsl(158 58% 19%);--sapphire-global-color-secondary-copper-4: hsl(23 69% 75%);--sapphire-global-color-secondary-copper-3: hsl(19 61% 60%);--sapphire-global-color-secondary-copper-2: hsl(18 57% 41%);--sapphire-global-color-secondary-copper-1: hsl(12 65% 23%);--sapphire-global-color-secondary-gold-4: hsl(45 63% 69%);--sapphire-global-color-secondary-gold-3: hsl(39 49% 54%);--sapphire-global-color-secondary-gold-2: hsl(37 57% 36%);--sapphire-global-color-secondary-gold-1: hsl(37 68% 19%);--sapphire-global-color-secondary-blue-4: hsl(211 72% 72%);--sapphire-global-color-secondary-blue-3: hsl(214 59% 62%);--sapphire-global-color-secondary-blue-2: hsl(218 51% 52%);--sapphire-global-color-secondary-blue-1: hsl(212 100% 24%);--sapphire-global-color-alpha-yellow-950: hsl(24 100% 14% / .902);--sapphire-global-color-alpha-yellow-900: hsl(25 100% 27% / .733);--sapphire-global-color-alpha-yellow-800: hsl(27 100% 37% / .705);--sapphire-global-color-alpha-yellow-700: hsl(31 100% 38% / .846);--sapphire-global-color-alpha-yellow-600: hsl(36 100% 44% / .902);--sapphire-global-color-alpha-yellow-500: hsl(41 100% 51% / .905);--sapphire-global-color-alpha-yellow-400: hsl(46 100% 55% / .971);--sapphire-global-color-alpha-yellow-300: hsl(46 100% 65% / .987);--sapphire-global-color-alpha-yellow-200: hsl(50 100% 77% / .979);--sapphire-global-color-alpha-yellow-100: hsl(51 100% 89% / .987);--sapphire-global-color-alpha-yellow-50: hsl(53 100% 92%);--sapphire-global-color-alpha-green-950: hsl(87 100% 10% / .508);--sapphire-global-color-alpha-green-900: hsl(86 100% 27% / .254);--sapphire-global-color-alpha-green-800: hsl(90 100% 56% / .198);--sapphire-global-color-alpha-green-700: hsl(101 100% 62% / .278);--sapphire-global-color-alpha-green-600: hsl(111 100% 64% / .396);--sapphire-global-color-alpha-green-500: hsl(113 100% 64% / .489);--sapphire-global-color-alpha-green-400: hsl(116 100% 70% / .662);--sapphire-global-color-alpha-green-300: hsl(117 100% 79% / .733);--sapphire-global-color-alpha-green-200: hsl(118 100% 86% / .83);--sapphire-global-color-alpha-green-100: hsl(120 100% 92% / .906);--sapphire-global-color-alpha-green-50: hsl(120 100% 97% / .939);--sapphire-global-color-alpha-red-950: hsl(7 100% 12% / .648);--sapphire-global-color-alpha-red-900: hsl(10 100% 30% / .423);--sapphire-global-color-alpha-red-800: hsl(5 100% 56% / .413);--sapphire-global-color-alpha-red-700: hsl(3 100% 59% / .564);--sapphire-global-color-alpha-red-600: hsl(1 100% 61% / .701);--sapphire-global-color-alpha-red-500: hsl(1 100% 60% / .826);--sapphire-global-color-alpha-red-400: hsl(1 100% 68% / .963);--sapphire-global-color-alpha-red-300: hsl(1 100% 75% / .979);--sapphire-global-color-alpha-red-200: hsl(2 100% 84%);--sapphire-global-color-alpha-red-100: hsl(4 100% 92%);--sapphire-global-color-alpha-red-50: hsl(0 100% 96% / .991);--sapphire-global-color-alpha-blue-950: hsl(210 100% 11% / .667);--sapphire-global-color-alpha-blue-900: hsl(210 100% 17% / .667);--sapphire-global-color-alpha-blue-800: hsl(211 100% 28% / .667);--sapphire-global-color-alpha-blue-700: hsl(211 100% 39% / .667);--sapphire-global-color-alpha-blue-600: hsl(212 100% 50% / .699);--sapphire-global-color-alpha-blue-500: hsl(215 100% 50% / .894);--sapphire-global-color-alpha-sand-950: hsl(33 100% 24% / .31);--sapphire-global-color-alpha-sand-900: hsl(35 100% 58% / .224);--sapphire-global-color-alpha-sand-800: hsl(38 100% 66% / .307);--sapphire-global-color-alpha-sand-700: hsl(38 100% 72% / .39);--sapphire-global-color-alpha-sand-600: hsl(38 100% 76% / .476);--sapphire-global-color-alpha-sand-500: hsl(39 100% 84% / .586);--sapphire-global-color-alpha-sand-400: hsl(42 100% 88% / .723);--sapphire-global-color-alpha-sand-300: hsl(45 100% 92% / .802);--sapphire-global-color-alpha-sand-200: hsl(44 100% 97% / .885);--sapphire-global-color-alpha-sand-100: hsl(53 100% 98% / .92);--sapphire-global-color-alpha-sand-50: hsl(40 100% 99% / .96);--sapphire-global-color-alpha-gray-900: hsl(215 97% 75% / .087);--sapphire-global-color-alpha-gray-800: hsl(221 100% 81% / .144);--sapphire-global-color-alpha-gray-700: hsl(214 100% 85% / .254);--sapphire-global-color-alpha-gray-600: hsl(213 100% 85% / .363);--sapphire-global-color-alpha-gray-500: hsl(212 100% 89% / .508);--sapphire-global-color-alpha-gray-400: hsl(211 100% 91% / .663);--sapphire-global-color-alpha-gray-300: hsl(211 100% 95% / .803);--sapphire-global-color-alpha-gray-200: hsl(212 100% 97% / .871);--sapphire-global-color-alpha-gray-100: hsl(207 100% 98% / .926);--sapphire-global-color-alpha-gray-50: hsl(200 100% 99% / .966);--sapphire-global-color-yellow-950: hsl(24 91% 14%);--sapphire-global-color-yellow-900: hsl(25 84% 22%);--sapphire-global-color-yellow-800: hsl(27 86% 28%);--sapphire-global-color-yellow-700: hsl(31 94% 33%);--sapphire-global-color-yellow-600: hsl(36 97% 40%);--sapphire-global-color-yellow-500: hsl(41 95% 46%);--sapphire-global-color-yellow-400: hsl(46 94% 54%);--sapphire-global-color-yellow-300: hsl(46 97% 65%);--sapphire-global-color-yellow-200: hsl(51 92% 75%);--sapphire-global-color-yellow-100: hsl(51 90% 88%);--sapphire-global-color-yellow-50: hsl(53 100% 92%);--sapphire-global-color-green-950: hsl(129 42% 9%);--sapphire-global-color-green-900: hsl(131 40% 14%);--sapphire-global-color-green-800: hsl(128 38% 18%);--sapphire-global-color-green-700: hsl(129 41% 23%);--sapphire-global-color-green-600: hsl(127 47% 30%);--sapphire-global-color-green-500: hsl(125 50% 35%);--sapphire-global-color-green-400: hsl(122 39% 49%);--sapphire-global-color-green-300: hsl(124 39% 60%);--sapphire-global-color-green-200: hsl(124 42% 73%);--sapphire-global-color-green-100: hsl(125 46% 84%);--sapphire-global-color-green-50: hsl(129 33% 92%);--sapphire-global-color-red-950: hsl(358 57% 10%);--sapphire-global-color-red-900: hsl(1 53% 17%);--sapphire-global-color-red-800: hsl(358 55% 27%);--sapphire-global-color-red-700: hsl(359 57% 36%);--sapphire-global-color-red-600: hsl(359 59% 44%);--sapphire-global-color-red-500: hsl(0 65% 51%);--sapphire-global-color-red-400: hsl(1 90% 66%);--sapphire-global-color-red-300: hsl(1 92% 74%);--sapphire-global-color-red-200: hsl(2 100% 84%);--sapphire-global-color-red-100: hsl(4 100% 92%);--sapphire-global-color-red-50: hsl(0 82% 96%);--sapphire-global-color-blue-950: hsl(210 100% 9%);--sapphire-global-color-blue-900: hsl(210 100% 14%);--sapphire-global-color-blue-800: hsl(211 100% 21%);--sapphire-global-color-blue-700: hsl(211 100% 28%);--sapphire-global-color-blue-600: hsl(212 100% 37%);--sapphire-global-color-blue-500: hsl(218 92% 49%);--sapphire-global-color-blue-400: hsl(216 100% 63%);--sapphire-global-color-blue-300: hsl(215 100% 74%);--sapphire-global-color-blue-200: hsl(214 100% 83%);--sapphire-global-color-blue-100: hsl(214 100% 90%);--sapphire-global-color-blue-50: hsl(219 100% 95%);--sapphire-global-color-sand-950: hsl(39 23% 12%);--sapphire-global-color-sand-900: hsl(41 23% 18%);--sapphire-global-color-sand-800: hsl(43 22% 25%);--sapphire-global-color-sand-700: hsl(42 20% 33%);--sapphire-global-color-sand-600: hsl(42 20% 40%);--sapphire-global-color-sand-500: hsl(43 14% 52%);--sapphire-global-color-sand-400: hsl(39 20% 66%);--sapphire-global-color-sand-300: hsl(48 20% 75%);--sapphire-global-color-sand-200: hsl(48 15% 87%);--sapphire-global-color-sand-100: hsl(60 11% 91%);--sapphire-global-color-sand-50: hsl(60 9% 96%);--sapphire-global-color-gray-950: hsl(210 94% 7%);--sapphire-global-color-gray-900: hsl(211 64% 13%);--sapphire-global-color-gray-800: hsl(213 48% 17%);--sapphire-global-color-gray-700: hsl(212 33% 27%);--sapphire-global-color-gray-600: hsl(212 27% 35%);--sapphire-global-color-gray-500: hsl(211 19% 49%);--sapphire-global-color-gray-400: hsl(211 22% 63%);--sapphire-global-color-gray-300: hsl(211 22% 77%);--sapphire-global-color-gray-200: hsl(210 26% 85%);--sapphire-global-color-gray-100: hsl(208 29% 91%);--sapphire-global-color-gray-50: hsl(206 33% 96%);--sapphire-global-color-transparent: hsla(0, 0%, 100%, 0);--sapphire-global-color-black: hsla(0, 0%, 0%, 1);--sapphire-global-color-white: hsla(0, 0%, 100%, 1);--sapphire-semantic-transitions-fade: var(--sapphire-global-transitions-ease-in);--sapphire-semantic-transitions-dynamic: var(--sapphire-global-transitions-ease-in-out-quick);--sapphire-semantic-transitions-standard: var(--sapphire-global-transitions-ease-in-out);--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-6xl: var(--sapphire-global-size-generic-180);--sapphire-semantic-size-spacing-5xl: var(--sapphire-global-size-generic-160);--sapphire-semantic-size-spacing-4xl: var(--sapphire-global-size-generic-120);--sapphire-semantic-size-spacing-3xl: var(--sapphire-global-size-generic-100);--sapphire-semantic-size-spacing-2xl: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-spacing-xl: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-spacing-lg: var(--sapphire-global-size-generic-50);--sapphire-semantic-size-spacing-md: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-spacing-sm: var(--sapphire-global-size-generic-30);--sapphire-semantic-size-spacing-xs: var(--sapphire-global-size-generic-20);--sapphire-semantic-size-spacing-2xs: var(--sapphire-global-size-generic-15);--sapphire-semantic-size-spacing-3xs: var(--sapphire-global-size-generic-10);--sapphire-semantic-size-spacing-4xs: 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-heading-2xl: var(--sapphire-global-size-font-175);--sapphire-semantic-size-font-heading-xl: var(--sapphire-global-size-font-150);--sapphire-semantic-size-font-heading-lg: var(--sapphire-global-size-font-125);--sapphire-semantic-size-font-heading-md: var(--sapphire-global-size-font-125);--sapphire-semantic-size-font-heading-sm: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-heading-xs: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-body-lg: var(--sapphire-global-size-font-112);--sapphire-semantic-size-font-body-md: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-body-sm: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-body-xs: var(--sapphire-global-size-font-75);--sapphire-semantic-size-radius-2xl: var(--sapphire-global-size-static-40);--sapphire-semantic-size-radius-xl: var(--sapphire-global-size-static-30);--sapphire-semantic-size-radius-lg: var(--sapphire-global-size-static-20);--sapphire-semantic-size-radius-md: var(--sapphire-global-size-static-15);--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-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-field: var(--sapphire-global-size-generic-750);--sapphire-semantic-size-height-box-md: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-height-control-4xl: var(--sapphire-global-size-generic-200);--sapphire-semantic-size-height-control-3xl: var(--sapphire-global-size-generic-180);--sapphire-semantic-size-height-control-2xl: var(--sapphire-global-size-generic-160);--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-30);--sapphire-semantic-font-name-default: var(--sapphire-global-font-danske-name);--sapphire-semantic-color-foreground-on-decorative-neutral: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-16: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-15: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-14: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-13: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-12: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-11: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-10: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-9: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-8: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-7: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-6: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-5: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-4: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-3: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-2: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-1: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-signature: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-warning-subtle: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-warning: var(--sapphire-global-color-yellow-900);--sapphire-semantic-color-foreground-on-positive-subtle: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-positive: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-negative-subtle: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-negative: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-accent-subtle: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-accent: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-positive: var(--sapphire-global-color-alpha-green-400);--sapphire-semantic-color-foreground-warning: var(--sapphire-global-color-alpha-yellow-400);--sapphire-semantic-color-foreground-negative: var(--sapphire-global-color-alpha-red-400);--sapphire-semantic-color-foreground-secondary: color(from var(--sapphire-global-color-gray-50) xyz x y z / .55);--sapphire-semantic-color-foreground-secondary-alpha: .55;--sapphire-semantic-color-foreground-primary: var(--sapphire-global-color-gray-50);--sapphire-semantic-color-background-decorative-neutral: var(--sapphire-global-color-alpha-gray-800);--sapphire-semantic-color-background-decorative-16: var(--sapphire-global-color-secondary-green-4);--sapphire-semantic-color-background-decorative-15: var(--sapphire-global-color-secondary-green-3);--sapphire-semantic-color-background-decorative-14: var(--sapphire-global-color-secondary-green-2);--sapphire-semantic-color-background-decorative-13: var(--sapphire-global-color-secondary-green-1);--sapphire-semantic-color-background-decorative-12: var(--sapphire-global-color-secondary-copper-4);--sapphire-semantic-color-background-decorative-11: var(--sapphire-global-color-secondary-copper-3);--sapphire-semantic-color-background-decorative-10: var(--sapphire-global-color-secondary-copper-2);--sapphire-semantic-color-background-decorative-9: var(--sapphire-global-color-secondary-copper-1);--sapphire-semantic-color-background-decorative-8: var(--sapphire-global-color-secondary-gold-4);--sapphire-semantic-color-background-decorative-7: var(--sapphire-global-color-secondary-gold-3);--sapphire-semantic-color-background-decorative-6: var(--sapphire-global-color-secondary-gold-2);--sapphire-semantic-color-background-decorative-5: var(--sapphire-global-color-secondary-gold-1);--sapphire-semantic-color-background-decorative-4: var(--sapphire-global-color-secondary-blue-4);--sapphire-semantic-color-background-decorative-3: var(--sapphire-global-color-secondary-blue-3);--sapphire-semantic-color-background-decorative-2: var(--sapphire-global-color-secondary-blue-2);--sapphire-semantic-color-background-decorative-1: var(--sapphire-global-color-secondary-blue-1);--sapphire-semantic-color-background-popover: var(--sapphire-global-color-gray-800);--sapphire-semantic-color-background-backdrop: color(from var(--sapphire-global-color-gray-950) xyz x y z / .6);--sapphire-semantic-color-background-backdrop-alpha: .6;--sapphire-semantic-color-background-surface: var(--sapphire-global-color-gray-900);--sapphire-semantic-color-background-field: var(--sapphire-global-color-gray-800);--sapphire-semantic-color-background-warning-subtle: var(--sapphire-global-color-alpha-yellow-900);--sapphire-semantic-color-background-positive-subtle: var(--sapphire-global-color-alpha-green-800);--sapphire-semantic-color-background-negative-subtle: var(--sapphire-global-color-alpha-red-800);--sapphire-semantic-color-background-accent-subtle: var(--sapphire-global-color-alpha-blue-800);--sapphire-semantic-color-background-neutral-subtle: var(--sapphire-global-color-alpha-gray-900);--sapphire-semantic-color-background-negative: var(--sapphire-global-color-red-500);--sapphire-semantic-color-background-warning: var(--sapphire-global-color-yellow-300);--sapphire-semantic-color-background-positive: var(--sapphire-global-color-green-500);--sapphire-semantic-color-background-accent: var(--sapphire-global-color-blue-500);--sapphire-semantic-color-background-signature: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-background-progress-track: var(--sapphire-global-color-alpha-gray-700);--sapphire-semantic-color-background-segmented-control-knob: var(--sapphire-global-color-alpha-gray-600);--sapphire-semantic-color-background-segmented-control-track: var(--sapphire-global-color-alpha-gray-800);--sapphire-semantic-color-background-switch-default: var(--sapphire-global-color-alpha-gray-600);--sapphire-semantic-color-background-action-highlight: var(--sapphire-global-color-alpha-gray-900);--sapphire-semantic-color-background-action-select-tertiary-default: var(--sapphire-global-color-transparent);--sapphire-semantic-color-background-action-danger-tertiary-default: var(--sapphire-global-color-transparent);--sapphire-semantic-color-background-action-tertiary-default: var(--sapphire-global-color-transparent);--sapphire-semantic-color-background-action-secondary-default: var(--sapphire-global-color-alpha-gray-800);--sapphire-semantic-color-focus-ring: var(--sapphire-global-color-blue-400);--sapphire-semantic-color-border-field-default: color(from var(--sapphire-global-color-gray-50) xyz x y z / .32);--sapphire-semantic-color-border-field-default-alpha: .32;--sapphire-semantic-color-border-negative-default: var(--sapphire-global-color-red-500);--sapphire-semantic-color-border-accent: var(--sapphire-global-color-blue-500);--sapphire-semantic-color-border-tertiary: color(from var(--sapphire-global-color-gray-50) xyz x y z / .06);--sapphire-semantic-color-border-tertiary-alpha: .06;--sapphire-semantic-color-border-secondary: color(from var(--sapphire-global-color-gray-50) xyz x y z / .08);--sapphire-semantic-color-border-secondary-alpha: .08;--sapphire-semantic-color-border-primary: color(from var(--sapphire-global-color-gray-50) xyz x y z / .16);--sapphire-semantic-color-border-primary-alpha: .16;--sapphire-semantic-color-state-border-active: color(from var(--sapphire-global-color-gray-100) xyz x y z / .2);--sapphire-semantic-color-state-border-active-alpha: .2;--sapphire-semantic-color-state-border-hover: color(from var(--sapphire-global-color-gray-100) xyz x y z / .12);--sapphire-semantic-color-state-border-hover-alpha: .12;--sapphire-semantic-color-state-negative-subtle-active: color(from var(--sapphire-global-color-red-100) xyz x y z / .12);--sapphire-semantic-color-state-negative-subtle-active-alpha: .12;--sapphire-semantic-color-state-negative-subtle-hover: color(from var(--sapphire-global-color-red-100) xyz x y z / .08);--sapphire-semantic-color-state-negative-subtle-hover-alpha: .08;--sapphire-semantic-color-state-negative-active: color(from var(--sapphire-global-color-red-100) xyz x y z / .2);--sapphire-semantic-color-state-negative-active-alpha: .2;--sapphire-semantic-color-state-negative-hover: color(from var(--sapphire-global-color-red-100) xyz x y z / .12);--sapphire-semantic-color-state-negative-hover-alpha: .12;--sapphire-semantic-color-state-neutral-ghost-active: color(from var(--sapphire-global-color-gray-200) xyz x y z / .1);--sapphire-semantic-color-state-neutral-ghost-active-alpha: .1;--sapphire-semantic-color-state-neutral-ghost-hover: color(from var(--sapphire-global-color-gray-200) xyz x y z / .06);--sapphire-semantic-color-state-neutral-ghost-hover-alpha: .06;--sapphire-semantic-color-state-neutral-active: color(from var(--sapphire-global-color-gray-200) xyz x y z / .1);--sapphire-semantic-color-state-neutral-active-alpha: .1;--sapphire-semantic-color-state-neutral-hover: color(from var(--sapphire-global-color-gray-200) xyz x y z / .06);--sapphire-semantic-color-state-neutral-hover-alpha: .06;--sapphire-semantic-color-state-accent-subtle-active: color(from var(--sapphire-global-color-blue-500) xyz x y z / .12);--sapphire-semantic-color-state-accent-subtle-active-alpha: .12;--sapphire-semantic-color-state-accent-subtle-hover: color(from var(--sapphire-global-color-blue-500) xyz x y z / .06);--sapphire-semantic-color-state-accent-subtle-hover-alpha: .06;--sapphire-semantic-color-state-accent-active: color(from var(--sapphire-global-color-blue-100) xyz x y z / .2);--sapphire-semantic-color-state-accent-active-alpha: .2;--sapphire-semantic-color-state-accent-hover: color(from var(--sapphire-global-color-blue-100) xyz x y z / .12);--sapphire-semantic-color-state-accent-hover-alpha: .12;--sapphire-global-color-alpha-blue-400: var(--sapphire-global-color-blue-400);--sapphire-global-color-alpha-blue-300: var(--sapphire-global-color-blue-300);--sapphire-global-color-alpha-blue-200: var(--sapphire-global-color-blue-200);--sapphire-global-color-alpha-blue-100: var(--sapphire-global-color-blue-100);--sapphire-global-color-alpha-blue-50: var(--sapphire-global-color-blue-50);--sapphire-global-color-alpha-gray-950: var(--sapphire-global-color-gray-950);--sapphire-semantic-size-spacing-container-horizontal-md: var(--sapphire-semantic-size-spacing-2xl);--sapphire-semantic-size-spacing-container-horizontal-sm: var(--sapphire-semantic-size-spacing-sm);--sapphire-semantic-size-spacing-control-horizontal-lg: var(--sapphire-semantic-size-spacing-md);--sapphire-semantic-size-spacing-control-horizontal-md: var(--sapphire-semantic-size-spacing-sm);--sapphire-semantic-size-spacing-control-vertical-lg: var(--sapphire-semantic-size-spacing-sm);--sapphire-semantic-size-spacing-control-vertical-md: var(--sapphire-semantic-size-spacing-xs);--sapphire-semantic-size-spacing-control-vertical-sm: var(--sapphire-semantic-size-spacing-3xs);--sapphire-semantic-size-font-control-lg: var(--sapphire-semantic-size-font-body-md);--sapphire-semantic-size-font-control-md: var(--sapphire-semantic-size-font-body-sm);--sapphire-semantic-size-font-control-sm: var(--sapphire-semantic-size-font-body-xs);--sapphire-semantic-size-font-label-md: var(--sapphire-semantic-size-font-body-sm);--sapphire-semantic-size-font-label-sm: var(--sapphire-semantic-size-font-body-xs);--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-color-foreground-on-neutral-subtle: var(--sapphire-semantic-color-foreground-primary);--sapphire-semantic-color-foreground-accent: var(--sapphire-global-color-alpha-blue-400);--sapphire-semantic-color-foreground-action-danger-default: var(--sapphire-semantic-color-foreground-negative);--sapphire-semantic-color-foreground-action-on-select-secondary-default: var(--sapphire-semantic-color-foreground-on-accent-subtle);--sapphire-semantic-color-foreground-action-on-select-default: var(--sapphire-semantic-color-foreground-on-accent);--sapphire-semantic-color-foreground-action-on-danger-secondary-default: var(--sapphire-semantic-color-foreground-on-negative-subtle);--sapphire-semantic-color-foreground-action-on-danger-default: var(--sapphire-semantic-color-foreground-on-negative);--sapphire-semantic-color-foreground-action-on-tertiary-default: var(--sapphire-semantic-color-foreground-primary);--sapphire-semantic-color-foreground-action-on-primary-default: var(--sapphire-semantic-color-foreground-on-accent);--sapphire-semantic-color-background-spinner-primary: var(--sapphire-semantic-color-foreground-primary);--sapphire-semantic-color-background-skeleton: var(--sapphire-semantic-color-state-neutral-active);--sapphire-semantic-color-background-progress-fill: var(--sapphire-semantic-color-background-accent);--sapphire-semantic-color-background-switch-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-active-alpha) * 100%), var(--sapphire-semantic-color-background-switch-default) calc((1 - var(--sapphire-semantic-color-state-neutral-active-alpha)) * 100%));--sapphire-semantic-color-background-switch-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-hover-alpha) * 100%), var(--sapphire-semantic-color-background-switch-default) calc((1 - var(--sapphire-semantic-color-state-neutral-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-select-tertiary-active: var(--sapphire-semantic-color-state-accent-subtle-active);--sapphire-semantic-color-background-action-select-tertiary-hover: var(--sapphire-semantic-color-state-accent-subtle-hover);--sapphire-semantic-color-background-action-select-secondary-default: var(--sapphire-semantic-color-background-accent-subtle);--sapphire-semantic-color-background-action-danger-tertiary-active: var(--sapphire-semantic-color-state-negative-subtle-active);--sapphire-semantic-color-background-action-danger-tertiary-hover: var(--sapphire-semantic-color-state-negative-subtle-hover);--sapphire-semantic-color-background-action-danger-secondary-default: var(--sapphire-semantic-color-background-negative-subtle);--sapphire-semantic-color-background-action-danger-default: var(--sapphire-semantic-color-background-negative);--sapphire-semantic-color-background-action-tertiary-active: var(--sapphire-semantic-color-state-neutral-ghost-active);--sapphire-semantic-color-background-action-tertiary-hover: var(--sapphire-semantic-color-state-neutral-ghost-hover);--sapphire-semantic-color-background-action-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-secondary-default) calc((1 - var(--sapphire-semantic-color-state-neutral-active-alpha)) * 100%));--sapphire-semantic-color-background-action-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-secondary-default) calc((1 - var(--sapphire-semantic-color-state-neutral-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-primary-default: var(--sapphire-semantic-color-background-accent);--sapphire-semantic-color-border-field-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-border-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-border-active-alpha) * 100%), var(--sapphire-semantic-color-border-field-default) calc((1 - var(--sapphire-semantic-color-state-border-active-alpha)) * 100%));--sapphire-semantic-color-border-field-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-border-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-border-hover-alpha) * 100%), var(--sapphire-semantic-color-border-field-default) calc((1 - var(--sapphire-semantic-color-state-border-hover-alpha)) * 100%));--sapphire-semantic-color-border-negative-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-border-negative-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-border-negative-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-border-negative-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-danger-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-danger-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-link-default: var(--sapphire-semantic-color-foreground-accent);--sapphire-semantic-color-foreground-action-select-default: var(--sapphire-semantic-color-foreground-accent);--sapphire-semantic-color-foreground-action-on-select-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-select-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-select-active: var(--sapphire-semantic-color-foreground-action-on-select-default);--sapphire-semantic-color-foreground-action-on-select-hover: var(--sapphire-semantic-color-foreground-action-on-select-default);--sapphire-semantic-color-foreground-action-on-danger-tertiary-default: var(--sapphire-semantic-color-foreground-action-danger-default);--sapphire-semantic-color-foreground-action-on-danger-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-danger-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-danger-active: var(--sapphire-semantic-color-foreground-action-on-danger-default);--sapphire-semantic-color-foreground-action-on-danger-hover: var(--sapphire-semantic-color-foreground-action-on-danger-default);--sapphire-semantic-color-foreground-action-on-tertiary-active: var(--sapphire-semantic-color-foreground-action-on-tertiary-default);--sapphire-semantic-color-foreground-action-on-tertiary-hover: var(--sapphire-semantic-color-foreground-action-on-tertiary-default);--sapphire-semantic-color-foreground-action-on-secondary-default: var(--sapphire-semantic-color-foreground-on-neutral-subtle);--sapphire-semantic-color-foreground-action-on-primary-active: var(--sapphire-semantic-color-foreground-action-on-primary-default);--sapphire-semantic-color-foreground-action-on-primary-hover: var(--sapphire-semantic-color-foreground-action-on-primary-default);--sapphire-semantic-color-background-spinner-secondary: var(--sapphire-semantic-color-foreground-accent);--sapphire-semantic-color-background-action-select-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-subtle-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-subtle-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-subtle-active-alpha)) * 100%));--sapphire-semantic-color-background-action-select-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-subtle-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-subtle-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-subtle-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-select-default: var(--sapphire-semantic-color-background-action-primary-default);--sapphire-semantic-color-background-action-danger-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-subtle-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-subtle-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-subtle-active-alpha)) * 100%));--sapphire-semantic-color-background-action-danger-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-subtle-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-subtle-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-subtle-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-danger-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-background-action-danger-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-primary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-primary-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-background-action-primary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-primary-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-link-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-link-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-link-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-link-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-select-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-select-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-select-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-select-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-select-tertiary-default: var(--sapphire-semantic-color-foreground-action-select-default);--sapphire-semantic-color-foreground-action-on-danger-tertiary-active: var(--sapphire-semantic-color-foreground-action-danger-active);--sapphire-semantic-color-foreground-action-on-danger-tertiary-hover: var(--sapphire-semantic-color-foreground-action-danger-hover);--sapphire-semantic-color-foreground-action-on-secondary-active: var(--sapphire-semantic-color-foreground-action-on-secondary-default);--sapphire-semantic-color-foreground-action-on-secondary-hover: var(--sapphire-semantic-color-foreground-action-on-secondary-default);--sapphire-semantic-color-background-action-select-active: var(--sapphire-semantic-color-background-action-primary-active);--sapphire-semantic-color-background-action-select-hover: var(--sapphire-semantic-color-background-action-primary-hover);--sapphire-semantic-color-foreground-action-on-select-tertiary-active: var(--sapphire-semantic-color-foreground-action-select-active);--sapphire-semantic-color-foreground-action-on-select-tertiary-hover: var(--sapphire-semantic-color-foreground-action-select-hover)}@media screen and (min-width: 768px){.sapphire-theme-default-dark,: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 screen and (min-width: 960px){.sapphire-theme-default-dark,:host,.sapphire-theme--secondary,:host ::ng-deep .sapphire-theme--secondary,.sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-semantic-size-font-heading-sm: var(--sapphire-global-size-font-125);--sapphire-semantic-size-font-heading-md: var(--sapphire-global-size-font-150);--sapphire-semantic-size-font-heading-lg: var(--sapphire-global-size-font-200);--sapphire-semantic-size-font-heading-xl: var(--sapphire-global-size-font-250);--sapphire-semantic-size-font-heading-2xl: var(--sapphire-global-size-font-300)}}@media (prefers-reduced-motion){.sapphire-theme-default-dark,: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-dark.sapphire-theme--secondary,.sapphire-theme-default-dark .sapphire-theme--secondary,:host .sapphire-theme--secondary,:host ::ng-deep .sapphire-theme--secondary{--sapphire-global-shadow-md: 0px 0px 0px .5px hsl(0 0% 100% / .1) inset, 0px 4px 16px 0px hsl(209 100% 6% / .04);--sapphire-global-color-alpha-red-50: hsl(4 100% 97% / .99);--sapphire-semantic-color-background-surface: var(--sapphire-global-color-gray-950);--sapphire-semantic-color-border-field-default: color(from var(--sapphire-global-color-gray-50) xyz x y z / .28);--sapphire-semantic-color-border-field-default-alpha: .28}.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-semantic-size-breakpoint-xl: 1400px;--sapphire-semantic-size-breakpoint-lg: 1200px;--sapphire-semantic-size-breakpoint-md: 960px;--sapphire-semantic-size-breakpoint-sm: 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-default-bold: 600;--sapphire-semantic-font-weight-default-medium: 500;--sapphire-semantic-font-weight-default-regular: 400;--sapphire-semantic-font-weight-default-light: 300;--sapphire-global-transitions-ease-in: cubic-bezier(0, 0, 0, 1);--sapphire-global-transitions-ease-in-out-quick: cubic-bezier(.5, 0, 0, 1);--sapphire-global-transitions-ease-in-out: cubic-bezier(.7, 0, .2, 1);--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.3;--sapphire-global-size-font-300: 3rem;--sapphire-global-size-font-250: 2.5rem;--sapphire-global-size-font-200: 2rem;--sapphire-global-size-font-175: 1.75rem;--sapphire-global-size-font-163: 1.625rem;--sapphire-global-size-font-150: 1.5rem;--sapphire-global-size-font-125: 1.25rem;--sapphire-global-size-font-112: 1.125rem;--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-110: 2.75rem;--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-40: 16px;--sapphire-global-size-static-30: 12px;--sapphire-global-size-static-20: 8px;--sapphire-global-size-static-15: 6px;--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-md: 0px 0px 0px 1px hsl(212 63% 12% / .1) inset, 0px 4px 24px 0px hsl(212 63% 12% / .04);--sapphire-global-opacity-30: .3;--sapphire-global-font-danske-name: \"Danske\";--sapphire-global-color-secondary-green-4: hsl(137 64% 78%);--sapphire-global-color-secondary-green-3: hsl(152 42% 56%);--sapphire-global-color-secondary-green-2: hsl(152 44% 38%);--sapphire-global-color-secondary-green-1: hsl(158 58% 19%);--sapphire-global-color-secondary-copper-4: hsl(23 69% 75%);--sapphire-global-color-secondary-copper-3: hsl(19 61% 60%);--sapphire-global-color-secondary-copper-2: hsl(18 57% 41%);--sapphire-global-color-secondary-copper-1: hsl(12 65% 23%);--sapphire-global-color-secondary-gold-4: hsl(45 63% 69%);--sapphire-global-color-secondary-gold-3: hsl(39 49% 54%);--sapphire-global-color-secondary-gold-2: hsl(37 57% 36%);--sapphire-global-color-secondary-gold-1: hsl(37 68% 19%);--sapphire-global-color-secondary-blue-4: hsl(211 72% 72%);--sapphire-global-color-secondary-blue-3: hsl(214 59% 62%);--sapphire-global-color-secondary-blue-2: hsl(218 51% 52%);--sapphire-global-color-secondary-blue-1: hsl(212 100% 24%);--sapphire-global-color-alpha-yellow-950: hsl(23 100% 13% / .987);--sapphire-global-color-alpha-yellow-900: hsl(25 100% 19% / .963);--sapphire-global-color-alpha-yellow-800: hsl(27 100% 25% / .959);--sapphire-global-color-alpha-yellow-700: hsl(31 100% 32% / .979);--sapphire-global-color-alpha-yellow-600: hsl(36 100% 39% / .987);--sapphire-global-color-alpha-yellow-500: hsl(41 100% 45% / .975);--sapphire-global-color-alpha-yellow-400: hsl(46 100% 48% / .897);--sapphire-global-color-alpha-yellow-300: hsl(46 100% 49% / .697);--sapphire-global-color-alpha-yellow-200: hsl(51 100% 48% / .47);--sapphire-global-color-alpha-yellow-100: hsl(51 100% 47% / .235);--sapphire-global-color-alpha-yellow-50: hsl(53 100% 50% / .161);--sapphire-global-color-alpha-green-950: hsl(129 100% 4% / .944);--sapphire-global-color-alpha-green-900: hsl(130 100% 6% / .916);--sapphire-global-color-alpha-green-800: hsl(128 100% 8% / .885);--sapphire-global-color-alpha-green-700: hsl(128 100% 11% / .862);--sapphire-global-color-alpha-green-600: hsl(127 100% 17% / .842);--sapphire-global-color-alpha-green-500: hsl(124 100% 21% / .822);--sapphire-global-color-alpha-green-400: hsl(122 100% 28% / .701);--sapphire-global-color-alpha-green-300: hsl(124 100% 28% / .56);--sapphire-global-color-alpha-green-200: hsl(124 100% 30% / .388);--sapphire-global-color-alpha-green-100: hsl(125 100% 11% / .231);--sapphire-global-color-alpha-green-50: hsl(129 100% 25% / .11);--sapphire-global-color-alpha-red-950: hsl(358 100% 6% / .957);--sapphire-global-color-alpha-red-900: hsl(1 100% 10% / .92);--sapphire-global-color-alpha-red-800: hsl(359 100% 17% / .877);--sapphire-global-color-alpha-red-700: hsl(359 100% 24% / .842);--sapphire-global-color-alpha-red-600: hsl(359 100% 32% / .819);--sapphire-global-color-alpha-red-500: hsl(0 100% 39% / .815);--sapphire-global-color-alpha-red-400: hsl(1 100% 47% / .65);--sapphire-global-color-alpha-red-300: hsl(1 100% 48% / .501);--sapphire-global-color-alpha-red-200: hsl(2 100% 50% / .325);--sapphire-global-color-alpha-red-100: hsl(4 100% 50% / .169);--sapphire-global-color-alpha-red-50: hsl(0 98% 45% / .079);--sapphire-global-color-alpha-blue-500: hsl(215 99% 45% / .995);--sapphire-global-color-alpha-blue-400: hsl(216 100% 50% / .74);--sapphire-global-color-alpha-blue-300: hsl(215 100% 50% / .513);--sapphire-global-color-alpha-blue-200: hsl(214 100% 50% / .349);--sapphire-global-color-alpha-blue-100: hsl(214 100% 50% / .2);--sapphire-global-color-alpha-blue-50: hsl(219 100% 50% / .091);--sapphire-global-color-alpha-sand-950: hsl(40 100% 3% / .905);--sapphire-global-color-alpha-sand-900: hsl(41 100% 5% / .858);--sapphire-global-color-alpha-sand-800: hsl(43 100% 7% / .803);--sapphire-global-color-alpha-sand-700: hsl(42 100% 9% / .74);--sapphire-global-color-alpha-sand-600: hsl(42 100% 12% / .678);--sapphire-global-color-alpha-sand-500: hsl(43 100% 12% / .548);--sapphire-global-color-alpha-sand-400: hsl(39 100% 17% / .411);--sapphire-global-color-alpha-sand-300: hsl(48 100% 17% / .294);--sapphire-global-color-alpha-sand-200: hsl(48 100% 13% / .153);--sapphire-global-color-alpha-sand-100: hsl(60 100% 10% / .098);--sapphire-global-color-alpha-sand-50: hsl(60 100% 10% / .043);--sapphire-global-color-alpha-gray-900: hsl(211 63% 13% / .952);--sapphire-global-color-alpha-gray-800: hsl(213 100% 9% / .909);--sapphire-global-color-alpha-gray-700: hsl(213 100% 11% / .819);--sapphire-global-color-alpha-gray-600: hsl(212 100% 13% / .74);--sapphire-global-color-alpha-gray-500: hsl(212 100% 15% / .603);--sapphire-global-color-alpha-gray-400: hsl(211 100% 18% / .455);--sapphire-global-color-alpha-gray-300: hsl(211 100% 20% / .282);--sapphire-global-color-alpha-gray-200: hsl(210 100% 21% / .188);--sapphire-global-color-alpha-gray-100: hsl(208 98% 23% / .114);--sapphire-global-color-alpha-gray-50: hsl(206 100% 25% / .055);--sapphire-global-color-yellow-950: hsl(24 91% 14%);--sapphire-global-color-yellow-900: hsl(25 84% 22%);--sapphire-global-color-yellow-800: hsl(27 86% 28%);--sapphire-global-color-yellow-700: hsl(31 94% 33%);--sapphire-global-color-yellow-600: hsl(36 97% 40%);--sapphire-global-color-yellow-500: hsl(41 95% 46%);--sapphire-global-color-yellow-400: hsl(46 94% 54%);--sapphire-global-color-yellow-300: hsl(46 97% 65%);--sapphire-global-color-yellow-200: hsl(51 92% 75%);--sapphire-global-color-yellow-100: hsl(51 90% 88%);--sapphire-global-color-yellow-50: hsl(53 100% 92%);--sapphire-global-color-green-950: hsl(129 42% 9%);--sapphire-global-color-green-900: hsl(131 40% 14%);--sapphire-global-color-green-800: hsl(128 38% 18%);--sapphire-global-color-green-700: hsl(129 41% 23%);--sapphire-global-color-green-600: hsl(127 47% 30%);--sapphire-global-color-green-500: hsl(125 50% 35%);--sapphire-global-color-green-400: hsl(122 39% 49%);--sapphire-global-color-green-300: hsl(124 39% 60%);--sapphire-global-color-green-200: hsl(124 42% 73%);--sapphire-global-color-green-100: hsl(125 46% 84%);--sapphire-global-color-green-50: hsl(129 33% 92%);--sapphire-global-color-red-950: hsl(358 57% 10%);--sapphire-global-color-red-900: hsl(1 53% 17%);--sapphire-global-color-red-800: hsl(358 55% 27%);--sapphire-global-color-red-700: hsl(359 57% 36%);--sapphire-global-color-red-600: hsl(359 59% 44%);--sapphire-global-color-red-500: hsl(0 65% 51%);--sapphire-global-color-red-400: hsl(1 90% 66%);--sapphire-global-color-red-300: hsl(1 92% 74%);--sapphire-global-color-red-200: hsl(2 100% 84%);--sapphire-global-color-red-100: hsl(4 100% 92%);--sapphire-global-color-red-50: hsl(0 82% 96%);--sapphire-global-color-blue-950: hsl(210 100% 9%);--sapphire-global-color-blue-900: hsl(210 100% 14%);--sapphire-global-color-blue-800: hsl(211 100% 21%);--sapphire-global-color-blue-700: hsl(211 100% 28%);--sapphire-global-color-blue-600: hsl(212 100% 37%);--sapphire-global-color-blue-500: hsl(218 92% 49%);--sapphire-global-color-blue-400: hsl(216 100% 63%);--sapphire-global-color-blue-300: hsl(215 100% 74%);--sapphire-global-color-blue-200: hsl(214 100% 83%);--sapphire-global-color-blue-100: hsl(214 100% 90%);--sapphire-global-color-blue-50: hsl(219 100% 95%);--sapphire-global-color-sand-950: hsl(39 23% 12%);--sapphire-global-color-sand-900: hsl(41 23% 18%);--sapphire-global-color-sand-800: hsl(43 22% 25%);--sapphire-global-color-sand-700: hsl(42 20% 33%);--sapphire-global-color-sand-600: hsl(42 20% 40%);--sapphire-global-color-sand-500: hsl(43 14% 52%);--sapphire-global-color-sand-400: hsl(39 20% 66%);--sapphire-global-color-sand-300: hsl(48 20% 75%);--sapphire-global-color-sand-200: hsl(48 15% 87%);--sapphire-global-color-sand-100: hsl(60 11% 91%);--sapphire-global-color-sand-50: hsl(60 9% 96%);--sapphire-global-color-gray-950: hsl(210 94% 7%);--sapphire-global-color-gray-900: hsl(211 64% 13%);--sapphire-global-color-gray-800: hsl(213 48% 17%);--sapphire-global-color-gray-700: hsl(212 33% 27%);--sapphire-global-color-gray-600: hsl(212 27% 35%);--sapphire-global-color-gray-500: hsl(211 19% 49%);--sapphire-global-color-gray-400: hsl(211 22% 63%);--sapphire-global-color-gray-300: hsl(211 22% 77%);--sapphire-global-color-gray-200: hsl(210 26% 85%);--sapphire-global-color-gray-100: hsl(208 29% 91%);--sapphire-global-color-gray-50: hsl(206 33% 96%);--sapphire-global-color-transparent: hsla(0, 0%, 100%, 0);--sapphire-global-color-black: hsla(0, 0%, 0%, 1);--sapphire-global-color-white: hsla(0, 0%, 100%, 1);--sapphire-semantic-transitions-fade: var(--sapphire-global-transitions-ease-in);--sapphire-semantic-transitions-dynamic: var(--sapphire-global-transitions-ease-in-out-quick);--sapphire-semantic-transitions-standard: var(--sapphire-global-transitions-ease-in-out);--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-6xl: var(--sapphire-global-size-generic-180);--sapphire-semantic-size-spacing-5xl: var(--sapphire-global-size-generic-160);--sapphire-semantic-size-spacing-4xl: var(--sapphire-global-size-generic-120);--sapphire-semantic-size-spacing-3xl: var(--sapphire-global-size-generic-100);--sapphire-semantic-size-spacing-2xl: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-spacing-xl: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-spacing-lg: var(--sapphire-global-size-generic-50);--sapphire-semantic-size-spacing-md: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-spacing-sm: var(--sapphire-global-size-generic-30);--sapphire-semantic-size-spacing-xs: var(--sapphire-global-size-generic-20);--sapphire-semantic-size-spacing-2xs: var(--sapphire-global-size-generic-15);--sapphire-semantic-size-spacing-3xs: var(--sapphire-global-size-generic-10);--sapphire-semantic-size-spacing-4xs: 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-heading-2xl: var(--sapphire-global-size-font-175);--sapphire-semantic-size-font-heading-xl: var(--sapphire-global-size-font-150);--sapphire-semantic-size-font-heading-lg: var(--sapphire-global-size-font-125);--sapphire-semantic-size-font-heading-md: var(--sapphire-global-size-font-125);--sapphire-semantic-size-font-heading-sm: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-heading-xs: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-body-lg: var(--sapphire-global-size-font-112);--sapphire-semantic-size-font-body-md: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-body-sm: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-body-xs: var(--sapphire-global-size-font-75);--sapphire-semantic-size-radius-2xl: var(--sapphire-global-size-static-40);--sapphire-semantic-size-radius-xl: var(--sapphire-global-size-static-30);--sapphire-semantic-size-radius-lg: var(--sapphire-global-size-static-20);--sapphire-semantic-size-radius-md: var(--sapphire-global-size-static-15);--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-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-field: var(--sapphire-global-size-generic-750);--sapphire-semantic-size-height-box-md: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-height-control-4xl: var(--sapphire-global-size-generic-200);--sapphire-semantic-size-height-control-3xl: var(--sapphire-global-size-generic-180);--sapphire-semantic-size-height-control-2xl: var(--sapphire-global-size-generic-160);--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-30);--sapphire-semantic-font-name-default: var(--sapphire-global-font-danske-name);--sapphire-semantic-color-foreground-on-decorative-neutral: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-16: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-15: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-14: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-13: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-12: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-11: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-10: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-9: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-8: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-7: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-6: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-5: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-4: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-3: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-2: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-1: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-signature: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-warning-subtle: var(--sapphire-global-color-alpha-yellow-800);--sapphire-semantic-color-foreground-on-warning: var(--sapphire-global-color-alpha-yellow-900);--sapphire-semantic-color-foreground-on-positive: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-negative: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-accent: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-positive: var(--sapphire-global-color-alpha-green-500);--sapphire-semantic-color-foreground-warning: var(--sapphire-global-color-alpha-yellow-700);--sapphire-semantic-color-foreground-negative: var(--sapphire-global-color-alpha-red-500);--sapphire-semantic-color-foreground-accent: var(--sapphire-global-color-alpha-blue-500);--sapphire-semantic-color-foreground-secondary: color(from var(--sapphire-global-color-blue-900) xyz x y z / .64);--sapphire-semantic-color-foreground-secondary-alpha: .64;--sapphire-semantic-color-foreground-primary: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-background-decorative-neutral: var(--sapphire-global-color-alpha-sand-50);--sapphire-semantic-color-background-decorative-16: var(--sapphire-global-color-secondary-green-4);--sapphire-semantic-color-background-decorative-15: var(--sapphire-global-color-secondary-green-3);--sapphire-semantic-color-background-decorative-14: var(--sapphire-global-color-secondary-green-2);--sapphire-semantic-color-background-decorative-13: var(--sapphire-global-color-secondary-green-1);--sapphire-semantic-color-background-decorative-12: var(--sapphire-global-color-secondary-copper-4);--sapphire-semantic-color-background-decorative-11: var(--sapphire-global-color-secondary-copper-3);--sapphire-semantic-color-background-decorative-10: var(--sapphire-global-color-secondary-copper-2);--sapphire-semantic-color-background-decorative-9: var(--sapphire-global-color-secondary-copper-1);--sapphire-semantic-color-background-decorative-8: var(--sapphire-global-color-secondary-gold-4);--sapphire-semantic-color-background-decorative-7: var(--sapphire-global-color-secondary-gold-3);--sapphire-semantic-color-background-decorative-6: var(--sapphire-global-color-secondary-gold-2);--sapphire-semantic-color-background-decorative-5: var(--sapphire-global-color-secondary-gold-1);--sapphire-semantic-color-background-decorative-4: var(--sapphire-global-color-secondary-blue-4);--sapphire-semantic-color-background-decorative-3: var(--sapphire-global-color-secondary-blue-3);--sapphire-semantic-color-background-decorative-2: var(--sapphire-global-color-secondary-blue-2);--sapphire-semantic-color-background-decorative-1: var(--sapphire-global-color-secondary-blue-1);--sapphire-semantic-color-background-popover: var(--sapphire-global-color-white);--sapphire-semantic-color-background-backdrop: color(from var(--sapphire-global-color-gray-950) xyz x y z / .6);--sapphire-semantic-color-background-backdrop-alpha: .6;--sapphire-semantic-color-background-surface: var(--sapphire-global-color-white);--sapphire-semantic-color-background-field: var(--sapphire-global-color-white);--sapphire-semantic-color-background-warning-subtle: var(--sapphire-global-color-alpha-yellow-50);--sapphire-semantic-color-background-positive-subtle: var(--sapphire-global-color-alpha-green-50);--sapphire-semantic-color-background-negative-subtle: var(--sapphire-global-color-alpha-red-50);--sapphire-semantic-color-background-accent-subtle: var(--sapphire-global-color-alpha-blue-50);--sapphire-semantic-color-background-neutral-subtle: var(--sapphire-global-color-alpha-sand-50);--sapphire-semantic-color-background-negative: var(--sapphire-global-color-red-500);--sapphire-semantic-color-background-warning: var(--sapphire-global-color-yellow-300);--sapphire-semantic-color-background-positive: var(--sapphire-global-color-green-500);--sapphire-semantic-color-background-accent: var(--sapphire-global-color-blue-500);--sapphire-semantic-color-background-signature: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-background-segmented-control-knob: var(--sapphire-global-color-white);--sapphire-semantic-color-background-segmented-control-track: var(--sapphire-global-color-alpha-sand-100);--sapphire-semantic-color-background-switch-default: var(--sapphire-global-color-alpha-sand-200);--sapphire-semantic-color-background-action-highlight: var(--sapphire-global-color-alpha-sand-50);--sapphire-semantic-color-background-action-select-tertiary-default: var(--sapphire-global-color-transparent);--sapphire-semantic-color-background-action-danger-tertiary-default: var(--sapphire-global-color-transparent);--sapphire-semantic-color-background-action-tertiary-default: var(--sapphire-global-color-transparent);--sapphire-semantic-color-background-action-secondary-default: var(--sapphire-global-color-alpha-sand-100);--sapphire-semantic-color-focus-ring: var(--sapphire-global-color-blue-400);--sapphire-semantic-color-border-field-default: color(from var(--sapphire-global-color-blue-900) xyz x y z / .48);--sapphire-semantic-color-border-field-default-alpha: .48;--sapphire-semantic-color-border-negative-default: var(--sapphire-global-color-red-500);--sapphire-semantic-color-border-accent: var(--sapphire-global-color-blue-500);--sapphire-semantic-color-border-tertiary: color(from var(--sapphire-global-color-blue-900) xyz x y z / .06);--sapphire-semantic-color-border-tertiary-alpha: .06;--sapphire-semantic-color-border-secondary: color(from var(--sapphire-global-color-blue-900) xyz x y z / .08);--sapphire-semantic-color-border-secondary-alpha: .08;--sapphire-semantic-color-border-primary: color(from var(--sapphire-global-color-blue-900) xyz x y z / .16);--sapphire-semantic-color-border-primary-alpha: .16;--sapphire-semantic-color-state-border-active: color(from var(--sapphire-global-color-blue-900) xyz x y z / .2);--sapphire-semantic-color-state-border-active-alpha: .2;--sapphire-semantic-color-state-border-hover: color(from var(--sapphire-global-color-blue-900) xyz x y z / .12);--sapphire-semantic-color-state-border-hover-alpha: .12;--sapphire-semantic-color-state-negative-subtle-active: color(from var(--sapphire-global-color-red-500) xyz x y z / .1);--sapphire-semantic-color-state-negative-subtle-active-alpha: .1;--sapphire-semantic-color-state-negative-subtle-hover: color(from var(--sapphire-global-color-red-500) xyz x y z / .06);--sapphire-semantic-color-state-negative-subtle-hover-alpha: .06;--sapphire-semantic-color-state-negative-active: color(from var(--sapphire-global-color-red-900) xyz x y z / .2);--sapphire-semantic-color-state-negative-active-alpha: .2;--sapphire-semantic-color-state-negative-hover: color(from var(--sapphire-global-color-red-900) xyz x y z / .12);--sapphire-semantic-color-state-negative-hover-alpha: .12;--sapphire-semantic-color-state-neutral-ghost-active: color(from var(--sapphire-global-color-sand-900) xyz x y z / .1);--sapphire-semantic-color-state-neutral-ghost-active-alpha: .1;--sapphire-semantic-color-state-neutral-ghost-hover: color(from var(--sapphire-global-color-sand-900) xyz x y z / .06);--sapphire-semantic-color-state-neutral-ghost-hover-alpha: .06;--sapphire-semantic-color-state-neutral-active: color(from var(--sapphire-global-color-sand-900) xyz x y z / .1);--sapphire-semantic-color-state-neutral-active-alpha: .1;--sapphire-semantic-color-state-neutral-hover: color(from var(--sapphire-global-color-sand-900) xyz x y z / .06);--sapphire-semantic-color-state-neutral-hover-alpha: .06;--sapphire-semantic-color-state-accent-subtle-active: color(from var(--sapphire-global-color-blue-500) xyz x y z / .12);--sapphire-semantic-color-state-accent-subtle-active-alpha: .12;--sapphire-semantic-color-state-accent-subtle-hover: color(from var(--sapphire-global-color-blue-500) xyz x y z / .06);--sapphire-semantic-color-state-accent-subtle-hover-alpha: .06;--sapphire-semantic-color-state-accent-active: color(from var(--sapphire-global-color-blue-900) xyz x y z / .2);--sapphire-semantic-color-state-accent-active-alpha: .2;--sapphire-semantic-color-state-accent-hover: color(from var(--sapphire-global-color-blue-900) xyz x y z / .12);--sapphire-semantic-color-state-accent-hover-alpha: .12;--sapphire-global-color-alpha-blue-950: var(--sapphire-global-color-blue-950);--sapphire-global-color-alpha-blue-900: var(--sapphire-global-color-blue-900);--sapphire-global-color-alpha-blue-800: var(--sapphire-global-color-blue-800);--sapphire-global-color-alpha-blue-700: var(--sapphire-global-color-blue-700);--sapphire-global-color-alpha-blue-600: var(--sapphire-global-color-blue-600);--sapphire-global-color-alpha-gray-950: var(--sapphire-global-color-gray-950);--sapphire-semantic-size-spacing-container-horizontal-md: var(--sapphire-semantic-size-spacing-2xl);--sapphire-semantic-size-spacing-container-horizontal-sm: var(--sapphire-semantic-size-spacing-sm);--sapphire-semantic-size-spacing-control-horizontal-lg: var(--sapphire-semantic-size-spacing-md);--sapphire-semantic-size-spacing-control-horizontal-md: var(--sapphire-semantic-size-spacing-sm);--sapphire-semantic-size-spacing-control-vertical-lg: var(--sapphire-semantic-size-spacing-sm);--sapphire-semantic-size-spacing-control-vertical-md: var(--sapphire-semantic-size-spacing-xs);--sapphire-semantic-size-spacing-control-vertical-sm: var(--sapphire-semantic-size-spacing-3xs);--sapphire-semantic-size-font-control-lg: var(--sapphire-semantic-size-font-body-md);--sapphire-semantic-size-font-control-md: var(--sapphire-semantic-size-font-body-sm);--sapphire-semantic-size-font-control-sm: var(--sapphire-semantic-size-font-body-xs);--sapphire-semantic-size-font-label-md: var(--sapphire-semantic-size-font-body-sm);--sapphire-semantic-size-font-label-sm: var(--sapphire-semantic-size-font-body-xs);--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-color-foreground-on-neutral-subtle: var(--sapphire-semantic-color-foreground-primary);--sapphire-semantic-color-foreground-on-positive-subtle: var(--sapphire-semantic-color-foreground-positive);--sapphire-semantic-color-foreground-on-negative-subtle: var(--sapphire-semantic-color-foreground-negative);--sapphire-semantic-color-foreground-on-accent-subtle: var(--sapphire-semantic-color-foreground-accent);--sapphire-semantic-color-foreground-action-danger-default: var(--sapphire-semantic-color-foreground-negative);--sapphire-semantic-color-foreground-action-link-default: var(--sapphire-semantic-color-foreground-accent);--sapphire-semantic-color-foreground-action-select-default: var(--sapphire-semantic-color-foreground-accent);--sapphire-semantic-color-foreground-action-on-select-default: var(--sapphire-semantic-color-foreground-on-accent);--sapphire-semantic-color-foreground-action-on-danger-default: var(--sapphire-semantic-color-foreground-on-negative);--sapphire-semantic-color-foreground-action-on-tertiary-default: var(--sapphire-semantic-color-foreground-primary);--sapphire-semantic-color-foreground-action-on-primary-default: var(--sapphire-semantic-color-foreground-on-accent);--sapphire-semantic-color-background-spinner-secondary: var(--sapphire-semantic-color-foreground-accent);--sapphire-semantic-color-background-spinner-primary: var(--sapphire-semantic-color-foreground-primary);--sapphire-semantic-color-background-skeleton: var(--sapphire-semantic-color-state-neutral-active);--sapphire-semantic-color-background-progress-track: var(--sapphire-semantic-color-background-accent-subtle);--sapphire-semantic-color-background-progress-fill: var(--sapphire-semantic-color-background-accent);--sapphire-semantic-color-background-switch-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-active-alpha) * 100%), var(--sapphire-semantic-color-background-switch-default) calc((1 - var(--sapphire-semantic-color-state-neutral-active-alpha)) * 100%));--sapphire-semantic-color-background-switch-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-hover-alpha) * 100%), var(--sapphire-semantic-color-background-switch-default) calc((1 - var(--sapphire-semantic-color-state-neutral-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-select-tertiary-active: var(--sapphire-semantic-color-state-accent-subtle-active);--sapphire-semantic-color-background-action-select-tertiary-hover: var(--sapphire-semantic-color-state-accent-subtle-hover);--sapphire-semantic-color-background-action-select-secondary-default: var(--sapphire-semantic-color-background-accent-subtle);--sapphire-semantic-color-background-action-danger-tertiary-active: var(--sapphire-semantic-color-state-negative-subtle-active);--sapphire-semantic-color-background-action-danger-tertiary-hover: var(--sapphire-semantic-color-state-negative-subtle-hover);--sapphire-semantic-color-background-action-danger-secondary-default: var(--sapphire-semantic-color-background-negative-subtle);--sapphire-semantic-color-background-action-danger-default: var(--sapphire-semantic-color-background-negative);--sapphire-semantic-color-background-action-tertiary-active: var(--sapphire-semantic-color-state-neutral-ghost-active);--sapphire-semantic-color-background-action-tertiary-hover: var(--sapphire-semantic-color-state-neutral-ghost-hover);--sapphire-semantic-color-background-action-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-secondary-default) calc((1 - var(--sapphire-semantic-color-state-neutral-active-alpha)) * 100%));--sapphire-semantic-color-background-action-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-secondary-default) calc((1 - var(--sapphire-semantic-color-state-neutral-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-primary-default: var(--sapphire-semantic-color-background-accent);--sapphire-semantic-color-border-field-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-border-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-border-active-alpha) * 100%), var(--sapphire-semantic-color-border-field-default) calc((1 - var(--sapphire-semantic-color-state-border-active-alpha)) * 100%));--sapphire-semantic-color-border-field-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-border-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-border-hover-alpha) * 100%), var(--sapphire-semantic-color-border-field-default) calc((1 - var(--sapphire-semantic-color-state-border-hover-alpha)) * 100%));--sapphire-semantic-color-border-negative-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-border-negative-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-border-negative-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-border-negative-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-danger-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-danger-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-link-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-link-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-link-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-link-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-select-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-select-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-select-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-select-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-select-tertiary-default: var(--sapphire-semantic-color-foreground-action-select-default);--sapphire-semantic-color-foreground-action-on-select-secondary-default: var(--sapphire-semantic-color-foreground-on-accent-subtle);--sapphire-semantic-color-foreground-action-on-select-active: var(--sapphire-semantic-color-foreground-action-on-select-default);--sapphire-semantic-color-foreground-action-on-select-hover: var(--sapphire-semantic-color-foreground-action-on-select-default);--sapphire-semantic-color-foreground-action-on-danger-tertiary-default: var(--sapphire-semantic-color-foreground-action-danger-default);--sapphire-semantic-color-foreground-action-on-danger-secondary-default: var(--sapphire-semantic-color-foreground-on-negative-subtle);--sapphire-semantic-color-foreground-action-on-danger-active: var(--sapphire-semantic-color-foreground-action-on-danger-default);--sapphire-semantic-color-foreground-action-on-danger-hover: var(--sapphire-semantic-color-foreground-action-on-danger-default);--sapphire-semantic-color-foreground-action-on-tertiary-active: var(--sapphire-semantic-color-foreground-action-on-tertiary-default);--sapphire-semantic-color-foreground-action-on-tertiary-hover: var(--sapphire-semantic-color-foreground-action-on-tertiary-default);--sapphire-semantic-color-foreground-action-on-secondary-default: var(--sapphire-semantic-color-foreground-on-neutral-subtle);--sapphire-semantic-color-foreground-action-on-primary-active: var(--sapphire-semantic-color-foreground-action-on-primary-default);--sapphire-semantic-color-foreground-action-on-primary-hover: var(--sapphire-semantic-color-foreground-action-on-primary-default);--sapphire-semantic-color-background-action-select-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-subtle-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-subtle-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-subtle-active-alpha)) * 100%));--sapphire-semantic-color-background-action-select-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-subtle-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-subtle-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-subtle-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-select-default: var(--sapphire-semantic-color-background-action-primary-default);--sapphire-semantic-color-background-action-danger-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-subtle-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-subtle-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-subtle-active-alpha)) * 100%));--sapphire-semantic-color-background-action-danger-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-subtle-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-subtle-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-subtle-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-danger-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-background-action-danger-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-primary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-primary-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-background-action-primary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-primary-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-select-tertiary-active: var(--sapphire-semantic-color-foreground-action-select-active);--sapphire-semantic-color-foreground-action-on-select-tertiary-hover: var(--sapphire-semantic-color-foreground-action-select-hover);--sapphire-semantic-color-foreground-action-on-select-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-select-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-danger-tertiary-active: var(--sapphire-semantic-color-foreground-action-danger-active);--sapphire-semantic-color-foreground-action-on-danger-tertiary-hover: var(--sapphire-semantic-color-foreground-action-danger-hover);--sapphire-semantic-color-foreground-action-on-danger-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-danger-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-secondary-active: var(--sapphire-semantic-color-foreground-action-on-secondary-default);--sapphire-semantic-color-foreground-action-on-secondary-hover: var(--sapphire-semantic-color-foreground-action-on-secondary-default);--sapphire-semantic-color-background-action-select-active: var(--sapphire-semantic-color-background-action-primary-active);--sapphire-semantic-color-background-action-select-hover: var(--sapphire-semantic-color-background-action-primary-hover)}::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}::ng-deep .cdk-overlay-transparent-backdrop{visibility:visible!important;opacity:0!important}:host{color-scheme:dark}\n"] });
|
|
7096
6426
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ThemeDefaultDark, decorators: [{
|
|
7097
6427
|
type: Component,
|
|
7098
|
-
args: [{ selector: 'sp-theme-default-dark', standalone: true, template: '<ng-content></ng-content>', hostDirectives: [ThemeBaseDirective], styles: ["@keyframes backdrop-fade-in{0%{background:transparent}to{background:var(--sapphire-semantic-color-background-backdrop)}}@keyframes backdrop-fade-out{0%{background:var(--sapphire-semantic-color-background-backdrop)}to{background: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:var(--sapphire-semantic-transitions-fade);animation-fill-mode:forwards}.sapphire-backdrop--exiting,:host.sapphire-backdrop--exiting{animation-name:backdrop-fade-out}.sapphire-theme-default-dark,: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-lg: 1200px;--sapphire-semantic-size-breakpoint-md: 960px;--sapphire-semantic-size-breakpoint-sm: 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-default-bold: 600;--sapphire-semantic-font-weight-default-medium: 500;--sapphire-semantic-font-weight-default-regular: 400;--sapphire-semantic-font-weight-default-light: 300;--sapphire-global-transitions-ease-in: cubic-bezier(0, 0, 0, 1);--sapphire-global-transitions-ease-in-out-quick: cubic-bezier(.5, 0, 0, 1);--sapphire-global-transitions-ease-in-out: cubic-bezier(.7, 0, .2, 1);--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.3;--sapphire-global-size-font-300: 3rem;--sapphire-global-size-font-250: 2.5rem;--sapphire-global-size-font-200: 2rem;--sapphire-global-size-font-175: 1.75rem;--sapphire-global-size-font-163: 1.625rem;--sapphire-global-size-font-150: 1.5rem;--sapphire-global-size-font-125: 1.25rem;--sapphire-global-size-font-112: 1.125rem;--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-110: 2.75rem;--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-40: 16px;--sapphire-global-size-static-30: 12px;--sapphire-global-size-static-20: 8px;--sapphire-global-size-static-15: 6px;--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-md: 0px 0px 0px .5px hsl(0 0% 100% / .1) inset, 0px 4px 16px 0px hsl(212 63% 12% / .04);--sapphire-global-opacity-30: .3;--sapphire-global-font-danske-name: \"Danske\";--sapphire-global-color-secondary-green-4: hsl(137 64% 78%);--sapphire-global-color-secondary-green-3: hsl(152 42% 56%);--sapphire-global-color-secondary-green-2: hsl(152 44% 38%);--sapphire-global-color-secondary-green-1: hsl(158 58% 19%);--sapphire-global-color-secondary-copper-4: hsl(23 69% 75%);--sapphire-global-color-secondary-copper-3: hsl(19 61% 60%);--sapphire-global-color-secondary-copper-2: hsl(18 57% 41%);--sapphire-global-color-secondary-copper-1: hsl(12 65% 23%);--sapphire-global-color-secondary-gold-4: hsl(45 63% 69%);--sapphire-global-color-secondary-gold-3: hsl(39 49% 54%);--sapphire-global-color-secondary-gold-2: hsl(37 57% 36%);--sapphire-global-color-secondary-gold-1: hsl(37 68% 19%);--sapphire-global-color-secondary-blue-4: hsl(211 72% 72%);--sapphire-global-color-secondary-blue-3: hsl(214 59% 62%);--sapphire-global-color-secondary-blue-2: hsl(218 51% 52%);--sapphire-global-color-secondary-blue-1: hsl(212 100% 24%);--sapphire-global-color-alpha-yellow-950: hsl(24 100% 14% / .902);--sapphire-global-color-alpha-yellow-900: hsl(25 100% 27% / .733);--sapphire-global-color-alpha-yellow-800: hsl(27 100% 37% / .705);--sapphire-global-color-alpha-yellow-700: hsl(31 100% 38% / .846);--sapphire-global-color-alpha-yellow-600: hsl(36 100% 44% / .902);--sapphire-global-color-alpha-yellow-500: hsl(41 100% 51% / .905);--sapphire-global-color-alpha-yellow-400: hsl(46 100% 55% / .971);--sapphire-global-color-alpha-yellow-300: hsl(46 100% 65% / .987);--sapphire-global-color-alpha-yellow-200: hsl(50 100% 77% / .979);--sapphire-global-color-alpha-yellow-100: hsl(51 100% 89% / .987);--sapphire-global-color-alpha-yellow-50: hsl(53 100% 92%);--sapphire-global-color-alpha-green-950: hsl(87 100% 10% / .508);--sapphire-global-color-alpha-green-900: hsl(86 100% 27% / .254);--sapphire-global-color-alpha-green-800: hsl(90 100% 56% / .198);--sapphire-global-color-alpha-green-700: hsl(101 100% 62% / .278);--sapphire-global-color-alpha-green-600: hsl(111 100% 64% / .396);--sapphire-global-color-alpha-green-500: hsl(113 100% 64% / .489);--sapphire-global-color-alpha-green-400: hsl(116 100% 70% / .662);--sapphire-global-color-alpha-green-300: hsl(117 100% 79% / .733);--sapphire-global-color-alpha-green-200: hsl(118 100% 86% / .83);--sapphire-global-color-alpha-green-100: hsl(120 100% 92% / .906);--sapphire-global-color-alpha-green-50: hsl(120 100% 97% / .939);--sapphire-global-color-alpha-red-950: hsl(7 100% 12% / .648);--sapphire-global-color-alpha-red-900: hsl(10 100% 30% / .423);--sapphire-global-color-alpha-red-800: hsl(5 100% 56% / .413);--sapphire-global-color-alpha-red-700: hsl(3 100% 59% / .564);--sapphire-global-color-alpha-red-600: hsl(1 100% 61% / .701);--sapphire-global-color-alpha-red-500: hsl(1 100% 60% / .826);--sapphire-global-color-alpha-red-400: hsl(1 100% 68% / .963);--sapphire-global-color-alpha-red-300: hsl(1 100% 75% / .979);--sapphire-global-color-alpha-red-200: hsl(2 100% 84%);--sapphire-global-color-alpha-red-100: hsl(4 100% 92%);--sapphire-global-color-alpha-red-50: hsl(0 100% 96% / .991);--sapphire-global-color-alpha-blue-950: hsl(210 100% 11% / .667);--sapphire-global-color-alpha-blue-900: hsl(210 100% 17% / .667);--sapphire-global-color-alpha-blue-800: hsl(211 100% 28% / .667);--sapphire-global-color-alpha-blue-700: hsl(211 100% 39% / .667);--sapphire-global-color-alpha-blue-600: hsl(212 100% 50% / .699);--sapphire-global-color-alpha-blue-500: hsl(215 100% 50% / .894);--sapphire-global-color-alpha-sand-950: hsl(33 100% 24% / .31);--sapphire-global-color-alpha-sand-900: hsl(35 100% 58% / .224);--sapphire-global-color-alpha-sand-800: hsl(38 100% 66% / .307);--sapphire-global-color-alpha-sand-700: hsl(38 100% 72% / .39);--sapphire-global-color-alpha-sand-600: hsl(38 100% 76% / .476);--sapphire-global-color-alpha-sand-500: hsl(39 100% 84% / .586);--sapphire-global-color-alpha-sand-400: hsl(42 100% 88% / .723);--sapphire-global-color-alpha-sand-300: hsl(45 100% 92% / .802);--sapphire-global-color-alpha-sand-200: hsl(44 100% 97% / .885);--sapphire-global-color-alpha-sand-100: hsl(53 100% 98% / .92);--sapphire-global-color-alpha-sand-50: hsl(40 100% 99% / .96);--sapphire-global-color-alpha-gray-900: hsl(215 97% 75% / .087);--sapphire-global-color-alpha-gray-800: hsl(221 100% 81% / .144);--sapphire-global-color-alpha-gray-700: hsl(214 100% 85% / .254);--sapphire-global-color-alpha-gray-600: hsl(213 100% 85% / .363);--sapphire-global-color-alpha-gray-500: hsl(212 100% 89% / .508);--sapphire-global-color-alpha-gray-400: hsl(211 100% 91% / .663);--sapphire-global-color-alpha-gray-300: hsl(211 100% 95% / .803);--sapphire-global-color-alpha-gray-200: hsl(212 100% 97% / .871);--sapphire-global-color-alpha-gray-100: hsl(207 100% 98% / .926);--sapphire-global-color-alpha-gray-50: hsl(200 100% 99% / .966);--sapphire-global-color-yellow-950: hsl(24 91% 14%);--sapphire-global-color-yellow-900: hsl(25 84% 22%);--sapphire-global-color-yellow-800: hsl(27 86% 28%);--sapphire-global-color-yellow-700: hsl(31 94% 33%);--sapphire-global-color-yellow-600: hsl(36 97% 40%);--sapphire-global-color-yellow-500: hsl(41 95% 46%);--sapphire-global-color-yellow-400: hsl(46 94% 54%);--sapphire-global-color-yellow-300: hsl(46 97% 65%);--sapphire-global-color-yellow-200: hsl(51 92% 75%);--sapphire-global-color-yellow-100: hsl(51 90% 88%);--sapphire-global-color-yellow-50: hsl(53 100% 92%);--sapphire-global-color-green-950: hsl(129 42% 9%);--sapphire-global-color-green-900: hsl(131 40% 14%);--sapphire-global-color-green-800: hsl(128 38% 18%);--sapphire-global-color-green-700: hsl(129 41% 23%);--sapphire-global-color-green-600: hsl(127 47% 30%);--sapphire-global-color-green-500: hsl(125 50% 35%);--sapphire-global-color-green-400: hsl(122 39% 49%);--sapphire-global-color-green-300: hsl(124 39% 60%);--sapphire-global-color-green-200: hsl(124 42% 73%);--sapphire-global-color-green-100: hsl(125 46% 84%);--sapphire-global-color-green-50: hsl(129 33% 92%);--sapphire-global-color-red-950: hsl(358 57% 10%);--sapphire-global-color-red-900: hsl(1 53% 17%);--sapphire-global-color-red-800: hsl(358 55% 27%);--sapphire-global-color-red-700: hsl(359 57% 36%);--sapphire-global-color-red-600: hsl(359 59% 44%);--sapphire-global-color-red-500: hsl(0 65% 51%);--sapphire-global-color-red-400: hsl(1 90% 66%);--sapphire-global-color-red-300: hsl(1 92% 74%);--sapphire-global-color-red-200: hsl(2 100% 84%);--sapphire-global-color-red-100: hsl(4 100% 92%);--sapphire-global-color-red-50: hsl(0 82% 96%);--sapphire-global-color-blue-950: hsl(210 100% 9%);--sapphire-global-color-blue-900: hsl(210 100% 14%);--sapphire-global-color-blue-800: hsl(211 100% 21%);--sapphire-global-color-blue-700: hsl(211 100% 28%);--sapphire-global-color-blue-600: hsl(212 100% 37%);--sapphire-global-color-blue-500: hsl(218 92% 49%);--sapphire-global-color-blue-400: hsl(216 100% 63%);--sapphire-global-color-blue-300: hsl(215 100% 74%);--sapphire-global-color-blue-200: hsl(214 100% 83%);--sapphire-global-color-blue-100: hsl(214 100% 90%);--sapphire-global-color-blue-50: hsl(219 100% 95%);--sapphire-global-color-sand-950: hsl(39 23% 12%);--sapphire-global-color-sand-900: hsl(41 23% 18%);--sapphire-global-color-sand-800: hsl(43 22% 25%);--sapphire-global-color-sand-700: hsl(42 20% 33%);--sapphire-global-color-sand-600: hsl(42 20% 40%);--sapphire-global-color-sand-500: hsl(43 14% 52%);--sapphire-global-color-sand-400: hsl(39 20% 66%);--sapphire-global-color-sand-300: hsl(48 20% 75%);--sapphire-global-color-sand-200: hsl(48 15% 87%);--sapphire-global-color-sand-100: hsl(60 11% 91%);--sapphire-global-color-sand-50: hsl(60 9% 96%);--sapphire-global-color-gray-950: hsl(210 94% 7%);--sapphire-global-color-gray-900: hsl(211 64% 13%);--sapphire-global-color-gray-800: hsl(213 48% 17%);--sapphire-global-color-gray-700: hsl(212 33% 27%);--sapphire-global-color-gray-600: hsl(212 27% 35%);--sapphire-global-color-gray-500: hsl(211 19% 49%);--sapphire-global-color-gray-400: hsl(211 22% 63%);--sapphire-global-color-gray-300: hsl(211 22% 77%);--sapphire-global-color-gray-200: hsl(210 26% 85%);--sapphire-global-color-gray-100: hsl(208 29% 91%);--sapphire-global-color-gray-50: hsl(206 33% 96%);--sapphire-global-color-transparent: hsla(0, 0%, 100%, 0);--sapphire-global-color-black: hsla(0, 0%, 0%, 1);--sapphire-global-color-white: hsla(0, 0%, 100%, 1);--sapphire-semantic-transitions-fade: var(--sapphire-global-transitions-ease-in);--sapphire-semantic-transitions-dynamic: var(--sapphire-global-transitions-ease-in-out-quick);--sapphire-semantic-transitions-standard: var(--sapphire-global-transitions-ease-in-out);--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-6xl: var(--sapphire-global-size-generic-180);--sapphire-semantic-size-spacing-5xl: var(--sapphire-global-size-generic-160);--sapphire-semantic-size-spacing-4xl: var(--sapphire-global-size-generic-120);--sapphire-semantic-size-spacing-3xl: var(--sapphire-global-size-generic-100);--sapphire-semantic-size-spacing-2xl: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-spacing-xl: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-spacing-lg: var(--sapphire-global-size-generic-50);--sapphire-semantic-size-spacing-md: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-spacing-sm: var(--sapphire-global-size-generic-30);--sapphire-semantic-size-spacing-xs: var(--sapphire-global-size-generic-20);--sapphire-semantic-size-spacing-2xs: var(--sapphire-global-size-generic-15);--sapphire-semantic-size-spacing-3xs: var(--sapphire-global-size-generic-10);--sapphire-semantic-size-spacing-4xs: 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-heading-2xl: var(--sapphire-global-size-font-175);--sapphire-semantic-size-font-heading-xl: var(--sapphire-global-size-font-150);--sapphire-semantic-size-font-heading-lg: var(--sapphire-global-size-font-125);--sapphire-semantic-size-font-heading-md: var(--sapphire-global-size-font-125);--sapphire-semantic-size-font-heading-sm: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-heading-xs: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-body-lg: var(--sapphire-global-size-font-112);--sapphire-semantic-size-font-body-md: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-body-sm: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-body-xs: var(--sapphire-global-size-font-75);--sapphire-semantic-size-radius-2xl: var(--sapphire-global-size-static-40);--sapphire-semantic-size-radius-xl: var(--sapphire-global-size-static-30);--sapphire-semantic-size-radius-lg: var(--sapphire-global-size-static-20);--sapphire-semantic-size-radius-md: var(--sapphire-global-size-static-15);--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-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-field: var(--sapphire-global-size-generic-750);--sapphire-semantic-size-height-box-md: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-height-control-4xl: var(--sapphire-global-size-generic-200);--sapphire-semantic-size-height-control-3xl: var(--sapphire-global-size-generic-180);--sapphire-semantic-size-height-control-2xl: var(--sapphire-global-size-generic-160);--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-30);--sapphire-semantic-font-name-default: var(--sapphire-global-font-danske-name);--sapphire-semantic-color-foreground-on-decorative-neutral: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-16: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-15: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-14: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-13: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-12: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-11: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-10: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-9: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-8: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-7: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-6: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-5: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-4: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-3: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-2: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-1: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-signature: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-warning-subtle: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-warning: var(--sapphire-global-color-yellow-900);--sapphire-semantic-color-foreground-on-positive-subtle: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-positive: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-negative-subtle: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-negative: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-accent-subtle: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-accent: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-positive: var(--sapphire-global-color-alpha-green-400);--sapphire-semantic-color-foreground-warning: var(--sapphire-global-color-alpha-yellow-400);--sapphire-semantic-color-foreground-negative: var(--sapphire-global-color-alpha-red-400);--sapphire-semantic-color-foreground-secondary: color(from var(--sapphire-global-color-gray-50) xyz x y z / .55);--sapphire-semantic-color-foreground-secondary-alpha: .55;--sapphire-semantic-color-foreground-primary: var(--sapphire-global-color-gray-50);--sapphire-semantic-color-background-decorative-neutral: var(--sapphire-global-color-alpha-gray-800);--sapphire-semantic-color-background-decorative-16: var(--sapphire-global-color-secondary-green-4);--sapphire-semantic-color-background-decorative-15: var(--sapphire-global-color-secondary-green-3);--sapphire-semantic-color-background-decorative-14: var(--sapphire-global-color-secondary-green-2);--sapphire-semantic-color-background-decorative-13: var(--sapphire-global-color-secondary-green-1);--sapphire-semantic-color-background-decorative-12: var(--sapphire-global-color-secondary-copper-4);--sapphire-semantic-color-background-decorative-11: var(--sapphire-global-color-secondary-copper-3);--sapphire-semantic-color-background-decorative-10: var(--sapphire-global-color-secondary-copper-2);--sapphire-semantic-color-background-decorative-9: var(--sapphire-global-color-secondary-copper-1);--sapphire-semantic-color-background-decorative-8: var(--sapphire-global-color-secondary-gold-4);--sapphire-semantic-color-background-decorative-7: var(--sapphire-global-color-secondary-gold-3);--sapphire-semantic-color-background-decorative-6: var(--sapphire-global-color-secondary-gold-2);--sapphire-semantic-color-background-decorative-5: var(--sapphire-global-color-secondary-gold-1);--sapphire-semantic-color-background-decorative-4: var(--sapphire-global-color-secondary-blue-4);--sapphire-semantic-color-background-decorative-3: var(--sapphire-global-color-secondary-blue-3);--sapphire-semantic-color-background-decorative-2: var(--sapphire-global-color-secondary-blue-2);--sapphire-semantic-color-background-decorative-1: var(--sapphire-global-color-secondary-blue-1);--sapphire-semantic-color-background-popover: var(--sapphire-global-color-gray-800);--sapphire-semantic-color-background-backdrop: color(from var(--sapphire-global-color-gray-950) xyz x y z / .6);--sapphire-semantic-color-background-backdrop-alpha: .6;--sapphire-semantic-color-background-surface: var(--sapphire-global-color-gray-900);--sapphire-semantic-color-background-field: var(--sapphire-global-color-gray-800);--sapphire-semantic-color-background-warning-subtle: var(--sapphire-global-color-alpha-yellow-900);--sapphire-semantic-color-background-positive-subtle: var(--sapphire-global-color-alpha-green-800);--sapphire-semantic-color-background-negative-subtle: var(--sapphire-global-color-alpha-red-800);--sapphire-semantic-color-background-accent-subtle: var(--sapphire-global-color-alpha-blue-800);--sapphire-semantic-color-background-neutral-subtle: var(--sapphire-global-color-alpha-gray-900);--sapphire-semantic-color-background-negative: var(--sapphire-global-color-red-500);--sapphire-semantic-color-background-warning: var(--sapphire-global-color-yellow-300);--sapphire-semantic-color-background-positive: var(--sapphire-global-color-green-500);--sapphire-semantic-color-background-accent: var(--sapphire-global-color-blue-500);--sapphire-semantic-color-background-signature: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-background-segmented-control-knob: var(--sapphire-global-color-alpha-gray-600);--sapphire-semantic-color-background-segmented-control-track: var(--sapphire-global-color-alpha-gray-800);--sapphire-semantic-color-background-switch-default: var(--sapphire-global-color-alpha-gray-600);--sapphire-semantic-color-background-action-highlight: var(--sapphire-global-color-alpha-gray-900);--sapphire-semantic-color-background-action-select-tertiary-default: var(--sapphire-global-color-transparent);--sapphire-semantic-color-background-action-danger-tertiary-default: var(--sapphire-global-color-transparent);--sapphire-semantic-color-background-action-tertiary-default: var(--sapphire-global-color-transparent);--sapphire-semantic-color-background-action-secondary-default: var(--sapphire-global-color-alpha-gray-800);--sapphire-semantic-color-focus-ring: var(--sapphire-global-color-blue-400);--sapphire-semantic-color-border-negative-default: var(--sapphire-global-color-red-500);--sapphire-semantic-color-border-accent: var(--sapphire-global-color-blue-500);--sapphire-semantic-color-border-tertiary: color(from var(--sapphire-global-color-gray-50) xyz x y z / .06);--sapphire-semantic-color-border-tertiary-alpha: .06;--sapphire-semantic-color-border-secondary: color(from var(--sapphire-global-color-gray-50) xyz x y z / .08);--sapphire-semantic-color-border-secondary-alpha: .08;--sapphire-semantic-color-border-primary: color(from var(--sapphire-global-color-gray-50) xyz x y z / .16);--sapphire-semantic-color-border-primary-alpha: .16;--sapphire-semantic-color-state-border-active: color(from var(--sapphire-global-color-gray-100) xyz x y z / .2);--sapphire-semantic-color-state-border-active-alpha: .2;--sapphire-semantic-color-state-border-hover: color(from var(--sapphire-global-color-gray-100) xyz x y z / .12);--sapphire-semantic-color-state-border-hover-alpha: .12;--sapphire-semantic-color-state-negative-subtle-active: color(from var(--sapphire-global-color-red-100) xyz x y z / .12);--sapphire-semantic-color-state-negative-subtle-active-alpha: .12;--sapphire-semantic-color-state-negative-subtle-hover: color(from var(--sapphire-global-color-red-100) xyz x y z / .08);--sapphire-semantic-color-state-negative-subtle-hover-alpha: .08;--sapphire-semantic-color-state-negative-active: color(from var(--sapphire-global-color-red-100) xyz x y z / .2);--sapphire-semantic-color-state-negative-active-alpha: .2;--sapphire-semantic-color-state-negative-hover: color(from var(--sapphire-global-color-red-100) xyz x y z / .12);--sapphire-semantic-color-state-negative-hover-alpha: .12;--sapphire-semantic-color-state-neutral-ghost-active: color(from var(--sapphire-global-color-gray-200) xyz x y z / .1);--sapphire-semantic-color-state-neutral-ghost-active-alpha: .1;--sapphire-semantic-color-state-neutral-ghost-hover: color(from var(--sapphire-global-color-gray-200) xyz x y z / .06);--sapphire-semantic-color-state-neutral-ghost-hover-alpha: .06;--sapphire-semantic-color-state-neutral-active: color(from var(--sapphire-global-color-gray-200) xyz x y z / .1);--sapphire-semantic-color-state-neutral-active-alpha: .1;--sapphire-semantic-color-state-neutral-hover: color(from var(--sapphire-global-color-gray-200) xyz x y z / .06);--sapphire-semantic-color-state-neutral-hover-alpha: .06;--sapphire-semantic-color-state-accent-subtle-active: color(from var(--sapphire-global-color-blue-500) xyz x y z / .12);--sapphire-semantic-color-state-accent-subtle-active-alpha: .12;--sapphire-semantic-color-state-accent-subtle-hover: color(from var(--sapphire-global-color-blue-500) xyz x y z / .06);--sapphire-semantic-color-state-accent-subtle-hover-alpha: .06;--sapphire-semantic-color-state-accent-active: color(from var(--sapphire-global-color-blue-100) xyz x y z / .2);--sapphire-semantic-color-state-accent-active-alpha: .2;--sapphire-semantic-color-state-accent-hover: color(from var(--sapphire-global-color-blue-100) xyz x y z / .12);--sapphire-semantic-color-state-accent-hover-alpha: .12;--sapphire-global-color-alpha-blue-400: var(--sapphire-global-color-blue-400);--sapphire-global-color-alpha-blue-300: var(--sapphire-global-color-blue-300);--sapphire-global-color-alpha-blue-200: var(--sapphire-global-color-blue-200);--sapphire-global-color-alpha-blue-100: var(--sapphire-global-color-blue-100);--sapphire-global-color-alpha-blue-50: var(--sapphire-global-color-blue-50);--sapphire-global-color-alpha-gray-950: var(--sapphire-global-color-gray-950);--sapphire-semantic-size-spacing-container-horizontal-md: var(--sapphire-semantic-size-spacing-xl);--sapphire-semantic-size-spacing-container-horizontal-sm: var(--sapphire-semantic-size-spacing-sm);--sapphire-semantic-size-spacing-control-horizontal-lg: var(--sapphire-semantic-size-spacing-md);--sapphire-semantic-size-spacing-control-horizontal-md: var(--sapphire-semantic-size-spacing-sm);--sapphire-semantic-size-spacing-control-vertical-lg: var(--sapphire-semantic-size-spacing-sm);--sapphire-semantic-size-spacing-control-vertical-md: var(--sapphire-semantic-size-spacing-xs);--sapphire-semantic-size-spacing-control-vertical-sm: var(--sapphire-semantic-size-spacing-3xs);--sapphire-semantic-size-font-control-lg: var(--sapphire-semantic-size-font-body-md);--sapphire-semantic-size-font-control-md: var(--sapphire-semantic-size-font-body-sm);--sapphire-semantic-size-font-control-sm: var(--sapphire-semantic-size-font-body-xs);--sapphire-semantic-size-font-label-md: var(--sapphire-semantic-size-font-body-sm);--sapphire-semantic-size-font-label-sm: var(--sapphire-semantic-size-font-body-xs);--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-color-foreground-on-neutral-subtle: var(--sapphire-semantic-color-foreground-primary);--sapphire-semantic-color-foreground-accent: var(--sapphire-global-color-alpha-blue-400);--sapphire-semantic-color-foreground-action-danger-default: var(--sapphire-semantic-color-foreground-negative);--sapphire-semantic-color-foreground-action-on-select-secondary-default: var(--sapphire-semantic-color-foreground-on-accent-subtle);--sapphire-semantic-color-foreground-action-on-select-default: var(--sapphire-semantic-color-foreground-on-accent);--sapphire-semantic-color-foreground-action-on-danger-secondary-default: var(--sapphire-semantic-color-foreground-on-negative-subtle);--sapphire-semantic-color-foreground-action-on-danger-default: var(--sapphire-semantic-color-foreground-on-negative);--sapphire-semantic-color-foreground-action-on-tertiary-default: var(--sapphire-semantic-color-foreground-primary);--sapphire-semantic-color-foreground-action-on-primary-default: var(--sapphire-semantic-color-foreground-on-accent);--sapphire-semantic-color-background-spinner-primary: var(--sapphire-semantic-color-foreground-primary);--sapphire-semantic-color-background-skeleton: var(--sapphire-semantic-color-state-neutral-active);--sapphire-semantic-color-background-switch-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-active-alpha) * 100%), var(--sapphire-semantic-color-background-switch-default) calc((1 - var(--sapphire-semantic-color-state-neutral-active-alpha)) * 100%));--sapphire-semantic-color-background-switch-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-hover-alpha) * 100%), var(--sapphire-semantic-color-background-switch-default) calc((1 - var(--sapphire-semantic-color-state-neutral-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-select-tertiary-active: var(--sapphire-semantic-color-state-accent-subtle-active);--sapphire-semantic-color-background-action-select-tertiary-hover: var(--sapphire-semantic-color-state-accent-subtle-hover);--sapphire-semantic-color-background-action-select-secondary-default: var(--sapphire-semantic-color-background-accent-subtle);--sapphire-semantic-color-background-action-danger-tertiary-active: var(--sapphire-semantic-color-state-negative-subtle-active);--sapphire-semantic-color-background-action-danger-tertiary-hover: var(--sapphire-semantic-color-state-negative-subtle-hover);--sapphire-semantic-color-background-action-danger-secondary-default: var(--sapphire-semantic-color-background-negative-subtle);--sapphire-semantic-color-background-action-danger-default: var(--sapphire-semantic-color-background-negative);--sapphire-semantic-color-background-action-tertiary-active: var(--sapphire-semantic-color-state-neutral-ghost-active);--sapphire-semantic-color-background-action-tertiary-hover: var(--sapphire-semantic-color-state-neutral-ghost-hover);--sapphire-semantic-color-background-action-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-secondary-default) calc((1 - var(--sapphire-semantic-color-state-neutral-active-alpha)) * 100%));--sapphire-semantic-color-background-action-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-secondary-default) calc((1 - var(--sapphire-semantic-color-state-neutral-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-primary-default: var(--sapphire-semantic-color-background-accent);--sapphire-semantic-color-border-field-default: var(--sapphire-semantic-color-border-primary);--sapphire-semantic-color-border-negative-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-border-negative-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-border-negative-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-border-negative-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-danger-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-danger-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-link-default: var(--sapphire-semantic-color-foreground-accent);--sapphire-semantic-color-foreground-action-select-default: var(--sapphire-semantic-color-foreground-accent);--sapphire-semantic-color-foreground-action-on-select-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-select-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-select-active: var(--sapphire-semantic-color-foreground-action-on-select-default);--sapphire-semantic-color-foreground-action-on-select-hover: var(--sapphire-semantic-color-foreground-action-on-select-default);--sapphire-semantic-color-foreground-action-on-danger-tertiary-default: var(--sapphire-semantic-color-foreground-action-danger-default);--sapphire-semantic-color-foreground-action-on-danger-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-danger-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-danger-active: var(--sapphire-semantic-color-foreground-action-on-danger-default);--sapphire-semantic-color-foreground-action-on-danger-hover: var(--sapphire-semantic-color-foreground-action-on-danger-default);--sapphire-semantic-color-foreground-action-on-tertiary-active: var(--sapphire-semantic-color-foreground-action-on-tertiary-default);--sapphire-semantic-color-foreground-action-on-tertiary-hover: var(--sapphire-semantic-color-foreground-action-on-tertiary-default);--sapphire-semantic-color-foreground-action-on-secondary-default: var(--sapphire-semantic-color-foreground-on-neutral-subtle);--sapphire-semantic-color-foreground-action-on-primary-active: var(--sapphire-semantic-color-foreground-action-on-primary-default);--sapphire-semantic-color-foreground-action-on-primary-hover: var(--sapphire-semantic-color-foreground-action-on-primary-default);--sapphire-semantic-color-background-spinner-secondary: var(--sapphire-semantic-color-foreground-accent);--sapphire-semantic-color-background-action-select-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-subtle-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-subtle-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-subtle-active-alpha)) * 100%));--sapphire-semantic-color-background-action-select-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-subtle-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-subtle-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-subtle-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-select-default: var(--sapphire-semantic-color-background-action-primary-default);--sapphire-semantic-color-background-action-danger-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-subtle-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-subtle-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-subtle-active-alpha)) * 100%));--sapphire-semantic-color-background-action-danger-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-subtle-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-subtle-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-subtle-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-danger-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-background-action-danger-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-primary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-primary-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-background-action-primary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-primary-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-border-field-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-border-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-border-active-alpha) * 100%), var(--sapphire-semantic-color-border-field-default) calc((1 - var(--sapphire-semantic-color-state-border-active-alpha)) * 100%));--sapphire-semantic-color-border-field-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-border-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-border-hover-alpha) * 100%), var(--sapphire-semantic-color-border-field-default) calc((1 - var(--sapphire-semantic-color-state-border-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-link-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-link-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-link-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-link-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-select-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-select-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-select-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-select-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-select-tertiary-default: var(--sapphire-semantic-color-foreground-action-select-default);--sapphire-semantic-color-foreground-action-on-danger-tertiary-active: var(--sapphire-semantic-color-foreground-action-danger-active);--sapphire-semantic-color-foreground-action-on-danger-tertiary-hover: var(--sapphire-semantic-color-foreground-action-danger-hover);--sapphire-semantic-color-foreground-action-on-secondary-active: var(--sapphire-semantic-color-foreground-action-on-secondary-default);--sapphire-semantic-color-foreground-action-on-secondary-hover: var(--sapphire-semantic-color-foreground-action-on-secondary-default);--sapphire-semantic-color-background-action-select-active: var(--sapphire-semantic-color-background-action-primary-active);--sapphire-semantic-color-background-action-select-hover: var(--sapphire-semantic-color-background-action-primary-hover);--sapphire-semantic-color-foreground-action-on-select-tertiary-active: var(--sapphire-semantic-color-foreground-action-select-active);--sapphire-semantic-color-foreground-action-on-select-tertiary-hover: var(--sapphire-semantic-color-foreground-action-select-hover)}@media screen and (min-width: 768px){.sapphire-theme-default-dark,: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 screen and (min-width: 960px){.sapphire-theme-default-dark,:host,.sapphire-theme--secondary,:host ::ng-deep .sapphire-theme--secondary,.sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-semantic-size-font-heading-sm: var(--sapphire-global-size-font-125);--sapphire-semantic-size-font-heading-md: var(--sapphire-global-size-font-150);--sapphire-semantic-size-font-heading-lg: var(--sapphire-global-size-font-200);--sapphire-semantic-size-font-heading-xl: var(--sapphire-global-size-font-250);--sapphire-semantic-size-font-heading-2xl: var(--sapphire-global-size-font-300)}}@media (prefers-reduced-motion){.sapphire-theme-default-dark,: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-dark.sapphire-theme--secondary,.sapphire-theme-default-dark .sapphire-theme--secondary,:host .sapphire-theme--secondary,:host ::ng-deep .sapphire-theme--secondary{--sapphire-global-shadow-md: 0px 0px 0px .5px hsl(0 0% 100% / .1) inset, 0px 4px 16px 0px hsl(209 100% 6% / .04);--sapphire-global-color-alpha-red-50: hsl(4 100% 97% / .99);--sapphire-semantic-color-background-surface: var(--sapphire-global-color-gray-950)}.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-semantic-size-breakpoint-xl: 1400px;--sapphire-semantic-size-breakpoint-lg: 1200px;--sapphire-semantic-size-breakpoint-md: 960px;--sapphire-semantic-size-breakpoint-sm: 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-default-bold: 600;--sapphire-semantic-font-weight-default-medium: 500;--sapphire-semantic-font-weight-default-regular: 400;--sapphire-semantic-font-weight-default-light: 300;--sapphire-global-transitions-ease-in: cubic-bezier(0, 0, 0, 1);--sapphire-global-transitions-ease-in-out-quick: cubic-bezier(.5, 0, 0, 1);--sapphire-global-transitions-ease-in-out: cubic-bezier(.7, 0, .2, 1);--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.3;--sapphire-global-size-font-300: 3rem;--sapphire-global-size-font-250: 2.5rem;--sapphire-global-size-font-200: 2rem;--sapphire-global-size-font-175: 1.75rem;--sapphire-global-size-font-163: 1.625rem;--sapphire-global-size-font-150: 1.5rem;--sapphire-global-size-font-125: 1.25rem;--sapphire-global-size-font-112: 1.125rem;--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-110: 2.75rem;--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-40: 16px;--sapphire-global-size-static-30: 12px;--sapphire-global-size-static-20: 8px;--sapphire-global-size-static-15: 6px;--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-md: 0px 0px 0px 1px hsl(212 63% 12% / .1) inset, 0px 4px 24px 0px hsl(212 63% 12% / .04);--sapphire-global-opacity-30: .3;--sapphire-global-font-danske-name: \"Danske\";--sapphire-global-color-secondary-green-4: hsl(137 64% 78%);--sapphire-global-color-secondary-green-3: hsl(152 42% 56%);--sapphire-global-color-secondary-green-2: hsl(152 44% 38%);--sapphire-global-color-secondary-green-1: hsl(158 58% 19%);--sapphire-global-color-secondary-copper-4: hsl(23 69% 75%);--sapphire-global-color-secondary-copper-3: hsl(19 61% 60%);--sapphire-global-color-secondary-copper-2: hsl(18 57% 41%);--sapphire-global-color-secondary-copper-1: hsl(12 65% 23%);--sapphire-global-color-secondary-gold-4: hsl(45 63% 69%);--sapphire-global-color-secondary-gold-3: hsl(39 49% 54%);--sapphire-global-color-secondary-gold-2: hsl(37 57% 36%);--sapphire-global-color-secondary-gold-1: hsl(37 68% 19%);--sapphire-global-color-secondary-blue-4: hsl(211 72% 72%);--sapphire-global-color-secondary-blue-3: hsl(214 59% 62%);--sapphire-global-color-secondary-blue-2: hsl(218 51% 52%);--sapphire-global-color-secondary-blue-1: hsl(212 100% 24%);--sapphire-global-color-alpha-yellow-950: hsl(23 100% 13% / .987);--sapphire-global-color-alpha-yellow-900: hsl(25 100% 19% / .963);--sapphire-global-color-alpha-yellow-800: hsl(27 100% 25% / .959);--sapphire-global-color-alpha-yellow-700: hsl(31 100% 32% / .979);--sapphire-global-color-alpha-yellow-600: hsl(36 100% 39% / .987);--sapphire-global-color-alpha-yellow-500: hsl(41 100% 45% / .975);--sapphire-global-color-alpha-yellow-400: hsl(46 100% 48% / .897);--sapphire-global-color-alpha-yellow-300: hsl(46 100% 49% / .697);--sapphire-global-color-alpha-yellow-200: hsl(51 100% 48% / .47);--sapphire-global-color-alpha-yellow-100: hsl(51 100% 47% / .235);--sapphire-global-color-alpha-yellow-50: hsl(53 100% 50% / .161);--sapphire-global-color-alpha-green-950: hsl(129 100% 4% / .944);--sapphire-global-color-alpha-green-900: hsl(130 100% 6% / .916);--sapphire-global-color-alpha-green-800: hsl(128 100% 8% / .885);--sapphire-global-color-alpha-green-700: hsl(128 100% 11% / .862);--sapphire-global-color-alpha-green-600: hsl(127 100% 17% / .842);--sapphire-global-color-alpha-green-500: hsl(124 100% 21% / .822);--sapphire-global-color-alpha-green-400: hsl(122 100% 28% / .701);--sapphire-global-color-alpha-green-300: hsl(124 100% 28% / .56);--sapphire-global-color-alpha-green-200: hsl(124 100% 30% / .388);--sapphire-global-color-alpha-green-100: hsl(125 100% 11% / .231);--sapphire-global-color-alpha-green-50: hsl(129 100% 25% / .11);--sapphire-global-color-alpha-red-950: hsl(358 100% 6% / .957);--sapphire-global-color-alpha-red-900: hsl(1 100% 10% / .92);--sapphire-global-color-alpha-red-800: hsl(359 100% 17% / .877);--sapphire-global-color-alpha-red-700: hsl(359 100% 24% / .842);--sapphire-global-color-alpha-red-600: hsl(359 100% 32% / .819);--sapphire-global-color-alpha-red-500: hsl(0 100% 39% / .815);--sapphire-global-color-alpha-red-400: hsl(1 100% 47% / .65);--sapphire-global-color-alpha-red-300: hsl(1 100% 48% / .501);--sapphire-global-color-alpha-red-200: hsl(2 100% 50% / .325);--sapphire-global-color-alpha-red-100: hsl(4 100% 50% / .169);--sapphire-global-color-alpha-red-50: hsl(0 98% 45% / .079);--sapphire-global-color-alpha-blue-500: hsl(215 99% 45% / .995);--sapphire-global-color-alpha-blue-400: hsl(216 100% 50% / .74);--sapphire-global-color-alpha-blue-300: hsl(215 100% 50% / .513);--sapphire-global-color-alpha-blue-200: hsl(214 100% 50% / .349);--sapphire-global-color-alpha-blue-100: hsl(214 100% 50% / .2);--sapphire-global-color-alpha-blue-50: hsl(219 100% 50% / .091);--sapphire-global-color-alpha-sand-950: hsl(40 100% 3% / .905);--sapphire-global-color-alpha-sand-900: hsl(41 100% 5% / .858);--sapphire-global-color-alpha-sand-800: hsl(43 100% 7% / .803);--sapphire-global-color-alpha-sand-700: hsl(42 100% 9% / .74);--sapphire-global-color-alpha-sand-600: hsl(42 100% 12% / .678);--sapphire-global-color-alpha-sand-500: hsl(43 100% 12% / .548);--sapphire-global-color-alpha-sand-400: hsl(39 100% 17% / .411);--sapphire-global-color-alpha-sand-300: hsl(48 100% 17% / .294);--sapphire-global-color-alpha-sand-200: hsl(48 100% 13% / .153);--sapphire-global-color-alpha-sand-100: hsl(60 100% 10% / .098);--sapphire-global-color-alpha-sand-50: hsl(60 100% 10% / .043);--sapphire-global-color-alpha-gray-900: hsl(211 63% 13% / .952);--sapphire-global-color-alpha-gray-800: hsl(213 100% 9% / .909);--sapphire-global-color-alpha-gray-700: hsl(213 100% 11% / .819);--sapphire-global-color-alpha-gray-600: hsl(212 100% 13% / .74);--sapphire-global-color-alpha-gray-500: hsl(212 100% 15% / .603);--sapphire-global-color-alpha-gray-400: hsl(211 100% 18% / .455);--sapphire-global-color-alpha-gray-300: hsl(211 100% 20% / .282);--sapphire-global-color-alpha-gray-200: hsl(210 100% 21% / .188);--sapphire-global-color-alpha-gray-100: hsl(208 98% 23% / .114);--sapphire-global-color-alpha-gray-50: hsl(206 100% 25% / .055);--sapphire-global-color-yellow-950: hsl(24 91% 14%);--sapphire-global-color-yellow-900: hsl(25 84% 22%);--sapphire-global-color-yellow-800: hsl(27 86% 28%);--sapphire-global-color-yellow-700: hsl(31 94% 33%);--sapphire-global-color-yellow-600: hsl(36 97% 40%);--sapphire-global-color-yellow-500: hsl(41 95% 46%);--sapphire-global-color-yellow-400: hsl(46 94% 54%);--sapphire-global-color-yellow-300: hsl(46 97% 65%);--sapphire-global-color-yellow-200: hsl(51 92% 75%);--sapphire-global-color-yellow-100: hsl(51 90% 88%);--sapphire-global-color-yellow-50: hsl(53 100% 92%);--sapphire-global-color-green-950: hsl(129 42% 9%);--sapphire-global-color-green-900: hsl(131 40% 14%);--sapphire-global-color-green-800: hsl(128 38% 18%);--sapphire-global-color-green-700: hsl(129 41% 23%);--sapphire-global-color-green-600: hsl(127 47% 30%);--sapphire-global-color-green-500: hsl(125 50% 35%);--sapphire-global-color-green-400: hsl(122 39% 49%);--sapphire-global-color-green-300: hsl(124 39% 60%);--sapphire-global-color-green-200: hsl(124 42% 73%);--sapphire-global-color-green-100: hsl(125 46% 84%);--sapphire-global-color-green-50: hsl(129 33% 92%);--sapphire-global-color-red-950: hsl(358 57% 10%);--sapphire-global-color-red-900: hsl(1 53% 17%);--sapphire-global-color-red-800: hsl(358 55% 27%);--sapphire-global-color-red-700: hsl(359 57% 36%);--sapphire-global-color-red-600: hsl(359 59% 44%);--sapphire-global-color-red-500: hsl(0 65% 51%);--sapphire-global-color-red-400: hsl(1 90% 66%);--sapphire-global-color-red-300: hsl(1 92% 74%);--sapphire-global-color-red-200: hsl(2 100% 84%);--sapphire-global-color-red-100: hsl(4 100% 92%);--sapphire-global-color-red-50: hsl(0 82% 96%);--sapphire-global-color-blue-950: hsl(210 100% 9%);--sapphire-global-color-blue-900: hsl(210 100% 14%);--sapphire-global-color-blue-800: hsl(211 100% 21%);--sapphire-global-color-blue-700: hsl(211 100% 28%);--sapphire-global-color-blue-600: hsl(212 100% 37%);--sapphire-global-color-blue-500: hsl(218 92% 49%);--sapphire-global-color-blue-400: hsl(216 100% 63%);--sapphire-global-color-blue-300: hsl(215 100% 74%);--sapphire-global-color-blue-200: hsl(214 100% 83%);--sapphire-global-color-blue-100: hsl(214 100% 90%);--sapphire-global-color-blue-50: hsl(219 100% 95%);--sapphire-global-color-sand-950: hsl(39 23% 12%);--sapphire-global-color-sand-900: hsl(41 23% 18%);--sapphire-global-color-sand-800: hsl(43 22% 25%);--sapphire-global-color-sand-700: hsl(42 20% 33%);--sapphire-global-color-sand-600: hsl(42 20% 40%);--sapphire-global-color-sand-500: hsl(43 14% 52%);--sapphire-global-color-sand-400: hsl(39 20% 66%);--sapphire-global-color-sand-300: hsl(48 20% 75%);--sapphire-global-color-sand-200: hsl(48 15% 87%);--sapphire-global-color-sand-100: hsl(60 11% 91%);--sapphire-global-color-sand-50: hsl(60 9% 96%);--sapphire-global-color-gray-950: hsl(210 94% 7%);--sapphire-global-color-gray-900: hsl(211 64% 13%);--sapphire-global-color-gray-800: hsl(213 48% 17%);--sapphire-global-color-gray-700: hsl(212 33% 27%);--sapphire-global-color-gray-600: hsl(212 27% 35%);--sapphire-global-color-gray-500: hsl(211 19% 49%);--sapphire-global-color-gray-400: hsl(211 22% 63%);--sapphire-global-color-gray-300: hsl(211 22% 77%);--sapphire-global-color-gray-200: hsl(210 26% 85%);--sapphire-global-color-gray-100: hsl(208 29% 91%);--sapphire-global-color-gray-50: hsl(206 33% 96%);--sapphire-global-color-transparent: hsla(0, 0%, 100%, 0);--sapphire-global-color-black: hsla(0, 0%, 0%, 1);--sapphire-global-color-white: hsla(0, 0%, 100%, 1);--sapphire-semantic-transitions-fade: var(--sapphire-global-transitions-ease-in);--sapphire-semantic-transitions-dynamic: var(--sapphire-global-transitions-ease-in-out-quick);--sapphire-semantic-transitions-standard: var(--sapphire-global-transitions-ease-in-out);--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-6xl: var(--sapphire-global-size-generic-180);--sapphire-semantic-size-spacing-5xl: var(--sapphire-global-size-generic-160);--sapphire-semantic-size-spacing-4xl: var(--sapphire-global-size-generic-120);--sapphire-semantic-size-spacing-3xl: var(--sapphire-global-size-generic-100);--sapphire-semantic-size-spacing-2xl: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-spacing-xl: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-spacing-lg: var(--sapphire-global-size-generic-50);--sapphire-semantic-size-spacing-md: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-spacing-sm: var(--sapphire-global-size-generic-30);--sapphire-semantic-size-spacing-xs: var(--sapphire-global-size-generic-20);--sapphire-semantic-size-spacing-2xs: var(--sapphire-global-size-generic-15);--sapphire-semantic-size-spacing-3xs: var(--sapphire-global-size-generic-10);--sapphire-semantic-size-spacing-4xs: 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-heading-2xl: var(--sapphire-global-size-font-175);--sapphire-semantic-size-font-heading-xl: var(--sapphire-global-size-font-150);--sapphire-semantic-size-font-heading-lg: var(--sapphire-global-size-font-125);--sapphire-semantic-size-font-heading-md: var(--sapphire-global-size-font-125);--sapphire-semantic-size-font-heading-sm: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-heading-xs: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-body-lg: var(--sapphire-global-size-font-112);--sapphire-semantic-size-font-body-md: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-body-sm: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-body-xs: var(--sapphire-global-size-font-75);--sapphire-semantic-size-radius-2xl: var(--sapphire-global-size-static-40);--sapphire-semantic-size-radius-xl: var(--sapphire-global-size-static-30);--sapphire-semantic-size-radius-lg: var(--sapphire-global-size-static-20);--sapphire-semantic-size-radius-md: var(--sapphire-global-size-static-15);--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-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-field: var(--sapphire-global-size-generic-750);--sapphire-semantic-size-height-box-md: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-height-control-4xl: var(--sapphire-global-size-generic-200);--sapphire-semantic-size-height-control-3xl: var(--sapphire-global-size-generic-180);--sapphire-semantic-size-height-control-2xl: var(--sapphire-global-size-generic-160);--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-30);--sapphire-semantic-font-name-default: var(--sapphire-global-font-danske-name);--sapphire-semantic-color-foreground-on-decorative-neutral: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-16: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-15: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-14: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-13: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-12: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-11: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-10: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-9: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-8: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-7: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-6: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-5: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-4: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-3: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-2: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-1: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-signature: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-warning-subtle: var(--sapphire-global-color-alpha-yellow-800);--sapphire-semantic-color-foreground-on-warning: var(--sapphire-global-color-alpha-yellow-900);--sapphire-semantic-color-foreground-on-positive: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-negative: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-accent: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-positive: var(--sapphire-global-color-alpha-green-500);--sapphire-semantic-color-foreground-warning: var(--sapphire-global-color-alpha-yellow-700);--sapphire-semantic-color-foreground-negative: var(--sapphire-global-color-alpha-red-500);--sapphire-semantic-color-foreground-accent: var(--sapphire-global-color-alpha-blue-500);--sapphire-semantic-color-foreground-secondary: color(from var(--sapphire-global-color-blue-900) xyz x y z / .64);--sapphire-semantic-color-foreground-secondary-alpha: .64;--sapphire-semantic-color-foreground-primary: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-background-decorative-neutral: var(--sapphire-global-color-alpha-sand-50);--sapphire-semantic-color-background-decorative-16: var(--sapphire-global-color-secondary-green-4);--sapphire-semantic-color-background-decorative-15: var(--sapphire-global-color-secondary-green-3);--sapphire-semantic-color-background-decorative-14: var(--sapphire-global-color-secondary-green-2);--sapphire-semantic-color-background-decorative-13: var(--sapphire-global-color-secondary-green-1);--sapphire-semantic-color-background-decorative-12: var(--sapphire-global-color-secondary-copper-4);--sapphire-semantic-color-background-decorative-11: var(--sapphire-global-color-secondary-copper-3);--sapphire-semantic-color-background-decorative-10: var(--sapphire-global-color-secondary-copper-2);--sapphire-semantic-color-background-decorative-9: var(--sapphire-global-color-secondary-copper-1);--sapphire-semantic-color-background-decorative-8: var(--sapphire-global-color-secondary-gold-4);--sapphire-semantic-color-background-decorative-7: var(--sapphire-global-color-secondary-gold-3);--sapphire-semantic-color-background-decorative-6: var(--sapphire-global-color-secondary-gold-2);--sapphire-semantic-color-background-decorative-5: var(--sapphire-global-color-secondary-gold-1);--sapphire-semantic-color-background-decorative-4: var(--sapphire-global-color-secondary-blue-4);--sapphire-semantic-color-background-decorative-3: var(--sapphire-global-color-secondary-blue-3);--sapphire-semantic-color-background-decorative-2: var(--sapphire-global-color-secondary-blue-2);--sapphire-semantic-color-background-decorative-1: var(--sapphire-global-color-secondary-blue-1);--sapphire-semantic-color-background-popover: var(--sapphire-global-color-white);--sapphire-semantic-color-background-backdrop: color(from var(--sapphire-global-color-gray-950) xyz x y z / .6);--sapphire-semantic-color-background-backdrop-alpha: .6;--sapphire-semantic-color-background-surface: var(--sapphire-global-color-white);--sapphire-semantic-color-background-field: var(--sapphire-global-color-white);--sapphire-semantic-color-background-warning-subtle: var(--sapphire-global-color-alpha-yellow-50);--sapphire-semantic-color-background-positive-subtle: var(--sapphire-global-color-alpha-green-50);--sapphire-semantic-color-background-negative-subtle: var(--sapphire-global-color-alpha-red-50);--sapphire-semantic-color-background-accent-subtle: var(--sapphire-global-color-alpha-blue-50);--sapphire-semantic-color-background-neutral-subtle: var(--sapphire-global-color-alpha-sand-50);--sapphire-semantic-color-background-negative: var(--sapphire-global-color-red-500);--sapphire-semantic-color-background-warning: var(--sapphire-global-color-yellow-300);--sapphire-semantic-color-background-positive: var(--sapphire-global-color-green-500);--sapphire-semantic-color-background-accent: var(--sapphire-global-color-blue-500);--sapphire-semantic-color-background-signature: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-background-segmented-control-knob: var(--sapphire-global-color-white);--sapphire-semantic-color-background-segmented-control-track: var(--sapphire-global-color-alpha-sand-100);--sapphire-semantic-color-background-switch-default: var(--sapphire-global-color-alpha-sand-200);--sapphire-semantic-color-background-action-highlight: var(--sapphire-global-color-alpha-sand-50);--sapphire-semantic-color-background-action-select-tertiary-default: var(--sapphire-global-color-transparent);--sapphire-semantic-color-background-action-danger-tertiary-default: var(--sapphire-global-color-transparent);--sapphire-semantic-color-background-action-tertiary-default: var(--sapphire-global-color-transparent);--sapphire-semantic-color-background-action-secondary-default: var(--sapphire-global-color-alpha-sand-100);--sapphire-semantic-color-focus-ring: var(--sapphire-global-color-blue-400);--sapphire-semantic-color-border-negative-default: var(--sapphire-global-color-red-500);--sapphire-semantic-color-border-accent: var(--sapphire-global-color-blue-500);--sapphire-semantic-color-border-tertiary: color(from var(--sapphire-global-color-blue-900) xyz x y z / .06);--sapphire-semantic-color-border-tertiary-alpha: .06;--sapphire-semantic-color-border-secondary: color(from var(--sapphire-global-color-blue-900) xyz x y z / .08);--sapphire-semantic-color-border-secondary-alpha: .08;--sapphire-semantic-color-border-primary: color(from var(--sapphire-global-color-blue-900) xyz x y z / .16);--sapphire-semantic-color-border-primary-alpha: .16;--sapphire-semantic-color-state-border-active: color(from var(--sapphire-global-color-blue-900) xyz x y z / .2);--sapphire-semantic-color-state-border-active-alpha: .2;--sapphire-semantic-color-state-border-hover: color(from var(--sapphire-global-color-blue-900) xyz x y z / .12);--sapphire-semantic-color-state-border-hover-alpha: .12;--sapphire-semantic-color-state-negative-subtle-active: color(from var(--sapphire-global-color-red-500) xyz x y z / .1);--sapphire-semantic-color-state-negative-subtle-active-alpha: .1;--sapphire-semantic-color-state-negative-subtle-hover: color(from var(--sapphire-global-color-red-500) xyz x y z / .06);--sapphire-semantic-color-state-negative-subtle-hover-alpha: .06;--sapphire-semantic-color-state-negative-active: color(from var(--sapphire-global-color-red-900) xyz x y z / .2);--sapphire-semantic-color-state-negative-active-alpha: .2;--sapphire-semantic-color-state-negative-hover: color(from var(--sapphire-global-color-red-900) xyz x y z / .12);--sapphire-semantic-color-state-negative-hover-alpha: .12;--sapphire-semantic-color-state-neutral-ghost-active: color(from var(--sapphire-global-color-sand-900) xyz x y z / .1);--sapphire-semantic-color-state-neutral-ghost-active-alpha: .1;--sapphire-semantic-color-state-neutral-ghost-hover: color(from var(--sapphire-global-color-sand-900) xyz x y z / .06);--sapphire-semantic-color-state-neutral-ghost-hover-alpha: .06;--sapphire-semantic-color-state-neutral-active: color(from var(--sapphire-global-color-sand-900) xyz x y z / .1);--sapphire-semantic-color-state-neutral-active-alpha: .1;--sapphire-semantic-color-state-neutral-hover: color(from var(--sapphire-global-color-sand-900) xyz x y z / .06);--sapphire-semantic-color-state-neutral-hover-alpha: .06;--sapphire-semantic-color-state-accent-subtle-active: color(from var(--sapphire-global-color-blue-500) xyz x y z / .12);--sapphire-semantic-color-state-accent-subtle-active-alpha: .12;--sapphire-semantic-color-state-accent-subtle-hover: color(from var(--sapphire-global-color-blue-500) xyz x y z / .06);--sapphire-semantic-color-state-accent-subtle-hover-alpha: .06;--sapphire-semantic-color-state-accent-active: color(from var(--sapphire-global-color-blue-900) xyz x y z / .2);--sapphire-semantic-color-state-accent-active-alpha: .2;--sapphire-semantic-color-state-accent-hover: color(from var(--sapphire-global-color-blue-900) xyz x y z / .12);--sapphire-semantic-color-state-accent-hover-alpha: .12;--sapphire-global-color-alpha-blue-950: var(--sapphire-global-color-blue-950);--sapphire-global-color-alpha-blue-900: var(--sapphire-global-color-blue-900);--sapphire-global-color-alpha-blue-800: var(--sapphire-global-color-blue-800);--sapphire-global-color-alpha-blue-700: var(--sapphire-global-color-blue-700);--sapphire-global-color-alpha-blue-600: var(--sapphire-global-color-blue-600);--sapphire-global-color-alpha-gray-950: var(--sapphire-global-color-gray-950);--sapphire-semantic-size-spacing-container-horizontal-md: var(--sapphire-semantic-size-spacing-xl);--sapphire-semantic-size-spacing-container-horizontal-sm: var(--sapphire-semantic-size-spacing-sm);--sapphire-semantic-size-spacing-control-horizontal-lg: var(--sapphire-semantic-size-spacing-md);--sapphire-semantic-size-spacing-control-horizontal-md: var(--sapphire-semantic-size-spacing-sm);--sapphire-semantic-size-spacing-control-vertical-lg: var(--sapphire-semantic-size-spacing-sm);--sapphire-semantic-size-spacing-control-vertical-md: var(--sapphire-semantic-size-spacing-xs);--sapphire-semantic-size-spacing-control-vertical-sm: var(--sapphire-semantic-size-spacing-3xs);--sapphire-semantic-size-font-control-lg: var(--sapphire-semantic-size-font-body-md);--sapphire-semantic-size-font-control-md: var(--sapphire-semantic-size-font-body-sm);--sapphire-semantic-size-font-control-sm: var(--sapphire-semantic-size-font-body-xs);--sapphire-semantic-size-font-label-md: var(--sapphire-semantic-size-font-body-sm);--sapphire-semantic-size-font-label-sm: var(--sapphire-semantic-size-font-body-xs);--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-color-foreground-on-neutral-subtle: var(--sapphire-semantic-color-foreground-primary);--sapphire-semantic-color-foreground-on-positive-subtle: var(--sapphire-semantic-color-foreground-positive);--sapphire-semantic-color-foreground-on-negative-subtle: var(--sapphire-semantic-color-foreground-negative);--sapphire-semantic-color-foreground-on-accent-subtle: var(--sapphire-semantic-color-foreground-accent);--sapphire-semantic-color-foreground-action-danger-default: var(--sapphire-semantic-color-foreground-negative);--sapphire-semantic-color-foreground-action-link-default: var(--sapphire-semantic-color-foreground-accent);--sapphire-semantic-color-foreground-action-select-default: var(--sapphire-semantic-color-foreground-accent);--sapphire-semantic-color-foreground-action-on-select-default: var(--sapphire-semantic-color-foreground-on-accent);--sapphire-semantic-color-foreground-action-on-danger-default: var(--sapphire-semantic-color-foreground-on-negative);--sapphire-semantic-color-foreground-action-on-tertiary-default: var(--sapphire-semantic-color-foreground-primary);--sapphire-semantic-color-foreground-action-on-primary-default: var(--sapphire-semantic-color-foreground-on-accent);--sapphire-semantic-color-background-spinner-secondary: var(--sapphire-semantic-color-foreground-accent);--sapphire-semantic-color-background-spinner-primary: var(--sapphire-semantic-color-foreground-primary);--sapphire-semantic-color-background-skeleton: var(--sapphire-semantic-color-state-neutral-active);--sapphire-semantic-color-background-switch-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-active-alpha) * 100%), var(--sapphire-semantic-color-background-switch-default) calc((1 - var(--sapphire-semantic-color-state-neutral-active-alpha)) * 100%));--sapphire-semantic-color-background-switch-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-hover-alpha) * 100%), var(--sapphire-semantic-color-background-switch-default) calc((1 - var(--sapphire-semantic-color-state-neutral-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-select-tertiary-active: var(--sapphire-semantic-color-state-accent-subtle-active);--sapphire-semantic-color-background-action-select-tertiary-hover: var(--sapphire-semantic-color-state-accent-subtle-hover);--sapphire-semantic-color-background-action-select-secondary-default: var(--sapphire-semantic-color-background-accent-subtle);--sapphire-semantic-color-background-action-danger-tertiary-active: var(--sapphire-semantic-color-state-negative-subtle-active);--sapphire-semantic-color-background-action-danger-tertiary-hover: var(--sapphire-semantic-color-state-negative-subtle-hover);--sapphire-semantic-color-background-action-danger-secondary-default: var(--sapphire-semantic-color-background-negative-subtle);--sapphire-semantic-color-background-action-danger-default: var(--sapphire-semantic-color-background-negative);--sapphire-semantic-color-background-action-tertiary-active: var(--sapphire-semantic-color-state-neutral-ghost-active);--sapphire-semantic-color-background-action-tertiary-hover: var(--sapphire-semantic-color-state-neutral-ghost-hover);--sapphire-semantic-color-background-action-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-secondary-default) calc((1 - var(--sapphire-semantic-color-state-neutral-active-alpha)) * 100%));--sapphire-semantic-color-background-action-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-secondary-default) calc((1 - var(--sapphire-semantic-color-state-neutral-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-primary-default: var(--sapphire-semantic-color-background-accent);--sapphire-semantic-color-border-field-default: var(--sapphire-semantic-color-border-primary);--sapphire-semantic-color-border-negative-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-border-negative-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-border-negative-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-border-negative-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-danger-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-danger-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-link-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-link-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-link-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-link-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-select-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-select-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-select-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-select-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-select-tertiary-default: var(--sapphire-semantic-color-foreground-action-select-default);--sapphire-semantic-color-foreground-action-on-select-secondary-default: var(--sapphire-semantic-color-foreground-on-accent-subtle);--sapphire-semantic-color-foreground-action-on-select-active: var(--sapphire-semantic-color-foreground-action-on-select-default);--sapphire-semantic-color-foreground-action-on-select-hover: var(--sapphire-semantic-color-foreground-action-on-select-default);--sapphire-semantic-color-foreground-action-on-danger-tertiary-default: var(--sapphire-semantic-color-foreground-action-danger-default);--sapphire-semantic-color-foreground-action-on-danger-secondary-default: var(--sapphire-semantic-color-foreground-on-negative-subtle);--sapphire-semantic-color-foreground-action-on-danger-active: var(--sapphire-semantic-color-foreground-action-on-danger-default);--sapphire-semantic-color-foreground-action-on-danger-hover: var(--sapphire-semantic-color-foreground-action-on-danger-default);--sapphire-semantic-color-foreground-action-on-tertiary-active: var(--sapphire-semantic-color-foreground-action-on-tertiary-default);--sapphire-semantic-color-foreground-action-on-tertiary-hover: var(--sapphire-semantic-color-foreground-action-on-tertiary-default);--sapphire-semantic-color-foreground-action-on-secondary-default: var(--sapphire-semantic-color-foreground-on-neutral-subtle);--sapphire-semantic-color-foreground-action-on-primary-active: var(--sapphire-semantic-color-foreground-action-on-primary-default);--sapphire-semantic-color-foreground-action-on-primary-hover: var(--sapphire-semantic-color-foreground-action-on-primary-default);--sapphire-semantic-color-background-action-select-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-subtle-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-subtle-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-subtle-active-alpha)) * 100%));--sapphire-semantic-color-background-action-select-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-subtle-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-subtle-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-subtle-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-select-default: var(--sapphire-semantic-color-background-action-primary-default);--sapphire-semantic-color-background-action-danger-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-subtle-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-subtle-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-subtle-active-alpha)) * 100%));--sapphire-semantic-color-background-action-danger-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-subtle-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-subtle-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-subtle-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-danger-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-background-action-danger-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-primary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-primary-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-background-action-primary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-primary-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-border-field-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-border-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-border-active-alpha) * 100%), var(--sapphire-semantic-color-border-field-default) calc((1 - var(--sapphire-semantic-color-state-border-active-alpha)) * 100%));--sapphire-semantic-color-border-field-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-border-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-border-hover-alpha) * 100%), var(--sapphire-semantic-color-border-field-default) calc((1 - var(--sapphire-semantic-color-state-border-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-select-tertiary-active: var(--sapphire-semantic-color-foreground-action-select-active);--sapphire-semantic-color-foreground-action-on-select-tertiary-hover: var(--sapphire-semantic-color-foreground-action-select-hover);--sapphire-semantic-color-foreground-action-on-select-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-select-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-danger-tertiary-active: var(--sapphire-semantic-color-foreground-action-danger-active);--sapphire-semantic-color-foreground-action-on-danger-tertiary-hover: var(--sapphire-semantic-color-foreground-action-danger-hover);--sapphire-semantic-color-foreground-action-on-danger-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-danger-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-secondary-active: var(--sapphire-semantic-color-foreground-action-on-secondary-default);--sapphire-semantic-color-foreground-action-on-secondary-hover: var(--sapphire-semantic-color-foreground-action-on-secondary-default);--sapphire-semantic-color-background-action-select-active: var(--sapphire-semantic-color-background-action-primary-active);--sapphire-semantic-color-background-action-select-hover: var(--sapphire-semantic-color-background-action-primary-hover)}::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"] }]
|
|
6428
|
+
args: [{ selector: 'sp-theme-default-dark', standalone: true, template: '<ng-content></ng-content>', hostDirectives: [ThemeBaseDirective], styles: ["@keyframes backdrop-fade-in{0%{background:transparent}to{background:var(--sapphire-semantic-color-background-backdrop)}}@keyframes backdrop-fade-out{0%{background:var(--sapphire-semantic-color-background-backdrop)}to{background: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:var(--sapphire-semantic-transitions-fade);animation-fill-mode:forwards}.sapphire-backdrop--exiting,:host.sapphire-backdrop--exiting{animation-name:backdrop-fade-out}.sapphire-theme-default-dark,: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-lg: 1200px;--sapphire-semantic-size-breakpoint-md: 960px;--sapphire-semantic-size-breakpoint-sm: 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-default-bold: 600;--sapphire-semantic-font-weight-default-medium: 500;--sapphire-semantic-font-weight-default-regular: 400;--sapphire-semantic-font-weight-default-light: 300;--sapphire-global-transitions-ease-in: cubic-bezier(0, 0, 0, 1);--sapphire-global-transitions-ease-in-out-quick: cubic-bezier(.5, 0, 0, 1);--sapphire-global-transitions-ease-in-out: cubic-bezier(.7, 0, .2, 1);--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.3;--sapphire-global-size-font-300: 3rem;--sapphire-global-size-font-250: 2.5rem;--sapphire-global-size-font-200: 2rem;--sapphire-global-size-font-175: 1.75rem;--sapphire-global-size-font-163: 1.625rem;--sapphire-global-size-font-150: 1.5rem;--sapphire-global-size-font-125: 1.25rem;--sapphire-global-size-font-112: 1.125rem;--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-110: 2.75rem;--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-40: 16px;--sapphire-global-size-static-30: 12px;--sapphire-global-size-static-20: 8px;--sapphire-global-size-static-15: 6px;--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-md: 0px 0px 0px .5px hsl(0 0% 100% / .1) inset, 0px 4px 16px 0px hsl(212 63% 12% / .04);--sapphire-global-opacity-30: .3;--sapphire-global-font-danske-name: \"Danske\";--sapphire-global-color-secondary-green-4: hsl(137 64% 78%);--sapphire-global-color-secondary-green-3: hsl(152 42% 56%);--sapphire-global-color-secondary-green-2: hsl(152 44% 38%);--sapphire-global-color-secondary-green-1: hsl(158 58% 19%);--sapphire-global-color-secondary-copper-4: hsl(23 69% 75%);--sapphire-global-color-secondary-copper-3: hsl(19 61% 60%);--sapphire-global-color-secondary-copper-2: hsl(18 57% 41%);--sapphire-global-color-secondary-copper-1: hsl(12 65% 23%);--sapphire-global-color-secondary-gold-4: hsl(45 63% 69%);--sapphire-global-color-secondary-gold-3: hsl(39 49% 54%);--sapphire-global-color-secondary-gold-2: hsl(37 57% 36%);--sapphire-global-color-secondary-gold-1: hsl(37 68% 19%);--sapphire-global-color-secondary-blue-4: hsl(211 72% 72%);--sapphire-global-color-secondary-blue-3: hsl(214 59% 62%);--sapphire-global-color-secondary-blue-2: hsl(218 51% 52%);--sapphire-global-color-secondary-blue-1: hsl(212 100% 24%);--sapphire-global-color-alpha-yellow-950: hsl(24 100% 14% / .902);--sapphire-global-color-alpha-yellow-900: hsl(25 100% 27% / .733);--sapphire-global-color-alpha-yellow-800: hsl(27 100% 37% / .705);--sapphire-global-color-alpha-yellow-700: hsl(31 100% 38% / .846);--sapphire-global-color-alpha-yellow-600: hsl(36 100% 44% / .902);--sapphire-global-color-alpha-yellow-500: hsl(41 100% 51% / .905);--sapphire-global-color-alpha-yellow-400: hsl(46 100% 55% / .971);--sapphire-global-color-alpha-yellow-300: hsl(46 100% 65% / .987);--sapphire-global-color-alpha-yellow-200: hsl(50 100% 77% / .979);--sapphire-global-color-alpha-yellow-100: hsl(51 100% 89% / .987);--sapphire-global-color-alpha-yellow-50: hsl(53 100% 92%);--sapphire-global-color-alpha-green-950: hsl(87 100% 10% / .508);--sapphire-global-color-alpha-green-900: hsl(86 100% 27% / .254);--sapphire-global-color-alpha-green-800: hsl(90 100% 56% / .198);--sapphire-global-color-alpha-green-700: hsl(101 100% 62% / .278);--sapphire-global-color-alpha-green-600: hsl(111 100% 64% / .396);--sapphire-global-color-alpha-green-500: hsl(113 100% 64% / .489);--sapphire-global-color-alpha-green-400: hsl(116 100% 70% / .662);--sapphire-global-color-alpha-green-300: hsl(117 100% 79% / .733);--sapphire-global-color-alpha-green-200: hsl(118 100% 86% / .83);--sapphire-global-color-alpha-green-100: hsl(120 100% 92% / .906);--sapphire-global-color-alpha-green-50: hsl(120 100% 97% / .939);--sapphire-global-color-alpha-red-950: hsl(7 100% 12% / .648);--sapphire-global-color-alpha-red-900: hsl(10 100% 30% / .423);--sapphire-global-color-alpha-red-800: hsl(5 100% 56% / .413);--sapphire-global-color-alpha-red-700: hsl(3 100% 59% / .564);--sapphire-global-color-alpha-red-600: hsl(1 100% 61% / .701);--sapphire-global-color-alpha-red-500: hsl(1 100% 60% / .826);--sapphire-global-color-alpha-red-400: hsl(1 100% 68% / .963);--sapphire-global-color-alpha-red-300: hsl(1 100% 75% / .979);--sapphire-global-color-alpha-red-200: hsl(2 100% 84%);--sapphire-global-color-alpha-red-100: hsl(4 100% 92%);--sapphire-global-color-alpha-red-50: hsl(0 100% 96% / .991);--sapphire-global-color-alpha-blue-950: hsl(210 100% 11% / .667);--sapphire-global-color-alpha-blue-900: hsl(210 100% 17% / .667);--sapphire-global-color-alpha-blue-800: hsl(211 100% 28% / .667);--sapphire-global-color-alpha-blue-700: hsl(211 100% 39% / .667);--sapphire-global-color-alpha-blue-600: hsl(212 100% 50% / .699);--sapphire-global-color-alpha-blue-500: hsl(215 100% 50% / .894);--sapphire-global-color-alpha-sand-950: hsl(33 100% 24% / .31);--sapphire-global-color-alpha-sand-900: hsl(35 100% 58% / .224);--sapphire-global-color-alpha-sand-800: hsl(38 100% 66% / .307);--sapphire-global-color-alpha-sand-700: hsl(38 100% 72% / .39);--sapphire-global-color-alpha-sand-600: hsl(38 100% 76% / .476);--sapphire-global-color-alpha-sand-500: hsl(39 100% 84% / .586);--sapphire-global-color-alpha-sand-400: hsl(42 100% 88% / .723);--sapphire-global-color-alpha-sand-300: hsl(45 100% 92% / .802);--sapphire-global-color-alpha-sand-200: hsl(44 100% 97% / .885);--sapphire-global-color-alpha-sand-100: hsl(53 100% 98% / .92);--sapphire-global-color-alpha-sand-50: hsl(40 100% 99% / .96);--sapphire-global-color-alpha-gray-900: hsl(215 97% 75% / .087);--sapphire-global-color-alpha-gray-800: hsl(221 100% 81% / .144);--sapphire-global-color-alpha-gray-700: hsl(214 100% 85% / .254);--sapphire-global-color-alpha-gray-600: hsl(213 100% 85% / .363);--sapphire-global-color-alpha-gray-500: hsl(212 100% 89% / .508);--sapphire-global-color-alpha-gray-400: hsl(211 100% 91% / .663);--sapphire-global-color-alpha-gray-300: hsl(211 100% 95% / .803);--sapphire-global-color-alpha-gray-200: hsl(212 100% 97% / .871);--sapphire-global-color-alpha-gray-100: hsl(207 100% 98% / .926);--sapphire-global-color-alpha-gray-50: hsl(200 100% 99% / .966);--sapphire-global-color-yellow-950: hsl(24 91% 14%);--sapphire-global-color-yellow-900: hsl(25 84% 22%);--sapphire-global-color-yellow-800: hsl(27 86% 28%);--sapphire-global-color-yellow-700: hsl(31 94% 33%);--sapphire-global-color-yellow-600: hsl(36 97% 40%);--sapphire-global-color-yellow-500: hsl(41 95% 46%);--sapphire-global-color-yellow-400: hsl(46 94% 54%);--sapphire-global-color-yellow-300: hsl(46 97% 65%);--sapphire-global-color-yellow-200: hsl(51 92% 75%);--sapphire-global-color-yellow-100: hsl(51 90% 88%);--sapphire-global-color-yellow-50: hsl(53 100% 92%);--sapphire-global-color-green-950: hsl(129 42% 9%);--sapphire-global-color-green-900: hsl(131 40% 14%);--sapphire-global-color-green-800: hsl(128 38% 18%);--sapphire-global-color-green-700: hsl(129 41% 23%);--sapphire-global-color-green-600: hsl(127 47% 30%);--sapphire-global-color-green-500: hsl(125 50% 35%);--sapphire-global-color-green-400: hsl(122 39% 49%);--sapphire-global-color-green-300: hsl(124 39% 60%);--sapphire-global-color-green-200: hsl(124 42% 73%);--sapphire-global-color-green-100: hsl(125 46% 84%);--sapphire-global-color-green-50: hsl(129 33% 92%);--sapphire-global-color-red-950: hsl(358 57% 10%);--sapphire-global-color-red-900: hsl(1 53% 17%);--sapphire-global-color-red-800: hsl(358 55% 27%);--sapphire-global-color-red-700: hsl(359 57% 36%);--sapphire-global-color-red-600: hsl(359 59% 44%);--sapphire-global-color-red-500: hsl(0 65% 51%);--sapphire-global-color-red-400: hsl(1 90% 66%);--sapphire-global-color-red-300: hsl(1 92% 74%);--sapphire-global-color-red-200: hsl(2 100% 84%);--sapphire-global-color-red-100: hsl(4 100% 92%);--sapphire-global-color-red-50: hsl(0 82% 96%);--sapphire-global-color-blue-950: hsl(210 100% 9%);--sapphire-global-color-blue-900: hsl(210 100% 14%);--sapphire-global-color-blue-800: hsl(211 100% 21%);--sapphire-global-color-blue-700: hsl(211 100% 28%);--sapphire-global-color-blue-600: hsl(212 100% 37%);--sapphire-global-color-blue-500: hsl(218 92% 49%);--sapphire-global-color-blue-400: hsl(216 100% 63%);--sapphire-global-color-blue-300: hsl(215 100% 74%);--sapphire-global-color-blue-200: hsl(214 100% 83%);--sapphire-global-color-blue-100: hsl(214 100% 90%);--sapphire-global-color-blue-50: hsl(219 100% 95%);--sapphire-global-color-sand-950: hsl(39 23% 12%);--sapphire-global-color-sand-900: hsl(41 23% 18%);--sapphire-global-color-sand-800: hsl(43 22% 25%);--sapphire-global-color-sand-700: hsl(42 20% 33%);--sapphire-global-color-sand-600: hsl(42 20% 40%);--sapphire-global-color-sand-500: hsl(43 14% 52%);--sapphire-global-color-sand-400: hsl(39 20% 66%);--sapphire-global-color-sand-300: hsl(48 20% 75%);--sapphire-global-color-sand-200: hsl(48 15% 87%);--sapphire-global-color-sand-100: hsl(60 11% 91%);--sapphire-global-color-sand-50: hsl(60 9% 96%);--sapphire-global-color-gray-950: hsl(210 94% 7%);--sapphire-global-color-gray-900: hsl(211 64% 13%);--sapphire-global-color-gray-800: hsl(213 48% 17%);--sapphire-global-color-gray-700: hsl(212 33% 27%);--sapphire-global-color-gray-600: hsl(212 27% 35%);--sapphire-global-color-gray-500: hsl(211 19% 49%);--sapphire-global-color-gray-400: hsl(211 22% 63%);--sapphire-global-color-gray-300: hsl(211 22% 77%);--sapphire-global-color-gray-200: hsl(210 26% 85%);--sapphire-global-color-gray-100: hsl(208 29% 91%);--sapphire-global-color-gray-50: hsl(206 33% 96%);--sapphire-global-color-transparent: hsla(0, 0%, 100%, 0);--sapphire-global-color-black: hsla(0, 0%, 0%, 1);--sapphire-global-color-white: hsla(0, 0%, 100%, 1);--sapphire-semantic-transitions-fade: var(--sapphire-global-transitions-ease-in);--sapphire-semantic-transitions-dynamic: var(--sapphire-global-transitions-ease-in-out-quick);--sapphire-semantic-transitions-standard: var(--sapphire-global-transitions-ease-in-out);--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-6xl: var(--sapphire-global-size-generic-180);--sapphire-semantic-size-spacing-5xl: var(--sapphire-global-size-generic-160);--sapphire-semantic-size-spacing-4xl: var(--sapphire-global-size-generic-120);--sapphire-semantic-size-spacing-3xl: var(--sapphire-global-size-generic-100);--sapphire-semantic-size-spacing-2xl: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-spacing-xl: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-spacing-lg: var(--sapphire-global-size-generic-50);--sapphire-semantic-size-spacing-md: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-spacing-sm: var(--sapphire-global-size-generic-30);--sapphire-semantic-size-spacing-xs: var(--sapphire-global-size-generic-20);--sapphire-semantic-size-spacing-2xs: var(--sapphire-global-size-generic-15);--sapphire-semantic-size-spacing-3xs: var(--sapphire-global-size-generic-10);--sapphire-semantic-size-spacing-4xs: 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-heading-2xl: var(--sapphire-global-size-font-175);--sapphire-semantic-size-font-heading-xl: var(--sapphire-global-size-font-150);--sapphire-semantic-size-font-heading-lg: var(--sapphire-global-size-font-125);--sapphire-semantic-size-font-heading-md: var(--sapphire-global-size-font-125);--sapphire-semantic-size-font-heading-sm: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-heading-xs: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-body-lg: var(--sapphire-global-size-font-112);--sapphire-semantic-size-font-body-md: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-body-sm: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-body-xs: var(--sapphire-global-size-font-75);--sapphire-semantic-size-radius-2xl: var(--sapphire-global-size-static-40);--sapphire-semantic-size-radius-xl: var(--sapphire-global-size-static-30);--sapphire-semantic-size-radius-lg: var(--sapphire-global-size-static-20);--sapphire-semantic-size-radius-md: var(--sapphire-global-size-static-15);--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-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-field: var(--sapphire-global-size-generic-750);--sapphire-semantic-size-height-box-md: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-height-control-4xl: var(--sapphire-global-size-generic-200);--sapphire-semantic-size-height-control-3xl: var(--sapphire-global-size-generic-180);--sapphire-semantic-size-height-control-2xl: var(--sapphire-global-size-generic-160);--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-30);--sapphire-semantic-font-name-default: var(--sapphire-global-font-danske-name);--sapphire-semantic-color-foreground-on-decorative-neutral: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-16: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-15: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-14: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-13: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-12: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-11: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-10: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-9: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-8: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-7: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-6: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-5: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-4: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-3: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-2: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-1: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-signature: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-warning-subtle: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-warning: var(--sapphire-global-color-yellow-900);--sapphire-semantic-color-foreground-on-positive-subtle: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-positive: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-negative-subtle: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-negative: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-accent-subtle: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-accent: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-positive: var(--sapphire-global-color-alpha-green-400);--sapphire-semantic-color-foreground-warning: var(--sapphire-global-color-alpha-yellow-400);--sapphire-semantic-color-foreground-negative: var(--sapphire-global-color-alpha-red-400);--sapphire-semantic-color-foreground-secondary: color(from var(--sapphire-global-color-gray-50) xyz x y z / .55);--sapphire-semantic-color-foreground-secondary-alpha: .55;--sapphire-semantic-color-foreground-primary: var(--sapphire-global-color-gray-50);--sapphire-semantic-color-background-decorative-neutral: var(--sapphire-global-color-alpha-gray-800);--sapphire-semantic-color-background-decorative-16: var(--sapphire-global-color-secondary-green-4);--sapphire-semantic-color-background-decorative-15: var(--sapphire-global-color-secondary-green-3);--sapphire-semantic-color-background-decorative-14: var(--sapphire-global-color-secondary-green-2);--sapphire-semantic-color-background-decorative-13: var(--sapphire-global-color-secondary-green-1);--sapphire-semantic-color-background-decorative-12: var(--sapphire-global-color-secondary-copper-4);--sapphire-semantic-color-background-decorative-11: var(--sapphire-global-color-secondary-copper-3);--sapphire-semantic-color-background-decorative-10: var(--sapphire-global-color-secondary-copper-2);--sapphire-semantic-color-background-decorative-9: var(--sapphire-global-color-secondary-copper-1);--sapphire-semantic-color-background-decorative-8: var(--sapphire-global-color-secondary-gold-4);--sapphire-semantic-color-background-decorative-7: var(--sapphire-global-color-secondary-gold-3);--sapphire-semantic-color-background-decorative-6: var(--sapphire-global-color-secondary-gold-2);--sapphire-semantic-color-background-decorative-5: var(--sapphire-global-color-secondary-gold-1);--sapphire-semantic-color-background-decorative-4: var(--sapphire-global-color-secondary-blue-4);--sapphire-semantic-color-background-decorative-3: var(--sapphire-global-color-secondary-blue-3);--sapphire-semantic-color-background-decorative-2: var(--sapphire-global-color-secondary-blue-2);--sapphire-semantic-color-background-decorative-1: var(--sapphire-global-color-secondary-blue-1);--sapphire-semantic-color-background-popover: var(--sapphire-global-color-gray-800);--sapphire-semantic-color-background-backdrop: color(from var(--sapphire-global-color-gray-950) xyz x y z / .6);--sapphire-semantic-color-background-backdrop-alpha: .6;--sapphire-semantic-color-background-surface: var(--sapphire-global-color-gray-900);--sapphire-semantic-color-background-field: var(--sapphire-global-color-gray-800);--sapphire-semantic-color-background-warning-subtle: var(--sapphire-global-color-alpha-yellow-900);--sapphire-semantic-color-background-positive-subtle: var(--sapphire-global-color-alpha-green-800);--sapphire-semantic-color-background-negative-subtle: var(--sapphire-global-color-alpha-red-800);--sapphire-semantic-color-background-accent-subtle: var(--sapphire-global-color-alpha-blue-800);--sapphire-semantic-color-background-neutral-subtle: var(--sapphire-global-color-alpha-gray-900);--sapphire-semantic-color-background-negative: var(--sapphire-global-color-red-500);--sapphire-semantic-color-background-warning: var(--sapphire-global-color-yellow-300);--sapphire-semantic-color-background-positive: var(--sapphire-global-color-green-500);--sapphire-semantic-color-background-accent: var(--sapphire-global-color-blue-500);--sapphire-semantic-color-background-signature: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-background-progress-track: var(--sapphire-global-color-alpha-gray-700);--sapphire-semantic-color-background-segmented-control-knob: var(--sapphire-global-color-alpha-gray-600);--sapphire-semantic-color-background-segmented-control-track: var(--sapphire-global-color-alpha-gray-800);--sapphire-semantic-color-background-switch-default: var(--sapphire-global-color-alpha-gray-600);--sapphire-semantic-color-background-action-highlight: var(--sapphire-global-color-alpha-gray-900);--sapphire-semantic-color-background-action-select-tertiary-default: var(--sapphire-global-color-transparent);--sapphire-semantic-color-background-action-danger-tertiary-default: var(--sapphire-global-color-transparent);--sapphire-semantic-color-background-action-tertiary-default: var(--sapphire-global-color-transparent);--sapphire-semantic-color-background-action-secondary-default: var(--sapphire-global-color-alpha-gray-800);--sapphire-semantic-color-focus-ring: var(--sapphire-global-color-blue-400);--sapphire-semantic-color-border-field-default: color(from var(--sapphire-global-color-gray-50) xyz x y z / .32);--sapphire-semantic-color-border-field-default-alpha: .32;--sapphire-semantic-color-border-negative-default: var(--sapphire-global-color-red-500);--sapphire-semantic-color-border-accent: var(--sapphire-global-color-blue-500);--sapphire-semantic-color-border-tertiary: color(from var(--sapphire-global-color-gray-50) xyz x y z / .06);--sapphire-semantic-color-border-tertiary-alpha: .06;--sapphire-semantic-color-border-secondary: color(from var(--sapphire-global-color-gray-50) xyz x y z / .08);--sapphire-semantic-color-border-secondary-alpha: .08;--sapphire-semantic-color-border-primary: color(from var(--sapphire-global-color-gray-50) xyz x y z / .16);--sapphire-semantic-color-border-primary-alpha: .16;--sapphire-semantic-color-state-border-active: color(from var(--sapphire-global-color-gray-100) xyz x y z / .2);--sapphire-semantic-color-state-border-active-alpha: .2;--sapphire-semantic-color-state-border-hover: color(from var(--sapphire-global-color-gray-100) xyz x y z / .12);--sapphire-semantic-color-state-border-hover-alpha: .12;--sapphire-semantic-color-state-negative-subtle-active: color(from var(--sapphire-global-color-red-100) xyz x y z / .12);--sapphire-semantic-color-state-negative-subtle-active-alpha: .12;--sapphire-semantic-color-state-negative-subtle-hover: color(from var(--sapphire-global-color-red-100) xyz x y z / .08);--sapphire-semantic-color-state-negative-subtle-hover-alpha: .08;--sapphire-semantic-color-state-negative-active: color(from var(--sapphire-global-color-red-100) xyz x y z / .2);--sapphire-semantic-color-state-negative-active-alpha: .2;--sapphire-semantic-color-state-negative-hover: color(from var(--sapphire-global-color-red-100) xyz x y z / .12);--sapphire-semantic-color-state-negative-hover-alpha: .12;--sapphire-semantic-color-state-neutral-ghost-active: color(from var(--sapphire-global-color-gray-200) xyz x y z / .1);--sapphire-semantic-color-state-neutral-ghost-active-alpha: .1;--sapphire-semantic-color-state-neutral-ghost-hover: color(from var(--sapphire-global-color-gray-200) xyz x y z / .06);--sapphire-semantic-color-state-neutral-ghost-hover-alpha: .06;--sapphire-semantic-color-state-neutral-active: color(from var(--sapphire-global-color-gray-200) xyz x y z / .1);--sapphire-semantic-color-state-neutral-active-alpha: .1;--sapphire-semantic-color-state-neutral-hover: color(from var(--sapphire-global-color-gray-200) xyz x y z / .06);--sapphire-semantic-color-state-neutral-hover-alpha: .06;--sapphire-semantic-color-state-accent-subtle-active: color(from var(--sapphire-global-color-blue-500) xyz x y z / .12);--sapphire-semantic-color-state-accent-subtle-active-alpha: .12;--sapphire-semantic-color-state-accent-subtle-hover: color(from var(--sapphire-global-color-blue-500) xyz x y z / .06);--sapphire-semantic-color-state-accent-subtle-hover-alpha: .06;--sapphire-semantic-color-state-accent-active: color(from var(--sapphire-global-color-blue-100) xyz x y z / .2);--sapphire-semantic-color-state-accent-active-alpha: .2;--sapphire-semantic-color-state-accent-hover: color(from var(--sapphire-global-color-blue-100) xyz x y z / .12);--sapphire-semantic-color-state-accent-hover-alpha: .12;--sapphire-global-color-alpha-blue-400: var(--sapphire-global-color-blue-400);--sapphire-global-color-alpha-blue-300: var(--sapphire-global-color-blue-300);--sapphire-global-color-alpha-blue-200: var(--sapphire-global-color-blue-200);--sapphire-global-color-alpha-blue-100: var(--sapphire-global-color-blue-100);--sapphire-global-color-alpha-blue-50: var(--sapphire-global-color-blue-50);--sapphire-global-color-alpha-gray-950: var(--sapphire-global-color-gray-950);--sapphire-semantic-size-spacing-container-horizontal-md: var(--sapphire-semantic-size-spacing-2xl);--sapphire-semantic-size-spacing-container-horizontal-sm: var(--sapphire-semantic-size-spacing-sm);--sapphire-semantic-size-spacing-control-horizontal-lg: var(--sapphire-semantic-size-spacing-md);--sapphire-semantic-size-spacing-control-horizontal-md: var(--sapphire-semantic-size-spacing-sm);--sapphire-semantic-size-spacing-control-vertical-lg: var(--sapphire-semantic-size-spacing-sm);--sapphire-semantic-size-spacing-control-vertical-md: var(--sapphire-semantic-size-spacing-xs);--sapphire-semantic-size-spacing-control-vertical-sm: var(--sapphire-semantic-size-spacing-3xs);--sapphire-semantic-size-font-control-lg: var(--sapphire-semantic-size-font-body-md);--sapphire-semantic-size-font-control-md: var(--sapphire-semantic-size-font-body-sm);--sapphire-semantic-size-font-control-sm: var(--sapphire-semantic-size-font-body-xs);--sapphire-semantic-size-font-label-md: var(--sapphire-semantic-size-font-body-sm);--sapphire-semantic-size-font-label-sm: var(--sapphire-semantic-size-font-body-xs);--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-color-foreground-on-neutral-subtle: var(--sapphire-semantic-color-foreground-primary);--sapphire-semantic-color-foreground-accent: var(--sapphire-global-color-alpha-blue-400);--sapphire-semantic-color-foreground-action-danger-default: var(--sapphire-semantic-color-foreground-negative);--sapphire-semantic-color-foreground-action-on-select-secondary-default: var(--sapphire-semantic-color-foreground-on-accent-subtle);--sapphire-semantic-color-foreground-action-on-select-default: var(--sapphire-semantic-color-foreground-on-accent);--sapphire-semantic-color-foreground-action-on-danger-secondary-default: var(--sapphire-semantic-color-foreground-on-negative-subtle);--sapphire-semantic-color-foreground-action-on-danger-default: var(--sapphire-semantic-color-foreground-on-negative);--sapphire-semantic-color-foreground-action-on-tertiary-default: var(--sapphire-semantic-color-foreground-primary);--sapphire-semantic-color-foreground-action-on-primary-default: var(--sapphire-semantic-color-foreground-on-accent);--sapphire-semantic-color-background-spinner-primary: var(--sapphire-semantic-color-foreground-primary);--sapphire-semantic-color-background-skeleton: var(--sapphire-semantic-color-state-neutral-active);--sapphire-semantic-color-background-progress-fill: var(--sapphire-semantic-color-background-accent);--sapphire-semantic-color-background-switch-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-active-alpha) * 100%), var(--sapphire-semantic-color-background-switch-default) calc((1 - var(--sapphire-semantic-color-state-neutral-active-alpha)) * 100%));--sapphire-semantic-color-background-switch-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-hover-alpha) * 100%), var(--sapphire-semantic-color-background-switch-default) calc((1 - var(--sapphire-semantic-color-state-neutral-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-select-tertiary-active: var(--sapphire-semantic-color-state-accent-subtle-active);--sapphire-semantic-color-background-action-select-tertiary-hover: var(--sapphire-semantic-color-state-accent-subtle-hover);--sapphire-semantic-color-background-action-select-secondary-default: var(--sapphire-semantic-color-background-accent-subtle);--sapphire-semantic-color-background-action-danger-tertiary-active: var(--sapphire-semantic-color-state-negative-subtle-active);--sapphire-semantic-color-background-action-danger-tertiary-hover: var(--sapphire-semantic-color-state-negative-subtle-hover);--sapphire-semantic-color-background-action-danger-secondary-default: var(--sapphire-semantic-color-background-negative-subtle);--sapphire-semantic-color-background-action-danger-default: var(--sapphire-semantic-color-background-negative);--sapphire-semantic-color-background-action-tertiary-active: var(--sapphire-semantic-color-state-neutral-ghost-active);--sapphire-semantic-color-background-action-tertiary-hover: var(--sapphire-semantic-color-state-neutral-ghost-hover);--sapphire-semantic-color-background-action-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-secondary-default) calc((1 - var(--sapphire-semantic-color-state-neutral-active-alpha)) * 100%));--sapphire-semantic-color-background-action-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-secondary-default) calc((1 - var(--sapphire-semantic-color-state-neutral-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-primary-default: var(--sapphire-semantic-color-background-accent);--sapphire-semantic-color-border-field-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-border-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-border-active-alpha) * 100%), var(--sapphire-semantic-color-border-field-default) calc((1 - var(--sapphire-semantic-color-state-border-active-alpha)) * 100%));--sapphire-semantic-color-border-field-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-border-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-border-hover-alpha) * 100%), var(--sapphire-semantic-color-border-field-default) calc((1 - var(--sapphire-semantic-color-state-border-hover-alpha)) * 100%));--sapphire-semantic-color-border-negative-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-border-negative-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-border-negative-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-border-negative-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-danger-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-danger-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-link-default: var(--sapphire-semantic-color-foreground-accent);--sapphire-semantic-color-foreground-action-select-default: var(--sapphire-semantic-color-foreground-accent);--sapphire-semantic-color-foreground-action-on-select-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-select-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-select-active: var(--sapphire-semantic-color-foreground-action-on-select-default);--sapphire-semantic-color-foreground-action-on-select-hover: var(--sapphire-semantic-color-foreground-action-on-select-default);--sapphire-semantic-color-foreground-action-on-danger-tertiary-default: var(--sapphire-semantic-color-foreground-action-danger-default);--sapphire-semantic-color-foreground-action-on-danger-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-danger-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-danger-active: var(--sapphire-semantic-color-foreground-action-on-danger-default);--sapphire-semantic-color-foreground-action-on-danger-hover: var(--sapphire-semantic-color-foreground-action-on-danger-default);--sapphire-semantic-color-foreground-action-on-tertiary-active: var(--sapphire-semantic-color-foreground-action-on-tertiary-default);--sapphire-semantic-color-foreground-action-on-tertiary-hover: var(--sapphire-semantic-color-foreground-action-on-tertiary-default);--sapphire-semantic-color-foreground-action-on-secondary-default: var(--sapphire-semantic-color-foreground-on-neutral-subtle);--sapphire-semantic-color-foreground-action-on-primary-active: var(--sapphire-semantic-color-foreground-action-on-primary-default);--sapphire-semantic-color-foreground-action-on-primary-hover: var(--sapphire-semantic-color-foreground-action-on-primary-default);--sapphire-semantic-color-background-spinner-secondary: var(--sapphire-semantic-color-foreground-accent);--sapphire-semantic-color-background-action-select-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-subtle-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-subtle-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-subtle-active-alpha)) * 100%));--sapphire-semantic-color-background-action-select-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-subtle-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-subtle-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-subtle-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-select-default: var(--sapphire-semantic-color-background-action-primary-default);--sapphire-semantic-color-background-action-danger-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-subtle-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-subtle-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-subtle-active-alpha)) * 100%));--sapphire-semantic-color-background-action-danger-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-subtle-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-subtle-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-subtle-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-danger-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-background-action-danger-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-primary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-primary-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-background-action-primary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-primary-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-link-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-link-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-link-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-link-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-select-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-select-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-select-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-select-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-select-tertiary-default: var(--sapphire-semantic-color-foreground-action-select-default);--sapphire-semantic-color-foreground-action-on-danger-tertiary-active: var(--sapphire-semantic-color-foreground-action-danger-active);--sapphire-semantic-color-foreground-action-on-danger-tertiary-hover: var(--sapphire-semantic-color-foreground-action-danger-hover);--sapphire-semantic-color-foreground-action-on-secondary-active: var(--sapphire-semantic-color-foreground-action-on-secondary-default);--sapphire-semantic-color-foreground-action-on-secondary-hover: var(--sapphire-semantic-color-foreground-action-on-secondary-default);--sapphire-semantic-color-background-action-select-active: var(--sapphire-semantic-color-background-action-primary-active);--sapphire-semantic-color-background-action-select-hover: var(--sapphire-semantic-color-background-action-primary-hover);--sapphire-semantic-color-foreground-action-on-select-tertiary-active: var(--sapphire-semantic-color-foreground-action-select-active);--sapphire-semantic-color-foreground-action-on-select-tertiary-hover: var(--sapphire-semantic-color-foreground-action-select-hover)}@media screen and (min-width: 768px){.sapphire-theme-default-dark,: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 screen and (min-width: 960px){.sapphire-theme-default-dark,:host,.sapphire-theme--secondary,:host ::ng-deep .sapphire-theme--secondary,.sapphire-theme--contrast,:host ::ng-deep .sapphire-theme--contrast{--sapphire-semantic-size-font-heading-sm: var(--sapphire-global-size-font-125);--sapphire-semantic-size-font-heading-md: var(--sapphire-global-size-font-150);--sapphire-semantic-size-font-heading-lg: var(--sapphire-global-size-font-200);--sapphire-semantic-size-font-heading-xl: var(--sapphire-global-size-font-250);--sapphire-semantic-size-font-heading-2xl: var(--sapphire-global-size-font-300)}}@media (prefers-reduced-motion){.sapphire-theme-default-dark,: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-dark.sapphire-theme--secondary,.sapphire-theme-default-dark .sapphire-theme--secondary,:host .sapphire-theme--secondary,:host ::ng-deep .sapphire-theme--secondary{--sapphire-global-shadow-md: 0px 0px 0px .5px hsl(0 0% 100% / .1) inset, 0px 4px 16px 0px hsl(209 100% 6% / .04);--sapphire-global-color-alpha-red-50: hsl(4 100% 97% / .99);--sapphire-semantic-color-background-surface: var(--sapphire-global-color-gray-950);--sapphire-semantic-color-border-field-default: color(from var(--sapphire-global-color-gray-50) xyz x y z / .28);--sapphire-semantic-color-border-field-default-alpha: .28}.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-semantic-size-breakpoint-xl: 1400px;--sapphire-semantic-size-breakpoint-lg: 1200px;--sapphire-semantic-size-breakpoint-md: 960px;--sapphire-semantic-size-breakpoint-sm: 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-default-bold: 600;--sapphire-semantic-font-weight-default-medium: 500;--sapphire-semantic-font-weight-default-regular: 400;--sapphire-semantic-font-weight-default-light: 300;--sapphire-global-transitions-ease-in: cubic-bezier(0, 0, 0, 1);--sapphire-global-transitions-ease-in-out-quick: cubic-bezier(.5, 0, 0, 1);--sapphire-global-transitions-ease-in-out: cubic-bezier(.7, 0, .2, 1);--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.3;--sapphire-global-size-font-300: 3rem;--sapphire-global-size-font-250: 2.5rem;--sapphire-global-size-font-200: 2rem;--sapphire-global-size-font-175: 1.75rem;--sapphire-global-size-font-163: 1.625rem;--sapphire-global-size-font-150: 1.5rem;--sapphire-global-size-font-125: 1.25rem;--sapphire-global-size-font-112: 1.125rem;--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-110: 2.75rem;--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-40: 16px;--sapphire-global-size-static-30: 12px;--sapphire-global-size-static-20: 8px;--sapphire-global-size-static-15: 6px;--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-md: 0px 0px 0px 1px hsl(212 63% 12% / .1) inset, 0px 4px 24px 0px hsl(212 63% 12% / .04);--sapphire-global-opacity-30: .3;--sapphire-global-font-danske-name: \"Danske\";--sapphire-global-color-secondary-green-4: hsl(137 64% 78%);--sapphire-global-color-secondary-green-3: hsl(152 42% 56%);--sapphire-global-color-secondary-green-2: hsl(152 44% 38%);--sapphire-global-color-secondary-green-1: hsl(158 58% 19%);--sapphire-global-color-secondary-copper-4: hsl(23 69% 75%);--sapphire-global-color-secondary-copper-3: hsl(19 61% 60%);--sapphire-global-color-secondary-copper-2: hsl(18 57% 41%);--sapphire-global-color-secondary-copper-1: hsl(12 65% 23%);--sapphire-global-color-secondary-gold-4: hsl(45 63% 69%);--sapphire-global-color-secondary-gold-3: hsl(39 49% 54%);--sapphire-global-color-secondary-gold-2: hsl(37 57% 36%);--sapphire-global-color-secondary-gold-1: hsl(37 68% 19%);--sapphire-global-color-secondary-blue-4: hsl(211 72% 72%);--sapphire-global-color-secondary-blue-3: hsl(214 59% 62%);--sapphire-global-color-secondary-blue-2: hsl(218 51% 52%);--sapphire-global-color-secondary-blue-1: hsl(212 100% 24%);--sapphire-global-color-alpha-yellow-950: hsl(23 100% 13% / .987);--sapphire-global-color-alpha-yellow-900: hsl(25 100% 19% / .963);--sapphire-global-color-alpha-yellow-800: hsl(27 100% 25% / .959);--sapphire-global-color-alpha-yellow-700: hsl(31 100% 32% / .979);--sapphire-global-color-alpha-yellow-600: hsl(36 100% 39% / .987);--sapphire-global-color-alpha-yellow-500: hsl(41 100% 45% / .975);--sapphire-global-color-alpha-yellow-400: hsl(46 100% 48% / .897);--sapphire-global-color-alpha-yellow-300: hsl(46 100% 49% / .697);--sapphire-global-color-alpha-yellow-200: hsl(51 100% 48% / .47);--sapphire-global-color-alpha-yellow-100: hsl(51 100% 47% / .235);--sapphire-global-color-alpha-yellow-50: hsl(53 100% 50% / .161);--sapphire-global-color-alpha-green-950: hsl(129 100% 4% / .944);--sapphire-global-color-alpha-green-900: hsl(130 100% 6% / .916);--sapphire-global-color-alpha-green-800: hsl(128 100% 8% / .885);--sapphire-global-color-alpha-green-700: hsl(128 100% 11% / .862);--sapphire-global-color-alpha-green-600: hsl(127 100% 17% / .842);--sapphire-global-color-alpha-green-500: hsl(124 100% 21% / .822);--sapphire-global-color-alpha-green-400: hsl(122 100% 28% / .701);--sapphire-global-color-alpha-green-300: hsl(124 100% 28% / .56);--sapphire-global-color-alpha-green-200: hsl(124 100% 30% / .388);--sapphire-global-color-alpha-green-100: hsl(125 100% 11% / .231);--sapphire-global-color-alpha-green-50: hsl(129 100% 25% / .11);--sapphire-global-color-alpha-red-950: hsl(358 100% 6% / .957);--sapphire-global-color-alpha-red-900: hsl(1 100% 10% / .92);--sapphire-global-color-alpha-red-800: hsl(359 100% 17% / .877);--sapphire-global-color-alpha-red-700: hsl(359 100% 24% / .842);--sapphire-global-color-alpha-red-600: hsl(359 100% 32% / .819);--sapphire-global-color-alpha-red-500: hsl(0 100% 39% / .815);--sapphire-global-color-alpha-red-400: hsl(1 100% 47% / .65);--sapphire-global-color-alpha-red-300: hsl(1 100% 48% / .501);--sapphire-global-color-alpha-red-200: hsl(2 100% 50% / .325);--sapphire-global-color-alpha-red-100: hsl(4 100% 50% / .169);--sapphire-global-color-alpha-red-50: hsl(0 98% 45% / .079);--sapphire-global-color-alpha-blue-500: hsl(215 99% 45% / .995);--sapphire-global-color-alpha-blue-400: hsl(216 100% 50% / .74);--sapphire-global-color-alpha-blue-300: hsl(215 100% 50% / .513);--sapphire-global-color-alpha-blue-200: hsl(214 100% 50% / .349);--sapphire-global-color-alpha-blue-100: hsl(214 100% 50% / .2);--sapphire-global-color-alpha-blue-50: hsl(219 100% 50% / .091);--sapphire-global-color-alpha-sand-950: hsl(40 100% 3% / .905);--sapphire-global-color-alpha-sand-900: hsl(41 100% 5% / .858);--sapphire-global-color-alpha-sand-800: hsl(43 100% 7% / .803);--sapphire-global-color-alpha-sand-700: hsl(42 100% 9% / .74);--sapphire-global-color-alpha-sand-600: hsl(42 100% 12% / .678);--sapphire-global-color-alpha-sand-500: hsl(43 100% 12% / .548);--sapphire-global-color-alpha-sand-400: hsl(39 100% 17% / .411);--sapphire-global-color-alpha-sand-300: hsl(48 100% 17% / .294);--sapphire-global-color-alpha-sand-200: hsl(48 100% 13% / .153);--sapphire-global-color-alpha-sand-100: hsl(60 100% 10% / .098);--sapphire-global-color-alpha-sand-50: hsl(60 100% 10% / .043);--sapphire-global-color-alpha-gray-900: hsl(211 63% 13% / .952);--sapphire-global-color-alpha-gray-800: hsl(213 100% 9% / .909);--sapphire-global-color-alpha-gray-700: hsl(213 100% 11% / .819);--sapphire-global-color-alpha-gray-600: hsl(212 100% 13% / .74);--sapphire-global-color-alpha-gray-500: hsl(212 100% 15% / .603);--sapphire-global-color-alpha-gray-400: hsl(211 100% 18% / .455);--sapphire-global-color-alpha-gray-300: hsl(211 100% 20% / .282);--sapphire-global-color-alpha-gray-200: hsl(210 100% 21% / .188);--sapphire-global-color-alpha-gray-100: hsl(208 98% 23% / .114);--sapphire-global-color-alpha-gray-50: hsl(206 100% 25% / .055);--sapphire-global-color-yellow-950: hsl(24 91% 14%);--sapphire-global-color-yellow-900: hsl(25 84% 22%);--sapphire-global-color-yellow-800: hsl(27 86% 28%);--sapphire-global-color-yellow-700: hsl(31 94% 33%);--sapphire-global-color-yellow-600: hsl(36 97% 40%);--sapphire-global-color-yellow-500: hsl(41 95% 46%);--sapphire-global-color-yellow-400: hsl(46 94% 54%);--sapphire-global-color-yellow-300: hsl(46 97% 65%);--sapphire-global-color-yellow-200: hsl(51 92% 75%);--sapphire-global-color-yellow-100: hsl(51 90% 88%);--sapphire-global-color-yellow-50: hsl(53 100% 92%);--sapphire-global-color-green-950: hsl(129 42% 9%);--sapphire-global-color-green-900: hsl(131 40% 14%);--sapphire-global-color-green-800: hsl(128 38% 18%);--sapphire-global-color-green-700: hsl(129 41% 23%);--sapphire-global-color-green-600: hsl(127 47% 30%);--sapphire-global-color-green-500: hsl(125 50% 35%);--sapphire-global-color-green-400: hsl(122 39% 49%);--sapphire-global-color-green-300: hsl(124 39% 60%);--sapphire-global-color-green-200: hsl(124 42% 73%);--sapphire-global-color-green-100: hsl(125 46% 84%);--sapphire-global-color-green-50: hsl(129 33% 92%);--sapphire-global-color-red-950: hsl(358 57% 10%);--sapphire-global-color-red-900: hsl(1 53% 17%);--sapphire-global-color-red-800: hsl(358 55% 27%);--sapphire-global-color-red-700: hsl(359 57% 36%);--sapphire-global-color-red-600: hsl(359 59% 44%);--sapphire-global-color-red-500: hsl(0 65% 51%);--sapphire-global-color-red-400: hsl(1 90% 66%);--sapphire-global-color-red-300: hsl(1 92% 74%);--sapphire-global-color-red-200: hsl(2 100% 84%);--sapphire-global-color-red-100: hsl(4 100% 92%);--sapphire-global-color-red-50: hsl(0 82% 96%);--sapphire-global-color-blue-950: hsl(210 100% 9%);--sapphire-global-color-blue-900: hsl(210 100% 14%);--sapphire-global-color-blue-800: hsl(211 100% 21%);--sapphire-global-color-blue-700: hsl(211 100% 28%);--sapphire-global-color-blue-600: hsl(212 100% 37%);--sapphire-global-color-blue-500: hsl(218 92% 49%);--sapphire-global-color-blue-400: hsl(216 100% 63%);--sapphire-global-color-blue-300: hsl(215 100% 74%);--sapphire-global-color-blue-200: hsl(214 100% 83%);--sapphire-global-color-blue-100: hsl(214 100% 90%);--sapphire-global-color-blue-50: hsl(219 100% 95%);--sapphire-global-color-sand-950: hsl(39 23% 12%);--sapphire-global-color-sand-900: hsl(41 23% 18%);--sapphire-global-color-sand-800: hsl(43 22% 25%);--sapphire-global-color-sand-700: hsl(42 20% 33%);--sapphire-global-color-sand-600: hsl(42 20% 40%);--sapphire-global-color-sand-500: hsl(43 14% 52%);--sapphire-global-color-sand-400: hsl(39 20% 66%);--sapphire-global-color-sand-300: hsl(48 20% 75%);--sapphire-global-color-sand-200: hsl(48 15% 87%);--sapphire-global-color-sand-100: hsl(60 11% 91%);--sapphire-global-color-sand-50: hsl(60 9% 96%);--sapphire-global-color-gray-950: hsl(210 94% 7%);--sapphire-global-color-gray-900: hsl(211 64% 13%);--sapphire-global-color-gray-800: hsl(213 48% 17%);--sapphire-global-color-gray-700: hsl(212 33% 27%);--sapphire-global-color-gray-600: hsl(212 27% 35%);--sapphire-global-color-gray-500: hsl(211 19% 49%);--sapphire-global-color-gray-400: hsl(211 22% 63%);--sapphire-global-color-gray-300: hsl(211 22% 77%);--sapphire-global-color-gray-200: hsl(210 26% 85%);--sapphire-global-color-gray-100: hsl(208 29% 91%);--sapphire-global-color-gray-50: hsl(206 33% 96%);--sapphire-global-color-transparent: hsla(0, 0%, 100%, 0);--sapphire-global-color-black: hsla(0, 0%, 0%, 1);--sapphire-global-color-white: hsla(0, 0%, 100%, 1);--sapphire-semantic-transitions-fade: var(--sapphire-global-transitions-ease-in);--sapphire-semantic-transitions-dynamic: var(--sapphire-global-transitions-ease-in-out-quick);--sapphire-semantic-transitions-standard: var(--sapphire-global-transitions-ease-in-out);--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-6xl: var(--sapphire-global-size-generic-180);--sapphire-semantic-size-spacing-5xl: var(--sapphire-global-size-generic-160);--sapphire-semantic-size-spacing-4xl: var(--sapphire-global-size-generic-120);--sapphire-semantic-size-spacing-3xl: var(--sapphire-global-size-generic-100);--sapphire-semantic-size-spacing-2xl: var(--sapphire-global-size-generic-80);--sapphire-semantic-size-spacing-xl: var(--sapphire-global-size-generic-60);--sapphire-semantic-size-spacing-lg: var(--sapphire-global-size-generic-50);--sapphire-semantic-size-spacing-md: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-spacing-sm: var(--sapphire-global-size-generic-30);--sapphire-semantic-size-spacing-xs: var(--sapphire-global-size-generic-20);--sapphire-semantic-size-spacing-2xs: var(--sapphire-global-size-generic-15);--sapphire-semantic-size-spacing-3xs: var(--sapphire-global-size-generic-10);--sapphire-semantic-size-spacing-4xs: 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-heading-2xl: var(--sapphire-global-size-font-175);--sapphire-semantic-size-font-heading-xl: var(--sapphire-global-size-font-150);--sapphire-semantic-size-font-heading-lg: var(--sapphire-global-size-font-125);--sapphire-semantic-size-font-heading-md: var(--sapphire-global-size-font-125);--sapphire-semantic-size-font-heading-sm: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-heading-xs: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-body-lg: var(--sapphire-global-size-font-112);--sapphire-semantic-size-font-body-md: var(--sapphire-global-size-font-100);--sapphire-semantic-size-font-body-sm: var(--sapphire-global-size-font-88);--sapphire-semantic-size-font-body-xs: var(--sapphire-global-size-font-75);--sapphire-semantic-size-radius-2xl: var(--sapphire-global-size-static-40);--sapphire-semantic-size-radius-xl: var(--sapphire-global-size-static-30);--sapphire-semantic-size-radius-lg: var(--sapphire-global-size-static-20);--sapphire-semantic-size-radius-md: var(--sapphire-global-size-static-15);--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-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-field: var(--sapphire-global-size-generic-750);--sapphire-semantic-size-height-box-md: var(--sapphire-global-size-generic-40);--sapphire-semantic-size-height-control-4xl: var(--sapphire-global-size-generic-200);--sapphire-semantic-size-height-control-3xl: var(--sapphire-global-size-generic-180);--sapphire-semantic-size-height-control-2xl: var(--sapphire-global-size-generic-160);--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-30);--sapphire-semantic-font-name-default: var(--sapphire-global-font-danske-name);--sapphire-semantic-color-foreground-on-decorative-neutral: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-16: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-15: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-14: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-13: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-12: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-11: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-10: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-9: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-8: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-7: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-6: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-5: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-4: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-3: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-foreground-on-decorative-2: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-decorative-1: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-signature: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-warning-subtle: var(--sapphire-global-color-alpha-yellow-800);--sapphire-semantic-color-foreground-on-warning: var(--sapphire-global-color-alpha-yellow-900);--sapphire-semantic-color-foreground-on-positive: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-negative: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-on-accent: var(--sapphire-global-color-white);--sapphire-semantic-color-foreground-positive: var(--sapphire-global-color-alpha-green-500);--sapphire-semantic-color-foreground-warning: var(--sapphire-global-color-alpha-yellow-700);--sapphire-semantic-color-foreground-negative: var(--sapphire-global-color-alpha-red-500);--sapphire-semantic-color-foreground-accent: var(--sapphire-global-color-alpha-blue-500);--sapphire-semantic-color-foreground-secondary: color(from var(--sapphire-global-color-blue-900) xyz x y z / .64);--sapphire-semantic-color-foreground-secondary-alpha: .64;--sapphire-semantic-color-foreground-primary: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-background-decorative-neutral: var(--sapphire-global-color-alpha-sand-50);--sapphire-semantic-color-background-decorative-16: var(--sapphire-global-color-secondary-green-4);--sapphire-semantic-color-background-decorative-15: var(--sapphire-global-color-secondary-green-3);--sapphire-semantic-color-background-decorative-14: var(--sapphire-global-color-secondary-green-2);--sapphire-semantic-color-background-decorative-13: var(--sapphire-global-color-secondary-green-1);--sapphire-semantic-color-background-decorative-12: var(--sapphire-global-color-secondary-copper-4);--sapphire-semantic-color-background-decorative-11: var(--sapphire-global-color-secondary-copper-3);--sapphire-semantic-color-background-decorative-10: var(--sapphire-global-color-secondary-copper-2);--sapphire-semantic-color-background-decorative-9: var(--sapphire-global-color-secondary-copper-1);--sapphire-semantic-color-background-decorative-8: var(--sapphire-global-color-secondary-gold-4);--sapphire-semantic-color-background-decorative-7: var(--sapphire-global-color-secondary-gold-3);--sapphire-semantic-color-background-decorative-6: var(--sapphire-global-color-secondary-gold-2);--sapphire-semantic-color-background-decorative-5: var(--sapphire-global-color-secondary-gold-1);--sapphire-semantic-color-background-decorative-4: var(--sapphire-global-color-secondary-blue-4);--sapphire-semantic-color-background-decorative-3: var(--sapphire-global-color-secondary-blue-3);--sapphire-semantic-color-background-decorative-2: var(--sapphire-global-color-secondary-blue-2);--sapphire-semantic-color-background-decorative-1: var(--sapphire-global-color-secondary-blue-1);--sapphire-semantic-color-background-popover: var(--sapphire-global-color-white);--sapphire-semantic-color-background-backdrop: color(from var(--sapphire-global-color-gray-950) xyz x y z / .6);--sapphire-semantic-color-background-backdrop-alpha: .6;--sapphire-semantic-color-background-surface: var(--sapphire-global-color-white);--sapphire-semantic-color-background-field: var(--sapphire-global-color-white);--sapphire-semantic-color-background-warning-subtle: var(--sapphire-global-color-alpha-yellow-50);--sapphire-semantic-color-background-positive-subtle: var(--sapphire-global-color-alpha-green-50);--sapphire-semantic-color-background-negative-subtle: var(--sapphire-global-color-alpha-red-50);--sapphire-semantic-color-background-accent-subtle: var(--sapphire-global-color-alpha-blue-50);--sapphire-semantic-color-background-neutral-subtle: var(--sapphire-global-color-alpha-sand-50);--sapphire-semantic-color-background-negative: var(--sapphire-global-color-red-500);--sapphire-semantic-color-background-warning: var(--sapphire-global-color-yellow-300);--sapphire-semantic-color-background-positive: var(--sapphire-global-color-green-500);--sapphire-semantic-color-background-accent: var(--sapphire-global-color-blue-500);--sapphire-semantic-color-background-signature: var(--sapphire-global-color-blue-900);--sapphire-semantic-color-background-segmented-control-knob: var(--sapphire-global-color-white);--sapphire-semantic-color-background-segmented-control-track: var(--sapphire-global-color-alpha-sand-100);--sapphire-semantic-color-background-switch-default: var(--sapphire-global-color-alpha-sand-200);--sapphire-semantic-color-background-action-highlight: var(--sapphire-global-color-alpha-sand-50);--sapphire-semantic-color-background-action-select-tertiary-default: var(--sapphire-global-color-transparent);--sapphire-semantic-color-background-action-danger-tertiary-default: var(--sapphire-global-color-transparent);--sapphire-semantic-color-background-action-tertiary-default: var(--sapphire-global-color-transparent);--sapphire-semantic-color-background-action-secondary-default: var(--sapphire-global-color-alpha-sand-100);--sapphire-semantic-color-focus-ring: var(--sapphire-global-color-blue-400);--sapphire-semantic-color-border-field-default: color(from var(--sapphire-global-color-blue-900) xyz x y z / .48);--sapphire-semantic-color-border-field-default-alpha: .48;--sapphire-semantic-color-border-negative-default: var(--sapphire-global-color-red-500);--sapphire-semantic-color-border-accent: var(--sapphire-global-color-blue-500);--sapphire-semantic-color-border-tertiary: color(from var(--sapphire-global-color-blue-900) xyz x y z / .06);--sapphire-semantic-color-border-tertiary-alpha: .06;--sapphire-semantic-color-border-secondary: color(from var(--sapphire-global-color-blue-900) xyz x y z / .08);--sapphire-semantic-color-border-secondary-alpha: .08;--sapphire-semantic-color-border-primary: color(from var(--sapphire-global-color-blue-900) xyz x y z / .16);--sapphire-semantic-color-border-primary-alpha: .16;--sapphire-semantic-color-state-border-active: color(from var(--sapphire-global-color-blue-900) xyz x y z / .2);--sapphire-semantic-color-state-border-active-alpha: .2;--sapphire-semantic-color-state-border-hover: color(from var(--sapphire-global-color-blue-900) xyz x y z / .12);--sapphire-semantic-color-state-border-hover-alpha: .12;--sapphire-semantic-color-state-negative-subtle-active: color(from var(--sapphire-global-color-red-500) xyz x y z / .1);--sapphire-semantic-color-state-negative-subtle-active-alpha: .1;--sapphire-semantic-color-state-negative-subtle-hover: color(from var(--sapphire-global-color-red-500) xyz x y z / .06);--sapphire-semantic-color-state-negative-subtle-hover-alpha: .06;--sapphire-semantic-color-state-negative-active: color(from var(--sapphire-global-color-red-900) xyz x y z / .2);--sapphire-semantic-color-state-negative-active-alpha: .2;--sapphire-semantic-color-state-negative-hover: color(from var(--sapphire-global-color-red-900) xyz x y z / .12);--sapphire-semantic-color-state-negative-hover-alpha: .12;--sapphire-semantic-color-state-neutral-ghost-active: color(from var(--sapphire-global-color-sand-900) xyz x y z / .1);--sapphire-semantic-color-state-neutral-ghost-active-alpha: .1;--sapphire-semantic-color-state-neutral-ghost-hover: color(from var(--sapphire-global-color-sand-900) xyz x y z / .06);--sapphire-semantic-color-state-neutral-ghost-hover-alpha: .06;--sapphire-semantic-color-state-neutral-active: color(from var(--sapphire-global-color-sand-900) xyz x y z / .1);--sapphire-semantic-color-state-neutral-active-alpha: .1;--sapphire-semantic-color-state-neutral-hover: color(from var(--sapphire-global-color-sand-900) xyz x y z / .06);--sapphire-semantic-color-state-neutral-hover-alpha: .06;--sapphire-semantic-color-state-accent-subtle-active: color(from var(--sapphire-global-color-blue-500) xyz x y z / .12);--sapphire-semantic-color-state-accent-subtle-active-alpha: .12;--sapphire-semantic-color-state-accent-subtle-hover: color(from var(--sapphire-global-color-blue-500) xyz x y z / .06);--sapphire-semantic-color-state-accent-subtle-hover-alpha: .06;--sapphire-semantic-color-state-accent-active: color(from var(--sapphire-global-color-blue-900) xyz x y z / .2);--sapphire-semantic-color-state-accent-active-alpha: .2;--sapphire-semantic-color-state-accent-hover: color(from var(--sapphire-global-color-blue-900) xyz x y z / .12);--sapphire-semantic-color-state-accent-hover-alpha: .12;--sapphire-global-color-alpha-blue-950: var(--sapphire-global-color-blue-950);--sapphire-global-color-alpha-blue-900: var(--sapphire-global-color-blue-900);--sapphire-global-color-alpha-blue-800: var(--sapphire-global-color-blue-800);--sapphire-global-color-alpha-blue-700: var(--sapphire-global-color-blue-700);--sapphire-global-color-alpha-blue-600: var(--sapphire-global-color-blue-600);--sapphire-global-color-alpha-gray-950: var(--sapphire-global-color-gray-950);--sapphire-semantic-size-spacing-container-horizontal-md: var(--sapphire-semantic-size-spacing-2xl);--sapphire-semantic-size-spacing-container-horizontal-sm: var(--sapphire-semantic-size-spacing-sm);--sapphire-semantic-size-spacing-control-horizontal-lg: var(--sapphire-semantic-size-spacing-md);--sapphire-semantic-size-spacing-control-horizontal-md: var(--sapphire-semantic-size-spacing-sm);--sapphire-semantic-size-spacing-control-vertical-lg: var(--sapphire-semantic-size-spacing-sm);--sapphire-semantic-size-spacing-control-vertical-md: var(--sapphire-semantic-size-spacing-xs);--sapphire-semantic-size-spacing-control-vertical-sm: var(--sapphire-semantic-size-spacing-3xs);--sapphire-semantic-size-font-control-lg: var(--sapphire-semantic-size-font-body-md);--sapphire-semantic-size-font-control-md: var(--sapphire-semantic-size-font-body-sm);--sapphire-semantic-size-font-control-sm: var(--sapphire-semantic-size-font-body-xs);--sapphire-semantic-size-font-label-md: var(--sapphire-semantic-size-font-body-sm);--sapphire-semantic-size-font-label-sm: var(--sapphire-semantic-size-font-body-xs);--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-color-foreground-on-neutral-subtle: var(--sapphire-semantic-color-foreground-primary);--sapphire-semantic-color-foreground-on-positive-subtle: var(--sapphire-semantic-color-foreground-positive);--sapphire-semantic-color-foreground-on-negative-subtle: var(--sapphire-semantic-color-foreground-negative);--sapphire-semantic-color-foreground-on-accent-subtle: var(--sapphire-semantic-color-foreground-accent);--sapphire-semantic-color-foreground-action-danger-default: var(--sapphire-semantic-color-foreground-negative);--sapphire-semantic-color-foreground-action-link-default: var(--sapphire-semantic-color-foreground-accent);--sapphire-semantic-color-foreground-action-select-default: var(--sapphire-semantic-color-foreground-accent);--sapphire-semantic-color-foreground-action-on-select-default: var(--sapphire-semantic-color-foreground-on-accent);--sapphire-semantic-color-foreground-action-on-danger-default: var(--sapphire-semantic-color-foreground-on-negative);--sapphire-semantic-color-foreground-action-on-tertiary-default: var(--sapphire-semantic-color-foreground-primary);--sapphire-semantic-color-foreground-action-on-primary-default: var(--sapphire-semantic-color-foreground-on-accent);--sapphire-semantic-color-background-spinner-secondary: var(--sapphire-semantic-color-foreground-accent);--sapphire-semantic-color-background-spinner-primary: var(--sapphire-semantic-color-foreground-primary);--sapphire-semantic-color-background-skeleton: var(--sapphire-semantic-color-state-neutral-active);--sapphire-semantic-color-background-progress-track: var(--sapphire-semantic-color-background-accent-subtle);--sapphire-semantic-color-background-progress-fill: var(--sapphire-semantic-color-background-accent);--sapphire-semantic-color-background-switch-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-active-alpha) * 100%), var(--sapphire-semantic-color-background-switch-default) calc((1 - var(--sapphire-semantic-color-state-neutral-active-alpha)) * 100%));--sapphire-semantic-color-background-switch-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-hover-alpha) * 100%), var(--sapphire-semantic-color-background-switch-default) calc((1 - var(--sapphire-semantic-color-state-neutral-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-select-tertiary-active: var(--sapphire-semantic-color-state-accent-subtle-active);--sapphire-semantic-color-background-action-select-tertiary-hover: var(--sapphire-semantic-color-state-accent-subtle-hover);--sapphire-semantic-color-background-action-select-secondary-default: var(--sapphire-semantic-color-background-accent-subtle);--sapphire-semantic-color-background-action-danger-tertiary-active: var(--sapphire-semantic-color-state-negative-subtle-active);--sapphire-semantic-color-background-action-danger-tertiary-hover: var(--sapphire-semantic-color-state-negative-subtle-hover);--sapphire-semantic-color-background-action-danger-secondary-default: var(--sapphire-semantic-color-background-negative-subtle);--sapphire-semantic-color-background-action-danger-default: var(--sapphire-semantic-color-background-negative);--sapphire-semantic-color-background-action-tertiary-active: var(--sapphire-semantic-color-state-neutral-ghost-active);--sapphire-semantic-color-background-action-tertiary-hover: var(--sapphire-semantic-color-state-neutral-ghost-hover);--sapphire-semantic-color-background-action-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-secondary-default) calc((1 - var(--sapphire-semantic-color-state-neutral-active-alpha)) * 100%));--sapphire-semantic-color-background-action-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-neutral-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-neutral-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-secondary-default) calc((1 - var(--sapphire-semantic-color-state-neutral-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-primary-default: var(--sapphire-semantic-color-background-accent);--sapphire-semantic-color-border-field-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-border-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-border-active-alpha) * 100%), var(--sapphire-semantic-color-border-field-default) calc((1 - var(--sapphire-semantic-color-state-border-active-alpha)) * 100%));--sapphire-semantic-color-border-field-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-border-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-border-hover-alpha) * 100%), var(--sapphire-semantic-color-border-field-default) calc((1 - var(--sapphire-semantic-color-state-border-hover-alpha)) * 100%));--sapphire-semantic-color-border-negative-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-border-negative-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-border-negative-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-border-negative-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-danger-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-danger-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-link-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-link-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-link-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-link-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-select-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-select-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-select-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-select-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-select-tertiary-default: var(--sapphire-semantic-color-foreground-action-select-default);--sapphire-semantic-color-foreground-action-on-select-secondary-default: var(--sapphire-semantic-color-foreground-on-accent-subtle);--sapphire-semantic-color-foreground-action-on-select-active: var(--sapphire-semantic-color-foreground-action-on-select-default);--sapphire-semantic-color-foreground-action-on-select-hover: var(--sapphire-semantic-color-foreground-action-on-select-default);--sapphire-semantic-color-foreground-action-on-danger-tertiary-default: var(--sapphire-semantic-color-foreground-action-danger-default);--sapphire-semantic-color-foreground-action-on-danger-secondary-default: var(--sapphire-semantic-color-foreground-on-negative-subtle);--sapphire-semantic-color-foreground-action-on-danger-active: var(--sapphire-semantic-color-foreground-action-on-danger-default);--sapphire-semantic-color-foreground-action-on-danger-hover: var(--sapphire-semantic-color-foreground-action-on-danger-default);--sapphire-semantic-color-foreground-action-on-tertiary-active: var(--sapphire-semantic-color-foreground-action-on-tertiary-default);--sapphire-semantic-color-foreground-action-on-tertiary-hover: var(--sapphire-semantic-color-foreground-action-on-tertiary-default);--sapphire-semantic-color-foreground-action-on-secondary-default: var(--sapphire-semantic-color-foreground-on-neutral-subtle);--sapphire-semantic-color-foreground-action-on-primary-active: var(--sapphire-semantic-color-foreground-action-on-primary-default);--sapphire-semantic-color-foreground-action-on-primary-hover: var(--sapphire-semantic-color-foreground-action-on-primary-default);--sapphire-semantic-color-background-action-select-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-subtle-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-subtle-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-subtle-active-alpha)) * 100%));--sapphire-semantic-color-background-action-select-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-subtle-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-subtle-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-subtle-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-select-default: var(--sapphire-semantic-color-background-action-primary-default);--sapphire-semantic-color-background-action-danger-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-subtle-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-subtle-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-subtle-active-alpha)) * 100%));--sapphire-semantic-color-background-action-danger-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-subtle-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-subtle-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-subtle-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-danger-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-background-action-danger-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-danger-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-background-action-primary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-background-action-primary-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-background-action-primary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-background-action-primary-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-select-tertiary-active: var(--sapphire-semantic-color-foreground-action-select-active);--sapphire-semantic-color-foreground-action-on-select-tertiary-hover: var(--sapphire-semantic-color-foreground-action-select-hover);--sapphire-semantic-color-foreground-action-on-select-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-select-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-select-secondary-default) calc((1 - var(--sapphire-semantic-color-state-accent-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-danger-tertiary-active: var(--sapphire-semantic-color-foreground-action-danger-active);--sapphire-semantic-color-foreground-action-on-danger-tertiary-hover: var(--sapphire-semantic-color-foreground-action-danger-hover);--sapphire-semantic-color-foreground-action-on-danger-secondary-active: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-active) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-active-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-active-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-danger-secondary-hover: color-mix(in srgb, color(from var(--sapphire-semantic-color-state-negative-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-negative-hover-alpha) * 100%), var(--sapphire-semantic-color-foreground-action-on-danger-secondary-default) calc((1 - var(--sapphire-semantic-color-state-negative-hover-alpha)) * 100%));--sapphire-semantic-color-foreground-action-on-secondary-active: var(--sapphire-semantic-color-foreground-action-on-secondary-default);--sapphire-semantic-color-foreground-action-on-secondary-hover: var(--sapphire-semantic-color-foreground-action-on-secondary-default);--sapphire-semantic-color-background-action-select-active: var(--sapphire-semantic-color-background-action-primary-active);--sapphire-semantic-color-background-action-select-hover: var(--sapphire-semantic-color-background-action-primary-hover)}::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}::ng-deep .cdk-overlay-transparent-backdrop{visibility:visible!important;opacity:0!important}:host{color-scheme:dark}\n"] }]
|
|
7099
6429
|
}] });
|
|
7100
6430
|
|
|
7101
6431
|
/**
|
|
@@ -7770,7 +7100,7 @@ TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version
|
|
|
7770
7100
|
<ng-container>
|
|
7771
7101
|
<ng-content select="table"></ng-content>
|
|
7772
7102
|
</ng-container>
|
|
7773
|
-
`, isInline: true, styles: [".sapphire-table{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;flex-direction:column;justify-content:space-between;background-color:var(--sapphire-semantic-color-background-surface)}.sapphire-table--overflow{overflow:auto}.sapphire-table__table{border-collapse:collapse;border-spacing:0;width:100%;table-layout:auto}.sapphire-table__table--fixed-layout{table-layout:fixed}.sapphire-table-sortedIcon,.sapphire-table-sortableIcon{display:inline-flex;visibility:hidden;vertical-align:top}.sapphire-table__head{top:0;z-index:2;line-height:var(--sapphire-semantic-size-line-height-md);--sapphire-table-row-bg: var(--sapphire-semantic-color-background-surface)}.sapphire-table__cell,.sapphire-table__headCell,.sapphire-table__selectionCell{box-sizing:border-box;font-size:var(--sapphire-semantic-size-font-body-md);line-height:var(--sapphire-semantic-size-line-height-md)}.sapphire-table__head--sticky{position:sticky}.sapphire-table__cell--alignLeft{text-align:left}.sapphire-table__cell--alignCenter{text-align:center}.sapphire-table__cell--alignRight{text-align:end}.sapphire-table__headCell{color:var(--sapphire-semantic-color-foreground-primary);box-sizing:border-box;font-size:var(--sapphire-semantic-size-font-body-sm);font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-medium);line-height:var(--sapphire-semantic-size-line-height-md);vertical-align:top}.sapphire-table__headCell_container{padding:var(--sapphire-semantic-size-spacing-xs) var(--sapphire-table-cell-spacing-h);display:inline-flex;align-items:center;box-sizing:border-box;width:100%}.sapphire-table__cell--alignRight .sapphire-table__headCell_container{justify-content:flex-end}.sapphire-table__cell--alignLeft .sapphire-table__headCell_container{justify-content:flex-start}.sapphire-table__cell--alignCenter .sapphire-table__headCell_container{justify-content:center}.sapphire-table__row,.sapphire-table__cell,.sapphire-table__headCell,.sapphire-table__selectionCell{outline:none;position:relative;z-index:1}.sapphire-table__headCell.is-focus .sapphire-table__headCell_container:after,.sapphire-table__headCell:not(.js-focus):focus-visible .sapphire-table__headCell_container:after,.sapphire-table__cell.is-focus:after,.sapphire-table__cell:not(.js-focus):focus-visible:after,.sapphire-table__selectionCell.is-focus:after,.sapphire-table__selectionCell:not(.js-focus):focus-visible:after,.sapphire-table__row.is-focus:after,.sapphire-table__row:not(.js-focus):focus-visible:after,.sapphire-table__row-expanded-view.is-focus:after,.sapphire-table__row-expanded-view:not(.js-focus):focus-visible:after{content:\"\";outline:none;border-radius:var(--sapphire-semantic-size-radius-sm);box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring);position:absolute;inset:0;z-index:3}.sapphire-table__headCell.is-focus .sapphire-table__headCell_container,.sapphire-table__headCell:not(.js-focus):focus-visible .sapphire-table__headCell_container{border-radius:var(--sapphire-semantic-size-radius-sm)}.sapphire-table__headCell.sapphire-table__headCell--sortable.is-hover .sapphire-table__headCell_container,.sapphire-table__headCell.sapphire-table__headCell--sortable:not(.js-hover):hover .sapphire-table__headCell_container{color:var(--sapphire-semantic-color-foreground-action-on-tertiary-hover);border-radius:var(--sapphire-semantic-size-radius-sm)}.sapphire-table__headCell.sapphire-table__headCell--sortable{cursor:pointer}.sapphire-table__headCell--sortable:not(sapphire-table__headCell--sorted):hover .sapphire-table-sortableIcon{visibility:visible}.sapphire-table__headCell--sorted .sapphire-table-sortedIcon{visibility:visible;padding-left:var(--sapphire-semantic-size-spacing-2xs)}.sapphire-table__headCell .sapphire-table-sortedIcon,.sapphire-table__headCell .sapphire-table-sortableIcon{padding-left:var(--sapphire-semantic-size-spacing-2xs)}.sapphire-table__cell--alignRight .sapphire-table-sortedIcon,.sapphire-table__cell--alignRight .sapphire-table-sortableIcon{padding-right:var(--sapphire-semantic-size-spacing-2xs)}.sapphire-table__headCell__text,.sapphire-table__headCell__icon{vertical-align:top;display:inline-block}.sapphire-table__body{position:relative;overflow:auto}.sapphire-table__cell{box-sizing:border-box;color:var(--sapphire-semantic-color-foreground-primary);font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-regular);overflow-wrap:break-word;align-content:center;padding:var(--sapphire-table-cell-spacing-v) var(--sapphire-table-cell-spacing-h)}.sapphire-table__cell-contents{display:block;width:100%;overflow-wrap:break-word}.sapphire-table__cell--ellipsed,.sapphire-table__headCell_content--ellipsed,.sapphire-table__cell--ellipsed .sapphire-table__cell-contents{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sapphire-table__table{--sapphire-table-cell-spacing-h: var(--sapphire-semantic-size-spacing-sm);--sapphire-table-cell-spacing-v: var(--sapphire-semantic-size-spacing-sm)}.sapphire-table__table--spacing-sm{--sapphire-table-cell-spacing-h: var(--sapphire-semantic-size-spacing-sm);--sapphire-table-cell-spacing-v: var(--sapphire-semantic-size-spacing-xs)}.sapphire-table__table--spacing-lg{--sapphire-table-cell-spacing-h: var(--sapphire-semantic-size-spacing-md);--sapphire-table-cell-spacing-v: var(--sapphire-semantic-size-spacing-md)}.sapphire-table__table--spacing-xl{--sapphire-table-cell-spacing-h: var(--sapphire-semantic-size-spacing-lg);--sapphire-table-cell-spacing-v: var(--sapphire-semantic-size-spacing-lg)}.sapphire-table__selectionCell{line-height:0;padding:var(--sapphire-table-cell-spacing-v) var(--sapphire-table-cell-spacing-h);box-sizing:content-box}.sapphire-table__head .sapphire-table__selectionCell{padding:var(--sapphire-semantic-size-spacing-2xs) var(--sapphire-table-cell-spacing-h)}td.sapphire-table__selectionCell,th.sapphire-table__selectionCell{width:var(--sapphire-global-size-generic-50)}td.sapphire-table__selectionCell:first-child,th.sapphire-table__selectionCell:first-child{position:sticky;left:0;z-index:2}.sapphire-table__tfoot .sapphire-table__cell{font-weight:var(--sapphire-semantic-font-weight-default-medium)}.sapphire-table__cell:before,.sapphire-table__headCell_container:before,.sapphire-table__selectionCell:before{content:\"\";position:absolute;inset:0;background-color:var(--sapphire-table-row-bg-active, var(--sapphire-table-row-bg));z-index:-1;pointer-events:none}.sapphire-table__cell,.sapphire-table__headCell_container,.sapphire-table__selectionCell{background-color:var(--sapphire-semantic-color-background-surface)}.sapphire-table__row{box-sizing:border-box;position:relative;border-bottom:var(--sapphire-semantic-size-border-sm) solid var(--sapphire-semantic-color-border-secondary);--sapphire-table-row-bg: var( --sapphire-table-rowgroup-bg, var(--sapphire-semantic-color-background-surface) )}.sapphire-table--interactive .sapphire-table__row--active{--sapphire-table-row-bg-active: var( --sapphire-semantic-color-background-action-tertiary-active )}.sapphire-table--interactive .sapphire-table__row--selected.sapphire-table__row--active{--sapphire-table-row-bg-active: var( --sapphire-semantic-color-background-action-select-secondary-hover )}.sapphire-table__row--selected{--sapphire-table-row-bg: var( --sapphire-semantic-color-background-action-select-secondary-default )}.sapphire-table__row.is-focus,.sapphire-table__row:not(.js-focus):focus-visible,.sapphire-table__row.sapphire-table__row--expanded{border-bottom-color:transparent}.sapphire-table__row-expanded-view{border-bottom:var(--sapphire-semantic-size-border-sm) solid var(--sapphire-semantic-color-border-secondary)}.sapphire-table__row-expand-button{display:inline-flex;transition:transform var(--sapphire-semantic-transitions-dynamic) var(--sapphire-semantic-time-motion-quick)}.sapphire-table td:has(.sapphire-table__row-expand-button){width:0}.sapphire-table__row--expanded .sapphire-table__row-expand-button{transform:rotate(180deg)}.sapphire-table--without-last-divider :not([role=presentation])>.sapphire-table__row:not(.is-focus,:not(.js-focus):focus-visible):last-child,.sapphire-table--without-last-divider [role=presentation]:last-child>.sapphire-table__row:not(.is-focus,:not(.js-focus):focus-visible){border-bottom-color:transparent}.sapphire-table--interactive .sapphire-table__row,.sapphire-table__row--interactive{cursor:default}.sapphire-table--interactive .sapphire-table__row.is-hover,.sapphire-table__row--interactive.is-hover,.sapphire-table--interactive .sapphire-table__row:not(.js-hover):hover,.sapphire-table__row--interactive:not(.js-hover):hover{--sapphire-table-row-bg: var( --sapphire-semantic-color-background-action-tertiary-hover );color:var(--sapphire-semantic-color-foreground-action-on-tertiary-hover);cursor:pointer}.sapphire-table--interactive .sapphire-table__row.sapphire-table__row--selected.is-hover,.sapphire-table__row--interactive.sapphire-table__row--selected.is-hover,.sapphire-table--interactive .sapphire-table__row.sapphire-table__row--selected:not(.js-hover):hover,.sapphire-table__row--interactive.sapphire-table__row--selected:not(.js-hover):hover{--sapphire-table-row-bg: var( --sapphire-semantic-color-background-action-select-secondary-hover )}.sapphire-table__row--highlighted{--sapphire-table-row-bg: var( --sapphire-semantic-color-background-action-highlight )}.sapphire-table__row--highlighted:after{content:\"\";position:absolute;z-index:2;left:0;height:100%;width:var(--sapphire-semantic-size-border-md);background:var(--sapphire-semantic-color-border-accent);pointer-events:none}.sapphire-table__tfoot{position:relative;z-index:2;--sapphire-table-rowgroup-bg: var( --sapphire-semantic-color-background-neutral-subtle )}.sapphire-table__selection-action-bar{display:flex;align-items:center;justify-content:space-between;padding:var(--sapphire-semantic-size-spacing-sm) var(--sapphire-semantic-size-spacing-lg);background:var(--sapphire-semantic-color-background-neutral-subtle);position:sticky;top:0;left:0;z-index:3}.sapphire-table__footer{position:relative;z-index:2;margin-top:var(--sapphire-semantic-size-spacing-2xs)}.sapphire-table__footer--sticky{position:sticky;bottom:0;left:0}.sapphire-table__footer--virtualized{position:absolute;z-index:2;bottom:0;right:0;left:0}sp-table{display:block}\n"] });
|
|
7103
|
+
`, isInline: true, styles: [".sapphire-table{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;flex-direction:column;justify-content:space-between;background-color:var(--sapphire-semantic-color-background-surface)}.sapphire-table--overflow{overflow:auto}.sapphire-table__table{border-collapse:collapse;border-spacing:0;width:100%;table-layout:auto}.sapphire-table__table--fixed-layout{table-layout:fixed}.sapphire-table-sortedIcon,.sapphire-table-sortableIcon{display:inline-flex;visibility:hidden;vertical-align:top}.sapphire-table__head{top:0;z-index:2;line-height:var(--sapphire-semantic-size-line-height-md);--sapphire-table-row-bg: var(--sapphire-semantic-color-background-surface)}.sapphire-table__cell,.sapphire-table__headCell,.sapphire-table__selectionCell{box-sizing:border-box;font-size:var(--sapphire-semantic-size-font-body-md);line-height:var(--sapphire-semantic-size-line-height-md)}.sapphire-table__head--sticky{position:sticky}.sapphire-table__cell--alignLeft{text-align:left}.sapphire-table__cell--alignCenter{text-align:center}.sapphire-table__cell--alignRight{text-align:end}.sapphire-table__headCell{color:var(--sapphire-semantic-color-foreground-primary);box-sizing:border-box;font-size:var(--sapphire-semantic-size-font-body-sm);font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-medium);line-height:var(--sapphire-semantic-size-line-height-md);vertical-align:top}.sapphire-table__headCell_container{padding:var(--sapphire-semantic-size-spacing-xs) var(--sapphire-table-cell-spacing-h);display:inline-flex;align-items:center;box-sizing:border-box;width:100%}.sapphire-table__cell--alignRight .sapphire-table__headCell_container{justify-content:flex-end}.sapphire-table__cell--alignLeft .sapphire-table__headCell_container{justify-content:flex-start}.sapphire-table__cell--alignCenter .sapphire-table__headCell_container{justify-content:center}.sapphire-table__row,.sapphire-table__cell,.sapphire-table__headCell,.sapphire-table__selectionCell{outline:none;position:relative;z-index:1}.sapphire-table__headCell.is-focus .sapphire-table__headCell_container:after,.sapphire-table__headCell:not(.js-focus):focus-visible .sapphire-table__headCell_container:after,.sapphire-table__cell.is-focus:after,.sapphire-table__cell:not(.js-focus):focus-visible:after,.sapphire-table__selectionCell.is-focus:after,.sapphire-table__selectionCell:not(.js-focus):focus-visible:after,.sapphire-table__row.is-focus:after,.sapphire-table__row:not(.js-focus):focus-visible:after,.sapphire-table__row-expanded-view.is-focus:after,.sapphire-table__row-expanded-view:not(.js-focus):focus-visible:after{content:\"\";outline:none;border-radius:var(--sapphire-semantic-size-radius-sm);box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring);position:absolute;inset:0;z-index:3}.sapphire-table__headCell.is-focus .sapphire-table__headCell_container,.sapphire-table__headCell:not(.js-focus):focus-visible .sapphire-table__headCell_container{border-radius:var(--sapphire-semantic-size-radius-sm)}.sapphire-table__headCell.sapphire-table__headCell--sortable.is-hover .sapphire-table__headCell_container,.sapphire-table__headCell.sapphire-table__headCell--sortable:not(.js-hover):hover .sapphire-table__headCell_container{color:var(--sapphire-semantic-color-foreground-action-on-tertiary-hover);border-radius:var(--sapphire-semantic-size-radius-sm)}.sapphire-table__headCell.sapphire-table__headCell--sortable{cursor:pointer}.sapphire-table__headCell--sortable:not(sapphire-table__headCell--sorted):hover .sapphire-table-sortableIcon{visibility:visible}.sapphire-table__headCell--sorted .sapphire-table-sortedIcon{visibility:visible;padding-left:var(--sapphire-semantic-size-spacing-2xs)}.sapphire-table__headCell .sapphire-table-sortedIcon,.sapphire-table__headCell .sapphire-table-sortableIcon{padding-left:var(--sapphire-semantic-size-spacing-2xs)}.sapphire-table__cell--alignRight .sapphire-table-sortedIcon,.sapphire-table__cell--alignRight .sapphire-table-sortableIcon{padding-right:var(--sapphire-semantic-size-spacing-2xs)}.sapphire-table__headCell__text,.sapphire-table__headCell__icon{vertical-align:top;display:inline-block}.sapphire-table__body{position:relative;overflow:auto}.sapphire-table__cell{box-sizing:border-box;color:var(--sapphire-semantic-color-foreground-primary);font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-regular);overflow-wrap:break-word;align-content:center;padding:var(--sapphire-table-cell-spacing-v) var(--sapphire-table-cell-spacing-h)}.sapphire-table__cell-contents{display:block;width:100%;overflow-wrap:break-word}.sapphire-table__cell--ellipsed,.sapphire-table__headCell_content--ellipsed,.sapphire-table__cell--ellipsed .sapphire-table__cell-contents{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sapphire-table__table{--sapphire-table-cell-spacing-h: var(--sapphire-semantic-size-spacing-sm);--sapphire-table-cell-spacing-v: var(--sapphire-semantic-size-spacing-sm)}.sapphire-table__table--spacing-sm{--sapphire-table-cell-spacing-h: var(--sapphire-semantic-size-spacing-sm);--sapphire-table-cell-spacing-v: var(--sapphire-semantic-size-spacing-xs)}.sapphire-table__table--spacing-lg{--sapphire-table-cell-spacing-h: var(--sapphire-semantic-size-spacing-md);--sapphire-table-cell-spacing-v: var(--sapphire-semantic-size-spacing-md)}.sapphire-table__table--spacing-xl{--sapphire-table-cell-spacing-h: var(--sapphire-semantic-size-spacing-lg);--sapphire-table-cell-spacing-v: var(--sapphire-semantic-size-spacing-lg)}.sapphire-table__selectionCell{line-height:0;padding:var(--sapphire-table-cell-spacing-v) var(--sapphire-table-cell-spacing-h);box-sizing:content-box}.sapphire-table__head .sapphire-table__selectionCell{padding:var(--sapphire-semantic-size-spacing-2xs) var(--sapphire-table-cell-spacing-h)}td.sapphire-table__selectionCell,th.sapphire-table__selectionCell{width:var(--sapphire-global-size-generic-50)}td.sapphire-table__selectionCell:first-child,th.sapphire-table__selectionCell:first-child{position:sticky;left:0;z-index:2}.sapphire-table__tfoot .sapphire-table__cell{font-weight:var(--sapphire-semantic-font-weight-default-medium)}.sapphire-table__cell:before,.sapphire-table__headCell_container:before,.sapphire-table__selectionCell:before{content:\"\";position:absolute;inset:0;background-color:var(--sapphire-table-row-bg-active, var(--sapphire-table-row-bg));z-index:-1;pointer-events:none}.sapphire-table__cell,.sapphire-table__headCell_container,.sapphire-table__selectionCell{background-color:var(--sapphire-semantic-color-background-surface)}.sapphire-table__row{box-sizing:border-box;position:relative;border-bottom:var(--sapphire-semantic-size-border-sm) solid var(--sapphire-semantic-color-border-secondary);--sapphire-table-row-bg: var( --sapphire-table-rowgroup-bg, var(--sapphire-semantic-color-background-surface) )}.sapphire-table--interactive .sapphire-table__row--active{--sapphire-table-row-bg-active: var( --sapphire-semantic-color-background-action-tertiary-active )}.sapphire-table--interactive .sapphire-table__row--selected.sapphire-table__row--active{--sapphire-table-row-bg-active: var( --sapphire-semantic-color-background-action-select-secondary-hover )}.sapphire-table__row--selected{--sapphire-table-row-bg: var( --sapphire-semantic-color-background-action-select-secondary-default )}.sapphire-table__row.is-focus,.sapphire-table__row:not(.js-focus):focus-visible,.sapphire-table__row.sapphire-table__row--expanded{border-bottom-color:transparent}.sapphire-table__row-expanded-view{border-bottom:var(--sapphire-semantic-size-border-sm) solid var(--sapphire-semantic-color-border-secondary)}.sapphire-table__row-expand-button{display:inline-flex;transition:transform var(--sapphire-semantic-transitions-dynamic) var(--sapphire-semantic-time-motion-quick)}.sapphire-table td:has(.sapphire-table__row-expand-button){width:0}.sapphire-table__row--expanded .sapphire-table__row-expand-button{transform:rotate(180deg)}.sapphire-table--without-last-divider :not([role=presentation])>.sapphire-table__row:not(.is-focus,:not(.js-focus):focus-visible):last-child,.sapphire-table--without-last-divider [role=presentation]:last-child>.sapphire-table__row:not(.is-focus,:not(.js-focus):focus-visible){border-bottom-color:transparent}.sapphire-table--interactive .sapphire-table__row,.sapphire-table__row--interactive{cursor:default}.sapphire-table--interactive .sapphire-table__row.is-hover,.sapphire-table__row--interactive.is-hover,.sapphire-table--interactive .sapphire-table__row:not(.js-hover):hover,.sapphire-table__row--interactive:not(.js-hover):hover{--sapphire-table-row-bg: var( --sapphire-semantic-color-background-action-tertiary-hover );color:var(--sapphire-semantic-color-foreground-action-on-tertiary-hover);cursor:pointer}.sapphire-table--interactive .sapphire-table__row.sapphire-table__row--selected.is-hover,.sapphire-table__row--interactive.sapphire-table__row--selected.is-hover,.sapphire-table--interactive .sapphire-table__row.sapphire-table__row--selected:not(.js-hover):hover,.sapphire-table__row--interactive.sapphire-table__row--selected:not(.js-hover):hover{--sapphire-table-row-bg: var( --sapphire-semantic-color-background-action-select-secondary-hover )}.sapphire-table__row--highlighted{--sapphire-table-row-bg: var( --sapphire-semantic-color-background-action-highlight )}.sapphire-table__row--highlighted:after{content:\"\";position:absolute;z-index:2;left:0;height:100%;width:var(--sapphire-semantic-size-border-md);background:var(--sapphire-semantic-color-border-accent);pointer-events:none}.sapphire-table__tfoot{position:relative;z-index:2;--sapphire-table-rowgroup-bg: var( --sapphire-semantic-color-background-neutral-subtle )}.sapphire-table__selection-action-bar{display:flex;align-items:center;justify-content:space-between;padding:var(--sapphire-semantic-size-spacing-sm) var(--sapphire-semantic-size-spacing-lg);background:var(--sapphire-semantic-color-background-neutral-subtle);position:sticky;top:0;left:0;z-index:3}.sapphire-table__footer{position:relative;z-index:2}.sapphire-table__footer--sticky{position:sticky;bottom:0;left:0}.sapphire-table__footer--virtualized{position:absolute;z-index:2;bottom:0;right:0;left:0}sp-table{display:block}\n"] });
|
|
7774
7104
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TableComponent, decorators: [{
|
|
7775
7105
|
type: Component,
|
|
7776
7106
|
args: [{ selector: 'sp-table', template: `
|
|
@@ -7783,7 +7113,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
7783
7113
|
'[style.max-height]': 'maxHeight',
|
|
7784
7114
|
'[class.sapphire-table--overflow]': 'height || maxHeight',
|
|
7785
7115
|
'[class.sapphire-table--interactive]': 'isInteractive',
|
|
7786
|
-
}, hostDirectives: [UseComponentStylesOnHost], standalone: false, styles: [".sapphire-table{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;flex-direction:column;justify-content:space-between;background-color:var(--sapphire-semantic-color-background-surface)}.sapphire-table--overflow{overflow:auto}.sapphire-table__table{border-collapse:collapse;border-spacing:0;width:100%;table-layout:auto}.sapphire-table__table--fixed-layout{table-layout:fixed}.sapphire-table-sortedIcon,.sapphire-table-sortableIcon{display:inline-flex;visibility:hidden;vertical-align:top}.sapphire-table__head{top:0;z-index:2;line-height:var(--sapphire-semantic-size-line-height-md);--sapphire-table-row-bg: var(--sapphire-semantic-color-background-surface)}.sapphire-table__cell,.sapphire-table__headCell,.sapphire-table__selectionCell{box-sizing:border-box;font-size:var(--sapphire-semantic-size-font-body-md);line-height:var(--sapphire-semantic-size-line-height-md)}.sapphire-table__head--sticky{position:sticky}.sapphire-table__cell--alignLeft{text-align:left}.sapphire-table__cell--alignCenter{text-align:center}.sapphire-table__cell--alignRight{text-align:end}.sapphire-table__headCell{color:var(--sapphire-semantic-color-foreground-primary);box-sizing:border-box;font-size:var(--sapphire-semantic-size-font-body-sm);font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-medium);line-height:var(--sapphire-semantic-size-line-height-md);vertical-align:top}.sapphire-table__headCell_container{padding:var(--sapphire-semantic-size-spacing-xs) var(--sapphire-table-cell-spacing-h);display:inline-flex;align-items:center;box-sizing:border-box;width:100%}.sapphire-table__cell--alignRight .sapphire-table__headCell_container{justify-content:flex-end}.sapphire-table__cell--alignLeft .sapphire-table__headCell_container{justify-content:flex-start}.sapphire-table__cell--alignCenter .sapphire-table__headCell_container{justify-content:center}.sapphire-table__row,.sapphire-table__cell,.sapphire-table__headCell,.sapphire-table__selectionCell{outline:none;position:relative;z-index:1}.sapphire-table__headCell.is-focus .sapphire-table__headCell_container:after,.sapphire-table__headCell:not(.js-focus):focus-visible .sapphire-table__headCell_container:after,.sapphire-table__cell.is-focus:after,.sapphire-table__cell:not(.js-focus):focus-visible:after,.sapphire-table__selectionCell.is-focus:after,.sapphire-table__selectionCell:not(.js-focus):focus-visible:after,.sapphire-table__row.is-focus:after,.sapphire-table__row:not(.js-focus):focus-visible:after,.sapphire-table__row-expanded-view.is-focus:after,.sapphire-table__row-expanded-view:not(.js-focus):focus-visible:after{content:\"\";outline:none;border-radius:var(--sapphire-semantic-size-radius-sm);box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring);position:absolute;inset:0;z-index:3}.sapphire-table__headCell.is-focus .sapphire-table__headCell_container,.sapphire-table__headCell:not(.js-focus):focus-visible .sapphire-table__headCell_container{border-radius:var(--sapphire-semantic-size-radius-sm)}.sapphire-table__headCell.sapphire-table__headCell--sortable.is-hover .sapphire-table__headCell_container,.sapphire-table__headCell.sapphire-table__headCell--sortable:not(.js-hover):hover .sapphire-table__headCell_container{color:var(--sapphire-semantic-color-foreground-action-on-tertiary-hover);border-radius:var(--sapphire-semantic-size-radius-sm)}.sapphire-table__headCell.sapphire-table__headCell--sortable{cursor:pointer}.sapphire-table__headCell--sortable:not(sapphire-table__headCell--sorted):hover .sapphire-table-sortableIcon{visibility:visible}.sapphire-table__headCell--sorted .sapphire-table-sortedIcon{visibility:visible;padding-left:var(--sapphire-semantic-size-spacing-2xs)}.sapphire-table__headCell .sapphire-table-sortedIcon,.sapphire-table__headCell .sapphire-table-sortableIcon{padding-left:var(--sapphire-semantic-size-spacing-2xs)}.sapphire-table__cell--alignRight .sapphire-table-sortedIcon,.sapphire-table__cell--alignRight .sapphire-table-sortableIcon{padding-right:var(--sapphire-semantic-size-spacing-2xs)}.sapphire-table__headCell__text,.sapphire-table__headCell__icon{vertical-align:top;display:inline-block}.sapphire-table__body{position:relative;overflow:auto}.sapphire-table__cell{box-sizing:border-box;color:var(--sapphire-semantic-color-foreground-primary);font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-regular);overflow-wrap:break-word;align-content:center;padding:var(--sapphire-table-cell-spacing-v) var(--sapphire-table-cell-spacing-h)}.sapphire-table__cell-contents{display:block;width:100%;overflow-wrap:break-word}.sapphire-table__cell--ellipsed,.sapphire-table__headCell_content--ellipsed,.sapphire-table__cell--ellipsed .sapphire-table__cell-contents{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sapphire-table__table{--sapphire-table-cell-spacing-h: var(--sapphire-semantic-size-spacing-sm);--sapphire-table-cell-spacing-v: var(--sapphire-semantic-size-spacing-sm)}.sapphire-table__table--spacing-sm{--sapphire-table-cell-spacing-h: var(--sapphire-semantic-size-spacing-sm);--sapphire-table-cell-spacing-v: var(--sapphire-semantic-size-spacing-xs)}.sapphire-table__table--spacing-lg{--sapphire-table-cell-spacing-h: var(--sapphire-semantic-size-spacing-md);--sapphire-table-cell-spacing-v: var(--sapphire-semantic-size-spacing-md)}.sapphire-table__table--spacing-xl{--sapphire-table-cell-spacing-h: var(--sapphire-semantic-size-spacing-lg);--sapphire-table-cell-spacing-v: var(--sapphire-semantic-size-spacing-lg)}.sapphire-table__selectionCell{line-height:0;padding:var(--sapphire-table-cell-spacing-v) var(--sapphire-table-cell-spacing-h);box-sizing:content-box}.sapphire-table__head .sapphire-table__selectionCell{padding:var(--sapphire-semantic-size-spacing-2xs) var(--sapphire-table-cell-spacing-h)}td.sapphire-table__selectionCell,th.sapphire-table__selectionCell{width:var(--sapphire-global-size-generic-50)}td.sapphire-table__selectionCell:first-child,th.sapphire-table__selectionCell:first-child{position:sticky;left:0;z-index:2}.sapphire-table__tfoot .sapphire-table__cell{font-weight:var(--sapphire-semantic-font-weight-default-medium)}.sapphire-table__cell:before,.sapphire-table__headCell_container:before,.sapphire-table__selectionCell:before{content:\"\";position:absolute;inset:0;background-color:var(--sapphire-table-row-bg-active, var(--sapphire-table-row-bg));z-index:-1;pointer-events:none}.sapphire-table__cell,.sapphire-table__headCell_container,.sapphire-table__selectionCell{background-color:var(--sapphire-semantic-color-background-surface)}.sapphire-table__row{box-sizing:border-box;position:relative;border-bottom:var(--sapphire-semantic-size-border-sm) solid var(--sapphire-semantic-color-border-secondary);--sapphire-table-row-bg: var( --sapphire-table-rowgroup-bg, var(--sapphire-semantic-color-background-surface) )}.sapphire-table--interactive .sapphire-table__row--active{--sapphire-table-row-bg-active: var( --sapphire-semantic-color-background-action-tertiary-active )}.sapphire-table--interactive .sapphire-table__row--selected.sapphire-table__row--active{--sapphire-table-row-bg-active: var( --sapphire-semantic-color-background-action-select-secondary-hover )}.sapphire-table__row--selected{--sapphire-table-row-bg: var( --sapphire-semantic-color-background-action-select-secondary-default )}.sapphire-table__row.is-focus,.sapphire-table__row:not(.js-focus):focus-visible,.sapphire-table__row.sapphire-table__row--expanded{border-bottom-color:transparent}.sapphire-table__row-expanded-view{border-bottom:var(--sapphire-semantic-size-border-sm) solid var(--sapphire-semantic-color-border-secondary)}.sapphire-table__row-expand-button{display:inline-flex;transition:transform var(--sapphire-semantic-transitions-dynamic) var(--sapphire-semantic-time-motion-quick)}.sapphire-table td:has(.sapphire-table__row-expand-button){width:0}.sapphire-table__row--expanded .sapphire-table__row-expand-button{transform:rotate(180deg)}.sapphire-table--without-last-divider :not([role=presentation])>.sapphire-table__row:not(.is-focus,:not(.js-focus):focus-visible):last-child,.sapphire-table--without-last-divider [role=presentation]:last-child>.sapphire-table__row:not(.is-focus,:not(.js-focus):focus-visible){border-bottom-color:transparent}.sapphire-table--interactive .sapphire-table__row,.sapphire-table__row--interactive{cursor:default}.sapphire-table--interactive .sapphire-table__row.is-hover,.sapphire-table__row--interactive.is-hover,.sapphire-table--interactive .sapphire-table__row:not(.js-hover):hover,.sapphire-table__row--interactive:not(.js-hover):hover{--sapphire-table-row-bg: var( --sapphire-semantic-color-background-action-tertiary-hover );color:var(--sapphire-semantic-color-foreground-action-on-tertiary-hover);cursor:pointer}.sapphire-table--interactive .sapphire-table__row.sapphire-table__row--selected.is-hover,.sapphire-table__row--interactive.sapphire-table__row--selected.is-hover,.sapphire-table--interactive .sapphire-table__row.sapphire-table__row--selected:not(.js-hover):hover,.sapphire-table__row--interactive.sapphire-table__row--selected:not(.js-hover):hover{--sapphire-table-row-bg: var( --sapphire-semantic-color-background-action-select-secondary-hover )}.sapphire-table__row--highlighted{--sapphire-table-row-bg: var( --sapphire-semantic-color-background-action-highlight )}.sapphire-table__row--highlighted:after{content:\"\";position:absolute;z-index:2;left:0;height:100%;width:var(--sapphire-semantic-size-border-md);background:var(--sapphire-semantic-color-border-accent);pointer-events:none}.sapphire-table__tfoot{position:relative;z-index:2;--sapphire-table-rowgroup-bg: var( --sapphire-semantic-color-background-neutral-subtle )}.sapphire-table__selection-action-bar{display:flex;align-items:center;justify-content:space-between;padding:var(--sapphire-semantic-size-spacing-sm) var(--sapphire-semantic-size-spacing-lg);background:var(--sapphire-semantic-color-background-neutral-subtle);position:sticky;top:0;left:0;z-index:3}.sapphire-table__footer{position:relative;z-index:2;margin-top:var(--sapphire-semantic-size-spacing-2xs)}.sapphire-table__footer--sticky{position:sticky;bottom:0;left:0}.sapphire-table__footer--virtualized{position:absolute;z-index:2;bottom:0;right:0;left:0}sp-table{display:block}\n"] }]
|
|
7116
|
+
}, hostDirectives: [UseComponentStylesOnHost], standalone: false, styles: [".sapphire-table{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;flex-direction:column;justify-content:space-between;background-color:var(--sapphire-semantic-color-background-surface)}.sapphire-table--overflow{overflow:auto}.sapphire-table__table{border-collapse:collapse;border-spacing:0;width:100%;table-layout:auto}.sapphire-table__table--fixed-layout{table-layout:fixed}.sapphire-table-sortedIcon,.sapphire-table-sortableIcon{display:inline-flex;visibility:hidden;vertical-align:top}.sapphire-table__head{top:0;z-index:2;line-height:var(--sapphire-semantic-size-line-height-md);--sapphire-table-row-bg: var(--sapphire-semantic-color-background-surface)}.sapphire-table__cell,.sapphire-table__headCell,.sapphire-table__selectionCell{box-sizing:border-box;font-size:var(--sapphire-semantic-size-font-body-md);line-height:var(--sapphire-semantic-size-line-height-md)}.sapphire-table__head--sticky{position:sticky}.sapphire-table__cell--alignLeft{text-align:left}.sapphire-table__cell--alignCenter{text-align:center}.sapphire-table__cell--alignRight{text-align:end}.sapphire-table__headCell{color:var(--sapphire-semantic-color-foreground-primary);box-sizing:border-box;font-size:var(--sapphire-semantic-size-font-body-sm);font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-medium);line-height:var(--sapphire-semantic-size-line-height-md);vertical-align:top}.sapphire-table__headCell_container{padding:var(--sapphire-semantic-size-spacing-xs) var(--sapphire-table-cell-spacing-h);display:inline-flex;align-items:center;box-sizing:border-box;width:100%}.sapphire-table__cell--alignRight .sapphire-table__headCell_container{justify-content:flex-end}.sapphire-table__cell--alignLeft .sapphire-table__headCell_container{justify-content:flex-start}.sapphire-table__cell--alignCenter .sapphire-table__headCell_container{justify-content:center}.sapphire-table__row,.sapphire-table__cell,.sapphire-table__headCell,.sapphire-table__selectionCell{outline:none;position:relative;z-index:1}.sapphire-table__headCell.is-focus .sapphire-table__headCell_container:after,.sapphire-table__headCell:not(.js-focus):focus-visible .sapphire-table__headCell_container:after,.sapphire-table__cell.is-focus:after,.sapphire-table__cell:not(.js-focus):focus-visible:after,.sapphire-table__selectionCell.is-focus:after,.sapphire-table__selectionCell:not(.js-focus):focus-visible:after,.sapphire-table__row.is-focus:after,.sapphire-table__row:not(.js-focus):focus-visible:after,.sapphire-table__row-expanded-view.is-focus:after,.sapphire-table__row-expanded-view:not(.js-focus):focus-visible:after{content:\"\";outline:none;border-radius:var(--sapphire-semantic-size-radius-sm);box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring);position:absolute;inset:0;z-index:3}.sapphire-table__headCell.is-focus .sapphire-table__headCell_container,.sapphire-table__headCell:not(.js-focus):focus-visible .sapphire-table__headCell_container{border-radius:var(--sapphire-semantic-size-radius-sm)}.sapphire-table__headCell.sapphire-table__headCell--sortable.is-hover .sapphire-table__headCell_container,.sapphire-table__headCell.sapphire-table__headCell--sortable:not(.js-hover):hover .sapphire-table__headCell_container{color:var(--sapphire-semantic-color-foreground-action-on-tertiary-hover);border-radius:var(--sapphire-semantic-size-radius-sm)}.sapphire-table__headCell.sapphire-table__headCell--sortable{cursor:pointer}.sapphire-table__headCell--sortable:not(sapphire-table__headCell--sorted):hover .sapphire-table-sortableIcon{visibility:visible}.sapphire-table__headCell--sorted .sapphire-table-sortedIcon{visibility:visible;padding-left:var(--sapphire-semantic-size-spacing-2xs)}.sapphire-table__headCell .sapphire-table-sortedIcon,.sapphire-table__headCell .sapphire-table-sortableIcon{padding-left:var(--sapphire-semantic-size-spacing-2xs)}.sapphire-table__cell--alignRight .sapphire-table-sortedIcon,.sapphire-table__cell--alignRight .sapphire-table-sortableIcon{padding-right:var(--sapphire-semantic-size-spacing-2xs)}.sapphire-table__headCell__text,.sapphire-table__headCell__icon{vertical-align:top;display:inline-block}.sapphire-table__body{position:relative;overflow:auto}.sapphire-table__cell{box-sizing:border-box;color:var(--sapphire-semantic-color-foreground-primary);font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-regular);overflow-wrap:break-word;align-content:center;padding:var(--sapphire-table-cell-spacing-v) var(--sapphire-table-cell-spacing-h)}.sapphire-table__cell-contents{display:block;width:100%;overflow-wrap:break-word}.sapphire-table__cell--ellipsed,.sapphire-table__headCell_content--ellipsed,.sapphire-table__cell--ellipsed .sapphire-table__cell-contents{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sapphire-table__table{--sapphire-table-cell-spacing-h: var(--sapphire-semantic-size-spacing-sm);--sapphire-table-cell-spacing-v: var(--sapphire-semantic-size-spacing-sm)}.sapphire-table__table--spacing-sm{--sapphire-table-cell-spacing-h: var(--sapphire-semantic-size-spacing-sm);--sapphire-table-cell-spacing-v: var(--sapphire-semantic-size-spacing-xs)}.sapphire-table__table--spacing-lg{--sapphire-table-cell-spacing-h: var(--sapphire-semantic-size-spacing-md);--sapphire-table-cell-spacing-v: var(--sapphire-semantic-size-spacing-md)}.sapphire-table__table--spacing-xl{--sapphire-table-cell-spacing-h: var(--sapphire-semantic-size-spacing-lg);--sapphire-table-cell-spacing-v: var(--sapphire-semantic-size-spacing-lg)}.sapphire-table__selectionCell{line-height:0;padding:var(--sapphire-table-cell-spacing-v) var(--sapphire-table-cell-spacing-h);box-sizing:content-box}.sapphire-table__head .sapphire-table__selectionCell{padding:var(--sapphire-semantic-size-spacing-2xs) var(--sapphire-table-cell-spacing-h)}td.sapphire-table__selectionCell,th.sapphire-table__selectionCell{width:var(--sapphire-global-size-generic-50)}td.sapphire-table__selectionCell:first-child,th.sapphire-table__selectionCell:first-child{position:sticky;left:0;z-index:2}.sapphire-table__tfoot .sapphire-table__cell{font-weight:var(--sapphire-semantic-font-weight-default-medium)}.sapphire-table__cell:before,.sapphire-table__headCell_container:before,.sapphire-table__selectionCell:before{content:\"\";position:absolute;inset:0;background-color:var(--sapphire-table-row-bg-active, var(--sapphire-table-row-bg));z-index:-1;pointer-events:none}.sapphire-table__cell,.sapphire-table__headCell_container,.sapphire-table__selectionCell{background-color:var(--sapphire-semantic-color-background-surface)}.sapphire-table__row{box-sizing:border-box;position:relative;border-bottom:var(--sapphire-semantic-size-border-sm) solid var(--sapphire-semantic-color-border-secondary);--sapphire-table-row-bg: var( --sapphire-table-rowgroup-bg, var(--sapphire-semantic-color-background-surface) )}.sapphire-table--interactive .sapphire-table__row--active{--sapphire-table-row-bg-active: var( --sapphire-semantic-color-background-action-tertiary-active )}.sapphire-table--interactive .sapphire-table__row--selected.sapphire-table__row--active{--sapphire-table-row-bg-active: var( --sapphire-semantic-color-background-action-select-secondary-hover )}.sapphire-table__row--selected{--sapphire-table-row-bg: var( --sapphire-semantic-color-background-action-select-secondary-default )}.sapphire-table__row.is-focus,.sapphire-table__row:not(.js-focus):focus-visible,.sapphire-table__row.sapphire-table__row--expanded{border-bottom-color:transparent}.sapphire-table__row-expanded-view{border-bottom:var(--sapphire-semantic-size-border-sm) solid var(--sapphire-semantic-color-border-secondary)}.sapphire-table__row-expand-button{display:inline-flex;transition:transform var(--sapphire-semantic-transitions-dynamic) var(--sapphire-semantic-time-motion-quick)}.sapphire-table td:has(.sapphire-table__row-expand-button){width:0}.sapphire-table__row--expanded .sapphire-table__row-expand-button{transform:rotate(180deg)}.sapphire-table--without-last-divider :not([role=presentation])>.sapphire-table__row:not(.is-focus,:not(.js-focus):focus-visible):last-child,.sapphire-table--without-last-divider [role=presentation]:last-child>.sapphire-table__row:not(.is-focus,:not(.js-focus):focus-visible){border-bottom-color:transparent}.sapphire-table--interactive .sapphire-table__row,.sapphire-table__row--interactive{cursor:default}.sapphire-table--interactive .sapphire-table__row.is-hover,.sapphire-table__row--interactive.is-hover,.sapphire-table--interactive .sapphire-table__row:not(.js-hover):hover,.sapphire-table__row--interactive:not(.js-hover):hover{--sapphire-table-row-bg: var( --sapphire-semantic-color-background-action-tertiary-hover );color:var(--sapphire-semantic-color-foreground-action-on-tertiary-hover);cursor:pointer}.sapphire-table--interactive .sapphire-table__row.sapphire-table__row--selected.is-hover,.sapphire-table__row--interactive.sapphire-table__row--selected.is-hover,.sapphire-table--interactive .sapphire-table__row.sapphire-table__row--selected:not(.js-hover):hover,.sapphire-table__row--interactive.sapphire-table__row--selected:not(.js-hover):hover{--sapphire-table-row-bg: var( --sapphire-semantic-color-background-action-select-secondary-hover )}.sapphire-table__row--highlighted{--sapphire-table-row-bg: var( --sapphire-semantic-color-background-action-highlight )}.sapphire-table__row--highlighted:after{content:\"\";position:absolute;z-index:2;left:0;height:100%;width:var(--sapphire-semantic-size-border-md);background:var(--sapphire-semantic-color-border-accent);pointer-events:none}.sapphire-table__tfoot{position:relative;z-index:2;--sapphire-table-rowgroup-bg: var( --sapphire-semantic-color-background-neutral-subtle )}.sapphire-table__selection-action-bar{display:flex;align-items:center;justify-content:space-between;padding:var(--sapphire-semantic-size-spacing-sm) var(--sapphire-semantic-size-spacing-lg);background:var(--sapphire-semantic-color-background-neutral-subtle);position:sticky;top:0;left:0;z-index:3}.sapphire-table__footer{position:relative;z-index:2}.sapphire-table__footer--sticky{position:sticky;bottom:0;left:0}.sapphire-table__footer--virtualized{position:absolute;z-index:2;bottom:0;right:0;left:0}sp-table{display:block}\n"] }]
|
|
7787
7117
|
}], ctorParameters: function () { return []; }, propDecorators: { rowAction: [{
|
|
7788
7118
|
type: Output
|
|
7789
7119
|
}], stickyHeader: [{
|
|
@@ -7903,7 +7233,7 @@ class CdkVirtualScrollViewportFixDirective {
|
|
|
7903
7233
|
});
|
|
7904
7234
|
}
|
|
7905
7235
|
}
|
|
7906
|
-
CdkVirtualScrollViewportFixDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: CdkVirtualScrollViewportFixDirective, deps: [{ token: i1$
|
|
7236
|
+
CdkVirtualScrollViewportFixDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: CdkVirtualScrollViewportFixDirective, deps: [{ token: i1$4.CdkVirtualScrollViewport }], target: i0.ɵɵFactoryTarget.Directive });
|
|
7907
7237
|
CdkVirtualScrollViewportFixDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: CdkVirtualScrollViewportFixDirective, isStandalone: true, selector: "cdk-virtual-scroll-viewport", ngImport: i0 });
|
|
7908
7238
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: CdkVirtualScrollViewportFixDirective, decorators: [{
|
|
7909
7239
|
type: Directive,
|
|
@@ -7911,7 +7241,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
7911
7241
|
selector: 'cdk-virtual-scroll-viewport',
|
|
7912
7242
|
standalone: true,
|
|
7913
7243
|
}]
|
|
7914
|
-
}], ctorParameters: function () { return [{ type: i1$
|
|
7244
|
+
}], ctorParameters: function () { return [{ type: i1$4.CdkVirtualScrollViewport }]; } });
|
|
7915
7245
|
|
|
7916
7246
|
class SapphireTableModule {
|
|
7917
7247
|
}
|
|
@@ -8522,12 +7852,12 @@ class ModalService {
|
|
|
8522
7852
|
return this.open(componentOrTemplateRef, options, this.overlay.position().global().right());
|
|
8523
7853
|
}
|
|
8524
7854
|
}
|
|
8525
|
-
ModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalService, deps: [{ token: i1$
|
|
7855
|
+
ModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalService, deps: [{ token: i1$5.Dialog }, { token: SapphireOverlay }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
8526
7856
|
ModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalService, providedIn: 'root' });
|
|
8527
7857
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalService, decorators: [{
|
|
8528
7858
|
type: Injectable,
|
|
8529
7859
|
args: [{ providedIn: 'root' }]
|
|
8530
|
-
}], ctorParameters: function () { return [{ type: i1$
|
|
7860
|
+
}], ctorParameters: function () { return [{ type: i1$5.Dialog }, { type: SapphireOverlay }]; } });
|
|
8531
7861
|
|
|
8532
7862
|
/**
|
|
8533
7863
|
* Monitors host element's **scrolled** and **scrollable** state.
|
|
@@ -8645,7 +7975,7 @@ class ModalCloseButtonDirective {
|
|
|
8645
7975
|
(_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.close();
|
|
8646
7976
|
}
|
|
8647
7977
|
}
|
|
8648
|
-
ModalCloseButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalCloseButtonDirective, deps: [{ token: TranslateService }, { token: i1$
|
|
7978
|
+
ModalCloseButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalCloseButtonDirective, deps: [{ token: TranslateService }, { token: i1$5.DialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
8649
7979
|
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 });
|
|
8650
7980
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalCloseButtonDirective, decorators: [{
|
|
8651
7981
|
type: Directive,
|
|
@@ -8657,7 +7987,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
8657
7987
|
standalone: false,
|
|
8658
7988
|
}]
|
|
8659
7989
|
}], ctorParameters: function () {
|
|
8660
|
-
return [{ type: TranslateService }, { type: i1$
|
|
7990
|
+
return [{ type: TranslateService }, { type: i1$5.DialogRef, decorators: [{
|
|
8661
7991
|
type: Optional
|
|
8662
7992
|
}] }];
|
|
8663
7993
|
}, propDecorators: { close: [{
|
|
@@ -8710,7 +8040,7 @@ class ModalHeaderComponent {
|
|
|
8710
8040
|
}
|
|
8711
8041
|
}
|
|
8712
8042
|
ModalHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalHeaderComponent, deps: [{ token: IconRegistry }], target: i0.ɵɵFactoryTarget.Component });
|
|
8713
|
-
ModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ModalHeaderComponent, selector: "sp-modal-header", inputs: { subheading: "subheading", hideCloseButton: "hideCloseButton" }, outputs: { closeEventEmitter: "closeClicked" }, host: { classAttribute: "sapphire-modal-layout__header-container" }, hostDirectives: [{ directive: ModalHeaderDirective, inputs: ["id", "id"] }, { directive: UseComponentStyles }], ngImport: i0, template: "<div class=\"sapphire-modal-layout__header\" _spUseComponentStyles>\n <ng-content select=\"[spModalBackButton]\"></ng-content>\n\n <div class=\"sapphire-modal-layout__heading-container\" _spUseComponentStyles>\n <
|
|
8043
|
+
ModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ModalHeaderComponent, selector: "sp-modal-header", inputs: { subheading: "subheading", hideCloseButton: "hideCloseButton" }, outputs: { closeEventEmitter: "closeClicked" }, host: { classAttribute: "sapphire-modal-layout__header-container" }, hostDirectives: [{ directive: ModalHeaderDirective, inputs: ["id", "id"] }, { directive: UseComponentStyles }], ngImport: i0, template: "<div class=\"sapphire-modal-layout__header\" _spUseComponentStyles>\n <ng-content select=\"[spModalBackButton]\"></ng-content>\n\n <div class=\"sapphire-modal-layout__heading-container\" _spUseComponentStyles>\n <h5 sp-heading><ng-content></ng-content></h5>\n <div\n *ngIf=\"!!subheading\"\n class=\"sapphire-modal-layout__subheading\"\n _spUseComponentStyles\n >\n {{ subheading }}\n </div>\n </div>\n\n <button\n *ngIf=\"!hideCloseButton\"\n sp-icon-button\n variant=\"tertiary\"\n size=\"md\"\n (click)=\"close($event)\"\n spModalCloseButton\n >\n <sp-icon name=\"close\"></sp-icon>\n </button>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HeadingComponent, selector: "h1[sp-heading],h2[sp-heading],h3[sp-heading],h4[sp-heading],h5[sp-heading],h6[sp-heading]", inputs: ["sp-heading", "color"] }, { kind: "component", type: IconComponent, selector: "sp-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: IconButtonComponent, selector: "button[sp-icon-button], a[sp-icon-button]", inputs: ["variant", "size", "disabled", "type"] }, { kind: "directive", type: UseComponentStyles, selector: "[_spUseComponentStyles]" }, { kind: "directive", type: ModalCloseButtonDirective, selector: "button[spModalCloseButton]" }] });
|
|
8714
8044
|
__decorate([
|
|
8715
8045
|
CoerceBoolean
|
|
8716
8046
|
], ModalHeaderComponent.prototype, "hideCloseButton", void 0);
|
|
@@ -8721,7 +8051,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
8721
8051
|
UseComponentStyles,
|
|
8722
8052
|
], host: {
|
|
8723
8053
|
class: 'sapphire-modal-layout__header-container',
|
|
8724
|
-
}, standalone: false, template: "<div class=\"sapphire-modal-layout__header\" _spUseComponentStyles>\n <ng-content select=\"[spModalBackButton]\"></ng-content>\n\n <div class=\"sapphire-modal-layout__heading-container\" _spUseComponentStyles>\n <
|
|
8054
|
+
}, standalone: false, template: "<div class=\"sapphire-modal-layout__header\" _spUseComponentStyles>\n <ng-content select=\"[spModalBackButton]\"></ng-content>\n\n <div class=\"sapphire-modal-layout__heading-container\" _spUseComponentStyles>\n <h5 sp-heading><ng-content></ng-content></h5>\n <div\n *ngIf=\"!!subheading\"\n class=\"sapphire-modal-layout__subheading\"\n _spUseComponentStyles\n >\n {{ subheading }}\n </div>\n </div>\n\n <button\n *ngIf=\"!hideCloseButton\"\n sp-icon-button\n variant=\"tertiary\"\n size=\"md\"\n (click)=\"close($event)\"\n spModalCloseButton\n >\n <sp-icon name=\"close\"></sp-icon>\n </button>\n</div>\n" }]
|
|
8725
8055
|
}], ctorParameters: function () { return [{ type: IconRegistry }]; }, propDecorators: { subheading: [{
|
|
8726
8056
|
type: Input
|
|
8727
8057
|
}], hideCloseButton: [{
|
|
@@ -8781,7 +8111,7 @@ class ModalBaseComponent {
|
|
|
8781
8111
|
this.dialogRef.immediateClose();
|
|
8782
8112
|
}
|
|
8783
8113
|
}
|
|
8784
|
-
ModalBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalBaseComponent, deps: [{ token: i1$
|
|
8114
|
+
ModalBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalBaseComponent, deps: [{ token: i1$5.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
8785
8115
|
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 });
|
|
8786
8116
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalBaseComponent, decorators: [{
|
|
8787
8117
|
type: Component,
|
|
@@ -8797,7 +8127,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
8797
8127
|
},
|
|
8798
8128
|
standalone: false,
|
|
8799
8129
|
}]
|
|
8800
|
-
}], ctorParameters: function () { return [{ type: i1$
|
|
8130
|
+
}], ctorParameters: function () { return [{ type: i1$5.DialogRef }]; }, propDecorators: { ariaLabel: [{
|
|
8801
8131
|
type: Input,
|
|
8802
8132
|
args: ['aria-label']
|
|
8803
8133
|
}], ariaLabelledBy: [{
|
|
@@ -8829,8 +8159,8 @@ class DialogComponent extends ModalBaseComponent {
|
|
|
8829
8159
|
this.padded = false;
|
|
8830
8160
|
}
|
|
8831
8161
|
}
|
|
8832
|
-
DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DialogComponent, deps: [{ token: i1$
|
|
8833
|
-
DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: DialogComponent, selector: "sp-dialog", inputs: { size: "size", padded: "padded" }, 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--padded": "padded === true", "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-
|
|
8162
|
+
DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DialogComponent, deps: [{ token: i1$5.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
8163
|
+
DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: DialogComponent, selector: "sp-dialog", inputs: { size: "size", padded: "padded" }, 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--padded": "padded === true", "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-2xl);background:var(--sapphire-semantic-color-background-popover);font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-foreground-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:var(--sapphire-semantic-transitions-fade);animation-fill-mode:forwards}.sapphire-dialog--padded{padding:var(--sapphire-semantic-size-spacing-3xl) var(--sapphire-semantic-size-spacing-3xl) var(--sapphire-semantic-size-spacing-2xl) var(--sapphire-semantic-size-spacing-3xl)}.sapphire-dialog--exiting{animation-name:fade-out}.sapphire-dialog--xs{width:var(--sapphire-global-size-generic-900)}.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"] });
|
|
8834
8164
|
__decorate([
|
|
8835
8165
|
CoerceBoolean
|
|
8836
8166
|
], DialogComponent.prototype, "padded", void 0);
|
|
@@ -8844,8 +8174,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
8844
8174
|
'[class.sapphire-dialog--lg]': "size === 'lg'",
|
|
8845
8175
|
'[class.sapphire-dialog--padded]': 'padded === true',
|
|
8846
8176
|
'[class.sapphire-dialog--exiting]': 'dialogRef.closing',
|
|
8847
|
-
}, hostDirectives: [UseComponentStylesOnHost], standalone: false, 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-
|
|
8848
|
-
}], ctorParameters: function () { return [{ type: i1$
|
|
8177
|
+
}, hostDirectives: [UseComponentStylesOnHost], standalone: false, 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-2xl);background:var(--sapphire-semantic-color-background-popover);font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-foreground-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:var(--sapphire-semantic-transitions-fade);animation-fill-mode:forwards}.sapphire-dialog--padded{padding:var(--sapphire-semantic-size-spacing-3xl) var(--sapphire-semantic-size-spacing-3xl) var(--sapphire-semantic-size-spacing-2xl) var(--sapphire-semantic-size-spacing-3xl)}.sapphire-dialog--exiting{animation-name:fade-out}.sapphire-dialog--xs{width:var(--sapphire-global-size-generic-900)}.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"] }]
|
|
8178
|
+
}], ctorParameters: function () { return [{ type: i1$5.DialogRef }]; }, propDecorators: { size: [{
|
|
8849
8179
|
type: Input
|
|
8850
8180
|
}], padded: [{
|
|
8851
8181
|
type: Input
|
|
@@ -8918,6 +8248,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
8918
8248
|
args: [{ selector: 'sp-modal-footer', hostDirectives: [{ directive: ModalFooterDirective }], standalone: false, template: "<div class=\"sapphire-modal-layout__footer\" _spUseComponentStyles>\n <ng-content></ng-content>\n</div>\n" }]
|
|
8919
8249
|
}], ctorParameters: function () { return []; } });
|
|
8920
8250
|
|
|
8251
|
+
class ModalSectionComponent {
|
|
8252
|
+
constructor() {
|
|
8253
|
+
this.isFormSection = false;
|
|
8254
|
+
}
|
|
8255
|
+
}
|
|
8256
|
+
ModalSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8257
|
+
ModalSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ModalSectionComponent, selector: "sp-modal-section", inputs: { isFormSection: "isFormSection" }, hostDirectives: [{ directive: UseComponentStyles }], ngImport: i0, template: "<ng-container *ngIf=\"isFormSection; else sectionBlock\">\n <fieldset _spUseComponentStyles class=\"sapphire-modal-layout__section\">\n <legend _spUseComponentStyles class=\"sapphire-modal-layout__section-title\">\n <ng-container [ngTemplateOutlet]=\"titleTpl\"></ng-container>\n </legend>\n <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\n </fieldset>\n</ng-container>\n\n<ng-template #sectionBlock>\n <section _spUseComponentStyles class=\"sapphire-modal-layout__section\">\n <header _spUseComponentStyles class=\"sapphire-modal-layout__section-title\">\n <ng-container [ngTemplateOutlet]=\"titleTpl\"></ng-container>\n </header>\n <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\n </section>\n</ng-template>\n\n<ng-template #contentTpl>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #titleTpl>\n <h5 semibold=\"true\" sp-body size=\"sm\">\n <ng-content select=\"sp-modal-section-title\"></ng-content>\n </h5>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BodyComponent, selector: "[sp-body]", inputs: ["size", "color", "bold", "semibold"] }, { kind: "directive", type: UseComponentStyles, selector: "[_spUseComponentStyles]" }] });
|
|
8258
|
+
__decorate([
|
|
8259
|
+
CoerceBoolean
|
|
8260
|
+
], ModalSectionComponent.prototype, "isFormSection", void 0);
|
|
8261
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalSectionComponent, decorators: [{
|
|
8262
|
+
type: Component,
|
|
8263
|
+
args: [{ selector: 'sp-modal-section', hostDirectives: [UseComponentStyles], standalone: false, template: "<ng-container *ngIf=\"isFormSection; else sectionBlock\">\n <fieldset _spUseComponentStyles class=\"sapphire-modal-layout__section\">\n <legend _spUseComponentStyles class=\"sapphire-modal-layout__section-title\">\n <ng-container [ngTemplateOutlet]=\"titleTpl\"></ng-container>\n </legend>\n <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\n </fieldset>\n</ng-container>\n\n<ng-template #sectionBlock>\n <section _spUseComponentStyles class=\"sapphire-modal-layout__section\">\n <header _spUseComponentStyles class=\"sapphire-modal-layout__section-title\">\n <ng-container [ngTemplateOutlet]=\"titleTpl\"></ng-container>\n </header>\n <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\n </section>\n</ng-template>\n\n<ng-template #contentTpl>\n <ng-content></ng-content>\n</ng-template>\n\n<ng-template #titleTpl>\n <h5 semibold=\"true\" sp-body size=\"sm\">\n <ng-content select=\"sp-modal-section-title\"></ng-content>\n </h5>\n</ng-template>\n" }]
|
|
8264
|
+
}], propDecorators: { isFormSection: [{
|
|
8265
|
+
type: Input
|
|
8266
|
+
}] } });
|
|
8267
|
+
|
|
8268
|
+
class ModalSectionTitleDirective {
|
|
8269
|
+
}
|
|
8270
|
+
ModalSectionTitleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalSectionTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
8271
|
+
ModalSectionTitleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: ModalSectionTitleDirective, selector: "sp-modal-section-title", ngImport: i0 });
|
|
8272
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalSectionTitleDirective, decorators: [{
|
|
8273
|
+
type: Directive,
|
|
8274
|
+
args: [{
|
|
8275
|
+
selector: 'sp-modal-section-title',
|
|
8276
|
+
standalone: false,
|
|
8277
|
+
}]
|
|
8278
|
+
}] });
|
|
8279
|
+
|
|
8921
8280
|
/**
|
|
8922
8281
|
* Makes a clickable element a trigger for a modal
|
|
8923
8282
|
*/
|
|
@@ -8990,12 +8349,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
8990
8349
|
class ModalLayoutComponent {
|
|
8991
8350
|
}
|
|
8992
8351
|
ModalLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8993
|
-
ModalLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ModalLayoutComponent, selector: "sp-modal-layout", host: { classAttribute: "sapphire-modal-layout" }, hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: "<ng-content select=\"sp-modal-header, [spModalHeader]\"></ng-content>\n<ng-content select=\"sp-modal-body\"></ng-content>\n<ng-content select=\"sp-modal-footer, [spModalFooter]\"></ng-content>\n", styles: [".sapphire-modal-layout{display:flex;flex-direction:column;height:100%;min-height:0;font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-foreground-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-
|
|
8352
|
+
ModalLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ModalLayoutComponent, selector: "sp-modal-layout", host: { classAttribute: "sapphire-modal-layout" }, hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: "<ng-content select=\"sp-modal-header, [spModalHeader]\"></ng-content>\n<ng-content select=\"sp-modal-body\"></ng-content>\n<ng-content select=\"sp-modal-footer, [spModalFooter]\"></ng-content>\n", styles: [".sapphire-modal-layout{display:flex;flex-direction:column;height:100%;min-height:0;font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-foreground-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-xl) var(--sapphire-semantic-size-spacing-xl) var(--sapphire-semantic-size-spacing-xl) var(--sapphire-semantic-size-spacing-2xl);gap:var(--sapphire-semantic-size-spacing-sm);min-height:var(--sapphire-semantic-size-height-control-md)}.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-2xl) var(--sapphire-semantic-size-spacing-container-horizontal-md) var(--sapphire-semantic-size-spacing-2xl) var(--sapphire-semantic-size-spacing-container-horizontal-md)}.sapphire-modal-layout__heading-container{flex:1;display:flex;flex-direction:column;justify-content:center;word-break:break-word}.sapphire-modal-layout__subheading{color:var(--sapphire-semantic-color-foreground-secondary);margin-top:var(--sapphire-semantic-size-spacing-2xs)}.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-secondary)}.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-lg)}.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-secondary)}.sapphire-modal-layout__section{margin:0;padding:0;border:none}.sapphire-modal-layout__section-title{margin-left:calc(var(--sapphire-semantic-size-spacing-container-horizontal-md) * -1);width:calc(100% + var(--sapphire-semantic-size-spacing-container-horizontal-md) * 2);padding:0 var(--sapphire-semantic-size-spacing-container-horizontal-md);min-height:var(--sapphire-global-size-generic-100);background-color:var(--sapphire-semantic-color-background-surface);display:flex;align-items:center;position:sticky;top:0}.sapphire-modal-layout__section-title:before{content:\"\";background:var(--sapphire-semantic-color-background-neutral-subtle);position:absolute;inset:0;z-index:-1}\n"] });
|
|
8994
8353
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalLayoutComponent, decorators: [{
|
|
8995
8354
|
type: Component,
|
|
8996
8355
|
args: [{ selector: 'sp-modal-layout', template: "<ng-content select=\"sp-modal-header, [spModalHeader]\"></ng-content>\n<ng-content select=\"sp-modal-body\"></ng-content>\n<ng-content select=\"sp-modal-footer, [spModalFooter]\"></ng-content>\n", host: {
|
|
8997
8356
|
class: 'sapphire-modal-layout',
|
|
8998
|
-
}, hostDirectives: [UseComponentStylesOnHost], standalone: false, styles: [".sapphire-modal-layout{display:flex;flex-direction:column;height:100%;min-height:0;font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-foreground-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-
|
|
8357
|
+
}, hostDirectives: [UseComponentStylesOnHost], standalone: false, styles: [".sapphire-modal-layout{display:flex;flex-direction:column;height:100%;min-height:0;font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-foreground-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-xl) var(--sapphire-semantic-size-spacing-xl) var(--sapphire-semantic-size-spacing-xl) var(--sapphire-semantic-size-spacing-2xl);gap:var(--sapphire-semantic-size-spacing-sm);min-height:var(--sapphire-semantic-size-height-control-md)}.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-2xl) var(--sapphire-semantic-size-spacing-container-horizontal-md) var(--sapphire-semantic-size-spacing-2xl) var(--sapphire-semantic-size-spacing-container-horizontal-md)}.sapphire-modal-layout__heading-container{flex:1;display:flex;flex-direction:column;justify-content:center;word-break:break-word}.sapphire-modal-layout__subheading{color:var(--sapphire-semantic-color-foreground-secondary);margin-top:var(--sapphire-semantic-size-spacing-2xs)}.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-secondary)}.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-lg)}.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-secondary)}.sapphire-modal-layout__section{margin:0;padding:0;border:none}.sapphire-modal-layout__section-title{margin-left:calc(var(--sapphire-semantic-size-spacing-container-horizontal-md) * -1);width:calc(100% + var(--sapphire-semantic-size-spacing-container-horizontal-md) * 2);padding:0 var(--sapphire-semantic-size-spacing-container-horizontal-md);min-height:var(--sapphire-global-size-generic-100);background-color:var(--sapphire-semantic-color-background-surface);display:flex;align-items:center;position:sticky;top:0}.sapphire-modal-layout__section-title:before{content:\"\";background:var(--sapphire-semantic-color-background-neutral-subtle);position:absolute;inset:0;z-index:-1}\n"] }]
|
|
8999
8358
|
}] });
|
|
9000
8359
|
|
|
9001
8360
|
/**
|
|
@@ -9031,7 +8390,7 @@ class ConfirmationDialogComponent {
|
|
|
9031
8390
|
}
|
|
9032
8391
|
}
|
|
9033
8392
|
ConfirmationDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9034
|
-
ConfirmationDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ConfirmationDialogComponent, selector: "sp-confirmation-dialog", inputs: { heading: "heading", primaryActionLabel: "primaryActionLabel", secondaryActionLabel: "secondaryActionLabel" }, outputs: { primaryActionSelected: "primaryActionSelected", secondaryActionSelected: "secondaryActionSelected" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: DialogComponent, descendants: true }], exportAs: ["spConfirmationDialog"], ngImport: i0, template: "<sp-dialog role=\"alertdialog\">\n <sp-modal-layout>\n <sp-modal-header *ngIf=\"heading\" hideCloseButton>{{\n heading\n }}</sp-modal-header>\n <sp-modal-body><ng-content></ng-content></sp-modal-body>\n <sp-modal-footer>\n <sp-button-group>\n <button\n sp-button\n variant=\"secondary\"\n (click)=\"dialog && secondaryActionSelected.emit({dialog})\"\n >\n {{ secondaryActionLabel }}\n </button>\n <button\n sp-button\n variant=\"primary\"\n (click)=\"dialog && primaryActionSelected.emit({dialog})\"\n >\n {{ primaryActionLabel }}\n </button>\n </sp-button-group>\n </sp-modal-footer>\n </sp-modal-layout>\n</sp-dialog>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[sp-button], a[sp-button]", inputs: ["variant", "size", "disabled", "iconAlign", "type"] }, { kind: "component", type: ButtonGroupComponent, selector: "sp-button-group", inputs: ["align", "stretch", "spacing", "orientation"] }, { kind: "component", type: ModalLayoutComponent, selector: "sp-modal-layout" }, { kind: "component", type: ModalHeaderComponent, selector: "sp-modal-header", inputs: ["subheading", "hideCloseButton"], outputs: ["closeClicked"] }, { kind: "component", type: ModalBodyComponent, selector: "sp-modal-body", inputs: ["noPadding"] }, { kind: "component", type: ModalFooterComponent, selector: "sp-modal-footer" }, { kind: "component", type: DialogComponent, selector: "sp-dialog", inputs: ["size", "padded"] }] });
|
|
8393
|
+
ConfirmationDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ConfirmationDialogComponent, selector: "sp-confirmation-dialog", inputs: { heading: "heading", primaryActionLabel: "primaryActionLabel", secondaryActionLabel: "secondaryActionLabel" }, outputs: { primaryActionSelected: "primaryActionSelected", secondaryActionSelected: "secondaryActionSelected" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: DialogComponent, descendants: true }], exportAs: ["spConfirmationDialog"], ngImport: i0, template: "<sp-dialog role=\"alertdialog\">\n <sp-modal-layout>\n <sp-modal-header *ngIf=\"heading\" hideCloseButton>{{\n heading\n }}</sp-modal-header>\n <sp-modal-body><ng-content></ng-content></sp-modal-body>\n <sp-modal-footer>\n <sp-button-group>\n <button\n sp-button\n variant=\"secondary\"\n (click)=\"dialog && secondaryActionSelected.emit({dialog})\"\n >\n {{ secondaryActionLabel }}\n </button>\n <button\n sp-button\n variant=\"primary\"\n (click)=\"dialog && primaryActionSelected.emit({dialog})\"\n >\n {{ primaryActionLabel }}\n </button>\n </sp-button-group>\n </sp-modal-footer>\n </sp-modal-layout>\n</sp-dialog>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[sp-button], a[sp-button]", inputs: ["variant", "size", "disabled", "iconAlign", "type", "tabindex"] }, { kind: "component", type: ButtonGroupComponent, selector: "sp-button-group", inputs: ["align", "stretch", "spacing", "orientation"] }, { kind: "component", type: ModalLayoutComponent, selector: "sp-modal-layout" }, { kind: "component", type: ModalHeaderComponent, selector: "sp-modal-header", inputs: ["subheading", "hideCloseButton"], outputs: ["closeClicked"] }, { kind: "component", type: ModalBodyComponent, selector: "sp-modal-body", inputs: ["noPadding"] }, { kind: "component", type: ModalFooterComponent, selector: "sp-modal-footer" }, { kind: "component", type: DialogComponent, selector: "sp-dialog", inputs: ["size", "padded"] }] });
|
|
9035
8394
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
|
|
9036
8395
|
type: Component,
|
|
9037
8396
|
args: [{ selector: 'sp-confirmation-dialog', exportAs: 'spConfirmationDialog', standalone: false, template: "<sp-dialog role=\"alertdialog\">\n <sp-modal-layout>\n <sp-modal-header *ngIf=\"heading\" hideCloseButton>{{\n heading\n }}</sp-modal-header>\n <sp-modal-body><ng-content></ng-content></sp-modal-body>\n <sp-modal-footer>\n <sp-button-group>\n <button\n sp-button\n variant=\"secondary\"\n (click)=\"dialog && secondaryActionSelected.emit({dialog})\"\n >\n {{ secondaryActionLabel }}\n </button>\n <button\n sp-button\n variant=\"primary\"\n (click)=\"dialog && primaryActionSelected.emit({dialog})\"\n >\n {{ primaryActionLabel }}\n </button>\n </sp-button-group>\n </sp-modal-footer>\n </sp-modal-layout>\n</sp-dialog>\n" }]
|
|
@@ -9084,7 +8443,7 @@ class DangerDialogComponent {
|
|
|
9084
8443
|
}
|
|
9085
8444
|
}
|
|
9086
8445
|
DangerDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DangerDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9087
|
-
DangerDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: DangerDialogComponent, selector: "sp-danger-dialog", inputs: { heading: "heading", primaryActionLabel: "primaryActionLabel", secondaryActionLabel: "secondaryActionLabel" }, outputs: { primaryActionSelected: "primaryActionSelected", secondaryActionSelected: "secondaryActionSelected" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: DialogComponent, descendants: true }], exportAs: ["spDangerDialog"], ngImport: i0, template: "<sp-dialog role=\"alertdialog\">\n <sp-modal-layout>\n <sp-modal-header *ngIf=\"heading\" hideCloseButton>{{\n heading\n }}</sp-modal-header>\n <sp-modal-body><ng-content></ng-content></sp-modal-body>\n <sp-modal-footer>\n <sp-button-group>\n <button\n sp-button\n variant=\"secondary\"\n (click)=\"dialog && secondaryActionSelected.emit({dialog})\"\n >\n {{ secondaryActionLabel }}\n </button>\n <button\n sp-button\n variant=\"danger\"\n (click)=\"dialog && primaryActionSelected.emit({dialog})\"\n >\n {{ primaryActionLabel }}\n </button>\n </sp-button-group>\n </sp-modal-footer>\n </sp-modal-layout>\n</sp-dialog>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[sp-button], a[sp-button]", inputs: ["variant", "size", "disabled", "iconAlign", "type"] }, { kind: "component", type: ButtonGroupComponent, selector: "sp-button-group", inputs: ["align", "stretch", "spacing", "orientation"] }, { kind: "component", type: ModalLayoutComponent, selector: "sp-modal-layout" }, { kind: "component", type: ModalHeaderComponent, selector: "sp-modal-header", inputs: ["subheading", "hideCloseButton"], outputs: ["closeClicked"] }, { kind: "component", type: ModalBodyComponent, selector: "sp-modal-body", inputs: ["noPadding"] }, { kind: "component", type: ModalFooterComponent, selector: "sp-modal-footer" }, { kind: "component", type: DialogComponent, selector: "sp-dialog", inputs: ["size", "padded"] }] });
|
|
8446
|
+
DangerDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: DangerDialogComponent, selector: "sp-danger-dialog", inputs: { heading: "heading", primaryActionLabel: "primaryActionLabel", secondaryActionLabel: "secondaryActionLabel" }, outputs: { primaryActionSelected: "primaryActionSelected", secondaryActionSelected: "secondaryActionSelected" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: DialogComponent, descendants: true }], exportAs: ["spDangerDialog"], ngImport: i0, template: "<sp-dialog role=\"alertdialog\">\n <sp-modal-layout>\n <sp-modal-header *ngIf=\"heading\" hideCloseButton>{{\n heading\n }}</sp-modal-header>\n <sp-modal-body><ng-content></ng-content></sp-modal-body>\n <sp-modal-footer>\n <sp-button-group>\n <button\n sp-button\n variant=\"secondary\"\n (click)=\"dialog && secondaryActionSelected.emit({dialog})\"\n >\n {{ secondaryActionLabel }}\n </button>\n <button\n sp-button\n variant=\"danger\"\n (click)=\"dialog && primaryActionSelected.emit({dialog})\"\n >\n {{ primaryActionLabel }}\n </button>\n </sp-button-group>\n </sp-modal-footer>\n </sp-modal-layout>\n</sp-dialog>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[sp-button], a[sp-button]", inputs: ["variant", "size", "disabled", "iconAlign", "type", "tabindex"] }, { kind: "component", type: ButtonGroupComponent, selector: "sp-button-group", inputs: ["align", "stretch", "spacing", "orientation"] }, { kind: "component", type: ModalLayoutComponent, selector: "sp-modal-layout" }, { kind: "component", type: ModalHeaderComponent, selector: "sp-modal-header", inputs: ["subheading", "hideCloseButton"], outputs: ["closeClicked"] }, { kind: "component", type: ModalBodyComponent, selector: "sp-modal-body", inputs: ["noPadding"] }, { kind: "component", type: ModalFooterComponent, selector: "sp-modal-footer" }, { kind: "component", type: DialogComponent, selector: "sp-dialog", inputs: ["size", "padded"] }] });
|
|
9088
8447
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DangerDialogComponent, decorators: [{
|
|
9089
8448
|
type: Component,
|
|
9090
8449
|
args: [{ selector: 'sp-danger-dialog', exportAs: 'spDangerDialog', standalone: false, template: "<sp-dialog role=\"alertdialog\">\n <sp-modal-layout>\n <sp-modal-header *ngIf=\"heading\" hideCloseButton>{{\n heading\n }}</sp-modal-header>\n <sp-modal-body><ng-content></ng-content></sp-modal-body>\n <sp-modal-footer>\n <sp-button-group>\n <button\n sp-button\n variant=\"secondary\"\n (click)=\"dialog && secondaryActionSelected.emit({dialog})\"\n >\n {{ secondaryActionLabel }}\n </button>\n <button\n sp-button\n variant=\"danger\"\n (click)=\"dialog && primaryActionSelected.emit({dialog})\"\n >\n {{ primaryActionLabel }}\n </button>\n </sp-button-group>\n </sp-modal-footer>\n </sp-modal-layout>\n</sp-dialog>\n" }]
|
|
@@ -9216,16 +8575,16 @@ class PanelComponent extends ModalBaseComponent {
|
|
|
9216
8575
|
this.size = 'lg';
|
|
9217
8576
|
}
|
|
9218
8577
|
}
|
|
9219
|
-
PanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PanelComponent, deps: [{ token: i1$
|
|
9220
|
-
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) var(--sapphire-semantic-transitions-standard);transform:translate(100%);width:var(--sapphire-semantic-size-width-panel-lg);background:var(--sapphire-semantic-color-background-
|
|
8578
|
+
PanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PanelComponent, deps: [{ token: i1$5.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
8579
|
+
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) var(--sapphire-semantic-transitions-standard);transform:translate(100%);width:var(--sapphire-semantic-size-width-panel-lg);background:var(--sapphire-semantic-color-background-popover)}.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;font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-foreground-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-xl) var(--sapphire-semantic-size-spacing-xl) var(--sapphire-semantic-size-spacing-xl) var(--sapphire-semantic-size-spacing-2xl);gap:var(--sapphire-semantic-size-spacing-sm);min-height:var(--sapphire-semantic-size-height-control-md)}.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-2xl) var(--sapphire-semantic-size-spacing-container-horizontal-md) var(--sapphire-semantic-size-spacing-2xl) var(--sapphire-semantic-size-spacing-container-horizontal-md)}.sapphire-modal-layout__heading-container{flex:1;display:flex;flex-direction:column;justify-content:center;word-break:break-word}.sapphire-modal-layout__subheading{color:var(--sapphire-semantic-color-foreground-secondary);margin-top:var(--sapphire-semantic-size-spacing-2xs)}.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-secondary)}.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-lg)}.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-secondary)}.sapphire-modal-layout__section{margin:0;padding:0;border:none}.sapphire-modal-layout__section-title{margin-left:calc(var(--sapphire-semantic-size-spacing-container-horizontal-md) * -1);width:calc(100% + var(--sapphire-semantic-size-spacing-container-horizontal-md) * 2);padding:0 var(--sapphire-semantic-size-spacing-container-horizontal-md);min-height:var(--sapphire-global-size-generic-100);background-color:var(--sapphire-semantic-color-background-surface);display:flex;align-items:center;position:sticky;top:0}.sapphire-modal-layout__section-title:before{content:\"\";background:var(--sapphire-semantic-color-background-neutral-subtle);position:absolute;inset:0;z-index:-1}\n"] });
|
|
9221
8580
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PanelComponent, decorators: [{
|
|
9222
8581
|
type: Component,
|
|
9223
8582
|
args: [{ selector: 'sp-panel', template: '<ng-content></ng-content>', host: {
|
|
9224
8583
|
class: 'sapphire-panel',
|
|
9225
8584
|
'[class.sapphire-panel--sm]': 'size === "sm"',
|
|
9226
8585
|
'[class.sapphire-panel--visible]': '!dialogRef.closing',
|
|
9227
|
-
}, hostDirectives: [UseComponentStylesOnHost], standalone: false, 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) var(--sapphire-semantic-transitions-standard);transform:translate(100%);width:var(--sapphire-semantic-size-width-panel-lg);background:var(--sapphire-semantic-color-background-
|
|
9228
|
-
}], ctorParameters: function () { return [{ type: i1$
|
|
8586
|
+
}, hostDirectives: [UseComponentStylesOnHost], standalone: false, 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) var(--sapphire-semantic-transitions-standard);transform:translate(100%);width:var(--sapphire-semantic-size-width-panel-lg);background:var(--sapphire-semantic-color-background-popover)}.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;font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-foreground-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-xl) var(--sapphire-semantic-size-spacing-xl) var(--sapphire-semantic-size-spacing-xl) var(--sapphire-semantic-size-spacing-2xl);gap:var(--sapphire-semantic-size-spacing-sm);min-height:var(--sapphire-semantic-size-height-control-md)}.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-2xl) var(--sapphire-semantic-size-spacing-container-horizontal-md) var(--sapphire-semantic-size-spacing-2xl) var(--sapphire-semantic-size-spacing-container-horizontal-md)}.sapphire-modal-layout__heading-container{flex:1;display:flex;flex-direction:column;justify-content:center;word-break:break-word}.sapphire-modal-layout__subheading{color:var(--sapphire-semantic-color-foreground-secondary);margin-top:var(--sapphire-semantic-size-spacing-2xs)}.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-secondary)}.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-lg)}.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-secondary)}.sapphire-modal-layout__section{margin:0;padding:0;border:none}.sapphire-modal-layout__section-title{margin-left:calc(var(--sapphire-semantic-size-spacing-container-horizontal-md) * -1);width:calc(100% + var(--sapphire-semantic-size-spacing-container-horizontal-md) * 2);padding:0 var(--sapphire-semantic-size-spacing-container-horizontal-md);min-height:var(--sapphire-global-size-generic-100);background-color:var(--sapphire-semantic-color-background-surface);display:flex;align-items:center;position:sticky;top:0}.sapphire-modal-layout__section-title:before{content:\"\";background:var(--sapphire-semantic-color-background-neutral-subtle);position:absolute;inset:0;z-index:-1}\n"] }]
|
|
8587
|
+
}], ctorParameters: function () { return [{ type: i1$5.DialogRef }]; }, propDecorators: { size: [{
|
|
9229
8588
|
type: Input
|
|
9230
8589
|
}] } });
|
|
9231
8590
|
|
|
@@ -9280,6 +8639,8 @@ SapphireModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ver
|
|
|
9280
8639
|
ModalFooterComponent,
|
|
9281
8640
|
ModalCloseButtonDirective,
|
|
9282
8641
|
ModalBackButtonDirective,
|
|
8642
|
+
ModalSectionComponent,
|
|
8643
|
+
ModalSectionTitleDirective,
|
|
9283
8644
|
DialogComponent,
|
|
9284
8645
|
DialogTriggerDirective,
|
|
9285
8646
|
ConfirmationDialogComponent,
|
|
@@ -9291,6 +8652,7 @@ SapphireModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ver
|
|
|
9291
8652
|
AlertDialogActions,
|
|
9292
8653
|
PanelComponent,
|
|
9293
8654
|
PanelTriggerDirective], imports: [CommonModule,
|
|
8655
|
+
NgIf,
|
|
9294
8656
|
DialogModule,
|
|
9295
8657
|
SapphireThemeModule,
|
|
9296
8658
|
SapphireTypographyModule,
|
|
@@ -9308,6 +8670,8 @@ SapphireModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ver
|
|
|
9308
8670
|
ModalFooterDirective,
|
|
9309
8671
|
ModalBackButtonDirective,
|
|
9310
8672
|
ModalCloseButtonDirective,
|
|
8673
|
+
ModalSectionComponent,
|
|
8674
|
+
ModalSectionTitleDirective,
|
|
9311
8675
|
DialogComponent,
|
|
9312
8676
|
DialogTriggerDirective,
|
|
9313
8677
|
ConfirmationDialogComponent,
|
|
@@ -9336,6 +8700,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
9336
8700
|
ModalFooterComponent,
|
|
9337
8701
|
ModalCloseButtonDirective,
|
|
9338
8702
|
ModalBackButtonDirective,
|
|
8703
|
+
ModalSectionComponent,
|
|
8704
|
+
ModalSectionTitleDirective,
|
|
9339
8705
|
DialogComponent,
|
|
9340
8706
|
DialogTriggerDirective,
|
|
9341
8707
|
ConfirmationDialogComponent,
|
|
@@ -9350,6 +8716,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
9350
8716
|
],
|
|
9351
8717
|
imports: [
|
|
9352
8718
|
CommonModule,
|
|
8719
|
+
NgIf,
|
|
9353
8720
|
DialogModule,
|
|
9354
8721
|
SapphireThemeModule,
|
|
9355
8722
|
SapphireTypographyModule,
|
|
@@ -9370,6 +8737,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
9370
8737
|
ModalFooterDirective,
|
|
9371
8738
|
ModalBackButtonDirective,
|
|
9372
8739
|
ModalCloseButtonDirective,
|
|
8740
|
+
ModalSectionComponent,
|
|
8741
|
+
ModalSectionTitleDirective,
|
|
9373
8742
|
DialogComponent,
|
|
9374
8743
|
DialogTriggerDirective,
|
|
9375
8744
|
ConfirmationDialogComponent,
|
|
@@ -10161,6 +9530,12 @@ class ListComponent {
|
|
|
10161
9530
|
constructor(elementRef) {
|
|
10162
9531
|
this.elementRef = elementRef;
|
|
10163
9532
|
this.hideLastDivider = false;
|
|
9533
|
+
/**
|
|
9534
|
+
* Counter acts the side padding of the parent element, so that List is shifted to the left with same amount
|
|
9535
|
+
* and having side padding * 2 added to width – resulting in full width List.
|
|
9536
|
+
* Useful in scenarions where List is inside a padded container and desired layout has List going from edge to edge horizontally.
|
|
9537
|
+
*/
|
|
9538
|
+
this.hasNegativeSideMargin = false;
|
|
10164
9539
|
this.listItems = new QueryList();
|
|
10165
9540
|
}
|
|
10166
9541
|
get isListElement() {
|
|
@@ -10169,19 +9544,25 @@ class ListComponent {
|
|
|
10169
9544
|
}
|
|
10170
9545
|
}
|
|
10171
9546
|
ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ListComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
10172
|
-
ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ListComponent, isStandalone: true, selector: "[sp-list]", inputs: { hideLastDivider: "hideLastDivider" }, host: { properties: { "class.sapphire-list--without-last-divider": "hideLastDivider", "attr.role": "!isListElement ? \"list\" : undefined" }, classAttribute: "sapphire-list" }, providers: [ViewEncapsulationProvider], queries: [{ propertyName: "listItems", predicate: i0.forwardRef(function () { return ListItemComponent; }), descendants: true }], hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [".sapphire-list{box-sizing:border-box;width:100%;padding:0;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;list-style:none}.sapphire-list__item{position:relative;display:flex;justify-content:space-between;padding:var(--sapphire-semantic-size-spacing-sm) var(--sapphire-semantic-size-spacing-md);background:var(--sapphire-semantic-color-background-action-tertiary-default);outline:none;font-family:var(--sapphire-semantic-font-name-default)}.sapphire-list__item--interactive{border:none;outline:none;text-decoration:none;box-sizing:border-box;width:100%;transition-property:opacity,background-color,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:ease-in-out;cursor:pointer}.sapphire-list__item:has(.sapphire-list__item--interactive){padding:0}.sapphire-list__item:focus-within{z-index:1}.sapphire-list__item>.sapphire-list__item--interactive{display:flex;justify-content:space-between;width:100%;padding:var(--sapphire-semantic-size-spacing-sm) var(--sapphire-semantic-size-spacing-md);text-decoration:none;background:inherit;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;border:none;text-align:inherit;align-items:inherit}.sapphire-list--negative-margin-self{margin-left:calc(var(--sapphire-semantic-size-spacing-md) * -1);width:calc(100% + var(--sapphire-semantic-size-spacing-md) * 2)}.sapphire-list__item--interactive:disabled,.sapphire-list__item--interactive[aria-disabled=true],.sapphire-list__item[aria-disabled=true] .sapphire-list__item--interactive{cursor:not-allowed;opacity:var(--sapphire-semantic-opacity-disabled)}.sapphire-list__item--interactive:not(.is-focus,:not(.js-focus):focus),.sapphire-list__item:not(:has(.sapphire-list__item--interactive)){box-shadow:inset 0 -1px 0 0 var(--sapphire-semantic-color-border-secondary)}.sapphire-list--without-last-divider:not(:has([role=presentation] > [role=presentation])) .sapphire-list__item:last-child .sapphire-list__item--interactive:not(.is-focus):not(:focus),.sapphire-list--without-last-divider:not(:has([role=presentation] > [role=presentation])) .sapphire-list__item:not(.sapphire-list__item--interactive):last-child,.sapphire-list--without-last-divider [role=presentation]:last-child>.sapphire-list__item .sapphire-list__item--interactive:not(.is-focus):not(:focus),.sapphire-list--without-last-divider [role=presentation]:last-child>.sapphire-list__item,.sapphire-list__item:has(+ .sapphire-list__item > .sapphire-list__item--interactive.is-focus)>.sapphire-list__item--interactive:not(.is-focus,:not(.js-focus):focus),.sapphire-list__item:has(+ .sapphire-list__item > .sapphire-list__item--interactive:not(.js-focus):focus)>.sapphire-list__item-ineractive:not(.is-focus,:not(.js-focus):focus),.sapphire-list__item:has(+ .sapphire-list__item > .sapphire-list__item--interactive.is-focus),.sapphire-list__item:has(+ .sapphire-list__item > .sapphire-list__item--interactive:not(.js-focus):focus){box-shadow:none}.sapphire-list__item.sapphire-list__item--interactive:not(.is-focus,:not(.js-focus):focus).sapphire-list__item--without-divider{box-shadow:none}.sapphire-list__item--interactive.is-hover:not(.is-active),.sapphire-list__item--interactive:not(.js-hover):not([aria-disabled=true]):not(:disabled):not(:active):hover{background:var(--sapphire-semantic-color-background-action-tertiary-hover)}.sapphire-list__item-content-interactive:focus,.sapphire-list__item-content-interactive:focus-visible{outline:none}.sapphire-list__item--interactive.is-focus,.sapphire-list__item--interactive:not(.js-focus):focus{outline:none;box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring);border:0;border-radius:var(--sapphire-semantic-size-radius-sm)}.sapphire-list__item--interactive:not(.is-disabled).is-active
|
|
9547
|
+
ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ListComponent, isStandalone: true, selector: "[sp-list]", inputs: { hideLastDivider: "hideLastDivider", hasNegativeSideMargin: "hasNegativeSideMargin" }, host: { properties: { "class.sapphire-list--without-last-divider": "hideLastDivider", "class.sapphire-list--negative-margin-self": "hasNegativeSideMargin", "attr.role": "!isListElement ? \"list\" : undefined" }, classAttribute: "sapphire-list" }, providers: [ViewEncapsulationProvider], queries: [{ propertyName: "listItems", predicate: i0.forwardRef(function () { return ListItemComponent; }), descendants: true }], hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [".sapphire-list{box-sizing:border-box;width:100%;padding:0;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;list-style:none}.sapphire-list__item{position:relative;display:flex;justify-content:space-between;padding:var(--sapphire-semantic-size-spacing-sm) var(--sapphire-semantic-size-spacing-md);background:var(--sapphire-semantic-color-background-action-tertiary-default);outline:none;font-family:var(--sapphire-semantic-font-name-default)}.sapphire-list__item--interactive{border:none;outline:none;text-decoration:none;box-sizing:border-box;width:100%;transition-property:opacity,background-color,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:ease-in-out;cursor:pointer}.sapphire-list__item:has(.sapphire-list__item--interactive){padding:0}.sapphire-list__item:focus-within{z-index:1}.sapphire-list__item>.sapphire-list__item--interactive{display:flex;justify-content:space-between;width:100%;padding:var(--sapphire-semantic-size-spacing-sm) var(--sapphire-semantic-size-spacing-md);text-decoration:none;background:inherit;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;border:none;text-align:inherit;align-items:inherit}.sapphire-list--negative-margin-self{margin-left:calc(var(--sapphire-semantic-size-spacing-md) * -1);width:calc(100% + var(--sapphire-semantic-size-spacing-md) * 2)}.sapphire-list__item--interactive:disabled,.sapphire-list__item--interactive[aria-disabled=true],.sapphire-list__item[aria-disabled=true] .sapphire-list__item--interactive{cursor:not-allowed;opacity:var(--sapphire-semantic-opacity-disabled)}.sapphire-list__item--interactive:not(.is-focus,:not(.js-focus):focus),.sapphire-list__item:not(:has(.sapphire-list__item--interactive)){box-shadow:inset 0 -1px 0 0 var(--sapphire-semantic-color-border-secondary)}.sapphire-list--without-last-divider:not(:has([role=presentation] > [role=presentation])) .sapphire-list__item:last-child .sapphire-list__item--interactive:not(.is-focus):not(:focus),.sapphire-list--without-last-divider:not(:has([role=presentation] > [role=presentation])) .sapphire-list__item:not(.sapphire-list__item--interactive):last-child,.sapphire-list--without-last-divider [role=presentation]:last-child>.sapphire-list__item .sapphire-list__item--interactive:not(.is-focus):not(:focus),.sapphire-list--without-last-divider [role=presentation]:last-child>.sapphire-list__item,.sapphire-list__item:has(+ .sapphire-list__item > .sapphire-list__item--interactive.is-focus)>.sapphire-list__item--interactive:not(.is-focus,:not(.js-focus):focus),.sapphire-list__item:has(+ .sapphire-list__item > .sapphire-list__item--interactive:not(.js-focus):focus)>.sapphire-list__item-ineractive:not(.is-focus,:not(.js-focus):focus),.sapphire-list__item:has(+ .sapphire-list__item > .sapphire-list__item--interactive.is-focus),.sapphire-list__item:has(+ .sapphire-list__item > .sapphire-list__item--interactive:not(.js-focus):focus){box-shadow:none}.sapphire-list__item.sapphire-list__item--interactive:not(.is-focus,:not(.js-focus):focus).sapphire-list__item--without-divider{box-shadow:none}.sapphire-list__item--interactive.is-hover:not(.is-active):not(:has(.is-hover)),.sapphire-list__item--interactive:not(.js-hover):not([aria-disabled=true]):not(:disabled):not(:active):not(:has(:hover)):hover{background:var(--sapphire-semantic-color-background-action-tertiary-hover)}.sapphire-list__item-content-interactive:focus,.sapphire-list__item-content-interactive:focus-visible{outline:none}.sapphire-list__item--interactive.is-focus,.sapphire-list__item--interactive:not(.js-focus):focus{outline:none;box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring);border:0;border-radius:var(--sapphire-semantic-size-radius-sm)}.sapphire-list__item--interactive:not(.is-disabled).is-active:not(:has(.is-active)),.sapphire-list__item--interactive:not([aria-disabled=true]):not(:disabled):not(:has(:active)):active{background-color:var(--sapphire-semantic-color-background-action-secondary-hover)}.sapphire-list__item[aria-disabled=true] .sapphire-list__item--interactive:active,.sapphire-list__item--interactive:focus-visible{background:inherit}.sapphire-list__item-content-left{display:flex;align-items:center;margin-right:var(--sapphire-semantic-size-spacing-sm);min-width:0;gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-list__item-content-right{display:flex;align-items:center;text-align:right;margin-left:var(--sapphire-semantic-size-spacing-sm);color:var(--sapphire-semantic-color-foreground-primary);gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-list__item-text{display:flex;flex-direction:column;font-family:var(--sapphire-semantic-font-name-default);min-width:0;overflow-wrap:break-word}.sapphire-list__item-text--reversedOrder{flex-direction:column-reverse}.sapphire-list__item-text-primary{color:var(--sapphire-semantic-color-foreground-primary);line-height:var(--sapphire-semantic-size-line-height-md);font-size:var(--sapphire-semantic-size-font-body-md);font-weight:var(--sapphire-semantic-font-weight-default-medium)}.sapphire-list__item-text-secondary{color:var(--sapphire-semantic-color-foreground-secondary);line-height:var(--sapphire-semantic-size-line-height-md);font-size:var(--sapphire-semantic-size-font-body-sm)}\n"] });
|
|
10173
9548
|
__decorate([
|
|
10174
9549
|
CoerceBoolean
|
|
10175
9550
|
], ListComponent.prototype, "hideLastDivider", void 0);
|
|
9551
|
+
__decorate([
|
|
9552
|
+
CoerceBoolean
|
|
9553
|
+
], ListComponent.prototype, "hasNegativeSideMargin", void 0);
|
|
10176
9554
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ListComponent, decorators: [{
|
|
10177
9555
|
type: Component,
|
|
10178
9556
|
args: [{ selector: '[sp-list]', standalone: true, template: `<ng-content></ng-content>`, host: {
|
|
10179
9557
|
class: 'sapphire-list',
|
|
10180
9558
|
'[class.sapphire-list--without-last-divider]': 'hideLastDivider',
|
|
9559
|
+
'[class.sapphire-list--negative-margin-self]': 'hasNegativeSideMargin',
|
|
10181
9560
|
'[attr.role]': `!isListElement ? "list" : undefined`,
|
|
10182
|
-
}, hostDirectives: [UseComponentStylesOnHost], providers: [ViewEncapsulationProvider], imports: [UseComponentStylesOnHost], styles: [".sapphire-list{box-sizing:border-box;width:100%;padding:0;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;list-style:none}.sapphire-list__item{position:relative;display:flex;justify-content:space-between;padding:var(--sapphire-semantic-size-spacing-sm) var(--sapphire-semantic-size-spacing-md);background:var(--sapphire-semantic-color-background-action-tertiary-default);outline:none;font-family:var(--sapphire-semantic-font-name-default)}.sapphire-list__item--interactive{border:none;outline:none;text-decoration:none;box-sizing:border-box;width:100%;transition-property:opacity,background-color,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:ease-in-out;cursor:pointer}.sapphire-list__item:has(.sapphire-list__item--interactive){padding:0}.sapphire-list__item:focus-within{z-index:1}.sapphire-list__item>.sapphire-list__item--interactive{display:flex;justify-content:space-between;width:100%;padding:var(--sapphire-semantic-size-spacing-sm) var(--sapphire-semantic-size-spacing-md);text-decoration:none;background:inherit;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;border:none;text-align:inherit;align-items:inherit}.sapphire-list--negative-margin-self{margin-left:calc(var(--sapphire-semantic-size-spacing-md) * -1);width:calc(100% + var(--sapphire-semantic-size-spacing-md) * 2)}.sapphire-list__item--interactive:disabled,.sapphire-list__item--interactive[aria-disabled=true],.sapphire-list__item[aria-disabled=true] .sapphire-list__item--interactive{cursor:not-allowed;opacity:var(--sapphire-semantic-opacity-disabled)}.sapphire-list__item--interactive:not(.is-focus,:not(.js-focus):focus),.sapphire-list__item:not(:has(.sapphire-list__item--interactive)){box-shadow:inset 0 -1px 0 0 var(--sapphire-semantic-color-border-secondary)}.sapphire-list--without-last-divider:not(:has([role=presentation] > [role=presentation])) .sapphire-list__item:last-child .sapphire-list__item--interactive:not(.is-focus):not(:focus),.sapphire-list--without-last-divider:not(:has([role=presentation] > [role=presentation])) .sapphire-list__item:not(.sapphire-list__item--interactive):last-child,.sapphire-list--without-last-divider [role=presentation]:last-child>.sapphire-list__item .sapphire-list__item--interactive:not(.is-focus):not(:focus),.sapphire-list--without-last-divider [role=presentation]:last-child>.sapphire-list__item,.sapphire-list__item:has(+ .sapphire-list__item > .sapphire-list__item--interactive.is-focus)>.sapphire-list__item--interactive:not(.is-focus,:not(.js-focus):focus),.sapphire-list__item:has(+ .sapphire-list__item > .sapphire-list__item--interactive:not(.js-focus):focus)>.sapphire-list__item-ineractive:not(.is-focus,:not(.js-focus):focus),.sapphire-list__item:has(+ .sapphire-list__item > .sapphire-list__item--interactive.is-focus),.sapphire-list__item:has(+ .sapphire-list__item > .sapphire-list__item--interactive:not(.js-focus):focus){box-shadow:none}.sapphire-list__item.sapphire-list__item--interactive:not(.is-focus,:not(.js-focus):focus).sapphire-list__item--without-divider{box-shadow:none}.sapphire-list__item--interactive.is-hover:not(.is-active),.sapphire-list__item--interactive:not(.js-hover):not([aria-disabled=true]):not(:disabled):not(:active):hover{background:var(--sapphire-semantic-color-background-action-tertiary-hover)}.sapphire-list__item-content-interactive:focus,.sapphire-list__item-content-interactive:focus-visible{outline:none}.sapphire-list__item--interactive.is-focus,.sapphire-list__item--interactive:not(.js-focus):focus{outline:none;box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring);border:0;border-radius:var(--sapphire-semantic-size-radius-sm)}.sapphire-list__item--interactive:not(.is-disabled).is-active
|
|
9561
|
+
}, hostDirectives: [UseComponentStylesOnHost], providers: [ViewEncapsulationProvider], imports: [UseComponentStylesOnHost], styles: [".sapphire-list{box-sizing:border-box;width:100%;padding:0;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;list-style:none}.sapphire-list__item{position:relative;display:flex;justify-content:space-between;padding:var(--sapphire-semantic-size-spacing-sm) var(--sapphire-semantic-size-spacing-md);background:var(--sapphire-semantic-color-background-action-tertiary-default);outline:none;font-family:var(--sapphire-semantic-font-name-default)}.sapphire-list__item--interactive{border:none;outline:none;text-decoration:none;box-sizing:border-box;width:100%;transition-property:opacity,background-color,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:ease-in-out;cursor:pointer}.sapphire-list__item:has(.sapphire-list__item--interactive){padding:0}.sapphire-list__item:focus-within{z-index:1}.sapphire-list__item>.sapphire-list__item--interactive{display:flex;justify-content:space-between;width:100%;padding:var(--sapphire-semantic-size-spacing-sm) var(--sapphire-semantic-size-spacing-md);text-decoration:none;background:inherit;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;border:none;text-align:inherit;align-items:inherit}.sapphire-list--negative-margin-self{margin-left:calc(var(--sapphire-semantic-size-spacing-md) * -1);width:calc(100% + var(--sapphire-semantic-size-spacing-md) * 2)}.sapphire-list__item--interactive:disabled,.sapphire-list__item--interactive[aria-disabled=true],.sapphire-list__item[aria-disabled=true] .sapphire-list__item--interactive{cursor:not-allowed;opacity:var(--sapphire-semantic-opacity-disabled)}.sapphire-list__item--interactive:not(.is-focus,:not(.js-focus):focus),.sapphire-list__item:not(:has(.sapphire-list__item--interactive)){box-shadow:inset 0 -1px 0 0 var(--sapphire-semantic-color-border-secondary)}.sapphire-list--without-last-divider:not(:has([role=presentation] > [role=presentation])) .sapphire-list__item:last-child .sapphire-list__item--interactive:not(.is-focus):not(:focus),.sapphire-list--without-last-divider:not(:has([role=presentation] > [role=presentation])) .sapphire-list__item:not(.sapphire-list__item--interactive):last-child,.sapphire-list--without-last-divider [role=presentation]:last-child>.sapphire-list__item .sapphire-list__item--interactive:not(.is-focus):not(:focus),.sapphire-list--without-last-divider [role=presentation]:last-child>.sapphire-list__item,.sapphire-list__item:has(+ .sapphire-list__item > .sapphire-list__item--interactive.is-focus)>.sapphire-list__item--interactive:not(.is-focus,:not(.js-focus):focus),.sapphire-list__item:has(+ .sapphire-list__item > .sapphire-list__item--interactive:not(.js-focus):focus)>.sapphire-list__item-ineractive:not(.is-focus,:not(.js-focus):focus),.sapphire-list__item:has(+ .sapphire-list__item > .sapphire-list__item--interactive.is-focus),.sapphire-list__item:has(+ .sapphire-list__item > .sapphire-list__item--interactive:not(.js-focus):focus){box-shadow:none}.sapphire-list__item.sapphire-list__item--interactive:not(.is-focus,:not(.js-focus):focus).sapphire-list__item--without-divider{box-shadow:none}.sapphire-list__item--interactive.is-hover:not(.is-active):not(:has(.is-hover)),.sapphire-list__item--interactive:not(.js-hover):not([aria-disabled=true]):not(:disabled):not(:active):not(:has(:hover)):hover{background:var(--sapphire-semantic-color-background-action-tertiary-hover)}.sapphire-list__item-content-interactive:focus,.sapphire-list__item-content-interactive:focus-visible{outline:none}.sapphire-list__item--interactive.is-focus,.sapphire-list__item--interactive:not(.js-focus):focus{outline:none;box-shadow:inset 0 0 0 var(--sapphire-semantic-size-focus-ring) var(--sapphire-semantic-color-focus-ring);border:0;border-radius:var(--sapphire-semantic-size-radius-sm)}.sapphire-list__item--interactive:not(.is-disabled).is-active:not(:has(.is-active)),.sapphire-list__item--interactive:not([aria-disabled=true]):not(:disabled):not(:has(:active)):active{background-color:var(--sapphire-semantic-color-background-action-secondary-hover)}.sapphire-list__item[aria-disabled=true] .sapphire-list__item--interactive:active,.sapphire-list__item--interactive:focus-visible{background:inherit}.sapphire-list__item-content-left{display:flex;align-items:center;margin-right:var(--sapphire-semantic-size-spacing-sm);min-width:0;gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-list__item-content-right{display:flex;align-items:center;text-align:right;margin-left:var(--sapphire-semantic-size-spacing-sm);color:var(--sapphire-semantic-color-foreground-primary);gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-list__item-text{display:flex;flex-direction:column;font-family:var(--sapphire-semantic-font-name-default);min-width:0;overflow-wrap:break-word}.sapphire-list__item-text--reversedOrder{flex-direction:column-reverse}.sapphire-list__item-text-primary{color:var(--sapphire-semantic-color-foreground-primary);line-height:var(--sapphire-semantic-size-line-height-md);font-size:var(--sapphire-semantic-size-font-body-md);font-weight:var(--sapphire-semantic-font-weight-default-medium)}.sapphire-list__item-text-secondary{color:var(--sapphire-semantic-color-foreground-secondary);line-height:var(--sapphire-semantic-size-line-height-md);font-size:var(--sapphire-semantic-size-font-body-sm)}\n"] }]
|
|
10183
9562
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { hideLastDivider: [{
|
|
10184
9563
|
type: Input
|
|
9564
|
+
}], hasNegativeSideMargin: [{
|
|
9565
|
+
type: Input
|
|
10185
9566
|
}], listItems: [{
|
|
10186
9567
|
type: ContentChildren,
|
|
10187
9568
|
args: [forwardRef(() => ListItemComponent), { descendants: true }]
|
|
@@ -10497,5 +9878,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
10497
9878
|
* Generated bundle index. Do not edit.
|
|
10498
9879
|
*/
|
|
10499
9880
|
|
|
10500
|
-
export { AlertDialogActions, AlertDialogBody, AlertDialogComponent, AlertDialogHeading, AlertDialogIcon, AvatarComponent, BadgeComponent, BodyComponent, ButtonComponent, ButtonGroupComponent, ButtonIconDirective, CaptionComponent, CdkVirtualScrollViewportFixDirective, CheckboxChange, CheckboxComponent, CheckboxGroupComponent, ConfirmationDialogComponent, DEFAULT_BREAKPOINTS, DangerDialogComponent, DialogComponent, DialogTriggerDirective, FeedbackMessageActions, FeedbackMessageBody, FeedbackMessageComponent, FeedbackMessageHeading, FeedbackMessageIcon, FieldComponent, FieldControl, FieldErrorDirective, FieldLabelDirective, FieldNoteDirective, FieldNoteSuffixDirective, FocusedDirective, HeadingComponent, HelpButtonComponent, HelpButtonContentDirective, HelpButtonFooterDirective, HelpButtonHeaderDirective, ICON_SIZE_PROVIDER, IconButtonComponent, IconComponent, IconRegistry, LabelComponent, LinkComponent, ListComponent, ListItemComponent, ListItemContentComponent, ListItemTextComponent, ListItemTextPrimaryComponent, ListItemTextSecondaryComponent, 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, PopoverCloseButtonDirective, PopoverComponent, PopoverTitleDirective, PopoverTriggerDirective, PressedDirective, RadioComponent, RadioGroupComponent, SapphireAvatarModule, SapphireBadgeModule, SapphireButtonModule, SapphireCheckboxModule, SapphireCheckboxRequiredValidator, SapphireCoreModule, SapphireFeedbackMessageModule, SapphireFieldModule, SapphireHelpButtonModule, SapphireIconModule, SapphireLinkModule, SapphireListModule, SapphireListboxModule, SapphireMenuModule, SapphireModalModule, SapphireNotificationBadgeModule, SapphireOverlay, SapphirePaginationChange, SapphirePaginationModule, SapphirePopoverModule, SapphireRadioModule, SapphireSegmentedTabsModule, SapphireSelectModule, SapphireSkeletonModule, SapphireSpinnerModule, SapphireSurfaceModule, SapphireSwitchChange, SapphireSwitchModule, SapphireSwitchRequiredValidator, SapphireTableModule, SapphireTextFieldModule, SapphireThemeModule, SapphireToggleButtonRequiredValidator, SapphireTooltipModule, SapphireTypographyModule, ScrollMonitorDirective, SearchableSelectDirective, SectionDirective, SegmentedRadioComponent, SegmentedRadioGroupComponent, SegmentedTabComponent, SegmentedTabContentDirective, SegmentedTabLabelDirective, SegmentedTabsComponent, SelectButtonComponent, SelectButtonSingleSelectDirective, SelectComponent, SelectionTextDirective, SingleSelectDirective, SkeletonBlockDirective, SkeletonCircleDirective, SkeletonComponent, SkeletonTextDirective, SpinnerComponent, SubheadingComponent, 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 };
|
|
9881
|
+
export { AlertDialogActions, AlertDialogBody, AlertDialogComponent, AlertDialogHeading, AlertDialogIcon, AvatarComponent, BadgeComponent, BodyComponent, ButtonComponent, ButtonGroupComponent, ButtonIconDirective, CaptionComponent, CdkVirtualScrollViewportFixDirective, CheckboxChange, CheckboxComponent, CheckboxGroupComponent, ConfirmationDialogComponent, DEFAULT_BREAKPOINTS, DangerDialogComponent, DialogComponent, DialogTriggerDirective, FeedbackMessageActions, FeedbackMessageBody, FeedbackMessageComponent, FeedbackMessageHeading, FeedbackMessageIcon, FieldComponent, FieldControl, FieldErrorDirective, FieldLabelDirective, FieldNoteDirective, FieldNoteSuffixDirective, FocusedDirective, HeadingComponent, HelpButtonComponent, HelpButtonContentDirective, HelpButtonFooterDirective, HelpButtonHeaderDirective, ICON_SIZE_PROVIDER, IconButtonComponent, IconComponent, IconRegistry, LabelComponent, LinkComponent, ListComponent, ListItemComponent, ListItemContentComponent, ListItemTextComponent, ListItemTextPrimaryComponent, ListItemTextSecondaryComponent, ListboxChild, ListboxComponent, ListboxInputDirective, MenuComponent, MenuIconComponent, MenuItemComponent, MenuPrimaryTextComponent, MenuSecondaryTextComponent, MenuSectionComponent, MenuTriggerDirective, ModalBackButtonDirective, ModalBodyComponent, ModalCloseButtonDirective, ModalFooterComponent, ModalFooterDirective, ModalHeaderComponent, ModalHeaderDirective, ModalLayoutComponent, ModalSectionComponent, ModalSectionTitleDirective, ModalService, MultiSelectDirective, NotificationBadgeComponent, OptionComponent, OptionIconDirective, OptionPrimaryTextDirective, OptionSecondaryTextDirective, POPOVER_TRIGGER, PaginationComponent, PanelComponent, PanelTriggerDirective, PopoverCloseButtonDirective, PopoverComponent, PopoverTitleDirective, PopoverTriggerDirective, PressedDirective, RadioComponent, RadioGroupComponent, SapphireAvatarModule, SapphireBadgeModule, SapphireButtonModule, SapphireCheckboxModule, SapphireCheckboxRequiredValidator, SapphireCoreModule, SapphireFeedbackMessageModule, SapphireFieldModule, SapphireHelpButtonModule, SapphireIconModule, SapphireLinkModule, SapphireListModule, SapphireListboxModule, SapphireMenuModule, SapphireModalModule, SapphireNotificationBadgeModule, SapphireOverlay, SapphirePaginationChange, SapphirePaginationModule, SapphirePopoverModule, SapphireRadioModule, SapphireSegmentedTabsModule, SapphireSelectModule, SapphireSkeletonModule, SapphireSpinnerModule, SapphireSurfaceModule, SapphireSwitchChange, SapphireSwitchModule, SapphireSwitchRequiredValidator, SapphireTableModule, SapphireTextFieldModule, SapphireThemeModule, SapphireToggleButtonRequiredValidator, SapphireTooltipModule, SapphireTypographyModule, ScrollMonitorDirective, SearchableSelectDirective, SectionDirective, SegmentedRadioComponent, SegmentedRadioGroupComponent, SegmentedTabComponent, SegmentedTabContentDirective, SegmentedTabLabelDirective, SegmentedTabsComponent, SelectButtonComponent, SelectButtonSingleSelectDirective, SelectComponent, SelectionTextDirective, SingleSelectDirective, SkeletonBlockDirective, SkeletonCircleDirective, SkeletonComponent, SkeletonTextDirective, SpinnerComponent, SubheadingComponent, 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 };
|
|
10501
9882
|
//# sourceMappingURL=danske-sapphire-angular.mjs.map
|