@danske/sapphire-angular 2.1.0 → 2.3.0

package/fesm2020/danske-sapphire-angular.mjs

@@ -25,8 +25,9 @@ import { Subject, merge, combineLatest, empty, fromEvent } from 'rxjs';
 import { takeUntil, startWith, map } from 'rxjs/operators';
 import * as i1$4 from '@angular/cdk/listbox';
 import { CdkListbox, CdkOption, CdkListboxModule } from '@angular/cdk/listbox';
+import * as i1$5 from '@angular/cdk/scrolling';
 export { tokens } from '@danske/sapphire-css/themes';
-import * as i1$5 from '@angular/cdk/dialog';
+import * as i1$6 from '@angular/cdk/dialog';
 import { CdkDialogContainer, DialogModule } from '@angular/cdk/dialog';
 
 /**
@@ -1172,7 +1173,11 @@ const _RadioMixinBase = mixinTabIndex(mixinDisabled(class {
         this._elementRef = _elementRef;
     }
 }));
-class RadioComponent extends _RadioMixinBase {
+/**
+ * @Directive decorator is just to be able to have a constructor with DI.
+ * This class is being extended by other components.
+ **/
+class RadioBase extends _RadioMixinBase {
     _getAriaChecked() {
         return this.checked ? 'true' : 'false';
     }
@@ -1245,6 +1250,7 @@ class RadioComponent extends _RadioMixinBase {
     constructor(radioGroup, elementRef, tabIndex, _focusMonitor, _radioDispatcher) {
         super(elementRef);
         this.radioGroup = radioGroup;
+        this.elementRef = elementRef;
         this._focusMonitor = _focusMonitor;
         this._radioDispatcher = _radioDispatcher;
         /**
@@ -1370,21 +1376,15 @@ class RadioComponent extends _RadioMixinBase {
         }
     }
 }
-RadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: RadioComponent, deps: [{ token: RadioGroupComponent, optional: true }, { token: i0.ElementRef }, { token: 'tabindex', attribute: true }, { token: i2$2.FocusMonitor }, { token: i3.UniqueSelectionDispatcher }], target: i0.ɵɵFactoryTarget.Component });
-RadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: RadioComponent, selector: "sp-radio", inputs: { tabIndex: "tabIndex", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], name: "name", autofocus: "autofocus", id: "id", value: "value", checked: "checked", disabled: "disabled", readonly: "readonly", required: "required" }, outputs: { change: "change" }, host: { properties: { "attr.id": "id", "attr.tabindex": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null", "id": "this.id" } }, viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: ThemeCheckDirective }], ngImport: i0, template: "<label\n  [for]=\"inputId\"\n  class=\"sapphire-radio\"\n  [class.sapphire-radio--no-disabled]=\"radioGroup?.disabled\"\n  [class.sapphire-radio--checked]=\"checked\"\n  [class.sapphire-radio--md]=\"radioGroup?._field?.size === 'md'\"\n>\n  <input\n    #input\n    class=\"sapphire-radio__input\"\n    type=\"radio\"\n    [id]=\"inputId\"\n    [attr.aria-checked]=\"_getAriaChecked()\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby\"\n    [attr.aria-describedby]=\"ariaDescribedby\"\n    [attr.name]=\"name\"\n    [attr.value]=\"value\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    (change)=\"_onInputInteraction($event)\"\n    [attr.autofocus]=\"autofocus ? true : null\"\n  />\n  <span class=\"sapphire-radio__box\"></span>\n  <span class=\"sapphire-radio__label\">\n    <ng-content></ng-content>\n  </span>\n</label>\n", styles: [".sapphire-radio{display:inline-flex;font-family:var(--sapphire-semantic-font-name-default);max-width:100%;position:relative}.sapphire-radio__input{margin:0;overflow:visible;position:absolute;top:0;left:0;height:100%;width:100%;opacity:.0001;z-index:1;cursor:pointer}.sapphire-radio__label{margin-left:var(--sapphire-semantic-size-spacing-20);font-size:var(--sapphire-semantic-size-font-control-default);line-height:var(--sapphire-semantic-size-height-control-xs);color:var(--sapphire-semantic-color-content-default-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-radio--md .sapphire-radio__label{font-size:var(--sapphire-semantic-size-font-control-md);line-height:var(--sapphire-semantic-size-height-control-2xs)}.sapphire-radio__box{box-sizing:border-box;background-color:var(--sapphire-semantic-color-background-control-default);width:var(--sapphire-semantic-size-height-box-lg);height:var(--sapphire-semantic-size-height-box-lg);flex-shrink:0;border-radius:50%;border:var(--sapphire-semantic-size-border-md) solid var(--sapphire-semantic-color-border-control-default);position:relative;margin-top:var(--sapphire-semantic-size-spacing-5);transition-property:background-color,border-color,border-width;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:ease-in-out}.sapphire-radio--md .sapphire-radio__box{width:var(--sapphire-semantic-size-height-box-md);height:var(--sapphire-semantic-size-height-box-md)}.sapphire-radio--checked .sapphire-radio__box{border-color:var(--sapphire-semantic-color-background-action-primary-default);border-width:calc((var(--sapphire-semantic-size-height-box-lg) - var(--sapphire-global-size-generic-20)) / 2)}.sapphire-radio--md.sapphire-radio--checked .sapphire-radio__box{border-width:calc((var(--sapphire-semantic-size-height-box-md) - var(--sapphire-global-size-generic-15)) / 2)}.sapphire-radio--checked .sapphire-radio__box:after{display:block}.sapphire-radio:not(:active):not(.is-active):not(.sapphire-radio--checked).is-hover .sapphire-radio__box,.sapphire-radio:not(:active):not(.is-active):not(.sapphire-radio--checked):not(.js-hover):hover .sapphire-radio__input:not(:disabled)~.sapphire-radio__box{border-color:var(--sapphire-semantic-color-border-control-hover)}.sapphire-radio--checked:not(:active):not(.is-active).is-hover .sapphire-radio__box,.sapphire-radio--checked:not(:active):not(.is-active):not(.js-hover):hover .sapphire-radio__input:not(:disabled)~.sapphire-radio__box{border-color:var(--sapphire-semantic-color-background-action-primary-hover)}.sapphire-radio.is-focus .sapphire-radio__input~.sapphire-radio__box,.sapphire-radio:not(.js-focus) .sapphire-radio__input:focus-visible~.sapphire-radio__box{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);outline-offset:var(--sapphire-semantic-size-focus-ring)}.sapphire-radio__input:disabled{cursor:not-allowed}.sapphire-radio:not(.sapphire-radio--no-disabled) .sapphire-radio__input:disabled~.sapphire-radio__box,.sapphire-radio:not(.sapphire-radio--no-disabled) .sapphire-radio__input:disabled~.sapphire-radio__label{opacity:var(--sapphire-semantic-opacity-disabled)}\n"], changeDetection: i0.ChangeDetectionStrategy.Default });
+RadioBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: RadioBase, deps: [{ token: RadioGroupBase, optional: true }, { token: i0.ElementRef }, { token: 'tabindex', attribute: true }, { token: i2$2.FocusMonitor }, { token: i3.UniqueSelectionDispatcher }], target: i0.ɵɵFactoryTarget.Directive });
+RadioBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: RadioBase, inputs: { ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], name: "name", autofocus: "autofocus", id: "id", value: "value", checked: "checked", disabled: "disabled", readonly: "readonly", required: "required" }, outputs: { change: "change" }, host: { properties: { "id": "this.id" } }, viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0 });
 __decorate([
     AutoId()
-], RadioComponent.prototype, "id", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: RadioComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sp-radio', changeDetection: ChangeDetectionStrategy.Default, hostDirectives: [ThemeCheckDirective], inputs: ['tabIndex'], host: {
-                        '[attr.id]': 'id',
-                        '[attr.tabindex]': 'null',
-                        '[attr.aria-label]': 'null',
-                        '[attr.aria-labelledby]': 'null',
-                        '[attr.aria-describedby]': 'null',
-                    }, template: "<label\n  [for]=\"inputId\"\n  class=\"sapphire-radio\"\n  [class.sapphire-radio--no-disabled]=\"radioGroup?.disabled\"\n  [class.sapphire-radio--checked]=\"checked\"\n  [class.sapphire-radio--md]=\"radioGroup?._field?.size === 'md'\"\n>\n  <input\n    #input\n    class=\"sapphire-radio__input\"\n    type=\"radio\"\n    [id]=\"inputId\"\n    [attr.aria-checked]=\"_getAriaChecked()\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby\"\n    [attr.aria-describedby]=\"ariaDescribedby\"\n    [attr.name]=\"name\"\n    [attr.value]=\"value\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    (change)=\"_onInputInteraction($event)\"\n    [attr.autofocus]=\"autofocus ? true : null\"\n  />\n  <span class=\"sapphire-radio__box\"></span>\n  <span class=\"sapphire-radio__label\">\n    <ng-content></ng-content>\n  </span>\n</label>\n", styles: [".sapphire-radio{display:inline-flex;font-family:var(--sapphire-semantic-font-name-default);max-width:100%;position:relative}.sapphire-radio__input{margin:0;overflow:visible;position:absolute;top:0;left:0;height:100%;width:100%;opacity:.0001;z-index:1;cursor:pointer}.sapphire-radio__label{margin-left:var(--sapphire-semantic-size-spacing-20);font-size:var(--sapphire-semantic-size-font-control-default);line-height:var(--sapphire-semantic-size-height-control-xs);color:var(--sapphire-semantic-color-content-default-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-radio--md .sapphire-radio__label{font-size:var(--sapphire-semantic-size-font-control-md);line-height:var(--sapphire-semantic-size-height-control-2xs)}.sapphire-radio__box{box-sizing:border-box;background-color:var(--sapphire-semantic-color-background-control-default);width:var(--sapphire-semantic-size-height-box-lg);height:var(--sapphire-semantic-size-height-box-lg);flex-shrink:0;border-radius:50%;border:var(--sapphire-semantic-size-border-md) solid var(--sapphire-semantic-color-border-control-default);position:relative;margin-top:var(--sapphire-semantic-size-spacing-5);transition-property:background-color,border-color,border-width;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:ease-in-out}.sapphire-radio--md .sapphire-radio__box{width:var(--sapphire-semantic-size-height-box-md);height:var(--sapphire-semantic-size-height-box-md)}.sapphire-radio--checked .sapphire-radio__box{border-color:var(--sapphire-semantic-color-background-action-primary-default);border-width:calc((var(--sapphire-semantic-size-height-box-lg) - var(--sapphire-global-size-generic-20)) / 2)}.sapphire-radio--md.sapphire-radio--checked .sapphire-radio__box{border-width:calc((var(--sapphire-semantic-size-height-box-md) - var(--sapphire-global-size-generic-15)) / 2)}.sapphire-radio--checked .sapphire-radio__box:after{display:block}.sapphire-radio:not(:active):not(.is-active):not(.sapphire-radio--checked).is-hover .sapphire-radio__box,.sapphire-radio:not(:active):not(.is-active):not(.sapphire-radio--checked):not(.js-hover):hover .sapphire-radio__input:not(:disabled)~.sapphire-radio__box{border-color:var(--sapphire-semantic-color-border-control-hover)}.sapphire-radio--checked:not(:active):not(.is-active).is-hover .sapphire-radio__box,.sapphire-radio--checked:not(:active):not(.is-active):not(.js-hover):hover .sapphire-radio__input:not(:disabled)~.sapphire-radio__box{border-color:var(--sapphire-semantic-color-background-action-primary-hover)}.sapphire-radio.is-focus .sapphire-radio__input~.sapphire-radio__box,.sapphire-radio:not(.js-focus) .sapphire-radio__input:focus-visible~.sapphire-radio__box{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);outline-offset:var(--sapphire-semantic-size-focus-ring)}.sapphire-radio__input:disabled{cursor:not-allowed}.sapphire-radio:not(.sapphire-radio--no-disabled) .sapphire-radio__input:disabled~.sapphire-radio__box,.sapphire-radio:not(.sapphire-radio--no-disabled) .sapphire-radio__input:disabled~.sapphire-radio__label{opacity:var(--sapphire-semantic-opacity-disabled)}\n"] }]
-        }], ctorParameters: function () { return [{ type: RadioGroupComponent, decorators: [{
+], RadioBase.prototype, "id", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: RadioBase, decorators: [{
+            type: Directive,
+            args: [{}]
+        }], ctorParameters: function () { return [{ type: RadioGroupBase, decorators: [{
                     type: Optional
                 }] }, { type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Attribute,
@@ -1423,7 +1423,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                 type: Output
             }] } });
 
-class RadioGroupComponent {
+class RadioComponent extends RadioBase {
+}
+RadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: RadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+RadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: RadioComponent, selector: "sp-radio", inputs: { tabIndex: "tabIndex" }, host: { properties: { "attr.id": "id", "attr.tabindex": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null" } }, usesInheritance: true, hostDirectives: [{ directive: ThemeCheckDirective }], ngImport: i0, template: "<label\n  [for]=\"inputId\"\n  class=\"sapphire-radio\"\n  [class.sapphire-radio--no-disabled]=\"radioGroup?.disabled\"\n  [class.sapphire-radio--checked]=\"checked\"\n  [class.sapphire-radio--md]=\"radioGroup?._field?.size === 'md'\"\n>\n  <input\n    #input\n    class=\"sapphire-radio__input\"\n    type=\"radio\"\n    [id]=\"inputId\"\n    [attr.aria-checked]=\"_getAriaChecked()\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby\"\n    [attr.aria-describedby]=\"ariaDescribedby\"\n    [attr.name]=\"name\"\n    [attr.value]=\"value\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    (change)=\"_onInputInteraction($event)\"\n    [attr.autofocus]=\"autofocus ? true : null\"\n  />\n  <span class=\"sapphire-radio__box\"></span>\n  <span class=\"sapphire-radio__label\">\n    <ng-content></ng-content>\n  </span>\n</label>\n", styles: [".sapphire-radio{display:inline-flex;font-family:var(--sapphire-semantic-font-name-default);max-width:100%;position:relative}.sapphire-radio__input{margin:0;overflow:visible;position:absolute;top:0;left:0;height:100%;width:100%;opacity:.0001;z-index:1;cursor:pointer}.sapphire-radio__label{margin-left:var(--sapphire-semantic-size-spacing-20);font-size:var(--sapphire-semantic-size-font-control-default);line-height:var(--sapphire-semantic-size-height-control-xs);color:var(--sapphire-semantic-color-content-default-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-radio--md .sapphire-radio__label{font-size:var(--sapphire-semantic-size-font-control-md);line-height:var(--sapphire-semantic-size-height-control-2xs)}.sapphire-radio__box{box-sizing:border-box;background-color:var(--sapphire-semantic-color-background-control-default);width:var(--sapphire-semantic-size-height-box-lg);height:var(--sapphire-semantic-size-height-box-lg);flex-shrink:0;border-radius:50%;border:var(--sapphire-semantic-size-border-md) solid var(--sapphire-semantic-color-border-control-default);position:relative;margin-top:var(--sapphire-semantic-size-spacing-5);transition-property:background-color,border-color,border-width;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:ease-in-out}.sapphire-radio--md .sapphire-radio__box{width:var(--sapphire-semantic-size-height-box-md);height:var(--sapphire-semantic-size-height-box-md)}.sapphire-radio--checked .sapphire-radio__box{border-color:var(--sapphire-semantic-color-background-action-primary-default);border-width:calc((var(--sapphire-semantic-size-height-box-lg) - var(--sapphire-global-size-generic-20)) / 2)}.sapphire-radio--md.sapphire-radio--checked .sapphire-radio__box{border-width:calc((var(--sapphire-semantic-size-height-box-md) - var(--sapphire-global-size-generic-15)) / 2)}.sapphire-radio--checked .sapphire-radio__box:after{display:block}.sapphire-radio:not(:active):not(.is-active):not(.sapphire-radio--checked).is-hover .sapphire-radio__box,.sapphire-radio:not(:active):not(.is-active):not(.sapphire-radio--checked):not(.js-hover):hover .sapphire-radio__input:not(:disabled)~.sapphire-radio__box{border-color:var(--sapphire-semantic-color-border-control-hover)}.sapphire-radio--checked:not(:active):not(.is-active).is-hover .sapphire-radio__box,.sapphire-radio--checked:not(:active):not(.is-active):not(.js-hover):hover .sapphire-radio__input:not(:disabled)~.sapphire-radio__box{border-color:var(--sapphire-semantic-color-background-action-primary-hover)}.sapphire-radio.is-focus .sapphire-radio__input~.sapphire-radio__box,.sapphire-radio:not(.js-focus) .sapphire-radio__input:focus-visible~.sapphire-radio__box{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);outline-offset:var(--sapphire-semantic-size-focus-ring)}.sapphire-radio__input:disabled{cursor:not-allowed}.sapphire-radio:not(.sapphire-radio--no-disabled) .sapphire-radio__input:disabled~.sapphire-radio__box,.sapphire-radio:not(.sapphire-radio--no-disabled) .sapphire-radio__input:disabled~.sapphire-radio__label{opacity:var(--sapphire-semantic-opacity-disabled)}\n"], changeDetection: i0.ChangeDetectionStrategy.Default });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: RadioComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sp-radio', changeDetection: ChangeDetectionStrategy.Default, hostDirectives: [ThemeCheckDirective], inputs: ['tabIndex'], host: {
+                        '[attr.id]': 'id',
+                        '[attr.tabindex]': 'null',
+                        '[attr.aria-label]': 'null',
+                        '[attr.aria-labelledby]': 'null',
+                        '[attr.aria-describedby]': 'null',
+                    }, template: "<label\n  [for]=\"inputId\"\n  class=\"sapphire-radio\"\n  [class.sapphire-radio--no-disabled]=\"radioGroup?.disabled\"\n  [class.sapphire-radio--checked]=\"checked\"\n  [class.sapphire-radio--md]=\"radioGroup?._field?.size === 'md'\"\n>\n  <input\n    #input\n    class=\"sapphire-radio__input\"\n    type=\"radio\"\n    [id]=\"inputId\"\n    [attr.aria-checked]=\"_getAriaChecked()\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby\"\n    [attr.aria-describedby]=\"ariaDescribedby\"\n    [attr.name]=\"name\"\n    [attr.value]=\"value\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    (change)=\"_onInputInteraction($event)\"\n    [attr.autofocus]=\"autofocus ? true : null\"\n  />\n  <span class=\"sapphire-radio__box\"></span>\n  <span class=\"sapphire-radio__label\">\n    <ng-content></ng-content>\n  </span>\n</label>\n", styles: [".sapphire-radio{display:inline-flex;font-family:var(--sapphire-semantic-font-name-default);max-width:100%;position:relative}.sapphire-radio__input{margin:0;overflow:visible;position:absolute;top:0;left:0;height:100%;width:100%;opacity:.0001;z-index:1;cursor:pointer}.sapphire-radio__label{margin-left:var(--sapphire-semantic-size-spacing-20);font-size:var(--sapphire-semantic-size-font-control-default);line-height:var(--sapphire-semantic-size-height-control-xs);color:var(--sapphire-semantic-color-content-default-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sapphire-radio--md .sapphire-radio__label{font-size:var(--sapphire-semantic-size-font-control-md);line-height:var(--sapphire-semantic-size-height-control-2xs)}.sapphire-radio__box{box-sizing:border-box;background-color:var(--sapphire-semantic-color-background-control-default);width:var(--sapphire-semantic-size-height-box-lg);height:var(--sapphire-semantic-size-height-box-lg);flex-shrink:0;border-radius:50%;border:var(--sapphire-semantic-size-border-md) solid var(--sapphire-semantic-color-border-control-default);position:relative;margin-top:var(--sapphire-semantic-size-spacing-5);transition-property:background-color,border-color,border-width;transition-duration:var(--sapphire-semantic-time-fade-quick);transition-timing-function:ease-in-out}.sapphire-radio--md .sapphire-radio__box{width:var(--sapphire-semantic-size-height-box-md);height:var(--sapphire-semantic-size-height-box-md)}.sapphire-radio--checked .sapphire-radio__box{border-color:var(--sapphire-semantic-color-background-action-primary-default);border-width:calc((var(--sapphire-semantic-size-height-box-lg) - var(--sapphire-global-size-generic-20)) / 2)}.sapphire-radio--md.sapphire-radio--checked .sapphire-radio__box{border-width:calc((var(--sapphire-semantic-size-height-box-md) - var(--sapphire-global-size-generic-15)) / 2)}.sapphire-radio--checked .sapphire-radio__box:after{display:block}.sapphire-radio:not(:active):not(.is-active):not(.sapphire-radio--checked).is-hover .sapphire-radio__box,.sapphire-radio:not(:active):not(.is-active):not(.sapphire-radio--checked):not(.js-hover):hover .sapphire-radio__input:not(:disabled)~.sapphire-radio__box{border-color:var(--sapphire-semantic-color-border-control-hover)}.sapphire-radio--checked:not(:active):not(.is-active).is-hover .sapphire-radio__box,.sapphire-radio--checked:not(:active):not(.is-active):not(.js-hover):hover .sapphire-radio__input:not(:disabled)~.sapphire-radio__box{border-color:var(--sapphire-semantic-color-background-action-primary-hover)}.sapphire-radio.is-focus .sapphire-radio__input~.sapphire-radio__box,.sapphire-radio:not(.js-focus) .sapphire-radio__input:focus-visible~.sapphire-radio__box{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);outline-offset:var(--sapphire-semantic-size-focus-ring)}.sapphire-radio__input:disabled{cursor:not-allowed}.sapphire-radio:not(.sapphire-radio--no-disabled) .sapphire-radio__input:disabled~.sapphire-radio__box,.sapphire-radio:not(.sapphire-radio--no-disabled) .sapphire-radio__input:disabled~.sapphire-radio__label{opacity:var(--sapphire-semantic-opacity-disabled)}\n"] }]
+        }] });
+
+class RadioGroupBase {
     /** Name of the radio button group. All radio buttons inside this group will use this name. */
     get name() {
         return this._name;
@@ -1526,11 +1541,6 @@ class RadioGroupComponent {
     isDisabled() {
         return this.disabled;
     }
-    _contentFocusChanged(focusOrigin) {
-        if (!focusOrigin) {
-            this.onTouched();
-        }
-    }
     /** Updates the `selected` radio button from the internal _value state. */
     updateSelectedRadioFromValue() {
         // If the value already matches the selected radio, do nothing.
@@ -1553,8 +1563,52 @@ class RadioGroupComponent {
         }
     }
 }
-RadioGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: RadioGroupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: FieldComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-RadioGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: RadioGroupComponent, selector: "sp-radio-group", inputs: { orientation: "orientation", name: "name", value: "value", selected: "selected", disabled: "disabled", readonly: "readonly", required: "required" }, outputs: { change: "change" }, host: { attributes: { "role": "radiogroup" } }, providers: [
+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 });
+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 });
+__decorate([
+    AutoId()
+], RadioGroupBase.prototype, "uniqueId", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: RadioGroupBase, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: FieldComponent, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { uniqueId: [], orientation: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }], value: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], radios: [{
+                type: ContentChildren,
+                args: [forwardRef(() => RadioComponent), { descendants: true }]
+            }] } });
+
+class RadioGroupComponent extends RadioGroupBase {
+    constructor() {
+        super(...arguments);
+        this.orientation = 'vertical';
+    }
+    _onFocusChange(focusOrigin) {
+        if (!focusOrigin) {
+            this.onTouched();
+        }
+    }
+}
+RadioGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: RadioGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+RadioGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: RadioGroupComponent, selector: "sp-radio-group", inputs: { orientation: "orientation" }, host: { attributes: { "role": "radiogroup" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => RadioGroupComponent),
@@ -1564,10 +1618,11 @@ RadioGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
             provide: FieldControl,
             useExisting: forwardRef(() => RadioGroupComponent),
         },
