@danske/sapphire-angular 3.9.0 → 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/src/field.component.mjs +7 -4
- 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/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 +82 -53
- package/fesm2015/danske-sapphire-angular.mjs.map +1 -1
- package/fesm2020/danske-sapphire-angular.mjs +74 -53
- package/fesm2020/danske-sapphire-angular.mjs.map +1 -1
- package/package.json +3 -3
|
@@ -15,7 +15,7 @@ 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
20
|
import * as i1 from '@angular/cdk/menu';
|
|
21
21
|
import { CdkMenu, CdkMenuItem, CdkMenuTrigger, CdkMenuGroup, CdkMenuModule } from '@angular/cdk/menu';
|
|
@@ -723,10 +723,10 @@ const AutoId = ({ prefix = 'generated' } = {}) => {
|
|
|
723
723
|
class ThemeDefault {
|
|
724
724
|
}
|
|
725
725
|
ThemeDefault.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ThemeDefault, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
726
|
-
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"] });
|
|
726
|
+
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"] });
|
|
727
727
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ThemeDefault, decorators: [{
|
|
728
728
|
type: Component,
|
|
729
|
-
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"] }]
|
|
729
|
+
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"] }]
|
|
730
730
|
}] });
|
|
731
731
|
/**
|
|
732
732
|
* Sapphire default theme
|
|
@@ -734,10 +734,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
734
734
|
class ThemeDefaultDark {
|
|
735
735
|
}
|
|
736
736
|
ThemeDefaultDark.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ThemeDefaultDark, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
737
|
-
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"] });
|
|
737
|
+
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"] });
|
|
738
738
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ThemeDefaultDark, decorators: [{
|
|
739
739
|
type: Component,
|
|
740
|
-
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"] }]
|
|
740
|
+
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"] }]
|
|
741
741
|
}] });
|
|
742
742
|
|
|
743
743
|
/**
|
|
@@ -1091,7 +1091,7 @@ class TruncatedWithTooltipContentElementDirective {
|
|
|
1091
1091
|
}
|
|
1092
1092
|
}
|
|
1093
1093
|
}
|
|
1094
|
-
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 });
|
|
1094
|
+
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 });
|
|
1095
1095
|
TruncatedWithTooltipContentElementDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: TruncatedWithTooltipContentElementDirective, isStandalone: true, selector: "[spTruncatedWithTooltipContent]", ngImport: i0 });
|
|
1096
1096
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TruncatedWithTooltipContentElementDirective, decorators: [{
|
|
1097
1097
|
type: Directive,
|
|
@@ -1104,6 +1104,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
1104
1104
|
type: Optional
|
|
1105
1105
|
}, {
|
|
1106
1106
|
type: SkipSelf
|
|
1107
|
+
}, {
|
|
1108
|
+
type: Inject,
|
|
1109
|
+
args: [forwardRef(() => TruncatedWithTooltipDirective)]
|
|
1107
1110
|
}] }];
|
|
1108
1111
|
} });
|
|
1109
1112
|
/**
|
|
@@ -1243,11 +1246,16 @@ class ButtonIconSizeProvider {
|
|
|
1243
1246
|
return this.button.size === 'lg' ? 'md' : 'sm';
|
|
1244
1247
|
}
|
|
1245
1248
|
}
|
|
1246
|
-
ButtonIconSizeProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ButtonIconSizeProvider, deps: [{ token: ButtonComponent }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1249
|
+
ButtonIconSizeProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ButtonIconSizeProvider, deps: [{ token: forwardRef(() => ButtonComponent) }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1247
1250
|
ButtonIconSizeProvider.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ButtonIconSizeProvider });
|
|
1248
1251
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ButtonIconSizeProvider, decorators: [{
|
|
1249
1252
|
type: Injectable
|
|
1250
|
-
}], ctorParameters: function () {
|
|
1253
|
+
}], ctorParameters: function () {
|
|
1254
|
+
return [{ type: ButtonComponent, decorators: [{
|
|
1255
|
+
type: Inject,
|
|
1256
|
+
args: [forwardRef(() => ButtonComponent)]
|
|
1257
|
+
}] }];
|
|
1258
|
+
} });
|
|
1251
1259
|
class ButtonComponent {
|
|
1252
1260
|
get variantClass() {
|
|
1253
1261
|
return `sapphire-button--${this.variant}`;
|
|
@@ -1291,7 +1299,7 @@ ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
|
|
|
1291
1299
|
provide: ICON_SIZE_PROVIDER,
|
|
1292
1300
|
useClass: ButtonIconSizeProvider,
|
|
1293
1301
|
},
|
|
1294
|
-
], 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 });
|
|
1302
|
+
], 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 });
|
|
1295
1303
|
__decorate([
|
|
1296
1304
|
CoerceBoolean
|
|
1297
1305
|
], ButtonComponent.prototype, "disabled", void 0);
|
|
@@ -1314,7 +1322,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
1314
1322
|
provide: ICON_SIZE_PROVIDER,
|
|
1315
1323
|
useClass: ButtonIconSizeProvider,
|
|
1316
1324
|
},
|
|
1317
|
-
], 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"] }]
|
|
1325
|
+
], 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"] }]
|
|
1318
1326
|
}], ctorParameters: function () {
|
|
1319
1327
|
return [{ type: i0.ElementRef }, { type: TooltipDirective, decorators: [{
|
|
1320
1328
|
type: Optional
|
|
@@ -1358,11 +1366,16 @@ class IconButtonIconSizeProvider {
|
|
|
1358
1366
|
return this.button.size === 'xs' ? 'sm' : this.button.size;
|
|
1359
1367
|
}
|
|
1360
1368
|
}
|
|
1361
|
-
IconButtonIconSizeProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: IconButtonIconSizeProvider, deps: [{ token: IconButtonComponent }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1369
|
+
IconButtonIconSizeProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: IconButtonIconSizeProvider, deps: [{ token: forwardRef(() => IconButtonComponent) }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1362
1370
|
IconButtonIconSizeProvider.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: IconButtonIconSizeProvider });
|
|
1363
1371
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: IconButtonIconSizeProvider, decorators: [{
|
|
1364
1372
|
type: Injectable
|
|
1365
|
-
}], ctorParameters: function () {
|
|
1373
|
+
}], ctorParameters: function () {
|
|
1374
|
+
return [{ type: IconButtonComponent, decorators: [{
|
|
1375
|
+
type: Inject,
|
|
1376
|
+
args: [forwardRef(() => IconButtonComponent)]
|
|
1377
|
+
}] }];
|
|
1378
|
+
} });
|
|
1366
1379
|
class IconButtonComponent {
|
|
1367
1380
|
get variantClass() {
|
|
1368
1381
|
return `sapphire-icon-button--${this.variant}`;
|
|
@@ -1390,7 +1403,7 @@ IconButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
|
|
|
1390
1403
|
provide: ICON_SIZE_PROVIDER,
|
|
1391
1404
|
useClass: IconButtonIconSizeProvider,
|
|
1392
1405
|
},
|
|
1393
|
-
], 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 });
|
|
1406
|
+
], 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 });
|
|
1394
1407
|
__decorate([
|
|
1395
1408
|
CoerceBoolean
|
|
1396
1409
|
], IconButtonComponent.prototype, "disabled", void 0);
|
|
@@ -1408,7 +1421,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
1408
1421
|
'[class.sapphire-icon-button--lg]': 'size === "lg"',
|
|
1409
1422
|
'[class.sapphire-icon-button--sm]': 'size === "sm"',
|
|
1410
1423
|
'[class.sapphire-icon-button--xs]': 'size === "xs"',
|
|
1411
|
-
}, 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"] }]
|
|
1424
|
+
}, 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"] }]
|
|
1412
1425
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { variant: [{
|
|
1413
1426
|
type: Input
|
|
1414
1427
|
}], size: [{
|
|
@@ -1433,11 +1446,16 @@ class ToggleButtonIconSizeProvider {
|
|
|
1433
1446
|
return this.button.size === 'lg' ? 'md' : 'sm';
|
|
1434
1447
|
}
|
|
1435
1448
|
}
|
|
1436
|
-
ToggleButtonIconSizeProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ToggleButtonIconSizeProvider, deps: [{ token: ToggleButtonComponent }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1449
|
+
ToggleButtonIconSizeProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ToggleButtonIconSizeProvider, deps: [{ token: forwardRef(() => ToggleButtonComponent) }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1437
1450
|
ToggleButtonIconSizeProvider.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ToggleButtonIconSizeProvider });
|
|
1438
1451
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ToggleButtonIconSizeProvider, decorators: [{
|
|
1439
1452
|
type: Injectable
|
|
1440
|
-
}], ctorParameters: function () {
|
|
1453
|
+
}], ctorParameters: function () {
|
|
1454
|
+
return [{ type: ToggleButtonComponent, decorators: [{
|
|
1455
|
+
type: Inject,
|
|
1456
|
+
args: [forwardRef(() => ToggleButtonComponent)]
|
|
1457
|
+
}] }];
|
|
1458
|
+
} });
|
|
1441
1459
|
/**
|
|
1442
1460
|
* A button with a toggleable `isSelected` state. By default, the selection is
|
|
1443
1461
|
* toggled when the button is pressed, allowing user to switch between two
|
|
@@ -1504,7 +1522,7 @@ ToggleButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
|
|
|
1504
1522
|
provide: ICON_SIZE_PROVIDER,
|
|
1505
1523
|
useClass: ToggleButtonIconSizeProvider,
|
|
1506
1524
|
},
|
|
1507
|
-
], 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 });
|
|
1525
|
+
], 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 });
|
|
1508
1526
|
__decorate([
|
|
1509
1527
|
CoerceBoolean
|
|
1510
1528
|
], ToggleButtonComponent.prototype, "selected", void 0);
|
|
@@ -1534,7 +1552,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
1534
1552
|
'[class.sapphire-button--sm]': 'size === "sm"',
|
|
1535
1553
|
'[class.sapphire-button--with-left-icon]': 'buttonIcon && iconAlign === "left"',
|
|
1536
1554
|
'[class.sapphire-button--with-right-icon]': 'buttonIcon && iconAlign === "right"',
|
|
1537
|
-
}, 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"] }]
|
|
1555
|
+
}, 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"] }]
|
|
1538
1556
|
}], ctorParameters: function () { return []; }, propDecorators: { size: [{
|
|
1539
1557
|
type: Input
|
|
1540
1558
|
}], selected: [{
|
|
@@ -2148,7 +2166,7 @@ class RadioBase extends _RadioMixinBase {
|
|
|
2148
2166
|
}
|
|
2149
2167
|
}
|
|
2150
2168
|
}
|
|
2151
|
-
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:
|
|
2169
|
+
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 });
|
|
2152
2170
|
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 });
|
|
2153
2171
|
__decorate([
|
|
2154
2172
|
AutoId()
|
|
@@ -2159,10 +2177,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
2159
2177
|
}], ctorParameters: function () {
|
|
2160
2178
|
return [{ type: RadioGroupBase, decorators: [{
|
|
2161
2179
|
type: Optional
|
|
2180
|
+
}, {
|
|
2181
|
+
type: Inject,
|
|
2182
|
+
args: [forwardRef(() => RadioGroupBase)]
|
|
2162
2183
|
}] }, { type: i0.ElementRef }, { type: undefined, decorators: [{
|
|
2163
2184
|
type: Attribute,
|
|
2164
2185
|
args: ['tabindex']
|
|
2165
|
-
}] }, { type: i3.FocusMonitor }, { type:
|
|
2186
|
+
}] }, { type: i3.FocusMonitor }, { type: i2$2.UniqueSelectionDispatcher }];
|
|
2166
2187
|
}, propDecorators: { ariaLabel: [{
|
|
2167
2188
|
type: Input,
|
|
2168
2189
|
args: ['aria-label']
|
|
@@ -2340,7 +2361,7 @@ class RadioGroupBase {
|
|
|
2340
2361
|
}
|
|
2341
2362
|
}
|
|
2342
2363
|
}
|
|
2343
|
-
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 });
|
|
2364
|
+
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 });
|
|
2344
2365
|
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 });
|
|
2345
2366
|
__decorate([
|
|
2346
2367
|
AutoId()
|
|
@@ -2353,6 +2374,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
2353
2374
|
}], ctorParameters: function () {
|
|
2354
2375
|
return [{ type: i0.ChangeDetectorRef }, { type: FieldComponent, decorators: [{
|
|
2355
2376
|
type: Optional
|
|
2377
|
+
}, {
|
|
2378
|
+
type: Inject,
|
|
2379
|
+
args: [forwardRef(() => FieldComponent)]
|
|
2356
2380
|
}] }];
|
|
2357
2381
|
}, propDecorators: { uniqueId: [], orientation: [{
|
|
2358
2382
|
type: Input
|
|
@@ -2433,11 +2457,16 @@ class FieldIconSizeProvider {
|
|
|
2433
2457
|
return this.field.size === 'lg' ? 'md' : 'sm';
|
|
2434
2458
|
}
|
|
2435
2459
|
}
|
|
2436
|
-
FieldIconSizeProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: FieldIconSizeProvider, deps: [{ token: FieldComponent }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2460
|
+
FieldIconSizeProvider.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: FieldIconSizeProvider, deps: [{ token: forwardRef(() => FieldComponent) }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2437
2461
|
FieldIconSizeProvider.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: FieldIconSizeProvider });
|
|
2438
2462
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: FieldIconSizeProvider, decorators: [{
|
|
2439
2463
|
type: Injectable
|
|
2440
|
-
}], ctorParameters: function () {
|
|
2464
|
+
}], ctorParameters: function () {
|
|
2465
|
+
return [{ type: FieldComponent, decorators: [{
|
|
2466
|
+
type: Inject,
|
|
2467
|
+
args: [forwardRef(() => FieldComponent)]
|
|
2468
|
+
}] }];
|
|
2469
|
+
} });
|
|
2441
2470
|
const fieldHostBinding = {
|
|
2442
2471
|
class: 'sapphire-field',
|
|
2443
2472
|
'[class.sapphire-field--label-placement-side]': 'labelPlacement === "side"',
|
|
@@ -3128,7 +3157,7 @@ MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
|
|
|
3128
3157
|
provide: ICON_SIZE_PROVIDER,
|
|
3129
3158
|
useValue: { size: 'sm' },
|
|
3130
3159
|
},
|
|
3131
|
-
], 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)}.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"] });
|
|
3160
|
+
], 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"] });
|
|
3132
3161
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: MenuComponent, decorators: [{
|
|
3133
3162
|
type: Component,
|
|
3134
3163
|
args: [{ selector: 'sp-menu', hostDirectives: [
|
|
@@ -3146,7 +3175,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
3146
3175
|
provide: ICON_SIZE_PROVIDER,
|
|
3147
3176
|
useValue: { size: 'sm' },
|
|
3148
3177
|
},
|
|
3149
|
-
], 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"] }]
|
|
3178
|
+
], 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"] }]
|
|
3150
3179
|
}] });
|
|
3151
3180
|
|
|
3152
3181
|
class MenuItemComponent {
|
|
@@ -5034,7 +5063,7 @@ ListboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
|
|
|
5034
5063
|
useValue: { size: 'sm' },
|
|
5035
5064
|
},
|
|
5036
5065
|
ViewEncapsulationProvider,
|
|
5037
|
-
], 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$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"] }] });
|
|
5066
|
+
], 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"] }] });
|
|
5038
5067
|
__decorate([
|
|
5039
5068
|
CoerceBoolean
|
|
5040
5069
|
], ListboxComponent.prototype, "disabled", void 0);
|
|
@@ -5060,7 +5089,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
5060
5089
|
], host: {
|
|
5061
5090
|
'[attr.aria-label]': 'null',
|
|
5062
5091
|
'[attr.aria-labelledby]': 'null',
|
|
5063
|
-
}, 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"] }]
|
|
5092
|
+
}, 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"] }]
|
|
5064
5093
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: TranslateService }]; }, propDecorators: { selectedValues: [{
|
|
5065
5094
|
type: Input
|
|
5066
5095
|
}], selectedValuesChange: [{
|
|
@@ -6062,7 +6091,7 @@ SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
|
|
|
6062
6091
|
provide: FieldControl,
|
|
6063
6092
|
useExisting: forwardRef(() => SelectComponent),
|
|
6064
6093
|
},
|
|
6065
|
-
], 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" }] });
|
|
6094
|
+
], 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" }] });
|
|
6066
6095
|
__decorate([
|
|
6067
6096
|
AutoId()
|
|
6068
6097
|
], SelectComponent.prototype, "_valueContainerId", void 0);
|
|
@@ -6093,7 +6122,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
6093
6122
|
'[attr.aria-label]': 'null',
|
|
6094
6123
|
'[attr.aria-labelledby]': 'null',
|
|
6095
6124
|
'[attr.placeholder]': 'null',
|
|
6096
|
-
}, 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"] }]
|
|
6125
|
+
}, 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"] }]
|
|
6097
6126
|
}], ctorParameters: function () {
|
|
6098
6127
|
return [{ type: SelectValueHolder }, { type: IconRegistry }, { type: i3.FocusMonitor }, { type: i3.InputModalityDetector }, { type: FieldComponent, decorators: [{
|
|
6099
6128
|
type: Optional
|
|
@@ -6426,7 +6455,7 @@ class SegmentedTabComponent {
|
|
|
6426
6455
|
}
|
|
6427
6456
|
}
|
|
6428
6457
|
SegmentedTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SegmentedTabComponent, deps: [{ token: forwardRef(() => SegmentedTabsComponent) }], target: i0.ɵɵFactoryTarget.Component });
|
|
6429
|
-
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]" }] });
|
|
6458
|
+
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]" }] });
|
|
6430
6459
|
__decorate([
|
|
6431
6460
|
AutoId()
|
|
6432
6461
|
], SegmentedTabComponent.prototype, "id", void 0);
|
|
@@ -6436,7 +6465,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
6436
6465
|
// Angular specific styles that are needed due to extra dom elements added by angular
|
|
6437
6466
|
'[style.flex]': "'1 1 auto'",
|
|
6438
6467
|
'[style.display]': "'inline-flex'",
|
|
6439
|
-
}, 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"] }]
|
|
6468
|
+
}, 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"] }]
|
|
6440
6469
|
}], ctorParameters: function () {
|
|
6441
6470
|
return [{ type: SegmentedTabsComponent, decorators: [{
|
|
6442
6471
|
type: Inject,
|
|
@@ -6656,7 +6685,7 @@ class SegmentedTabsComponent {
|
|
|
6656
6685
|
}
|
|
6657
6686
|
}
|
|
6658
6687
|
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 });
|
|
6659
|
-
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"] }] });
|
|
6688
|
+
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"] }] });
|
|
6660
6689
|
__decorate([
|
|
6661
6690
|
CoerceBoolean
|
|
6662
6691
|
], SegmentedTabsComponent.prototype, "disabled", void 0);
|
|
@@ -6664,7 +6693,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
6664
6693
|
type: Component,
|
|
6665
6694
|
args: [{ selector: 'sp-segmented-tabs', providers: [ViewEncapsulationProvider], exportAs: 'spSegmentedTabs', host: {
|
|
6666
6695
|
'[attr.align]': 'null',
|
|
6667
|
-
}, 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"] }]
|
|
6696
|
+
}, 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"] }]
|
|
6668
6697
|
}], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { segmentedControl: [{
|
|
6669
6698
|
type: ViewChild,
|
|
6670
6699
|
args: ['segmentedControl']
|
|
@@ -6813,7 +6842,7 @@ AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
|
|
|
6813
6842
|
provide: ICON_SIZE_PROVIDER,
|
|
6814
6843
|
useExisting: forwardRef(() => AvatarComponent),
|
|
6815
6844
|
},
|
|
6816
|
-
], 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-
|
|
6845
|
+
], 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"] });
|
|
6817
6846
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
6818
6847
|
type: Component,
|
|
6819
6848
|
args: [{ standalone: true, selector: 'sp-avatar', template: '<ng-content></ng-content>', hostDirectives: [UseComponentStylesOnHost], providers: [
|
|
@@ -6825,7 +6854,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
6825
6854
|
class: 'sapphire-avatar',
|
|
6826
6855
|
'[class.sapphire-avatar--lg]': 'size === "lg"',
|
|
6827
6856
|
'[class.sapphire-avatar--sm]': 'size === "sm"',
|
|
6828
|
-
}, 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-
|
|
6857
|
+
}, 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"] }]
|
|
6829
6858
|
}], ctorParameters: function () { return []; }, propDecorators: { size: [{
|
|
6830
6859
|
type: Input
|
|
6831
6860
|
}], color: [{
|
|
@@ -7370,7 +7399,7 @@ TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version
|
|
|
7370
7399
|
<ng-container>
|
|
7371
7400
|
<ng-content select="table"></ng-content>
|
|
7372
7401
|
</ng-container>
|
|
7373
|
-
`, 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"] });
|
|
7402
|
+
`, 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"] });
|
|
7374
7403
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: TableComponent, decorators: [{
|
|
7375
7404
|
type: Component,
|
|
7376
7405
|
args: [{ selector: 'sp-table', template: `
|
|
@@ -7383,7 +7412,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
7383
7412
|
'[style.max-height]': 'maxHeight',
|
|
7384
7413
|
'[class.sapphire-table--overflow]': 'height || maxHeight',
|
|
7385
7414
|
'[class.sapphire-table--interactive]': 'isInteractive',
|
|
7386
|
-
}, 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"] }]
|
|
7415
|
+
}, 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"] }]
|
|
7387
7416
|
}], ctorParameters: function () { return []; }, propDecorators: { rowAction: [{
|
|
7388
7417
|
type: Output
|
|
7389
7418
|
}], stickyHeader: [{
|
|
@@ -7776,7 +7805,7 @@ SwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
|
|
|
7776
7805
|
useExisting: forwardRef(() => SwitchComponent),
|
|
7777
7806
|
multi: true,
|
|
7778
7807
|
},
|
|
7779
|
-
], 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{
|
|
7808
|
+
], 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 });
|
|
7780
7809
|
__decorate([
|
|
7781
7810
|
AutoId()
|
|
7782
7811
|
], SwitchComponent.prototype, "id", void 0);
|
|
@@ -7798,7 +7827,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
7798
7827
|
useExisting: forwardRef(() => SwitchComponent),
|
|
7799
7828
|
multi: true,
|
|
7800
7829
|
},
|
|
7801
|
-
], 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{
|
|
7830
|
+
], 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"] }]
|
|
7802
7831
|
}], ctorParameters: function () {
|
|
7803
7832
|
return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
7804
7833
|
type: Attribute,
|
|
@@ -7970,7 +7999,7 @@ SegmentedRadioGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
|
|
|
7970
7999
|
provide: RadioGroupBase,
|
|
7971
8000
|
useExisting: forwardRef(() => SegmentedRadioGroupComponent),
|
|
7972
8001
|
},
|
|
7973
|
-
], 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 });
|
|
8002
|
+
], 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 });
|
|
7974
8003
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SegmentedRadioGroupComponent, decorators: [{
|
|
7975
8004
|
type: Component,
|
|
7976
8005
|
args: [{ selector: 'sp-segmented-radio-group', changeDetection: ChangeDetectionStrategy.Default, providers: [
|
|
@@ -7988,7 +8017,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
7988
8017
|
provide: RadioGroupBase,
|
|
7989
8018
|
useExisting: forwardRef(() => SegmentedRadioGroupComponent),
|
|
7990
8019
|
},
|
|
7991
|
-
], 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"] }]
|
|
8020
|
+
], 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"] }]
|
|
7992
8021
|
}], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { segmentedControl: [{
|
|
7993
8022
|
type: ViewChild,
|
|
7994
8023
|
args: ['segmentedControl']
|
|
@@ -8676,12 +8705,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
8676
8705
|
class ModalLayoutComponent {
|
|
8677
8706
|
}
|
|
8678
8707
|
ModalLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8679
|
-
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
|
|
8708
|
+
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"] });
|
|
8680
8709
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalLayoutComponent, decorators: [{
|
|
8681
8710
|
type: Component,
|
|
8682
8711
|
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: {
|
|
8683
8712
|
class: 'sapphire-modal-layout',
|
|
8684
|
-
}, 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
|
|
8713
|
+
}, 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"] }]
|
|
8685
8714
|
}] });
|
|
8686
8715
|
|
|
8687
8716
|
/**
|
|
@@ -8717,10 +8746,10 @@ class ConfirmationDialogComponent {
|
|
|
8717
8746
|
}
|
|
8718
8747
|
}
|
|
8719
8748
|
ConfirmationDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8720
|
-
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"] }] });
|
|
8749
|
+
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"] }] });
|
|
8721
8750
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
|
|
8722
8751
|
type: Component,
|
|
8723
|
-
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" }]
|
|
8752
|
+
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" }]
|
|
8724
8753
|
}], propDecorators: { heading: [{
|
|
8725
8754
|
type: Input
|
|
8726
8755
|
}], primaryActionLabel: [{
|
|
@@ -8770,10 +8799,10 @@ class DangerDialogComponent {
|
|
|
8770
8799
|
}
|
|
8771
8800
|
}
|
|
8772
8801
|
DangerDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DangerDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8773
|
-
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"] }] });
|
|
8802
|
+
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"] }] });
|
|
8774
8803
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DangerDialogComponent, decorators: [{
|
|
8775
8804
|
type: Component,
|
|
8776
|
-
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" }]
|
|
8805
|
+
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" }]
|
|
8777
8806
|
}], propDecorators: { heading: [{
|
|
8778
8807
|
type: Input
|
|
8779
8808
|
}], primaryActionLabel: [{
|
|
@@ -8903,14 +8932,14 @@ class PanelComponent extends ModalBaseComponent {
|
|
|
8903
8932
|
}
|
|
8904
8933
|
}
|
|
8905
8934
|
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 });
|
|
8906
|
-
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
|
|
8935
|
+
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"] });
|
|
8907
8936
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PanelComponent, decorators: [{
|
|
8908
8937
|
type: Component,
|
|
8909
8938
|
args: [{ selector: 'sp-panel', template: '<ng-content></ng-content>', host: {
|
|
8910
8939
|
class: 'sapphire-panel',
|
|
8911
8940
|
'[class.sapphire-panel--sm]': 'size === "sm"',
|
|
8912
8941
|
'[class.sapphire-panel--visible]': '!dialogRef.closing',
|
|
8913
|
-
}, 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
|
|
8942
|
+
}, 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"] }]
|
|
8914
8943
|
}], ctorParameters: function () { return [{ type: i1$4.DialogRef }]; }, propDecorators: { size: [{
|
|
8915
8944
|
type: Input
|
|
8916
8945
|
}] } });
|
|
@@ -9765,13 +9794,13 @@ class BadgeComponent {
|
|
|
9765
9794
|
}
|
|
9766
9795
|
}
|
|
9767
9796
|
BadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9768
|
-
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"] });
|
|
9797
|
+
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"] });
|
|
9769
9798
|
__decorate([
|
|
9770
9799
|
AutoId()
|
|
9771
9800
|
], BadgeComponent.prototype, "id", void 0);
|
|
9772
9801
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: BadgeComponent, decorators: [{
|
|
9773
9802
|
type: Component,
|
|
9774
|
-
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"] }]
|
|
9803
|
+
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"] }]
|
|
9775
9804
|
}], ctorParameters: function () { return []; }, propDecorators: { role: [{
|
|
9776
9805
|
type: HostBinding,
|
|
9777
9806
|
args: ['role']
|
|
@@ -9874,7 +9903,7 @@ class ListComponent {
|
|
|
9874
9903
|
}
|
|
9875
9904
|
}
|
|
9876
9905
|
ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ListComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
9877
|
-
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"] });
|
|
9906
|
+
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"] });
|
|
9878
9907
|
__decorate([
|
|
9879
9908
|
CoerceBoolean
|
|
9880
9909
|
], ListComponent.prototype, "hideLastDivider", void 0);
|
|
@@ -9888,7 +9917,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
|
|
|
9888
9917
|
'[class.sapphire-list--without-last-divider]': 'hideLastDivider',
|
|
9889
9918
|
'[class.sapphire-list--negative-margin-self]': 'hasNegativeSideMargin',
|
|
9890
9919
|
'[attr.role]': `!isListElement ? "list" : undefined`,
|
|
9891
|
-
}, 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"] }]
|
|
9920
|
+
}, 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"] }]
|
|
9892
9921
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { hideLastDivider: [{
|
|
9893
9922
|
type: Input
|
|
9894
9923
|
}], hasNegativeSideMargin: [{
|