@danske/sapphire-angular 3.8.2 → 3.9.3
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/avatar/src/avatar.component.mjs +2 -2
- package/esm2020/lib/badge/src/badge.component.mjs +2 -2
- package/esm2020/lib/button/src/button.component.mjs +9 -6
- package/esm2020/lib/button/src/icon-button.component.mjs +9 -6
- package/esm2020/lib/button/src/toggle-button.component.mjs +9 -6
- package/esm2020/lib/field/public_api.mjs +2 -1
- package/esm2020/lib/field/src/field-error.directive.mjs +1 -1
- package/esm2020/lib/field/src/field.component.mjs +83 -20
- package/esm2020/lib/field/src/field.module.mjs +7 -5
- package/esm2020/lib/list/src/list.component.mjs +2 -2
- package/esm2020/lib/listbox/src/listbox.component.mjs +2 -2
- package/esm2020/lib/menu/src/menu.component.mjs +2 -2
- package/esm2020/lib/modal/src/dialog/confirmation-dialog.component.mjs +3 -3
- package/esm2020/lib/modal/src/dialog/danger-dialog.component.mjs +3 -3
- package/esm2020/lib/modal/src/layout/modal-layout.component.mjs +2 -2
- package/esm2020/lib/modal/src/modal-trigger.directive.mjs +2 -3
- package/esm2020/lib/modal/src/panel/panel.component.mjs +2 -2
- package/esm2020/lib/radio/src/segmented/segmented-radio-group.component.mjs +2 -2
- package/esm2020/lib/radio/src/shared/radio-base.mjs +12 -8
- package/esm2020/lib/radio/src/shared/radio-group-base.mjs +7 -3
- package/esm2020/lib/segmented-tabs/src/segmented-tab.component.mjs +2 -2
- package/esm2020/lib/segmented-tabs/src/segmented-tabs.component.mjs +2 -2
- package/esm2020/lib/select/src/select/select.component.mjs +3 -3
- package/esm2020/lib/switch/src/switch.component.mjs +2 -2
- package/esm2020/lib/table/src/table.component.mjs +2 -2
- package/esm2020/lib/theme/src/themes.mjs +4 -4
- package/esm2020/lib/tooltip/src/truncated-with-tooltip.directive.mjs +6 -3
- package/fesm2015/danske-sapphire-angular.mjs +199 -107
- package/fesm2015/danske-sapphire-angular.mjs.map +1 -1
- package/fesm2020/danske-sapphire-angular.mjs +189 -107
- package/fesm2020/danske-sapphire-angular.mjs.map +1 -1
- package/lib/field/public_api.d.ts +1 -0
- package/lib/field/src/field-error.directive.d.ts +9 -1
- package/lib/field/src/field.component.d.ts +10 -2
- package/lib/field/src/field.module.d.ts +1 -1
- package/package.json +3 -3
|
@@ -6,28 +6,27 @@ import { CommonModule, NgIf, DOCUMENT, NgTemplateOutlet } from '@angular/common'
|
|
|
6
6
|
import { __decorate } from 'tslib';
|
|
7
7
|
import DOMPurify from 'dompurify';
|
|
8
8
|
import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
|
|
9
|
-
import * as
|
|
9
|
+
import * as i4 from '@angular/cdk/portal';
|
|
10
10
|
import { ComponentPortal, CdkPortalOutlet, TemplatePortal, DomPortal, PortalModule, CdkPortal } from '@angular/cdk/portal';
|
|
11
11
|
export { tokens } from '@danske/sapphire-css/themes';
|
|
12
|
-
import * as i1$
|
|
12
|
+
import * as i1$1 from '@angular/forms';
|
|
13
13
|
import { NG_VALUE_ACCESSOR, NG_VALIDATORS, CheckboxRequiredValidator, FormsModule, Validators, NgControl, RequiredValidator } from '@angular/forms';
|
|
14
14
|
import * as i2$1 from '@internationalized/message';
|
|
15
15
|
import { MessageDictionary, MessageFormatter } from '@internationalized/message';
|
|
16
16
|
import * as i3 from '@angular/cdk/a11y';
|
|
17
17
|
import { A11yModule, ListKeyManager } from '@angular/cdk/a11y';
|
|
18
|
-
import * as
|
|
18
|
+
import * as i2$2 from '@angular/cdk/collections';
|
|
19
19
|
import { iconCheckmarkOutline, iconWarning, iconError, iconCheckmark, iconChevronDown, iconNotification, iconSortAscending, iconSortDescending, iconClose, iconChevronLeft, iconChevronRight, iconInformation, iconHelp } from '@danske/sapphire-icons/js';
|
|
20
|
-
import * as i1
|
|
20
|
+
import * as i1 from '@angular/cdk/menu';
|
|
21
21
|
import { CdkMenu, CdkMenuItem, CdkMenuTrigger, CdkMenuGroup, CdkMenuModule } from '@angular/cdk/menu';
|
|
22
22
|
import { hasModifierKey } from '@angular/cdk/keycodes';
|
|
23
23
|
import { Subject, merge, combineLatest, empty as empty$7, fromEvent } from 'rxjs';
|
|
24
24
|
import { takeUntil, startWith, map } from 'rxjs/operators';
|
|
25
|
-
import * as i1$
|
|
25
|
+
import * as i1$2 from '@angular/cdk/listbox';
|
|
26
26
|
import { CdkListbox, CdkOption, CdkListboxModule } from '@angular/cdk/listbox';
|
|
27
|
-
import * as i1$
|
|
28
|
-
import * as i1$
|
|
27
|
+
import * as i1$3 from '@angular/cdk/scrolling';
|
|
28
|
+
import * as i1$4 from '@angular/cdk/dialog';
|
|
29
29
|
import { CdkDialogContainer, DialogModule } from '@angular/cdk/dialog';
|
|
30
|
-
import { delay } from 'rxjs/internal/operators';
|
|
31
30
|
|
|
32
31
|
/**
|
|
33
32
|
* A reference to the topmost theme in the app. Is needed for providing root-level services
|
|
@@ -714,10 +713,10 @@ const AutoId = ({ prefix = 'generated' } = {}) => {
|
|
|
714
713
|
class ThemeDefault {
|
|
715
714
|
}
|
|
716
715
|
ThemeDefault.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ThemeDefault, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
717
|
-
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-850: 21.25rem;--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-tertiary-green-4: hsl(132 42% 76%);--sapphire-global-color-tertiary-green-3: hsl(146 40% 61%);--sapphire-global-color-tertiary-green-2: hsl(155 50% 43%);--sapphire-global-color-tertiary-green-1: hsl(158 58% 19%);--sapphire-global-color-tertiary-copper-4: hsl(24 65% 77%);--sapphire-global-color-tertiary-copper-3: hsl(21 56% 65%);--sapphire-global-color-tertiary-copper-2: hsl(18 52% 49%);--sapphire-global-color-tertiary-copper-1: hsl(20 64% 27%);--sapphire-global-color-tertiary-gold-4: hsl(45 57% 73%);--sapphire-global-color-tertiary-gold-3: hsl(40 57% 62%);--sapphire-global-color-tertiary-gold-2: hsl(32 47% 48%);--sapphire-global-color-tertiary-gold-1: hsl(32 59% 28%);--sapphire-global-color-tertiary-blue-4: hsl(220 48% 81%);--sapphire-global-color-tertiary-blue-3: hsl(217 60% 71%);--sapphire-global-color-tertiary-blue-2: hsl(218 51% 52%);--sapphire-global-color-tertiary-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-control-vertical-md: var(--sapphire-global-size-generic-25);--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-tertiary-green-4);--sapphire-semantic-color-background-decorative-15: var(--sapphire-global-color-tertiary-green-3);--sapphire-semantic-color-background-decorative-14: var(--sapphire-global-color-tertiary-green-2);--sapphire-semantic-color-background-decorative-13: var(--sapphire-global-color-tertiary-green-1);--sapphire-semantic-color-background-decorative-12: var(--sapphire-global-color-tertiary-copper-4);--sapphire-semantic-color-background-decorative-11: var(--sapphire-global-color-tertiary-copper-3);--sapphire-semantic-color-background-decorative-10: var(--sapphire-global-color-tertiary-copper-2);--sapphire-semantic-color-background-decorative-9: var(--sapphire-global-color-tertiary-copper-1);--sapphire-semantic-color-background-decorative-8: var(--sapphire-global-color-tertiary-gold-4);--sapphire-semantic-color-background-decorative-7: var(--sapphire-global-color-tertiary-gold-3);--sapphire-semantic-color-background-decorative-6: var(--sapphire-global-color-tertiary-gold-2);--sapphire-semantic-color-background-decorative-5: var(--sapphire-global-color-tertiary-gold-1);--sapphire-semantic-color-background-decorative-4: var(--sapphire-global-color-tertiary-blue-4);--sapphire-semantic-color-background-decorative-3: var(--sapphire-global-color-tertiary-blue-3);--sapphire-semantic-color-background-decorative-2: var(--sapphire-global-color-tertiary-blue-2);--sapphire-semantic-color-background-decorative-1: var(--sapphire-global-color-tertiary-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-gray-500);--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-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-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-background-switch-default) calc((1 - var(--sapphire-semantic-color-state-accent-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-500);--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"] });
|
|
716
|
+
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-850: 21.25rem;--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-tertiary-green-4: hsl(132 42% 76%);--sapphire-global-color-tertiary-green-3: hsl(146 40% 61%);--sapphire-global-color-tertiary-green-2: hsl(155 50% 43%);--sapphire-global-color-tertiary-green-1: hsl(158 58% 19%);--sapphire-global-color-tertiary-copper-4: hsl(24 65% 77%);--sapphire-global-color-tertiary-copper-3: hsl(21 56% 65%);--sapphire-global-color-tertiary-copper-2: hsl(18 52% 49%);--sapphire-global-color-tertiary-copper-1: hsl(20 64% 27%);--sapphire-global-color-tertiary-gold-4: hsl(45 57% 73%);--sapphire-global-color-tertiary-gold-3: hsl(40 57% 62%);--sapphire-global-color-tertiary-gold-2: hsl(32 47% 48%);--sapphire-global-color-tertiary-gold-1: hsl(32 59% 28%);--sapphire-global-color-tertiary-blue-4: hsl(220 48% 81%);--sapphire-global-color-tertiary-blue-3: hsl(217 60% 71%);--sapphire-global-color-tertiary-blue-2: hsl(218 51% 52%);--sapphire-global-color-tertiary-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-global-backdrop-filter-blur: blur(20px);--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-control-vertical-md: var(--sapphire-global-size-generic-25);--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-tertiary-green-4);--sapphire-semantic-color-background-decorative-15: var(--sapphire-global-color-tertiary-green-3);--sapphire-semantic-color-background-decorative-14: var(--sapphire-global-color-tertiary-green-2);--sapphire-semantic-color-background-decorative-13: var(--sapphire-global-color-tertiary-green-1);--sapphire-semantic-color-background-decorative-12: var(--sapphire-global-color-tertiary-copper-4);--sapphire-semantic-color-background-decorative-11: var(--sapphire-global-color-tertiary-copper-3);--sapphire-semantic-color-background-decorative-10: var(--sapphire-global-color-tertiary-copper-2);--sapphire-semantic-color-background-decorative-9: var(--sapphire-global-color-tertiary-copper-1);--sapphire-semantic-color-background-decorative-8: var(--sapphire-global-color-tertiary-gold-4);--sapphire-semantic-color-background-decorative-7: var(--sapphire-global-color-tertiary-gold-3);--sapphire-semantic-color-background-decorative-6: var(--sapphire-global-color-tertiary-gold-2);--sapphire-semantic-color-background-decorative-5: var(--sapphire-global-color-tertiary-gold-1);--sapphire-semantic-color-background-decorative-4: var(--sapphire-global-color-tertiary-blue-4);--sapphire-semantic-color-background-decorative-3: var(--sapphire-global-color-tertiary-blue-3);--sapphire-semantic-color-background-decorative-2: var(--sapphire-global-color-tertiary-blue-2);--sapphire-semantic-color-background-decorative-1: var(--sapphire-global-color-tertiary-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-gray-500);--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-semantic-backdrop-filter-blur: var(--sapphire-global-backdrop-filter-blur);--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-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-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-background-switch-default) calc((1 - var(--sapphire-semantic-color-state-accent-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-500);--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"] });
|
|
718
717
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ThemeDefault, decorators: [{
|
|
719
718
|
type: Component,
|
|
720
|
-
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-850: 21.25rem;--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-tertiary-green-4: hsl(132 42% 76%);--sapphire-global-color-tertiary-green-3: hsl(146 40% 61%);--sapphire-global-color-tertiary-green-2: hsl(155 50% 43%);--sapphire-global-color-tertiary-green-1: hsl(158 58% 19%);--sapphire-global-color-tertiary-copper-4: hsl(24 65% 77%);--sapphire-global-color-tertiary-copper-3: hsl(21 56% 65%);--sapphire-global-color-tertiary-copper-2: hsl(18 52% 49%);--sapphire-global-color-tertiary-copper-1: hsl(20 64% 27%);--sapphire-global-color-tertiary-gold-4: hsl(45 57% 73%);--sapphire-global-color-tertiary-gold-3: hsl(40 57% 62%);--sapphire-global-color-tertiary-gold-2: hsl(32 47% 48%);--sapphire-global-color-tertiary-gold-1: hsl(32 59% 28%);--sapphire-global-color-tertiary-blue-4: hsl(220 48% 81%);--sapphire-global-color-tertiary-blue-3: hsl(217 60% 71%);--sapphire-global-color-tertiary-blue-2: hsl(218 51% 52%);--sapphire-global-color-tertiary-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-control-vertical-md: var(--sapphire-global-size-generic-25);--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-tertiary-green-4);--sapphire-semantic-color-background-decorative-15: var(--sapphire-global-color-tertiary-green-3);--sapphire-semantic-color-background-decorative-14: var(--sapphire-global-color-tertiary-green-2);--sapphire-semantic-color-background-decorative-13: var(--sapphire-global-color-tertiary-green-1);--sapphire-semantic-color-background-decorative-12: var(--sapphire-global-color-tertiary-copper-4);--sapphire-semantic-color-background-decorative-11: var(--sapphire-global-color-tertiary-copper-3);--sapphire-semantic-color-background-decorative-10: var(--sapphire-global-color-tertiary-copper-2);--sapphire-semantic-color-background-decorative-9: var(--sapphire-global-color-tertiary-copper-1);--sapphire-semantic-color-background-decorative-8: var(--sapphire-global-color-tertiary-gold-4);--sapphire-semantic-color-background-decorative-7: var(--sapphire-global-color-tertiary-gold-3);--sapphire-semantic-color-background-decorative-6: var(--sapphire-global-color-tertiary-gold-2);--sapphire-semantic-color-background-decorative-5: var(--sapphire-global-color-tertiary-gold-1);--sapphire-semantic-color-background-decorative-4: var(--sapphire-global-color-tertiary-blue-4);--sapphire-semantic-color-background-decorative-3: var(--sapphire-global-color-tertiary-blue-3);--sapphire-semantic-color-background-decorative-2: var(--sapphire-global-color-tertiary-blue-2);--sapphire-semantic-color-background-decorative-1: var(--sapphire-global-color-tertiary-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-gray-500);--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-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-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-background-switch-default) calc((1 - var(--sapphire-semantic-color-state-accent-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-500);--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"] }]
|
|
719
|
+
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-850: 21.25rem;--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-tertiary-green-4: hsl(132 42% 76%);--sapphire-global-color-tertiary-green-3: hsl(146 40% 61%);--sapphire-global-color-tertiary-green-2: hsl(155 50% 43%);--sapphire-global-color-tertiary-green-1: hsl(158 58% 19%);--sapphire-global-color-tertiary-copper-4: hsl(24 65% 77%);--sapphire-global-color-tertiary-copper-3: hsl(21 56% 65%);--sapphire-global-color-tertiary-copper-2: hsl(18 52% 49%);--sapphire-global-color-tertiary-copper-1: hsl(20 64% 27%);--sapphire-global-color-tertiary-gold-4: hsl(45 57% 73%);--sapphire-global-color-tertiary-gold-3: hsl(40 57% 62%);--sapphire-global-color-tertiary-gold-2: hsl(32 47% 48%);--sapphire-global-color-tertiary-gold-1: hsl(32 59% 28%);--sapphire-global-color-tertiary-blue-4: hsl(220 48% 81%);--sapphire-global-color-tertiary-blue-3: hsl(217 60% 71%);--sapphire-global-color-tertiary-blue-2: hsl(218 51% 52%);--sapphire-global-color-tertiary-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-global-backdrop-filter-blur: blur(20px);--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-control-vertical-md: var(--sapphire-global-size-generic-25);--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-tertiary-green-4);--sapphire-semantic-color-background-decorative-15: var(--sapphire-global-color-tertiary-green-3);--sapphire-semantic-color-background-decorative-14: var(--sapphire-global-color-tertiary-green-2);--sapphire-semantic-color-background-decorative-13: var(--sapphire-global-color-tertiary-green-1);--sapphire-semantic-color-background-decorative-12: var(--sapphire-global-color-tertiary-copper-4);--sapphire-semantic-color-background-decorative-11: var(--sapphire-global-color-tertiary-copper-3);--sapphire-semantic-color-background-decorative-10: var(--sapphire-global-color-tertiary-copper-2);--sapphire-semantic-color-background-decorative-9: var(--sapphire-global-color-tertiary-copper-1);--sapphire-semantic-color-background-decorative-8: var(--sapphire-global-color-tertiary-gold-4);--sapphire-semantic-color-background-decorative-7: var(--sapphire-global-color-tertiary-gold-3);--sapphire-semantic-color-background-decorative-6: var(--sapphire-global-color-tertiary-gold-2);--sapphire-semantic-color-background-decorative-5: var(--sapphire-global-color-tertiary-gold-1);--sapphire-semantic-color-background-decorative-4: var(--sapphire-global-color-tertiary-blue-4);--sapphire-semantic-color-background-decorative-3: var(--sapphire-global-color-tertiary-blue-3);--sapphire-semantic-color-background-decorative-2: var(--sapphire-global-color-tertiary-blue-2);--sapphire-semantic-color-background-decorative-1: var(--sapphire-global-color-tertiary-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-gray-500);--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-semantic-backdrop-filter-blur: var(--sapphire-global-backdrop-filter-blur);--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-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-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-background-switch-default) calc((1 - var(--sapphire-semantic-color-state-accent-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-500);--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"] }]
|
|
721
720
|
}] });
|
|
722
721
|
/**
|
|
723
722
|
* Sapphire default theme
|
|
@@ -725,10 +724,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
725
724
|
class ThemeDefaultDark {
|
|
726
725
|
}
|
|
727
726
|
ThemeDefaultDark.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ThemeDefaultDark, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
728
|
-
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-850: 21.25rem;--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-tertiary-green-4: hsl(132 42% 76%);--sapphire-global-color-tertiary-green-3: hsl(146 40% 61%);--sapphire-global-color-tertiary-green-2: hsl(155 50% 43%);--sapphire-global-color-tertiary-green-1: hsl(158 58% 19%);--sapphire-global-color-tertiary-copper-4: hsl(24 65% 77%);--sapphire-global-color-tertiary-copper-3: hsl(21 56% 65%);--sapphire-global-color-tertiary-copper-2: hsl(18 52% 49%);--sapphire-global-color-tertiary-copper-1: hsl(20 64% 27%);--sapphire-global-color-tertiary-gold-4: hsl(45 57% 73%);--sapphire-global-color-tertiary-gold-3: hsl(40 57% 62%);--sapphire-global-color-tertiary-gold-2: hsl(32 47% 48%);--sapphire-global-color-tertiary-gold-1: hsl(32 59% 28%);--sapphire-global-color-tertiary-blue-4: hsl(220 48% 81%);--sapphire-global-color-tertiary-blue-3: hsl(217 60% 71%);--sapphire-global-color-tertiary-blue-2: hsl(218 51% 52%);--sapphire-global-color-tertiary-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-control-vertical-md: var(--sapphire-global-size-generic-25);--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-tertiary-green-4);--sapphire-semantic-color-background-decorative-15: var(--sapphire-global-color-tertiary-green-3);--sapphire-semantic-color-background-decorative-14: var(--sapphire-global-color-tertiary-green-2);--sapphire-semantic-color-background-decorative-13: var(--sapphire-global-color-tertiary-green-1);--sapphire-semantic-color-background-decorative-12: var(--sapphire-global-color-tertiary-copper-4);--sapphire-semantic-color-background-decorative-11: var(--sapphire-global-color-tertiary-copper-3);--sapphire-semantic-color-background-decorative-10: var(--sapphire-global-color-tertiary-copper-2);--sapphire-semantic-color-background-decorative-9: var(--sapphire-global-color-tertiary-copper-1);--sapphire-semantic-color-background-decorative-8: var(--sapphire-global-color-tertiary-gold-4);--sapphire-semantic-color-background-decorative-7: var(--sapphire-global-color-tertiary-gold-3);--sapphire-semantic-color-background-decorative-6: var(--sapphire-global-color-tertiary-gold-2);--sapphire-semantic-color-background-decorative-5: var(--sapphire-global-color-tertiary-gold-1);--sapphire-semantic-color-background-decorative-4: var(--sapphire-global-color-tertiary-blue-4);--sapphire-semantic-color-background-decorative-3: var(--sapphire-global-color-tertiary-blue-3);--sapphire-semantic-color-background-decorative-2: var(--sapphire-global-color-tertiary-blue-2);--sapphire-semantic-color-background-decorative-1: var(--sapphire-global-color-tertiary-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-500);--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-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-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-background-switch-default) calc((1 - var(--sapphire-semantic-color-state-accent-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-850: 21.25rem;--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-tertiary-green-4: hsl(132 42% 76%);--sapphire-global-color-tertiary-green-3: hsl(146 40% 61%);--sapphire-global-color-tertiary-green-2: hsl(155 50% 43%);--sapphire-global-color-tertiary-green-1: hsl(158 58% 19%);--sapphire-global-color-tertiary-copper-4: hsl(24 65% 77%);--sapphire-global-color-tertiary-copper-3: hsl(21 56% 65%);--sapphire-global-color-tertiary-copper-2: hsl(18 52% 49%);--sapphire-global-color-tertiary-copper-1: hsl(20 64% 27%);--sapphire-global-color-tertiary-gold-4: hsl(45 57% 73%);--sapphire-global-color-tertiary-gold-3: hsl(40 57% 62%);--sapphire-global-color-tertiary-gold-2: hsl(32 47% 48%);--sapphire-global-color-tertiary-gold-1: hsl(32 59% 28%);--sapphire-global-color-tertiary-blue-4: hsl(220 48% 81%);--sapphire-global-color-tertiary-blue-3: hsl(217 60% 71%);--sapphire-global-color-tertiary-blue-2: hsl(218 51% 52%);--sapphire-global-color-tertiary-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-control-vertical-md: var(--sapphire-global-size-generic-25);--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-tertiary-green-4);--sapphire-semantic-color-background-decorative-15: var(--sapphire-global-color-tertiary-green-3);--sapphire-semantic-color-background-decorative-14: var(--sapphire-global-color-tertiary-green-2);--sapphire-semantic-color-background-decorative-13: var(--sapphire-global-color-tertiary-green-1);--sapphire-semantic-color-background-decorative-12: var(--sapphire-global-color-tertiary-copper-4);--sapphire-semantic-color-background-decorative-11: var(--sapphire-global-color-tertiary-copper-3);--sapphire-semantic-color-background-decorative-10: var(--sapphire-global-color-tertiary-copper-2);--sapphire-semantic-color-background-decorative-9: var(--sapphire-global-color-tertiary-copper-1);--sapphire-semantic-color-background-decorative-8: var(--sapphire-global-color-tertiary-gold-4);--sapphire-semantic-color-background-decorative-7: var(--sapphire-global-color-tertiary-gold-3);--sapphire-semantic-color-background-decorative-6: var(--sapphire-global-color-tertiary-gold-2);--sapphire-semantic-color-background-decorative-5: var(--sapphire-global-color-tertiary-gold-1);--sapphire-semantic-color-background-decorative-4: var(--sapphire-global-color-tertiary-blue-4);--sapphire-semantic-color-background-decorative-3: var(--sapphire-global-color-tertiary-blue-3);--sapphire-semantic-color-background-decorative-2: var(--sapphire-global-color-tertiary-blue-2);--sapphire-semantic-color-background-decorative-1: var(--sapphire-global-color-tertiary-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-gray-500);--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-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-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-background-switch-default) calc((1 - var(--sapphire-semantic-color-state-accent-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"] });
|
|
727
|
+
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-850: 21.25rem;--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-tertiary-green-4: hsl(132 42% 76%);--sapphire-global-color-tertiary-green-3: hsl(146 40% 61%);--sapphire-global-color-tertiary-green-2: hsl(155 50% 43%);--sapphire-global-color-tertiary-green-1: hsl(158 58% 19%);--sapphire-global-color-tertiary-copper-4: hsl(24 65% 77%);--sapphire-global-color-tertiary-copper-3: hsl(21 56% 65%);--sapphire-global-color-tertiary-copper-2: hsl(18 52% 49%);--sapphire-global-color-tertiary-copper-1: hsl(20 64% 27%);--sapphire-global-color-tertiary-gold-4: hsl(45 57% 73%);--sapphire-global-color-tertiary-gold-3: hsl(40 57% 62%);--sapphire-global-color-tertiary-gold-2: hsl(32 47% 48%);--sapphire-global-color-tertiary-gold-1: hsl(32 59% 28%);--sapphire-global-color-tertiary-blue-4: hsl(220 48% 81%);--sapphire-global-color-tertiary-blue-3: hsl(217 60% 71%);--sapphire-global-color-tertiary-blue-2: hsl(218 51% 52%);--sapphire-global-color-tertiary-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-global-backdrop-filter-blur: blur(20px);--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-control-vertical-md: var(--sapphire-global-size-generic-25);--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-tertiary-green-4);--sapphire-semantic-color-background-decorative-15: var(--sapphire-global-color-tertiary-green-3);--sapphire-semantic-color-background-decorative-14: var(--sapphire-global-color-tertiary-green-2);--sapphire-semantic-color-background-decorative-13: var(--sapphire-global-color-tertiary-green-1);--sapphire-semantic-color-background-decorative-12: var(--sapphire-global-color-tertiary-copper-4);--sapphire-semantic-color-background-decorative-11: var(--sapphire-global-color-tertiary-copper-3);--sapphire-semantic-color-background-decorative-10: var(--sapphire-global-color-tertiary-copper-2);--sapphire-semantic-color-background-decorative-9: var(--sapphire-global-color-tertiary-copper-1);--sapphire-semantic-color-background-decorative-8: var(--sapphire-global-color-tertiary-gold-4);--sapphire-semantic-color-background-decorative-7: var(--sapphire-global-color-tertiary-gold-3);--sapphire-semantic-color-background-decorative-6: var(--sapphire-global-color-tertiary-gold-2);--sapphire-semantic-color-background-decorative-5: var(--sapphire-global-color-tertiary-gold-1);--sapphire-semantic-color-background-decorative-4: var(--sapphire-global-color-tertiary-blue-4);--sapphire-semantic-color-background-decorative-3: var(--sapphire-global-color-tertiary-blue-3);--sapphire-semantic-color-background-decorative-2: var(--sapphire-global-color-tertiary-blue-2);--sapphire-semantic-color-background-decorative-1: var(--sapphire-global-color-tertiary-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-500);--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-semantic-backdrop-filter-blur: var(--sapphire-global-backdrop-filter-blur);--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-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-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-background-switch-default) calc((1 - var(--sapphire-semantic-color-state-accent-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-850: 21.25rem;--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-tertiary-green-4: hsl(132 42% 76%);--sapphire-global-color-tertiary-green-3: hsl(146 40% 61%);--sapphire-global-color-tertiary-green-2: hsl(155 50% 43%);--sapphire-global-color-tertiary-green-1: hsl(158 58% 19%);--sapphire-global-color-tertiary-copper-4: hsl(24 65% 77%);--sapphire-global-color-tertiary-copper-3: hsl(21 56% 65%);--sapphire-global-color-tertiary-copper-2: hsl(18 52% 49%);--sapphire-global-color-tertiary-copper-1: hsl(20 64% 27%);--sapphire-global-color-tertiary-gold-4: hsl(45 57% 73%);--sapphire-global-color-tertiary-gold-3: hsl(40 57% 62%);--sapphire-global-color-tertiary-gold-2: hsl(32 47% 48%);--sapphire-global-color-tertiary-gold-1: hsl(32 59% 28%);--sapphire-global-color-tertiary-blue-4: hsl(220 48% 81%);--sapphire-global-color-tertiary-blue-3: hsl(217 60% 71%);--sapphire-global-color-tertiary-blue-2: hsl(218 51% 52%);--sapphire-global-color-tertiary-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-global-backdrop-filter-blur: blur(20px);--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-control-vertical-md: var(--sapphire-global-size-generic-25);--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-tertiary-green-4);--sapphire-semantic-color-background-decorative-15: var(--sapphire-global-color-tertiary-green-3);--sapphire-semantic-color-background-decorative-14: var(--sapphire-global-color-tertiary-green-2);--sapphire-semantic-color-background-decorative-13: var(--sapphire-global-color-tertiary-green-1);--sapphire-semantic-color-background-decorative-12: var(--sapphire-global-color-tertiary-copper-4);--sapphire-semantic-color-background-decorative-11: var(--sapphire-global-color-tertiary-copper-3);--sapphire-semantic-color-background-decorative-10: var(--sapphire-global-color-tertiary-copper-2);--sapphire-semantic-color-background-decorative-9: var(--sapphire-global-color-tertiary-copper-1);--sapphire-semantic-color-background-decorative-8: var(--sapphire-global-color-tertiary-gold-4);--sapphire-semantic-color-background-decorative-7: var(--sapphire-global-color-tertiary-gold-3);--sapphire-semantic-color-background-decorative-6: var(--sapphire-global-color-tertiary-gold-2);--sapphire-semantic-color-background-decorative-5: var(--sapphire-global-color-tertiary-gold-1);--sapphire-semantic-color-background-decorative-4: var(--sapphire-global-color-tertiary-blue-4);--sapphire-semantic-color-background-decorative-3: var(--sapphire-global-color-tertiary-blue-3);--sapphire-semantic-color-background-decorative-2: var(--sapphire-global-color-tertiary-blue-2);--sapphire-semantic-color-background-decorative-1: var(--sapphire-global-color-tertiary-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-gray-500);--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-semantic-backdrop-filter-blur: var(--sapphire-global-backdrop-filter-blur);--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-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-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-background-switch-default) calc((1 - var(--sapphire-semantic-color-state-accent-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"] });
|
|
729
728
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ThemeDefaultDark, decorators: [{
|
|
730
729
|
type: Component,
|
|
731
|
-
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-850: 21.25rem;--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-tertiary-green-4: hsl(132 42% 76%);--sapphire-global-color-tertiary-green-3: hsl(146 40% 61%);--sapphire-global-color-tertiary-green-2: hsl(155 50% 43%);--sapphire-global-color-tertiary-green-1: hsl(158 58% 19%);--sapphire-global-color-tertiary-copper-4: hsl(24 65% 77%);--sapphire-global-color-tertiary-copper-3: hsl(21 56% 65%);--sapphire-global-color-tertiary-copper-2: hsl(18 52% 49%);--sapphire-global-color-tertiary-copper-1: hsl(20 64% 27%);--sapphire-global-color-tertiary-gold-4: hsl(45 57% 73%);--sapphire-global-color-tertiary-gold-3: hsl(40 57% 62%);--sapphire-global-color-tertiary-gold-2: hsl(32 47% 48%);--sapphire-global-color-tertiary-gold-1: hsl(32 59% 28%);--sapphire-global-color-tertiary-blue-4: hsl(220 48% 81%);--sapphire-global-color-tertiary-blue-3: hsl(217 60% 71%);--sapphire-global-color-tertiary-blue-2: hsl(218 51% 52%);--sapphire-global-color-tertiary-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-control-vertical-md: var(--sapphire-global-size-generic-25);--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-tertiary-green-4);--sapphire-semantic-color-background-decorative-15: var(--sapphire-global-color-tertiary-green-3);--sapphire-semantic-color-background-decorative-14: var(--sapphire-global-color-tertiary-green-2);--sapphire-semantic-color-background-decorative-13: var(--sapphire-global-color-tertiary-green-1);--sapphire-semantic-color-background-decorative-12: var(--sapphire-global-color-tertiary-copper-4);--sapphire-semantic-color-background-decorative-11: var(--sapphire-global-color-tertiary-copper-3);--sapphire-semantic-color-background-decorative-10: var(--sapphire-global-color-tertiary-copper-2);--sapphire-semantic-color-background-decorative-9: var(--sapphire-global-color-tertiary-copper-1);--sapphire-semantic-color-background-decorative-8: var(--sapphire-global-color-tertiary-gold-4);--sapphire-semantic-color-background-decorative-7: var(--sapphire-global-color-tertiary-gold-3);--sapphire-semantic-color-background-decorative-6: var(--sapphire-global-color-tertiary-gold-2);--sapphire-semantic-color-background-decorative-5: var(--sapphire-global-color-tertiary-gold-1);--sapphire-semantic-color-background-decorative-4: var(--sapphire-global-color-tertiary-blue-4);--sapphire-semantic-color-background-decorative-3: var(--sapphire-global-color-tertiary-blue-3);--sapphire-semantic-color-background-decorative-2: var(--sapphire-global-color-tertiary-blue-2);--sapphire-semantic-color-background-decorative-1: var(--sapphire-global-color-tertiary-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-500);--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-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-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-background-switch-default) calc((1 - var(--sapphire-semantic-color-state-accent-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-850: 21.25rem;--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-tertiary-green-4: hsl(132 42% 76%);--sapphire-global-color-tertiary-green-3: hsl(146 40% 61%);--sapphire-global-color-tertiary-green-2: hsl(155 50% 43%);--sapphire-global-color-tertiary-green-1: hsl(158 58% 19%);--sapphire-global-color-tertiary-copper-4: hsl(24 65% 77%);--sapphire-global-color-tertiary-copper-3: hsl(21 56% 65%);--sapphire-global-color-tertiary-copper-2: hsl(18 52% 49%);--sapphire-global-color-tertiary-copper-1: hsl(20 64% 27%);--sapphire-global-color-tertiary-gold-4: hsl(45 57% 73%);--sapphire-global-color-tertiary-gold-3: hsl(40 57% 62%);--sapphire-global-color-tertiary-gold-2: hsl(32 47% 48%);--sapphire-global-color-tertiary-gold-1: hsl(32 59% 28%);--sapphire-global-color-tertiary-blue-4: hsl(220 48% 81%);--sapphire-global-color-tertiary-blue-3: hsl(217 60% 71%);--sapphire-global-color-tertiary-blue-2: hsl(218 51% 52%);--sapphire-global-color-tertiary-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-control-vertical-md: var(--sapphire-global-size-generic-25);--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-tertiary-green-4);--sapphire-semantic-color-background-decorative-15: var(--sapphire-global-color-tertiary-green-3);--sapphire-semantic-color-background-decorative-14: var(--sapphire-global-color-tertiary-green-2);--sapphire-semantic-color-background-decorative-13: var(--sapphire-global-color-tertiary-green-1);--sapphire-semantic-color-background-decorative-12: var(--sapphire-global-color-tertiary-copper-4);--sapphire-semantic-color-background-decorative-11: var(--sapphire-global-color-tertiary-copper-3);--sapphire-semantic-color-background-decorative-10: var(--sapphire-global-color-tertiary-copper-2);--sapphire-semantic-color-background-decorative-9: var(--sapphire-global-color-tertiary-copper-1);--sapphire-semantic-color-background-decorative-8: var(--sapphire-global-color-tertiary-gold-4);--sapphire-semantic-color-background-decorative-7: var(--sapphire-global-color-tertiary-gold-3);--sapphire-semantic-color-background-decorative-6: var(--sapphire-global-color-tertiary-gold-2);--sapphire-semantic-color-background-decorative-5: var(--sapphire-global-color-tertiary-gold-1);--sapphire-semantic-color-background-decorative-4: var(--sapphire-global-color-tertiary-blue-4);--sapphire-semantic-color-background-decorative-3: var(--sapphire-global-color-tertiary-blue-3);--sapphire-semantic-color-background-decorative-2: var(--sapphire-global-color-tertiary-blue-2);--sapphire-semantic-color-background-decorative-1: var(--sapphire-global-color-tertiary-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-gray-500);--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-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-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-background-switch-default) calc((1 - var(--sapphire-semantic-color-state-accent-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"] }]
|
|
730
|
+
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-850: 21.25rem;--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-tertiary-green-4: hsl(132 42% 76%);--sapphire-global-color-tertiary-green-3: hsl(146 40% 61%);--sapphire-global-color-tertiary-green-2: hsl(155 50% 43%);--sapphire-global-color-tertiary-green-1: hsl(158 58% 19%);--sapphire-global-color-tertiary-copper-4: hsl(24 65% 77%);--sapphire-global-color-tertiary-copper-3: hsl(21 56% 65%);--sapphire-global-color-tertiary-copper-2: hsl(18 52% 49%);--sapphire-global-color-tertiary-copper-1: hsl(20 64% 27%);--sapphire-global-color-tertiary-gold-4: hsl(45 57% 73%);--sapphire-global-color-tertiary-gold-3: hsl(40 57% 62%);--sapphire-global-color-tertiary-gold-2: hsl(32 47% 48%);--sapphire-global-color-tertiary-gold-1: hsl(32 59% 28%);--sapphire-global-color-tertiary-blue-4: hsl(220 48% 81%);--sapphire-global-color-tertiary-blue-3: hsl(217 60% 71%);--sapphire-global-color-tertiary-blue-2: hsl(218 51% 52%);--sapphire-global-color-tertiary-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-global-backdrop-filter-blur: blur(20px);--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-control-vertical-md: var(--sapphire-global-size-generic-25);--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-tertiary-green-4);--sapphire-semantic-color-background-decorative-15: var(--sapphire-global-color-tertiary-green-3);--sapphire-semantic-color-background-decorative-14: var(--sapphire-global-color-tertiary-green-2);--sapphire-semantic-color-background-decorative-13: var(--sapphire-global-color-tertiary-green-1);--sapphire-semantic-color-background-decorative-12: var(--sapphire-global-color-tertiary-copper-4);--sapphire-semantic-color-background-decorative-11: var(--sapphire-global-color-tertiary-copper-3);--sapphire-semantic-color-background-decorative-10: var(--sapphire-global-color-tertiary-copper-2);--sapphire-semantic-color-background-decorative-9: var(--sapphire-global-color-tertiary-copper-1);--sapphire-semantic-color-background-decorative-8: var(--sapphire-global-color-tertiary-gold-4);--sapphire-semantic-color-background-decorative-7: var(--sapphire-global-color-tertiary-gold-3);--sapphire-semantic-color-background-decorative-6: var(--sapphire-global-color-tertiary-gold-2);--sapphire-semantic-color-background-decorative-5: var(--sapphire-global-color-tertiary-gold-1);--sapphire-semantic-color-background-decorative-4: var(--sapphire-global-color-tertiary-blue-4);--sapphire-semantic-color-background-decorative-3: var(--sapphire-global-color-tertiary-blue-3);--sapphire-semantic-color-background-decorative-2: var(--sapphire-global-color-tertiary-blue-2);--sapphire-semantic-color-background-decorative-1: var(--sapphire-global-color-tertiary-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-500);--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-semantic-backdrop-filter-blur: var(--sapphire-global-backdrop-filter-blur);--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-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-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-background-switch-default) calc((1 - var(--sapphire-semantic-color-state-accent-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-850: 21.25rem;--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-tertiary-green-4: hsl(132 42% 76%);--sapphire-global-color-tertiary-green-3: hsl(146 40% 61%);--sapphire-global-color-tertiary-green-2: hsl(155 50% 43%);--sapphire-global-color-tertiary-green-1: hsl(158 58% 19%);--sapphire-global-color-tertiary-copper-4: hsl(24 65% 77%);--sapphire-global-color-tertiary-copper-3: hsl(21 56% 65%);--sapphire-global-color-tertiary-copper-2: hsl(18 52% 49%);--sapphire-global-color-tertiary-copper-1: hsl(20 64% 27%);--sapphire-global-color-tertiary-gold-4: hsl(45 57% 73%);--sapphire-global-color-tertiary-gold-3: hsl(40 57% 62%);--sapphire-global-color-tertiary-gold-2: hsl(32 47% 48%);--sapphire-global-color-tertiary-gold-1: hsl(32 59% 28%);--sapphire-global-color-tertiary-blue-4: hsl(220 48% 81%);--sapphire-global-color-tertiary-blue-3: hsl(217 60% 71%);--sapphire-global-color-tertiary-blue-2: hsl(218 51% 52%);--sapphire-global-color-tertiary-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-global-backdrop-filter-blur: blur(20px);--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-control-vertical-md: var(--sapphire-global-size-generic-25);--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-tertiary-green-4);--sapphire-semantic-color-background-decorative-15: var(--sapphire-global-color-tertiary-green-3);--sapphire-semantic-color-background-decorative-14: var(--sapphire-global-color-tertiary-green-2);--sapphire-semantic-color-background-decorative-13: var(--sapphire-global-color-tertiary-green-1);--sapphire-semantic-color-background-decorative-12: var(--sapphire-global-color-tertiary-copper-4);--sapphire-semantic-color-background-decorative-11: var(--sapphire-global-color-tertiary-copper-3);--sapphire-semantic-color-background-decorative-10: var(--sapphire-global-color-tertiary-copper-2);--sapphire-semantic-color-background-decorative-9: var(--sapphire-global-color-tertiary-copper-1);--sapphire-semantic-color-background-decorative-8: var(--sapphire-global-color-tertiary-gold-4);--sapphire-semantic-color-background-decorative-7: var(--sapphire-global-color-tertiary-gold-3);--sapphire-semantic-color-background-decorative-6: var(--sapphire-global-color-tertiary-gold-2);--sapphire-semantic-color-background-decorative-5: var(--sapphire-global-color-tertiary-gold-1);--sapphire-semantic-color-background-decorative-4: var(--sapphire-global-color-tertiary-blue-4);--sapphire-semantic-color-background-decorative-3: var(--sapphire-global-color-tertiary-blue-3);--sapphire-semantic-color-background-decorative-2: var(--sapphire-global-color-tertiary-blue-2);--sapphire-semantic-color-background-decorative-1: var(--sapphire-global-color-tertiary-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-gray-500);--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-semantic-backdrop-filter-blur: var(--sapphire-global-backdrop-filter-blur);--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-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-accent-hover) xyz x y z / 1) calc(var(--sapphire-semantic-color-state-accent-hover-alpha) * 100%), var(--sapphire-semantic-color-background-switch-default) calc((1 - var(--sapphire-semantic-color-state-accent-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"] }]
|
|
732
731
|
}] });
|
|
733
732
|
|
|
734
733
|
/**
|
|
@@ -1071,7 +1070,7 @@ class TruncatedWithTooltipContentElementDirective {
|
|
|
1071
1070
|
}
|
|
1072
1071
|
}
|
|
1073
1072
|
}
|
|
1074
|
-
TruncatedWithTooltipContentElementDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TruncatedWithTooltipContentElementDirective, deps: [{ token: i0.ElementRef }, { token: TruncatedWithTooltipDirective, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1073
|
+
TruncatedWithTooltipContentElementDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TruncatedWithTooltipContentElementDirective, deps: [{ token: i0.ElementRef }, { token: forwardRef(() => TruncatedWithTooltipDirective), optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1075
1074
|
TruncatedWithTooltipContentElementDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: TruncatedWithTooltipContentElementDirective, isStandalone: true, selector: "[spTruncatedWithTooltipContent]", ngImport: i0 });
|
|
1076
1075
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TruncatedWithTooltipContentElementDirective, decorators: [{
|
|
1077
1076
|
type: Directive,
|
|
@@ -1083,6 +1082,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
1083
1082
|
type: Optional
|
|
1084
1083
|
}, {
|
|
1085
1084
|
type: SkipSelf
|
|
1085
|
+
}, {
|
|
1086
|
+
type: Inject,
|
|
1087
|
+
args: [forwardRef(() => TruncatedWithTooltipDirective)]
|
|
1086
1088
|
}] }]; } });
|
|
1087
1089
|
/**
|
|
1088
1090
|
* Internal wrapper directive that extends TooltipDirective for use with truncated text functionality.
|
|
@@ -1221,11 +1223,14 @@ class ButtonIconSizeProvider {
|
|
|
1221
1223
|
return this.button.size === 'lg' ? 'md' : 'sm';
|
|
1222
1224
|
}
|
|
1223
1225
|
}
|
|
1224
|
-
ButtonIconSizeProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ButtonIconSizeProvider, deps: [{ token: ButtonComponent }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1226
|
+
ButtonIconSizeProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ButtonIconSizeProvider, deps: [{ token: forwardRef(() => ButtonComponent) }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1225
1227
|
ButtonIconSizeProvider.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ButtonIconSizeProvider });
|
|
1226
1228
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ButtonIconSizeProvider, decorators: [{
|
|
1227
1229
|
type: Injectable
|
|
1228
|
-
}], ctorParameters: function () { return [{ type: ButtonComponent
|
|
1230
|
+
}], ctorParameters: function () { return [{ type: ButtonComponent, decorators: [{
|
|
1231
|
+
type: Inject,
|
|
1232
|
+
args: [forwardRef(() => ButtonComponent)]
|
|
1233
|
+
}] }]; } });
|
|
1229
1234
|
class ButtonComponent {
|
|
1230
1235
|
get variantClass() {
|
|
1231
1236
|
return `sapphire-button--${this.variant}`;
|
|
@@ -1268,7 +1273,7 @@ ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
|
|
|
1268
1273
|
provide: ICON_SIZE_PROVIDER,
|
|
1269
1274
|
useClass: ButtonIconSizeProvider,
|
|
1270
1275
|
},
|
|
1271
|
-
], queries: [{ propertyName: "buttonIcon", first: true, predicate: ButtonIconDirective, descendants: true }, { propertyName: "icon", first: true, predicate: IconComponent, descendants: true }], hostDirectives: [{ directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }, { directive: TruncatedWithTooltipDirective }], ngImport: i0, template: "<span *ngIf=\"buttonIcon && iconAlign === 'left'\" class=\"sapphire-button__icon\">\n <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\n</span>\n<span class=\"sapphire-button__content\" spTruncatedWithTooltipContent>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</span>\n<span *ngIf=\"buttonIcon && iconAlign === 'right'\" class=\"sapphire-button__icon\">\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", 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-semantic-size-spacing-md);height:var(--sapphire-semantic-size-height-control-md);min-width:var(--sapphire-global-size-generic-200);width:-moz-fit-content;width:fit-content;max-width:100%;flex-shrink:1;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{align-items:center;text-align:center;vertical-align:middle;white-space:nowrap;-webkit-user-select:none;user-select:none;margin:0;width:100%;padding:0 var(--sapphire-semantic-size-spacing-xs);max-width:calc(10 * var(--sapphire-semantic-size-height-control-md));overflow:hidden;text-overflow:ellipsis}.sapphire-button--stretch,.sapphire-button--stretch-left-align{max-width:100%;min-width:-moz-fit-content;min-width:fit-content;flex-grow:1}.sapphire-button--stretch:not(:has(.sapphire-button__icon)),.sapphire-button--stretch-left-align:not(:has(.sapphire-button__icon)){padding:0 var(--sapphire-semantic-size-spacing-xs)}.sapphire-button--stretch-left-align .sapphire-button__content{text-align:start}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{text-decoration:underline;text-decoration-thickness:var(--sapphire-semantic-size-border-sm);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{text-decoration:underline;text-decoration-thickness:var(--sapphire-semantic-size-border-sm);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-240);padding:0 var(--sapphire-semantic-size-spacing-lg);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--lg .sapphire-button__content{max-width:calc(10 * var(--sapphire-semantic-size-height-control-lg))}.sapphire-button--sm{height:var(--sapphire-semantic-size-height-control-sm);min-width:var(--sapphire-global-size-generic-160);padding:0 var(--sapphire-semantic-size-spacing-sm);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{padding:0 var(--sapphire-semantic-size-spacing-2xs);max-width:calc(10 * var(--sapphire-semantic-size-height-control-sm))}\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: "directive", type: TruncatedWithTooltipContentElementDirective, selector: "[spTruncatedWithTooltipContent]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1276
|
+
], queries: [{ propertyName: "buttonIcon", first: true, predicate: ButtonIconDirective, descendants: true }, { propertyName: "icon", first: true, predicate: IconComponent, descendants: true }], hostDirectives: [{ directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }, { directive: TruncatedWithTooltipDirective }], ngImport: i0, template: "<span *ngIf=\"buttonIcon && iconAlign === 'left'\" class=\"sapphire-button__icon\">\n <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\n</span>\n<span class=\"sapphire-button__content\" spTruncatedWithTooltipContent>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</span>\n<span *ngIf=\"buttonIcon && iconAlign === 'right'\" class=\"sapphire-button__icon\">\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", 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-semantic-size-spacing-md);height:var(--sapphire-semantic-size-height-control-md);min-width:var(--sapphire-global-size-generic-200);width:-moz-fit-content;width:fit-content;max-width:100%;flex-shrink:1;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{align-items:center;text-align:center;vertical-align:middle;white-space:nowrap;-webkit-user-select:none;user-select:none;margin:0;width:100%;padding:0 var(--sapphire-semantic-size-spacing-xs);max-width:calc(10 * var(--sapphire-semantic-size-height-control-md));overflow:hidden;text-overflow:ellipsis}.sapphire-button--stretch,.sapphire-button--stretch-left-align{max-width:100%;min-width:-moz-fit-content;min-width:fit-content;flex-grow:1}.sapphire-button--stretch:not(:has(.sapphire-button__icon)),.sapphire-button--stretch-left-align:not(:has(.sapphire-button__icon)){padding:0 var(--sapphire-semantic-size-spacing-xs)}.sapphire-button--stretch-left-align .sapphire-button__content{text-align:start}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);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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{text-decoration:underline;text-decoration-thickness:var(--sapphire-semantic-size-border-sm);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{text-decoration:underline;text-decoration-thickness:var(--sapphire-semantic-size-border-sm);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-240);padding:0 var(--sapphire-semantic-size-spacing-lg);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--lg .sapphire-button__content{max-width:calc(10 * var(--sapphire-semantic-size-height-control-lg))}.sapphire-button--sm{height:var(--sapphire-semantic-size-height-control-sm);min-width:var(--sapphire-global-size-generic-160);padding:0 var(--sapphire-semantic-size-spacing-sm);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{padding:0 var(--sapphire-semantic-size-spacing-2xs);max-width:calc(10 * var(--sapphire-semantic-size-height-control-sm))}\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: "directive", type: TruncatedWithTooltipContentElementDirective, selector: "[spTruncatedWithTooltipContent]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1272
1277
|
__decorate([
|
|
1273
1278
|
CoerceBoolean
|
|
1274
1279
|
], ButtonComponent.prototype, "disabled", void 0);
|
|
@@ -1291,7 +1296,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
1291
1296
|
provide: ICON_SIZE_PROVIDER,
|
|
1292
1297
|
useClass: ButtonIconSizeProvider,
|
|
1293
1298
|
},
|
|
1294
|
-
], standalone: false, template: "<span *ngIf=\"buttonIcon && iconAlign === 'left'\" class=\"sapphire-button__icon\">\n <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\n</span>\n<span class=\"sapphire-button__content\" spTruncatedWithTooltipContent>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</span>\n<span *ngIf=\"buttonIcon && iconAlign === 'right'\" class=\"sapphire-button__icon\">\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", 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-semantic-size-spacing-md);height:var(--sapphire-semantic-size-height-control-md);min-width:var(--sapphire-global-size-generic-200);width:-moz-fit-content;width:fit-content;max-width:100%;flex-shrink:1;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{align-items:center;text-align:center;vertical-align:middle;white-space:nowrap;-webkit-user-select:none;user-select:none;margin:0;width:100%;padding:0 var(--sapphire-semantic-size-spacing-xs);max-width:calc(10 * var(--sapphire-semantic-size-height-control-md));overflow:hidden;text-overflow:ellipsis}.sapphire-button--stretch,.sapphire-button--stretch-left-align{max-width:100%;min-width:-moz-fit-content;min-width:fit-content;flex-grow:1}.sapphire-button--stretch:not(:has(.sapphire-button__icon)),.sapphire-button--stretch-left-align:not(:has(.sapphire-button__icon)){padding:0 var(--sapphire-semantic-size-spacing-xs)}.sapphire-button--stretch-left-align .sapphire-button__content{text-align:start}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{text-decoration:underline;text-decoration-thickness:var(--sapphire-semantic-size-border-sm);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{text-decoration:underline;text-decoration-thickness:var(--sapphire-semantic-size-border-sm);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-240);padding:0 var(--sapphire-semantic-size-spacing-lg);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--lg .sapphire-button__content{max-width:calc(10 * var(--sapphire-semantic-size-height-control-lg))}.sapphire-button--sm{height:var(--sapphire-semantic-size-height-control-sm);min-width:var(--sapphire-global-size-generic-160);padding:0 var(--sapphire-semantic-size-spacing-sm);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{padding:0 var(--sapphire-semantic-size-spacing-2xs);max-width:calc(10 * var(--sapphire-semantic-size-height-control-sm))}\n"] }]
|
|
1299
|
+
], standalone: false, template: "<span *ngIf=\"buttonIcon && iconAlign === 'left'\" class=\"sapphire-button__icon\">\n <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\n</span>\n<span class=\"sapphire-button__content\" spTruncatedWithTooltipContent>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</span>\n<span *ngIf=\"buttonIcon && iconAlign === 'right'\" class=\"sapphire-button__icon\">\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", 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-semantic-size-spacing-md);height:var(--sapphire-semantic-size-height-control-md);min-width:var(--sapphire-global-size-generic-200);width:-moz-fit-content;width:fit-content;max-width:100%;flex-shrink:1;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{align-items:center;text-align:center;vertical-align:middle;white-space:nowrap;-webkit-user-select:none;user-select:none;margin:0;width:100%;padding:0 var(--sapphire-semantic-size-spacing-xs);max-width:calc(10 * var(--sapphire-semantic-size-height-control-md));overflow:hidden;text-overflow:ellipsis}.sapphire-button--stretch,.sapphire-button--stretch-left-align{max-width:100%;min-width:-moz-fit-content;min-width:fit-content;flex-grow:1}.sapphire-button--stretch:not(:has(.sapphire-button__icon)),.sapphire-button--stretch-left-align:not(:has(.sapphire-button__icon)){padding:0 var(--sapphire-semantic-size-spacing-xs)}.sapphire-button--stretch-left-align .sapphire-button__content{text-align:start}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);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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{text-decoration:underline;text-decoration-thickness:var(--sapphire-semantic-size-border-sm);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{text-decoration:underline;text-decoration-thickness:var(--sapphire-semantic-size-border-sm);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-240);padding:0 var(--sapphire-semantic-size-spacing-lg);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--lg .sapphire-button__content{max-width:calc(10 * var(--sapphire-semantic-size-height-control-lg))}.sapphire-button--sm{height:var(--sapphire-semantic-size-height-control-sm);min-width:var(--sapphire-global-size-generic-160);padding:0 var(--sapphire-semantic-size-spacing-sm);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{padding:0 var(--sapphire-semantic-size-spacing-2xs);max-width:calc(10 * var(--sapphire-semantic-size-height-control-sm))}\n"] }]
|
|
1295
1300
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: TooltipDirective, decorators: [{
|
|
1296
1301
|
type: Optional
|
|
1297
1302
|
}, {
|
|
@@ -1333,11 +1338,14 @@ class IconButtonIconSizeProvider {
|
|
|
1333
1338
|
return this.button.size === 'xs' ? 'sm' : this.button.size;
|
|
1334
1339
|
}
|
|
1335
1340
|
}
|
|
1336
|
-
IconButtonIconSizeProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: IconButtonIconSizeProvider, deps: [{ token: IconButtonComponent }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1341
|
+
IconButtonIconSizeProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: IconButtonIconSizeProvider, deps: [{ token: forwardRef(() => IconButtonComponent) }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1337
1342
|
IconButtonIconSizeProvider.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: IconButtonIconSizeProvider });
|
|
1338
1343
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: IconButtonIconSizeProvider, decorators: [{
|
|
1339
1344
|
type: Injectable
|
|
1340
|
-
}], ctorParameters: function () { return [{ type: IconButtonComponent
|
|
1345
|
+
}], ctorParameters: function () { return [{ type: IconButtonComponent, decorators: [{
|
|
1346
|
+
type: Inject,
|
|
1347
|
+
args: [forwardRef(() => IconButtonComponent)]
|
|
1348
|
+
}] }]; } });
|
|
1341
1349
|
class IconButtonComponent {
|
|
1342
1350
|
get variantClass() {
|
|
1343
1351
|
return `sapphire-icon-button--${this.variant}`;
|
|
@@ -1365,7 +1373,7 @@ IconButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
|
|
|
1365
1373
|
provide: ICON_SIZE_PROVIDER,
|
|
1366
1374
|
useClass: IconButtonIconSizeProvider,
|
|
1367
1375
|
},
|
|
1368
|
-
], hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: "<span class=\"sapphire-icon-button__icon\">\n <ng-content></ng-content>\n</span>\n", styles: [".sapphire-icon-button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:var(--sapphire-semantic-size-height-control-md);width:var(--sapphire-semantic-size-height-control-md);flex-shrink:0;border-radius:var(--sapphire-semantic-size-height-control-md);border-style:solid;border-width:0;border-color:transparent;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);transition-property:opacity,background-color,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:var(--sapphire-semantic-transitions-fade);cursor:pointer}a.sapphire-icon-button{text-decoration:none}.sapphire-icon-button:disabled,.sapphire-icon-button.is-disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-icon-button:focus{outline:none}.sapphire-icon-button.is-focus,.sapphire-icon-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-icon-button__spinner{position:absolute;display:inherit;cursor:not-allowed}.sapphire-icon-button--loading .sapphire-icon-button__icon{visibility:hidden}.sapphire-icon-button--primary{background:var(--sapphire-semantic-color-background-action-primary-default);color:var(--sapphire-semantic-color-foreground-action-on-primary-default)}.sapphire-icon-button--primary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--primary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-primary-hover)}.sapphire-icon-button--primary.is-focus,.sapphire-icon-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-icon-button--primary:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--primary:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--primary:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-primary-active)}.sapphire-icon-button--secondary{background:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-secondary-default)}.sapphire-icon-button--secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-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-icon-button--secondary.is-focus,.sapphire-icon-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-icon-button--secondary:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--secondary:not(:disabled):not(.is-disabled):active,.sapphire-icon-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-icon-button--tertiary{background:var(--sapphire-semantic-color-background-action-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-default)}.sapphire-icon-button--tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-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-icon-button--tertiary.is-focus,.sapphire-icon-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-icon-button--tertiary:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--tertiary:not(:disabled):not(.is-disabled):active,.sapphire-icon-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-icon-button--danger{background:var(--sapphire-semantic-color-background-action-danger-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-default)}.sapphire-icon-button--danger:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-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-icon-button--danger.is-focus,.sapphire-icon-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-icon-button--danger:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--danger:not(:disabled):not(.is-disabled):active,.sapphire-icon-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-icon-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-icon-button--danger-secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-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-icon-button--danger-secondary.is-focus,.sapphire-icon-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-icon-button--danger-secondary:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--danger-secondary:not(:disabled):not(.is-disabled):active,.sapphire-icon-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-icon-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-icon-button--danger-tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-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-icon-button--danger-tertiary.is-focus,.sapphire-icon-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-icon-button--danger-tertiary:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--danger-tertiary:not(:disabled):not(.is-disabled):active,.sapphire-icon-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-icon-button__icon{display:flex;flex-direction:column;justify-content:center;align-items:center;height:var(--sapphire-semantic-size-icon-md);width:var(--sapphire-semantic-size-icon-md)}.sapphire-icon-button--lg .sapphire-icon-button__icon{height:var(--sapphire-semantic-size-icon-lg);width:var(--sapphire-semantic-size-icon-lg)}.sapphire-icon-button--sm .sapphire-icon-button__icon,.sapphire-icon-button--xs .sapphire-icon-button__icon{height:var(--sapphire-semantic-size-icon-sm);width:var(--sapphire-semantic-size-icon-sm)}.sapphire-icon-button--lg{height:var(--sapphire-semantic-size-height-control-lg);width:var(--sapphire-semantic-size-height-control-lg);border-radius:var(--sapphire-semantic-size-height-control-lg);font-size:var(--sapphire-semantic-size-font-control-lg)}.sapphire-icon-button--sm{height:var(--sapphire-semantic-size-height-control-sm);width:var(--sapphire-semantic-size-height-control-sm);border-radius:var(--sapphire-semantic-size-height-control-sm);font-size:var(--sapphire-semantic-size-font-control-sm)}.sapphire-icon-button--xs{height:var(--sapphire-semantic-size-height-control-xs);width:var(--sapphire-semantic-size-height-control-xs);border-radius:var(--sapphire-semantic-size-height-control-xs);font-size:var(--sapphire-semantic-size-font-control-sm)}.sapphire-icon-button--selected{background:var(--sapphire-semantic-color-background-action-select-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-select-secondary-default)}.sapphire-icon-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):hover,.sapphire-icon-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-icon-button--selected.is-focus,.sapphire-icon-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-icon-button--selected:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--selected:not(:disabled):not(.is-disabled):active,.sapphire-icon-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-icon-button--unselected{background:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-secondary-default)}.sapphire-icon-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):hover,.sapphire-icon-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-icon-button--unselected.is-focus,.sapphire-icon-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-icon-button--unselected:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--unselected:not(:disabled):not(.is-disabled):active,.sapphire-icon-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-icon-button--tertiary.sapphire-icon-button--selected{background:var(--sapphire-semantic-color-background-action-select-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-select-tertiary-default)}.sapphire-icon-button--tertiary.sapphire-icon-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):hover,.sapphire-icon-button--tertiary.sapphire-icon-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-select-tertiary-hover);color:var(--sapphire-semantic-color-foreground-action-on-select-tertiary-hover)}.sapphire-icon-button--tertiary.sapphire-icon-button--selected.is-focus,.sapphire-icon-button--tertiary.sapphire-icon-button--selected:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-select-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-select-tertiary-default)}.sapphire-icon-button--tertiary.sapphire-icon-button--selected:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--tertiary.sapphire-icon-button--selected:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--tertiary.sapphire-icon-button--selected:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-select-tertiary-active);color:var(--sapphire-semantic-color-foreground-action-on-select-tertiary-active)}.sapphire-icon-button--tertiary.sapphire-icon-button--unselected{background:var(--sapphire-semantic-color-background-action-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-default)}.sapphire-icon-button--tertiary.sapphire-icon-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):hover,.sapphire-icon-button--tertiary.sapphire-icon-button--unselected: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-icon-button--tertiary.sapphire-icon-button--unselected.is-focus,.sapphire-icon-button--tertiary.sapphire-icon-button--unselected: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-icon-button--tertiary.sapphire-icon-button--unselected:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--tertiary.sapphire-icon-button--unselected:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--tertiary.sapphire-icon-button--unselected: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)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1376
|
+
], hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: "<span class=\"sapphire-icon-button__icon\">\n <ng-content></ng-content>\n</span>\n", styles: [".sapphire-icon-button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:var(--sapphire-semantic-size-height-control-md);width:var(--sapphire-semantic-size-height-control-md);flex-shrink:0;border-radius:var(--sapphire-semantic-size-height-control-md);border-style:solid;border-width:0;border-color:transparent;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);transition-property:opacity,background-color,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:var(--sapphire-semantic-transitions-fade);cursor:pointer}a.sapphire-icon-button{text-decoration:none}.sapphire-icon-button:disabled,.sapphire-icon-button.is-disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-icon-button:focus{outline:none}.sapphire-icon-button.is-focus,.sapphire-icon-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-icon-button__spinner{position:absolute;display:inherit;cursor:not-allowed}.sapphire-icon-button--loading .sapphire-icon-button__icon{visibility:hidden}.sapphire-icon-button--primary{background:var(--sapphire-semantic-color-background-action-primary-default);color:var(--sapphire-semantic-color-foreground-action-on-primary-default)}.sapphire-icon-button--primary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--primary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-primary-hover)}.sapphire-icon-button--primary.is-focus,.sapphire-icon-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-icon-button--primary:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--primary:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--primary:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-primary-active)}.sapphire-icon-button--secondary{background:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-secondary-default);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.sapphire-icon-button--secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-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-icon-button--secondary.is-focus,.sapphire-icon-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-icon-button--secondary:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--secondary:not(:disabled):not(.is-disabled):active,.sapphire-icon-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-icon-button--tertiary{background:var(--sapphire-semantic-color-background-action-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-default)}.sapphire-icon-button--tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-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);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.sapphire-icon-button--tertiary.is-focus,.sapphire-icon-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-icon-button--tertiary:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--tertiary:not(:disabled):not(.is-disabled):active,.sapphire-icon-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);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.sapphire-icon-button--danger{background:var(--sapphire-semantic-color-background-action-danger-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-default)}.sapphire-icon-button--danger:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-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-icon-button--danger.is-focus,.sapphire-icon-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-icon-button--danger:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--danger:not(:disabled):not(.is-disabled):active,.sapphire-icon-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-icon-button--danger-secondary{background:var(--sapphire-semantic-color-background-action-danger-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-secondary-default);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.sapphire-icon-button--danger-secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-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-icon-button--danger-secondary.is-focus,.sapphire-icon-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-icon-button--danger-secondary:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--danger-secondary:not(:disabled):not(.is-disabled):active,.sapphire-icon-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-icon-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-icon-button--danger-tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-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);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.sapphire-icon-button--danger-tertiary.is-focus,.sapphire-icon-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-icon-button--danger-tertiary:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--danger-tertiary:not(:disabled):not(.is-disabled):active,.sapphire-icon-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);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.sapphire-icon-button__icon{display:flex;flex-direction:column;justify-content:center;align-items:center;height:var(--sapphire-semantic-size-icon-md);width:var(--sapphire-semantic-size-icon-md)}.sapphire-icon-button--lg .sapphire-icon-button__icon{height:var(--sapphire-semantic-size-icon-lg);width:var(--sapphire-semantic-size-icon-lg)}.sapphire-icon-button--sm .sapphire-icon-button__icon,.sapphire-icon-button--xs .sapphire-icon-button__icon{height:var(--sapphire-semantic-size-icon-sm);width:var(--sapphire-semantic-size-icon-sm)}.sapphire-icon-button--lg{height:var(--sapphire-semantic-size-height-control-lg);width:var(--sapphire-semantic-size-height-control-lg);border-radius:var(--sapphire-semantic-size-height-control-lg);font-size:var(--sapphire-semantic-size-font-control-lg)}.sapphire-icon-button--sm{height:var(--sapphire-semantic-size-height-control-sm);width:var(--sapphire-semantic-size-height-control-sm);border-radius:var(--sapphire-semantic-size-height-control-sm);font-size:var(--sapphire-semantic-size-font-control-sm)}.sapphire-icon-button--xs{height:var(--sapphire-semantic-size-height-control-xs);width:var(--sapphire-semantic-size-height-control-xs);border-radius:var(--sapphire-semantic-size-height-control-xs);font-size:var(--sapphire-semantic-size-font-control-sm)}.sapphire-icon-button--selected{background:var(--sapphire-semantic-color-background-action-select-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-select-secondary-default)}.sapphire-icon-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):hover,.sapphire-icon-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-icon-button--selected.is-focus,.sapphire-icon-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-icon-button--selected:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--selected:not(:disabled):not(.is-disabled):active,.sapphire-icon-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-icon-button--unselected{background:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-secondary-default)}.sapphire-icon-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):hover,.sapphire-icon-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-icon-button--unselected.is-focus,.sapphire-icon-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-icon-button--unselected:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--unselected:not(:disabled):not(.is-disabled):active,.sapphire-icon-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-icon-button--tertiary.sapphire-icon-button--selected{background:var(--sapphire-semantic-color-background-action-select-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-select-tertiary-default)}.sapphire-icon-button--tertiary.sapphire-icon-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):hover,.sapphire-icon-button--tertiary.sapphire-icon-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-select-tertiary-hover);color:var(--sapphire-semantic-color-foreground-action-on-select-tertiary-hover)}.sapphire-icon-button--tertiary.sapphire-icon-button--selected.is-focus,.sapphire-icon-button--tertiary.sapphire-icon-button--selected:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-select-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-select-tertiary-default)}.sapphire-icon-button--tertiary.sapphire-icon-button--selected:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--tertiary.sapphire-icon-button--selected:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--tertiary.sapphire-icon-button--selected:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-select-tertiary-active);color:var(--sapphire-semantic-color-foreground-action-on-select-tertiary-active)}.sapphire-icon-button--tertiary.sapphire-icon-button--unselected{background:var(--sapphire-semantic-color-background-action-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-default)}.sapphire-icon-button--tertiary.sapphire-icon-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):hover,.sapphire-icon-button--tertiary.sapphire-icon-button--unselected: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-icon-button--tertiary.sapphire-icon-button--unselected.is-focus,.sapphire-icon-button--tertiary.sapphire-icon-button--unselected: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-icon-button--tertiary.sapphire-icon-button--unselected:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--tertiary.sapphire-icon-button--unselected:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--tertiary.sapphire-icon-button--unselected: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)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1369
1377
|
__decorate([
|
|
1370
1378
|
CoerceBoolean
|
|
1371
1379
|
], IconButtonComponent.prototype, "disabled", void 0);
|
|
@@ -1383,7 +1391,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
1383
1391
|
'[class.sapphire-icon-button--lg]': 'size === "lg"',
|
|
1384
1392
|
'[class.sapphire-icon-button--sm]': 'size === "sm"',
|
|
1385
1393
|
'[class.sapphire-icon-button--xs]': 'size === "xs"',
|
|
1386
|
-
}, hostDirectives: [UseComponentStylesOnHost], standalone: false, template: "<span class=\"sapphire-icon-button__icon\">\n <ng-content></ng-content>\n</span>\n", styles: [".sapphire-icon-button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:var(--sapphire-semantic-size-height-control-md);width:var(--sapphire-semantic-size-height-control-md);flex-shrink:0;border-radius:var(--sapphire-semantic-size-height-control-md);border-style:solid;border-width:0;border-color:transparent;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);transition-property:opacity,background-color,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:var(--sapphire-semantic-transitions-fade);cursor:pointer}a.sapphire-icon-button{text-decoration:none}.sapphire-icon-button:disabled,.sapphire-icon-button.is-disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-icon-button:focus{outline:none}.sapphire-icon-button.is-focus,.sapphire-icon-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-icon-button__spinner{position:absolute;display:inherit;cursor:not-allowed}.sapphire-icon-button--loading .sapphire-icon-button__icon{visibility:hidden}.sapphire-icon-button--primary{background:var(--sapphire-semantic-color-background-action-primary-default);color:var(--sapphire-semantic-color-foreground-action-on-primary-default)}.sapphire-icon-button--primary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--primary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-primary-hover)}.sapphire-icon-button--primary.is-focus,.sapphire-icon-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-icon-button--primary:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--primary:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--primary:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-primary-active)}.sapphire-icon-button--secondary{background:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-secondary-default)}.sapphire-icon-button--secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-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-icon-button--secondary.is-focus,.sapphire-icon-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-icon-button--secondary:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--secondary:not(:disabled):not(.is-disabled):active,.sapphire-icon-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-icon-button--tertiary{background:var(--sapphire-semantic-color-background-action-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-default)}.sapphire-icon-button--tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-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-icon-button--tertiary.is-focus,.sapphire-icon-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-icon-button--tertiary:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--tertiary:not(:disabled):not(.is-disabled):active,.sapphire-icon-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-icon-button--danger{background:var(--sapphire-semantic-color-background-action-danger-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-default)}.sapphire-icon-button--danger:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-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-icon-button--danger.is-focus,.sapphire-icon-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-icon-button--danger:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--danger:not(:disabled):not(.is-disabled):active,.sapphire-icon-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-icon-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-icon-button--danger-secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-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-icon-button--danger-secondary.is-focus,.sapphire-icon-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-icon-button--danger-secondary:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--danger-secondary:not(:disabled):not(.is-disabled):active,.sapphire-icon-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-icon-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-icon-button--danger-tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-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-icon-button--danger-tertiary.is-focus,.sapphire-icon-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-icon-button--danger-tertiary:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--danger-tertiary:not(:disabled):not(.is-disabled):active,.sapphire-icon-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-icon-button__icon{display:flex;flex-direction:column;justify-content:center;align-items:center;height:var(--sapphire-semantic-size-icon-md);width:var(--sapphire-semantic-size-icon-md)}.sapphire-icon-button--lg .sapphire-icon-button__icon{height:var(--sapphire-semantic-size-icon-lg);width:var(--sapphire-semantic-size-icon-lg)}.sapphire-icon-button--sm .sapphire-icon-button__icon,.sapphire-icon-button--xs .sapphire-icon-button__icon{height:var(--sapphire-semantic-size-icon-sm);width:var(--sapphire-semantic-size-icon-sm)}.sapphire-icon-button--lg{height:var(--sapphire-semantic-size-height-control-lg);width:var(--sapphire-semantic-size-height-control-lg);border-radius:var(--sapphire-semantic-size-height-control-lg);font-size:var(--sapphire-semantic-size-font-control-lg)}.sapphire-icon-button--sm{height:var(--sapphire-semantic-size-height-control-sm);width:var(--sapphire-semantic-size-height-control-sm);border-radius:var(--sapphire-semantic-size-height-control-sm);font-size:var(--sapphire-semantic-size-font-control-sm)}.sapphire-icon-button--xs{height:var(--sapphire-semantic-size-height-control-xs);width:var(--sapphire-semantic-size-height-control-xs);border-radius:var(--sapphire-semantic-size-height-control-xs);font-size:var(--sapphire-semantic-size-font-control-sm)}.sapphire-icon-button--selected{background:var(--sapphire-semantic-color-background-action-select-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-select-secondary-default)}.sapphire-icon-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):hover,.sapphire-icon-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-icon-button--selected.is-focus,.sapphire-icon-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-icon-button--selected:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--selected:not(:disabled):not(.is-disabled):active,.sapphire-icon-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-icon-button--unselected{background:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-secondary-default)}.sapphire-icon-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):hover,.sapphire-icon-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-icon-button--unselected.is-focus,.sapphire-icon-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-icon-button--unselected:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--unselected:not(:disabled):not(.is-disabled):active,.sapphire-icon-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-icon-button--tertiary.sapphire-icon-button--selected{background:var(--sapphire-semantic-color-background-action-select-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-select-tertiary-default)}.sapphire-icon-button--tertiary.sapphire-icon-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):hover,.sapphire-icon-button--tertiary.sapphire-icon-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-select-tertiary-hover);color:var(--sapphire-semantic-color-foreground-action-on-select-tertiary-hover)}.sapphire-icon-button--tertiary.sapphire-icon-button--selected.is-focus,.sapphire-icon-button--tertiary.sapphire-icon-button--selected:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-select-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-select-tertiary-default)}.sapphire-icon-button--tertiary.sapphire-icon-button--selected:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--tertiary.sapphire-icon-button--selected:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--tertiary.sapphire-icon-button--selected:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-select-tertiary-active);color:var(--sapphire-semantic-color-foreground-action-on-select-tertiary-active)}.sapphire-icon-button--tertiary.sapphire-icon-button--unselected{background:var(--sapphire-semantic-color-background-action-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-default)}.sapphire-icon-button--tertiary.sapphire-icon-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):hover,.sapphire-icon-button--tertiary.sapphire-icon-button--unselected: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-icon-button--tertiary.sapphire-icon-button--unselected.is-focus,.sapphire-icon-button--tertiary.sapphire-icon-button--unselected: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-icon-button--tertiary.sapphire-icon-button--unselected:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--tertiary.sapphire-icon-button--unselected:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--tertiary.sapphire-icon-button--unselected: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)}\n"] }]
|
|
1394
|
+
}, hostDirectives: [UseComponentStylesOnHost], standalone: false, template: "<span class=\"sapphire-icon-button__icon\">\n <ng-content></ng-content>\n</span>\n", styles: [".sapphire-icon-button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;white-space:nowrap;margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:var(--sapphire-semantic-size-height-control-md);width:var(--sapphire-semantic-size-height-control-md);flex-shrink:0;border-radius:var(--sapphire-semantic-size-height-control-md);border-style:solid;border-width:0;border-color:transparent;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);transition-property:opacity,background-color,color;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:var(--sapphire-semantic-transitions-fade);cursor:pointer}a.sapphire-icon-button{text-decoration:none}.sapphire-icon-button:disabled,.sapphire-icon-button.is-disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-icon-button:focus{outline:none}.sapphire-icon-button.is-focus,.sapphire-icon-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-icon-button__spinner{position:absolute;display:inherit;cursor:not-allowed}.sapphire-icon-button--loading .sapphire-icon-button__icon{visibility:hidden}.sapphire-icon-button--primary{background:var(--sapphire-semantic-color-background-action-primary-default);color:var(--sapphire-semantic-color-foreground-action-on-primary-default)}.sapphire-icon-button--primary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-button--primary:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-primary-hover)}.sapphire-icon-button--primary.is-focus,.sapphire-icon-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-icon-button--primary:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--primary:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--primary:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-primary-active)}.sapphire-icon-button--secondary{background:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-secondary-default);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.sapphire-icon-button--secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-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-icon-button--secondary.is-focus,.sapphire-icon-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-icon-button--secondary:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--secondary:not(:disabled):not(.is-disabled):active,.sapphire-icon-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-icon-button--tertiary{background:var(--sapphire-semantic-color-background-action-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-default)}.sapphire-icon-button--tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-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);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.sapphire-icon-button--tertiary.is-focus,.sapphire-icon-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-icon-button--tertiary:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--tertiary:not(:disabled):not(.is-disabled):active,.sapphire-icon-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);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.sapphire-icon-button--danger{background:var(--sapphire-semantic-color-background-action-danger-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-default)}.sapphire-icon-button--danger:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-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-icon-button--danger.is-focus,.sapphire-icon-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-icon-button--danger:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--danger:not(:disabled):not(.is-disabled):active,.sapphire-icon-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-icon-button--danger-secondary{background:var(--sapphire-semantic-color-background-action-danger-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-danger-secondary-default);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.sapphire-icon-button--danger-secondary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-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-icon-button--danger-secondary.is-focus,.sapphire-icon-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-icon-button--danger-secondary:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--danger-secondary:not(:disabled):not(.is-disabled):active,.sapphire-icon-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-icon-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-icon-button--danger-tertiary:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,.sapphire-icon-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);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.sapphire-icon-button--danger-tertiary.is-focus,.sapphire-icon-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-icon-button--danger-tertiary:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--danger-tertiary:not(:disabled):not(.is-disabled):active,.sapphire-icon-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);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.sapphire-icon-button__icon{display:flex;flex-direction:column;justify-content:center;align-items:center;height:var(--sapphire-semantic-size-icon-md);width:var(--sapphire-semantic-size-icon-md)}.sapphire-icon-button--lg .sapphire-icon-button__icon{height:var(--sapphire-semantic-size-icon-lg);width:var(--sapphire-semantic-size-icon-lg)}.sapphire-icon-button--sm .sapphire-icon-button__icon,.sapphire-icon-button--xs .sapphire-icon-button__icon{height:var(--sapphire-semantic-size-icon-sm);width:var(--sapphire-semantic-size-icon-sm)}.sapphire-icon-button--lg{height:var(--sapphire-semantic-size-height-control-lg);width:var(--sapphire-semantic-size-height-control-lg);border-radius:var(--sapphire-semantic-size-height-control-lg);font-size:var(--sapphire-semantic-size-font-control-lg)}.sapphire-icon-button--sm{height:var(--sapphire-semantic-size-height-control-sm);width:var(--sapphire-semantic-size-height-control-sm);border-radius:var(--sapphire-semantic-size-height-control-sm);font-size:var(--sapphire-semantic-size-font-control-sm)}.sapphire-icon-button--xs{height:var(--sapphire-semantic-size-height-control-xs);width:var(--sapphire-semantic-size-height-control-xs);border-radius:var(--sapphire-semantic-size-height-control-xs);font-size:var(--sapphire-semantic-size-font-control-sm)}.sapphire-icon-button--selected{background:var(--sapphire-semantic-color-background-action-select-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-select-secondary-default)}.sapphire-icon-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):hover,.sapphire-icon-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-icon-button--selected.is-focus,.sapphire-icon-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-icon-button--selected:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--selected:not(:disabled):not(.is-disabled):active,.sapphire-icon-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-icon-button--unselected{background:var(--sapphire-semantic-color-background-action-secondary-default);color:var(--sapphire-semantic-color-foreground-action-on-secondary-default)}.sapphire-icon-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):hover,.sapphire-icon-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-icon-button--unselected.is-focus,.sapphire-icon-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-icon-button--unselected:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--unselected:not(:disabled):not(.is-disabled):active,.sapphire-icon-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-icon-button--tertiary.sapphire-icon-button--selected{background:var(--sapphire-semantic-color-background-action-select-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-select-tertiary-default)}.sapphire-icon-button--tertiary.sapphire-icon-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):hover,.sapphire-icon-button--tertiary.sapphire-icon-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover{background:var(--sapphire-semantic-color-background-action-select-tertiary-hover);color:var(--sapphire-semantic-color-foreground-action-on-select-tertiary-hover)}.sapphire-icon-button--tertiary.sapphire-icon-button--selected.is-focus,.sapphire-icon-button--tertiary.sapphire-icon-button--selected:not(.js-focus):focus-visible{background:var(--sapphire-semantic-color-background-action-select-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-select-tertiary-default)}.sapphire-icon-button--tertiary.sapphire-icon-button--selected:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--tertiary.sapphire-icon-button--selected:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--tertiary.sapphire-icon-button--selected:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-select-tertiary-active);color:var(--sapphire-semantic-color-foreground-action-on-select-tertiary-active)}.sapphire-icon-button--tertiary.sapphire-icon-button--unselected{background:var(--sapphire-semantic-color-background-action-tertiary-default);color:var(--sapphire-semantic-color-foreground-action-on-tertiary-default)}.sapphire-icon-button--tertiary.sapphire-icon-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):hover,.sapphire-icon-button--tertiary.sapphire-icon-button--unselected: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-icon-button--tertiary.sapphire-icon-button--unselected.is-focus,.sapphire-icon-button--tertiary.sapphire-icon-button--unselected: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-icon-button--tertiary.sapphire-icon-button--unselected:not(:disabled):not(.is-disabled).is-active,.sapphire-icon-button--tertiary.sapphire-icon-button--unselected:not(:disabled):not(.is-disabled):active,.sapphire-icon-button--tertiary.sapphire-icon-button--unselected: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)}\n"] }]
|
|
1387
1395
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { variant: [{
|
|
1388
1396
|
type: Input
|
|
1389
1397
|
}], size: [{
|
|
@@ -1408,11 +1416,14 @@ class ToggleButtonIconSizeProvider {
|
|
|
1408
1416
|
return this.button.size === 'lg' ? 'md' : 'sm';
|
|
1409
1417
|
}
|
|
1410
1418
|
}
|
|
1411
|
-
ToggleButtonIconSizeProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ToggleButtonIconSizeProvider, deps: [{ token: ToggleButtonComponent }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1419
|
+
ToggleButtonIconSizeProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ToggleButtonIconSizeProvider, deps: [{ token: forwardRef(() => ToggleButtonComponent) }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1412
1420
|
ToggleButtonIconSizeProvider.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ToggleButtonIconSizeProvider });
|
|
1413
1421
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ToggleButtonIconSizeProvider, decorators: [{
|
|
1414
1422
|
type: Injectable
|
|
1415
|
-
}], ctorParameters: function () { return [{ type: ToggleButtonComponent
|
|
1423
|
+
}], ctorParameters: function () { return [{ type: ToggleButtonComponent, decorators: [{
|
|
1424
|
+
type: Inject,
|
|
1425
|
+
args: [forwardRef(() => ToggleButtonComponent)]
|
|
1426
|
+
}] }]; } });
|
|
1416
1427
|
/**
|
|
1417
1428
|
* A button with a toggleable `isSelected` state. By default, the selection is
|
|
1418
1429
|
* toggled when the button is pressed, allowing user to switch between two
|
|
@@ -1478,7 +1489,7 @@ ToggleButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
|
|
|
1478
1489
|
provide: ICON_SIZE_PROVIDER,
|
|
1479
1490
|
useClass: ToggleButtonIconSizeProvider,
|
|
1480
1491
|
},
|
|
1481
|
-
], 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 *ngIf=\"buttonIcon && iconAlign === 'left'\" class=\"sapphire-button__icon\">\n <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\n</span>\n<span class=\"sapphire-button__content\" spTruncatedWithTooltipContent>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</span>\n<span *ngIf=\"buttonIcon && iconAlign === 'right'\" class=\"sapphire-button__icon\">\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", 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-semantic-size-spacing-md);height:var(--sapphire-semantic-size-height-control-md);min-width:var(--sapphire-global-size-generic-200);width:-moz-fit-content;width:fit-content;max-width:100%;flex-shrink:1;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{align-items:center;text-align:center;vertical-align:middle;white-space:nowrap;-webkit-user-select:none;user-select:none;margin:0;width:100%;padding:0 var(--sapphire-semantic-size-spacing-xs);max-width:calc(10 * var(--sapphire-semantic-size-height-control-md));overflow:hidden;text-overflow:ellipsis}.sapphire-button--stretch,.sapphire-button--stretch-left-align{max-width:100%;min-width:-moz-fit-content;min-width:fit-content;flex-grow:1}.sapphire-button--stretch:not(:has(.sapphire-button__icon)),.sapphire-button--stretch-left-align:not(:has(.sapphire-button__icon)){padding:0 var(--sapphire-semantic-size-spacing-xs)}.sapphire-button--stretch-left-align .sapphire-button__content{text-align:start}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{text-decoration:underline;text-decoration-thickness:var(--sapphire-semantic-size-border-sm);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{text-decoration:underline;text-decoration-thickness:var(--sapphire-semantic-size-border-sm);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-240);padding:0 var(--sapphire-semantic-size-spacing-lg);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--lg .sapphire-button__content{max-width:calc(10 * var(--sapphire-semantic-size-height-control-lg))}.sapphire-button--sm{height:var(--sapphire-semantic-size-height-control-sm);min-width:var(--sapphire-global-size-generic-160);padding:0 var(--sapphire-semantic-size-spacing-sm);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{padding:0 var(--sapphire-semantic-size-spacing-2xs);max-width:calc(10 * var(--sapphire-semantic-size-height-control-sm))}\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: "directive", type: TruncatedWithTooltipContentElementDirective, selector: "[spTruncatedWithTooltipContent]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1492
|
+
], 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 *ngIf=\"buttonIcon && iconAlign === 'left'\" class=\"sapphire-button__icon\">\n <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\n</span>\n<span class=\"sapphire-button__content\" spTruncatedWithTooltipContent>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</span>\n<span *ngIf=\"buttonIcon && iconAlign === 'right'\" class=\"sapphire-button__icon\">\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", 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-semantic-size-spacing-md);height:var(--sapphire-semantic-size-height-control-md);min-width:var(--sapphire-global-size-generic-200);width:-moz-fit-content;width:fit-content;max-width:100%;flex-shrink:1;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{align-items:center;text-align:center;vertical-align:middle;white-space:nowrap;-webkit-user-select:none;user-select:none;margin:0;width:100%;padding:0 var(--sapphire-semantic-size-spacing-xs);max-width:calc(10 * var(--sapphire-semantic-size-height-control-md));overflow:hidden;text-overflow:ellipsis}.sapphire-button--stretch,.sapphire-button--stretch-left-align{max-width:100%;min-width:-moz-fit-content;min-width:fit-content;flex-grow:1}.sapphire-button--stretch:not(:has(.sapphire-button__icon)),.sapphire-button--stretch-left-align:not(:has(.sapphire-button__icon)){padding:0 var(--sapphire-semantic-size-spacing-xs)}.sapphire-button--stretch-left-align .sapphire-button__content{text-align:start}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);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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{text-decoration:underline;text-decoration-thickness:var(--sapphire-semantic-size-border-sm);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{text-decoration:underline;text-decoration-thickness:var(--sapphire-semantic-size-border-sm);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-240);padding:0 var(--sapphire-semantic-size-spacing-lg);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--lg .sapphire-button__content{max-width:calc(10 * var(--sapphire-semantic-size-height-control-lg))}.sapphire-button--sm{height:var(--sapphire-semantic-size-height-control-sm);min-width:var(--sapphire-global-size-generic-160);padding:0 var(--sapphire-semantic-size-spacing-sm);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{padding:0 var(--sapphire-semantic-size-spacing-2xs);max-width:calc(10 * var(--sapphire-semantic-size-height-control-sm))}\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: "directive", type: TruncatedWithTooltipContentElementDirective, selector: "[spTruncatedWithTooltipContent]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1482
1493
|
__decorate([
|
|
1483
1494
|
CoerceBoolean
|
|
1484
1495
|
], ToggleButtonComponent.prototype, "selected", void 0);
|
|
@@ -1508,7 +1519,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
1508
1519
|
'[class.sapphire-button--sm]': 'size === "sm"',
|
|
1509
1520
|
'[class.sapphire-button--with-left-icon]': 'buttonIcon && iconAlign === "left"',
|
|
1510
1521
|
'[class.sapphire-button--with-right-icon]': 'buttonIcon && iconAlign === "right"',
|
|
1511
|
-
}, hostDirectives: [UseComponentStylesOnHost], standalone: false, template: "<span *ngIf=\"buttonIcon && iconAlign === 'left'\" class=\"sapphire-button__icon\">\n <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\n</span>\n<span class=\"sapphire-button__content\" spTruncatedWithTooltipContent>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</span>\n<span *ngIf=\"buttonIcon && iconAlign === 'right'\" class=\"sapphire-button__icon\">\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", 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-semantic-size-spacing-md);height:var(--sapphire-semantic-size-height-control-md);min-width:var(--sapphire-global-size-generic-200);width:-moz-fit-content;width:fit-content;max-width:100%;flex-shrink:1;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{align-items:center;text-align:center;vertical-align:middle;white-space:nowrap;-webkit-user-select:none;user-select:none;margin:0;width:100%;padding:0 var(--sapphire-semantic-size-spacing-xs);max-width:calc(10 * var(--sapphire-semantic-size-height-control-md));overflow:hidden;text-overflow:ellipsis}.sapphire-button--stretch,.sapphire-button--stretch-left-align{max-width:100%;min-width:-moz-fit-content;min-width:fit-content;flex-grow:1}.sapphire-button--stretch:not(:has(.sapphire-button__icon)),.sapphire-button--stretch-left-align:not(:has(.sapphire-button__icon)){padding:0 var(--sapphire-semantic-size-spacing-xs)}.sapphire-button--stretch-left-align .sapphire-button__content{text-align:start}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{text-decoration:underline;text-decoration-thickness:var(--sapphire-semantic-size-border-sm);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{text-decoration:underline;text-decoration-thickness:var(--sapphire-semantic-size-border-sm);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-240);padding:0 var(--sapphire-semantic-size-spacing-lg);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--lg .sapphire-button__content{max-width:calc(10 * var(--sapphire-semantic-size-height-control-lg))}.sapphire-button--sm{height:var(--sapphire-semantic-size-height-control-sm);min-width:var(--sapphire-global-size-generic-160);padding:0 var(--sapphire-semantic-size-spacing-sm);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{padding:0 var(--sapphire-semantic-size-spacing-2xs);max-width:calc(10 * var(--sapphire-semantic-size-height-control-sm))}\n"] }]
|
|
1522
|
+
}, hostDirectives: [UseComponentStylesOnHost], standalone: false, template: "<span *ngIf=\"buttonIcon && iconAlign === 'left'\" class=\"sapphire-button__icon\">\n <ng-container *ngTemplateOutlet=\"iconContent\"></ng-container>\n</span>\n<span class=\"sapphire-button__content\" spTruncatedWithTooltipContent>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</span>\n<span *ngIf=\"buttonIcon && iconAlign === 'right'\" class=\"sapphire-button__icon\">\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", 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-semantic-size-spacing-md);height:var(--sapphire-semantic-size-height-control-md);min-width:var(--sapphire-global-size-generic-200);width:-moz-fit-content;width:fit-content;max-width:100%;flex-shrink:1;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{align-items:center;text-align:center;vertical-align:middle;white-space:nowrap;-webkit-user-select:none;user-select:none;margin:0;width:100%;padding:0 var(--sapphire-semantic-size-spacing-xs);max-width:calc(10 * var(--sapphire-semantic-size-height-control-md));overflow:hidden;text-overflow:ellipsis}.sapphire-button--stretch,.sapphire-button--stretch-left-align{max-width:100%;min-width:-moz-fit-content;min-width:fit-content;flex-grow:1}.sapphire-button--stretch:not(:has(.sapphire-button__icon)),.sapphire-button--stretch-left-align:not(:has(.sapphire-button__icon)){padding:0 var(--sapphire-semantic-size-spacing-xs)}.sapphire-button--stretch-left-align .sapphire-button__content{text-align:start}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);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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{text-decoration:underline;text-decoration-thickness:var(--sapphire-semantic-size-border-sm);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{text-decoration:underline;text-decoration-thickness:var(--sapphire-semantic-size-border-sm);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-240);padding:0 var(--sapphire-semantic-size-spacing-lg);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--lg .sapphire-button__content{max-width:calc(10 * var(--sapphire-semantic-size-height-control-lg))}.sapphire-button--sm{height:var(--sapphire-semantic-size-height-control-sm);min-width:var(--sapphire-global-size-generic-160);padding:0 var(--sapphire-semantic-size-spacing-sm);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{padding:0 var(--sapphire-semantic-size-spacing-2xs);max-width:calc(10 * var(--sapphire-semantic-size-height-control-sm))}\n"] }]
|
|
1512
1523
|
}], ctorParameters: function () { return []; }, propDecorators: { size: [{
|
|
1513
1524
|
type: Input
|
|
1514
1525
|
}], selected: [{
|
|
@@ -2118,7 +2129,7 @@ class RadioBase extends _RadioMixinBase {
|
|
|
2118
2129
|
}
|
|
2119
2130
|
}
|
|
2120
2131
|
}
|
|
2121
|
-
RadioBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: RadioBase, deps: [{ token: RadioGroupBase, optional: true }, { token: i0.ElementRef }, { token: 'tabindex', attribute: true }, { token: i3.FocusMonitor }, { token:
|
|
2132
|
+
RadioBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: RadioBase, deps: [{ token: forwardRef(() => RadioGroupBase), optional: true }, { token: i0.ElementRef }, { token: 'tabindex', attribute: true }, { token: i3.FocusMonitor }, { token: i2$2.UniqueSelectionDispatcher }], target: i0.ɵɵFactoryTarget.Directive });
|
|
2122
2133
|
RadioBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: RadioBase, inputs: { ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], name: "name", autofocus: "autofocus", id: "id", note: "note", value: "value", checked: "checked", disabled: "disabled", readonly: "readonly", required: "required" }, outputs: { change: "change" }, host: { properties: { "id": "this.id" } }, viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0 });
|
|
2123
2134
|
__decorate([
|
|
2124
2135
|
AutoId()
|
|
@@ -2128,10 +2139,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
2128
2139
|
args: [{}]
|
|
2129
2140
|
}], ctorParameters: function () { return [{ type: RadioGroupBase, decorators: [{
|
|
2130
2141
|
type: Optional
|
|
2142
|
+
}, {
|
|
2143
|
+
type: Inject,
|
|
2144
|
+
args: [forwardRef(() => RadioGroupBase)]
|
|
2131
2145
|
}] }, { type: i0.ElementRef }, { type: undefined, decorators: [{
|
|
2132
2146
|
type: Attribute,
|
|
2133
2147
|
args: ['tabindex']
|
|
2134
|
-
}] }, { type: i3.FocusMonitor }, { type:
|
|
2148
|
+
}] }, { type: i3.FocusMonitor }, { type: i2$2.UniqueSelectionDispatcher }]; }, propDecorators: { ariaLabel: [{
|
|
2135
2149
|
type: Input,
|
|
2136
2150
|
args: ['aria-label']
|
|
2137
2151
|
}], ariaLabelledby: [{
|
|
@@ -2308,7 +2322,7 @@ class RadioGroupBase {
|
|
|
2308
2322
|
}
|
|
2309
2323
|
}
|
|
2310
2324
|
}
|
|
2311
|
-
RadioGroupBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: RadioGroupBase, deps: [{ token: i0.ChangeDetectorRef }, { token: FieldComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
2325
|
+
RadioGroupBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: RadioGroupBase, deps: [{ token: i0.ChangeDetectorRef }, { token: forwardRef(() => FieldComponent), optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
2312
2326
|
RadioGroupBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: RadioGroupBase, isStandalone: true, inputs: { orientation: "orientation", name: "name", value: "value", selected: "selected", disabled: "disabled", readonly: "readonly", required: "required" }, outputs: { change: "change" }, queries: [{ propertyName: "radios", predicate: i0.forwardRef(function () { return RadioComponent; }), descendants: true }], ngImport: i0 });
|
|
2313
2327
|
__decorate([
|
|
2314
2328
|
AutoId()
|
|
@@ -2320,6 +2334,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
2320
2334
|
}]
|
|
2321
2335
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: FieldComponent, decorators: [{
|
|
2322
2336
|
type: Optional
|
|
2337
|
+
}, {
|
|
2338
|
+
type: Inject,
|
|
2339
|
+
args: [forwardRef(() => FieldComponent)]
|
|
2323
2340
|
}] }]; }, propDecorators: { uniqueId: [], orientation: [{
|
|
2324
2341
|
type: Input
|
|
2325
2342
|
}], name: [{
|
|
@@ -2399,11 +2416,21 @@ class FieldIconSizeProvider {
|
|
|
2399
2416
|
return this.field.size === 'lg' ? 'md' : 'sm';
|
|
2400
2417
|
}
|
|
2401
2418
|
}
|
|
2402
|
-
FieldIconSizeProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: FieldIconSizeProvider, deps: [{ token: FieldComponent }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2419
|
+
FieldIconSizeProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: FieldIconSizeProvider, deps: [{ token: forwardRef(() => FieldComponent) }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2403
2420
|
FieldIconSizeProvider.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: FieldIconSizeProvider });
|
|
2404
2421
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: FieldIconSizeProvider, decorators: [{
|
|
2405
2422
|
type: Injectable
|
|
2406
|
-
}], ctorParameters: function () { return [{ type: FieldComponent
|
|
2423
|
+
}], ctorParameters: function () { return [{ type: FieldComponent, decorators: [{
|
|
2424
|
+
type: Inject,
|
|
2425
|
+
args: [forwardRef(() => FieldComponent)]
|
|
2426
|
+
}] }]; } });
|
|
2427
|
+
const fieldHostBinding = {
|
|
2428
|
+
class: 'sapphire-field',
|
|
2429
|
+
'[class.sapphire-field--label-placement-side]': 'labelPlacement === "side"',
|
|
2430
|
+
'[class.sapphire-field--no-width]': 'noDefaultWidth || !controlHasDefaultWidth()',
|
|
2431
|
+
'[class.sapphire-field--label-alignment-top]': 'labelPlacement === "side" && hasRadioGroupChild()',
|
|
2432
|
+
'[class.sapphire-field--md]': 'size === "md"',
|
|
2433
|
+
};
|
|
2407
2434
|
/**
|
|
2408
2435
|
* A field is a common container for labelable controls such as select, radio group, text field,
|
|
2409
2436
|
* etc.
|
|
@@ -2427,8 +2454,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
2427
2454
|
* is determined based on the presence of @angular/form's {@link RequiredValidator}.
|
|
2428
2455
|
*/
|
|
2429
2456
|
class FieldComponent {
|
|
2430
|
-
constructor(changeDetectorRef, iconRegistry) {
|
|
2457
|
+
constructor(changeDetectorRef, iconRegistry, fieldset) {
|
|
2431
2458
|
this.changeDetectorRef = changeDetectorRef;
|
|
2459
|
+
this.fieldset = fieldset;
|
|
2432
2460
|
/**
|
|
2433
2461
|
* Label placement with respect to the form control.
|
|
2434
2462
|
* @default "above"
|
|
@@ -2482,10 +2510,36 @@ class FieldComponent {
|
|
|
2482
2510
|
}
|
|
2483
2511
|
/**
|
|
2484
2512
|
* Whether the field contains an error message (sp-field-error).
|
|
2513
|
+
* Also checks if a parent fieldset has an error.
|
|
2485
2514
|
*/
|
|
2486
2515
|
hasError(targetField) {
|
|
2487
|
-
|
|
2488
|
-
|
|
2516
|
+
// Check if this field has its own error
|
|
2517
|
+
if (this._hasOwnError(targetField)) {
|
|
2518
|
+
return true;
|
|
2519
|
+
}
|
|
2520
|
+
// Check if parent fieldset has an error targetting this field
|
|
2521
|
+
if (this.fieldset) {
|
|
2522
|
+
return this.fieldset.hasError(targetField);
|
|
2523
|
+
}
|
|
2524
|
+
return false;
|
|
2525
|
+
}
|
|
2526
|
+
_hasOwnError(targetField) {
|
|
2527
|
+
if (!this.error) {
|
|
2528
|
+
return false;
|
|
2529
|
+
}
|
|
2530
|
+
const { target } = this.error;
|
|
2531
|
+
// If no target is specified, error applies to all controls
|
|
2532
|
+
if (!target) {
|
|
2533
|
+
return true;
|
|
2534
|
+
}
|
|
2535
|
+
// If the target is a FieldControl, check if it matches
|
|
2536
|
+
if (this._isFieldControl(target)) {
|
|
2537
|
+
return target === targetField;
|
|
2538
|
+
}
|
|
2539
|
+
return false;
|
|
2540
|
+
}
|
|
2541
|
+
_isFieldControl(target) {
|
|
2542
|
+
return (typeof target === 'object' && target !== null && 'isDisabled' in target);
|
|
2489
2543
|
}
|
|
2490
2544
|
/**
|
|
2491
2545
|
* If there are multiple controls, the field is only disabled when all of them are disabled
|
|
@@ -2540,13 +2594,13 @@ class FieldComponent {
|
|
|
2540
2594
|
this.changed = true;
|
|
2541
2595
|
}
|
|
2542
2596
|
}
|
|
2543
|
-
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 });
|
|
2597
|
+
FieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: FieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: IconRegistry }, { token: FieldsetComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
2544
2598
|
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: [
|
|
2545
2599
|
{
|
|
2546
2600
|
provide: ICON_SIZE_PROVIDER,
|
|
2547
2601
|
useClass: FieldIconSizeProvider,
|
|
2548
2602
|
},
|
|
2549
|
-
], 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: "ngControl", first: true, predicate: NgControl, 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"] }] });
|
|
2603
|
+
], queries: [{ propertyName: "note", first: true, predicate: FieldNoteDirective, descendants: true }, { propertyName: "error", first: true, predicate: FieldErrorDirective, descendants: true }, { propertyName: "_fieldLabel", first: true, predicate: FieldLabelDirective }, { propertyName: "radioGroup", first: true, predicate: RadioGroupComponent, descendants: true }, { propertyName: "ngControl", first: true, predicate: NgControl, descendants: true }, { propertyName: "requiredValidator", first: true, predicate: RequiredValidator, descendants: true }, { propertyName: "controls", predicate: FieldControl, descendants: true }], 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: i4.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"] }] });
|
|
2550
2604
|
__decorate([
|
|
2551
2605
|
CoerceBoolean
|
|
2552
2606
|
], FieldComponent.prototype, "necessityIndicator", void 0);
|
|
@@ -2558,19 +2612,17 @@ __decorate([
|
|
|
2558
2612
|
], FieldComponent.prototype, "allowNoteAndError", void 0);
|
|
2559
2613
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: FieldComponent, decorators: [{
|
|
2560
2614
|
type: Component,
|
|
2561
|
-
args: [{ selector: 'sp-field', host:
|
|
2562
|
-
class: 'sapphire-field',
|
|
2563
|
-
'[class.sapphire-field--label-placement-side]': 'labelPlacement === "side"',
|
|
2564
|
-
'[class.sapphire-field--no-width]': 'noDefaultWidth || !controlHasDefaultWidth()',
|
|
2565
|
-
'[class.sapphire-field--label-alignment-top]': 'labelPlacement === "side" && hasRadioGroupChild()',
|
|
2566
|
-
'[class.sapphire-field--md]': 'size === "md"',
|
|
2567
|
-
}, hostDirectives: [UseComponentStylesOnHost], providers: [
|
|
2615
|
+
args: [{ selector: 'sp-field', host: fieldHostBinding, hostDirectives: [UseComponentStylesOnHost], providers: [
|
|
2568
2616
|
{
|
|
2569
2617
|
provide: ICON_SIZE_PROVIDER,
|
|
2570
2618
|
useClass: FieldIconSizeProvider,
|
|
2571
2619
|
},
|
|
2572
2620
|
], 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"] }]
|
|
2573
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: IconRegistry }
|
|
2621
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: IconRegistry }, { type: FieldsetComponent, decorators: [{
|
|
2622
|
+
type: Optional
|
|
2623
|
+
}, {
|
|
2624
|
+
type: SkipSelf
|
|
2625
|
+
}] }]; }, propDecorators: { necessityIndicator: [{
|
|
2574
2626
|
type: Input
|
|
2575
2627
|
}], labelPlacement: [{
|
|
2576
2628
|
type: Input
|
|
@@ -2591,10 +2643,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
2591
2643
|
args: [LabelComponent]
|
|
2592
2644
|
}], _fieldLabel: [{
|
|
2593
2645
|
type: ContentChild,
|
|
2594
|
-
args: [FieldLabelDirective]
|
|
2646
|
+
args: [FieldLabelDirective, { descendants: false }]
|
|
2595
2647
|
}], controls: [{
|
|
2596
2648
|
type: ContentChildren,
|
|
2597
|
-
args: [FieldControl]
|
|
2649
|
+
args: [FieldControl, { descendants: true }]
|
|
2598
2650
|
}], radioGroup: [{
|
|
2599
2651
|
type: ContentChild,
|
|
2600
2652
|
args: [RadioGroupComponent]
|
|
@@ -2608,6 +2660,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
2608
2660
|
type: ViewChildren,
|
|
2609
2661
|
args: [CdkPortalOutlet]
|
|
2610
2662
|
}] } });
|
|
2663
|
+
class FieldsetComponent extends FieldComponent {
|
|
2664
|
+
}
|
|
2665
|
+
FieldsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: FieldsetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2666
|
+
FieldsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: FieldsetComponent, selector: "sp-fieldset", 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: [
|
|
2667
|
+
{
|
|
2668
|
+
provide: ICON_SIZE_PROVIDER,
|
|
2669
|
+
useFactory: (fieldset) => ({
|
|
2670
|
+
get size() {
|
|
2671
|
+
return fieldset.size === 'lg' ? 'md' : 'sm';
|
|
2672
|
+
},
|
|
2673
|
+
}),
|
|
2674
|
+
deps: [FieldsetComponent],
|
|
2675
|
+
},
|
|
2676
|
+
], usesInheritance: 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: i4.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"] }] });
|
|
2677
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: FieldsetComponent, decorators: [{
|
|
2678
|
+
type: Component,
|
|
2679
|
+
args: [{ selector: 'sp-fieldset', host: fieldHostBinding, hostDirectives: [UseComponentStylesOnHost], providers: [
|
|
2680
|
+
{
|
|
2681
|
+
provide: ICON_SIZE_PROVIDER,
|
|
2682
|
+
useFactory: (fieldset) => ({
|
|
2683
|
+
get size() {
|
|
2684
|
+
return fieldset.size === 'lg' ? 'md' : 'sm';
|
|
2685
|
+
},
|
|
2686
|
+
}),
|
|
2687
|
+
deps: [FieldsetComponent],
|
|
2688
|
+
},
|
|
2689
|
+
], 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"] }]
|
|
2690
|
+
}] });
|
|
2611
2691
|
|
|
2612
2692
|
class CheckboxGroupComponent {
|
|
2613
2693
|
/** Whether the checkbox group is disabled */
|
|
@@ -3020,7 +3100,7 @@ MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
|
|
|
3020
3100
|
provide: ICON_SIZE_PROVIDER,
|
|
3021
3101
|
useValue: { size: 'sm' },
|
|
3022
3102
|
},
|
|
3023
|
-
], hostDirectives: [{ directive: i1
|
|
3103
|
+
], hostDirectives: [{ directive: i1.CdkMenu, outputs: ["closed", "closed"] }, { directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }], ngImport: i0, template: "<div class=\"sapphire-listbox\">\n <ng-content></ng-content>\n</div>\n", styles: [".sapphire-listbox{box-sizing:border-box;margin:0;position:relative;list-style:none;outline:none;font-family:var(--sapphire-semantic-font-name-default);--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{--sapphire-listbox-content-gap: var(--sapphire-semantic-size-spacing-xs);--sapphire-listbox-icon-size: var(--sapphire-semantic-size-icon-sm);width:100%;max-width:calc(100vw - 2 * var(--sapphire-listbox-icon-size));display:flex;align-items:center;gap:var(--sapphire-listbox-content-gap);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__item:not(.sapphire-listbox__item--empty) .sapphire-listbox__content>:first-child:not(.sapphire-listbox__checkmark){padding-left:calc(var(--sapphire-listbox-icon-size) + var(--sapphire-listbox-content-gap))}.sapphire-listbox__item--empty{cursor:default;pointer-events:none}.sapphire-listbox__item--empty .sapphire-listbox__content,.sapphire-listbox__item--empty .sapphire-listbox__text-container{justify-content:center}.sapphire-listbox__icon,.sapphire-listbox__checkmark{line-height:0;align-self:start;flex-shrink:0;padding-top:calc((var(--sapphire-semantic-size-font-body-sm) * var(--sapphire-semantic-size-line-height-md) - var(--sapphire-listbox-icon-size)) / 2)}.sapphire-listbox__text-container{line-height:var(--sapphire-semantic-size-line-height-md);flex:1}.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,.sapphire-listbox__separator.sapphire-listbox__separator{width:auto;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>.sapphire-listbox__separator:first-child{display:none}.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);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content{background:var(--sapphire-semantic-color-background-action-danger-tertiary-active);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.sapphire-popover{box-sizing:border-box;background:var(--sapphire-semantic-color-background-popover);box-shadow:var(--sapphire-semantic-shadow-popover);animation:fade-in var(--sapphire-semantic-time-fade-quick) var(--sapphire-semantic-transitions-fade);border-radius:var(--sapphire-semantic-size-radius-popover);overflow:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex}.sapphire-popover__content{flex-basis:100%}.sapphire-popover--padded{padding:var(--sapphire-semantic-size-spacing-container-horizontal-sm)}.sapphire-popover--max-width{max-width:var(--sapphire-global-size-generic-1120)}.sapphire-menu-backdrop{background:none}\n"] });
|
|
3024
3104
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuComponent, decorators: [{
|
|
3025
3105
|
type: Component,
|
|
3026
3106
|
args: [{ selector: 'sp-menu', hostDirectives: [
|
|
@@ -3038,13 +3118,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
3038
3118
|
provide: ICON_SIZE_PROVIDER,
|
|
3039
3119
|
useValue: { size: 'sm' },
|
|
3040
3120
|
},
|
|
3041
|
-
], standalone: false, template: "<div class=\"sapphire-listbox\">\n <ng-content></ng-content>\n</div>\n", styles: [".sapphire-listbox{box-sizing:border-box;margin:0;position:relative;list-style:none;outline:none;font-family:var(--sapphire-semantic-font-name-default);--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{--sapphire-listbox-content-gap: var(--sapphire-semantic-size-spacing-xs);--sapphire-listbox-icon-size: var(--sapphire-semantic-size-icon-sm);width:100%;max-width:calc(100vw - 2 * var(--sapphire-listbox-icon-size));display:flex;align-items:center;gap:var(--sapphire-listbox-content-gap);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__item:not(.sapphire-listbox__item--empty) .sapphire-listbox__content>:first-child:not(.sapphire-listbox__checkmark){padding-left:calc(var(--sapphire-listbox-icon-size) + var(--sapphire-listbox-content-gap))}.sapphire-listbox__item--empty{cursor:default;pointer-events:none}.sapphire-listbox__item--empty .sapphire-listbox__content,.sapphire-listbox__item--empty .sapphire-listbox__text-container{justify-content:center}.sapphire-listbox__icon,.sapphire-listbox__checkmark{line-height:0;align-self:start;flex-shrink:0;padding-top:calc((var(--sapphire-semantic-size-font-body-sm) * var(--sapphire-semantic-size-line-height-md) - var(--sapphire-listbox-icon-size)) / 2)}.sapphire-listbox__text-container{line-height:var(--sapphire-semantic-size-line-height-md);flex:1}.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,.sapphire-listbox__separator.sapphire-listbox__separator{width:auto;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>.sapphire-listbox__separator:first-child{display:none}.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)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.sapphire-popover{box-sizing:border-box;background:var(--sapphire-semantic-color-background-popover);box-shadow:var(--sapphire-semantic-shadow-popover);animation:fade-in var(--sapphire-semantic-time-fade-quick) var(--sapphire-semantic-transitions-fade);border-radius:var(--sapphire-semantic-size-radius-popover);overflow:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex}.sapphire-popover__content{flex-basis:100%}.sapphire-popover--padded{padding:var(--sapphire-semantic-size-spacing-container-horizontal-sm)}.sapphire-popover--max-width{max-width:var(--sapphire-global-size-generic-1120)}.sapphire-menu-backdrop{background:none}\n"] }]
|
|
3121
|
+
], standalone: false, template: "<div class=\"sapphire-listbox\">\n <ng-content></ng-content>\n</div>\n", styles: [".sapphire-listbox{box-sizing:border-box;margin:0;position:relative;list-style:none;outline:none;font-family:var(--sapphire-semantic-font-name-default);--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{--sapphire-listbox-content-gap: var(--sapphire-semantic-size-spacing-xs);--sapphire-listbox-icon-size: var(--sapphire-semantic-size-icon-sm);width:100%;max-width:calc(100vw - 2 * var(--sapphire-listbox-icon-size));display:flex;align-items:center;gap:var(--sapphire-listbox-content-gap);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__item:not(.sapphire-listbox__item--empty) .sapphire-listbox__content>:first-child:not(.sapphire-listbox__checkmark){padding-left:calc(var(--sapphire-listbox-icon-size) + var(--sapphire-listbox-content-gap))}.sapphire-listbox__item--empty{cursor:default;pointer-events:none}.sapphire-listbox__item--empty .sapphire-listbox__content,.sapphire-listbox__item--empty .sapphire-listbox__text-container{justify-content:center}.sapphire-listbox__icon,.sapphire-listbox__checkmark{line-height:0;align-self:start;flex-shrink:0;padding-top:calc((var(--sapphire-semantic-size-font-body-sm) * var(--sapphire-semantic-size-line-height-md) - var(--sapphire-listbox-icon-size)) / 2)}.sapphire-listbox__text-container{line-height:var(--sapphire-semantic-size-line-height-md);flex:1}.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,.sapphire-listbox__separator.sapphire-listbox__separator{width:auto;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>.sapphire-listbox__separator:first-child{display:none}.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);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content{background:var(--sapphire-semantic-color-background-action-danger-tertiary-active);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.sapphire-popover{box-sizing:border-box;background:var(--sapphire-semantic-color-background-popover);box-shadow:var(--sapphire-semantic-shadow-popover);animation:fade-in var(--sapphire-semantic-time-fade-quick) var(--sapphire-semantic-transitions-fade);border-radius:var(--sapphire-semantic-size-radius-popover);overflow:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex}.sapphire-popover__content{flex-basis:100%}.sapphire-popover--padded{padding:var(--sapphire-semantic-size-spacing-container-horizontal-sm)}.sapphire-popover--max-width{max-width:var(--sapphire-global-size-generic-1120)}.sapphire-menu-backdrop{background:none}\n"] }]
|
|
3042
3122
|
}] });
|
|
3043
3123
|
|
|
3044
3124
|
class MenuItemComponent {
|
|
3045
3125
|
}
|
|
3046
3126
|
MenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3047
|
-
MenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: MenuItemComponent, selector: "sp-menu-item", inputs: { disabled: "disabled", danger: "danger" }, host: { properties: { "class.sapphire-listbox__item": "true", "class.is-disabled": "this.disabled", "class.sapphire-listbox__item--danger": "this.danger" } }, hostDirectives: [{ directive: i1
|
|
3127
|
+
MenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: MenuItemComponent, selector: "sp-menu-item", inputs: { disabled: "disabled", danger: "danger" }, host: { properties: { "class.sapphire-listbox__item": "true", "class.is-disabled": "this.disabled", "class.sapphire-listbox__item--danger": "this.danger" } }, hostDirectives: [{ directive: i1.CdkMenuItem, inputs: ["cdkMenuItemDisabled", "disabled", "cdkMenuitemTypeaheadLabel", "typeaheadLabel"], outputs: ["cdkMenuItemTriggered", "triggered"] }, { directive: UseComponentStyles }], ngImport: i0, template: "<div class=\"sapphire-listbox__content\" _spUseComponentStyles>\n <div class=\"sapphire-listbox__text-container\" _spUseComponentStyles>\n <div class=\"sapphire-listbox__primary-text\" _spUseComponentStyles>\n <ng-content select=\"sp-menu-primary-text\"></ng-content>\n <!-- If nothing matches other ng-content selectors then render it as primary text -->\n <ng-content></ng-content>\n </div>\n <ng-content select=\"sp-menu-secondary-text\"></ng-content>\n </div>\n <ng-content select=\"sp-menu-item-icon\"></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: UseComponentStyles, selector: "[_spUseComponentStyles]" }] });
|
|
3048
3128
|
__decorate([
|
|
3049
3129
|
CoerceBoolean
|
|
3050
3130
|
], MenuItemComponent.prototype, "disabled", void 0);
|
|
@@ -3258,10 +3338,10 @@ class MenuTriggerDirective {
|
|
|
3258
3338
|
return `${this.direction} ${this.align}`;
|
|
3259
3339
|
}
|
|
3260
3340
|
}
|
|
3261
|
-
MenuTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuTriggerDirective, deps: [{ token: i1
|
|
3341
|
+
MenuTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuTriggerDirective, deps: [{ token: i1.CdkMenuTrigger }], target: i0.ɵɵFactoryTarget.Directive });
|
|
3262
3342
|
MenuTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: MenuTriggerDirective, selector: "[spMenuTriggerFor]", inputs: { align: ["spMenuTriggerAlign", "align"], direction: ["spMenuTriggerDirection", "direction"] }, host: { listeners: { "keydown.space": "handleSpace()", "keydown.escape": "handleEscape()" }, properties: { "class.is-active": "isOpen()" } }, providers: [
|
|
3263
3343
|
SapphireOverlay, // providing it here to use the current theme.
|
|
3264
|
-
], exportAs: ["spMenuTrigger"], hostDirectives: [{ directive: i1
|
|
3344
|
+
], exportAs: ["spMenuTrigger"], hostDirectives: [{ directive: i1.CdkMenuTrigger, inputs: ["cdkMenuTriggerFor", "spMenuTriggerFor"], outputs: ["cdkMenuOpened", "spMenuOpened", "cdkMenuClosed", "spMenuClosed"] }], ngImport: i0 });
|
|
3265
3345
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuTriggerDirective, decorators: [{
|
|
3266
3346
|
type: Directive,
|
|
3267
3347
|
args: [{
|
|
@@ -3282,7 +3362,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
3282
3362
|
},
|
|
3283
3363
|
standalone: false,
|
|
3284
3364
|
}]
|
|
3285
|
-
}], ctorParameters: function () { return [{ type: i1
|
|
3365
|
+
}], ctorParameters: function () { return [{ type: i1.CdkMenuTrigger }]; }, propDecorators: { align: [{
|
|
3286
3366
|
type: Input,
|
|
3287
3367
|
args: ['spMenuTriggerAlign']
|
|
3288
3368
|
}], direction: [{
|
|
@@ -3304,14 +3384,14 @@ class MenuSectionComponent {
|
|
|
3304
3384
|
return this.menu.items?.first === this.firstMenuItem;
|
|
3305
3385
|
}
|
|
3306
3386
|
}
|
|
3307
|
-
MenuSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuSectionComponent, deps: [{ token: i1
|
|
3308
|
-
MenuSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: MenuSectionComponent, selector: "sp-menu-section", host: { properties: { "class.sapphire-listbox__section": "true" } }, queries: [{ propertyName: "firstMenuItem", first: true, predicate: CdkMenuItem, descendants: true }], hostDirectives: [{ directive: i1
|
|
3387
|
+
MenuSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuSectionComponent, deps: [{ token: i1.CdkMenu }], target: i0.ɵɵFactoryTarget.Component });
|
|
3388
|
+
MenuSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: MenuSectionComponent, selector: "sp-menu-section", host: { properties: { "class.sapphire-listbox__section": "true" } }, queries: [{ propertyName: "firstMenuItem", first: true, predicate: CdkMenuItem, descendants: true }], hostDirectives: [{ directive: i1.CdkMenuGroup }, { directive: UseComponentStyles }], ngImport: i0, template: "<div\n *ngIf=\"!_isFirstSection()\"\n class=\"sapphire-listbox__separator\"\n _spUseComponentStyles\n></div>\n<ng-content></ng-content>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: UseComponentStyles, selector: "[_spUseComponentStyles]" }] });
|
|
3309
3389
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuSectionComponent, decorators: [{
|
|
3310
3390
|
type: Component,
|
|
3311
3391
|
args: [{ selector: 'sp-menu-section', hostDirectives: [CdkMenuGroup, UseComponentStyles], host: {
|
|
3312
3392
|
'[class.sapphire-listbox__section]': 'true',
|
|
3313
3393
|
}, standalone: false, template: "<div\n *ngIf=\"!_isFirstSection()\"\n class=\"sapphire-listbox__separator\"\n _spUseComponentStyles\n></div>\n<ng-content></ng-content>\n" }]
|
|
3314
|
-
}], ctorParameters: function () { return [{ type: i1
|
|
3394
|
+
}], ctorParameters: function () { return [{ type: i1.CdkMenu }]; }, propDecorators: { firstMenuItem: [{
|
|
3315
3395
|
type: ContentChild,
|
|
3316
3396
|
args: [CdkMenuItem]
|
|
3317
3397
|
}] } });
|
|
@@ -3945,7 +4025,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
3945
4025
|
class SapphireFieldModule {
|
|
3946
4026
|
}
|
|
3947
4027
|
SapphireFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SapphireFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
3948
|
-
SapphireFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.0", ngImport: i0, type: SapphireFieldModule, declarations: [FieldComponent], imports: [NgIf,
|
|
4028
|
+
SapphireFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.0", ngImport: i0, type: SapphireFieldModule, declarations: [FieldComponent, FieldsetComponent], imports: [NgIf,
|
|
3949
4029
|
FieldLabelDirective,
|
|
3950
4030
|
FieldNoteDirective,
|
|
3951
4031
|
FieldNoteSuffixDirective,
|
|
@@ -3957,7 +4037,8 @@ SapphireFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ver
|
|
|
3957
4037
|
FieldNoteDirective,
|
|
3958
4038
|
FieldNoteSuffixDirective,
|
|
3959
4039
|
FieldErrorDirective,
|
|
3960
|
-
FieldComponent
|
|
4040
|
+
FieldComponent,
|
|
4041
|
+
FieldsetComponent] });
|
|
3961
4042
|
SapphireFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SapphireFieldModule, imports: [PortalModule,
|
|
3962
4043
|
LabelComponent,
|
|
3963
4044
|
CommonModule,
|
|
@@ -3965,7 +4046,7 @@ SapphireFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ver
|
|
|
3965
4046
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SapphireFieldModule, decorators: [{
|
|
3966
4047
|
type: NgModule,
|
|
3967
4048
|
args: [{
|
|
3968
|
-
declarations: [FieldComponent],
|
|
4049
|
+
declarations: [FieldComponent, FieldsetComponent],
|
|
3969
4050
|
imports: [
|
|
3970
4051
|
NgIf,
|
|
3971
4052
|
FieldLabelDirective,
|
|
@@ -3983,6 +4064,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
3983
4064
|
FieldNoteSuffixDirective,
|
|
3984
4065
|
FieldErrorDirective,
|
|
3985
4066
|
FieldComponent,
|
|
4067
|
+
FieldsetComponent,
|
|
3986
4068
|
],
|
|
3987
4069
|
}]
|
|
3988
4070
|
}] });
|
|
@@ -4021,7 +4103,7 @@ class TextFieldInputDirective {
|
|
|
4021
4103
|
this.textarea = element.nodeName.toLowerCase() === 'textarea';
|
|
4022
4104
|
}
|
|
4023
4105
|
}
|
|
4024
|
-
TextFieldInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TextFieldInputDirective, deps: [{ token: i0.ElementRef }, { token: i1$
|
|
4106
|
+
TextFieldInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TextFieldInputDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.NgControl, optional: true, self: true }, { token: FieldComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
4025
4107
|
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 });
|
|
4026
4108
|
__decorate([
|
|
4027
4109
|
AutoId()
|
|
@@ -4042,7 +4124,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
4042
4124
|
hostDirectives: [UseComponentStyles],
|
|
4043
4125
|
standalone: false,
|
|
4044
4126
|
}]
|
|
4045
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$
|
|
4127
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.NgControl, decorators: [{
|
|
4046
4128
|
type: Self
|
|
4047
4129
|
}, {
|
|
4048
4130
|
type: Optional
|
|
@@ -4291,7 +4373,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
4291
4373
|
class OptionIconDirective {
|
|
4292
4374
|
}
|
|
4293
4375
|
OptionIconDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: OptionIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4294
|
-
OptionIconDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: OptionIconDirective, selector: "sp-option-icon", viewQueries: [{ propertyName: "contentPortal", first: true, predicate: CdkPortal, descendants: true }], ngImport: i0, template: '<ng-template cdkPortal><ng-content></ng-content></ng-template>', isInline: true, dependencies: [{ kind: "directive", type:
|
|
4376
|
+
OptionIconDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: OptionIconDirective, selector: "sp-option-icon", viewQueries: [{ propertyName: "contentPortal", first: true, predicate: CdkPortal, descendants: true }], ngImport: i0, template: '<ng-template cdkPortal><ng-content></ng-content></ng-template>', isInline: true, dependencies: [{ kind: "directive", type: i4.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }] });
|
|
4295
4377
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: OptionIconDirective, decorators: [{
|
|
4296
4378
|
type: Component,
|
|
4297
4379
|
args: [{
|
|
@@ -4310,7 +4392,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
4310
4392
|
class OptionSecondaryTextDirective {
|
|
4311
4393
|
}
|
|
4312
4394
|
OptionSecondaryTextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: OptionSecondaryTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4313
|
-
OptionSecondaryTextDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: OptionSecondaryTextDirective, selector: "sp-option-secondary-text", viewQueries: [{ propertyName: "contentPortal", first: true, predicate: CdkPortal, descendants: true }], ngImport: i0, template: '<ng-template cdkPortal><ng-content></ng-content></ng-template>', isInline: true, dependencies: [{ kind: "directive", type:
|
|
4395
|
+
OptionSecondaryTextDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: OptionSecondaryTextDirective, selector: "sp-option-secondary-text", viewQueries: [{ propertyName: "contentPortal", first: true, predicate: CdkPortal, descendants: true }], ngImport: i0, template: '<ng-template cdkPortal><ng-content></ng-content></ng-template>', isInline: true, dependencies: [{ kind: "directive", type: i4.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }] });
|
|
4314
4396
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: OptionSecondaryTextDirective, decorators: [{
|
|
4315
4397
|
type: Component,
|
|
4316
4398
|
args: [{
|
|
@@ -4516,7 +4598,7 @@ class CdkOptionScrollIssuePatch {
|
|
|
4516
4598
|
}
|
|
4517
4599
|
}
|
|
4518
4600
|
}
|
|
4519
|
-
CdkOptionScrollIssuePatch.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: CdkOptionScrollIssuePatch, deps: [{ token: i1$
|
|
4601
|
+
CdkOptionScrollIssuePatch.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: CdkOptionScrollIssuePatch, deps: [{ token: i1$2.CdkListbox }, { token: i1$2.CdkOption }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
4520
4602
|
CdkOptionScrollIssuePatch.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: CdkOptionScrollIssuePatch, isStandalone: true, selector: "[cdkOption]", ngImport: i0 });
|
|
4521
4603
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: CdkOptionScrollIssuePatch, decorators: [{
|
|
4522
4604
|
type: Directive,
|
|
@@ -4524,7 +4606,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
4524
4606
|
selector: '[cdkOption]',
|
|
4525
4607
|
standalone: true,
|
|
4526
4608
|
}]
|
|
4527
|
-
}], ctorParameters: function () { return [{ type: i1$
|
|
4609
|
+
}], ctorParameters: function () { return [{ type: i1$2.CdkListbox }, { type: i1$2.CdkOption }, { type: i0.ElementRef }]; } });
|
|
4528
4610
|
|
|
4529
4611
|
/**
|
|
4530
4612
|
* JS-based :active state for non-button clickable elements.
|
|
@@ -4652,7 +4734,7 @@ class ListboxItemComponent {
|
|
|
4652
4734
|
}
|
|
4653
4735
|
}
|
|
4654
4736
|
ListboxItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ListboxItemComponent, deps: [{ token: PressedDirective }, { token: IconRegistry }], target: i0.ɵɵFactoryTarget.Component });
|
|
4655
|
-
ListboxItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ListboxItemComponent, selector: "li[sp-listbox-item]", inputs: { selected: "selected", focused: "focused", option: "option" }, host: { properties: { "class.sapphire-listbox__item--selected": "selected", "class.is-disabled": "option.disabled" }, classAttribute: "sapphire-listbox__item" }, hostDirectives: [{ directive: UseComponentStyles }, { directive: PressedDirective }, { directive: FocusedDirective, inputs: ["spFocused", "focused"] }], ngImport: i0, template: "<div class=\"sapphire-listbox__content\" _spUseComponentStyles>\n <div\n class=\"sapphire-listbox__checkmark\"\n _spUseComponentStyles\n *ngIf=\"selected\"\n >\n <sp-icon name=\"checkmark\" color=\"informative\"></sp-icon>\n </div>\n <div class=\"sapphire-listbox__text-container\" _spUseComponentStyles>\n <div class=\"sapphire-listbox__primary-text\" _spUseComponentStyles>\n <ng-container *ngIf=\"option.primaryText\">\n <ng-container *cdkPortalOutlet=\"option.primaryText\"></ng-container>\n </ng-container>\n </div>\n <div\n class=\"sapphire-listbox__secondary-text\"\n _spUseComponentStyles\n *ngIf=\"option.secondaryText?.contentPortal as secondaryText\"\n >\n <ng-container *cdkPortalOutlet=\"secondaryText\"></ng-container>\n </div>\n </div>\n <div\n class=\"sapphire-listbox__icon\"\n _spUseComponentStyles\n *ngIf=\"option.icon?.contentPortal as icon\"\n >\n <ng-container *cdkPortalOutlet=\"icon\"></ng-container>\n </div>\n</div>\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: "directive", type:
|
|
4737
|
+
ListboxItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ListboxItemComponent, selector: "li[sp-listbox-item]", inputs: { selected: "selected", focused: "focused", option: "option" }, host: { properties: { "class.sapphire-listbox__item--selected": "selected", "class.is-disabled": "option.disabled" }, classAttribute: "sapphire-listbox__item" }, hostDirectives: [{ directive: UseComponentStyles }, { directive: PressedDirective }, { directive: FocusedDirective, inputs: ["spFocused", "focused"] }], ngImport: i0, template: "<div class=\"sapphire-listbox__content\" _spUseComponentStyles>\n <div\n class=\"sapphire-listbox__checkmark\"\n _spUseComponentStyles\n *ngIf=\"selected\"\n >\n <sp-icon name=\"checkmark\" color=\"informative\"></sp-icon>\n </div>\n <div class=\"sapphire-listbox__text-container\" _spUseComponentStyles>\n <div class=\"sapphire-listbox__primary-text\" _spUseComponentStyles>\n <ng-container *ngIf=\"option.primaryText\">\n <ng-container *cdkPortalOutlet=\"option.primaryText\"></ng-container>\n </ng-container>\n </div>\n <div\n class=\"sapphire-listbox__secondary-text\"\n _spUseComponentStyles\n *ngIf=\"option.secondaryText?.contentPortal as secondaryText\"\n >\n <ng-container *cdkPortalOutlet=\"secondaryText\"></ng-container>\n </div>\n </div>\n <div\n class=\"sapphire-listbox__icon\"\n _spUseComponentStyles\n *ngIf=\"option.icon?.contentPortal as icon\"\n >\n <ng-container *cdkPortalOutlet=\"icon\"></ng-container>\n </div>\n</div>\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: "directive", type: i4.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: UseComponentStyles, selector: "[_spUseComponentStyles]" }] });
|
|
4656
4738
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ListboxItemComponent, decorators: [{
|
|
4657
4739
|
type: Component,
|
|
4658
4740
|
args: [{ selector: 'li[sp-listbox-item]', host: {
|
|
@@ -4890,7 +4972,7 @@ ListboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
|
|
|
4890
4972
|
useValue: { size: 'sm' },
|
|
4891
4973
|
},
|
|
4892
4974
|
ViewEncapsulationProvider,
|
|
4893
|
-
], 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\n <!-- Empty state when no options available -->\n <li\n *ngIf=\"isEmpty && _getEmptyState()\"\n class=\"sapphire-listbox__item sapphire-listbox__item--empty\"\n >\n <div class=\"sapphire-listbox__content\">\n <div class=\"sapphire-listbox__primary-text\">\n <ng-container *ngIf=\"_isString(_getEmptyState())\">\n {{ _getEmptyState() }}\n </ng-container>\n <ng-container *ngIf=\"_getEmptyStateTemplate()\">\n <ng-container\n *ngTemplateOutlet=\"_getEmptyStateTemplate()\"\n ></ng-container>\n </ng-container>\n </div>\n </div>\n </li>\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{--sapphire-listbox-content-gap: var(--sapphire-semantic-size-spacing-xs);--sapphire-listbox-icon-size: var(--sapphire-semantic-size-icon-sm);width:100%;max-width:calc(100vw - 2 * var(--sapphire-listbox-icon-size));display:flex;align-items:center;gap:var(--sapphire-listbox-content-gap);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__item:not(.sapphire-listbox__item--empty) .sapphire-listbox__content>:first-child:not(.sapphire-listbox__checkmark){padding-left:calc(var(--sapphire-listbox-icon-size) + var(--sapphire-listbox-content-gap))}.sapphire-listbox__item--empty{cursor:default;pointer-events:none}.sapphire-listbox__item--empty .sapphire-listbox__content,.sapphire-listbox__item--empty .sapphire-listbox__text-container{justify-content:center}.sapphire-listbox__icon,.sapphire-listbox__checkmark{line-height:0;align-self:start;flex-shrink:0;padding-top:calc((var(--sapphire-semantic-size-font-body-sm) * var(--sapphire-semantic-size-line-height-md) - var(--sapphire-listbox-icon-size)) / 2)}.sapphire-listbox__text-container{line-height:var(--sapphire-semantic-size-line-height-md);flex:1}.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,.sapphire-listbox__separator.sapphire-listbox__separator{width:auto;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>.sapphire-listbox__separator:first-child{display:none}.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: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }] });
|
|
4975
|
+
], 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\n <!-- Empty state when no options available -->\n <li\n *ngIf=\"isEmpty && _getEmptyState()\"\n class=\"sapphire-listbox__item sapphire-listbox__item--empty\"\n >\n <div class=\"sapphire-listbox__content\">\n <div class=\"sapphire-listbox__primary-text\">\n <ng-container *ngIf=\"_isString(_getEmptyState())\">\n {{ _getEmptyState() }}\n </ng-container>\n <ng-container *ngIf=\"_getEmptyStateTemplate()\">\n <ng-container\n *ngTemplateOutlet=\"_getEmptyStateTemplate()\"\n ></ng-container>\n </ng-container>\n </div>\n </div>\n </li>\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{--sapphire-listbox-content-gap: var(--sapphire-semantic-size-spacing-xs);--sapphire-listbox-icon-size: var(--sapphire-semantic-size-icon-sm);width:100%;max-width:calc(100vw - 2 * var(--sapphire-listbox-icon-size));display:flex;align-items:center;gap:var(--sapphire-listbox-content-gap);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__item:not(.sapphire-listbox__item--empty) .sapphire-listbox__content>:first-child:not(.sapphire-listbox__checkmark){padding-left:calc(var(--sapphire-listbox-icon-size) + var(--sapphire-listbox-content-gap))}.sapphire-listbox__item--empty{cursor:default;pointer-events:none}.sapphire-listbox__item--empty .sapphire-listbox__content,.sapphire-listbox__item--empty .sapphire-listbox__text-container{justify-content:center}.sapphire-listbox__icon,.sapphire-listbox__checkmark{line-height:0;align-self:start;flex-shrink:0;padding-top:calc((var(--sapphire-semantic-size-font-body-sm) * var(--sapphire-semantic-size-line-height-md) - var(--sapphire-listbox-icon-size)) / 2)}.sapphire-listbox__text-container{line-height:var(--sapphire-semantic-size-line-height-md);flex:1}.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,.sapphire-listbox__separator.sapphire-listbox__separator{width:auto;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>.sapphire-listbox__separator:first-child{display:none}.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);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content{background:var(--sapphire-semantic-color-background-action-danger-tertiary-active);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i1$2.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "directive", type: CdkOptionScrollIssuePatch, selector: "[cdkOption]" }, { kind: "component", type: ListboxItemComponent, selector: "li[sp-listbox-item]", inputs: ["selected", "focused", "option"] }] });
|
|
4894
4976
|
__decorate([
|
|
4895
4977
|
CoerceBoolean
|
|
4896
4978
|
], ListboxComponent.prototype, "disabled", void 0);
|
|
@@ -4916,7 +4998,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
4916
4998
|
], host: {
|
|
4917
4999
|
'[attr.aria-label]': 'null',
|
|
4918
5000
|
'[attr.aria-labelledby]': 'null',
|
|
4919
|
-
}, exportAs: 'spListbox', standalone: false, 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\n <!-- Empty state when no options available -->\n <li\n *ngIf=\"isEmpty && _getEmptyState()\"\n class=\"sapphire-listbox__item sapphire-listbox__item--empty\"\n >\n <div class=\"sapphire-listbox__content\">\n <div class=\"sapphire-listbox__primary-text\">\n <ng-container *ngIf=\"_isString(_getEmptyState())\">\n {{ _getEmptyState() }}\n </ng-container>\n <ng-container *ngIf=\"_getEmptyStateTemplate()\">\n <ng-container\n *ngTemplateOutlet=\"_getEmptyStateTemplate()\"\n ></ng-container>\n </ng-container>\n </div>\n </div>\n </li>\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{--sapphire-listbox-content-gap: var(--sapphire-semantic-size-spacing-xs);--sapphire-listbox-icon-size: var(--sapphire-semantic-size-icon-sm);width:100%;max-width:calc(100vw - 2 * var(--sapphire-listbox-icon-size));display:flex;align-items:center;gap:var(--sapphire-listbox-content-gap);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__item:not(.sapphire-listbox__item--empty) .sapphire-listbox__content>:first-child:not(.sapphire-listbox__checkmark){padding-left:calc(var(--sapphire-listbox-icon-size) + var(--sapphire-listbox-content-gap))}.sapphire-listbox__item--empty{cursor:default;pointer-events:none}.sapphire-listbox__item--empty .sapphire-listbox__content,.sapphire-listbox__item--empty .sapphire-listbox__text-container{justify-content:center}.sapphire-listbox__icon,.sapphire-listbox__checkmark{line-height:0;align-self:start;flex-shrink:0;padding-top:calc((var(--sapphire-semantic-size-font-body-sm) * var(--sapphire-semantic-size-line-height-md) - var(--sapphire-listbox-icon-size)) / 2)}.sapphire-listbox__text-container{line-height:var(--sapphire-semantic-size-line-height-md);flex:1}.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,.sapphire-listbox__separator.sapphire-listbox__separator{width:auto;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>.sapphire-listbox__separator:first-child{display:none}.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"] }]
|
|
5001
|
+
}, exportAs: 'spListbox', standalone: false, 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\n <!-- Empty state when no options available -->\n <li\n *ngIf=\"isEmpty && _getEmptyState()\"\n class=\"sapphire-listbox__item sapphire-listbox__item--empty\"\n >\n <div class=\"sapphire-listbox__content\">\n <div class=\"sapphire-listbox__primary-text\">\n <ng-container *ngIf=\"_isString(_getEmptyState())\">\n {{ _getEmptyState() }}\n </ng-container>\n <ng-container *ngIf=\"_getEmptyStateTemplate()\">\n <ng-container\n *ngTemplateOutlet=\"_getEmptyStateTemplate()\"\n ></ng-container>\n </ng-container>\n </div>\n </div>\n </li>\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{--sapphire-listbox-content-gap: var(--sapphire-semantic-size-spacing-xs);--sapphire-listbox-icon-size: var(--sapphire-semantic-size-icon-sm);width:100%;max-width:calc(100vw - 2 * var(--sapphire-listbox-icon-size));display:flex;align-items:center;gap:var(--sapphire-listbox-content-gap);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__item:not(.sapphire-listbox__item--empty) .sapphire-listbox__content>:first-child:not(.sapphire-listbox__checkmark){padding-left:calc(var(--sapphire-listbox-icon-size) + var(--sapphire-listbox-content-gap))}.sapphire-listbox__item--empty{cursor:default;pointer-events:none}.sapphire-listbox__item--empty .sapphire-listbox__content,.sapphire-listbox__item--empty .sapphire-listbox__text-container{justify-content:center}.sapphire-listbox__icon,.sapphire-listbox__checkmark{line-height:0;align-self:start;flex-shrink:0;padding-top:calc((var(--sapphire-semantic-size-font-body-sm) * var(--sapphire-semantic-size-line-height-md) - var(--sapphire-listbox-icon-size)) / 2)}.sapphire-listbox__text-container{line-height:var(--sapphire-semantic-size-line-height-md);flex:1}.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,.sapphire-listbox__separator.sapphire-listbox__separator{width:auto;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>.sapphire-listbox__separator:first-child{display:none}.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);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.sapphire-listbox__item--danger:not(.is-disabled).is-active .sapphire-listbox__content{background:var(--sapphire-semantic-color-background-action-danger-tertiary-active);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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"] }]
|
|
4920
5002
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: TranslateService }]; }, propDecorators: { selectedValues: [{
|
|
4921
5003
|
type: Input
|
|
4922
5004
|
}], selectedValuesChange: [{
|
|
@@ -5602,7 +5684,7 @@ class HiddenSelectComponent {
|
|
|
5602
5684
|
}
|
|
5603
5685
|
}
|
|
5604
5686
|
HiddenSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: HiddenSelectComponent, deps: [{ token: SelectComponentBase }], target: i0.ɵɵFactoryTarget.Component });
|
|
5605
|
-
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$
|
|
5687
|
+
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$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: VisuallyHiddenDirective, selector: "[spVisuallyHidden]", inputs: ["spVisuallyHidden"] }, { kind: "directive", type: UseComponentStyles, selector: "[_spUseComponentStyles]" }] });
|
|
5606
5688
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: HiddenSelectComponent, decorators: [{
|
|
5607
5689
|
type: Component,
|
|
5608
5690
|
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" }]
|
|
@@ -5892,7 +5974,7 @@ SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
|
|
|
5892
5974
|
provide: FieldControl,
|
|
5893
5975
|
useExisting: forwardRef(() => SelectComponent),
|
|
5894
5976
|
},
|
|
5895
|
-
], 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 [attr.aria-expanded]=\"isOpen()\"\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 && !listbox?._getEmptyState()\n ? 'none'\n : 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 [emptyState]=\"emptyState\"\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);color:var(--sapphire-semantic-color-foreground-secondary)}.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-hover .sapphire-select__icon-container,.sapphire-select:not(.is-disabled):not(.js-hover):hover .sapphire-select__icon-container{color:var(--sapphire-semantic-color-foreground-primary)}.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)}.sapphire-select--open .sapphire-select__icon-container{color:var(--sapphire-semantic-color-foreground-primary)}\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", "emptyState"], 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" }] });
|
|
5977
|
+
], 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 [attr.aria-disabled]=\"disabled ? true : null\"\n>\n <div class=\"sapphire-select__value\" [id]=\"_valueContainerId\">\n <input\n [attr.aria-expanded]=\"isOpen()\"\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 && !listbox?._getEmptyState()\n ? 'none'\n : 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 [emptyState]=\"emptyState\"\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);color:var(--sapphire-semantic-color-foreground-secondary)}.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-hover .sapphire-select__icon-container,.sapphire-select:not(.is-disabled):not(.js-hover):hover .sapphire-select__icon-container{color:var(--sapphire-semantic-color-foreground-primary)}.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)}.sapphire-select--open .sapphire-select__icon-container{color:var(--sapphire-semantic-color-foreground-primary)}\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", "emptyState"], 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" }] });
|
|
5896
5978
|
__decorate([
|
|
5897
5979
|
AutoId()
|
|
5898
5980
|
], SelectComponent.prototype, "_valueContainerId", void 0);
|
|
@@ -5923,7 +6005,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
5923
6005
|
'[attr.aria-label]': 'null',
|
|
5924
6006
|
'[attr.aria-labelledby]': 'null',
|
|
5925
6007
|
'[attr.placeholder]': 'null',
|
|
5926
|
-
}, 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 [attr.aria-expanded]=\"isOpen()\"\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 && !listbox?._getEmptyState()\n ? 'none'\n : 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 [emptyState]=\"emptyState\"\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);color:var(--sapphire-semantic-color-foreground-secondary)}.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-hover .sapphire-select__icon-container,.sapphire-select:not(.is-disabled):not(.js-hover):hover .sapphire-select__icon-container{color:var(--sapphire-semantic-color-foreground-primary)}.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)}.sapphire-select--open .sapphire-select__icon-container{color:var(--sapphire-semantic-color-foreground-primary)}\n"] }]
|
|
6008
|
+
}, 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 [attr.aria-disabled]=\"disabled ? true : null\"\n>\n <div class=\"sapphire-select__value\" [id]=\"_valueContainerId\">\n <input\n [attr.aria-expanded]=\"isOpen()\"\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 && !listbox?._getEmptyState()\n ? 'none'\n : 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 [emptyState]=\"emptyState\"\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);color:var(--sapphire-semantic-color-foreground-secondary)}.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-hover .sapphire-select__icon-container,.sapphire-select:not(.is-disabled):not(.js-hover):hover .sapphire-select__icon-container{color:var(--sapphire-semantic-color-foreground-primary)}.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)}.sapphire-select--open .sapphire-select__icon-container{color:var(--sapphire-semantic-color-foreground-primary)}\n"] }]
|
|
5927
6009
|
}], ctorParameters: function () { return [{ type: SelectValueHolder }, { type: IconRegistry }, { type: i3.FocusMonitor }, { type: i3.InputModalityDetector }, { type: FieldComponent, decorators: [{
|
|
5928
6010
|
type: Optional
|
|
5929
6011
|
}] }, { type: SearchableSelectDirective, decorators: [{
|
|
@@ -6253,7 +6335,7 @@ class SegmentedTabComponent {
|
|
|
6253
6335
|
}
|
|
6254
6336
|
}
|
|
6255
6337
|
SegmentedTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SegmentedTabComponent, deps: [{ token: forwardRef(() => SegmentedTabsComponent) }], target: i0.ɵɵFactoryTarget.Component });
|
|
6256
|
-
SegmentedTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: SegmentedTabComponent, selector: "sp-segmented-tab", inputs: { disabled: "disabled", label: "label" }, host: { properties: { "style.flex": "'1 1 auto'", "style.display": "'inline-flex'" } }, viewQueries: [{ propertyName: "_contentTemplate", first: true, predicate: TemplateRef, descendants: true }, { propertyName: "_button", first: true, predicate: ["button"], descendants: true }], ngImport: i0, template: "<button\n #button\n class=\"sapphire-segmented-control__button\"\n _spUseComponentStyles\n [class.sapphire-segmented-control__button--disabled]=\"disabled\"\n [class.sapphire-segmented-control__button--active]=\"isSelected()\"\n role=\"tab\"\n (click)=\"select()\"\n [id]=\"id\"\n [tabIndex]=\"getTabIndex()\"\n [attr.aria-disabled]=\"disabled\"\n>\n {{ label }}\n <ng-content select=\"sp-segmented-tab-label\"></ng-content>\n</button>\n<ng-template>\n <div\n class=\"sapphire-tab-panel\"\n role=\"tabpanel\"\n tabindex=\"0\"\n [id]=\"id + '-panel'\"\n [attr.aria-labelledby]=\"id\"\n >\n <ng-content select=\"sp-segmented-tab-content\"></ng-content>\n </div>\n</ng-template>\n", styles: [".sapphire-tabs-scroll-container{-ms-overflow-style:none;scrollbar-width:none;overflow-x:scroll;overflow-y:hidden;white-space:nowrap;position:relative;scroll-padding:0 calc(2 * var(--sapphire-semantic-size-spacing-3xl) + 1px);min-width:0;flex:1;overscroll-behavior-x:contain}.sapphire-tabs-scroll-container::-webkit-scrollbar{display:none}.sapphire-tabs-overflow-arrows{display:flex;align-items:center;min-width:0;flex:1;position:relative}.sapphire-tabs-overflow-arrows--inline{display:inline-flex}.sapphire-tabs-overflow-arrows__arrow{position:absolute;z-index:10;pointer-events:none}.sapphire-tabs-overflow-arrows__arrow--left{left:0;padding-right:var(--sapphire-semantic-size-spacing-3xl);background:linear-gradient(90deg,var(--sapphire-semantic-color-background-surface) 0%,var(--sapphire-semantic-color-background-surface) 40%,var(--sapphire-global-color-transparent) 100%)}.sapphire-tabs-overflow-arrows__arrow--right{right:0;padding-left:var(--sapphire-semantic-size-spacing-3xl);background:linear-gradient(90deg,var(--sapphire-global-color-transparent) 0%,var(--sapphire-semantic-color-background-surface) 60%,var(--sapphire-semantic-color-background-surface) 100%)}.sapphire-tabs{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--sapphire-semantic-size-height-control-xl);position:relative;overflow:hidden;min-width:100%;flex:1;padding:0 var(--sapphire-semantic-size-focus-ring)}.sapphire-tabs--align-left{justify-content:start}.sapphire-tabs--align-center{justify-content:center}.sapphire-tabs--align-right{justify-content:end}.sapphire-tabs:after{content:\"\";display:block;position:absolute;bottom:0;width:100%;height:var(--sapphire-global-size-static-2);background:var(--sapphire-semantic-color-border-secondary);border-radius:var(--sapphire-semantic-size-border-md)}.sapphire-tabs__underline{position:absolute;bottom:0;height:var(--sapphire-semantic-size-border-md);background:var(--sapphire-semantic-color-foreground-action-select-default);z-index:2;transform-origin:left}.sapphire-tabs__underline--with-transition{transition:transform var(--sapphire-semantic-time-motion-default) var(--sapphire-semantic-transitions-dynamic),width var(--sapphire-semantic-time-motion-default) var(--sapphire-global-transitions-ease-in-out-quick);transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:var(--sapphire-semantic-transitions-fade)}.sapphire-tabs--no-border:after{display:none}.sapphire-tabs__tab{display:flex;align-items:center;position:relative;font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-control-md);text-decoration:none;color:var(--sapphire-semantic-color-foreground-primary);box-sizing:border-box;white-space:nowrap;border-width:0;padding:0 var(--sapphire-semantic-size-spacing-md);height:var(--sapphire-semantic-size-height-control-md);margin:var(--sapphire-semantic-size-focus-ring) 0 var(--sapphire-semantic-size-focus-ring) 0;cursor:pointer;outline:none;border-radius:var(--sapphire-semantic-size-height-control-md);z-index:1;transition:background var(--sapphire-semantic-time-motion-default) var(--sapphire-semantic-transitions-dynamic),color var(--sapphire-semantic-time-motion-default) var(--sapphire-semantic-transitions-dynamic),width var(--sapphire-semantic-time-motion-default) var(--sapphire-semantic-transitions-dynamic);transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:var(--sapphire-semantic-transitions-fade)}.sapphire-tabs__tab:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.sapphire-tabs__tab--active):not(.js-hover):hover,.sapphire-tabs__tab:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.sapphire-tabs__tab--active).is-hover{background:var(--sapphire-semantic-color-background-action-tertiary-hover)}.sapphire-tabs__tab--active:not(:disabled):not(.is-disabled):not(.js-hover):hover,.sapphire-tabs__tab--active:not(:disabled):not(.is-disabled).is-hover{background:var(--sapphire-semantic-color-state-accent-subtle-hover)}.sapphire-tabs__tab:not(:disabled):not(.is-disabled):active,.sapphire-tabs__tab:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-tertiary-active)}.sapphire-tabs__tab--active:active:not(:disabled):not(.is-disabled):not(.js-hover):hover,.sapphire-tabs__tab--active:active:not(:disabled):not(.is-disabled).is-hover{background:var(--sapphire-semantic-color-state-accent-subtle-active)}.sapphire-tabs__tab.js-focus.is-focus,.sapphire-tabs__tab:not(.js-focus):focus-visible{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring)}.sapphire-tabs__tab:disabled,.sapphire-tabs__tab.is-disabled{cursor:not-allowed}.sapphire-tabs__tab:disabled .sapphire-tabs__label,.sapphire-tabs__tab.is-disabled .sapphire-tabs__label{opacity:var(--sapphire-semantic-opacity-disabled)}.sapphire-tabs__label{padding:0 1px}.sapphire-tabs__tab--active,.sapphire-tabs__tab--active:hover,.sapphire-tabs__tab--active.is-hover{color:var(--sapphire-semantic-color-foreground-action-select-default)}.sapphire-tabs__tab--active.js-focus:not(.is-focus):after,.sapphire-tabs__tab--active:not(.js-focus):not(:focus-visible):after{content:\"\";display:block;position:absolute;bottom:calc(-1 * var(--sapphire-semantic-size-focus-ring));width:100%;height:var(--sapphire-semantic-size-border-md);background:var(--sapphire-semantic-color-background-action-select-secondary-hover)}.sapphire-tabs .sapphire-tabs__tab--active.js-focus:not(.is-focus):after,.sapphire-tabs .sapphire-tabs__tab--active:not(.js-focus):not(:focus-visible):after{display:none}.sapphire-tabs--sm{height:var(--sapphire-semantic-size-height-control-lg)}.sapphire-tabs--sm .sapphire-tabs__tab{font-size:var(--sapphire-semantic-size-font-control-sm);padding:0 var(--sapphire-semantic-size-spacing-sm);height:var(--sapphire-semantic-size-height-control-sm)}.sapphire-tabs--lg{height:var(--sapphire-semantic-size-height-control-2xl)}.sapphire-tabs--lg .sapphire-tabs__tab{font-size:var(--sapphire-semantic-size-font-control-lg);padding:0 var(--sapphire-semantic-size-spacing-lg)}.sapphire-tab-panel{min-height:0;flex-grow:1}.sapphire-tab-panel.js-focus.is-focus,.sapphire-tab-panel:not(.js-focus):focus-visible{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);outline-offset:var(--sapphire-semantic-size-focus-ring)}\n"], dependencies: [{ kind: "directive", type: UseComponentStyles, selector: "[_spUseComponentStyles]" }] });
|
|
6338
|
+
SegmentedTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: SegmentedTabComponent, selector: "sp-segmented-tab", inputs: { disabled: "disabled", label: "label" }, host: { properties: { "style.flex": "'1 1 auto'", "style.display": "'inline-flex'" } }, viewQueries: [{ propertyName: "_contentTemplate", first: true, predicate: TemplateRef, descendants: true }, { propertyName: "_button", first: true, predicate: ["button"], descendants: true }], ngImport: i0, template: "<button\n #button\n class=\"sapphire-segmented-control__button\"\n _spUseComponentStyles\n [class.sapphire-segmented-control__button--disabled]=\"disabled\"\n [class.sapphire-segmented-control__button--active]=\"isSelected()\"\n role=\"tab\"\n (click)=\"select()\"\n [id]=\"id\"\n [tabIndex]=\"getTabIndex()\"\n [attr.aria-disabled]=\"disabled\"\n>\n {{ label }}\n <ng-content select=\"sp-segmented-tab-label\"></ng-content>\n</button>\n<ng-template>\n <div\n class=\"sapphire-tab-panel\"\n role=\"tabpanel\"\n tabindex=\"0\"\n [id]=\"id + '-panel'\"\n [attr.aria-labelledby]=\"id\"\n >\n <ng-content select=\"sp-segmented-tab-content\"></ng-content>\n </div>\n</ng-template>\n", styles: [".sapphire-tabs-scroll-container{-ms-overflow-style:none;scrollbar-width:none;overflow-x:scroll;overflow-y:hidden;white-space:nowrap;position:relative;scroll-padding:0 calc(2 * var(--sapphire-semantic-size-spacing-3xl) + 1px);min-width:0;flex:1;overscroll-behavior-x:contain}.sapphire-tabs-scroll-container::-webkit-scrollbar{display:none}.sapphire-tabs-overflow-arrows{display:flex;align-items:center;min-width:0;flex:1;position:relative}.sapphire-tabs-overflow-arrows--inline{display:inline-flex}.sapphire-tabs-overflow-arrows__arrow{position:absolute;z-index:10;pointer-events:none}.sapphire-tabs-overflow-arrows__arrow--left{left:0;padding-right:var(--sapphire-semantic-size-spacing-3xl);background:linear-gradient(90deg,var(--sapphire-semantic-color-background-surface) 0%,var(--sapphire-semantic-color-background-surface) 40%,var(--sapphire-global-color-transparent) 100%)}.sapphire-tabs-overflow-arrows__arrow--right{right:0;padding-left:var(--sapphire-semantic-size-spacing-3xl);background:linear-gradient(90deg,var(--sapphire-global-color-transparent) 0%,var(--sapphire-semantic-color-background-surface) 60%,var(--sapphire-semantic-color-background-surface) 100%)}.sapphire-tabs{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--sapphire-semantic-size-height-control-xl);position:relative;overflow:hidden;min-width:100%;flex:1;padding:0 var(--sapphire-semantic-size-focus-ring)}.sapphire-tabs--align-left{justify-content:start}.sapphire-tabs--align-center{justify-content:center}.sapphire-tabs--align-right{justify-content:end}.sapphire-tabs:after{content:\"\";display:block;position:absolute;bottom:0;width:100%;height:var(--sapphire-global-size-static-2);background:var(--sapphire-semantic-color-border-secondary);border-radius:var(--sapphire-semantic-size-border-md)}.sapphire-tabs__underline{position:absolute;bottom:0;height:var(--sapphire-semantic-size-border-md);background:var(--sapphire-semantic-color-foreground-action-select-default);z-index:2;transform-origin:left}.sapphire-tabs__underline--with-transition{transition:transform var(--sapphire-semantic-time-motion-default) var(--sapphire-semantic-transitions-dynamic),width var(--sapphire-semantic-time-motion-default) var(--sapphire-global-transitions-ease-in-out-quick);transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:var(--sapphire-semantic-transitions-fade)}.sapphire-tabs--no-border:after{display:none}.sapphire-tabs__tab{display:flex;align-items:center;position:relative;font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-control-md);text-decoration:none;color:var(--sapphire-semantic-color-foreground-primary);box-sizing:border-box;white-space:nowrap;border-width:0;padding:0 var(--sapphire-semantic-size-spacing-md);height:var(--sapphire-semantic-size-height-control-md);margin:var(--sapphire-semantic-size-focus-ring) 0 var(--sapphire-semantic-size-focus-ring) 0;cursor:pointer;outline:none;border-radius:var(--sapphire-semantic-size-height-control-md);z-index:1;transition:background var(--sapphire-semantic-time-motion-default) var(--sapphire-semantic-transitions-dynamic),color var(--sapphire-semantic-time-motion-default) var(--sapphire-semantic-transitions-dynamic),width var(--sapphire-semantic-time-motion-default) var(--sapphire-semantic-transitions-dynamic);transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:var(--sapphire-semantic-transitions-fade)}.sapphire-tabs__tab:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.sapphire-tabs__tab--active):not(.js-hover):hover,.sapphire-tabs__tab:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.sapphire-tabs__tab--active).is-hover{background:var(--sapphire-semantic-color-background-action-tertiary-hover);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.sapphire-tabs__tab--active:not(:disabled):not(.is-disabled):not(.js-hover):hover,.sapphire-tabs__tab--active:not(:disabled):not(.is-disabled).is-hover{background:var(--sapphire-semantic-color-state-accent-subtle-hover);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.sapphire-tabs__tab:not(:disabled):not(.is-disabled):active,.sapphire-tabs__tab:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-tertiary-active);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.sapphire-tabs__tab--active:active:not(:disabled):not(.is-disabled):not(.js-hover):hover,.sapphire-tabs__tab--active:active:not(:disabled):not(.is-disabled).is-hover{background:var(--sapphire-semantic-color-state-accent-subtle-active);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.sapphire-tabs__tab.js-focus.is-focus,.sapphire-tabs__tab:not(.js-focus):focus-visible{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring)}.sapphire-tabs__tab:disabled,.sapphire-tabs__tab.is-disabled{cursor:not-allowed}.sapphire-tabs__tab:disabled .sapphire-tabs__label,.sapphire-tabs__tab.is-disabled .sapphire-tabs__label{opacity:var(--sapphire-semantic-opacity-disabled)}.sapphire-tabs__label{padding:0 1px}.sapphire-tabs__tab--active,.sapphire-tabs__tab--active:hover,.sapphire-tabs__tab--active.is-hover{color:var(--sapphire-semantic-color-foreground-action-select-default)}.sapphire-tabs__tab--active.js-focus:not(.is-focus):after,.sapphire-tabs__tab--active:not(.js-focus):not(:focus-visible):after{content:\"\";display:block;position:absolute;bottom:calc(-1 * var(--sapphire-semantic-size-focus-ring));width:100%;height:var(--sapphire-semantic-size-border-md);background:var(--sapphire-semantic-color-background-action-select-secondary-hover)}.sapphire-tabs .sapphire-tabs__tab--active.js-focus:not(.is-focus):after,.sapphire-tabs .sapphire-tabs__tab--active:not(.js-focus):not(:focus-visible):after{display:none}.sapphire-tabs--sm{height:var(--sapphire-semantic-size-height-control-lg)}.sapphire-tabs--sm .sapphire-tabs__tab{font-size:var(--sapphire-semantic-size-font-control-sm);padding:0 var(--sapphire-semantic-size-spacing-sm);height:var(--sapphire-semantic-size-height-control-sm)}.sapphire-tabs--lg{height:var(--sapphire-semantic-size-height-control-2xl)}.sapphire-tabs--lg .sapphire-tabs__tab{font-size:var(--sapphire-semantic-size-font-control-lg);padding:0 var(--sapphire-semantic-size-spacing-lg)}.sapphire-tab-panel{min-height:0;flex-grow:1}.sapphire-tab-panel.js-focus.is-focus,.sapphire-tab-panel:not(.js-focus):focus-visible{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);outline-offset:var(--sapphire-semantic-size-focus-ring)}\n"], dependencies: [{ kind: "directive", type: UseComponentStyles, selector: "[_spUseComponentStyles]" }] });
|
|
6257
6339
|
__decorate([
|
|
6258
6340
|
AutoId()
|
|
6259
6341
|
], SegmentedTabComponent.prototype, "id", void 0);
|
|
@@ -6263,7 +6345,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
6263
6345
|
// Angular specific styles that are needed due to extra dom elements added by angular
|
|
6264
6346
|
'[style.flex]': "'1 1 auto'",
|
|
6265
6347
|
'[style.display]': "'inline-flex'",
|
|
6266
|
-
}, standalone: false, template: "<button\n #button\n class=\"sapphire-segmented-control__button\"\n _spUseComponentStyles\n [class.sapphire-segmented-control__button--disabled]=\"disabled\"\n [class.sapphire-segmented-control__button--active]=\"isSelected()\"\n role=\"tab\"\n (click)=\"select()\"\n [id]=\"id\"\n [tabIndex]=\"getTabIndex()\"\n [attr.aria-disabled]=\"disabled\"\n>\n {{ label }}\n <ng-content select=\"sp-segmented-tab-label\"></ng-content>\n</button>\n<ng-template>\n <div\n class=\"sapphire-tab-panel\"\n role=\"tabpanel\"\n tabindex=\"0\"\n [id]=\"id + '-panel'\"\n [attr.aria-labelledby]=\"id\"\n >\n <ng-content select=\"sp-segmented-tab-content\"></ng-content>\n </div>\n</ng-template>\n", styles: [".sapphire-tabs-scroll-container{-ms-overflow-style:none;scrollbar-width:none;overflow-x:scroll;overflow-y:hidden;white-space:nowrap;position:relative;scroll-padding:0 calc(2 * var(--sapphire-semantic-size-spacing-3xl) + 1px);min-width:0;flex:1;overscroll-behavior-x:contain}.sapphire-tabs-scroll-container::-webkit-scrollbar{display:none}.sapphire-tabs-overflow-arrows{display:flex;align-items:center;min-width:0;flex:1;position:relative}.sapphire-tabs-overflow-arrows--inline{display:inline-flex}.sapphire-tabs-overflow-arrows__arrow{position:absolute;z-index:10;pointer-events:none}.sapphire-tabs-overflow-arrows__arrow--left{left:0;padding-right:var(--sapphire-semantic-size-spacing-3xl);background:linear-gradient(90deg,var(--sapphire-semantic-color-background-surface) 0%,var(--sapphire-semantic-color-background-surface) 40%,var(--sapphire-global-color-transparent) 100%)}.sapphire-tabs-overflow-arrows__arrow--right{right:0;padding-left:var(--sapphire-semantic-size-spacing-3xl);background:linear-gradient(90deg,var(--sapphire-global-color-transparent) 0%,var(--sapphire-semantic-color-background-surface) 60%,var(--sapphire-semantic-color-background-surface) 100%)}.sapphire-tabs{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--sapphire-semantic-size-height-control-xl);position:relative;overflow:hidden;min-width:100%;flex:1;padding:0 var(--sapphire-semantic-size-focus-ring)}.sapphire-tabs--align-left{justify-content:start}.sapphire-tabs--align-center{justify-content:center}.sapphire-tabs--align-right{justify-content:end}.sapphire-tabs:after{content:\"\";display:block;position:absolute;bottom:0;width:100%;height:var(--sapphire-global-size-static-2);background:var(--sapphire-semantic-color-border-secondary);border-radius:var(--sapphire-semantic-size-border-md)}.sapphire-tabs__underline{position:absolute;bottom:0;height:var(--sapphire-semantic-size-border-md);background:var(--sapphire-semantic-color-foreground-action-select-default);z-index:2;transform-origin:left}.sapphire-tabs__underline--with-transition{transition:transform var(--sapphire-semantic-time-motion-default) var(--sapphire-semantic-transitions-dynamic),width var(--sapphire-semantic-time-motion-default) var(--sapphire-global-transitions-ease-in-out-quick);transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:var(--sapphire-semantic-transitions-fade)}.sapphire-tabs--no-border:after{display:none}.sapphire-tabs__tab{display:flex;align-items:center;position:relative;font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-control-md);text-decoration:none;color:var(--sapphire-semantic-color-foreground-primary);box-sizing:border-box;white-space:nowrap;border-width:0;padding:0 var(--sapphire-semantic-size-spacing-md);height:var(--sapphire-semantic-size-height-control-md);margin:var(--sapphire-semantic-size-focus-ring) 0 var(--sapphire-semantic-size-focus-ring) 0;cursor:pointer;outline:none;border-radius:var(--sapphire-semantic-size-height-control-md);z-index:1;transition:background var(--sapphire-semantic-time-motion-default) var(--sapphire-semantic-transitions-dynamic),color var(--sapphire-semantic-time-motion-default) var(--sapphire-semantic-transitions-dynamic),width var(--sapphire-semantic-time-motion-default) var(--sapphire-semantic-transitions-dynamic);transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:var(--sapphire-semantic-transitions-fade)}.sapphire-tabs__tab:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.sapphire-tabs__tab--active):not(.js-hover):hover,.sapphire-tabs__tab:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.sapphire-tabs__tab--active).is-hover{background:var(--sapphire-semantic-color-background-action-tertiary-hover)}.sapphire-tabs__tab--active:not(:disabled):not(.is-disabled):not(.js-hover):hover,.sapphire-tabs__tab--active:not(:disabled):not(.is-disabled).is-hover{background:var(--sapphire-semantic-color-state-accent-subtle-hover)}.sapphire-tabs__tab:not(:disabled):not(.is-disabled):active,.sapphire-tabs__tab:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-tertiary-active)}.sapphire-tabs__tab--active:active:not(:disabled):not(.is-disabled):not(.js-hover):hover,.sapphire-tabs__tab--active:active:not(:disabled):not(.is-disabled).is-hover{background:var(--sapphire-semantic-color-state-accent-subtle-active)}.sapphire-tabs__tab.js-focus.is-focus,.sapphire-tabs__tab:not(.js-focus):focus-visible{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring)}.sapphire-tabs__tab:disabled,.sapphire-tabs__tab.is-disabled{cursor:not-allowed}.sapphire-tabs__tab:disabled .sapphire-tabs__label,.sapphire-tabs__tab.is-disabled .sapphire-tabs__label{opacity:var(--sapphire-semantic-opacity-disabled)}.sapphire-tabs__label{padding:0 1px}.sapphire-tabs__tab--active,.sapphire-tabs__tab--active:hover,.sapphire-tabs__tab--active.is-hover{color:var(--sapphire-semantic-color-foreground-action-select-default)}.sapphire-tabs__tab--active.js-focus:not(.is-focus):after,.sapphire-tabs__tab--active:not(.js-focus):not(:focus-visible):after{content:\"\";display:block;position:absolute;bottom:calc(-1 * var(--sapphire-semantic-size-focus-ring));width:100%;height:var(--sapphire-semantic-size-border-md);background:var(--sapphire-semantic-color-background-action-select-secondary-hover)}.sapphire-tabs .sapphire-tabs__tab--active.js-focus:not(.is-focus):after,.sapphire-tabs .sapphire-tabs__tab--active:not(.js-focus):not(:focus-visible):after{display:none}.sapphire-tabs--sm{height:var(--sapphire-semantic-size-height-control-lg)}.sapphire-tabs--sm .sapphire-tabs__tab{font-size:var(--sapphire-semantic-size-font-control-sm);padding:0 var(--sapphire-semantic-size-spacing-sm);height:var(--sapphire-semantic-size-height-control-sm)}.sapphire-tabs--lg{height:var(--sapphire-semantic-size-height-control-2xl)}.sapphire-tabs--lg .sapphire-tabs__tab{font-size:var(--sapphire-semantic-size-font-control-lg);padding:0 var(--sapphire-semantic-size-spacing-lg)}.sapphire-tab-panel{min-height:0;flex-grow:1}.sapphire-tab-panel.js-focus.is-focus,.sapphire-tab-panel:not(.js-focus):focus-visible{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);outline-offset:var(--sapphire-semantic-size-focus-ring)}\n"] }]
|
|
6348
|
+
}, standalone: false, template: "<button\n #button\n class=\"sapphire-segmented-control__button\"\n _spUseComponentStyles\n [class.sapphire-segmented-control__button--disabled]=\"disabled\"\n [class.sapphire-segmented-control__button--active]=\"isSelected()\"\n role=\"tab\"\n (click)=\"select()\"\n [id]=\"id\"\n [tabIndex]=\"getTabIndex()\"\n [attr.aria-disabled]=\"disabled\"\n>\n {{ label }}\n <ng-content select=\"sp-segmented-tab-label\"></ng-content>\n</button>\n<ng-template>\n <div\n class=\"sapphire-tab-panel\"\n role=\"tabpanel\"\n tabindex=\"0\"\n [id]=\"id + '-panel'\"\n [attr.aria-labelledby]=\"id\"\n >\n <ng-content select=\"sp-segmented-tab-content\"></ng-content>\n </div>\n</ng-template>\n", styles: [".sapphire-tabs-scroll-container{-ms-overflow-style:none;scrollbar-width:none;overflow-x:scroll;overflow-y:hidden;white-space:nowrap;position:relative;scroll-padding:0 calc(2 * var(--sapphire-semantic-size-spacing-3xl) + 1px);min-width:0;flex:1;overscroll-behavior-x:contain}.sapphire-tabs-scroll-container::-webkit-scrollbar{display:none}.sapphire-tabs-overflow-arrows{display:flex;align-items:center;min-width:0;flex:1;position:relative}.sapphire-tabs-overflow-arrows--inline{display:inline-flex}.sapphire-tabs-overflow-arrows__arrow{position:absolute;z-index:10;pointer-events:none}.sapphire-tabs-overflow-arrows__arrow--left{left:0;padding-right:var(--sapphire-semantic-size-spacing-3xl);background:linear-gradient(90deg,var(--sapphire-semantic-color-background-surface) 0%,var(--sapphire-semantic-color-background-surface) 40%,var(--sapphire-global-color-transparent) 100%)}.sapphire-tabs-overflow-arrows__arrow--right{right:0;padding-left:var(--sapphire-semantic-size-spacing-3xl);background:linear-gradient(90deg,var(--sapphire-global-color-transparent) 0%,var(--sapphire-semantic-color-background-surface) 60%,var(--sapphire-semantic-color-background-surface) 100%)}.sapphire-tabs{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--sapphire-semantic-size-height-control-xl);position:relative;overflow:hidden;min-width:100%;flex:1;padding:0 var(--sapphire-semantic-size-focus-ring)}.sapphire-tabs--align-left{justify-content:start}.sapphire-tabs--align-center{justify-content:center}.sapphire-tabs--align-right{justify-content:end}.sapphire-tabs:after{content:\"\";display:block;position:absolute;bottom:0;width:100%;height:var(--sapphire-global-size-static-2);background:var(--sapphire-semantic-color-border-secondary);border-radius:var(--sapphire-semantic-size-border-md)}.sapphire-tabs__underline{position:absolute;bottom:0;height:var(--sapphire-semantic-size-border-md);background:var(--sapphire-semantic-color-foreground-action-select-default);z-index:2;transform-origin:left}.sapphire-tabs__underline--with-transition{transition:transform var(--sapphire-semantic-time-motion-default) var(--sapphire-semantic-transitions-dynamic),width var(--sapphire-semantic-time-motion-default) var(--sapphire-global-transitions-ease-in-out-quick);transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:var(--sapphire-semantic-transitions-fade)}.sapphire-tabs--no-border:after{display:none}.sapphire-tabs__tab{display:flex;align-items:center;position:relative;font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-regular);font-size:var(--sapphire-semantic-size-font-control-md);text-decoration:none;color:var(--sapphire-semantic-color-foreground-primary);box-sizing:border-box;white-space:nowrap;border-width:0;padding:0 var(--sapphire-semantic-size-spacing-md);height:var(--sapphire-semantic-size-height-control-md);margin:var(--sapphire-semantic-size-focus-ring) 0 var(--sapphire-semantic-size-focus-ring) 0;cursor:pointer;outline:none;border-radius:var(--sapphire-semantic-size-height-control-md);z-index:1;transition:background var(--sapphire-semantic-time-motion-default) var(--sapphire-semantic-transitions-dynamic),color var(--sapphire-semantic-time-motion-default) var(--sapphire-semantic-transitions-dynamic),width var(--sapphire-semantic-time-motion-default) var(--sapphire-semantic-transitions-dynamic);transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:var(--sapphire-semantic-transitions-fade)}.sapphire-tabs__tab:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.sapphire-tabs__tab--active):not(.js-hover):hover,.sapphire-tabs__tab:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.sapphire-tabs__tab--active).is-hover{background:var(--sapphire-semantic-color-background-action-tertiary-hover);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.sapphire-tabs__tab--active:not(:disabled):not(.is-disabled):not(.js-hover):hover,.sapphire-tabs__tab--active:not(:disabled):not(.is-disabled).is-hover{background:var(--sapphire-semantic-color-state-accent-subtle-hover);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.sapphire-tabs__tab:not(:disabled):not(.is-disabled):active,.sapphire-tabs__tab:not(:disabled):not(.is-disabled):focus-visible:active{background:var(--sapphire-semantic-color-background-action-tertiary-active);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.sapphire-tabs__tab--active:active:not(:disabled):not(.is-disabled):not(.js-hover):hover,.sapphire-tabs__tab--active:active:not(:disabled):not(.is-disabled).is-hover{background:var(--sapphire-semantic-color-state-accent-subtle-active);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.sapphire-tabs__tab.js-focus.is-focus,.sapphire-tabs__tab:not(.js-focus):focus-visible{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring)}.sapphire-tabs__tab:disabled,.sapphire-tabs__tab.is-disabled{cursor:not-allowed}.sapphire-tabs__tab:disabled .sapphire-tabs__label,.sapphire-tabs__tab.is-disabled .sapphire-tabs__label{opacity:var(--sapphire-semantic-opacity-disabled)}.sapphire-tabs__label{padding:0 1px}.sapphire-tabs__tab--active,.sapphire-tabs__tab--active:hover,.sapphire-tabs__tab--active.is-hover{color:var(--sapphire-semantic-color-foreground-action-select-default)}.sapphire-tabs__tab--active.js-focus:not(.is-focus):after,.sapphire-tabs__tab--active:not(.js-focus):not(:focus-visible):after{content:\"\";display:block;position:absolute;bottom:calc(-1 * var(--sapphire-semantic-size-focus-ring));width:100%;height:var(--sapphire-semantic-size-border-md);background:var(--sapphire-semantic-color-background-action-select-secondary-hover)}.sapphire-tabs .sapphire-tabs__tab--active.js-focus:not(.is-focus):after,.sapphire-tabs .sapphire-tabs__tab--active:not(.js-focus):not(:focus-visible):after{display:none}.sapphire-tabs--sm{height:var(--sapphire-semantic-size-height-control-lg)}.sapphire-tabs--sm .sapphire-tabs__tab{font-size:var(--sapphire-semantic-size-font-control-sm);padding:0 var(--sapphire-semantic-size-spacing-sm);height:var(--sapphire-semantic-size-height-control-sm)}.sapphire-tabs--lg{height:var(--sapphire-semantic-size-height-control-2xl)}.sapphire-tabs--lg .sapphire-tabs__tab{font-size:var(--sapphire-semantic-size-font-control-lg);padding:0 var(--sapphire-semantic-size-spacing-lg)}.sapphire-tab-panel{min-height:0;flex-grow:1}.sapphire-tab-panel.js-focus.is-focus,.sapphire-tab-panel:not(.js-focus):focus-visible{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);outline-offset:var(--sapphire-semantic-size-focus-ring)}\n"] }]
|
|
6267
6349
|
}], ctorParameters: function () { return [{ type: SegmentedTabsComponent, decorators: [{
|
|
6268
6350
|
type: Inject,
|
|
6269
6351
|
args: [forwardRef(() => SegmentedTabsComponent)]
|
|
@@ -6476,7 +6558,7 @@ class SegmentedTabsComponent {
|
|
|
6476
6558
|
}
|
|
6477
6559
|
}
|
|
6478
6560
|
SegmentedTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SegmentedTabsComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
6479
|
-
SegmentedTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: SegmentedTabsComponent, selector: "sp-segmented-tabs", inputs: { size: "size", align: "align", keyboardActivation: "keyboardActivation", disabled: "disabled", selectedIndex: "selectedIndex" }, outputs: { selectedIndexChange: "selectedIndexChange" }, host: { properties: { "attr.align": "null" } }, providers: [ViewEncapsulationProvider], queries: [{ propertyName: "tabs", predicate: i0.forwardRef(function () { return SegmentedTabComponent; }) }], viewQueries: [{ propertyName: "segmentedControl", first: true, predicate: ["segmentedControl"], descendants: true }], exportAs: ["spSegmentedTabs"], ngImport: i0, template: "<div\n #segmentedControl\n class=\"sapphire-segmented-control\"\n [class.sapphire-segmented-control--lg]=\"size === 'lg'\"\n [class.sapphire-segmented-control--sm]=\"size === 'sm'\"\n [class.focus-visible]=\"_focusVisible\"\n [class.sapphire-segmented-control--manual-keyboard-activation]=\"\n keyboardActivation === 'manual'\n \"\n [ngClass]=\"\n align === 'stretch'\n ? 'sapphire-segmented-control--stretch'\n : 'sapphire-segmented-control--align-' + align\n \"\n>\n <div\n class=\"sapphire-segmented-control__button-container\"\n role=\"tablist\"\n aria-orientation=\"horizontal\"\n cdkMonitorSubtreeFocus\n (cdkFocusChange)=\"_onFocusChange($event)\"\n (keydown)=\"_onKeyDown($event)\"\n >\n <ng-content select=\"sp-segmented-tab\"></ng-content>\n <span\n [style.left]=\"_gliderStyles.left\"\n [style.width]=\"_gliderStyles.width\"\n [class.sapphire-segmented-control__glider--with-transition]=\"\n _animationEnabled\n \"\n class=\"sapphire-segmented-control__glider\"\n role=\"none\"\n ></span>\n </div>\n</div>\n<ng-container *ngTemplateOutlet=\"_getTabContentTemplate()\"></ng-container>\n", styles: [".sapphire-segmented-control{display:flex;height:var(--sapphire-semantic-size-height-control-md)}.sapphire-segmented-control--align-center{justify-content:center}.sapphire-segmented-control--align-right{justify-content:flex-end}.sapphire-segmented-control--align-left{justify-content:flex-start}.sapphire-segmented-control__button-container{display:inline-flex;position:relative;height:100%;background:var(--sapphire-semantic-color-background-segmented-control-track);border-radius:var(--sapphire-semantic-size-height-control-lg);padding:var(--sapphire-global-size-static-5);box-sizing:border-box}.sapphire-segmented-control__glider{position:absolute;top:var(--sapphire-global-size-static-5);left:var(--sapphire-global-size-static-5);height:calc(100% - var(--sapphire-global-size-static-5) * 2);display:block;background:var(--sapphire-semantic-color-background-segmented-control-knob);box-sizing:border-box;z-index:1;border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control__glider--with-transition{transition:width var(--sapphire-semantic-time-motion-quick) var(--sapphire-semantic-transitions-dynamic),left var(--sapphire-semantic-time-motion-quick) var(--sapphire-semantic-transitions-dynamic)}.sapphire-segmented-control__button{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);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:content-box;margin:0;border:0;height:100%;min-width:var(--sapphire-global-size-generic-120);padding:0 var(--sapphire-semantic-size-spacing-lg);background:transparent;color:var(--sapphire-semantic-color-foreground-primary);cursor:pointer;outline:none;z-index:2;display:flex;align-items:center;justify-content:center;position:relative;transition:color var(--sapphire-semantic-time-motion-quick) var(--sapphire-semantic-transitions-dynamic);white-space:nowrap}.sapphire-segmented-control__button--active{color:var(--sapphire-semantic-color-foreground-primary)}.sapphire-segmented-control__button--disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-segmented-control--stretch .sapphire-segmented-control__button-container,.sapphire-segmented-control--stretch .sapphire-segmented-control__button{width:100%}.sapphire-segmented-control.focus-visible:focus-within .sapphire-segmented-control__glider{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring)}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__glider{transition:none}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__button:focus{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control.focus-visible:focus-within.sapphire-segmented-control--manual-keyboard-activation .sapphire-segmented-control__glider{outline:none}.sapphire-segmented-control--lg{height:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control--lg .sapphire-segmented-control__button{font-size:var(--sapphire-semantic-size-font-control-lg)}.sapphire-segmented-control--sm{height:var(--sapphire-semantic-size-height-control-sm)}.sapphire-segmented-control--sm .sapphire-segmented-control__button{font-size:var(--sapphire-semantic-size-font-control-sm)}.sapphire-segmented-control__radio-input{margin:0;overflow:visible;position:absolute;top:0;left:0;height:100%;width:100%;opacity:.0001;z-index:1;cursor:pointer}.sapphire-segmented-control__button--disabled .sapphire-segmented-control__radio-input{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }] });
|
|
6561
|
+
SegmentedTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: SegmentedTabsComponent, selector: "sp-segmented-tabs", inputs: { size: "size", align: "align", keyboardActivation: "keyboardActivation", disabled: "disabled", selectedIndex: "selectedIndex" }, outputs: { selectedIndexChange: "selectedIndexChange" }, host: { properties: { "attr.align": "null" } }, providers: [ViewEncapsulationProvider], queries: [{ propertyName: "tabs", predicate: i0.forwardRef(function () { return SegmentedTabComponent; }) }], viewQueries: [{ propertyName: "segmentedControl", first: true, predicate: ["segmentedControl"], descendants: true }], exportAs: ["spSegmentedTabs"], ngImport: i0, template: "<div\n #segmentedControl\n class=\"sapphire-segmented-control\"\n [class.sapphire-segmented-control--lg]=\"size === 'lg'\"\n [class.sapphire-segmented-control--sm]=\"size === 'sm'\"\n [class.focus-visible]=\"_focusVisible\"\n [class.sapphire-segmented-control--manual-keyboard-activation]=\"\n keyboardActivation === 'manual'\n \"\n [ngClass]=\"\n align === 'stretch'\n ? 'sapphire-segmented-control--stretch'\n : 'sapphire-segmented-control--align-' + align\n \"\n>\n <div\n class=\"sapphire-segmented-control__button-container\"\n role=\"tablist\"\n aria-orientation=\"horizontal\"\n cdkMonitorSubtreeFocus\n (cdkFocusChange)=\"_onFocusChange($event)\"\n (keydown)=\"_onKeyDown($event)\"\n >\n <ng-content select=\"sp-segmented-tab\"></ng-content>\n <span\n [style.left]=\"_gliderStyles.left\"\n [style.width]=\"_gliderStyles.width\"\n [class.sapphire-segmented-control__glider--with-transition]=\"\n _animationEnabled\n \"\n class=\"sapphire-segmented-control__glider\"\n role=\"none\"\n ></span>\n </div>\n</div>\n<ng-container *ngTemplateOutlet=\"_getTabContentTemplate()\"></ng-container>\n", styles: [".sapphire-segmented-control{display:flex;height:var(--sapphire-semantic-size-height-control-md)}.sapphire-segmented-control--align-center{justify-content:center}.sapphire-segmented-control--align-right{justify-content:flex-end}.sapphire-segmented-control--align-left{justify-content:flex-start}.sapphire-segmented-control__button-container{display:inline-flex;position:relative;height:100%;background:var(--sapphire-semantic-color-background-segmented-control-track);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);border-radius:var(--sapphire-semantic-size-height-control-lg);padding:var(--sapphire-global-size-static-5);box-sizing:border-box}.sapphire-segmented-control__glider{position:absolute;top:var(--sapphire-global-size-static-5);left:var(--sapphire-global-size-static-5);height:calc(100% - var(--sapphire-global-size-static-5) * 2);display:block;background:var(--sapphire-semantic-color-background-segmented-control-knob);box-sizing:border-box;z-index:1;border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control__glider--with-transition{transition:width var(--sapphire-semantic-time-motion-quick) var(--sapphire-semantic-transitions-dynamic),left var(--sapphire-semantic-time-motion-quick) var(--sapphire-semantic-transitions-dynamic)}.sapphire-segmented-control__button{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);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:content-box;margin:0;border:0;height:100%;min-width:var(--sapphire-global-size-generic-120);padding:0 var(--sapphire-semantic-size-spacing-lg);background:transparent;color:var(--sapphire-semantic-color-foreground-primary);cursor:pointer;outline:none;z-index:2;display:flex;align-items:center;justify-content:center;position:relative;transition:color var(--sapphire-semantic-time-motion-quick) var(--sapphire-semantic-transitions-dynamic);white-space:nowrap}.sapphire-segmented-control__button--active{color:var(--sapphire-semantic-color-foreground-primary)}.sapphire-segmented-control__button--disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-segmented-control--stretch .sapphire-segmented-control__button-container,.sapphire-segmented-control--stretch .sapphire-segmented-control__button{width:100%}.sapphire-segmented-control.focus-visible:focus-within .sapphire-segmented-control__glider{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring)}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__glider{transition:none}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__button:focus{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control.focus-visible:focus-within.sapphire-segmented-control--manual-keyboard-activation .sapphire-segmented-control__glider{outline:none}.sapphire-segmented-control--lg{height:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control--lg .sapphire-segmented-control__button{font-size:var(--sapphire-semantic-size-font-control-lg)}.sapphire-segmented-control--sm{height:var(--sapphire-semantic-size-height-control-sm)}.sapphire-segmented-control--sm .sapphire-segmented-control__button{font-size:var(--sapphire-semantic-size-font-control-sm)}.sapphire-segmented-control__radio-input{margin:0;overflow:visible;position:absolute;top:0;left:0;height:100%;width:100%;opacity:.0001;z-index:1;cursor:pointer}.sapphire-segmented-control__button--disabled .sapphire-segmented-control__radio-input{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }] });
|
|
6480
6562
|
__decorate([
|
|
6481
6563
|
CoerceBoolean
|
|
6482
6564
|
], SegmentedTabsComponent.prototype, "disabled", void 0);
|
|
@@ -6484,7 +6566,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
6484
6566
|
type: Component,
|
|
6485
6567
|
args: [{ selector: 'sp-segmented-tabs', providers: [ViewEncapsulationProvider], exportAs: 'spSegmentedTabs', host: {
|
|
6486
6568
|
'[attr.align]': 'null',
|
|
6487
|
-
}, standalone: false, template: "<div\n #segmentedControl\n class=\"sapphire-segmented-control\"\n [class.sapphire-segmented-control--lg]=\"size === 'lg'\"\n [class.sapphire-segmented-control--sm]=\"size === 'sm'\"\n [class.focus-visible]=\"_focusVisible\"\n [class.sapphire-segmented-control--manual-keyboard-activation]=\"\n keyboardActivation === 'manual'\n \"\n [ngClass]=\"\n align === 'stretch'\n ? 'sapphire-segmented-control--stretch'\n : 'sapphire-segmented-control--align-' + align\n \"\n>\n <div\n class=\"sapphire-segmented-control__button-container\"\n role=\"tablist\"\n aria-orientation=\"horizontal\"\n cdkMonitorSubtreeFocus\n (cdkFocusChange)=\"_onFocusChange($event)\"\n (keydown)=\"_onKeyDown($event)\"\n >\n <ng-content select=\"sp-segmented-tab\"></ng-content>\n <span\n [style.left]=\"_gliderStyles.left\"\n [style.width]=\"_gliderStyles.width\"\n [class.sapphire-segmented-control__glider--with-transition]=\"\n _animationEnabled\n \"\n class=\"sapphire-segmented-control__glider\"\n role=\"none\"\n ></span>\n </div>\n</div>\n<ng-container *ngTemplateOutlet=\"_getTabContentTemplate()\"></ng-container>\n", styles: [".sapphire-segmented-control{display:flex;height:var(--sapphire-semantic-size-height-control-md)}.sapphire-segmented-control--align-center{justify-content:center}.sapphire-segmented-control--align-right{justify-content:flex-end}.sapphire-segmented-control--align-left{justify-content:flex-start}.sapphire-segmented-control__button-container{display:inline-flex;position:relative;height:100%;background:var(--sapphire-semantic-color-background-segmented-control-track);border-radius:var(--sapphire-semantic-size-height-control-lg);padding:var(--sapphire-global-size-static-5);box-sizing:border-box}.sapphire-segmented-control__glider{position:absolute;top:var(--sapphire-global-size-static-5);left:var(--sapphire-global-size-static-5);height:calc(100% - var(--sapphire-global-size-static-5) * 2);display:block;background:var(--sapphire-semantic-color-background-segmented-control-knob);box-sizing:border-box;z-index:1;border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control__glider--with-transition{transition:width var(--sapphire-semantic-time-motion-quick) var(--sapphire-semantic-transitions-dynamic),left var(--sapphire-semantic-time-motion-quick) var(--sapphire-semantic-transitions-dynamic)}.sapphire-segmented-control__button{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);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:content-box;margin:0;border:0;height:100%;min-width:var(--sapphire-global-size-generic-120);padding:0 var(--sapphire-semantic-size-spacing-lg);background:transparent;color:var(--sapphire-semantic-color-foreground-primary);cursor:pointer;outline:none;z-index:2;display:flex;align-items:center;justify-content:center;position:relative;transition:color var(--sapphire-semantic-time-motion-quick) var(--sapphire-semantic-transitions-dynamic);white-space:nowrap}.sapphire-segmented-control__button--active{color:var(--sapphire-semantic-color-foreground-primary)}.sapphire-segmented-control__button--disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-segmented-control--stretch .sapphire-segmented-control__button-container,.sapphire-segmented-control--stretch .sapphire-segmented-control__button{width:100%}.sapphire-segmented-control.focus-visible:focus-within .sapphire-segmented-control__glider{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring)}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__glider{transition:none}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__button:focus{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control.focus-visible:focus-within.sapphire-segmented-control--manual-keyboard-activation .sapphire-segmented-control__glider{outline:none}.sapphire-segmented-control--lg{height:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control--lg .sapphire-segmented-control__button{font-size:var(--sapphire-semantic-size-font-control-lg)}.sapphire-segmented-control--sm{height:var(--sapphire-semantic-size-height-control-sm)}.sapphire-segmented-control--sm .sapphire-segmented-control__button{font-size:var(--sapphire-semantic-size-font-control-sm)}.sapphire-segmented-control__radio-input{margin:0;overflow:visible;position:absolute;top:0;left:0;height:100%;width:100%;opacity:.0001;z-index:1;cursor:pointer}.sapphire-segmented-control__button--disabled .sapphire-segmented-control__radio-input{cursor:not-allowed}\n"] }]
|
|
6569
|
+
}, standalone: false, template: "<div\n #segmentedControl\n class=\"sapphire-segmented-control\"\n [class.sapphire-segmented-control--lg]=\"size === 'lg'\"\n [class.sapphire-segmented-control--sm]=\"size === 'sm'\"\n [class.focus-visible]=\"_focusVisible\"\n [class.sapphire-segmented-control--manual-keyboard-activation]=\"\n keyboardActivation === 'manual'\n \"\n [ngClass]=\"\n align === 'stretch'\n ? 'sapphire-segmented-control--stretch'\n : 'sapphire-segmented-control--align-' + align\n \"\n>\n <div\n class=\"sapphire-segmented-control__button-container\"\n role=\"tablist\"\n aria-orientation=\"horizontal\"\n cdkMonitorSubtreeFocus\n (cdkFocusChange)=\"_onFocusChange($event)\"\n (keydown)=\"_onKeyDown($event)\"\n >\n <ng-content select=\"sp-segmented-tab\"></ng-content>\n <span\n [style.left]=\"_gliderStyles.left\"\n [style.width]=\"_gliderStyles.width\"\n [class.sapphire-segmented-control__glider--with-transition]=\"\n _animationEnabled\n \"\n class=\"sapphire-segmented-control__glider\"\n role=\"none\"\n ></span>\n </div>\n</div>\n<ng-container *ngTemplateOutlet=\"_getTabContentTemplate()\"></ng-container>\n", styles: [".sapphire-segmented-control{display:flex;height:var(--sapphire-semantic-size-height-control-md)}.sapphire-segmented-control--align-center{justify-content:center}.sapphire-segmented-control--align-right{justify-content:flex-end}.sapphire-segmented-control--align-left{justify-content:flex-start}.sapphire-segmented-control__button-container{display:inline-flex;position:relative;height:100%;background:var(--sapphire-semantic-color-background-segmented-control-track);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);border-radius:var(--sapphire-semantic-size-height-control-lg);padding:var(--sapphire-global-size-static-5);box-sizing:border-box}.sapphire-segmented-control__glider{position:absolute;top:var(--sapphire-global-size-static-5);left:var(--sapphire-global-size-static-5);height:calc(100% - var(--sapphire-global-size-static-5) * 2);display:block;background:var(--sapphire-semantic-color-background-segmented-control-knob);box-sizing:border-box;z-index:1;border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control__glider--with-transition{transition:width var(--sapphire-semantic-time-motion-quick) var(--sapphire-semantic-transitions-dynamic),left var(--sapphire-semantic-time-motion-quick) var(--sapphire-semantic-transitions-dynamic)}.sapphire-segmented-control__button{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);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:content-box;margin:0;border:0;height:100%;min-width:var(--sapphire-global-size-generic-120);padding:0 var(--sapphire-semantic-size-spacing-lg);background:transparent;color:var(--sapphire-semantic-color-foreground-primary);cursor:pointer;outline:none;z-index:2;display:flex;align-items:center;justify-content:center;position:relative;transition:color var(--sapphire-semantic-time-motion-quick) var(--sapphire-semantic-transitions-dynamic);white-space:nowrap}.sapphire-segmented-control__button--active{color:var(--sapphire-semantic-color-foreground-primary)}.sapphire-segmented-control__button--disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-segmented-control--stretch .sapphire-segmented-control__button-container,.sapphire-segmented-control--stretch .sapphire-segmented-control__button{width:100%}.sapphire-segmented-control.focus-visible:focus-within .sapphire-segmented-control__glider{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring)}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__glider{transition:none}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__button:focus{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control.focus-visible:focus-within.sapphire-segmented-control--manual-keyboard-activation .sapphire-segmented-control__glider{outline:none}.sapphire-segmented-control--lg{height:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control--lg .sapphire-segmented-control__button{font-size:var(--sapphire-semantic-size-font-control-lg)}.sapphire-segmented-control--sm{height:var(--sapphire-semantic-size-height-control-sm)}.sapphire-segmented-control--sm .sapphire-segmented-control__button{font-size:var(--sapphire-semantic-size-font-control-sm)}.sapphire-segmented-control__radio-input{margin:0;overflow:visible;position:absolute;top:0;left:0;height:100%;width:100%;opacity:.0001;z-index:1;cursor:pointer}.sapphire-segmented-control__button--disabled .sapphire-segmented-control__radio-input{cursor:not-allowed}\n"] }]
|
|
6488
6570
|
}], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { segmentedControl: [{
|
|
6489
6571
|
type: ViewChild,
|
|
6490
6572
|
args: ['segmentedControl']
|
|
@@ -6633,7 +6715,7 @@ AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
|
|
|
6633
6715
|
provide: ICON_SIZE_PROVIDER,
|
|
6634
6716
|
useExisting: forwardRef(() => AvatarComponent),
|
|
6635
6717
|
},
|
|
6636
|
-
], hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".sapphire-avatar{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;height:var(--sapphire-semantic-size-height-control-md);width:var(--sapphire-semantic-size-height-control-md);border-radius:var(--sapphire-semantic-size-height-control-md);white-space:nowrap;font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-body-
|
|
6718
|
+
], hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".sapphire-avatar{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;height:var(--sapphire-semantic-size-height-control-md);width:var(--sapphire-semantic-size-height-control-md);border-radius:var(--sapphire-semantic-size-height-control-md);white-space:nowrap;font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-body-sm);font-style:normal;text-transform:capitalize;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--sapphire-semantic-color-foreground-on-decorative-neutral);background:var(--sapphire-semantic-color-background-decorative-neutral);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.sapphire-avatar--sm{height:var(--sapphire-semantic-size-height-control-sm);width:var(--sapphire-semantic-size-height-control-sm);border-radius:var(--sapphire-semantic-size-height-control-sm);font-size:var(--sapphire-semantic-size-font-body-xs)}.sapphire-avatar--lg{height:var(--sapphire-semantic-size-height-control-lg);width:var(--sapphire-semantic-size-height-control-lg);border-radius:var(--sapphire-semantic-size-height-control-lg);font-size:var(--sapphire-semantic-size-font-body-md)}.sapphire-avatar--decorative-1{color:var(--sapphire-semantic-color-foreground-on-decorative-1);background:var(--sapphire-semantic-color-background-decorative-1)}.sapphire-avatar--decorative-2{color:var(--sapphire-semantic-color-foreground-on-decorative-2);background:var(--sapphire-semantic-color-background-decorative-2)}.sapphire-avatar--decorative-3{color:var(--sapphire-semantic-color-foreground-on-decorative-3);background:var(--sapphire-semantic-color-background-decorative-3)}.sapphire-avatar--decorative-4{color:var(--sapphire-semantic-color-foreground-on-decorative-4);background:var(--sapphire-semantic-color-background-decorative-4)}.sapphire-avatar--decorative-5{color:var(--sapphire-semantic-color-foreground-on-decorative-5);background:var(--sapphire-semantic-color-background-decorative-5)}.sapphire-avatar--decorative-6{color:var(--sapphire-semantic-color-foreground-on-decorative-6);background:var(--sapphire-semantic-color-background-decorative-6)}.sapphire-avatar--decorative-7{color:var(--sapphire-semantic-color-foreground-on-decorative-7);background:var(--sapphire-semantic-color-background-decorative-7)}.sapphire-avatar--decorative-8{color:var(--sapphire-semantic-color-foreground-on-decorative-8);background:var(--sapphire-semantic-color-background-decorative-8)}.sapphire-avatar--decorative-9{color:var(--sapphire-semantic-color-foreground-on-decorative-9);background:var(--sapphire-semantic-color-background-decorative-9)}.sapphire-avatar--decorative-10{color:var(--sapphire-semantic-color-foreground-on-decorative-10);background:var(--sapphire-semantic-color-background-decorative-10)}.sapphire-avatar--decorative-11{color:var(--sapphire-semantic-color-foreground-on-decorative-11);background:var(--sapphire-semantic-color-background-decorative-11)}.sapphire-avatar--decorative-12{color:var(--sapphire-semantic-color-foreground-on-decorative-12);background:var(--sapphire-semantic-color-background-decorative-12)}.sapphire-avatar--decorative-13{color:var(--sapphire-semantic-color-foreground-on-decorative-13);background:var(--sapphire-semantic-color-background-decorative-13)}.sapphire-avatar--decorative-14{color:var(--sapphire-semantic-color-foreground-on-decorative-14);background:var(--sapphire-semantic-color-background-decorative-14)}.sapphire-avatar--decorative-15{color:var(--sapphire-semantic-color-foreground-on-decorative-15);background:var(--sapphire-semantic-color-background-decorative-15)}.sapphire-avatar--decorative-16{color:var(--sapphire-semantic-color-foreground-on-decorative-16);background:var(--sapphire-semantic-color-background-decorative-16)}\n"] });
|
|
6637
6719
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
6638
6720
|
type: Component,
|
|
6639
6721
|
args: [{ standalone: true, selector: 'sp-avatar', template: '<ng-content></ng-content>', hostDirectives: [UseComponentStylesOnHost], providers: [
|
|
@@ -6645,7 +6727,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
6645
6727
|
class: 'sapphire-avatar',
|
|
6646
6728
|
'[class.sapphire-avatar--lg]': 'size === "lg"',
|
|
6647
6729
|
'[class.sapphire-avatar--sm]': 'size === "sm"',
|
|
6648
|
-
}, styles: [".sapphire-avatar{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;height:var(--sapphire-semantic-size-height-control-md);width:var(--sapphire-semantic-size-height-control-md);border-radius:var(--sapphire-semantic-size-height-control-md);white-space:nowrap;font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-body-
|
|
6730
|
+
}, styles: [".sapphire-avatar{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;height:var(--sapphire-semantic-size-height-control-md);width:var(--sapphire-semantic-size-height-control-md);border-radius:var(--sapphire-semantic-size-height-control-md);white-space:nowrap;font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-medium);font-size:var(--sapphire-semantic-size-font-body-sm);font-style:normal;text-transform:capitalize;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--sapphire-semantic-color-foreground-on-decorative-neutral);background:var(--sapphire-semantic-color-background-decorative-neutral);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.sapphire-avatar--sm{height:var(--sapphire-semantic-size-height-control-sm);width:var(--sapphire-semantic-size-height-control-sm);border-radius:var(--sapphire-semantic-size-height-control-sm);font-size:var(--sapphire-semantic-size-font-body-xs)}.sapphire-avatar--lg{height:var(--sapphire-semantic-size-height-control-lg);width:var(--sapphire-semantic-size-height-control-lg);border-radius:var(--sapphire-semantic-size-height-control-lg);font-size:var(--sapphire-semantic-size-font-body-md)}.sapphire-avatar--decorative-1{color:var(--sapphire-semantic-color-foreground-on-decorative-1);background:var(--sapphire-semantic-color-background-decorative-1)}.sapphire-avatar--decorative-2{color:var(--sapphire-semantic-color-foreground-on-decorative-2);background:var(--sapphire-semantic-color-background-decorative-2)}.sapphire-avatar--decorative-3{color:var(--sapphire-semantic-color-foreground-on-decorative-3);background:var(--sapphire-semantic-color-background-decorative-3)}.sapphire-avatar--decorative-4{color:var(--sapphire-semantic-color-foreground-on-decorative-4);background:var(--sapphire-semantic-color-background-decorative-4)}.sapphire-avatar--decorative-5{color:var(--sapphire-semantic-color-foreground-on-decorative-5);background:var(--sapphire-semantic-color-background-decorative-5)}.sapphire-avatar--decorative-6{color:var(--sapphire-semantic-color-foreground-on-decorative-6);background:var(--sapphire-semantic-color-background-decorative-6)}.sapphire-avatar--decorative-7{color:var(--sapphire-semantic-color-foreground-on-decorative-7);background:var(--sapphire-semantic-color-background-decorative-7)}.sapphire-avatar--decorative-8{color:var(--sapphire-semantic-color-foreground-on-decorative-8);background:var(--sapphire-semantic-color-background-decorative-8)}.sapphire-avatar--decorative-9{color:var(--sapphire-semantic-color-foreground-on-decorative-9);background:var(--sapphire-semantic-color-background-decorative-9)}.sapphire-avatar--decorative-10{color:var(--sapphire-semantic-color-foreground-on-decorative-10);background:var(--sapphire-semantic-color-background-decorative-10)}.sapphire-avatar--decorative-11{color:var(--sapphire-semantic-color-foreground-on-decorative-11);background:var(--sapphire-semantic-color-background-decorative-11)}.sapphire-avatar--decorative-12{color:var(--sapphire-semantic-color-foreground-on-decorative-12);background:var(--sapphire-semantic-color-background-decorative-12)}.sapphire-avatar--decorative-13{color:var(--sapphire-semantic-color-foreground-on-decorative-13);background:var(--sapphire-semantic-color-background-decorative-13)}.sapphire-avatar--decorative-14{color:var(--sapphire-semantic-color-foreground-on-decorative-14);background:var(--sapphire-semantic-color-background-decorative-14)}.sapphire-avatar--decorative-15{color:var(--sapphire-semantic-color-foreground-on-decorative-15);background:var(--sapphire-semantic-color-background-decorative-15)}.sapphire-avatar--decorative-16{color:var(--sapphire-semantic-color-foreground-on-decorative-16);background:var(--sapphire-semantic-color-background-decorative-16)}\n"] }]
|
|
6649
6731
|
}], ctorParameters: function () { return []; }, propDecorators: { size: [{
|
|
6650
6732
|
type: Input
|
|
6651
6733
|
}], color: [{
|
|
@@ -7177,7 +7259,7 @@ TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version
|
|
|
7177
7259
|
<ng-container>
|
|
7178
7260
|
<ng-content select="table"></ng-content>
|
|
7179
7261
|
</ng-container>
|
|
7180
|
-
`, 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 :has(> .sapphire-table__row--highlighted):not(tbody):before{content:\"\";position:sticky;float:inline-start;height:100%;width:var(--sapphire-semantic-size-border-md);margin-left:calc(-1 * var(--sapphire-semantic-size-border-md));inset-inline-start:0;background:var(--sapphire-semantic-color-border-accent);pointer-events:none;z-index:2}tbody .sapphire-table__row--highlighted .sapphire-table__selectionCell,tbody .sapphire-table__row--highlighted>.sapphire-table__cell:first-child{box-shadow:inset var(--sapphire-semantic-size-border-md) 0 0 0 var(--sapphire-semantic-color-border-accent)}.sapphire-table__tfoot{position:relative;z-index:2;--sapphire-table-rowgroup-bg: var( --sapphire-semantic-color-background-neutral-subtle )}.sapphire-table__footer{position:relative;z-index:2;margin:var(--sapphire-semantic-size-spacing-sm) 0}.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}.sapphire-table__cell-container--editable{display:flex;align-items:center;justify-content:space-between;gap:var(--sapphire-semantic-size-spacing-md)}.sapphire-table__edit-cell-popover{display:flex;align-items:start;justify-content:space-between;gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-table__edit-button{margin-top:calc(-1 * var(--sapphire-semantic-size-spacing-2xs));margin-bottom:calc(-1 * var(--sapphire-semantic-size-spacing-2xs));visibility:hidden;flex-shrink:0}.sapphire-table__row.is-hover .sapphire-table__edit-button,.sapphire-table__row:hover .sapphire-table__edit-button,.sapphire-table__row:focus-within .sapphire-table__edit-button{visibility:visible}sp-table{display:block}\n"] });
|
|
7262
|
+
`, 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 );-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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 );-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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;-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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 );-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.sapphire-table :has(> .sapphire-table__row--highlighted):not(tbody):before{content:\"\";position:sticky;float:inline-start;height:100%;width:var(--sapphire-semantic-size-border-md);margin-left:calc(-1 * var(--sapphire-semantic-size-border-md));inset-inline-start:0;background:var(--sapphire-semantic-color-border-accent);pointer-events:none;z-index:2}tbody .sapphire-table__row--highlighted .sapphire-table__selectionCell,tbody .sapphire-table__row--highlighted>.sapphire-table__cell:first-child{box-shadow:inset var(--sapphire-semantic-size-border-md) 0 0 0 var(--sapphire-semantic-color-border-accent)}.sapphire-table__tfoot{position:relative;z-index:2;--sapphire-table-rowgroup-bg: var( --sapphire-semantic-color-background-neutral-subtle )}.sapphire-table__footer{position:relative;z-index:2;margin:var(--sapphire-semantic-size-spacing-sm) 0}.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}.sapphire-table__cell-container--editable{display:flex;align-items:center;justify-content:space-between;gap:var(--sapphire-semantic-size-spacing-md)}.sapphire-table__edit-cell-popover{display:flex;align-items:start;justify-content:space-between;gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-table__edit-button{margin-top:calc(-1 * var(--sapphire-semantic-size-spacing-2xs));margin-bottom:calc(-1 * var(--sapphire-semantic-size-spacing-2xs));visibility:hidden;flex-shrink:0}.sapphire-table__row.is-hover .sapphire-table__edit-button,.sapphire-table__row:hover .sapphire-table__edit-button,.sapphire-table__row:focus-within .sapphire-table__edit-button{visibility:visible}sp-table{display:block}\n"] });
|
|
7181
7263
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TableComponent, decorators: [{
|
|
7182
7264
|
type: Component,
|
|
7183
7265
|
args: [{ selector: 'sp-table', template: `
|
|
@@ -7190,7 +7272,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
7190
7272
|
'[style.max-height]': 'maxHeight',
|
|
7191
7273
|
'[class.sapphire-table--overflow]': 'height || maxHeight',
|
|
7192
7274
|
'[class.sapphire-table--interactive]': 'isInteractive',
|
|
7193
|
-
}, 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 :has(> .sapphire-table__row--highlighted):not(tbody):before{content:\"\";position:sticky;float:inline-start;height:100%;width:var(--sapphire-semantic-size-border-md);margin-left:calc(-1 * var(--sapphire-semantic-size-border-md));inset-inline-start:0;background:var(--sapphire-semantic-color-border-accent);pointer-events:none;z-index:2}tbody .sapphire-table__row--highlighted .sapphire-table__selectionCell,tbody .sapphire-table__row--highlighted>.sapphire-table__cell:first-child{box-shadow:inset var(--sapphire-semantic-size-border-md) 0 0 0 var(--sapphire-semantic-color-border-accent)}.sapphire-table__tfoot{position:relative;z-index:2;--sapphire-table-rowgroup-bg: var( --sapphire-semantic-color-background-neutral-subtle )}.sapphire-table__footer{position:relative;z-index:2;margin:var(--sapphire-semantic-size-spacing-sm) 0}.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}.sapphire-table__cell-container--editable{display:flex;align-items:center;justify-content:space-between;gap:var(--sapphire-semantic-size-spacing-md)}.sapphire-table__edit-cell-popover{display:flex;align-items:start;justify-content:space-between;gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-table__edit-button{margin-top:calc(-1 * var(--sapphire-semantic-size-spacing-2xs));margin-bottom:calc(-1 * var(--sapphire-semantic-size-spacing-2xs));visibility:hidden;flex-shrink:0}.sapphire-table__row.is-hover .sapphire-table__edit-button,.sapphire-table__row:hover .sapphire-table__edit-button,.sapphire-table__row:focus-within .sapphire-table__edit-button{visibility:visible}sp-table{display:block}\n"] }]
|
|
7275
|
+
}, 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 );-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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 );-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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;-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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 );-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.sapphire-table :has(> .sapphire-table__row--highlighted):not(tbody):before{content:\"\";position:sticky;float:inline-start;height:100%;width:var(--sapphire-semantic-size-border-md);margin-left:calc(-1 * var(--sapphire-semantic-size-border-md));inset-inline-start:0;background:var(--sapphire-semantic-color-border-accent);pointer-events:none;z-index:2}tbody .sapphire-table__row--highlighted .sapphire-table__selectionCell,tbody .sapphire-table__row--highlighted>.sapphire-table__cell:first-child{box-shadow:inset var(--sapphire-semantic-size-border-md) 0 0 0 var(--sapphire-semantic-color-border-accent)}.sapphire-table__tfoot{position:relative;z-index:2;--sapphire-table-rowgroup-bg: var( --sapphire-semantic-color-background-neutral-subtle )}.sapphire-table__footer{position:relative;z-index:2;margin:var(--sapphire-semantic-size-spacing-sm) 0}.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}.sapphire-table__cell-container--editable{display:flex;align-items:center;justify-content:space-between;gap:var(--sapphire-semantic-size-spacing-md)}.sapphire-table__edit-cell-popover{display:flex;align-items:start;justify-content:space-between;gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-table__edit-button{margin-top:calc(-1 * var(--sapphire-semantic-size-spacing-2xs));margin-bottom:calc(-1 * var(--sapphire-semantic-size-spacing-2xs));visibility:hidden;flex-shrink:0}.sapphire-table__row.is-hover .sapphire-table__edit-button,.sapphire-table__row:hover .sapphire-table__edit-button,.sapphire-table__row:focus-within .sapphire-table__edit-button{visibility:visible}sp-table{display:block}\n"] }]
|
|
7194
7276
|
}], ctorParameters: function () { return []; }, propDecorators: { rowAction: [{
|
|
7195
7277
|
type: Output
|
|
7196
7278
|
}], stickyHeader: [{
|
|
@@ -7309,7 +7391,7 @@ class CdkVirtualScrollViewportFixDirective {
|
|
|
7309
7391
|
});
|
|
7310
7392
|
}
|
|
7311
7393
|
}
|
|
7312
|
-
CdkVirtualScrollViewportFixDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: CdkVirtualScrollViewportFixDirective, deps: [{ token: i1$
|
|
7394
|
+
CdkVirtualScrollViewportFixDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: CdkVirtualScrollViewportFixDirective, deps: [{ token: i1$3.CdkVirtualScrollViewport }], target: i0.ɵɵFactoryTarget.Directive });
|
|
7313
7395
|
CdkVirtualScrollViewportFixDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: CdkVirtualScrollViewportFixDirective, isStandalone: true, selector: "cdk-virtual-scroll-viewport", ngImport: i0 });
|
|
7314
7396
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: CdkVirtualScrollViewportFixDirective, decorators: [{
|
|
7315
7397
|
type: Directive,
|
|
@@ -7317,7 +7399,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
7317
7399
|
selector: 'cdk-virtual-scroll-viewport',
|
|
7318
7400
|
standalone: true,
|
|
7319
7401
|
}]
|
|
7320
|
-
}], ctorParameters: function () { return [{ type: i1$
|
|
7402
|
+
}], ctorParameters: function () { return [{ type: i1$3.CdkVirtualScrollViewport }]; } });
|
|
7321
7403
|
|
|
7322
7404
|
class SapphireTableModule {
|
|
7323
7405
|
}
|
|
@@ -7582,7 +7664,7 @@ SwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
|
|
|
7582
7664
|
useExisting: forwardRef(() => SwitchComponent),
|
|
7583
7665
|
multi: true,
|
|
7584
7666
|
},
|
|
7585
|
-
], viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }], ngImport: i0, template: "<label\n class=\"sapphire-switch\"\n [class.sapphire-switch--md]=\"size === 'md'\"\n [attr.for]=\"inputId\"\n>\n <input\n #input\n class=\"sapphire-switch-input\"\n role=\"switch\"\n type=\"checkbox\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby || null\"\n [attr.aria-describedby]=\"ariaDescribedby || null\"\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-switch-track\"></span>\n <span span class=\"sapphire-switch-label\"><ng-content></ng-content></span>\n</label>\n<div\n *ngIf=\"note\"\n class=\"sapphire-switch__note\"\n [class.sapphire-switch__note--md]=\"size === 'md'\"\n>\n {{ note }}\n</div>\n", styles: [".sapphire-switch{display:inline-flex;align-items:center;position:relative;max-width:100%;gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-switch-container{display:inline-flex;flex-flow:column}.sapphire-switch-input{margin:0;box-sizing:border-box;padding:0;position:absolute;width:100%;height:100%;top:0;left:0;opacity:.0001;z-index:1;cursor:pointer}.sapphire-switch-label{display:flex;align-items:center;gap:var(--sapphire-semantic-size-spacing-sm);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-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-switch--md .sapphire-switch-label{gap:var(--sapphire-semantic-size-spacing-2xs);font-size:var(--sapphire-semantic-size-font-control-md);line-height:var(--sapphire-semantic-size-height-control-2xs)}.sapphire-switch:not(.js-focus) .sapphire-switch-input:focus-visible~.sapphire-switch-track,.sapphire-switch.is-focus .sapphire-switch-track{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);outline-offset:var(--sapphire-semantic-size-focus-ring)}.sapphire-switch-track{
|
|
7667
|
+
], viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: ThemeCheckDirective }, { directive: UseComponentStylesOnHost }], ngImport: i0, template: "<label\n class=\"sapphire-switch\"\n [class.sapphire-switch--md]=\"size === 'md'\"\n [attr.for]=\"inputId\"\n>\n <input\n #input\n class=\"sapphire-switch-input\"\n role=\"switch\"\n type=\"checkbox\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby || null\"\n [attr.aria-describedby]=\"ariaDescribedby || null\"\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-switch-track\"></span>\n <span span class=\"sapphire-switch-label\"><ng-content></ng-content></span>\n</label>\n<div\n *ngIf=\"note\"\n class=\"sapphire-switch__note\"\n [class.sapphire-switch__note--md]=\"size === 'md'\"\n>\n {{ note }}\n</div>\n", styles: [".sapphire-switch{display:inline-flex;align-items:center;position:relative;max-width:100%;gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-switch-container{display:inline-flex;flex-flow:column}.sapphire-switch-input{margin:0;box-sizing:border-box;padding:0;position:absolute;width:100%;height:100%;top:0;left:0;opacity:.0001;z-index:1;cursor:pointer}.sapphire-switch-label{display:flex;align-items:center;gap:var(--sapphire-semantic-size-spacing-sm);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-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-switch--md .sapphire-switch-label{gap:var(--sapphire-semantic-size-spacing-2xs);font-size:var(--sapphire-semantic-size-font-control-md);line-height:var(--sapphire-semantic-size-height-control-2xs)}.sapphire-switch:not(.js-focus) .sapphire-switch-input:focus-visible~.sapphire-switch-track,.sapphire-switch.is-focus .sapphire-switch-track{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);outline-offset:var(--sapphire-semantic-size-focus-ring)}.sapphire-switch-track{box-sizing:border-box;position:relative;width:var(--sapphire-global-size-generic-110);box-shadow:inset 0 0 0 var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-field-default);transition:box-shadow var(--sapphire-semantic-time-motion-quick) var(--sapphire-semantic-transitions-fade);height:var(--sapphire-semantic-size-height-control-xs);border-radius:calc(var(--sapphire-semantic-size-height-control-xs) / 2);flex-shrink:0}.sapphire-switch:not(:active):not(.is-active):not(.js-hover):hover .sapphire-switch-input:not(:disabled)~.sapphire-switch-track,.sapphire-switch:not(:active):not(.is-active).is-hover .sapphire-switch-track{box-shadow:inset 0 0 0 var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-field-hover)}.sapphire-switch:active .sapphire-switch-input:not(:disabled)~.sapphire-switch-track,.sapphire-switch.is-active .sapphire-switch-input:not(:disabled)~.sapphire-switch-track{box-shadow:inset 0 0 0 var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-field-active)}.sapphire-switch-input:checked~.sapphire-switch-track{background:var(--sapphire-semantic-color-background-action-select-default);box-shadow:none}.sapphire-switch:not(:active):not(.is-active):not(.js-hover):hover .sapphire-switch-input:not(:disabled):checked~.sapphire-switch-track,.sapphire-switch:not(:active):not(.is-active).is-hover .sapphire-switch-input:checked~.sapphire-switch-track{background:var(--sapphire-semantic-color-background-action-select-hover);box-shadow:none}.sapphire-switch:active .sapphire-switch-input:not(:disabled):checked~.sapphire-switch-track,.sapphire-switch.is-active .sapphire-switch-input:not(:disabled):checked~.sapphire-switch-track{background:var(--sapphire-semantic-color-background-action-select-active);box-shadow:none}.sapphire-switch-input:disabled{cursor:not-allowed}.sapphire-switch-input:disabled~.sapphire-switch-track,.sapphire-switch-input:disabled~.sapphire-switch-label{opacity:var(--sapphire-semantic-opacity-disabled)}.sapphire-switch-track:after{content:\"\";position:absolute;box-sizing:border-box;padding:var(--sapphire-global-size-static-5);height:100%;aspect-ratio:1/1;border-radius:50%;background-color:var(--sapphire-semantic-color-border-field-default);background-clip:content-box;left:0;transition:left var(--sapphire-semantic-time-motion-quick) var(--sapphire-semantic-transitions-dynamic),background-color var(--sapphire-semantic-time-motion-quick) var(--sapphire-semantic-transitions-fade)}.sapphire-switch:not(:active):not(.is-active):not(.js-hover):hover .sapphire-switch-input:not(:disabled)~.sapphire-switch-track:after,.sapphire-switch:not(:active):not(.is-active).is-hover .sapphire-switch-track:after{background-color:var(--sapphire-semantic-color-border-field-hover)}.sapphire-switch:active .sapphire-switch-input:not(:disabled)~.sapphire-switch-track:after,.sapphire-switch.is-active .sapphire-switch-input:not(:disabled)~.sapphire-switch-track:after{background-color:var(--sapphire-semantic-color-border-field-active)}.sapphire-switch-input:checked~.sapphire-switch-track:after{left:calc(100% - var(--sapphire-semantic-size-height-control-xs));background-color:var(--sapphire-semantic-color-foreground-action-on-select-default)!important}.sapphire-switch--md .sapphire-switch-track{width:var(--sapphire-global-size-generic-80);height:var(--sapphire-semantic-size-height-control-2xs);border-radius:calc(var(--sapphire-semantic-size-height-control-2xs) / 2)}.sapphire-switch--md .sapphire-switch-input:checked~.sapphire-switch-track:after{left:calc(100% - var(--sapphire-semantic-size-height-control-2xs))}.sapphire-switch__note{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);margin-top:var(--sapphire-semantic-size-spacing-3xs);margin-left:calc(var(--sapphire-semantic-size-spacing-sm) + var(--sapphire-global-size-generic-110));color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-switch__note--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-sm) + var(--sapphire-global-size-generic-80))}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7586
7668
|
__decorate([
|
|
7587
7669
|
AutoId()
|
|
7588
7670
|
], SwitchComponent.prototype, "id", void 0);
|
|
@@ -7604,7 +7686,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
7604
7686
|
useExisting: forwardRef(() => SwitchComponent),
|
|
7605
7687
|
multi: true,
|
|
7606
7688
|
},
|
|
7607
|
-
], hostDirectives: [ThemeCheckDirective, UseComponentStylesOnHost], standalone: false, template: "<label\n class=\"sapphire-switch\"\n [class.sapphire-switch--md]=\"size === 'md'\"\n [attr.for]=\"inputId\"\n>\n <input\n #input\n class=\"sapphire-switch-input\"\n role=\"switch\"\n type=\"checkbox\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby || null\"\n [attr.aria-describedby]=\"ariaDescribedby || null\"\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-switch-track\"></span>\n <span span class=\"sapphire-switch-label\"><ng-content></ng-content></span>\n</label>\n<div\n *ngIf=\"note\"\n class=\"sapphire-switch__note\"\n [class.sapphire-switch__note--md]=\"size === 'md'\"\n>\n {{ note }}\n</div>\n", styles: [".sapphire-switch{display:inline-flex;align-items:center;position:relative;max-width:100%;gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-switch-container{display:inline-flex;flex-flow:column}.sapphire-switch-input{margin:0;box-sizing:border-box;padding:0;position:absolute;width:100%;height:100%;top:0;left:0;opacity:.0001;z-index:1;cursor:pointer}.sapphire-switch-label{display:flex;align-items:center;gap:var(--sapphire-semantic-size-spacing-sm);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-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-switch--md .sapphire-switch-label{gap:var(--sapphire-semantic-size-spacing-2xs);font-size:var(--sapphire-semantic-size-font-control-md);line-height:var(--sapphire-semantic-size-height-control-2xs)}.sapphire-switch:not(.js-focus) .sapphire-switch-input:focus-visible~.sapphire-switch-track,.sapphire-switch.is-focus .sapphire-switch-track{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);outline-offset:var(--sapphire-semantic-size-focus-ring)}.sapphire-switch-track{
|
|
7689
|
+
], hostDirectives: [ThemeCheckDirective, UseComponentStylesOnHost], standalone: false, template: "<label\n class=\"sapphire-switch\"\n [class.sapphire-switch--md]=\"size === 'md'\"\n [attr.for]=\"inputId\"\n>\n <input\n #input\n class=\"sapphire-switch-input\"\n role=\"switch\"\n type=\"checkbox\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby || null\"\n [attr.aria-describedby]=\"ariaDescribedby || null\"\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-switch-track\"></span>\n <span span class=\"sapphire-switch-label\"><ng-content></ng-content></span>\n</label>\n<div\n *ngIf=\"note\"\n class=\"sapphire-switch__note\"\n [class.sapphire-switch__note--md]=\"size === 'md'\"\n>\n {{ note }}\n</div>\n", styles: [".sapphire-switch{display:inline-flex;align-items:center;position:relative;max-width:100%;gap:var(--sapphire-semantic-size-spacing-sm)}.sapphire-switch-container{display:inline-flex;flex-flow:column}.sapphire-switch-input{margin:0;box-sizing:border-box;padding:0;position:absolute;width:100%;height:100%;top:0;left:0;opacity:.0001;z-index:1;cursor:pointer}.sapphire-switch-label{display:flex;align-items:center;gap:var(--sapphire-semantic-size-spacing-sm);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-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-switch--md .sapphire-switch-label{gap:var(--sapphire-semantic-size-spacing-2xs);font-size:var(--sapphire-semantic-size-font-control-md);line-height:var(--sapphire-semantic-size-height-control-2xs)}.sapphire-switch:not(.js-focus) .sapphire-switch-input:focus-visible~.sapphire-switch-track,.sapphire-switch.is-focus .sapphire-switch-track{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);outline-offset:var(--sapphire-semantic-size-focus-ring)}.sapphire-switch-track{box-sizing:border-box;position:relative;width:var(--sapphire-global-size-generic-110);box-shadow:inset 0 0 0 var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-field-default);transition:box-shadow var(--sapphire-semantic-time-motion-quick) var(--sapphire-semantic-transitions-fade);height:var(--sapphire-semantic-size-height-control-xs);border-radius:calc(var(--sapphire-semantic-size-height-control-xs) / 2);flex-shrink:0}.sapphire-switch:not(:active):not(.is-active):not(.js-hover):hover .sapphire-switch-input:not(:disabled)~.sapphire-switch-track,.sapphire-switch:not(:active):not(.is-active).is-hover .sapphire-switch-track{box-shadow:inset 0 0 0 var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-field-hover)}.sapphire-switch:active .sapphire-switch-input:not(:disabled)~.sapphire-switch-track,.sapphire-switch.is-active .sapphire-switch-input:not(:disabled)~.sapphire-switch-track{box-shadow:inset 0 0 0 var(--sapphire-semantic-size-border-sm) var(--sapphire-semantic-color-border-field-active)}.sapphire-switch-input:checked~.sapphire-switch-track{background:var(--sapphire-semantic-color-background-action-select-default);box-shadow:none}.sapphire-switch:not(:active):not(.is-active):not(.js-hover):hover .sapphire-switch-input:not(:disabled):checked~.sapphire-switch-track,.sapphire-switch:not(:active):not(.is-active).is-hover .sapphire-switch-input:checked~.sapphire-switch-track{background:var(--sapphire-semantic-color-background-action-select-hover);box-shadow:none}.sapphire-switch:active .sapphire-switch-input:not(:disabled):checked~.sapphire-switch-track,.sapphire-switch.is-active .sapphire-switch-input:not(:disabled):checked~.sapphire-switch-track{background:var(--sapphire-semantic-color-background-action-select-active);box-shadow:none}.sapphire-switch-input:disabled{cursor:not-allowed}.sapphire-switch-input:disabled~.sapphire-switch-track,.sapphire-switch-input:disabled~.sapphire-switch-label{opacity:var(--sapphire-semantic-opacity-disabled)}.sapphire-switch-track:after{content:\"\";position:absolute;box-sizing:border-box;padding:var(--sapphire-global-size-static-5);height:100%;aspect-ratio:1/1;border-radius:50%;background-color:var(--sapphire-semantic-color-border-field-default);background-clip:content-box;left:0;transition:left var(--sapphire-semantic-time-motion-quick) var(--sapphire-semantic-transitions-dynamic),background-color var(--sapphire-semantic-time-motion-quick) var(--sapphire-semantic-transitions-fade)}.sapphire-switch:not(:active):not(.is-active):not(.js-hover):hover .sapphire-switch-input:not(:disabled)~.sapphire-switch-track:after,.sapphire-switch:not(:active):not(.is-active).is-hover .sapphire-switch-track:after{background-color:var(--sapphire-semantic-color-border-field-hover)}.sapphire-switch:active .sapphire-switch-input:not(:disabled)~.sapphire-switch-track:after,.sapphire-switch.is-active .sapphire-switch-input:not(:disabled)~.sapphire-switch-track:after{background-color:var(--sapphire-semantic-color-border-field-active)}.sapphire-switch-input:checked~.sapphire-switch-track:after{left:calc(100% - var(--sapphire-semantic-size-height-control-xs));background-color:var(--sapphire-semantic-color-foreground-action-on-select-default)!important}.sapphire-switch--md .sapphire-switch-track{width:var(--sapphire-global-size-generic-80);height:var(--sapphire-semantic-size-height-control-2xs);border-radius:calc(var(--sapphire-semantic-size-height-control-2xs) / 2)}.sapphire-switch--md .sapphire-switch-input:checked~.sapphire-switch-track:after{left:calc(100% - var(--sapphire-semantic-size-height-control-2xs))}.sapphire-switch__note{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);margin-top:var(--sapphire-semantic-size-spacing-3xs);margin-left:calc(var(--sapphire-semantic-size-spacing-sm) + var(--sapphire-global-size-generic-110));color:var(--sapphire-semantic-color-foreground-secondary)}.sapphire-switch__note--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-sm) + var(--sapphire-global-size-generic-80))}\n"] }]
|
|
7608
7690
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
7609
7691
|
type: Attribute,
|
|
7610
7692
|
args: ['tabindex']
|
|
@@ -7772,7 +7854,7 @@ SegmentedRadioGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
|
|
|
7772
7854
|
provide: RadioGroupBase,
|
|
7773
7855
|
useExisting: forwardRef(() => SegmentedRadioGroupComponent),
|
|
7774
7856
|
},
|
|
7775
|
-
], viewQueries: [{ propertyName: "segmentedControl", first: true, predicate: ["segmentedControl"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: ThemeCheckDirective }], ngImport: i0, template: "<div\n #segmentedControl\n class=\"sapphire-segmented-control\"\n [class.sapphire-segmented-control--lg]=\"size === 'lg'\"\n [class.sapphire-segmented-control--sm]=\"size === 'sm'\"\n [class.focus-visible]=\"_focusVisible\"\n [ngClass]=\"\n align === 'stretch'\n ? 'sapphire-segmented-control--stretch'\n : 'sapphire-segmented-control--align-' + align\n \"\n>\n <div\n class=\"sapphire-segmented-control__button-container\"\n role=\"radiogroup\"\n [attr.aria-label]=\"ariaLabel\"\n aria-orientation=\"horizontal\"\n cdkMonitorSubtreeFocus\n (cdkFocusChange)=\"_onFocusChange($event)\"\n >\n <ng-content></ng-content>\n <span\n [style.left]=\"_gliderStyles.left\"\n [style.width]=\"_gliderStyles.width\"\n [class.sapphire-segmented-control__glider--with-transition]=\"\n _animationEnabled\n \"\n class=\"sapphire-segmented-control__glider\"\n role=\"none\"\n ></span>\n </div>\n</div>\n", styles: [".sapphire-segmented-control{display:flex;height:var(--sapphire-semantic-size-height-control-md)}.sapphire-segmented-control--align-center{justify-content:center}.sapphire-segmented-control--align-right{justify-content:flex-end}.sapphire-segmented-control--align-left{justify-content:flex-start}.sapphire-segmented-control__button-container{display:inline-flex;position:relative;height:100%;background:var(--sapphire-semantic-color-background-segmented-control-track);border-radius:var(--sapphire-semantic-size-height-control-lg);padding:var(--sapphire-global-size-static-5);box-sizing:border-box}.sapphire-segmented-control__glider{position:absolute;top:var(--sapphire-global-size-static-5);left:var(--sapphire-global-size-static-5);height:calc(100% - var(--sapphire-global-size-static-5) * 2);display:block;background:var(--sapphire-semantic-color-background-segmented-control-knob);box-sizing:border-box;z-index:1;border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control__glider--with-transition{transition:width var(--sapphire-semantic-time-motion-quick) var(--sapphire-semantic-transitions-dynamic),left var(--sapphire-semantic-time-motion-quick) var(--sapphire-semantic-transitions-dynamic)}.sapphire-segmented-control__button{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);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:content-box;margin:0;border:0;height:100%;min-width:var(--sapphire-global-size-generic-120);padding:0 var(--sapphire-semantic-size-spacing-lg);background:transparent;color:var(--sapphire-semantic-color-foreground-primary);cursor:pointer;outline:none;z-index:2;display:flex;align-items:center;justify-content:center;position:relative;transition:color var(--sapphire-semantic-time-motion-quick) var(--sapphire-semantic-transitions-dynamic);white-space:nowrap}.sapphire-segmented-control__button--active{color:var(--sapphire-semantic-color-foreground-primary)}.sapphire-segmented-control__button--disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-segmented-control--stretch .sapphire-segmented-control__button-container,.sapphire-segmented-control--stretch .sapphire-segmented-control__button{width:100%}.sapphire-segmented-control.focus-visible:focus-within .sapphire-segmented-control__glider{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring)}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__glider{transition:none}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__button:focus{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control.focus-visible:focus-within.sapphire-segmented-control--manual-keyboard-activation .sapphire-segmented-control__glider{outline:none}.sapphire-segmented-control--lg{height:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control--lg .sapphire-segmented-control__button{font-size:var(--sapphire-semantic-size-font-control-lg)}.sapphire-segmented-control--sm{height:var(--sapphire-semantic-size-height-control-sm)}.sapphire-segmented-control--sm .sapphire-segmented-control__button{font-size:var(--sapphire-semantic-size-font-control-sm)}.sapphire-segmented-control__radio-input{margin:0;overflow:visible;position:absolute;top:0;left:0;height:100%;width:100%;opacity:.0001;z-index:1;cursor:pointer}.sapphire-segmented-control__button--disabled .sapphire-segmented-control__radio-input{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
|
|
7857
|
+
], viewQueries: [{ propertyName: "segmentedControl", first: true, predicate: ["segmentedControl"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: ThemeCheckDirective }], ngImport: i0, template: "<div\n #segmentedControl\n class=\"sapphire-segmented-control\"\n [class.sapphire-segmented-control--lg]=\"size === 'lg'\"\n [class.sapphire-segmented-control--sm]=\"size === 'sm'\"\n [class.focus-visible]=\"_focusVisible\"\n [ngClass]=\"\n align === 'stretch'\n ? 'sapphire-segmented-control--stretch'\n : 'sapphire-segmented-control--align-' + align\n \"\n>\n <div\n class=\"sapphire-segmented-control__button-container\"\n role=\"radiogroup\"\n [attr.aria-label]=\"ariaLabel\"\n aria-orientation=\"horizontal\"\n cdkMonitorSubtreeFocus\n (cdkFocusChange)=\"_onFocusChange($event)\"\n >\n <ng-content></ng-content>\n <span\n [style.left]=\"_gliderStyles.left\"\n [style.width]=\"_gliderStyles.width\"\n [class.sapphire-segmented-control__glider--with-transition]=\"\n _animationEnabled\n \"\n class=\"sapphire-segmented-control__glider\"\n role=\"none\"\n ></span>\n </div>\n</div>\n", styles: [".sapphire-segmented-control{display:flex;height:var(--sapphire-semantic-size-height-control-md)}.sapphire-segmented-control--align-center{justify-content:center}.sapphire-segmented-control--align-right{justify-content:flex-end}.sapphire-segmented-control--align-left{justify-content:flex-start}.sapphire-segmented-control__button-container{display:inline-flex;position:relative;height:100%;background:var(--sapphire-semantic-color-background-segmented-control-track);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);border-radius:var(--sapphire-semantic-size-height-control-lg);padding:var(--sapphire-global-size-static-5);box-sizing:border-box}.sapphire-segmented-control__glider{position:absolute;top:var(--sapphire-global-size-static-5);left:var(--sapphire-global-size-static-5);height:calc(100% - var(--sapphire-global-size-static-5) * 2);display:block;background:var(--sapphire-semantic-color-background-segmented-control-knob);box-sizing:border-box;z-index:1;border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control__glider--with-transition{transition:width var(--sapphire-semantic-time-motion-quick) var(--sapphire-semantic-transitions-dynamic),left var(--sapphire-semantic-time-motion-quick) var(--sapphire-semantic-transitions-dynamic)}.sapphire-segmented-control__button{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);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:content-box;margin:0;border:0;height:100%;min-width:var(--sapphire-global-size-generic-120);padding:0 var(--sapphire-semantic-size-spacing-lg);background:transparent;color:var(--sapphire-semantic-color-foreground-primary);cursor:pointer;outline:none;z-index:2;display:flex;align-items:center;justify-content:center;position:relative;transition:color var(--sapphire-semantic-time-motion-quick) var(--sapphire-semantic-transitions-dynamic);white-space:nowrap}.sapphire-segmented-control__button--active{color:var(--sapphire-semantic-color-foreground-primary)}.sapphire-segmented-control__button--disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-segmented-control--stretch .sapphire-segmented-control__button-container,.sapphire-segmented-control--stretch .sapphire-segmented-control__button{width:100%}.sapphire-segmented-control.focus-visible:focus-within .sapphire-segmented-control__glider{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring)}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__glider{transition:none}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__button:focus{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control.focus-visible:focus-within.sapphire-segmented-control--manual-keyboard-activation .sapphire-segmented-control__glider{outline:none}.sapphire-segmented-control--lg{height:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control--lg .sapphire-segmented-control__button{font-size:var(--sapphire-semantic-size-font-control-lg)}.sapphire-segmented-control--sm{height:var(--sapphire-semantic-size-height-control-sm)}.sapphire-segmented-control--sm .sapphire-segmented-control__button{font-size:var(--sapphire-semantic-size-font-control-sm)}.sapphire-segmented-control__radio-input{margin:0;overflow:visible;position:absolute;top:0;left:0;height:100%;width:100%;opacity:.0001;z-index:1;cursor:pointer}.sapphire-segmented-control__button--disabled .sapphire-segmented-control__radio-input{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
|
|
7776
7858
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SegmentedRadioGroupComponent, decorators: [{
|
|
7777
7859
|
type: Component,
|
|
7778
7860
|
args: [{ selector: 'sp-segmented-radio-group', changeDetection: ChangeDetectionStrategy.Default, providers: [
|
|
@@ -7790,7 +7872,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
7790
7872
|
provide: RadioGroupBase,
|
|
7791
7873
|
useExisting: forwardRef(() => SegmentedRadioGroupComponent),
|
|
7792
7874
|
},
|
|
7793
|
-
], hostDirectives: [ThemeCheckDirective], standalone: false, template: "<div\n #segmentedControl\n class=\"sapphire-segmented-control\"\n [class.sapphire-segmented-control--lg]=\"size === 'lg'\"\n [class.sapphire-segmented-control--sm]=\"size === 'sm'\"\n [class.focus-visible]=\"_focusVisible\"\n [ngClass]=\"\n align === 'stretch'\n ? 'sapphire-segmented-control--stretch'\n : 'sapphire-segmented-control--align-' + align\n \"\n>\n <div\n class=\"sapphire-segmented-control__button-container\"\n role=\"radiogroup\"\n [attr.aria-label]=\"ariaLabel\"\n aria-orientation=\"horizontal\"\n cdkMonitorSubtreeFocus\n (cdkFocusChange)=\"_onFocusChange($event)\"\n >\n <ng-content></ng-content>\n <span\n [style.left]=\"_gliderStyles.left\"\n [style.width]=\"_gliderStyles.width\"\n [class.sapphire-segmented-control__glider--with-transition]=\"\n _animationEnabled\n \"\n class=\"sapphire-segmented-control__glider\"\n role=\"none\"\n ></span>\n </div>\n</div>\n", styles: [".sapphire-segmented-control{display:flex;height:var(--sapphire-semantic-size-height-control-md)}.sapphire-segmented-control--align-center{justify-content:center}.sapphire-segmented-control--align-right{justify-content:flex-end}.sapphire-segmented-control--align-left{justify-content:flex-start}.sapphire-segmented-control__button-container{display:inline-flex;position:relative;height:100%;background:var(--sapphire-semantic-color-background-segmented-control-track);border-radius:var(--sapphire-semantic-size-height-control-lg);padding:var(--sapphire-global-size-static-5);box-sizing:border-box}.sapphire-segmented-control__glider{position:absolute;top:var(--sapphire-global-size-static-5);left:var(--sapphire-global-size-static-5);height:calc(100% - var(--sapphire-global-size-static-5) * 2);display:block;background:var(--sapphire-semantic-color-background-segmented-control-knob);box-sizing:border-box;z-index:1;border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control__glider--with-transition{transition:width var(--sapphire-semantic-time-motion-quick) var(--sapphire-semantic-transitions-dynamic),left var(--sapphire-semantic-time-motion-quick) var(--sapphire-semantic-transitions-dynamic)}.sapphire-segmented-control__button{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);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:content-box;margin:0;border:0;height:100%;min-width:var(--sapphire-global-size-generic-120);padding:0 var(--sapphire-semantic-size-spacing-lg);background:transparent;color:var(--sapphire-semantic-color-foreground-primary);cursor:pointer;outline:none;z-index:2;display:flex;align-items:center;justify-content:center;position:relative;transition:color var(--sapphire-semantic-time-motion-quick) var(--sapphire-semantic-transitions-dynamic);white-space:nowrap}.sapphire-segmented-control__button--active{color:var(--sapphire-semantic-color-foreground-primary)}.sapphire-segmented-control__button--disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-segmented-control--stretch .sapphire-segmented-control__button-container,.sapphire-segmented-control--stretch .sapphire-segmented-control__button{width:100%}.sapphire-segmented-control.focus-visible:focus-within .sapphire-segmented-control__glider{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring)}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__glider{transition:none}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__button:focus{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control.focus-visible:focus-within.sapphire-segmented-control--manual-keyboard-activation .sapphire-segmented-control__glider{outline:none}.sapphire-segmented-control--lg{height:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control--lg .sapphire-segmented-control__button{font-size:var(--sapphire-semantic-size-font-control-lg)}.sapphire-segmented-control--sm{height:var(--sapphire-semantic-size-height-control-sm)}.sapphire-segmented-control--sm .sapphire-segmented-control__button{font-size:var(--sapphire-semantic-size-font-control-sm)}.sapphire-segmented-control__radio-input{margin:0;overflow:visible;position:absolute;top:0;left:0;height:100%;width:100%;opacity:.0001;z-index:1;cursor:pointer}.sapphire-segmented-control__button--disabled .sapphire-segmented-control__radio-input{cursor:not-allowed}\n"] }]
|
|
7875
|
+
], hostDirectives: [ThemeCheckDirective], standalone: false, template: "<div\n #segmentedControl\n class=\"sapphire-segmented-control\"\n [class.sapphire-segmented-control--lg]=\"size === 'lg'\"\n [class.sapphire-segmented-control--sm]=\"size === 'sm'\"\n [class.focus-visible]=\"_focusVisible\"\n [ngClass]=\"\n align === 'stretch'\n ? 'sapphire-segmented-control--stretch'\n : 'sapphire-segmented-control--align-' + align\n \"\n>\n <div\n class=\"sapphire-segmented-control__button-container\"\n role=\"radiogroup\"\n [attr.aria-label]=\"ariaLabel\"\n aria-orientation=\"horizontal\"\n cdkMonitorSubtreeFocus\n (cdkFocusChange)=\"_onFocusChange($event)\"\n >\n <ng-content></ng-content>\n <span\n [style.left]=\"_gliderStyles.left\"\n [style.width]=\"_gliderStyles.width\"\n [class.sapphire-segmented-control__glider--with-transition]=\"\n _animationEnabled\n \"\n class=\"sapphire-segmented-control__glider\"\n role=\"none\"\n ></span>\n </div>\n</div>\n", styles: [".sapphire-segmented-control{display:flex;height:var(--sapphire-semantic-size-height-control-md)}.sapphire-segmented-control--align-center{justify-content:center}.sapphire-segmented-control--align-right{justify-content:flex-end}.sapphire-segmented-control--align-left{justify-content:flex-start}.sapphire-segmented-control__button-container{display:inline-flex;position:relative;height:100%;background:var(--sapphire-semantic-color-background-segmented-control-track);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);border-radius:var(--sapphire-semantic-size-height-control-lg);padding:var(--sapphire-global-size-static-5);box-sizing:border-box}.sapphire-segmented-control__glider{position:absolute;top:var(--sapphire-global-size-static-5);left:var(--sapphire-global-size-static-5);height:calc(100% - var(--sapphire-global-size-static-5) * 2);display:block;background:var(--sapphire-semantic-color-background-segmented-control-knob);box-sizing:border-box;z-index:1;border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control__glider--with-transition{transition:width var(--sapphire-semantic-time-motion-quick) var(--sapphire-semantic-transitions-dynamic),left var(--sapphire-semantic-time-motion-quick) var(--sapphire-semantic-transitions-dynamic)}.sapphire-segmented-control__button{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);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:content-box;margin:0;border:0;height:100%;min-width:var(--sapphire-global-size-generic-120);padding:0 var(--sapphire-semantic-size-spacing-lg);background:transparent;color:var(--sapphire-semantic-color-foreground-primary);cursor:pointer;outline:none;z-index:2;display:flex;align-items:center;justify-content:center;position:relative;transition:color var(--sapphire-semantic-time-motion-quick) var(--sapphire-semantic-transitions-dynamic);white-space:nowrap}.sapphire-segmented-control__button--active{color:var(--sapphire-semantic-color-foreground-primary)}.sapphire-segmented-control__button--disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-segmented-control--stretch .sapphire-segmented-control__button-container,.sapphire-segmented-control--stretch .sapphire-segmented-control__button{width:100%}.sapphire-segmented-control.focus-visible:focus-within .sapphire-segmented-control__glider{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring)}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__glider{transition:none}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__button:focus{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control.focus-visible:focus-within.sapphire-segmented-control--manual-keyboard-activation .sapphire-segmented-control__glider{outline:none}.sapphire-segmented-control--lg{height:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control--lg .sapphire-segmented-control__button{font-size:var(--sapphire-semantic-size-font-control-lg)}.sapphire-segmented-control--sm{height:var(--sapphire-semantic-size-height-control-sm)}.sapphire-segmented-control--sm .sapphire-segmented-control__button{font-size:var(--sapphire-semantic-size-font-control-sm)}.sapphire-segmented-control__radio-input{margin:0;overflow:visible;position:absolute;top:0;left:0;height:100%;width:100%;opacity:.0001;z-index:1;cursor:pointer}.sapphire-segmented-control__button--disabled .sapphire-segmented-control__radio-input{cursor:not-allowed}\n"] }]
|
|
7794
7876
|
}], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { segmentedControl: [{
|
|
7795
7877
|
type: ViewChild,
|
|
7796
7878
|
args: ['segmentedControl']
|
|
@@ -7926,12 +8008,12 @@ class ModalService {
|
|
|
7926
8008
|
return this.open(componentOrTemplateRef, options, this.overlay.position().global().right());
|
|
7927
8009
|
}
|
|
7928
8010
|
}
|
|
7929
|
-
ModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalService, deps: [{ token: i1$
|
|
8011
|
+
ModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalService, deps: [{ token: i1$4.Dialog }, { token: SapphireOverlay }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
7930
8012
|
ModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalService, providedIn: 'root' });
|
|
7931
8013
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalService, decorators: [{
|
|
7932
8014
|
type: Injectable,
|
|
7933
8015
|
args: [{ providedIn: 'root' }]
|
|
7934
|
-
}], ctorParameters: function () { return [{ type: i1$
|
|
8016
|
+
}], ctorParameters: function () { return [{ type: i1$4.Dialog }, { type: SapphireOverlay }]; } });
|
|
7935
8017
|
|
|
7936
8018
|
/**
|
|
7937
8019
|
* Monitors host element's **scrolled** and **scrollable** state.
|
|
@@ -8047,7 +8129,7 @@ class ModalCloseButtonDirective {
|
|
|
8047
8129
|
this.dialogRef?.close();
|
|
8048
8130
|
}
|
|
8049
8131
|
}
|
|
8050
|
-
ModalCloseButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalCloseButtonDirective, deps: [{ token: TranslateService }, { token: i1$
|
|
8132
|
+
ModalCloseButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalCloseButtonDirective, deps: [{ token: TranslateService }, { token: i1$4.DialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
8051
8133
|
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 });
|
|
8052
8134
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalCloseButtonDirective, decorators: [{
|
|
8053
8135
|
type: Directive,
|
|
@@ -8058,7 +8140,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
8058
8140
|
},
|
|
8059
8141
|
standalone: false,
|
|
8060
8142
|
}]
|
|
8061
|
-
}], ctorParameters: function () { return [{ type: TranslateService }, { type: i1$
|
|
8143
|
+
}], ctorParameters: function () { return [{ type: TranslateService }, { type: i1$4.DialogRef, decorators: [{
|
|
8062
8144
|
type: Optional
|
|
8063
8145
|
}] }]; }, propDecorators: { close: [{
|
|
8064
8146
|
type: HostListener,
|
|
@@ -8180,7 +8262,7 @@ class ModalBaseComponent {
|
|
|
8180
8262
|
this.dialogRef.immediateClose();
|
|
8181
8263
|
}
|
|
8182
8264
|
}
|
|
8183
|
-
ModalBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalBaseComponent, deps: [{ token: i1$
|
|
8265
|
+
ModalBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalBaseComponent, deps: [{ token: i1$4.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
8184
8266
|
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 });
|
|
8185
8267
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalBaseComponent, decorators: [{
|
|
8186
8268
|
type: Component,
|
|
@@ -8196,7 +8278,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
8196
8278
|
},
|
|
8197
8279
|
standalone: false,
|
|
8198
8280
|
}]
|
|
8199
|
-
}], ctorParameters: function () { return [{ type: i1$
|
|
8281
|
+
}], ctorParameters: function () { return [{ type: i1$4.DialogRef }]; }, propDecorators: { ariaLabel: [{
|
|
8200
8282
|
type: Input,
|
|
8201
8283
|
args: ['aria-label']
|
|
8202
8284
|
}], ariaLabelledBy: [{
|
|
@@ -8228,7 +8310,7 @@ class DialogComponent extends ModalBaseComponent {
|
|
|
8228
8310
|
this.padded = false;
|
|
8229
8311
|
}
|
|
8230
8312
|
}
|
|
8231
|
-
DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DialogComponent, deps: [{ token: i1$
|
|
8313
|
+
DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DialogComponent, deps: [{ token: i1$4.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
8232
8314
|
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"] });
|
|
8233
8315
|
__decorate([
|
|
8234
8316
|
CoerceBoolean
|
|
@@ -8244,7 +8326,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
8244
8326
|
'[class.sapphire-dialog--padded]': 'padded === true',
|
|
8245
8327
|
'[class.sapphire-dialog--exiting]': 'dialogRef.closing',
|
|
8246
8328
|
}, 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"] }]
|
|
8247
|
-
}], ctorParameters: function () { return [{ type: i1$
|
|
8329
|
+
}], ctorParameters: function () { return [{ type: i1$4.DialogRef }]; }, propDecorators: { size: [{
|
|
8248
8330
|
type: Input
|
|
8249
8331
|
}], padded: [{
|
|
8250
8332
|
type: Input
|
|
@@ -8416,7 +8498,7 @@ class ModalTriggerDirective {
|
|
|
8416
8498
|
this.dialogRef?.close();
|
|
8417
8499
|
}
|
|
8418
8500
|
ngOnInit() {
|
|
8419
|
-
this.menuItem?.triggered.
|
|
8501
|
+
this.menuItem?.triggered.subscribe(() => {
|
|
8420
8502
|
this.open();
|
|
8421
8503
|
});
|
|
8422
8504
|
}
|
|
@@ -8470,12 +8552,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
8470
8552
|
class ModalLayoutComponent {
|
|
8471
8553
|
}
|
|
8472
8554
|
ModalLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8473
|
-
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;flex-direction:column;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)}.sapphire-modal-layout__header-content{display:flex;justify-content:space-between;gap:var(--sapphire-semantic-size-spacing-sm)}.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;padding:var(--sapphire-semantic-size-spacing-2xs) 0}.sapphire-modal-layout__subheading{color:var(--sapphire-semantic-color-foreground-secondary);margin-top:var(--sapphire-semantic-size-spacing-3xs);line-height:var(--sapphire-semantic-size-line-height-sm)}.sapphire-modal-layout__extra-container{flex:1;flex-basis:100%;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sapphire-semantic-size-spacing-sm);margin-top:var(--sapphire-semantic-size-spacing-sm)}.sapphire-modal-layout__progress-container{display:flex}.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{z-index:1;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
|
|
8555
|
+
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;flex-direction:column;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)}.sapphire-modal-layout__header-content{display:flex;justify-content:space-between;gap:var(--sapphire-semantic-size-spacing-sm)}.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;padding:var(--sapphire-semantic-size-spacing-2xs) 0}.sapphire-modal-layout__subheading{color:var(--sapphire-semantic-color-foreground-secondary);margin-top:var(--sapphire-semantic-size-spacing-3xs);line-height:var(--sapphire-semantic-size-line-height-sm)}.sapphire-modal-layout__extra-container{flex:1;flex-basis:100%;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sapphire-semantic-size-spacing-sm);margin-top:var(--sapphire-semantic-size-spacing-sm)}.sapphire-modal-layout__progress-container{display:flex}.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{z-index:1;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:var(--sapphire-semantic-color-background-neutral-subtle);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);display:flex;align-items:center;position:sticky;top:0}@supports (-moz-appearance: none){.sapphire-modal-layout__section-title{background-color:var(--sapphire-semantic-color-background-surface)}.sapphire-modal-layout__section-title:before{content:\"\";position:absolute;inset:0;z-index:-1;background:var(--sapphire-semantic-color-background-neutral-subtle)}}\n"] });
|
|
8474
8556
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalLayoutComponent, decorators: [{
|
|
8475
8557
|
type: Component,
|
|
8476
8558
|
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: {
|
|
8477
8559
|
class: 'sapphire-modal-layout',
|
|
8478
|
-
}, 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;flex-direction:column;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)}.sapphire-modal-layout__header-content{display:flex;justify-content:space-between;gap:var(--sapphire-semantic-size-spacing-sm)}.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;padding:var(--sapphire-semantic-size-spacing-2xs) 0}.sapphire-modal-layout__subheading{color:var(--sapphire-semantic-color-foreground-secondary);margin-top:var(--sapphire-semantic-size-spacing-3xs);line-height:var(--sapphire-semantic-size-line-height-sm)}.sapphire-modal-layout__extra-container{flex:1;flex-basis:100%;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sapphire-semantic-size-spacing-sm);margin-top:var(--sapphire-semantic-size-spacing-sm)}.sapphire-modal-layout__progress-container{display:flex}.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{z-index:1;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
|
|
8560
|
+
}, 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;flex-direction:column;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)}.sapphire-modal-layout__header-content{display:flex;justify-content:space-between;gap:var(--sapphire-semantic-size-spacing-sm)}.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;padding:var(--sapphire-semantic-size-spacing-2xs) 0}.sapphire-modal-layout__subheading{color:var(--sapphire-semantic-color-foreground-secondary);margin-top:var(--sapphire-semantic-size-spacing-3xs);line-height:var(--sapphire-semantic-size-line-height-sm)}.sapphire-modal-layout__extra-container{flex:1;flex-basis:100%;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sapphire-semantic-size-spacing-sm);margin-top:var(--sapphire-semantic-size-spacing-sm)}.sapphire-modal-layout__progress-container{display:flex}.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{z-index:1;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:var(--sapphire-semantic-color-background-neutral-subtle);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);display:flex;align-items:center;position:sticky;top:0}@supports (-moz-appearance: none){.sapphire-modal-layout__section-title{background-color:var(--sapphire-semantic-color-background-surface)}.sapphire-modal-layout__section-title:before{content:\"\";position:absolute;inset:0;z-index:-1;background:var(--sapphire-semantic-color-background-neutral-subtle)}}\n"] }]
|
|
8479
8561
|
}] });
|
|
8480
8562
|
|
|
8481
8563
|
/**
|
|
@@ -8511,10 +8593,10 @@ class ConfirmationDialogComponent {
|
|
|
8511
8593
|
}
|
|
8512
8594
|
}
|
|
8513
8595
|
ConfirmationDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8514
|
-
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"] }] });
|
|
8596
|
+
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"] }] });
|
|
8515
8597
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
|
|
8516
8598
|
type: Component,
|
|
8517
|
-
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" }]
|
|
8599
|
+
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" }]
|
|
8518
8600
|
}], propDecorators: { heading: [{
|
|
8519
8601
|
type: Input
|
|
8520
8602
|
}], primaryActionLabel: [{
|
|
@@ -8564,10 +8646,10 @@ class DangerDialogComponent {
|
|
|
8564
8646
|
}
|
|
8565
8647
|
}
|
|
8566
8648
|
DangerDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DangerDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8567
|
-
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"] }] });
|
|
8649
|
+
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"] }] });
|
|
8568
8650
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DangerDialogComponent, decorators: [{
|
|
8569
8651
|
type: Component,
|
|
8570
|
-
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" }]
|
|
8652
|
+
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" }]
|
|
8571
8653
|
}], propDecorators: { heading: [{
|
|
8572
8654
|
type: Input
|
|
8573
8655
|
}], primaryActionLabel: [{
|
|
@@ -8696,16 +8778,16 @@ class PanelComponent extends ModalBaseComponent {
|
|
|
8696
8778
|
this.size = 'lg';
|
|
8697
8779
|
}
|
|
8698
8780
|
}
|
|
8699
|
-
PanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PanelComponent, deps: [{ token: i1$
|
|
8700
|
-
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--left{transform:translate(-100%)}.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;flex-direction:column;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)}.sapphire-modal-layout__header-content{display:flex;justify-content:space-between;gap:var(--sapphire-semantic-size-spacing-sm)}.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;padding:var(--sapphire-semantic-size-spacing-2xs) 0}.sapphire-modal-layout__subheading{color:var(--sapphire-semantic-color-foreground-secondary);margin-top:var(--sapphire-semantic-size-spacing-3xs);line-height:var(--sapphire-semantic-size-line-height-sm)}.sapphire-modal-layout__extra-container{flex:1;flex-basis:100%;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sapphire-semantic-size-spacing-sm);margin-top:var(--sapphire-semantic-size-spacing-sm)}.sapphire-modal-layout__progress-container{display:flex}.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{z-index:1;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
|
|
8781
|
+
PanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PanelComponent, deps: [{ token: i1$4.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
8782
|
+
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--left{transform:translate(-100%)}.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;flex-direction:column;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)}.sapphire-modal-layout__header-content{display:flex;justify-content:space-between;gap:var(--sapphire-semantic-size-spacing-sm)}.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;padding:var(--sapphire-semantic-size-spacing-2xs) 0}.sapphire-modal-layout__subheading{color:var(--sapphire-semantic-color-foreground-secondary);margin-top:var(--sapphire-semantic-size-spacing-3xs);line-height:var(--sapphire-semantic-size-line-height-sm)}.sapphire-modal-layout__extra-container{flex:1;flex-basis:100%;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sapphire-semantic-size-spacing-sm);margin-top:var(--sapphire-semantic-size-spacing-sm)}.sapphire-modal-layout__progress-container{display:flex}.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{z-index:1;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:var(--sapphire-semantic-color-background-neutral-subtle);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);display:flex;align-items:center;position:sticky;top:0}@supports (-moz-appearance: none){.sapphire-modal-layout__section-title{background-color:var(--sapphire-semantic-color-background-surface)}.sapphire-modal-layout__section-title:before{content:\"\";position:absolute;inset:0;z-index:-1;background:var(--sapphire-semantic-color-background-neutral-subtle)}}\n"] });
|
|
8701
8783
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PanelComponent, decorators: [{
|
|
8702
8784
|
type: Component,
|
|
8703
8785
|
args: [{ selector: 'sp-panel', template: '<ng-content></ng-content>', host: {
|
|
8704
8786
|
class: 'sapphire-panel',
|
|
8705
8787
|
'[class.sapphire-panel--sm]': 'size === "sm"',
|
|
8706
8788
|
'[class.sapphire-panel--visible]': '!dialogRef.closing',
|
|
8707
|
-
}, 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--left{transform:translate(-100%)}.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;flex-direction:column;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)}.sapphire-modal-layout__header-content{display:flex;justify-content:space-between;gap:var(--sapphire-semantic-size-spacing-sm)}.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;padding:var(--sapphire-semantic-size-spacing-2xs) 0}.sapphire-modal-layout__subheading{color:var(--sapphire-semantic-color-foreground-secondary);margin-top:var(--sapphire-semantic-size-spacing-3xs);line-height:var(--sapphire-semantic-size-line-height-sm)}.sapphire-modal-layout__extra-container{flex:1;flex-basis:100%;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sapphire-semantic-size-spacing-sm);margin-top:var(--sapphire-semantic-size-spacing-sm)}.sapphire-modal-layout__progress-container{display:flex}.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{z-index:1;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
|
|
8708
|
-
}], ctorParameters: function () { return [{ type: i1$
|
|
8789
|
+
}, 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--left{transform:translate(-100%)}.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;flex-direction:column;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)}.sapphire-modal-layout__header-content{display:flex;justify-content:space-between;gap:var(--sapphire-semantic-size-spacing-sm)}.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;padding:var(--sapphire-semantic-size-spacing-2xs) 0}.sapphire-modal-layout__subheading{color:var(--sapphire-semantic-color-foreground-secondary);margin-top:var(--sapphire-semantic-size-spacing-3xs);line-height:var(--sapphire-semantic-size-line-height-sm)}.sapphire-modal-layout__extra-container{flex:1;flex-basis:100%;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sapphire-semantic-size-spacing-sm);margin-top:var(--sapphire-semantic-size-spacing-sm)}.sapphire-modal-layout__progress-container{display:flex}.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{z-index:1;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:var(--sapphire-semantic-color-background-neutral-subtle);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);display:flex;align-items:center;position:sticky;top:0}@supports (-moz-appearance: none){.sapphire-modal-layout__section-title{background-color:var(--sapphire-semantic-color-background-surface)}.sapphire-modal-layout__section-title:before{content:\"\";position:absolute;inset:0;z-index:-1;background:var(--sapphire-semantic-color-background-neutral-subtle)}}\n"] }]
|
|
8790
|
+
}], ctorParameters: function () { return [{ type: i1$4.DialogRef }]; }, propDecorators: { size: [{
|
|
8709
8791
|
type: Input
|
|
8710
8792
|
}] } });
|
|
8711
8793
|
|
|
@@ -9555,13 +9637,13 @@ class BadgeComponent {
|
|
|
9555
9637
|
}
|
|
9556
9638
|
}
|
|
9557
9639
|
BadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9558
|
-
BadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: BadgeComponent, selector: "sp-badge", inputs: { id: "id", size: "size", variant: "variant", color: "color" }, host: { properties: { "role": "this.role", "id": "this.id", "class": "this.classNames" } }, hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".sapphire-badge{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;white-space:nowrap;border-radius:var(--sapphire-semantic-size-radius-sm);font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-regular);font-style:normal;box-sizing:border-box;height:var(--sapphire-semantic-size-height-control-sm);padding:0 var(--sapphire-semantic-size-spacing-sm);font-size:var(--sapphire-semantic-size-font-control-md);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--sapphire-semantic-color-foreground-on-decorative-neutral);background:var(--sapphire-semantic-color-background-decorative-neutral)}.sapphire-badge--sm{height:var(--sapphire-semantic-size-height-control-xs);padding:0 var(--sapphire-semantic-size-spacing-xs);font-size:var(--sapphire-semantic-size-font-control-sm)}.sapphire-badge--primary-positive{color:var(--sapphire-semantic-color-foreground-on-positive);background:var(--sapphire-semantic-color-background-positive)}.sapphire-badge--secondary-positive{color:var(--sapphire-semantic-color-foreground-on-positive-subtle);background:var(--sapphire-semantic-color-background-positive-subtle)}.sapphire-badge--primary-negative{color:var(--sapphire-semantic-color-foreground-on-negative);background:var(--sapphire-semantic-color-background-negative)}.sapphire-badge--secondary-negative{color:var(--sapphire-semantic-color-foreground-on-negative-subtle);background:var(--sapphire-semantic-color-background-negative-subtle)}.sapphire-badge--primary-warning{color:var(--sapphire-semantic-color-foreground-on-warning);background:var(--sapphire-semantic-color-background-warning)}.sapphire-badge--secondary-warning{color:var(--sapphire-semantic-color-foreground-on-warning-subtle);background:var(--sapphire-semantic-color-background-warning-subtle)}.sapphire-badge--primary-informative{color:var(--sapphire-semantic-color-foreground-on-accent);background:var(--sapphire-semantic-color-background-accent)}.sapphire-badge--secondary-informative{color:var(--sapphire-semantic-color-foreground-on-accent-subtle);background:var(--sapphire-semantic-color-background-accent-subtle)}.sapphire-badge--decorative-1{color:var(--sapphire-semantic-color-foreground-on-decorative-1);background:var(--sapphire-semantic-color-background-decorative-1)}.sapphire-badge--decorative-2{color:var(--sapphire-semantic-color-foreground-on-decorative-2);background:var(--sapphire-semantic-color-background-decorative-2)}.sapphire-badge--decorative-3{color:var(--sapphire-semantic-color-foreground-on-decorative-3);background:var(--sapphire-semantic-color-background-decorative-3)}.sapphire-badge--decorative-4{color:var(--sapphire-semantic-color-foreground-on-decorative-4);background:var(--sapphire-semantic-color-background-decorative-4)}.sapphire-badge--decorative-5{color:var(--sapphire-semantic-color-foreground-on-decorative-5);background:var(--sapphire-semantic-color-background-decorative-5)}.sapphire-badge--decorative-6{color:var(--sapphire-semantic-color-foreground-on-decorative-6);background:var(--sapphire-semantic-color-background-decorative-6)}.sapphire-badge--decorative-7{color:var(--sapphire-semantic-color-foreground-on-decorative-7);background:var(--sapphire-semantic-color-background-decorative-7)}.sapphire-badge--decorative-8{color:var(--sapphire-semantic-color-foreground-on-decorative-8);background:var(--sapphire-semantic-color-background-decorative-8)}.sapphire-badge--decorative-9{color:var(--sapphire-semantic-color-foreground-on-decorative-9);background:var(--sapphire-semantic-color-background-decorative-9)}.sapphire-badge--decorative-10{color:var(--sapphire-semantic-color-foreground-on-decorative-10);background:var(--sapphire-semantic-color-background-decorative-10)}.sapphire-badge--decorative-11{color:var(--sapphire-semantic-color-foreground-on-decorative-11);background:var(--sapphire-semantic-color-background-decorative-11)}.sapphire-badge--decorative-12{color:var(--sapphire-semantic-color-foreground-on-decorative-12);background:var(--sapphire-semantic-color-background-decorative-12)}.sapphire-badge--decorative-13{color:var(--sapphire-semantic-color-foreground-on-decorative-13);background:var(--sapphire-semantic-color-background-decorative-13)}.sapphire-badge--decorative-14{color:var(--sapphire-semantic-color-foreground-on-decorative-14);background:var(--sapphire-semantic-color-background-decorative-14)}.sapphire-badge--decorative-15{color:var(--sapphire-semantic-color-foreground-on-decorative-15);background:var(--sapphire-semantic-color-background-decorative-15)}.sapphire-badge--decorative-16{color:var(--sapphire-semantic-color-foreground-on-decorative-16);background:var(--sapphire-semantic-color-background-decorative-16)}\n"] });
|
|
9640
|
+
BadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: BadgeComponent, selector: "sp-badge", inputs: { id: "id", size: "size", variant: "variant", color: "color" }, host: { properties: { "role": "this.role", "id": "this.id", "class": "this.classNames" } }, hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".sapphire-badge{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;white-space:nowrap;border-radius:var(--sapphire-semantic-size-radius-sm);font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-regular);font-style:normal;box-sizing:border-box;height:var(--sapphire-semantic-size-height-control-sm);padding:0 var(--sapphire-semantic-size-spacing-sm);font-size:var(--sapphire-semantic-size-font-control-md);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--sapphire-semantic-color-foreground-on-decorative-neutral);background:var(--sapphire-semantic-color-background-decorative-neutral);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.sapphire-badge--sm{height:var(--sapphire-semantic-size-height-control-xs);padding:0 var(--sapphire-semantic-size-spacing-xs);font-size:var(--sapphire-semantic-size-font-control-sm)}.sapphire-badge--primary-positive{color:var(--sapphire-semantic-color-foreground-on-positive);background:var(--sapphire-semantic-color-background-positive)}.sapphire-badge--secondary-positive{color:var(--sapphire-semantic-color-foreground-on-positive-subtle);background:var(--sapphire-semantic-color-background-positive-subtle);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.sapphire-badge--primary-negative{color:var(--sapphire-semantic-color-foreground-on-negative);background:var(--sapphire-semantic-color-background-negative)}.sapphire-badge--secondary-negative{color:var(--sapphire-semantic-color-foreground-on-negative-subtle);background:var(--sapphire-semantic-color-background-negative-subtle);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.sapphire-badge--primary-warning{color:var(--sapphire-semantic-color-foreground-on-warning);background:var(--sapphire-semantic-color-background-warning)}.sapphire-badge--secondary-warning{color:var(--sapphire-semantic-color-foreground-on-warning-subtle);background:var(--sapphire-semantic-color-background-warning-subtle);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.sapphire-badge--primary-informative{color:var(--sapphire-semantic-color-foreground-on-accent);background:var(--sapphire-semantic-color-background-accent)}.sapphire-badge--secondary-informative{color:var(--sapphire-semantic-color-foreground-on-accent-subtle);background:var(--sapphire-semantic-color-background-accent-subtle);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.sapphire-badge--decorative-1{color:var(--sapphire-semantic-color-foreground-on-decorative-1);background:var(--sapphire-semantic-color-background-decorative-1)}.sapphire-badge--decorative-2{color:var(--sapphire-semantic-color-foreground-on-decorative-2);background:var(--sapphire-semantic-color-background-decorative-2)}.sapphire-badge--decorative-3{color:var(--sapphire-semantic-color-foreground-on-decorative-3);background:var(--sapphire-semantic-color-background-decorative-3)}.sapphire-badge--decorative-4{color:var(--sapphire-semantic-color-foreground-on-decorative-4);background:var(--sapphire-semantic-color-background-decorative-4)}.sapphire-badge--decorative-5{color:var(--sapphire-semantic-color-foreground-on-decorative-5);background:var(--sapphire-semantic-color-background-decorative-5)}.sapphire-badge--decorative-6{color:var(--sapphire-semantic-color-foreground-on-decorative-6);background:var(--sapphire-semantic-color-background-decorative-6)}.sapphire-badge--decorative-7{color:var(--sapphire-semantic-color-foreground-on-decorative-7);background:var(--sapphire-semantic-color-background-decorative-7)}.sapphire-badge--decorative-8{color:var(--sapphire-semantic-color-foreground-on-decorative-8);background:var(--sapphire-semantic-color-background-decorative-8)}.sapphire-badge--decorative-9{color:var(--sapphire-semantic-color-foreground-on-decorative-9);background:var(--sapphire-semantic-color-background-decorative-9)}.sapphire-badge--decorative-10{color:var(--sapphire-semantic-color-foreground-on-decorative-10);background:var(--sapphire-semantic-color-background-decorative-10)}.sapphire-badge--decorative-11{color:var(--sapphire-semantic-color-foreground-on-decorative-11);background:var(--sapphire-semantic-color-background-decorative-11)}.sapphire-badge--decorative-12{color:var(--sapphire-semantic-color-foreground-on-decorative-12);background:var(--sapphire-semantic-color-background-decorative-12)}.sapphire-badge--decorative-13{color:var(--sapphire-semantic-color-foreground-on-decorative-13);background:var(--sapphire-semantic-color-background-decorative-13)}.sapphire-badge--decorative-14{color:var(--sapphire-semantic-color-foreground-on-decorative-14);background:var(--sapphire-semantic-color-background-decorative-14)}.sapphire-badge--decorative-15{color:var(--sapphire-semantic-color-foreground-on-decorative-15);background:var(--sapphire-semantic-color-background-decorative-15)}.sapphire-badge--decorative-16{color:var(--sapphire-semantic-color-foreground-on-decorative-16);background:var(--sapphire-semantic-color-background-decorative-16)}\n"] });
|
|
9559
9641
|
__decorate([
|
|
9560
9642
|
AutoId()
|
|
9561
9643
|
], BadgeComponent.prototype, "id", void 0);
|
|
9562
9644
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: BadgeComponent, decorators: [{
|
|
9563
9645
|
type: Component,
|
|
9564
|
-
args: [{ selector: 'sp-badge', template: '<ng-content></ng-content>', hostDirectives: [UseComponentStylesOnHost], standalone: false, styles: [".sapphire-badge{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;white-space:nowrap;border-radius:var(--sapphire-semantic-size-radius-sm);font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-regular);font-style:normal;box-sizing:border-box;height:var(--sapphire-semantic-size-height-control-sm);padding:0 var(--sapphire-semantic-size-spacing-sm);font-size:var(--sapphire-semantic-size-font-control-md);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--sapphire-semantic-color-foreground-on-decorative-neutral);background:var(--sapphire-semantic-color-background-decorative-neutral)}.sapphire-badge--sm{height:var(--sapphire-semantic-size-height-control-xs);padding:0 var(--sapphire-semantic-size-spacing-xs);font-size:var(--sapphire-semantic-size-font-control-sm)}.sapphire-badge--primary-positive{color:var(--sapphire-semantic-color-foreground-on-positive);background:var(--sapphire-semantic-color-background-positive)}.sapphire-badge--secondary-positive{color:var(--sapphire-semantic-color-foreground-on-positive-subtle);background:var(--sapphire-semantic-color-background-positive-subtle)}.sapphire-badge--primary-negative{color:var(--sapphire-semantic-color-foreground-on-negative);background:var(--sapphire-semantic-color-background-negative)}.sapphire-badge--secondary-negative{color:var(--sapphire-semantic-color-foreground-on-negative-subtle);background:var(--sapphire-semantic-color-background-negative-subtle)}.sapphire-badge--primary-warning{color:var(--sapphire-semantic-color-foreground-on-warning);background:var(--sapphire-semantic-color-background-warning)}.sapphire-badge--secondary-warning{color:var(--sapphire-semantic-color-foreground-on-warning-subtle);background:var(--sapphire-semantic-color-background-warning-subtle)}.sapphire-badge--primary-informative{color:var(--sapphire-semantic-color-foreground-on-accent);background:var(--sapphire-semantic-color-background-accent)}.sapphire-badge--secondary-informative{color:var(--sapphire-semantic-color-foreground-on-accent-subtle);background:var(--sapphire-semantic-color-background-accent-subtle)}.sapphire-badge--decorative-1{color:var(--sapphire-semantic-color-foreground-on-decorative-1);background:var(--sapphire-semantic-color-background-decorative-1)}.sapphire-badge--decorative-2{color:var(--sapphire-semantic-color-foreground-on-decorative-2);background:var(--sapphire-semantic-color-background-decorative-2)}.sapphire-badge--decorative-3{color:var(--sapphire-semantic-color-foreground-on-decorative-3);background:var(--sapphire-semantic-color-background-decorative-3)}.sapphire-badge--decorative-4{color:var(--sapphire-semantic-color-foreground-on-decorative-4);background:var(--sapphire-semantic-color-background-decorative-4)}.sapphire-badge--decorative-5{color:var(--sapphire-semantic-color-foreground-on-decorative-5);background:var(--sapphire-semantic-color-background-decorative-5)}.sapphire-badge--decorative-6{color:var(--sapphire-semantic-color-foreground-on-decorative-6);background:var(--sapphire-semantic-color-background-decorative-6)}.sapphire-badge--decorative-7{color:var(--sapphire-semantic-color-foreground-on-decorative-7);background:var(--sapphire-semantic-color-background-decorative-7)}.sapphire-badge--decorative-8{color:var(--sapphire-semantic-color-foreground-on-decorative-8);background:var(--sapphire-semantic-color-background-decorative-8)}.sapphire-badge--decorative-9{color:var(--sapphire-semantic-color-foreground-on-decorative-9);background:var(--sapphire-semantic-color-background-decorative-9)}.sapphire-badge--decorative-10{color:var(--sapphire-semantic-color-foreground-on-decorative-10);background:var(--sapphire-semantic-color-background-decorative-10)}.sapphire-badge--decorative-11{color:var(--sapphire-semantic-color-foreground-on-decorative-11);background:var(--sapphire-semantic-color-background-decorative-11)}.sapphire-badge--decorative-12{color:var(--sapphire-semantic-color-foreground-on-decorative-12);background:var(--sapphire-semantic-color-background-decorative-12)}.sapphire-badge--decorative-13{color:var(--sapphire-semantic-color-foreground-on-decorative-13);background:var(--sapphire-semantic-color-background-decorative-13)}.sapphire-badge--decorative-14{color:var(--sapphire-semantic-color-foreground-on-decorative-14);background:var(--sapphire-semantic-color-background-decorative-14)}.sapphire-badge--decorative-15{color:var(--sapphire-semantic-color-foreground-on-decorative-15);background:var(--sapphire-semantic-color-background-decorative-15)}.sapphire-badge--decorative-16{color:var(--sapphire-semantic-color-foreground-on-decorative-16);background:var(--sapphire-semantic-color-background-decorative-16)}\n"] }]
|
|
9646
|
+
args: [{ selector: 'sp-badge', template: '<ng-content></ng-content>', hostDirectives: [UseComponentStylesOnHost], standalone: false, styles: [".sapphire-badge{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;white-space:nowrap;border-radius:var(--sapphire-semantic-size-radius-sm);font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-regular);font-style:normal;box-sizing:border-box;height:var(--sapphire-semantic-size-height-control-sm);padding:0 var(--sapphire-semantic-size-spacing-sm);font-size:var(--sapphire-semantic-size-font-control-md);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--sapphire-semantic-color-foreground-on-decorative-neutral);background:var(--sapphire-semantic-color-background-decorative-neutral);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.sapphire-badge--sm{height:var(--sapphire-semantic-size-height-control-xs);padding:0 var(--sapphire-semantic-size-spacing-xs);font-size:var(--sapphire-semantic-size-font-control-sm)}.sapphire-badge--primary-positive{color:var(--sapphire-semantic-color-foreground-on-positive);background:var(--sapphire-semantic-color-background-positive)}.sapphire-badge--secondary-positive{color:var(--sapphire-semantic-color-foreground-on-positive-subtle);background:var(--sapphire-semantic-color-background-positive-subtle);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.sapphire-badge--primary-negative{color:var(--sapphire-semantic-color-foreground-on-negative);background:var(--sapphire-semantic-color-background-negative)}.sapphire-badge--secondary-negative{color:var(--sapphire-semantic-color-foreground-on-negative-subtle);background:var(--sapphire-semantic-color-background-negative-subtle);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.sapphire-badge--primary-warning{color:var(--sapphire-semantic-color-foreground-on-warning);background:var(--sapphire-semantic-color-background-warning)}.sapphire-badge--secondary-warning{color:var(--sapphire-semantic-color-foreground-on-warning-subtle);background:var(--sapphire-semantic-color-background-warning-subtle);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.sapphire-badge--primary-informative{color:var(--sapphire-semantic-color-foreground-on-accent);background:var(--sapphire-semantic-color-background-accent)}.sapphire-badge--secondary-informative{color:var(--sapphire-semantic-color-foreground-on-accent-subtle);background:var(--sapphire-semantic-color-background-accent-subtle);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.sapphire-badge--decorative-1{color:var(--sapphire-semantic-color-foreground-on-decorative-1);background:var(--sapphire-semantic-color-background-decorative-1)}.sapphire-badge--decorative-2{color:var(--sapphire-semantic-color-foreground-on-decorative-2);background:var(--sapphire-semantic-color-background-decorative-2)}.sapphire-badge--decorative-3{color:var(--sapphire-semantic-color-foreground-on-decorative-3);background:var(--sapphire-semantic-color-background-decorative-3)}.sapphire-badge--decorative-4{color:var(--sapphire-semantic-color-foreground-on-decorative-4);background:var(--sapphire-semantic-color-background-decorative-4)}.sapphire-badge--decorative-5{color:var(--sapphire-semantic-color-foreground-on-decorative-5);background:var(--sapphire-semantic-color-background-decorative-5)}.sapphire-badge--decorative-6{color:var(--sapphire-semantic-color-foreground-on-decorative-6);background:var(--sapphire-semantic-color-background-decorative-6)}.sapphire-badge--decorative-7{color:var(--sapphire-semantic-color-foreground-on-decorative-7);background:var(--sapphire-semantic-color-background-decorative-7)}.sapphire-badge--decorative-8{color:var(--sapphire-semantic-color-foreground-on-decorative-8);background:var(--sapphire-semantic-color-background-decorative-8)}.sapphire-badge--decorative-9{color:var(--sapphire-semantic-color-foreground-on-decorative-9);background:var(--sapphire-semantic-color-background-decorative-9)}.sapphire-badge--decorative-10{color:var(--sapphire-semantic-color-foreground-on-decorative-10);background:var(--sapphire-semantic-color-background-decorative-10)}.sapphire-badge--decorative-11{color:var(--sapphire-semantic-color-foreground-on-decorative-11);background:var(--sapphire-semantic-color-background-decorative-11)}.sapphire-badge--decorative-12{color:var(--sapphire-semantic-color-foreground-on-decorative-12);background:var(--sapphire-semantic-color-background-decorative-12)}.sapphire-badge--decorative-13{color:var(--sapphire-semantic-color-foreground-on-decorative-13);background:var(--sapphire-semantic-color-background-decorative-13)}.sapphire-badge--decorative-14{color:var(--sapphire-semantic-color-foreground-on-decorative-14);background:var(--sapphire-semantic-color-background-decorative-14)}.sapphire-badge--decorative-15{color:var(--sapphire-semantic-color-foreground-on-decorative-15);background:var(--sapphire-semantic-color-background-decorative-15)}.sapphire-badge--decorative-16{color:var(--sapphire-semantic-color-foreground-on-decorative-16);background:var(--sapphire-semantic-color-background-decorative-16)}\n"] }]
|
|
9565
9647
|
}], ctorParameters: function () { return []; }, propDecorators: { role: [{
|
|
9566
9648
|
type: HostBinding,
|
|
9567
9649
|
args: ['role']
|
|
@@ -9662,7 +9744,7 @@ class ListComponent {
|
|
|
9662
9744
|
}
|
|
9663
9745
|
}
|
|
9664
9746
|
ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ListComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
9665
|
-
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__item>.sapphire-list__item--selected{background:var(--sapphire-semantic-color-background-action-select-secondary-default)}.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(:focus-within)):hover{background:var(--sapphire-semantic-color-background-action-tertiary-hover)}.sapphire-list__item--selected.is-hover:not(.is-active):not(:has(.is-hover)),.sapphire-list__item--selected:not(.js-hover):not([aria-disabled=true]):not(:disabled):not(:active):not(:has(:focus-within)):hover{background:var(--sapphire-semantic-color-background-action-select-secondary-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(:focus-within,button[aria-expanded=true])):active{background-color:var(--sapphire-semantic-color-background-action-secondary-hover)}.sapphire-list__item--selected:not(.is-disabled).is-active:not(:has(.is-active)),.sapphire-list__item--selected:not([aria-disabled=true]):not(:disabled):not(:has(:focus-within,button[aria-expanded=true])):active{background-color:var(--sapphire-semantic-color-background-action-select-secondary-active)}.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;gap:var(--sapphire-semantic-size-spacing-4xs)}.sapphire-list__item-text-label{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)}.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"] });
|
|
9747
|
+
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__item>.sapphire-list__item--selected{background:var(--sapphire-semantic-color-background-action-select-secondary-default);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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(:focus-within)):hover{background:var(--sapphire-semantic-color-background-action-tertiary-hover);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.sapphire-list__item--selected.is-hover:not(.is-active):not(:has(.is-hover)),.sapphire-list__item--selected:not(.js-hover):not([aria-disabled=true]):not(:disabled):not(:active):not(:has(:focus-within)):hover{background:var(--sapphire-semantic-color-background-action-select-secondary-hover);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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(:focus-within,button[aria-expanded=true])):active{background-color:var(--sapphire-semantic-color-background-action-secondary-hover);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.sapphire-list__item--selected:not(.is-disabled).is-active:not(:has(.is-active)),.sapphire-list__item--selected:not([aria-disabled=true]):not(:disabled):not(:has(:focus-within,button[aria-expanded=true])):active{background-color:var(--sapphire-semantic-color-background-action-select-secondary-active);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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;gap:var(--sapphire-semantic-size-spacing-4xs)}.sapphire-list__item-text-label{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)}.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"] });
|
|
9666
9748
|
__decorate([
|
|
9667
9749
|
CoerceBoolean
|
|
9668
9750
|
], ListComponent.prototype, "hideLastDivider", void 0);
|
|
@@ -9676,7 +9758,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
9676
9758
|
'[class.sapphire-list--without-last-divider]': 'hideLastDivider',
|
|
9677
9759
|
'[class.sapphire-list--negative-margin-self]': 'hasNegativeSideMargin',
|
|
9678
9760
|
'[attr.role]': `!isListElement ? "list" : undefined`,
|
|
9679
|
-
}, 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__item>.sapphire-list__item--selected{background:var(--sapphire-semantic-color-background-action-select-secondary-default)}.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(:focus-within)):hover{background:var(--sapphire-semantic-color-background-action-tertiary-hover)}.sapphire-list__item--selected.is-hover:not(.is-active):not(:has(.is-hover)),.sapphire-list__item--selected:not(.js-hover):not([aria-disabled=true]):not(:disabled):not(:active):not(:has(:focus-within)):hover{background:var(--sapphire-semantic-color-background-action-select-secondary-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(:focus-within,button[aria-expanded=true])):active{background-color:var(--sapphire-semantic-color-background-action-secondary-hover)}.sapphire-list__item--selected:not(.is-disabled).is-active:not(:has(.is-active)),.sapphire-list__item--selected:not([aria-disabled=true]):not(:disabled):not(:has(:focus-within,button[aria-expanded=true])):active{background-color:var(--sapphire-semantic-color-background-action-select-secondary-active)}.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;gap:var(--sapphire-semantic-size-spacing-4xs)}.sapphire-list__item-text-label{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)}.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"] }]
|
|
9761
|
+
}, 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__item>.sapphire-list__item--selected{background:var(--sapphire-semantic-color-background-action-select-secondary-default);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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(:focus-within)):hover{background:var(--sapphire-semantic-color-background-action-tertiary-hover);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.sapphire-list__item--selected.is-hover:not(.is-active):not(:has(.is-hover)),.sapphire-list__item--selected:not(.js-hover):not([aria-disabled=true]):not(:disabled):not(:active):not(:has(:focus-within)):hover{background:var(--sapphire-semantic-color-background-action-select-secondary-hover);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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(:focus-within,button[aria-expanded=true])):active{background-color:var(--sapphire-semantic-color-background-action-secondary-hover);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.sapphire-list__item--selected:not(.is-disabled).is-active:not(:has(.is-active)),.sapphire-list__item--selected:not([aria-disabled=true]):not(:disabled):not(:has(:focus-within,button[aria-expanded=true])):active{background-color:var(--sapphire-semantic-color-background-action-select-secondary-active);-webkit-backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur);backdrop-filter:var(--sapphire-semantic-backdrop-filter-blur)}.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;gap:var(--sapphire-semantic-size-spacing-4xs)}.sapphire-list__item-text-label{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)}.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"] }]
|
|
9680
9762
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { hideLastDivider: [{
|
|
9681
9763
|
type: Input
|
|
9682
9764
|
}], hasNegativeSideMargin: [{
|
|
@@ -10019,5 +10101,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
10019
10101
|
* Generated bundle index. Do not edit.
|
|
10020
10102
|
*/
|
|
10021
10103
|
|
|
10022
|
-
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, ListItemTextLabelComponent, ListItemTextPrimaryComponent, ListItemTextSecondaryComponent, ListboxChild, ListboxComponent, ListboxInputDirective, MenuComponent, MenuIconComponent, MenuItemComponent, MenuPrimaryTextComponent, MenuSecondaryTextComponent, MenuSectionComponent, MenuTriggerDirective, ModalBackButtonDirective, ModalBodyComponent, ModalCloseButtonDirective, ModalFooterComponent, ModalFooterDirective, ModalHeaderComponent, ModalHeaderDirective, ModalHeaderExtraDirective, ModalHeaderProgressDirective, 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, TruncatedWithTooltipContentElementDirective, TruncatedWithTooltipDirective, TruncatedWithTooltipDirectiveInternal, UseComponentStyles, UseComponentStylesOnHost, ViewEncapsulationProvider };
|
|
10104
|
+
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, FieldsetComponent, FocusedDirective, HeadingComponent, HelpButtonComponent, HelpButtonContentDirective, HelpButtonFooterDirective, HelpButtonHeaderDirective, ICON_SIZE_PROVIDER, IconButtonComponent, IconComponent, IconRegistry, LabelComponent, LinkComponent, ListComponent, ListItemComponent, ListItemContentComponent, ListItemTextComponent, ListItemTextLabelComponent, ListItemTextPrimaryComponent, ListItemTextSecondaryComponent, ListboxChild, ListboxComponent, ListboxInputDirective, MenuComponent, MenuIconComponent, MenuItemComponent, MenuPrimaryTextComponent, MenuSecondaryTextComponent, MenuSectionComponent, MenuTriggerDirective, ModalBackButtonDirective, ModalBodyComponent, ModalCloseButtonDirective, ModalFooterComponent, ModalFooterDirective, ModalHeaderComponent, ModalHeaderDirective, ModalHeaderExtraDirective, ModalHeaderProgressDirective, 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, TruncatedWithTooltipContentElementDirective, TruncatedWithTooltipDirective, TruncatedWithTooltipDirectiveInternal, UseComponentStyles, UseComponentStylesOnHost, ViewEncapsulationProvider };
|
|
10023
10105
|
//# sourceMappingURL=danske-sapphire-angular.mjs.map
|