-    ], queries: [{ propertyName: "radios", predicate: i0.forwardRef(function () { return RadioComponent; }), descendants: true }], hostDirectives: [{ directive: ThemeCheckDirective }], ngImport: i0, template: "<div\n  class=\"sapphire-field-group\"\n  role=\"radiogroup\"\n  [attr.aria-orientation]=\"orientation\"\n  [attr.aria-labelledby]=\"_field?.label?.id\"\n  [class.sapphire-field-group--vertical]=\"orientation === 'vertical'\"\n  [class.sapphire-field-group--horizontal]=\"orientation === 'horizontal'\"\n  [class.sapphire-field-group--md]=\"_field?.size === 'md'\"\n  (cdkFocusChange)=\"_contentFocusChanged($event)\"\n  cdkMonitorSubtreeFocus\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".sapphire-field-group{display:flex;flex-wrap:wrap;column-gap:var(--sapphire-semantic-size-spacing-50);row-gap:var(--sapphire-semantic-size-spacing-30)}.sapphire-field-group--horizontal{flex-direction:row}.sapphire-field-group--vertical{flex-direction:column}.sapphire-field-group--md{row-gap:var(--sapphire-semantic-size-spacing-20)}\n"], dependencies: [{ kind: "directive", type: i2$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
-__decorate([
-    AutoId()
-], RadioGroupComponent.prototype, "uniqueId", void 0);
+        {
+            provide: RadioGroupBase,
+            useExisting: forwardRef(() => RadioGroupComponent),
+        },
+    ], usesInheritance: true, hostDirectives: [{ directive: ThemeCheckDirective }], ngImport: i0, template: "<div\n  class=\"sapphire-field-group\"\n  role=\"radiogroup\"\n  [attr.aria-orientation]=\"orientation\"\n  [attr.aria-labelledby]=\"_field?.label?.id\"\n  [class.sapphire-field-group--vertical]=\"orientation === 'vertical'\"\n  [class.sapphire-field-group--horizontal]=\"orientation === 'horizontal'\"\n  [class.sapphire-field-group--md]=\"_field?.size === 'md'\"\n  (cdkFocusChange)=\"_onFocusChange($event)\"\n  cdkMonitorSubtreeFocus\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".sapphire-field-group{display:flex;flex-wrap:wrap;column-gap:var(--sapphire-semantic-size-spacing-50);row-gap:var(--sapphire-semantic-size-spacing-30)}.sapphire-field-group--horizontal{flex-direction:row}.sapphire-field-group--vertical{flex-direction:column}.sapphire-field-group--md{row-gap:var(--sapphire-semantic-size-spacing-20)}\n"], dependencies: [{ kind: "directive", type: i2$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: RadioGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sp-radio-group', changeDetection: ChangeDetectionStrategy.Default, providers: [
@@ -1580,30 +1635,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                             provide: FieldControl,
                             useExisting: forwardRef(() => RadioGroupComponent),
                         },
+                        {
+                            provide: RadioGroupBase,
+                            useExisting: forwardRef(() => RadioGroupComponent),
+                        },
                     ], host: {
                         role: 'radiogroup',
-                    }, hostDirectives: [ThemeCheckDirective], template: "<div\n  class=\"sapphire-field-group\"\n  role=\"radiogroup\"\n  [attr.aria-orientation]=\"orientation\"\n  [attr.aria-labelledby]=\"_field?.label?.id\"\n  [class.sapphire-field-group--vertical]=\"orientation === 'vertical'\"\n  [class.sapphire-field-group--horizontal]=\"orientation === 'horizontal'\"\n  [class.sapphire-field-group--md]=\"_field?.size === 'md'\"\n  (cdkFocusChange)=\"_contentFocusChanged($event)\"\n  cdkMonitorSubtreeFocus\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".sapphire-field-group{display:flex;flex-wrap:wrap;column-gap:var(--sapphire-semantic-size-spacing-50);row-gap:var(--sapphire-semantic-size-spacing-30)}.sapphire-field-group--horizontal{flex-direction:row}.sapphire-field-group--vertical{flex-direction:column}.sapphire-field-group--md{row-gap:var(--sapphire-semantic-size-spacing-20)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: FieldComponent, decorators: [{
-                    type: Optional
-                }] }]; }, propDecorators: { uniqueId: [], orientation: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], change: [{
-                type: Output
-            }], value: [{
-                type: Input
-            }], selected: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], required: [{
+                    }, hostDirectives: [ThemeCheckDirective], template: "<div\n  class=\"sapphire-field-group\"\n  role=\"radiogroup\"\n  [attr.aria-orientation]=\"orientation\"\n  [attr.aria-labelledby]=\"_field?.label?.id\"\n  [class.sapphire-field-group--vertical]=\"orientation === 'vertical'\"\n  [class.sapphire-field-group--horizontal]=\"orientation === 'horizontal'\"\n  [class.sapphire-field-group--md]=\"_field?.size === 'md'\"\n  (cdkFocusChange)=\"_onFocusChange($event)\"\n  cdkMonitorSubtreeFocus\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".sapphire-field-group{display:flex;flex-wrap:wrap;column-gap:var(--sapphire-semantic-size-spacing-50);row-gap:var(--sapphire-semantic-size-spacing-30)}.sapphire-field-group--horizontal{flex-direction:row}.sapphire-field-group--vertical{flex-direction:column}.sapphire-field-group--md{row-gap:var(--sapphire-semantic-size-spacing-20)}\n"] }]
+        }], propDecorators: { orientation: [{
                 type: Input
-            }], radios: [{
-                type: ContentChildren,
-                args: [forwardRef(() => RadioComponent), { descendants: true }]
             }] } });
 
 /**
@@ -5348,7 +5388,7 @@ class SegmentedTabsComponent {
         this.selectedIndexChange = new EventEmitter();
         this.tabs = new QueryList();
         this._tabIds = [];
-        this._activeTabPosition = { left: '0px', width: '0px' };
+        this._gliderStyles = { left: '0px', width: '0px' };
         this._animationEnabled = false;
         this._focusVisible = false;
         this.skipAnimationFrame();
@@ -5370,17 +5410,17 @@ class SegmentedTabsComponent {
         // changed after it was checked" angular error.
         //
         // https://angular.io/errors/NG0100
-        this.setActiveTabPosition();
+        this.setGliderStyles();
         this.changeDetector.detectChanges();
         this.resizeObserver = new ResizeObserver(() => {
             // zonejs doesn't monkey-patch resize observer (yet)
             this.zone.run(() => {
-                this.setActiveTabPosition();
+                this.setGliderStyles();
             });
         });
         this.resizeObserver.observe(this.segmentedControl.nativeElement);
         this.selectedIndexChange.subscribe(() => {
-            this.setActiveTabPosition();
+            this.setGliderStyles();
         });
     }
     ngOnDestroy() {
@@ -5388,7 +5428,7 @@ class SegmentedTabsComponent {
         this.selectedIndexChange.unsubscribe();
     }
     ngAfterViewChecked() {
-        this.setActiveTabPosition();
+        this.setGliderStyles();
         this.changeDetector.detectChanges();
     }
     getFocusedTab() {
@@ -5458,11 +5498,18 @@ class SegmentedTabsComponent {
                 return;
         }
     }
-    setActiveTabPosition() {
+    setGliderStyles() {
+        const { offsetLeft, clientWidth } = this.getSelectedTabPosition();
+        this._gliderStyles = {
+            left: `${offsetLeft}px`,
+            width: `${clientWidth}px`,
+        };
+    }
+    getSelectedTabPosition() {
         const tab = this.tabs.toArray()[this.selectedIndex]?._button?.nativeElement;
-        this._activeTabPosition = {
-            left: `${tab?.offsetLeft || 0}px`,
-            width: `${tab?.clientWidth || 0}px`,
+        return {
+            offsetLeft: tab?.offsetLeft || 0,
+            clientWidth: tab?.clientWidth || 0,
         };
     }
     onTabsChange() {
@@ -5513,7 +5560,7 @@ class SegmentedTabsComponent {
     }
 }
 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 });
-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]=\"_activeTabPosition.left\"\n      [style.width]=\"_activeTabPosition.width\"\n      [class.sapphire-segmented-control__glider--with-transition]=\"\n        _animationEnabled\n      \"\n      class=\"sapphire-segmented-control__glider\"\n      role=\"none\"\n    ></span>\n  </div>\n</div>\n<ng-container *ngTemplateOutlet=\"_getTabContentTemplate()\"></ng-container>\n", styles: [".sapphire-segmented-control{display:flex;height:var(--sapphire-semantic-size-height-control-md)}.sapphire-segmented-control--stretch .sapphire-segmented-control__button-container{width:100%}.sapphire-segmented-control--align-center{justify-content:center}.sapphire-segmented-control--align-right{justify-content:flex-end}.sapphire-segmented-control--align-left{justify-content:flex-start}.sapphire-segmented-control__button-container{display:inline-flex;position:relative;height:100%;background-color:var(--sapphire-semantic-color-background-control-special-secondary-default);border-radius:var(--sapphire-semantic-size-height-control-lg);padding:var(--sapphire-global-size-static-5);box-sizing:border-box}.sapphire-segmented-control__glider{position:absolute;top:var(--sapphire-global-size-static-5);left:0;height:calc(100% - var(--sapphire-global-size-static-5) * 2);display:block;background-color:var(--sapphire-semantic-color-background-control-special-primary-default);box-shadow:var(--sapphire-global-shadow-sm);box-sizing:border-box;z-index:1;border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control__glider--with-transition{transition:width var(--sapphire-semantic-time-motion-quick) ease-in-out,left var(--sapphire-semantic-time-motion-quick) ease-in-out}.sapphire-segmented-control__button{font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-semibold);font-size:var(--sapphire-semantic-size-font-control-md);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;flex:1 1 auto;box-sizing:content-box;margin:0;border:0;height:100%;min-width:var(--sapphire-global-size-generic-120);padding:0 var(--sapphire-semantic-size-spacing-50);background-color:transparent;color:var(--sapphire-semantic-color-content-default-primary);cursor:pointer;outline:none;z-index:2;display:flex;align-items:center;justify-content:center;position:relative;transition:color var(--sapphire-semantic-time-motion-quick) ease-in-out}.sapphire-segmented-control__button--active{color:var(--sapphire-semantic-color-content-link-primary-default)}.sapphire-segmented-control__button--disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-segmented-control.focus-visible:focus-within .sapphire-segmented-control__glider{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring)}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__glider{transition:none}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__button:focus{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control.focus-visible:focus-within.sapphire-segmented-control--manual-keyboard-activation .sapphire-segmented-control__glider{outline:none}.sapphire-segmented-control--lg{height:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control--lg .sapphire-segmented-control__button{font-size:var(--sapphire-semantic-size-font-control-default)}.sapphire-segmented-control--sm{height:var(--sapphire-semantic-size-height-control-sm)}.sapphire-segmented-control--sm .sapphire-segmented-control__button{font-size:var(--sapphire-semantic-size-font-control-sm)}.sapphire-segmented-control__radio-input{margin:0;overflow:visible;position:absolute;top:0;left:0;height:100%;width:100%;opacity:.0001;z-index:1;cursor:pointer}.sapphire-segmented-control__button--disabled .sapphire-segmented-control__radio-input{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }] });
+SegmentedTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: SegmentedTabsComponent, selector: "sp-segmented-tabs", inputs: { size: "size", align: "align", keyboardActivation: "keyboardActivation", disabled: "disabled", selectedIndex: "selectedIndex" }, outputs: { selectedIndexChange: "selectedIndexChange" }, host: { properties: { "attr.align": "null" } }, providers: [ViewEncapsulationProvider], queries: [{ propertyName: "tabs", predicate: i0.forwardRef(function () { return SegmentedTabComponent; }) }], viewQueries: [{ propertyName: "segmentedControl", first: true, predicate: ["segmentedControl"], descendants: true }], exportAs: ["spSegmentedTabs"], ngImport: i0, template: "<div\n  #segmentedControl\n  class=\"sapphire-segmented-control\"\n  [class.sapphire-segmented-control--lg]=\"size === 'lg'\"\n  [class.sapphire-segmented-control--sm]=\"size === 'sm'\"\n  [class.focus-visible]=\"_focusVisible\"\n  [class.sapphire-segmented-control--manual-keyboard-activation]=\"\n    keyboardActivation === 'manual'\n  \"\n  [ngClass]=\"\n    align === 'stretch'\n      ? 'sapphire-segmented-control--stretch'\n      : 'sapphire-segmented-control--align-' + align\n  \"\n>\n  <div\n    class=\"sapphire-segmented-control__button-container\"\n    role=\"tablist\"\n    aria-orientation=\"horizontal\"\n    cdkMonitorSubtreeFocus\n    (cdkFocusChange)=\"_onFocusChange($event)\"\n    (keydown)=\"_onKeyDown($event)\"\n  >\n    <ng-content select=\"sp-segmented-tab\"></ng-content>\n    <span\n      [style.left]=\"_gliderStyles.left\"\n      [style.width]=\"_gliderStyles.width\"\n      [class.sapphire-segmented-control__glider--with-transition]=\"\n        _animationEnabled\n      \"\n      class=\"sapphire-segmented-control__glider\"\n      role=\"none\"\n    ></span>\n  </div>\n</div>\n<ng-container *ngTemplateOutlet=\"_getTabContentTemplate()\"></ng-container>\n", styles: [".sapphire-segmented-control{display:flex;height:var(--sapphire-semantic-size-height-control-md)}.sapphire-segmented-control--stretch .sapphire-segmented-control__button-container{width:100%}.sapphire-segmented-control--align-center{justify-content:center}.sapphire-segmented-control--align-right{justify-content:flex-end}.sapphire-segmented-control--align-left{justify-content:flex-start}.sapphire-segmented-control__button-container{display:inline-flex;position:relative;height:100%;background-color:var(--sapphire-semantic-color-background-control-special-secondary-default);border-radius:var(--sapphire-semantic-size-height-control-lg);padding:var(--sapphire-global-size-static-5);box-sizing:border-box}.sapphire-segmented-control__glider{position:absolute;top:var(--sapphire-global-size-static-5);left:0;height:calc(100% - var(--sapphire-global-size-static-5) * 2);display:block;background-color:var(--sapphire-semantic-color-background-control-special-primary-default);box-shadow:var(--sapphire-global-shadow-sm);box-sizing:border-box;z-index:1;border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control__glider--with-transition{transition:width var(--sapphire-semantic-time-motion-quick) ease-in-out,left var(--sapphire-semantic-time-motion-quick) ease-in-out}.sapphire-segmented-control__button{font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-semibold);font-size:var(--sapphire-semantic-size-font-control-md);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;flex:1 1 auto;box-sizing:content-box;margin:0;border:0;height:100%;min-width:var(--sapphire-global-size-generic-120);padding:0 var(--sapphire-semantic-size-spacing-50);background-color:transparent;color:var(--sapphire-semantic-color-content-default-primary);cursor:pointer;outline:none;z-index:2;display:flex;align-items:center;justify-content:center;position:relative;transition:color var(--sapphire-semantic-time-motion-quick) ease-in-out}.sapphire-segmented-control__button--active{color:var(--sapphire-semantic-color-content-link-primary-default)}.sapphire-segmented-control__button--disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-segmented-control.focus-visible:focus-within .sapphire-segmented-control__glider{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring)}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__glider{transition:none}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__button:focus{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control.focus-visible:focus-within.sapphire-segmented-control--manual-keyboard-activation .sapphire-segmented-control__glider{outline:none}.sapphire-segmented-control--lg{height:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control--lg .sapphire-segmented-control__button{font-size:var(--sapphire-semantic-size-font-control-default)}.sapphire-segmented-control--sm{height:var(--sapphire-semantic-size-height-control-sm)}.sapphire-segmented-control--sm .sapphire-segmented-control__button{font-size:var(--sapphire-semantic-size-font-control-sm)}.sapphire-segmented-control__radio-input{margin:0;overflow:visible;position:absolute;top:0;left:0;height:100%;width:100%;opacity:.0001;z-index:1;cursor:pointer}.sapphire-segmented-control__button--disabled .sapphire-segmented-control__radio-input{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }] });
 __decorate([
     CoerceBoolean
 ], SegmentedTabsComponent.prototype, "disabled", void 0);
@@ -5521,7 +5568,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
             type: Component,
             args: [{ selector: 'sp-segmented-tabs', providers: [ViewEncapsulationProvider], exportAs: 'spSegmentedTabs', host: {
                         '[attr.align]': 'null',
-                    }, 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]=\"_activeTabPosition.left\"\n      [style.width]=\"_activeTabPosition.width\"\n      [class.sapphire-segmented-control__glider--with-transition]=\"\n        _animationEnabled\n      \"\n      class=\"sapphire-segmented-control__glider\"\n      role=\"none\"\n    ></span>\n  </div>\n</div>\n<ng-container *ngTemplateOutlet=\"_getTabContentTemplate()\"></ng-container>\n", styles: [".sapphire-segmented-control{display:flex;height:var(--sapphire-semantic-size-height-control-md)}.sapphire-segmented-control--stretch .sapphire-segmented-control__button-container{width:100%}.sapphire-segmented-control--align-center{justify-content:center}.sapphire-segmented-control--align-right{justify-content:flex-end}.sapphire-segmented-control--align-left{justify-content:flex-start}.sapphire-segmented-control__button-container{display:inline-flex;position:relative;height:100%;background-color:var(--sapphire-semantic-color-background-control-special-secondary-default);border-radius:var(--sapphire-semantic-size-height-control-lg);padding:var(--sapphire-global-size-static-5);box-sizing:border-box}.sapphire-segmented-control__glider{position:absolute;top:var(--sapphire-global-size-static-5);left:0;height:calc(100% - var(--sapphire-global-size-static-5) * 2);display:block;background-color:var(--sapphire-semantic-color-background-control-special-primary-default);box-shadow:var(--sapphire-global-shadow-sm);box-sizing:border-box;z-index:1;border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control__glider--with-transition{transition:width var(--sapphire-semantic-time-motion-quick) ease-in-out,left var(--sapphire-semantic-time-motion-quick) ease-in-out}.sapphire-segmented-control__button{font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-semibold);font-size:var(--sapphire-semantic-size-font-control-md);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;flex:1 1 auto;box-sizing:content-box;margin:0;border:0;height:100%;min-width:var(--sapphire-global-size-generic-120);padding:0 var(--sapphire-semantic-size-spacing-50);background-color:transparent;color:var(--sapphire-semantic-color-content-default-primary);cursor:pointer;outline:none;z-index:2;display:flex;align-items:center;justify-content:center;position:relative;transition:color var(--sapphire-semantic-time-motion-quick) ease-in-out}.sapphire-segmented-control__button--active{color:var(--sapphire-semantic-color-content-link-primary-default)}.sapphire-segmented-control__button--disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-segmented-control.focus-visible:focus-within .sapphire-segmented-control__glider{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring)}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__glider{transition:none}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__button:focus{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control.focus-visible:focus-within.sapphire-segmented-control--manual-keyboard-activation .sapphire-segmented-control__glider{outline:none}.sapphire-segmented-control--lg{height:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control--lg .sapphire-segmented-control__button{font-size:var(--sapphire-semantic-size-font-control-default)}.sapphire-segmented-control--sm{height:var(--sapphire-semantic-size-height-control-sm)}.sapphire-segmented-control--sm .sapphire-segmented-control__button{font-size:var(--sapphire-semantic-size-font-control-sm)}.sapphire-segmented-control__radio-input{margin:0;overflow:visible;position:absolute;top:0;left:0;height:100%;width:100%;opacity:.0001;z-index:1;cursor:pointer}.sapphire-segmented-control__button--disabled .sapphire-segmented-control__radio-input{cursor:not-allowed}\n"] }]
+                    }, template: "<div\n  #segmentedControl\n  class=\"sapphire-segmented-control\"\n  [class.sapphire-segmented-control--lg]=\"size === 'lg'\"\n  [class.sapphire-segmented-control--sm]=\"size === 'sm'\"\n  [class.focus-visible]=\"_focusVisible\"\n  [class.sapphire-segmented-control--manual-keyboard-activation]=\"\n    keyboardActivation === 'manual'\n  \"\n  [ngClass]=\"\n    align === 'stretch'\n      ? 'sapphire-segmented-control--stretch'\n      : 'sapphire-segmented-control--align-' + align\n  \"\n>\n  <div\n    class=\"sapphire-segmented-control__button-container\"\n    role=\"tablist\"\n    aria-orientation=\"horizontal\"\n    cdkMonitorSubtreeFocus\n    (cdkFocusChange)=\"_onFocusChange($event)\"\n    (keydown)=\"_onKeyDown($event)\"\n  >\n    <ng-content select=\"sp-segmented-tab\"></ng-content>\n    <span\n      [style.left]=\"_gliderStyles.left\"\n      [style.width]=\"_gliderStyles.width\"\n      [class.sapphire-segmented-control__glider--with-transition]=\"\n        _animationEnabled\n      \"\n      class=\"sapphire-segmented-control__glider\"\n      role=\"none\"\n    ></span>\n  </div>\n</div>\n<ng-container *ngTemplateOutlet=\"_getTabContentTemplate()\"></ng-container>\n", styles: [".sapphire-segmented-control{display:flex;height:var(--sapphire-semantic-size-height-control-md)}.sapphire-segmented-control--stretch .sapphire-segmented-control__button-container{width:100%}.sapphire-segmented-control--align-center{justify-content:center}.sapphire-segmented-control--align-right{justify-content:flex-end}.sapphire-segmented-control--align-left{justify-content:flex-start}.sapphire-segmented-control__button-container{display:inline-flex;position:relative;height:100%;background-color:var(--sapphire-semantic-color-background-control-special-secondary-default);border-radius:var(--sapphire-semantic-size-height-control-lg);padding:var(--sapphire-global-size-static-5);box-sizing:border-box}.sapphire-segmented-control__glider{position:absolute;top:var(--sapphire-global-size-static-5);left:0;height:calc(100% - var(--sapphire-global-size-static-5) * 2);display:block;background-color:var(--sapphire-semantic-color-background-control-special-primary-default);box-shadow:var(--sapphire-global-shadow-sm);box-sizing:border-box;z-index:1;border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control__glider--with-transition{transition:width var(--sapphire-semantic-time-motion-quick) ease-in-out,left var(--sapphire-semantic-time-motion-quick) ease-in-out}.sapphire-segmented-control__button{font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-semibold);font-size:var(--sapphire-semantic-size-font-control-md);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;flex:1 1 auto;box-sizing:content-box;margin:0;border:0;height:100%;min-width:var(--sapphire-global-size-generic-120);padding:0 var(--sapphire-semantic-size-spacing-50);background-color:transparent;color:var(--sapphire-semantic-color-content-default-primary);cursor:pointer;outline:none;z-index:2;display:flex;align-items:center;justify-content:center;position:relative;transition:color var(--sapphire-semantic-time-motion-quick) ease-in-out}.sapphire-segmented-control__button--active{color:var(--sapphire-semantic-color-content-link-primary-default)}.sapphire-segmented-control__button--disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-segmented-control.focus-visible:focus-within .sapphire-segmented-control__glider{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring)}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__glider{transition:none}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__button:focus{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control.focus-visible:focus-within.sapphire-segmented-control--manual-keyboard-activation .sapphire-segmented-control__glider{outline:none}.sapphire-segmented-control--lg{height:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control--lg .sapphire-segmented-control__button{font-size:var(--sapphire-semantic-size-font-control-default)}.sapphire-segmented-control--sm{height:var(--sapphire-semantic-size-height-control-sm)}.sapphire-segmented-control--sm .sapphire-segmented-control__button{font-size:var(--sapphire-semantic-size-font-control-sm)}.sapphire-segmented-control__radio-input{margin:0;overflow:visible;position:absolute;top:0;left:0;height:100%;width:100%;opacity:.0001;z-index:1;cursor:pointer}.sapphire-segmented-control__button--disabled .sapphire-segmented-control__radio-input{cursor:not-allowed}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { segmentedControl: [{
                 type: ViewChild,
                 args: ['segmentedControl']
@@ -6381,6 +6428,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                 args: ['class']
             }] } });
 
+/**
+ * A patch to fix the issue of sticky header position getting affected
+ * by transform, which is due to transform making the element
+ * a [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block).
+ *
+ * It intercepts style assignments on the content wrapper, and converts
+ * transform: translateY(value) to top: value, to avoid making the content
+ * wrapper a containing block for sticky positioned children.
+ *
+ * @see
+ * https://github.com/angular/components/issues/14833
+ * https://github.com/angular/components/issues/18240
+ * https://github.com/angular/components/issues/21576
+ * https://github.com/angular/components/issues/28584
+ */
+class CdkVirtualScrollViewportFixDirective {
+    constructor(cdkViewport) {
+        this.cdkViewport = cdkViewport;
+    }
+    ngOnInit() {
+        const contentWrapper = this.cdkViewport._contentWrapper.nativeElement;
+        /**
+         * Proxy to set `top: {value}px` instead of `transform: translateY({value}px)`
+         * whenever `style.transform` is set.
+         */
+        const styleProxy = new Proxy(contentWrapper.style, {
+            set: (target, prop, value) => {
+                const top = prop === 'transform'
+                    ? value?.match(/translateY\((\d+)px\)/)?.[1]
+                    : undefined;
+                if (top) {
+                    target['top'] = `${top}px`;
+                    return true;
+                }
+                target[prop] = value;
+                return true;
+            },
+        });
+        // Not directly setting style proxy to contentWrapper.style, to limit
+        // it to the styles set by CdkVirtualScrollViewport.
+        // i.e. only setting `top` instead of `transform`, when set by cdk viewport.
+        this.cdkViewport._contentWrapper.nativeElement = new Proxy(contentWrapper, {
+            get: (target, prop) => {
+                return prop === 'style' ? styleProxy : target[prop];
+            },
+        });
+    }
+}
+CdkVirtualScrollViewportFixDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: CdkVirtualScrollViewportFixDirective, deps: [{ token: i1$5.CdkVirtualScrollViewport }], target: i0.ɵɵFactoryTarget.Directive });
+CdkVirtualScrollViewportFixDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: CdkVirtualScrollViewportFixDirective, isStandalone: true, selector: "cdk-virtual-scroll-viewport", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: CdkVirtualScrollViewportFixDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'cdk-virtual-scroll-viewport',
+                    standalone: true,
+                }]
+        }], ctorParameters: function () { return [{ type: i1$5.CdkVirtualScrollViewport }]; } });
+
 class SapphireTableModule {
 }
 SapphireTableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SapphireTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -6396,6 +6501,7 @@ SapphireTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ver
         TableSortHeaderDirective], imports: [CommonModule,
         SapphireIconModule,
         TruncatedWithTooltipDirective,
+        CdkVirtualScrollViewportFixDirective,
         UseComponentStyles], exports: [TableComponent,
         TableDirective,
         TableBodyDirective,
@@ -6405,7 +6511,8 @@ SapphireTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ver
         TableHeadCellComponent,
         TableCellDirective,
         TableSortDirective,
-        TableSortHeaderDirective] });
+        TableSortHeaderDirective,
+        CdkVirtualScrollViewportFixDirective] });
 SapphireTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SapphireTableModule, imports: [CommonModule,
         SapphireIconModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SapphireTableModule, decorators: [{
@@ -6427,6 +6534,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                         CommonModule,
                         SapphireIconModule,
                         TruncatedWithTooltipDirective,
+                        CdkVirtualScrollViewportFixDirective,
                         UseComponentStyles,
                     ],
                     exports: [
@@ -6440,6 +6548,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                         TableCellDirective,
                         TableSortDirective,
                         TableSortHeaderDirective,
+                        CdkVirtualScrollViewportFixDirective,
                     ],
                 }]
         }] });
@@ -6846,17 +6955,186 @@ const DEFAULT_BREAKPOINTS = {
     XL: 1400,
 };
 
+class SegmentedRadioGroupComponent extends RadioGroupBase {
+    constructor(zone, changeDetector) {
+        super(changeDetector, undefined);
+        this.zone = zone;
+        this.changeDetector = changeDetector;
+        /** Size of tabs */
+        this.size = 'md';
+        /**
+         * Alignment of tabs' buttons group.
+         * @default 'left'
+         */
+        this.align = 'left';
+        this._gliderStyles = { left: '0px', width: '0px' };
+        this._animationEnabled = false;
+        this._focusVisible = false;
+        this.skipAnimationFrame();
+    }
+    skipAnimationFrame() {
+        // We want to avoid animation on first render and whenever tab content changes
+        this._animationEnabled = false;
+        requestAnimationFrame(() => {
+            this._animationEnabled = true;
+        });
+    }
+    setGliderStyles() {
+        const { offsetLeft, clientWidth } = this.getSelectedTabPosition();
+        this._gliderStyles = {
+            left: `${offsetLeft}px`,
+            width: `${clientWidth}px`,
+        };
+    }
+    getSelectedTabPosition() {
+        const selected = this.selected?.elementRef.nativeElement;
+        return {
+            offsetLeft: selected?.offsetLeft || 0,
+            clientWidth: selected?.clientWidth || 0,
+        };
+    }
+    shouldUpdateGliderStyles() {
+        const { offsetLeft, clientWidth } = this.getSelectedTabPosition();
+        return (`${offsetLeft}px` !== this._gliderStyles.left ||
+            `${clientWidth}px` !== this._gliderStyles.width);
+    }
+    ngAfterViewInit() {
+        this.setGliderStyles();
+        this.resizeObserver = new ResizeObserver(() => {
+            if (this.shouldUpdateGliderStyles()) {
+                // zonejs doesn't monkey-patch resize observer (yet)
+                this.zone.run(() => {
+                    this.setGliderStyles();
+                });
+            }
+        });
+        this.resizeObserver.observe(this.segmentedControl.nativeElement);
+        this.change.subscribe(() => {
+            this.setGliderStyles();
+        });
+    }
+    ngAfterViewChecked() {
+        this.setGliderStyles();
+        this.changeDetector.detectChanges();
+    }
+    ngOnDestroy() {
+        this.resizeObserver?.unobserve(this.segmentedControl.nativeElement);
+        this.change.unsubscribe();
+    }
+    _onFocusChange(focusOrigin) {
+        this._focusVisible = focusOrigin === 'keyboard';
+        if (!focusOrigin) {
+            this.onTouched();
+        }
+    }
+}
+SegmentedRadioGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SegmentedRadioGroupComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SegmentedRadioGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: SegmentedRadioGroupComponent, selector: "sp-segmented-radio-group", inputs: { ariaLabel: ["aria-label", "ariaLabel"], size: "size", align: "align" }, providers: [
+        ViewEncapsulationProvider,
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => SegmentedRadioGroupComponent),
+            multi: true,
+        },
+        {
+            provide: FieldControl,
+            useExisting: forwardRef(() => SegmentedRadioGroupComponent),
+        },
+        {
+            provide: RadioGroupBase,
+            useExisting: forwardRef(() => SegmentedRadioGroupComponent),
+        },
+    ], viewQueries: [{ propertyName: "segmentedControl", first: true, predicate: ["segmentedControl"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: ThemeCheckDirective }], ngImport: i0, template: "<div\n  #segmentedControl\n  class=\"sapphire-segmented-control\"\n  [class.sapphire-segmented-control--lg]=\"size === 'lg'\"\n  [class.sapphire-segmented-control--sm]=\"size === 'sm'\"\n  [class.focus-visible]=\"_focusVisible\"\n  [ngClass]=\"\n    align === 'stretch'\n      ? 'sapphire-segmented-control--stretch'\n      : 'sapphire-segmented-control--align-' + align\n  \"\n>\n  <div\n    class=\"sapphire-segmented-control__button-container\"\n    role=\"radiogroup\"\n    [attr.aria-label]=\"ariaLabel\"\n    aria-orientation=\"horizontal\"\n    cdkMonitorSubtreeFocus\n    (cdkFocusChange)=\"_onFocusChange($event)\"\n  >\n    <ng-content></ng-content>\n    <span\n      [style.left]=\"_gliderStyles.left\"\n      [style.width]=\"_gliderStyles.width\"\n      [class.sapphire-segmented-control__glider--with-transition]=\"\n        _animationEnabled\n      \"\n      class=\"sapphire-segmented-control__glider\"\n      role=\"none\"\n    ></span>\n  </div>\n</div>\n", styles: [".sapphire-segmented-control{display:flex;height:var(--sapphire-semantic-size-height-control-md)}.sapphire-segmented-control--stretch .sapphire-segmented-control__button-container{width:100%}.sapphire-segmented-control--align-center{justify-content:center}.sapphire-segmented-control--align-right{justify-content:flex-end}.sapphire-segmented-control--align-left{justify-content:flex-start}.sapphire-segmented-control__button-container{display:inline-flex;position:relative;height:100%;background-color:var(--sapphire-semantic-color-background-control-special-secondary-default);border-radius:var(--sapphire-semantic-size-height-control-lg);padding:var(--sapphire-global-size-static-5);box-sizing:border-box}.sapphire-segmented-control__glider{position:absolute;top:var(--sapphire-global-size-static-5);left:0;height:calc(100% - var(--sapphire-global-size-static-5) * 2);display:block;background-color:var(--sapphire-semantic-color-background-control-special-primary-default);box-shadow:var(--sapphire-global-shadow-sm);box-sizing:border-box;z-index:1;border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control__glider--with-transition{transition:width var(--sapphire-semantic-time-motion-quick) ease-in-out,left var(--sapphire-semantic-time-motion-quick) ease-in-out}.sapphire-segmented-control__button{font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-semibold);font-size:var(--sapphire-semantic-size-font-control-md);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;flex:1 1 auto;box-sizing:content-box;margin:0;border:0;height:100%;min-width:var(--sapphire-global-size-generic-120);padding:0 var(--sapphire-semantic-size-spacing-50);background-color:transparent;color:var(--sapphire-semantic-color-content-default-primary);cursor:pointer;outline:none;z-index:2;display:flex;align-items:center;justify-content:center;position:relative;transition:color var(--sapphire-semantic-time-motion-quick) ease-in-out}.sapphire-segmented-control__button--active{color:var(--sapphire-semantic-color-content-link-primary-default)}.sapphire-segmented-control__button--disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-segmented-control.focus-visible:focus-within .sapphire-segmented-control__glider{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring)}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__glider{transition:none}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__button:focus{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control.focus-visible:focus-within.sapphire-segmented-control--manual-keyboard-activation .sapphire-segmented-control__glider{outline:none}.sapphire-segmented-control--lg{height:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control--lg .sapphire-segmented-control__button{font-size:var(--sapphire-semantic-size-font-control-default)}.sapphire-segmented-control--sm{height:var(--sapphire-semantic-size-height-control-sm)}.sapphire-segmented-control--sm .sapphire-segmented-control__button{font-size:var(--sapphire-semantic-size-font-control-sm)}.sapphire-segmented-control__radio-input{margin:0;overflow:visible;position:absolute;top:0;left:0;height:100%;width:100%;opacity:.0001;z-index:1;cursor:pointer}.sapphire-segmented-control__button--disabled .sapphire-segmented-control__radio-input{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SegmentedRadioGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sp-segmented-radio-group', changeDetection: ChangeDetectionStrategy.Default, providers: [
+                        ViewEncapsulationProvider,
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SegmentedRadioGroupComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: FieldControl,
+                            useExisting: forwardRef(() => SegmentedRadioGroupComponent),
+                        },
+                        {
+                            provide: RadioGroupBase,
+                            useExisting: forwardRef(() => SegmentedRadioGroupComponent),
+                        },
+                    ], hostDirectives: [ThemeCheckDirective], template: "<div\n  #segmentedControl\n  class=\"sapphire-segmented-control\"\n  [class.sapphire-segmented-control--lg]=\"size === 'lg'\"\n  [class.sapphire-segmented-control--sm]=\"size === 'sm'\"\n  [class.focus-visible]=\"_focusVisible\"\n  [ngClass]=\"\n    align === 'stretch'\n      ? 'sapphire-segmented-control--stretch'\n      : 'sapphire-segmented-control--align-' + align\n  \"\n>\n  <div\n    class=\"sapphire-segmented-control__button-container\"\n    role=\"radiogroup\"\n    [attr.aria-label]=\"ariaLabel\"\n    aria-orientation=\"horizontal\"\n    cdkMonitorSubtreeFocus\n    (cdkFocusChange)=\"_onFocusChange($event)\"\n  >\n    <ng-content></ng-content>\n    <span\n      [style.left]=\"_gliderStyles.left\"\n      [style.width]=\"_gliderStyles.width\"\n      [class.sapphire-segmented-control__glider--with-transition]=\"\n        _animationEnabled\n      \"\n      class=\"sapphire-segmented-control__glider\"\n      role=\"none\"\n    ></span>\n  </div>\n</div>\n", styles: [".sapphire-segmented-control{display:flex;height:var(--sapphire-semantic-size-height-control-md)}.sapphire-segmented-control--stretch .sapphire-segmented-control__button-container{width:100%}.sapphire-segmented-control--align-center{justify-content:center}.sapphire-segmented-control--align-right{justify-content:flex-end}.sapphire-segmented-control--align-left{justify-content:flex-start}.sapphire-segmented-control__button-container{display:inline-flex;position:relative;height:100%;background-color:var(--sapphire-semantic-color-background-control-special-secondary-default);border-radius:var(--sapphire-semantic-size-height-control-lg);padding:var(--sapphire-global-size-static-5);box-sizing:border-box}.sapphire-segmented-control__glider{position:absolute;top:var(--sapphire-global-size-static-5);left:0;height:calc(100% - var(--sapphire-global-size-static-5) * 2);display:block;background-color:var(--sapphire-semantic-color-background-control-special-primary-default);box-shadow:var(--sapphire-global-shadow-sm);box-sizing:border-box;z-index:1;border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control__glider--with-transition{transition:width var(--sapphire-semantic-time-motion-quick) ease-in-out,left var(--sapphire-semantic-time-motion-quick) ease-in-out}.sapphire-segmented-control__button{font-family:var(--sapphire-semantic-font-name-default);font-weight:var(--sapphire-semantic-font-weight-default-semibold);font-size:var(--sapphire-semantic-size-font-control-md);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;flex:1 1 auto;box-sizing:content-box;margin:0;border:0;height:100%;min-width:var(--sapphire-global-size-generic-120);padding:0 var(--sapphire-semantic-size-spacing-50);background-color:transparent;color:var(--sapphire-semantic-color-content-default-primary);cursor:pointer;outline:none;z-index:2;display:flex;align-items:center;justify-content:center;position:relative;transition:color var(--sapphire-semantic-time-motion-quick) ease-in-out}.sapphire-segmented-control__button--active{color:var(--sapphire-semantic-color-content-link-primary-default)}.sapphire-segmented-control__button--disabled{opacity:var(--sapphire-semantic-opacity-disabled);cursor:not-allowed}.sapphire-segmented-control.focus-visible:focus-within .sapphire-segmented-control__glider{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring)}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__glider{transition:none}.sapphire-segmented-control--manual-keyboard-activation.focus-visible .sapphire-segmented-control__button:focus{outline:var(--sapphire-semantic-size-focus-ring) solid var(--sapphire-semantic-color-focus-ring);border-radius:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control.focus-visible:focus-within.sapphire-segmented-control--manual-keyboard-activation .sapphire-segmented-control__glider{outline:none}.sapphire-segmented-control--lg{height:var(--sapphire-semantic-size-height-control-lg)}.sapphire-segmented-control--lg .sapphire-segmented-control__button{font-size:var(--sapphire-semantic-size-font-control-default)}.sapphire-segmented-control--sm{height:var(--sapphire-semantic-size-height-control-sm)}.sapphire-segmented-control--sm .sapphire-segmented-control__button{font-size:var(--sapphire-semantic-size-font-control-sm)}.sapphire-segmented-control__radio-input{margin:0;overflow:visible;position:absolute;top:0;left:0;height:100%;width:100%;opacity:.0001;z-index:1;cursor:pointer}.sapphire-segmented-control__button--disabled .sapphire-segmented-control__radio-input{cursor:not-allowed}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { segmentedControl: [{
+                type: ViewChild,
+                args: ['segmentedControl']
+            }], ariaLabel: [{
+                type: Input,
+                args: ['aria-label']
+            }], size: [{
+                type: Input
+            }], align: [{
+                type: Input
+            }] } });
+
+class SegmentedRadioComponent extends RadioBase {
+}
+SegmentedRadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SegmentedRadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SegmentedRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: SegmentedRadioComponent, selector: "sp-segmented-radio", inputs: { tabIndex: "tabIndex" }, host: { properties: { "class.sapphire-segmented-control__button--disabled": "disabled", "class.sapphire-segmented-control__button--active": "checked", "attr.id": "id", "attr.tabindex": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null" }, classAttribute: "sapphire-segmented-control__button" }, usesInheritance: true, hostDirectives: [{ directive: ThemeCheckDirective }, { directive: UseComponentStyles }], ngImport: i0, template: "<label [for]=\"inputId\">\n  <input\n    #input\n    _spUseComponentStyles\n    class=\"sapphire-segmented-control__radio-input\"\n    type=\"radio\"\n    [id]=\"inputId\"\n    [attr.aria-checked]=\"_getAriaChecked()\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby\"\n    [attr.aria-describedby]=\"ariaDescribedby\"\n    [attr.name]=\"name\"\n    [attr.value]=\"value\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    (change)=\"_onInputInteraction($event)\"\n    [attr.autofocus]=\"autofocus ? true : null\"\n  />\n  <ng-content></ng-content>\n</label>\n", dependencies: [{ kind: "directive", type: UseComponentStyles, selector: "[_spUseComponentStyles]" }], changeDetection: i0.ChangeDetectionStrategy.Default });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SegmentedRadioComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sp-segmented-radio', changeDetection: ChangeDetectionStrategy.Default, hostDirectives: [ThemeCheckDirective, UseComponentStyles], inputs: ['tabIndex'], host: {
+                        class: 'sapphire-segmented-control__button',
+                        '[class.sapphire-segmented-control__button--disabled]': 'disabled',
+                        '[class.sapphire-segmented-control__button--active]': 'checked',
+                        '[attr.id]': 'id',
+                        '[attr.tabindex]': 'null',
+                        '[attr.aria-label]': 'null',
+                        '[attr.aria-labelledby]': 'null',
+                        '[attr.aria-describedby]': 'null',
+                    }, template: "<label [for]=\"inputId\">\n  <input\n    #input\n    _spUseComponentStyles\n    class=\"sapphire-segmented-control__radio-input\"\n    type=\"radio\"\n    [id]=\"inputId\"\n    [attr.aria-checked]=\"_getAriaChecked()\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby\"\n    [attr.aria-describedby]=\"ariaDescribedby\"\n    [attr.name]=\"name\"\n    [attr.value]=\"value\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    (change)=\"_onInputInteraction($event)\"\n    [attr.autofocus]=\"autofocus ? true : null\"\n  />\n  <ng-content></ng-content>\n</label>\n" }]
+        }] });
+
 class SapphireRadioModule {
 }
 SapphireRadioModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SapphireRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SapphireRadioModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.0", ngImport: i0, type: SapphireRadioModule, declarations: [RadioComponent, RadioGroupComponent], imports: [CommonModule, LabelComponent, A11yModule, SapphireFieldModule], exports: [RadioComponent, RadioGroupComponent, SapphireFieldModule] });
-SapphireRadioModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SapphireRadioModule, imports: [CommonModule, LabelComponent, A11yModule, SapphireFieldModule, SapphireFieldModule] });
+SapphireRadioModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.0", ngImport: i0, type: SapphireRadioModule, declarations: [RadioComponent,
+        RadioGroupComponent,
+        SegmentedRadioComponent,
+        SegmentedRadioGroupComponent], imports: [CommonModule,
+        LabelComponent,
+        A11yModule,
+        SapphireFieldModule,
+        UseComponentStyles], exports: [RadioComponent,
+        RadioGroupComponent,
+        SegmentedRadioComponent,
+        SegmentedRadioGroupComponent,
+        SapphireFieldModule] });
+SapphireRadioModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SapphireRadioModule, imports: [CommonModule,
+        LabelComponent,
+        A11yModule,
+        SapphireFieldModule, SapphireFieldModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: SapphireRadioModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [RadioComponent, RadioGroupComponent],
-                    imports: [CommonModule, LabelComponent, A11yModule, SapphireFieldModule],
-                    exports: [RadioComponent, RadioGroupComponent, SapphireFieldModule],
+                    declarations: [
+                        RadioComponent,
+                        RadioGroupComponent,
+                        SegmentedRadioComponent,
+                        SegmentedRadioGroupComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        LabelComponent,
+                        A11yModule,
+                        SapphireFieldModule,
+                        UseComponentStyles,
+                    ],
+                    exports: [
+                        RadioComponent,
+                        RadioGroupComponent,
+                        SegmentedRadioComponent,
+                        SegmentedRadioGroupComponent,
+                        SapphireFieldModule,
+                    ],
                 }]
         }] });
 
@@ -6919,12 +7197,12 @@ class ModalService {
         return this.open(componentOrTemplateRef, options, this.overlay.position().global().right());
     }
 }
-ModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalService, deps: [{ token: i1$5.Dialog }, { token: i1$3.Overlay }], target: i0.ɵɵFactoryTarget.Injectable });
+ModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalService, deps: [{ token: i1$6.Dialog }, { token: i1$3.Overlay }], target: i0.ɵɵFactoryTarget.Injectable });
 ModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: i1$5.Dialog }, { type: i1$3.Overlay }]; } });
+        }], ctorParameters: function () { return [{ type: i1$6.Dialog }, { type: i1$3.Overlay }]; } });
 
 /**
  * Monitors host element's **scrolled** and **scrollable** state.
@@ -7040,7 +7318,7 @@ class ModalCloseButtonDirective {
         this.dialogRef?.close();
     }
 }
-ModalCloseButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalCloseButtonDirective, deps: [{ token: TranslateService }, { token: i1$5.DialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+ModalCloseButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalCloseButtonDirective, deps: [{ token: TranslateService }, { token: i1$6.DialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
 ModalCloseButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: ModalCloseButtonDirective, selector: "button[spModalCloseButton]", host: { listeners: { "click": "close()" }, properties: { "attr.aria-label": "dismissLabel" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalCloseButtonDirective, decorators: [{
             type: Directive,
@@ -7050,7 +7328,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                         '[attr.aria-label]': 'dismissLabel',
                     },
                 }]
-        }], ctorParameters: function () { return [{ type: TranslateService }, { type: i1$5.DialogRef, decorators: [{
+        }], ctorParameters: function () { return [{ type: TranslateService }, { type: i1$6.DialogRef, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { close: [{
                 type: HostListener,
@@ -7171,7 +7449,7 @@ class ModalBaseComponent {
         this.dialogRef.immediateClose();
     }
 }
-ModalBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalBaseComponent, deps: [{ token: i1$5.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
+ModalBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalBaseComponent, deps: [{ token: i1$6.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
 ModalBaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: ModalBaseComponent, selector: "ng-component", inputs: { ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledBy: ["aria-labelledby", "ariaLabelledBy"], ariaDescribedBy: ["aria-describedby", "ariaDescribedBy"], role: "role" }, host: { properties: { "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null", "attr.role": "null" } }, queries: [{ propertyName: "header", first: true, predicate: ModalHeaderDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: ModalBaseComponent, decorators: [{
             type: Component,
@@ -7186,7 +7464,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                         '[attr.role]': 'null',
                     },
                 }]
-        }], ctorParameters: function () { return [{ type: i1$5.DialogRef }]; }, propDecorators: { ariaLabel: [{
+        }], ctorParameters: function () { return [{ type: i1$6.DialogRef }]; }, propDecorators: { ariaLabel: [{
                 type: Input,
                 args: ['aria-label']
             }], ariaLabelledBy: [{
@@ -7217,7 +7495,7 @@ class DialogComponent extends ModalBaseComponent {
         this.size = 'sm';
     }
 }
-DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DialogComponent, deps: [{ token: i1$5.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
+DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DialogComponent, deps: [{ token: i1$6.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
 DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: DialogComponent, selector: "sp-dialog", inputs: { size: "size" }, host: { properties: { "class.sapphire-dialog--xs": "size === 'xs'", "class.sapphire-dialog--sm": "size === 'sm'", "class.sapphire-dialog--md": "size === 'md'", "class.sapphire-dialog--lg": "size === 'lg'", "class.sapphire-dialog--exiting": "dialogRef.closing" }, classAttribute: "sapphire-dialog" }, usesInheritance: true, hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}.sapphire-dialog{border-radius:var(--sapphire-semantic-size-radius-lg);background-color:var(--sapphire-semantic-color-background-surface);font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-content-default-primary);box-sizing:border-box;overflow:hidden;max-height:90vh;max-width:90vw;display:flex;flex-direction:column;outline:none;animation-name:fade-in;animation-duration:var(--sapphire-semantic-time-fade-default);animation-timing-function:ease-in-out;animation-fill-mode:forwards}.sapphire-dialog--exiting{animation-name:fade-out}.sapphire-dialog--xs{width:var(--sapphire-global-size-generic-800)}.sapphire-dialog--sm{width:var(--sapphire-global-size-generic-1400)}.sapphire-dialog--md{width:var(--sapphire-global-size-generic-1920)}.sapphire-dialog--lg{width:var(--sapphire-global-size-generic-2560)}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
@@ -7229,7 +7507,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                         '[class.sapphire-dialog--lg]': "size === 'lg'",
                         '[class.sapphire-dialog--exiting]': 'dialogRef.closing',
                     }, hostDirectives: [UseComponentStylesOnHost], styles: ["@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}.sapphire-dialog{border-radius:var(--sapphire-semantic-size-radius-lg);background-color:var(--sapphire-semantic-color-background-surface);font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-content-default-primary);box-sizing:border-box;overflow:hidden;max-height:90vh;max-width:90vw;display:flex;flex-direction:column;outline:none;animation-name:fade-in;animation-duration:var(--sapphire-semantic-time-fade-default);animation-timing-function:ease-in-out;animation-fill-mode:forwards}.sapphire-dialog--exiting{animation-name:fade-out}.sapphire-dialog--xs{width:var(--sapphire-global-size-generic-800)}.sapphire-dialog--sm{width:var(--sapphire-global-size-generic-1400)}.sapphire-dialog--md{width:var(--sapphire-global-size-generic-1920)}.sapphire-dialog--lg{width:var(--sapphire-global-size-generic-2560)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$5.DialogRef }]; }, propDecorators: { size: [{
+        }], ctorParameters: function () { return [{ type: i1$6.DialogRef }]; }, propDecorators: { size: [{
                 type: Input
             }] } });
 
@@ -7496,7 +7774,7 @@ class PanelComponent extends ModalBaseComponent {
         this.size = 'lg';
     }
 }
-PanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PanelComponent, deps: [{ token: i1$5.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
+PanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PanelComponent, deps: [{ token: i1$6.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
 PanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.0", type: PanelComponent, selector: "sp-panel", inputs: { size: "size" }, host: { properties: { "class.sapphire-panel--sm": "size === \"sm\"", "class.sapphire-panel--visible": "!dialogRef.closing" }, classAttribute: "sapphire-panel" }, usesInheritance: true, hostDirectives: [{ directive: UseComponentStylesOnHost }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".sapphire-panel{box-sizing:border-box;overflow:hidden;max-width:100%;display:block;height:100%;outline:0;transition:transform var(--sapphire-semantic-time-motion-default) ease-in-out;transform:translate(100%);width:var(--sapphire-semantic-size-width-panel-lg)}.sapphire-panel--visible{transform:translate(0)}.sapphire-panel--sm{width:var(--sapphire-semantic-size-width-panel-sm)}.sapphire-modal-layout{display:flex;flex-direction:column;height:100%;min-height:0;background-color:var(--sapphire-semantic-color-background-surface);font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-content-default-primary)}.sapphire-modal-layout__header-container{flex-shrink:0}.sapphire-modal-layout__header{display:flex;justify-content:space-between;padding:var(--sapphire-semantic-size-spacing-50) var(--sapphire-semantic-size-spacing-container-horizontal-md);gap:var(--sapphire-semantic-size-spacing-30)}.sapphire-modal-layout__body{overflow-y:auto;overflow-x:hidden;flex-grow:1;padding:0 var(--sapphire-semantic-size-spacing-container-horizontal-md)}.sapphire-modal-layout__body.sapphire-modal-layout__body--no-padding{padding:0}.sapphire-modal-layout__footer-container{flex-shrink:0}.sapphire-modal-layout__footer{padding:var(--sapphire-semantic-size-spacing-70) var(--sapphire-semantic-size-spacing-container-horizontal-md) var(--sapphire-semantic-size-spacing-70) var(--sapphire-semantic-size-spacing-container-horizontal-md)}.sapphire-modal-layout__heading-container{flex:1;padding:var(--sapphire-semantic-size-spacing-20) 0;display:flex;flex-direction:column;justify-content:center;word-break:break-word}.sapphire-modal-layout__subheading{color:var(--sapphire-semantic-color-content-default-secondary);margin-top:var(--sapphire-semantic-size-spacing-20)}.sapphire-modal-layout__header-container+.sapphire-modal-layout__body{border-top:var(--sapphire-semantic-size-border-sm) solid transparent}.sapphire-modal-layout__header-container+.sapphire-modal-layout__body.sapphire-modal-layout__body--scrolled{border-top:var(--sapphire-semantic-size-border-sm) solid var(--sapphire-semantic-color-border-separator-default)}.sapphire-modal-layout:not(:has(.sapphire-modal-layout__footer)) .sapphire-modal-layout__body:not(.sapphire-modal-layout__body--no-padding){padding-bottom:var(--sapphire-semantic-size-spacing-50)}.sapphire-modal-layout__body+.sapphire-modal-layout__footer-container{border-top:var(--sapphire-semantic-size-border-sm) solid transparent}.sapphire-modal-layout__body.sapphire-modal-layout__body--scrollable+.sapphire-modal-layout__footer-container{border-top:var(--sapphire-semantic-size-border-sm) solid var(--sapphire-semantic-color-border-separator-default)}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: PanelComponent, decorators: [{
             type: Component,
@@ -7505,7 +7783,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
                         '[class.sapphire-panel--sm]': 'size === "sm"',
                         '[class.sapphire-panel--visible]': '!dialogRef.closing',
                     }, hostDirectives: [UseComponentStylesOnHost], styles: [".sapphire-panel{box-sizing:border-box;overflow:hidden;max-width:100%;display:block;height:100%;outline:0;transition:transform var(--sapphire-semantic-time-motion-default) ease-in-out;transform:translate(100%);width:var(--sapphire-semantic-size-width-panel-lg)}.sapphire-panel--visible{transform:translate(0)}.sapphire-panel--sm{width:var(--sapphire-semantic-size-width-panel-sm)}.sapphire-modal-layout{display:flex;flex-direction:column;height:100%;min-height:0;background-color:var(--sapphire-semantic-color-background-surface);font-family:var(--sapphire-semantic-font-name-default);color:var(--sapphire-semantic-color-content-default-primary)}.sapphire-modal-layout__header-container{flex-shrink:0}.sapphire-modal-layout__header{display:flex;justify-content:space-between;padding:var(--sapphire-semantic-size-spacing-50) var(--sapphire-semantic-size-spacing-container-horizontal-md);gap:var(--sapphire-semantic-size-spacing-30)}.sapphire-modal-layout__body{overflow-y:auto;overflow-x:hidden;flex-grow:1;padding:0 var(--sapphire-semantic-size-spacing-container-horizontal-md)}.sapphire-modal-layout__body.sapphire-modal-layout__body--no-padding{padding:0}.sapphire-modal-layout__footer-container{flex-shrink:0}.sapphire-modal-layout__footer{padding:var(--sapphire-semantic-size-spacing-70) var(--sapphire-semantic-size-spacing-container-horizontal-md) var(--sapphire-semantic-size-spacing-70) var(--sapphire-semantic-size-spacing-container-horizontal-md)}.sapphire-modal-layout__heading-container{flex:1;padding:var(--sapphire-semantic-size-spacing-20) 0;display:flex;flex-direction:column;justify-content:center;word-break:break-word}.sapphire-modal-layout__subheading{color:var(--sapphire-semantic-color-content-default-secondary);margin-top:var(--sapphire-semantic-size-spacing-20)}.sapphire-modal-layout__header-container+.sapphire-modal-layout__body{border-top:var(--sapphire-semantic-size-border-sm) solid transparent}.sapphire-modal-layout__header-container+.sapphire-modal-layout__body.sapphire-modal-layout__body--scrolled{border-top:var(--sapphire-semantic-size-border-sm) solid var(--sapphire-semantic-color-border-separator-default)}.sapphire-modal-layout:not(:has(.sapphire-modal-layout__footer)) .sapphire-modal-layout__body:not(.sapphire-modal-layout__body--no-padding){padding-bottom:var(--sapphire-semantic-size-spacing-50)}.sapphire-modal-layout__body+.sapphire-modal-layout__footer-container{border-top:var(--sapphire-semantic-size-border-sm) solid transparent}.sapphire-modal-layout__body.sapphire-modal-layout__body--scrollable+.sapphire-modal-layout__footer-container{border-top:var(--sapphire-semantic-size-border-sm) solid var(--sapphire-semantic-color-border-separator-default)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$5.DialogRef }]; }, propDecorators: { size: [{
+        }], ctorParameters: function () { return [{ type: i1$6.DialogRef }]; }, propDecorators: { size: [{
                 type: Input
             }] } });
 
@@ -8510,5 +8788,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BadgeComponent, BasicSelectComponent, BasicSingleSelectDirective, ButtonComponent, ButtonGroupComponent, ButtonIconDirective, CheckboxChange, CheckboxComponent, CheckboxGroupComponent, ConfirmationDialogComponent, DEFAULT_BREAKPOINTS, DangerDialogComponent, DialogComponent, DialogTriggerDirective, FieldComponent, FieldControl, FieldErrorDirective, FieldLabelDirective, FieldNoteDirective, FieldNoteSuffixDirective, FocusedDirective, HeadingComponent, HelpButtonComponent, HelpButtonContentDirective, HelpButtonFooterDirective, HelpButtonHeaderDirective, ICON_SIZE_PROVIDER, IconButtonComponent, IconComponent, LabelComponent, LinkComponent, ListboxChild, ListboxComponent, ListboxInputDirective, MenuComponent, MenuIconComponent, MenuItemComponent, MenuPrimaryTextComponent, MenuSecondaryTextComponent, MenuSectionComponent, MenuTriggerDirective, ModalBackButtonDirective, ModalBodyComponent, ModalCloseButtonDirective, ModalFooterComponent, ModalFooterDirective, ModalHeaderComponent, ModalHeaderDirective, ModalLayoutComponent, ModalService, MultiSelectDirective, NotificationBadgeComponent, OptionComponent, OptionIconDirective, OptionPrimaryTextDirective, OptionSecondaryTextDirective, POPOVER_TRIGGER, PaginationComponent, PanelComponent, PanelTriggerDirective, ParagraphComponent, PopoverCloseButtonDirective, PopoverComponent, PopoverTitleDirective, PopoverTriggerDirective, PressedDirective, RadioComponent, RadioGroupComponent, SapphireBadgeModule, SapphireButtonModule, SapphireCheckboxModule, SapphireCheckboxRequiredValidator, SapphireCoreModule, SapphireFieldModule, SapphireHelpButtonModule, SapphireIconModule, SapphireLinkModule, SapphireListboxModule, SapphireMenuModule, SapphireModalModule, SapphireNotificationBadgeModule, SapphireOverlayContainer, SapphirePaginationChange, SapphirePaginationModule, SapphirePopoverModule, SapphireRadioChange, SapphireRadioModule, SapphireSegmentedTabsModule, SapphireSelectModule, SapphireSkeletonModule, SapphireSurfaceModule, SapphireSwitchChange, SapphireSwitchModule, SapphireSwitchRequiredValidator, SapphireTableModule, SapphireTextFieldModule, SapphireThemeModule, SapphireToggleButtonRequiredValidator, SapphireTooltipModule, SapphireTypographyModule, ScrollMonitorDirective, SearchableSelectDirective, SectionDirective, SegmentedTabComponent, SegmentedTabContentDirective, SegmentedTabLabelDirective, SegmentedTabsComponent, SelectComponent, SelectionTextDirective, SingleSelectDirective, SkeletonBlockDirective, SkeletonCircleDirective, SkeletonComponent, SkeletonTextDirective, SurfaceComponent, SwitchComponent, TableBodyDirective, TableCellDirective, TableComponent, TableDirective, TableFooterDirective, TableHeadCellComponent, TableHeadDirective, TableRowDirective, TableSortDirective, TableSortHeaderDirective, TextFieldComponent, TextFieldInputDirective, TextFieldPostfixDirective, TextFieldPrefixDirective, TextFieldTextareaAutosizeDirective, ThemeBaseDirective, ThemeCheckDirective, ThemeDefault, ThemeDefaultDark, ThemeRootDirective, ToggleButtonComponent, TooltipComponent, TooltipDirective, TranslatePipe, TranslateService, TruncatedWithTooltipDirective, UseComponentStyles, UseComponentStylesOnHost, ViewEncapsulationProvider };
+export { BadgeComponent, BasicSelectComponent, BasicSingleSelectDirective, ButtonComponent, ButtonGroupComponent, ButtonIconDirective, CdkVirtualScrollViewportFixDirective, CheckboxChange, CheckboxComponent, CheckboxGroupComponent, ConfirmationDialogComponent, DEFAULT_BREAKPOINTS, DangerDialogComponent, DialogComponent, DialogTriggerDirective, FieldComponent, FieldControl, FieldErrorDirective, FieldLabelDirective, FieldNoteDirective, FieldNoteSuffixDirective, FocusedDirective, HeadingComponent, HelpButtonComponent, HelpButtonContentDirective, HelpButtonFooterDirective, HelpButtonHeaderDirective, ICON_SIZE_PROVIDER, IconButtonComponent, IconComponent, LabelComponent, LinkComponent, ListboxChild, ListboxComponent, ListboxInputDirective, MenuComponent, MenuIconComponent, MenuItemComponent, MenuPrimaryTextComponent, MenuSecondaryTextComponent, MenuSectionComponent, MenuTriggerDirective, ModalBackButtonDirective, ModalBodyComponent, ModalCloseButtonDirective, ModalFooterComponent, ModalFooterDirective, ModalHeaderComponent, ModalHeaderDirective, ModalLayoutComponent, ModalService, MultiSelectDirective, NotificationBadgeComponent, OptionComponent, OptionIconDirective, OptionPrimaryTextDirective, OptionSecondaryTextDirective, POPOVER_TRIGGER, PaginationComponent, PanelComponent, PanelTriggerDirective, ParagraphComponent, PopoverCloseButtonDirective, PopoverComponent, PopoverTitleDirective, PopoverTriggerDirective, PressedDirective, RadioComponent, RadioGroupComponent, SapphireBadgeModule, SapphireButtonModule, SapphireCheckboxModule, SapphireCheckboxRequiredValidator, SapphireCoreModule, SapphireFieldModule, SapphireHelpButtonModule, SapphireIconModule, SapphireLinkModule, SapphireListboxModule, SapphireMenuModule, SapphireModalModule, SapphireNotificationBadgeModule, SapphireOverlayContainer, SapphirePaginationChange, SapphirePaginationModule, SapphirePopoverModule, SapphireRadioModule, SapphireSegmentedTabsModule, SapphireSelectModule, SapphireSkeletonModule, SapphireSurfaceModule, SapphireSwitchChange, SapphireSwitchModule, SapphireSwitchRequiredValidator, SapphireTableModule, SapphireTextFieldModule, SapphireThemeModule, SapphireToggleButtonRequiredValidator, SapphireTooltipModule, SapphireTypographyModule, ScrollMonitorDirective, SearchableSelectDirective, SectionDirective, SegmentedRadioComponent, SegmentedRadioGroupComponent, SegmentedTabComponent, SegmentedTabContentDirective, SegmentedTabLabelDirective, SegmentedTabsComponent, SelectComponent, SelectionTextDirective, SingleSelectDirective, SkeletonBlockDirective, SkeletonCircleDirective, SkeletonComponent, SkeletonTextDirective, SurfaceComponent, SwitchComponent, TableBodyDirective, TableCellDirective, TableComponent, TableDirective, TableFooterDirective, TableHeadCellComponent, TableHeadDirective, TableRowDirective, TableSortDirective, TableSortHeaderDirective, TextFieldComponent, TextFieldInputDirective, TextFieldPostfixDirective, TextFieldPrefixDirective, TextFieldTextareaAutosizeDirective, ThemeBaseDirective, ThemeCheckDirective, ThemeDefault, ThemeDefaultDark, ThemeRootDirective, ToggleButtonComponent, TooltipComponent, TooltipDirective, TranslatePipe, TranslateService, TruncatedWithTooltipDirective, UseComponentStyles, UseComponentStylesOnHost, ViewEncapsulationProvider };
 //# sourceMappingURL=danske-sapphire-angular.mjs.map